Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Lengkap Cara Membuat Slug di Codeigniter 4

6 min read

Apa gunanya Slug di Codeigniter 4 dan mengapa kita perlu menggunakan Slug?

Sebelum menjawab pertanyaan di atas, saya akan menjelaskan terlebih dahulu apa itu slug dan apa manfaatnya untuk website yang kita bangun menggunakan Codeigniter 4.

Apa Itu Slug?

Slug merupakan teks permalink setelah nama domain yang akan mengarahkan pengunjung situs menuju ke konten kita.

Contohnya:

https://ilmucoding.com/judul-artikel

Kata yang cetak tebal merupakan sebuah slug yang telah diatur oleh kita.

… itu artinya konten kita akan terakses apabila pengunjung situs mem-klik atau mengungjungi URL tersebut.

Supaya lebih jelas, coba perhatikan gambar di bawah ini:

slug setelah nama domain di codeigniter 4

… yang saya tandai dengan kotak merah, itu disebut slug.

Biasanya slug memiliki huruf yang kecil (lowercase), mengganti spasi dengan tanda hubung (“-“) serta meniadakan karakter khusus seperti #, $, *, % dan lain-lain.

Kesimpulannya, slug biasa diisi dengan huruf kecil, tanda hubung dan angka saja.

Manfaat Membuat Slug

Slug memiliki banyak sekali manfaat yang perlu kita ketahui.

Sebagai seorang developer website, kadang-kadang dihadapkan suatu pilihan untuk memberikan route atau slug untuk menuju suatu konten.

… oleh sebab itu slug mesti memiliki 2 syarat:

  1. Human Friendly
  2. SEO Friendly
  3. Lanjutkan bacanya …

Nah ketika syarat di atas bisa kita jelaskan selengkapnya.

Pertama, human friendly.

URL yang baik adalah “yang mudah diingat oleh pengunjung situs”.

Hindari membuat URL yang memusingkan dan tidak berhubungan dengan konten.

Contoh URL yang baik:

https://ilmucoding/laravel-livewire-component/

Contoh URL yang kurang baik:

https://ilmucoding/laravel.php?id=323232

Silahkan perhatikan, URL pertama jauh lebih baik daripada yang kedua.

Jadi, nggak boleh asal saja.

Kedua, SEO Friendly

Salah satu kelebihan memanfaatkan fitur slug dengan baik adalah agar website yang kita bangun akan memiki kualitas di mata Google.

… meski hanya berdampak kecil saja di SEO, tetapi slug memiliki dampak yang cukup penting untuk mendukung suatu konten ada di halaman pertama Google.

Selamat mencoba…

Panduan Lengkap Membuat Slug di Codeigniter 4

Sekarang kita akan masuk ke materi bagaimana menerapkan slug di project Codeigniter 4 kita.

Step by step.

Step 1: Download Codeigniter 4

Silahkan buka situs resmi Codeigniter di codeigniter.com

Download Codeigniter 4 versi terbaru.

download codeigniter 4 versi terbaru

Step 2: Pindahkan & Extract File

Pindahkan file .zip yang telah kita download ke direktori web server yang kita gunakan.

Pengguna XAMPP, LAMP biasanya meletakan di:

xampp/htdocs

Laragon, Nginx bisa meletakan di folder www:

laragon/www

… dan pada contoh kali ini saya menggunakan Laragon dan meletakan file di folder laragon/www.

extract here slug codeiginiter 4 - ilmucoding

Jika sudah selesai melakukan proses extract, rename folder dengan nama ci4_slug.

rename project slug codeigniter 4

Step ke 2 selesai.

Step 3: Setting Environment dan Konfigurasi Database

Salah satu hal terpenting dari tutorial ini adalah setting environment dan konfigurasi database.

Ada 2 hal yang akan kita lakukan pada environment, yaitu mengubah production ke development dan konfigurasi database.

… namun sebelum melakukan hal tersebut, silahkan ubah file env menjadi .env.

Sebelum mengubah environment
Sebelum mengubah environment
Setelah menambahkan titik di depannya (.env)
Setelah menambahkan titik di depannya (.env)

Jika sudah mengubahnya, sekarang kita lanjut …

Pertama, Ubah Environment

Buka file .env kemudian cari kode berikut:

#CI_ENVIRONMENT = production

Ubah menjadi:

CI_ENVIRONMENT = development

Kedua, Konfigurasi Database

Silahkan buat database baru bernama db_ci4_slug.

CREATE DATABASE IF NOT EXISTS `db_ci4_slug`; 

Lalu buat table baru bernama artikel:

CREATE TABLE IF NOT EXISTS `artikel` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `slug` varchar(100) NOT NULL,
  `content` text NOT NULL,
  PRIMARY KEY (`id`)
);

Hasilnya:

hasil create table artikel ilmucoding

