BAB VI PENANGANAN FRONT END DENGAN DATABASE
BAB VI
PENANGANAN FRONT END DENGAN DATABASE
6.1. Tujuan Instruksional Umum
Mahasiswa bisa memahami dasar penanganan front end dengan database
6.2. Tujuan Instruksional Khusus
1. Mahasiswa bisa memahami dasar pembuatan front end untuk transaksi tokon online dengan manajemen tambah, update dan hapus pembelian.
6.3. Uraian Materi
6.3.1. Desain database dan tabel
Tabel toko online yang akan didesain adalah sbb. Pada pertemuan sebelumnya sudah dibuat database dbtoko dan tabel produk , tabel kategori dan table modul.
Tambahkan tabel orders, table orders_detail dan table orders_temp dengan struktur sbb : Tabel Orders
(2)
Tabel Orders_detail
Tabel Orders_temp
- Buatlah folder baru dengan nama bisnisHP.
- Copy seluruh file dan folder adminTOKO ke dalam folder bisnisHP yang baru dibuat - Copy folder foto_produk dan images ke dalam folder bisnisHP
- Buatlah file PHP baru dengan nama media1.php Dn simpan pada folder bisnisHP. Dan ketiklah coding berikut ini:
(3)
6.3.2. Pembuatan Halaman front end
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
6.3.3. Pengambilan data Produk
1. Buka file dataproduk.sql pada notepad++.
2. Lakukan select ALL dan Copy (CTRL+A dan CTRL+C)
3. Masuk ke PHPmyadmin, dan buka tabel produk pada database dbHP. 4. Klik tab SQL
5. Paste isi dataproduk.sql pada tab SQL di tabel produk
6. Lalu KLIK GO
7. Jika berhasil maka tabel produk sudah berisi data-data handphone.
8. Buatlah file php dengan nama koneksi.php untuk menghubungkan ke server localhost, dan database dbHP. Dan simpan pada folder bisnisHP
(15)
9. Buatlah file php baru dengan nama content.php 10.Ketiklah coding berikut ini :
(16)
Kemudian jalankan file media.php pada browser
(17)
1. Buatlah sebuah fungsi dengan nama format_rupiah.php dan simpan pada folder bisnisHP dengan coding sbb:
2. Buatlah sebuah fungsi dengan nama library.php untuk merubah tanggal menjadi format tanggal Indonesia pada folder bisnisHP
3. Buatlah coding php dengan nama beli.php
Saat tombol beli diklik, maka php akan membuat dokumen pembelian sementara di table order_temp. Sehingga pada tombol beli di file content.php page=home harus ditambahkan dengan perintah dalam petunjuk kotak
(18)
Ketiklah Coding beli.php sbb :
Pada baris ke-17, jika belum pernah ada status pembelian dari orang yang sama dan id produk yang tidak sama, maka table orders_temp akan berisi data sbb:
(19)
Perintah pada baris 26 pada file beli.php, akan mengarahkan ke file media1.php dan mengirimkan name=page dengan value = keranjang pada URL.
Akibat dari perintah pada baris 26, maka pada file content.php (include “content.php” terdapat di dalam baris perintah file media1.php) harus ditambahkan dengan perintah sbb :
(20)
Perintah pada baris 33 diatas, mewajibkan kita untuk menyiapkan file keranjang.php. sehingga tampilan yang diharapkan adalah sbb :
Sebelum membuat file keranjang.php, maka buatlah sebuah fungsi dengan nama file fungsi_rupiah.php. dengan coding sbb :
(21)
(22)
Jika tampilan pada browser tidak sesuai dengan tampilan diatas, maka buka style.CSS dan tambahkan perintah berikut :
(23)
Pada gambar diatas, input text area, harus dapat diupdate. Jumlah yang akan dibeli konsumen harus dapat diupdate.
Untuk itu buka kembali file keranjang.php dan tambahkan perintah berikut ini :
Karena pada baris 10, action yang dieksekusi harus mengarahkan pada file beli.php, dan saat itu juga mengirimkan name= bagian value=keranjang serta name=aksi dengan value=update, maka pada file beli.php harus ditambahkan perintah sbb :
Jalankan perintah pada browser dan lakukan perubahan pada jumlah yang dibeli. Uji pada saat setelah dirubah nilai quantitynya dengan menekan tombol ENTER pada input type TEXT dan Tombol Update.
(24)
6.3.4.2. Hapus Data Belanja
Supaya tombol Hapus dapat berfungsi, maka rubahlah printah pada file keranjang.php menjadi sbb :
LATIHAN !!!!!
Karena pada baris 31, action yang dieksekusi harus mengarahkan pada file beli.php, dan saat itu juga mengirimkan name= bagian value=keranjang serta name=aksi dengan value=hapus, juga name = id dengan value=$r[id_orders_temp] maka pada file beli.php harus ditambahkan perintah
(25)
6.3.4.3. Proses konfirmasi tagihan belanja
Setelah proses belanja telah selesai, maka berikutnya adalah proses pembuatan laporan tagihan.
(26)
Persiapkan table kota untuk perhitungan ongkos kirim
Inputkan datanya melalui phpmyadmin sbb:
(27)
Tambahkan pada file content.php dengan coding sbb :
Jalankan pada browser, dan lihat hasilnya. Cobalah untuk mengklik tombol proses.
(28)
Tampilan yang diharapkan adaah sbb :
Pada tombol Proses, diatas terdapat didalam form. Dimana action harus diisi. Buka kembali file content.php, kemudian ganti action=# menjadi :
Karena pada baris 40, action mengirimkan name= page dengan value =simpantransaksi, maka pada file content.php harus ditambahkan coding sbb:
(29)
(30)
(31)
Jalankan pada browser.
6.4. Rangkuman 6.5.Latihan
6.6. Daftar Pustaka
1. Jayan, CSS Untuk Orang Awam, Maxicom, 2002
2. Hakim lukmanul, Membongkar Trik Rahasia Para master PHP, Lokomedia, 2008 3. PENS ITS, Modul Pemrograman WEB, Surabaya 2007
4. RC, Gunawan, Modul Desain WEB Poliban, Banjarmasin, 2011 5. http://www.w3.org/
(32)
(1)
Tambahkan pada file content.php dengan coding sbb :
Jalankan pada browser, dan lihat hasilnya. Cobalah untuk mengklik tombol proses.
(2)
Tampilan yang diharapkan adaah sbb :
Pada tombol Proses, diatas terdapat didalam form. Dimana action harus diisi. Buka kembali file content.php, kemudian ganti action=# menjadi :
Karena pada baris 40, action mengirimkan name= page dengan value =simpantransaksi, maka pada file content.php harus ditambahkan coding sbb:
(3)
(4)
(5)
Jalankan pada browser.
6.4. Rangkuman 6.5.Latihan
6.6. Daftar Pustaka
1. Jayan, CSS Untuk Orang Awam, Maxicom, 2002
2. Hakim lukmanul, Membongkar Trik Rahasia Para master PHP, Lokomedia, 2008 3. PENS ITS, Modul Pemrograman WEB, Surabaya 2007
4. RC, Gunawan, Modul Desain WEB Poliban, Banjarmasin, 2011
5. http://www.w3.org/
(6)