CRUD OOP PHP, Jquery, Bootstrap

PHP CRUD

CRUD OOP PHP, Jquery, Bootstrap

Buatlah folder crud_oop pada direktori htdocs, lalu susun projek tersebut seperti berikut:

Buatlah file koneksi.php pada direktori apps dan untuk code nya seperti berikut:

apps/koneksi.php

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'web2');

class KoneksiDB
{	
	public $connection;
	function __construct(){
		$this->connection = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD,DB_DATABASE);
		if ($this->connection->connect_error) die('Database error -> ' .$this->connection->connect_error);
	}
	function ret_obj(){
		return $this->connection;
	}
}

Lalu buat lah classMahasiswa.php pada direktori apps dan codenya bisa anda ketik seperti berikut:

apps/classMahasiswa.php

<?php
require_once 'koneksi.php';
class Mahasiswa 
{
	protected $db;
	public function __construct()
	{
		$this->db = new KoneksiDB();
		$this->db = $this->db->ret_obj();
	}
	public function data_mahasiswa()
	{
		$sql="SELECT id,npm,nama FROM mahasiswa";
		$result = $this->db->query($sql) or die($this->db->error);
		return $result;
	}
	public function get_id($id)
	{
		$sql= "SELECT id,npm,nama FROM mahasiswa WHERE id = $id";
		$result = $this->db->query($sql) or die($this->db->error);
		return $result->fetch_assoc();
	}
	public function insert($data)
	{
		$key = array_keys($data);
    	$val = array_values($data);
		$sql = "INSERT INTO mahasiswa (" . implode(', ', $key) . ") "
			. "VALUES ('" . implode("', '", $val) . "')";
		$result = $this->db->query($sql) or die($this->db->error);
	}
	public function update($data,$where)
	{
	   $cols = array();
	   foreach($data as $key=>$val) {
	      $cols[] = "$key = '$val'";
	   }
	   $sql = "UPDATE mahasiswa SET ". implode(',', $cols). "WHERE id=".$where;
	   $q=$this->db->query($sql) or die($this->db->error);
	   return true;
	}
	public function delete($id)
	{
		$sql="DELETE FROM mahasiswa WHERE id=$id";
		$result = $this->db->query($sql) or die($this->db->error);
		return $result;
	}
}

Setelah itu ketikkan lah code berikut pada file index.php

index.php

<?php 
require_once dirname(__FILE__).'/apps/koneksi.php';
require_once dirname(__FILE__).'/apps/classMahasiswa.php';
?>
<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>OOP CRUD</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<style type="text/css">
		body {min-height: 2000px;padding-top: 70px;}
	</style>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class=""><a href="?page=home">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Master Data <span class="caret"></span></a>
              <ul class="dropdown-menu">
               <li><a href="?page=mahasiswa">Mahasiswa</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
	<div class="container">
		<?php
		 if (isset($_GET['page'])) 
		 {
	        $page = isset($_GET['page']) ? $_GET['page'] : "";
	        if ($page=='home'){require 'content/home.php';}
	        elseif ($page=='mahasiswa'){require 'content/mahasiswa/mhs_data.php';}
	        else{echo '<h1>Uppps file tidak ada.</h1>';}    
	     } 
		?>
	</div>
</body>
</html>

Lalu Buatlah Direkori mahasiswa dalam folder content dan buatlah file mhs_data.php dan ketikkan code seperti berikut:

content/mahasiswa/mhs_data.php

<?php $mahasiswa = new Mahasiswa(); ?>
<h3 class="page-header">Form Mahasiswa</h3>
<form action="#" id="form_mhs" autocomplete="off">
	<input type="hidden" name="txtID"/>
	<div class="form-group">
		<label>NPM:</label>
		<input type="text" name="txtNpm" id="npm" class="form-control" placeholder="NPM" autofocus/>
	</div>
	<div class="form-group">
		<label>NAMA:</label>
		<input type="text" name="txtNama" id="nama" class="form-control" placeholder="NAMA"/>
	</div>
	<button type="button" id="save" class="btn btn-primary btn-sm" onclick="simpan()">Simpan</button>
	<button type="button" id="update" class="btn btn-warning btn-sm" disabled="disabled" onclick="ubah()">Ubah</button>
