BAB III ANALISIS DAN PERANCANGAN SISTEM

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN SISTEM 3.1 Analisis Masalah Perkembangan yang terjadi dalam teknologi informasi khususnya dalam perkembangan website mendorong terjadinya kemajuan yang sangat signifikan dalam pembuatannya,mulai dari system aplikasi sampai dengan disain yang dibuat seminimal mungkin tetapi sangat membantu banyak dalam hal penyampaian informasi yang terdapat didalam website, karena sekarang ini pembuatan website yang menggunakan java sedikit demi sedikit sudah mulai ditinggalkan karena website java memakan bandwith dan size yang lumayan besar. PHP kembali menjadi pilihan developer maupun umum untuk mengembangkan aplikasi website mereka. Dalam hal mencari informasi, terkadang user lebih memilih informasi yang bias dipertanggung jawabkan atau informasi yang berdasarkan terhadap fakta, bukan hanya ilustrasi gambar ataupun himbauan himbauan yang bersifat fiktif. Informasi kuliner sangat dibutuhkan masyarakat umum maupun organisasi sekarang ini, karena informasi ini sangat berhubungan dengan kebutuhan manusia yaitu pangan atau makanan. Informasi bisa dari berbagai macam sumber yang ada, mulai dari media cetak, seperti koran, majalah, bulletin, dan lain lain, sedangkan media elektronik seperti televisi, radio, dan yang lebih banyak lagi informasi yang berkembang dalam masyarakat yaitu media internet. Media penyebaran infromasi menggunakan internet sangatlah cepat, tepat, dan efektif, karena informasi yang kita cari sesuai dengan yang kita butuhkan saja, dalam hal ini pencarian informasi tentang kuliner atau dunia masakan, tentu saja kita yang mencarinya, bisa menggunakan mesin pencari seperti google atau youtube, tetapi hal ini kembali menimbulkan masalah, kerana berbagai macam hal mengenai kuliner atau masakan yang kita cari akan muncul dalam jumlah yang sangat banyak dan terkadang informasi ini belum tentu kebenarannya apabila kita tidak mencarinya dengan kata kunci yang lebih spesifik. Pembuatan aplikasi website kuliner ini

2 dapat membantu masyarakat untuk mencari informasi mengenai resep resep makanan baik itu dalam negeri ataupun luar negeri dan informasi ini dilengkapi dengan demosntrasi dalam bentuk video yang akan memudahkan pengguna dalam mencermati dan mengamati resep yang mereka inginkan tanpa harus mencari vidionya lagi dalam youtube. Alasan penulis membuat apliaksi kuliner menggunakan php dan mysql karena php adalah bahasa pemograman yang canggih, mudah digunakan dan sangat umum dikalangan pengembang ataupun individu dan penggunaan mysql sangatlah membantu dalam penyimpanan data data dalam website yang bisa dibilang aman dan mudah digunakan oleh pemula. 3.2 Perancangan Aplikasi Dari hasil analisa yang penulis buat untuk membangun aplikasi website dengan fitur yang mudah dimengerti, tepat sasaran, dan interaktif dengan menggunakan bahasa pemograman PHP, Java Script dan menggunkan basis data MySQL. Penulis akan menggunakan model diagram Use Case untuk menunjukan fungsional suatu system dan pemodelan diagram Activity untuk mengurutkan aktivitas dalam suatu proses serta Sequene Diagram untuk menggambarkan interaksi antar objek didalam dan disekitar system. Tujuan menggunakan model model ini adalah agar aplikasi ini dapat dipahami dengan mudah Use Case Diagram Use case adalah layanan (services) atau fungsi fungsi yang disediakan oleh system untuk pengguna penggunannya (Henderi et al 2008). Bisa dikatakan use case adalah suatu pola atau gambaran yang menunjukan kelakuan suatu system atas kebutuhan user.

3 Gambar 3.1 Use Case User Penjelasan mengenai gambar 3.1 adalah sebagai berikut; Tabel 3.1 Pengguna Masuk Aplikasi Nama Use Case : Actor Deskripsi Aplikasi Pengguna / User Pada aplikasi kuliner dunia, pengguna dapat melihat langsung menu menu didalam website yang terdiri dari Tentang kami, Masakan, dan Kontak kami.

4 Tabel 3.2 Pengguna Melihat halaman Artikel Nama Use Case Actor Deskripsi Melihat halaman Artikel Pengguna / User Pada aplikasi kuliner dunia, pengguna dapat melihat halaman artikel yang berupa informasi informasi seputar kuliner. Table 3.3 Pengguna Melihat halaman Masakan Nama Use Case Actor Deskripsi Melihat Halaman Masakan Pengguna/ User Pada aplikasi kuliner dunia, pengguna dapat melihat halaman masakan. Didalam halaman ini pengguna bisa mencari langsung resep resep makanan yang mereka cari berdasarkan nama Benua dan Negara. Tabel 3.4 Pengguna Melihat halaman Kontak Kami Nama Use Case Actor Deskripsi Melihat Halaman Kontak Kami Pengguna/User Pada aplikasi kuliner dunia. Pengguna dapat melihat nomor atau id yang tertera dalam website untuk mengkontak kami atau mengisi form kritik dan saran.

5 Gambar 3.2 Use Case Admin Penjelasan diagram Use Case aplikasi database kuliner adalah sebagai berikut: Tabel 3.5 Admin Login Nama Use Case Actor Deskripsi Admin memanage data admin Administrator Pada aplikasi kuliner dunia, admin akan masuk kehalaman login dan memasukan user serta password untuk mengakses halaman admin.

6 Tabel 3.6 Admin home Nama Use Case Actor Deskripsi Halaman Home admin Adminsitrator Pada aplikasi kuliner dunia, admin akan masuk kedalam halman home administrator dan dapat mengakses dan memodifikasi seluruh halaman website seperti Insert, Delete, dan Edit Activity Diagram Diagram Activity adalah diagram yang menggambarkan sebuah skema aktivitas yang terjadi di dalam pengunaan aplikasi tersebut. Diagram Activity mempunyai peran seperti halnya flowchart, akan tetapi perbedaan dengan flowchart adalah diagram ini mengandung perilaku parallel sedangkan flowchart tidak bisa (Munawar, 2005:109) Activity Diagram administrator pada website kuliner dunia Dalam aplikasi website kuliner dunia ini terdapat halaman administrator yang menyediakan berbagai macam pengaturan untuk dapat memodifikasi atau merubah tampilan website ataupun isi website tersebut.

7 Gambar 3.3 Activity Diagram Admin Gambar 3.3 menjelaskan aktifitas yang dilakukan administrator dalam mengelola berbagai macam hal seperti mengelola tampilan dan isi dalam website. Hal pertama yang dilakukan ialah admin harus login terlebih dahulu dengan memasukan username dan password untuk masuk kedalam halaman home admin, setelah itu database akan memverifikasi apakah username dan password cocok dengan username dan password yang telah ditentukan sebelumnya. Setelah pencocokan username dan password berhasil dan benar baru admin bisa masuk kedalam halaman home admin, apabila admin salah memasukan username

8 ataupun password maka admin harus melakukan pengecekan ulang dengan memasukan username dan password yang benar. Didalam halaman admin terdapat beberapa halaman lagi untuk mengedit halaman website, admin bisa menghapus, mengisi, dan mengedit isi maupun tampilan yang terdapat didalam website. Apabila admin telah selesai melakukan semua tugasnya admin dapat keluar dari halaman tersebut dengan menekan button log out Activity Diagram dalam halaman user pada website kuliner dunia. Dalam aplikasi website kuliner dunia user dapat langsung menggunakan atau melihat tampilan awal yang terdiri dari Home, Artikel, Masakan, dan Kontak Kami tanpa harus login terlebih dahulu. Gambar 3.4 Activity Diagram User

9 Gambar 3.4 menjelaskan aktifitas yang dilakukan oleh user dalam website kuliner dunia. Tidak seperti dalam halaman admin yang memang harus mempunyai username dan password untuk melihat halaman home admin, user langsung dapat melihat halaman awal website tanpa harus login terlebih dahulu. Halaman awal website terdapat beberapa halaman, yaitu Home, Artikel, Masakan, dan Kontak Kami, apabila ingin melihat preview website dapat dilihat pada halaman Home, halaman artikel berisikan informasi lain seputar kuliner, tips dan trik atau bulletin bulletin yang berhubungan dengan dunia kuliner, halaman masakan adalah inti utama dalam website ini, didalam halaman masakan terdapat berbagai informasi mengenai resep resep masakan, sejarah dari masakan tersebut, dan cara cara memasaknya dengan ilustrasi video, dan halaman Kontak Kami berisikan tentang bagaimana cara menghubungi kami dan penyampaian kritik dan saran. Dalam halaman masakan terdapat 2 pilihan sebelum mencari resep yang user inginkan, pertama resep yang kita cari bisa berdasarkan benua yang kita inginkan dan berdasarkan negara mana yang kita ingin mencari tahu resepnya, setelah kedua pilihan itu dipilih, barulah muncul informasi resep yang kita inginkan dengan beberapa daftar masakannya. 3.3 Diagram Sequence Diagram Sequence menggambarkan interaksi antar objek di dalam dan di sekitar sistem (termasuk user, display dan sebagainya) berupa message yang digambarkan terhadap waktu. Diagram Sequence terdiri atas dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). Diagram Sequence biasa digunakan untuk menggambarkan skenario atau rangkaian langkah langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu. Diawali dari apa yang men-trigger (pencetus) aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan.

10 3.3.1 Sequence Diagram Halaman Admin Gambar 3.5 Sequence Diagram Halaman Admin Diagram sequence halaman admin menggambarkan scenario sebuah user yang diperankan oleh admin harus login terlebih dahulu untuk masuk ke halaman home admin, dalam halaman home admin, user yang diperankan oleh admin bisa menambah, mengurangi, dan mengupdate data data yang terdapat didalam halaman admin. Admin bisa menambah data artikel dengan artikel terbaru, menghapus artikel lama, atau memperbaharui artikel yang ada, begitu juga dengan menu lainnya. 3.3 Perancangan Basis Data Tujuan dari perancangan basis data atau database ini adalah untuk memenuhi informasi yang berisikan kebutuhan-kebutuhan user secara khusus dan aplikasi-aplikasinya, yang secara langsung dapat memudahkan pengertian dari sebuah struktur informasi dan dapat pula mendukung kebutuhan-kebutuhan dalam pemrosesan serta beberapa obyek penampilan (response time, processing time, dan storage space).

11 3.3.1 Struktur Tabel Berikut ini adalah struktur table yang digunakan didalam aplikasi ini: Tabel Admin Tabel ini digunakan untuk menyimpan data data admin yang terdiri dari Id, User, dan Password. Nama tabel Primary key :Admin :Id Tabel 3.7 Tabel Admin Nama Field Panjang Tipe Data Id 3 Integer User 10 Varchar Password 25 Varchar Tabel artikel Tabel ini digunakan untuk menyimpan data data dari table artikel seperti id, nama, headline, dan keterangan. Nama tabel Primary key : Artikel : id Tabel 3.8 Tabel Artikel Nama field Panjang Tipe data Id 4 Integer Nama 25 Varchar Headline Text Keterangan Text

12 Tabel Benua Tabel ini digunakan untuk menyimpan data data dari tabel benua seperti kd_benua dan nm_benua. Nama tabel Primary key :Benua :kd_benua Tabel 3.9 Tabel Benua Nama Field Panjang Tipe data Kd_benua 5 Integer Nm_benua 10 Varchar Tabel Contact Us Tabel ini digunakan untuk menyimpan data dari tabel contact us seperti keterangan. Nama tabel Primary key :Contact us :Null Tabel 3.10 Tabel Contact us Nama Field Panjang Tipe data Keterangan - Text Tabel Header Tabel ini digunakan untuk menyimpan data dari tabel header seperti id, nama, dan keterangan. Nama tabel Primary key :Header :Id

13 Tabel 3.11 Tabel Header Nama field Panjang Tipe data Id 5 Integer Nama 20 Varchar Keterangan - Text Tabel Kunci Tabel ini digunakan untuk menyimpan data data dari tabel kunci seperti, id, judul, kunci, deskripsi. Nama Tabel Primary key :Header :Id. Tabel 3.12 Tabel Kunci Nama field Panjang Tipe data Id 5 Integer Judul - Text Kunci - Text Deskripsi - Text Tabel Makanan Tabel ini digunakan untuk menyimpan data dari tabel makanan seperti, id_makanan, nm_makanan, kd_benua, kd_negara, history, resep, video. Nama Tabel Primary key :Makanan :Id_makanan

14 Tabel 3.13 Tabel makanan Nama Field Panjang Tipe data Id_makanan 5 Integer Nm_makanan 50 Varchar Kd_benua 5 Integer Kd_negara 5 Integer History - Text Resep - Text Video - Text Tabel Negara Tabel ini digunakan untuk menyimpan data data dari tabel Negara seperti, kd_negara, nm_negara, kd_benua. Nama Tabel Primary key :Negara :Kd_negara Tabel 3.14 Tabel negara Nama Field Panjang Tipe data Kd_negara 5 Integer Nm_negara 25 Varchar Kd_benua 5 Integer

15 3.4 Entity Relationship Diagram Perancangan database pada system merupakan hal yang terpenting dalam perancangan database dan perancangan tersebut dapat digambarkan dengan Entity Relationship Diagram seperti pada diagram berikut ini. Kuliner.negara *kd_negara nm_negara kd_benua Kuliner.makanan *id_makanan nm_makanan kd_benua kd_negara Kuliner.benua *kd_benua nm_benua history resep video 3.5 Perancangan Antar Muka (User Interface) Rancangan layar dari aplikasi ini dibuat untuk menampilkan informasi dan memudahkan dalam pencarian, juga untuk melakukan perubahan perubahan yang mendasar kapanpun diperlukan. Ada dua rancangan layar pada aplikasi ini, yaitu layar admin dan layar pengguna. Berikut ini adalah rancangan antar muka dari halaman admin adalah sebagai berikut.

16 3.5.1 Halaman Administrator Didalam halaman admin, ada beberapa halaman lain selain login admin, ada halaman edit untuk tiap halamannya Halaman login administrator Gambar 3.5 Halaman Admin Keterangan gambar: Logo admin : gambar dari logo administrator. Judul halaman : merupakan nama halaman. User Id : huruf/angka yang dimasukan untuk masuk halaman admin. Password : huruf/angka yang dimasukan untuk masuk halaman admin. Login button : tombol yang di tekan setelah semua user id dan password ` dimasukan untuk masuk kehalaman admin.

17 Halaman Home Admin Gambar 3.6 Home Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. Home : menunjukan menu halaman,yang berarti admin ada dihalaman home. Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin. Search engine : tool pencarian admin. Add admin : button apabila kita ingin menambahkan admin. User dan Pass box : area yang menunjukan detail username dan password. Edit button : tombol untuk mengganti atau merubah user dan password.

18 Delete button : tombol untuk menghapus admin selain super admin. Halaman : berisi informasi dimana letak halaman kita saat ini Halaman Header Admin Gambar 3.7 Header Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. Header : menunjukan menu halaman,yang berarti admin ada dihalaman header. Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin. Add header : button apabila kita ingin menambahkan header. Nama header : berisikan detail nama dari header. Image : berisikan gambar yang kita ingin jadikan header. Edit button : tombol untuk mengganti atau merubah nama header dan gambar header.

19 Delete button : tombol untuk menghapus nama header dan gambar header. Halaman : berisi informasi dimana letak halaman kita saat ini Halaman Edit Header Admin HEADER Tanggal Header Log out Nama Image Home Nama halaman Reset Submit Gambar 3.8 Edit Header Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. Header : menunjukan menu halaman,yang berarti admin ada dihalaman header. Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin. Nama : nama header yang akan diedit. Image : gambar header yang akan diedit. Reset : untuk mereset ulang data yang telah atau akan dimasukan. Submit : untuk memasukan data yang telah dirubah.

20 Halaman Artikel Admin HEADER Artikel Tanggal Search engine Logout Home nama halaman Add artikel Nama Headline artikel Isi artikel Gambar Detail Detail headline Detail isi Detail nama gambar Edit Delete Keterangan gambar : Gambar 3.9 Artikel Admin Header : berisi gambar dari judul halaman aplikasi. Artikel : menunjukan menu halaman, yang berarti admin ada dihalaman Artikel. Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin. Add artikel : button apabila kita ingin menambahkan artikel. Search engine : tool pencarian artikel. Nama : berisi nama dan detail nama artikel. Headline : berisi detail dari headline artikel. Isi : berisi detail dari isi artikel. Gambar : berisi ilustrasi gambar untuk ilustrasi didalam artikel. Edit button : tombol untuk mengganti atau merubah nama artikel dan gambar artikel.

21 Delete button : tombol untuk menghapus nama artikel dan gambar artikel. Halaman : berisi informasi dimana letak halaman kita saat ini Halaman Edit Artikel Header Tanggal Artikel Logout Home nama halaman Nama Headline Isi Gambar Gambar 3.10 Edit Artikel Admin Reset Submit Gambar 3.10 Edit artikel Keterangan gambar : Header : berisi gambar dari judul halaman aplikasi. Artikel : menunjukan menu halaman, yang berarti admin ada dihalaman artikel.

22 Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin. Nama : berisi nama dan detail nama artikel yang akan diedit. Headline : berisi detail dari headline artikel yang akan diedit. Isi : berisi detail dari isi artikel yang akan diedit. Gambar : berisi ilustrasi gambar untuk ilustrasi didalam artikel yang akan diedit. Reset button : untuk mereset ulang data yang telah atau akan dimasukan. Submit button : untuk memasukan data yang telah dirubah.

23 Halaman Benua Admin Gambar 3.11 Benua Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. Benua : menunjukan menu halaman,yang berarti admin ada dihalaman benua Tanggal : menunjukan tanggal saat halaman itu dibuka. Add benua : apabila kita ingin menambahkan benua. Log out button : tombol apabila kita ingin keluar dari halaman admin. Search engine : tool pencarian benua Nama benua : berisikan nama nama benua seluruh dunia. Edit button : tombol untuk mengganti atau merubah nama benua

24 Delete button : tombol untuk menghapus nama benua. Halaman : berisi informasi dimana letak halaman kita saat ini Halaman Edit Benua Header Benua Tanggal Logout Benua Home nama halaman Gambar Reset Submit Gambar 3.12 Edit Benua Keterangan gambar : Header : berisi gambar dari judul halaman aplikasi. Benua : menunjukan menu halaman,yang berarti admin ada dihalaman benua Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin. Benua : untuk mengedit nama benua. Gambar : untuk mengedit gambar benua. Reset button : untuk mereset ulang data yang telah atau akan dimasukan. Submit button : untuk memasukan data yang telah dirubah.

25 Halaman Negara Admin Gambar 3.13 Negara Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. Negara : menunjukan menu halaman,yang berarti admin ada dihalaman negara Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin Search engine : tool pencarian benua Add Negara : tombol apabila kita ingin menambahkan Negara Benua : Nama nama benua Negara : Nama nama Negara Gambar : Gambar atau bendera dari Negara tersebut Edit button : tombol untuk mengganti atau merubah nama negara Delete button : tombol untuk menghapus nama negara. Halaman : berisi informasi dimana letak halaman kita saat ini.

26 Halaman Edit Negara Admin Header Tanggal Negara Logout Nama Home nama halaman Benua Gambar Reset Submit Gambar 3.14 Edit Negara Admin Keterangan gambar : Header : berisi gambar dari judul halaman aplikasi. Negara : menunjukan menu halaman,yang berarti admin ada dihalaman negara Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin Nama : nama negara yang akan di edit. Benua : nama benua yang dimaksud. Reset button : untuk mereset ulang data yang telah atau akan dimasukan. Submit button : untuk memasukan data yang telah dirubah.

27 Halaman Masakan Admin Gambar 3.15 Masakan Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. Masakan : menunjukan menu halaman,yang berarti admin ada dihalaman masakan Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin Search engine : tool pencarian benua Tambah masakan : tombol yang digunakan untuk menambah masakan. Benua : nama nama benua Negara : nama nama Negara Nama masakan : nama nama masakan Image : gambar dari masakan Vidio : demo masakan yang berupa video

28 Edit button : tombol untuk mengganti atau merubah isi dari detail masakan Delete button : tombol untuk menghapus isi dari detail masakan Halaman : berisi informasi dimana letak halaman kita saat ini Halaman Edit Masakan Admin Header Tanggal Nama Benua Negara Gambar History Resep Embed Vidio Masakan Logout Home nama halaman Reset Submit Gambar 3.16 Edit Masakan Admin Keterangan gambar : Header : berisi gambar dari judul halaman aplikasi. Masakan : menunjukan menu halaman, yang berarti admin ada dihalaman masakan

29 Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin. Nama : Halaman Contact us Admin Gambar 3.17 Contact Us Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. Contact us : menunjukan menu halaman,yang berarti admin ada dihalaman contact us Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin Deskripsi Contact : command box untuk memasukan bagaimana user dapat menghubungi admin. Reset button : tombol yang digunakan untuk mereset isi. Submit : tombol yang digunakan untuk mengirim deskripsi kontak ke database.

30 Halaman : berisi informasi dimana letak halaman kita saat ini Halaman SEO Tools Admin Gambar 3.18 SEO Tools Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. SEO Tools : menunjukan menu halaman,yang berarti admin ada dihalaman SEO Tools Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin Title : kotak untuk mengisi judul aplikasi. Description : kotak untuk mengisi deskripsi tentang halaman aplikasi. Keyword : Kotak untuk mengisi kata kunci yang berhubungan dengan aplikasi. Reset button : tombol yang digunakan untuk mereset isi.

31 Submit : tombol yang digunakan untuk mengirim deskripsi kontak ke database. Halaman : berisi informasi dimana letak halaman kita saat ini Halaman Artikel Admin Gambar 3.19 Artikel Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. Artikel : menunjukan menu halaman,yang berarti admin ada dihalaman artikel

32 Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin Search engine : tool pencarian benua Add Artikel : tombol apabila kita ingin menambahkan Artikel Nama artikel : berisi detail nama nama artikel. Headline : berisi sekilas informasi tentang artikel. Isi : berisi tentang isi secara keseluruhan dari artikel. Gambar : ilustrasi gambar tentang artikel tersebut. Edit button : tombol untuk mengganti atau merubah isi dari detail artikel Delete button : tombol untuk menghapus isi dari detail artikel Halaman : berisi informasi dimana letak halaman kita saat ini

33 Halaman Edit Artikel Admin Header Artikel Tanggal Logout Nama Home nama halaman Headline news Isi news Gambar Reset Submit Gambar 3.20 Edit Artikel Admin Keterangan gambar: Header : berisi gambar dari judul halaman aplikasi. Artikel : menunjukan menu halaman,yang berarti admin ada dihalaman artikel Tanggal : menunjukan tanggal saat halaman itu dibuka. Log out button : tombol apabila kita ingin keluar dari halaman admin Nama : berisi detail nama artikel.

34 Headline : berisi sekilas informasi tentang artikel. Isi : berisi tentang isi secara keseluruhan dari artikel. Gambar : ilustrasi gambar tentang artikel tersebut. Reset button : tombol yang digunakan untuk mereset isi. Submit : tombol yang digunakan untuk mengirim deskripsi kontak ke database HALAMAN USER Halaman Home User Gambar 3.21 Home User Keterangan gambar: Tanggal : menunjukan tanggal berapa saat user membuka website. Logo : gambar logo dari aplikasi website ini.

35 Menu home : pilihan menu home yang ada didalam halaman user. Search engine : tool untuk mencari informasi spesifik yang terdapat dalam halaman tersebut. Header banner : gambar header banner yang berisi preview gambar gambar makanan yang terdapat didalam aplikasi website. Preview benua :tampilan sekilas gambar gambar makanan yang berbentuk banner dari masing masing benua. Review masakan : tampilan sekilas dan sedikit penjelasan dari makanan makanan yang ada di dalam aplikasi website Halaman Artikel User LOGO Tanggal Menu Artikel Search engine Artikel Terbaru Judul Artikel Deskripsi Artikel Gambar artikel Judul Artikel Deskripsi Artikel Gambar artikel Judul Artikel Deskripsi Artikel Gambar artikel Gambar 3.22 Artikel User Halaman

36 Keterangan gambar: Tanggal : menunjukan tanggal berapa saat user membuka website. Logo : gambar logo dari aplikasi website ini. Menu artikel : pilihan menu artikel yang ada didalam halaman user. Search engine : tool untuk mencari informasi spesifik yang terdapat dalam halaman tersebut. Detail artikel : berisi informasi judul, gambar, dan deskripsi artikel yang terdapat dalam website. Halaman : menunjukan halaman yang sedang kita buka Halaman Masakan User Didalam halaman masakan ini terdapat 2 pilihan sebelum user bisa melihat resep resep dari masakan tersebut, yang pertama user harus memilih benua yang user inginkan, setelah itu akan muncul negara negara yang terdapat dalam benua tersebut. Apabila user telah memilih negara yang user inginkan, maka halaman resep resep yang user inginkan baru bisa user pilih sesuai masakan yang user ingin cari tahu resepnya dari negara pilihan.

37 Logo Tanggal Menu Masakan Pilihan Benua Asian Food Europian Food Search engine African Food American Food Australian Food North pole Food Gambar 3.15 Halaman Gambar 3.23 Masakan User Keterangan gambar: Tanggal : menunjukan tanggal berapa saat user membuka website. Logo : gambar logo dari aplikasi website ini. Menu masakan : pilihan menu masakan yang ada didalam halaman user. Search engine : tool untuk mencari informasi spesifik yang terdapat dalam halaman tersebut. Pilihan benua : terdapat detail dari benua yang ada. Halaman : menunjukan halaman yang sedang kita buka.

38 Halaman Negara User Logo Tanggal Menu Negara Nama benua pilihan Search engine Latest Food Negara Negara Negara Negara Detail food Negara Negara Negara Negara Negara Negara Negara Negara Negara Negara Negara Negara halaman Gambar 3.24 Negara User Keterangan gambar: Tanggal : menunjukan tanggal berapa saat user membuka website. Logo : gambar logo dari aplikasi website ini. Menu negara : pilihan menu negara yang ada didalam halaman user. Search engine : tool untuk mencari informasi spesifik yang terdapat dalam halaman tersebut. Nama benua pilihan : didalam nama benua terdapat negara negara yang ada didalam benua tersebut. Latest food : didalam kolom latest food terdapat kilasan tentang resep masakan dari negara tersebut yang baru saja dimasukan atau diperbaharui Halaman : menunjukan halaman yang sedang kita buka.

39 Halaman List Masakan User LOGO Tanggal Menu List Masakan Search engine List Masakan Nama Masakan Deskripsi Masakan Gambar Masakan Nama Masakan Deskripsi Masakan Gambar Masakan Nama Masakan Gambar Masakan Deskripsi Masakan Halaman Gambar 3.25 List Masakan User Keterangan gambar: Tanggal : menunjukan tanggal berapa saat user membuka website. Logo : gambar logo dari aplikasi website ini. Menu artikel : pilihan menu artikel yang ada didalam halaman user. Search engine : tool untuk mencari informasi spesifik yang terdapat dalam halaman tersebut.

40 Detail masakan : berisi informasi judul, gambar, dan deskripsi masakan yang terdapat dalam website. Halaman : menunjukan halaman yang sedang kita buka Halaman Detail Masakan Logo Tanggal Menu Detail Masakan Asal Masakan History Search engine Nama Masakan Gambar Masakan Detail Resep Vidio Resep Masakan Review Resep Masakan Gambar 3.26 Detail Masakan Keterangan gambar: Tanggal : menunjukan tanggal berapa saat user membuka website. Logo : gambar logo dari aplikasi website ini. Menu detail masakan : pilihan menu detail masakan yang ada didalam halaman user. Search engine : tool untuk mencari informasi spesifik yang terdapat dalam halaman tersebut.

41 Asal masakan : terdiri dari nama Negara dan benua asal masakan tersebut. Nama masakan : nama masakan dari Negara tersebut. History : deskripsi dari sejarah atau asal usul masakan tersebut. Resep : detail bahan bahan dan tata cara memasak dari masakan tersebut. Gambar masakan : ilustrasi gambar dari masakan yang kita pilih. Vidio resep masakan : video yang menampilkan peragaan tata cara memasak masakan tersebut. Review resep masakan : sekilas informasi dari resep masakan yang lain Halaman Kontak Kami User Logo Tanggal Menu Kontak Kami KONTAK KAMI Name Address Phone Message Reset Submit Gambar 3.27 Kontak Kami User

42 Keterangan gambar: Tanggal : menunjukan tanggal berapa saat user membuka website. Logo : gambar logo dari aplikasi website ini. Menu kontak kami : pilihan menu kontak kami yang ada didalam halaman user. Kontak kami : terdiri dari nama, alamat, nomor telepon, dan pesan yang ingin disampaikan. Submit : button untuk mengirimkan pesan. Reset : button untuk menghapus semua data yang telah dimasukan.