CRUD (Create, Read, Update, Delete) PHP 7 Menggunakan Httaccess
Htaccess adalah file konfigurasi yang disediakan oleh web server apache, yang biasanya digunakan untuk mengubah settingan default dari apache. Htaccess biasanya diletakkan pada root direktori.
Langkah pertama
Sebelum memulai membuat crud dengan httaccess, kita harus tau terlebih dahulu tau apa itu yang disebut dengan httaccess?.
Htaccess adalah file konfigurasi yang disediakan oleh web server apache, yang biasanya digunakan untuk mengubah settingan default dari apache. Htaccess biasanya diletakkan pada root direktori. Htaccess harus dalam format ASCII dan dengan permission yang diset pada 644 (rw-r-r) dengan tujuan membuat server dapat mengakses file .htaccess sedangkan visitor website tidak dapat mengakses htaccess dari browser.
Kode perintah dalam htaccess harus ditempatkan dalam satu baris, jadi jika kita menggunakan notepad untuk membuat htaccess maka kita harus mendisable fungsi wordwrap pada notepad.
Fungsi Htaccess
Kustomisasi error message
Overide SSl settings
Merubah default Homepage
Enable directory browsing
Mem-block user yang akan mengakses website
Meredirect / mengarahkan pengunjung website ke halaman lain
Mencegah Hot linking dan bandwith leeching
Httaccess merupakan file teks biasa, cara membuatnya gunakan text editor seperti sublime text atau notepad++ dan simpan dengan nama .httaccess kedalam folder root aplikasi sobat, biasanya file ini terhidden jadi lakukan perintah untuk show hidden file.
Dibawah adalah contoh file .httaccess yang akan kita gunakan didalam tutorial ini
RewriteEngine on RewriteRule ^index.html$ ?page=home [L] RewriteRule ^about.html$ ?page=about [L] RewriteRule ^blog.html$ ?page=blog [L] RewriteRule ^addblog(.*)\.html$ ?page=addblog [L] RewriteRule ^save(.*)\.html$ ?page=saveblog [L] RewriteRule ^blog-(.*)\.html$ ?page=readblog&blog_id=$1 [L] RewriteRule ^edit-(.*)\.html$ ?page=editblog&blog_id=$1 [L] RewriteRule ^update(.*)\.html$ ?page=update [L] RewriteRule ^delete-(.*)\.html$ ?page=deleteblog&blog_id=$1 [L] RewriteRule ^page_blog-(.*)\.html$ ?page=blog&page_blog=$1 [L] RewriteRule ^contact.html$ ?page=contact [L] Options All -Indexes
Keterangan kode .httaccess diatas
RewriteEngine On, Mengaktifkan RewriteEngine
RewriteCond merupakan salah satu directive pada modul mod _rewrite yang berguna untuk mengecek kondisi tertentu.
RewriteRule, berguna untuk mecari pola url dan jika ketemu akan mereplacenya dengan url yang kita inginkan. RewriteRule merupakan Aturan penulisan ulang. Contohnya RewriteRule ^index.html$ ?page=home [L], kita mereplace ?page=home dengan index.html dan [L] adalah perintah untuk menghentikan penulisan ulang index.html jika sudah ketemu.
Options All -Indexes
Options All -Indexes artinya Untuk mengijinkan Directory Listing,sobat dapat menghapus line tersebut atau mengganti tanda - dengan tanda +.
^ = Awal pengujian regresi
() = pengelompokan atau grup
* = semua atau wildcard, biasanya dipakai dengan notasi .*
{0,1} = jangkauan mulai dari 0 sampai 1
$ = Akhir regresi
[QSA] = Append Query String: menambahkan langsung string query ke akhir ekspresi (URL).
[L] = Last Rule: menginstruksikan server untuk menghentikan penulisan ulang (rewriting) jika telah ditemukan yang sesuai dengan rule.
Pada tutorial ini kita hanya menggunakan beberpa code yaitu (.*)\,[L],^. Tapi ingat berhati-hatilah dalam menggunakan httaccess, jika sobat memutuskan untuk menggunakan httaccess untuk project website sobat, maka pertahankanlah untuk menggunakannya sampai project sobat selesai, untuk link file js,css,images saya sarankan sobat tetap menggunakan link absolute artinya tanpa menggunakan httaccess, gunakanlah httaccess dengan bijak dan benar.
Sebelum melangkah selanjutnya pada tutorial ini sobat harus download file yang dibutuhkan disini, karna untuk view kita sudah menggunaan bootstrap 4.3.1.
Langkah kedua
Buatlah folder dengan nama blog di htdocs kemudian buatlah file .httaccess dengan editor kesayang sobat, dan letakkan di dalam folder aplikasi sobat, kemudian copy atau ketik kode dibawah ini, contoh nya folder saya terdapat di C:\xampp\htdocs\blog\.
RewriteEngine on RewriteRule ^index.html$ ?page=home [L] RewriteRule ^about.html$ ?page=about [L] RewriteRule ^blog.html$ ?page=blog [L] RewriteRule ^addblog(.*)\.html$ ?page=addblog [L] RewriteRule ^save(.*)\.html$ ?page=saveblog [L] RewriteRule ^blog-(.*)\.html$ ?page=readblog&blog_id=$1 [L] RewriteRule ^edit-(.*)\.html$ ?page=editblog&blog_id=$1 [L] RewriteRule ^update(.*)\.html$ ?page=update [L] RewriteRule ^delete-(.*)\.html$ ?page=deleteblog&blog_id=$1 [L] RewriteRule ^page_blog-(.*)\.html$ ?page=blog&page_blog=$1 [L] RewriteRule ^contact.html$ ?page=contact [L] Options All -Indexes
Jika sudah dicopy atau diketik lalu save, dan ikuti langkah selanjutnya
Langkah ketiga
Buat database sesuai dengan nama sesuai dengan keinginan sobat jangan lupa koneksinya juga sesuaikan, lalu buat tabel dengan nama blog
CREATE TABLE `blog` ( `id` int(11) NOT NULL, `title` varchar(255) DEFAULT NULL, `description` varchar(255) DEFAULT NULL, `slug` varchar(255) DEFAULT NULL, `image` varchar(255) DEFAULT NULL, `created_at` timestamp NULL DEFAULT NULL ON UPDATE current_timestamp(), `updated_at` timestamp NULL DEFAULT NULL ON UPDATE current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Langkah Keempat
Buat koneksi database dengan nama koneksi.php, lalu ketik code dibawah ini
<?php
$host="localhost";
$user="root";
$pass="";
$database="dbtemp";
$mysqli=new mysqli($host,$user,$pass,$database);
if (mysqli_connect_errno()) {
trigger_error('Koneksi ke database gagal: ' . mysqli_connect_error(), E_USER_ERROR);
}
?>
Langkah Kelima
Saya menggunakan bootsrap untuk tutorial ini , sebelum melakukan intruksi selanjutnya sobat download terlebih dahulu bootstrap disini, dan extract di folder root aplikasi sobat. Kemudian ikuti langkah dibawah ini.
Buat file dengan nama index.php, lalu ketik code dibawah ini
<!doctype html>
<html lang="en">
<head>
<title>CRUD (Create Read update delete) Menggunakan Htaccess Rewriterule</title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport"/>
<meta content="Aguzrybudy" name="author"/>
<link href="http://www.aguzrybudy.com/images/index/favicon.webp" rel="shortcut icon" type="image/x-icon" />
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
body {
min-height: 75rem;
padding-top: 4.5rem;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
ul.alink{
list-style: none;
padding-left: 0px;
}
ul.alink li{
display: inline;
margin-right: 5px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="http://www.aguzrybudy.com" target="_blank">Aguzrybudy</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
<div class="container">
<div class="jumbotron">
</div>
</div>
<div class="container">
<h3>CRUD (Create Read update delete) Menggunakan Htaccess Rewriterule <span class="badge badge-success">PHP 7.3.9</span></h3>
<p class="mb-4">By Aguzrybudy, Jum'at 13 September 2019 </p>
<?php include "page.php";?>
</div>
<div class="container mt-4">
<div class="jumbotron">
</div>
</div>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">© 2019 Copyright Aguzrybudy. All rights reserved.</span>
</div>
</footer>
</body>
</html>
Langkah Keenam
Buatlah file dengan nama page.php, kemudian ketik kode dibawah ini
<?php
//error_reporting(1);
if(isset( $_GET['page']) && $_GET['page'] == "home"){
include"home.php";
}
elseif(isset( $_GET['page']) && $_GET['page'] == "blog"){
include"blog.php";
}
elseif(isset( $_GET['page']) && $_GET['page'] == "addblog"){
include"add_blog.php";
}
elseif(isset( $_GET['page']) && $_GET['page'] == "saveblog"){
include"save.php";
}
elseif(isset( $_GET['page']) && $_GET['page'] == "readblog"){
include"blog_detail.php";
}
elseif(isset( $_GET['page']) && $_GET['page'] == "editblog"){
include"edit_form.php";
}
elseif(isset( $_GET['page']) && $_GET['page'] == "update"){
include"update.php";
}
elseif(isset( $_GET['page']) && $_GET['page'] == "deleteblog"){
include"delete_blog.php";
}
elseif(isset( $_GET['page']) && $_GET['page'] == "about"){
include"about.php";
}
elseif(isset( $_GET['page']) && $_GET['page'] == "contact"){
include"contact.php";
}
else{
include"home.php";
}
?>
Langkah Ketujuh
Buatlah file dengan nama BlogPaging.php, kemudian ketik kode dibawah ini.
<?php
class BlogPaging{
function cariPosisi($batas){
if(empty($_GET['page_blog'])){
$posisi=0;
$_GET['page_blog']=1;
}
else{
$posisi = ($_GET['page_blog']-1) * $batas;
}
return $posisi;
}
// Fungsi untuk menghitung total halaman
function jumlahHalaman($jmldata, $batas){
$jmlhalaman = ceil($jmldata/$batas);
return $jmlhalaman;
}
// Fungsi untuk link halaman 1,2,3
function navHalaman($halaman_aktif, $jmlhalaman){
$link_halaman = "<li></li>";
// Link ke halaman pertama (first) dan sebelumnya (prev)
if($halaman_aktif > 1){
$prev = $halaman_aktif-1;
$link_halaman .= "
<li class='page-item'><a class='page-link' href=page_blog-1.html>First</a></li>
<li class='page-item'><a class='page-link' href=page_blog-$prev.html> Prev</a></li> ";
}
else{
$link_halaman .= " <li class='page-item'><a class='page-link' href='#' aria-label='Previous'> <span aria-hidden='true'>Prev</span> </a></li> ";
}
// Link halaman 1,2,3, ...
$angka = ($halaman_aktif > 3 ? "<li class='page-item'> " : " </li>");
for ($i=$halaman_aktif-2; $i<$halaman_aktif; $i++){
if ($i < 1)
continue;
$angka .= "<li class='page-item'><a class='page-link' href=page_blog-$i.html>$i</a></li> ";
}
$angka .= " <li class='page-item active'><a class='page-link' href='#'>$halaman_aktif <span class='sr-only'>(current)</span></a> </li> ";
for($i=$halaman_aktif+1; $i<($halaman_aktif+3); $i++){
if($i > $jmlhalaman)
break;
$angka .= "<li class='page-item'><a class='page-link' href=page_blog-$i.html>$i</a></li> ";
}
$angka .= ($halaman_aktif+2<$jmlhalaman ? " <li class='page-item'> <a class='page-link' href=page_blog-$jmlhalaman.html> $jmlhalaman</a> " : " </li>");
$link_halaman .= "<li>$angka</li>";
// Link ke halaman berikutnya (Next) dan terakhir (Last)
if($halaman_aktif < $jmlhalaman){
$next = $halaman_aktif+1;
$link_halaman .= "
<li class='page-item'> <a class='page-link' href=page_blog-$next.html>Next</a></li>
<li class='page-item'><a class='page-link' href=page_blog-$jmlhalaman.html>Last </a><li>";
}
return $link_halaman;
}
}
?>
Langkah Ketujuh Part II
Buatlah file dengan nama function.php, kemudian ketik kode dibawah ini.
<?php
/**
* make a string as slug
* @return string
*/
function slug($string)
{
$r = array (' ');
$a = array ('-','/','\\',',','.','#',':',';','\'','"','[',']','{','}',')','(','|','`','~','!','@','%','$','^','&','*','=','?','+');
$string = str_replace($a, '', $string); // Hilangkan karakter yang telah disebutkan di array $d
$string = strtolower(str_replace($r, '-', $string)); // Ganti spasi dengan tanda - dan ubah hurufnya menjadi kecil semua
return $string;
}
/**
* truncate a string provided by the maximum limit without breaking a word
* @param string $str
* @param integer $maxlen
* @return string
*/
function strLimit($str, $maxlen): string
{
if (strlen($str) <= $maxlen) return $str;
$newstr = substr($str, 0, $maxlen);
if (substr($newstr, -1, 1) != ' ') $newstr = substr($newstr, 0, strrpos($newstr, " "));
return $newstr;
}
/**
* Upload image to specific folder
* @return image
*/
function uploadImage($image_location, $image){
$vdir_upload = "images/blog/";
$vfile_upload = $vdir_upload . $image;
move_uploaded_file($image_location, $vfile_upload);
}
Langkah Kedelapan
Buatlah file dengan nama home.php, kemudian ketik code dibawah ini.
<div class="row mb-2">
<?php
include "koneksi.php";
include"function.php";
include"BlogPaging.php";
$p = new BlogPaging;
$batas = 4;
$posisi = $p->cariPosisi($batas);
$data_blog=$mysqli->query("SELECT * FROM blog ORDER BY id DESC LIMIT $posisi,$batas");
while($row=mysqli_fetch_array($data_blog)){
?>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">Blog</strong>
<h3 class="mb-0"><?php echo strLimit($row['description'], 20); ?></h3>
<div class="mb-1 text-muted"><?php echo $row['created_at']; ?></div>
<p class="card-text mb-auto"><?php echo strLimit($row['description'], 50); ?></p>
<ul class="alink">
<li> <a href="blog-<?php echo $row['id']; ?>.html" >Read</a></li>
<li> <a href="edit-<?php echo $row['id']; ?>.html" >Edit</a></li>
<li><a href="delete-<?php echo $row['id']; ?>.html" >Delete</a></li>
</ul>
</div>
<div class="col-auto d-none d-lg-block">
<img src="images/blog/<?php echo $row['image']; ?>" alt="" height="210" width="210" style="object-fit: cover"/>
</div>
</div>
</div>
<?php } ?>
</div>
Langkah kesembilan
Buatlah file dengan nama blog.php, kemudian ketik kode dibawah ini.
<div class="row mb-2">
<div class="col-md-12 mb-3">
<a href="addblog.html" class="btn btn-primary">Add New Blog</a>
</div>
<?php
include "koneksi.php";
include"function.php";
include"BlogPaging.php";
$p = new BlogPaging;
$batas = 4;
$posisi = $p->cariPosisi($batas);
$data_blog=$mysqli->query("SELECT * FROM blog ORDER BY id DESC LIMIT $posisi,$batas");
while($row=mysqli_fetch_array($data_blog)){
?>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">Blog</strong>
<h3 class="mb-0"><?php echo strLimit($row['description'], 20); ?></h3>
<div class="mb-1 text-muted"><?php echo $row['created_at']; ?></div>
<p class="card-text mb-auto"><?php echo strLimit($row['description'], 50); ?></p>
<ul class="alink">
<li> <a href="blog-<?php echo $row['id']; ?>.html" >Read</a></li>
<li> <a href="edit-<?php echo $row['id']; ?>.html" >Edit</a></li>
<li><a href="delete-<?php echo $row['id']; ?>.html" >Delete</a></li>
</ul>
</div>
<div class="col-auto d-none d-lg-block">
<img src="images/blog/<?php echo $row['image']; ?>" alt="" height="210" width="210" style="object-fit: cover"/>
</div>
</div>
</div>
<?php } ?>
</div>
<?php
$jmldata = mysqli_num_rows($mysqli->query("SELECT * FROM blog"));
$jmlhalaman = $p->jumlahHalaman($jmldata, $batas);
$linkHalaman = $p->navHalaman($_GET['page_blog'], $jmlhalaman);
echo "
<nav aria-label='Page navigation example'>
<ul class='pagination'>
<li class='page-item'> $linkHalaman </li>
</ul>
</nav>";
?>
Langkah Kesepuluh
Buatlah file dengan nama add_blog.php, kemudian ketik code dibawah ini
<form method="POST" action="save.html" enctype="multipart/form-data">
<div class="form-group">
<label for="Title">Title</label>
<input type="text" class="form-control" id="title" placeholder="Title" name="title" equired="">
</div>
<div class="form-group">
<label for="Description">Description</label>
<textarea class="form-control" id="Description" placeholder="Description" name="description" equired=""></textarea>
</div>
<div class="form-group">
<label for="Image">Image</label>
<input type="file" class="form-control" id="fupload" name="fupload" required="">
</div>
<div class="form-group">
<label for="Date">Date</label>
<input type="text" class="form-control" id="Date" placeholder="<?php echo date("Y-m-d H:i:s") ;?>" name="date" disabled>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="reset" class="btn btn-danger">Reset</button>
</form>
Langkah Kesebelas
Buatlah file dengan nama delete_blog.php, kemudian ketik kode dibawah ini
<?php
include "koneksi.php";
$blog_id = $_GET['blog_id'];
$sql = $mysqli->query("select * from blog where id='$blog_id' ");
$row = mysqli_fetch_array($sql);
unlink('images/blog/'.$row['image']);
$delete = $mysqli->query("Delete From blog where id='$blog_id' ");
if (!$delete) {
echo "Gagal",mysqli_error();
}else{
header('location:blog.html');
}
?>
Langkah Kedua Belas
Buatlah file dengan nama edit_form.php, kemudian ketik code dibawah ini
<?php
include "koneksi.php";
include"function.php";
$blog_id = $_GET['blog_id'];
$sql = $mysqli->query("select * from blog where id='$blog_id' ");
$row = mysqli_fetch_array($sql);
?>
<form action="update.html" method="POST" enctype="multipart/form-data">
<h4>Contoh form edit menggunakan httaccess</h4>
<fieldset class="form-group">
<label for="Title">Title</label>
<input type="hidden" class="form-control" id="blog_id" value="<?php echo $row['id'];?>" name="blog_id">
<input type="text" class="form-control" id="title" value="<?php echo $row['title'];?>" name="title">
</fieldset>
<fieldset class="form-group">
<label for="Description">Description</label>
<textarea class="form-control" id="Description" name="description"><?php echo $row['description'];?></textarea>
</fieldset>
<fieldset class="form-group">
<label for="Image">Image</label>
<input type="file" class="form-control" id="image" name="fupload">
<input type="hidden" value="<?php echo $row['image'];?>" name="imagein">
</fieldset>
<fieldset class="form-group">
<label for="Date">Date</label>
<input type="text" class="form-control" id="Date" value="<?php echo $row['created_at'];?>" name="date" disabled>
</fieldset>
<fieldset class="form-group">
<label for="Date"></label>
<button type="submit" class="btn btn-success">Update</button>
<button type="button" class="btn btn-danger" onclick="self.history.back()">Back</button>
</fieldset>
</form>
Langkah Ketiga Belas
Buatlah file dengan nama blog_detail.php, kemudian ketik kode dibawah ini
<?php
include "koneksi.php";
$id = $_GET['blog_id'];
$sql = $mysqli->query("select * from blog where id ='$id' ");
$row = mysqli_fetch_array($sql);
?>
<div class="row">
<div class="col-md-12 blog-main">
<div class="blog-post">
<h2 class="blog-post-title mb-3"><?php echo $row['title'];?></h2>
<div class="blog-image mb-3">
<img src="images/blog/<?php echo $row['image']; ?>" alt="" style="object-fit: cover;width: 100%;"/>
</div>
<p class="blog-post-meta mb-3"><?php echo $row['created_at'];?></p>
<p><?php echo $row['description'];?></p>
<hr>
<button onclick="self.history.back()" class="btn btn-info">Back</button>
</div>
</div>
</div>
Langkah Keenam Belas
Buatlah file dengan nama update.php, kemudian ketik kode dibawah ini .
<div class="alert alert-info" role="alert">
<strong>Perhatian!</strong> Untuk proses simpan updatenya buat sendiri, dibawah ini data hasil dari input postnya.
</div>
<div class="container">
<p>
<?php echo $_POST['subject'];?></p>
<p>
<?php echo $_POST['description'];?></p>
<p>
<?php echo $_POST['date'];?></p>
</div>
<?php
include"koneksi.php";
$subject = $_POST['subject'];
$description = $_POST['description'];
$update = mysql_query("UPDATE blog SET subject ='$subject',description='$description' WHERE blog_id ='$_POST[blog_id]'");
if (!$update) {
echo "Gagal",mysql_error();
}else{
header('location:blog.html');
}
?>
<a href="#" onclick="self.history.back()" class="btn btn-info">Back</a>
Langkah Ketujuh Belas
Buatlah file dengan nama about.php, kemudian ketik kode dibawah ini
<div class="row mb-2"> <div class="col-md-12"> <div class="alert alert-success" role="alert"> <strong>Tentang!</strong> <p>Website ini dibuat untuk tujuan pembelajaran</p> </div> </div> </div>
Langkah Kesembilan Belas
Buatlah file dengan nama contact.php, kemudian ketik kode dibawah ini.
<div class="row mb-2"> <div class="col-md-12"> <div class="alert alert-success" role="alert"> <strong>Kontak!</strong> <p>Silahkan kirim email ke aguzrybudy@ymail.com jika ada yang ingin di tanyakan</p> </div> </div> </div>
NB : Code diatas saya tulis di php 7.3.9 & Bootstrap 4.3.1
Sampai disini dulu tutorial dari kita, semoga tutorial ini bermanfaat bagi anda dan jika bermanfaat jangan lupa di share, atas segala kekuranganya mohon dimaafkan, jika ada yang ingin ditanyakan silahkan tinggalkan komentar. Jika sobat ingin code dari aplikasi diatas download pada button dibawah ini.