Terakhir, buka .env dan cari kode berikut:

# database.default.hostname = localhost
# database.default.database = ci4
# database.default.username = root
# database.default.password = root
# database.default.DBDriver = MySQLi

Bagian terpenting adalah menghapus tanda #.

Silahkan ubah menjadi:

database.default.hostname = localhost
database.default.database = db_ci4_slug
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi

Selesai konfigurasi database 🙂

Catatan: kamu juga bisa membuat table dengan memanfaatkan fitur migration yang disediakan oleh Codeigniter 4.

Pertama, ketik perintah berikut ini melalui command line:

php spark migrate:create artikel

Jika kamu mendapatkan error seperti di bawah ini saat menjalakannya:

PHP Fatal error:  Uncaught Error: Call to undefined function CodeIgniter\locale_set_default() 
.....

Solusinya silahkan buka php.ini, kemudian uncomment extension=intl.

Kemudian restart web server dan jalankan kembali.

create artikel by migration

Nah, file baru sudah terbentuk.

Mari kita buka filenya dan modifikasi.

Tambahkan kodenya menjadi:

<?php namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Artikel extends Migration
{
	public function up()
	{
		$this->forge->addField([
            'id'           => [
                'type'              => 'INT',
                'constraint'        => 11,
                'auto_increment'    => TRUE
            ],
            'title'         => [
                'type'              => 'VARCHAR',
                'constraint'        => '100',
            ],
            'slug'         => [
                'type'              => 'VARCHAR',
                'constraint'        => '100',
			],
			'content'         => [
                'type'              => 'TEXT'
            ]
        ]);
        $this->forge->addKey('id', TRUE);
        $this->forge->createTable('artikel');
	}

	public function down()
	{
		$this->forge->dropTable('artikel');
	}
}

Terakhir, ketik perintah berikut di command line:

php spark migrate --all

Hasilnya:

migration slug codeigniter 4

Step 4: Membuat Artikel Model

Silahkan buat file baru bernama Artikel_model.php di direktori app/Models.

Kemudian buka file Artikel_model.php dan mari ketik kode berikut ini:

<?php
  
namespace App\Models;
  
use CodeIgniter\Model;
  
class Artikel_model extends Model{
  
    protected $table = "artikel";

    public function viewArtikel($slug = false)
    {
        if($slug === false){
            return $this->table($this->table)
                        ->get()
                        ->getResultArray();
        } else {
            return $this->table($this->table)
                        ->where('slug', $slug)
                        ->get()
                        ->getRowArray();
        }
    }

    public function insertArtikel($data)
    {
        return $this->db->table($this->table)->insert($data);
    }
  
}

Penjelasan:

Pada baris ke ke 11 sd 23, kita membuat sebuah function untuk menghandle tampilan semua artikel atau detail artikel by slug.

… sedangkan pada baris 25 sd 28 kita membuat function untuk menambahkan data ke table artikel.

Step 5: Membuat Controller Artikel

Sekarang, buat file baru bernama Artikel.php pada direktori app/Controllers.

Kemudian isi file tersebut dengan kode berikut:

<?php namespace App\Controllers;

use App\Models\Artikel_model;

class Artikel extends BaseController
{
    public function __construct() {
        $this->artikel = new Artikel_model;
    }

	public function index()
	{
        $data['articles'] = $this->artikel->viewArtikel();
		return view('v_artikel', $data);
    }

    public function tambah()
	{
        return view('v_tambah_artikel');
    }

    public function simpan()
	{
        $title      = $this->request->getPost('title');
        $slug       = url_title($title, '-', TRUE);
        $content    = nl2br($this->request->getPost('content'));
        
        $data = [
            'title' => $title,
            'slug'  => $slug,
            'content' => $content
        ];

        $simpan = $this->artikel->insertArtikel($data);

        if($simpan){
            return redirect()->to('/artikel');
        } else {
            die("Gagal menyimpan data");
        }

    }
    
    public function detail($slug = null)
	{
        $artikel = $this->artikel->viewArtikel($slug);

        if(empty($artikel)){
            die("Artikel tidak ditemukan");
        } 

        return view('v_detail_artikel', compact('artikel'));
    }
}

Jelasin donk!

Oke…

Pada baris ke 3 kita memanggil Artikel Model agar bisa diterapkan pada controller ini.

Lalu kita membuat sebuah function constructor (baris ke 7 sd 9) yang bertujuan untuk membuat suatu variabel yang bisa digunakan pada semua function di controller Artikel.

Baris 11 sd 15 berfungsi untuk menampung semua data artikel dan mengirimkannya ke dalam view artikel yang akan kita buat di step berikutnya.

… kemudian pada baris ke 17 sd 20 berfungsi untuk menampilkan halaman create artikel.

