~ We are changing the world with technology. ~

Matt Mullenweg

Membuat Aplikasi Ekspedisi NuxtJS #1: Install & Templating

Membuat Aplikasi Ekspedisi NuxtJS #1: Install & Templating

4697 Dilihat

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.

aplikasi ekspedisi nuxtjs - cara install nuxt

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.

aplikasi ekspedisi nuxt js - integration bootstrap template

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.

aplikasi ekspedisi nuxtjs - routing

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.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Membuat Aplikasi Ekspedisi NuxtJS #4: Manage Categories NuxtJS

Membuat Aplikasi Ekspedisi NuxtJS #4: Ma...

Mengelola data kategori akan menjadi bahasan utama kita dalam materi Membuat Aplikasi Ekspedisi NuxtJS seri ke-4. Fitur yang akan dikerjakan tidak jauh berbeda dengan materi sebelumnya yang membahas t...

Membuat Aplikasi Ekspedisi NuxtJS #3: CRUD Data Users Bagian 2 NuxtJS

Membuat Aplikasi Ekspedisi NuxtJS #3: CR...

Memanipulasi data user dengan mengimplementasikan teknik CRUD antara NuxtJS sebagai frontend dan Lumen sebagai backend. Seri membuat aplikasi ekspedisi episode NuxtJS kali ini akan membahas bagaimana...

Membuat Aplikasi Ekspedisi NuxtJS #3: CRUD Data Users Bagian 1 NuxtJS

Membuat Aplikasi Ekspedisi NuxtJS #3: CR...

Mengelola data users akan menjadi topik perbincangan kita kali ini dalam seri belajar membuat aplikasi ekspedisi dengna episode NuxtJS. Dimana pada seri kali ini kita akan belajar bagaimana membuat CR...

Komentar