Cara Membuat Slug Menggunakan AjaxJquery

Slug adalah bagian dari url yang berfungsi untuk membantu mengidentifikasi halaman website yang dibaca untuk pengguna. Sebelumnya saya sudah membahas tentang cara membuat slug menggunakan php dan kali ini saya akan membahas Cara Membuat Slug Menggunakan AjaxJquery. Pertama-tama teman-teman bisa buat terlebih dahulu databasenya untuk tempat penyimpanan slug atau salin script di bawah.

CREATE TABLE `shelli_slug` (

  `slug_id` int(11) NOT NULL,

  `slug_title` varchar(255) NOT NULL,

  `slug_url` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `shelli_slug`

  ADD PRIMARY KEY (`slug_id`);

ALTER TABLE `shelli_slug`

  MODIFY `slug_id` int(11) NOT NULL AUTO_INCREMENT;

Jika sudah maka langkah selanjutnya Cara Membuat Slug Menggunakan AjaxJquery yaitu membuat struktur html seperti pada script di bawah ini.

 

<!DOCTYPE html>

<html>

 <head>

  <title>Cara Membuat Slug Menggunakan AjaxJquery</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

  <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

  <style>

  .box

  {

   max-width:600px;

   width:100%;

   margin: 0 auto;;

  }

  </style>

 </head>

 <body>

  <div class="container box">

   <h3 align="center">Cara Membuat Slug Menggunakan AjaxJquery</h3>

   <form method="post" id="generated_slug">

    <div class="form-group">

     <label>Masukan Judul Untuk Slug</label>

     <input type="text" name="title" class="form-control" id="title" required />

    </div>

    <div class="form-group">

     <input type="submit" name="create" class="btn btn-info" value="Create" />

    </div>

    <h4>Generated Slug - <span id="slug"></span></h4>

   </form>

  </div>

 </body>

</html>

Dan berikutnya kita akan membuat script event submit dengan membuat slug menggunakan metode split dan join dan kemudian data akan dikirim ke file insert.php untuk melakukan proses simpan.

<script> 

      $(document).ready(function(){ 

           $('#generated_slug').on("submit", function(e){ 

                e.preventDefault();

                var slug = $("#title").val();

                var splt = slug.split(" ");

                var result=splt.join("-");

                var data_slug = new FormData(this);

                data_slug.append('slug_url', result);

                console.log(data_slug);

                $.ajax({ 

                     url:"insert.php", 

                     method:"POST", 

                     data:data_slug, 

                     contentType:false,   

                     cache:false,           

                     processData:false,   

                     success: function(data){ 

                        $("#slug").text(data);

                     } 

                }) 

           }); 

      }); 

 </script> 

Dan berikut ini perintah php untuk simpan data ke database.

<?php

$host = 'localhost';

$user = 'dumet';

$pass = 'school';

$db = 'test';

$conn = mysqli_connect($host,$user,$pass,$db);

if(!$conn){

     die("Connection :Failed ".mysqli_connect_error());

}

$slug_title=$_POST["title"];

$slug_url=$_POST["slug_url"];

$sql="INSERT INTO shelli_slug VALUES('','$slug_title','$slug_url')";

if(mysqli_query($conn, $sql)){

      $pesan = $slug_url;

}else{

     $pesan = "Slug Gagal";

}

echo $pesan;

?>

Jika ditampilkan dihalaman browser maka akan tampil seperti pada gambar dibawah ini.

Cara Membuat Slug Menggunakan AjaxJquery

Demikian artikel tentang Cara Membuat Slug Menggunakan AjaxJquery. Semoga bermanfaat dan selamat mencoba.

25 April 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat