Pengenalan Template E-Shooper

Template E-Shopper merupakan salah satu template berbasis bootstrap yang dapat digunakan untuk website e-commerce dan bersifat gratis. Berikut struktur templatenya untuk file index.html

Keterangan :

A. Blok A merupakan bagian header template dan posisi sintaknya pada baris ke 28 s.d. 144 (<header id="header">), bagian header terdapat beberapa sub bagian, yaitu :

1. A1 merupakan header top, dan posisi sintaknya pada baris ke 29 s.d. 53 (<div class="header_top">), terdapat dua bagian yaitu yang berada disebelah kiri (<div class="contactinfo">) yang berisi info kontak (no. telepon & email) dan sebelah kanan (<div class="social-icons pull-right">) yang berisi link ke social media.

2. A2 merupakan posisi logo, dan posisi sintaknya pada baris ke 59 s.d. 61 (<div class="logo pull-left">).

3. A3 merupakan menu drop down untuk mengganti bahasa, posisi sintaknya pada baris ke 63 s.d. 73 (<div class="btn-group">), dan sebelahnya menu drop dwon untuk mengganti mata uang, posisi sintaknya pada baris ke 74 s.d. 82.

4. A4 merupakan bagian dari mainmenu yang berisi menu-menu utama website seperti beranda, shop, dan contact, posisi dari mainmenu pada baris ke 113 s.d. 134 (<div class="mainmenu pull-left">).

5. A5 merupakan bagian dari shop menu yang berisi menu-menu yang beruhubungan dengan online shop, seperti cart, register member, checkout, dan posisi pada baris ke 87 s.d. 95 (<div class="shop-menu pull-right">).

6. A6 merupakan form serach dapat digunakan untuk mencari daftar item, posisi sintaknya di baris 137 s.d. 139 (<div class="search_box pull-right">).

B. Blok B merupakan bagian dari slide show posisi sintaknya di baris 146 s.d. 209 (<section id="slider">)

C. Blok C merupakan bagian dari content utama, dimana pada bagian ini terdapat beberapa sub bagian, yaitu :

1. C1 merupakan blok kategori, berisi data kategori, posisi sintak di baris ke 217 s.d. 322 (<div class="panel-group category-products" id="accordian">).

2. C2 merupakan blok brand / merek, berisi data merek, posisi sintak di baris ke 324 s.d. 337 (<div class="brands_products">)

3. C3 berisi daftar produk, posisi sintaknya di baris ke 355 s.d. 510 (<div class="features_items">).

4. C4 blok tab, berisi daftar produk yang ditampilkan dalam bentuk tab per kategori, posisi sintaknya di baris 512 s.d. 798 (<div class="category-tab">).

5. C5 berisi daftar produk yang ditampilkan dalam bentuk slider, posisi sintaknya di baris ke 800 s.d. 895.

D. Blok D merupakan bagian footer template dan posisi sintaknya di baris ke 902 s.d. 1058, bagian footer terdapat beberapa sub bagian, yaitu :

1. D1 merupakan bagian topfooter, posisi sintaknya di baris ke 903 s.d 981 (<div class="footer-top">)

2. D2 merupakan bagian footer widget, posisi sintaknya di baris ke 983 s.d. 1047 (<div class="footer-widget">)

3. D3 merupakan bagian footer buttom, posisi sintaknya di baris ke 1049 s.d. 1056 (<div class="footer-bottom">)

Dalam template E-Shopper sendiri terdapat 11 contoh template, dan yang saya jelaskan diatas adalah file index.html, untuk file lainnya bisa dicoba dibuka dengan editor dan dipelajari sendiri, file lainnya adalah sebagai berikut :

404.html contoh template untuk tampilan jika halaman yang di request tidak ditemukan. Blog.html contoh template untuk tampilan daftar blog. Blog-single.html template untuk detail artikel. Cart.html contoh template untuk keranjang belanja. Checkout.html contoh template untuk selesai belanja, berisi form identitas pembeli. Contact-us.html contoh template untuk hubungi kami. Login.html contoh template untuk login member yang telah mendaftar. Product-details.html contoh template untuk melihat spesifikasi suatu produk secara

mendetail, pada template ini terdapat tombol beli yang digunakan untuk membeli produk yang bersangkutan, dan setelah diklik tombol beli maka produk tersebut akan masuk ke dalam keranjang belanja kita.

Shop.html contoh template untuk menampilkan daftar produk (misalnya per kategori/ per merek)

Menggabungkan Template Dengan PHP.

Aplikasi yang akan kita buat menggunakan PHP sebagai server side programming-nya, setelah kita mempelajari template E-Shopper, langkah selanjutnya adalah menggabungkan dengan PHP sehingga menjadi sebuah sistem yang utuh. Langkah-langkah untuk memulai menggabungkan dan membangun sistem toko online adalah sebagai berikut :

1. Buatlah sebuah folder project di document root (jika menggunakan XAMPP di htdocs), misalnya folder kita beri nama “kedaiku”, dan isi folder kedaiku adalah sebagai berikut

a. Folder admin adalah folder administrator sistem toko online yang akan kita buat.b. Asset berisi file-file pendukung template E-Shopper (seperti css, js, dan file gambar).c. Lib berisi file koneksi.php yang beritugas menggabungkan dnegan database mySql.