</form>
<h3 class="page-header">Data Mahasiswa</h3>
<table class="table table-striped table-hover">
	<thead>
		<tr>
			<th width="5%">No</th>
			<th>NPM</th>
			<th>Nama</th>
			<th>Aksi</th>
		</tr>
	</thead>
	<tbody>
		<?php 
			$no=(int)1;
			foreach ($mahasiswa->data_mahasiswa() as $rows): ?>
			<tr>
				<td><?php echo $no++ ?></td>
				<td><?php echo $rows['npm'] ?></td>
				<td><?php echo $rows['nama'] ?></td>
				<td>
					<a class="btn btn-xs btn-success" href="javascript:void(0)" onclick="ganti(<?php echo $rows['id']?>)">Ubah</a>
					<a class="btn btn-xs btn-danger" href="javascript:void(0)" onclick="hapus(<?php echo $rows['id']?>)">Hapus</a>
				</td>
			</tr>
		<?php endforeach?>
	</tbody>
</table>
<script>
	function simpan() {
		var npm = $('#npm').val();
		var nama = $('#nama').val();
		$.ajax({
			url: 'content/mahasiswa/simpan.php',
			type: 'POST',
			dataType: 'JSON',
			data: $('#form_mhs').serialize(),
			success:function(data) {
				if (!data.success) 
				{
					if (data.errors.NPM) {
						alert(data.errors.NPM);
						$('#npm').focus();
						return false;
					}
					if (data.errors.NAMA) {
						alert(data.errors.NAMA);
						$('#nama').focus();
						return false;
					}
				}
				else
				{
					alert(data.message)
					window.location.reload();
				}
			}
		})
	}
	function ganti(id) {
		$.ajax({
			url: 'content/mahasiswa/tampil_ubah.php',
			type: 'POST',
			cache:false,
			dataType: 'JSON',
			cache:false,
			data: 'id='+id,
			encode:true,
			success:function (data) {
				console.log(data);
				$('#save').attr('disabled', 'disabled');//menonaktifkan tombol simpan
				$('#update').removeAttr('disabled');//mengaktifkan tombol ubah
				$('input[name="txtID"]').val(data.id);
				$('input[name="txtNpm"]').val(data.npm);
				$('input[name="txtNama"]').val(data.nama);
			}
		})
	}
	function ubah() {
		var npm = $('#npm').val();
		var nama = $('#nama').val();
		$.ajax({
			url: 'content/mahasiswa/ubah.php',
			type: 'POST',
			dataType: 'json',
			data: $('#form_mhs').serialize(),
			success:function(data) {
				if (!data.success) 
				{
					if (data.errors.NPM) {
						alert(data.errors.NPM);
						$('#npm').focus();
						return false;
					}
					if (data.errors.NAMA) {
						alert(data.errors.NAMA);
						$('#nama').focus();
						return false;
					}
				}
				else
				{
					alert(data.message)
					window.location.reload();
				}
			}
		})
	}
	function hapus(id) {
		if(confirm('Anda Yakin Mau Menghapus?')){
			$.ajax({
				url: 'content/mahasiswa/hapus.php',
				type: 'POST',
				dataType: 'JSON',
				data: 'id='+id,
				encode:true,
				success:function (data) {
					if(!data.success){
						if(data.errors){
							alert(data.errors)
						}
					}else{
						alert(data.message);
						window.location.reload();
					}
				}
			})
		}
	}
</script>

Buatlah pada direktori content/mahasiswa/simpan.php dan ketikkan code seperti berikut:

content/mahasiswa/simpan.php

<?php 
require_once dirname(dirname(dirname(__FILE__))) .'/apps/classMahasiswa.php';
$mahasiswa = new Mahasiswa();
$errors= array();
$info  = array();

if (empty($_POST['txtNpm']))
   $errors['NPM'] = 'NPM belum diisi.';

if (empty($_POST['txtNama']))
	$errors['NAMA']='Nama belum diisi';

if (!empty($errors)) {
	$info['success'] = false;
	$info['errors'] = $errors;
}
else{
	$data = array(
		'npm' => $_POST['txtNpm'],
		'nama' => $_POST['txtNama'],
	);
	$mahasiswa->insert($data);//simpan ke function insert classMahasiswa
	$info['success']=true;
	$info['message']='Berhasil Ditambah';
}
echo json_encode($info);

content/mahasiswa/tampil_ubah.php

<?php 
require_once dirname(dirname(dirname(__FILE__))) .'/apps/classMahasiswa.php';
$mahasiswa = new Mahasiswa();
$id=$_REQUEST['id'];
echo json_encode($mahasiswa->get_id($id));

content/mahasiswa/ubah.php

<?php 
require_once dirname(dirname(dirname(__FILE__))) .'/apps/classMahasiswa.php';
$mahasiswa = new Mahasiswa();
$errors= array();
$info  = array();

if (empty($_POST['txtNpm']))
   $errors['NPM'] = 'NPM belum diisi.';

if (empty($_POST['txtNama']))
	$errors['NAMA']='Nama belum diisi';

if (!empty($errors)) {
	$info['success'] = false;
	$info['errors'] = $errors;
}
else{
	$data = array(
		'npm' => $_POST['txtNpm'],
		'nama' => $_POST['txtNama'],
	);
	$where = $_POST['txtID'];
	$mahasiswa->update($data,$where);
	$info['success']=true;
	$info['message']='Berhasil Diubah';
}
echo json_encode($info);

content/mahasiswa/hapus.php

<?php 
require_once dirname(dirname(dirname(__FILE__))) .'/apps/classMahasiswa.php';
$mahasiswa = new Mahasiswa();
$errors= array();
$info  = array();

if (empty($_POST['id']))
   $errors['ID'] = 'ID tak ada.';

if (!empty($errors)) {
	$info['success'] = false;
	$info['errors'] = $errors;
}else{
	$id = $_POST['id'];
	$mahasiswa->delete($id);
	$info['success']=true;
	$info['message']='Berhasil Dihapus';
}
echo json_encode($info);

PreviousCRUD Sederhana NextCodeIgniter Snippet

Last updated 2 years ago

Was this helpful?

<?php define('DB_SERVER', 'localhost'); define('DB_USERNAME', 'root'); define('DB_PASSWORD', ''); define('DB_DATABASE', 'web2'); class KoneksiDB { public $connection; function __construct(){ $this->connection = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD,DB_DATABASE); if ($this->connection->connect_error) die('Database error -> ' .$this->connection->connect_error); } function ret_obj(){ return $this->connection; } }

<?php require_once 'koneksi.php'; class Mahasiswa { protected $db; public function __construct() { $this->db = new KoneksiDB(); $this->db = $this->db->ret_obj(); } public function data_mahasiswa() { $sql="SELECT id,npm,nama FROM mahasiswa"; $result = $this->db->query($sql) or die($this->db->error); return $result; } public function get_id($id) { $sql= "SELECT id,npm,nama FROM mahasiswa WHERE id = $id"; $result = $this->db->query($sql) or die($this->db->error); return $result->fetch_assoc(); } public function insert($data) { $key = array_keys($data); $val = array_values($data); $sql = "INSERT INTO mahasiswa (" . implode(', ', $key) . ") " . "VALUES ('" . implode("', '", $val) . "')"; $result = $this->db->query($sql) or die($this->db->error); } public function update($data,$where) { $cols = array(); foreach($data as $key=>$val) { $cols[] = "$key = '$val'"; } $sql = "UPDATE mahasiswa SET ". implode(',', $cols). "WHERE id=".$where; $q=$this->db->query($sql) or die($this->db->error); return true; } public function delete($id) { $sql="DELETE FROM mahasiswa WHERE id=$id"; $result = $this->db->query($sql) or die($this->db->error); return $result; } }

<?php require_once dirname(__FILE__).'/apps/koneksi.php'; require_once dirname(__FILE__).'/apps/classMahasiswa.php'; ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>OOP CRUD</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <style type="text/css"> body {min-height: 2000px;padding-top: 70px;} </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class=""><a href="?page=home">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Master Data <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="?page=mahasiswa">Mahasiswa</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container"> <?php if (isset($_GET['page'])) { $page = isset($_GET['page']) ? $_GET['page'] : ""; if ($page=='home'){require 'content/home.php';} elseif ($page=='mahasiswa'){require 'content/mahasiswa/mhs_data.php';} else{echo '<h1>Uppps file tidak ada.</h1>';} } ?> </div> </body> </html>

<?php $mahasiswa = new Mahasiswa(); ?> <h3 class="page-header">Form Mahasiswa</h3> <form action="#" id="form_mhs" autocomplete="off"> <input type="hidden" name="txtID"/> <div class="form-group"> <label>NPM:</label> <input type="text" name="txtNpm" id="npm" class="form-control" placeholder="NPM" autofocus/> </div> <div class="form-group"> <label>NAMA:</label> <input type="text" name="txtNama" id="nama" class="form-control" placeholder="NAMA"/> </div> <button type="button" id="save" class="btn btn-primary btn-sm" onclick="simpan()">Simpan</button> <button type="button" id="update" class="btn btn-warning btn-sm" disabled="disabled" onclick="ubah()">Ubah</button> </form> <h3 class="page-header">Data Mahasiswa</h3> <table class="table table-striped table-hover"> <thead> <tr> <th width="5%">No</th> <th>NPM</th> <th>Nama</th> <th>Aksi</th> </tr> </thead> <tbody> <?php $no=(int)1; foreach ($mahasiswa->data_mahasiswa() as $rows): ?> <tr> <td><?php echo $no++ ?></td> <td><?php echo $rows['npm'] ?></td> <td><?php echo $rows['nama'] ?></td> <td> <a class="btn btn-xs btn-success" href="javascript:void(0)" onclick="ganti(<?php echo $rows['id']?>)">Ubah</a> <a class="btn btn-xs btn-danger" href="javascript:void(0)" onclick="hapus(<?php echo $rows['id']?>)">Hapus</a> </td> </tr> <?php endforeach?> </tbody> </table> <script> function simpan() { var npm = $('#npm').val(); var nama = $('#nama').val(); $.ajax({ url: 'content/mahasiswa/simpan.php', type: 'POST', dataType: 'JSON', data: $('#form_mhs').serialize(), success:function(data) { if (!data.success) { if (data.errors.NPM) { alert(data.errors.NPM); $('#npm').focus(); return false; } if (data.errors.NAMA) { alert(data.errors.NAMA); $('#nama').focus(); return false; } } else { alert(data.message) window.location.reload(); } } }) } function ganti(id) { $.ajax({ url: 'content/mahasiswa/tampil_ubah.php', type: 'POST', cache:false, dataType: 'JSON', cache:false, data: 'id='+id, encode:true, success:function (data) { console.log(data); $('#save').attr('disabled', 'disabled');//menonaktifkan tombol simpan $('#update').removeAttr('disabled');//mengaktifkan tombol ubah $('input[name="txtID"]').val(data.id); $('input[name="txtNpm"]').val(data.npm); $('input[name="txtNama"]').val(data.nama); } }) } function ubah() { var npm = $('#npm').val(); var nama = $('#nama').val(); $.ajax({ url: 'content/mahasiswa/ubah.php', type: 'POST', dataType: 'json', data: $('#form_mhs').serialize(), success:function(data) { if (!data.success) { if (data.errors.NPM) { alert(data.errors.NPM); $('#npm').focus(); return false; } if (data.errors.NAMA) { alert(data.errors.NAMA); $('#nama').focus(); return false; } } else { alert(data.message) window.location.reload(); } } }) } function hapus(id) { if(confirm('Anda Yakin Mau Menghapus?')){ $.ajax({ url: 'content/mahasiswa/hapus.php', type: 'POST', dataType: 'JSON', data: 'id='+id, encode:true, success:function (data) { if(!data.success){ if(data.errors){ alert(data.errors) } }else{ alert(data.message); window.location.reload(); } } }) } } </script>

<?php require_once dirname(dirname(dirname(__FILE__))) .'/apps/classMahasiswa.php'; $mahasiswa = new Mahasiswa(); $errors= array(); $info = array(); if (empty($_POST['txtNpm'])) $errors['NPM'] = 'NPM belum diisi.'; if (empty($_POST['txtNama'])) $errors['NAMA']='Nama belum diisi'; if (!empty($errors)) { $info['success'] = false; $info['errors'] = $errors; } else{ $data = array( 'npm' => $_POST['txtNpm'], 'nama' => $_POST['txtNama'], ); $mahasiswa->insert($data);//simpan ke function insert classMahasiswa $info['success']=true; $info['message']='Berhasil Ditambah'; } echo json_encode($info);

<?php require_once dirname(dirname(dirname(__FILE__))) .'/apps/classMahasiswa.php'; $mahasiswa = new Mahasiswa(); $errors= array(); $info = array(); if (empty($_POST['txtNpm'])) $errors['NPM'] = 'NPM belum diisi.'; if (empty($_POST['txtNama'])) $errors['NAMA']='Nama belum diisi'; if (!empty($errors)) { $info['success'] = false; $info['errors'] = $errors; } else{ $data = array( 'npm' => $_POST['txtNpm'], 'nama' => $_POST['txtNama'], ); $where = $_POST['txtID']; $mahasiswa->update($data,$where); $info['success']=true; $info['message']='Berhasil Diubah'; } echo json_encode($info);

<?php require_once dirname(dirname(dirname(__FILE__))) .'/apps/classMahasiswa.php'; $mahasiswa = new Mahasiswa(); $errors= array(); $info = array(); if (empty($_POST['id'])) $errors['ID'] = 'ID tak ada.'; if (!empty($errors)) { $info['success'] = false; $info['errors'] = $errors; }else{ $id = $_POST['id']; $mahasiswa->delete($id); $info['success']=true; $info['message']='Berhasil Dihapus'; } echo json_encode($info);