Scribd
Unggah
11 tayangan

Modul Praktek Pemrograman Web

Praktek pemrograman berbasis web untuk peningkatan pemahaman pemrograman

Diunggah oleh

Yendi Putra Rao Rao
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
11 tayangan

Modul Praktek Pemrograman Web

Praktek pemrograman berbasis web untuk peningkatan pemahaman pemrograman

Diunggah oleh

Yendi Putra Rao Rao
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 16

Modul Prakek Pemrograman Web

Manajemen Informatika
Tahun 2022

Studi kasus adalah Penjualan Produk pada sebuah toko

Langkah-langkah adalah sebagai berikut


1. Install XAMPP dan jalankan apaceh beserta mysql
2. Buka localhost/phpmyAdmin dan buat database dengan nama ukk

3. Buat table produk Isi dengan stuktur seperti ini

Kalau belum bisa, silahkan copy & paste lalu jalankan script MySQL berikut :

CREATE TABLE `ukk`.`produk` ( `id` INT(11) NOT NULL AUTO_INCREMENT ,


`nama_produk` VARCHAR(255) NULL , `deskripsi` TEXT NULL ,
`harga_beli` INT(11) NULL , `harga_jual` INT(11) NULL ,

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


`gambar_produk` VARCHAR(255) NULL ,
PRIMARY KEY (`id`)) ENGINE = InnoDB;

Setelah di buat akhiri dengan mengklik Go

4. Buat sebuah folder dengan nama ukk22 pada direktori C:\xampp\htdocs


5. Buat folder gambar dalam folder ukk22, tampilan sebagai berikut:

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


Tapi tenang, kita akan bikin satu persatu dulu. Yang pertama akan kita buat yaitu bikin
folder didalam htdocs kalian dengan nama crud_gc, lalu buat koneksi.php nya, perlu
diketahui koneksi.php ini berfungsi untuk menghubungkan PHP kita dengan Databasenya
MySQL

Codingnya sebagai berikut :

<?php
$host = "localhost";
$user = "root";
$pass = "";
$nama_db = "crud_gc"; //nama database
$koneksi = mysqli_connect($host,$user,$pass,$nama_db); //pastikan urutan nya seperti
ini, jangan tertukar

if(!$koneksi){ //jika tidak terkoneksi maka akan tampil error


die ("Koneksi dengan database gagal: ".mysql_connect_error());
}
?>

Ingat, save dengan nama koneksi.php


Jika sudah coba kalian jalankan dulu localhost/ukk22/koneksi.php, jika tidak tampil apa –
apa maka koneksi berhasil tapi jika tampil error berarti ada yang salah dalam koneksi kalian.
Entah itu xampp belum nyala, atau nama database salah, dan juga database MySQL kalian
memiliki password.. Hayo coba cari tau dulu..
Ok next, kita buat index.php yang akan menampilkan data produk dari database jadi
tampilan index.php ini akan berupa tabel tapi jangan lupa untuk menginclude
kan koneksi.php sebagai penghubung index.php ke database tabel produk

<?php
include('koneksi.php'); //agar index terhubung dengan database, maka koneksi sebagai
penghubung harus di include

?>
<!DOCTYPE html>
<html>
<head>
<title>CRUD Produk dengan gambar - UKK SMK MAritim Nusantara 2022</title>
<style type="text/css">
* {
font-family: "Trebuchet MS";
}
h1 {
text-transform: uppercase;

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


color: salmon;
}
table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 70%;
margin: 10px auto 10px auto;
}
table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
}
table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
a {
background-color: salmon;
color: #fff;
padding: 10px;
text-decoration: none;
font-size: 12px;
}
</style>
</head>
<body>
<center><h1>Data Produk</h1><center>
<center><a href="tambah_produk.php">+ &nbsp; Tambah Produk</a><center>
<br/>
<table>
<thead>
<tr>
<th>No</th>
<th>Produk</th>
<th>Dekripsi</th>
<th>Harga Beli</th>
<th>Harga Jual</th>
<th>Gambar</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
// jalankan query untuk menampilkan semua data diurutkan berdasarkan nim
$query = "SELECT * FROM produk ORDER BY id ASC";
$result = mysqli_query($koneksi, $query);
//mengecek apakah ada error ketika menjalankan query

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


