Membuat Toko Online dengan Ajax Jquery [Part 4]

Transkripsi

1

2 Membuat Toko Online dengan Ajax Jquery [Part 4] Oleh: d-newbie halo teman-teman ketemu lagi, masih ditutorial Membuat Toko Online dengan Ajax Jquery kali ini dibagian 4 [Part 4], tutorial kali ini merupakan sambungan dari tutorial sebelumnya. ok sampai ditahap ini kita sudah membuat beberapa file dari tutorial2 sebelumnya. berikut daftar file yang telah kita buat.... halo teman-teman ketemu lagi, masih ditutorial Membuat Toko Online dengan Ajax Jquery kali ini dibagian 4 [Part 4], tutorial kali ini merupakan sambungan dari tutorial sebelumnya. ok sampai ditahap ini kita sudah membuat beberapa file dari tutorial2 sebelumnya. berikut daftar file yang telah kita buat. index.php style.css kon.php mcart.php myjs.js total.php bagi yang baru mulai, silahkan liat tutorial2 sebelumnya. pada bagian ini kita akan membuat file "cart.php" cart.php ini berfungsi sebagai keranjang besar yang bisa melihat daftar barang belanjaan yang ada dikeranjang, kemudian tersedia opsi untuk menambah, mengurangi, dan menghapus barang belanjaan, disini kita menggunakan ajax, dan keranjangnya sendiri kita tampilkan dengan berupa pop-up modal. jadi apabila Tombol "Lihat Keranjang" diklik maka akan menampilkan pop-up modal keranjang besar. untuk membuat pop-up seperti diatas, pertama kita buka kembali file "myjs.js" kemudian tambahkan code berikut untuk menampilkan pop-up modal keranjangnya. $(document).ready(function(){ $('.bangkit').click(function(){ $('.overlay').fadein('slow'); $('.pop-up').fadein('slow'); }); $('.tutup').click(function(){

3 }); }); $('.pop-up').fadeout(2000); $('.overlay').fadeout(2000); penjelasan pembuatan pop-up modal seperti contoh diatas, bisa dilihat di tutorial saya yang ini, (kalo Not Found berarti belum diapprove, do'akan semoga cepat-cepat diapprove ya hehe). ok pembuatan pop-up sudah, sekarang langsung saja ke pembuatan keranjang besar. buka kembali file "index.php" cari bagian. <div class='b-pop-up'> </div> <! disini tempat load cart.php --> hapus <! disini tempat load cart.php -->, ganti dengan code jquery berikut. <script> $(document).ready(function(){ $('.b-pop-up').load('cart.php'); }); </script> code diatas adalah ajax jquery untuk mengambil file "cart.php" kemudian kita buat file "cart.php"nya. dan ketikan code berikut. <?php session_start(); include "kon.php"; $total_harga=0; $jumlah_semua_brg=null; $jumlah_per_brg=null; $no=1; $sub_total=null; echo "<table bgcolor='#aaf200' cellspacing='0' class='tbl'>"; if(isset($_session['cart']) and count($_session['cart'])!= 0){ echo"<tr align='center'><td>no</td><td

4 width='120px'>nama Barang </td><td width='70px'>harga</td><td>jumlah</td><td>sub Total</td><td>Opsi</td></tr>"; foreach($_session['cart'] as $index => $value){ $kon; $query=$kon->prepare("select id_produk,nama_produk,harga_produk from produk where id_produk=:id"); $query->bindparam(":id",$index); $query->execute(); $tampil=$query->fetch(); $warna=($no%2==0)? "#dce4cc" : "#b4c09c"; $jumlah_per_brg=$value; $sub_total=$tampil['harga_produk'] * $value; echo "<tr bgcolor='".$warna."'><td>".$no."</td><td>".$tampil['nama_produk']."</td><t d>rp.".number_format($tampil['harga_produk'],0,",",".")."</td><td>".$value. "</td><td>".number_format($sub_total,0,",",".")."</td> <td> <a href='#' onclick='adds(".$tampil['id_produk'].")'> [+] </a> <a href='#' onclick='less(".$tampil['id_produk'].")'> [-] </a> <a href='#' onclick='kill(".$tampil['id_produk'].")'> [x] </a> </td></tr>"; $jumlah_semua_brg+=$value; $total_harga+=$sub_total; $no++; } echo "<tr><td colspan='3'>total </td><td>".$jumlah_semua_brg."</td><td> Rp.".number_format($total_harga,0,",",".")."</td><td></td></tr>"; }else{ echo "<tr><td colspan='3'> Tidak ada barang di keranjang! </td><td></td><td> Silahkan Belanja dulu!</td><td></td></tr>"; } echo "</table>";?> Penjelasan. File cart.php $total_harga=0; $jumlah_semua_brg=null; $jumlah_per_brg=null; $sub_total=null;

5 untuk penjelasan statement-statement diatas, Sama seperti penjelasan pada file total.php pada tutorial 3. $no=1; digunakan untuk memberi nomor urut pada tabel dengan menggunakan looping foreach. if(isset($_session['cart']) and count($_session['cart'])!= 0) echo"<tr align='center'><td>no</td><td width='120px'>nama Barang </td><td width='70px'>harga</td><td>jumlah</td><td>sub Total</td><td>Opsi</td></tr>"; foreach($_session['cart'] as $index => $value) penjelasan code diatas sama dengan penjelasan pada file mcart.php pada tutorial 3, bedanya. disini kita juga menampilkan jumlah, harga dan sub total barang yang ada dikeranjang kemudian memasukkannya kedalam tabel $warna=($no%2==0)? "#dce4cc" : "#b4c09c"; dan ini untuk warna latar tabel, jadi apabila no urutnya ganjil maka warnanya "#b4c09c" dan jika genap maka warnanya #dce4cc" hasilnya $query=$kon->prepare("select id_produk,nama_produk,harga_produk from produk where id_produk=:id"); Disini kita akan menampilkan nama produk, harga,dan jumlahnya dengan mengambil dari database, echo "<tr bgcolor='".$warna."'><td>".$no."</td><td>".$tampil['nama_produk']."</td><t d>rp.".number_format($tampil['harga_produk'],0,",",".")."</td><td>".$value."< /td><td>".number_format($sub_total,0,",",".")."</td> kemudian hasil dari databse kita tampilkan didalam tabel. <a href='#' onclick='adds(".$tampil['id_produk'].")'> [+] </a> //function adds untuk menambah barang

6 <a href='#' onclick='less(".$tampil['id_produk'].")'> [-] </a> //function less untuk menambah barang <a href='#' onclick='kill(".$tampil['id_produk'].")'> [x] </a> //function kill untuk menghapus barang nah disini event onclick agar user bisa menambah, mengurangi, dan menghapus daftar belanjaanya. Berikut tampilannya. ok. part 4 cukup sampai disini, ditutorial selanjutnya kita akan membuat function pada event2 onclick diatas. keep stay. :) Part 5 (The Last) [UPDATED] Tentang Penulis d-newbie Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding, ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi