Insert & Read Data Mysql Menggunakan PHP

Setelah kemarin kita membahas bagaimana cara membuat koneksi ke database, kini kita belajar bagaimana memasukkan data dari form ke database kemudian kita akan menampilkannya .

Baca sebelumnya Membuat Koneksi Database MySql dengan PHP.

1. Buat Folder CRUD di Xampp

Yang pertama kita akan membuat folder di xampp agar lebih terstruktur. Buatlah folder bernama CRUD kemudian copy-kan file koneksi.php ke dalam folder tersebut.

Sebelum lanjut kita akan membuat tabel terlebih dahulu secara manual ke database. Buatlah tabel dengan nama tbuser dengan berisi field username, email, dan password.

CREATE TABLE `user` (
  `username` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `password` text NOT NULL
)

2. Buat File Input.php

Kemudian kita akan membuat file input.php simpan di folder CRUD yang telah kita buat. Kita akan memakai framework bootstrap untuk tampilan css nya.

Copy link dibawah atau bisa langsung download bootstrap disini

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Kemudian kita akan membuat form untuk menampung data yang akan diinputkan ke database.

<div class="container">
	<form method="post" action="">
	  <div class="form-group">
	    <label >Username</label>
	    <input type="text" class="form-control">
	    <small class="form-text text-muted">Masukkan username anda.</small>
	  </div>
	  <div class="form-group">
	    <label >Email address</label>
	    <input type="email" class="form-control">
	    <small class="form-text text-muted">Masukkan email address yang valid.</small>
	  </div>
	  <div class="form-group">
	    <label>Password</label>
	    <input type="password" class="form-control">
	  </div>
	  <button type="submit" class="btn btn-primary">Submit</button>
	</form>
</div>

Sesuai dengan field yang ada didatabase kita membuat form yang berisi kolom username, email, dan password. Kemudian kita buat method di formnya menjadi post. Berikut kode lengkap nya

<!DOCTYPE html>
<html>
<head>
	<title>Input</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<form method="post" action="">
		  <div class="form-group">
		    <label >Username</label>
		    <input type="text" class="form-control">
		    <small class="form-text text-muted">Masukkan username anda.</small>
		  </div>
		  <div class="form-group">
		    <label >Email address</label>
		    <input type="email" class="form-control">
		    <small class="form-text text-muted">Masukkan email address yang valid.</small>
		  </div>
		  <div class="form-group">
		    <label>Password</label>
		    <input type="password" class="form-control">
		  </div>
		  <button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Selanjutnya kita akan menampung data yang dikirimkan oleh form dan kemudian memproses nya masuk ke dalam tabel yang sudah kita buat.

<?php 
	
	if ($_POST) {
		
	}

 ?>

Kita akan membuat kondisi dimana jika tombol submit di klik maka script php yang kita buat memproses data dari form.

Kemudian kita membuat variabel yang akan menampung data dari kolom yang sudah diisi oleh user.

$username = $_POST["username"];
$email = $_POST["email"];
$password = $_POST["password"];

Setelah kita menampung data ke variabel, kita akan memasukkan data tersebut ke database dengan menggunakan fungsi mysqli .

$sql = "insert into user values ('$username','$email','$password')";
$res = mysqli_query($con,$sql);
if ($res) {
	echo "Berhasil insert data";
} else {
	echo "Gagal saat insert ke database";
}

Simpan halaman nya kemudian kita akan mengetes memasukkan data ke database lewat form yang sudah kita buat.

Form Input
Berhasil input data ke database

Selanjutnya kita akan menampilkan data yang sudah kita input dari database, buat tabel seperti di bawah :

<div class="container" style="margin-top: 20px;">
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>No</th>
				<th>Username</th>
				<th>Email</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th></th>
				<th></th>
				<th></th>
			</tr>
		</tbody>
	</table>
</div>

Kita akan menggunakan fungsi mysqli_fetch_assoc dan untuk perulangan nya menggunakan while.

<?php 
	$no = 1;
	$sqlSelect = "select * from user";
	$resSelect = mysqli_query($con,$sqlSelect);
	while ($data=mysqli_fetch_assoc($resSelect)) {
	    
 ?>
<tr>
	<th><?php echo $no; ?></th>
	<th><?php echo $data["username"] ?></th>
	<th><?php echo $data["email"] ?></th>
</tr>
<?php $no++; } ?>

Kemudian simpan halaman dan refresh halaman yg sudah kita buat dibrowser.

Berikut kode lengkap nya .

<?php include "koneksi.php"; ?>
<!DOCTYPE html>
<html>
<head>
	<title>Input</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
	
	<div class="container">

		<?php 
	
			if ($_POST) {
				

				$username = $_POST["username"];
				$email = $_POST["email"];
				$password = $_POST["password"];

				$sql = "insert into user values ('$username','$email','$password')";
				$res = mysqli_query($con,$sql);
				if ($res) {
					echo "<div class='alert alert-success' role='alert' style='margin-top: 20px;'>
							  Berhasil menyimpan data ke database.
							</div>";
				} else {
					echo "Gagal saat insert ke database";
				}

			}

		 ?>

		<form method="post" action="">
		  <div class="form-group">
		    <label >Username</label>
		    <input type="text" class="form-control" name="username">
		    <small class="form-text text-muted">Masukkan username anda.</small>
		  </div>
		  <div class="form-group">
		    <label >Email address</label>
		    <input type="email" class="form-control" name="email">
		    <small class="form-text text-muted">Masukkan email address yang valid.</small>
		  </div>
		  <div class="form-group">
		    <label>Password</label>
		    <input type="password" class="form-control" name="password">
		  </div>
		  <button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
	<div class="container" style="margin-top: 20px;">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>No</th>
					<th>Username</th>
					<th>Email</th>
				</tr>
			</thead>
			<tbody>
				<?php 
					$no = 1;
					$sqlSelect = "select * from user";
					$resSelect = mysqli_query($con,$sqlSelect);
					while ($data=mysqli_fetch_assoc($resSelect)) {
					    
				 ?>
				<tr>
					<th><?php echo $no; ?></th>
					<th><?php echo $data["username"] ?></th>
					<th><?php echo $data["email"] ?></th>
				</tr>
				<?php $no++; } ?>
			</tbody>
		</table>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Source code dapat diunduh disini.

Kita selesai membuat Insert & Read dari database menggunakan PHP, Semoga membantu.

Tinggalkan Balasan:

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *