Sekarang kita akan membuat tampilan halaman untuk aplikasi URL Shorterner yang kita buat menggunakan laravel.
Jangan lupa lupa untuk mengaktifkan sever mysql terlebih dahulu, kemudian buka kembali project kita sebelumnya.
Kita akan membuat tampilan halaman sederhana menggunakan bantuan bootstrap ya. Buat file bernama index.blade.php baru di dalam folder resources/views/. Setelah itu masukkan html berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Laravel URL Shorterner</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">Laravel URL Shorterner</a>
</div>
</nav>
<div class="container py-5">
<div class="row">
<div class="col-lg-6 mx-auto">
<h3 class="text-center mb-4">Buat URL Versi Pendek</h3>
<div class="card shadow mb-5">
<div class="card-body">
<div>
<form action="" method="post">
<div class="mb-3">
<input
placeholder="Masukkan URL yang panjang ke sini"
type="url"
class="form-control"
/>
</div>
<div class="text-end">
<button type="submit" class="btn btn-primary">
Perpendek
</button>
</div>
</form>
</div>
</div>
</div>
<h6 class="mb-3">URL Pendek Kamu</h6>
<div class="card shadow">
<div class="card-body">
<input type="url" readonly class="form-control" />
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>
Setelah itu, buka file routes/web.php dan ubah route index agar menampilkan halaman yang baru saja kita buat.
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('index');
});
Jalankan server dengan php artisan serve, kemudian buka http://127.0.0.1:8000/ di browser.
Hasilnya kurang lebih seperti ini:
Berikutnya: #4 (Terakhir): Fungsionalitas Aplikasi - Laravel URL Shorterner