-->
› ›

Tutorial Sederhana Membuat Website CRUD Menggunakan PHP dan MySQL Dengan Form Validasi

By Rabu, September 25, 2019 Edit
Tutorial Sederhana Membuat Website CRUD Menggunakan PHP dan MySQL Dengan Form Validasi - Sekian lama tidak posting, kali ini saya akan membuat tutorial bagaimana cara membuat website CRUD (Create Read Update Delete) menggunakan PHP dan MySQL dengan menggunakan Form Validasi untuk setiap kolomnya.

Form Validasi digunakan untuk mengecek setiap form apakah sudah diisi dengan benar oleh user. Jika salah, maka akan muncul pesan error yang harus dibetulkan. Kalau sudah benar, maka akan lanjut proses simpan ke database MySQL.

Pertama, saya menggunakan software xampp. Maka, anda nyalakan xampp terlebih dahulu dan jalankan apache dan MySQL. Atau anda bisa menggunakan software lainnya.

Baca Juga


Oke, langsung saja kita mulai coding.

1. Membuat database

Sebagai contoh, saya menggunakan tabel user dengan kolom berisi id, nama, username, password, dan email.
table

Silahkan impor kode sql berikut ke database MySql anda :
-- phpMyAdmin SQL Dump
-- version 4.8.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Sep 25, 2019 at 09:03 AM
-- Server version: 10.1.31-MariaDB
-- PHP Version: 7.2.4
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `tugas1web5`
--
-- --------------------------------------------------------
--
-- Table structure for table `user`
--
CREATE TABLE `user` (
`id` int(11) NOT NULL,
`nama` varchar(50) NOT NULL,
`username` varchar(25) NOT NULL,
`password` varchar(25) NOT NULL,
`email` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `user`
--
--
-- Indexes for dumped tables
--
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`id`),
ADD UNIQUE KEY `username` (`username`),
ADD UNIQUE KEY `email` (`email`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
view raw tabel sql hosted with ❤ by GitHub
2. Membuat koneksi.php

Koneksi digunakan untuk menyambungkan website ke database MySql. Silahkan ketik kode berikut :
<?php
$host = "localhost"; //namahost
$user = "root"; //Username
$pass = ""; //password
$db = "tugas1web5"; //nama database
$connect = mysqli_connect($host, $user, $pass, $db);
?>
view raw koneksi.php hosted with ❤ by GitHub
Silahkan ubah $db sesuai nama database MySql yang anda buat.

3. Membuat index.php

Halaman index ini, saya buat untuk menampilkan isi tabel dari user. Terdapat menu tambah data untuk menambahkan data dan menyimpan di database. Serta menu pilihan Edit dan Hapus.

Berikut codenya :
<!DOCTYPE html>
<html>
<head>
<title>Tugas Web 1</title>
</head>
<style type="text/css">
.table{
border-collapse: collapse;
}
table.table th th , table.table tr td{
padding: 10px 20px ;
}
</style>
<body>
<h1>CRUD dengan PHP dan database MySql</h1>
<a href="tambah.php">+ Tambah Data Baru</a>
<br>
<h2>Data Tersimpan</h2>
<table border="1" class="table">
<tr>
<th>Nama</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>Aksi</th>
</tr>
<?php
include 'koneksi.php';
$query = "SELECT * FROM user";
$sql = mysqli_query($connect, $query);
while ($data = mysqli_fetch_array($sql)) {
?>
<tr>
<td><?php echo $data['nama']; ?></td>
<td><?php echo $data['username']; ?></td>
<td><?php echo $data['password']; ?></td>
<td><?php echo $data['email']; ?></td>
<td>
<a class="edit" href="ubah.php?id=<?php echo $data['id']; ?>">Edit</a> |
<a class="hapus" href="hapus.php?id=<?php echo $data['id']; ?>">Hapus</a>
</td>
</tr>
<?php } ?>
</table>
</body>
</html>
view raw index.php hosted with ❤ by GitHub
Saya menggunakan perulangan while untuk menampilkan data yang banyak di tabel user.

4. Membuat tambah.php

Tambah.php digunakan untuk menambahkan data user dan kemudian disimpan ke database MySQL.
Berikut codenya :
<!DOCTYPE html>
<html>
<head>
<title>Tambah Data</title>
</head>
<style type="text/css">
.sukses {
color: #00822b;
}
.error {
color: #FF0000;
}
</style>
<body>
<h1>Tambah Data</h1>
<?php
include 'koneksi.php';
if (isset($_POST['save'])) {
$nama = $_POST['nama'];
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
if(empty($nama) || empty($username) || empty($password) || empty($email)){
echo "<h3 class=\"error\">* Data belum lengkap, silahkan lengkapi data anda</h3>";
echo "<script>var timer = setTimeout(function(){window.location='tambah.php'}, 3000); </script>";
}elseif(!preg_match("/^[a-zA-Z ]*$/",$nama)){
echo "<h3 class=\"error\">* Nama hanya boleh menggunakan huruf dan spasi saja</h3>";
echo "<script>var timer = setTimeout(function(){window.location='tambah.php'}, 3000); </script>";
}elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<h3 class=\"error\">* Email anda tidak valid contoh : evanfauzi@gmail.com</h3>";
echo "<script>var timer = setTimeout(function(){window.location='tambah.php'}, 3000); </script>";
}elseif (!preg_match("/^[a-zA-Z]*$/",$username)) {
echo "<h3 class=\"error\">* Pastikan kombinasi username hanya huruf tanpa spasi</h3>";
echo "<script>var timer = setTimeout(function(){window.location='tambah.php'}, 3000); </script>";
}elseif (!preg_match("/^[a-zA-Z0-9]*$/",$password)){
echo "<h3 class=\"error\">* Pastikan kombinasi password hanya huruf dan angka tanpa spasi</h3>";
echo "<script>var timer = setTimeout(function(){window.location='tambah.php'}, 3000); </script>";
}else{
$query = "INSERT INTO user (nama, username, password, email) VALUES ('$nama', '$username', '$password', '$email')";
$save = mysqli_query($connect, $query);
if($save){
echo "<br><h3 class=\"sukses\">* Data \"$nama\" berhasil di simpan</h3>";
echo "<script>var timer = setTimeout(function(){window.location='index.php'}, 3000); </script>";
}else{
echo "<br><h3 class=\"error\">* Gagal di simpan</h3>";
echo "<script>var timer = setTimeout(function(){window.location='tambah.php'}, 3000); </script>";
}
}
}
?>
<form method="post" action="">
<label>Masukan Nama :</label><br>
<input type="text" name="nama"><br>
<label>Masukan Username :</label><br>
<input type="text" name="username"><br>
<label>Masukan Password :</label><br>
<input type="password" name="password"><br>
<label>Masukan Email :</label><br>
<input type="text" name="email"><br>
<input type="submit" value="Simpan" name="save">
<input type="button" value="Kembali" onclick="window.location= 'index.php';">
</form>
</body>
</html>
view raw tambah.php hosted with ❤ by GitHub
Saya menggunakan preg_match untuk mengecek / memvalidasi apakah data yang dimasukan sudah sesuai dengan kriteria, berupa hanya huruf atau angka atau hanya email yang bisa dimasukkan. Untuk pengecekan email menggunakan FILTER_VALIDATE_EMAIL agar hanya bisa diisi oleh email.

