07. Webdinamis

Web Dinamis Berbasis Database Di mulai dari pertemuan sekarang, kita akan membuat suatu web site yang berbasis database. Langkah pertama untuk membuat web tersebut adalah dengan membuat database dan tabel yang akan diakses oleh web site tersebut. Sebagai contoh tabel yang digunakan bernama Barang dengan struktur fieldnya adalah : +--------------+-------------+------+-----+---------+-------+ | Field | Type | Null | Key | Default | Extra | +--------------+-------------+------+-----+---------+-------+ | kode | varchar(5) | | PRI | | | | nama | varchar(25) | | | | | | tanggalmasuk | date | YES | | NULL | | | harga | float | | | 0 | | | stok | int(11) | | | 0 | | +--------------+-------------+------+-----+---------+-------+

Perintah SQL untuk membuat struktur tabel tersebut adalah : CREATE TABLE barang ( kode varchar(5) NOT NULL, nama varchar(25) NOT NULL, tanggalmasuk date, harga float DEFAULT '0' NOT NULL, stok int DEFAULT '0' NOT NULL, PRIMARY KEY (kode)

);

Catatan : Untuk jalannya website ini, ada beberapa hal yang harus dipenuhi yaitu : 1. Web Server harus dalam keadaan aktif (apache harus jalan) 2. Database Server MySQL harus dalam keadaan aktif.

Modul Mata Kuliah E-Commerce – Hal. 52

Setelah database dan tabel telah tersedia, maka langkah berikutnya adalah membuat website-nya. Langkah pertamanya adalah dengan buat dulu suatu homepage yang akan menjadi page default (yang akan muncul ketika alamat web site ditulis). Buatlah homepage seperti dibawah ini dan kemudian disimpan ke dalam file index.php atau index.htm (disarankan menggunakan ekstensi .php untuk mempermudah mengingat) yang ada dalam folder C:\apache\htdocs\folderanda.

Script untuk page ini dapat dilihat di halaman berikutnya :

Modul Mata Kuliah E-Commerce – Hal. 53

Scriptnya <style> body { font-family: Verdana; font-size: 10pt }

Web Database

---

Web site ini merupakan web site latihan untuk mata kuliah E-Commerce. Web site ini menggunakan database server MySQL. Dalam homepage ini terdapat beberapa transaksi yang dapat dilakukan, diantaranya :

• Menampilkan semua data
• Penambahan data
• Pencarian data
• Penghapusan data
• Pengeditan data
• Penambahan stock (pembelian)
• Pengurangan stock (penjualan)

---

Jika telah disimpan, maka tampilkan page berikut dengan menulis alamat http://localhost/folderanda.

Modul Mata Kuliah E-Commerce – Hal. 54

1. Menampilkan Data Untuk menampilkan data yang ada dalam database, maka kita membutuhkan suatu file yang didalamnya terdapat script php yang mampu mengakses ke database. Scriptnya adalah sebagai berikut : <style> body { font-family: Verdana; font-size: 10pt } td {font-family: Verdana; font-size=10pt}

Web Database

---

0) { echo "Data yang ada dalam tabel adalah $banyak record."; echo ""; while ($data=mysql_fetch_row($hasil)) { echo ""; } echo "

Kode Barang	Nama Barang	Tanggal Masuk	Harga	Stok
$data[0]	$data[1]	$data[2]	".number_format($data[3],0,"",".")."	$data[4]

"; } else echo "Tidak ada data dalam tabel"; mysql_close($link); ?> Kembali ke awal

Simpan script di atas dengan nama tampildata.php di folder yang sama dengan index.php, kemudian buatlah link dari file index.php pada bagian Menampilkan Semua Data diubah menjadi Menampilkan Semua Data. Kemudian web site dijalankan lagi dengan alamat localhost/folderanda, dan jika telah muncul coba klik pada bagian Menampilkan Semua Data. Jika script PHP yang anda tulis telah benar, maka browser akan menampilkan layar seperti di bawah ini.

Modul Mata Kuliah E-Commerce – Hal. 55

Keterangan Script :

Perintah mysql_connect

Penggunaan & Kegunaan mysql_connect(namaserver, username, password)

Perintah ini digunakan untuk melakukan suatu koneksi ke database server. Fungsi ini menghasilkan suatu pengenal link (link identifier) yang digunakan untuk perintah berikutnya. mysql_select_db mysql_select_db(namadatabase, linkidentifier) Perintah ini digunakan untuk memilih database apa yang akan diproses. mysql_query mysql_query(query, linkidentifier) Perintah ini digunakan untuk mengeksekusi perintah SQL yang ada di parameter query. Fungsi ini akan mengh asilkan suatu penunjuk ke hasil eksekusi (result). mysql_numrows Mysql_numrows(result) Perintah ini digunakan untuk menampilkan berapa data yang dihasilkan dari eksekusi query. mysql_fetch_row Mysql_fetch_row(link result) Perintah ini digunakan untuk mengambil satu baris data dari proses eksekusi query. Perintah ini menghasilkan array yang dimulai dari index 0. mysql_close Mysql_close(link identifier) Menutup koneksi sesuai dengan link identifiernya. Modul Mata Kuliah E-Commerce – Hal. 56

2. Penambahan data Untuk proses penambahan data, tentunya kita harus memiliki suatu home page yang berguna untuk pengisian data (form). Contoh form pengisiannya adalah seperti gambar di bawah ini.

Simpan form pengisian data tersebut dengan nama tambahdata.php dan disimpan di folder anda. Pada script form pengisian data, urutan field tanggal dibuat dengan script php dengan melakukan perulangan dari 1 sampai 31 dan begitu juga untuk urutan bulan dari 1 sampai 12, kalau mau ditulis secara manual, itu bukan masalah. Jika Script ini sudah disimpan, maka buatlah link ke file tambahdata.php dari index.php dengan mengubah bagian Tambah Data dengan menganti perintah tersebut dengan Tambah Data. Script untuk form ini dapat dilihat pada halaman berikutnya :

Modul Mata Kuliah E-Commerce – Hal. 57

Script Form Pengisian Data : <style> body {font-family: Verdana; font-size: 10pt } td {font -family: Verdana; font-size: 10pt }

Web Database

---

PENGISIAN DATA BARANG

---

Kode Barang
Nama Barang
Tanggal	<select size=1 name=etanggal> $i"; ?> <select size="1" name="ebulan"> $i"; ?>
Harga
Stok

---

| Awal | Lihat Data |

---

Modul Mata Kuliah E-Commerce – Hal. 58

Dengan selesainya script form pengisian data, maka kita memerlukan lagi suatu file yang di dalamnya terdapat script PHP yang berguna untuk melakukan proses penyimpanan data ke database MySQL, nama file-nya harus sesuai dengan nama file yang ada dalam bagian action form.. Dalam file tersebut juga harus dapat menampilkan apakan proses penyimpanan data telah selesai atau gagal. Script PHP-nya adalah sebagai berikut : <style> body { font-family: Verdana; font-size: 10pt } td {font-family: Verdana; font-size=10pt}

Web Database

---

Congratulation"; else echo "Data ada yang salah. Data Tidak Tersimpan. Ulang"; mysql_close($link); ?>

| Kembali ke awal | Tampil Data | Tambah Lagi |

Perintah SQL untuk penambahan data disusun dalam script ini. Perintah if ($hasil) berarti kalau pengisian data sukses, maka akan menampilkan pesan Data Telah Disimpan dan kalau penyimpanan tidak sukses maka akan menampilkan pesan Data ada yang salah. Data tidak Disimpan dan akan menampilkan link untuk kembali ke pengisian data sebelumnya.

Ingat : Simpan file ini dengan nama sesuai action form contoh : prosessimpan.php dalam folder yang sama.

Modul Mata Kuliah E-Commerce – Hal. 59

Tampilan ketika penyimpanan telah sukses.

Tampilkan ketika penyimpanan gagal.

Modul Mata Kuliah E-Commerce – Hal. 60

3. Pencarian data Pencarian data sebenarnya suatu proses untuk menyusun suatu perintah SQL berdasarkan criteria-kriteria yang diinginkan yang diisikan dalam suatu form. Ada beberapa versi pencarian data, ada yang membuat form pengisian kriteria terpisah dengan page hasil pencariannya, ada juga yang membuat form pengisian kriterianya disatukan dengan page hasil pencariannya. Perbedaannya hanya terletak pada action pada form pengisian kriteria pencariannya saja. Kalau yang dipisah, file action-nya berbeda dengan file formnya, dan yang disatukan, maka nama file actionnya sama dengan nama file page form pengisian kriterianya. Dalam contoh berikut, yang akan dipakai adalah dengan memisahkan antara form pengisian criteria dengan form hasil pencariannya. Langkah pertama yang harus dibuat adalah membuat form pengisian kriterianya. Lihat gambar dibawah ini sebagai contohnya :

Simpan file tersebut dengan nama pencariandata.php dan jangan lupa untuk membuat link ke page pencarian dari page index.php, dengan mengubah Pencarian Data menjadi Pencarian Data. Script untuk membuat form tersebut dapat dilihat di halaman berikutnya : Modul Mata Kuliah E-Commerce – Hal. 61

<style> body {font-family: Verdana; font-size: 10pt } td {font -family: Verdana; font-size: 10pt }

Web Database

---

PENCARIAN DATA

---

Field	<select size="1" name="efield"> Kode Nama Tanggal Masuk Harga Stok
Kategori	<select size="1" name="eoperator"> Sama Dengan Lebih Besar Lebih Besar Atau Sama Dengan Lebih Kecil Lebih Kecil Atau Sama Dengan Mengandung
Dicari
Diurutkan	<select size="1" name="efieldurut"> Kode Nama Tanggal Masuk Harga Stok Descending

---

| Awal | Lihat Data | Tambah Data |

---

Modul Mata Kuliah E-Commerce – Hal. 62

Sesudah script form pengisian criteria telah selesai, maka langkah berikutnya adalah membuat suatu file yang berisi script PHP yang dapat menyusun dan mengeksekusi suatu perintah SQL yang akan dieksekusikan ke Database MySQL. Script PHP-nya adalah : <style> body {font-family: Verdana; font-size: 10pt } td {font -family: Verdana; font-size: 10pt }

Web Database

---

"; $link=mysql_connect("localhost","",""); $db=mysql_select_db("Latihan",$link); $query="Select * From Barang where $efield $eoperator "; if ($eoperator!="like") $query=$query."'$edicari' "; else $query=$query."'%$edicari%' "; $query=$query." order by $efieldurut $edesc"; echo "Perintah SQL yang tersusun :
$query

"; $hasil=mysql_query($query,$link); $banyak=mysql_numrows($hasil); if ($banyak>0) { echo "Data yang sesuai ada $banyak record."; echo ""; while ($data=mysql_fetch_row($hasil)) { echo ""; } echo "

Kode Barang	Nama Barang	Tanggal Masuk	Harga	Stok
$data[0]	$data[1]	$data[2]	".number_format($data[3],0,"","."). "	$data[4]

"; } else echo "Tidak ada data dalam tabel"; mysql_close($link); ?>

Simpan file ini dengan nama sesuai file action form yang ada di pencariandata.php dan sisimpan di folder yang sama. Contoh tampilan hasil pencarian dapat dilihat pada gambar di bawah ini :

Modul Mata Kuliah E-Commerce – Hal. 63

Modul Mata Kuliah E-Commerce – Hal. 64

4. Penghapusan data Untuk penghapusan data, maka kita membutuhkan suatu form untuk memasukan kode barang yang akan dihapus. Dalam contoh di bawah ini, kode barang yang telah diada dalam database akan ditampilkan semuanya sehingga untuk menghapus data, user tidak usah memasukan kode barangnya dan hanya memilih dari combo box yang ada. Form pemilihan kode yang akan dihapus dapat dilihat di bawah ini.

Script untuk membuat form penghapusan yang di dalamnya terdapat combo box yang berisi database dapat dilihat di bawah ini. <style> body {font-family: Verdana; font-size: 10pt } td {font -family: Verdana; font-size: 10pt }

Web Database

---

Modul Mata Kuliah E-Commerce – Hal. 65

PENGHAPUSAN DATA

---

Kode Barang	<select name=ekode> $query "; $hasil=mysql_query($query,$link); while ($data=mysql_fetch_row($hasil)) { echo "$data[0] | $data[1] "; } mysql_close($link); ?>

---

| Awal | Lihat Data | Tambah Data | Pencarian Data |

Simpan script tersebut dengan nama file hapusdata.php, kemudian buatlah link ke file ini dari file index.php dengan mengubah bagian Penghapusan data menjadi Penghapusan Data. Script ini akan melakukan proses penghapusan data yang nama file action-nya adalah proseshapus.php. Script untuk proseshapus.php dapat dilihat dibawah ini. <style> body { font-family: Verdana; font-size: 10pt } td {font-family: Verdana; font-size=10pt}

Web Database

---

Modul Mata Kuliah E-Commerce – Hal. 66 0) echo "Data Telah Dihapus!. Congratulation"; else echo "Tidak ada data yang dihapus"; mysql_close($link); ?>

