Hi Fellas! Ini adalah kelanjutan dari Tutorial Membuat Web Apps (E-Commerce) dengan Microsoft Azure dan GitHub - PART 2. Pada kesempatan kali ini saya akan berbagi ilmu tentang bagaimana Proses coding Web Apps (E-Commerce) E-Meubel.
Struktur code Web Apps ini adalah struktural dengan tampilan yang responsif menggunakan bootstrap. Bahasa yang digunakan adalah HTML5, PHP 5.4, javascript dan css. Untuk code editornya saya menggunakan aplikasi Sublime, databasenya menggunakan MySql dan web service nya menggunakan Apache yang di atur dalam XAMPP. Untuk menjelaskan setiap fungsi dan sintaks akan memakan waktu yang cukup panjang, untuk itu yang saya bagikan adalah fungsi-fungsi penting dan penjelasan secara umum dan keseluruhan code program. Di akhir tutorial akan saya bagi link untuk mendownload project ini dengan semua code program agar teman-teman dapat mencoba dan mengutak-atik dengan mandiri dan lebih leluasa. Nah, untuk lebih memahami bagaimana prosesnya silahkan simak tutorial berikut :
1. Buat file .php pada code editor masing-masing. Pada kesempatan kali ini saya menggunakan Sublime. Masukkan file php tersebut dalam folder E-MEUBEL yang telah kita buat sebelumnya dalam htdocs.
2. Kebutuhan bootstrap sudah saya sediakan untuk di download di akhir tutorial ini.
3. Pertama kita buat file .php dan beri nama koneksi.php, isi dari file ini adalah untuk menyambungkan project kita dengan database e-mebel yang telah kita buat di posting sebelumnya. Sintaksnya adalah sebagai berikut :
<?php
$host="localhost";
$username="root";
$password="";
$database="e-mebel";
$connect=mysql_connect($host,$username,$password)or die ("Gagalterkoneksi");
$koneksi=mysql_select_db($database,$connect)or die("Gagal terkoneksi ke database");
?>
4. Kemudian kita buat file index.php yang akan menjadi tampilan awal saat kita mengakses Web Apps kita. Pada index.php sangat kompleks yang tidak mungkin dijelaskan secara detail setiap maksud dari setiap variabel yang ada didalamnya. Saya akan menjelaskan garis besar dari isi index.php yaitu :
a. Memanggil koneksi.php, untuk terkoneksi dengan database, jika tidak terkoneksi maka index.php tidak dapat tampil
b. Terdapat sintaks bootstrap agar tampilan menjadi responsif dan dapat tampil secara prima pada ukuran layar berapapun.
c. Membuat menu yang masing-masing mempunyai link ke halaman masing-masing.
d. Menampilkan produk yang ditawarkan kepada pembeli.
5. Selanjutnya kita buat file register.php yang berfungsi sebagai halaman yang tampil disaat kita klik menu register untuk mendaftar pada E-MEUBEL sebagai pembeli. Untuk Suplier dapat langsung menghubungi admin untuk mendaftar karena admin harus memvalidasi suplier terlebih dahulu, hal ini demi keamanan transaksi, sehingga admin harus memastikan terlebih dahulu suplier tersebut sangat terpercaya. Didalam register.php terdapat form yang berisi identitas diri yang wajib dilengkapi untuk mendaftar menjadi member.
6. Berikutnya kita buat file cek-daftar.php yang berfungsi untuk memasukkan data dari register.php ke dalam database e-mebel. Akan tampil pemberitahuan apabila username telah digunakan. Password yang didaftarkan akan menggunakan md5 agar keamanan dan kerahasiaan password pengguna dapat terjaga dengan baik. Apabila sukses akan ditampilkan halaman index.php.
7. Kemudian kita buat file login.php yang berfungsi sebagai halaman yang tampil disaat kita klik menu login. Disini kita memasukkan username dan password yang telah kita daftarkan pada menu register untuk dapat melakukan order produk.
8. Langkah selanjutnya adalah kita buat file cek-login.php yang berfungsi melakukan cek apakah username dan password yang di input kan sesuai dengan database dan dilakukan cek user tersebut pada database hak aksesnya sebagai admin, pembeli atau suplier. Akan tampil pemberitahuan apabila username/password yang diinputkan salah. Jika berhasil akan masuk ke halaman index.php.
9. Berikutnya kita buat file detail.php yang berfungsi sebagai halaman yang tampil disaat kita klik produk mana yang akan kita beli. Dihalaman ini kita dapat melihat detail produk dan tombol “Buy Now” untuk membeli barang tersebut. Kita juga dapat memasukkan komentar terhadap produk tersebut dengan mengisi field komentar di bawah detail produk tersebut. Ketika kita klik tombol “Buy Now” tersebut, akan langsung diproses pada cek-transaksi.php. Ketika kita post komentar akan langsung di proses pada cek-komentar.php.
10. Lalu kita buat file cek-komentar.php yang berfungsi untuk menyimpan data komentar ke database dan menampilkannya pada halaman detail.php produk yang dikomentari.
11. Kemudian kita buat file cek-transaksi.php yang berfungsi untuk memasukkan data ke dalam database dan menampilkan tabel transaksi kita pada cart.php.
12. Selanjutnya kita buat file cart.php yang berfungsi sebagai halaman yang tampil disaat kita klik “Buy Now” pada produk yang ingin kita beli atau logo keranjang pada menu. Cart ini berisi wish list produk apa saja yang kita ingin beli, berisi tabel transaksi produk, untuk membelinya dapat klik “order” jika ingin membatalkan klik “batal” yang akan diproses pada delete-order.php. Pada saat klik “order” akan tampil nama penerima dan alamat penerima yang harus diisi dan input foto hasil bukti transfer bank yang kemudian akan langsung diproses pada cek-order.php. Data inilah yang nanti akan divalidasi oleh admin dan dilakukan pengiriman produk.
13. Setelah itu kita buat file delete-order.php yang berfungsi memproses ketika kita klik batal pada transaksi cart.php. Pada file ini berisi penghapusan order tersebut dari database.
14. Berikutnya kita buat file cek-order.php yang berfungsi untuk menyimpan data order yang telah diinputkan user kedalam database e-mebel, agar admin mengetahui apakah order sudah dilakukan proses transfer oleh pembeli, yang selanjutnya akan tampil halaman cart.php dengan menampilkan order telah selesai dan menunggu konfirmasi dari admin.
15. Lalu kita buat file about.php yang berfungsi sebagai halaman yang tampil disaat kita klik about pada menu. Halaman about ini menampilkan informasi tentang apa itu E-MEUBEL, bagaimana cara order, keuntungan berbelanja di E-MEUBEL dan siapa saja tim dari E-MEUBEL. Ini sangat penting agar pembeli tahu bagaimana cara berbelanja di E-MEUBEL dan mengetahui keuntungan dan keamanannya.
16. Kemudian kita buat file gallery.php yang berfungsi sebagai halaman yang tampil disaat kita klik Commodity pada menu. Pada halaman ini berisi produk-produk apa saja yang ditawarkan E-MEUBEL.
17. Selanjutnya kita buat file contact.php yang berfungsi sebagai halaman yang tampil disaat kita klik Contact pada menu. Pada halaman ini berisi informasi lokasi toko offline dengan memanfaatkan API pada Google Maps dan kotak saran kepada admin tentang kritik atau masukan yang ingin ditambahkan pembeli.
18. Berikutnya kita buat file myprofile.php yang berfungsi sebagai halaman yang tampil disaat kita klik Profile pada menu. Pada halaman ini berisi informasi tentang profil pengguna setelah login. Disini kita juga dapat melakukan update profile apabila kita ingin merubah dan mengupdate profil kita.
19. Lalu kita buat file orderan.php yang berfungsi sebagai halaman yang tampil disaat kita klik Orderan pada menu apabila kita login sebagai suplier. Pada halaman ini berisi informasi tentang order yang dilakukan pembeli pada produk suplier tersebut, sehingga suplier mengetahui transaksi produknya.
20. Yang terakhir adalah kita buat file logout.php yang berfungsi sebagai fungsi logout ketika kita klik logout pada menu, sehingga kita keluar dari sistem dan menjadi guest. Setelah klik logout kita akan kembali ke halaman index.php.
21. Untuk panel admin berisi fungsi-fungsi seperti CRUD (Create, Replace, Update, Delete) pada user dan produk serta untuk memvalidasi transaksi yang dilakukan pembeli.
Sekian tutorial tentang bagaimana Proses coding Web Apps (E-Commerce) E-Meubel ini. Untuk tahap selanjutnya silahkan lihat pada proses selanjutnya pada blog ini. Jika ada yang ingin ditanyakan silahkan berkomentar di bawah ini. Terimakasih sudah mampir, so Stay Tuned and Keep Coding! ;)
.png)
