Bahasa Pemrograman yang Digunakan .1 PHP (Personal Home Page).1 PHP (Personal Home Page)

PHP adalah salah satu bahasa server-side yang didesain khusus untuk aplikasi web. PHP dulunya merupakan proyek pribadi dari Rasmus Lerdorf

(dengan dikeluarkannya php versi 1) yang digunakan untuk membuat home page pribadinya. Versi pertama ini berupa kumpulan script PERL. Untuk versi keduanya, Rasmus menulis ulang script-script PERL tersebut menggunakan bahasa C, kemudian menambahkan fasilitas untuk form html dan koneksi MYSQL. Adapun PHP didapat dari singkatanPersonal Home Pages.

PHP merupakan bahasa script yang dapat digunakan untuk membuat halaman web yang dinamis. Dinamis berarti halaman yang ditampilkan dibuat saat halaman itu diminta oleh client. Mekanisme ini menyebabkan informasi yang diterima client selalu yang terbaru. Semua script PHP dieksekusi pada server dimana script tesebut dijalankan. Oleh karena itu, spesifikasi server lebih berpengaruh pada eksekusi dari script PHP daripada spesifikasi client. Namun tetap diperhatikan bahwa halaman web yang dihasilkan tentunya harus dapat dibuka oleh browser pada client.

PHP masuk kedalam kategori server-side scripting dimana browser pada client tidak lagi bertanggung jawab dalam menjalankan kode-kode PHP, melainkanwebserverproses ini diilustrasikan kedalam gambar berikut.

Gambar 2.5 PHP Interpreter

Pertama-tama web browser pada client me-request sebuah file (1). Dalam kasus ini bagaimanapun juga file yang di-request ber-ekstensi/berakhiran .php (contoh: File.php), tanda bawah didalam file tersebut terkandung kode-kode PHP yang perlu diproses olehserver. Webservermengenali file ini dan tidak mengirim file tersebut langsung kebrowser, tetapi dikirim ke PHP scripting engine (2) (mesin pengolah kode-kode PHP). PHP engine merupakan komponen perangkat

lunak dari server yang mampu mengartikan kode-kode PHP dan memberikan output dalam kode HTML. Setiap kode PHP dapat memberikan output kode HTML yang berbeda, tergantung pada jenis request dari client (browser). Proses tersebut membangkitkan halaman HTML secara dinamis lalu dikirimkan kembali ke client (browser) untuk merespon terhadap request yang sebelumnya telah dikirimkan.

Pemograman disisi server biasanya digunakan untuk membuat sebuah websiteyang interaktif yang dihubungkan ke dalam basis data atau data store lain.

❳ ❨❳❨ ❩❬ ❨❳ ❭ ❪ ❫❴ (Hypertext Markup Language)

Untuk menyediakan informasi terdistribusi dalam suatu bentuk yang terintegrasi, diperlukan suatu standar untuk mengekspresikan informasi. HTML merupakan bahasa yang digunakan oleh WWW untuk kosistensi ekspresi suatu informasi. Sebuah dokumenthypermediameliputi teks, gambar, suara, video, dan tape, informasi yang lainnya. HTML juga dapat menghubungkan informasi dalam dokument yang berbeda. Bahasa HTML bersifat indenpenden terhadap platform sehingga dapat digunakan tanpa adanya batasan dari jenis hardware maupun software.

2.2.10.3 Javascript

Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan LiveScript yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator2. Pada masa itu bahasa ini banyak di kritik kurang aman, pengembangannya yang terkesan buru-buru dan tidak ada pesan kesalahan yang ditampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembangan bahasa pemograman Java ) pada masa itu, maka Netscape memberikan nama JavaScript kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai Jscript di browser Internet Explorer 3.

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu document HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip yang pertama untuk web. Bahasa ini adalah bahasa pemograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.

Javascript bergantung kepada browser (navigator) yang memanggil halaman web yang berisi skrip-skrip dari Javascripti dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penerjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk ke dalam browser tersebut). Lain halnya dengan bahasa Java (dengan nama Javascript selalu dibanding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/client.

Javascript merupakan suatu bahasa yang perkembangannya lambat di bandingkan dengan Java yang berkembang sangat cepat. Di Javascript kita tidak mungkin menyembunyikan kode skrip yang kita tulis, kode langsung di tulis di dalam dokumen HTML, satu mesin virtual di isi user yang bertanggung jawab untuk menterjemahkan program di dalam applet tersebut dipanggil oleh browser. Dibandingkan dengan applet java yang cukup lambat dibuka oleh browser, biasa kita katakan bahwa javascript cukup cepat dipanggil (di-load) oleh navigator. Javascript sendiri merupakan bahasa yang mudah dipahami, dalam artian diperlukan skill novice atau dasar untuk mengerti bahasa ini, jika anda sudah terbiasa dan mengenal konsep bahasa pemograman visual, maupun Java ataupun C, akan sangat mudah untuk memahami konsep Javascript.

Javascript adalah bahasa yang casesensitive artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel dengannama test. Dan yang terakhir seperti bahasa Java maupun C, setiap instruksi diakhiri dengan karakteristik titik koma (;).

❜❝ ❜❞ ❞❞ ❝❡❝❢ ❞ ❣❞ ❣❤❝❡✐❥ ❦❝❡ ❧❝❡G❝❡❣❞ ❣♠ ❥ ♥ ♦♣qr st✉ s✈✇①②③ s✐② s④⑤①④ ⑥⑦⑧⑨⑩ ❶⑨❷⑨⑨❷ ⑩ ⑦ ❸❹⑨ ❺⑨❷ ⑩ ⑦❻❼⑨ ❽❻⑨⑩❺⑦⑩ ❾ ❹⑧⑨⑩ ❿⑩⑨❷ ❽⑨ ❾⑨ ❺⑨❷❸ ❸⑨⑧ ➀➁ ❼ ❿⑧ ❹ ➂➃ ➀ ➀ ❶⑨➄❽⑨ ❹ ➀➁ ➅❸ ❿❶ ❺❿❶ ➂➃➀➀ ❾❹ ➆ ➇. ➈⑨❻ ❿➄ ➆⑨ ❺⑦❻ ❹❷ ❸ ❶⑦⑧⑨➄⑨ ➀ ➂ ➉⑨ ❻ ❹. ⑥⑨ ❾⑨ ❼⑨❷❸⑩⑨ ➊⑨⑩❺❿❺⑦❻ ❶⑦➋❿ ❺❾ ❹⑧⑨⑩ ❿⑩⑨❷❽⑦❷ ❸❿➄❽ ❿⑧⑨❷❾⑨ ❺⑨➌⑨❷❸❾❹➋❿❺❿➉⑩ ⑨❷❿❷❺❿⑩ ❽⑦➄➋⑨❷ ❸❿❷⑨ ❷ ➍➎➏ ➐ ➑➒➎ ➈⑨❻❿➄➆⑨ ❺⑦❻ ❹❷❸. ♦♣➓❝➔s ✈→➣ →➣ ♥s➣ s ✈s↔ ↕⑦❻ ❿ ❽⑨⑩ ⑨❷ ❺⑨➉⑨ ❽ ➄⑦❷❸ ❿❻⑨ ❹⑩ ⑨❷ ❶⑦⑧ ❿❻ ❿➉ ⑩ ⑦➋❿ ❺❿➉⑨❷ ➌⑨❷❸ ❾❹❸❿❷⑨⑩ ⑨❷ ❿❷❺❿⑩ ➄⑦❷ ❸ ❸⑨➄ ➋⑨❻⑩ ⑨❷ ⑩⑦➋❿❺❿➉⑨❷ ❶⑦ ➙⑨❻⑨ ❾⑦ ❺⑨ ❹⑧ ❾⑦❷ ❸⑨❷ ❺❿❼ ❿⑨❷ ❿❷❺❿⑩ ➄⑦❷ ❸➉⑨ ❶ ❹⑧⑩⑨❷ ❶⑦ ❶ ❿⑨ ❺❿➌⑨❷❸➋⑨❻❿⑨ ❺⑨ ❿➄⑦➄❽⑦❻➋⑨➉⑨❻ ❿ ❹ ➛⑦ ➙⑨❻⑨ ❿➄❿➄ ⑨❷⑨⑧ ❹❶ ❹❶ ➌⑨❷❸ ⑨⑩⑨❷ ❾❹⑧⑨⑩❿⑩ ⑨❷ ⑨ ❾⑨⑧⑨➉ ➄⑦❷ ❸⑦❷⑨ ❹ ➋⑨➉⑨ ❶⑨ ❽⑦➄❻➜❸❻ ⑨➄⑨❷ ➌⑨❷❸❾ ❹❸❿❷⑨⑩ ⑨❷➋⑦ ❶⑦❻ ❺⑨ ➒➝ ➝➞➐➟ ➒➝ ➝➞➐⑨ ❽⑨ ❶⑨❼⑨ ➌⑨❷❸❾❹➋❿❺❿➉⑩ ⑨❷ ❿❷❺❿⑩ ➄⑦➄➋⑨❷ ❸❿❷ ➍➎➏ ➐ ➑➒➎ ❹❷ ❹. ➅❷⑨⑧ ❹❶ ❹❶ ⑧❹❷❸⑩❿❷❸⑨❷ ❾⑨❻ ❹ ❶ ❹❶ ❺⑦➄ ➄⑦❷❸❿❻ ⑨ ❹⑩⑨❷ ❶⑦❼ ❿➄⑧⑨➉ ⑦❷❺❹❺⑨ ❶ ➌⑨❷❸ ⑨ ❾⑨ ➉❿➋❿❷❸⑨❷❷➌⑨ ❾⑦❷ ❸⑨❷ ❶ ❹❶ ❺⑦➄ ❾⑨❷ ➋⑦❻ ❽⑦❷ ❸⑨❻ ❿➉ ❺⑦❻➉⑨ ❾⑨ ❽ ❶ ❹❶ ❺⑦➄. ➅❷ ⑨⑧ ❹❶❹❶ ❶ ❹❶❺⑦➄ ➄⑦❷ ❸ ❿❻ ⑨ ❹⑩⑨❷ ❽❻➜❶⑦ ❶-❽❻➜❶⑦ ❶ ❾⑨❷ ❾⑨ ❺⑨-❾⑨ ❺⑨ ➌⑨❷ ❸ ❺⑦❻⑧ ❹➋⑨ ❺ ❾ ❹❾⑨⑧⑨➄ ❶ ❹❶ ❺⑦➄. ➠⑦❻ ❹⑩❿❺❹❷❹➋⑦➋⑦❻ ⑨ ❽⑨❽⑦❻➄⑨ ❶⑨⑧⑨➉⑨❷ ➌⑨❷ ❸⑨ ❾⑨ ❽⑨ ❾⑨❶ ❹❶ ❺⑦➄ ❶⑨⑨ ❺❹❷ ❹➡ ➀➢ ↕⑨ ❶ ❹➉ ➄⑦❷ ❸ ❸❿❷ ⑨⑩ ⑨❷ ❶❹❶ ❺⑦➄ ❽⑦➄⑨ ❶⑨❻ ⑨❷ ❾⑦❷❸⑨❷➄⑦ ❺➜❾⑦➌⑨ ❷ ❸ ❺⑦❻➋⑨ ❺⑨ ❶❶⑦❻ ❺⑨ ❽⑦❷➌⑨➄❽⑨ ❹⑨❷ ❹❷ ➤➜❻➄⑨ ❶ ❹ ❾⑦❷ ❸⑨❷ ❽⑦❷❸⑨❼ ❿⑨❷ ❽❻➜❽➜❶⑨⑧ ⑩ ⑦ ❽⑨ ❾⑨ ⑩➜❷❶ ❿➄⑦❷. ➆⑨❻⑨❺⑦❻❶⑦➋❿ ❺➄⑦➄ ➋❿ ❺❿➉⑩⑨❷➋❹⑨➌⑨❶⑦❻ ❺⑨❺⑦❷⑨ ❸⑨⑧⑦➋❹➉➢ ➂➢ ➛❹❶ ❺⑦➄ ❽⑦➄⑨ ❶⑨❻ ⑨❷ ➌⑨❷ ❸ ❾❹ ❸❿❷ ⑨⑩⑨❷ ❶⑨⑨ ❺ ❹❷❹ ➄⑨ ❶ ❹➉ ➋⑦⑧ ❿➄ ➄⑨➄❽❿ ➄⑦❷❼⑨❷❸⑩ ⑨ ❿⑧⑦➋❹➉➋⑨❷➌⑨ ⑩⑩➜❷❶ ❿➄⑦❷ ➢ ➥➢ ➦➜❷ ❶ ❿➄⑦❷ ❺❹❾⑨⑩ ➋❹❶⑨ ⑧⑨❷ ❸❶ ❿❷❸ ➄⑦⑧ ❹➉⑨ ❺ ➄⑦❷❿ ➄⑨⑩⑨❷ ⑨❷ ❶⑦ ➙⑨❻⑨ ➜❷ ⑧ ❹❷⑦ ❾ ❹⑩⑨❻⑦❷ ⑨⑩ ⑨❷❽⑦❻ ❿ ❶⑨➉⑨⑨❷➋⑦⑧ ❿➄➄⑦➄❹⑧ ❹⑩ ❹❶ ❹❶ ❺⑦➄❽⑦➄⑨ ❶⑨❻⑨❷❶⑦ ➙⑨❻⑨➜❷ ⑧ ❹❷⑦. ♦♣ ♦❝➔s✈→➣ →➣ ❣→➣⑤ ①➧➨s➔➩❣①t s ➔➩❜①②③ s ✈s➔ ➠⑦❻ ❾⑨ ❶⑨❻⑩ ⑨❷ ➉⑨ ❶ ❹⑧ ➊⑨➊⑨❷➙⑨❻⑨ ❾⑦❷❸⑨❷ ❽❹➉⑨⑩ ➈⑨❻ ❿➄ ➆⑨ ❺⑦❻❹❷ ❸, ❽❻➜❶⑦ ❾❿❻ ❽⑦➄⑨ ❶⑨❻⑨❷ ➌⑨❷ ❸❶⑦ ❾⑨❷❸➋⑦❻ ❼⑨⑧⑨❷ ❾ ❹➈⑨❻ ❿➄➆⑨ ❺⑦❻❹❷ ❸⑨ ❾⑨⑧⑨➉❶⑦➋⑨ ❸⑨ ❹➋⑦❻ ❹⑩❿❺➡

➯ ➲ ➳➵➸ ➺➻ ➼➽➸ ➾➚➪➚➸ ➶ ➹➚➸ ➶ ➺➻ ➸➶ ➘➽ ➪➽ ➼➴➚➪ ➷➚➬➻➼ ➮➚➪➽➬➱➸ ➶ ➻ ➸➪➻➘ ➾➚➴➚➪ ➼➽➹ ➱✃➚➪➴➚➘➽➪ ➼➽➸ ➻❐➚➸ ➶➾➱➪➚❒➚➬➘➚➸➵➹➽✃➷➚➬➻ ➼➮➚➪➽➬➱➸ ➶. ❮ ➲ ❰➽➬➻➺➚✃➚➚➸➼➽➹➚➘➻➘➚➸➴➽ ➼➚ ➺➚➬➚➸➴ ➬➵➾➻➘➼➽➹➚➹➻➱Ï➚ ➺➚➴➽➬➱➘➹➚➸➚➸ ➾➱➼➽ ➾➱➚ Ð➽➪➚➘➲ ÑÒÓÔnÕ Ö×Ø ×s Ù×ÚÛst ÜÕ ÝÞÔ ßÕÝ àÚáâÕÖÕÝ ã ➴➹ ➱➘➚ ➺➱ ❐➚➸ ➶ ➚➘➚➸ ➾➱ä➚➸➶➻ ➸ ➾➱➺➱➸➱ ä➽➬ä➚ ➺➱➺ ❒➽ä ➾➚➸ ä➽➬➪➻Ï➻➚➸ ➻ ➸➪➻➘ ➼➽ ➼➴ ➬➵➼ ➵➺➱➘➚➸ ➴ ➬➵å ➱➹ ➺➽➬➪➚ ➼➽➸ ➻ ❐➚➸ ➶ ➪➽➬➺➽ ➾➱➚ ➾➱ ➴➽➬➻➺➚✃➚➚➸ ➪➽➬➺➽ä➻ ➪. æ➽➬➱➘➻ ➪ ➱➸➱➚ ➾➚➹➚✃ çèéê ëìí➺➱➺➪➽ ➼❐➚➸ ➶➚➘➚➸ä➽➬Ï➚➹➚➸î ï➚ ➼ä➚➬ð➲➯ñ èéê ëìíò ➱➺➪➽ ➼❐➚➸ ➶ã ➘➚➸æ➽➬Ï➚➹➚➸

õö÷ønù úûü ûs ýþÿ ✁ ✂ù ✄☎✆ ✄✝ ✄✞ ü û✆✄ùú ✟✠ ✡☛☞✌ ☞✌✍ ✎✏✑ ✒✑ ✓ ✡✠ ✠ ✔✠✕✑ ✠ ✖ ✌☞✔✠ ✡☛✗ ✎✘✑ ✙ ✡✍✡✠ ✡✠ ✡☛☞✌ ☞✌✚ ✡✠✖✛ ☞✏✑ ✒✑ ✓✍✡✠✑ ✠ ✒✑ ✍ ✗ ✎✠ ✎✠✒✑✍✡✠ ✌✙✎✌☞✕ ☞✍ ✡✌ ☞ ✍✎✏✑✒✑✓✡✠ ✌ ☞✌ ✒✎✗. ✜✙ ✎✌ ☞✕☞✍✡✌☞ ☞✠ ☞ ✢✑✖✡ ✗ ✎☛☞✙✑✒☞ ✎☛✎✗✎✠ ✡✒✡✑ ✍✔✗✙ ✔✠ ✎✠-✍✔✗✙ ✔✠ ✎✠ ✡✙ ✡ ✌ ✡✢✡ ✚ ✡✠✖ ✛ ☞✏✑ ✒✑ ✓✍✡✠ ✑✠✒✑✍ ✌☞✌ ✒✎✗ ✚ ✡✠ ✖ ✡✍✡✠ ✛☞✏✡✠✖✑✠ ✌ ✡✗✙ ✡☞ ✛✎✠✖✡✠ ✌ ☞✌✒✎✗ ✒✎✘ ✌✎✏✑ ✒ ✛ ☞☞✗✙ ☛✎✗ ✎✠ ✒✡✌ ☞✍ ✡✠✣ ✟✠✡☛☞✌ ☞✌✍✎✏✑ ✒✑ ✓ ✡✠ ☞✠☞ ✢✑ ✖✡ ✗ ✎✠ ✎✠✒✑✍✡✠ ✌✙✎✌☞✕ ☞✍ ✡✌ ☞ ✗✡✌✑ ✍ ✡✠ ✚ ✡✠ ✖ ✛ ☞✙✎✘ ☛✑ ✍ ✡✠ ✌☞✌ ✒✎✗, ✍ ✎☛✑✡✘ ✡✠ ✚ ✡✠✖ ✡✍✡✠ ✛☞✓ ✡✌ ☞☛✍ ✡✠ ✌ ☞✌✒✎✗ ✛ ✡✠ ✙✘ ✔ ✌ ✎✌ ✚ ✡✠✖ ✛ ☞✏✑ ✒✑ ✓✍✡✠ ✑ ✠ ✒✑ ✍ ✗ ✎✠ ✖✔ ☛✡✓ ✗✡✌✑✍✡✠ ✌ ✎✓ ☞✠✖✖ ✡✗ ✎✠ ✖✓ ✡✌ ☞☛✍ ✡✠ ✌✑✡✒✑✍✎☛✑ ✡✘ ✡✠✚ ✡✠✖✛☞☞✠ ✖☞✠✍✡✠✣ õö÷ ö✤ ø ✄ùúûüûü✥þ✦ù✄✞✧ù✁ý þ✦ùü(★✩✪ ✫ ✬ ✩✪ ✭) ✮✎✘ ✡✠✖✍✡✒ ✍ ✎✘✡✌ ✚ ✡✠ ✖ ✛☞✖✑✠✡✍✡✠ ✑✠✒✑✍ ✗✎✗ ✏✡✠✖✑✠ ✌ ☞✌✒✎✗ ☞✠ ☞ ✗✎✗ ☞☛☞✍ ☞ ✌✙✎✌ ☞✕☞✍ ✡✌ ☞✌ ✎✏ ✡✖✡☞✏ ✎✘ ☞✍ ✑ ✒. ✯✣ ✰✱ ✲ ✳✴✵ ✵✲✱✶✑✡☛✷✔✘ ✎ @ 2.8 GHz. 2. ✸✹✱ ✺✻✼ ✵✽berkapasitas 320 GB. 3. ✾✿ ❀berkapasitas 1 GHz. 4. DVD✾✲❁.

5. KeyboarddanMouse.

6. Monitor VGA dengan resolusi 1024 x 768 pixel. 7. Modem untuk konektivitas internet.

õö÷ ö❂ ø ✄ùúûüûü✥þ✦ù✄✞✧ù✁❃ ✄ù✧ (❄❅ ❆❇ware)

Perangkat lunak yang digunakan untuk membangun sistem ini adalah sebagai berikut.

1. Sistem Operasi Windows XP. 2. PHP sebagai bahasa pemrograman. 3. Macromedia Dreamweaver 8. 4. XAMPP sebagaiserver localhost. 5. MySQL sebagaiDatabase.

❈❉❊ ❉ ❈ ❋n●❍■❏■s ❑▲n▼▼ ◆n●( User)

Analisis kebutuhan pengguna, bertujuan untuk mengetahui pengguna yang akan berinteraksi dengan sistem. ❖ P◗❘ ❙❚P ini dapat diakses oleh para pengunjung dan tidak memerlukan proses pendaftaran atau login terlebih dahulu. Administrator disini bertugas menyeleksi komentar yang masuk.

Pengguna yang akan menggunakan❯P◗❘ ❙❚P yang akan dibangun ini terdiri dari dua bagian yaitu ❱ ❲❳❙❨❙❘ ❚❩ ❱❚❬❩ dan pengunjung, dengan asumsi pengguna sudah terbiasa menggunakan sistem operasi windows XP adalah sebagai berikut. a❭Admin

Admin adalah bagian pengguna sistem yang mengelola seluruh data, dengan karakteristik sebagai berikut.

1. Mempunyai kemampuan dasar di bidang komputer.

2. Dapat mengoperasikan sistem operasi❪ ❙❫❩ ❬❘❬❴ ❚❖ ❙❨ ❲ ❬❯❘XP❭ 3. Memiliki pengalaman lebih lama dalam menggunakan komputer. 4. Memiliki latar belakang pendidikan minimal SMA.

b❭Pengunjung

Pengunjung adalah bagian pengguna sistem yang yang hanya dapat melihat informasi produk, dengan karakteristik sebagai berikut.

1. Mempunyai kemampuan dasar dibidang komputer. 2. Pernah membuka halaman❯P◗❘ ❙❚P.

3. Dapat mengoperasikan sistem operasi❪ ❙❫❩ ❬❘❬❴ ❚❖ ❙❨ ❲ ❬❯❘XP.

❈❉❵❋❛ ●❍■❏ ■❏❜▲ ❝◆ ❞◆ ❡●❛❢◆❛▼❏ ■❣❛ ●❍

Kebutuhan fungsional merupakan tahap perancangan pola aliran informasi yang meliputi perancangan diagram konteks, dan aliran informasi yang di representasikan dengan menggunakan❲❱❚❱❴ ❤❬ ❯❲❙❱✐❩ ❱ ❳(DFD).

❥❦❧ ❦♠ ♥♦♣q r♣stont✉✈s

Diagram konteks atau disebut juga dengan model sistem fundamental merepresentasikan seluruh elemen sistem sebagai sebuah ✇ ①✇✇ ②③ tunggal dengan data④⑤⑥ ①⑦⑧⑨ ①⑦⑥ ①⑦ yang ditunjukkan oleh anak panah yang masuk dan keluar secara berurutan.

Gambar 3.2 Diagram Konteks

❥❦❧ ❦⑩ ❶❷❸ ❷❹ ❺❻❼❶❽ ❷❾❿ ❷➀(♥➁ ♥)

➂➃⑦➃➄②⑨➅ ➂④➃➆➇ ➃➈(DFD) merupakan suatu media yang digunakan untuk menggambarkan aliran data yang mengalir pada suatu sistem informasi.➂➃⑦➃➉②⑨➅

➋➌➍ ➌➎➌ ➏ ➐➑➐➒➓➔➓ →➏

➣↔↕ ↔➙↔ ➙ ➛➜➛➝➞➟➞ ➠➙➡➢➤ ➥➞ ➥➡➞ ➦➧➤➠➨➩ ➨➦➛ ➨➫➨➭➞ ➯➥

Gambar 3.4 DFD Level 2 Proses Pengolahan Data News

➣↔↕ ↔➙↔➣ ➛➜➛➝➞➟➞ ➠➙➡➢➤ ➥➞ ➥➲➞ ➥ ➫➳➵➤ ➦➳➨➠

➸➺➻ ➺➼➺ ➽ ➾➚➾➪➶➹➶ ➘➼➴➷➬ ➮➶ ➮➱➬ ✃❐ ❒❮❐

Gambar 3.6 DFD Level 2 Proses Pengolahan Data Contact

➸➺➻ ➺➼➺ ❰ ➾➚➾➪➶➹➶ ➘➼➴➷➬ ➮➶ ➮➪➬ ÏÐ✃ D a ta lo g in

ÑÒÓ Ò Ñ ÔpÕÖ ×Ø ×ÙÚ Ö×ÛrÜ Ö Õs

Spesifikasi proses digunakan untuk menggambarkan proses model aliran yang terdapat pada DFD. Spesifikasi proses dari DFD akan dijelaskan pada tabel dibawah berikut.

Tabel 3.1 Spesifikasi Proses DFD

No Identifikasi

1

No Proses 1.0 Nama Proses Home Source Pengunjung Destination Pengunjung

Input Data Home

Output Info Home

Logika Proses ^{Pengunjung melihat informasi yang ada di menu home dan} merupakan tampilan awal situs

2

No Proses 2.0 Nama Proses Profil Source Pengunjung Destination Pengunjung Input data profil Output info profil Logika Proses

Pengunjung melihat informasi profil perusahaan yang ada di menu profil

3

No Proses 3.0 Nama Proses Menu Source Pengunjung Destination Pengunjung

Input data menu

Output info menu Logika Proses

Pengunjung melihat informasi menu makanan yang ditawarkan

4

No Proses 4.0 Nama Proses Sertifikat Source Pengunjung Destination Pengunjung Input data sertifikat Output info sertifikat

Logika Proses Pengunjung melihat sertifikasi yang dimiliki perusahaan 5 ^{No Proses 5.0}

Source Pengunjung, Admin Destination Pengunjung, Admin

Input data news

Output info news Logika Proses

Pengunjung dapat melihat berita terbaru di menu news. Admin dapat melakukan penambahan, pengeditan, dan penghapusan data news

6

No Proses 6.0

Nama Proses Testimonial

Source Pengunjung, Admin Destination Pengunjung, Admin Input data testimoni Output info testimoni

Logika Proses ^{Pengunjung dapat melihat informasi yang ada di menu} testimonial. Admin dapat memasukan data testimonial

7

No Proses 7.0 Nama Proses Contact

Source Pengunjung, Admin Destination Pengunjung, Admin Input data contact

Output info contact Logika Proses

Pengunjung dapat melihat dan memasukkan data komentar ke menu contact. Admin dapat menghapus dan mengedit

komentar dari pengunjung

8

No Proses 8.0 Nama Proses Login

Source Admin

Destination Admin Input data logain Output info login

Logika Proses ^{Admin memasukkan data username dan password untuk} melakukan autentikasi login

9

No Proses 5.1

Nama Proses Tambah news

Source Admin

Destination Admin

Input data tambah news Output info tambah news

Logika Proses Admin dapat menambahkan data pada menu news 10 ^{No Proses 5.2}

Source Admin Destination Admin

Input data edit news Output info edit news

Logika Proses Admin dapat mengedit data yang ada di menu news

11

No Proses 5.3

Nama Proses Hapus news

Source Admin

Destination Admin

Input data tambah testimoni Output info tambah testimoni

Logika Proses Admin dapat menghapus data yang ada di menu news

12

No Proses 5.4

Nama Proses Lihat news Source Pengunjung Destination Pengunjung Input data lihat news Output info lihat news

Logika Proses Pengunjung dapat melihat informasi yang ada di menu news

13

No Proses 6.1

Nama Proses Tambah testimoni

Source Admin

Destination Admin

Input data tambah testimoni Output info tambah testimoni Logika Proses

Admin dapat melakukan penambahan data pada menu testimoni

14

No Proses 6.2

Nama Proses Lihat testimoni Source Pengunjung Destination Pengunjung Input data testimoni Output info testimoni Logika Proses

Pengunjung dapat melihat informasi yang ada pada menu testimoni

15

No Proses 7.1

Nama Proses Tambah contact komentar Source Pengunjung

Destination Pengunjung Input data komentar Output info komentar

Logika Proses ^{Pengunjung dapat menambahkan data komentar dengan} memasukkan nama, email, dan komentar

16

No Proses 7.2

Nama Proses Edit contact komentar

Source Admin

Destination Admin

Input data edit komentar Output info edit komentar Logika Proses

Admin dapat melakukan perubahan pada data komentar pengunjung

17

No Proses 8.1 Nama Proses Verifikasi

Source Admin

Destination Admin Input data login Output data login

Logika Proses ^{Admin memasukkan data login berisi username dan password} lalu sistem melakukan verifikasi data tersebut

18

No Proses 8.2 Nama Proses Validasi

Source Admin

Destination Admin Input data login

Output info login invalid Logika Proses

Sistem melakukan validasi data login admin jika benar maka admin bisa masuk, jika tidak maka admin mendapat pesan invalid

ÝÞßàáâ ãäâãåâãr

Perancangan dimulai setelah tahap analisi terhadap sistem telah dilakukan. Perancangan dapat didefinisikan sebagai penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi.

ÝÞß Þæ àáâãäâ ãå â ãr çâ è és êâ ëâ

Perancangan data atau lebih dikenal dengan perancangan basis data yaitu menciptakan atau merancang data yang terhubung dan disimpan secara

bersama-sama. Untuk menggambarkannya digunakan skema relasi dan perancangan struktur tabel.

ìíî íïí ï ðñòó ôõò öô÷ ø

Model data relasional merupakan model data di mana hubungan antar data, arti data dan batasannya dijelaskan dengan baris dan kolom. Secara formal, ke semuanya itu digambarkan ke dalam skema relasi dan diagram skema. Adapun skema relasi yang terdapat dalamù úûü ýþúHarum Catering adalah sebagai berikut:

Gambar 3.8 Skema Relasi

ìíî íïíÿ ðtruñtur ô✁ò ö

Tabel-tabel yang terdapat dalam basis data yang digunakan dalam pembangunanù úûü ýþúharum catering adalah sebagai berikut:

a. Tabel Admin

Table 3.2 Tabel Admin

No Field Type Size Keterangan

1 _{id_admin} integer 11 ✂✄ý☎✆✄ ✝Key

2 email_admin varchar 45 Unique Key

3 _{nama_admin} varchar 45

4 HP varchar 15

b. Tabel Komentar

Table 3.3 Tabel Komentar

No Field Type Size Keterangan

1 _no integer 11 ✞✟ ✠✡☛✟ ☞Key

2 _nama varchar 30

3 email varchar 30

4 _komentar text

-5 _status enum - yaortidak

6 log datetime

7 session varchar 45

c. Tabel Testimoni

Tabel 3.4 Tabel Testimoni

No Field Type Size Keterangan

1 no integer 11 Primary Key

2 nama varchar 30 3 _jabatan varchar 30 4 perusahaan varchar 30 5 _testimoni text -6 head varchar -d. Tabel News

Tabel 3.5 Tabel News

No Field Type Size Keterangan

1 No integer 100 Primary Key

2 Penulis varchar 30

3 Judul varchar 150

4 Berita text

5 Log datetime

✌✍✎ ✍✏ ✑✒r✓✔✕ ✓✔ ✖ ✓✔✗u✘trtur✙ ✒nu

Struktur menu dirancang sesuai dengan level pengguna sistem. Terdapat dua pengguna✚ ✛✜✢ ✣✤✛ini yaitu admin dan pengunjung. Adapun struktur menunya adalah sebagai berikut:

a. Perancangan struktur menu pengunjung

Gambar 3.9 Struktur Menu Pengunjung b. Perancangan struktur menu admin

Gambar 3.10 Struktur Menu Admin

✌✍✎ ✍ ✌ ✑✒r✓✔✕ ✓✔ ✖ ✓✔✥nt✓✦✧u✘✓

Spesifikasi antarmuka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan ✣★ ✤✛✩ ✪✫✬ ✛ dengan ✭✢ ✛✩. Spesifikasi antarmuka

terdiri dari Perancangan tampilan menu, tampilan form, tampilan pesan, dan jaringan semantik. ✮✯✰ ✯ ✮✯ ✱ ✲✳✴ ✵✶✴✵✷✴✵r ✸n✴ ✹✺t ✻✴u ✸✼✺ ✽n a. Login Admin -Submit diklik menuju FA0 -Keluar pesan M02 Jika usename dan password salah

Gambar 3.11 Login Admin

b. Menu Utama Admin

-News diklik menuju FA4

-Komentar diklik menuju FA2 -Testimoni diklik menuju FA3 -Logout diklik keluar

c. Pengolahan Data Testimoni -News diklik menuju FA4 -Komentar diklik menuju FA2 -Testimoni diklik menuju FA3 -Logout diklik keluar

Gambar 3.13 Pengolahan Data Testimoni

d. Pengolahan Data Komentar

-News diklik menuju FA4 -Komentar diklik menuju FA2 -Testimoni diklik menuju FA3 -Logout diklik keluar

e. Pengolahan Data News

-News diklik menuju FA4

-Komentar diklik menuju FA2 -Testimoni diklik menuju FA3 -Logout diklik keluar

Gambar 3.15 Pengolahan Data News

✾✿❀ ✿ ✾✿ ❁ ❂❃❄ ❅❆❄❅❄ ❅r ❇n❄ ❈❉t ❊❄u ❂❃❋ ●n n❍❋un a. Home

-Profil diklik menuju F02 -Menu diklik menuju F03 -Sertifikat diklik menuju F04

-News diklik menuju F05 -Testimoni diklik menuju F06

-Contact diklik menuju F07

b. Menu Profil

-Home diklik menuju F01 -Menu diklik menuju F03 -Sertifikat diklik menuju F04

-News diklik menuju F05 -Testimoni diklik menuju F06

-Contact diklik menuju F07

Gambar 3.17 Profil c. Menu Makanan

-Profil diklik menuju F02 -Sertifikat diklik menuju F04

-News diklik menuju F05 -Testimoni diklik menuju F06

-Contact diklik menuju F07 -Paket Nasi dus diklik menuju F03a

-Paket Prasmanan diklik menuju F03b

-Paket Corporate diklik menuju F03c

d. Sub Menu Nasi Dus

-Profil diklik menuju F02 -Home diklik menuju F01 -Sertifikat diklik menuju F04

-News diklik menuju F05 -Testimoni diklik menuju F06

-Contact diklik menuju F07 -Paket prasmanan diklik menuju F03b

-Paket corporate diklik menuju F03c

Gambar 3.19 Sub Menu Nasi Dus e. Sub Menu Prasmanan

-Profil diklik menuju F02 -Home diklik menuju F01 -Sertifikat diklik menuju F04

-News diklik menuju F05 -Testimoni diklik menuju F06

-Contact diklik menuju F07 -Paket Nasi Dus diklik menuju F03a

-Paket corporate diklik menuju F03c

f. Sub Menu Corporate

-Profil diklik menuju F02 -Home diklik menuju F01 -Sertifikat diklik menuju F04

-News diklik menuju F05 -Testimoni diklik menuju F06

-Contact diklik menuju F07 -Paket prasmanan diklik menuju F03b

-Paket Nasi Dus diklik menuju F03a

Gambar 3.21 Sub Menu Corporate g. Menu Sertifikat

-Profil diklik menuju F02 -Menu diklik menuju F03 -Home diklik menuju F01 -News diklik menuju F05 -Testimoni diklik menuju F06

-Contact diklik menuju F07

h. Menu News

-Profil diklik menuju F02 -Menu diklik menuju F03 -Sertifikat diklik menuju F04

-Home diklik menuju F01 -Testimoni diklik menuju F06

-Contact diklik menuju F07

Gambar 3.23 Menu News i. Menu Testimoni

-Profil diklik menuju F02 -Menu diklik menuju F03 -Sertifikat diklik menuju F04

-News diklik menuju F05 -Home diklik menuju F01 -Contact diklik menuju F07

j. Menu Contact

-Profil diklik menuju F02 -Menu diklik menuju F03 -Sertifikat diklik menuju F04

-News diklik menuju F05 -Testimoni diklik menuju F06

-Home diklik menuju F01

Gambar 3.25 Menu Contact

■❏❑ ❏ ■❏■ ▲▼◆ ❖P◆❖◗◆❖r ❘n◆ ❙❚t ❯◆u ▲▼ ❱◆❖

Pada gambar dibawah ini merupakan perancangan pesan yang terdapat pada aplkasi ❲ ❳❨ ❩❬❭❳ Harum Catering. Adapun tampilan pesan yang ada adalah sebagai berikut :

❪❫❴ ❫ ❪❫ ❵ ❛ ❜❝❞❡❢ ❜❡❣❤✐ ❜❡❥❞ ❦

Setelah melakukan perancangan antarmuka dan perancangan pesan maka dilakukanlah perancangan terhadap aliran dari menu-menu yang ada di program akan digambarkan dalam sebuah jaringan simantik.

a. Jaringan semantik admin

Gambar 3.27 Jaringan Semantik Admin b. Jaringan semantik pengunjung

❧♠♥♦ ♣pqr♣ rs t ✉nt ✈pq✉✇st ✉ ❧♠♥ ♠① ✈s ② ♣nt u✇s✈③♣ ✉n

Gambar 3.29 Halaman Login Admin

Gambar 3.30 Halaman Menu Utama Admin

Gambar 3.32 Pengolahan Data Testimoni

Gambar 3.34 Pengolahan Data News

④⑤⑥ ⑤⑦ ⑧nt⑨⑩❶u❷ ⑨❸❹n❺ ❻❼n❺un

Gambar 3.36 Halaman Utama Home

Gambar 3.37 Halaman Profil

Gambar 3.39 Halaman Sub Menu Nasi Dus

Gambar 3.40 Halamn Sub Menu Paket Prasmanan

Gambar 3.42 Halaman News

Gambar 3.44 Halaman Testimoni

❿ ➀❿➁ ➂ ➃➄ ➅➁ ➆➇➈➉➀➊➋ ➀➊➅➀➌➀➊ ➍➎➏➃➐➑ ➒➓ ➔→➣↔↕ ➙ ➛➜➝ ➞➟ ➞➜➠ ➞➡ ➢ ➛➡➛➤➥➦➥ ➞➡ ➧➞➡ ➨ ➝➥➤ ➞➠➩ ➠ ➞➡ ➫➤ ➛➭ ➢➛➡➩ ➤➥ ➟ ➯ ➛➡➨ ➛➡➞➥ ➢➛➯➲ ➞➡ ➨➩➡➞➡ ➳➵➸ ➺ ➻➼➵➽➞➜➩ ➯➾➞➦ ➛➜➥➡ ➨➚ ➯➞➠ ➞➝➥ ➝ ➞➢ ➞➦➠ ➛➟➥ ➯➢ ➩➤ ➞➡➟ ➛➲➞➨ ➞➥➲ ➛➜➥ ➠➩ ➦➪ ➶ ➹ ➘➵➸ ➺ ➻➼➵ ➥➡ ➥ ➝ ➞➢ ➞➦ ➯➛➯ ➲➞➡ ➦➩ ➴➛➜➩➟ ➞➭➞➞➡ ➽➞➜➩ ➯ ➾➞➦➛ ➜➥➡➨ ➝ ➞➤ ➞➯ ➯ ➛➯➢➜➫ ➯➫ ➟➥ ➠ ➞➡ ➢ ➜➫➝➩➠➷➢➜➫ ➝➩ ➠➡➧➞➚ ➟ ➛➭➥➡ ➨➨ ➞ ➢➜➫ ➝➩ ➠➷➢➜➫➝➩➠➡➧➞ ➝➞➢➞➦ ➝➥ ➠➛➡➞➤➥➫➤ ➛➭➯ ➞➟ ➧➞➜➞➠ ➞➦➤➩➞➟➹ ➬➹ ➴➛➤ ➞➡ ➨➨➞➡ ➞➠ ➞➡ ➤ ➛➲➥ ➭➯➩ ➝ ➞➭➯ ➛➤➥ ➭➞➦ ➢ ➜➫➝➩➠➦ ➛➜➲ ➞➜➩ ➧➞➡ ➨ ➝➥➢➞➟ ➞➜➠ ➞➡➫ ➤ ➛➭ ➴➛➜➩➟ ➞➭➞➞➡➽➞ ➜➩ ➯➾➞➦ ➛➜➥➡➨➚ ➠ ➞➜➛➡➞➢➜➫➝➩ ➠➦ ➛➜➲ ➞➜➩ ➧➞➡ ➨ ➝➥➢ ➞➟ ➞➜ ➠➞➡ ➟➩➝➞➭ ➲➥ ➟➞➝➥➤➥ ➭ ➞➦➯➛➤ ➞➤➩ ➥➯➛➝➥ ➞➫ ➡➤➥➡➛➟ ➛➢ ➛➜➦➥➥➡ ➦ ➛➜➡➛➦➹ ➍➎➮ ➅↔➱↔↕ ➘➵➸➺ ➻➼➵ ➽➞➜➩➯➾➞➦ ➛➜➥➡ ➨ ➥➡ ➥ ➯➞➟➥ ➭ ➲➞➡➧➞➠ ➠➛➠➩ ➜ ➞➡➨➞➡ ➝➥ ➝ ➞➤ ➞➯➡ ➡ ➧➞➹ ✃➞➤ ➞➭ ➟ ➞➦➩➡➧➞ ➟ ➞❐➥ ➞➡ ➯ ➛➡➩ ➯➞➠ ➞➡ ➞➡ ➧➞➡ ➨ ➯➞➟➥ ➭ ➯ ➛➡ ➨➨➩ ➡ ➞➠ ➞➡ ❒❮ ❰ ➼➵❰ ➼ ➟➦ ➞➦➥ ➟➹ Ï➛➝ ➛➢ ➞➡ ➡➧➞ ➝➥ ➭➞ ➜➞➢ ➠ ➞➡ ➦ ➞➯➢➥➤ ➞➡ ➯ ➛➡➩ ➯ ➞➠➞➡➞➡ ➯ ➛➡➨ ➨➩➡➞➠ ➞➡ ❒❮ ❰ ➼➵❰➼ ➧➞➡ ➨ ➝➥➡ ➞➯➥ ➟➹

E

Ð ÑÒÑÐ

E C

E E ÓÔÕÖ× ØÕ ÙÚÛ ÜÚ Ñ Ý Þ ß àáà

E

â ãäàå æã

E E

àçèéêá

E

Ð

E

ëìÑíîï íÑíðñìÞÝòñ Ð

E

óïÞÑô ÑÑí ôÑóï ë

C

ÑòñóÝí õEö÷øùöøõúEõ Õû×û ü× Øý þÿ þû× ÔýÕüÕ✁× ✂ÔÕ ✁þÚÖ ÕÙÚÕ Øü ÜÚÕ ÿ✄üÚÕüÕ✄Õü×☎× Ú× ✆Õû✝ þØûÔ Ø✞û ✟Û Ú ÿÕüÔ ØÕ ✠Õ Ø× ✂üÕ ✆✝ þØûÔ Ø✡Õû✞✂ ÿ×✁Û ÿ☛× ü þÚ ☞û Ô✌þÚ✆ÔüÕ ✆✁Ûÿ☛×ü þÚ ✞û✡Û û þ✆ÔÕ ÑóÒ✍Ñí✍ïÒôÝòÐ ✎ ✏ ✎✏✑ ✒✓ ✑ ÝÞëÑÝ✔✍ïÞï ✕ ✎ ✏ ✎✏✑ ✒✓✖ Þï ëÑí✗ Ñ✍Ñ ✎ ✏ ✎✏✑ ✒ ✎✓ à✘ãç æ

E

äçè äèçâ✙ á✚ãæè ä ã✘ æ

E

äçè ä✛ãç èå✚ à ä✙ ✚✜

E

á✘è æ ã✘ ä✙ ✚✜àæ

E

áèç ✛✙ç ê ✢ãç ✛àç✣ ✤ ✥✦✤

E

E C

íî E E ü þØ

E

ä ã

E

✜àæ

E

á

E

ê✘è ã

★✩✪✫ ✩✬✭✮✯✫✩✰ ✩ ✱ ✲✳✴ ✵✶✷✸ ✲✹ ✺✻✼ ✽✻✼ ✾ ✿✾ ✼ ❀ ❁❂p❃❄✻❅ E❆ ❇❈ ❇ ❉✻❆❃✾✹ ❊❋❋ ● ✹ ❍ ✲✳✵✶■ ✶❏✸ ✶❑ ▲▼✷▼❏◆✴✸ ❖✷P✴ ◗❘❘❙ ▼✸ ✹ ❚❏✴❙✸ ✶✷✸ ✲❯ ❖✷P❏ ✴ ✹ ✺✻❅✾ ✼ ❱✾ ✼✽ ✾✼ S❇❈❄✻❂ I✼ ❲❁❅❂✾❈❇ ❆✾✼ ❳ ❨ ✿❇❉✾❈ ❇✼ ❩✾ ❬ ❊❋ ❋ ❭ ✹ ❍ ✲✳ ✵✶ ■✶❏✸ ✶❑ ▲▼✷▼❏◆✴✸❪✶❫ ✶❴▼P✴ ✶✹ ❖❵❛ ✲❜❏ ❯ ❴▼❛P✴ ✹ ▲❝▲ ❴✶✷❜ ✶❞ ✹ ❡ ❊ ❢ ✲❫▼❣◆ ▼❏ ❊❋❡❡ ✹ ❤✶❏ ✴ ❛✸✸✐ ❑❥❥✐❛✐✹✷▼✸ ❥❣✶✷❜ ✶❞ ❥▼✷❥✴ ✷P ▼❦✹✐ ❛✐ ❧ ❧❧ ❧❧ ❧❧ ❧❧ ❧❧ ❧❧ ❧❧✹✱ ✶❫ ✶♠❵❏✴✐ ✸ ♥❜✸ ✲❏ ✴ ✶❞ ✹ ❡ ❊ ❢ ✲❫▼❣◆▼❏ ❊❋❡❡ ✹ ❤✶❏ ✴ ❛✸✸✐ ❑❥❥♦♦♦✹♦♣❙❵❛✲ ✲❞❙✹❵✲❣ ❥q❙❥