Membuat CRUD Dengan OOP PHP, MySQL dan Materialize CSS
Tuesday 14 February 2017
Edit
Pada kesempatan kali ini saya akan memberikan tutorial Membuat CRUD Dengan OOP PHP, MySQL dan Materialize CSS, mengapa harus OOP di PHP.? karena memudahkan kita untuk membuat query hanya tinggal memanggil class dan function nya saja, perlu diketahui juga demi alasan keamanan kita harus menggunakan konsep OOP di PHP dan meninggalkan prosedural.
Langsung saja untuk membuat OOP di PHP kita bisa memulainya dengan mengikuti tutorial singkat dan padat berikut ini :
- Buatlah sebuah folder di htdocs slahkan beri nama latihan.
- Download materialized CSS anda bisa mendownloadnya di sini http://materializecss.com/ simpan kedalam folder latihan yang sudah di buat di direktori C:/XAMPP/htdocs/latihan/
- Buat database dengan nama user kemudian silahkan copas dumping SQL di bawah ini
-- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Feb 10, 2017 at 10:20 AM -- Server version: 10.1.16-MariaDB -- PHP Version: 5.5.38 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 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: `user` -- -- -------------------------------------------------------- -- -- Table structure for table `user` -- CREATE TABLE `user` ( `id` int(11) NOT NULL, `nama` varchar(100) NOT NULL, `alamat` varchar(100) NOT NULL, `usia` int(11) NOT NULL, `email` varchar(50) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `user` -- INSERT INTO `user` (`id`, `nama`, `alamat`, `usia`, `email`) VALUES (1, 'Hakko', 'CIkarang - Bekasi', 27, '[email protected]'), (3, 'blues', 'Cikarang - Bekasi', 30, '[email protected]'); -- -- Indexes for dumped tables -- -- -- Indexes for table `user` -- ALTER TABLE `user` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `user` -- ALTER TABLE `user` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; /*!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 */;
- Membuat fuction untuk pemanggilan Query Insert, Update dan Delete, silahkan copas code di bawah ini dan simpan dengan nama database.php ke direktori C:/XAMPP/htdocs/latihan/
<?php
class database{
var $host = "localhost";
var $uname = "root";
var $pass = "";
var $db = "user";
function __construct(){
mysql_connect($this->host, $this->uname, $this->pass);
mysql_select_db($this->db);
}
function tampil_data(){
$data = mysql_query("select * from user");
while($d = mysql_fetch_array($data)){
$hasil[] = $d;
}
return $hasil;
}
function input($nama,$alamat,$usia,$email){
mysql_query("insert into user values('','$nama','$alamat','$usia','$email')");
}
function hapus($id){
mysql_query("delete from user where id='$id'");
}
function edit($id){
$data = mysql_query("select * from user where id='$id'");
while($d = mysql_fetch_array($data)){
$hasil[] = $d;
}
return $hasil;
}
function update($id,$nama,$alamat,$usia,$email){
mysql_query("update user set nama='$nama', alamat='$alamat', usia='$usia', email='$email' where id='$id'");
}
}
?>
- Kemudian kita membuat modul untuk inisiasi variabel yang akan di eksekusi oleh query CRUD, silahkan copas code di bawah ini dan simpan dengan nama proses.php ke direktory C:/XAMPP/htdocs/latihan/
<?php
include 'database.php';
$db = new database();
$aksi = $_GET['aksi'];
if($aksi == "tambah"){
$db->input($_POST['nama'],$_POST['alamat'],$_POST['usia'],$_POST['email']);
header("location:index.php");
}elseif($aksi == "hapus"){
$db->hapus($_GET['id']);
header("location:index.php");
}elseif($aksi == "update"){
$db->update($_POST['id'],$_POST['nama'],$_POST['alamat'],$_POST['usia'],$_POST['email']);
header("location:index.php");
}
?>
- Selanjutnya adalah membuat form untuk menampilkan data, silahkan copas code di bawah ini dan simpan dengan nama index.php ke direktori C:/XAMPP/htdocs/latihan/
<?php
include 'database.php';
$db = new database();
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Hakko Bio Richard" />
<title>OOP Input Data</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<div class="container">
<div class="col s12">
<nav>
<div class="nav-wrapper blue darken-1">
<a href="http://www.hakkoblogs.com" class="brand-logo" style="margin-left: 10px;"> Hakko Blog's</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="http://www.niqoweb.com">Website</a></li>
<li><a href="http://www.hakkoblogs.com">Tutorial</a></li>
<li><a href="http://acchoblues.github.io" target="_blank">About</a></li>
</ul>
</div>
</nav>
</div>
<br />
<div class="row">
<div class="col s12">
<h5><b> <i class="material-icons">airplay</i></b> Latihan CRUD OOP</h5><br />
<a href="input.php" title="Tambah Data" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
<table class="highlight">
<thead>
<tr>
<th data-field="id">No</th>
<th data-field="id">Nama</th>
<th data-field="name">Alamat</th>
<th data-field="price">Usia</th>
<th data-field="price">Email</th>
<th data-field="price">Tool</th>
</tr>
</thead>
<?php
$no = 1;
foreach($db->tampil_data() as $data){
?>
<tbody>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $data['nama']; ?></td>
<td><?php echo $data['alamat']; ?></td>
<td><?php echo $data['usia']; ?></td>
<td><?php echo $data['email']; ?></td>
<td>
<a href="edit.php?id=<?php echo $data['id']; ?>&aksi=edit" class="btn-floating yellow darken-2"><i class="material-icons">mode_edit</i></a>
<a href="proses.php?id=<?php echo $data['id']; ?>&aksi=hapus" class="btn-floating green"><i class="material-icons">delete</i></a>
</td>
</tr>
</tbody>
<?php
}
?>
</table>
</div>
</div>
<footer class="page-footer blue darken-1">
<div class="footer-copyright">
<div class="container">
Hakko Bio Richard | Copyright © 2017
<a class="grey-text text-lighten-4 right" href="http://www.hakkoblogs.com">More Tutorial</a>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
- Selanjutnya membuat form input, silahkan copas code di bawah ini dan simpan dengan nama input.php ke dalam direktori C:/XAMPP/htdocs/latihan/
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Hakko Bio Richard" />
<title>OOP Input Data</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<div class="container">
<div class="col s12">
<nav>
<div class="nav-wrapper blue darken-1">
<a href="http://www.hakkoblogs.com" class="brand-logo" style="margin-left: 10px;"> Hakko Blog's</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="http://www.niqoweb.com">Website</a></li>
<li><a href="http://www.hakkoblogs.com">Tutorial</a></li>
<li><a href="http://acchoblues.github.io" target="_blank">About</a></li>
</ul>
</div>
</nav>
</div>
<br />
<div class="row">
<div class="col s6">
<h5><b> <i class="material-icons">airplay</i></b> Latihan CRUD OOP</h5><br />
<form action="proses.php?aksi=tambah" method="post">
<div class="input-field">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" name="nama" id="nama" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field">
<i class="material-icons prefix">room</i>
<input id="icon_telephone" type="text" name="alamat" id="alamat" class="validate">
<label for="icon_telephone">Alamat</label>
</div>
<div class="input-field">
<i class="material-icons prefix">stars</i>
<input id="icon_telephone" type="text" name="usia" id="usia" class="validate">
<label for="icon_telephone">Umur</label>
</div>
<div class="input-field">
<i class="material-icons prefix">message</i>
<input id="icon_telephone" type="email" name="email" id="email" class="validate">
<label for="icon_telephone">Email</label>
</div>
<div class="input-field">
<i class="material-icons prefix">message</i>
<input class="btn waves-effect waves-light" type="submit" value="Simpan">
</div>
</form>
</div>
</div>
<footer class="page-footer blue darken-1">
<div class="footer-copyright">
<div class="container">
Hakko Bio Richard | Copyright © 2017
<a class="grey-text text-lighten-4 right" href="http://www.hakkoblogs.com">More Tutorial</a>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
- Kemudian selanjutnya kita membuat form edit, copas code di bawah ini dan simpan dengan nama edit.php ke direktori C:/XAMPP/htdocs/latihan/
<?php
include 'database.php';
$db = new database();
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Hakko Bio Richard" />
<title>OOP Input Data</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<div class="container">
<div class="col s12">
<nav>
<div class="nav-wrapper blue darken-1">
<a href="http://www.hakkoblogs.com" class="brand-logo" style="margin-left: 10px;"> Hakko Blog's</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="http://www.niqoweb.com">Website</a></li>
<li><a href="http://www.hakkoblogs.com">Tutorial</a></li>
<li><a href="http://acchoblues.github.io" target="_blank">About</a></li>
</ul>
</div>
</nav>
</div>
<br />
<div class="row">
<div class="col s6">
<h5><b> <i class="material-icons">airplay</i></b> Latihan CRUD OOP</h5><br />
<form action="proses.php?aksi=update" method="post">
<?php
foreach($db->edit($_GET['id']) as $data){
?>
<div class="input-field">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="hidden" name="id" value="<?php echo $data['id']; ?>" id="id" class="validate">
<input id="icon_prefix" type="text" name="nama" id="nama" value="<?php echo $data['nama']; ?>" class="validate">
<label for="icon_prefix">Nama</label>
</div>
<div class="input-field">
<i class="material-icons prefix">room</i>
<input id="icon_telephone" type="text" name="alamat" id="alamat" value="<?php echo $data['alamat']; ?>" class="validate">
<label for="icon_telephone">Alamat</label>
</div>
<div class="input-field">
<i class="material-icons prefix">stars</i>
<input id="icon_telephone" type="text" name="usia" id="usia" value="<?php echo $data['usia']; ?>" class="validate">
<label for="icon_telephone">Umur</label>
</div>
<div class="input-field">
<i class="material-icons prefix">message</i>
<input id="icon_telephone" type="email" name="email" id="email" value="<?php echo $data['email']; ?>" class="validate">
<label for="icon_telephone">Email</label>
</div>
<div class="input-field">
<i class="material-icons prefix">message</i>
<input class="btn waves-effect waves-light" type="submit" value="Simpan">
</div>
<?php } ?>
</form>
</div>
</div>
<footer class="page-footer blue darken-1">
<div class="footer-copyright">
<div class="container">
Hakko Bio Richard | Copyright © 2017
<a class="grey-text text-lighten-4 right" href="http://www.hakkoblogs.com">More Tutorial</a>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Masih bingung, tenang saya sudah meyiapkan demo dan source code lengkapnya untuk anda download,
DEMO
DOWNLOAD
Demo dan link download sudah saya berikan tinggal kemauan anda untuk belajar saja yang perlu diniatkan, semoga tutorial singkat ini berguna dan bermanfaat untuk anda yang ingin bermigrasi dari PHP prosedural ke PHP OOP, selamat belajar dan selamat mencoba, maju teru putra - putri indonesia.
Happy Coding & Programming