commit to user 15
3.3 Perancangan Aplikasi 3.3.1
Content
Aplikasi ini nantinya akan menampilkan beberapa
content
yang nantinya berguna sebagai isi dari
company profile
DIII – Teknik
Informatika Universitas Sebelas Maret Surakarta. Di dalam
content
-
content
tersebut dibagi menjadi beberapa jenis
content
yang berbeda. Mengenai
content
dapat dilihat di tabel 3.1. Table 3.1 Tabel
Content
3.3.2 Struktur Aplikasi
Pembuatan aplikasi
Company Profile
DIII – Teknik Informatika
Universitas Sebelas Maret Surakarta dibagi menjadi 5
content
utama, untuk masing-masing menu tersebut memiliki isi
content
yang berbeda. Struktur navigasi yang digunakan adalah model
site map.
Lihat gambar 3.2
Site Map
Aplikasi.
Beranda Sertifikasi
Galeri Film
Keluar Prof
il V
isi Mi
si Str
uk tu
r O rgan
is
as i
Fasi lit
as D
ose n Peng
aj ar
Pengena lan
K ont
ak Fasi
lit as
JEN I
C ISC
O
commit to user 16
Gambar 3.2
Site Map
Aplikasi
3.4 Rancangan Desain Antarmuka Aplikasi
Sebelum membuat aplikasi
company profile
DIII – Teknik Informatika
Universitas Sebelas Maret Surakarta terlebih dahulu dibuat rancangan mengenai desain antarmuka aplikasi. Rancangan desain antarmuka aplikasi
terdiri dari :
Opening
, Menu Utama, Sertifikasi, Galeri, Film dan Keluar.
Berikut adalah rancangan desain antarmuka
company profile
.
3.4.1 Desain
Opening
Dalam pembuatan
company profile
DIII –Teknik Informatika
Universitas Sebelas Maret Surakarta pertama-tama
user
akan disambut dengan
opening program
.
Opening
ini berupa animasi gambar dan tulisan mengenai DIII
–Teknik Informatika Universitas Sebelas Maret Surakarta. Berikut gambar desain
Opening
dapat dilihat di Gambar 3.3 Desain
Opening
.
commit to user 17
Gambar 3.3 Desain
Opening
Dalam desain
opening
disediakan juga menu pilihan untuk memilih bahasa yang dipakai dalam menjalankan
company profile
DIII-Teknik Komputer.
3.4.2 Desain Tampilan Utama dan Beranda
Desain Tampilan Utama disini merupakan tampilan yang nantinya akan diisi dengan menu beserta animasi agar menjadi lebih menarik dan
elegan. Berikut adalah gambaran desain Tampilan Utama dan Beranda. Lihat Gambar 3.4 Desain Tampilan Utama.
Gambar 3.4 Desain Tampilan Utama
3.4.3 Desain Sertifikasi
Sertifikasi merupakan salah satu
content
utama dalam
company profile
DIII – Teknik Informatika Universitas Sebelas Maret Surakarta.
Didalam
content
tersebut terdapat beberapa sub
content
yaitu : Pengenalan, Kontak, Fasilitas, Jeni dan CISCO. Berikut gambar desain
sertifikasi dapat dilihat pada Gambar 3.5 Desain Sertifikasi.
commit to user 18
Gambar 3.5 Desain Sertifikasi
3.4.4 Desain Galeri
Dalam
company profile
ini terdapat
content
galeri yang berfungsi sebagai
tempat foto-foto
dokumentasi mengenai
DIII-Teknik Informatika Universitas Sebelas Maret Surakarta. Berikut Desain
tampilan antarmuka galeri dapat dilihat di Gambar 3.6.
Gambar 3.6 Desain Galeri
3.4.5 Desain Film
Salah satu
content
yang menarik dari
company profile
DIII –Teknik
Informatika Universitas Sebelas Maret Surakarta adalah terdapat juga film dari
company profile
. Menu film ini nantinya berisikan beberapa video berformat .flv dengan komponen berupa pemutar video dan
playlist
video. Video yang digunakan nantinya menjadi
external file
dalam
company profile
interaktif. Dalam hal ini desain tampilan untuk menu film dapat dilihat pada gambar 3.7.
commit to user 19
Gambar 3.7 Desain Film
3.4.6 Desain Keluar
Saat mengahkiri aplikasi, nantinya pengguna akan diberikan tampilan
closing
berupa animasi flash. Nantinya ini merupakan bagian ahkir dari
company profile
interaktif DIII – Teknik Informatika
Universitas Sebelas Maret Surakarta. Desain untuk keluar dapat dilihat di gambar 3.8.
Gambar 3.8 Desain keluar
3.4.6 Desain
Update
Informasi
Salah satu menu tambahan untuk
company profile
adalah
Update
informasi. Dalam pembuatan menu tambahan
Update
informasi menggunakan php. Didalamnya tersedia menu edit informasi untuk
submenu beranda, submenu sertifikasi dan tambah gambar pada galeri dalam
company profile
. Dalam rancangan desain dari
Gallery
informasi pemakaiaan php digunakan untuk memperoleh inputan informasi baru yang digunakan
untuk meng
Update
informasi yang ada pada xml. diagram konteks untuk
Update
informasi dapat dilihat pada gambar 3.9.
commit to user 20
Gambar 3.9 Diagram Konteks
Update
Informasi Keterangan :
1. Kelola data Informasi
2. Lihat data Informasi
3. Lihat data Informasi
4. Request data Informasi
DFD Level 0
Gambar 3.10 DFD Level 0 Keterangan :
1. Kelola data Beranda, Sertifikasi,
Gallery
2. Lihat data Beranda, Sertifikasi,
Gallery
3. data Beranda_new
4. data Beranda
5. data Sertifikasi_new
commit to user 21
6. data Sertifikasi
7. data
Gallery_new
8. data
Gallery
9. data Beranda_new
10. data Beranda
11. data Sertifikasi_new
12. data Sertifikasi
13. data Gallery_new
14. data Gallery
15. Request data Beranda, data Sertifikasi, data
Gallery
16. Lihat data Beranda, data Sertifikasi, data
Gallery
DFD Level 1 untuk Kelola Data
Gambar 3.11 DFD Level 1 Kelola Data Keterangan :
1.
Update
data Beranda, Sertifikasi,
Gallery
2. data Beranda, Sertifikasi,
Gallery
3.
Update
data Beranda_new 4.
data Beranda 5.
Update
data Sertifikasi_new
commit to user 22
6. Data Sertifikasi
7.
Update
data
Gallery_new
8. data
Gallery
9. data
Gallery_new
10. data
Gallery
11. Edit data
Gallery_new
12. data
Gallery
13. data
Gallery_new
14. data
Gallery
15.
Delete
data
Gallery_new
16. data
Gallery
commit to user 23
BAB IV IMPLEMENTASI DAN ANALISA
