CRUD PHP 7 Sederhana dengan Bootstrap 4 - Tutorial Web

07 Jan, 2021

PHP

Hirzi Widyan Putra

Tutorial Web kali ini membuat CRUD PHP 7 dengan Bootstrap 4 ya, sederhana saja yang penting udah bisa digunakan untuk belajar hehe saya udah buat sesimple mungkin, semoga bisa dipahami. Oiya ada versi youtube juga bisa klik link disini youtube crud php 7 + bootstrap 4 sederhana, jadi kalau mau lihat proses detailnya dari awal sampai selesai silahkan buka diyoutube
Tutorial kali ini kurang lebih dengan tutorial sebelumnya, tapi ini hanya lebih sederhana dan juga udah pake bootstrap 4, okee lanjuuut...

Yang perlu disiapkan :
- Xampp versi terbaru (Minimal PHP 7)
- Bootstrap 4 CSS & JS Download di : https://getbootstrap.com/docs/4.1/getting-started/download/
- Jquery Download di : https://jquery.com/download/
- Boostrap 4 Dokumentasi di : https://getbootstrap.com/docs/4.0/components/alerts/
- Text Editor (Sublime Text, Atom, VSCode, dll) senyamannya kalian saja pakai yang mana
- Ketelitian (Sebagai Programmer Pemula, ini sangat wajib kalian terapkan disemua bahasa pemrogramman)

Langsung prakteknya :
#database

1. Buat database dengan nama db_crud

database-php-crud

2. buat tabel dengan nama barang dan strukturnya seperti ini :

database-barang

#bootstrap & jquery

1. Buat sebuah folder dengan nama crudphp didalam folder htdocs kalian seperti ini :

boostrap-php

2. Oke kalau sudah kita download dlu bootstrap 4 di link yang ada diatas ya, terdapatlah file css & js bootstrap 4 seperti ini :

3. Agar terbiasa rapi, buat folder assets didalam folder crudphp tadi dan letakkan folder css & js bootstrap ke dalam folder assets seperti ini :

4. Download file Jquery, letakkan dalam folder assets/js

crud-js-bootstrap

Note : Versi Jquery nya bebas bisa pakai 3.4.1 atau 3.5.1

#koneksi

1. buat file koneksi.php di dalam folder crudphp, isinya :

<?php

$server 	= "localhost";
$username	= "root";
$password	= "";
$db 		= "db_crud"; //sesuaikan nama databasenya
$koneksi = mysqli_connect($server, $username, $password, $db); //pastikan urutan pemanggilan variabel nya sama.

//untuk cek jika koneksi gagal ke database
if(mysqli_connect_errno()) {
	echo "Koneksi gagal : ".mysqli_connect_error();
}

#tampilan bootstrap & proses php

1. buat file baru dan save dengan nama index.php

koneksi-php-7

2. Buat struktur HTML dan pemanggilan CSS JS Bootstrap & Jquery seperti ini :

<!DOCTYPE html>
<html>
<head>
	<title>GILACODING</title>
</head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<body>
	
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>

3. Buat bagian container dan tabel dengan bootstrap (link dokumentasi bootstrap ada diatas)

<!DOCTYPE html>
<html>
<head>
	<title>GILACODING</title>
</head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<body>
	<div class="container col-md-6 mt-4">
		<h1>TABEL GILACODING</h1>
		<div class="card">
			<div class="card-header bg-success text-white ">
				DATA BARANG <a href="tambah.php" class="btn btn-sm btn-primary float-right">Tambah</a>
			</div>
			<div class="card-body">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>No</th>
							<th>Nama Barang</th>
							<th>Harga</th>
							<th>Deskripsi</th>
							<th>Aksi</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>


<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>

coba liat di browser apakah hasilnya udah sama seperti dibawah ini? kalau belum coba teliti lagi ya ikutin diatas

5. Panggil link nya : http://localhost/crudphp/index.php

index-php-crud

6. Klo udah, lanjut panggil koneksi dan tampilkan data dari database ke index.php dibagian <tbody> </tbody> seperti ini jadi coding index.php secara full :

<!DOCTYPE html>
<html>
<head>
	<title>GILACODING</title>
</head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<body>
	<div class="container col-md-6 mt-4">
		<h1>TABEL GILACODING</h1>
		<div class="card">
			<div class="card-header bg-success text-white ">
				DATA BARANG <a href="tambah.php" class="btn btn-sm btn-primary float-right">Tambah</a>
			</div>
			<div class="card-body">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>No</th>
							<th>Nama Barang</th>
							<th>Harga</th>
							<th>Deskripsi</th>
							<th>Aksi</th>
						</tr>
					</thead>
					<tbody>
						<?php
							include('koneksi.php'); //memanggil file koneksi
							$datas = mysqli_query($koneksi, "select * from barang") or die(mysqli_error($koneksi));
							//script untuk menampilkan data barang

							$no = 1;//untuk pengurutan nomor

							//melakukan perulangan
							while($row = mysqli_fetch_assoc($datas)) {
						?>	

					<tr>
						<td><?= $no; ?></td>
						<td><?= $row['nama']; //untuk menampilkan nama ?></td>
						<td>Rp <?= $row['harga']; ?></td>
						<td><?= $row['deskripsi']; ?></td>
						<td>
								<a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-sm btn-warning">Edit</a>
								<a href="hapus.php?id=<?= $row['id']; ?>" class="btn btn-sm btn-danger" onclick="return confirm('anda yakin ingin hapus?');">Hapus</a>
						</td>
					</tr>

						<?php $no++; } ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>