| Awal | Lihat Data | Tambah Data | Pencarian Data | Hapus Lagi

Tampilan ketika proses penghapusan telah dilakukan dapat dilihat pada gambar di bawah ini.

Modul Mata Kuliah E-Commerce – Hal. 67

5. Pengeditan data Untuk pengeditan data, langkah pertama hapus menampilkan dulu form pemilihan kode barang yang akan diedit. Langkah ini mirip dengan langkah pembuatan form pemilihan kode barang yang akan dihapus. Script php untuk form ini mirip dengan scrip php untuk penghapusan data. Bedanya adalah file action-nya harus ke file yang didalamnya terdapat script untuk pengeditan data. Tampilan form pemilihan kode barang.

Script untuk form pemilihan kode barang yang akan diedit. <style> body {font-family: Verdana; font-size: 10pt } td {font -family: Verdana; font-size: 10pt }

Web Database

---

PENGEDITAN DATA

---

Kode Barang	<select name=ekode> Modul Mata Kuliah E-Commerce – Hal. 68 $data[0] | $data[1] "; } mysql_close($link); ?>

---

| Awal | Lihat Data | Tambah Data | Pencarian Data |

Simpan file ini dengan nama editdata.php dan jangan lupa membuat link dari file index.php ke file ini. Setelah file ini selesai maka kalau user menekan tombol Edit, maka browser harus menampilkan suatu form untuk tempat pengeditan data (mirip dengan penambahan data), bedanya dari penambahan data adalah field-field tempat pengisian data harus sudah memiliki isi sesuai isi asalnya. Selain itu kita juga harus mempunyai sebuah field yang tidak boleh berubah dan tersembunyi sebagai kode asal sebelum kode tersebut mengalami perubahan (sebagai pengenal untuk update). Untuk membuat field tersembunyi ini, perintah html yang diperlukan adalah : Action file dari editdata.php adalah tampilformedit.php. file ini akan menampilkan suatu form pengeditan data. Tampilan form pengeditan data dapat dilihat pada gambar dibawah ini.

