Contoh Website Teknik Membuat URL SEO Friendly

Diterbitkan Oleh Muaz Ramdany August 11, 2017 Loading... views 2 Komentar

Membuat URL SEO Friendly atau bisa disebut URL Semantik adalah teknik untuk memperpendek URL parameter berdasarkan objek pada database contohnya seperti http://localhost/username.

Sebelum memulai ada baiknya sobat memahami dulu jika kurang jelas.

* Point pertama URL Semantik ini bisa sobat temukan di situs-situs yang sudah mendunia seperti Facebook ataupun Twitter DLL. Contohnya seperti dibawah ini :


* Point kedua di balik URL tersebut sebenarnya adalah : https://www.facebook.com/profile.php?id=123456789 yang bertujuan mengakses halaman atau file profile.php dengan parameter id=123456789 yang dimana 123456798 adalah data id yang terdapat di database.
* Point ketiga kenapa URL di Point kedua bisa pendek seperti Point pertama jawabannya HTCACCESS yang menjalankan semua itu.
* Point keempat Bagaimana Cara membuatnya ? haha, baik kita langsung saja.

Pertama buat dulu database Import kode dibawah ini pada masing-masing manegemen database sobat yang disukai.

File database.php
CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) DEFAULT NULL,
  `fullname` varchar(100) DEFAULT NULL,
  `photo_profile` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

INSERT INTO `users` (`user_id`, `username`, `fullname`, `photo_profile`) VALUES
 (1, 'muazramdany', 'Muaz Ramdany', 'default.png');

Dibawah ini adalah struktur folder yang saya buat mungkin sobat bisa membuat seperti contoh di bawah.


Dibawah ini contoh kode sobat bisa gunakan kode tersebut

File db_connection.php
<?php

// define connect to database
$connect = mysqli_connect('localhost', 'root', 'isi jika di password', 'dbname', '3306');

// statement if tidak terkoneksi ke database
if(mysqli_connect_errno()) 
{
 exit('Maaf anda tidak terkoneksi ke database');
}

?>

File index.php
<?php

//panggil jembatan koneksi ke database
include 'db_connection.php';

// tampil data users 
$query  = mysqli_query($connect, "select * from users"); // perintah SQL
// looping data
while($row = mysqli_fetch_array($query))
{
 // tampung data di $row ke dalam $data_array as array
 $data_array[] = $row;
}

?>
<!DOCTYPE html>
<html>
<head>
 <title>Teknik URL Friendly</title>
 <style type="text/css">
  .clearfix {
   content: " ";
      display: table;
  }
  .container {
   width: 450px;
   margin: 40px auto;
   border: 1px solid #ddd;
   *min-height: 400px;
   padding: 20px;
  }
  .aside {
   float: left;
   margin-top: 20px;
  }
  .asideleft {
   margin-right: 10px;
  }
  .asideright {
   margin-top: 50px;
  }
 </style>
</head>
<body>

 <div class="container">
  <header align="center">
   <h1>Teknik Membuat URL SEO Friendly PHP dan HTACCESS</h1>
  </header>
  <hr />

  <?php 
  if(mysqli_num_rows($query) != 0) : // true
   /* pecah array yang ada di dalam $data_array yang hanya mengambil data dari $field */
   foreach($data_array as $field) : 
  ?>
   <div style="text-align: center;">Table Users Tersedia <?= mysqli_num_rows($query); ?> Baris</div>
   <hr />
   <div class="content clearfix">
    <aside class="aside asideleft">
     <a href="#!">
      <img src="<?= $field['photo_profile']; ?>" height="200" width="200" />
     </a>
    </aside>
    <aside class="aside asideright">
     <table>
      <tbody>
       <tr>
        <td>User ID</td>
        <td>:</td>
        <td><?= $field['user_id']; ?></td>
       </tr>
       <tr>
        <td>Username</td>
        <td>:</td>
        <td><?= $field['username']; ?></td>
       </tr>
       <tr>
        <td>Nama Lengkap</td>
        <td>:</td>
        <td><?= $field['fullname']; ?></td>
       </tr>
       <tr>
        <td>Foto Profile</td>
        <td>:</td>
        <td><?= $field['photo_profile']; ?></td>
       </tr>
       <tr>
        <td style="margin-top: 40px; display: block;">
         <a href="<?= $field['username']; ?>">Lihat Profile Saya</a>
        </td>
       </tr>
      </tbody>
     </table>
    </aside>
   </div>
   <hr />
   <?php endforeach; ?>
  <?php else : ?>
   <div style="text-align: center; color: red; border: 1px solid #ddd; padding: 20px;">
    <h3>MAAF ! DATA BELUM TERSEDIA DI DATABASE SILAHKAN ISI DATA KE DATABASE SECARA MANUAL</h3>
   </div>
  <?php endif; ?>
 </div>

