Baru-baru ini banyak sekali situs-situs Shorten URL yang memberikan layanan untuk memperpendek URL, dari situs yang tidak memberikan apa-apa untuk kita sampai ada yang memberikan feedback seperti uang kepada kita untuk setiap URL yang dikunjungi oleh pengunjung.
Dari banyaknya situs untuk memperpendek URL, situs mana yang pernah kamu coba? apakah adf.ly? shorte.st? de.tk? atau mungkin situs milik saya pendk.tk? :D. Dari situs-situs tersebut mungkin ada kekurangan dan kelebihannya masing-masing ya.
Apa kamu pernah berpikir untuk membuat situs Shorten URL milik sendiri? mungkin banyak dari kita pernah berpikir seperti itu dan mungkin kamu juga pernah berpikir kalau membuat sebuah situs untuk memperpendek URL itu sulit. Sebenarnya untuk membuat situs seperti itu tidaklah terlalu sulit, hanya saja kita butuh sedikit keahlian dibidang web programmer. Karena ditutorial kali ini kita akan menggunakan PHP, MySQL dan Htaccess. Tanpa berlama-lama lagi mari kita mulai membuatnya :D.
Apa yang kita butuhkan?
1. Text Editor (Saya menggunakan Sublime Text 3).
2. Apache, PHP dan MySQL (Gunakan XAMPP atau aplikasi semacamnya).
3. Browser untuk menjalankan aplikasi yang kita buat.
Langkah 1 (Membuat Database)
Pertama kita akan membuat database dan tabel database untuk menyimpan data url yang diinput pengunjung website.
1. Buka browser favorit kamu.
2. Ketik http://localhost/phpmyadmin/ pada address bar.
3. Pada halaman utama phpMyAdmin buat database dengan nama “database_shorten”.
4. Kemudian pergi kehalaman SQL dan isikan perintah SQL berikut.
- CREATE TABLE IF NOT EXISTS `url` (
- `id` int(11) NOT NULL AUTO_INCREMENT,
- `url_asli` varchar(300) NOT NULL,
- `url_pendek` varchar(200) NOT NULL,
- `hit` int(11) NOT NULL,
- `tanggal` datetime NOT NULL,
- PRIMARY KEY (`id`)
- ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
5. Lalu klik Go.
Langkah 2 (Membuat Koneksi Database)
Selanjutnya kita akan membuat sebuah file config.php yang berfungsi untuk menghubungkan website dengan database.
1. Buka text editor favorit kamu.
2. Buat sebuah document baru, biasanya dengan cara klik File > New File.
3. Lalu tuliskan coding seperti berikut.
<?php // Membuat variabel $host = "localhost"; $user = "root"; $pass = ""; $db = "database_shorten"; // menyatukan variabel menjadi sebuah koneksi mysql_connect($host,$user,$pass); // memilih database yang akan digunakan mysql_select_db($db); // variabel web $site['root'] = "http://localhost/shorten/"; // isi dengan alamat domain kamu, jika didalam localhost maka gunakan http://localhost/nama-folder/. $site['judul'] = "Pendekin"; // isikan dengan judul situs kamu. $site['deskripsi'] = "Pendekan URL kamu disini!"; // isikan dengan deskripsi situs kamu. ?>
4. Simpan file diatas dengan nama config.php.
Langkah 3 (Membuat File Utama Website)
Sekarang kita akan membuat sebuah file utama pada website.
1. Buat sebuah document baru pada text editor.
2. Sekarang kita akan membuat file index.php dimana file ini bekerja untuk halaman utama website kita.
3. Tuliskan coding seperti berikut.
<?php // Memanggil file config.php include("config.php"); // Membuat fungsi "acak()" function acak($panjang) { $karakter= 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890'; $string = ''; for ($i = 0; $i < $panjang; $i++) { $pos = rand(0, strlen($karakter)-1); $string .= $karakter{$pos}; } return $string; } ?> <!DOCTYPE HTML> <html> <head> <title><?php echo $site['judul']; ?> - <?php echo $site['deskripsi']; ?></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div id="form"> <h1>Pendek<span class="url">Url</span></h1> <?php // jika tombol dengan nama shorten ditekan ... if($_POST['shorten']) { // Membuat variabel $url_asli $url_asli = mysql_real_escape_string($_POST['url']); // Membuat variabel $url_pendek $url_pendek = acak(2).substr(uniqid(), 6, 5); // Jika variabel $url_asli kosong if(!$url_asli) { echo "Masukan url anda. <a href='index.php'>Kembali</a>"; // Sebaliknya }else{ // Jika berhasil menginput data ke database if(mysql_query("insert into url values(NULL, '$url_asli', '$url_pendek', '0', NOW())")) { ?> <div class="ket">Copy URL Dibawah dan tempelkan ditempat yang anda suka !</div> <input type="text" class="input" value="<?php echo $site['root'].$url_pendek; ?>" onclick="this.select()"> <input type="button" value="Tutup" class="btn" onclick="document.location='<?php echo $site['root']; ?>'"> <?php // Jika gagal }else{ echo "Gagal Memperpendek URL !! (".mysql_error().")"; } } }else{ ?> <form method="post"> <input type="text" name="url" class="input" placeholder="Pendekan URL kamu disini ..."> <input type="submit" name="shorten" value="Pendekin" class="btn"> </form> <?php } ?> </div> </div> </body> </html>
4. Simpan file tersebut dengan nama index.php.
Langkah 4 (Membuat File Redirect)
Setelah membuat file index.php, sekarang kita akan membuat file dengan nama redirect.php dimana file ini berfungsi untuk mengalihkan URL pendek ke URL asli.
1. Buat document baru atau file baru pada text editor kamu.
2. Tuliskan coding seperti berikut.
<?php ob_start(); // Memanggil file config.php include("config.php"); // Mengambil url pendek pada address bar $url = mysql_real_escape_string($_GET['url']); // Mengambil data dari database "url" yang sesuai dengan variabel $url $sql_url = mysql_query("select * from url where url_pendek = '$url'"); // Menampilkan hasil $sql_url menjadi array berbentuk object $url_row = mysql_fetch_object($sql_url); // Menampilkan hasil $sql_url menjadi angkan atau menghitung semua data yang ada pada tabel "url" $cek = mysql_num_rows($sql_url); // Jika url pendek ada pada tabel url if($cek > 0){ // Menambah 1 point pada field hit mysql_query("update url set hit = '$url_row->hit'+1 where id = '$url_row->id'"); // Mengalihkan ke url asli dari url pendek header("location: $url_row->url_asli"); // Jika url pendek tidak terdapat pada tabel url }else{ echo "<h1>URL Tidak ditemukan :(</h1>"; } ?>
3. Simpan file tersebut dengan nama redirect.php.
Langkah 5 (Membuat Style Pada Website)
Sekarang kita akan membuat style atau membuat website lebih berwarna 😀
1. Buat document baru dengan nama style.css.
2. Tuliskan coding CSS seperti ini.
/* * Style.css * * @Author : Newcyber.NET * @Copyright : 2010-2020 * @Facebook : fb.com/prima.newcyber.net * @Twitter : @NewcyberNET */ body { background: #31313b; margin: 0; color: #fff; } span.red { color: red; } .url { color: #3498db; } #container { width: 800px; margin: 170px auto; text-align: center; } #form {} #form h1 { margin-bottom: 20px; font: 60px georgia; font-style: italic; font-weight: bold; text-shadow:1px 1px 2px #333; } #form .input { padding: 10px 20px; width: 500px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; box-shadow: inset 0 0 3px #ddd; } #form .input:focus { border: 1px solid #3498db; } #form .input:hover { border: 1px solid #999; } #form .btn { padding: 10px 20px; border: none; border-radius: 3px; background: #3498db; color: #fff; cursor: pointer; } #form .btn:hover { background: #2485db; } .ket { margin-top: 20px; font: 14px arial; }
3. Simpan file tersebut dengan nama style.css.
Langkah 6 (Membuat File .htaccess)
Sampai sekarang sebenarnya website sudah bisa digunakan, namun pada metode pengambilan URL pendek pada address bar masih menggunakan metode seperti ini contoh: http://localhost/shorten/redirect.php?url=URL Pendek. Namun seperti situs shorten URL lainnya kita akan membuat sebuah permalink menggunakan .htaccess yang nantinya akan menjadi seperti ini: http://localhost/shorten/URL.
1. Buat document atau file baru.
2. Tuliskan fungsi htaccess berikut.
- #mengaktfikan mode rewrite
- RewriteEngine On
- #membuat permalink sederhana dengan regex [a-zA-Z0-9]
- RewriteRule ^([a-zA-Z0-9]+)/?/?$ redirect.php?url=$1
3. Simpan file tersebut dengan nama .htaccess.
Langkah 7
Simpan semua file dalam satu folder yang sama, contoh disini saya menyimpan semua file dalam satu folder dengan nama shorten. Jadi, pada file config.php saya mengisi http://localhost/shorten/ pada variabel $site[‘root’].
Langkah Terakhir
Pada langkah terakhir ini, kita akan melakukan uji coba pada situs shorten yang baru kita buat ini.
1. Buka browser favorit kamu.
2. Lalu ketikan http://localhost/shorten/ pada address bar.
3. Dan…. lihat hasilnya. 😀
Mungkin hasilnya tidak sebagus situs-situs shorten url lainnya, namun setidaknya kita sudah tahu bagaimana cara membuat situs shorten url sendiri. Cara kerja situs seperti ini ialah, dimana url asli atau url yang panjang akan di pendekan lewat form yang ada, lalu ketika form disubmit maka sistem akan menginput url panjang tersebut kedalam tabel database.
Lalu, sistem akan menggenerate angka dan huruf unik dan menampilkannya kepada user, sehingga user bisa menggunakan url yang sudah digenerate oleh sistem untuk menggunjungi url yang mereka pendekan. Mudah-mudahan kamu ngerti ya 😀 Semoga bermanfaat dan sampai jumpa diartikel berikutnya.