Modul Mata Kuliah E-Commerce – Hal. 69

Scriptnya dapat dilihat di halaman berikutnya. <style> body {font-family: Verdana; font-size: 10pt } td {font -family: Verdana; font-size: 10pt }

Web Database

---

PENGEDITAN DATA BARANG

Modul Mata Kuliah E-Commerce – Hal. 70

---

Kode Barang
Nama Barang
Tanggal	<select size=1 name=etanggal> $i"; else echo "$i"; ?> <select size="1" name="ebulan"> $i"; else echo "$i"; ?>
Harga
Stok

---

| Awal | Lihat Data |

---

Simpan file ini dengan nama file tampilformedit.php. Jika kita menekan tombol Simpan, maka kita memerlukan suatu file lagi sebagai file action yang berguna untuk melakukan pengupdatean data dalam contoh ini nama file yang digunakan adalah prosesupdate.php . Script untuk prosesupdate.php adalah : Modul Mata Kuliah E-Commerce – Hal. 71

<style> body { font-family: Verdana; font-size: 10pt } td {font-family: Verdana; font-size=10pt}

Web Database

---

Ulang"; mysql_close($link); ?>

| Kembali ke awal| Tampil Data | | Tambah Lagi |

Script diatas akan menampilkan tampilan berikut jika proses pengeditan data telah sukses.

Modul Mata Kuliah E-Commerce – Hal. 72

6. Penambahan stock (pembelian) Untuk penambahan stok barang (pembelian barang), maka kita membutuhkan suatu form untuk melakukan pemilihan barang apa yang baru dibeli dan berapa buahkah banyaknya pembelian yang akan ditambahkan ke stok. Contoh formnya dapat dilihat seperti berikut :

Script PHP untuk menampilkan form diatas adalah sebagai berikut : <style> body {font-family: Verdana; font-size: 10pt } td {font -family: Verdana; font-size: 10pt }

Web Database

---

PEMBELIAN BARANG
(TAMBAH STOK)

---

Kode Barang	<select name=ekode> Modul Mata Kuliah E-Commerce – Hal. 73 $data[0] | $data[1] "; } mysql_close($link); ?>
Quantity Beli

---

| Awal | Lihat Data | Tambah Data | Pencarian Data |

Simpan file ini dengan nama tambahstok.php, dan jangan lupa membuat link dari index.php ke file tersebut pada bagian Penambahan Stock (Pembelian). File action yang akan dilakukan ketika user menekan tombol Tambahkan adalah prosestambahstok.php. Script PHP untuk prosestambahstok.php adalah : <style> body { font-family: Verdana; font-size: 10pt } td {font-family: Verdana; font-size=10pt}

Web Database

---

Modul Mata Kuliah E-Commerce – Hal. 74 if ($banyak) echo "Stock Baru Telah Ditambahkan!. Congratulation"; else echo "Data tidak bisa diupdate. Mungkin ada kesalahan pengisian data. Ulang"; mysql_close($link); ?>

| Kembali ke awal| Tampil Data | | Tambah Lagi |

Tampilan yang akan muncul jika proses penambahan stok telah sukses dapat dilihat pada gambar di bawah ini.

Dan Jika proses penambahan stok tidak sukses, misalkan karena salah pengisian quantity beli, maka browser akan menghasilkan tampilan seperti dibawah ini.

Modul Mata Kuliah E-Commerce – Hal. 75

7. Pengurangan stock (penjualan) Proses pengurangan stock (penjualan) prinsipnya sama dengan penambahan stock, perbedaannya hanya terdapat pada perintah SQL update-nya saja. Kalau untuk penambahan data, field stock ditambah dengan quantity beli, sedangkan untuk pengurangan stock, field stock dikurangi dengan quantity jualnya. Contoh formnya dapat dilihat seperti berikut :

Script PHP untuk menampilkan form diatas adalah sebagai berikut : <style> body {font-family: Verdana; font-size: 10pt } td {font-family: Verdana; font-size: 10pt }

Web Database

---

PENJUALAN BARANG
(PENGURANGAN STOK)

---

Modul Mata Kuliah E-Commerce – Hal. 76

Kode Barang	<select name=ekode> $data[0] | $data[1] "; } mysql_close($link); ?>
Quantity Jual

---

| Awal | Lihat Data | Tambah Data | Pencarian Data |

Simpan file ini dengan nama kurangstok.php, dan jangan lupa membuat link dari index.php ke file tersebut pada bagian Pengurangan Stock (Penjualan). File action yang akan dilakukan ketika user menekan tombol Kurangkan adalah proseskurangstok.php. Script PHP untuk proseskurangstok.php adalah : <style> body { font-family: Verdana; font-size: 10pt } td {font-family: Verdana; font-size=10pt}

Web Database

---

Modul Mata Kuliah E-Commerce – Hal. 77 $link=mysql_connect("localhost","",""); $db=mysql_select_db("Latihan",$link); $query="update Barang set stok=stok-$eqtyjual where kode='$ekode'"; $hasil=mysql_query($query,$link); $banyak=mysql_affected_rows($link); if ($banyak>0) echo "Stock Baru Telah Dikurangkan!. Congratulation"; else echo "Data tidak bisa diupdate. Mungkin ada kesalahan pengisian data. Ulang"; mysql_close($link); ?>

| Kembali ke awal| Tampil Data | | Tambah Lagi |

Tampilan yang akan muncul jika proses pengurangan stok telah sukses dapat dilihat pada gambar di bawah ini.

Dan jika proses pengurangan stok tidak sukses, misalkan karena salah pengisian quantity beli, maka browser akan menghasilkan tampilan seperti dibawah ini.

Modul Mata Kuliah E-Commerce – Hal. 78