Bab IV Hasil dan Pembahasan
4.2 Pengembangan Website “ Youth Studies Center ”
4.2.2 Design
Tahap berikutnya adalah melakukan perancangan pada website
“Youth Studies Center”. Prosesnya melalui beberapa tahap, yaitu:
Perancangan struktur menu, perancangan layout, State Transition Diagram
(STD), pembahasan flowchart, dan perancangan basis data
1. Perancangan Struktur Menu User
Struktur menu yang penulis gambarkan merupakan struktur atas keseluruhan menu pada website “Youth Studies Center”.
Gambar 4.3. Perancangan Struktur Menu User
(Sumber : Data diolah Penulis)
Penjelasan pada gambar struktur menu utama merupakan keseluruhan website “Youth Studies Center” yang dirancang. Pada menu berita, menampilkan isi berita mengenai konflik yang terjadi di Indonesia. Isi berita dapat di update oleh petugas pemeliharaan. Pada menu forum, menampilkan isi forum. Menu forum ditampilkan secara publik. Sehingga pengunjung dapat menambah topik, melihat topik yang dibahas. Namun, untuk hapus topik dan edit topik hanya bisa dilakukan oleh petugas pemeliharaan. Pada menu youth info, menggambarkan struktur menu agenda. Menu agenda ditampilkan secara umum (public). Sehingga untuk melakukan
edit agenda, hanya bisa dilakukan oleh petugas pemeliharaan antara lain: Melihat agenda-agenda lama pada waktu lampau, edit isi agenda dan edit judul agenda. Pada menu archieve, menampilkan isi kumpulan artikel berita berupa format (*.pdf) yang bisa di-download oleh pengunjung. Namun untuk tambah artikel download, hapus artikel download hanya bisa dilakukan oleh petugas pemeliharaan. Pada menu about us, menggambarkan profil organisasi dalam bentuk informasi teks. Untuk informasi teks dapat di update oleh petugas pemeliharaan. Pada menu contact us, menggambarkan struktur isi form hubungi kami jika pengunjung ingin memberi komentar, saran, dan kritik mengenai website ini. Pada menu pencarian, menggambarkan pencarian informasi berita yang ada. Pada menu subscribe, menggambarkan isi form subscribe, jika pengunjung telah mengisi form tersebut atau telah mendaftar maka pengunjung dapat berlangganan berita atau informasi terbaru apa saja dari website ini melalui email
pengunjung. Namun, pengunjung tidak akan berlangganan jika tidak mendaftar. Pada menu chatting, menggambarkan isi form chatting, jika pengunjung sudah memiliki id dan passwordnya maka bisa langsung masuk ke halaman chatting. Namun kalau tidak maka pengunjung harus masuk ke halaman daftar terlebih dahulu.
2. Perancangan Struktur Menu Admin
Gambar 4.4. Perancangan Struktur Menu Admin (Sumber : Data diolah Penulis)
Struktur menu halaman utama admin terdiri dari menu mModul, mBerita, mForum, mAgenda, mDownload, mProfil, mHubungi, mSubscribe, mChatting, mAdmin. Administrator dapat melakukan insert, update, delete, serta view full data dalam basis data pada semua menu. Sedangkan untuk menu mHubungi dapat melakukan delete, dan balas pesan dari user. Untuk menu mAdmin, Administrator dapat melakukan insert, ubah password, serta delete pada tabel mAdmin.
3. Perancangan layout
Perancangan layout bertujuan untuk memberikan rancangan
layout menu pada website “Youth Studies Center” yaitu : a. Perancangan layout halaman admin
Gambar 4.5. Perancangan Layout Halaman Admin (Sumber : Data diolah Penulis)
Pada gambar layout halaman admin, menggambarkan rancangan layout yang berisi menu seperti: home, manajemen modul, about us, berita, forum, youth info, contact us,
download, subscribe dan chatting. Di samping menu terdapat
content yaitu isi dari pada menu-menu yang ada di samping kiri
tersebut.
b. Perancangan layout halaman utama
Gambar 4.6. Perancangan Layout Halaman Utama (Sumber : Data diolah Penulis)
Pada halaman ini ditampilkan navigation bar yang menuju ke seluruh halaman. Dan seluruh menu link tesebut ada di setiap halaman yang ada di website ini. Navigation bar ada di dua bagian dalam website, yaitu pada bagian atas dan bawah. Hal tersebut akan memudahkan pengunjung untuk menuju halaman berikutnya. Pada setiap halaman yang ditunjukan pada
navigation bar yang berada. Kemudian di bawah navigation bar yang berada pada atas halaman terdapat link menuju ke halaman Newsletter Signup.
Di bawah Newsletter Signup terdapat link Download Edisi Terbaru. Kemudian di bawah Download Edisi Terbaru terdapat
Hit Counter yang menghitung telah berapa banyak pengakses yang membuka website “Youth Studies Center”. Setelah itu yang terakhir di bawah Hit Counter terdapat link menuju ke halaman chatting. Kemudian pada content terdapat isi 3 berita terbaru yang letaknya ada di tengah-tengah.
c. Perancangan layout halaman berita
Gambar 4.7. Perancangan Layout Halaman Berita (Sumber : Data diolah Penulis)
d. Perancangan layout halaman forum
Gambar 4.8. Perancangan Layout Halaman Forum (Sumber : Data diolah Penulis)
e. Perancangan layout halaman youth info
Gambar 4.9. Perancangan Layout Halaman Youth Info
(Sumber : Data diolah Penulis)
f. Perancangan layout halaman archieve
Gambar 4.10. Perancangan Layout Halaman Archieve
(Sumber : Data diolah Penulis)
g. Perancangan layout halaman about us
Gambar 4.11. Perancangan Layout Halaman About Us
(Sumber : Data diolah Penulis)
h. Perancangan layout halaman contact us
Gambar 4.12. Perancangan Layout Halaman Contact Us
(Sumber : Data diolah Penulis)
4. State transition diagram (STD)
Pada bagian ini penulis akan menggambarkan bagaimana menu tersebut berubah dari satu keadaan ke keadaan yang lain. Perancangan State Transition Diagram (STD) digunakan untuk menggambarkan segala kemungkinan yang terjadi dari satu state
ke state yang lain, agar memperoleh proses yang lebih rinci dari suatu sistem dan mudah di baca.
a. State Transition Diagram Home
Gambar 4.13. STD Home
(Sumber : Data diolah Penulis)
b. State Transition Diagram Menu Berita
Gambar 4.14. STD Berita (Sumber : Data diolah Penulis)
c. State Transition Diagram Menu Forum
Gambar 4.15. STD Forum (Sumber : Data diolah Penulis)
d. State Transition Diagram Menu Youth Info
Gambar 4.16. STD Youth Info
(Sumber : Data diolah Penulis) e. State Transition Diagram Menu Archieve
Gambar 4.17. STD Archieve
(Sumber : Data diolah Penulis)
f. State Transition Diagram Menu About Us
Gambar 4.18. STD About Us
(Sumber : Data diolah Penulis)
g. State Transition Diagram Menu Contact Us
Gambar 4.19. STD Contact Us
(Sumber : Data diolah Penulis)
h. State Transition Diagram Menu Pencarian
Gambar 4.20. STD Pencarian (Sumber : Data diolah Penulis)
i. State Transition Diagram Menu Polling
Gambar 4.21. STD Polling
(Sumber : Data diolah Penulis)
j. State Transition Diagram Menu Chatting
Gambar 4.22. STD Chatting
(Sumber : Data diolah Penulis)
k. State Transition Diagram Menu Admin
Gambar 4.23. STD Admin (Sumber : Data diolah Penulis)
5. Pembahasan Flowchart
Untuk memberikan gambaran alir atau flowchart dari satu tampilan ke tampilan lainnya pada website ini, maka digunakan
flowchart. Berikut adalah gambar flowchart website “Youth Studies
Center”.
Gambar 4.24. Flowchart tampilan user
(Sumber : Data diolah Penulis)
Penjelasan pada gambar flowchart untuk tampilan user, dimana
user setelah membuka website ini maka akan ada tampilan layar menu home yang terdapat beberapa pilihan menu, kemudian bila
user memilih menu yang tersedia pada menu home itu maka akan tampil halaman menu yang dipilih user.
Gambar 4.25. Flowchart search engine
(Sumber : Data diolah Penulis)
Penjelasan pada gambar flowchart untuk search engine, dimana bila user bisa mencari berita yang ada di website ini pada tampilan
box search engine yang terdapat di setiap halaman website ini. Setelah selesai memasukkan pencarian berita yang ingin dicari dengan memasukkan kata kunci yang diinginkan maka akan tampil halaman hasil pencariannya.
Gambar 4.26. Flowchart polling
(Sumber : Data diolah Penulis)
Penjelasan pada gambar flowchart untuk polling, dimana user
bisa memilih menu polling yang disediakan pada website ini. Setelah selesai memilih maka akan muncul tampilan total pemilih
polling. Kemudian jika user ingin mengetahui hasil polingnya maka akan muncul halaman hasil polling.
6. Perancangan Basis Data
Berikut adalah struktur perancangan basis data yang penulis gambarkan yaitu :
Gambar 4.27 ERD Website Youth Studies Center
(Sumber : Data diolah Penulis)
Basis data yang terdapat pada gambar diatas terdiri dari tabel- tabel sebagai berikut:
Tabel 4.7 Tabel Basis Data Website “Youth Studies Center”
(Sumber : Data diolah Penulis)
No. Nama Tabel Deskripsi Jumlah
field
1. tb_modul Untuk pemberian isi
konten 9
2. tb_user Untuk menambah,
menghapus anggota. 5 3. tb_berita
Untuk menambah, mengedit, dan menghapus isi berita
8 4. tb_profil Untuk menambah, mengedit, menghapus isi profil 4 5. tb_agenda Untuk penyimpanan
agenda 9
6. tb_hubungi Untuk penyimpanan
bukutamu 6
7. tb_download Untuk penyimpanan
file-file download 8
8. tb_poling Untuk penyimpanan
poling 7
9. tb_subscribe Untuk penyimpanan
subscribe 5
10. tb_forum_posts Untuk penyimpanan
forum posts 5
11. tb_forum_topics Untuk penyimpanan
forum topics 4
12. tb_chattinganggota
Untuk penyimpanan anggota yang telah mendaftar chatting
5
13. tb_chattingmessages
Untuk menyimpan, menghapus pesan- pesan chatting yang sedang berlangsung
6
14. tb_chattingonline Untuk menyimpan user
yang sedang online 4
Gambar 4.28 Tabel Basis Data Website Youth Studies Center
(Sumber:Data diolah Penulis)
Berikut adalah spesifikasi tabel basis data yang terdapat pada
website “Youth Studies Center” : a. Tabel Modul
Tabel 4.8 Tabel Modul (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_modul int (5) auto_increment
nama_modul varchar (50)
link varchar (100)
static_content text
gambar varchar (100) public enum (‘Y’,’N’) status enum (‘user’,’admin’) aktif enum (‘Y’,’N’)
urutan int (5)
b. Tabel User
Tabel 4.9 Tabel User
(Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_user varchar (50) auto_increment password varchar (50)
nama_lengkap varchar (100) email varchar (100)
level varchar (50)
c. Tabel Profil
Tabel 4.10 Tabel Profil (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_profil int (5) auto_increment
isi text
gambar varchar (100) tgl_posting date
d. Tabel Berita
Tabel 4.11 Tabel Berita (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_berita int (5) auto_increment
id_kategori int (5) judul varchar (100) isi_berita text gambar varchar (100) hari varchar (20) tanggal date jam time
e. Tabel Forum Topics
Tabel 4.12 Tabel Forum Topics (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_topic int (11) auto_increment
topic_title varchar (150) topic_create_time datetime topic_owner varchar (150)
f. Tabel Forum Posts
Tabel 4.13 Tabel Forum Posts (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_post int (11) auto_increment
id_topic int (11) post_text text post_create_time datetime post_owner varchar (150)
g. Tabel Agenda
Tabel 4.14 Tabel Agenda (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_agenda int (5) auto_increment
tema varchar (100) isi_agenda text tempat varchar (100) tgl_mulai date tgl_selesai date tgl_posting date hari varchar (30) id_user varchar (50)
h. Tabel Hubungi Kami
Tabel 4.15 Tabel Hubungi Kami (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_hubungi int (5) auto_increment
nama varchar (50) email varchar (100) subjek varchar (100) pesan text tanggal date i. Tabel Download
Tabel 4.16 Tabel Download (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_upload int (11) auto_increment
judul varchar (100) nama_file varchar (30) ukuran int (6) tipe varchar (30) isifile mediumblob tgl_posting date direktori varchar (30) 94
j. Tabel Subscribe
Tabel 4.17 Tabel Subscribe (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_subscribe int (11) auto_increment
nama varchar (50)
email varchar (50)
status text
unsubscribe text
k. Tabel Polling
Tabel 4.18 Tabel Polling (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_poling int (4) auto_increment
pertanyaan varchar (200) pilihan_a varchar (100) pilihan_b varchar (100) hasil_a int (4) hasl_b int (4) tgl_posting date
l. Tabel Chatting Anggota
Tabel 4.19 Tabel Chatting Anggota (Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_chat int (20) auto_increment
nama varchar (255)
password varchar (255) email varchar (255)
tanggal date
m. Tabel Chatting Online
Tabel 4.20 Tabel Chatting Online
(Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_online int (20) auto_increment
session_name varchar (255)
time time
tanggal date
n. Tabel Chatting Message
Tabel 4.21 Tabel Chatting Message
(Sumber : Data diolah Penulis)
Field Name Data Type Extra
id_messages int (20) auto_increment poster varchar (255) messages mediumtext registered int (11) time time tanggal date