5. Membuat ubah.php

Fungsi ini digunakan untuk mengubah data user yang telah tersimpan di database.
Berikut codenya :
<!DOCTYPE html>
<html>
<head>
<title>Ubah Data</title>
</head>
<style type="text/css">
.sukses {
color: #00822b;
}
.error {
color: #FF0000;
}
</style>
<body>
<h1>Ubah Data</h1>
<?php
include 'koneksi.php';
$id = $_GET['id'];
$idsql = "SELECT * FROM user WHERE id = '$id'";
$sqlser = mysqli_query($connect, $idsql);
$data = mysqli_fetch_array($sqlser);
if (isset($_POST['save'])) {
$nama = $_POST['nama'];
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
if(empty($nama) || empty($username) || empty($password) || empty($email)){
echo "<h3 class=\"error\">* Data belum lengkap, silahkan lengkapi data anda</h3>";
echo "<script>var timer = setTimeout(function(){window.location='ubah.php?id=".$data['id']."'}, 3000); </script>";
}elseif(!preg_match("/^[a-zA-Z ]*$/",$nama)){
echo "<h3 class=\"error\">* Nama hanya boleh menggunakan huruf dan spasi saja</h3>";
echo "<script>var timer = setTimeout(function(){window.location='ubah.php?id=".$data['id']."'}, 3000); </script>";
}elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<h3 class=\"error\">* Email anda tidak valid contoh : evanfauzi@gmail.com</h3>";
echo "<script>var timer = setTimeout(function(){window.location='ubah.php?id=".$data['id']."'}, 3000); </script>";
}elseif (!preg_match("/^[a-zA-Z]*$/",$username)) {
echo "<h3 class=\"error\">* Pastikan kombinasi username hanya huruf tanpa spasi</h3>";
echo "<script>var timer = setTimeout(function(){window.location='ubah.php?id=".$data['id']."'}, 3000); </script>";
}elseif (!preg_match("/^[a-zA-Z0-9]*$/",$password)){
echo "<h3 class=\"error\">* Pastikan kombinasi password hanya huruf dan angka tanpa spasi</h3>";
echo "<script>var timer = setTimeout(function(){window.location='ubah.php?id=".$data['id']."'}, 3000); </script>";
}else{
$query = "UPDATE user SET nama = '$nama', email = '$username', password = '$password', email = '$email' WHERE id = '$id'";
$save = mysqli_query($connect, $query);
if($save){
echo "<br><h3 class=\"sukses\">* Data \"$nama\" berhasil di ubah</h3>";
echo "<script>var timer = setTimeout(function(){window.location='index.php'}, 3000); </script>";
}else{
echo "<br><h3 class=\"error\">* Gagal di ubah</h3>";
echo "<script>var timer = setTimeout(function(){window.location='ubah.php?id=".$data['id']."'}, 3000); </script>";
}
}
}
?>
<form method="post" action="">
<label>Masukan Nama :</label><br>
<input type="text" name="nama" value="<?php echo $data['nama']; ?>"><br>
<label>Masukan Username :</label><br>
<input type="text" name="username" value="<?php echo $data['username']; ?>"><br>
<label>Masukan Password :</label><br>
<input type="password" name="password" value="<?php echo $data['password']; ?>"><br>
<label>Masukan Email :</label><br>
<input type="text" name="email" value="<?php echo $data['email']; ?>"><br>
<input type="submit" value="Simpan" name="save">
<input type="button" value="Kembali" onclick="window.location= 'index.php';">
</form>
</body>
</html>
view raw ubah.php hosted with ❤ by GitHub
Untuk pengecekan form masih sama seperti di tambah.php, hanya berbeda di fungsi simpannya menggunakan SQL UPDATE. Sedangkan tambah.php menggunakan SQL INSERT.

