PHP dan MySQL : Buat Website Pemendek URL (URL Shortener)

byAndreas Pandu Pamungkas •
0
PHP dan MySQL : Buat Website Pemendek URL (URL Shortener)

DailyBlog.id - Penggunaan URL Shortener tentunya sangat membantu dalam memperpendek link yang sangat panjang dan mudah diingat tentunya. Dalam artikel ini saya akan memberikan tutorial kepada kalian semua bagaimana cara untuk membuat website URL Shortener atau Pemendek URL dengan menggunakan PHP dan MySQL. Tentu saja website yang dibuat ini sederhana, dan tidak terlalu susah tentunya.

URL Shortener sendiri sudah banyak di internet, dan yang paling populer biasanya Bit.ly, nah kalian nantinya bisa mengembangkan sendiri script yang sudah saya kasih nantinya untuk menjadi URL Shortener yang lebih kompleks mungkin.

Oke langsung saja ke tutorial cara pembuatannya.

Buat Website Pemendek URL (URL Shortener)

Dalam pembuatan website nantinya akan dibagi beberapa bagian, yaitu:
  1. Membuat file .htaccess
  2. Membuat database dan tabel databasenya
  3. Menghubungkan ke database
  4. Membuat file index.php
  5. Membuat file validasi (insert URL ke database)
  6. Membuat file redirect URL nya
  7. Membuat file CSS

Sebelum lanjut ke tahap-tahap yang di atas, pastikan kalain telah membuat 2 folder di dalam folder projek kalian. 2 Folder yang harus dibuat yaitu:

  • assets
  • includes
Jika sudah membuat 2 folder di folder projek kalian, kalian bisa lanjutkan langkah-langkah yang ada di bawah ini.

1. Membuat file .htaccess

Untuk membuat link seperti http://contoh.com/xQsXDAFg, maka diperlukan sebuah .htaccess agar bisa mendesain url yang cantik dan diharapkan tentunya. Maka kalian bisa buat file dengan nama .htaccess lalu copy script yang ada di bawah ini.

.htaccess

Options -Indexes

RewriteEngine on
RewriteRule ^([A-Za-z0-9]{8})$ includes/redirect.php?kode=$1


Nantinya ([A-Za-z0-9]{8}) akan digunakan untuk kode url shortenernya -> xQsXDAFg dan akan diarahkan ke url asli includes/redirect.php?kode=xQsXDAFg


Itu artinya sama saja seperti http://contoh.com/includes/redirect.php?kode=xQsXDAFg tapi dengan adanya .htaccess maka URL bisa terlihat lebih pendek -> http://contoh.com/xQsXDAFg alias dibentuk baru.

2. Membuat database dan tabel databasenya

Disaat membuat database beserta tabelnya, kalian bisa menuju pada halaman phpMyAdmin setelah itu buat database baru jika belum mempunyai databasenya. Untuk membuat database baru, kalian bisa klik Create Database pada halaman Database. Setelah itu masukan nama database yang ingin kalian buat, seperti ini:

1 - PHP dan MySQL : Buat Website Pemendek URL (URL Shortener)

atau kalian juga bisa ketik dan execute query yang ada di bawah ini di halaman SQL:

CREATE DATABASE dailyblogid_db;



Setelah itu masuk pada database yang sudah kalian buat. Dan tahap selanjutnya yaitu pembuatan tabel databasenya. Tabel yang akan dibuat yaitu tabel shortener dan memiliki fields:

  • id – int(11)
  • url – varchar(500)
  • kode – varchar(8)
  • tanggal_buat – datetime

Kalian bisa copy query yang ada di bawah ini lalu jalankan pada halaman SQL:

CREATE TABLE IF NOT EXISTS `shortener` (
    `id` int NOT NULL AUTO_INCREMENT,
    `url` varchar(500) NOT NULL,
    `kode` varchar(8) NOT NULL,
    `tanggal_buat` datetime NOT NULL,
    UNIQUE(`kode`),
    PRIMARY KEY (`id`)
);


2 - PHP dan MySQL : Buat Website Pemendek URL (URL Shortener)

Setelah dibuat, maka tampilan dari struktur tabelnya akan seperti ini:

3 - PHP dan MySQL : Buat Website Pemendek URL (URL Shortener)

3. Menghubungkan ke database

Setelah membuat database beserta tabelnya, maka langkah selanjutnya agar PHP dan Databasenya bisa saling terkoneksi, maka kalian harus membuat script untuk mengkoneksikan ke MySQL nya. Untuk mengkonekannya, kalian bisa buat file di folder includes dengan nama db.php lalu copy script yang ada di bawah ini.

includes/db.php

<?php

$connect = mysqli_connect('localhost', 'root', '', 'dailyblogid_db');
$url_ori = 'http://localhost/';

if (mysqli_connect_errno())
    die('Gagal terhubung ke database: <b>'.mysqli_connect_error().'</b>');

?>


Kalian bisa ubah isi dari var $url_ori dengan URL Host yang kalian gunakan.

4. Membuat file index.php

Kalian bisa buat file dengan nama index.php, lalu copy script yang ada di bawah ini.

index.php

<?php include './includes/db.php' ?>
<!DOCTYPE html>
<html>
    <head>
        <title>URL Shortener Sederhana</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
        <link rel="stylesheet" href="assets/style.css" />
    </head>
    <body>
        <div class="url-shortener">
            <div class="title">
                <h1>URL Shortener</h1>
            </div>
            <div class="deskripsi">
                <p>Masukan link yang ingin diperpendek di form yang ada di bawah ini.</p>
            </div>

            <div class="form">
                <form method="post">
                    <div class="input-group input-group-lg">
                        <span class="input-group-text"><i class="bi bi-link-45deg icons"></i></span>
                        <input type="url" name="url" class="form-control" placeholder="Masukan Link Disini ..." value="<?=(isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '')?>">
                        <button class="btn btn-primary" name="submit"><i class="bi bi-arrow-right"></i></button>
                    </div>
                </form>
                
                <?php include './includes/url_submit.php' ?>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            const salinLink = document.getElementById('salin-link');
            salinLink.addEventListener('click', (e) =>
            {
                e.preventDefault();

                const cop = document.createElement('textarea');
                cop.value = document.getElementById('url-short').textContent;
                document.body.appendChild(cop);
                cop.select();
                document.execCommand('copy');
                document.body.removeChild(cop);

                salinLink.text = 'Link disalin';

                setTimeout(() => {salinLink.text = 'Salin'}, 2000);
            });
        </script>
    </body>
</html>

5. Membuat file validasi (insert URL ke database)

Kalian bisa buat file di folder includes dengan nama file url_submit.php, file ini nantinya digunakan validasi URL dan insert inputan URL ke database.

url_submit.php

<?php

$echo = '';
if (isset($_POST['submit'])) 
{
    // Panggil $_POST['url']
    $url = mysqli_real_escape_string($connect, $_POST['url']);
    $echo .= '<hr/>';
    
    // Validasi karakter inputan URL
    if (!preg_match('#((https?|ftp)://(\S*?\.\S*?))([\s)\[\]{},;"\':<]|\.\s|$)#i', $url)) 
    {
        $echo .= '<div class="alert alert-danger">Link yang Anda masukan tidak benar! Silahkan masukan kembali.</div>';
    }
    else if (mb_strlen($url) > 500) // Batas maksimal karakter URL -> 500 karakter
    {
        $echo .= '<div class="alert alert-danger">Panjang URL maksimal 500 karakter!</div>';
    }
    else 
    {
        // Buat random karakter URL Shortenernya
        $random_karakter = 'abcdefghijklmnopqrstuvwxyz';
        $kode_random = substr(str_shuffle($random_karakter.strtoupper($random_karakter).'0123456789'), 0, 8);
        $tanggal_buat = date("Y-m-d H:i:s");

        // Insert ke tabel `shortener`
        $insert = mysqli_query($connect, "INSERT INTO shortener SET url = '$url', kode = '$kode_random', tanggal_buat = '$tanggal_buat'");

        // Cek apakah berhasil atau terjadi error pas insert
        if ($insert) 
        {
            setcookie('berhasil', 1, time() + 3600, '/');
            header('location: ?kode='.$kode_random);
        }
        else 
        {
            $echo .='<div class="alert alert-danger">Terjadi kesalahan saat memperpendek link.</div>';
        }
    }
}

if (isset($_POST['submit']) || isset($_GET['kode'])) 
{
    echo '<div class="output">';
    echo $echo; // Pesan err

    // Deteksi kalau ada cookie berhasil, maka tampilin pesan berhasil
    if (isset($_COOKIE['berhasil'])) 
    {
        setcookie('berhasil', null, time() - 3600, '/');
        echo '<div class="alert alert-success">Berhasil memperpendek link</div><br/>';
    }

    if (!empty($_GET['kode']) && !isset($_POST['submit']) )
    {
        // Panggil $_GET['kode]
        $kode = mysqli_real_escape_string($connect, $_GET['kode']);

        $cek_kode = mysqli_query($connect, "SELECT url, kode, tanggal_buat FROM shortener WHERE kode='$kode'");

        // Cek apakah data $_GET['kode'] ada?
        if (mysqli_num_rows($cek_kode) == 0)
        {
            echo '<div class="alert alert-danger">Tidak dapat menemukan link yang Anda minta!</div>';
        }
        else
        {
            $fetch_kode = mysqli_fetch_object($cek_kode);
            $url_short = $url_ori.$fetch_kode->kode;

            echo '<br/>';
            echo '<div class="row">
                    <div class="col-md-2">
                        <div class="pd">
                            <b>Tanggal Buat</b>:
                        </div>
                    </div>

                    <div class="col-md-10">
                        <div class="pd">
                            '.$fetch_kode->tanggal_buat.'
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="pd">
                            <b>URL Asli</b>:
                        </div>
                    </div>

                    <div class="col-md-10">
                        <div class="pd">
                            '.$fetch_kode->url.'
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="pd">
                            <b>Link pendek</b>:
                        </div>
                    </div>

                    <div class="col-md-10">
                        <div class="pd">
                            <a href="'.$url_short.'" target="_blank" class="url"><span id="url-short">'.$url_short.'</span></a> 
                            <a href="#salin-link" class="btn btn-outline-success btn-sm" id="salin-link">Salin</a>
                        </div>
                    </div>
                </div>';
        }
    }

    echo '</div>';
}

