BAB I
PENDAHULUAN
1.1 Latar Belakang Masalah
Pada masa sekarang ini, banyak rumah makan yang mengadakan layanan delivery service (layanan pesan antar) melalui telepon, sehingga pelanggan dapat memesan makanan atau minuman tanpa harus datang ke rumah makan dan makanan atau minuman yang dipesan akan diantarkan ke alamat yang sudah disebutkan oleh pelanggan.
Cara kerja layanan delivery service (layanan pesan antar) ini ialah, pelanggan memesan makanan atau minuman yang diinginkan dengan cara menelepon rumah makan yang dimaksud terlebih dahulu. Pada saat memesan, pelanggan juga memberikan nomor telepon yang dapat dihubungi dan memberikan alamat tempat dimana pelanggan ingin makanan atau minuman yang dipesan tersebut diantar. Beberapa saat kemudian, salah satu karyawan yang bekerja di rumah makan tersebut mengantarkan makanan atau minuman yang sudah dipesan beserta tagihan yang harus dibayar oleh pelanggan ke alamat yang sebelumnya telah disebutkan oleh pelanggan yang bersangkutan. Setelah karyawan tersebut tiba di alamat yang dituju, maka pelanggan segera membayar tagihan saat itu juga.
Layanan delivery service melalui telepon ini sangat efektif bagi pelanggan yang ingin memesan makanan, terutama pelanggan yang ingin memesan makanan dalam jumlah besar, tetapi tidak sempat datang ke rumah makan karena terlalu sibuk dengan pekerjaannya.
Dengan semakin berkembangnya teknologi hingga saat ini, maka banyak rumah makan yang meningkatkan pelayanannya untuk lebih memudahkan pelanggannya dalam memesan makanan. Oleh karena itu, dalam penulisan ini penulis berusaha mencoba membuat aplikasi pemesanan makanan secara online untuk memudahkan pelanggan dalam memesan makanan, terutama dalam melihat menu makanan yang ingin dipesan, sehingga pelanggan tidak perlu menelepon untuk memesan makanan, melainkan pelanggan cukup membuka internet untuk memesan makanan dan meningkatkan pelayanan rumah makan.
1.2 Batasan Masalah
Dalam penulisan yang berjudul “Aplikasi Pemesanan Makanan Secara Online dengan Menggunakan Dreamweaver Mx, PHP, dan MySql”, penulis hanya membatasi pada pemesanan makanan lebih dari 200 porsi dan layanan dilakukan khusus untuk pelanggan yang berada di daerah Jakarta.
1.3 Tujuan Penulisan
Tujuan dari penulisan ini adalah membuat aplikasi pemesanan makanan dengan menggunakan Dreamweaver Mx sebagai editor, bahasa pemrograman PHP, dan database MySql agar dapat memudahkan pelanggan dalam memesan makanan dan lebih meningkatkan pelayanan rumah makan.
1.4 Metode Penelitian
Metode penelitian yang digunakan penulis dalam penelitian ilmiah ini adalah metode gabungan, yaitu :
a. Studi pustaka untuk memperoleh teori-teori dari buku pedoman pembuatan aplikasi berbasis web dengan menggunakan Dreamweaver Mx, PHP, dan MySql, serta sumber lainnya di internet.
b.Studi lapangan dengan meminta data (menu makanan) langsung dari nara sumbernya (pemilik rumah makan).
1.5 Sistematika Penulisan
Sistematika penulisan ilmiah ini dibagi menjadi 4 Bab, yaitu :
Bab I Pendahuluan
Berisi tentang latar belakang masalah yang mendasari penulisan, batasan masalah penulisan, tujuan penulisan, metode penelitian, dan sistematika penulisan.
Bab II Landasan Teori
Berisi tentang teori-teori yang berhubungan dan mendukung dalam penulisan ini seperti Macromedia Dreamweaver Mx, PHP dan MySql.
Bab III Pembahasan
Berisi tentang penjelasan langkah-langkah pembuatan aplikasi pemesanan makanan secara online, pembuatan database dengan MySql , dan cara kerja aplikasi pemesanan makanan tersebut.
Bab IV Penutup
Berisi kesimpulan dari semua bahasan dalam penelitian ilmiah ini dan saran sehubungan dengan penulisan ini.
BAB II
LANDASAN TEORI
2.1 World Wide Web(WWW)
World Wide Web (Jaringan Dunia Luas) merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet. Definisi umum dari internet adalah jaringan global yang menghubungkan berbagai host didunia. Layanan-layanan lain yang terdapat di internet adalah :
- Electronic Mail(E-MAIL)
E-Mail adalah surat elektronik yang dikirim melalui internet. Banyak yang menggunakan fasilitas ini sebab memudahkan user untuk berkomunikasi dengan berbagai macam manusia dari seluruh dunia dengan biaya yang terjangkau, juga kecepatan dari e-mail ini membuat para pengguna internet menyukai fasilitas e-mail ini.
b. Mailing list
Ini merupakan fasilitas untuk mengirim berita atau file ke pengguna internet dengan jumlah yang tidak terbatas, sehingga mereka dapat melakukan diskusi, ceramah, seminar secara elektronik tanpa terikat dengan waktu dan ruang.
c. FTP ( File Transfer Protocol )
Software ini memudahkan user untuk menstranfer data atau file dari satu komputer ke komputer yang lainnya. Proses mentransfer file dari sebuah komputer ke komputer user disebut dengan proses Down-load sedangkan proses mentransfer dari komputer user ke komputer lain disebut proses Up-load.
Kini internet identik dengan web karena kepopuleran web sebagai standar interface pada layanan-layanan yang ada di internet, dari awalnya sebagai penyedia informasi, kini digunakan juga untuk komunikasi dari e-mail sampai dengan chatting, sampai dengan melakukan transaksi bisnis (commerce).
2.1.1 Sekilas Lahirnya Web
Tahun 1993, Tim Berners-Lee dan peneliti lain di European Particle Physics Lab (Consei Europeen pour la Recherche Nucleaire, atau CERN) di Geneva, Swiss, mengembangkan suatu cara untuk men-share data antar koleganya menggunakan sesuatu yang disebut dengan hypertext. Pemakai di CERN dapat menampilkan dokumen pada layar komputer dengan menggunakan software browser baru.
Kode-kode khusus disisipkan dalam dokumen elektronik ini, memungkinkan pemakai untuk meloncat dari satu dokumen ke dokumen lain pada layar dengan hanya memilih sebuah hyperlink.
Kemampuan internet dimasukkan ke dalam browser ini sehingga loncat dari satu dokumen ke dokumen lain tidak lagi dari satu komputer saja, tetapi dapat meloncat ke dokumen lain yang letaknya pada komputer remote. Seorang peneliti dapat juga mengirimkan sebuah file dari komputer remote ke sistem lokalnya, atau log in ke dalam suatu system remote hanya dengan mengklik hyperlink. Jalan pintas CERN digunakan sebagai dasar dari WWW (World Wide Web) dan berikut server dan browser web-nya (sekarang di maintenance oleh World Wide Web Consortium).
World Wide Web Consortium (W3C) merupakan sekelompok akademis dan organisasi komersial yang mengabdikan diri pada kemajuan web, dibentuk pada bulan Oktober 1994, dengan jumlah anggota lebih dari 400 organisasi anggota di seluruh dunia, dan telah menghasilkan pengakuan internasional untuk kontribusinya pada perkembangan web.Web site W3C adalah http://www.w3.org/
Hasil penelitian CERN yang berkaitan dengan web kini telah diserahkan kepada W3C. CERN sekarang telah kembali pada misi awalnya melakukan penelitian pada fisika partikel.
2.1.2 Cara Kerja WWW
Cara kerja WWW tidak jauh berbeda dengan cara kerja komputer server dan komputer client dalam sebuah jaringan. Ada dua hal penting yang harus diketahui dalam WWW yaitu software Web Browser dan software Web Server. Web Browser adalah software yang digunakan untuk menampilkan informasi dari server web (contoh : Internet Explorer), sedangkan Web Server adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web, komputer ini akan melayani permintaan dokumen web dari kliennya(Web Browser).
Hal-hal yang perlu diketahui dalam WWW adalah sebagai berikut :
1. HTTP ( HyperText Transfer Protocol )
HTTP adalah sebuah protocol yang menentukan aturan main antara software
Web Browser dan software Web Sever dalam penyediaan dokumen yang diminta oleh browser.
2. URL ( Universal Resorce Locator )
URL yang menunjukkan sumber daya internet atau alamat sebuah Homepage, yaitu alamat suatu dokumen atau program yang ingin ditampilkan atau digunakan. Bagian-bagian URL yang perlu diperhatikan :
a. Protocol : ini merupakan bagian pertama dari URL misalnya http:// atau https://
b. Alamat server : ini merupakan bagian kedua dari URL yang berisi sumber daya dari homepage tersebut. Misalnya : gunadarma.ac.id.
2.2 Macromedia Dreamweaver Mx
Macromedia Dreamweaver Mx adalah sebuah program aplikasi yang digunakan sebagai editor untuk mendesain, mengkode, serta membuat aplikasi web. Aplikasi Macromedia Dreamweaver Mx menyertakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript Reference dan JavaScript Debugger. Selain itu program aplikasi ini juga memungkinkan pengeditan JavaScript, XML, dan dokumen teks lainnya secara langsung dengan menggunakan fasilitas Code Editors.
Fitur-fitur pengeditan yang ditampilkan secara visual oleh Macromedia Dreamweaver Mx membantu programmer web melakukan penambahan desain dan fungsi pada halaman web tanpa harus menuliskan satu baris kode. Semua elemen di dalam site dapat ditampilkan dan di-drag dari panel-panel (yang terdapat di dalam Macromedia Dreamweaver MX) ke dalam dokumen secara langsung dan cepat.
2.2.1 Area Kerja Macromedia Dreamweaver Mx
Gambar-gambar dibawah ini menampilkan area kerja Macromedia Dreamweaver Mx yang biasa digunakan dalam pembuatan website.
menu bar tool bar code editor konteks kotak panel
panel insert properties inspector design view
Gambar 2.1 Area Kerja Macromedia Dreamweaver Mx
Penjelasan dari gambar di atas adalah sebagai berikut :
- Menu bar, berisi menu-menu yang disediakan oleh Macromedia Dreamweaver Mx.
- Tool bar, berisi tombol-tombol dan menu pop-up yang memungkinkan user menampilkan dan mengatur jendela kerja sesuai keinginan.
- Code editor, merupakan tempat pengkodean.
- Konteks, memungkinkan pengaksesan perintah yang berkaitan dengan objek atau area di dalam jendela kerja yang terpilih (terseleksi) secara cepat.
- Kotak panel berisikan item-item yang berfungsi untuk membuka atau menutup inspector dan panel-panel.
- Panel insert berisi tombol-tombol untuk membuat atau menyisipkan berbagai tipe objek, misalnya image, tabel, layer, dan frame.
- Properties inspector, Properties Inspector menampilkan properti objek atau teks yang terseleksi untuk kemudian dapat dimodifikasi.
- Design view, merupakan tempat untuk tampilkan desain web yang dibuat.
- Selain area kerja di atas, macromedia Dreamweaver MX juga menyediakan inspector-inspector lainnya, seperti panel History.
2.2.2 Tampilan Jendela Kerja
Macromedia Dremweaver MX memungkinkan user untuk bekerja dengan berbagai cara, yaitu menggunakan (tampilan) Design View, Code View atau kombinasi, yaitu dengan menampilkan kedua cara, baik tampilan Design View maupun Code view.
Fasilitas Code Editor mampu menampilkan HTML source code (pada dokumen yang aktif) dalam beberapa cara, yang antara lain:
- Menampilkan hanya Code View di dalam Document Window.
- Menampilkan hanya Code Inspector.
- Membagi Document Window untuk menampilkan baik Code View maupun Design View.
2.2.2.1 Design View
Design View merepresentasikan dokumen secara visual. Pada saat bekerja dengan Design View, terdapat dua tampilan yang bisa dipilih, yaitu:
1. Layout View
Dengan menggunakan Layout View, halaman web dapat didesain dengan menggunakan tabel sebagai struktur dasar. Langkah menampilkan Layout View: klik menu View > Table View > Layout View atau klik icon Layout View yang terdapat pada panel Insert di kolom View.
2. Standard View
Pada umumnya Standard View digunakan untuk bekerja dengan layer, frame, tabel atau untuk fitur-fitur lain yang tidak tersedia di dalam Layout View. Untuk masuk ke dalam Standard View, caranya klik menu View > Table View > Standard View atau klik icon Standard View pada panel Insert pada kolom view.
layout view
standard view
Gambar 2.2 Standard View dan Layout View pada Panel Insert
2.2.2.2 Code View
Pada saat membuat atau bekerja dengan dokumen, Macromedia Dreamweaver MX secara otomatis memberikan dasar source code HTML. Untuk menelaah dan mengedit kode tersebut, dapat digunakan fasilitas yang disediakan Macromedia Dreamweaver MX, yaitu Code Editor. Fasilitas ini terdiri dari Code View di dalam jendela kerja atau Code Inspector. Untuk menampilkan Code View klik menu View > Code atau klik icon Show Code View yang terdapat pada toolbar.
Gambar 2.3 Code View
Untuk menampilkan Code Inspector dengan mengklik menu Window > Other > Code Inspector sehingga muncul jendela Code Inspector seperti yang terlihat pada gambar di bawah ini.
Gambar 2.4 Code Inspector
2.2.3 Tool Bar dan Menu Bar
Macromedia Dreamweaver MX menyediakan toolbar yang berisi tombol-tombol yang berfungsi untuk memilih (berpindah) tampilan pada dokumen secara cepat. Toolbar juga berisi beberapa perintah yang biasa digunakan dan yang berkaitan dengan pilihan tampilan seleksi serta status dokumen. Untuk lebih jelasnya, perhatikan gambar di bawah ini.
refresh
design view preview in browser
code & design view file status
code view document title
Gambar 2.5 Menu Bar dan Tool Bar
Penjelasan dari gambar diatas sebagai berikut:
- Untuk menampilkan atau menyembunyikan toolbar, klik menu View > Toolbar.
- Untuk menampilkan hanya kode di dalam dokumen, klik icon Show Code View.
- Untuk menampilkan hanya design di dalam dokumen, klik icon ShowDesign View.
- Untuk menampilkan baik kode maupun design, klik icon Show Code and Design View.
- Untuk memberikan judul (title) pada dokumen, ketikkan judul pada kotak Document Title.
- Untuk menampilkan status file, klik icon File Status.
- Untuk melihat tampilan awal (preview) atau debug dokumen dalam format browser, klik icon Preview / Debug in Browser kemudian, pada menu pop-up yang muncul, pilihlah tipe browser yang akan digunakan.
- Untuk me-refresh tampilan Design View, klik icon Refresh Design View.
- Untuk mengakses panel Reference (panel yang berisikan informasi kode HTML, CSS dan JavaScript), klik icon Reference.
- Untuk melakukan navigasi keseluruhan kode, klik icon Code Navigation.
- Untuk mengakses menu Option (menu yang berisikan pilihan yang berbeda-beda pada tiap tampilan), klik icon Options Menu.
2.2.4 Insert Bar dan Window Properties
Insert Bar berisi tombol-tombol yang berfungsi untuk membuat dan menyisipkan objek ke dalam dokumen, misalnya tabel, layer, image dan yang lainnya. Secara default, Insert Bar mempunyai 12 kategori (gambar 2.2), yaitu Common, Layout, Text, Tables, Frames, Form, Templates, Character, Media, Head, Script, dan Application.
Properties Inspector (gambar 2.1) memungkinkan pengeditan properti elemen halaman yang terpilih (terseleksi), misalnya obyek atau teks. Properties inspector menampilkan properti yang umum pada elemen yang terseleksi. Hampir semua perubahan (pengeditan) properti secara langsung diterapkan dan bisa dilihat pada Document Window.
2.3 HTML
HTML (HyperText Markup Language), merupakan suatu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. HTTP (Hypertext Transfer Protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language).
Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser dengan bantuan tanda-tanda yang sudah ditentukan. Hal tersebut dapat dilakukan dengan menambahkan elemen atau yang sering disebut sebagai tag.
Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Berberapa contoh elemen adalah: head, body, table, paragraph, dan list.
Untuk menandai berbagai elemen dalam suatu dokumen HTML, digunakan tag. Tag HTML terdiri atas sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan, tag yang menjadi pasangan selalu diawali dengan karakter garis miring ( / ). Tag yang pertama menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti akhir elemen. Misalnya pasangan dari tag <head> adalah tag </head>.
Secara umum dokumen web dibagi menjadi dua bagian, yaitu bagian head dan bagian body. Bagian head berisi informasi tentang dokumen tersebut, dan bagian body berisi teks yang sebenarnya tersusun dari link, grafik, paragraf dan elemen lainnya. Setiap dokumen HTML harus mempunyai pola dasar sebagai berikut :
<html>
<head>
…informasi tentang dokumen HTML
</head>
<body>
…informasi yang ditampilkan dalam browser web
</body>
</html>
Beberapa tag yang terdapat pada HTML (yang diletakkan di antara tag <body></body>) :
Digunakan untuk menuliskan suatu paragraf atau untuk memulai suatu paragraf.
Digunakan untuk memformat heading (judul dan sub judul dari suatu halaman web). Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada enam buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>.
- Garis mendatar <hr> … </hr>
Digunakan untuk menyisipkan garis pada halaman web, umumnya digunakan sebagai pemisah antar bagian atau paragraf.
Digunakan untuk memberikan baris baru pada suatu paragraf dalam halaman web.
- CENTER <center> … </center>
Meletakkan teks, gambar dan objek lainnya ke tengah-tengah dokumen.
- FONT <font [color = warna] [face = jenis huruf] [size = ukuran]> … </font>
Digunakan untuk mengubah warna, jenis, dan ukuran font
- Table <table [align=left/center/right] [background=file] [bgcolor=warna] [with=lebar] [valign=top/middle/bottom] [cellpadding=jarak]> … </table>
Digunakan untuk membuat sebuah tabel.
2.4 PHP
PHP (Hypertext Preprocessor) adalah sebuah bahasa pemrograman yang berbentuk script. Penulisan bahasa ini menyatu dengan tag-tag HTML yang dieksekusi di Web Server.
PHP pertama kali dibuat pada musim gugur tahun 1994 oleh Rasmus Lerdoff, awalnya digunakan pada web site-nya untuk mencatat siapa saja yang berkunjung dan melihat biodatanya. Versi pertama yang di-release tersedia pada awal tahun 1995, dikenal sebagai tool Personal Home Page.
Ada beberapa cara untuk mulai menuliskan script PHP, yaitu:
- <?php script PHP ?>
- <? script PHP ?>
- <script language = “php”> script PHP </script>
- <% script PHP %>
Script PHP menerapkan aturan case sensitive yaitu adanya perbedaan penulisan dengan huruf besar dengan huruf kecil. Setiap penulisan di dalam script harus mengikuti aturan yang telah ditentukan terutama untuk nama variabel.
2.4.1 Tipe Data dan Variabel
Dalam PHP, nama setiap variabel diawali dengan tanda $ (dollar). Misalnya variabel total, maka ditulis dengan $total.
Tipe variabel tidak perlu dideklarasikan. Pemrogram dapat langsung pada pemberian nilai dan PHP akan membentuk tipe dari ekspresi yang dideklarasikan. Contoh:
$angka = 57.4;
$kalimat = “Bukan angka”;
PHP secara otomatis mengkonversi tipe data saat dibutuhkan. Tipe data yang terdapat pada PHP :
a. Integer adalah seluruh angka tanpa decimal point
b. Double adalah floating point seperti 3.14159 atau 58.2
c. Boolean hanya mempunyai 2 nilai yaitu TRUE dan FALSE
d. String adalah urutan dari karakter seperti ‘PHP mendukung operasi string’
e. Array adalah koleksi nama dan indeks
2.4.2 Operator
Beberapa operator yang terdapat pada PHP :
- Operator aritmatika
Kegunaannya adalah untuk melakukan penghitungan matematika. Bentuk operator aritmatika : + , – , * , / , % .
- Operator logika
Digunakan sebagai argumen pada struktur kendali yang berfungsi untuk menentukan aliran jalannya suatu program dengan membandingkan nilai true atau false dari suatu operand. PHP mendefinisikan false dengan 0 atau true dengan 1. Bentuk operator logika : and , or , && , || , Xor , not , ! .
- Operator pembanding
Digunakan untuk melakukan perbandingan antara dua nilai atau lebih, sehingga akan menghasilkan sebuah hasil yang telah dideklarasikan setelah operator pembanding tersebut. Bentuk – bentuk operator pembanding :
Tabel 2.1 Operator Pembanding
|
Operator
|
Operasi
|
Contoh
|
|
= =
|
Sama dengan
|
$a = = $b
|
|
= = =
|
Identik
|
$a = = = $b
|
|
! =
|
Tidak sama dengan
|
$a ! = $b
|
|
! = =
|
Tidak identik
|
$a ! = = $b
|
|
<
|
Kurang dari
|
$a < $b
|
|
>
|
Lebih dari
|
$a > $b
|
|
< =
|
Kurang dari sama dengan
|
$a < = $b
|
|
> =
|
Lebih dari sama dengan
|
$a > = $b
|
2.4.3 Percabangan
Struktur kendali percabangan adalah struktur kendali yang memungkinkan pemilihan atas perintah yang akan dijalankan sesuai dengan kondisi tertentu. Ada tiga macam perintah percabangan dalam PHP, yaitu:
- if
Perintah ini digunakan untuk menjalankan satu atau lebih perintah yang menyatakan keadaan. Sintaks penulisannya adalah sebagai berikut.
If (kondisi)
{ pernyataan yang akan dijalankan apabila kondisi bernilai benar }
- if . . . else
Perintah ini mirip dengan perintah if, hanya dapat digunakan untuk banyak pernyatan berkondisi. Sintaks penulisannya sebagai berikut:
If (kondisi1)
{
pernyataan 1 akan dijalankan bila kondisi 1 bernilai benar
}
elseif (kondisi2)
{
pernyataan 2 akan dijalankan bila kondisi 1 bernilai salah kondisi 2 bernilai benar
}
. . .
else
{
pernyataan ini akan dijalankan bila kondisi-kondisi sebelumnya bernilai salah
}
- switch
Perintah ini digunakan sebagai alternatif pengganti dari sintaks if . . . else dengan else lebih dari satu. Dengan perintah ini program percabangan akan semakin mudah dibuat dan dipelajari. Sintaks penulisannya adalah sebagai berikut:
Switch (kondisi)
{
case konstanta 1; pernyataan 1; break;
case konstanta 2; pernyataan 2; break;
. . .
default; pernyataan default;
}
Perintah switch akan menyeleksi kondisi yang diberikan dan kemudian membandingkan hasilnya dengan konstanta-konstanta yang berada di case. Pembandingan akan dimulai dari konstanta 1 sampai konstanta terakhir. Jika hasil dari kondisi sama dengan nilai konstanta tertentu, misalnya konstanta 1, maka pernyataan 1 akan dijalankan sampai ditemukan pernyataan break. Pernyataan break akan membawa proses keluar dari perintah switch. Jika hasil dari kondisi tidak ada yang sama dengan konstanta-konstanta yang diberikan maka pernyataan pada default akan dijalankan.
2.4.4 Pengulangan
Digunakan untuk mengulang suatu perintah sebanyak yang diinginkan tanpa harus menulis ulang. Bahasa PHP mengenal tiga jenis perintah pengulangan, yaitu:
- for
Digunakan untuk mengulang perintah dengan jumlah pengulangan yang sudah diketahui. Pada perintah ini tidak perlu menuliskan suatu kondisi untuk diuji, melainkan hanya perlu menuliskan nilai awal dan nilai akhir variabel penghitung. Nilai variabel penghitung akan secara otomatis bertambah atau berkurang tiap kali sebuah pengulangan dilaksanakan. Sintaks penulisannya adalah sebagai berikut:
For (nilai_awal; nilai_akhir; penambah / pengurang)
{
pernyataan yang akan dijalankan;
}
- while
Perintah ini digunakan bila akan mengulangi suatu perintah sampai jumlah yang belum bisa ditentukan. Pengulangan akan terus berjalan selama kondisi masih bernilai benar. Sintaks penulisannya adalah sebagai berikut:
While (kondisi)
{
pernyataan yang akan dijalankan
}
- do . . while
Proses pengulangan akan berjalan jika kondisi yang diperiksa di while masih bernilai benar dan pengulangan akan dihentikan jika kondisinya sudah bernilai salah. Sintaks penulisannya sebagai berikut:
Do
{
pernyataan yang akan dijalankan
}
while (kondisi)
2.5 MySql
MySQL adalah software database open source yang bersifat GPL(General Public License), artinya, software ini dapat dilihat source code-nya dan dapat digunakan untuk kebutuhan apapun tanpa biaya.
MySQL merupakan database yang tampak sangat sederhana dengan tampilan berupa teks mode dan tampak seperti sekumpulan directory dimana database dan tabel-tabel disimpan secara terpisah, MySQL mendukung SQL(Structured Query Languages), yaitu bahasa tingkat tinggi yang digunakan untuk mendapatkan data yang diinginkan dari suatu database.
Dalam MySQL ada dua jenis statement, yaitu statement MySQL dan statement SQL, statement-statement MySQL , antara lain :
- Use (nm_database) : Digunakan untuk mendefinisikan nama database yang akan digunakan.
- Show (statement) : Jika diikuti dengan kata databases, maka perintah ini akan
menampilkan nama-nama database yang terdapat pada MySQL. Jika diikuti dengan kata tables, maka akan menampilkan tabel-tabel yang terdapat pada database yang dipilih dengan menggunakan perintah use nm_database.
- Describe nm_tabel : Digunakan untuk mendeskripsikan field-field dari suatu tabel beserta tipe datanya.
- Exit : Perintah untuk keluar dari MySQL.
Pada MySQL, statement SQL dibagi menjadi tiga kelompok, yaitu :
1. DDL ( Data Definition Language)
DDL adalah bagian dari SQL yang digunakan untuk mendefinisikan data dan objek pada suatu database, berikut ini adalah statement – statement DDL yang digunakan pada visualisasi ini :
- Create database : Digunakan untuk membuat database baru.
Bentuk umumnya : CREATE DATABASE nm_database
- Drop database : Digunakan untuk menghapus database .
Bentuk umumnya : DROP DATABASE nm_database
- Create table : Digunakan untuk membuat tabel baru.
Bentuk umumnya adalah : CREATE TABEL nm_tabel.
2. DML ( Data Manipulation Language)
DML adalah bagian dari SQL yang digunakan untuk manipulasi data, berisi kalimat-kalimat yang digunakan untuk query dan perubahan yang dilakukan pada suatu tabel, statement DDL yang digunakan pada visualisasi ini terdiri dari :
a. Select : Digunakan untuk memilih data yang akan ditampilkan berdasarkan field-field pada suatu tabel.
Bentuk umumnya adalah :
SELECT[DISTINCT]nama_kolom
FROM nama_table
[WHERE kondisi]
[GROUP BY nama_kolom]
[HAVING kondisi]
[ORDER BY nama_kolom[ASC/DESC]]
– distinct : digunakan untuk menghilangkan duplikasi datanya.
– Where : menentukan syarat data yang dipilih
– group by : mengelompokkan data yang memiliki nilai sama.
– Having : syarat data yang dikelompokkan berdasarkan group by.
– Order By : mengurutkan data berdasarkan pilihan, jika ASC maka diurutkan dari yang terkecil hingga yang terbesar dan jika DESC diurutkan dari yang terbesar hingga yang terkecil.
b. Insert : Digunakan untuk memasukkan data baru pada suatu tabel, bentuk umumnya adalah :
INSERT INTO nama_tabel[(nm_kolom1,…)]
VALUES(data1,…)
c. Update : Digunakan untuk memperbaharui data pada suatu tabel, bentuk umumnya adalah :
UPDATE nama_tabel
SET nama_kolom = ekspresi
WHERE kondisi;
- Delete : Digunakan untuk menghapus data dari suatu tabel, bentuk umumnya adalah :
DELETE FROM nama_table
WHERE kondisi;
2.6 ERD (Entity Relationship Diagram)
ERD (Entity Relationship Diagram) atau Model Entity-Relationship adalah alat untuk memodelkan data.
2.6.1 Entity
Entity adalah obyek yang dapat dibedakan dalam dunia nyata. Entity set adalah kumpulan dari entity yang sejenis. Entity set dapat berupa :
- Obyek secara fisik : Kendaraan, Peralatan
- Obyek secara konsep : Pekerjaan, Rencana
Gambar 2.6 Entity
2.6.2 Relationship
Relationship adalah hubungan yang terjadi antara satu atau lebih entity. Derajat-derajat dari relationship :
- Unary Degree (Derajat Satu)
Gambar 2.7 Unary Degree
2. Binary Degree (Derajat Dua)
Gambar 2.8 Binary Degree
3. Ternary Degree (Derajat Tiga)
Gambar 2.9 Ternary Degree
Gambar 2.10 Entity dan Relationship
2.6.3 Atribut
Atribut adalah karakteristik dari entity atau relationship, yang menyediakan penjelasan detail tentang entity atau relationship tersebut. Nilai atribut merupakan suatu data aktual atau informasi yang disimpan pada suatu atribut di dalam suatu entity atau relationship.
Jenis-jenis atribut :
- Atribut simple, yaitu atribut yang bernilai tunggal.
- Atribut multivalue, yaitu atribut yang memiliki sekelompok nilai untuk setiap instan entity.
Gambar 2.11 Atribut Multivalue
- Atribut composite, yaitu suatu atribut yang terdiri dari beberapa atribut yang lebih kecil dan mempunyai arti tertentu.
Gambar 2.12 Atribut Composite
- Atribut derivatif, yaitu suatu atribut yang dihasilkan dari atribut yang lain.
Gambar 2.13 Atribut Derivatif
2.6.4 Cardinality Ratio Constraint
Menjelaskan batasan jumlah keterhubungan satu entity dengan entity lainnya. Jenis-jenis cardinality ratio :
- One to One (1:1)
1 1
Gambar 2.14 Cardinality Ratio 1:1
- One to Many (1:N) atau Many to One (N:1)
N 1
Gambar 2.15 Cardinality Ratio N:1
1 N
Gambar 2.16 Cardinality Ratio Constraint 1:N
- Many to Many (M:N)
M N
Gambar 2.17 Cardinality Ratio Constraint M:N
2.6.5 Participation Constraint
Menjelaskan apakah keberadaan suatu entity tergantung pada hubungannya dengan entity lain.
Terdapat 2 macam participation constraint :
– Total Participation
Keberadaan suatu entity tergantung pada hubungannya dengan entity lain.
– Partial Participation
Keberadaan suatu entity tidak tergantung pada hubungannya dengan entity lain.
2.6.6 Weak Entity
Weak entity adalah suatu entity dimana keberadaan dari entity tersebut tergantung dari keberadaan entity lain. Entity yang merupakan induknya disebut identifying owner dan relationship-nya disebut identifying relationship. Weak Entity selalu mempunyai total participation constraint dengan identifying owner.
2.6.7 Normalisasi
Normalisasi adalah suatu teknik untuk mengorganisasikan data ke dalam tabel-tabel untuk memenuhi kebutuhan pemakai di dalam suatu organisasi.
Tujuan dari normalisasi :
– Untuk menghilang kerangkapan data,
– Untuk mengurangi kompleksitas,
– Untuk mempermudah pemodifikasian data.
Tahapan-tahapan normalisasi :
Bentuk Tidak Normal
Menghilangkan perulangan group
Bentuk Normal Pertama (1 NF)
Menghilangkan ketergantungan sebagian
Bentuk Normal Kedua (2NF)
Menghilangkan ketergantungan transitif
Bentuk Normal Ketiga (3NF)
Menghilangkan anomali-anomali hasil dari ketergantungan fungsional.
Bentuk Normal Boyce-Codd (BCNF)
Menghilangkan ketergantungan multivalue
Bentuk Normal Keempat (4NF)
Menghilangkan anomali-anomali yang tersisa
Bentuk Normal Kelima
- Bentuk Normal Kesatu (1 NF)
Suatu relasi dikatakan sudah memenuhi bentuk normal kesatu bila setiap data bersifat atomic yaitu setiap irisan baris dan kolom hanya mempunyai satu nilai data.
- Bentuk Normal Kedua (2 NF)
Suatu relasi dikatakan sudah memenuhi bentuk normal kedua bila relasi tersebut sudah memenuhi bentuk normal kesatu, dan atribut yang bukan key sudah tergantung penuh terhadap key-nya.
- Bentuk Normal Ketiga (3 NF)
Suatu relasi dikatakan sudah memenuhi bentuk normal ketiga bila relasi tersebut sudah memenuhi bentuk normal kedua dan atribut yang bukan key tidak tergantung transitif terhadap key-nya.
2.6.8 Transformasi dari ERD ke Database Relasional (Mapping)
Langkah-langkah yang dilakukan dalam mentransformasi ERD ke database relasional :
1. Setiap tipe entity dibuat suatu relasi yang memuat semua atribut simple, sedangkan untuk atribut composite hanya dimuat komponen-komponennya saja.
Contoh :
PEGAWAI (NOPEG, ALM1, KDPOS)
Gambar 2.18 Contoh Teknik Mapping Tahap Pertama
2. Setiap relasi yang mempunyai atribut multivalue, buatlah relasi baru dimana primary key-nya merupakan gabungan dari primary key dari relasi tersebut dengan atribut multivalue.
Contoh :
PROYEK (NOPRO, LOKASI)
Gambar 2.19 Contoh Teknik Mapping Tahap Kedua
3. Setiap unary relationship 1 : N, pada relasi perlu ditambahkan suatu foreign key yang menunjuk ke nilai primary key-nya.
Contoh :
1
N
PEGAWAI (NOPEG, …, SUPERVISOR-ID)
Gambar 2.20 Contoh Teknik Mapping Tahap Ketiga
4. Setiap unary relationship M : N, buatlah relasi baru dimana primary key-nya merupakan gabungan dari dua atribut dimana keduanya menunjuk ke primary key relasi awal dengan penamaan yang berbeda.
Contoh :
M
N
KOMBAR (NOBAR, NOKOMP, JUMLAH)
Gambar 2.21 Contoh Teknik Mapping Tahap Keempat
5. Setiap binary relationship 1 : 1, dimana participation constraint keduanya total, buatlah suatu relasi gabungan dimana primary key-nya dapat dipilih salah satu.
Contoh :
1 1
PEGAWAI (NOPEG, …, NOPRO, …)
Gambar 2.22 Contoh Teknik Mapping Tahap Kelima
6. Setiap binary relationship 1 : 1 dan salah satu participation constraint-nya total, maka primary key pada relasi yang participation constraint-ya partial, menjadi foreign key pada relasi yang lain.
Contoh :
1 1
BAGIAN (NOBAG, …, MANAGER)
Gambar 2.23 Contoh Teknik Mapping Tahap Keenam
7. Setiap binary relationship 1 : 1 dimana kedua participation constraint-nya partial, maka selain kedua relasi perlu dibuat relasi baru yang berisi primary key gabungan dari primary key kedua tipe entity yang berelasi.
Contoh :
1 1
PEKERJAAN (NOPEG, NOPRO, …)
Gambar 2.24 Contoh Teknik Mapping Tahap Ketujuh
8. Setiap binary relationship 1 : N, dimana tipe entity yang berisi N mempunyai participation constraint total, maka primary key pada relasi yang bersisi 1 dijadikan foreign key pada relasi yang bersisi N.
Contoh :
1 N
PROYEK (NOPRO, …, NOBAG)
Gambar 2.25 Contoh Teknik Mapping Tahap Kedelapan
9. Setiap binary relationship 1 : N, dimana tipe entity yang bersisi N mempunyai participation constraint partial, buatlah relasi baru dimana primary key-nya merupakan gabungan dari primary key kedua tipe entity yang berelasi.
Contoh :
N 1
PEKERJAAN (NOPEG, NOPRO, …)
Gambar 2.26 Contoh Teknik Mapping Tahap Kesembilan
10. Setiap binary relationship M : N, buatlah relasi baru dimana primary key-nya merupakan gabungan dari primary key kedua tipe entity yang berelasi.
Contoh :
M N
PEKERJAAN (NOPEG, NOPRO, …)
Gambar 2.27 Contoh Teknik Mapping Tahap Kesepuluh
11. Setiap ternary relationship, buatlah relasi baru dimana primary key-nya merupakan gabungan dari primary key ketiga tipe entity yang berelasi.
Contoh :
PEKERJAAN ( NOPEG, NOPRO, NOKOT)
Gambar 2.28 Contoh Teknik Mapping Tahap Kesebelas
12. Setiap tipe weak entity, dibuat suatu relasi yang memuat semua atributnya dimana primary key-nya adalah gabungan dari partial key dan primary key dari relasi induknya (identifying owner).
Contoh :
1 N
TANGGUNGAN (NOPEG, NAMA, …)
Gambar 2.29 Contoh Teknik Mapping Tahap Keduabelas
2.7 DFD (Data Flow Diagram)
DFD (Data Flow Diagram) atau DAD ( Diagram Arus Data) adalah suatu modeling tool yang memungkinkan sistem analis menggambarkan suatu sistem sebagai suatu jaringan kerja proses dan fungsi yang dihubungkan satu sama lain oleh penghubung yang disebut alur data. DFD sering digunakan untuk menggambarkan suatu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa memperhatikan lingkungan fisik dimana data tersebut mengalir (misalnya lewat telepon, surat, dan sebagainya) atau lingkungan fisik dimana data tersebut akan disimpan (misalnya kartu, disket, hard disk, dan sebagainya).
Fungsi DFD :
- Membantu para analis sitem meringkas informasi tentang sistem, mengetahui hubungan antar sub-sub sistem, membantu perkembangan aplikasi secara efektif,
- Sebagai alat komunikasi yang baik antara pemakai dan analis sistem,
- Dapat menggambarkan batasan sejumlah otomasi untuk pengembangan alternatif sistem fisik.
2.7.1 Komponen DFD
Ada dua versi komponen DFD, yaitu :
1. Menurut Yourdan dan DeMarco
Terminator Proses Data Store Alur Data
Gambar 2.30 Komponen DFD Menurut Yourdan dan DeMarco
- Menurut Gene dan Serson
Terminator Proses Data Store Alur Data
Gambar 2.31 Komponen DFD Menurut Gene dan Serson
2.7.1.1 Terminator
Terminator mewakili entitas luar dimana sistem berkomunikasi. Terminator dapat berupa orang, sekelompok orang, departemen, ataupun organisasi yang berada di luar sistem yang akan dibuat. Terminator diberi nama yang berhubungan dengan sistem tersebut dan biasanya menggunakan kata benda (contohnya dosen, mahasiswa, dan sebagainya).
Terdapat tiga jenis terminator :
- Terminator sumber, merupakan terminator yang menjadi sumber.
- Terminator tujuan, merupakan terminator yang menjadi tujuan data atau informasi sistem.
- Terminator tujuan dan sumber, merupakan terminator yang menjadi sumber dan juga menjadi tujuan data atau informasi sistem.
Terminator Sumber Terminator Tujuan Terminator Tujuan dan Sumber
Gambar 2.32 Tiga Jenis Terminator
2.7.1.2 Proses
Komponen proses menggambarkan transformasi input menjadi output. Penamaan proses disesuaikan dengan proses atau kegiatan yang dilakukan dan menggunakan kata kerja transitif.
Berikut ini adalah berbagai kemungkinan arus data dalam suatu proses:
- Suatu proses yang menerima sebuah arus data (input) dan menghasilkan sebuah arus data (output),
- Suatu proses yang menerima lebih dari satu arus data (input) dan menghasilkan sebuah arus data (output),
- Suatu proses yang menerima satu arus data (input) dan menghasilkan lebih dari sebuah arus data.
kartu jam kerja
kartu jam kerja daftar gaji daftar gaji
tingkat upah
(1) (2)
laporan umur piutang
laporan piutang
laporan piutang ditagih
(3)
Gambar 2.33 Contoh Berbagai Kemungkinan Arus Data Dalam Proses
Beberapa hal yang harus diperhatikan dalam proses :
- Proses harus memiliki input dan output,
2. Proses dapat dihubungkan dengan komponen terminator, data store atau proses melalui alur data,
3. Sistem, bagian, divisi, atau departemen yang sedang dianalisis oleh professional sistem digambarkan dengan komponen proses.
2.7.1.3 Data Store (Simpanan Data)
Data store atau simpanan data digunakan untuk memodelkan kumpulan data atau paket data. Simpanan data dapat berupa file atau database yang disimpan di dalam disket, hard disk, dan sebagainya. Nama dari simpanan data menunjukkan nama file-nya, misalnya file pelanggan, file hutang, dan sebagainya.
Beberapa hal yang perlu diperhatikan dalam simpanan data :
- Hanya proses saja yang berhubungan dengan simpanan data, karena yang menggunakan atau merubah data di simpanan data adalah suatu proses.
- Arus data yang menuju ke simpanan data dari suatu proses menunjukkan proses update terhadap data yang tersimpan di simpanan data. Updatedapat berupa proses :
- menambah atau menyimpan record baru atau dokumen baru ke dalam simpanan data,
- menghapus record atau mengambil dokumen dari simpanan data,
- merubah nilai data di suatu record atau di suatu dokumen yang ada di simpanan data.
- Arus data yang berasal dari simpanan data ke suatu proses menunjukkan bahwa proses tersebut telah menggunakan data yang ada di simpanan data.
2.7.1.4 Alur Data
Alur data mengalir diantara proses, simpanan data, dan kesatuan luar. Alur data ini menunjukkan arus dari data yang dapat berupa masukkan untuk sistem atau hasil dari proses sistem.
Ada empat konsep dari arus data :
- Konsep paket dari data
Bila dua atau lebih data mengalir dari suatu sumber yang sama ke tujuan yang sama, maka harus dianggap sebagai suatu arus data yang tunggal. Hal ini karena dua atau lebih data tersebut mengalir bersama-sama sebagai suatu paket. Data yang mengalir bersama-sama harus ditunjukkan sebagai satu arus data, walaupun misalnya terdiri dari beberapa dokumen.
Contoh penggambaran alur data yang tidak benar :
order langganan
pembayaran
Gambar 2.34 Contoh Penggambaran Alur Data yang Tidak Benar
Contoh penggambaran alur data yang benar :
order langganan,
pembayaran
Gambar 2.35 Contoh Penggambaran Alur Data yang Benar
Bila dua buah alur data akan ditangani oleh dua buah proses yang berlainan, berarti mempunyai tujuan yang berbeda, walaupun sumbernya sama, maka dapat di gambarkan sebagai berikut ini :
order langganan
pembayaran
Gambar 2.36 Contoh Penggambaran dengan Dua Proses yang Berbeda
- Konsep alur data menyebar
Alur data yang menyebar menunjukkan sejumkah tembusan dari arus data yang sama dari sumber yang sama ke tujuan yang berbeda. Contoh penggambarannya :
tembusan jurnal
tembusan permintaan
order penjualan barang
tembusan kredit
Gambar 2.37 Contoh Penggambaran Konsep Alur Data yang Menyebar
Pada gambar di atas terlihat bahwa alur data “order penjualan” mempunyai sebanyak tiga tembusan, yaitu tembusan untuk jurnal yang mengalir ke proses pembuatan faktur, tembusan permintaan barang yang mengalir ke kesatuan luar gudang, dan tembusan kreditnya mengalir ke proses verifikasi kredit. Konsep alur data yang menyebar ini menunjukkan bahwa alur data tembusan jurnal, tembusan permintaan barang, dan tembusan kredit merupakan alur data yang memiliki struktur elemen yang sama, karena merupakan hasil dari tembusan alur data order penjualan.
- Kosep alur data mengumpul
Alur data yang mengumpul menunjukkan beberapa alur data yang berbeda dari sumber yang bergabung bersama-sama menuju ke tujuan yang sama. Contoh penggambarannya :
faktur
slip pengepakan
Gambar 2.38 Contoh Penggambaran Konsep Alur Data Mengumpul
- Konsep sumber dan tujuan alur data
Arus data harus dihubungkan pada proses, baik dari maupun yg menuju proses. Penggambarannya :
Dari proses ke bukan proses Dari bukan proses ke proses
Dari proses ke proses
Gambar 2.39 Penggambaran Konsep Sumber dan Tujuan Alur Data
2.8 Struktur Navigasi
Struktur navigasi adalah struktur atau alur cerita dari suatu program. Menentukan suatu struktur navigasi merupakan hal yang sebaiknya dilakukan sebelum membuat suatu aplikasi. Ada empat macam bentuk dasar dari struktur navigasi yang biasa digunakan dalam proses pembuatan aplikasi, yaitu:
- Navigasi Linear
Navigasi linear (satu alur) merupakan struktur yang hanya memiliki satu rangkaian cerita yang berurut. Struktur ini menampilkan satu demi satu tampilan layar secara berurut menurut urutannya.
Gambar 2.40 Navigasi Linear
- Navigasi Hirarki
Struktur hirarki (bercabang) merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama disebut master page (halaman utama), halaman tersebut mempunyai halaman percabangan yang disebut slave page (halaman pendukung) dan jika dipilih akan menjadi halaman utama kedua, begitu seterusnya.
Gambar 2.41 Navigasi Hirarki
- Navigasi Non Linear
Navigasi non linear (tidak berurut) merupakan pengembangan dari struktur navigasi linear, hanya saja pada struktur ini diperkenankan untuk membuat percabangan. Pada struktur ini, walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama, tidak ada master page (halaman utama) dan slave page (halaman pendukung).
Gambar 2.42 Navigasi Non Linear
- Navigasi Campuran
Struktur navigasi campuran (composite) merupakan gabungan dari ketiga struktur sebelumnya. Struktur ini paling banyak digunakan dalam pembuatan aplikasi.
Gambar 2.43 Navigasi Campuran
2.9 Menu Makanan Yang Tersedia
Menu makanan yang di sediakan oleh rumah makan tersebut adalah :
- Ayam Goreng
- Ayam Panggang
- Ayam Opor
- Gudeg
- Sambal goreng krecek
- Telur pindang
- Tahu, tempe bacem
- Tahu opor
- Gudeg telur tahu
- Nasi gudeg telur
- Nasi gudeg telur tahu
- Bothok
- Mangut lele
- Tumis kikil
- Sup Ayam
- Sup Buntut
- Sayur Asam
- Sambal Ayam
Menu minuman yang disediakan adalah :
1. Minuman panas
a. Sekoteng
b. Teh Manis
c. Kopi hitam
d. Kopi susu
e. Jeruk panas
f. Cappucino
2. Minuman dingin
a. Es teh
b. Es teh manis
c. Es lemon tea
d. Es jeruk
e. Es cendol
f. Soda susu
g. Lemon squash
h. Strawberry flirt
i. Blue angel
3. Jus
a. Cappucino
b. Tape
c. Jeruk
d. Melon
e. Alpukat
f . Tomat
4. Soft drink
a. Fanta
b. Sprite
c. Coca cola
d. Teh botol
5. Aqua botol / gelas
Menu paket untuk dibawa pulang :
1. Tempat : foam
a. Nasi + gudeg
b. Nasi + gudeg + telur
c. Nasi + ayam
d. Nasi + gudeg + ayam
e. Nasi + gudeg + ayam + telur
2. Tempat : kardus
a. Nasi + ayam
b. Nasi + gudeg + ayam
c. Nasi + gudeg + ayam + telur
d. Nasi + gudeg + ayam + telur + aqua
e. Nasi + gudeg + ayam + telur + buah
f. Nasi + gudeg + ayam + telur + buah + aqua
BAB III
ANALISIS MASALAH DAN PEMBAHASAN
3.1 Analisis Masalah
Pada masa sekarang ini, banyak rumah makan yang berusaha meningkatkan pelayanan, salah satunya adalah pelayanan delivery service. Pada pelayanan delivery service ini, pelanggan dapat memesan makanan melalui telepon dan beberapa saat kemudian makanan yang dipesan akan diantar ke alamat yang dituju. Akan tetapi tidak semua rumah makan melakukan pelayanan delivery service ini.
Rumah makan yang dijadikan sebagai objek oleh penulis dalam penulisan ilmiah ini adalah salah satu rumah makan yang tidak melakukan pelayanan delivery service. Pelanggan dapat memesan makanan melalui telepon, tetapi makanan tidak diantar ke alamat tujuan melainkan pelanggan yang datang ke rumah makan untuk mengambil makanan yang telah dipesan sebelumnya. Hal tersebut mengalami beberapa kendala, diantaranya pelanggan mengalami kemacetan di jalan, atau jarak antara tempat pelanggan dan rumah makan terlalu jauh sehingga pelanggan malas untuk mendatangi rumah makan.
Dari masalah tersebut diatas, penulis mencoba menbuat aplikasi pemesanan makanan berbasis web untuk rumah makan yang dijadikan sebagai objek oleh penulis, sehingga pelanggan dapat memesan makanan melalui internet tanpa harus menelepon terlebih dahulu dan makanan diantar ke alamat tujuan.
3.2 Pembahasan
Untuk membuat aplikasi tersebut, penulis melakukan langkah-langkah sebagai berikut :
- Membuat struktur navigasi
- Merancang storyboard
- Merancang tampilan input/output
- Merancang database dengan menggunakan ERD
- Membuat struktur database dengan menggunakan MySql
- Membuat halaman web dengan menggunakan Macromedia Dreamweaver Mx dan PHP
- Mengupload website
3.2.1 Struktur Navigasi
Struktur navigasi digunakan untuk menentukan alur atau struktur program. Pada pembuatan aplikasi pemesanan makanan secara online ini, penulis menggunakan struktur navigasi campuran.
Gambar 3.1 Struktur Navigasi
3.2.2 Merancang Storyboard
Agar aplikasi pemesanan makanan secara online ini terlihat sederhana, menarik, dan mudah dimengerti oleh user, diperlukan desain antarmuka (interface).
Desain antarmuka harus dilakukan karena merupakan bagian yang berhubungan langsung dengan user, yaitu segala sesuatu yang dilihat oleh pengguna (yang muncul di layar monitor). Untuk membuat desain antarmuka, penulis menggunakan storyboard. Berikut adalah rancangan storyboard yang dibuat oleh penulis.
3.2.3 Rancangan Tampilan
Setelah storyboard dibuat, penulis membuat rancangan tampilan dari storyboard di atas. Rancangan tampilan yang dibuat oleh penulis adalah sebagai berikut.
3.2.3.1 Rancangan Halaman Login
Pada saat user masuk ke halaman web, yang pertama kali muncul adalah halaman Login.
Gambar 3.3 Rancangan Halaman Login
Di awal halaman terdapat gambar yang berupa logo rumah makan. Gambar ini ada pada setiap halaman web yang dibuat oleh penulis. Pada halaman ini user diminta untuk memasukkan ID yang berupa nomor KTP user pada saat mendaftar dan memasukkan password. Apabila tombol OK ditekan, halaman Login akan tertutup dan Halaman Utama akan ditampilkan.
Apabila link register di-klik, maka halaman Login tertutup dan halaman Register akan ditampilkan.
3.2.3.2 Rancangan Halaman Register
Halaman Register diperuntukkan bagi user yang belum mendaftar.
Gambar 3.4 Rancangan Halaman Register
User yang mendaftar, akan diminta untuk mengisi data-data yang diperlukan. Apabila tombol OK ditekan, maka halaman Register akan tertutup dan halaman Konfirmasi Register akan ditampilkan. Tombol Hapus digunakan untuk menghapus data-data yang telah diisi oleh user apabila user ingin menghapus seluruh data yang sudah diisi. Apabila tombol Kembali ditekan, halaman Register akan tertutup dan halaman Login ditampilkan.
3.2.3.3 Rancangan Halaman Konfirmasi Register
Halaman Konfirmasi Register digunakan untuk memberitahukan user data-data yang telah diisi sebelumnya oleh user pada halaman Register.
Gambar 3.5 Rancangan Halaman Konfirmasi Register
Halaman ini berisi data-data yang telah diisi oleh user sebelumnya. Apabila ada data yang ingin diubah oleh user, maka tombol Kembali dapat ditekan untuk kembali ke halaman sebelumnya (halaman Register) untuk mengubah data yang ingin diubah.
Apabila link Login ditekan, maka halaman Konfirmasi Register akan tertutup dan halaman Login akan ditampilkan.
3.2.3.4 Rancangan Halaman Menu Admin
Halaman Menu Admin digunakan oleh administrator. Pada halaman ini terdapat link-link yang akan menuju ke halaman lain apabila ditekan.
Gambar 3.6 Rancangan Halaman Menu Admin
Apabila link Daftar Pemesan ditekan, maka halaman Menu Admin akan tertutup dan halaman Ubah/Hapus Menu akan ditampilkan.
Link-link selanjutnya sama seperti link Daftar Pemesan, apabila ditekan maka halaman Menu Admin akan tertutup dan halaman lain akan ditampilkan. Tetapi apabila link Logout ditekan, administrator akan keluar dari halaman Menu Admin dan kembali ke halaman Login.
3.2.3.5 Rancangan Halaman Daftar Pemesan
Apabila link Daftar Pemesan pada halaman Menu Admin ditekan, maka halaman Menu Admin akan tertutup dan halaman Daftar Pemesan ditampilkan. Pada halaman ini akan ditampilkan daftar user atau konsumen dan daftar pesanan yang dipesan oleh user serta checkbox dan tombol untuk menghapus data yang ingin dihapus oleh administrator.
Gambar 3.7 Rancangan Halaman Daftar Pemesan
Apabila link Menu Utama ditekan, maka halaman Menu Admin akan ditampilkan dan halaman Daftar Pemesan akan tertutup. Dan apabila link Logout di-klik, maka halaman Daftar Pemesan tertutup dan halaman Login akan ditampilkan.
3.2.3.6 Rancangan Halaman Ubah/Hapus Menu
Apabila link Ubah/Hapus Menu pada halaman Menu Admin ditekan, maka halaman Menu Admin akan tertutup dan halaman Ubah/Hapus Menu ditampilkan. Pada halaman ini akan ditampilkan daftar menu yang dapat diubah dan dihapus oleh administrator.
Gambar 3.8 Rancangan Halaman Ubah/Hapus Menu
Pada tabel daftar menu terdapat checkbox sehingga adiministrator dapat memilih menu makanan yang ingin dihapus.
Link Ubah terletak pada setiap baris menu. Apabila link ini ditekan, maka halaman Ubah/Hapus Menu akan tertutup dan halaman Ubah Menu akan ditampilkan.
3.2.3.7 Rancangan Halaman Ubah Menu
Halaman ini berisi data menu yang ingin diubah oleh administrator.
Gambar 3.9 Rancangan Halaman Ubah Menu
Pada halaman ini, fungsi link sama seperti halaman-halaman sebelumnya bila ditekan. Data-data menu yang ingin diubah oleh administrator akan ditampilkan pada halaman ini, data yang tidak dapat diubah adalah id_makanan. Tombol Browse digunakan untuk mencari lokasi gambar makanan yang ingin disimpan, dan tombol Simpan digunakan untuk menyimpan data menu yang sudah diubah. Apabila tombol Hapus ditekan, maka data-data menu makanan kecuali id_makanan, akan terhapus.
3.2.3.8 Rancangan Halaman Tambah Menu
Apabila link Tambah Menu pada halaman Menu Admin ditekan, maka halaman Menu Admin akan tertutup dan halaman Tambah Menu ditampilkan. Halaman ini digunakan oleh administrator untuk menambah menu baru.
Gambar 3.10 Rancangan Halaman Tambah Menu
Pada halaman ini administrator akan mengisi data-data menu baru untuk ditambahkan ke dalam database. Apabila tombol Tambah ditekan, akan muncul pernyataan di bawah tombol yang menyatakan bahwa menu baru telah ditambahkan.
3.2.3.9 Rancangan Halaman Utama
Halaman ini akan ditampilkan setelah user memasukkan id dan password.
Gambar 3.11 Rancangan Halaman Utama
Pada halaman ini terdapat link Pesan yang apabila ditekan, maka Halaman Utama akan tertutup dan halaman Form Pemesanan akan ditampilkan. Apabila link Logout ditekan, maka user akan keluar dari Halaman Utama dan halaman Login akan ditampilkan.
3.2.3.10 Rancangan Halaman Form Pemesanan
Pada halaman ini user akan memesan makanan yang terdapat dalam menu makanan yang tersedia. Pada daftar menu makanan terdapat gambar , nama makanan, beserta harga. User memasukkan jumlah makanan yang ingin dipesan pada inputbox yang terletak di sebelah menu makanan. User juga memasukkan tanggal, jam, dan alamat tempat makanan diantarkan.
Gambar 3.12 Rancangan Halaman Form Pemesanan
Apabila tombol Pesan ditekan, maka halaman Form Pemesanan akan tertutup dan halaman Konfirmasi Pesan akan ditampilkan. Tombol Hapus ditekan apabila user ingin menghapus data pemesanan yang sudah diinput dan tombol Kembali ditekan apabila user ingin kembali ke Halaman Utama.
3.2.3.11 Rancangan Halaman Konfirmasi Pesan
Halaman ini ditampilkan setelah tombol Pesan pada halaman Form Pemesanan ditekan. Pada halaman ini akan ditampilkan menu-menu yang sudah dipesan, total harga, tanggal , waktu, dan alamat makanan yang akan diantarkan yang sebelumnya telah diinput pada halaman Form Pemesanan.
Apabila user ingin merubah pesanan, maka tombol Kembali ditekan. Apabila tombol Pesan ditekan, maka link Logout dibawah kata Konfirmasi akan ditampilkan seperti pada gambar dibawah ini.
Gambar 3.13 Rancangan Halaman Konfirmasi Pesan
Setelah memesan, maka user dapat keluar dari halaman ini dengan menekan link Logout.
3.2.4 ERD (Entity Relationship Diagram)
Berikut ini adalah ERD yang dibuat oleh penulis untuk merancang database.
M N
Gambar 3.14 Gambar ERD
Pada ERD di atas, entitas konsumen memiliki atribut id_konsumen, konsumen_passwd, no_telp, nama, dan almt_email dengan id_konsumen sebagai primary key-nya. Entitas makanan memiliki atribut id_makanan, nm_makanan, harga, dan gambar dengan id_makanan sebagai primary key-nya. Hubungan yang ada di antara kedua entitas tersebut adalah hubungan pesan yang memiliki atribut id_konsumen, id_makanan, jml_pesan, tgl_kirim, jam_kirim, dan alamat dengan id_konsumen dan id_makanan sebagai foreign key.
Setelah ERD dibuat, dilakukan transformasi dari ERD ke database relasional yang biasa dikenal dengan nama mapping. Mapping dilakukan untuk memudahkan penulis membuat struktur tabel yang akan dipakai sebagai database untuk aplikasi pemesanan makanan secara online yang dibuat. Mapping tersebut adalah sebagai berikut :
Konsumen (id_konsumen*, konsumen_passwd, no_telp, nama, almt_email)
Makanan (id_makanan*, nm_makanan, harga, gambar)
Pesanan (id_konsumen**, id_makanan**, jml_pesan, tgl_kirim, jam_kirim, alamat)
Dari mapping di atas, dapat dilihat bahwa tabel konsumen dan tabel makanan sudah optimal, tetapi tabel pesanan belum optimal, karena masih ada data yang berulang seperti data pada baris tabel yang diwarnai dibawah ini.
Tabel 3.1 Tabel Pesanan
|
id_konsumen**
|
id_makanan**
|
jml_pesan
|
tgl_kirim
|
jam_kirim
|
alamat
|
|
4946
|
ma001
|
100
|
15-07-2007
|
16:00
|
Jl. Jambu
|
|
4946
|
ma002
|
100
|
15-07-2007
|
16:00
|
Jl. Jambu
|
|
4977
|
ma020
|
200
|
20-07-1007
|
13:00
|
Jl. Mangga
|
Oleh karena itu, agar tabel menjadi optimal, tabel pesanan tersebut dibagi menjadi dua. Field yang berisi data yang berulang dijadikan ke dalam satu tabel, yaitu tabel pesan, dan field yang berisi data yang tidak berulang dijadikan kedalam satu tabel, yaitu tabel pesan_makanan, seperti pada tabel di bawah ini.
Tabel 3.2 Tabel Pesan
|
id_konsumen**
|
tgl_kirim
|
jam_kirim
|
alamat
|
|
4946
|
15-07-2007
|
16:00
|
Jl. Jambu
|
|
4977
|
20-07-1007
|
13:00
|
Jl. Mangga
|
Tabel 3.3 Tabel Pesan_Makanan
|
Id_konsumen**
|
Id_makanan**
|
Jml_pesan
|
|
4946
|
ma001
|
100
|
|
4946
|
ma002
|
100
|
|
4977
|
ma020
|
200
|
3.2.5 Membuat Struktur Database
Setelah di-mapping, penulis membuat tabel-tabel berdasarkan mapping yang telah dibuat dengan menggunakan sintaks MySql. Sebelum membuat tabel, penulis membuat struktur tabel sebagai berikut :
Tabel 3.4 Struktur Tabel konsumen
|
Field
|
Tipe
|
Panjang
|
|
id_konsumen*
|
Varchar
|
20
|
|
konsumen_passwd
|
Varchar
|
5
|
|
no_telp
|
Varchar
|
10
|
|
nama
|
Varchar
|
30
|
|
almt_email
|
Varchar
|
30
|
Tabel 3.5 Struktur Tabel makanan
|
Field
|
Tipe
|
Panjang
|
|
id_makanan*
|
Varchar
|
7
|
|
nm_makanan
|
Varchar
|
200
|
|
harga
|
Integer
|
|
|
gambar
|
varbinary
|
100
|
Tabel 3.6 Struktur Tabel Pesan
|
Field
|
Tipe
|
Panjang
|
|
id_konsumen**
|
Varchar
|
100
|
|
tgl_kirim
|
Date
|
|
|
jam_kirim
|
Time
|
|
|
alamat
|
varchar
|
500
|
Tabel 3.7 Tabel Pesan_Makanan
|
Field
|
Tipe
|
Panjang
|
|
id_konsumen**
|
Varchar
|
100
|
|
Id_makanan**
|
Varchar
|
7
|
|
jml_pesan
|
Integer
|
|
Setelah struktur tabel dibuat, penulis mengimplementasikannya dengan query MySql.
Pertama-tama, penulis membuat membuat hak akses, sehingga administrator yang akan megatur web dapat mengakses data. Berikut potongan query yang dipakai oleh penulis.
mysql> use mysql;
Database changed
mysql> CREATE USER ‘admins’@ ‘localhost’ IDENTIFIED BY ‘******************’;
GRANT SELECT ,
INSERT ,
………………
Query OK, 1 row affected, 3 warnings (0.36 sec)
Kemudian penulis membuat database yang nantinya berisi tabel konsumen, tabel makanan, dan tabel pesanan. Berikut potongan query yang dipakai oleh penulis.
mysql> create database pemesanan;
Query OK, 1 row affected (0.06 sec)
Setelah database dibuat, penulis membuat tabel konsumen dengan id_konsumen sebagai primary key. Primary key ini nantinya akan menjadi penghubung ke tabel pesanan. Tabel ini akan berisi data-data pelanggan. Berikut potongan query yang dipakai oleh penulis.
mysql> create table konsumen
-> (
-> id_konsumen varchar(20) not null,
-> konsumen_passwd varchar(5) not null.,
……………
Query OK, 0 rows affected (0.09 sec)
Kemudian penulis membuat tabel makanan dengan id_makanan sebagai primary key. Primary key ini akan menjadi penghubung ke tabel pesanan. Tabel ini akan berisi data-data menu makanan. Berikut potongan query yang dipakai oleh penulis.
mysql> create table makanan
-> (
-> id_makanan varchar(7) not null,
-> nm_makanan varchar(200) not null,
…………..
Query OK, 0 rows affected (0.08 sec)
Setelah tabel konsumen dan tabel makanan dibuat, penulis membuat tabel pesan dan tabel pesan_makanan yang akan berisi data-data pemesanan pelanggan. Pada tabel ini, id_konsumen dan id_makanan digunakan sebagai foreign key yang mengacu pada tabel konsumen dan tabel makanan sehinggga tabel pesanan dapat terhubung dengan kedua tabel tersebut. Penulis menggunakan potongan query sebagai berikut.
mysql> create table pesan
-> (
-> id_konsumen varchar(20) not null,
……………
Query OK, 0 rows affected (0.06 sec)
mysql> create table pesan_makanan
-> (
-> id_konsumen varchar(20) not null,
…………
Query OK, 0 rows affected (0.06 sec)
Setelah database dan tabel-tabel dibuat, penulis memasukkan data-data menu makanan beserta gambar ke dalam tabel makanan dengan potongan query sebagai berikut.
mysql> insert into makanan(id_makanan,nm_makanan,harga) values
-> (‘ma001′,’1 Ayam Goreng’,42000, ‘AyamGoreng.jpg’),
-> (‘ma002′,’1/2 Ayam Goreng’,21000),
……………..
Query OK, 62 rows affected (0.11 sec)
Records: 62 Duplicates: 0 Warnings: 0
Keseluruhan query MySql yang digunakan oleh penulis dapat dilihat pada halaman lampiran.
3.2.6 Membuat Halaman Web dengan Menggunakan Macromedia Dreamweaver Mx dan PHP
Setelah database dan tabel-tabel dibuat, penulis membuat halaman aplikasi pemesanan makanan secara online dengan Macromedia Dreamweaver Mx untuk membuat desain halaman. Di dalam penggunaannya secara garis besar terbagi menjadi 3 cara, yaitu :
- Design view , untuk mendesain halaman melalui interface browser.
- Code view, untuk pembuatan halaman melalui script htmlnya.
- Design and Code views, gabungan dari kedua cara membuat halaman di atas.
Aplikasi pemesanan makanan secara online ini menggunakan PHP sebagai bahasa pemrograman pembantu untuk mengkoneksikan halaman dengan database di dalam SQL. Untuk menuliskan script PHP, Dreamweaver menyediakan jendela code yang berintegrasi dengan jendela designnya.
3.2.6.1 Pembuatan Halaman Login
Halaman ini merupakan halaman yang pertama kali ditampilkan. Pada halaman ini, penulis meletakkan gambar sebagai header dengan cara penulis memindahkan kursor ke baris pertama kemudian pada menu bar pilih menu insert > image lalu pilih gambarnya.
Berikutnya, di bawah gambar, penulis mengetik kata “LOGIN” sebagai judul halaman. Kata yang telah diketik oleh penulis, diblok, tombol kanan pada mouse ditekan > Paragraph Format > Heading 1 agar kata yang diketik oleh penulis menjadi besar. Setelah itu, pada properties inspector, tombol align center ditekan agar kata yang telah diketik penulis terletak ditengah-tengah.
Kemudian penulis meletakkan garis mendatar dibawah judul halaman dengan cara mengetikkan tag <hr> pada code editor setelah tag penutup </h1> untuk kata “LOGIN”.
Setelah gambar garis, penulis mengetik kata “register” sebagai link ke halaman register. Kemudian kata tersebut diblok > tombol kanan pada mouse ditekan > make link, penulis memilih halaman register, setelah itu tombol OK ditekan.
Agar tampilan untuk input ID dan password pelanggan terlihat rapih, penulis menggunakan tabel. Berikut ini cara pembuatan tabel :
- Pada insert bar, pilih tab forms, pilih dan klik tombol Form. Penulis menggunakan form karena penulis meletakkan tombol di dalam tabel.
- Sorot kursor ke dalam from untuk mengaktifkan form tersebut, pada insert bar, pilih tab commons, klik tombol insert table. Atur nilai pada property dengan mengisi nilai pada rows = 3, columns = 2, border = 0. Tekan tombol OK.
Setelah tabel dibuat, penulis mengetikkan kata “ID(nomor ktp anda pada saat mendaftar)” di dalam tabel baris satu kolom satu dan mengetikkan kata “password” di dalam tabel baris dua kolom satu. Pada baris satu kolom dua dan baris dua kolom dua, penulis meletakkan text field tempat user memasukkan data yang diminta dengan cara pilih tab forms pada insert bar, tekan tombol text field.
Pada text field di baris satu kolom dua, penulis menentukan name = login(name digunakan sebagai variabel di dalam skrip php), type = text, size = 20, maxlength = 100. Pada text field di baris dua kolom dua, penulis menentukan name = password, type = text, size = 5, maxlength = 5.
Pada baris tiga kolom satu, penulis meletakkan gambar button dengan cara pilih tab form pada insert bar, klik gambar button. Pada button ini, penulis menentukan name = btOK, type = submit, value = OK.
Berikutnya, penulis memberikan warna sebagai latar belakang tampilan. Caranya, penunjuk mouse diarahkan pada bagian yang kosong pada design view, setelah itu tombol sebelah kanan pada mouse ditekan, pilih page properties, tekan kotak di sebelah kata background, pilih warna yang diinginkan, setelah itu tekan tombol OK.
Gambar 3.15 Hasil Pembuatan Halaman Login
Halaman ini disimpan dengan nama Login.php. Setelah user memasukkan id dan password, maka data yang sudah dimasukkan akan disamakan dengan data yang ada pada database yang sudah terbentuk di dalam SQL. Skrip PHP dapat di tulis di dalam code view. Berikut ini potongan skrip PHP untuk file Login.php.
<?php
include “DB_connect.php”;
session_start();
if(isset($btOk))
{
$db = new DB_connect;
$db->connectDB();
……………….
?>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>LOGIN</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#6BE7A3″>
<div align=”left”>
……….
</body>
</html>
3.2.6.2 Pembuatan Halaman Register
Cara pembuatan halaman ini hampir sama dengan cara pembuatan halaman Login, hanya berbeda isinya. Pada halaman ini, penulis juga menggunakan form dengan action = register.php dan tabel dengan rows = 6, columns = 2, border = 0. Isi dari tabel dapat dilihat pada tabel di bawah ini.
Tabel 3.8 Bentuk dan Isi Tabel Pada Halaman Register
|
Nama
|
Text field(name = “nama”, type = “text”, id = “nama”, size = “100”, maxlength = “100”
|
|
Nomor KTP(akan menjadi user id anda pada saat login)
|
Text field(name = “id_kons = “text”, size = “30” , maxlength = “30
|
|
No. Telepon
|
Text field(name = “noTelpe = “text”, id = “noTelp, size = “15”, maxlength = “15”
|
|
Alamat E-mail
|
Text field(name = “almEmail”, type = “text”, id = “almEmail”, size = “50”, maxlength = “50”
|
|
Password(maksimal 5 karakter)
|
Text field(name = “password”, type = “password”, id = “password”, size = “5”, maxlength = “5”
|
|
Konfirmasi password
|
Text field(name = “password1”, type = “password”, id = “password1”, size = “5”, maxlength = “5”
|
Berikutnya, penulis menuliskan kata “Data harus terisi semua” dengan warna tulisan adalah merah, caranya adalah kata tersebut di blok, pada properties inspector, tekan tombol text color, pilih warna merah. Kemudian penulis meletakkan button di bagian bawah kalimat yang sudah diketik. Cara peletakkan button sama dengan cara peletakkan button pada halaman Login. Penentuan button(value, type, dan lain-lain) dapat dilihat pada tabel di bawah ini.
Tabel 3.9 Penentuan Buttton pada Halaman Register
|
Button
|
|
|
OK
|
name = “btOK”, type = “submit”, id = “btOK”, value = “OK”
|
|
Hapus
|
name = “btHapus”, type = “reset”, id = “btHapus”, value = “Hapus”
|
|
Kembali
|
name = “btBack”, type = “button”, id = “btBack”, value = “ < Kembali”, onclick = “self.history.back();”
|
Berikut ini adalah hasil pembuatan halaman Register.
Gambar 3.16 Hasil Pembuatan Halaman Register
Setelah user memasukkan data-data dan user menekan tombol OK, maka halaman Konfirmasi Register akan ditampilkan. Apabila ada salah satu data yang kosong, maka akan keluar pesan “Tidak boleh ada data yang kosong” pada bagian atas halaman. Halaman ini disimpan dengan nama register.php. Berikut adalah potongan skrip untuk halaman Register.
<?
session_start();
if(isset($btBack))
{
$alamat = “http://localhost/WebPI/Login.php”;
header(“Location: $alamat”);
}
if(isset($btOK))
{
$flag = true;
if((empty($nama)) and (empty($id_kons)) and (empty($noTelp)) and (empty($almEmail)) and (empty($password)) and(empty($password1)))
{
$msg = “Tidak Boleh ada data yang kosong.”;
$alamat = “http://localhost/WebPI/Register.php”;
$flag = false;
} else
………
?>
<html>
<head>
<title>Halaman Register</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#068BD2″>
<h1 align=”center”><img src=”header%20web%20mbr.jpg” width=”800″ height=”100″></h1>
<hr>
<p align=”center”><font color=”#FF0000″ size=”4″>
<? print(“$msg<BR>\n”); ?></font></p>
<h1 align=”center”><font face=”Times New Roman, Times, serif”>REGISTER </font></h1>
<form name=”form1″ method=”post” action=”register.php”>
<table width=”114%” border=”0″ align=”center”>
…………….
</body>
</html>
3.2.6.3 Pembuatan Halaman Konfirmasi Register
Cara Pembuatan halaman ini sama dengan cara pembuatan halaman register, hanya berbeda isinya saja. Pada halaman ini, data–data yang telah dimasukkan oleh user pada halaman register akan ditampilkan. Halamn ini disimpan dengan nama konfirm_register.php.
Gambar 3.17 Hasil Pembuatan Halaman Konfirmasi Register
3.2.6.4 Pembuatan Halaman Menu Admin
Cara pembuatan halaman ini hampir sama dengan cara pembuatan halaman-halaman sebelumnya, yang berbeda adalah isinya. Halaman ini hanya berisi link-link yang menuju ke halaman lain. Cara Pembuatan link sama dengan cara pembuatan link pada halaman Login.
Gambar 3.18 Hasil Pembuatan Halaman Menu Admin
3.2.6.5 Pembuatan Halaman Daftar Pemesan
Cara pembuatan tabel, button, link, dan header gambar pada halaman ini sama dengan cara pembuatan tabel dan button pada halaman-halaman sebelumnya. Bedanya adalah pada halaman ini terdapat checkbox.
Cara membuat checkbox yaitu pada insert bar pilih tab form, tekan tombol checkbox. Selanjutnya pada button yang terletak di tabel pelanggan, penulis menentukan name = “cbDelete1”, dan pada button yang terletak di tabel Pesanan, penulis menentukan name = “cbDelete”.
Gambar 3.19 Hasil Pembuatan Halaman Daftar Pemesan
Pada halaman ini, akan ditampilkan data-data pelanggan dan data-data pesanan yang dapat dihapus oleh administrator. Berikut potongan skrip halaman Daftar Pemesan.
<?php
include “DB_connect.php”;
session_start();
$db;
if(isset($logout) && ($logout == “ok”))
session_destroy();
if(session_is_registered(user_id))
{
$db = new DB_connect;
………….
?>
<html>
<head>
<title>DAFTAR PEMESAN</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<style type=”text/css”>
<!–
.style1 {font-size: xx-large}
–>
</style>
</head>
<body bgcolor=”#50A446″>
<form action=”DaftarPemesan.php” method=”post” name=”formPemesan” id=”formPemesan”>
<img src=”header%20web%20mbr.jpg”>
<h1 align=”center”>Daftar Pemesan</h1>
<p align=”right”><a href=”MenuAdmin.php”>Menu Admin</a> | <a href=”../WebPI/Login.php?logout=ok”>Logout</a></p>
<?
print(“$msg<br>\n”);
?>
………………..
</body>
</html>
3.2.6.6 Pembuatan Halaman Ubah/Hapus Menu
Cara pembuatan halaman ini hampir sama dengan halaman Daftar Pemesan, dan cara pembuatan link sama dengan cara pembuatan link pada halaman-halaman sebelumnya. Halaman ini digunakan oleh administrator untuk mengubah ataupun menghapus menu. Berikut potongan skrip untuk halaman Ubah/Hapus Menu.
<?php
include “DB_connect.php”;
session_start();
$db;
if(isset($logout) && ($logout == “ok”))
session_destroy();
if(isset($btDelete))
{
$idx = 0;
$arr;
……………………
?>
<html>
<head>
<title>Ubah / Hapus Menu</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#757DCA”>
<form action=”” method=”post” name=”formMenu” id=”formMenu”>
<h1 align=”center”><img src=”header%20web%20mbr.jpg” width=”800″ height=”100″></h1>
<h1 align=”center”>UBAH/HAPUS MENU </h1>
<p align=”right”><a href=”MenuAdmin.php”>Menu Utama</a> | <a href=”../WebPI/Login.php?logout=ok”>Logout</a></p>
<?
print(“$msg<BR>\n”);
?>
<HR>
<br>
<table width=”500″ border=”1″ align=”center” id=”tblMakanan”>
…………………………
</body>
</html>
3.2.6.7 Pembuatan Halaman Ubah Menu
Halaman ini digunakan oleh administrator untuk mengubah menu yang sudah ada. Cara pembuatan halaman ini hampir sama dengan cara pembuatan halaman Register. Bedanya adalah isinya dan pada text field gambar, type-nya adalah file. Berikut potongan skrip untuk halaman Ubah Menu.
<?php
include “DB_connect.php”;
session_start();
$db;
if(isset($logout) && ($logout == “ok”))
session_destroy();
if(!isset($btSimpan))
{
$db = new DB_connect;
$db->connectDB();
……………………
?>
<html>
<head>
<title>Ubah Menu</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#E17DEC”>
<div align=”center”>
<h1><img src=”header%20web%20mbr.jpg” width=”800″ height=”100″></h1>
<h1>UBAH MENU</h1>
<hr>
<p align=”right”><a href=”../WebPI/Login.php?logout=ok”>Logout</a>
………………………
</body>
</html>
3.2.6.8 Pembuatan Halaman Tambah Menu
Cara pembuatan halaman ini sama dengan cara pembuatan halaman Ubah Menu. Halaman ini digunakan oleh administrator untuk menambah menu baru. Berikut potongan skrip halaman Tambah Menu.
<?
include “DB_connect.php”;
session_start();
$db;
if(isset($logout) && ($logout == “ok”))
session_destroy();
if(isset($btTambah))
{
………….
?>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Menambah Menu</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#80B387″>
<div align=”center”>
<p><img src=”header%20web%20mbr.jpg” width=”800″ height=”100″></p>
<p><font size=”7″>TAMBAH MENU</font></p>
<hr>
<p align=”right”><a href=”MenuAdmin.php”>Menu Utama</a> | <a href=”../WebPI/Login.php?logout=ok”>Logout</a> </p>
<form name=”form1″ method=”post” action=”TambahMenu.php”>
…………………
</body>
</html>
3.2.6.9 Pembuatan Halaman Utama
Halaman muncul setelah user memasukkan data pada saat login dan menekan tombol OK. Halaman ini hanya berupa halaman selamat datang, dan cara pembuatannya hampir seperti cara pembuatan halaman Menu Admin. Berikut potongan skrip halaman Utama.
<?
include “DB_connect.php”;
session_start();
$db;
if(isset($logout) && ($logout == “ok”))
session_destroy();
………………………………
?>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Halaman Utama</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#068BD2″>
<blockquote>
<div align=”center”>
<p></p>
<p><img src=”header%20web%20mbr.jpg” width=”800″ height=”100″></p>
<br>
<hr>
……………………
</body>
</html>
3.2.6.10 Pembuatan Form Pemesanan
Halaman ini digunakan oleh user untuk memesan makanan. Cara pembuatan halaman ini hampir sama dengan cara pembuatan halaman Daftar Pemesan. Hanya berbeda isi dan pada halaman ini tidak terdapat checkbox. Berikut potongan skrip untuk Form Pemesanan.
<?php
include “DB_connect.php”;
session_start();
$db;
if(isset($logout) && ($logout == “ok”))
session_destroy();
if(isset($btBack))
{
$alamat = “http://localhost/WebPI/Login.php”;
header(“Location: $alamat”);
}
…………………
?>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Form Pemesanan</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#068BD2″>
<div align=”center”>
<img src=”header%20web%20mbr.jpg”>
<h1>FORM PEMESANAN</h1>
<div align=”left”>
<?
if(session_is_registered(user_id))
{
?>
</div>
</div>
<h3 align=”left”>Welcome <? print($user_id); ?></h3><p align=”right”><a href=”../WebPI/Login.php?logout=ok”>Logout</a></p>
<form action=”FormPemesanan.php” method=”post” name=”formDataPelanggan” id=”formDataPelanggan”>
……………………
</body>
</html>
3.2.6.11 Pembuatan Halaman Konfirmasi Pemesanan
Pada halaman ini data-data yang telah dimasukkan oleh pelanggan pada form pemesanan akan ditampilkan. Cara pembuatan halaman ini hampir sama dengan cara pembuatan halaman Konfirmasi Register, yang berbeda adalah isinya. Berikut adalah potomgan skrip halaman Konfirmasi Pemesanan.
<?php
include “DB_connect.php”;
session_start();
$db;
if(isset($logout) && ($logout == “ok”))
session_destroy();
………….
?>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Konfirmasi</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#7C7EDE”>
<img src=”header%20web%20mbr.jpg”>
<hr>
<h1 align=”center”>Konfirmasi</h1>
<br>
<?
if ($ttlPesan < 200)
{
print(“Jumlah keseluruhan pesanan harus lebih dari atau sama dengan 200”);
}else
{
?>
<br>
<p align=”left”><a href=”../WebPI/Login.php?logout=ok”>Logout</a></p>
</div>
<form action=”” method=”post” name=”formPemesanan” id=”formPemesanan”>
<table width=”587″ border=”0″>
………………
</form>
</body>
</html>
Mengupload Website
Subbab ini berisi langkah-langkah untuk mengupload aplikasi berbasis web yang dibuat oleh penulis. Langkah pertama, anda masuk ke situs http://www.freehostingnow.com, anda harus mendaftar terlebih dahulu apabila anda belum menjadi anggota dari situs tersebut.
Untuk mendaftar, klik kata LOGUP, kemudian isi data-data yang diminta serta subdomain yang anda inginkan misalnya dengan nama onel dan alamat email anda. Beberapa detik kemudian, http://www.freehostingnow.com akan mengirimkan email kepada anda sebuah nomor atau kode. Nomor atau kode tersebut digunakan pada saat anda login pertama kali ke dalam situs http://www.freehostingnow.com.
Pada saat anda sudah login, anda akan dihadapkan pada halaman awal, yaitu halaman control panel yang berisi tools-tools yang dapat digunakan untuk mengupload web anda.
Pertama-tama, anda harus membuat database, klik tool yang bernama database manager. Di halaman database manager, anda membuat database yang sudah anda siapkan sebelumnya.
Setelah database terbentuk, klik link Home untuk kembali ke halaman control panel. Kemudian klik tool file manager untuk mengupload web anda, setelah itu, klik link Upload Files.
Untuk melihat web anda, anda dapat mengaksesnya dengan format alamat web nama_subdomain.freehostingnow.com misalnya onel.freehostingnow.com.
Nugrohoadi2ka12's Blog 