Home Menggunakan .htaccess Tutorial Tutorial Cara Membuat URL Cantik Menggunakan .htaccess

Tutorial Cara Membuat URL Cantik Menggunakan .htaccess

✔ Rdk
Bagaimana cara mengubah sebuah url yang mempunyai parameter berupa id menjadi sebuah url yang clean alias pretty url. clean url adalah manipulasi link url pada sebuah aplikasi web agar menjadi lebih seo friedly(lebih bagus tampilannya di pencarian google)

Misal url seperti ini

domain.com/index.php?p=artikel&id=1

ingin kita ubah menjadi seperti ini

 domain.com/artikel-1.html atau domain.com/news/artikel-1.html.

Dari kedua contoh diatas tentu yang contoh nomor dua lebih bagus dan lebih enak dilihat, dengan teknik clean url ini kita juga bisa menyimpan beberapa informasi yang tidak ingin kita perlihatkan secara umum, seperti id database dan lainnya.

Untuk membuatnya seperti itu bisa kita akali caranya dengan menggunakan file htaccess, sebuah file tanpa extensi dan berada pada root folder website kita.

Contoh htaccess

Agar lebih mudah dipahami saya akan membuat sebuah contoh penerapan langsung bagaimana htaccess rewrite ini berkerja, kita akan membuat sebuah script page dinamis. Source ini dari malasngoding.com.

Silahkan buat sebuah folder dengan nama "cleanurl" didalam folder root anda (www, htdoc).

Kemudian buat sebuah file index.php, copy paste script berikut ini.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Halaman Web Dinamis Dengan PHP | www.malasngoding.com</title>
    <!-- menghubungkan dengan file css -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- menghubungkan dengan file jquery -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<!-- 
Author : diki alfarabi hadi 
Site : www.malasngoding.com
-->
<div class="content">
    <header>
        <h1 class="judul">SedotCode</h1>
        <h3 class="deskripsi">Membuat Halaman Web Dinamis Dengan PHP</h3>
    </header>

    <div class="menu">
        <ul>
            <li><a href="index.php?page=home">HOME</a></li>
            <li><a href="index.php?page=tentang">TENTANG</a></li>
            <li><a href="index.php?page=tutorial">TUTORIAL</a></li>
        </ul>
    </div>

    <div class="badan">


    <?php 
    if(isset($_GET['page'])){
        $page = $_GET['page'];

        switch ($page) {
            case 'home':
                include "halaman/home.php";
                break;
            case 'tentang':
                include "halaman/tentang.php";
                break;
            case 'tutorial':
                include "halaman/tutorial.php";
                break;            
            default:
                echo "<center><h3>Maaf. Halaman tidak di temukan !</h3></center>";
                break;
        }
    }else{
        include "halaman/home.php";
    }

     ?>

    </div>
</div>
</body>
</html>

Terlihat ada tiga halaman, yaitu:

  • index.php?page=home
  • index.php?page=tentang
  • index.php?page=tutorial

Jika ingin mempercantik tampilannya , gunakan code css berikut dan simpan dengan nama style.css

body{
    background-color:#f9f9f9;
    font-size:16px
    color:#444;
    font-family: sans-serif;
}

.content{
    width: 80%;
    margin: 10px auto;
}

/*header*/
header{
    background-color: white;
    padding: 20px 10px;
    border-radius: 5px;
    border: 1px solid #f0f0f0;
    margin-bottom: 10px;
}

header h1.judul,
header h3.deskripsi{
    text-align: center;    
}

/*menu navigasi*/
.menu{
    background-color: #87CEFA;
    border: 1px solid #f0f0f0;
    border-radius: 8px;    
    margin-bottom: 10px;
}

div.menu ul {
    list-style:none;
    overflow: hidden;
}


div.menu ul li {
    float:left;        
    text-transform:uppercase;
}

div.menu ul li a {
    display:block;    
    padding:0 20px;
    text-decoration:none;
    color:#2c2c2c;
    font-family: sans-serif;
    font-size:13px;
    font-weight:400;
    transition:all 0.3s ease-in-out;
}

div.menu ul li a:hover,
div.menu ul li a.hoverover {    
    cursor: pointer;    
    color:#fff;
}


div.badan{
    background-color: white;
    border-radius: 5px;
    border: 1px solid #f0f0f0;
    margin-bottom: 10px;
}

div.halaman{
    text-align: center;
    padding: 30px 20px;    
}

Lalu bagaiamana cara membuatnya menjadi url yang cantik, ikuti step by stepnya berikut ini:

