LAPORAN PRAKTIKUM
PENGEMBANGAN APLIKASI WEB
MODUL 5
Disusun Oleh:
Nama: Walid Rijal Awali
NIM: 210411100143
Kelas: PAW F
Dosen Pengampu:
Nama: Devie Rosa Anamisa, S.Kom., M.Kom.
NIP: 19841104 200812 2 003
Asisten Praktikum:
Nama: Taufiqu Reza Yoga P.
NIM: 210411100014
PRODI TEKNIK INFORMATIKA
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
2023
1. Code Program
<?php
$koneksi = mysqli_connect("localhost","root","","praktikum");
// if ($koneksi){
// echo "koneksi berhasil";
// }else{
// echo "koneksi gagal";
// }
$query = "SELECT * FROM supplier";
$hasil = mysqli_query($koneksi,$query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Data Master Supplier</title>
<style>
.header {
display: flex;
justify-content: space-between;
align-items: center;
.header h1 {
margin: 0;
margin-bottom: 16px;
th{
background-color: pink;
table {
border: 1px solid #000; /* Tambahkan border ke tabel */
border-collapse: collapse; /* Untuk menggabungkan batas
antar sel */
width: 100%;
th, td {
border: 1px solid #000; /* Tambahkan border ke sel tabel */
padding: 10px;
text-align: left;
#edit{
border-style: solid;
border-radius: 6px;
padding: 6px;
text-decoration: none;
border-color: orangered;
color: whitesmoke;
background-color: orangered;
#delete{
border-style: solid;
border-radius: 6px;
padding: 6px;
text-decoration: none;
border-color: red;
color: whitesmoke;
background-color: red;
#tambah{
border-style: solid;
border-radius: 6px;
padding: 6px;
text-decoration: none;
border-color: green;
color: whitesmoke;
background-color: green;
</style>
</head>
<body>
<div class="header">
<h1>Data Master Supplier</h1>
<a href="tambah.php" id="tambah">Tambah Data</a>
</div>
<table>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Telepon</th>
<th>Alamat</th>
<th>Tindakan</th>
</tr>
<?php while($row = mysqli_fetch_assoc($hasil))
?>
<tr>
<td><?= $row['id']; ?></td>
<td><?= $row['nama']; ?></td>
<td><?= $row['telp']; ?></td>
<td><?= $row['alamat']; ?></td>
<td>
<a href="edit.php?id=<?= $row['id']; ?>"
id="edit">Edit</a>
<a href="hapus.php?id=<?= $row['id']; ?>"
id="delete">Delete</a>
</td>
</tr>
<?php } ?>
</table>
</body>
</html>
Penjelasan Code Program:
1. Terdapat koneksi ke database MySQL dengan menggunakan
`mysqli_connect`.
2. Dilakukan query SQL untuk mengambil data dari tabel `supplier`.
3. Data supplier diambil menggunakan `mysqli_fetch_assoc` dan ditampilkan
dalam bentuk tabel HTML.
4. Tabel menampilkan informasi seperti nomor, nama, telepon, alamat, dan
tindakan (Edit dan Delete) untuk setiap data supplier.
5. Tombol "Tambah Data" digunakan untuk menuju halaman `tambah.php`
untuk menambahkan data supplier baru.
6. Tombol "Edit" digunakan untuk mengedit data supplier yang mengarah ke
halaman `edit.php?id=[ID Supplier]`.
7. Tombol "Delete" mengarah ke halaman `hapus.php?id=[ID Supplier]` yang
akan menghapus data supplier berdasarkan ID-nya setelah konfirmasi.
8. Ini adalah halaman yang menampilkan data supplier dan memberikan akses
untuk mengedit atau menghapus data.
Hasil Running Program:
2. Code Program
<?php
$koneksi = mysqli_connect("localhost","root","","praktikum");
$idbaru = mysqli_fetch_assoc(mysqli_query($koneksi, "SELECT MAX(id) AS
max_id FROM supplier"))['max_id'];
if (is_null($idbaru)) {
$idbaru = 1;
} else {
$idbaru = $idbaru + 1;
if (isset($_POST['simpan'])){
$id = $_POST['id'];
$nama = $_POST['nama'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];
// query memasukkan data ke dalam database
$sql = "INSERT INTO supplier
VALUES('$id','$nama','$telp',
'$alamat')";
//eksekusi query
$hasil = mysqli_query($koneksi,$sql);
if ($hasil){
header ("Location: data.php");
}else {
echo "data gagal ditambahkan";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>tambah Data</title>
<style>
table {
border-collapse: collapse; /* Untuk menggabungkan batas
antar sel */
width: 50%;
position: relative;
margin: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Menambahkan
bayangan */
td {
padding: 10px;
text-align: left;
th{
border-bottom: 1px solid #000 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
background-color: pink;
/* Mengubah warna latar belakang tombol "Ubah" */
button[name="simpan"] {
background-color: green; /* Ganti dengan warna yang
diinginkan */
color: #fff; /* Warna teks pada tombol "Ubah" */
border: 1px solid #2980b9; /* Mengubah gaya border tombol
"Ubah" */
border-radius: 5px; /* Mengatur sudut melengkung pada
border */
padding: 6px 15px; /* Mengatur padding tombol */
/* Mengubah warna latar belakang tombol "Batal" */
button[name="batal"] {
background-color: red; /* Ganti dengan warna yang
diinginkan */
color: #fff; /* Warna teks pada tombol "Batal" */
border: 1px solid #2980b9; /* Mengubah gaya border tombol
"Ubah" */
border-radius: 5px; /* Mengatur sudut melengkung pada
border */
padding: 6px 15px; /* Mengatur padding tombol */
</style>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<th colspan="3">
<h1>Tambah Data Master Supplier Baru</h1>
</th>
</tr>
<tr>
<td>
Id Supplier
</td>
<td>
</td>
<td>
<input type="text" name="id" value="<?php echo
$idbaru; ?>" readonly>
</td>
</tr>
<tr>
<td>
Nama Supplier
</td>
<td>
:
</td>
<td>
<input type="text" name="nama">
</td>
</tr>
<tr>
<td>
Telepon
</td>
<td>
</td>
<td>
<input type="text" name="telp">
</td>
</tr>
<tr>
<td>
Alamat
</td>
<td>
</td>
<td>
<input type="text" name="alamat">
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" name="simpan">Simpan</button>
<button type="button" name="batal"
onclick="location.href='data.php'">Batal</button>
</td>
</tr>
</table>
</form>
</body>
</html>
Penjelasan Code Program:
Code di atas adalah halaman `tambah.php` yang digunakan untuk menambahkan
data supplier baru ke dalam database. Berikut penjelasan singkat tentang kode
tersebut:
1. Terdapat koneksi ke database MySQL dengan menggunakan `mysqli_connect`.
2. Kode digunakan untuk menghasilkan ID baru untuk supplier dengan
mengambil ID maksimum yang ada di database dan menambahkannya dengan 1.
Ini akan menjadi ID supplier yang akan ditambahkan.
3. Jika tombol "Simpan" ditekan, maka data yang dimasukkan ke dalam formulir
akan diambil, dan sebuah query SQL `INSERT` akan dieksekusi untuk
menambahkan data baru ke dalam tabel `supplier`.
4. Setelah berhasil menambahkan data, pengguna akan diarahkan kembali ke
halaman `data.php` dengan menggunakan `header("Location: data.php")`.
5. Halaman HTML menampilkan formulir dengan input untuk nama supplier,
telepon, dan alamat. ID supplier ditampilkan tetapi diatur menjadi readonly dan
dihasilkan otomatis.
6. Terdapat dua tombol, yaitu "Simpan" untuk menyimpan data dan "Batal" untuk
membatalkan operasi dan kembali ke halaman data supplier.
Hasil Running Program:
3. Code Program
<?php
$koneksi = mysqli_connect("localhost","root","","praktikum");
$id = $_GET["id"];
$query = "SELECT * FROM supplier WHERE id = $id";
$hasil = mysqli_query($koneksi,$query);
// $row = mysqli_fetch_assoc($hasil);
// var_dump($row);
if (isset($_POST['submit'])){
$id = $_POST['id'];
$nama = $_POST['nama'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];
// query memasukkan data ke dalam database
$sql = "UPDATE supplier SET id = '$id',nama = '$nama', telp =
'$telp',alamat = '$alamat' WHERE id = $id";
//eksekusi query
$hasil = mysqli_query($koneksi,$sql);
if ($hasil){
header ("Location: data.php");
}else {
echo "data gagal diubah";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Edit Data</title>
<style>
table {
border-collapse: collapse; /* Untuk menggabungkan batas
antar sel */
width: 50%;
position: relative;
margin: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Menambahkan
bayangan */
td {
padding: 10px;
text-align: left;
th{
border-bottom: 1px solid #000 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
background-color: pink;
/* Mengubah warna latar belakang tombol "Ubah" */
button[name="submit"] {
background-color: green; /* Ganti dengan warna yang
diinginkan */
color: #fff; /* Warna teks pada tombol "Ubah" */
border: 1px solid #2980b9; /* Mengubah gaya border tombol
"Ubah" */
border-radius: 5px; /* Mengatur sudut melengkung pada
border */
padding: 6px 15px; /* Mengatur padding tombol */
/* Mengubah warna latar belakang tombol "Batal" */
button[name="batal"] {
background-color: red; /* Ganti dengan warna yang
diinginkan */
color: #fff; /* Warna teks pada tombol "Batal" */
border: 1px solid #2980b9; /* Mengubah gaya border tombol
"Ubah" */
border-radius: 5px; /* Mengatur sudut melengkung pada
border */
padding: 6px 15px; /* Mengatur padding tombol */
</style>
</head>
<body>
<?php
while($baris = mysqli_fetch_assoc($hasil)):
?>
<form action="" method="post">
<table>
<tr>
<th colspan="3">
<h1>Edit Data Master Supplier</h1>
</th>
</tr>
<tr>
<td>
Id Supplier
</td>
<td>
</td>
<td>
<input type="text" name="id" value="<?=
$baris['id'] ?>" readonly>
</td>
</tr>
<tr>
<td>
Nama Supplier
</td>
<td>
</td>
<td>
<input type="text" name="nama" value="<?=
$baris['nama'] ?>">
</td>
</tr>
<tr>
<td>
Telepon
</td>
<td>
</td>
<td>
<input type="text" name="telp" value="<?=
$baris['telp'] ?>">
</td>
</tr>
<tr>
<td>
Alamat
</td>
<td>
</td>
<td>
<input type="text" name="alamat" value="<?=
$baris['alamat'] ?>">
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" name="submit">Update</button>
<button type="button" name="batal"
onclick="location.href='data.php'">Batal</button>
</td>
</tr>
</table>
</form>
<?php endwhile; ?>
</body>
</html>
Penjelasan Code Program:
Code di atas adalah halaman `edit.php` yang digunakan untuk mengedit data
supplier yang sudah ada di dalam database. Berikut penjelasan singkat tentang
kode tersebut:
1. Terdapat koneksi ke database MySQL dengan menggunakan `mysqli_connect`.
2. Parameter `id` dari URL digunakan untuk mengambil data supplier yang akan
diedit dengan menggunakannya dalam query SQL untuk memilih data dari tabel
`supplier`.
3. Setelah mengeksekusi query, data supplier yang sesuai akan ditampilkan dalam
formulir, dan pengguna dapat mengedit data ini.
4. Jika tombol "Update" ditekan, data yang diubah dalam formulir akan diambil,
dan sebuah query SQL `UPDATE` akan dieksekusi untuk memperbarui data
supplier di dalam tabel `supplier`.
5. Setelah berhasil memperbarui data, pengguna akan diarahkan kembali ke
halaman `data.php` dengan menggunakan `header("Location: data.php")`.
6. Halaman HTML menampilkan formulir dengan data supplier yang akan diubah.
Pengguna dapat mengedit informasi supplier di sini.
7. Terdapat dua tombol, yaitu "Update" untuk menyimpan perubahan data dan
"Batal" untuk membatalkan operasi dan kembali ke halaman data supplier.
Hasil Running Program:
4. Code Program
1. Hapus.php
<?php
$koneksi = mysqli_connect("localhost", "root", "", "praktikum");
$id = $_GET['id'];
// Cek apakah ada parameter "id" dalam URL
if (isset($id)) {
// Tampilkan pesan konfirmasi menggunakan JavaScript
echo '<script>
var konfirmasi = confirm("Apakah Anda yakin ingin menghapus data
ini?");
if (konfirmasi) {
window.location.href = "hapuslanjut.php?id=' . $id . '"; //
Redirect ke halaman penghapusan jika OK ditekan
} else {
window.location.href = "data.php"; // Kembali ke halaman data
jika Batal ditekan
</script>';
?>
2. Hapuslanjut.php
<?php
$errors = array();
if (isset($_POST["submit"])){
include "validatee.php";
validateName($errors, $_POST, "username");
if($errors){
include "formm.php";
echo "<h2>Errors</h2>";
foreach($errors as $error => $value){
echo $error. " : " . $value . "<br>";
} else{
echo "<h2> Success </h2>";
} else{
include "formm.php";
?>
Penjelasan Code Program:
1. Hapus.php
Kode di atas digunakan untuk mengkonfirmasi penghapusan data dari
database. Ini terjadi jika ada parameter "id" dalam URL. Ketika halaman
dimuat, kode JavaScript akan menampilkan dialog konfirmasi dengan pesan
"Apakah Anda yakin ingin menghapus data ini?". Jika pengguna mengklik
"OK", maka halaman akan diarahkan ke `hapuslanjut.php?id=[id]` untuk
melanjutkan proses penghapusan data. Jika pengguna memilih "Batal", maka
mereka akan diarahkan kembali ke halaman data (`data.php`) tanpa
melakukan penghapusan.
2. Hapuslanjut.php
Kode di atas digunakan untuk menghapus data dari database. Pertama, kode
mengambil parameter "id" dari URL. Kemudian, kode menjalankan query
SQL untuk menghapus data dengan ID yang sesuai. Jika penghapusan
berhasil, pengguna akan diarahkan kembali ke halaman "data.php." Jika
penghapusan gagal, pesan "data gagal dihapus" akan ditampilkan.
Hasil Running Program:
