際際滷

際際滷Share a Scribd company logo
CandraLab Coding Studio http://www.candra.web.id
12
eCommerce
dengan PHP MySQL
Candra Adi Putra (candraadiputra@gmail.com)
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
2
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
3
Table of Contents
BAB I INSTALASI DAN DASAR PHP .......................................................................................................5
Konsep Apache,PHP, Mysql............................................................................................................5
Tool Yang Dipakai ...........................................................................................................................5
Appserver.......................................................................................................................................5
Notepad++..................................................................................................................................5
Aptana IDE..................................................................................................................................6
Google Chrome...........................................................................................................................6
MySQL Workbench......................................................................................................................6
Memahami Konfigurasi PHP ............................................................................................................7
Membuat Kerangka dasar website...................................................................................................7
Konsep GET Dan POST.................................................................................................................7
Teknik Include Page.....................................................................................................................7
BAB II Perancangan Database, Login Dan Validasi Form......................................................................10
Perancangan Database..................................................................................................................10
Login............................................................................................................................................11
Tabel pengelola.........................................................................................................................11
Form Login................................................................................................................................11
Cek Login dan redirect...............................................................................................................12
Form Validasi ...................................................................................................................................13
Mengenal Library Validasi Javascript...........................................................................................13
Teknik Validasi Berbagai Macam Input........................................................................................14
BAB III CRUD.....................................................................................................................................17
Insert Data ...................................................................................................................................17
Tampil Data..................................................................................................................................19
Update Data.................................................................................................................................22
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
4
Delete Data..................................................................................................................................24
BAB IV Membuat Katalog Produk.......................................................................................................25
Menu Kategori Produk Dinamis .....................................................................................................25
Daftar Produk Dinamis .................................................................................................................26
BAB V Transaksi Dan Laporan............................................................................................................29
Membuat Cart Belanja..................................................................................................................29
Tampilan chart..............................................................................................................................36
Membuat Laporan Penjualan.........................................................................................................36
Tampilan laporan buku..................................................................................................................38
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
5
BAB I INSTALASI DAN DASAR PHP
Konsep Apache, PHP, MySQL
Apache adalahwebserveryangbertugasuntukmemberikanhalamanwebsiteyangdimintaoleh
Browser
PHP adalahbahasa pemrogramanwebuntukmembuatwebsite yangdinamis
MySQL adalahdatabase serveryangdipakai untukmenyimpandatatermasukdataadmin,databarang
data transaksi dansebagainya
Tool Yang Dipakai
Appserver
Appserveradalahbundlesoftware yangterdiridari beberapa
komponen,diantaranyaadalahMySQL,PHP,Apache danPHPMyAdmin.
DenganmenggunakanAppservkitatidakperlumenginstall programsatu
persatu.Dari semuaprogram diatas,programyang palingNampak
adalahPHPMyAdmin.Aplikasi ini adalahtool berbasiswebuntukmengolahdataMySQL. Andabisa
mendapatkannyadi http://www.appservnetwork.com/
Notepad++
Notepad++adalahstandar programmereditor.Sebenarnyaselain
notepad++,jugamasihbanyakeditoryanglain.Andabolehsaja
menggunakan sembarangeditor,namundisarankaneditoryangdipakai
adalaheditoryangmempunyai 3fiturutama yaituSyntax Higlighting,Code
foldingdanLine numbering. Notepad++dipakai untukeditingfilesecaracepat(misal Bugfix) atau
mengeditsatuduabarisyang error.
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
6
AptanaIDE
AptanaIDE adalah IDE untukmembuatprogramberbasisWeb. anda bolehsajamemakai
DreamWeaver,namunsaya sendiri memilihAptanaIDEmengingatIDEini besifatopensource,
mampubejalandi banyakPlatform(Windows,Linux,Mac) dan GRATIS.Namunhal yang paling
pentingdenganadanyaide adalahadanyaprojectmanajement.
Figure 1 Logo Aptana IDE
Kelebihanutamadari Aptanadi bandingdreamweaverataueditornotepad++ adalah
kemampuannyauntukmemformatcode sekaligusmengecekkesalahansyntax langsungdi editor.
GoogleChrome
Google chrome di pakai untuk mentestingwebsite.Bolehsajamenggunakanbrowserlain,justru
yang disarankan,kitamencobadi setiapbrowseruntukmemastikantampilandanaplikasi yangkita
buat berjalandenganbenar.NamunGoogle Chrome mempunyai kelebihankarenasederhanadan
adanyafiturDevelopertool yangcanggih( penjelasanlebihlanjutdi praktik).
MySQLWorkbench
Hal yangpalingpentingsaatmendesaindatabase adalahmembuat
relasi antartable.Andabisasaja membuatmenggunakantool
perancanganbiasa.MySQL workbenchlebihdari itu,diabisa
membuattable besertarelasinyadansecaraAutomagicdiaakan
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
7
membuatSQL scripnya.MySQLworkbenchjugabisamembuatdiagramrelasi table langsungdari
MySQL script (reverse engine) .
Memahami Konfigurasi PHP
SebelumandamembautprogrammenggunakanPHP,andaharusfahamdua hal yang palingutama,dua
hal tersebutadalahshort_open_tagdanerror_reporting. Duahal ini dibahasdi kelas.
Membuat Kerangka dasar website
KonsepGET DanPOST
GET dan POSTadalahdua teknikmengirimdatake server,namunapasihperbedaannya? Buatlah
program sederhanasepertidibawahini untukmengetahui.
Code 1.1 konverter.php
<form action="konverter.php" >
<input type="text" name="dollar">
<input type="submit" value="konversi">
</form>
<?php
$dollar=$_GET['dollar'];
$rupiah=$dollar* 8500;
echo $dollar." US dollar =".$rupiah;
?>
Sekarangubahlahgetmenjadi POST!
TeknikIncludePage
Untuk membuatsebuahhalamanwebsite yangkomplek.Adabeberapateknikagarefektif dalamhal
desaindansource code.Teknikyangpalingseringdi pakai adalahteknikinclude page.Codenya
utamanyaadalahsbb:
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
8
Code.1.2 snippetinclude page
<?php
/* kode untuk meload halaman yang berbeda*/
if(isset($_GET['pg'])){
$page=$_GET['pg'].".php";
include($page);
}else{
include('home.php');
}
?>
Gambar 1.1 Tampilan layout website
Untuk membuatlinkke home dancara pesan, minimal sepertiini di code 1.2 kemudianbuatlahfile
home.phpdncara pesan.php dalamformathtml biasa
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
9
Code 1.3 home.php
<!home.php
<h1>Selamat datang di toko buku murah</h1>
<P>
disini anda bisa membeli dan memesan buku dengan mudah, anda
tinggal klik, maka buku sampai di tempat anda.
tidak perlu lagi jauh jauh ke toko buku
</p>
Sedangkanhalamancontact.phpsbb:
Code 1.4 contact.php
<h1>Alamat kami</h1>
<p>
Jalan Lurus no 5 Yogyakarta
<br> Telp (0274) 123456
<br> Email:bukumurah@gmail.com
</p>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
10
BAB II Perancangan Database, Login Dan Validasi Form
Perancangan Database
Sebelumlebihjauhmembahascode,berikutini adalahdiagramdatabase untuksystemecommerce
yang akankita buat.
Gambar 2.1 Diagram Relasi tabel
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
11
Login
Untuk membuathalamanlogin,3hal utama yang perludi lakukanadalahsbb:
1. Membuattable pengelola
2. Membuathalamanform login
3. Mengecekuserdi database
4. Jikasukses,menyimpanusername kedalamsession
5. Redirectuserke halaman admin.
Tabel pengelola
Form Login
Code 2.1 formlogin
!--table pengolahan data nanti disini-->
<h1> Login page</h1>
<form id="form1" name="form1" method="post"
action="pengelola_check_login.php">
<table align="center">
<tr>
<td >username*</td>
<td ><input name="username" type="text" id="username" /></td>
</tr>
<tr>
<td>password*</td>
<td><input name="password" type="password" id="password" /></td>
<tr>
<td colspan="3" align="right">
<input type="submit" name="Submit" value="Submit" />
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
12
<input type="reset" name="" value="Reset" /></td>
</tr>
CekLogindan redirect
Code 2. 2 cek_login
<?php
session_start();
session_register('username');
//file konfigurasi
include ('inc/config.php');
$username = $_POST['username'];
$password = $_POST['password'];
$password = md5($password);
$sql = "select * from pengelola where username='$username'
and password='$password' ";
$userquery = mysql_query($sql) or die(mysql_error());
// $valid=false;
if (mysql_num_rows($userquery) == 1) {
header('location:index.php');
$valid = true;
$_SESSION['username'] = $username;
}
if ($valid == false) {
header("Location:form_login.php?status=1");
}
?>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
13
Janganlupa buatfile config.phpyangberisi konfigurasidatabase
Code 2.3 konfigurasi database
<?php
$host = "localhost";
// Host name
$username = "root";
// Mysql username
$password = "root";
// Mysql password
$db_name = "bookdb";
// Database name
// Connect to server and select database.
mysql_connect("$host", "$username", "$password") or die("cannot
connect" . mysql_error());
mysql_select_db("$db_name") or die(mysql_error());
?>
Form Validasi
Mengenal LibraryValidasi Javascript
Untuk memvalidasi form,adaberbagai macamteknik.Namunsecaraumumdibagi dua,yaituserverside
checkdan clientside check. Modul ini hanyamembahasscript validasi menggunakanscriptdari
http://www.javascript-coder.com/html-form/javascript-form-validation.phtml.
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
14
TeknikValidasi Berbagai MacamInput
Scriptyang disediakandiatassudahmencakupberbagai macamvalidasi diantaranyaadalah
Validation Usage
required or
req
Harus di isi
maxlen=??? or
maxlength=???
Validasi input dengan maxmal karakter tertentu
minlen=??? or
minlength=???
Validasi input dengan minimal karakter tertentu
alphanumeric or
alnum
Input harus alphanumeric (huruf dan angka tanpa spasi)
alphanumeric_space
alnum_s
Input harus alphanumeric (huruf dan angka plus spasi)
num
numeric
Input harus angka
alpha
alphabetic
Input harus huruf atau symbol
alpha_s
alphabetic_space Input harus huruf dan atau spasi
email Validasi email
lt=???
lessthan=???
Lebih kecil dari
gt=???
greaterthan=???
Lebih besar dari
Untuk menggunakanteknikvalidasi ini,pertamatambahkan code dibawahini
Code 2.3 scriptvalidasi
<script src=/slideshow/e-commerce-dengan-php-mysql-48077643/48077643/"js/validjs.js"></script>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
15
Dan letakansciptvalidasi persisdibawahform
Code 2.4 cara memvalidasi form
<script language="JavaScript" type="text/javascript"
xml:space="preserve">//<![CDATA[
var frmvalidator = new Validator("form1");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("username", "req", "Username masih kosong
");
frmvalidator.addValidation("password", "req", "Password masih kosong
");
//]]></script>
Langkah terakhir,letakandimana pesanerroringinditampilkan
Code 2.5 cara menampilkanoutputvalidasi
<div id="form1_errorloc" style="color:red">
</div>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
16
Berikutini adalahtampilankalaulogingagal
Gambar 3 Validasi form menggunakan javascript
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
17
BAB III CRUD
Crud adalahprosespengelohandatastandaryangterdiri dari 4 operasi dasaryaitucreate,retrieve,
update dandelete.Dalambabini,kitahanyaakan membahastable pengelola.Untuksetiaptable,kita
membutuhkan5file,filefileituadalah
1. Pengelola_view
2. Pengelola_form_add
3. Pengelola_add
4. Pengelola_form_edit
5. Pengelola_edit
Biasakanmenggunakanformat <namatabel>_action.php.Penamaanseperti ini akan
memudahkanketikananti terjadierrordanlebihmudahdipahami.
Insert Data
Code 3.1 pengelola_Form_add
<form id="form1" name="form1" method="post"
action="pengelola_add.php">
<td>
<table>
<tr>
<td width="120">username</td>
<td width="350">
<input name="username" type="text" id="username"
size="40" />
</td>
</tr>
<tr>
<td width="120">password</td>
<td width="350">
<input name="password" type="password" id="password"
size="40" />
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" name="tambahPengelola"
value="Tambah" />
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
18
<input type="reset" name="resetbtn" value="Reset" />
</td>
</tr>
<tr>
<td colspan='2'><div id="form1_errorloc"
style="color:red"></div></td>
</tr>
</table></td>
</form>
<script language="javaScript" type="text/javascript"
xml:space="preserve">
//You should create the validator only after the definition of
the HTML form
var frmvalidator = new Validator("form1");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("username", "req", "username masih
kosong ");
frmvalidator.addValidation("password", "req", "password masih
kosong ");
frmvalidator.addValidation("username", "maxlen=20", " username
tidak boleh lebih dari 20 ");
frmvalidator.addValidation("password", "alnum_s", "password
tidak boleh ada spasi ");
</script>
Code 3.2 pengelola_add
<?php
include ('inc/config.php');
//data dari user
if (isset($_POST['tambahPengelola'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$password = md5($password);
$sql = "INSERT INTO pengelola(username,password)
VALUES('$username', '$password')";
$result = mysql_query($sql) or die(mysql_error());
//check if query successful
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
19
if ($result) {
header('location:index.php?page=pengelola_view&status=0');
} else {
header('location:index.php?page=pengelola_view&status=1');
}
mysql_close();
}
?>
Tampilandari formtambah pengelola
Gambar 4 halaman tambah pengelola
Tampil Data
Code 3.3 pengelola_view
<?php
include ('inc/config.php');
?>
<h1> Tabel pengelola</h1>
<table width="600px" border=0>
<tr style="background-color:#F79307">
<td width="200px">Username</td><td>Password</td><td
width="100px">Operasi</td>
</tr>
<?php
/*
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
20
* kode untuk menghapus data
*/
if(isset($_GET['del'])){
$username=$_GET['id'];
$hapus ="delete from pengelola where username='$username'";
mysql_query($hapus);
}
$sql="";
if(isset($_POST['btnCari'])){
$cari=$_POST['cari'];
//ambil data dari table admin
$sql="SELECT * FROM pengelola where username like '%$cari%'";
}else{
$sql="SELECT * FROM pengelola";
}
$result=mysql_query($sql) or die(mysql_error());
//proses menampilkan data
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><? echo $rows['username'];?></td>
<td><? echo $rows['password'];?></td>
<td><a href="index.php?page=pengelola_form_edit&id=<? echo
$rows['username']?>"> <img src=/slideshow/e-commerce-dengan-php-mysql-48077643/48077643/"image/b_edit.png"></a><a
href="index.php?page=pengelola_view&del=true&id=<? echo
$rows['username']?>" onclick="return askUser()";> <img
src="image/b_drop.png"></a></td>
</tr>
<?
}
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
21
//tutup koneksi
?>
<tr>
<td align=right colspan='2'><?php
if (isset($_GET['status'])) {
if ($_GET['status'] == 0) {
echo " <div style='color:blue'>Operasi data
berhasil</div>";
} else {
echo "operasi gagal";
}
}
?></td>
<td align=right><a
href="index.php?page=pengelola_form_add"> <img src=/slideshow/e-commerce-dengan-php-mysql-48077643/48077643/"image/add.jpg">
Add</a></td>
</tr>
<tr></tr>
</table>
<?
mysql_close();
//close database
//tampilan siapa yang pengelola
?>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
22
Tampilandari pengelolaview
Gambar 5 Tampilan tabel pengelola
Update Data
Code 3.4 pengelola_form_edit
<?php
include ('inc/config.php');
$id = $_GET['id'];
//ambil data dari table feedback
$sql = "select * from pengelola where username='$id' ";
$result = mysql_query($sql) or die(mysql_error());
?>
<h2>Change password</h2>
<table>
<form id="form1" name="form1" method="post"
action="pengelola_edit.php">
<?
//proses menampilkan data
while($rows=mysql_fetch_array($result)){
?>
<td width="120">username</td>
<td width="350"><? echo $rows['username'];?></td>
<input type="hidden" id="username" name="username" value=<?
echo $rows['username'];?> />
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
23
<!--<input type="text" id="username" name="username"
value=<? echo $rows['username'];?> /> --></td>
</tr>
<tr>
<td width="120">password</td>
<td width="350">
<input name="password" type="password" id="password"
size="40" />
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" name="submitUser" value="Submit"
/>
<input type="reset" name="resetbtn" value="Reset" />
</td>
</tr>
<?
//loop while
}
?>
</form>
</table>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
24
Code 3.5 Code untukmengupdate data
<?php
include ('inc/config.php');
//data dari user
if (isset($_POST['submitUser'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$password = md5($password);
$sql = " update pengelola set password='$password' where
username='$username'";
//echo $sql;
$result = mysql_query($sql) or die(mysql_error());
//check if query successful
if ($result) {
header('location:index.php?page=pengelola_view&status=0');
} else {
header('location:index.php?page=pengelola_view&status=1');
}
mysql_close();
}
?>
Delete Data
Code 3.6
if(isset($_GET['del'])){
$username=$_GET['id'];
$hapus ="delete from pengelola where username='$username'";
mysql_query($hapus);
}
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
25
BAB IV Membuat Katalog Produk
Menu Kategori Produk Dinamis
Bab ini langsungmembahashalamanwebsite di depan, untukhalamanadminkategori,andabuat
sendiri.Berikutini adalahdatadi halamanadminuntuktable kategori
Gambar 6 Kategori produk
Kategori produkdalamhal ini adalahkategori bukudegeneratesecaradinamismenggunakankode
sebagai berikut
Code 4.1 kategori.php
<h1> Pilih Kategori buku</h1>
<ul>
<?php
include('backsite/inc/config.php');
$kat="select kd_kategori,nama_kategori from kategori";
$hasil=mysql_query($kat) or die(mysql_error());
while($get_data=mysql_fetch_array($hasil)){
?><li><a
href="index.php?page=detail&id=<?=$get_data['kd_kategori']?>">
<? echo $get_data['nama_kategori']?>
<!--(<?=$get_data['jumlah']?>)-->
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
26
</a></li>
<?
}
?>
</ul>
Tampilankategori produkdi website
Gambar 7 Kategori buku
Daftar Produk Dinamis
Untuk meleihatdetail produk,andaharusmengklikkategori yangada.Berikutini adalahkode untuk
menampilkanproduk
Code 4.2 detail produk
<h2> Pilih Buku yang mau dibeli </h2>
<?php
$kd_kategori=$_GET['id'];
include('backsite/inc/config.php');
$kat="select * from buku where kd_kategori='$kd_kategori'";
$hasil=mysql_query($kat) or die(mysql_error());
while($get_data=mysql_fetch_array($hasil)){
?>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
27
<div class="meta floatLeft width25">
<a href="index.html" title="View Project" class="thumb">
<img src=/slideshow/e-commerce-dengan-php-mysql-48077643/48077643/"cover/<?=$get_data[& width='150px'
heigth='150px'> </a>
<dl>
<dt>
<span>Harga</span>
</dt>
<dd>
<?=$get_data['harga']
?>
</dd>
<dt>
<span>Pengarang</span>
</dt>
<dd>
<?=$get_data['pengarang']
?>
</dd>
</dl>
</div>
<!-- .text: content of post -->
<div class="meta floatRight width50">
<a name="inspiration"></a>
<h1><?=$get_data['judul']
?></h1>
<h2>Deskripsi </h2>
<p>
<?=$get_data['deskripsi'];?>
</p>
<a
href="index.php?page=cart&action=add&id=<?=$get_data['kd_buku']?>">Add
to cart</a>
</div>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
28
<div style=clear:both></div>
; <?
}
?>
Berikutini adalahtampilandari halamanprodukdetail
Gambar 8 Contoh output detail produk
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
29
BAB V Transaksi Dan Laporan
Membuat Cart Belanja
Code 5.1 keranjangbelanja
<?
// Include MySQL class
require_once ('inc/mysql.class.php');
// Include database connection
require_once ('inc/global.inc.php');
// Include functions
require_once ('inc/functions.inc.php');
// Start the session
session_start();
// Process actions
$cart = $_SESSION['cart'];
$action = $_GET['action'];
switch ($action) {
case 'add' :
if ($cart) {
$cart .= ',' . $_GET['id'];
} else {
$cart = $_GET['id'];
}
break;
case 'delete' :
if ($cart) {
$items = explode(',', $cart);
$newcart = '';
foreach ($items as $item) {
if ($_GET['id'] != $item) {
if ($newcart != '') {
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
30
$newcart .= ',' . $item;
} else {
$newcart = $item;
}
}
}
$cart = $newcart;
}
break;
case 'update' :
if ($cart) {
$newcart = '';
foreach ($_POST as $key => $value) {
if (stristr($key, 'qty')) {
$id = str_replace('qty', '', $key);
$items = ($newcart != '') ? explode(',',
$newcart) : explode(',', $cart);
$newcart = '';
foreach ($items as $item) {
if ($id != $item) {
if ($newcart != '') {
$newcart .= ',' . $item;
} else {
$newcart = $item;
}
}
}
for ($i = 1; $i <= $value; $i++) {
if ($newcart != '') {
$newcart .= ',' . $id;
} else {
$newcart = $id;
}
}
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
31
}
}
}
$cart = $newcart;
break;
}
$_SESSION['cart'] = $cart;
?>
<div id="shoppingcart">
<h1>Keranjang belanja anda</h1>
<?php
echo writeShoppingCart();
?>
</div>
<div id="contents">
<h3>Cek keranjang belanja</h3>
<?php
echo showCart();
?>
Code 5.2 Kode untukformdata pembeli
<h1>Form Pengiriman barang</h1>
<a
href="index.php?page=cart&action=finish&kirim=true">Bungkus</a>
<?php
if(isset($_GET['kirim'])){
?>
<form id="form1" name="form1" method="post"
action="pemesan_add.php">
<td>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
32
<table>
<!--<tr>
<td width="120">kd_pemesan</td>
<td width="350"><input name="kd_pemesan" type="text"
id="kd_pemesan" size="40" /></td>
</tr>-->
<tr>
<td width="120">Nama</td>
<td width="350">
<input name="Nama" type="Nama" id="Nama"
size="40" />
</td>
</tr>
<tr>
<td width="120">Alamat</td>
<td width="350">
<input name="Alamat" type="Alamat" id="Alamat"
size="40" />
</td>
</tr>
<tr>
<td width="120">kd_pos</td>
<td width="350">
<input name="kd_pos" type="kd_pos" id="kd_pos"
size="40" />
</td>
</tr>
<tr>
<td width="120">No_telp</td>
<td width="350">
<input name="No_telp" type="No_telp" id="No_telp"
size="40" />
</td>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
33
</tr>
<tr>
<td width="120">Email</td>
<td width="350">
<input name="Email" type="Email" id="Email"
size="40" />
</td>
</tr>
<?php?>
<tr>
<td width="120">Kota</td>
<td width="350">
<select name='id_kota' id='id_kota'>
<?
$get_kota=mysql_query('select * from biaya_kirim order by nama_kota');
while ($rows=mysql_fetch_array($get_kota)){
?>
<option
value="<?=$rows['id_kota']?>"><?=$rows['nama_kota']
?></option>
<?
}//end while
?>
</select></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" name="tambah" value="Tambah"
/>
<input type="reset" name="resetbtn" value="Reset"
/>
</td>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
34
</tr>
<tr>
<td colspan='2'><div id="form1_errorloc"
style="color:red"></div></td>
</tr>
</table></td>
</form>
<script language="javaScript" type="text/javascript"
xml:space="preserve">
//You should create the validator only after the definition
of the HTML form
var frmvalidator = new Validator("form1");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("kd_pemesan", "req", "kode
pemesan masih kosong ");
frmvalidator.addValidation("Nama", "req", "nama masih
kosong ");
frmvalidator.addValidation("Alamat", "req", "alamat masih
kosong ");
frmvalidator.addValidation("kd_pos", "req", "kode pos masih
kosong ");
frmvalidator.addValidation("No_telp", "req", "no. telp
masih kosong");
frmvalidator.addValidation("email", "req", "email masih
kosong");
frmvalidator.addValidation("kd_pemesan", "alnum_s ", "kode
pemesan tidak boleh ada spasi ");
frmvalidator.addValidation("Alamat", "minlen=10", "alamat
kurang lengkap ");
frmvalidator.addValidation("kd_pos", "num", "input harus
angka ");
frmvalidator.addValidation("No_telp", "num", "input harus
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
35
angka ");
frmvalidator.addValidation("email", "maxlen=50", "maksimal
panjang email 50 karakter");
</script>
<?
}
?>
</div>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
36
Tampilan chart
Gambar 9 Tampilan keranjang dan form pengiriman barang
Membuat Laporan Penjualan
Berikutini adalahcontohmembuatlaporantable produkbarang.Laporansebenarnyasamadengan
halamanadministrasi data,perbedaannyadi laporantidakadamenudantampilanyangtidakperlu
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
37
Code 2.3 Laporan daftarbuku
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen"
href="style2.css" />
</head>
<body>
<h2 align="center"> Laporan Daftar Buku </h2>
<h1 align="center"> Toko Buku murah </h1>
<p align="center">
jl Lurus no 5 Yogyakarta
</p>
<hr>
<br/>
<?php?>
<table align='center'>
<tr style="background-color:#F79307">
<td>No</td><td>Kd
buku</td><td>Judul</td><td>Pengarang</td>
<td>Harga</td>
</tr>
<?php
include ('inc/config.php');
$sql="SELECT * FROM buku";
$result=mysql_query($sql) or die(mysql_error());
//proses menampilkan data
$no=1;
while($rows=mysql_fetch_array($result)){
?>
<tr> <td><?=$no;?></td>
<td><? echo $rows['kd_buku'];?></td>
<td><? echo $rows['judul'];?></td>
<td><? echo $rows['pengarang'];?></td>
<td><? echo $rows['harga'];?></td>
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
38
</tr>
<?
$no++;
}
?>
</table>
<?mysql_close();
?>
</body>
</html>
Tampilan laporan buku
Gambar 10 laporan daftar Buku
Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id)
39
Program eCommerce diatasmasihperludi kembangkan.Beberapaide untukmengembangkanadalah
sbb:
1. Adanyapendaftaranuser
2. Adanyastokbarang
3. Pencariancatalogproduk
4. Mengembangkankearahmobile commerce denganjQueryMobile
Demikian,semogabermanfaat!

More Related Content

E commerce dengan php mysql

  • 1. CandraLab Coding Studio http://www.candra.web.id 12 eCommerce dengan PHP MySQL Candra Adi Putra (candraadiputra@gmail.com)
  • 3. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 3 Table of Contents BAB I INSTALASI DAN DASAR PHP .......................................................................................................5 Konsep Apache,PHP, Mysql............................................................................................................5 Tool Yang Dipakai ...........................................................................................................................5 Appserver.......................................................................................................................................5 Notepad++..................................................................................................................................5 Aptana IDE..................................................................................................................................6 Google Chrome...........................................................................................................................6 MySQL Workbench......................................................................................................................6 Memahami Konfigurasi PHP ............................................................................................................7 Membuat Kerangka dasar website...................................................................................................7 Konsep GET Dan POST.................................................................................................................7 Teknik Include Page.....................................................................................................................7 BAB II Perancangan Database, Login Dan Validasi Form......................................................................10 Perancangan Database..................................................................................................................10 Login............................................................................................................................................11 Tabel pengelola.........................................................................................................................11 Form Login................................................................................................................................11 Cek Login dan redirect...............................................................................................................12 Form Validasi ...................................................................................................................................13 Mengenal Library Validasi Javascript...........................................................................................13 Teknik Validasi Berbagai Macam Input........................................................................................14 BAB III CRUD.....................................................................................................................................17 Insert Data ...................................................................................................................................17 Tampil Data..................................................................................................................................19 Update Data.................................................................................................................................22
  • 4. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 4 Delete Data..................................................................................................................................24 BAB IV Membuat Katalog Produk.......................................................................................................25 Menu Kategori Produk Dinamis .....................................................................................................25 Daftar Produk Dinamis .................................................................................................................26 BAB V Transaksi Dan Laporan............................................................................................................29 Membuat Cart Belanja..................................................................................................................29 Tampilan chart..............................................................................................................................36 Membuat Laporan Penjualan.........................................................................................................36 Tampilan laporan buku..................................................................................................................38
  • 5. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 5 BAB I INSTALASI DAN DASAR PHP Konsep Apache, PHP, MySQL Apache adalahwebserveryangbertugasuntukmemberikanhalamanwebsiteyangdimintaoleh Browser PHP adalahbahasa pemrogramanwebuntukmembuatwebsite yangdinamis MySQL adalahdatabase serveryangdipakai untukmenyimpandatatermasukdataadmin,databarang data transaksi dansebagainya Tool Yang Dipakai Appserver Appserveradalahbundlesoftware yangterdiridari beberapa komponen,diantaranyaadalahMySQL,PHP,Apache danPHPMyAdmin. DenganmenggunakanAppservkitatidakperlumenginstall programsatu persatu.Dari semuaprogram diatas,programyang palingNampak adalahPHPMyAdmin.Aplikasi ini adalahtool berbasiswebuntukmengolahdataMySQL. Andabisa mendapatkannyadi http://www.appservnetwork.com/ Notepad++ Notepad++adalahstandar programmereditor.Sebenarnyaselain notepad++,jugamasihbanyakeditoryanglain.Andabolehsaja menggunakan sembarangeditor,namundisarankaneditoryangdipakai adalaheditoryangmempunyai 3fiturutama yaituSyntax Higlighting,Code foldingdanLine numbering. Notepad++dipakai untukeditingfilesecaracepat(misal Bugfix) atau mengeditsatuduabarisyang error.
  • 6. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 6 AptanaIDE AptanaIDE adalah IDE untukmembuatprogramberbasisWeb. anda bolehsajamemakai DreamWeaver,namunsaya sendiri memilihAptanaIDEmengingatIDEini besifatopensource, mampubejalandi banyakPlatform(Windows,Linux,Mac) dan GRATIS.Namunhal yang paling pentingdenganadanyaide adalahadanyaprojectmanajement. Figure 1 Logo Aptana IDE Kelebihanutamadari Aptanadi bandingdreamweaverataueditornotepad++ adalah kemampuannyauntukmemformatcode sekaligusmengecekkesalahansyntax langsungdi editor. GoogleChrome Google chrome di pakai untuk mentestingwebsite.Bolehsajamenggunakanbrowserlain,justru yang disarankan,kitamencobadi setiapbrowseruntukmemastikantampilandanaplikasi yangkita buat berjalandenganbenar.NamunGoogle Chrome mempunyai kelebihankarenasederhanadan adanyafiturDevelopertool yangcanggih( penjelasanlebihlanjutdi praktik). MySQLWorkbench Hal yangpalingpentingsaatmendesaindatabase adalahmembuat relasi antartable.Andabisasaja membuatmenggunakantool perancanganbiasa.MySQL workbenchlebihdari itu,diabisa membuattable besertarelasinyadansecaraAutomagicdiaakan
  • 7. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 7 membuatSQL scripnya.MySQLworkbenchjugabisamembuatdiagramrelasi table langsungdari MySQL script (reverse engine) . Memahami Konfigurasi PHP SebelumandamembautprogrammenggunakanPHP,andaharusfahamdua hal yang palingutama,dua hal tersebutadalahshort_open_tagdanerror_reporting. Duahal ini dibahasdi kelas. Membuat Kerangka dasar website KonsepGET DanPOST GET dan POSTadalahdua teknikmengirimdatake server,namunapasihperbedaannya? Buatlah program sederhanasepertidibawahini untukmengetahui. Code 1.1 konverter.php <form action="konverter.php" > <input type="text" name="dollar"> <input type="submit" value="konversi"> </form> <?php $dollar=$_GET['dollar']; $rupiah=$dollar* 8500; echo $dollar." US dollar =".$rupiah; ?> Sekarangubahlahgetmenjadi POST! TeknikIncludePage Untuk membuatsebuahhalamanwebsite yangkomplek.Adabeberapateknikagarefektif dalamhal desaindansource code.Teknikyangpalingseringdi pakai adalahteknikinclude page.Codenya utamanyaadalahsbb:
  • 8. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 8 Code.1.2 snippetinclude page <?php /* kode untuk meload halaman yang berbeda*/ if(isset($_GET['pg'])){ $page=$_GET['pg'].".php"; include($page); }else{ include('home.php'); } ?> Gambar 1.1 Tampilan layout website Untuk membuatlinkke home dancara pesan, minimal sepertiini di code 1.2 kemudianbuatlahfile home.phpdncara pesan.php dalamformathtml biasa
  • 9. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 9 Code 1.3 home.php <!home.php <h1>Selamat datang di toko buku murah</h1> <P> disini anda bisa membeli dan memesan buku dengan mudah, anda tinggal klik, maka buku sampai di tempat anda. tidak perlu lagi jauh jauh ke toko buku </p> Sedangkanhalamancontact.phpsbb: Code 1.4 contact.php <h1>Alamat kami</h1> <p> Jalan Lurus no 5 Yogyakarta <br> Telp (0274) 123456 <br> Email:bukumurah@gmail.com </p>
  • 10. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 10 BAB II Perancangan Database, Login Dan Validasi Form Perancangan Database Sebelumlebihjauhmembahascode,berikutini adalahdiagramdatabase untuksystemecommerce yang akankita buat. Gambar 2.1 Diagram Relasi tabel
  • 11. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 11 Login Untuk membuathalamanlogin,3hal utama yang perludi lakukanadalahsbb: 1. Membuattable pengelola 2. Membuathalamanform login 3. Mengecekuserdi database 4. Jikasukses,menyimpanusername kedalamsession 5. Redirectuserke halaman admin. Tabel pengelola Form Login Code 2.1 formlogin !--table pengolahan data nanti disini--> <h1> Login page</h1> <form id="form1" name="form1" method="post" action="pengelola_check_login.php"> <table align="center"> <tr> <td >username*</td> <td ><input name="username" type="text" id="username" /></td> </tr> <tr> <td>password*</td> <td><input name="password" type="password" id="password" /></td> <tr> <td colspan="3" align="right"> <input type="submit" name="Submit" value="Submit" />
  • 12. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 12 <input type="reset" name="" value="Reset" /></td> </tr> CekLogindan redirect Code 2. 2 cek_login <?php session_start(); session_register('username'); //file konfigurasi include ('inc/config.php'); $username = $_POST['username']; $password = $_POST['password']; $password = md5($password); $sql = "select * from pengelola where username='$username' and password='$password' "; $userquery = mysql_query($sql) or die(mysql_error()); // $valid=false; if (mysql_num_rows($userquery) == 1) { header('location:index.php'); $valid = true; $_SESSION['username'] = $username; } if ($valid == false) { header("Location:form_login.php?status=1"); } ?>
  • 13. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 13 Janganlupa buatfile config.phpyangberisi konfigurasidatabase Code 2.3 konfigurasi database <?php $host = "localhost"; // Host name $username = "root"; // Mysql username $password = "root"; // Mysql password $db_name = "bookdb"; // Database name // Connect to server and select database. mysql_connect("$host", "$username", "$password") or die("cannot connect" . mysql_error()); mysql_select_db("$db_name") or die(mysql_error()); ?> Form Validasi Mengenal LibraryValidasi Javascript Untuk memvalidasi form,adaberbagai macamteknik.Namunsecaraumumdibagi dua,yaituserverside checkdan clientside check. Modul ini hanyamembahasscript validasi menggunakanscriptdari http://www.javascript-coder.com/html-form/javascript-form-validation.phtml.
  • 14. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 14 TeknikValidasi Berbagai MacamInput Scriptyang disediakandiatassudahmencakupberbagai macamvalidasi diantaranyaadalah Validation Usage required or req Harus di isi maxlen=??? or maxlength=??? Validasi input dengan maxmal karakter tertentu minlen=??? or minlength=??? Validasi input dengan minimal karakter tertentu alphanumeric or alnum Input harus alphanumeric (huruf dan angka tanpa spasi) alphanumeric_space alnum_s Input harus alphanumeric (huruf dan angka plus spasi) num numeric Input harus angka alpha alphabetic Input harus huruf atau symbol alpha_s alphabetic_space Input harus huruf dan atau spasi email Validasi email lt=??? lessthan=??? Lebih kecil dari gt=??? greaterthan=??? Lebih besar dari Untuk menggunakanteknikvalidasi ini,pertamatambahkan code dibawahini Code 2.3 scriptvalidasi <script src=/slideshow/e-commerce-dengan-php-mysql-48077643/48077643/"js/validjs.js"></script>
  • 15. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 15 Dan letakansciptvalidasi persisdibawahform Code 2.4 cara memvalidasi form <script language="JavaScript" type="text/javascript" xml:space="preserve">//<![CDATA[ var frmvalidator = new Validator("form1"); frmvalidator.EnableOnPageErrorDisplaySingleBox(); frmvalidator.EnableMsgsTogether(); frmvalidator.addValidation("username", "req", "Username masih kosong "); frmvalidator.addValidation("password", "req", "Password masih kosong "); //]]></script> Langkah terakhir,letakandimana pesanerroringinditampilkan Code 2.5 cara menampilkanoutputvalidasi <div id="form1_errorloc" style="color:red"> </div>
  • 17. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 17 BAB III CRUD Crud adalahprosespengelohandatastandaryangterdiri dari 4 operasi dasaryaitucreate,retrieve, update dandelete.Dalambabini,kitahanyaakan membahastable pengelola.Untuksetiaptable,kita membutuhkan5file,filefileituadalah 1. Pengelola_view 2. Pengelola_form_add 3. Pengelola_add 4. Pengelola_form_edit 5. Pengelola_edit Biasakanmenggunakanformat <namatabel>_action.php.Penamaanseperti ini akan memudahkanketikananti terjadierrordanlebihmudahdipahami. Insert Data Code 3.1 pengelola_Form_add <form id="form1" name="form1" method="post" action="pengelola_add.php"> <td> <table> <tr> <td width="120">username</td> <td width="350"> <input name="username" type="text" id="username" size="40" /> </td> </tr> <tr> <td width="120">password</td> <td width="350"> <input name="password" type="password" id="password" size="40" /> </td> </tr> <tr> <td>&nbsp;</td> <td> <input type="submit" name="tambahPengelola" value="Tambah" />
  • 18. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 18 <input type="reset" name="resetbtn" value="Reset" /> </td> </tr> <tr> <td colspan='2'><div id="form1_errorloc" style="color:red"></div></td> </tr> </table></td> </form> <script language="javaScript" type="text/javascript" xml:space="preserve"> //You should create the validator only after the definition of the HTML form var frmvalidator = new Validator("form1"); frmvalidator.EnableOnPageErrorDisplaySingleBox(); frmvalidator.EnableMsgsTogether(); frmvalidator.addValidation("username", "req", "username masih kosong "); frmvalidator.addValidation("password", "req", "password masih kosong "); frmvalidator.addValidation("username", "maxlen=20", " username tidak boleh lebih dari 20 "); frmvalidator.addValidation("password", "alnum_s", "password tidak boleh ada spasi "); </script> Code 3.2 pengelola_add <?php include ('inc/config.php'); //data dari user if (isset($_POST['tambahPengelola'])) { $username = $_POST['username']; $password = $_POST['password']; $password = md5($password); $sql = "INSERT INTO pengelola(username,password) VALUES('$username', '$password')"; $result = mysql_query($sql) or die(mysql_error()); //check if query successful
  • 19. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 19 if ($result) { header('location:index.php?page=pengelola_view&status=0'); } else { header('location:index.php?page=pengelola_view&status=1'); } mysql_close(); } ?> Tampilandari formtambah pengelola Gambar 4 halaman tambah pengelola Tampil Data Code 3.3 pengelola_view <?php include ('inc/config.php'); ?> <h1> Tabel pengelola</h1> <table width="600px" border=0> <tr style="background-color:#F79307"> <td width="200px">Username</td><td>Password</td><td width="100px">Operasi</td> </tr> <?php /*
  • 20. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 20 * kode untuk menghapus data */ if(isset($_GET['del'])){ $username=$_GET['id']; $hapus ="delete from pengelola where username='$username'"; mysql_query($hapus); } $sql=""; if(isset($_POST['btnCari'])){ $cari=$_POST['cari']; //ambil data dari table admin $sql="SELECT * FROM pengelola where username like '%$cari%'"; }else{ $sql="SELECT * FROM pengelola"; } $result=mysql_query($sql) or die(mysql_error()); //proses menampilkan data while($rows=mysql_fetch_array($result)){ ?> <tr> <td><? echo $rows['username'];?></td> <td><? echo $rows['password'];?></td> <td><a href="index.php?page=pengelola_form_edit&id=<? echo $rows['username']?>"> <img src=/slideshow/e-commerce-dengan-php-mysql-48077643/48077643/"image/b_edit.png"></a><a href="index.php?page=pengelola_view&del=true&id=<? echo $rows['username']?>" onclick="return askUser()";> <img src="image/b_drop.png"></a></td> </tr> <? }
  • 21. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 21 //tutup koneksi ?> <tr> <td align=right colspan='2'><?php if (isset($_GET['status'])) { if ($_GET['status'] == 0) { echo " <div style='color:blue'>Operasi data berhasil</div>"; } else { echo "operasi gagal"; } } ?></td> <td align=right><a href="index.php?page=pengelola_form_add"> <img src=/slideshow/e-commerce-dengan-php-mysql-48077643/48077643/"image/add.jpg"> Add</a></td> </tr> <tr></tr> </table> <? mysql_close(); //close database //tampilan siapa yang pengelola ?>
  • 22. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 22 Tampilandari pengelolaview Gambar 5 Tampilan tabel pengelola Update Data Code 3.4 pengelola_form_edit <?php include ('inc/config.php'); $id = $_GET['id']; //ambil data dari table feedback $sql = "select * from pengelola where username='$id' "; $result = mysql_query($sql) or die(mysql_error()); ?> <h2>Change password</h2> <table> <form id="form1" name="form1" method="post" action="pengelola_edit.php"> <? //proses menampilkan data while($rows=mysql_fetch_array($result)){ ?> <td width="120">username</td> <td width="350"><? echo $rows['username'];?></td> <input type="hidden" id="username" name="username" value=<? echo $rows['username'];?> />
  • 23. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 23 <!--<input type="text" id="username" name="username" value=<? echo $rows['username'];?> /> --></td> </tr> <tr> <td width="120">password</td> <td width="350"> <input name="password" type="password" id="password" size="40" /> </td> </tr> <tr> <td>&nbsp;</td> <td> <input type="submit" name="submitUser" value="Submit" /> <input type="reset" name="resetbtn" value="Reset" /> </td> </tr> <? //loop while } ?> </form> </table>
  • 24. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 24 Code 3.5 Code untukmengupdate data <?php include ('inc/config.php'); //data dari user if (isset($_POST['submitUser'])) { $username = $_POST['username']; $password = $_POST['password']; $password = md5($password); $sql = " update pengelola set password='$password' where username='$username'"; //echo $sql; $result = mysql_query($sql) or die(mysql_error()); //check if query successful if ($result) { header('location:index.php?page=pengelola_view&status=0'); } else { header('location:index.php?page=pengelola_view&status=1'); } mysql_close(); } ?> Delete Data Code 3.6 if(isset($_GET['del'])){ $username=$_GET['id']; $hapus ="delete from pengelola where username='$username'"; mysql_query($hapus); }
  • 25. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 25 BAB IV Membuat Katalog Produk Menu Kategori Produk Dinamis Bab ini langsungmembahashalamanwebsite di depan, untukhalamanadminkategori,andabuat sendiri.Berikutini adalahdatadi halamanadminuntuktable kategori Gambar 6 Kategori produk Kategori produkdalamhal ini adalahkategori bukudegeneratesecaradinamismenggunakankode sebagai berikut Code 4.1 kategori.php <h1> Pilih Kategori buku</h1> <ul> <?php include('backsite/inc/config.php'); $kat="select kd_kategori,nama_kategori from kategori"; $hasil=mysql_query($kat) or die(mysql_error()); while($get_data=mysql_fetch_array($hasil)){ ?><li><a href="index.php?page=detail&id=<?=$get_data['kd_kategori']?>"> <? echo $get_data['nama_kategori']?> <!--(<?=$get_data['jumlah']?>)-->
  • 26. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 26 </a></li> <? } ?> </ul> Tampilankategori produkdi website Gambar 7 Kategori buku Daftar Produk Dinamis Untuk meleihatdetail produk,andaharusmengklikkategori yangada.Berikutini adalahkode untuk menampilkanproduk Code 4.2 detail produk <h2> Pilih Buku yang mau dibeli </h2> <?php $kd_kategori=$_GET['id']; include('backsite/inc/config.php'); $kat="select * from buku where kd_kategori='$kd_kategori'"; $hasil=mysql_query($kat) or die(mysql_error()); while($get_data=mysql_fetch_array($hasil)){ ?>
  • 27. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 27 <div class="meta floatLeft width25"> <a href="index.html" title="View Project" class="thumb"> <img src=/slideshow/e-commerce-dengan-php-mysql-48077643/48077643/"cover/<?=$get_data[& width='150px' heigth='150px'> </a> <dl> <dt> <span>Harga</span> </dt> <dd> <?=$get_data['harga'] ?> </dd> <dt> <span>Pengarang</span> </dt> <dd> <?=$get_data['pengarang'] ?> </dd> </dl> </div> <!-- .text: content of post --> <div class="meta floatRight width50"> <a name="inspiration"></a> <h1><?=$get_data['judul'] ?></h1> <h2>Deskripsi </h2> <p> <?=$get_data['deskripsi'];?> </p> <a href="index.php?page=cart&action=add&id=<?=$get_data['kd_buku']?>">Add to cart</a> </div>
  • 28. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 28 <div style=clear:both></div> ; <? } ?> Berikutini adalahtampilandari halamanprodukdetail Gambar 8 Contoh output detail produk
  • 29. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 29 BAB V Transaksi Dan Laporan Membuat Cart Belanja Code 5.1 keranjangbelanja <? // Include MySQL class require_once ('inc/mysql.class.php'); // Include database connection require_once ('inc/global.inc.php'); // Include functions require_once ('inc/functions.inc.php'); // Start the session session_start(); // Process actions $cart = $_SESSION['cart']; $action = $_GET['action']; switch ($action) { case 'add' : if ($cart) { $cart .= ',' . $_GET['id']; } else { $cart = $_GET['id']; } break; case 'delete' : if ($cart) { $items = explode(',', $cart); $newcart = ''; foreach ($items as $item) { if ($_GET['id'] != $item) { if ($newcart != '') {
  • 30. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 30 $newcart .= ',' . $item; } else { $newcart = $item; } } } $cart = $newcart; } break; case 'update' : if ($cart) { $newcart = ''; foreach ($_POST as $key => $value) { if (stristr($key, 'qty')) { $id = str_replace('qty', '', $key); $items = ($newcart != '') ? explode(',', $newcart) : explode(',', $cart); $newcart = ''; foreach ($items as $item) { if ($id != $item) { if ($newcart != '') { $newcart .= ',' . $item; } else { $newcart = $item; } } } for ($i = 1; $i <= $value; $i++) { if ($newcart != '') { $newcart .= ',' . $id; } else { $newcart = $id; } }
  • 31. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 31 } } } $cart = $newcart; break; } $_SESSION['cart'] = $cart; ?> <div id="shoppingcart"> <h1>Keranjang belanja anda</h1> <?php echo writeShoppingCart(); ?> </div> <div id="contents"> <h3>Cek keranjang belanja</h3> <?php echo showCart(); ?> Code 5.2 Kode untukformdata pembeli <h1>Form Pengiriman barang</h1> <a href="index.php?page=cart&action=finish&kirim=true">Bungkus</a> <?php if(isset($_GET['kirim'])){ ?> <form id="form1" name="form1" method="post" action="pemesan_add.php"> <td>
  • 32. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 32 <table> <!--<tr> <td width="120">kd_pemesan</td> <td width="350"><input name="kd_pemesan" type="text" id="kd_pemesan" size="40" /></td> </tr>--> <tr> <td width="120">Nama</td> <td width="350"> <input name="Nama" type="Nama" id="Nama" size="40" /> </td> </tr> <tr> <td width="120">Alamat</td> <td width="350"> <input name="Alamat" type="Alamat" id="Alamat" size="40" /> </td> </tr> <tr> <td width="120">kd_pos</td> <td width="350"> <input name="kd_pos" type="kd_pos" id="kd_pos" size="40" /> </td> </tr> <tr> <td width="120">No_telp</td> <td width="350"> <input name="No_telp" type="No_telp" id="No_telp" size="40" /> </td>
  • 33. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 33 </tr> <tr> <td width="120">Email</td> <td width="350"> <input name="Email" type="Email" id="Email" size="40" /> </td> </tr> <?php?> <tr> <td width="120">Kota</td> <td width="350"> <select name='id_kota' id='id_kota'> <? $get_kota=mysql_query('select * from biaya_kirim order by nama_kota'); while ($rows=mysql_fetch_array($get_kota)){ ?> <option value="<?=$rows['id_kota']?>"><?=$rows['nama_kota'] ?></option> <? }//end while ?> </select></td> </tr> <tr> <td>&nbsp;</td> <td> <input type="submit" name="tambah" value="Tambah" /> <input type="reset" name="resetbtn" value="Reset" /> </td>
  • 34. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 34 </tr> <tr> <td colspan='2'><div id="form1_errorloc" style="color:red"></div></td> </tr> </table></td> </form> <script language="javaScript" type="text/javascript" xml:space="preserve"> //You should create the validator only after the definition of the HTML form var frmvalidator = new Validator("form1"); frmvalidator.EnableOnPageErrorDisplaySingleBox(); frmvalidator.EnableMsgsTogether(); frmvalidator.addValidation("kd_pemesan", "req", "kode pemesan masih kosong "); frmvalidator.addValidation("Nama", "req", "nama masih kosong "); frmvalidator.addValidation("Alamat", "req", "alamat masih kosong "); frmvalidator.addValidation("kd_pos", "req", "kode pos masih kosong "); frmvalidator.addValidation("No_telp", "req", "no. telp masih kosong"); frmvalidator.addValidation("email", "req", "email masih kosong"); frmvalidator.addValidation("kd_pemesan", "alnum_s ", "kode pemesan tidak boleh ada spasi "); frmvalidator.addValidation("Alamat", "minlen=10", "alamat kurang lengkap "); frmvalidator.addValidation("kd_pos", "num", "input harus angka "); frmvalidator.addValidation("No_telp", "num", "input harus
  • 35. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 35 angka "); frmvalidator.addValidation("email", "maxlen=50", "maksimal panjang email 50 karakter"); </script> <? } ?> </div>
  • 36. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 36 Tampilan chart Gambar 9 Tampilan keranjang dan form pengiriman barang Membuat Laporan Penjualan Berikutini adalahcontohmembuatlaporantable produkbarang.Laporansebenarnyasamadengan halamanadministrasi data,perbedaannyadi laporantidakadamenudantampilanyangtidakperlu
  • 37. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 37 Code 2.3 Laporan daftarbuku <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="style2.css" /> </head> <body> <h2 align="center"> Laporan Daftar Buku </h2> <h1 align="center"> Toko Buku murah </h1> <p align="center"> jl Lurus no 5 Yogyakarta </p> <hr> <br/> <?php?> <table align='center'> <tr style="background-color:#F79307"> <td>No</td><td>Kd buku</td><td>Judul</td><td>Pengarang</td> <td>Harga</td> </tr> <?php include ('inc/config.php'); $sql="SELECT * FROM buku"; $result=mysql_query($sql) or die(mysql_error()); //proses menampilkan data $no=1; while($rows=mysql_fetch_array($result)){ ?> <tr> <td><?=$no;?></td> <td><? echo $rows['kd_buku'];?></td> <td><? echo $rows['judul'];?></td> <td><? echo $rows['pengarang'];?></td> <td><? echo $rows['harga'];?></td>
  • 39. Membangun eCommerceBerbasisPHPMySQL(http://www.candra.web.id) 39 Program eCommerce diatasmasihperludi kembangkan.Beberapaide untukmengembangkanadalah sbb: 1. Adanyapendaftaranuser 2. Adanyastokbarang 3. Pencariancatalogproduk 4. Mengembangkankearahmobile commerce denganjQueryMobile Demikian,semogabermanfaat!