</body>
</html>

File profile.php
<?php

//panggil jembatan koneksi ke database
include 'db_connection.php';

// dapatkan data username yang telah di rewrite oleh htaccess
// yang tadi url belum di rewrite yaitu : profile.php?username=nama
$username = isset($_GET['username']) ? $_GET['username'] : null;

// tampil data users dengan mengacu pada $username
$query  = mysqli_query($connect, "select * from users where username = '$username' "); // perintah SQL

// buat variable data object
// cara pakai : $field['nama_field_yg_ada_di_database'];
$field = mysqli_fetch_array($query);

?>
<!DOCTYPE html>
<html>
<head>
 <title>Teknik URL Friendly</title>
 <style type="text/css">
  .clearfix {
   content: " ";
      display: table;
  }
  .container {
   width: 450px;
   margin: 40px auto;
   border: 1px solid #ddd;
   *min-height: 400px;
   padding: 20px;
  }
  .aside {
   float: left;
   margin-top: 20px;
  }
  .asideleft {
   margin-right: 10px;
  }
  .asideright {
   margin-top: 50px;
  }
 </style>
</head>
<body>

 <div class="container">
  <header align="center">
   <h1>Teknik Membuat URL SEO Friendly PHP dan HTACCESS</h1>
  </header>
  <hr />

  <?php 
  // pernyataan jika data di database kosong atau belum ada isi
  // fungsi mysqli_num_rows() ini untuk menghitung semua data kolom di database return int
  if(mysqli_num_rows($query) != 0) : // true
  ?>
   <div style="text-align: center;">Table Users Tersedia <?= mysqli_num_rows($query); ?> Baris</div>
   <hr />
   <div class="content clearfix">
    <aside class="aside asideleft">
     <a href="#!">
      <img src="<?= $field['photo_profile']; ?>" height="200" width="200" />
     </a>
    </aside>
    <aside class="aside asideright">
     <table>
      <tbody>
       <tr>
        <td>User ID</td>
        <td>:</td>
        <td><?= $field['user_id']; ?></td>
       </tr>
       <tr>
        <td>Username</td>
        <td>:</td>
        <td><?= $field['username']; ?></td>
       </tr>
       <tr>
        <td>Nama Lengkap</td>
        <td>:</td>
        <td><?= $field['fullname']; ?></td>
       </tr>
       <tr>
        <td>Foto Profile</td>
        <td>:</td>
        <td><?= $field['photo_profile']; ?></td>
       </tr>
      </tbody>
     </table>
    </aside>
   </div>
   <hr />
   <div style="text-align: center;">Hai <?= $field['fullname']; ?> Ini Halaman Profil Anda, <br/> <a href="./index.php">Kembali ke Halaman Rumah</a>.</div>
   <hr />
  <?php else : ?>
   <div style="text-align: center; color: red; border: 1px solid #ddd; padding: 20px;">
    <h3>MAAF ! DATA BELUM TERSEDIA DI DATABASE SILAHKAN ISI DATA KE DATABASE SECARA MANUAL</h3>
   </div>
  <?php endif; ?>
 </div>

</body>
</html>

Terakhir htacess
Jika susah untuk membuat file htaccess silahkan ikuti instruksi di bawah ini
  • Buka editor seperti sublime atau lainnya
  • Buat file baru terus tekan CTRL + S atau CTRL + SHIFT + S
  • Simpan dengan nama file .htaccess
Sekarang sobat copy kode di bawah ini ke dalam file htaccess nya

File .htaccess
Options All -Indexes
RewriteEngine On

# silahkan jalur projek nya
RewriteBase /blogspot/demo/teknik-url-friendly-php-mysql-htaccess/

#rewrite ?username=$1 to username di database
RewriteRule ^/?([^/\.]+)$ profile.php?username=$1 [L,NC,QSA]

Kesimpulannya
Jika sobat menerapkan teknik ini pada setiap halaman di situs pribadi Sobat mungkin Google akan mudah meng-index di mesin pencariannya meskipun Sobat harus cari lagi caranya biar sesuai dengan prosedur Google.

Sebenernya teknik pemograman ini sobat bisa temukan di blog-blog lain yang lebih detail dan terperinci, akan tetapi disini saya hanya membagikan sedikit pengalaman saya dalam bidang ini, meskipun tidak seberapa :D. mudah mudahan ini bisa berguna dan bermanfaat.

Jika ada yang di tanyakan jangan segan untuk bertanya, Terima kasih telah berkunjung

Live Demo + Unduh

Pos Terkait

Komentar Pada `Contoh Website Teknik Membuat URL SEO Friendly`

2 Komentar Pada `Contoh Website Teknik Membuat URL SEO Friendly`

  1. mantap gan tutorial nya,,, sedot ya gan buat bahan belajar,, hehehhehe

    ReplyDelete