f. Perkiraan Biaya Perkiraan biaya pengembangan aplikasi ini dapat dilihat
pada lampiran 5.
2. Alokasi Waktu Alokasi waktu pengembangan website “Youth Studies Center”
dibutuhkan waktu kurang lebih 6 bulan terhitung dari bulan Januari-Juni 2008, untuk lengkapnya dapat dilihat pada bagian
lampiran 4.
3. Cakupan Cakupan pada website “Youth Studies Center” ini terdiri dari
dua bagian yaitu pengunjung front end, misalnya, menu berita tetapi tidak dapat melakukan perubahan yang ada di website
ini. Dan kedua administrator back end melakukan perubahan dan penambahan atas seputar informasi yang ada pada website
ini yang sesuai bagi CERIC.
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
71
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
72
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.
73
2. Perancangan Struktur Menu Admin
Gambar 4.4. Perancangan Struktur Menu Admin
Sumber : Data diolah Penulis
74
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,
75
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
76
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
77
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
78
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
79
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.
80
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
81
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
82
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
83
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
84
k. State Transition Diagram Menu Admin
Gambar 4.23. STD Admin
Sumber : Data diolah Penulis
85
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.
86
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.
87
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 :
88
Gambar 4.27 ERD Website Youth Studies Center
Sumber : Data diolah Penulis
89
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
90
Gambar 4.28 Tabel Basis Data Website Youth Studies Center
Sumber:Data diolah Penulis 91
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
92
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
93
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
95
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
4.2.3. Coding
