Buat Slug URL Dengan PHP Untuk Mempercantik URL dan Mencegah Serangan SQL Injection

by Gerai Anime Friday, September 30, 2022 Post a Comment

Apa Itu Slug URL?

Slug merupakan bagian dari sebuah URL/permalink yang merujuk atau menuju pada konten website secara spesifik. Slug berada dibagian paling belakang setelah permalink atau nama domain website. Slug biasanya selalu ditulis dengan huruf kecil dan dihubungkan dengan tanda hubung (-), selain itu juga tidak ada karakter unik seperti tanda tanya, koma, seru atau karakter unik lainnya.

Membuat Slug URL Dengan PHP Untuk Mempercantik URL dan Mencegah Serangan SQL Inject

Membuat Slug URL dengan PHP

Slug berfungsi untuk mempercantik sebuah permalink atau Url agar lebih menunjukan arah konten yang akan dituju. Ada banyak fungsi dari slug sendiri, seperti agar lebih cepat diindex di google. optimasi SEO bahkan juga bisa menimalisir dari serangan SQL Inject melalui Url. Ada begitu banyak manfaat dari slug untuk url website.

Manfaat dan Fungsi Slug URL Untuk Website

Mempercantik Url Website
Menunjukan Arah Konten
Optimasi SEO di Mesin Pencarian
Mudah Diindex Mesin Pencari Seperti Google
Mencegah Serangan SQL Inject Melalui Url
Dll

Jika kalian menggunakan Wordpress, Blogger atau cms lainnya. Kalian tidak perlu susah-susah untuk membuat slug url untuk konten, karna dari cms tersebut akan membuat secara otomatis. Tapi jika kalian membuat sebuah website dengan coding sendiri, dengan bahasa pemrograman kalian apalagi bahasa PHP, maka kalian harus membuat sendiri Slug untuk urlnya. Terus bagaimana kita membuat slug url dengan bahasa PHP?.

Seperti dijelaskan diatas bahwa slug sendiri, terdiri dari huruf kecil dan dihubungkan dengan tanda hubung(-) tiap kata dan juga tidak ada karakter unik seperti tanda tanya atau lainnya. Disini saya akan membagikan tutorialnya, saya akan menggunakan judul konten untuk slug urlnya.

Cara Membuat Slug Url dengan PHP

Pertama buat database dengan nama "berita" di Phpyadmin di XAMPP.
Buat tabel dengan nama "berita" dan isi atribut atau kolomnya seperti "id_berita", "judul", "berita","slug'. seperti dibawah ini.

Selanjutanya buat folder dengan nama slug, lalu buat file "index.php" didalamnya.
Ketikan script dibawah untuk membuat sebuah halaman form tambah berita dan dan menampilkan data di tabel, di file index.php.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="icon" href="images/dk.png">
   <title>Demo Slug URL dengan PHP</title>
   
   <meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?>">
   <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
   <nav class="navbar navbar-dark bg-danger fixed-top">
      <a class="navbar-brand" href="index.php" style="color: #fff;">
        Djazuli IT
      </a>
   </nav>
   <div class="container mb-3">
       <h2 align="center" style="margin: 60px 10px 10px 10px;">Contoh Buat Slug Url dengan PHP</h2><hr>
       <form method="POST" id="form_komen">
           <div class="form-group">
               <input type="text" name="judul" id="nama_pengirim" class="form-control" placeholder="Masukkan Judul" />
           </div>
           <div class="form-group">
               <textarea name="berita" class="form-control" placeholder="Isi Berita" rows="5"></textarea>
           </div>
           <div class="form-group">
               <input type="hidden" name="komentar_id" id="komentar_id" value="0" />
               <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
           </div>
       </form>
       <div class="table-responsive">
           <table border="1px" width="100%">
               <tr>
                   <th>No</th>
                   <th>Judul</th>
                   <th>Aksi</th>
               </tr>
               <?php
               // Untuk menghubungkan dengan database berita
               $koneksi =new mysqli("localhost","root","","berita");
               // menyeleksi atau menampilkan tabel berita
               $ambil=$koneksi->query("SELECT * FROM berita");
               // buat perulangan
               while($pecah=$ambil->fetch_assoc()){
               ?>
               <tr>
                   <td>1</td>
                   <td><?php echo $pecah['judul'] ?></td>
                   
                   <td><a href="<?php echo $pecah['slug'] ?>" class="btn btn-primary">Detail</a></td>
               </tr>
               <?php } ?>
           </table>
       </div>
   </div>

   <script src="js/jquery.min.js"></script>

   </script>
   <div class="navbar bg-dark">
       <div style="color: #fff;" ><center>© <?php echo date('Y'); ?> Copyright:
            <a href="https://djazuli.my.id/"> Djazuli IT</a></center>
       </div>
   </div>
</body>
</html>

Selanjutnya kita buat script perintah untuk menyimpan form tambah berita ke database "berita", seperti ini. Disana sudah saya kasih komentar untuk tiap fungsi querynya. taruh script diatas, tepat diatas pemanggil jquery. Slug nanti kita jadikan sebagai parameter ketika ingin merujuk ke detail berita.

<?php
   // Membuat logika jika, ada post submit maka melakukan perintah seperti dibawah
   if (isset($_POST['submit'])) {
       // menyimpan post judul dengan variable
       $judul=$_POST['judul'];
       //kita buat post slug dan mengganti spasi dengan tanda hubung(-)
       $slug2=preg_replace("/\s/","-",$judul);
       // mengubah huruf besar ke kecil
       $slug1= strtolower($slug2);
       // menghapus semua karakter unik dijudul
       $slug = preg_replace("/[^a-zA-Z0-9 -]/","",$slug1);
       // menyimpan post ke database ditabel berita
       $koneksi->query("INSERT INTO berita(judul, berita, slug) VALUES('$judul','$_POST[berita]', '$slug')");

       // pesan setelah menyimpan
       echo "<script>alert('Berita Ditambah')</script>";
       // redirect ke file index php
       echo "<script>location='index.php';</script>";
   }
   ?>

Maka jika digabungkan script diatas maka jadi seperti ini.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="icon" href="images/dk.png">
   <title>Demo Slug URL dengan PHP</title>
   
   <meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?>">
   <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
   <nav class="navbar navbar-dark bg-danger fixed-top">
      <a class="navbar-brand" href="index.php" style="color: #fff;">
        Djazuli IT
      </a>
   </nav>
   <div class="container mb-3">
       <h2 align="center" style="margin: 60px 10px 10px 10px;">Contoh Buat Slug Url dengan PHP</h2><hr>
       <form method="POST" id="form_komen">
           <div class="form-group">
               <input type="text" name="judul" id="nama_pengirim" class="form-control" placeholder="Masukkan Judul" />
           </div>
           <div class="form-group">
               <textarea name="berita" class="form-control" placeholder="Isi Berita" rows="5"></textarea>
           </div>
           <div class="form-group">
               <input type="hidden" name="komentar_id" id="komentar_id" value="0" />
               <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
           </div>
       </form>
       <div class="table-responsive">
           <table border="1px" width="100%">
               <tr>
                   <th>No</th>
                   <th>Judul</th>
                   <th>Aksi</th>
               </tr>
               <?php
               // Untuk menghubungkan dengan database berita
               $koneksi =new mysqli("localhost","root","","berita");
               // menyeleksi atau menampilkan tabel berita
               $ambil=$koneksi->query("SELECT * FROM berita");
               // buat perulangan
               while($pecah=$ambil->fetch_assoc()){
               ?>
               <tr>
                   <td>1</td>
                   <td><?php echo $pecah['judul'] ?></td>
                   
                   <td><a href="<?php echo $pecah['slug'] ?>" class="btn btn-primary">Detail</a></td>
               </tr>
               <?php } ?>
           </table>
       </div>
   </div>

   <?php
   // Membuat logika jika, ada post submit maka melakukan perintah seperti dibawah
   if (isset($_POST['submit'])) {
       // menyimpan post judul dengan variable
       $judul=$_POST['judul'];
       //kita buat post slug dan mengganti spasi dengan tanda hubung(-)
       $slug2=preg_replace("/\s/","-",$judul);
       // mengubah huruf besar ke kecil
       $slug1= strtolower($slug2);
       // menghapus semua karakter unik dijudul
       $slug = preg_replace("/[^a-zA-Z0-9 -]/","",$slug1);
       // menyimpan post ke database ditabel berita
       $koneksi->query("INSERT INTO berita(judul, berita, slug) VALUES('$judul','$_POST[berita]', '$slug')");

       // pesan setelah menyimpan
       echo "<script>alert('Berita Ditambah')</script>";
       // redirect ke file index php
       echo "<script>location='index.php';</script>";
   }
   ?>


   <script src="js/jquery.min.js"></script>

   </script>
   <div class="navbar bg-dark">
       <div style="color: #fff;" ><center>© <?php echo date('Y'); ?> Copyright:
            <a href="https://djazuli.my.id/"> Djazuli IT</a></center>
       </div>
   </div>