d. Pages berisi file-file halaman front end.e. Template berisi file template yang nantinya akan kita gunakan untuk bagian front

end.2. Memotong template E-Shopper, untuk bagian front end ada dua bagian yang selalu ada

disetiap halaman, yaitu header dan footer, untuk itu ke dua bagian tersebut akan kita jadikan file tersendiri dan nantinya akan kita includkan di setiap halaman. Langkah-langkah untuk memotongnya adalah sebagai berikut.

a. Buka file index.html dengan editor (notepad++ contohnya).b. Copy dari baris 1 sampai ke 144, jika menggunakan notepad++ buka new editor

(File – New/ Ctrl+N ) kemudian paste dan save di folder template dengan nama header.php

c. Karena file pendukung template (css, js, dan image) tidak berada dalam satu folder, tapi disatukan dalam folder asset, maka untuk baris ke 9 s.d. 15 yang berisi link ke file css perlu ditambahkan “asset/”, seperti contoh berikut <link href="css/bootstrap.min.css" rel="stylesheet"> ditambah asset/ menjadi <link href="asset/css/bootstrap.min.css" rel="stylesheet">

d. Copy dari baris 902 sampai ke 1069, jika menggunakan notepad++ buka new editor (File – New / Ctrl+N ) kemudian paste dan save di folder template dengan nama footer.php

e. Ikuti langkah c, tambahkanasset/ dibaris ke 162 s.d. 167 (didepan file link ke js), <script src="js/jquery.js"> </script> menjadi <script src="asset/js/jquery.js"> </script>.

f. Hampir disetiap halaman kita memerlukan koneksi ke database, untuk itu include-kan juga file koneksi.php yang terdapat di folder lib, include-kan file koneksi.php ke file header.php dapat diletakkan dibaris pertama. <?php include “lib/koneksi.php”; ?>

3. Membuat halaman index.php, halaman index.php adalah halaman yang akan ditampilkan pertama kali saat kita memanggil folder project kita (http://localhost/kedaiku). Untuk tampilan halaman index,php tidak jauh beda dengan halaman index template (index.html), hanya beberapa bagian yang kita buang karena tidak diperlukan untuk aplikasi kita, contohnya price range dan banner yang terdapat dibawah daftar merek.

a. Buka file template index.html , copy baris ke 146 s.d. 900, kemudian buka file baru, jika menggunakan notepad++ klik ( file-new / ctrl+n ) paste dan simpan di folder pages dengan nama main.php. Buang bagian price range dan banner dibawah brand, karena kita tidak menggunakannya.

b. Buka file baru kembali (ctrl+n) buatlah file seperti dibawah ini :

Simpan difolder project masing-masing dengan nama index.php, kemudian jalankan dibrowser (http://localhost/kedaiku).

4. Mengganti data kategori produk dengan data yang terdapat didatabase pada tabel tbl_kategori, langkah-langkahnya :

a. Buka file main.php yang terdapat difolder pages, karena pada aplikasi kita tidak terdapat sub kategori sedangkan pada template ada sub kategorinya, maka hapus data kategori pada template dan sisakan satu yang tidak ada sub kategorinya misalnya “Kids” (data kategori terdapat di baris 72 s.d. 177 pada file main.php), sehingga tampilanya seperti dibawah ini :

b. Ubah skrip

Menjadi

c. Dengan cara dan logika yang mirip ubah data merek dengan mengambil data dari database pada tabel tbl_merek.

5. Mengganti fiture item dengan data dari database tabel tbl_produk. Langkah-langkahnya :a. Cari tag <div class="features_items"> fiture item berada didalam tag tersebut,

terdapat 6 fiture item, untuk itu hapus 5 dan sisakan 1 sebagai template untuk mengganti data dari database tbl_produk, sehingga sintaknya menjadi seperti dibawah ini :

Dan tampilanya seperti dibawah ini :

b. Ganti skrip diatas menjadi seperti dibawah ini :

Kemudian jalankan aplikasinya sehingga tampilanya seperti dibawah ini :

Keterangan :

Skrip sql diatas artinya menampilkan 6 data terbaru dari tbl_produk berdasar id_produk. Kemudian ditampilkan dalam templatenya.

6. Membuat halaman daftar produk berdasar kategori. Langkah-langkahnya :a. Buka file main.php yang berada di folder pages, tambahkan link pada daftar

kategori

b. Buat file baru (file – new jika menggunakan notepad++), copy semua skrip difile main.php dan paste di file baru kemudian simpan di folder pages dengan nama produkkategori.php , kemudian modifikasi

Sehingga menjadi

c. Kemudian buat file baru dengan nama produkbykategori.php dan simpan difolder project masing-masing, seperti dibawah ini :

d. Jalankan aplikasi (http://localhost/kedaiku) dan klik pada kategori.7. Membuat halaman produk berdasar merek, dengan logika dan cara yang mirip dengan yang

diatas buatlah halaman produk berdasar merek.8. Membuat keranjang belanja, langkah-langkahnya :

a. Buka file main.php yang berada di folder pages, tambahkan link untuk masuk ke keranjang belanja.

b. Buatlah file aksi_keranjang.php dan simpan di folder project

c. Buatlah file cart.php untuk menampilkan daftar belanja, simpan di folder pages

d. Kemudian buat file dengan nama keranjang.php dan simpan di folder project masing-masing