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

Htaccess

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

RewriteCond

RewriteRule

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="https://storage.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="https://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;
  }
}
?>

<?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);
}

<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>

<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>"; 
?>

<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>

<?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');  
  }

?>

<?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>

<?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>

<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>

<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>

<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>