Pendahuluan
Tiba saatnya untuk meng-handle dari sisi client, dimana pada bagian ini akan digunakan untuk berinteraksi dengan pengguna. Bagi teman-teman yang nyasar ke artikel ini, sebaiknya baca dulu seri Membuat Aplikasi Ekspedisi Lumen 6, karena artikel ini saling terkait dimana Lumen menjadi backend-nya dalam menyediakan API untuk interaksi dengan NuxtJS.
Seri ini kita akan belajar bagaimana cara install NuxtJS dan cara mengintegrasikan Bootstrap template atau template apapun yang kita download di luar sana. Kemudian, kedua cara ini akan kita padu padankan dalam menciptakan sebuah layout yang siap digunakan untuk aplikasi Ekspedisi yang sedang kita bangun.
Baca Juga: Membuat Aplikasi Ekspedisi Lumen 6 #3: Validation & Login
Cara Install NuxtJS
NuxtJS jika dijelaskan secara sederhana adalah sebuah framework yang dibangun dengan konsep SSR (Service Side Rendering) untuk membuat aplikasi secara universal dari Vue.js. Secara konsep, code dan penerapan tidak jauh berbeda dengan Vue.js. Jadi bagi kamu yang sudah terbiasa atau pernah mencoba menggunakan Vue.js, maka saya yakin kamu juga bisa menggunakan NuxtJS.
Sebelum melakukan instalasi NuxtJS, install terlebih dahulu NodeJS agar bisa menggunakan npm command. Caranya adalah dengan mengunjungi official site dari NodeJS, kemudian download sesuai operation system yang kamu punya dan lakukan instalasi seperti biasanya.
Setelah proses instalasi NodeJS selesai, tahap selanjutnya adalah kita harus meng-install npx sebagai command yang akan digunakan untuk meng-install NuxtJS. Adapun command install npx adalah
npm i npx
Jika kamu menggunakan versi npm yang terbaru, maka secara default npx sudah ter-install.
Tahapan pra-instalasi nya sudah selesai, saatnya untuk membuat project baru dengan command
npx create-nuxt-app dw-logistik-nuxt
Adapun pertanyaan yang akan ditemui selama proses intalasi, silahkan diisi dengan menyesuaikan informasi yang kamu inginkan. Khususnya pada bagian choose the package manager > pilih NPM, Adapun UI framework-nya bisa pilih None saja, custom framework juga pilih none, adapaun NuxtJS modules bisa memilih Axios.
Integrasi Bootstrap Template NuxtJS
Penerapan template secara manual akan kita kerjakan dengan menggunakan template yang sudah sangat familiar, yakni SB Admin 2. Ada dua bagian yang akan kita kerjakan, pertama adalah halaman utama atau dashboard dan yang kedua adalah login page. Kedua bagian ini masih bersifat statis dan belum memiliki fungsi untuk login, karena materi ini akan dibahas pada seri selanjutnya.
Tahap pertama, download seluruh file template di atas, kemudian buka project NuxtJS kita dan buka file layouts/default.vue, lalu modifikasi menjadi
<template>
<div id="wrapper">
<app-sidebar></app-sidebar>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<app-header></app-header>
<nuxt/>
</div>
</div>
</div>
</template>
<script>
import Sidebar from '@/components/layouts/Sidebar.vue'
import Header from '@/components/layouts/Header.vue'
export default {
components: {
'app-sidebar': Sidebar,
'app-header': Header
}
}
</script>
Penjelasan: Default.vue ini akan menjadi global template dari NuxtJS, dimana tampilan yang sifatnya sama saja disemua halaman, dalam hal ini adalah sidebar dan header akan kita tempatkan di dalam file ini. Tapi codingan-nya mana? Agar lebih maintenable, kita pisahkan ke dalam sebuah component tersendiri, sehingga memudahkan kita sebagai Programmer untuk melakukan proses maintenance dikemudian hari.
Selanjutnya buat file baru bernama Sidebar.vue dan tempatkan di dalam folder components/layouts, adapun codingan-nya adalah sebagai berikut
<template>
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
</a>
<hr class="sidebar-divider my-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<hr class="sidebar-divider">
<div class="sidebar-heading">
Interface
</div>
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Components</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
</div>
</div>
</li>
</ul>
</template>
<script>
export default {
}
</script>
Note: Tidak ada yang perlu dijelaskan dari code di atas karena untuk saat ini hanya sebuah tag HTML saja
Lalu file berikutnya adalah Header.vue di dalam folder yang sama dan masukkan code berikut
<template>
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown no-arrow d-sm-none">
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
<form class="form-inline mr-auto w-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<span class="badge badge-danger badge-counter">7</span>
</a>
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">
Message Center
</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt="">
<div class="status-indicator bg-success"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div>
<div class="small text-gray-500">Emily Fowler ยท 58m</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
</div>
</li>
<div class="topbar-divider d-none d-sm-block"></div>
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span>
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
</template>
<script>
export default {
}
</script>
Dari template yang sudah kita download, copy folder css dan vendor ke dalam folder assets dari project kita. Kemudian copy lagi folder vendor ke dalam folder static. Adapun assets dan statis secara default sudah ada di dalam root project kita.
Untuk mengintegrasi CSS dan JS tersebut, buka file nuxt.config.js dan modifikasi menjadi
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
//TAMBAHKAN CODE INI UNTUK MENAMBAHKAN EKSTERNAL JAVASCRIPT
script: [
{ src: "/vendor/jquery/jquery.min.js" },
{ src: "/vendor/bootstrap/js/bootstrap.bundle.min.js" },
{ src: "/vendor/jquery-easing/jquery.easing.min.js" },
{ src: "/js/sb-admin-2.min.js" }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
//DAN LOAD FILE CSS DI DALAM ATTRIBUTE INI
css: [
'@/assets/vendor/fontawesome-free/css/all.min.css',
'@/assets/css/sb-admin-2.min.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
],
/*
** Nuxt.js modules
*/
modules: [
],
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
}
}
Untuk menjalan aplikasi di atas, kita harus melakukan proses compiling sama seperti Vue.js. Dari command line, jalankan command npm run dev.
Routing di NuxtJS
Cara kerja routing mengalami sedikit perbedaan dari Vue.js, dimana pada Vue.js kita harus mendefinisikan setiap routing ke dalam file router.js. Sedangkan NuxtJS, kita hanya perlu membuat folder baru di dalam folder pages, maka secara otomatis folder baru tersebut akan menjadi URL.
Adapun contoh penerapannya akan kita kerjakan dengan membuat halaman login. Buat folder login di dalam folder pages, kemudian buat file index.vue di dalam folder login. Adapun code untuk meng-handle tampilan login adalah sebagai berikut
<template>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
<form class="user">
<div class="form-group">
<input type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input" id="customCheck">
<label class="custom-control-label" for="customCheck">Remember Me</label>
</div>
</div>
<a href="#" class="btn btn-primary btn-user btn-block">
Login
</a>
<hr>
<!-- <a href="index.html" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> Login with Google
</a>
<a href="index.html" class="btn btn-facebook btn-user btn-block">
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
</a> -->
</form>
<hr>
<div class="text-center">
<a class="small" href="#">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="#">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
Seluruhan perubahan di atas akan meng-hasilkan routing dengan url /login. Sehingga jika kamu ingin mengaksesnya, maka pada browser, masukkan url: http://localhost:3000/login.
Baca Juga: Membuat Aplikasi Ekspedisi Lumen 6 #2: Authentication & Manage Users
Kesimpulan
Seri belajar membuat aplikasi ekspedisi menggunakan NuxtJS, dimana kita telah belajar beberapa hal, yakni bagaimana cara install NuxtJS, bagaimana cara integrasi bootstrap template pada NuxtJS, dan yang terakhir adalah bagaimana membuat routing baru dimana dalam hal ini kita membuat halaman login.
Adapun dokumentasi code dari artikel ini bisa kamu lihat di Github.
Comments