?>


6. Membuat file redirect URL nya

Agar nanti URL Shortenernnya bisa redirect ke URL asli, maka diperlukan file redirectnya, kalian bisa buat file di folder includes dengan nama file yaitu redirect.php. Lalu copy script yang ada di bawah ini.

includes/redirect.php

<?php

include './db.php';

$kode = mysqli_real_escape_string($connect, $_GET['kode']);
$cek_kode = mysqli_query($connect, "SELECT url FROM shortener WHERE kode='$kode'");

if (mysqli_num_rows($cek_kode) == 0)
    $url_redirect = $url_ori.'?kode='.$kode;
else
{
    $fetch_kode = mysqli_fetch_object($cek_kode);
    $url_redirect = $fetch_kode->url;
}

header('location: '.$url_redirect);

?>


7. Membuat file CSS

Biar tampilan dari website URL Shortenernya terlihat menarik, tentu saja harus didesain tampilannya. Untuk desain yang bagus tapi sederhana, kalian bisa buat file di folder assets dengan nama file style.css . Lalu copy script yang ada di bawah ini.

assets/style.css

body {
    background: url('./cover.jpg') fixed no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    color: #fff
}

a {text-decoration: none}

.alert {color: white}

.alert.alert-danger {background-color: #f44336}

.alert.alert-success {background-color: #4CAF50}

.alert.alert-info {background-color: #2196F3}

.alert.alert-warning {background-color: #ff9800}

.url-shortener {
    max-width: 1000px;
    margin: 10em auto;
    text-align: center;
    color: #fff
}

.url-shortener .deskripsi {
    font-size: 18px;
    margin: 10px
}

.url-shortener .form {
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    box-shadow: 0 0 20px #555;
    margin: 3em 10px;
    color: #555;
    text-align: left;
}

.url-shortener .form hr {
    margin-top: 1.2em;
    border: 0;
    border-top: 1px solid #aaa;
}

.url-shortener .form .input-group-text {
    background: #fff!important;
    border: none!important;
}

.url-shortener .form .input-group .form-control {
    border: none;
    margin-right: 10px;
}

.url-shortener .form .input-group .form-control:hover, 
.url-shortener .form .input-group .form-control:focus {
    box-shadow: none;
}

.url-shortener .form .input-group .btn {
    width: 60px;
    height: 60px;
    font-size: 25px;
    border-radius: 50%!important;
    box-shadow: 0 0 10px #1e78fd;
}

.url-shortener .form .input-group .btn:hover {
    box-shadow: 0 0 10px #1e78fd;
}

.url-shortener .form .input-group-text .icons {
    font-size: 30px
}

@media (max-width: 560px) {
    .url-shortener .form .input-group .btn {
        width: 50px;
        height: 50px;
        font-size: 25px;
        position: relative;
    }
    
    .url-shortener .form .input-group .btn i {
        position: absolute;
        left: 11px;
        top: 6.5px
    }

    .url-shortener .form .input-group-text .icons {
        font-size: 25px
    }
}

.url-shortener .output {
    margin: 1.5em 0;
    word-break: break-all;
}

.url-shortener .output .pd {
    padding-bottom: 0.5rem
}


Dan website URL Shortener sudah selesai, kalian bisa coba buka dan coba masukan link yang ingin kalian perpendek. Sebagai contoh:

  • URL : https://www.dailyblog.id
Dan Outputnya akan seperti ini (contoh saja)
  • Tanggal Buat: 2021-12-18 08:29:47
  • URL Asli: https://www.dailyblog.id
  • Link Pendek: http://localhost/qCOJnTZ3

PHP dan MySQL : Buat Website Pemendek URL (URL Shortener)

Download Script

Jika kalian ingin mengunduh script lengkapnya, kalian bisa buka Github saya yang ada di link https://github.com/andspdev/url-shortener-sederhana


Nah itu dia tutorial cara buat website pemendek url (url shortener), kalian bisa kembangin script yang sudah saya kasih. Mungkin kalian ingin membuat URL Shortener yang lebih besar / kompleks seperti Bit.ly, silahkan saja... 

Mungkin sampai disini artikel tutorial dari saya, semoga artikel yang saya berikan ini dapat bermanfaat. Jika saya ada salah pengetikan, saya mohon maaf. Sekian dan terima kasih.

Selamat mencoba!

Kategori:

Post a Comment (0)
Previous Post Next Post