Home Internet Knowledge Programming tutorial Cara membuat website CRUD sederhana menggunakan PHP dan MySQL dengan Form Validasi

Sunday, 22 September 2019

Cara membuat website CRUD sederhana menggunakan PHP dan MySQL dengan Form Validasi

Cara membuat website CRUD sederhana menggunakan PHP dan MySQL - Kali ini saya akan memberikan sebuah tutorial mengenai cara membuat website dengan sistem CRUD ( Create Read Update Delete ) sederhana. Dan untuk database yang saya gunakan yaitu menggunakan database kesayangan kita semua MySQL.

Oke langsung saja masuk ke bagian struktur folder

Struktur folder yang nanti saya gunakan akan seperti ini :



Saya akan jelaskan mengenai struktur foldernya, di bagian folder _partials nantinya akan berisi dua file. file foot.php akan berisi script - script yang di butuhkan contohnya nanti saya akan menambahkan script jquery, dan datatables. dan file head.php akan berisi tag head untuk memanggil css.

Di folder assets diisi dengan file css dari bootstrap 4 , Kalau kalian mau include sekalian dengan menggunakan CDN berarti tidak perlu menambahkan file tersebut, tinggal dipanggil saja di header nanti.

Folder menu nantinya file - file tersebut akan dipanggil berdasarkan menunya. File - file tersebut akan dipanggil melalui file index.php.

Selanjutnya file CRUD.php , file ini nantinya akan saya gunakan sebagai class yang dapat dipanggil untuk melakukan query - query ke database, koneksi ke database, maupun form validasi data.

File yang terakhir yaitu index.php akan digunakan sebagai routing dan templating.

Untuk struktur data di database silahkan kalian membuat database dengan nama terserah kalian ( saya menggunakan nama database tugas_1 ) dan buat tabel dengan nama tabel users dengan kolom - kolom seperti dibawah ini :



Oke let's code!

1. Membuat file head.php dan footer.php 

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tugas 1</title>
<link rel="stylesheet" href="assets/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
</head>
view raw head.php hosted with ❤ by GitHub
Di head.php hanya akan ada tag head dan isinya, untuk css saya menggunakan bootstrap yang tadi ada di folder assets jika kalian menggunakan CDN ganti saja dengan CDN dari bootstrap. Karena menggunakan bootstrap, css dari datatables juga saya include yang versi bootstrap.

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script>
$(function() {
$('#table_id').DataTable();
})
</script>
view raw foot.php hosted with ❤ by GitHub
Selanjutnya isi dari file footer.php yaitu jquery, 2 script bootstrap 4 ( popper & js ), dan 2 script dari datatables untuk bootstrap. Script yang terakhir untuk menginisialisasi datatable yang nanti digunakan, dengan id tabel table_id .

2. Membuat file CRUD.php
<?php
class CRUD
{
private $tbl = 'users';
private $db = '';
private $username = '';
private $password = '';
private $host = '';
private $conn = '';
public function __construct()
{
$this->db = 'tugas_1';
$this->username = 'root';
$this->host = 'localhost';
$this->conn = @new mysqli($this->host, $this->username, $this->password, $this->db);
if ($this->conn->connect_error) {
die('Connect Error: ' . $this->conn->connect_error);
}
}
view raw crud_config.php hosted with ❤ by GitHub

Di sana kita akan membuat sebuah class yang bernama CRUD yang nantinya akan berisi fungsi - fungsi untuk melakukan query dan sebagainya. Yang pertama kita akan membuat sebuah fungsi constructor, yang nantinya ketika class ini di buat sebuah objek fungsi ini yang dijalankan pertama kali.

Fungsi tersebut berisi fungsi untuk melakukan koneksi ke database dengan menggunakan keyword new mysqli yang artinya kita akan membuat sebuah objek mysqli, dengan beberapa parameter yaitu nama host, username, password, dan database.

Saya menggunakan nama host localhost dengan username root dan passwordnya string kosong, selanjutnya nama database tugas_1 . Hasil dari keyword  new mysqli akan di masukkan ke dalam properti db yang nantinya objek tersebut akan terus digunakan untuk melakukan query ke dalam database.

Jika ada error, objek db akan memiliki sebuah properti bernama connect_error berisi pesan error yang nantinya akan ditampilkan. Tidak lupa saya akan berikan sebuah properti nama tabel yaitu nama tabel yang saya gunakan users .

3. Membuat templating dan routing di index.php

