BAB III ANALISIS DAN PERANCANGAN SISTEM

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

http://digilib.mercubuana.ac.id/

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.

http://digilib.mercubuana.ac.id/

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.

http://digilib.mercubuana.ac.id/

Tabel 3.2 Pengguna Melihat halaman Artikel Nama Use Case

Melihat halaman Artikel

Actor

Pengguna / User

Deskripsi

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

Melihat Halaman Masakan

Actor

Pengguna/ User

Deskripsi

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

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.

http://digilib.mercubuana.ac.id/

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.

http://digilib.mercubuana.ac.id/

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.

http://digilib.mercubuana.ac.id/

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

http://digilib.mercubuana.ac.id/

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.

Gambar 3.4 Activity Diagram User

http://digilib.mercubuana.ac.id/

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.

http://digilib.mercubuana.ac.id/

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

http://digilib.mercubuana.ac.id/

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

Keterangan

Text

http://digilib.mercubuana.ac.id/

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

http://digilib.mercubuana.ac.id/

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

Primary key

:Id_makanan

http://digilib.mercubuana.ac.id/

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

Kd_benua

5

Integer

http://digilib.mercubuana.ac.id/

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 

Kuliner.makanan 

*kd_negara 

*id_makanan 

nm_negara 

nm_makanan 

kd_benua 

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.

http://digilib.mercubuana.ac.id/

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

•

Judul halaman : merupakan nama halaman.

•

User Id

: gambar dari logo administrator.

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

   

http://digilib.mercubuana.ac.id/

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.

http://digilib.mercubuana.ac.id/

•

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

: berisi gambar dari judul halaman aplikasi.

•

Header

: menunjukan menu halaman,yang berarti admin ada

dihalaman header. •

Tanggal

•

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

•

Add 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

: menunjukan tanggal saat halaman itu dibuka.

: button apabila kita ingin menambahkan header.

gambar header.

http://digilib.mercubuana.ac.id/

•

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   

Header  Tanggal  

Log out 

  Home‐Nama halaman 

 

 

Nama 

 

 

Image   

    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

•

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

: menunjukan tanggal saat halaman itu dibuka.

dimasukan. •

Submit

: untuk memasukan data yang telah dirubah.

http://digilib.mercubuana.ac.id/

   

3.5.1.5 Halaman Artikel Admin   HEADER    Artikel

  Logout 

Tanggal  

 

 

 

Search engine    

 

 

Home‐nama halaman 

 

 

 

 

 

Add artikel    Nama  Detail  nama 

 

  Headline artikel

Isi artikel

Gambar

Detail headline 

Detail isi 

Detail  gambar 

   Edit 

Delete

   

Gambar 3.9 Artikel Admin Keterangan gambar : •

Header

: berisi gambar dari judul halaman aplikasi.

•

Artikel

: menunjukan menu halaman, yang berarti admin ada

dihalaman Artikel. •

Tanggal

•

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

•

Add 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

: menunjukan tanggal saat halaman itu dibuka.

: button apabila kita ingin menambahkan artikel.

gambar artikel.

http://digilib.mercubuana.ac.id/

•

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   Header    Artikel Tanggal 

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.

http://digilib.mercubuana.ac.id/

•

Tanggal

•

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

: menunjukan tanggal saat halaman itu dibuka.

yang akan diedit. •

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

•

Submit button : untuk memasukan data yang telah dirubah.

                             

http://digilib.mercubuana.ac.id/

3.5.1.7 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

http://digilib.mercubuana.ac.id/

•

Delete button : tombol untuk menghapus nama benua.

•

Halaman

: berisi informasi dimana letak halaman kita saat ini.

3.5.1.8 Halaman Edit Benua   Header    Benua 

  Tanggal 

Logout 

 

 

 

Benua 

 

 

 

Gambar 

Home‐nama halaman 

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.

   

http://digilib.mercubuana.ac.id/

3.5.1.9 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

•

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

: menunjukan tanggal saat halaman itu dibuka.

: berisi informasi dimana letak halaman kita saat ini.

http://digilib.mercubuana.ac.id/

3.5.1.10 Halaman Edit Negara Admin   Header    Tanggal  

 

 

 

 

 

 

 

Nama 

 

Negara Logout  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

•

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

: menunjukan tanggal saat halaman itu dibuka.

dimasukan. •

