Menggunakan File htaccess untuk Pretty URL

() translation by (you can also view the original English article)

Melanjutkan review kita dari file htaccess, hari ini kita akan meneliti bagaimana menggunakan mod_rewrite untuk membuat URL cantik.

Manfaat dari URL yang terformat

Sementara beberapa mengklaim URL cantik membantu dalam peringkat mesin pencari, perdebatan di sini sengit, kita semua bisa sepakat bahwa URL yang cantik membuat segalanya lebih mudah bagi pengguna dan menambah tingkat profesionalisme dan polesan untuk aplikasi web. Saya bisa pergi atas semua alasan teoritis untuk ini, tapi saya lebih menyukai contoh-contoh nyata. Menyukainya atau membencinya kita semua harus mengakui bahwa Twitter adalah aplikasi web yang sangat populer dan bagian dari alasan pasti untuk itu bagaimana mereka mem-format URL. Saya dapat memberitahu siapa pun bahwa nama pengguna Twitter saya adalah noahhendrix, dan mereka tahu profil saya dapat dengan mudah ditemukan di twitter.com/noahhendrix. Konsep sederhana ini tampaknya memiliki efek besar dalam popularitas aplikasi Anda.

Hanya menempatkan hal dalam perspektif kita bisa melihat pada situs jaringan sosial populer, Facebook. Sejak situs diluncurkan pada tahun 2004 sistem profil telah tumbuh dan berevolusi untuk lebih menyesuaikan ke pengguna, tetapi satu lubang mencolok adalah URL untuk profil. Dari waktu saya terdaftar dengan Facebook profil saya pada URL http://www.facebook.com/profile.php?id=1304880680. Itulah cukup panjang kata, dan baru-baru ini tampaknya Facebook telah menyadarinya dan mereka meluncurkan Facebook URL yang angkuh. Sekarang saya dapat berbagi profil Facebook saya dengan memberitahu orang-orang nama pengguna Facebook saya adalah "noahhendrix", yang mereka tahu dapat ditemukan dengan pergi ke facebook.com/noahhendrix. Sementara kemungkinan bahwa kita tidak memiliki aplikasi sepopuler Facebook, kita masih dapat meminjam beberapa halaman dari buku mereka.

Gambaran Singkat

Sebuah gambaran singkat sebelum kita menyelam ke dalam kode, dalam tutorial hari ini kita akan melihat dua metode yang sedikit berbeda untuk menciptakan URL cantik menggunakan HTACCESS. Perbedaan antara metode adalah apakah Apache atau PHP yang melakukan pekerjaan berat untuk memecah URL untuk parsing. Saya ingin menunjukkan bahwa tutorial mod_rewrite hampir setua internet itu sendiri dan ini adalah bukan yang pertama. Pada akhirnya saya akan menggunakan salah satu metode untuk menciptakan sebuah aplikasi sederhana untuk menunjukkan bagaimana solusi ini akan terlihat di situs web nyata (bukan 100% kualitas produksi). Layanan yang akan kita buat ini adalah pemendek URL yang dapat mencerminkan fungsi dari situs-situs seperti bit.ly, TinyURL, atau su.pr. Jadi tanpa basa-basi mari kita lihat kodenya.

Menggunakan Apache

Pertama, kita dapat menempatkan semua kode kita di file .htaccess Apache. Ini bisa terlihat seperti ini:


  Options +FollowSymLinks
  RewriteEngine On

  RewriteCond %{SCRIPT_FILENAME} !-d
  RewriteCond %{SCRIPT_FILENAME} !-f

  RewriteRule ^users/(\d+)*$ ./profile.php?id=$1
  RewriteRule ^threads/(\d+)*$ ./thread.php?id=$1

  RewriteRule ^search/(.*)$ ./search.php?query=$1

