Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. PHP

Membangun Sebuah Keranjang Belanja dengan PHP dan MySQL

by
Read Time:14 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Untuk screencast + tutorial minggu ini, kami akan mengajarkan Anda bagaimana membangun keranjang belanja Anda sendiri dengan PHP dan MySQL. Seperti yang akan Anda dapatkan, itu tidak sesulit yang Anda pikirkan.


Tinjauan Screencast



Langkah 1

Mari kita mulai dengan melihat struktur folder:


Struktur

  • reset.css - Anda bisa mendapatkan reset dari link ini
  • style.css - file css kita sendiri yang akan kita gunakan untuk memberi gaya markup HTML kami
  • connection.php - file yang akan membuat koneksi ke database kami
  • index.php - template untuk keranjang belanja kami
  • cart.php - file yang akan mampu mengubah produk dari keranjang belanja(menambah, menghapus)
  • products.php - halaman daftar produk

Langkah 2

Kita akan mulai dengan menulis markup html dan kemudian memberinya gaya. Jadi buka index.php dan salin/sisipkan kode di bawah ini:

Jika id tidak dalam sesi ini, kita perlu memastikan bahwa id disampaikan variabel GET berada di dalam database. Mari kita beralih ke CSS. Buka file style.css dan ketik kode di bawah ini:

Berikut adalah bagaimana halaman produk kami terlihat sekarang:



Screencast Penuh



Langkah 3

Sebelum kita melanjutkan ke bagian PHP/MySQL, kita harus membuat database. Jadi, buka phpMyadmin dan ikuti langkah-langkah berikut:

  1. Pergi ke tab Privileges, klik tombol add new user, dan menggunakan pengaturan berikut: Username: tutorial; Host: localhost; Password: supersecretpassword;. Sekarang pastikan hak Global diatur; kemudian pindah ke langkah berikutnya.
  2. Buat database baru disebut tutorials.
  3. Buat tabel baru yang disebut products dan mengatur jumlah kolom menjadi 4. Sekarang isi field tersebut sehingga Anda memiliki: id_integer - pastikan sudah diatur ke INT dan tandai sebagai PRIMARY (juga set ke auto_increment); name - jadikan VARCHAR dengan panjang 100; description - VARCHAR dengan panjang 250; price - pastikan sudah diatur untuk DECIMAL(2,6)
  4. Isi tabel dengan beberapa contoh produk

Untuk menghemat waktu, saya telah mengekspor tabel produk saya sehingga Anda cukup menjalankan query berikut:





Langkah 4

Sebelum kita beralih ke mengekstrak data dari database, saya akan membuat index.php saya sebuah template untuk daftar produk dan keranjang. Jadi tambahkan kode berikut ke bagian atas halaman index.php:

  1. session_start() - ini adalah untuk digunakan nanti; ini akan memungkinkan kita untuk benar-benar menggunakan sesi (penting bahwa session_start ditulis sebelum data lain yang dikirim ke browser).
  2. Pada baris kedua, kita menyertakan connection.php yang akan membangun koneksi ke database (kita akan membahas ini beberapa saat lagi). Satu hal lagi: perbedaan antara include dan require adalah bahwa jika Anda menggunakan "require" dan file tidak ditemukan, eksekusi script akan berakhir. Jika Anda menggunakan "include", script akan terus bekerja.
  3. Daripada menyalin seluruh kode html (link ke css, ke js) untuk setiap file di situs Anda, Anda bisa saja membuat mereka semua relatif terhadap sebuah file tunggal. Jadi pertama, saya memeriksa jika ada variabel GET yang disebut "page set". Jika tidak, saya membuat sebuah variabel baru yang disebut _pages. Jika variabel GET yang disebut pages diatur pertama, saya ingin memastikan bahwa file yang akan saya sertakan adalah halaman valid.

Untuk membuatnya bekerja, kita perlu memasukkan file; tambahkan baris ini ke index.php di antara div dengan id "main":

Sekarang di sini adalah index.php lengkap yang kita miliki sekarang:


Mari kita membuat koneksi ke MySQL. Buka connections.php dan ketik berikut:


Langkah 5

Sekarang saatnya untuk menulis markup untuk halaman produk. Langsung buka dan ketik berikut:

Mari kita lihat di halaman:


Seperti yang Anda lihat, itu sangat jelek. Jadi mari kita memberinya gaya dengan menambahkan ekstra CSS ini.

