Membuat Toko Buku Sederhana dengan PHP - MySQL

Pada kasus contoh pengimplementasian MySQL di PHP kali ini, akan dibuat aplikasi sederhana Toko Buku yang berisikan book list (daftar buku dan pemprosesan belan!a" #emampuan dasar PHP yang harus dipahami adalah $ariabel, array, looping, HTML form, dan fungsi%fungsi MySQL, serta perintah SQL sederhana seperti S&L&'T dan ()S&*T" Selain itu, diperlukan kemampuan dasar HTML, serta pengetahuan 'SS untuk perapihan tampilan" Silahkan kamu pela!ari kembali dasar%dasar PHP dari halaman http+,,saung% foss"-eb"id,doku,id%php, agar memudahkan dalam membuat aplikasi ini" .engan contoh kasus kali ini, diharapkan aplikasi sederhana ini dapat dikembangkan men!adi aplikasi Toko Buku yang lebih komplek"

Alur Aplikasi
/plikasi sederhana ini terdiri dari 0 alur sederhana, yaitu daftar buku, form order dan proses order" Pada alur pertama menampilkan halaman berisikan se!umlah daftar buku yang diambil dari tabel buku yang tersimpan di database" Pada form order, menampilkan form yang berisikan informasi belan!a buku dari pengun!ung" .an proses order merupakan alur terakhir yang di dalamnya memproses informasi dari form order yang dimasukkan oleh pengun!ung"

Berikut pen!elasan setiap alur dalam aplikasi yang akan dibuat+

Alur 1 - Da tar Buku

Pada alur pertama, ditampilkan daftar buku yang diambil dari tabel buku yang tersimpan di database" Pada halaman ini, terdapat daftar buku beserta harganya"

Alur ! - "orm #rder

Halaman ini memunculkan -eb form yang berisikan kolom%kolom data pembelian seperti nama pembeli, alamat, buku yang dibeli, dan !umlahnya"

Alur $ - Proses #rder

Bagian ini memproses data%data yang dimasukkan dari 1orm 2rder pada alur 3, hasil yang diperoleh berupa halaman konfirmasi serta memasukkan hasil pembelian ke dalam tabel"

Membuat Database
Sebelum melakukan pengkodean aplikasi, persiapkan terlebih dahulu database untuk menyimpan data%data yang diperlukan oleh aplikasi" #ita dapat menggunakan phpMy/dmin

untuk mengatur database seperti membuat database, membuat tabel dan field, memasukkan data dan lain sebagainya" Berikut struktur database /plikasi Toko Buku Sederhana+ )ama database+ bookstore

Tabel books+ berisikan daftar buku

"ield Tipe Deskripsi %eterangan book4id int (. Buku Primary #ey 5 /6T24()'*&M&)T book4name $archar(78 )ama Buku % book4price decimal(78,3 Harga Buku % Tabel orders+ berisikan order , pembelian yang dilakukan oleh pengun!ung "ield order4id order4name order4address book4id order4amount Deskripsi %eterangan int (. 2rder Primary #ey 5 /6T24()'*&M&)T $archar(78 )ama Pembeli % te9t /lamat Pembeli % int (. Buku 1oreign #ey dari tabel books decimal(78,3 :umlah Pembelian % Tipe

Pastikan phpMy/dmin telah terinstal, dan buka di peramban -eb dengan alamat http+,,localhost,phpmyadmin" Lalu pada halaman ;Home; phpMy/dmin klik tab ;.atabases;, dan masukkan ;bookstore; (tanpa tanda kutip pada bagian ;'reate nedatabase;"

.atabase dengan nama ;bookstore; akan disimpan di MySQL" Pilih database ;bookstore; yang telah dibuat sebelumnya, lalu pada bagian ;'reate table on database bookstore;, masukkan nama tabel yang ingin dibuat, tabel pertama yang dibuat adalah ;books; dan masukkan banyaknya kolom , field pada tabel tersebut"

Setelah mendefinisikan nama tabel beserta banyaknya field, langkah selan!utnya adalah mengatur struktur tabel" .i bagian ini, kita menentukan tipe data pada setiap field, menentukan ;Storage engine;, dan pengaturan lainnya" 6ntuk tipe field, silahkan lihat pada tabel struktur database di atas" Lakukan langkah yang sama pada pembuatan tabel ;orders;"

(sikan beberapa data contoh pada tabel ;books;" 'aranya dengan memilih tabel ;books;, lalu klik tab ;(nsert;" Masukkan beberapa data di dalamnya"

Mengelola "ile- ile yang Dibutuhkan

1ile%file aplikasi terdiri dari file PHP, 'SS dan gambar yang dibutuhkan untuk tampilan" Berikut struktur file aplikasi+ 1older images list"php order"php order4process"php style"css berisikan gambar%gambar yang dibutuhkan untuk tampilan file PHP yang berisikan script untuk menampilkan daftar buku file PHP yang berisikan script untuk menampilkan 1orm 2rder file PHP yang berisikan script yang memproses data%data dari 1orm 2rder file 'SS yang digunakan untuk merapihkan tampilan

Buat file%file serta folder yang dibutuhkan di lokasi dokumen -eb ser$er agar dapat dieksekusi oleh -eb ser$er" 6ntuk file%file gambar, silahkan unduh di sini

Alur 1 - Membuat Da tar Buku

Semua skrip yang digunakan untuk menampilkan data buku disimpan pada file list"php" .ua langkah dalam menampilkan daftar buku, pertama mengambil data yang tersimpan di dalam database, selan!utnya menampilkan dalam bentuk HTML" Berikut pengkodean untuk mengambil data daftar buku yang tersimpan dalam database+
mysql_connect('localhost', 'root', ''); mysql_select_db('bookstore'); $result = mysql_query("SELEC ! "#$% books");

Pada baris pertama, fungsi mys<l4connect( melakukan koneksi ke MySQL dan dilan!utkan dengan baris berikutnya memilih database =bookstore= dengan menggunakan fungsi mys<l4select4db( " #etika koneksi ke MySQL dan memilih database berhasil, dengan menggunakan perintah ;S&L&'T; untuk mengambil data dari tabel ;books; dan hasil dari <uery yang dilakukan fungsi mys<l4<uery( dimasukkan ke dalam $ariabel >result" Selan!utnya, data yang diambil dari kode di atas kemudian ditampilkan dalam bentuk HTML" Berikut kode untuk menampilkan data daftar buku+
echo "&h'()ooks L*st&+h'("; echo "&ul("; ,h*le($data = mysql_-etch_array($result)) . echo "&l*($data/book_name0 1 #23 $data/book_2r*ce0&+l*("; 4 echo "&+ul(";

1ungsi echo digunakan untuk menampilkan keluaran dalam bentuk HTML" Struktur kendali perulangan -hile digunakan untuk melakukan perulangan dari data%data yang berhasil diperoleh dari <uery sebelumnya" 1ungsi mys<l4fetch4array( digunakan untuk mengambil data dari $ariabel >result yang dikembalikan dalam bentuk array" Secara utuh, skrip file list"php adalah sebagai berikut+ list"php
&html( &head( &t*tle()ook Store&+t*tle( &l*nk rel="stylesheet" ty2e="te5t+css" hre-="style3css" +( &+head( &body( &62h2 ++ koneks* ke database mysql_connect('localhost', 'root', ''); ++ 2*l*h database mysql_select_db('bookstore'); ++ melakukan query $result = mysql_query("SELEC ! "#$% books"); ++ menam2*lkan ke bro,ser

echo "&h'()ooks L*st&+h'("; echo "&ul("; ++ men7amb*l data ,h*le($data = mysql_-etch_array($result)) . echo "&l*($data/book_name0 1 #23 $data/book_2r*ce0&+l*("; 4 echo "&+ul("; 6( &a hre-="order32h2"(/order0&+a( &+body( &html(

Alur ! - Membuat "orm #rder

Pada bagian ini sebenarnya hanya menampilkan bentuk form order yang terdiri dari sintak HTML" Hanya sa!a, option di dalam tag select membutuhkan data%data dari tabel books, dan memerlukan perintah PHP untuk melakukan pengambilan tersebut" 1orm order disimpan dengan nama file order"php Berikut kode form order+
&-orm method="2ost" act*on="order_2rocess32h2"( &2( 8ama1 &br +( &*n2ut ty2e="te5t" name="nama"( &+2( &2( 9lamat1 &br +( &te5tarea name="alamat"(&+te5tarea( &+2( &2( )uku1 &br +( &select name="buku"( &62h2 ++ men7amb*l data dar* tabel books 6( &+select( &+2( &2( :umlah1 &br +( &*n2ut ty2e="te5t" name=";umlah" s*<e="="( &+2( &2( &*n2ut ty2e="subm*t" >alue=")el*" class="button"( &+2( &+-orm(

Pada bagian pemilihan buku, sintak pengambilan datanya ditambahkan men!adi sebagai berikut+
&2( )uku1 &br +( &select name="buku"( &62h2 mysql_connect('localhost', 'root', ''); mysql_select_db('bookstore'); $result = mysql_query("SELEC ! "#$% books");

,h*le($data = mysql_-etch_array($result)) . echo "&o2t*on >alue='$data/book_*d0'($data/book_name0 1 #23 $data/book_2r*ce0&+o2t*on("; 4 6( &+select( &+2(

Secara lengkap kode form order sebagai berikut+ order"php

&html( &head( &t*tle()ook Store&+t*tle( &l*nk rel="stylesheet" ty2e="te5t+css" hre-="style3css" +( &+head( &body( &h'($rder&+h'( &-orm method="2ost" act*on="order_2rocess32h2"( &2( 8ama1 &br +( &*n2ut ty2e="te5t" name="nama"( &+2( &2( 9lamat1 &br +( &te5tarea name="alamat"(&+te5tarea( &+2( &2( )uku1 &br +( &select name="buku"( &62h2 ++ koneks* ke database mysql_connect('localhost', 'root', ''); ++ 2*l*h database mysql_select_db('bookstore'); ++ melakukan query $result = mysql_query("SELEC ! "#$% books"); ,h*le($data = mysql_-etch_array($result)) . echo "&o2t*on >alue='$data/book_*d0'($data/book_name0 1 #23 $data/book_2r*ce0&+o2t*on("; 4 6( &+select( &+2( &2( :umlah1 &br +( &*n2ut ty2e="te5t" name=";umlah" s*<e="="( &+2( &2( &*n2ut ty2e="subm*t" >alue=")el*" class="button"( &+2( &+-orm( &+body( &html(

Alur $ - Membuat Proses #rder

Seperti yang telah didefinisikan melalui attribut ;action; yang ada di tag ;form; untuk order di atas, file php yang digunakan adalah order4process"php" Begitu pula dengan metode pengiriman yang didefinisikan dari attribut ;method; pada tag ;form;, metode post digunakan sebagai pengirimannya, dan PHP mengambil data dengan menggunakan $ariabel global >4P2ST untuk mengambil data tersebut" Berikut kode pengambilan data dengan >4P2ST+
$nama = $alamat $buku = $;umlah $_?$S /'nama'0; = $_?$S /'alamat'0; $_?$S /'buku'0; = $_?$S /';umlah'0;

Setiap order yang dilakukan oleh pengun!ung disimpan ke dalam tabel ;orders;, berikut adalah sintak untuk memasukkan data ke dalam tabel orders+
mysql_connect('localhost', 'root', ''); mysql_select_db('bookstore'); mysql_query("@8SE# @8 $ orders (order_name, order_address, book_*d, order_amount) A9LBES ('$nama', '$alamat', '$buku', '$;umlah')");

'ara memasukkan data hampir sama dengan pengambilan data pada kode%kode sebelumnya, yaitu melakukan koneksi ke MySQL dan memilih database, hanya sa!a perintah SQL yang digunakan adalah ;()S&*T; pada fungsi mys<l4<uery( " Langkah terakhir adalah menampilkan konfirmasi order dengan menggunakan fungsi echo" Tetapi, sebelum menampilkan konfirmasi order, perlu diperhatikan bah-a $ariabel >buku yang dikirim berisikan (. Buku, maka untuk memperoleh informasi nama buku dan harganya dibutuhkan pengambilan data dari tabel books sebelum diolah men!adi tampilan konfirmasi order" Berikut sintaknya+
++ men7amb*l data dar* tabel books $result = mysql_query("SELEC ! "#$% books CDE#E book_*d = '$buku'"); $data = mysql_-etch_array($result); $total = $;umlah ! $data/'book_2r*ce'0; ++ menam2*lkan kon-*rmas* order echo "&hE( er*ma kas*h FF&+hE("; echo "&2(9nda telah berhas*l melakukan 2embel*an, ber*kut data 2embel*an 9nda1&+2("; echo "&2(8ama 1 $nama&+2("; echo "&2(9lamat 1 $alamat&+2("; echo "&2()uku 1 $data/book_name0&+2("; echo "&2(Dar7a 1 $;umlah 5 $data/book_2r*ce0 = $total&+2(";

#ode lengkap memproses order sebagai berikut+ order4process"php

&html( &head( &t*tle()ook Store&+t*tle( &l*nk rel="stylesheet" ty2e="te5t+css" hre-="style3css" +( &+head( &body( &62h2

++ men7amb*l data yan7 telah d* subm*t $nama = $_?$S /'nama'0; $alamat = $_?$S /'alamat'0; $buku = $_?$S /'buku'0; $;umlah = $_?$S /';umlah'0; ++ koneks* ke database mysql_connect('localhost', 'root', ''); ++ 2*l*h database mysql_select_db('bookstore'); ++ memasukkan data ke dalam tabel orders mysql_query("@8SE# @8 $ orders (order_name, order_address, book_*d, order_amount) A9LBES ('$nama', '$alamat', '$buku', '$;umlah')"); ++ men7amb*l data dar* tabel books $result = mysql_query("SELEC ! "#$% books CDE#E book_*d = '$buku'"); $data = mysql_-etch_array($result); $total = $;umlah ! $data/'book_2r*ce'0; ++ menam2*lkan kon-*rmas* order echo "&hE( er*ma kas*h FF&+hE("; echo "&2(9nda telah berhas*l melakukan 2embel*an, ber*kut data 2embel*an 9nda1&+2("; echo "&2(8ama 1 $nama&+2("; echo "&2(9lamat 1 $alamat&+2("; echo "&2()uku 1 $data/book_name0&+2("; echo "&2(Dar7a 1 $;umlah 5 $data/book_2r*ce0 = $total&+2("; 6( &+body( &html(

Merapihkan Halaman &eb

Langkah terakhir adalah merapihkan tampilan -eb dengan 'SS" 1ile yang berisikan kode% kode 'SS disimpan dengan nama file style"css" Berikut adalah isi dari kode 'SS+ style"css
body . -ontG-am*ly1 9r*al, Del>et*ca, sansGser*-; -ontGs*<e1 H2t; 4 h' . -ontGs*<e1 ''2t; 2add*n7Gle-t1 EI25; back7round1 url(*ma7es+cart32n7) noGre2eat;

4 hE .

-ontGs*<e1 ''2t; 2add*n7Gle-t1 I25; 4 ul l* . 2add*n7Gbottom1 J25; l*stGstyleG*ma7e1 url(*ma7es+l*st32n7); 4 *n2ut .

-ontGs*<e1 H2t; back7roundGcolor1 K"="="=; border1 '25 sol*d KLLLLLL;

te5tarea . -ontGs*<e1 H2t; back7roundGcolor1 K"="="=; border1 '25 sol*d KLLLLLL; 4 *n2ut3button . -ontG-am*ly 1 Del>et*ca, 9r*al, sansGser*-; -ontGs*<e 1 ''25; -ontG,e*7ht 1 bold; color 1 black; back7roundGcolor 1 Kdddddd; border 1 '25 sol*d black; 4