Akademi Manajemen Informatika

#3 Membangun Tampilan Halaman – Laravel URL Shorterner

Sekarang kita akan Membangun tampilan halaman Demi aplikasi URL Shorterner yang kita buat menggunakan laravel.

Jangan lupa lupa Demi mengaktifkan sever mysql terlebih dahulu, kemudian buka kembali project kita sebelumnya.

Kita akan Membangun tampilan halaman sederhana menggunakan Sokongan bootstrap ya. Buat file bernama index.blade.php baru di dalam folder resources/views/. Setelah itu masukkan html berikut ini:


html lang="en">
  head>
    meta charset="utf-8" />
    meta name="viewport" content="width=device-width, initial-scale=1" />
    title>Laravel URL Shorternertitle>
    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 Shorternera>
      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 Pendekh3>
          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 Andah6>
          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:

Laravel URL Shorterner

Berikutnya: #4 (Terakhir): Fungsionalitas Aplikasi – Laravel URL Shorterner

READ  #32: Nil - Belajar Golang Dari Dasar