Metode URL Rewriting yang kita gunakan menggunakan sebuah fitur yang disediakan server yang menjalankan Apache. Artinya bila anda menggunakan Windows anda memerlukan WAMP atau XAMP nyala dan bila anda menggunakan OSX anda memerlukan MAMP atau XAMP nyala. Untungnya hampir semua host server memiliki support bagi Apache.

Cara memulai adalah dengan membuat sebuah file bernama .htaccess dan file ini harus disimpan di root dari folder website anda. Ingat nama file hanya .htaccess tanpa ada format file apapun. Hati-hati juga karena terkadang file .htaccess akan dihide secara otomatis dan anda perlu melakukan setting di komputer anda agar anda dapat melihat hidden files.

.htaccess sendiri merupakan sebuah file konfigurasi milik Apache dimana kita dapat memberikan rules dan command pilihan kita sendiri yang nantinya akan diaplikasikan ke semua file dan sub-folder di dalam folder dimana file .htaccess berada. 

Didalam .htaccess sendiri kita menggunakan sebuah modul milik Apache bernama mod_rewrite. Sebelum melakukan metode ini, pastikan anda memiliki modul mod_rewrite. Tetapi tidak perlu dipusingkan karena hampir semua virtual server dan web host memiliki modul ini.

Cara mengaktifkan modul rewrite jika belum aktif.

  1. Temukan file "httpd.conf" didalam instalasi apache anda (xampp: C:\xampp\apache\conf)
  2. Temukan baris "#LoadModule rewrite_module modules/mod_rewrite.so" bisa kita cari menggunakan ctrl+f "mod_rewrite" (sublime text)
  3. Hapus tanda pagar untuk mengaktifkannya
  4. Now restart the apache server. Anda bisa melihatnya sudah terenable dengan phpinfo();


Memulai Rewrite dengan htaccess

Untuk memulai, pastikan anda sudah membuat file .htaccess didala folder root anda (contoh dalam kasus ini adalah didalam folder "cleanurl".

Pada baris pertama :

RewriteEngine On

Baris command ini akan memulai modul mod_rewrite. Di bawah baris ini kita bisa menulis semua rule dari URL rewrite yang kita perlukan.

Rule dari URL rewrite dasarnya adalah seperti ini:

RewriteRule URL/yang/ingin/di/cocokan URL/yang/digunakan/bila/cocok [option], sehingga file htaccessnya menjadi seperti ini:

RewriteEngine on
RewriteRule ^home$ index.php?page=home [QSA] 
RewriteRule ^tentang$ index.php?page=tentang [QSA]
RewriteRule ^tutorial$ index.php?page=tutorial [QSA]

Restart Apache.

Silahkan akses url
localhost/cleanurl/index.php?page=home
dan
localhost/cleanurl/home

hasilnya akan sama saja.

Langkah terakhir silahkan ubah semua url menjadi seperti yang sudah di rewrite pada htaccess.
<li><a href="index.php?page=home">HOME</a></li>
<li><a href="index.php?page=tentang">TENTANG</a></li>
<li><a href="index.php?page=tutorial">TUTORIAL</a></li>

Menjadi Seperti ini;
<li><a href="home">HOME</a></li>
<li><a href="tentang">TENTANG</a></li>
<li><a href="tutorial">TUTORIAL</a></li>


Contoh rewrite htaccess mempercantik url dari database

Jika sudah memahami bagaimana rewrite diatas, tentu tidak ada bedanya dengan dan tanpa database. Untuk yang ingin melihat penerapannya dengan database bisa melihat source code web berita yang sudah kami share sebelumnya: Web Portal Berita

Penutup

Demikian Tutorial Cara Membuat URL Cantik Menggunakan .htaccess yang bisa kami bagikan pada kesempatan ini. Untuk copaser atau tim penyedot rss atau agc bangwilwulwal mohon untuk tidak membuang waktu anda menyedot isi artikel sedotcode. 

UPDATE!
Untuk yang tidak ingin pusing, bisa menggunakan mod rewriter generator

Useful link
https://mod-rewrite-cheatsheet.com/
https://www.addedbytes.com/blog/url-rewriting-for-beginners
Tutorial Cara Membuat URL Cantik Menggunakan .htaccess Tutorial Cara Membuat URL Cantik Menggunakan .htaccess Rdk 5.0 stars based on 35 reviews Bagaimana cara mengubah sebuah url yang mempunyai parameter berupa id menjadi sebuah url yang clean alias pretty url . clean url adalah man...
Load disqus comments

0 komentar