 Sebelum itu buatlah, folder menu tadi yang berisi file tabel.php tambah.php ubah.php . Selanjutnya kita akan masuk ke file index.php

<?php
require_once 'CRUD.php';
$CRUD = new CRUD();
?>
<?php require_once '_partials/head.php'; ?>
<body>
<div class="container">
<?php
switch (@$_GET['aksi']) {
case 'tambah':
require_once 'menu/tambah.php';
break;
case 'ubah':
require_once 'menu/ubah.php';
break;
case 'hapus':
break;
default:
require_once 'menu/tabel.php';
break;
}
?>
</div>
</body>
<?php require_once '_partials/foot.php'; ?>
view raw index_1.php hosted with ❤ by GitHub
Di line yang ke 2 kita memanggil file CRUD.php nya, yang nantinya class CRUD akan dibuatkan objeknya dengan variabel CRUD. Selanjutnya memanggil file - file yang ada di _partials sesuai dengan letaknya. Untuk routingnya saya menggunakan fungsi switch case, untuk meload file - file sesuai dengan aksinya.

4. Mengatur fungsi CRUD di setiap halaman

Sebelumnya masuk ke dalam file CRUD.php untuk membuat fungsi menampilkan semua data. Koding dibawah melanjutkan koding dari membuat file CRUD.

public function getAll()
{
$res = $this->conn->query("SELECT * FROM {$this->tbl}");
if ($res->num_rows > 0) {
while ($user = $res->fetch_assoc()) {
$users[] = $user;
}
return $users;
}
$this->conn->close();
return false;
}
view raw Fungsi getAll hosted with ❤ by GitHub

Data yang di dapat dari database akan dikembalikan dalam bentuk array, jika kosong maka akan mengembalikan nilai boolean false. Untuk tampilan tabel.php koding seperti dibawah.
<?php
$users = $CRUD->getAll();
?>
<div class="row my-3">
<div class="col">
<h1>CRUD</h1>
</div>
</div>
<div class="row my-3">
<div class="col">
<a href="?aksi=tambah" class="btn btn-primary">Tambah</a>
</div>
</div>
<div class="row">
<div class="col">
<table id="table_id" class="table table-striped table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Username</th>
<th>Email</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php if ($users != false) : ?>
<?php $i = 0;
foreach ($users as $user) : ?>
<tr>
<td><?= ++$i ?></td>
<td><?= $user['nama'] ?></td>
<td><?= $user['username'] ?></td>
<td><?= $user['email'] ?></td>
<td>
<a href="?aksi=ubah&id=<?= $user['id'] ?>" class="btn btn-success btn-sm">Edit</a>
<a onclick="return confirm('Yakin ?')" href="?aksi=hapus&id=<?= $user['id'] ?>" class="btn btn-danger btn-sm">Hapus</a>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
view raw tabel.php hosted with ❤ by GitHub
Karena kita sudah membuat objek dari class CRUD, jadi kita bisa memanggil fungsi getAll untuk menampilkan semua data di dalam tabel users.

Tombol tambah nantinya akan mengarahkan ke aksi tambah, tombol edit juga akan mengarahkan ke aksi edit dengan id user yang di pilih, dan tombol delete nantinya akan diarahkan ke aksi hapus.

Selanjutnya kita akan membuat fungsi tambah dan form validasinya.

public function getByUsername($username)
{
$res = $this->conn->query("SELECT * FROM {$this->tbl} WHERE username = '$username'");
if ($res->num_rows > 0) {
$user = $res->fetch_assoc();
return $user;
}
return false;
}
public function insert($data)
{
$validasi = $this->_validasi($data);
if ($validasi == []) {
$enc_password = md5($data['password']);
$res = $this->conn->query("INSERT INTO {$this->tbl}(nama,username,password,email) VALUES ('{$data['nama']}','{$data['username']}','{$enc_password}','{$data['email']}')");
$this->conn->close();
return $res;
} else {
return $validasi;
}
}
view raw insert & getByUsername hosted with ❤ by GitHub
Fungsi getByUsername nantinya akan digunakan dalam validasi untuk mengecek username sudah digunakan atau belum. Berikut fungsi validasinya.

/**
* Created by : Thetechid
*/
public function _validasi($data)
{
$error = [];
foreach ($data as $key => $value) {
if ($key != 'tambah' && $key != 'edit') {
if ($data[$key] === '') {
$error['error'][$key] = ['message' => 'harus diisi'];
}
}
}
if (!empty($error['error'])) {
return $error;
}
if (!preg_match('/^[a-z|A-Z ]*$/', $data['nama'])) {
$error['error']['nama'] = [
'message' => 'harus berupa huruf'
];
}
if (!preg_match('/\S+@\S+\.\S+/', $data['email'])) {
$error['error']['email'] = [
'message' => 'tidak valid'
];
}
if ($data['password'] != false) {
if (!preg_match('/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/', $data['password'])) {
$error['error']['password'] = [
'message' => 'minimal 8 Karakter dengan kombinasi angka'
];
}
}
if ($data['username'] != false) {
$res = $this->getByUsername($data['username']);
if ($res == true) {
$error['error']['username'] = [
'message' => 'sudah digunakan'
];
}
}
return $error;
}
view raw Fungsi validasi hosted with ❤ by GitHub
Fungsi ini nantinya akan menerima data inputan untuk divalidasi. Pertama kita membuat variable error dengan isinya array kosong, jadi ketika tidak ada error atau validasi berhasil maka fungsi ini akan mengembalikan array kosong.

Untuk pengecekan pertama yaitu jika inputan kosong maka variable array diisi dengan array asosiatif dengan key error dan key field yang inputannya kosong. Jadi setiap key field akan berbeda - beda tergantung yang kosong mana.

Setelah itu jika ada variable dengan key error, maka variable error akan di kembalikan. Jika tidak ada alias semua field terisi maka akan dilanjutkan ke pengecekan nama. Saya menggunakan fungsi preg_match yaitu fungsi untuk mengecek data dengan Regular Expression atau Regex, yang nantinya akan mengecek hanya boleh huruf dari huruf kecil maupun kapital mulai dari huruf a sampai z. Jika berhasil maka akan dilanjutkan ke pengecekan berikutnya, jika gagal variable error akan diisi dengan array dengan key error dan key field dengan message errornya.

Selanjutnya untuk pengecekan email, yaitu email harus memiliki symbol @ di tengah nya, jika berhasil maka akan dilanjutkan ke pengecekan berikutnya. Yaitu password, jika password bernilai false itu berarti tidak dilakukan pengecekan password.  Password minimal 8 karakter dengan kombinasi angka.

Jika berhasil selanjutnya pengecekan username, saya menggunakan fungsi getByUsername untuk mengecek ketersediaan username. Jika berhasil maka yang terakhir akan di kembalikan variable error dari semua pengecekan diatas.

Selanjutnya membuat form tambah, atau halaman tambah bisa dilihat dibawah.

<?php
if (isset($_POST['tambah'])) {
$res = $CRUD->insert($_POST);
if ($res === true) {
echo "<script>
window.location.href = 'index.php';
</script>";
}
}
?>
<div class="row my-3">
<div class="col">
<h1>Menu tambah</h1>
</div>
</div>
<div class="row">
<div class="col">
<?php if (isset($res['error'])) : ?>
<?php $errors = $res['error']; ?>
<div class="alert alert-danger">
<ul>
<?php foreach ($errors as $key => $error) : ?>
<li><?= $key . ' ' . $error['message'] ?></li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<form action="" method="post" class="needs-validation">
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" id="nama" name="nama" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" id="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" name="tambah">Simpan</button>
<a href="index.php" class="btn btn-secondary">Kembali</a>
</div>
</form>
</div>
</div>
view raw tambah.php hosted with ❤ by GitHub

Jika tombol simpan di submit maka form akan mengembalikan ke halaman ini lagi, jika terdapat variable POST maka akan menjalankan fungsi insert yang tadi dibuat dan jika bernilai true maka akan dialihkan ke index.php, jika gagal maka akan mengembalikan pesan error nya dan ditampilkan.

Selanjutnya membuat fungsi update dan delete.

public function getById($id)
{
$res = $this->conn->query("SELECT * FROM {$this->tbl} WHERE id = $id");
if ($res->num_rows > 0) {
$user = $res->fetch_assoc();
return $user;
}
return false;
}
public function update($data)
{
$user = $this->getById($data['user_id']);
if ($user['username'] == $data['username']) {
$username = $data['username'];
$data['username'] = false;
} else {
$username = $data['username'];
}
if ($data['password'] == null) {
$password = $data['password2'];
$data['password'] = false;
} else {
$password = md5($data['password']);
}
$validasi = $this->_validasi($data);
if ($validasi == []) {
$res = $this->conn->query("UPDATE {$this->tbl} SET nama='{$data['nama']}',username='{$username}',password='{$password}',email='{$data['email']}' WHERE id={$data['user_id']}");
$this->conn->close();
return $res;
} else {
return $validasi;
}
}
public function delete($id)
{
$this->conn->query("DELETE FROM {$this->tbl} WHERE id = {$id}");
if ($this->conn->affected_rows == 1) {
return true;
}
return false;
}
view raw getById, update, delete hosted with ❤ by GitHub


Fungsi getById nantinya akan digunakan di form update nantinya, untuk update jika username tidak berubah maka akan diisi dengan false yang artinya ketika melewati validasi tidak di validasi lagi. begitu juga dengan password.

Kita akan membuat file ubah.php

<?php
if (isset($_GET['id'])) {
$user = $CRUD->getById($_GET['id']);
}
if (isset($_POST['edit'])) {
$res = $CRUD->update($_POST);
if ($res === true) {
echo "<script>
window.location.href = 'index.php';
</script>";
}
}
?>
<div class="row my-3">
<div class="col">
<h1>Menu edit</h1>
</div>
</div>
<div class="row">
<div class="col">
<?php if (isset($res['error'])) : ?>
<?php $errors = $res['error']; ?>
<div class="alert alert-danger">
<ul>
<?php foreach ($errors as $key => $error) : ?>
<li><?= $key . ' ' . $error['message'] ?></li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<form action="" method="post">
<input type="hidden" name="user_id" value="<?= $user['id'] ?>">
<input type="hidden" name="password2" value="<?= $user['password'] ?>">
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" id="nama" name="nama" class="form-control" value="<?= $user['nama'] ?>">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" id="email" name="email" class="form-control" value="<?= $user['email'] ?>">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" class="form-control" value="<?= $user['username'] ?>">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" name="edit">Simpan</button>
<a href="index.php" class="btn btn-secondary">Kembali</a>
</div>
</form>
</div>
</div>
view raw ubah.php hosted with ❤ by GitHub


Jika ada GET dengan id, maka akan dicari dengan fungsi getById jika ada maka akan ditampilkan di form ubah. Ketika form ubah di submit akan kembali ke halaman ubah dan menjalankan fungsi update.

Untuk delete bisa tambahkan baris kode di file index.php jadi seperti ini 

switch (@$_GET['aksi']) {
case 'tambah':
require_once 'menu/tambah.php';
break;
case 'ubah':
require_once 'menu/ubah.php';
break;
case 'hapus':
if (isset($_GET['id'])) {
$res = $CRUD->delete($_GET['id']);
if ($res) {
echo "<script>
window.location.href = 'index.php';
</script>";
} else {
echo "<script>
alert('gagal');
window.location.href = 'index.php';
</script>";
}
}
break;
default:
require_once 'menu/tabel.php';
break;
view raw hapus_index.php hosted with ❤ by GitHub

Oke sudah selesai, untuk hasilnya bisa lihat beberapa screenshot dibawah : 

Menu tambah

Tabel

Hapus

Menu edit


Artikel Terkait

Share this

Recommended

Disqus Comments