Repository Universitas Komputer Indonesia

Pemrograman WEB 2
Materi ini membahas mengenai program untuk tambahdata, tampil, edit dan hapu

Suryana, Taryana

 
 
Membuat Program Untuk Pengelolaan Data Barang 
Tambah, Tampil, Edit, dan Hapus (CRUD) 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
16.1. Memasukan atau Menambah Data 
Pada bagian ini akan dibahas mengenai bagaimana membuat program untuk 
memasukan atau menambah data kedalam table barang. 
 
16.1.1. Perintah SQL 
Untuk memasukan atau menambah data kedalam table digunakan perintah SQL, 
berikut adalah sintak dasar perintah  SQL untuk memasukan data kedalam table 
Barang: 
 
INSERT INTO barang (‘KODEBRG’,’NAMABARANG’,’ ‘HARGA’, ‘STOK’)  
VALUES ([value-1],[value-2],[value-3],[value-4]); 
 
 
Untuk memasukan data kedalam table barang, ada dua buah file yang akan dibuat, 
yaitu File Form untuk Memasukan Data dan File Proses, untuk memproses data yang 
dimasukan dari form kedalam table. 
 
Adapun file yang akan dibuat yaitu: 
1. inputbarang.html 
2. savebarang.php 
 
 
16.1.2.Program Inputbarang.html 
Program inputbarang.html merupakan form yang akan digunakan untuk memasukan 
data dari keyboard kedalam database. 
 
 
 
NamaFile:inputbarang.html 
<html> 
<form action="savebarang.php" method=post> 
<center> 
<font size=6> 
Form Input Barang 
<hr width=320> 
<table> 
<tr><td>Kode Barang<td><input name=kodebrg size=10> 
<tr><td>Nama Barang<td><input name=namabarang size=30> 
<tr><td>Harga<td><input name=harga size=10> 
<tr><td>Stok<td><input name=stok size=3> 
</table> 
<hr width=320> 
<input type=submit value=Save> 
<input type=reset value=Reset> 
 
Jika dijalankan akan ditampilkan hasil seperti berikut, dan program ini belum selesai 
karena harus selesai dulu file yang kedua yaitu savebarang.php 
 
Gambar 16.1.Form Input Barang 
 
Jika di Click tombol save masih belum bisa dan akan keluar error, 
 
16.1.3.Program savebarang.php 
Program savebarang.php merupakan program yang berfungsi untuk menyimpan data 
yang dimasukan lewat form inputbarang.html. 
 
NamaFile:savebarang.php 
<html> 
<center> 
<font size=6> 
Informasia Data Barang 
</font> 
<hr width=320> 
<table> 
<?php 
require ("koneksi.php"); 
$kodebrg=$_POST['kodebrg']; 
$namabarang=$_POST['namabarang']; 
$harga=$_POST['harga']; 
 
$stok=$_POST['stok']; 
echo "<tr><td>Kode Barang<td>$kodebrg"; 
echo "<tr><td>Nama Barang<td>$namabarang"; 
echo "<tr><td>Harga<td>$harga"; 
echo "<tr><td>Stok<td>$stok"; 
echo "</table>"; 
echo "<hr width=320>"; 
 
if($kodebrg!='') 
{ 
$sql="insert into barang values ('$kodebrg','$namabarang','$harga','$stok') "; 
$hasil=mysqli_query($conn,$sql); 
echo "Data telah ditambahkan"; 
} 
else 
{ 
echo "Kode Barang Tidak Boleh Kosong"; 
} 
?> 
 
 
16.1.4. Menampilkan Hasil Via Browser 
Setelah kedua program tadi dibuat dan disimpan dalam folder yang sama, kemudian 
menampilkannya ke layar komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti biasa menampilkan 
program php: 
1.Jalankakan Browser 
2. Pada Address Bar, ketikan:localhost/belajar 
3.Click File inputbarang.html 
 
Selanjutnya akan ditampilkan jendela berikut: 
 
 
 
Gambar 16.2.Menambahkan data Barang 
 
 
Isikan data seperti pada form diatas, kemudian Click Save untuk menambahkan atau 
menyimpannya. 
 
Gambar 16.3. Informasi data telah ditambahkan 
 
Jika berhasil akan ditampilkan jendela seperti diatas, dan data yg dimasukan akan 
bertambah kedalam tabel barang. 
Data yang ditambahkan, dapat dilihat dengan menggunakan phpMyAdmin seperti 
contoh berikut: 
 
Gambar 16.4.Data terbaru sudah ditambahkan ketabel Barang 
 
  
 
 
 
 
16.2.Edit  Data Barang 
Pada bagian ini akan dibahas mengenai bagaimana membuat program untuk 
melakukan perubahan atau edit pada data yang sudah ada dalam database atau 
tabel. 
 
Adapun file yang akan digunakan dan dibuat yaitu: 
1. Tampilbarang.php 
2. Editbarang.php 
3. Saveeditbarang.php 
 
 
16.2.1. Menambahkan Link Edit Pada 
Tampilbarang.php 
Untuk menambahkan Link Edit pada Program TAMPILBARANG.PHP dapat dilakukan 
dengan cara menambahkan perintah berikut, 
  
 
echo "<td><a href='editbarang.php?kodebrg=$kodebrg'>Edit"; 
 
 
tambahkan perintah tersebut pada baris 18 di file tampilbarang.php, perhatikan 
perubahan berikut: 
 
TAMPILBARANG.PHP 
1. <center> 
2. <font size=7> 
3. Tampil Data Barang<br> 
4. <hr> 
5. <table border=10> 
6. <tr bgcolor=silver><td width=50><center>NO<td width=100> <center>KODE BARANG<td 
width=200><center>NAMA BARANG 
7. <td width=100><center>HARGA<td width=50><center>STOK<td colspan=2><Center>ACTION 
8. <?php 
9. require ("koneksi.php"); 
10. $sql="select * from barang"; 
11. $hasil=mysqli_query($conn,$sql); 
12. $row=mysqli_fetch_row($hasil); 
13. $n=1; 
14. do 
15. { 
16. list($kodebrg,$namabarang,$harga,$stok)=$row; 
17. echo "<tr><td>$n<td>$kodebrg<td>$namabarang<td align=right>$harga<td 
align=right>$stok"; 
18. echo "<td><a href='editbarang.php?kodebrg=$kodebrg'>Edit"; 
 
19. echo "<td><a href='deletebarang.php?kodebrg=$kodebrg'>Delete"; 
20. $n++; 
21. } 
22. while($row=mysqli_fetch_row($hasil)); 
23. ?> 
 
Setelah ditambahkan perintah pada baris 18 dan 19, kemudian simpan kembali. 
selanjutnya lihat pada browser. Jika penambahan benar maka akan ditampilkan hasil 
seperti berikut: 
 
 
Gambar 16.5.Tampil Barang 
  
 
 
16.2.2.Membuat Program Edit Data Barang 
File EDITBARANG.PHP berfungsi untuk menangani Form Edit Data Barang, yang 
parameter atau variabelnya dikirim dari program tampilbarang.php 
 