Mari kita mulai dari atas dan bekerja dengan cara kami ke bawah untuk lebih memahami apa yang sedang terjadi di sini. Baris pertama menetapkan lingkungan sampai dengan mengikuti link simbolik menggunakan Options directive. Hal ini mungkin atau tidak diperlukan, tetapi beberapa web host menggunakan symlink (mirip dengan alias di MacOSX atau cara pintas di Windows) untuk kesalahan permintaan umum HTTP dan ini biasanya file symlinked, atau setidaknya ini adalah bagaimana saya memahami alasannya. Selanjutnya kita memberitahu Apache kita akan menggunakan Rewrite Engine. Dua baris berikutnya adalah sangat, sangat penting itu membatasi menulis ulang URL hanya untuk path yang tidak benar-benar ada. Hal ini mencegah aturan di bawah ini dari pencocokan example.com/images/logo.png sebagai contoh. Yang pertama mencegah direktori yang ada dengan flag !-d dan yang kedua dengan !-f yang berarti abaikan file yang sudah ada.

Tiga baris selanjutnya adalah perintah menulis ulang URL sebenarnya. Setiap baris menciptakan aturan yang mencoba untuk menyesuaikan pola regular expressions terhadap URL yang masuk. Regular expressions, setidaknya bagi saya, adalah satu set aturan untuk diingat keras tetapi saya selalu menemukan itu berguna untuk menggunakan tutorial ini oleh Nettut itu sendiri Jeffery Way dan alat yang dia sarankan. Saya merasa mudah untuk mengetik dalam URL sampel untuk mencocokkan dan kemudian mencoba untuk hack bersama pola yang kita inginkan.

Argumen pertama adalah pola, antara navitasi dan tanda dolar. Kita memberitahu Apache kita menginginkan URL yang meminta direktori pengguna (direktori buatan, tidak harus benar-benar ada) diikuti oleh / dan berapapun panjang dari angka. Tanda kurung membuat grup tangkapan, Anda dapat menggunakan sebanyak mungkin yang Anda inginkan, mereka melayani sebagai variabel yang kemudian kita dapat transplantasi ke penulisan ulang kita. Tanda asterisk berarti pengguna dapat memasukkan apa pun yang mereka inginkan, dan tidak akan mempengaruhi penulisan ulang, terutama untuk menangani tanda miring sehingga example.com/users/123 adalah sama dengan example.com/users/123/ seperti yang diharapkan pengguna.

Argumen kedua adalah jalur yang sebenarnya ingin kita panggil, tidak seperti yang pertama ini harus file nyata. Kita memberitahu Apache untuk melihat direktori untuk file bernama profile.php dan mengirimkan parameter id=$1 bersama dengannya. Ingat grup penangkap sebelumnya? Itu adalah di mana kita mendapatkan variabel $1, menangkap kelompok mulai satu. Hal ini menciptakan sebuah URL pada server seperti example.com/profile.php?id=123.

Metode ini sangat bagus untuk aplikasi web lama yang memiliki struktur URL yang ada yang mencegah kita dari menulis ulang backend untuk memahami skema URL yang baru karena URL terlihat sama di server, tapi untuk pengguna terlihat jauh lebih baik.

Menggunakan PHP

Metode berikut ini sangat bagus bagi mereka yang tidak ingin untuk mendistribusikan terlalu banyak logika ke Apache dan merasa lebih nyaman di PHP (atau bahasa scripting yang serupa). Konsep di sini adalah menangkap setiap URL yang diterima server dan mendorongnya ke halaman controller PHP. Ini dilengkapi dengan manfaat tambahan untuk kontrol, tapi kompleksitas yang lebih besar pada waktu yang sama. File HTACCESS Anda mungkin terlihat seperti ini:


  Options +FollowSymLinks
  RewriteEngine On

  RewriteCond %{SCRIPT_FILENAME} !-d
  RewriteCond %{SCRIPT_FILENAME} !-f

  RewriteRule ^.*$ ./index.php

Semuanya sama seperti di atas, kecuali baris terakhir sehingga kita akan langsung kesana. Alih-alih membuat grup penangkap kita hanya memberitahu Apache untuk mengambil setiap URL dan mengarahkan ke index.php. Ini berarti kita bisa melakukan semua penanganan URL kita dalam PHP tanpa bergantung terlalu banyak pada jalur URL yang ketat dalam HTACCESS. Berikut adalah apa yang bisa kita lakukan di bagian atas file index.php kita untuk mem-parsing URL:


  <?php
    #remove the directory path we don't want
    $request  = str_replace("/envato/pretty/php/", "", $_SERVER['REQUEST_URI']);

    #split the path by '/' 
    $params     = split("/", $request);
  ?>