if(!$result){
die ("Query Error: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
}

//buat perulangan untuk element tabel dari data mahasiswa


$no = 1; //variabel untuk membuat nomor urut
// hasil query akan disimpan dalam variabel $data dalam bentuk array
// kemudian dicetak dengan perulangan while
while($row = mysqli_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $row['nama_produk']; ?></td>
<td><?php echo substr($row['deskripsi'], 0, 20); ?>...</td>
<td>Rp <?php echo number_format($row['harga_beli'],0,',','.'); ?></td>
<td>Rp <?php echo $row['harga_jual']; ?></td>
<td style="text-align: center;"><img src="gambar/<?php echo
$row['gambar_produk']; ?>" style="width: 120px;"></td>
<td>
<a href="edit_produk.php?id=<?php echo $row['id']; ?>">Edit</a> |
<a href="proses_hapus.php?id=<?php echo $row['id']; ?>" onclick="return
confirm('Anda yakin akan menghapus data ini?')">Hapus</a>
</td>
</tr>

<?php
$no++; //untuk nomor urut terus bertambah 1
}
?>
</tbody>
</table>
</body>
</html>

Panjang banget ya codingnya? tapi tenang, itu karena saya pakai CSS internal hehe setelah di
save, maka hasilnya di index.php :

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


Sekarang membuat view Form Tambah Produk dengan nama file tambah_produk.php,
tampilan nya seperti ini :

Dan coding nya ini

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


<?php
include('koneksi.php'); //agar index terhubung dengan database, maka koneksi sebagai
penghubung harus di include

?>
<!DOCTYPE html>
<html>
<head>
<title>CRUD Produk dengan gambar - UKK SMK MAritim Nusantara 2022</title>
<style type="text/css">
* {
font-family: "Trebuchet MS";
}
h1 {
text-transform: uppercase;
color: salmon;
}
button {
background-color: salmon;
color: #fff;
padding: 10px;
text-decoration: none;
font-size: 12px;
border: 0px;
margin-top: 20px;
}
label {
margin-top: 10px;
float: left;
text-align: left;
width: 100%;
}
input {
padding: 6px;
width: 100%;
box-sizing: border-box;
background: #f8f8f8;
border: 2px solid #ccc;
outline-color: salmon;
}
div {
width: 100%;
height: auto;
}
.base {
width: 400px;
height: auto;
padding: 20px;
margin-left: auto;
margin-right: auto;
background: #ededed;
}
</style>
</head>

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


<body>
<center>
<h1>Tambah Produk</h1>
<center>
<form method="POST" action="proses_tambah.php" enctype="multipart/form-data" >
<section class="base">
<div>
<label>Nama Produk</label>
<input type="text" name="nama_produk" autofocus="" required="" />
</div>
<div>
<label>Deskripsi</label>
<input type="text" name="deskripsi" />
</div>
<div>
<label>Harga Beli</label>
<input type="text" name="harga_beli" required="" />
</div>
<div>
<label>Harga Jual</label>
<input type="text" name="harga_jual" required="" />
</div>
<div>
<label>Gambar Produk</label>
<input type="file" name="gambar_produk" required="" />
</div>
<div>
<button type="submit">Simpan Produk</button>
</div>
</section>
</form>
</body>
</html>

Setelah view / tampilan, tentunya kita akan membuat proses tambah nya hehe agar data yang
kita input bisa masuk ke tabel produk.

Jadi buat file lagi proses_tambah.php

<?php
// memanggil file koneksi.php untuk melakukan koneksi database
include 'koneksi.php';

// membuat variabel untuk menampung data dari form


$nama_produk = $_POST['nama_produk'];
$deskripsi = $_POST['deskripsi'];
$harga_beli = $_POST['harga_beli'];
$harga_jual = $_POST['harga_jual'];
$gambar_produk = $_FILES['gambar_produk']['name'];

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


//cek dulu jika ada gambar produk jalankan coding ini
if($gambar_produk != "") {
$ekstensi_diperbolehkan = array('png','jpg'); //ekstensi file gambar yang bisa
diupload
$x = explode('.', $gambar_produk); //memisahkan nama file dengan ekstensi yang
diupload
$ekstensi = strtolower(end($x));
$file_tmp = $_FILES['gambar_produk']['tmp_name'];
$angka_acak = rand(1,999);
$nama_gambar_baru = $angka_acak.'-'.$gambar_produk; //menggabungkan angka acak
dengan nama file sebenarnya
if(in_array($ekstensi, $ekstensi_diperbolehkan) === true) {
move_uploaded_file($file_tmp, 'gambar/'.$nama_gambar_baru);
//memindah file gambar ke folder gambar
// jalankan query INSERT untuk menambah data ke database pastikan
sesuai urutan (id tidak perlu karena dibikin otomatis)
$query = "INSERT INTO produk (nama_produk, deskripsi, harga_beli,
harga_jual, gambar_produk) VALUES ('$nama_produk', '$deskripsi', '$harga_beli',
'$harga_jual', '$nama_gambar_baru')";
$result = mysqli_query($koneksi, $query);
// periska query apakah ada error
if(!$result){
die ("Query gagal dijalankan: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
//tampil alert dan akan redirect ke halaman index.php
//silahkan ganti index.php sesuai halaman yang akan dituju
echo "<script>alert('Data berhasil
ditambah.');window.location='index.php';</script>";
}

} else {
//jika file ekstensi tidak jpg dan png maka alert ini yang tampil
echo "<script>alert('Ekstensi gambar yang boleh hanya jpg atau
png.');window.location='tambah_produk.php';</script>";
}
} else {
$query = "INSERT INTO produk (nama_produk, deskripsi, harga_beli, harga_jual,
gambar_produk) VALUES ('$nama_produk', '$deskripsi', '$harga_beli', '$harga_jual',
null)";
$result = mysqli_query($koneksi, $query);
// periska query apakah ada error
if(!$result){
die ("Query gagal dijalankan: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
//tampil alert dan akan redirect ke halaman index.php
//silahkan ganti index.php sesuai halaman yang akan dituju
echo "<script>alert('Data berhasil
ditambah.');window.location='index.php';</script>";
}
}

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


Note :

• File ekstensi yang boleh diupload yaitu JPG dan PNG tapi jika ada tambahan
silahkan ditambah setelah koma
• Angka acak fungsinya agar nama file gambar nya unik, contoh jadinya gini 141-
gambar.png
• File gambar akan dipindahkan ke dalam folder gambar
• Jika tidak ada upload photo silahkan dihapus saja yang tidak diperlukan dibagian
if else ekstensi dan juga pengecekan ukuran gambar
• Semuanya required / wajib diisi kecuali text field deskripsi
• Pada coding terdapat beberapa komentar / penjelasan, silahkan komen atau
email jika ingin bertanya

Nah sampai sini Tambah Produk nya udah bisa nihh, coba jalanin dulu bisa belum? Sebelum
lanjut ke edit dan hapus, tambah sama index produk nya mesti sudah jalan

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


Lanjut buat file lagi dengan nama edit_produk.php yang akan menampilkan :

Berikut Coding view edit_produk.php

<?php
// memanggil file koneksi.php untuk membuat koneksi
include 'koneksi.php';

// mengecek apakah di url ada nilai GET id


if (isset($_GET['id'])) {
// ambil nilai id dari url dan disimpan dalam variabel $id
$id = ($_GET["id"]);

// menampilkan data dari database yang mempunyai id=$id

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


$query = "SELECT * FROM produk WHERE id='$id'";
$result = mysqli_query($koneksi, $query);
// jika data gagal diambil maka akan tampil error berikut
if(!$result){
die ("Query Error: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
}
// mengambil data dari database
$data = mysqli_fetch_assoc($result);
// apabila data tidak ada pada database maka akan dijalankan perintah ini
if (!count($data)) {
echo "<script>alert('Data tidak ditemukan pada
database');window.location='index.php';</script>";
}
} else {
// apabila tidak ada data GET id pada akan di redirect ke index.php
echo "<script>alert('Masukkan data id.');window.location='index.php';</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>CRUD Produk dengan gambar - UKK SMK MAritim Nusantara 2022</title>
<style type="text/css">
* {
font-family: "Trebuchet MS";
}
h1 {
text-transform: uppercase;
color: salmon;
}
button {
background-color: salmon;
color: #fff;
padding: 10px;
text-decoration: none;
font-size: 12px;
border: 0px;
margin-top: 20px;
}
label {
margin-top: 10px;
float: left;
text-align: left;
width: 100%;
}
input {
padding: 6px;
width: 100%;
box-sizing: border-box;
background: #f8f8f8;
border: 2px solid #ccc;
outline-color: salmon;
}
div {

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


width: 100%;
height: auto;
}
.base {
width: 400px;
height: auto;
padding: 20px;
margin-left: auto;
margin-right: auto;
background: #ededed;
}
</style>
</head>
<body>
<center>
<h1>Edit Produk <?php echo $data['nama_produk']; ?></h1>
<center>
<form method="POST" action="proses_edit.php" enctype="multipart/form-data" >
<section class="base">
<!-- menampung nilai id produk yang akan di edit -->
<input name="id" value="<?php echo $data['id']; ?>" hidden />
<div>
<label>Nama Produk</label>
<input type="text" name="nama_produk" value="<?php echo
$data['nama_produk']; ?>" autofocus="" required="" />
</div>
<div>
<label>Deskripsi</label>
<input type="text" name="deskripsi" value="<?php echo $data['deskripsi']; ?>"
/>
</div>
<div>
<label>Harga Beli</label>
<input type="text" name="harga_beli" required=""value="<?php echo
$data['harga_beli']; ?>" />
</div>
<div>
<label>Harga Jual</label>
<input type="text" name="harga_jual" required="" value="<?php echo
$data['harga_jual']; ?>"/>
</div>
<div>
<label>Gambar Produk</label>
<img src="gambar/<?php echo $data['gambar_produk']; ?>" style="width:
120px;float: left;margin-bottom: 5px;">
<input type="file" name="gambar_produk" />
<i style="float: left;font-size: 11px;color: red">Abaikan jika tidak merubah
gambar produk</i>
</div>
<div>
<button type="submit">Simpan Perubahan</button>
</div>
</section>
</form>
</body>

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


</html>

Udah disave kan?

Tapi belum bisa diubah yaa, kita mesti bikin proses_edit.php juga hehe ini coding nya :

<?php
// memanggil file koneksi.php untuk melakukan koneksi database
include 'koneksi.php';

// membuat variabel untuk menampung data dari form


$id = $_POST['id'];
$nama_produk = $_POST['nama_produk'];
$deskripsi = $_POST['deskripsi'];
$harga_beli = $_POST['harga_beli'];
$harga_jual = $_POST['harga_jual'];
$gambar_produk = $_FILES['gambar_produk']['name'];
//cek dulu jika merubah gambar produk jalankan coding ini
if($gambar_produk != "") {
$ekstensi_diperbolehkan = array('png','jpg'); //ekstensi file gambar yang bisa
diupload
$x = explode('.', $gambar_produk); //memisahkan nama file dengan ekstensi yang
diupload
$ekstensi = strtolower(end($x));
$file_tmp = $_FILES['gambar_produk']['tmp_name'];
$angka_acak = rand(1,999);
$nama_gambar_baru = $angka_acak.'-'.$gambar_produk; //menggabungkan angka acak
dengan nama file sebenarnya
if(in_array($ekstensi, $ekstensi_diperbolehkan) === true) {
move_uploaded_file($file_tmp, 'gambar/'.$nama_gambar_baru);
//memindah file gambar ke folder gambar

// jalankan query UPDATE berdasarkan ID yang produknya kita edit


$query = "UPDATE produk SET nama_produk = '$nama_produk', deskripsi
= '$deskripsi', harga_beli = '$harga_beli', harga_jual = '$harga_jual', gambar_produk
= '$nama_gambar_baru'";
$query .= "WHERE id = '$id'";
$result = mysqli_query($koneksi, $query);
// periska query apakah ada error
if(!$result){
die ("Query gagal dijalankan: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
//tampil alert dan akan redirect ke halaman index.php
//silahkan ganti index.php sesuai halaman yang akan dituju
echo "<script>alert('Data berhasil
diubah.');window.location='index.php';</script>";
}
} else {
//jika file ekstensi tidak jpg dan png maka alert ini yang tampil

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


echo "<script>alert('Ekstensi gambar yang boleh hanya jpg atau
png.');window.location='tambah_produk.php';</script>";
}
} else {
// jalankan query UPDATE berdasarkan ID yang produknya kita edit
$query = "UPDATE produk SET nama_produk = '$nama_produk', deskripsi =
'$deskripsi', harga_beli = '$harga_beli', harga_jual = '$harga_jual'";
$query .= "WHERE id = '$id'";
$result = mysqli_query($koneksi, $query);
// periska query apakah ada error
if(!$result){
die ("Query gagal dijalankan: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
//tampil alert dan akan redirect ke halaman index.php
//silahkan ganti index.php sesuai halaman yang akan dituju
echo "<script>alert('Data berhasil
diubah.');window.location='index.php';</script>";
}
}

Penjelasan :

• Jadi pada Edit ini, menampilkan data sesuai dengan produk yang kita ingin edit
pada tampil produk. Misal produk indomie, yang tampil pasti datanya indomie
• Pada Proses edit ini kurang lebih dengan proses tambah tetapi beda hanya di
query mysql nya saja, yang tambah menggunakan INSERT sedangkan yang edit
menggunakan UPDATE

Jadiii Edit udah juga nih, coba sekarang kamu edit duluu salah satunya..

Lanjut? Oke lanjut ke hapus, coba kamu bikin lagi dengan nama file proses_hapus.php

<?php
include 'koneksi.php';
$id = $_GET["id"];
//mengambil id yang ingin dihapus

//jalankan query DELETE untuk menghapus data


$query = "DELETE FROM produk WHERE id='$id' ";
$hasil_query = mysqli_query($koneksi, $query);

//periksa query, apakah ada kesalahan

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0


if(!$hasil_query) {
die ("Gagal menghapus data: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
echo "<script>alert('Data berhasil
dihapus.');window.location='index.php';</script>";
}

Langsung disimpan

Created By: Yendi Putra, S.Kom., M.Kom,MTA Versi 1.0.0

Anda mungkin juga menyukai