Submit button : untuk memasukan data yang telah dirubah.

     

http://digilib.mercubuana.ac.id/

3.5.1.11 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

http://digilib.mercubuana.ac.id/

•

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. 3.5.1.12 Halaman Edit Masakan Admin   Header   

Masakan

Tanggal 

Logout 

 

 

Nama 

 

 

Benua 

 

 

Negara 

 

 

Gambar 

 

 

History 

 

 

Resep 

 

 

Embed Vidio 

 

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

http://digilib.mercubuana.ac.id/

•

Tanggal

: menunjukan tanggal saat halaman itu dibuka.

•

Log out button

: tombol apabila kita ingin keluar dari halaman

admin. •

Nama

:

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

http://digilib.mercubuana.ac.id/

•

Halaman

: berisi informasi dimana letak halaman kita saat

ini.

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

http://digilib.mercubuana.ac.id/

•

Submit

: tombol yang digunakan untuk mengirim deskripsi kontak

ke database. •

Halaman

: berisi informasi dimana letak halaman kita saat ini.

 

3.5.1.16 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

http://digilib.mercubuana.ac.id/

•

Tanggal

•

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

•

Search engine : tool pencarian benua

•

Add 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

: menunjukan tanggal saat halaman itu dibuka.

: tombol apabila kita ingin menambahkan Artikel

artikel •

Delete button : tombol untuk menghapus isi dari detail artikel

•

Halaman

: berisi informasi dimana letak halaman kita saat ini

                         

http://digilib.mercubuana.ac.id/

3.5.1.17 Halaman Edit Artikel Admin

  Header    Artikel 

 

Tanggal   

 

Logout

  Home‐nama halaman 

Nama   

 

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

•

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

•

Nama

: menunjukan tanggal saat halaman itu dibuka.

: berisi detail nama artikel.

http://digilib.mercubuana.ac.id/

•

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

Logo

: gambar logo dari aplikasi website ini.

http://digilib.mercubuana.ac.id/

•

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

http://digilib.mercubuana.ac.id/

 

     Halaman 

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.

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.

http://digilib.mercubuana.ac.id/

  Logo

  Tanggal  Menu Masakan 

Search engine 

Pilihan Benua   

Asian Food 

Europian Food 

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.

http://digilib.mercubuana.ac.id/

3.5.2.4 Halaman Negara User   Logo 

  Tanggal  Menu Negara 

Search engine

Nama benua pilihan 

Latest Food 

 

Negara  

Negara  

Negara  

Negara  

 

Negara  

Negara  

Negara  

Negara  

Negara  

Negara  

Negara  

Negara  

Negara  

Negara  

Negara  

Negara  

Detail food 

     

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.

http://digilib.mercubuana.ac.id/

3.5.2.6 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    

Deskripsi Masakan 

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

http://digilib.mercubuana.ac.id/

•

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   Logo    Tanggal  Menu Detail Masakan  Asal Masakan   

Search engine   

 

 

 

           Nama Masakan 

History 

Gambar Masakan 

    Vidio Resep  Masakan 

Detail Resep   

Review Resep  Masakan 

     

Gambar 3.26 Detail Masakan Keterangan gambar: •

Tanggal

: menunjukan tanggal berapa saat user membuka

website. •

Logo

•

Menu detail masakan : pilihan menu detail masakan yang ada didalam

: gambar logo dari aplikasi website ini.

halaman user. •

Search engine

: tool untuk mencari informasi spesifik yang

terdapat dalam halaman tersebut.

http://digilib.mercubuana.ac.id/

•

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

•

Vidio resep masakan : video yang menampilkan peragaan tata cara

: ilustrasi gambar dari masakan yang kita pilih.

memasak masakan tersebut. •

Review resep masakan : sekilas informasi dari resep masakan yang lain.

3.5.2.8 Halaman Kontak Kami User  

Logo 

  Tanggal  Menu Kontak Kami  KONTAK KAMI  Name   

 

 

       Phone 

Address  

 

 

       Email 

Message       

Reset

 

Gambar 3.27 Kontak Kami User

http://digilib.mercubuana.ac.id/

Submit

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, email

dan pesan yang ingin disampaikan. •

Submit

: button untuk mengirimkan pesan.

•

Reset

: button untuk menghapus semua data yang telah

dimasukan.  

http://digilib.mercubuana.ac.id/