Cara Membuat Penyingkat URL Menggunakan Javascript | AWDEV TUTORIAL
shortlink
Dalam proyek ini, kita akan membangun layanan pemendek Uniform Resource Locator (URL). Saya yakin sebagian besar dari Anda pernah mendengar tentang bit.ly , goo.gl , dan penyingkat URL lainnya.
Dengan penyingkat URL, Anda dapat mempersingkat URL panjang agar mudah dibagikan.
Dalam tutorial ini, Anda akan membangun layanan yang melakukan ini. Kami akan membangun API yang memperpendek tautan panjang menggunakan database JavaScript, PHP, dan MySQL.
Tanpa basa-basi lagi, Mari kita mulai.
Daftar Isi
penyingkat URL
Bagaimana cara kerja penyingkat URL?
Membangun penyingkat URL
Prasyarat
Pemahaman dasar tentang HTML, CSS, JavaScript, dan PHP diperlukan. Memiliki editor teks yang diinstal pada komputer Anda, sebaiknya Visual Studio Code.
Kami akan menggunakan database MySQL. Pastikan Anda telah menginstal server WAMP atau XAMPP di komputer Anda.
penyingkat URL
Penyingkat URL (Wikipedia) adalah alat yang mengambil URL yang panjang dan kompleks dan mengompresnya menjadi tautan pendek dan jelas yang lebih mudah dibagikan. Pengguna diarahkan ke URL utama saat mereka mengeklik tautan pendek ini.
Misalnya, Anda mungkin ingin membagikan kiriman dan menyertakan tautan ke Twitter, tetapi Anda menghadapi batasan karakter. Twitter membatasi hingga 280 karakter. Untuk mengatasi masalah ini, Anda menggunakan pemendek URL untuk mengurangi tautan. Ini tidak hanya berguna dengan Twitter tetapi juga dalam situasi lain di mana tautan panjang tidak dapat dikelola.
Tautan pendek menghemat banyak ruang saat dipamerkan karena kecil dan jelas. Selain itu, sulit bagi pengguna untuk salah mengetik tautan yang lebih pendek.
Bagaimana cara kerja penyingkat URL?
Proses pemendekan URL cukup sederhana. Penyingkat URL menghasilkan string acak, memetakan URL utama ke kode pendek dan memberikan URL baru. Kedua URL tersebut dimasukkan ke dalam database.
Saat Anda menekan URL yang dipersingkat, database memeriksa kode pendek dan mengarahkan Anda ke URL utama. Penyingkat URL mendapatkan URL panjang dan mengembalikan URL pendek.
Dalam skenario ini, kami akan membuat area input untuk memasukkan URL panjang (asli). Setelah menekan tombol, sistem akan menghasilkan URL pendek. Juga, dimungkinkan untuk mengedit dan menyimpan URL yang dipersingkat. Fungsi hapus juga akan tersedia.
Anda dapat membuat penyingkat URL dengan bahasa pemrograman dan database apa pun. Dalam tutorial ini, kita akan menggunakan HTML, JavaScript, PHP, dan MySQL.
Membangun penyingkat URL
Untuk membuat penyingkat URL, kita memerlukan database dan server. Dalam panduan ini, kita akan menggunakan server WAMP, yang berarti kita akan meng-host API di sistem operasi Windows.
WAMP (Windows, Apache, MySQL, dan PHP) dapat dijelaskan sebagai berikut:
Windows - menentukan bahwa sistem kompatibel dengan perangkat Windows.
Apache - ini adalah program yang menghosting aplikasi.
MySQL - menyediakan database untuk konten aplikasi Anda.
PHP - bahasa yang membuat konten dinamis.
Langkah 1: Navigasikan ke server WAMP
Arahkan ke server WAMP. Direktori secara otomatis dibuat selama instalasi, dan terletak di disk lokal C (c:\wamp\www). Di direktori www, folder yang disebut sebagai proyek dibuat. Ini berguna dalam menyimpan file HTML, CSS, JavaScript, dan PHP.
Untuk mulai membuat proyek, buat folder dan beri nama shorten-url.
Langkah 2: Buat file PHP
Untuk membuat penyingkat URL, kita memerlukan area input teks dan tombol, lalu tambahkan tag skrip. Buat index.phpfile di dalam shorten-urldirektori dan buka menggunakan kode VS.
Untuk membuat area input teks dan tombol, kita akan menggunakan kode di bawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>URL Shortener</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form action="#">
<i class="url-icon uil uil-link"></i>
<input type="text"placeholder="Enter the long url" required>
<button>Shorten the URL</button>
</form>
<div class="count">
<span>Total Links: <span>10</span> & Total Clicks</span>
</div>
<div class="url-area">
<div class="title">
<li>Shorten URL</li>
<li>Original URL</li>
<li>Clicks</li>
<li>Actions</li>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Di bawah ini adalah area input:
Area masukan
Baca juga
✎ 13 Portal Berita Terbaik di Indonesia
✎ Cara Investasi Crypto di Pintu Dengan Aman dan Mudah
✎ Cara Membuat Acara Online Berbayar Halaman Facebook Awdev Global Network
✎ Digital Marketing Global Network AWDEV
✎ Cara Mendapatkan Sponsor untuk Sebuah Proyek dan Acara : Panduan Lengkap AWDEV - Bussines
Di folder shorten-url, kita juga akan menambahkan script.js, connect.php, controller.php, save-url.php, delete.php, dan style.cssfile.
Langkah 3: Konfigurasi MySQL dan buat database dan tabel
Pada bagian ini, kita akan mengkonfigurasi database MySQL dengan membuka panel phpMyAdmin. Nama pengguna admin secara default disetel ke root, dan kata sandi adalah bidang kosong.
Buat database, dan beri nama shorten-url. Kemudian buat tabel url. Atribut tabel urltermasuk (id, short_url, original_url, dan klik). Basis shorten-urldata menyimpan data URL (id, url asli, url pendek, dan klik).
Basis data
Langkah 4: Konfigurasi basis data
Buat file connect.phpdan tambahkan kredensial basis data di dalamnya.
<?php
$domain = "localhost/url/";
$servername = "localhost";
$username = "root";
$password = "";
$dbname='shorten-url';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>Langkah 5: Buat URL pendek dengan PHP
Di area input, kami memasukkan URL panjang, dan setelah menekan tombol, URL pendek dibuat.
Kode berikut membuat URL pendek menggunakan PHP dan MySQL.
<?php
include "php/connect.php";
$new_url = "";
if(isset($_GET)){
foreach($_GET as $key=>$val){
$u = mysqli_real_escape_string($conn, $key);
$new_url = str_replace('/', '', $u);
}
$sql = mysqli_query($conn, "SELECT original_url FROM url WHERE short_url = '{$new_url}'");
if(mysqli_num_rows($sql) > 0){
$sql2 = mysqli_query($conn, "UPDATE url SET clicks = clicks + 1 WHERE short_url = '{$new_url}'");
if($sql2){
$original_url = mysqli_fetch_assoc($sql);
header("Location:".$original_url['original_url']);
}
}
}
?>
<?php
$sql2 = mysqli_query($conn, "SELECT * FROM url ORDER BY id DESC");
if(mysqli_num_rows($sql2) > 0){;
?>
<div class="url-area">
<div class="title">
<li>Shorten URL</li>
<li>Original URL</li>
<li>Clicks</li>
<li>Action</li>
</div>
<?php
while($row = mysqli_fetch_assoc($sql2)){
?>
<div class="data">
<li>
<a href="<?php echo $domain.$row['short_url'] ?>" target="_blank">
<?php
if($domain.strlen($row['short_url']) > 50){
echo $domain.substr($row['short_url'], 0, 50) . '...';
}else{
echo $domain.$row['short_url'];
}
?>
</a>
</li>
<li>
<?php
if(strlen($row['original_url']) > 60){
echo substr($row['original_url'], 0, 60) . '...';
}else{
echo $row['original_url'];
}
?>
</li>
</li>
</div>
<?php
}
?>
</div>
<?php
}
?>
</div>
Persingkat URL
Langkah 6: Hasilkan nomor acak unik
Kami membuat file controller.php, yang menghasilkan id unik dan memasukkan URL asli ke dalam tabel dengan URL pendek.
Kode berikut menghasilkan id acak unik untuk URL yang panjang. Ini adalah bagaimana kita dapat menghasilkan id unik:
<?php
include "connect.php";
$original_url = mysqli_real_escape_string($conn, $_POST['original_url']);
if(!empty($original_url) && filter_var($original_url, FILTER_VALIDATE_URL)){
$ran_url = substr(md5(microtime()), rand(0, 26), 5);////generating a random number, 5 characters
//checking that random generated url exists in the database or not
$sql = mysqli_query($conn, "SELECT * FROM url WHERE short_url = '{$ran_url}'");
if(mysqli_num_rows($sql) > 0){
echo "Something went wrong. Please generate again!";
}else{
//insert typed url into the table with short url
$sql2 = mysqli_query($conn, "INSERT INTO url (original_url, short_url, clicks)
VALUES ('{$original_url}', '{$ran_url}', '0')");
if($sql2){
$sql3 = mysqli_query($conn, "SELECT short_url FROM url WHERE short_url = '{$ran_url}'");
if(mysqli_num_rows($sql3) > 0){
$short_url = mysqli_fetch_assoc($sql3);
echo $short_url['short_url'];
}
}
}
}
?>Langkah 7: Arahkan ulang ke URL panjang
URL pendek harus dialihkan ke URL panjang. Kode berikut mengarahkan pengguna dari URL pendek ke URL panjang.
let domain = "localhost/url/";
shortenURL.value = domain + data;
copyIcon.onclick = ()=>{
shortenURL.select();
document.execCommand("copy");
}
<div class="data">
<li>
<a href="<?php echo $domain.$row['short_url'] ?>" target="_blank">
<?php
if($domain.strlen($row['short_url']) > 50){
echo $domain.substr($row['short_url'], 0, 50) . '...';
}else{
echo $domain.$row['short_url'];
}
?>
</a>
</li> Langkah 8: Fungsi menyimpan URL
Setelah membuat url pendek yang menghasilkan id unik. Id unik dapat diedit dan disimpan. Buat save-url.phpfile lalu salin dan tempel kode di bawah ini:
<?php
include "connect.php";
$og_url = mysqli_real_escape_string($conn, $_POST['short_url']);
$short_url = str_replace(' ', '', $og_url);
$hidden_url = mysqli_real_escape_string($conn, $_POST['hidden_url']);
if(!empty($short_url)){
if(preg_match("/\//i", $short_url)){
$explodeURL = explode('/', $short_url);
$shortURL = end($explodeURL);
if($shortURL != ""){
$sql = mysqli_query($conn, "SELECT short_url FROM url WHERE short_url = '{$shortURL}' && short_url != '{$hidden_url}'");
if(mysqli_num_rows($sql) == 0){
$sql2 = mysqli_query($conn, "UPDATE url SET short_url = '{$shortURL}' WHERE short_url = '{$hidden_url}'");
if($sql2){
echo "success";
}else{
echo "Error - Failed to update link!";
}
}else{
echo "The short url that you've entered already exist. Please enter another one!";
}
}else{
echo "Required - You have to enter short url!";
}
}else{
echo "Invalid URL - You can't edit domain name!";
}
}else{
echo "Error- You have to enter short url!";
}
?>Di bawah ini adalah cara kerja fungsi simpan:
Simpan URL
Langkah 9: Fungsi hapus URL
Dimungkinkan juga untuk menghapus URL singkat yang disimpan dalam database. Buat delete.phpfile, lalu salin dan tempel kode di bawah ini:
<?php
include "connect.php";
if(isset($_GET['id'])){
$delete_id = mysqli_real_escape_string($conn, $_GET['id']);
$sql = mysqli_query($conn, "DELETE FROM url WHERE short_url = '{$delete_id}'");
if($sql){
header("Location: ../");
}else{
header("Location: ../");
}
}elseif(isset($_GET['delete'])){
$sql3 = mysqli_query($conn, "DELETE FROM url");
if($sql3){
header("Location: ../");
}else{
header("Location: ../");
}
}else{
header("Location: ../");
}
?>Di bawah ini adalah cara kerja fungsi hapus:
Hapus URL
Beginilah cara kerja sistem Penyingkat URL:
penyingkat URL
Anda dapat menemukan kode sumber proyek di GitHub .
Membungkus
Selamat! Anda akhirnya telah membuat penyingkat URL menggunakan JavaScript, PHP, dan MySQL. Sistem menghasilkan id acak yang unik, dan setelah disimpan, itu disimpan dalam database.
Untuk meringkas, kita telah belajar:
Apa itu penyingkat URL?
Cara kerja penyingkat URL.
Cara membuat pemendek URL menggunakan JavaScript, PHP, dan MySQL.