6. Membuat hapus.php

Fungsi ini digunakan untuk menghapus data user yang disimpan di database.
Berikut codenya :
<!DOCTYPE html>
<html>
<head>
<title>Hapus Data</title>
</head>
<style type="text/css">
.sukses {
color: #00822b;
}
.error {
color: #FF0000;
}
</style>
<body>
<?php
include 'koneksi.php';
$id = $_GET['id'];
$query = "DELETE FROM user WHERE id = $id";
$delete = mysqli_query($connect, $query);
if ($delete) {
echo "<h3 class=\"sukses\">* Berhasil dihapus</h3><br>Please Wait...";
echo "<script>var timer = setTimeout(function(){window.location='index.php'}, 3000); </script>";
} else {
echo "<h3 class=\"error\">* Gagal dihapus</h3><br>Please Wait...";
echo "<script>var timer = setTimeout(function(){window.location='index.php'}, 3000); </script>";
}
?>
</body>
</html>
view raw hapus.php hosted with ❤ by GitHub
Saya menggunakan $_GET['id'] untuk mengambil id yang tersimpan di database agar bisa dihapus melalui SQL DELETE dengan id data yang diinginkan. Fungsi ini juga terdapat pada ubah.php digunakan untuk fungsi yang sama tetapi untuk mengubah data sesuai id data yang diinginkan.

Jika anda ingin Source Code lengkapnya silahkan Download di Github saya.
Berikut tampilan websitenya :
home

tambah
 

Demikian yang dapat saya sampaikan tentang Tutorial kali ini. Semoga dapat bermanfaat untuk anda dan jangan lupa share agar ilmu yang kita miliki bisa berguna untuk orang lain.

Sekian dan Terima Kasih.

Related Posts

Berlangganan update artikel terbaru via email :

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel