BAB III ANALISIS DAN PERANCANGAN SISTEM

(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.

3.2.1 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 : Aplikasi

Actor Pengguna / User

Deskripsi 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 Melihat halaman Artikel

Actor Pengguna / User

dapat melihat halaman artikel yang berupa informasi informasi seputar kuliner.

Table 3.3 Pengguna Melihat halaman Masakan

Nama Use Case Melihat Halaman Masakan

Actor Pengguna/ User

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 Melihat Halaman Kontak Kami

Actor Pengguna/User

Deskripsi 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 Admin memanage data admin

Actor Administrator

Deskripsi 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 Halaman Home admin

Actor Adminsitrator

Deskripsi Pada aplikasi kuliner dunia, admin akan

masuk kedalam halman home administrator dan dapat mengakses dan memodifikasi seluruh halaman website seperti Insert, Delete, dan Edit.

3.2.2 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).

3.2.2.1 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.

3.2.2.2 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.

(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:

3.3.1.1 Tabel Admin

Tabel ini digunakan untuk menyimpan data data admin yang terdiri dari Id, User, dan Password.

Nama tabel :Admin Primary key :Id

Tabel 3.7 Tabel Admin

Nama Field Panjang Tipe Data

Id 3 Integer

User 10 Varchar

Password 25 Varchar

3.3.1.2 Tabel artikel

Tabel ini digunakan untuk menyimpan data data dari table artikel seperti id, nama, headline, dan keterangan.

Nama tabel : Artikel Primary key : id

Tabel 3.8 Tabel Artikel Nama field Panjang Tipe data

Id 4 Integer

Nama 25 Varchar

Headline Text

(12)

3.3.1.3 Tabel Benua

Tabel ini digunakan untuk menyimpan data data dari tabel benua seperti kd_benua dan nm_benua.

Nama tabel :Benua Primary key :kd_benua

Tabel 3.9 Tabel Benua Nama Field Panjang Tipe data

Kd_benua 5 Integer

Nm_benua 10 Varchar

3.3.1.4 Tabel Contact Us

Tabel ini digunakan untuk menyimpan data dari tabel contact us seperti keterangan.

Nama tabel :Contact us Primary key :Null

Tabel 3.10 Tabel Contact us Nama Field Panjang Tipe data

Keterangan - Text

3.3.1.5 Tabel Header

Tabel ini digunakan untuk menyimpan data dari tabel header seperti id, nama, dan keterangan.

Nama tabel :Header Primary key :Id

(13)

Tabel 3.11 Tabel Header Nama field Panjang Tipe data

Id 5 Integer

Nama 20 Varchar

Keterangan - Text

3.3.1.6 Tabel Kunci

Tabel ini digunakan untuk menyimpan data data dari tabel kunci seperti, id, judul, kunci, deskripsi.

Nama Tabel :Header Primary key :Id.

Tabel 3.12 Tabel Kunci Nama field Panjang Tipe data

Id 5 Integer

Judul - Text

Kunci - Text

Deskripsi - Text

3.3.1.7 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 :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 3.3.1.8 Tabel Negara

Tabel ini digunakan untuk menyimpan data data dari tabel Negara seperti, kd_negara, nm_negara, kd_benua.

Nama Tabel :Negara Primary key :Kd_negara

Tabel 3.14 Tabel negara

Nama Field Panjang Tipe data

Kd_negara 5 Integer

Nm_negara 25 Varchar

(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 nm_benua Kuliner.benua *kd_benua video resep Kuliner.makanan *id_makanan nm_makanan kd_benua kd_negara history

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.

3.5.1.1 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)

3.5.1.2 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.

3.5.1.3 Halaman Header Admin

Gambar 3.7 Header Admin Keterangan gambar:

• Header : menunjukan menu halaman,yang berarti admin ada dihalaman header.

• 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. 3.5.1.4 Halaman Edit Header Admin

HEADER Tanggal Nama Image Submit Reset

Home‐Nama halaman

Log out Header

Gambar 3.8 Edit Header Admin Keterangan gambar:

• Header : menunjukan menu halaman,yang berarti admin ada dihalaman header.

• Nama : nama header yang akan diedit.

• Image : gambar header yang akan diedit.

• Reset : untuk mereset ulang data yang telah atau akan dimasukan.

(20)

3.5.1.5 Halaman Artikel Admin Artikel Tanggal Search engine Add artikel

Nama Headline artikel Isi artikel Gambar

Delete Edit Detail gambar Detail isi Detail headline Detail nama

Home‐nama halaman Logout

HEADER

Gambar 3.9 Artikel Admin Keterangan gambar :

• Artikel : menunjukan menu halaman, yang berarti admin ada dihalaman Artikel.

• 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. 3.5.1.6 Halaman Edit Artikel

Gambar 3.10 Edit Artikel Admin _Reset

Submit

Logout

Home‐nama halaman

Gambar Header Tanggal Nama Headline Isi Artikel

Gambar 3.10 Edit artikel

Keterangan gambar :

• Artikel : menunjukan menu halaman, yang berarti admin ada dihalaman artikel.

(22)

• 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)