Terakhir, 22 sd 40 kita gunakan untuk menyimpan data input ke dalam table artikel di database db_ci4_slug.

Point Penting:

Pada baris 25, kita menggunakan function url_title yang sudah disediakan oleh Codeigniter 4.

By Default, helper URL sudah aktif tanpa harus kita aktifkan lagi.

Simak dokumentasi Codeigniter 4 di bawah ini:

This helper is automatically loaded by the framework on every request.

Artinya, kita tidak perlu setting-setting URL helper lagi. Yeay!

Function url_title() memiliki format berikut:

url_title(string, format(mat pakai – atau _), kemudian lowercase atau nggak)

Oke saya memilih menggunakan – dan lowercase.

Jadi formatnya adalah:

url_title($title, “-“, TRUE)

Silahkan modifikasi ya.

Oke, step ini sudah selesai.

Mari kita lanjutkan …

Step 6: Membuat Halaman View

Sekarang kita akan membuat 3 buah halaman view, yaitu v_artikel.php, v_create_artikel.php dan v_detail_artikel.php.

v_artikel.php

Buat sebuah file bernama v_artikel.php dan simpan di direktori app/Views.

Kemudian ketik kode berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semua Artikel</title>
</head>
<body>
    <a href="<?= base_url('artikel/tambah') ?>">Tambah Artikel</a>
    <?php 
    if(count($articles) == 0){
        echo "<br>";
        echo "Belum Ada Data";
    }
    foreach($articles as $data){ ?>
    <h1><a href="<?= base_url('artikel/'.$data['slug']) ?>"><?= $data['title'] ?></a></h1>
    <hr>
    <p><?= substr($data['content'], 0, 100) ?>... <a href="<?= base_url('artikel/'.$data['slug']) ?>">Selengkapnya</a></p>
    
    <?php } ?> 
</body>
</html>

v_tambah_artikel.php

Buat sebuah file bernama v_tambah_artikel.php dan simpan di direktori app/Views.

Kemudian ketik kode berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Artikel</title>
</head>
<body>
    <h1>Form Tambah Artikel</h1>
    <form action="<?= base_url('artikel/simpan') ?>" method="post">
    <table>
        <tr>
            <td>Title</td>
            <td><input type="text" name="title" placeholder="Judul Artikel" style="width:100%"></td>
        </tr>
        <tr>
            <td>Isi Artikel</td>
            <td><textarea type="text" name="content" rows="5" placeholder="Isi Artikel" style="width:100%"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="Simpan"></td>
        </tr>
    </table>
    </form>
</body>
</html>

v_detail_artikel.php

Buat sebuah file bernama v_detail_artikel.php dan simpan di direktori app/Views.

Kemudian ketik kode berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Artikel</title>
</head>
<body>
    <h1><?= $artikel['title'] ?></a></h1>
    <hr>
    <?= $artikel['content'] ?>
</body>
</html>

Sampai sini step membuat halaman view sudah selesai.

Step 7: Konfigurasi Route

Agar semua project yang telah kita buat dapat berjalan dengan baik, kita perlu setting route terlebih dahulu.

Silahkan buka app/Config/Routes.php.

Kemudian modifikasi / tambahkan kode berikut ini:

$routes->setDefaultNamespace('App\Controllers');
$routes->setDefaultController('Artikel');
$routes->setDefaultMethod('index');
$routes->setTranslateURIDashes(false);
$routes->set404Override();
$routes->setAutoRoute(true);

/**
 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------
 */

$routes->get('/', 'Artikel::index');
$routes->get('artikel', 'Artikel::index');
$routes->get('artikel/tambah', 'Artikel::tambah');
$routes->post('artikel/simpan', 'Artikel::simpan');
$routes->get('artikel/(:segment)', 'Artikel::detail/$1');

Step 8: Jalankan Program

Silahkan masuk ke direktori project dan ketik kode berikut di command line / terminal:

php spark serve
menjalankan program slug codeigniter 4

Kemudian buka URL berikut ini:

http://localhost:8080

Hasil View Semua Artikel:

semua artikel

Tambah Artikel:

tambah artikel

Cobalah klik simpan.

Hasilnya:

Sekarang cobalah klik judul artikel atau teks selengkapnya.

Hasilnya:

detail artikel

Selesai.

Download Source Code

Alhamdulillah, telah selesai step by step membuat slug dengan Codeigniter 4 dari 0 sampai menjadi aplikasi.

Silahkan download file project melalui link Github di bawah ini:

Download Source Code

Kesimpulan

Kali ini kita sudah belajar bagaimana membuat slug di codeigniter 4.

… tapi jangan puas dulu.

Sebab masih ada tutorial lainnya yang bisa kamu pelajari di Ilmu Coding.

Salah satunya:

Tutorial Membuat CRUD RestFul API Menggunakan Codeigniter 4

Selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.