Cara Bikin Halaman Login yang Keren dengan Bootstrap 5 dan VueJS 3

Halo, bro! Baru ngapain? Pasti lagi pada sibuk ngerjain tugas kuliah atau kerjaan online, ya? Atau mungkin lagi nyari inspirasi buat bikin website yang keren dan up to date? Kalau iya, kamu datang ke tempat yang tepat. Karena di artikel ini, kita akan belajar cara bikin halaman login yang keren dengan bootstrap 5 dan VueJS 3. Yuk, simak langkah-langkahnya!

Bootstrap 5 dan VueJS 3, Apa Sih Itu?

Sebelum kita mulai, kita harus tahu dulu apa sih bootstrap 5 dan VueJS 3 itu. Bootstrap 5 adalah framework CSS yang populer dan mudah digunakan untuk membuat website yang responsif dan indah. Bootstrap 5 tidak lagi membutuhkan jQuery, jadi kita bisa langsung pakai bootstrap 5 di proyek VueJS 3 kita tanpa perlu library tambahan.

VueJS 3 adalah framework JavaScript yang ringan dan powerful untuk membuat user interface yang interaktif dan dinamis. VueJS 3 adalah versi terbaru dari VueJS yang memiliki banyak fitur baru dan peningkatan performa. VueJS 3 juga kompatibel dengan bootstrap 5, jadi kita bisa menggabungkan keduanya untuk membuat website yang keren dan modern.

Langkah 1: Install Bootstrap 5 dan VueJS 3

Langkah pertama yang harus kita lakukan adalah install bootstrap 5 dan VueJS 3 di proyek kita. Caranya gampang banget, tinggal ikutin instruksi berikut ini:

• Buka terminal atau command prompt di folder proyek kita
• Ketik npm install bootstrap untuk install bootstrap 5
• Ketik npm install @popperjs/core untuk install popper.js yang dibutuhkan oleh bootstrap 5
• Ketik npm install vue@next untuk install VueJS 3

Setelah selesai install, kita harus import bootstrap 5 dan VueJS 3 di file utama proyek kita, yaitu src/main.js. Caranya, tambahkan kode berikut di file tersebut:

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import { createApp } from "vue"
import App from "./App.vue"

createApp(App).mount("#app")

Kode di atas akan mengimport file CSS dan JS dari bootstrap 5, mengimport fungsi createApp dari VueJS 3, dan mengimport file App.vue yang merupakan komponen utama dari aplikasi kita. Lalu, kode terakhir akan membuat instance dari aplikasi VueJS 3 dan me-mount-nya ke elemen HTML dengan id app.

Langkah 2: Buat Komponen Halaman Login

Langkah kedua yang harus kita lakukan adalah membuat komponen halaman login yang akan menampilkan form untuk input email dan password, serta tombol untuk login. Caranya, kita bisa membuat file baru dengan nama Login.vue di folder src/components. Lalu, isi file tersebut dengan kode berikut:

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card mt-5">
          <div class="card-body">
            <h1 class="card-title text-center">Login</h1>
            <form @submit.prevent="login">
              <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" v-model="email" required>
              </div>
              <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" v-model="password" required>
              </div>
              <div class="d-grid">
                <button type="submit" class="btn btn-primary">Login</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      password: ""
    }
  },
  methods: {
    login() {
      // logic untuk login
      alert(`Email: ${this.email}, Password: ${this.password}`)
    }
  }
}
</script>

Kode di atas akan membuat template HTML yang menggunakan class-class dari bootstrap 5 untuk membuat tampilan yang responsif dan indah. Kita juga menggunakan atribut v-model untuk mengikat nilai input dengan data komponen, dan atribut @submit.prevent untuk mencegah form melakukan submit secara default dan menjalankan fungsi login yang kita definisikan di script. Fungsi login ini nantinya bisa kita isi dengan logika untuk login, misalnya dengan mengirim data ke server atau menggunakan firebase. Untuk sementara, kita hanya menampilkan data yang diinput dengan alert.

Langkah 3: Tampilkan Komponen Halaman Login di Aplikasi

Langkah ketiga yang harus kita lakukan adalah menampilkan komponen halaman login yang sudah kita buat di langkah sebelumnya di aplikasi kita. Caranya, kita bisa mengimport komponen Login.vue di file App.vue dan menempatkannya di dalam template. Berikut adalah kode untuk file App.vue:

<template>
  <div id="app">
    <Login />
  </div>
</template>

<script>
import Login from "./components/Login.vue"

export default {
  components: {
    Login
  }
}
</script>

Kode di atas akan mengimport komponen Login dari file Login.vue dan mendaftarkannya di properti components dari komponen App. Lalu, kita bisa menggunakan tag <Login /> di dalam template untuk menampilkan komponen tersebut.

Langkah 4: Jalankan dan Cek Hasilnya

Langkah terakhir yang harus kita lakukan adalah menjalankan dan mengecek hasil dari aplikasi yang sudah kita buat. Caranya, kita bisa ketik npm run serve di terminal atau command prompt untuk menjalankan aplikasi kita di mode development. Lalu, kita bisa buka browser dan masuk ke alamat http://localhost:8080 untuk melihat hasilnya.