Baris pertama ini tidak diperlukan kecuali aplikasi Anda tidak berjalan di direktori root, seperti demo saya. Saya mengeluarkan bagian URL yang tidak berguna yang saya tidak ingin dikhawatirkan oleh PHP. $_SERVER ['REQUEST_URI'] adalah variabel server global yang disediakan PHP dan menyimpan permintaan URL, umumnya tampak seperti ini:

1
2	/envato/pretty/php/users/query

Seperti yang Anda lihat pada dasarnya adalah semuanya setelah nama domain. Selanjutnya kita pisah sisa bagian dari jalur virtual dan memisahnya dengan karakter / yang memungkinkan kita untuk mengambil variabel individu. Dalam contoh saya hanya mencetak array $params di body, tentu saja Anda akan ingin melakukan sesuatu yang sedikit lebih berguna.

Satu hal yang mungkin Anda lakukan adalah mengambil elemen pertama dari array $params dan menyertakan file dengan nama yang sama dan di dalam file Anda dapat menggunakan elemen kedua dalam array untuk menjalankan beberapa kode. Ini mungkin terlihat seperti ini:


   <?php
	   #keeps users from requesting any file they want
	   $safe_pages = array("users", "search", "thread");
	   
	   if(in_array($params[0], $safe_pages)) {
	     include($params[0].".php");
	   } else {
	     include("404.php");
	   }
	 ?>

PERINGATAN: Bagian pertama dari kode ini luar biasa penting! Anda benar-benar harus membatasi halaman mana yang bisa didapatkan oleh pengguna sehingga mereka tidak memiliki kesempatan untuk melihat halaman apapun yang mereka inginkan dengan menebak nama file, misalnya file konfigurasi database.

Sekarang kita memiliki kotak sabun keluar dari jalan kita, mari kita lanjutkan. Selanjutnya kita memeriksa apakah file yang diminta berada dalam array $safe_pages, dan jika iya maka kita include sebaliknya akan meng-include halaman 404 not found. Di halaman yang di-include, Anda akan melihat bahwa Anda memiliki akses ke array $params dan Anda dapat mengambil data apa pun darinya yang diperlukan dalam aplikasi Anda.

Ini sempurna bagi mereka yang menginginkan kendali dan fleksibilitas yang sedikit lebih. Hal ini jelas membutuhkan sedikit tambahan kode, jadi mungkin lebih baik untuk proyek-proyek baru yang tidak memerlukan banyak kode yang diperbarui untuk menyesuaikan format URL yang baru.

Pemendek URL Sederhana

Bagian terakhir tutorial ini akan membiarkan kita meletakkan beberapa kegunaan ke kode di atas, dan lebih atau kurang sebuah contoh "di kehidupan nyata". Kita akan membuat layanan yang disebut shrtr, saya membuat nama ini sehingga produk lainnya dengan nama ini tidak terkait dengan kode yang saya posting di bawah ini. Catatan: saya tahu sejauh ini bukanlah konsep asli, dan hanya dimaksudkan untuk demonstrasi mod_rewrite. Pertama mari kita lihat pada database:

Seperti yang Anda lihat ini sangat sederhana, kita hanya memiliki 4 kolom:

id: pengenal unik yang digunakan untuk referensi baris tertentu
short: karakter string unik yang ditambahkan ke bagian akhir URL kita untuk menentukan di mana untuk mengarahkan
url: URL yang mengalihkan url pendek
created_at: timestamp sederhana sehingga kita tahu kapan URL ini diciptakan

Dasar-dasar

Selanjutnya, mari kita pergi ke enam file yang kita butuhkan untuk membuat aplikasi ini:

.htaccess: mengalihkan semua URL singkat ke serve.php
create.php: memvalidasi URL, menciptakan shortcode, menyimpan ke DB
css/style.css: memegang beberapa informasi dasar styling
db_config.php: menyimpan variabel untuk koneksi database
index.php: Wajah aplikasi kita dengan form untuk memasukkan URL
serve.php: mencari URL pendek dan mengarahkan ulang ke URL aktual

Itu semua adalah yang kita butuhkan untuk contoh dasar kita. Saya tidak akan mencakup index.php atau css/style.css dengan sangat terperinci karena mereka tidak memiliki PHP, dan adalah file statis.


