BAB 7

Membuat Program Toko Online

Dengan PHP MySQL

Taryana Suryana M.Kom

Jurusan Ilmu Hukum Unikom
2023/2024

[email protected]
[email protected]
HP.081221480577 – WA.087832908499

7.Membuat Toko Online

Pada bagian ini akan dibahas cara membuat Toko Online dengan
menggunakan bahasa pemrograman PHP. Untuk Membuat Program
Toko Online seperti bukalapak.com, tokopedia.com dan lain-lain,
dasarnya adalah dengan membuat program untuk menampilkan data
disertai dengan gambar produknya.
 Gambar 7.1. Contoh Tampilan tokopedia.com

Gambar 7.2. Contoh tampilan halaman bukalapak.com

7.1. Kode Program Membuat Toko Online
Materi dasar bagaimana cara menampilkan data sudah dibahas di
Materi 7, silahkan lihat kembali kode programnya.

Langkahnya adalah sebagai berikut:

1. Copy isi file tampilbarang.php ke file baru dan berinama toko.php
2. Download file gambar.zip pada kuliahonline, kemudian extrak
kedalam folder xampp/htdocs/belajar

NamaFile:toko.php
<center>
<font size=7>
Toko Online Sagala Aya<br>
<hr>
<table border=0>
<?php
require ("koneksi.php");
$sql="select * from barang";
$hasil=mysqli_query($conn,$sql);
$row=mysqli_fetch_row($hasil);
$n=1;
do
{
list($kodebrg,$namabarang,$harga,$stok)=$row;
echo"<td><td><img src='$kodebrg.jpg' width=100
height=100>
<br>$namabarang<br>Rp.$harga<br>Stok:$stok";
$n++;
}
while($row=mysqli_fetch_row($hasil));
?>

Jalankan dengan browser, maka akan ditampilkan jendela seperti

berikut:
 Gambar 7.3. Halaman Utama Toko Online

7.2.Memformat Angka
Untuk menampilkan angka kedalam format tertentu, misalnya
membuat format angka rupiah, Anda bisa menggunakan function
number_format().
function number_format() memiliki 4 parameter yang bisa Anda
gunakan yaitu :

1. Angka nominal, merupakan nominal atau angka yang akan di

format.
2. Jumlah angka sen, merupakan jumlah angka sen.
3. Separator sen, merupakan tanda pemisah antara angka
nominal dengan angka sen.
4. Separator ribuan, merupakan tanda pemisah angka ribuan.
Lalu bagaimana cara menggunakannya? Anda bisa gunakan contoh
script di bawah ini :
<?php echo number_format(1250000,2,".",","); ?>
Bila dijalankan, script di atas akan menghasilkan Output:
1,250,000.00

7.3.Memformat Tampilan Harga

Dengan menggunakan perintah number format, misalkan akan
dirubah tampilan layar Toko Online menjadi seperti berikut:

Gambar 7.4. Hasil Memformat angkat

Perhatikan bagian Harga menjadi ada tanda titik dan tanda koma
pemisah
NamaFile:toko.php
<center>
<font size=7>
Toko Online Sagala Aya<br>
<hr>
<table border=0>
<?php
require ("koneksi.php");
$sql="select * from barang";
$hasil=mysqli_query($conn,$sql);
$row=mysqli_fetch_row($hasil);
$n=1;
do
{
list($kodebrg,$namabarang,$harga,$stok)=$row;
echo"<td><td><img src='$kodebrg.jpg' width=100
height=100>
<br>$namabarang<br>Rp. ";
echo number_format($harga,2,",",".");
echo "<br>Stok:$stok";
$n++;
}
while($row=mysqli_fetch_row($hasil));
?>

7.4.Menampilkan data Perbaris 4 Kolom

Jika barang yang akan ditampilkan banyak, maka data harus diatur
sedemian rupa sehingga ketika ditampilkan tidak menumpuk dalam
satu baris. Misalnya kita akan mengatur halaman Toko Online untuk
menampilkan data perbaris sebanyak 4 barang.
Contoh: Anda memiliki 11 barang yang akan ditampilkan di Toko
Online, maka akan ditampilkan menjadi 3 baris seperti berikut:
 Gambar 7.5. Menampilkan 4 Barang per Baris

NamaFile:toko.php
<center>
<font size=7>
Toko Online Sagala Aya<br>
<table border=0>
<?php
require ("koneksi.php");
$sql="select * from barang";
$hasil=mysqli_query($conn,$sql);
$row=mysqli_fetch_row($hasil);
$n=1;
do
{
list($kodebrg,$namabarang,$harga,$stok)=$row;
echo"<td width=200><img src='$kodebrg.jpg' width=100 height=100>
<br>$namabarang<br>Rp. ";
echo number_format($harga,2,",",".");
echo "<br>Stok:$stok";
if($n%4==0)
echo "<tr><td colspan=4><hr><tr>";
$n=$n+1;
}
while($row=mysqli_fetch_row($hasil));
?>
LATIHAN
Ubahlah Halaman Toko Online anda dengan mengganti nama produk
dan Gambar barang yang akan dijual.

Referensi Buku yang digunakan:

e-Commerce Menggunakan PHP dan MYSQL, Taryana Suryana,
Graha Ilmu, Jogyakarta
DAFTAR PUSTAKA
1. Suryana, Taryana (2023) Materi 2. Variabel, Tipe Data Dan Database
Jurusan Ilmu Hukum 2023-2024. [Teaching Resource]
2. Suryana, Taryana (2023) Materi 4. Membuat Tabel Dengan Html
Jurusan Perancangan Wilayah Dan Kota. [Teaching Resource]
3. Suryana, Taryana (2023) Materi 4 Membuat Form Input Dan Output
Jurusan Hubungan Internasional 2023-2024. [Teaching Resource]
4. uryana, Taryana (2023) Materi 3 Operator Dalam Php Dan Database
Jurusan Hubungan Internasional 2023-2024. [Teaching Resource]
5. Suryana, Taryana (2023) Materi 2. Pengenalan Php, Variabel, Tipe
Data Dan Database Hubungan Internasional 2023-2024. [Teaching
Resource]
6. Suryana, Taryana (2023) Materi 1. Pengenalan E-commerce Dan
Persiapan Software Pendukungnya. [Teaching Resource]
7. Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching
Resource]
8. Suryana, Taryana (2023) Materi 10. Display Layout Dan
Button. [Teaching Resource]
9. Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3
Framework. [Teaching Resource]
10. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching
Resource]
11. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource]
12. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching
Resource]
13. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource]
14. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam
Html. [Teaching Resource]
15. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan
Html5. [Teaching Resource]
16. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam
Html. [Teaching Resource]
17. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching
Resource]
18. Suryana, Taryana (2022) Materi 2 Memformat Dokumen
Html. [Teaching Resource]
19. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching
Resource]
20. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource]
21. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan
Menggunakan Html Dan Dreamweaver. [Teaching Resource]
22. https://www.w3schools.com/html, September, 2021
23. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser
Dan Text Editor. [Teaching Resource]
24. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan
Pemrograman Web. [Teaching Resource]
25. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta
26. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan
HTML., Gava Media, Jogyakarta
27. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta
28. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource]
29. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan
Menggunakan Html Dan Dreamweaver. [Teaching Resource]
30. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan
HTML., Gava Media, Jogyakarta
31. https://www.w3schools.com/html, September, 2021
32. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser
Dan Text Editor. [Teaching Resource]
33. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan
Pemrograman Web. [Teaching Resource]
34. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching
Resource]
35. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html
Materi Jurusan Perancangan Wilayah Dan Kota. [Teaching Resource]
36. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html
Untuk Jurusan Teknik Sipil. [Teaching Resource]
37. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan
Html. [Teaching Resource]
38. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-
ul2-2021. [Teaching Resource]
39. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-
2021-1. [Teaching Resource]
40. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-
2021-1. [Teaching Resource]
41. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data
Member. [Teaching Resource]
42. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan
Disdukcapil. [Teaching Resource]
43. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-
2021-1. [Teaching Resource]
44. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-
2021-1. [Teaching Resource]
45. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-
12021-1. [Teaching Resource]
46. https://www.w3schools.com/html