3.5.1.7 Halaman Benua Admin

Gambar 3.11 Benua Admin Keterangan gambar:

• Benua : menunjukan menu halaman,yang berarti admin ada dihalaman benua

• Add benua : apabila kita ingin menambahkan benua.

• Search engine : tool pencarian benua

• Nama benua : berisikan nama nama benua seluruh dunia.

(24)

• Delete button : tombol untuk menghapus nama benua.

• Halaman : berisi informasi dimana letak halaman kita saat ini. 3.5.1.8 Halaman Edit Benua

Reset Submit

Logout

Gambar Tanggal Benua Benua Header

Gambar 3.12 Edit Benua Keterangan gambar :

• Benua : menunjukan menu halaman,yang berarti admin ada dihalaman benua

• Benua : untuk mengedit nama benua.

• Gambar : untuk mengedit gambar benua.

(25)

3.5.1.9 Halaman Negara Admin

Gambar 3.13 Negara Admin Keterangan gambar:

• Negara : menunjukan menu halaman,yang berarti admin ada dihalaman negara

• Log out button : tombol apabila kita ingin keluar dari halaman admin

• 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.

(26)

3.5.1.10 Halaman Edit Negara Admin

Submit Reset

Home‐nama halaman Logout Benua Gambar Nama Tanggal Negara Header

Gambar 3.14 Edit Negara Admin Keterangan gambar :

• Negara : menunjukan menu halaman,yang berarti admin ada dihalaman negara

• Nama : nama negara yang akan di edit.

• Benua : nama benua yang dimaksud.

(27)

3.5.1.11 Halaman Masakan Admin

Gambar 3.15 Masakan Admin Keterangan gambar:

• Masakan : menunjukan menu halaman,yang berarti admin ada dihalaman masakan

• 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

(28)

• : tombol untuk mengganti atau merubah isi dari detail masakan

Edit button

• Delete button : tombol untuk menghapus isi dari detail masakan

3.5.1.12 Halaman Edit Masakan Admin Header Tanggal Nama Benua Negara Gambar History Resep Embed Vidio Submit Reset

Home‐nama halaman Logout

Masakan

Gambar 3.16 Edit Masakan Admin

Keterangan gambar :

• Masakan : menunjukan menu halaman, yang berarti admin ada dihalaman masakan

(29)

• Nama :

3.5.1.13 Halaman Contact us Admin

Gambar 3.17 Contact Us Admin Keterangan gambar:

• Contact us : menunjukan menu halaman,yang berarti admin ada dihalaman contact us

• 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)

3.5.1.14 Halaman SEO Tools Admin

Gambar 3.18 SEO Tools Admin Keterangan gambar:

• SEO Tools : menunjukan menu halaman,yang berarti admin ada dihalaman SEO Tools

• Title : kotak untuk mengisi judul aplikasi.

• Description : kotak untuk mengisi deskripsi tentang halaman aplikasi.

