Scribd
Upload
27 views12 pages

Bab 8 - Crud Ii

Uploaded by

fahmirifki412
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views12 pages

Bab 8 - Crud Ii

Uploaded by

fahmirifki412
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

PERTEMUAN VIII – IMPLEMENTASI CRUD DALAM PHP & REPORT

(BAGIAN 2)
Pratikan akan mempelajari tentang Implementasi CRUD (Create Read Update Delete). Tujuan
setelah mempelajari BAB ini adalah :
1. Mampu menghubungkan antara Database dengan PHP.
2. Mampu memahami penggunaan CRUD.
3. Mampu membuat Report.

A. Proses Transaction
1. Membuat file transaction-proses.php, yang berada di folder transaction.
<?php
include '../koneksi.php';

if (isset($_POST['simpan'])) {
$nama = $_POST['detail-nama'];
$nomor = $_POST['detail-nomor'];
$alamat = $_POST['detail-alamat'];
$kategori = $_POST['detail-kategori'];
$harga = $_POST['detail-harga'];
$status = $_POST['detail-status'];
$tanggal = date('Y-m-d');

$sql = "INSERT INTO tb_transaction VALUES(null,


'$nama','$nomor','$alamat', '$kategori', '$harga',
'$status','$tanggal' )";

if (empty($nama) || empty($kategori) || empty($harga) ||


empty($nomor) || empty($alamat)) {
echo "
<script>
alert('Pastikan Anda Mengisi Semua Data');
window.location = '../index.php';
</script>
";
} elseif (mysqli_query($koneksi, $sql)) {
echo "
<script>
alert('Transaction Berhasil');
window.location = '../index.php';
</script>
";
} else {
echo "
<script>
alert('Terjadi Kesalahan');
window.location = '../index.php';
</script>
";
}

1
Lab. Pemrograman Komputer ITN Malang 2024
} else {
header('location: ../index.php');
}

2. Ubah isi dari transaction.php yang ada di folder transaction


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<link rel="icon" href="../assets/icon.png" />
<link rel="stylesheet" href="../css/admin.css" />
<!-- Boxicons CDN Link -->
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Catshop Admin | Transaction</title>
</head>

<body>
<div class="sidebar">
<div class="logo-details">
<i class="bx bx-category"></i>
<span class="logo_name">CatShop</span>
</div>
<ul class="nav-links">
<li>
<a href="../admin.php" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Dashboard</span>
</a>
</li>
<li>
<a href="../categories/categories.php">
<i class="bx bx-box"></i>
<span class="links_name">Categories</span>
</a>
</li>
<li>
<a href="../transaction/transaction.php">
<i class="bx bx-list-ul"></i>
<span class="links_name">Transaction</span>
</a>
</li>
<li>
<a href="../logout.php">
<i class="bx bx-log-out"></i>
<span class="links_name">Log out</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">

2
Lab. Pemrograman Komputer ITN Malang 2024
<i class="bx bx-menu sidebarBtn"></i>
</div>
<div class="profile-details">
<span class="admin_name">Catshop Admin</span>
</div>
</nav>
<div class="home-content">
<h3>Transaction</h3>
<table class="table-data">
<thead>
<tr>
<th>Tanggal</th>
<th>Nama</th>
<th>Kategori</th>
<th>Harga</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include '../koneksi.php';
$sql = "SELECT * FROM tb_transaction";
$result = mysqli_query($koneksi, $sql);
if (mysqli_num_rows($result) == 0) {
echo "
<h3 style='text-align: center; color: red;'>Data
Kosong</h3>
";
} else {
while ($data = mysqli_fetch_assoc($result)) {
echo "
<tr>
<td>$data[tanggal]</td>
<td>$data[nama]</td>
<td>$data[jenis]</td>
<td>$data[harga]</td>
<td><p class='success'>$data[status]</p></td>
<td style='display:
none;'>$data[nomorhp]</td>
<td>
<button class='btn_detail' data-
nomorhp='$data[nomorhp]'
onclick='showDetails(\"$data[tanggal]\", \"$data[nama]\", \"$data[jeni
s]\", \"$data[harga]\", \"$data[status]\")'>Detail</button>
</td>
</tr>
";
}
}
?>
</tbody>
</table>
</div>
</section>
<script>
let sidebar = document.querySelector(".sidebar");

3
Lab. Pemrograman Komputer ITN Malang 2024
let sidebarBtn = document.querySelector(".sidebarBtn");
sidebarBtn.onclick = function() {
sidebar.classList.toggle("active");
if (sidebar.classList.contains("active")) {
sidebarBtn.classList.replace("bx-menu", "bx-menu-alt-
right");
} else sidebarBtn.classList.replace("bx-menu-alt-right", "bx-
menu");
};

function showDetails(tanggal, nama, kategori, harga, status) {


let nomorhp = event.target.getAttribute('data-nomorhp');
alert(`Tanggal: ${tanggal}\nNama: ${nama}\nKategori: $
{kategori}\nHarga: ${harga}\nNomor HP: ${nomorhp}\nStatus: $
{status}`);
}
</script>

</body>

</html>

3. Ubah source code pada index.php


<!DOCTYPE html>
<html lang="en">

<head>
<link rel="icon" href="assets/icon.png" />
<title>Home</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin />
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;700&family=Roboto:wght@500;700&display=swa
p" rel="stylesheet" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css" />
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>
<div class="container">
<header>
<nav>
<div class="logo">
<img src="assets/logo.png" alt="" />
</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>

4
Lab. Pemrograman Komputer ITN Malang 2024
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="login.php"
class="btn_login">Login</a></li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron">
<div class="jumbotron-text">
<h1>Find Your New Little Cat, Make a New
Friend</h1>
<p> Teman barumu yang lucu menunggu mu,
ayo temukan mereka sekarang
</p>
<button type="button"
class="btn_getStarted">Get Started</button>
</div>
<div class="jumbotron-img">
<img src="assets/jumbotron.png"
alt="" />
</div>
</div>
<div class="cards-categories">
<h2>Cat Categories</h2>
<div class="card-categories">
<?php
include 'koneksi.php';
$sql = "SELECT * FROM tb_categories";
$result = mysqli_query($koneksi, $sql);
if (mysqli_num_rows($result) == 0) {
echo "
<h3 style='text-align: center;
color: red;'>Data Kosong</h3>
";
}
while ($data =
mysqli_fetch_assoc($result)) {
echo "
<div class='card'>
<div class='card-image'>
<img
src='img_categories/$data[photo]' alt='tidak ada gambar' />
</div>
<div class='card-content'>

<h5>$data[categories]</h5>
<p
class='description'>$data[description]</p>
<p class='price'>
$data[price] </p>
<button
class='btn_belanja' type='submit'
onclick='bukaModal(\"id=$data[id]\")'>Beli</button>
</div>
</div>
";

5
Lab. Pemrograman Komputer ITN Malang 2024
}
?>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal-container"
onclick="tutupModal()">
<div class="modal-dialog"
onclick="event.stopPropagation()">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title "
style="color: #ffb72b;">Formulit Pembayaran</h1>
<button type="button"
class="btn-close" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<input type="hidden"
name="category_id" id="category_id" value="">
<input type="hidden"
name="category_name" id="category_name" value="">
<input type="hidden"
name="price" id="price" value="">
<div class="form-
group">
<label
class="labelmodal" for="recipient-name" class="col-form-
label">Nama :</label>
<input
class="inputdata" type="text" class="form-control" id="recipient-
name">
</div>
<div class="form-
group">
<label
class="labelmodal" for="handphone" class="col-form-label">No. Hp
:</label>
<input
class="inputdata" type="text" class="form-control" id="handphone">
</div>
<div class="form-
group">
<label
class="labelmodal" for="alamat-text"
class="col-form-label">Alamat:</label>
<textarea
class="inputalamat" class="form-control" id="alamat-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary" onclick="tutupModal()">Keluar</button>
<button type="button"
class="btn btn-yellow" onclick="bukaModal2()">Lanjutkan</button>
</div>

6
Lab. Pemrograman Komputer ITN Malang 2024
</div>
</div>
</div>
<!-- Modal 2 -->
<div id="myModal2" class="modal-container"
onclick="tutupModal2()">
<div class="modal-dialog"
onclick="event.stopPropagation()">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title"
style="color: #ffb72b;">Data Transaksi</h1>
<button type="button"
class="btn-close" aria-label="Close" onclick="tutupModal2()"></button>
</div>
<form
action="transaction/transaction-proses.php" method="post">
<div class="modal-body">
<h4> Kategori</h4>
<div class="form-
group">
<label
class="labelmodal" for="detail-kategori" class="col-form-
label">Kategori
:</label>
<input
class="inputdata" type="text" name="detail-kategori" class="form-
control" id="detail-kategori" readonly>
</div>
<div class="form-
group">
<label
class="labelmodal" for="detail-harga" class="col-form-
label">Harga :</label>
<input
class="inputdata" type="text" name="detail-harga" class="form-control"
id="detail-harga" readonly>
</div>
<h4>Pembeli</h4>
<div class="form-
group">
<label
class="labelmodal" for="detail-nama" class="col-form-label">Nama
:</label>
<input
class="inputdata" name="detail-nama" type="text" class="form-control"
id="detail-nama" readonly>
</div>
<div class="form-
group">
<label
class="labelmodal" for="detail-nomorhp" class="col-form-label">No. Hp
:</label>
<input
class="inputdata" name="detail-nomor" type="text" class="form-control"
id="detail-nomorhp" readonly>
</div>

7
Lab. Pemrograman Komputer ITN Malang 2024
<div class="form-
group">
<label
class="labelmodal" for="detail-alamat" class="col-form-
label">Alamat:</label>
<textarea
class="inputalamat" name="detail-alamat" class="form-control"
id="detail-alamat" readonly></textarea>
</div>
<input type="hidden"
name="detail-status" value="succes">

</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
onclick="kembaliKeModalPertama()">Kembali</button>
<button name="simpan"
type="submit" class="btn btn-yellow"
onclick="lakukanPembayaran()">Lakukan

Pembayaran</button>
</div>
</form>
</div>
</div>
</div>

</main>
<footer>
<h4>&copy; Lab Pemrograman Komputer 2024</h4>
</footer>
</div>
<script>
var selectedCategoryId;
// Fungsi Modal
function bukaModal(categoryId) {
console.log('categoryId:', categoryId);
selectedCategoryId = categoryId;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200)
{
var categoryData =
JSON.parse(xhr.responseText);

// Perbarui input tersembunyi

document.getElementById('category_id').value = categoryId;

document.getElementById('category_name').value =
categoryData.categories;
document.getElementById('price').value =
categoryData.price;

document.getElementById("myModal").style.display = "flex";
}

8
Lab. Pemrograman Komputer ITN Malang 2024
};
xhr.open("GET", "get_kategori.php?" + categoryId,
true);
xhr.send();
}

function tutupModal() {
document.getElementById("myModal").style.display =
"none";
}

function tutupModal2() {
document.getElementById("myModal2").style.display =
"none";
}

function bukaModal2() {
tutupModal(); // Tutup modal pertama
document.getElementById("myModal2").style.display =
"flex";

var nama = document.getElementById("recipient-


name").value;
var nomorhp =
document.getElementById("handphone").value;
var alamat = document.getElementById("alamat-
text").value;
// kategori
var kategori =
document.getElementById("category_name").value;
var harga = document.getElementById("price").value;

document.getElementById("detail-nama").value = nama;
document.getElementById("detail-nomorhp").value =
nomorhp;
document.getElementById("detail-alamat").value =
alamat;
document.getElementById("detail-kategori").value =
kategori;
document.getElementById("detail-harga").value =
harga;

function kembaliKeModalPertama() {
tutupModal2();
bukaModal();
}

function lakukanPembayaran() {
alert("Pembayaran berhasil!");
tutupModal2();
document.getElementById("recipient-name").value =
"";
document.getElementById("handphone").value = "";
document.getElementById("alamat-text").value = "";
}

9
Lab. Pemrograman Komputer ITN Malang 2024
</script>
</body>

</html>

4. Membuat file baru get_kategori.php .


<?php
include 'koneksi.php';

if (isset($_GET['id'])) {
$categoryId = $_GET['id'];

$sql = "SELECT * FROM tb_categories WHERE id = $categoryId";


$result = mysqli_query($koneksi, $sql);

if ($result) {
$data = mysqli_fetch_assoc($result);
echo json_encode($data);
} else {
echo json_encode(['error' => 'Failed to retrieve category
data.']);
}
} else {
echo json_encode(['error' => 'Category ID not provided.']);
}
?>

B. Pembuatan Report
1. Siapkan Plugin dompdf
Download di link berikut :
https://github.com/dompdf/dompdf/releases/download/v2.0.3/dompdf_2-0-3.zip
2. Ekstrak dan Copy plugin dompdf yang sudah didownload ke dalam folder dari project
catshop anda.

10
Lab. Pemrograman Komputer ITN Malang 2024
3. Buat file baru dengan nama transaction-cetak.php, kemudian tambahkan source code
dibawah ini:
<?php
include('../koneksi.php');
require_once("../dompdf/autoload.inc.php");

use Dompdf\Dompdf;

$dompdf = new Dompdf();


$query = mysqli_query($koneksi, "SELECT * FROM tb_transaction");
$html = '<center><h3>Data Transaksi</h3></center><hr/><br>';
$html .= '<table border="1" width="100%">
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Nama</th>
<th>Kategori</th>
<th>Harga</th>
<th>Status</th>
<th>Nomor HP</th>
</tr>';
$no = 1;
while ($transaction = mysqli_fetch_array($query)) {
$html .= "<tr>
<td>" . $no . "</td>
<td>" . $transaction['tanggal'] . "</td>
<td>" . $transaction['nama'] . "</td>
<td>" . $transaction['jenis'] . "</td>
<td>Rp. " . number_format($transaction['harga']) .
"</td>
<td>" . $transaction['status'] . "</td>
<td>" . $transaction['nomorhp'] . "</td>
</tr>";
$no++;
}
$html .= "</table>";
$dompdf->loadHtml($html);
// Setting ukuran dan orientasi kertas
$dompdf->setPaper('A4', 'potrait');
// Rendering dari HTML Ke PDF
$dompdf->render();
// Melakukan output file Pdf
$dompdf->stream('laporan-transaksi.pdf');
?>

4. Lakukan cetak data categories, apabila proses report berhasil maka akan menghasilkan
file pdf seperti berikut :

11
Lab. Pemrograman Komputer ITN Malang 2024
C. Tugas Praktikum
1. Buat CRUD pada data selain yang anda buat pada tugas bab sebelumnya.
2. Pada tampilan admin dashboard buat fitur widget, untuk menampilkan jumlah datapada
tabel yang dibuat.
3. Tambahkan fungsi untuk mencetak data dalam bentuk pdf pada salah satu data yang anda
Kelola di dashboard admin sesuai tema masing masing.
4. Silahkan download composer dan install pada laptop / komputer masing masing
https://getcomposer.org/download/
https://www.malasngoding.com/cara-install-composer/
5. Bukti install composer di masukkan ke tugas CRUD bagian2

12
Lab. Pemrograman Komputer ITN Malang 2024

You might also like