Oke: mari kita lihat lagi sekarang:


Tampak jauh lebih baik, kan? Di bawah ini Anda memiliki kode lengkap style.css:


Langkah 6

Sebelum kita ekstrak produk dari database, mari kita menghapus 2 baris tabel yang terakhir dari tabel kita(kita menggunakannya hanya untuk melihat bagaimana tabel kami akan terlihat seperti apa). Hapus ini:

Hebat! Sekarang di tempat di mana baris tabel, ketik kode PHP berikut:

  1. Jadi, pertama kita gunakan SELECT untuk mendapatkan produk, kemudian kita loop melalui setiap baris dari database dan echo ke halaman dalam di baris tabel.
  2. Anda dapat melihat bahwa anchor link ke halaman yang sama (ketika pengguna mengklik anchor, produk ini ditambahkan ke keranjang/sesi). Kami hanya menyampaikan beberapa variabel tambahan seperti id dari produk.

Jika Anda meng-hover salah satu link add to cart, Anda dapat melihat, di bagian bawah halaman, bahwa id produk ini dikirimkan.



Langkah 7

Mari kita membuat anchor-nya bekerja dengan menambahkan kode berikut di bagian atas halaman kami:

  1. Jika variabel GET yang disebut action ditetapkan dan nilainya adalah ADD, kita mengeksekusi kodenya.
  2. Kami pastikan bahwa id yang disampaikan melalui variabel GET adalah sebuah integer
  3. Jika id produk berada di keranjang SESSION, kami hanya kenaikan kuantitasnya oleh 1
  4. Jika id tidak dalam sesi ini, kita perlu memastikan bahwa id disampaikan variabel GET berada di dalam database. Jika iya, kita mengambil harganya dan membuat sesinya. Jika tidak, kita set variabel yang disebut message yang akan menyimpan kesalahan kami.

Mari kita memeriksa apakah variabel pesan itu sudah diatur dan meng-echo ke halaman (ketik kode ini di bawah H1 judul halaman):

Di sini Anda dapat melihat halaman lengkap products.php.

Berikut adalah pesan kesalahan jika id produk tidak valid



Langkah 8

Mari kita kembali ke index.php dan membangun sidebar. Tambahkan kode berikut:

  1. Pertama kami memeriksa apakah session cart sudah diatur. Jika tidak, kami tampilkan pesannya, memperingatkan pengguna bahwa keranjang kosong.
  2. Selanjutnya kita membuat mysql SELECT, tapi kami hanya memilih produk-produk yang ada di sesi juga. Untuk mencapai ini, kita menggunakan fungsi foreach. Jadi, kita melakukan perulangan melalui sesi dan menambahkan id produk ke SELECT. Berikutnya, kita menggunakan fungsi substr untuk menghapus koma terakhir dari SELECT.
  3. Pada akhirnya kita output data ke browser.

Lihatlah gambar-gambar di bawah ini:



Karena index.php adalah template untuk semua file, sidebar akan terlihat di cart.php juga. Bukankah itu keren?!


Langkah 9

Akhirnya, buka cart.php dan mulai dengan mengetik kode berikut:

Kode ini mirip dengan salah satu dari index.php dan products.php, jadi saya tidak akan menjelaskan semuanya lagi. Anda harus melihat bahwa alih-alih menampilkan kuantitas di dalam form, sekarang ini ditampilkan dalam sebuah kotak input (sehingga kita dapat mengubah kuantitasnya). Juga tabel yang dibalut dalam tag form. Untuk mendapatkan harga total dari barang-barang yang kami kalikan kuantitas id produk tertentu (dari sesinya) dengan harganya. Ini dilakukan dalam loop masing-masing.

CATATAN: Input adalah array, kuncinya adalah id dari produk, dan kuantitas adalah nilai kuantitas.



Langkah 10

Langkah terakhir yang perlu kita lakukan adalah membuat form-nya bekerja. Jadi tambahkan kode ini ke atas halaman cart.php.

  1. Pertama kami memeriksa apakah form sudah di-submit. Jika sudah di-submit dan nilai dari input adalah nol, kita unset sesi itu.
  2. Jika nilainya adalah nilai lainnya, kami menetapkan kuantitas ke nilai tersebut sebagai gantinya.

Berikut adalah cart.php yang lengkap


Saya harap anda menikmati tutorial ini. Jika Anda memiliki pertanyaan, pastikan untuk menonton video tutorial yang lebih mendalam!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.