Cara Membuat Website Shortenlink Sendiri Menggunakan Laravel 9 – Halo semua, balik lagi sama saya di awiez.com kali ini saya mau sharing cara membuat website shortenlink sendiri seperti salah satu website yang terkenal yaitu bit.ly. Seperti yang kita ketahui bitly merupakan sebuah website yang menyediakan layanan untuk memperpendek tautan atau link yang kita miliki sehingga mudah diingat.
| Tautan awal | Dengan bitly |
| https://www.linkedin.com/in/awiez-fathwa-zein-025b331b0/ | https://bit.ly/3fRGNRD |
Sebenarnya bitly sendiri sudah menyediakan layanan agar kita bisa menggunakan domain yang kita miliki sebagai tautan yang digunakan namun kita dikenakan biaya bulanan sebesar Rp. 1.474.080 untuk paket starter dan Rp. 36.667.740 untuk paket premium per tahunnya jika menggunakan kurs Rp. 15.355 pada saat artikel ini ditulis (11/10/2022). Yang membedakan antara paket tersebut adalah fitur yang ditawakan serta tautan yang dapat dibuat perbulannya.
Menurut saya biaya tersebut terbilang mahal, sehingga solusi yang lebih murah adalah dengan membuat sendiri layanan perpendek URL menggunakan laravel 9. Lantas apa keuntungan kita membuat sendiri url shortener ini?
- Harga jauh lebih murah apalagi jika menggunakan subdomain dari domain yang sudah kita miliki.
- Dapat mempromosikan website utama yang kita miliki dengan mengenalkan web kita pada halaman utama url shortener.
- Jika ingin dikomersilkan bisa kita tawarkan fitur yang mmenarik kepada pelanggan.
Daftar Isi
Persiapan pembuatan
Yang perlu dipersiapkan untuk membuat url shortener ini adalah :
- Webserver yang sudah terintegrasi dengan MySQL, saya menggunakan XAMPP.
- Text editor, saya menggunakan Visual Studio Code.
- Composer.
Instalasi Laravel 9
Bagi yang sudah menginstall composer bisa menggunakan perintah berikut pada terminal/command prompt (cmd)
composer create-project laravel/laravel nama-folder
Silahkan ganti “nama-folder” dengan nama proyek yang ingin anda buat, saya menamai dengan “shortenlink-laravel”. Bagi yang belum menginstall Composer bisa download Laravel melalui website resminya di laravel.com.
Pembuatan kode program
Karena kita belum memiliki tampilan dari url shortener yang kita buat, maka buat terlebih dahulu tampilannya atau copy kode dibawah ini dan simpan dengan nama home.blade.php pada resource/views
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Awiez | URL Shortener</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mb-4" style="margin-top: 30vh">
<div class="col">
<h2>Selamat datang di Awiez <br> | <strong>URL Shortener</strong></h2>
</div>
</div>
<div class="row">
<div class="col-md-5">
<form action="{{ route('add-link') }}" method="POST" class="d-flex" role="search">
@csrf
<div class="input-group flex-nowrap">
<input type="text" class="form-control" name="url" placeholder="Masukkan URL panjang"
aria-label="Username" aria-describedby="addon-wrapping">
<button class="btn btn-danger" id="addon-wrapping">Shorten</button>
</div>
</form>
@if ($message = Session::get('link'))
<div class="alert alert-success mt-3" role="alert">
URL berhasil dipersingkat menjadi <a href="{{ $message }}"
class="alert-link">{{ $message }}</a>
</div>
@endif
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
</script>
<style>
body {
background: rgb(152, 152, 152);
background: linear-gradient(90deg, rgb(237, 237, 237) 26%, rgb(175, 175, 174) 100%);
}
</style>
</body>
</html>Selanjutnya buat database baru pada phpMyAdmin dengan menjalankan apache dan mysql pada XAMPP dan beri nama “shortenlink-laravel” atau lainnya dan biarkan database tersebut kosong karena kita akan menggunakan migrasi untuk membuat tabelnya. Kemudian buka file .env pada folder proyek yang telah dibuat dan isi pengaturan databasenya seperti berikut
DB_DATABASE adalah nama database yang telah dibuat sebelumnya, bagi yang menggunakan XAMPP silahkan isi DB_USERNAME dan DB_PASSWORD sesuai dengan gambar diatas.
Selanjutnya kita coba dulu code tampilan home yang telah dibuat sebelumnya dengan cara buka file web.php pada folder routes dan ganti code yang ada seperti dibawah ini
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LinkController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('home');
});
Route::get('/{slug}', [LinkController::class, 'getLink'])->name('get-link');
Route::post('/i/add-link', [LinkController::class, 'addLink'])->name('add-link');Kemudian save dan jalankan laravel dengan membuka terminal pada VS Code dan ketik perintah php artisan serve
Setelah itu silahkan buka ip yang ada pada “Server running on” menggunakan browser.
Setelah berhasil terbuka kita akan mulai masuk kedalam pemrograman intinya, yang pertama kita buat dulu tabel yang akan digunakan untuk menampung data link yang akan dipersingkat. Silahkan buat file migrasi terlebih dahulu dengan cara ketik perintah berikut pada terminal
php artisan make:migration create_link_table
Lalu buka file tersebut pada folder database/migrations dan isi file tersebut dengan kode dibawah ini
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('link', function (Blueprint $table) {
$table->id();
$table->timestamps();
$table->string('url');
$table->string('slug');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('link');
}
};
Setelah itu save dan jalankan php artisan migrate pada terminal. Saat ini kita sudah berhasil membuat table link beserta isinya, bisa dilihat pada phpMyAdmin
Table lain yang ada pada database tersebut adalah bawaan dari Laravel itu sendiri sehingga tidak perlu diubah.
Selanjutnya kita buat model link dengan cara tulis perintah php artisan make:model Link pada terminal, setelah itu buka model Link.php pada app/models dan tulis kode seperti dibawah ini
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Link extends Model
{
use HasFactory;
protected $table = 'link';
protected $fillable = [
'url',
'slug',
];
}Kemudian setelah model dibuat selanjutnya buat controller LinkController.php dengan cara tulis perintah php artisan make:controller LinkController pada terminal dan buka file tersebut pada app/http/controller dan isi dengan kode dibawah ini
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Link;
class LinkController extends Controller
{
public function index()
{
return view('home');
}
public function getLink($slug)
{
$link = Link::where('slug', $slug)->get();
if ($link->count() != 0) {
return redirect("https://".$link->first()->url);
}else{
return redirect()->back()->with('error-nf', 'Link not found');
}
}
public function addLink(Request $request){
$this->validate($request, [
'url' => 'required|string',
]);
date_default_timezone_set("Asia/Jakarta");
$pool = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$slug = substr(str_shuffle(str_repeat($pool, 5)), 0, 5);
if (strpos($request->url, 'tautt.my.id') !== false) {
return redirect()->back()->with('error-same-link', 'Link tidak boleh mengarah ke tautt.my.id');
}else{
$slugondb = Link::where('slug', $slug)->get();
if ($slugondb->count() == 0) {
Link::create([
'url' => str_replace("https://", "", $request->url),
'slug' => $slug,
]);
return redirect()->back()->with('success', "Link berhasil ditambahkan!")->with('link', 'http://127.0.0.1:8000/'.$slug);
}
}
}
}Hasil dari aplikasi ini adalah seperti gambar dibawah ini, untuk contoh layanan yang dibuat dengan kode program pada tutorial ini adalah tautt.my.id
Artikel lainnya :
Leave a Reply