NamaFile:EDITBARANG.PHP 
<html> 
<form action="saveeditbarang.php" method=post> 
<center> 
<font size=6> 
Edit Data Barang 
<hr width=400> 
<table border=1> 
<tr><td> 
<table border=0> 
<?php 
require ("koneksi.php"); 
$kodebrg=$_GET['kodebrg']; 
$sql="select * from barang where kodebrg='$kodebrg' "; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
do 
{ 
list($kodebrg,$namabarang,$harga,$stok)=$row; 
echo "<tr><td width=150> 
Kode Barang<td width=100><input name=kodebrg value='$kodebrg' readonly size=10>"; 
echo "<tr><td>Nama Barang<td><input name=namabarang value='$namabarang' size=30>"; 
echo "<tr><td>Harga<td><input name=harga value='$harga' size=10>"; 
echo "<tr><td>Stok<td><input name=stok value='$stok' size=5>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table> 
</table> 
<hr width=400> 
<input type=submit value='Save Edit'> 
<input type=reset value=Reset> 
 
 
 
16.2.3. Menyimpan Hasil Edit Data Barang 
Setelah membuat form Edit data Barang, selanjutnya adalah membuat Program untuk 
menyimpan hasil perubahan data kedalam database atau table barang. 
 
File SAVEEDITBARANG.PHP berfungsi untuk menangani proses penyimpanan data 
yang dimasukan dari form EDITBARANG.PHP kedalam tabel Barang. 
 
NamaFile:Saveeditbarang.php 
1. <html> 
2. <center> 
3. <font size=6> 
4. Save Edit Data Barang 
5. </font> 
6. <hr width=320> 
7. <table> 
8. <?php 
9. require ("koneksi.php"); 
10. $kodebrg=$_POST['kodebrg']; 
11. $namabarang=$_POST['namabarang']; 
12. $harga=$_POST['harga']; 
13. $stok=$_POST['stok']; 
 
14. echo "<tr><td>Kode Barang<td>$kodebrg"; 
15. echo "<tr><td>Nama Barang<td>$namabarang"; 
16. echo "<tr><td>Harga<td>$harga"; 
17. echo "<tr><td>Stok<td>$stok"; 
18. echo "</table>"; 
19. echo "<hr width=320>"; 
20. $sql="update barang set namabarang='$namabarang',harga='$harga',stok='$stok'  
21. where kodebrg='$kodebrg' "; 
22. $hasil=mysqli_query($conn,$sql); 
23. ?> 
24. </table> 
25. Data Barang Sudah di Edit 
26. </html> 
 
 
 
16.2.4.Menampilkan Hasil Via Browser 
Setelah  program EDITBARANG.PHP  dan “SAVEEDITBARANG.PHP” dibuat dan 
disimpan dalam folder yang sama, kemudian adalah menampilkannya ke layar 
komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti biasa menampilkan 
program php: 
1.Jalankakan Browser 
2. Pada Address Bar, ketikan:localhost/belajar 
3.Click File TAMPILBARANG.PHP 
 
Gambar 16.6. Menambahkan Link Edit / Delete pada Tampil Barang 
 
4.Click Link EDIT, pada contoh ini yang diclick adalah Link LAPTOP selanjutnya akan 
ditampilkan hasil seperti berikut: 
 
 
 
Gambar 16.7. Menmapilkan Form Edit Barang 
 
Lakukan perubahan data pada Harga dan Stok, misalnya Harga dirubah menjadi 
6000000 dan Stok menjadi 25 
 
 
Gambar 16.8. Menampilkan Data Edit Barang 
 
 
 
Kemudian simpan haril perubahan tadi dengan meng-Click tombol SaveEdit, dan 
akan ditampilkan informasi seperti berikut: 
 
 
 
Gambar 16.9. Save Edit Data Barang 
 
Setelah proses ini Data Barang yang ada di dalam database atau table akan 
terupdate. 
Berikut adalah contoh hasil perubahan data tersebut. 
 
 
 
Gambar 16.10. Browse Tabel Barang 
 
Sampai tahap ini pembuatan program untuk edit data barang telah selesai dan sesuai 
dengan yang diharapkan diawal materi. 
 
 
 
 
 
 
 
 
16.3.Hapus Barang 
Untuk menghapus data yang ada dalam tabel, dapat dilakukan dengan menggunakan 
perintah SQL delete 
 
Adapun file yang akan digunakan dan dibuat yaitu: 
1. Deletebarang.php 
2. Prosesdeletebarang.php 
 
16.3.1. Menampilkan Data Yang Akan 
Dihapus 
Sebelum data dihapus dari database sebaiknya data yang akan dihapus ditampilkan 
dulu kelayar, baru setelah yakin tinggal Click tombol Delete 
 
NamaFile:deletebarang.php 
 
<html> 
<form action="prosesdeletebarang.php" method=post> 
<center> 
<font size=6> 
Delete Data Barang 
<hr width=400> 
<table border=1> 
<tr><td> 
<table border=0> 
<?php 
require ("koneksi.php"); 
$kodebrg=$_GET['kodebrg']; 
$sql="select * from barang where kodebrg='$kodebrg' "; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
do 
{ 
list($kodebrg,$namabarang,$harga,$stok)=$row; 
echo "<tr><td width=150>Kode Barang<td width=100><input name=kodebrg value='$kodebrg' readonly 
size=10>"; 
echo "<tr><td>Nama Barang<td><input name=namabarang value='$namabarang' size=30>"; 
echo "<tr><td>Harga<td><input name=harga value='$harga' size=10>"; 
echo "<tr><td>Stok<td><input name=stok value='$stok' size=5>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table> 
</table> 
<hr width=400> 
<input type=submit value='Proses Delete'> 
<input type=reset value=Reset> 
 
Program ini tidak dapat berdiri sendiri, jadi tidak dapat langsung dijalankan dari 
browser, tapi harus dijalankan dari program tampilbarang.php, kemudian setelah 
ditampilkan, click link delete pada data yang akan dihapus. 
 
 
 
16.11. Jendela Tampil Barang 
 
 
 
16.12. Jendela Delete Barang 
 
 
 
 
 
16.3.2. Menghapus data dari database 
Untuk menghapus data secara permanen dari database dilakukan dengan 
menggunakan perintah delete. Berikut adalah contoh kode programnya. 
 
NamaFile: prosesdeletebarang.php 
 
<html> 
<center> 
<font size=6> 
Proses Delete Data Barang 
</font> 
<hr width=320> 
<table> 
<?php 
require ("koneksi.php"); 
$kodebrg=$_POST['kodebrg']; 
$namabarang=$_POST['namabarang']; 
$harga=$_POST['harga']; 
$stok=$_POST['stok']; 
echo "<tr><td>Kode Barang<td>$kodebrg"; 
echo "<tr><td>Nama Barang<td>$namabarang"; 
echo "<tr><td>Harga<td>$harga"; 
echo "<tr><td>Stok<td>$stok"; 
echo "</table>"; 
echo "<hr width=320>"; 
$sql="delete from barang where kodebrg='$kodebrg' "; 
$hasil=mysqli_query($conn,$sql); 
?> 
</table> 
Data Barang Sudah di Hapus 
</html> 
 
 
Program ini harus dijalankand dari tampilbarang.php 
 
 
Gambar 16.13. Proses Hapus Barang 
 
  
 
 
16.4. Membuat Menu Program 
Untuk memudahkan dalam menjalankan masing-masing modul program yang telah 
dibuat, pada bagian ini akan dibahas membuat menu sederhana, untuk mengelola 
data tersebut. 
 
Gambar 16.14. Design Menu Program 
 
Untuk Membuat tampilan seperti gambar 16.14 ada 3 Buah File html yang dibuat 
yaitu: 
1. admin.html 
2. menu.html 
3. welcome.html 
NamaFile:admin.html 
<html> 
  <frameset cols=20%,*> 
  <frame src="menu.html"> 
  <frame src="welcome.html" name="welcome"> 
  </frameset> 
</html> 
 
 
NamaFile:menu.html 
<html> 
<body bgcolor=silver> 
<h1> 
MENU 
<hr> 
<h3> 
<a href="welcome.html" target="welcome">Home</a> 
<hr> 
<a href="inputbarang.html" target="welcome">Input Barang</a> 
<hr> 
<a href="tampilbarang.php" target="welcome">Tampil Barang</a> 
<hr> 
 
NamaFile:welcome.html 
<html> 
<Center> 
<h1> 
Selamat Datang 
<hr> 
Pengelolaan Data Barang 
<hr> 
 
Buka Browser dengan mengetikan : http://localhost/belajar/admin.html maka akan 
ditampilkan hasil seperti gambar 16.14. diatas, ada 3 Menu Pilihan, yaitu: 
1. Home, untuk kembali kehalaman selamat dating 
2. Input barang, untuk memanggil modul inputbarang.html dan akan ditampilkan 
jendela sebelah kanan 
3. Tampil barang , untuk memanggil modil tampilbarang.php dan akan 
ditampilkan dijendela sebelah kanan 
 
 
 
Gambar 14.15. Halaman Input Barang 
 
Gambar 14.16. Halaman Tampil Barang 
 
 
 
Tugas 16: 
Dengan Cara yang sama seperti diatas, buat Menu program untuk Pengelolaan Data 
Siswa, teridiri dari: 
1.Tambah data Siswa 
2.Tampil Data Siswa 
3.Edit Data Siswa 
4.Hapus Data Siswa. 
 
 
Tugas dikumpulkan dalam format PDF terdiri dari Kode Program dan Screenshot 
paling lambat setiap minggu sore 
 
 


Materi 16: Membuat Program Crud (create, Read, Update, Delete)

BAHASA INDONESIA
Pengertian  Karya Ilmiah adalah karya tulis yang dibuat untuk memecahkan suatu permasalahan dengan landasan teori dan metode-metode ilmiah. Biasanya Karya ilmiah berisikan data, fakta, dan solusi mengenai suatu masalah yang diangkat. Penulisan karya ilmiah dilakukan secara runtut dan sistematis. Kalau ingin lebih tahu pengertian karya ilmiah menurut para ahli dan jenis-jenis karya ilmiah

Supriadi, Asep

Karya Tulis Ilmiah (pertemuan Ke-14)

Bahasa Indonesia
Surat menyurat dan Kesekretariata

Setyadi Aras, Taufik

Korespondensi

Pemrograman WEB 2
w3css Framework
Materi ini membahas bagaimana membuat Toko Online dengan menggunakan PHP MYSQL dan W3CS

 
 
STUDI KASUS 
Membuat Program Toko Online  Menggunakan  
w3css Framework 
 
Buku Referensi: 
e-Commerce Menggunakan PHP dan MYSQL, Taryana Suryana, Graha Ilmu, Jogyakarta 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
17. Toko Online dengan CSS 
Pada bagian ini akan dibahas bagaimana merubah Toko Online yang telah dibuat 
dengan menambahkan CSS, agar tampilan bisa lebih baik. 
 
 
 
 
 
 
Buat Folder TOKO di xampp/htdocs/ 
 
 
Kemudian didalam folder TOKO buat subfolder images dan pages 
Folder images untuk menyimpan gambar pendukung, sedangkan folder pages, untuk 
menyimpan file file yang lainnya. 
 
17.1. Membuat Halaman Index 
Halaman indek ini ditempatkan difolder utama atau di root directory. 
NamaFile:index.php 
<html> 
<title>Toko Online Balanja Store </title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="pages/w3.css"> 
<body> 
<div id="header"> 
<img src="./pages/header.jpg"  width=100% height=30%> 
 </div> 
<div id="konten"> 
     <?php 
  $pages_dir = 'pages'; 
  if(!empty($_GET['p'])){ 
   $pages = scandir($pages_dir, 0); 
   unset($pages[0], $pages[1]); 
   $p = $_GET['p']; 
   if(in_array($p.'.html', $pages)){ 
    include($pages_dir.'/'.$p.'.html'); 
   } else  
            if(in_array($p.'.php', $pages)){ 
    include($pages_dir.'/'.$p.'.php'); 
   } else  
   { 
    echo "$pages_dir Halaman tidak ditemukan! :("; 
   } 
  } else { 
   include($pages_dir.'/home.html'); 
  } 
  ?> 
    </div> 
</body> 
</html> 
 
Simpan file index.php ini di folder xampp/htdocs/toko/ 
 
 
17.2. Membuat Halaman Utama 
Halaman home.html akan ditampilkan dihalaman utama dan otomatis dipanggil oleh 
index.php 
 
NamaFile:home.html 
 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container w3-teal"> 
  <h1>Produk Baru 2021</h1> 
</div> 
<div class="w3-row-padding w3-margin-top"> 
<?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; 
?> 
  <div class="w3-third"> 
    <div class="w3-card"> 
 <br> 
      <?php  
        echo "<center><img src='./images/$kodebrg.jpg' width=80% height=30%></center>"; 
     ?> 
      <div class="w3-container"> 
     <?php 
      echo "<h5>$namabarang<br>Rp."; 
      echo number_format($harga,2,",","."); 
      echo "<br>Stok : $stok</h5>"; 
      echo "<a class='w3-btn w3-red' href='index.php?p=belisekarang&kodebrg=$kodebrg'> Beli Sekarang </a>"; 
        ?> 
      </div> 
  <br> 
    </div> 
  <br> 
 </div> 
<?php 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</div> 
 
Simpan File ini di Folder xampp/htdocs/toko/pages/home.html 
 
 
17.3. Koneksi ke Database 
File ini disimpan di folder pages, untuk menghubungkan antara program php dengan 
database mysql 
 
NamaFile:koneksi.php 
<?php 
$conn=mysqli_connect("localhost","root","","belajar"); 
?> 
 
Simpan File ini di Folder xampp/htdocs/toko/pages/koneksi.php 
 
 
17.4. Penjualan Barang 
File ini berfungsi untuk menyimpan data user yang belanja di Toko kedalam database, 
karena belum membuat tabel untuk menyimpan data  yang belanja, maka terlebih 
dahulu buat tabel penjualan, dengan struktur seperti berikut: 
 
 
Sehingga nantinya di database Belajar menjadi ada tabel: PENJUALAN 
 
 
  
 
 
NamaFile:belisekarang.php 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<form action="index.php?p=savebeli" method=post> 
<center> 
<table border=0> 
<?php 
require ("koneksi.php"); 
$kodebrg=$_GET['kodebrg']; 
 echo "<center><img src='./images/$kodebrg.jpg' width=40% height=40%></center>"; 
 echo "<br>"; 
$sql="select * from barang where kodebrg='$kodebrg' "; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
do 
{ 
list($kodebrg,$namabarang,$harga,$stok)=$row; 
echo "<tr><td width=150>Kode Barang<td width=100><input name=kodebrg value='$kodebrg' 
readonly size=10>"; 
echo "<tr><td>Nama Barang<td><input name=namabarang value='$namabarang' size=30>"; 
echo "<tr><td>Harga<td><input name=harga value='$harga' size=10>"; 
echo "<tr><td>Stok<td><input name=stok value='$stok' size=5>"; 
echo "<tr><td>Jumlah Beli<td><select name=jumlah>"; 
for($i=1;$i<=$stok;$i++) 
echo "<option>$i"; 
echo "<tr><td>Nama Pembeli<td><input name=namapembeli size=30>"; 
echo "<tr><td>Alamat<td><input name=alamat size=50>"; 
echo "<tr><td>Kota<td><input name=kota size=20>"; 
echo "<tr><td>KodePos<td><input name=kodepos size=5>"; 
echo "<tr><td>Telp<td><input name=telp size=20>"; 
echo "<tr><td>EMail<td><input name=email size=30>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table> 
<hr width=400> 
<button class="w3-btn w3-round-xxlarge w3-red" >Save Pembelian</button> 
<a class="w3-btn w3-round-xxlarge w3-red" href="index.php">Kembali ke Toko</a> 
 
Simpan File ini di Folder xampp/htdocs/toko/pages/belisekarang.php 
 
  
 
 
 
17.5. Menyimpan Penjualan 
File ini berfungsi untuk Menyimpan data orang yang belanja di Toko kedalam 
Database 
 
 
NamaFile:savebeli.php 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<script> 
    function goBack() { 
        window.history.back(); 
    } 
</script> 
<center> 
</font> 
<hr width=320> 
<table> 
<?php 
require ("koneksi.php"); 
$kodebrg=$_POST['kodebrg']; 
$jumlah=$_POST['jumlah']; 
$namapembeli=$_POST['namapembeli']; 
$alamat=$_POST['alamat']; 
$kota=$_POST['kota']; 
$kodepos=$_POST['kodepos']; 
$telp=$_POST['telp']; 
$email=$_POST['email']; 
if(($namapembeli=='') || ($alamat=='') || ($kota=='') || ($kodepos=='') || ($telp=='') || ($email=='')) 
{ 
 echo "<h1>Maaf ada data belum diisi<br><br> "; 
 echo "<button onclick='goBack()'>Back</button>"; 
  
exit;  
} 
echo "<tr><td width=150>Kode Barang<td>$kodebrg"; 
echo "<tr><td>Jumlah Beli<td>$jumlah"; 
echo "<tr><td>Nama Pembeli<td>$namapembeli"; 
echo "<tr><td>Alamat<td>$alamat"; 
echo "<tr><td>Kota<td>$kota"; 
echo "<tr><td>Kode Pos<td>$kodepos"; 
echo "<tr><td>Telp<td>$telp"; 
echo "<tr><td>E-Mail<td>$email"; 
echo "</table>"; 
echo "<hr width=320>"; 
$sql="insert into penjualan values ('','$kodebrg','$jumlah','$namapembeli', 
'$alamat','$kota','$kodepos','$telp','$email') "; 
$hasil=mysqli_query($conn,$sql); 
?> 
</table> 
<h1>Data Penjualan telah di Simpan 
<hr> 
<br> 
<a class="w3-btn w3-round-xxlarge w3-red" href="index.php">Kembali ke Toko</a> 
 
Simpan File ini di Folder xampp/htdocs/toko/pages/savebeli.php 
 
Tugas 17: 
Ubahlah Halaman Toko Online anda dengan mengganti nama produk dan Gambar 
barang yang akan dijual. 
Kirimkan Coding dan Screenshot Halaman Toko Online Anda dalam format PDF, kirim 
paling lambat hari minggu sebelum jam 17:00 Wib 
 
 
 
Referensi Buku yang digunakan: 
 
 
 
 
 


Materi 17: Studi Kasus Membuat Program Toko Online Menggunakan

Pemrograman WEB 2
materi ini membahas mengenai bagaimana membuat sistem administrasi
untuk menangani toko online, seperti menambah data, edit, hapus, dan
menampilkan relasi penjuala

 
STUDI KASUS 
Managemen Toko Online  Menggunakan  
w3css Framework dan PHP MYSQL 
Buku Referensi: 
e-Commerce Menggunakan PHP dan MYSQL, Taryana Suryana, Graha Ilmu, Jogyakarta 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
taryanarx@email.unikom.ac.id, taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
Sample bisa coba dilihat di https://toko.ciwaruga.com, sedangkan untuk 
administratornya, bisa di lihat di https://toko.ciwaruga.com/admin 
 
18. Management Toko 
Pada bagian ini akan dibahas bagaimana membuat program untuk pengelolan barang 
pada toko online. 
Adapun tampilkan yang akan dibuat adalah seperti contoh berikut: 
 
 
Gambar 18.1. Halaman Utama Managemen Toko Online 
 
 
18.2.Memasukan Data Barang 
Menu Insert berfungsi untuk memasukan data barang yang akan ditambahkan ke 
database dan nantinya otomatis ditampilkan di Toko Online. 
 
 
Gambar 18.2. Memasukan Data Barang 
  
 
18.3.Menampilkan Data Barang 
Menu Select  berfungsi untuk menapilkan seluruh data barang yang ada dalam 
dabase toko 
 
 
 
Gambar 18.3. Menampilkan Data Barang 
 
 
  
 
18.4.Merubah Data 
Menu Update berfungsi untuk merubah data barang yang ada dalam database 
 
 
Gambar 18.4. Merubah atau Edit Data Barang 
 
  
 
18.5.Menghapus Data Barang 
Menu Delete berfungsi untuk menghapus data barang yang ada dalam database 
 
 
 
Gambar 18.5. Hapus Data Barang 
  
 
 
18.6.Penjualan 
Menu Penjualan berfungsi untuk menampilkan data penjualan, disini ditampilkan 
data siapa yang belanja di Toko Online. 
 
 
Gambar 18.6. Menampilkan Data Penjualan 
  
 
 
18.7.Dropdown 
Menu ini hanyalah contoh apabila anda ingim merubah tampilan menu menjadi 
berbentuk vertical, Materi ini sudah dibahas disemester 1 di mata kuliah 
Pemrograman Web 1 (Komputer Aplikasi IT-1). 
 
 
 
Gambar 18.7. Membuat Menu DropDown 
 
 
Ok sekian dulu, lain-lainnya bisa ditambahkan sendiri. 
Semoga kedepan kita bisa bertatap muka di kelas atau di laboratorium, maafkan segala 
kekurangannya, dan jangan lupa sehat selalu…dan terus belajar yang rajin, 
Aamiin YRA 
 
Taryana Suryana M.Kom 
Jl.Ciwaruga No 62 
Bandung Barat 
 
  
 
Tugas 18: 
Ubahlah Tampilan Halaman Administrator Toko Online anda dengan mengganti nama 
produk dan Gambar barang yang akan dijual serta design tampilannya, hanya boleh 
menggunakan HTML, W3CSS, PHP, JAVASCRIPT DAN MYSQL. 
 
Jika Sudah Selesai silahkan upload ke Server yang menyediakan hosting gratis 
support  Database dan php, seperti tugas pada Semester 1. 
 
Jika sudah selesai upload silahkan daftarkan alamat website anda di 
https://demo.ciwaruga.com 
 
 
 
Referensi Buku yang digunakan: 
 
 
 
 
 


Materi 18: Studi Kasus Membuat Program Adminitrator Toko Online

Pemrograman WEB 2
File Gambar Pendukung boleh diganti dengan gambar yang lain disesuaikan dengan toko yang mau dibua

File Gambar Pendukung

Aplikasi E-Commerce
Materi ini membahas bagaimana membuat program untuk mengelola data toko Online, meliputi data barang, dan data penjuala

 
 
Studi Kasus Integrasi Program dan  
Administrasi Pengelolaan Toko Online 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
14.Integrasi Program 
Untuk memudahkan dalam pengelolaan data, baik itu data barang, data penjualan dan 
laporannya, maka perlu dibuatkan Aplikasi yang memungkinan pemilik toko online 
untuk dapat melakukan pengelolaan data dengan mudah. 
 
Adapun file yang akan dibuat yaitu: 
1. admin.html 
2. menu.html 
3. welcome.html 
 
 
 
14.1.MEMBUAT FILE ADMIN.HTML 
File ini berfungsi untuk membagi layar menjadi beberapa bagian, pada contoh ini akan 
dibuat menjadi 2 bagian, yaitu bagian sebelah kiri untuk menu dan bagian sebelah 
kanan untuk halaman utama. 
 
admin.html 
<html> 
  <frameset cols=20%,*> 
  <frame src="menu.html"> 
  <frame src="welcome.html" name="welcome"> 
  </frameset> 
</html> 
 
 
 
 
 
14.2.MEMBUAT FILE MENU.HTML 
File menu.html berfungsi untuk menampilkan Daftar Pilihan atau link yang nantinya 
dapat di-click dan akan menampilkan isi program sesuai link yang dibuat. 
 
menu.html 
<html> 
<body bgcolor=silver> 
<h1> 
MENU 
<hr> 
<h3> 
<a href="welcome.html" target="welcome">Home</a> 
<hr> 
<a href="inputbarang.html" target="welcome">Input Barang</a> 
<hr> 
<a href="tampilbarang.php" target="welcome">Tampil Barang</a> 
<hr> 
<a href="tampilpenjualan.php" target="welcome">Tampil Penjualan</a> 
<hr> 
<a href="tampilrelasipenjualan.php" target="welcome">Relasi Penjualan</a> 
<hr> 
<a href="toko.php" target="welcome">Toko Online</a> 
<hr> 
 
 
 
 
14.3.MEMBUAT FILE WELCOME.HTML 
File welcome.html berfungsi untuk menampilkan halaman utama atau halaman 
selamat datang, bisa diganti isinya dengan teks atau tulisan apapun yang anda 
inginkan. 
 
welcome.html 
<html> 
<Center> 
<h1> 
Selamat Datang 
<hr> 
Administrasi Data Barang 
<hr> 
Toko Online Sagala Aya 
 
 
 
14.4.Menampilkan Hasil Via Browser 
Setelah  ketiga program dibuat dan disimpan sesuai nama file diatas, kemudian 
adalah bagaimana cara menampilkannya ke layar komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti biasa menampilkan 
program: 
1. Jalankan Browser 
2. Pada Address Bar, ketikan:localhost/belajar 
3. Click File  ADMIN.HTML 
Akan ditampilkan jendela seperti berikut: 
 
 
  
 
Gambar 14.1. Jendela Admin utama 
 
 
Cara Memilih Menu adalah dengan Meng-Clicknya: 
1. Input Barang, untuk menampilkan halaman atau form input barang. 
 
 
Gambar 14.2. Form Input Barang 
 
 
 
 
 
 
 
 
 
2. Tampil Barang, untuk menampilkan data barang yang ada dalam tabel barang. 
 
 
Gambar 14.3 Menampilkan barang 
 
 
 
Gambar 14.4. Edit Barang 
 
 
Gambar 14.5. Delete Barang 
 
 
 
Gambar 14.6. Proses Delete Barang 
 
 
 
 
 
 
 
 
3. Laporan Penjualan, untuk menampilkan  data penjualan barang. 
 
Gambar 14.7.Data Penjualan 
 
4. Relasi Penjualan, untuk menampilkan  Relasi Data Penjualan dan Data barang. 
 
 
5. Toko, Menampilkan halaman Toko Online 
 
Gambar 14.8.Menampilkan Halaman Toko Online 
 
  
 
TUGAS 14: Tugas Akhir 
Buat Program Toko Online, seperti contoh dimateri yang telah dibahas, Toko Online 
diisi dengan data barang-barang yang ingin anda jual, misalnya jualan pakaian, TAS, 
Sepatu, Makanan, Alat Elektronik, atau Campuran Jualan apa saja. 
Gambar disesuaikan dengan barang yang dijual. 
 
 
Jika telah selesai Buat Screenshot masukan kedalam file doc, dan seluruh program 
filenya beserta gambar pendukungnya di buat file TUGAS14.ZIP, kirim ke modul tugas 
pada kuliahonline 
 
 
Nb:ini adalah tugas terakhir buat kalian yang mengambil matakuliah e-commerce, 
semoga materi pelajaran ini bisa kalian serap, buat bekal nanti ketika kalian skripsi 
atau ketika kalian sudah bekerja nanti. 
 
 
Terimakasih,  
Assalamualaikum wrwb. 
 
Taryana Suryana M.Kom. 
Teknik Informatika Unikom 
taryanarx@email.unikom.ac.id 
08122180577 
 


Bab 14.  Manajemen Toko Online

Komputer Aplikasi IT-1
Materi ini membahas bagaimana mempublikasikan program website yang telah kalian buat ke Internet, sehingga bisa dibuka dari mana saj

 
 
PUBLIKASI WEB KE INTERNET 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
14.1.HOSTING WEB 
Agar program dan latihan html yang pernah dibuat dapat dibuka dari seluruh dunia maka program 
tersebut harus di hosting di web server. Ada dua pilihan layanan, yaitu yang berbayar dan yang gratis. 
Anda boleh menghosting atau mempublikasikan di server mana saja, silahkan anda bisa cari di google 
dengan mengetikan “hosting gratis”  atau “free hosting” dan lain-lain. 
 
Sebelum memulai materi 14 ini, alangkah baiknya perbaiki dulu yang tugas13.html, supaya lebih bagus 
lagi, adapun ketentuannya adalah: 
1. Supaya lebih gampangl lagi, simpan semua file dalam folder baru, misalnya tugas14, semua 
file termasuk file html, gambar dan file w3.css simpan disana 
2. Ganti nama File Tugas13.html menjadi index.html  menggunakan huruf kecil semua 
3. Nama File Gambar juga harus huruf kecil semua, dan jangan menggunakan spasi. 
4. Tambahkan satu Tab menu Profile, yang isinya Nim,Nama,Kelas, tambahin Foto kamu juga 
boleh. 
5. Karena Akan di Onlinekan di Internet, tambahkan dan atur agar tulisan dan gambarnya sesuai. 
 
 
 
 
 
 
 
 
 
 
Pada materi ini akan dibahas bagaimana hosting di web server yang gratis yang beralamat di : 
https://www.000webhost.com/. 
Langkah-langkahnya adalah sebagai berikut: 
1. Jalankan browser buka alamat berikut: https://www.000webhost.com/ ,  
Selanjutnya akan ditampilkan jendela berikut: 
 
 
Gambar 14.1 Halaman Utama 
2. Pilih Free Web Hosting, dan Click tombol GET STARTED 
3. Pilih FREE SIGN UP 
 
Gambar 14.2. Memilih Jenis Hosting 
 
 
4. Jika Anda memiliki email di Google, gunakan dan Click LOG IN WITH GOOGLE 
 
Gambar 14.3 Halaman Sign Up / Pendaftaran 
 
5. Masukan Username dan Password Google Anda, jika berhasil akan ditampilkan jendela seperti 
berikut: 
 
Gambar 14.4 Halaman Jika Berhasil Login 
 
6. Click LET’S CREATE SOME MAGIC,  Akan ditampilkan pilihan berikut: 
 
 
 
Gambar 14.5. Pilih Jenis Website 
7. Click Create Web Design 
 
Gambar 14.6. Pilih Kategori Website 
 
8. Click Other, masukan nama Project, kemudian click ok 
Nama Project, masukan Nama Depan kamu, harus UNIK kalau udah ada yang menggunakan akan 
ditolak oleh server: 
Nama Project: Penting banget di ingat, nantinya akan menjadi nama domain website kamu di 
internet: misal kalau tadi name Projectnya:taryanarx maka domain internetnya menjadi : 
https://taryanarx.000webhostapp.com/ 
Alamat inilah yang nantinya bisa dibuka dari mana saja. 
 
 
 
Gambar 14.7. Masukan Nama Project 
 
Tunggu beberapa saat jika, project berhasil dibuat akan ditampilkan jendela berikut:, jika tidak  
berhasil, ulangi isi kembali nama project nya. 
 
Jika berhasil ditampilkan jendela berikut: 
 
Gambar 14.8. Halaman Upload Your Site 
 
9. Click tombol Upload Your Site 
 
 
 
Gambar 14.9. Pilic Public_html dan Upload Files 
 
10. Pada layar sebelah kiri, click Public_html, kemudian pada jendela atas kanan, click tombol 
Upload Files 
 
Gambar 14.10. Select Files 
 
11. Click tombol Select Files 
 
 
 
Gambar 14.11. Semua File yang akan di upload dipilih 
 
12. Select semua file yang digunakan untuk membuat Website kamu, File tugas13.html file w3.css 
dan semua gambar yang digunakan, kemudian click OPEN: 
Nama file tugas13.html harus diganti namanya menjadi index.html 
 
 
Gambar 14.12. Upload File yang tadi di Select 
 
 
13. Click tombol Upload. Untuk mengirimkan Files ke Server, dan jika berhasil dikirim akan 
ditampilkan jendela seperti berikut: 
 
 
 
Gambar 14.13. Contoh semua file telah di Upload ke Server 
 
 
14. Untuk melihat hasilnya buka tab baru di jendela browser, kemudian ketikan 
https://namaproject. 000webhostapp.com 
 
NamaProject adalah NamaProject anda Masing-masing, misalnya tadi namaproject saya adalah 
taryanarx. Maka buka di Browsernya menjadi  https://taryanarx.000webhostapp.com/ 
 
Hasilnya kira-kira seperti ini. 
 
 
 
 
Ok, selamat belajar dan jangan lupa terus mencoba, kamu harus bisa, harus berhasil……tetep 
semangat 
 
“Tidak Berat Membawa Ilmu Berapapun Banyaknya” 
 
 
Kamu bisa Coba di Webhosting yang lain, kalau untuk latihan boleh yang gratisan dulu, nah  kalau 
kamu serius ingin memiliki website premium dengan domain sendiri kamu bisa membelinya via 
webhosting yang tersedia. 
 
Contohnya: 
www.hostinger.co.id 
www.masterweb.com 
www.jagoanhosting.com 
www.qwords.com 
 
 
Nb: 
Jika sudah berhasil dan Online di Internet, silahkan kirimkan, link atau alamat website kamu: 
Di File Tugas14.pdf  
Tuliskan 
 
Nim: 
Nama Lengkap: 
Kelas: 
Alamat Website: 
 
 
Terimakasih, sampai jumpa lagi di Semester berikutnya, tetap jaga Protokol Kesehatan, semoga 
kita diberi rizki dan sehat selalu 
 
Aamiin YRA 
 
Taryana Suryana.M.Kom 
Teknik Informatika 
  


Pertemuan 15. Publikasi Web Ke Internet

MEDIA HUMAS
Jenis Media Massa
Media Kontempore

Not a member yet

Materi 16: Membuat Program Crud (create, Read, Update, Delete)

Karya Tulis Ilmiah (pertemuan Ke-14)

Korespondensi

Korespondensi

Materi 17: Studi Kasus Membuat Program Toko Online Menggunakan

Materi 18: Studi Kasus Membuat Program Adminitrator Toko Online

File Gambar Pendukung

Bab 14. Manajemen Toko Online

Pertemuan 15. Publikasi Web Ke Internet

Media Humas

15,029

70,114