• Keyword : Kotak untuk mengisi kata kunci yang berhubungan dengan aplikasi.

(31)

3.5.1.16 Halaman Artikel Admin

Gambar 3.19 Artikel Admin Keterangan gambar:

• Artikel : menunjukan menu halaman,yang berarti admin ada dihalaman artikel

(32)

• 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.

• : tombol untuk mengganti atau merubah isi dari detail artikel

Edit button

• Delete button : tombol untuk menghapus isi dari detail artikel

• Halaman : berisi informasi dimana letak halaman kita saat ini

(33)

3.5.1.17 Halaman Edit Artikel Admin Logout Nama Headline news Isi news Gambar Reset Submit

Tanggal Artikel Header

Gambar 3.20 Edit Artikel Admin Keterangan gambar:

• Artikel : menunjukan menu halaman,yang berarti admin ada dihalaman 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.

3.5.2 HALAMAN USER 3.5.2.1 Halaman Home User

Gambar 3.21 Home User Keterangan gambar:

• Tanggal : menunjukan tanggal berapa saat user membuka website.

(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.

3.5.2.2 Halaman Artikel User

Gambar 3.22 Artikel User

Tanggal LOGO Halaman Gambar artikel

Judul Artikel Deskripsi Artikel

Gambar artikel

Judul Artikel Deskripsi Artikel Gambar artikel

Judul Artikel Deskripsi Artikel

Artikel Terbaru

_Menu_Artikel _Search_engine

(36)

Keterangan gambar:

• Logo : gambar logo dari aplikasi website ini.

• Menu artikel : pilihan menu artikel yang ada didalam halaman user.

• Detail artikel : berisi informasi judul, gambar, dan deskripsi artikel yang terdapat dalam website.

• Halaman : menunjukan halaman yang sedang kita buka. 3.5.2.3 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)

Gambar 3.15 Tanggal Menu Masakan Pilihan Benua Halaman Europian Food American Food

North pole Food

Australian Food African Food Asian Food

Search engine

Logo

Gambar 3.23 Masakan User

• Menu masakan : pilihan menu masakan yang ada didalam halaman user.

• Pilihan benua : terdapat detail dari benua yang ada.

(38)

3.5.2.4 Halaman Negara User Latest Food Detail food Negara Negara Negara Negara Negara Negara Negara Negara Tanggal Menu Negara

Nama benua pilihan halaman Negara Negara Negara Negara Negara Negara Negara Negara Search engine Logo

Gambar 3.24 Negara User Keterangan gambar:

• Menu negara : pilihan menu negara yang ada didalam halaman user.

• 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

(39)

3.5.2.6 Halaman List Masakan User Tanggal LOGO List Masakan Halaman

Nama Masakan Deskripsi Masakan Gambar Masakan

Gambar Masakan

Nama Masakan Deskripsi Masakan

Nama Masakan Deskripsi Masakan Gambar Masakan

_Menu_List_Masakan _Search_engine

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.

(40)

• Detail masakan : berisi informasi judul, gambar, dan deskripsi masakan yang terdapat dalam website.

• Halaman : menunjukan halaman yang sedang kita buka. 3.5.2.7 Halaman Detail Masakan

Review Resep Masakan Tanggal

Menu Detail Masakan

Asal Masakan Nama Masakan

History Detail Resep Vidio Resep Masakan Gambar Masakan Search engine Logo

Gambar 3.26 Detail Masakan Keterangan gambar:

• Menu detail masakan : pilihan menu detail masakan yang ada didalam halaman user.

(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. 3.5.2.8 Halaman Kontak Kami User

Submit

Tanggal

Menu Kontak Kami

KONTAK KAMI Name Phone Address Email Message Reset Logo

(42)

• Menu kontak kami : pilihan menu kontak kami yang ada didalam halaman user.

• Kontak kami : terdiri dari nama, alamat, nomor telepon, email dan pesan yang ingin disampaikan.

• Submit : button untuk mengirimkan pesan.

• Reset : button untuk menghapus semua data yang telah dimasukan.