Perancangan Sistem ANALISA DAN PERANCANGAN SISTEM

 Periksa kesamaan tag, jika tag yang sama  Kpn maka tag lainnya dari berita tersebut ditambahkan ke tag rekomendasi berita baru seperti tabel 3.10. Tabel 3.10 Contoh Collaborative Tag Tag Hasil TF-IDF Tag Berita Lama Kesamaan Pesawat pesawat sama Temu Basarnas tidak Evakuasi Evakuasi sama Jatuh Jenazah tidak Air Asia Qz8501 Air Asia Qz8501 sama Tim Badan SAR Nasional tidak Insiden tidak Kesamaan tag  3, maka tag lainnya dimasukkan menjadi tambahan rekomendasi tag seperti tabel 3.11. Tabel 3.11 Tabel Rekomendasi Tag Akhir Pesawat Tim Temu Basarnas Evakuasi Jenazah Jatuh Badan SAR Nasional Air Asia Qz8501 Insiden  Jika tidak, maka algoritma berhenti.

3.4 Perancangan Sistem

Perancangan sistem merupakan tahapan perancangan data dan perancangan antarmuka sistem yang akan diimplementasikan pada penelitian ini. Perancangan yang dilakukan menggunakan beberapa pemodelan dari Unified Modeling Language UML yaitu usecase diagram, usecase spesification, dan activity diagram. 3.4.1 Usecase Diagram Usecase merupakan deskripsi fungsi sebuah sistem dari perspektif pengguna. Usecase dari sistem ini dapat dilihat pada gambar 3.3. Gambar 3.3 Use Case Diagram Sistem Rekomendasi Tag Usecase bekerja dengan cara mendeskripsikan tipikal interaksi antara user pengguna dengan sistem yang dibangun melalui kronologi bagaimana sistem tersebut digunakan oleh user. Pada sebuah usecase, user biasanya disebuat dengan aktor. Urutan langkah-langkah yang menerangkan antara pengguna dan sistem disebut scenario. Setiap scenario mendeskripsikan urutan kejadian. Usecase dapat terdiri dari beberapa scenario Munawar, 2005. Usecase yang dibangun pada sistem rekomendasi tag ini memiliki dua aktor yaitu General User pengguna biasa dan Admin Administrator Website. Use case ini juga terdiri dari 14 buah scenario, yakni Berita, Hubungi Kami, Sign Up, Manajemen Modul, Identitas Web, Manajemen User, Manajemen Template, Menu Utama, Sub Menu, Kategori Berita, Pengaturan Berita, TagLabel, Sensor Kata dan Manajemen Hubungi Kami. Administrator dapat mengakses seluruh scenario sedangkan general user dapat mengakses beberapa scenario yaitu scenario Berita, Sign Up, dan Hubungi Kami. 3.4.2 Usecase Specification Sebuah usecase specification menggambarkan masing-masing scenario usecase sistem yang dibangun secara lebih terperinci. Tabel usecase specification untuk scenario Berita dapat dilihat pada tabel 3.12. Tabel 3.12 Usecase Spesifikasi untuk Usecase Berita Tipe Use Case Penjelasan Nama Usecase Berita Aktor Administrator Deskripsi Usecase ini digunakan oleh aktor untuk melihat berita berdasarkan kategori. Pre condition Semua jenis user dapat mengakses usecase ini tanpa syarat apapun. Characteristic of activation Eksekusi dapat dilakukan oleh siapapun Basic flow - Aktor dapat memilih berita berdasarkan kategori beritanya. - Sistem menampilkan berita yang telah dipilih. - Usecase ini berakhir ketika sistem telah selesai menampilkan semua data berita. Alternative flow - Post condition Pada use case ini user dapat melihat halaman berita. Limitations - Scenario usecase Hubungi Kami dapat dilihat pada tabel 3.13. Tabel 3.13 Usecase Spesifikasi untuk Usecase Hubungi Kami Tipe Use Case Penjelasan Nama Usecase Hubungi Kami Aktor Administrator dan User Deskripsi Usecase ini digunakan oleh user untuk memberikan masukan atau pesan kepada administrator website. Pre condition Semua jenis user dapat mengakses usecase ini tanpa syarat apapun. Characteristic of activation Eksekusi dapat dilakukan oleh user dan administrator. Basic flow - Aktor memilih menu hubungi kami. - Sistem menampilkan halaman hubungi kami. - Aktor dapat memasukkan nama, email, subjek pesan, isi pesan, dan kode unik yang telah disediakan serta memilih tombol Kirim untuk mengirim pesan. - Usecase ini berakhir ketika sistem telah selesai menampilkan halaman hubungi kami atau telah selesai mengirim pesan. Alternative flow - Tabel 3.13 Usecase Spesifikasi untuk Usecase Hubungi Kami Lanjutan Tipe Use Case Penjelasan Post condition Pada usecase ini aktor dapat melihat halaman hubungi kami dan mngirim pesan ke email administrator Limitations - Scenario usecase Sign Up dapat dilihat pada tabel 3.14. Tabel 3.14 Usecase Spesifikasi untuk Usecase Sign Up Tipe Use Case Penjelasan Nama Usecase Sign Up Aktor Administrator dan User Deskripsi Usecase ini digunakan oleh aktor untuk menjadi Anggota Pre condition Semua jenis user dapat mengakses usecase ini tanpa syarat apapun. Characteristic of activation Eksekusi dapat dilakukan oleh siapapun Basic flow - Aktor memilih menu Sign Up. - Sistem menampilkan halaman Sign Up. - Aktor dapat memilih mengisi data diri pada formulir dan menekan tombol Sign Up. - Usecase ini berakhir ketika sistem telah selesai menampilkan halaman Sign Up atau telah selesai mendaftar. Alternative flow - Post condition Pada use case ini user dapat mendaftarkan diri pada website ini. Limitations - Scenario usecase Manajemen Modul dapat dilihat pada tabel 3.15. Tabel 3.15 Usecase Spesifikasi untuk Usecase Manajemen Modul Tipe Use Case Penjelasan Nama Usecase Manajemen Modul Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur manajemen modul. Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu manajemen modul - Sistem menampilkan halaman manajemen modul. - Administrator menambah, mengedit, dan menghapus data modul. - Use case ini berakhir ketika sistem telah selesai menampilkan seluruh halaman Manajemen Modul. Tabel 3.15 Usecase Spesifikasi untuk Usecase Manajemen Modul Lanjutan Tipe Use Case Penjelasan Alternative flow - Post condition Pada use case ini user dapat menambah, mengedit, dan menghapus data Manajemen Modul. Limitations - Scenario usecase Identitas Web dapat dilihat pada tabel 3.16. Tabel 3.16 Usecase Spesifikasi untuk Usecase Identitas Web Tipe Use Case Penjelasan Nama Usecase Identitas Web Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur manajemen modul. Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu identitas web. - Sistem menampilkan halaman identitas web. - Administrator mengedits data identitas web. - Use case ini berakhir ketika sistem telah selesai menampilkan seluruh halaman Identitas Web atau telah selesai mengedit data. Alternative flow - Post condition Pada use case ini user dapat mengedit data Manajemen Modul. Limitations - Scenario usecase Manajemen User dapat dilihat pada tabel 3.17. Tabel 3.17 Usecase Spesifikasi untuk Usecase Manajemen User Tipe Use Case Penjelasan Nama Usecase Manajemen User Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur manajemen modul. Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu manajemen user - Sistem menampilkan halaman manajemen user. - Administrator menambah, mengedit, dan menghapus data user. - Use case ini berakhir ketika sistem telah selesai menampilkan seluruh halaman Manajemen User. Tabel 3.17 Usecase Spesifikasi untuk Usecase Manajemen User Lanjutan Tipe Use Case Penjelasan Alternative flow - Post condition Pada use case ini user dapat menambah, mengedit, dan menghapus data Manajemen User. Limitations - Scenario usecase Manajemen Template dapat dilihat pada tabel 3.18. Tabel 3.18 Usecase Spesifikasi untuk Usecase Manajemen Template Tipe Use Case Penjelasan Nama Usecase Manajemen Template Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur manajemen Template . Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu manajemen template. - Sistem menampilkan halaman manajemen template . - Administrator menambah, mengedit, dan menghapus data template . - Use case ini berakhir ketika sistem telah selesai menampilkan seluruh halaman Manajemen template . Alternative flow - Post condition Pada use case ini user dapat menambah, meng-edit, dan menghapus data Manajemen Template . Limitations - Scenario usecase Menu Utama dapat dilihat pada tabel 3.19. Tabel 3.19 Usecase Spesifikasi untuk Usecase Menu Utama Tipe Use Case Penjelasan Nama Usecase Menu Utama Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur menu-menu dan sub menu-sub menu yang ada pada menu website. Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Tabel 3.19 Usecase Spesifikasi untuk Usecase Menu Utama Lanjutan Tipe Use Case Penjelasan Basic flow - Administrator mengklik menu menu utama. - Sistem menampilkan halaman halaman menu utama. - Administrator menambah, mengedit, dan menghapus data menu website. - Use case ini berakhir ketika sistem telah selesai menampilkan semua menu utama website. Alternative flow - Post condition Pada use case ini user dapat menambah dan mengedit menu utama. Limitations - Scenario usecase Sub Menu dapat dilihat pada tabel 3.20. Tabel 3.20 Usecase Spesifikasi untuk Usecase Sub Menu Tipe Use Case Penjelasan Nama Usecase Sub Menu Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur sub menu- sub menu yang ada pada menu website. Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu sub menu. - Sistem menampilkan halaman halaman sub menu. - Administrator dapat menambah, mengedit, dan menghapus data sub menu website. - Use case ini berakhir ketika sistem telah selesai menampilkan seluruh halaman sub menu website. Alternative flow - Post condition Pada use case ini user dapat menambah, mengedit, menghapus sub menu. Limitations - Scenario usecase Manajemen Hubungi Kami dapat dilihat pada tabel 3.21. Tabel 3.21 Usecase Spesifikasi untuk Usecase Manajemen Hubungi Kami Tipe Use Case Penjelasan Nama Usecase Manajemen Hubungi Kami Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur email administrator yang akan menerima pesan dari user. Pre condition Administrator harus memiliki username dan password untuk login ke sistem Tabel 3.21 Usecase Spesifikasi untuk Usecase Manajemen Hubungi Kami Lanjutan Tipe Use Case Penjelasan Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu hubungi kami. - Sistem menampilkan halaman manajemen hubungi kami. - Administrator mengedit data email. - Use case ini berakhir ketika sistem telah selesai menampilkan semua manajemen hubungi kami. Alternative flow - Post condition Pada usecase ini user dapat menambah dan mengedit data email. Limitations - Scenario usecase Manajemen Berita dapat dilihat pada tabel 3.22. Tabel 3.22 Usecase Spesifikasi untuk Usecase Manajemen Berita Tipe Use Case Penjelasan Nama Usecase Manajemen Berita Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur data berita yang ada pada website. Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu berita. - Sistem menampilkan halaman manajemen berita. - Administrator menambah, mengedit, dan menghapus data berita. - Use case ini berakhir ketika sistem telah selesai menampilkan semua manajemen berita. Alternative flow - Post condition Pada use case ini user dapat menambah, mengedit dan menghapus data berita. Limitations - Scenario usecase Sensor Kata dapat dilihat pada tabel 3.23. Tabel 3.23 Usecase Spesifikasi untuk Usecase Sensor Kata Tipe Use Case Penjelasan Nama Usecase Sensor Kata Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur data sensor kata. Tabel 3.23 Usecase Spesifikasi untuk Usecase Sensor Kata Lanjutan Tipe Use Case Penjelasan Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu sensor kata. - Sistem menampilkan halaman sensor kata. - Administrator menambah, mengedit, dan menghapus data sensor kata. - Use case ini berakhir ketika sistem telah selesai menampilkan semua manajemen sensor kata. Alternative flow - Post condition Pada use case ini user dapat menambah, mengedit dan menghapus data sensor kata. Limitations - Scenario usecase Kategori Berita dapat dilihat pada tabel 3.24. Tabel 3.24 Usecase Spesifikasi untuk Usecase Kategori Berita Tipe Use Case Penjelasan Nama Usecase Kategori Berita Aktor Administrator Deskripsi Usease ini digunakan oleh administrator untuk mengatur data kategori berita yang ada pada website. Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu kategori berita. - Sistem menampilkan halaman kategori berita. - Administrator menambah, mengedit, dan menghapus katagori berita. - Use case ini berakhir ketika sistem telah selesai menampilkan semua katagori berita. Alternative flow - Post condition Pada use case ini user dapat menambah, mengedit dan menghapus data kategori berita. Limitations - Scenario usecase TagLabel dapat dilihat pada tabel 3.25. Tabel 3.25 Usecase Spesifikasi untuk Usecase TagLabel Tipe Use Case Penjelasan Nama Usecase TagLabel Aktor Administrator Tabel 3.25 Usecase Spesifikasi untuk Usecase TagLabel Lanjutan Tipe Use Case Penjelasan Deskripsi Usease ini digunakan oleh administrator untuk mengatur data taglabel yang ada pada website. Pre condition Administrator harus memiliki username dan password untuk login ke sistem Characteristic of activation Eksekusi dapat dilakukan oleh Administrator Basic flow - Administrator mengklik menu taglabel. - Sistem menampilkan halaman taglabel. - Administrator menambah, mengedit, dan menghapus data taglabel. - Use case ini berakhir ketika sistem telah selesai menampilkan semua manajemen taglabel. Alternative flow - Post condition Pada use case ini user dapat menambah, mengedit dan menghapus data taglabel. Limitations - 3.4.3 Activity Diagram Activity diagram digunakan untuk mendeskripsikan logika prosedural, proses bisnis dan aliran kerja dalam suatu sistem. Activity diagram memiliki peranan seperti flowchart, akan tetapi memiliki perbedaan dimana activity diagram mendukung prilaku paralel sedangkan flowchart tidak Munawar, 2005. Berikut ini adalah diagram aktivitas yang terdapat pada sistem rekomendasi tag yang akan dibangun. 1. Activity Diagram Berita Pada activity diagram berita terkini, pengguna sistem dapat melihat berita-berita yang disediakan oleh administrator website. Activity diagram berita dapat dilihat pada gambar 3.4. Gambar 3.4 Diagram Aktivitas untuk Menampilkan Berita 2. Activity Diagram Hubungi Kami Pada activity diagram hubungi kami, pengguna sistem dapat memberikan pesan dan saran kepada administrator website. Activity diagram hubungi kami dapat dilihat pada gambar 3.5. Gambar 3.5 Diagram Aktivitas untuk Memberikan Pesan dan Saran 3. Activity Diagram Sign Up Pada activity diagram Sign Up, pengguna sistem dapat mendaftar sebagai member website. Activity diagram Sign Up dapat dilihat pada gambar 3.6. Gambar 3.6 Diagram Aktivitas untuk Sign Up 4. Activity Diagram Manajemen Modul Pada activity diagram manajemen modul, administrator dapat melakukan pengaturan modul website. Activity diagram manajemen modul dapat dilihat pada gambar 3.7. Gambar 3.7 Diagram Aktivitas untuk Manajemen Modul 5. Activity Diagram Identitas Web Pada activity diagram Identitas Web, administrator dapat melakukan pengaturan identitas web. Activity diagram Identitas Web dapat dilihat pada gambar 3.8. Gambar 3.8 Diagram Aktivitas untuk Memberikan Identitas Web 6. Activity Diagram Manajemen User Pada activity diagram manajemen user, administrator dapat melakukan pengaturan pengguna website. Activity diagram manajemen user dapat dilihat pada gambar 3.9. Gambar 3.9 Diagram Aktivitas untuk Manajemen User 7. Activity Diagram Manajemen Template Pada activity diagram manajemen template, administrator dapat melakukan pengaturan template website. Activity diagram manajemen template dapat dilihat pada gambar 3.10. Gambar 3.10 Diagram Aktivitas untuk Manajemen Template 8. Activity Diagram Menu Utama Pada activity diagram menu utama, administrator dapat melakukan pengaturan menu utama website. Activity diagram menu utama dapat dilihat pada gambar 3.11. Gambar 3.11 Diagram Aktivitas untuk Menu Utama 9. Activity Diagram Sub Menu Pada activity diagram sub menu, administrator dapat melakukan pengaturan sub menu dari menu utama website. Activity diagram sub menu dapat dilihat pada gambar 3.12. Gambar 3.12 Diagram Aktivitas untuk Sub Menu 10. Activity Diagram Manajemen Hubungi Kami Pada activity diagram manajemen hubungi kami, administrator dapat melakukan menjawab pesan dan saran yang diberikan oleh pengunjung website dari menu hubungi kami. Admin juga dapat menghapus pesan tersebut dari database. Activity diagram manajemen hubungi kami dapat dilihat pada Gambar 3.13. Gambar 3.13 Diagram Aktivitas untuk Pengaturan Pesan dan Saran 11. Activity Diagram Kategori Berita Pada activity diagram kategori berita, administrator dapat melakukan pengaturan data kategori berita. Activity diagram kategori berita dapat dilihat pada gambar 3.14. Gambar 3.14 Diagram Aktivitas untuk Kategori Berita 12. Activity Diagram Manajemen Berita Pada activity diagram manajemen berita, administrator dapat melakukan pengaturan data berita. Activity diagram kategori berita dapat dilihat pada gambar 3.15. Gambar 3.15 Diagram Aktivitas untuk Manajemen Berita 13. Activity Diagram TagLabel Pada activity diagram taglabel, administrator dapat melakukan pengaturan data taglabel. Activity diagram taglabel dapat dilihat pada Gambar 3.16. Gambar 3.16 Diagram Aktivitas untuk TagLabel 14. Activity Diagram Sensor Kata Pada activity diagram sensor kata, administrator dapat melakukan pengaturan data kata yang akan disensor pada berita. Activity diagram kategori berita dapat dilihat pada gambar 3.17. Gambar 3.17 Diagram Aktivitas untuk Kategori Berita 3.4.4 Perancangan Database Pada perancangan sistem rekomendasi tag ini terdapat 18 tabel yaitu tabel berita, kategori, modul, mainmenu, submenu, halaman statis, identitas, komentar, frekuensi, history, kt_dasar, Templates, identitas, berita_tag, kt_stopword, katajelek, tag, hubungi, dan users. Data pada tabel kt_dasar berasal dari kamus besar bahasa Indonesia online Parulian, 2013. Adapun hubungan antar tabel dapat dilihat pada gambar 3.18. Pada sistem rekomendasi tag ini, tabel berita terhubung pada tabel kategori, berita_tag, history, frekuensi, komentar, katajelek, dan tag.tabel kategori dan tag akan memudahkan dalam klasifikasi dan pencarian berita. Tabel katajelek berisi kata-kata yang dianggap melanggar etika dan kesopanan sehingga isi berita pada tabel berita yang mengandung kata-kata pada tabel katajelek akan diganti dengan kata-kata pada field ganti di tabel katajelek. Gambar 3.18 Database 3.4.5 Rancangan Menu Sistem Rancangan menu sistem dapat digunakan untuk melihat struktur menu yang terdapat pada suatu sistem yang akan dibangun. Rancangan menu sistem yang akan dibangun pada sistem rekomendasi tag ini dapat dilihat pada gambar 3.19. Rancangan website berita ini terdiri beberapa halaman yang dapat diakses oleh general user pengguna umum dan admin website. Adapun halaman website berita yang dapat diakses oleh pengguna umum adalah halaman Profil Website, Berita Terkini, dan Hubungi Kami. Sedangkan administrator yang telah melakukan aktifitas login dapat mengakses seluruh halaman website termasuk halaman manajemen pengaturan website. Halaman manajemen pengaturan website terdiri dari beberapa halaman pengaturan isi website yaitu halaman Setting Web, Setting menu, Manajemen Berita dan Manajemen Hubungi Kami. BERANDA PROFIL WEBSITE BERITA TERKINI HUBUNGI KAMI LOGIN SETTING WEB SETTING MENU MANAJEMEN HUBUNGI KAMI MANAJEMEN BERITA LOGOUT Gambar 3.19 Struktur Menu Sistem 3.4.6 Perancangan Antarmuka Perancangan antarmuka berisi gambaran umum tentang perancangan setiap tampilan yang terdapat pada website yang dikembangkan. 1. Rancangan Beranda Halaman Berita Pada halaman utama, pengguna dapat memiih menu-menu yang telah disajikan pada menu bar yaitu menu Profil, Berita, dan Hubungi Kami. Selain itu pengguna juga dapat memilih kategori berita, atau memilih berita terpopuler serta tag terpopuler. Rancangan tampilan halaman berandaberita dapat dilihat pada gambar 3.20. REKOMENDASI TAG BERANDA BERITA HUBUNGI KAMI DAFTAR BERITA MODUL KATEGORI BERITA MODUL BERITA TERPOPULER MODUL TAG TERPOPULER - - - - - - Berita 1 Berita 2 Berita N Berita Selanjutnya b c d f g h i Username Password LOGIN a SIGN UP e Gambar 3.20 Rancangan Halaman Utama Keterangan Gambar 3.20: a. Pengguna dengan hak akses administrator yang telah mengisi username dan password dapat menekan tombol Login untuk dapat mengakses menu-menu control panel website. b. Menu “Beranda” memungkinkan pengguna untuk masuk ke halaman BerandaBerita. c. Menu “Berita” memungkinkan pengguna untuk masuk ke halaman Berita. d. Menu “Hubungi Kami” memungkinkan pengguna untuk masuk ke halaman Hubungi KamiPesan dan Saran. e. Menu “Sign up” memungkinkan pengguna umum untuk masuk ke halaman formulir sign up. f. Module “Kategori Berita” berisi daftar kategori berita yang dapat pengguna pilih. g. Module “Berita Terpopuler” berisi daftar berita terpopuler yang dapat pengguna pilihlihat beritanya. h. Module “Tag Terpopuler” berisi daftar tag terpopuler yang dapat pengguna pilihlihat beritanya. i. Link “Berita selanjutnya” memungkinkan pengguna melihat berita selanjutnya. 2. Rancangan Halaman Hubungi Kami Pada halaman hubungi kami pengguna dapat mengirimkan pesan maupun saran ke administrator website. Rancangan halaman ini dapat dilihat pada gambar 3.21. HUBUNGI KAMI MODUL KATEGORI BERITA MODUL BERITA TERPOPULER MODUL TAG TERPOPULER - - - - - - Nama Email Subjek Masukkan 6 Kode di atas Isi Pesan Kode capcha KIRIM a REKOMENDASI TAG BERANDA BERITA HUBUNGI KAMI Username Password LOGIN SIGN UP Gambar 3.21 Rancangan Halaman Hubungi Kami Pengaturan pesan ini nantinya dapat dilakukan oleh administrator pada halaman manajemen hubungi kami setelah terlebih dahulu pengguna login sebagai administrator. Keterangan Gambar 3.21: a. Pengguna yang telah mengisi kolom nama, email, subjek, isi pesan dan kode unik capcha dapat menekan tombol kirim untuk dapat mengirim pesan ataupun saran ke email administrator website. 3. Rancangan Halaman Sign Up Pada halaman sign up, pengguna mendaftarkan dirinya ke website berita ini. Rancangan tampilan halaman sign up dapat dilihat pada gambar 3.22. REKOMENDASI TAG Username Password Nama Lengkap E-mail No. TelpHP SIMPAN BATAL a b Gambar 3.22 Rancangan Halaman Sign up Keterangan Gambar 3.22: a. Pengguna yang ingin mendaftar dapat mengisi formulir pendaftaran pengguna serta menekan tombol “Simpan” maka akan muncul konfirmasi apakah data pengguna telah tersimpan ke database atau tidak. Setelah Pengguna yang berhasil terdaftar, pengguna dapat melakukan login. Setelah login, hak pengaturan yang dimiliki pengguna tersebut hanya sebatas pengaturan profil pribadinya saja. b. Pengguna yang ingin mengosongkan seluruh kolom data pada formulir pendaftaran pengguna baru dapat menekan tombol “Batal”. 4. Rancangan Setting Web Pada halaman Rancangan Setting Web terdapat 4 halaman rancangan web yaitu rancangan halaman Manajemen Modul, Identitas Web, Manajemen User, Manajemen Template, dimana administrator dapat melihat, menambah dan meng-edit data setting- an web. Rancangan tampilan halaman Manajemen User dapat dilihat pada gambar 3.23. REKOMENDASI TAG - PENGATURAN ADMINISTRATOR WEBSITE HOME SETTING WEB SETTNG MENU MANAJEMEN BERITA USER HUBUNGI KAMI LOGUOT VIEW WEB Tambah User No Username Nama Lengkap Email No. TelpHP Level Blokir Aksi Edit Edit Edit Edit Copyright © 2014 by admin h i a b c d e f g Gambar 3.23 Rancangan Halaman Manajemen User Keterangan gambar 3.23: a. Menu “Home” memungkinkan pengguna untuk masuk ke halaman Beranda AdministratorControl panel Website. b. Menu “Setting Web” memungkinkan administrator untuk melakukan pengaturan website khususnya Manajemen Modul, Identitas Web, Manajemen User, Manajemen dan Template. c. Menu “Setting menu” memungkinkan administrator melakukan pengaturan menu dan sub menu website. d. Menu “Manajemen Berita” memungkinkan administrator melakukan pengaturan berita khususnya kategori berita, isi berita, tag, dan sensor kata. e. Menu “Hubungi Kami” memungkinkan administrator menjawab pesan dan saran dari pengunjung website pada menu hubungi kami. f. Menu “View Web” memungkinkan administrator untuk melihat tampilan beranda. g. Menu “Logout” memungkinkan administrator keluar dari halaman pengaturan control panel. h. Tombol “Tambah User” memungkin administrator untuk masuk ke halaman formulir tambah user. i. Link “Edit” memungkin administrator untuk masuk ke halaman pengeditan formulir data diri user. 5. Rancangan Setting Menu Pada halaman ini pengguna dengan login administrator dapat melakukan pengaturan data menu dan sub menu pada website berita ini. Rancangan tampilan halaman menu utama dapat dilihat pada Gambar 3.24. REKOMENDASI TAG - PENGATURAN ADMINISTRATOR WEBSITE HOME SETTING WEB SETTNG MENU MANAJEMEN BERITA USER HUBUNGI KAMI LOGUOT VIEW WEB Tambah Manu Utama No Nama Menu Link Aktif Admin Menu Aksi Edit Edit Edit Edit Copyright © 2014 by admin a b Keterangan: - Data pada Menu tidak bisa dihapus, tapi bisa di non-aktifkan melalui Edit Menu Utama. - Untuk link menu Beranda Home harus diubah ketika online menjadi http:NamaDomainAnda.com Gambar 3.24 Rancangan Halaman Setting menu Utama Keterangan gambar 3.24: a. Tombol “Tambah User” memungkin administrator untuk masuk ke halaman formulir tambah user. b. Link “Edit” memungkin administrator untuk masuk ke halaman peng-edit-an formulir data diri user. 6. Rancangan Halaman Manajemen Berita Pada halaman ini dapat melakukan pengaturan data kategori berita, isi berita, tag, dan sensor kata. Rancangan tampilan halaman berita dapat dilihat pada gambar 3.25. REKOMENDASI TAG - PENGATURAN ADMINISTRATOR WEBSITE HOME SETTING WEB SETTNG MENU MANAJEMEN BERITA BERITA HUBUNGI KAMI LOGUOT VIEW WEB Tambah Berita No Judul Tgl. Postingan Aksi Edit Hapus Edit Hapus Edit Hapus Edit Hapus Copyright © 2014 by admin a d Masukkan Judul Berita Cari b c Gambar 3.25 Rancangan Halaman Manajemen Isi Berita Keterangan gambar 3.25: a. Tombol “Tambah Berita” memungkin administrator untuk masuk ke halaman formulir tambah berita. b. Tombol “Cari” dapat digunakan untuk melakukan pencarian berita berdasarkan judul berita yang telah dimasukkan pada kolom di sampingnya. c. Link “Edit” memungkin administrator untuk masuk ke halaman peng-edit-an formulir data diri berita. d. Link “Hapus” memungkin administrator untuk menghapus data berita. 7. Rancangan Halaman Manajemen Hubungi Kami Pada halaman ini administrator dapat menjawab pesan dan saran pengunjung website di bagian hubungi kami. Rancangan tampilan halaman pengaturan data manajemen hubungi kami dapat dilihat pada gambar 3.26. REKOMENDASI TAG - PENGATURAN ADMINISTRATOR WEBSITE HOME SETTING WEB SETTNG MENU MANAJEMEN BERITA HUBUNGI KAMI HUBUNGI KAMI LOGUOT VIEW WEB No Nama Tanggal Aksi Hapus Hapus Hapus Hapus Copyright © 2014 by admin b Untuk menjawabmembalas email, klik langsung pada alamat emailnya yang ada di kolom EMAIL. Email Subjek a Gambar 3.26 Rancangan Halaman Manajemen Hubungi Kami Keterangan Gambar 3.26: a. Link “Email” memungkin administrator untuk masuk ke halaman reply email. b. Link “Hapus” memungkin administrator untuk menghapus pesan.

BAB 4 IMPLEMENTASI DAN PENGUJIAN SISTEM