# index.php
----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Makes URLs Shrtr</title>
    <link type="text/css" rel="stylesheet" href="./css/style.css" />
	</head>
	<body>
	 <div id="pagewrap">
  	 <h1>shrt<span class="r">r</span>.me</h1>
  	 
  	 <div class="body">
  	   <form action="./create.php" method="post">
  	   
  	     <span class="instructions">Type your URL here</span>
  	     <input name="url" type="text" />
  	     <input type="submit" value="shrtr" />
  	   
  	   </form>
  	 </div>
	   
	 </div>
	</body>
</html>

Yang benar-benar nyata menarik untuk dicatat di sini adalah bahwa kita submit form dengan field yang disebut URL untuk create.php.


# css/style.css
----
/* reset */
* {
  font-family: Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

/* site */
html, body { background-color: #008AB8; }
a { color: darkblue; text-decoration: none;}

  #pagewrap {
    margin: 0 auto;
    width: 405px;
  }
  
    h1 {
      color: white;
      margin: 0;
      text-align: center;
      font-size: 100px;
    }
      h1 .r { color: darkblue; }
    
    .body {
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      background-color: white;
      text-align: center;
      padding: 50px;
      height: 80px;
      position: relative;
    }
    
      .body .instructions {
        display: block;
        margin-bottom: 10px;
      }
      .body .back {
        right: 15px;
        top: 10px;
        position: absolute;
      }
      
      .body input[type=text] {
        display: block;
        font-size: 20px;
        margin-bottom: 5px;
        text-align: center;
        padding: 5px;
        height: 20px;
        width: 300px;
      }

Itu semua sangat generik, tapi membuat aplikasi kita sedikit lebih rapi.

File dasar terakhir yang perlu kita lihat adalah db_config.php kita, saya membuat ini untuk abstrak beberapa informasi koneksi database.


# db_config.php
----
<?php

  $database = "DATABASE_NAME";
  $username = "USERNAME";
  $password = "PASSWORD";
  $host     = "localhost";

?>

Anda perlu mengganti nilai dengan apa yang bekerja di database Anda, dan host adalah mungkin localhost, tetapi Anda harus memeriksa dengan penyedia hosting Anda untuk memastikan. Berikut adalah SQL dump dari table, url_redirects yang memegang semua informasi yang kita tunjukkan di atas:


--
-- Table structure for table `url_redirects`
--

CREATE TABLE IF NOT EXISTS `url_redirects` (
  `id` int(11) NOT NULL auto_increment,
  `short` varchar(10) NOT NULL,
  `url` varchar(255) NOT NULL,
  `created_at` timestamp NOT NULL default CURRENT_TIMESTAMP,
  PRIMARY KEY  (`id`),
  KEY `short` (`short`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Menciptakan URL Pendek

Selanjutnya mari kita lihat kode yang diperlukan untuk membuat URL pendek kita.


# create.php
----
<?php
  require("./db_config.php");
  
  $url = $_REQUEST['url'];
  
  if(!preg_match("/^[a-zA-Z]+[:\/\/]+[A-Za-z0-9\-_]+\\.+[A-Za-z0-9\.\/%&=\?\-_]+$/i", $url)) {
    $html = "Error: invalid URL";
  } else {
    
    $db = mysql_connect($host, $username, $password);
    
      $short = substr(md5(time().$url), 0, 5);
    
      if(mysql_query("INSERT INTO `".$database."`.`url_redirects` (`short`, `url`) VALUES ('".$short."', '".$url."');", $db)) {
        $html = "Your short URL is<br />shrtr.me/".$short;
      } else {
        $html = "Error: cannot find database";
      }
    
    mysql_close($db);
  }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Makes URLs Shrtr</title>
    <link type="text/css" rel="stylesheet" href="./css/style.css" />
	</head>
	<body>
	 <div id="pagewrap">
  	 <h1>shrt<span class="r">r</span>.me</h1>
  	 
  	 <div class="body">
  	   <?= $html ?>
  	   <br /><br />
  	   <span class="back"><a href="./">X</a></span>
  	 </div>
	   
	 </div>
	</body>
</html>

Sekarang mari kita sedikit lebih rumit! Pertama kita perlu untuk menyertakan variabel koneksi database yang kita buat sebelumnya, kemudian kita menyimpan parameter URL yang dikirim kepada kita oleh form pembuat dalam variabel yang disebut $url. Selanjutnya kita melakukan sedikit sihir regular expressions untuk memeriksa jika mereka benar-benar mengirim URL, jika tidak kita menyimpan kesalahan. Jika pengguna memasukkan URL yang valid kita membuat koneksi ke database menggunakan variabel koneksi yang kita include di bagian atas halaman. Selanjutnya kami menghasilkan 5 karakter string acak untuk disimpan ke database, menggunakan fungsi substr. String yang kita pisah adalah md5 hash dari time() saat ini dan $url digabungkan bersama-sama. Kemudian kita insert nilai tersebut ke dalam tabel url_redirects dengan URL aktual, dan menyimpan string untuk disajikan ke pengguna. Jika gagal untuk memasukkan data kita menyimpan kesalahan. Jika Anda bergerak ke bawah ke bagian HTML dari halaman yang kita lakukan adalah mencetak nilai $html, baik itu kesalahan atau kesuksesan. Ini jelas bukan penyelesaian yang paling elegan, tetapi bekerja!

Menyajikan URL Pendek

Jadi kita memiliki URL dalam database mari kita bekerja pada serve.php sehingga kita dapat benar-benar menerjemahkan kode pendek ke redirect.


<?php
  require("./db_config.php");

  $short = $_REQUEST['short'];

  $db = mysql_connect($host, $username, $password);    
    $query = mysql_query("SELECT * FROM `".$database."`.`url_redirects` WHERE `short`='".mysql_escape_string($short)."' LIMIT 1", $db);
    $row = mysql_fetch_row($query);

    if(!empty($row)) {
      Header("HTTP/1.1 301 Moved Permanently");
      header("Location: ".$row[2]."");
    } else {
      $html = "Error: cannot find short URL";
    }

  mysql_close($db);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Makes URLs Shrtr</title>
    <link type="text/css" rel="stylesheet" href="./css/style.css" />
	</head>
	<body>
	 <div id="pagewrap">
  	 <h1>shrt<span class="r">r</span>.me</h1>

  	 <div class="body">
  	   <?= $html ?>
  	   <br /><br />
  	   <span class="back"><a href="./">X</a></span>
  	 </div>

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

Yang satu ini sangat mirip dengan create.php kita menyertakan informasi database, dan menyimpan kode pendek yang dikirimkan ke kita di sebuah variabel yang disebut $short. Selanjutnya kita query database untuk URL dari kode singkat tersebut. Jika kita mendapatkan hasil kita redirect ke URL, jika tidak kita mencetak kesalahan seperti sebelumnya.

Sejauh ini PHP hanya sampai itu yang perlu kita lakukan, tetapi saat ini untuk berbagi URL singkat pengguna harus memasukkan ini, http://shrtr.me/server.php?short=SHORT_CODE tidak sangat cantik kan? Mari lihat jika kita tidak dapat menggabungkan beberapa kode mod_rewrite untuk membuatnya lebih baik.

Mempercantik dengan HTACCESS

Dari dua metode yang saya tulis pada awal tutorial kita akan menggunakan Apache karena aplikasi ini sudah diciptakan tanpa mempertimbangkan setiap URL parsing. Kode akan terlihat seperti ini:


  Options +FollowSymLinks
  RewriteEngine On

  RewriteCond %{SCRIPT_FILENAME} !-d
  RewriteCond %{SCRIPT_FILENAME} !-f


  RewriteRule ^(\w+)$ ./serve.php?short=$1

Melewati RewriteRule kita mengarahkan lalu lintas yang tidak memiliki file atau direktori nyata ke serve.php dan meletakkan ekstensi dalam variabel GET pendek. Tidak buruk untuk mencobanya untuk Anda sendiri!

Kesimpulan

Hari ini kita belajar beberapa cara yang berbeda untuk menggunakan mod_rewrite di aplikasi kita untuk membuat URL kita lebih cantik. Seperti biasa saya akan mengawasi komentar jika ada yang memiliki masalah, atau Anda dapat menghubungi saya di twitter. Terima kasih untuk membaca!

Ikuti kami di Twitter, atau berlangganan NETTUTS RSS Feed untuk tutorial pengembangan web dan artikel harian.