</body>
</html>

Selanjutnya buat file baru, dengan nama "detail.php". File ini menampilkan detail berita sesuai dengan id berita tersebut.
Ketikkan script dibawah di file "detail.php".

<?php
   // Untuk menghubungkan dengan database berita
   $koneksi =new mysqli("localhost","root","","berita");
   // mengget atau mengambil data berdasarkan id atau slug yang dikirim
   $slug =$_GET['id'];
   // menyeleksi atau menampilkan tabel berita dan memecahnya
   $ambil=$koneski->query("SELECT * FROM berita WHERE slug='$slug'");
   $pecah=$ambil->fetch_assoc();

?>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="icon" href="images/dk.png">
   <title>Demo Slug URL dengan PHP</title>
   
   <meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?>">
   <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
   <nav class="navbar navbar-dark bg-danger fixed-top">
      <a class="navbar-brand" href="index.php" style="color: #fff;">
        Djazuli IT
      </a>
   </nav>

   <div class="container mb-3">
       <h2 align="center" style="margin: 60px 10px 10px 10px;">Contoh Buat Slug Url dengan PHP</h2><hr>

           <h4 align="center"><?php echo $pecah['judul'] ?></h4>
           <p><?php echo $pecah['berita'] ?></p>
   </div>



   <script src="js/jquery.min.js"></script>

   </script>
   <div class="navbar bg-dark">
       <div style="color: #fff;" ><center>© <?php echo date('Y'); ?> Copyright:
            <a href="https://djazuli.my.id/"> Djazuli IT</a></center>
       </div>
   </div>
</body>
</html>

Agar Url lebih bagus lagi kita buat file baru ".htaccess" jangan lupa kasih titik. dan ketik script dibawah ini.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*)$ $1.php
RewriteRule ^index\.html$ index.php [L]
RewriteRule ^([a-zA-Z0-9-_()/]+)$ detail.php?id=$1 [L]
Options All -Indexes

Sekarang coba kalian jalankan dan buat berita diform tambah berita. dan klik tombol Detail dan lihat url nya, cantik kan. Hasilnya seperti gambar dibawah.

Penjelasan

File .htaccess berfungsi untuk menghapus ekstensi .php dan juga merewrite url agar tidak perlu menambahkan detail.php di bagian pengirim parameter di file index.php, jika tidak menggunakan .htaccess kalian harus menambah kan seperti ini.

// tidak menggunakan .htaccess

<td><a href="detail.php?id=<?php echo $pecah['slug'] ?>" class="btn btn-primary">Detail</a></td>

Hasil url akan seperti ini.

Gimana, mudah kan?. Jika kalian menggunakan slug akan mempercantik url kalian, dan tutorial diatas bisa kalian coba. Jika dirasa belum paham kalian bisa tonton video saya dibawah. Semoga tutorial "Membuat Slug URL Dengan PHP Untuk Mempercantik URL dan Mencegah Serangan SQL Inject". bermanfaat.

Djazuli IT