Cara Membuat URL SEO di Codeigniter 3 Lengkap

08 Feb 2121 read
Cara Membuat URL SEO di Codeigniter 3 Lengkap

Cara Membuat URL SEO di Codeigniter  .Pada tutorial kali ini, saya akan sharing tentang cara membuat URL SEO Friendly dengan Codeigniter.

Sudah tidak asing lagi kan dengan istilah SEO?. ya, SEO atau Search Engine Optimization adalah sebuah teknik untuk melakukan optimasi terhadap sebuah Website di mesin pencarian seperti Google, Bing, Yahoo dll..

Tujuan utama dari diterapkannya SEO sendiri adalah untuk meningkatkan posisi sebuah website agar berada di posisi teratas atau halaman pertama dalam sebuah pencarian berdasarkan kata kunci tertentu. Semakin tinggi posisi website tersebut maka semakin tinggi juga trafik pengunjungnya.

Dari sekian banyak faktor SEO yang wajib kamu lakukan, URL adalah salah satunya.

URL adalah sebuah alamat unik dalam sebuah website, oleh karena itu optimasi pada URL sangat diperlukan agar dapat meningkatkan kualitas SEO pada website kita.

Ciri-ciri URL yang baik adalah URL menjelaskan tentang isi dari konten yang ditulis dan tidak terlalu panjang, kita cukup menuliskan kata kunci dari konten yang kita buat dengan mengandung tiga sampai lima suku kata saja.

Jika URL website kita bagus, maka mesin pencari tidak akan segan-segan memberikan kesempatan kepada website kita untuk berada di posisi teratas.

Berikut adalah Contoh URL yang bagus dan jelek :

Sumber gambar : https://meerasantoshi.com/on-page-optimization-old-school-seo-vs-modern-seo/

 

Dari gambar diatas dapat dilihat kalau URL yang bagus memiliki struktur pemisah antar kata menggunakan tanda "-" dan juga mudah untuk dibaca oleh manusia dan mesin.

Sedangkan URL yang jelek sangat sulit dipahami oleh kita dan mesin.

Membuat URL SEO Friendly Dengan Codeigniter

Pada dasarnya semua Framework menyediakan fitur Clean URL dimana kita dapat membuat sebuar URL dengan bersih dan rapi, salah satunya adalah Framework Codeigniter.

Di Codeigniter kita dengan mudah membuat URL yang rapi karena kita cukup bermain di bagian Controllernya saja.

Selain itu kita juga harus membuat sebuah Slug yang akan dijadikan URL, Slug pada dasarnya dibuat dengan judul dari artikel yang kita buat dengan mengganti setiap spasi dengan tanda pemisah "-"

Namun kita juga bisa membuat slug url dengan sesuai yang kita inginkan.

Peran slug disini sebagai pengganti ID artikel yang kita buat, slug url harus bersifat unik dan tidak boleh sama dengan slug yang lainnya.

Contoh seperti URL berikut :

Contoh url seo

Pada tutorial ini saya akan memberikan cara membuat Slug url yang SEO Friendly serta cara implementasinya di website sederhana yang saya buat.

Persiapan :

Sebelum kita memulai membuat URL SEO Friendly, berikuat ada beberapa bahan yang perlu disiapkan :

  1. Framework Codeigniter Download disini
  2. Bootstrap -> Download
  3. Database  -> Download

Berikut adalah contoh Struktur Database yang akan digunakan :

1. Buat Database dan Struktur Tabel

Berikut adalah contoh database dan struktur tabel yang akan kita gunakan pada tutorial kali ini.

Nama database : db_blog

Struktur Tabel:

CREATE TABLE `tbl_post` (
  `id_post` int(11) NOT NULL,
  `judul` varchar(200) NOT NULL,
  `isi` text NOT NULL,
  `tanggal_post` datetime NOT NULL,
  `slug` varchar(225) NOT NULL,
  `kategori` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2. Instalasi Codeigniter

Setelah melakukan download Framework Codeigniter pada link diatas, sekarang kita lanjut ke proses instalasinya.

Cukup letakan saja file Codeigniter ke htdocs jika kalian menggunakan Xampp, ganti nama folder sesui nama yang kalian inginkan.

3. Buat file htaccess

Buat file . htaccess di root folder projek kita dan tambahkan kode berikut ini :

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

4. Konfigurasi Database

Setelah sebelumnya kita membuat database, tahap selanjutnya adalah melakukan konfigurasi database pada Framework Codeigniter.

Pertama buka folder Application/config/database.php, kemudian scroll kebawah dan tambahan database seperti dibawah ini.

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'db_blog',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

5.Konfigurasi Codeigniter

Ada beberapa konfigurasi yang harus kita lakukan, pertama tambahkan autoload pada folder:

Application/config/autoload.php

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

kedua, seting base url dengan url projek kalian nantinya.

Buka folder Application/config/config.php

$config['base_url'] = 'http://localhost/blog/';

Pada bagian localhost/blog, ganti menjadi nama folder projek kalian. 

kemudian hapus index.php pada index_page 

$config['index_page'] = '';

Kemudian setting default Controller pada file routes.php dan tambahkan beberapa kode baru dibawah ini.

Buka folder Application/config/routes.php dan menjadi seperti dibawah ini :

$route['default_controller'] = 'Post_Controller';
$route['input'] = 'Post_Controller/input';
$route['(:any)'] = 'SingleController/index/$1';

6. Buat Controller baru

Buat file dengan nama Post_Controller.php di folder Application/controllers/

kemudian tambahkan kode dibawah ini :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Post_Controller extends CI_Controller {

	function __construct(){
		parent::__construct();
		$this->load->model('PostModel');
	}

	public function index()
	{
		$data['list_artikel'] = $this->PostModel->get_artikel();
		$this->load->view('input_post',$data);
	}

	public function input(){
		$data['list_artikel'] = $this->PostModel->get_artikel();
		$this->load->view('input_post',$data);
	}

	public function save(){
		$form_data = $this->input->post();
		$tanggal_post = date('Y-m-d h:m:s');
		$data_input = array(
			'judul' => $form_data['judul'],
			'isi'	=> $form_data['isi'],
			'tanggal_post'	=> $tanggal_post,
			'slug'	=> $form_data['slug'],
			'kategori'	=> $form_data['kategori'],
		);
		$insert = $this->PostModel->save($data_input);
		if($insert){
			redirect(base_url('input'));
		}else{
			echo "Terjadi Kesalahan";
		}

	}

}

Buat lagi controller dengan nama SingleController.php kemudian isikan kode dibawah ini :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class SingleController extends CI_Controller {

	function __construct(){
		parent::__construct();
		$this->load->model('PostModel');
	}

	public function index($slug_url)
	{
		$this->db->select('id_post	,judul,isi,tanggal_post,slug,count(slug) as cek,kategori');
		$this->db->where('slug ',$slug_url);
		$cek_row = $this->db->get('tbl_post')->row();
		if($cek_row->cek > 0){
			$data['data_post'] = $cek_row;
			$this->load->view('post_detail',$data);
		}else{
			echo "<center><h1>404 Page Not Found!</h1></center>";
		}
	}

}

7. Buat Model

Buat Model baru dengan nama PostModel.php di folder application/models, kemudian tambahkan kode dibawah ini :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class PostModel extends CI_Model {

	public function save($data){
		return $this->db->insert('tbl_post',$data);
	}
	public function get_artikel(){
		$this->db->select('*');
		$get = $this->db->get('tbl_post')->result_array();
		return $get;
	}

}

8. Buat View

Jika sudah, selanjutnya kita buat View dengan nama input_post.php di folder application/views kemudian tambahkan kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Seo URL Codeigniter</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" >
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-5 mt-5">
				<form method="post" action="<?= base_url('Post_Controller/save') ?>">
					<h2>Input Artikel</h2>
					<div class="mb-3">
					  <label for="Judul" class="form-label">Judul</label>
					  <input type="text" name="judul" class="form-control form-control-lg judul" placeholder="Masukan judul artikel">
					  <input type="text" name="slug" class="form-control mt-1 form-control-sm preview_slug" placeholder="Slug Url">
					</div>
					<div class="mb-3">
					  <label for="kategori" class="form-label">Kategori Artikel</label>
					  <select class="form-select" name="kategori">
					  	<option value="Pemrograman">Pemrograman</option>
					  	<option value="Java">Java</option>
					  	<option value="PHP">PHP</option>
					  	<option value="Codeigniter">Codeigniter</option>
					  </select>
					</div>
					<div class="mb-3">
					  <label for="isi" class="form-label">Isi Artikel</label>
					  <textarea class="form-control" name="isi" id="isi" rows="3"></textarea>
					</div>
					<div class="mb-3">
						<button type="submit" class="btn btn-primary">
							Simpan
						</button>
					</div>
				</form>
			</div>
			<div class="col-md-7 mt-5">
				<h2>Daftar Artikel</h2>
				<table class="table table-hover">
				  <thead>
				    <tr>
				      <th scope="col">#</th>
				      <th scope="col">Judul</th>
				      <th scope="col">Isi singkat</th>
				      <th scope="col">Kategori</th>
				      <th scope="col">Aksi</th>
				    </tr>
				  </thead>
				  <tbody>
				  	<?php $no=1; foreach ($list_artikel as $row) { ?>
				    <tr>
				      <th scope="row"><?= $no++; ?></th>
				      <td><?= $row['judul'] ?></td>
				      <td><?php 
				      	$str = $row['isi'];
						$str = wordwrap($str, 100);
						$str = explode("\n", $str);
						$str = $str[0];
						echo $str;
				       ?>
				      </td>
				      <td><?= $row['kategori'] ?></td>
				      <td>
				      	<a href="<?= base_url($row['slug']) ?>" class="btn btn-success">Lihat</a>
				      </td>
				    </tr>
					<?php } ?>
				  </tbody>
				</table>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	var slug = function(str) {
	    var $slug = '';
	    var trimmed = $.trim(str);
	    $slug = trimmed.replace(/[^a-z0-9-]/gi, '-').
	    replace(/-+/g, '-').
	    replace(/^-|-$/g, '');
	    return $slug.toLowerCase();
	}
	$('.judul').on('keyup',function(){
		$('.preview_slug').val(slug($(this).val()));
	});
</script>
</html>

Fungsi dari code javascript diatas adalah untuk merubah judul yang diinputkan user menjadi url yang nantinya otomatis digunakan sebagai slug url pada artikel yang dibuat. 

Buat juga file view lainnya dengan nama post_detail.php kemudian isikan kode berikut ini :

<!DOCTYPE html>
<html>
<head>
	<title>Seo URL Codeigniter</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" >
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<!-- <div class="col-md-6"></div> -->
			<div class="col-lg-8 offset-lg-2 col-sm-12 ">
				<div class="mt-5">
					<h1><?= ucwords($data_post->judul); ?></h1>
					<p>Kategori : <span class="badge bg-primary"><?= $data_post->kategori ?></span> | Date Publish : <?= $data_post->tanggal_post ?></p>
					<div class="mt-3">
						<p>
							<?= $data_post->isi; ?>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

 

Sekarang coba jalankan kode diatas di browser kalian dengan mengetikan localhost/nama_folder_projek_kalian.

Bila masih bingung kamu bisa download projek ini dibawah ini :

Download Projek

Download Database

Kesimpulan :

Slug URL yang bagus akan membuat website ktia lebih SEO Friendly dan lebih mudah meranking di Google, Ada berbagai macam trik / cara membuat slug url dengan codeigniter, bisa digenerate langsung dari title maupun dicustom langsung. Kita bisa menggunakna PHP ataupun JS untuk membuat slug url otomatis dari title yang kita tentukan.

 

Sekian tutorial kali ini, apabila ada pertanyaan silahkan tanyakan di kolom komentar dibawah ini:

 

Tag :
Desu
Desu Seorang Web Developer yang senang dengan dunia blogging dan SEO Analysis. Sering mengabiskan waktu untuk mencangkul di internet.

Copyright © Bedahdigital 2020

Berbagi Tutorial dan Tips Digital