Keterangan :
- Data akan tampil kalau kita udah nambahin data nya di database
- Penjelasan php nya ada didalam coding langsung
- pada index.php ini saya sudah langsung menambahkan link untuk tambah, edit, hapus jadi kita tinggal membuat file dari tambah, edit dan hapus saja

7. Selanjutnya kita membuat halaman tambah, buat file dengan nama tambah.php , proses nya masih sama yaitu kita harus memanggil css & js dari bootstrap, yang berubah hanya bagian didalam body disesuaikan untuk form dan proses php

<!DOCTYPE html>
<html>

<head>
	<title>GILACODING</title>
</head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

<body>
	<div class="container col-md-6 mt-4">
		<h1>Table Barang</h1>
		<div class="card">
			<div class="card-header bg-success text-white">
				Tambah Barang
			</div>
			<div class="card-body">
				<form action="" method="post" role="form">
					<div class="form-group">
						<label>Nama</label>
						<input type="text" name="nama" required="" class="form-control">
					</div>
					<div class="form-group">
						<label>Harga</label>
						<input type="text" name="harga" class="form-control">
					</div>

					<div class="form-group">
						<label>Deskripsi</label>
						<textarea class="form-control" name="deskripsi"></textarea>
					</div>

					<button type="submit" class="btn btn-primary" name="submit" value="simpan">Simpan data</button>
				</form>

				<?php
				include('koneksi.php');
				
				//melakukan pengecekan jika button submit diklik maka akan menjalankan perintah simpan dibawah ini
				if (isset($_POST['submit'])) {
					//menampung data dari inputan
					$nama = $_POST['nama'];
					$harga = $_POST['harga'];
					$deskripsi = $_POST['deskripsi'];

					//query untuk menambahkan barang ke database, pastikan urutan nya sama dengan di database
					$datas = mysqli_query($koneksi, "insert into barang (nama,harga,deskripsi)values('$nama', '$harga', '$deskripsi')") or die(mysqli_error($koneksi));
					//id barang tidak dimasukkan, karena sudah menggunakan AUTO_INCREMENT, id akan otomatis

					//ini untuk menampilkan alert berhasil dan redirect ke halaman index
					echo "<script>alert('data berhasil disimpan.');window.location='index.php';</script>";
				}
				?>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>

</html>

hasil dari tambah.php

tambah-php

Silahkan coba di klik button tambah datanya, kalau sudah berhasil silahkan lanjut ke bagian edit.

8. Buat file lagi dengan nama edit.php

<!DOCTYPE html>
<html>

<head>
	<title>GILACODING</title>
</head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

<body>
	<div class="container col-md-6 mt-4">
		<h1>Table Barang</h1>
		<div class="card">
			<div class="card-header bg-success text-white ">
				Edit Barang
			</div>
			<div class="card-body">
				<?php
				include('koneksi.php');

				$id = $_GET['id']; //mengambil id barang yang ingin diubah

				//menampilkan barang berdasarkan id
				$data = mysqli_query($koneksi, "select * from barang where id = '$id'");
				$row = mysqli_fetch_assoc($data);

				?>
				<form action="" method="post" role="form">
					<div class="form-group">
						<label>Nama</label>
						<!--  menampilkan nama barang -->
						<input type="text" name="nama" required="" class="form-control" value="<?= $row['nama']; ?>">

						<!-- ini digunakan untuk menampung id yang ingin diubah -->
						<input type="hidden" name="id" required="" value="<?= $row['id']; ?>">
					</div>
					<div class="form-group">
						<label>Harga</label>
						<input type="text" name="harga" class="form-control" value="<?= $row['harga']; ?>">
					</div>

					<div class="form-group">
						<label>Deskripsi</label>
						<textarea class="form-control" name="deskripsi"><?= $row['deskripsi']; ?></textarea>
					</div>
					<button type="submit" class="btn btn-primary" name="submit" value="simpan">update data</button>
				</form>

				<?php

				//jika klik tombol submit maka akan melakukan perubahan
				if (isset($_POST['submit'])) {
					$id = $_POST['id'];
					$nama = $_POST['nama'];
					$harga = $_POST['harga'];
					$deskripsi = $_POST['deskripsi'];

					//query mengubah barang
					mysqli_query($koneksi, "update barang set nama='$nama', harga='$harga', deskripsi='$deskripsi' where id ='$id'") or die(mysqli_error($koneksi));

					//redirect ke halaman index.php
					echo "<script>alert('data berhasil diupdate.');window.location='index.php';</script>";
				}



				?>
			</div>
		</div>
	</div>


	<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>

</html>

Lanjut klik link atau button edit dengan data yang ingin diubah :

9. Buat file terakhir dengan nama hapus.php

<?php				
			include 'koneksi.php'; //menghubungkan ke file koneksi untuk ke database
			$id = $_GET['id']; //menampung id

			//query hapus
			$datas = mysqli_query($koneksi, "delete from barang where id ='$id'") or die(mysqli_error($koneksi));

			//alert dan redirect ke index.php
			echo "<script>alert('data berhasil dihapus.');window.location='index.php';</script>";
	?>

Selesai deh sob! Kalau kurang jelas silahkan tonton video diyoutube ya, kalau masih belum jelas juga silahkan tanyakan saja sob dikolom komentar youtube atau dikomen sini...

Maaf jika masih terdapat kesalahan kata/penyebutan, karena kita masih sama-sama belajar sob! Terima Kasih sobat gilacoding!

Untuk yang mau download project nya bisa disini : https://github.com/herziwp/crud-php7-bootstrap4

Read CRUD PHP 7 Sederhana dengan Bootstrap 4 - Tutorial Web

CRUD PHP 7 Sederhana dengan Bootstrap 4 - Tutorial Web