KONFIGURASI BACK END

Create Nuxt Project

Installation
Pastikan kalian sebelum mengikuti sesi ini untuk meng-install Node.js karena
nantinya akan membutuhkan beberapa packages manager dengan bantuan node.js
tersebut. Oke langsung saja masuk pada dirketori yang diinginkan kemudian buka
melalui Git/CMD/terminal dan ketikkan perintah seperti dibawah ini:
npx create-nuxt-app@latest nuxt-nimkalian

Arti perintah di atas adalah, kita akan membuat aplikasi NUXT dengan perintah
standart npx yaitu create-nuxt-app adapun nuxt-nimkalian adalah nama
folder project aplikasi kita. Jika perintah tersebut dijalankan, maka akan muncul
beberapa pertanyaan, silahkan kalian sesuaikan seperti pada tabel berikut ini:
Question Answer

Project name:
Tekan ENTER

Programming language: Pilih JavaScript dan ENTER

Package manager: Pilih Npm dan ENTER

UI framework: Pilih Bootstrap Vue dan ENTER

Nuxt.js modules: Pilih Axios dengan tekan SPACE, kemudian ENTER

Linting tools: Tekan ENTER

Testing framework: Pilih None dan ENTER

 Question Answer

Rendering mode: Pilih Universal (SSR / SSG) dan ENTER

Deployment target: Pilih Server (Node.js hosting) dan ENTER

Development tools: Pilih jsconfig.json dengan tekan SPACE dan ENTER

What is your GitHub username? Tekan ENTER

Version control system: Pilih Git dan ENTER

Setelah semua pertanyaan dibawag terjawab, itu akan menginstal semua

dependensi yang dibutuhkan.

Pilih Javascript karena kita akan menggunakan Bahasa pemprograman nya adalah
Javascript
Pilih Packet managernya yang di gunakan adalah Npm

Kita pilih UI Frameworknya adalah Bootstrap Vue, untuk di lain kesempatan kalian
bisa belajar paket UI yang lain
Template Engine yang digunakan adalah HTML

Modul yang digunakan oleh Nuxt.js menggunakan Axios.

Axios merupakan library opensource yang digunakan untuk request data melalui http. Axios
terkenal dengan keunggulannya yaitu ringan, promised-based, mendukung async dan awai
untuk kode yang asinkronus. Pada Axios kita juga bisa intercept dan membatalkan request.
Axios sangat mudah digunakan.
Linting Tools dengan enter saja

Testing framework pilih none

Rendering Mode pilih universal

Untuk server kita pilih node.js hosting

Untuk memilih ini kita harus terlebih dahulu mengintall node.js atau kalo di hosting
cari hosting yang sudah menyediakan node.js
Tidak semua hosting menyediakan node.js

Developmen tool kita pilih jsconfig.json

Masukkan username github yang kalian miliki
Pilih version control system dengan GIT

Setelah itu maka installasi akan mulai, tunggu sampai selesai

Langkah selanjutnya adalah masuk pada direktory project yang baru saja dibuat
dengan mengetik perintah :
cd nuxt-nimkalian
npm run dev
Jika terjadi error seperti itu berarti terlalu tinggi node.js nya… uninstall dan download
node.js versi 16

Jalankan lagi

Dan jika berhasil akan tampil seperti ini

Kita bisa melakukan testing didalam direktori tersebut untuk menjalankan nuxt yang
sudah kita install sebelumnya dengan cara mengetikkan perintah npm run dev. Maka
secara default, aplikasi kita akan running/berjalan di http://localhost:3000/.

Daftar Module
Setelah proses installasi berhasil, langkah selanjutnya adalah melakukan konfigurasi
kedalam nuxt dengan menambahkan beberapa module untuk kebutuhan aplikasi
kita, berikut daftar module yang akan kita tambahkan:

NO. Module URL KETERANGAN

Module untuk
mempermudah
1. dalam pembuatan
Nuxt Auth https://auth.nuxtjs.org/
sebuah Auth atau
otentikasi di dalam
aplikasi Nuxt.js.

Module untuk
membuat multi atau
Nuxt https://github.com/spektrummedia/nuxt-
2. single select
MultiSelect vue-multiselect
dropdown di Vue Js
dengan mudah.
 NO. Module URL KETERANGAN

Module untuk
Sweet
3. https://github.com/avil13/vue-sweetalert membuat alert lebih
Alert2
mudah dan baik.

Module untuk
menampilkan text
CKEDITOR https://github.com/blowstack/ckeditor- editor, yang akan kita
4.
Nuxt nuxt gunakan untuk
menulis sebuah
konten artikel.

Set Module AUTH

Seperti namanya, module ini digunakan sebagai proses autentikasi yang meliputi
proses login, log out dan seterusnya. langsung saja, untuk penerapan module ini
dengan cara melalui command line dibawah ini ke dalam command
prompt/GIT/Terminal dan tentunya berada pada direktori project nuxt kita.
npm install @nuxtjs/[email protected]

Jika proses pemasangan module sudah selesai, silahkan buka file yang
bernama nuxt.config.js kemudian rubah meenjadi seperti berikut ini:
modules: [
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
//https://auth.nuxtjs.org/
'@nuxtjs/auth-next',
],
Kemudian tambahkan baris kode dibawah ini tepat dibawah konfigurasi di atas:
auth: {
strategies: {
local: {
token: {
property: 'token',
required: true,
type: 'Bearer'
},
user: {
property: 'user',
// autoFetch: true
},
endpoints: {
login: {
url: '/api/admin/login',
method: 'post'
},
logout: {
url: '/api/admin/logout',
method: 'post'
},
user: {
url: '/api/admin/user',
method: 'get'
}
}
}
},
redirect: {
login: '/',
logout: '/',
callback: '/',
home: '/admin/dashboard'
}
},

Dari penambahan jenis strategi otentikasi di atas, kita fokus pada bagian endpoints,
dimana di dalamnya terdapat beberapa konfigurasi, yaitu :
ENDPOINT /
NAMA METHOD KETERANGAN
URL

Endpoint yang digunakan untuk proses

login /api/admin/login POST
login.

Endpoint yang digunakan untuk proses

logout /api/admin/logout POST
logout.

Endpoint yang digunakan untuk

user /api/admin/user GET mendapatkan data user setelah behasil
login.
Setalah itu, perhatikan bagian redirects, kurang lebih penjelasannya seperti berikut
ini :
NAME URL KETERANGAN

user akan di redirect ke URL ini, jika mengakses

login /login
halaman yang membutuhkan otentikasi.

user akan di redirect ke URL ini, jika berhasil melakukan

logout /login
proses logout.

callback /login

user akan di redirect ke URL ini, jika berhasil melakukan

home /admin/dashboard
proses otentikasi.

Set Module Nuxt Vue MultiSelect

Module ini berfungsi untuk manajemen categories seperti menambahkan catagories
didalam masing-masing setiap postingan artikel kita nantinya. SIlahkan masukkan
perintah beriikut ini melalui CMD/Terminal?git dan tentunya berada pada direktori
project kita:
npm install [email protected]
Setelah itu, kita akan tambahkan module Nuxt Vue MultiSelect di dalam
array modules seperti pada langkah sebelumnya, sehingga menjadi seperti dibawah
ini:
modules: [
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
//https://auth.nuxtjs.org/
'@nuxtjs/auth-next',
//https://github.com/spektrummedia/nuxt-vue-multiselect
'nuxt-multiselect',
],

Set Module Sweet Alert2

Sekarang kita lanjutkan untuk menginstall module Sweet Alert2, module ini akan kita
gunakan untuk mempercantik tampilan alert di dalam website. Silahkan jalankan
perintah berikut ini di dalam terminal/CMD :
npm install [email protected]

Silahkan tunggu beberapa saat sampai proses installasinya selesai, kemudian

tambahkan sweet alert ke-dalam module array tepat dibawah module nuxt-
multiselect, maka akan menjadi seperti dibawah ini:
modules: [
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
//https://auth.nuxtjs.org/
'@nuxtjs/auth-next',
//https://github.com/spektrummedia/nuxt-vue-multiselect
'nuxt-multiselect',
//https://github.com/avil13/vue-sweetalert2
 'vue-sweetalert2/nuxt',
],

Set Module CKEditor Nuxt

Terakhir kita akan melakukan proses installasi module CKEDITOR Nuxt, module ini
nantinya akan kita gunakan untuk menulis sebuah content post di dalam back-
end aplikasi kita. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan
tentunya berada pada direktori project:
npm install @blowstack/[email protected]

Silahkan tunggu proses installasinya sampai selesai. Dan disini kita tidak perlu
melakukan konfigurasi di dalam file nuxt.config.js, karena nantinya kita akan
langsung panggil module tersebut di dalam component yang membutuhkannya.
 Admin-Lte
Integrasi CSS &Js
Pada langkah kali ini, kita akan melakukan customisasi template dashboard. Disini
kami menggunakan template Admin-lte, AdminLTE adalah salah satu template
yang sering digunakan oleh web developer sebagai template backend pada
proyek yang sering dikerjakan. Jadi Admin LTE ini adalah sebuah dashboard
Administrator yang dibuat menggunakan framework bootstrap yang merupakan
framework css yang paling banyak digunakan.

langsung saja kita lakukan integrasi Admin-lte ke dalam project nuxt kita. Silahkan
kalian unduh asset yang akan di gunakan pada dashboard kita melalui tautan berikut
ini:

https://github.com/saintnetarf/admin-lte

Silahkan download file tersebut, maka kita akan mendapati dua folder dengan nama
css dan js:

1. CSS

Silahkan kalian buat folder baru bernama assets didalam root folder project kita/
sejajar dengan file nuxt.config.js, dan letakkan folder css kedalam
folder assets yang baru saja kita buat. Maka akan menjadi seperti dibawah ini:

2. JS

Langsung saja kita tempatkan folder js yang kita download sebelumnya ke dalam
folder static. Maka akan menjadi seperti dibawah ini:
Konfigurasi CSS&Js
Langkah terakhir adalah melakukan konfigurasi folder css dan js tersebut kedalam
file nuxt.config.js.

Silahkan buka file nuxt.config.js, kemudian cari kode berikut ini :

head: {
title: 'nuxt- nimkalian',
htmlAttrs: {
lang: 'en'
},
meta: [{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{
hid: 'description',
name: 'description',
content: ''
}
],
link: [{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}]
},

Kemudian ubah kode-nya menjadi seperti berikut ini :

head: {
title: 'nuxt-cms',
htmlAttrs: {
lang: 'en'
},
meta: [{
charset: 'utf-8'
},
{
 name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{
hid: 'description',
name: 'description',
content: ''
}
],
link: [{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
},
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&displ
ay=swap'
}
],
script: [{
src: '/js/jquery/jquery.min.js'
},
{
src: '/js/bootstrap/js/bootstrap.bundle.min.js'
},
{
src: '/js/adminlte.min.js'
},
]
},

Dari perubahan kode di atas, kita menambahkan array script, yang mana di dalanya
kita memanggil 3 file JavaScript yang berada di dalam folder static/js, ketiga file
tersebut adalah :

 /js/jquery/jquery.min.js
 /js/bootstrap/js/bootstrap.bundle.min.js
 /js/adminlte.min.js

Sekarang untuk integrasi asset JavaScript sudah selesai, dan kita akan lanjutkan
untuk integrasi asset CSS-nya. Masih di file yang sama yaitu nuxt.config.js,
silahkan cari kode berikut ini :
css: [
],

Kemudian silahkan ubah menjadi seperti berikut ini :

css: [
'@/assets/css/fontawesome-free/css/all.min.css',
'@/assets/css/adminlte.min.css',
],

Di atas kita menambahkan 2 file CSS dari folder assets/css, kedua file tersebut
adalah :
  /css/fontawesome-free/css/all.min.css
 /css/adminlte.min.css

Sampai disini maka kita sudah berhasil melakukan integrasi file-file assets dari
template dashboard AdminLTE3 di dalam project Nuxt.js. Sampai disini, maka
keseluruhan isi dari file nuxt.config.js seperti ini lengkapnya:
export default {

// Target Deployment
target: 'server',

// SSR
ssr: true,

// Global page headers: https://go.nuxtjs.dev/config-head

head: {
title: 'nuxt-nimkalian’,
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href:
'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&displ
ay=swap' }
],
script: [
{ src: '/js/jquery/jquery.min.js' },
{ src: '/js/bootstrap/js/bootstrap.bundle.min.js' },
{ src: '/js/adminlte.min.js' },
]
},

// Global CSS: https://go.nuxtjs.dev/config-css

css: [
'@/assets/css/fontawesome-free/css/all.min.css',
'@/assets/css/adminlte.min.css',
],

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins

plugins: [
],

// Auto import components: https://go.nuxtjs.dev/config-components

components: true,

// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules

buildModules: [
],

// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/bootstrap
 'bootstrap-vue/nuxt',
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
//https://auth.nuxtjs.org/
'@nuxtjs/auth-next',
//https://github.com/spektrummedia/nuxt-vue-multiselect
'nuxt-multiselect',
//https://github.com/avil13/vue-sweetalert2
'vue-sweetalert2/nuxt',
],

auth: {
strategies: {
local: {
token: {
property: 'token',
required: true,
type: 'Bearer'
},
user: {
property: 'user',
// autoFetch: true
},
endpoints: {
login: {
url: '/api/admin/login',
method: 'post'
},
logout: {
url: '/api/admin/logout',
method: 'post'
},
user: {
url: '/api/admin/user',
method: 'get'
}
}
}
},
redirect: {
login: '/',
logout: '/',
callback: '/',
home: '/admin/dashboard'
}
},

// Axios module configuration: https://go.nuxtjs.dev/config-axios

axios: {
baseURL: 'http://localhost:8000'
},

// Build Configuration: https://go.nuxtjs.dev/config-build

build: {
// babel: {
// presets({isServer}) {
// const targets = isServer ? { node: 'current' } : { ie: 11 }
// return [
// [ require.resolve("@babel/preset-env"), { targets } ]
 // ]
// },
// plugins: [
// "@babel/syntax-dynamic-import",
// "@babel/transform-runtime",
// "@babel/transform-async-to-generator"
// ]
// },
}
}

Sampai saat ini, kita sudah berhasil menambahkan & konfigurasi beberapa module
ke dalam project nuxt kita.

Note:

Konfigurasi Page Login

Layout & View Login
1. Layout Auth

Pertama kita akan membuat layout terlebih dahulu, layout ini digunakan untuk
induk template dari halaman view login nantinya. Silahkan buat folder baru dengan
nama layouts pada root project, kemudian di dalam folder tersebut silahkan
buat file baru dengan nama auth.vue dan masukkan kode berikut ini di dalamnya.
<template>
<div class="hold-transition login-page">
<div class="login-box">
<!-- /.login-logo -->
<Nuxt />
<!-- /.card -->
</div>
</div>
</template>

<script>
export default {

//middleware auth
middleware: 'auth',

}
</script>

<style>
body {
font-family: 'Quicksand', sans-serif;
}

.login-page {
 background-color: #ccdcec !important;
}

.card-info.card-outline {
border-top: 3px solid #186399;
}

.btn-info {
color: #fff;
background-color: #186399;
border-color: #186399;
box-shadow: none;
}

.btn-info:hover {
color: #fff;
background-color: #12466B;
border-color: #12466B;
box-shadow: none;
}
</style>

Di dalam template, kita menambahkan kode <Nuxt />, dimana kode tersebut akan
digunakan untuk merender sebuah view yang akan menggunakan layout ini.

kemudian pada bagian JavaScript, kita menambahkan sebuah middleware yang

bernama auth, middleware tersebut otomatis tersedia setelah kita
menginstall module nuxt auth. Dan fungsinya akan digunakan untuk memverifikasi
apakah user yang mengakses halaman ini sudah melakukan proses autentikasi atau
belum.
//middleware auth
middleware: 'auth',

2. View & Function Login

Langkah berikutnya adalah membuat sebuah view atau component yang akan kita
gunakan untuk proses autentikasi. Silahkan buat file baru dengan
nama index.vue dan lettakkan file tersebut didalam folder pages, kemudian edit
menggunakan code editor file tersebut lalu tempelkan kode berikut ini kedalam file
tersebut
<template>
<div class="card card-outline card-info">
<div class="card-header text-center">
<nuxt-link to="/" class="h1 font-weight-bold text-dark">SIDESA</nuxt-link>
<div><i>SISTEM INFORMASI DESA</i></div>
</div>
<div class="card-body">
<div v-if="validation.message" class="mt-2">
<b-alert show variant="danger">{{ validation.message }}</b-alert>
</div>
<form @submit.prevent="login">
<div class="form-group">
<label class="font-weight-bold text-uppercase">Email address</label>
<input type="email" v-model="user.email" :class="{ 'is-invalid':
validation.email }" class="form-control"
placeholder="Masukkan Alamat Email">
 </div>
<div v-if="validation.email" class="mt-2">
<b-alert show variant="danger">{{ validation.email[0] }}</b-alert>
</div>

<div class="form-group">
<label class="font-weight-bold text-uppercase">Password</label>
<input type="password" v-model="user.password" :class="{ 'is-invalid':
validation.password }"
class="form-control" placeholder="Masukkan Password">
</div>
<div v-if="validation.password" class="mt-2">
<b-alert show variant="danger">{{ validation.password[0] }}</b-alert>
</div>

<button type="submit" class="btn btn-info btn-block">LOGIN</button>

</form>
</div>
<!-- /.card-body -->
</div>
</template>

<script>
export default {

//layout
layout: 'auth',

//meta
head() {
return {
title: 'Login | Prodi TI - Sistem Informasi Desa',
}
},

data() {
return {
//state user
user: {
email: '',
password: '',
},
//validation
validation: []
}
},

methods: {
async login() {

await this.$auth.loginWith('local', {
data: {
email: this.user.email,
password: this.user.password
}
})

.then(() => {
 //redirect
this.$router.push({
name: 'admin-dashboard'
})

})

.catch(error => {
//assign validation
this.validation = error.response.data
})
}

}
</script>

<style>
</style>

penjelasan code diatas, kita menambahkan function dan terdapat 2 state,

yaitu user dan validation.
//state user
user: {
email: '',
password: '',
},
//validation
validation: []

Untuk state user kita jadikan sebuah array, yang di dalamnya memiliki 2 key lagi,
yaitu email dan password. State ini akan kita gunakan untuk menampung isi data yang
dikirm melalui input form. Sedangkan untuk state validation akan kita gunakan untuk
menampung sebuah response error validasi yang di dapatkan dari Rest API.

kemudian kita membuat sebuah method yang bernama login dan di dalamnya kita
melakukan sebuah proses auentikasi menggunakan module nuxt auth.
await this.$auth.loginWith('local', {
data: {
email: this.user.email,
password: this.user.password
}
})

Di atas kita melakukan proses autentikasi dengan memanggil this.$auth dan

menggunakan strategi local, yang di dalamnya terdapat
data email dan password yang di dapatkan dari state user.

Jika dari proses aurtentikasi di atas berhasil, maka kita akan melakukan redirect ke
dalam sebuah route yang bernama admin-dashboard.
.then(() => {

//redirect
this.$router.push({
 name: 'admin-dashboard'
})

})

Tapi jika proses autentikasi di atas gagal, maka kita akan melakukan assign
response dari Rest API ke dalam state validation.
//assign validation
this.validation = error.response.data

Di dalam template, untuk form action kita arahkan ke dalam method yang
bernama login, dimana method tersebut yang sudah kita buat di atas.
<form @submit.prevent="login">

//...

</form>

Dan untuk input form, kita menggunakan directive v-model untuk

menerima inputan dari browser, yang mana isinya kita arahkan ke state user dengan
masing-masing key.

Input Email
<input type="email" v-model="user.email" :class="{ 'is-invalid': validation.email
}" class="form-control" placeholder="Masukkan Alamat Email">

Input Password
<input type="password" v-model="user.password" :class="{ 'is-invalid':
validation.password }" class="form-control" placeholder="Masukkan Password">

Untuk menampilkan error validasi, kita bisa dengan seperti berikut ini :
<div v-if="validation.email" class="mt-2">
<b-alert show variant="danger">{{ validation.email[0] }}</b-alert>
</div>

<div v-if="validation.password" class="mt-2">

<b-alert show variant="danger">{{ validation.password[0] }}</b-alert>
</div>

Di atas kita membuat sebuah kondisi, jika di

dalam state validation.email atau validation.password terdapat value, maka kita
akan menampilkan isi value tersebut.
{{ validation.email[0] }}

{{ validation.password[0] }}
Slicing Layout Dashboard
Slicing header Component
Tujuan slicing adalah agar mempermudah dalam pemanggilan component yang
akan digunakan secara berulang-ulang didalam beberapa page, dalam hal ini kita
akan membagi dua component yaitu, component header dan component sidebar.
Oke kita mulai dengan slicing header component. Silahkan buat folder baru dengan
nama admin di dalam folder components dan di dalam folder admin tersebut silahkan
buat file baru dengan nama header.vue, kemudian masukkan kode berikut ke-dalam
file header.vue:
<template>
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i
class="fas fa-bars"></i></a>
</li>
</ul>

<!-- Right navbar links -->

<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown pb-2">
<a id="dropdownSubMenu1" href="#" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false"
class="nav-link dropdown-toggle">
<img
:src="`https://ui-
avatars.com/api/?name=${user.name}&amp;background=4e73df&amp;color=ffffff&amp;size
=100`"
class="img-circle" style="opacity: .8" width="35" height="35">
{{ user.name }}
</a>
<ul aria-labelledby="dropdownSubMenu1" class="dropdown-menu" style="left:
0px; right: inherit;">
<li><a @click="logout" class="dropdown-item">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</template>

<script>
export default {

computed: {
user() {
return this.$auth.user
}
},

methods: {

async logout() {
 //logout auth
await this.$auth.logout()

//redirect route login

this.$router.push({
name: 'index'
})

}
}
</script>

<style>
</style>

yang perlu difahami dalam listing code diatas adalah, kita membuat sebuah
properti computed, yang mana di dalamnya bertujuan untuk mendapatkan
data user yang sedang login.
computed: {
user() {
return this.$auth.user
}
},

dan juga kita menambahkan method user(), yang di dalamnya

terdapat function return ke dalam this.$auth.user, yang mana isinya adalah
data user yang sedang login. Dalam penerapannya didalam template kita bisa
menampilkan dengan memasukkan syntax dibawah ini
{{ user.name }}

Kemudian kita juga menambahkan 1 method baru dengan nama logout,

dimana method tersebut akan di jalankan ketika link di template di klik.
<a @click="logout" class="dropdown-item">Logout</a>

Dan di dalam method logout ini kita melakukan destroy data user yang
sedang login menggunakan kode berikut ini :
//logout auth
await this.$auth.logout()

Jika proses logout berhasil, maka kita kembalikan ke dalam route login atau ke
halaman page login.
//redirect route login
this.$router.push({
name: 'login'
})

Slicing SidebarComponent
Sidebar adalah kolom atau space yang berada di area samping konten website,
space ini akan kita gunakan untuk menampilkan daftar menu yang terdapat didalam
aplikasi back-end kita nantinya seperti menu ,Dashboard, Data Post, Data
Comment, Dan lain sebagainya. Silahkan kalian buat sebuah file dengan
nama sidebar.vue, file ini terletak didalam folder components/admin. Masukkan baris
kode berikut ke dalam file sidebar.vue yang baru saja dibuat.
<template>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview"
role="menu" data-accordion="false">

<li class="nav-item">
<nuxt-link :to="{ name: 'admin-dashboard' }" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</nuxt-link>
</li>

<li class="nav-header">
<h6>CONTENT</h6>
</li>

<li class="nav-item">
<nuxt-link :to="{ name: 'admin-category' }" class="nav-link">
<i class="nav-icon fas fa-tags"></i>
<p>
Categories
</p>
</nuxt-link>
</li>

<li class="nav-item">
<nuxt-link :to="{ name: 'admin-post' }" class="nav-link">
<i class="nav-icon fas fa-book-open"></i>
<p>
Posts
</p>
</nuxt-link>
</li>

<li class="nav-item">
<nuxt-link :to="{ name: 'admin-saran' }" class="nav-link">
<i class="nav-icon fas fa-bacon"></i>
<p>
Saran
</p>
</nuxt-link>
</li>

<li class="nav-header">
<h6>SETTING</h6>
</li>

<li class="nav-item">
<nuxt-link :to="{ name: 'admin-user' }" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
 Users
</p>
</nuxt-link>
</li>

<li class="nav-item">
<nuxt-link :to="{ name: 'admin-profile' }" class="nav-link">
<i class="nav-icon fas fa-book-open"></i>
<p>
Set Profile Group
</p>
</nuxt-link>
</li>

<li class="nav-item">
<nuxt-link :to="{ name: 'admin-informasi' }" class="nav-link">
<i class="nav-icon fas fa-book-open"></i>
<p>
Set Informasi Group
</p>
</nuxt-link>
</li>

<li class="nav-item">
<nuxt-link :to="{ name: 'admin-statistik' }" class="nav-link">
<i class="nav-icon fas fa-book-open"></i>
<p>
Set Statistik Group
</p>
</nuxt-link>
</li>

</ul>
</nav>
<!-- /.sidebar-menu -->
</template>

<script>
export default {

}
</script>

<style scoped>
a.nuxt-link-active {
background-color: rgba(255, 255, 255, .1);
}
</style>

Yang perlu diperhatikan adalah pada baris <nuxt-link :to="{ name: 'admin-
informasi' }" class="nav-link"> kita akan melakukan routing, dimana ketika button
dengan nama Set Informasi Group kita klik, maka kita akan dialihkan ke halaman
pengaturan Informasi, dalam hal ini akan kita bahas pada sesi berikutnya.
Set Admin Page
Setelah berhasil membuat component Header dan juga Sidebar, sekarang kita
lanjutkan membuat layout untuk halaman admin. Pada langkah ini, kita akan
memanggil kedua component tersebut dengan menggunakan syntax berikut :
<script>
import Header from '@/components/admin/header.vue'
import Sidebar from '@/components/admin/sidebar.vue'

export default {

//middleware auth
middleware: 'auth',

components: {
Header,
Sidebar
}

}
</script>

Silahkan kalian buat file baru dengan nama admin.vue di dalam folder layouts,
setelah itu masukkan kode berikut ini:
<template>

<div class="hold-transition sidebar-mini">

<div class="wrapper">
<!-- Header -->
<Header />
<!-- /.Hader -->

<aside class="main-sidebar sidebar-dark-primary elevation-4">

<a to="/admin/dashboard" class="brand-link text-center">
<span class="brand-text font-weight-bold">ADMINISTRATOR</span>
</a>

<!-- Sidebar -->

<div class="sidebar">
<Sidebar />
</div>
<!-- /.sidebar -->
</aside>

<!-- content -->

<Nuxt />
<!-- / .content -->

<footer class="main-footer">
<div class="float-right d-none d-sm-block">
<b>Version</b> 0.0.1
</div>
<strong>Copyright &copy; 2022 - Prodi TI Poliban.</strong> All rights
reserved.
</footer>
 <aside class="control-sidebar control-sidebar-dark">
</aside>
</div>
</div>
</template>

<script>
import Header from '@/components/admin/header.vue'
import Sidebar from '@/components/admin/sidebar.vue'

export default {

//middleware auth
middleware: 'auth',

components: {
Header,
Sidebar
}

}
</script>

<style>
.wrapper,
.content-wrapper {
background-color: #ccdcec !important;
}
</style>

Sampai pada langkah kali ini, kita sudah berhasil membuat beberapa slicing
page yang akan di gunakan secara berkelanjutan didalam
beberapa page berikutnya.

Note:

Dashboard
Layout Main Dashboard
Main dashboard disini berfungsi sebagai halaman utama ketika user sudah berhasil
login, maka akan dialihkan kedalam halaman ini, halaman ini akan menampilkan
data statistik seperti jumlah user, jumlah post, jumlah komentar, dan juga jumlah
saran yang masuk. Pertama, silahkan buat folder baru dengan nama admin di
dalam folder pages dan di dalam folder admin silahkan buat folder baru lagi dengan
nama dashboard, setelah itu silahkan buat file di dalamnya dengan nama index.vue,
silahkan buka file tersebut, kemudian masukkan kode berikut ini :
<template>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
 <section class="content-header">
<div class="container-fluid">
</div>
</section>

<section class="content">
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-info"><i class="fa fa-users"></i></span>
<div class="info-box-content">
<span class="info-box-text">USERS</span>
<span>
<hr>
</span>
<span class="info-box-number">{{ users }}</span>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-success"><i class="fa fa-
folder"></i></span>
<div class="info-box-content">
<span class="info-box-text">CATEGORIES</span>
<span>
<hr>
</span>
<span class="info-box-number">{{ categories }}</span>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-primary"><i class="fa fa-book-
open"></i></span>

<div class="info-box-content">
<span class="info-box-text">POSTS</span>
<span>
<hr>
</span>
<span class="info-box-number">{{ posts }}</span>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-danger"><i class="fa fa-
comments"></i></span>
<div class="info-box-content">
<span class="info-box-text">COMMENTS</span>
<span>
<hr>
</span>
<span class="info-box-number">{{ comments }}</span>
</div>
</div>
</div>
 <div class="col-md-3 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-danger"><i class="fa fa-
comment"></i></span>
<div class="info-box-content">
<span class="info-box-text">SARAN MASUK</span>
<span>
<hr>
</span>
<span class="info-box-number">{{ sarans }}</span>
</div>
</div>
</div>
</div>

</section>
</div>
</template>

<script>
export default {
//layout
layout: 'admin',

//meta
head() {
return {
title: 'Dashboard - Android Corners - Sistem Informasi Desa',
}
},

async asyncData({ $axios }) {

//fetching dashboard
const dashboard = await $axios.$get('/api/admin/dashboard')

return {
'users': dashboard.data.users,
'posts': dashboard.data.posts,
'categories': dashboard.data.categories,
'comments': dashboard.data.comments,
'sarans': dashboard.data.sarans,
}
},

}
</script>

<style>
</style>

pada listing kode diatas, kita menggunakan beberapa components pendukung yang
sudah disediakan oleh bootstrap yaitu font awesome. Library ini berfungsi untuk
mempermudah dalam membuat sebuah icon hanya cukup menambahkan masing-
masing code icons yang hendak digunakan, seperti contoh kita akan menggunakan
icons user, maka cukup memasukkan syntax fa fa-users ke dalam class tersebut.
Kemudian berbicara tentang tag script pada kode baris diatas adalah, pertama kita
melakukan export halaman admin yang sudah kita buat sebelumnya, yang
mana page ini sudah include pada dua components sebelumnya
yaitu component header dan juga component sidebar, ini lah salah satu keuntungan
dalam melakukan slicing component yang bersifat re-usable .

Kemudian kita menggunakan hook asyncData untuk melakukan fetching data

menggunakan methode SSR atau Server Side Rendering, jadi halaman
atau template tidak akan di tampilkan, sebelum proses di dalam hook ini selesai.

didalam hook asyncData kita melakukan fetching data ke-dalam sebuah Restful API
yang sudah kita buat melalui laravel sebelumnya
dengan endpoint /api/admin/dashboard menggunakan Axios dengan method GET.
//fetching dashboard
const dashboard = await $axios.$get('/api/admin/dashboard')

Kemudian kita return dengan menjadikan beberapa key, yang mana isinya di
dapatkan dari hasil response Rest API dashboard kita sebelumnya yang didalam
Rest APi tersebut terdapat function count, kemudian kita re-presentasikan data itu ke
dalam page dashboard.
return {
'users': dashboard.data.users,
'posts': dashboard.data.posts,
'categories': dashboard.data.categories,
'comments': dashboard.data.comments,
'sarans': dashboard.data.sarans,
}

Setelah itu, kita cukup memanggil nama key yang ada di dalam return tersebut ke
dalam layout dashboard template.
<span class="info-box-number">{{ users }}</span>
<span class="info-box-number">{{ categories }}</span>
<span class="info-box-number">{{ posts }}</span>
<span class="info-box-number">{{ comments }}</span>
<span class="info-box-number">{{ sarans }}</span>

Testing Login & Dashboard

Setelah kita sudah melakukan beberapa konfigurasi dan juga sliciing layout mulait
dari layout login dan juga dashboard, dalam hal ini, kita akan melakukan uji coba
terhadap page yang sudah kita konfigurasi tersebut.

1. jalankan server, disini kami menggunakan Xampp, pastikan mysql dalam keadaan
on, karena dalam prosesnya kita akan melakukan koneksi dengan database
2. Masuk pada direktori project laravel, kemudian ketik perintah php artisan
serve untuk menjalankan laravel kita untuk kebutuhan RESTFUL API agar bisa di
konsumsi oleh nuxt js.
3. masuk pada direktori nuxt project kemudian buka melalui terminal/cmd/Git masukkan
perintah npm run start untuk menjalankan aplikasi kita, secara default kita bisa
melihat project kita melalui http//localhost:3000/.
Jika muncul error seperti ini

Lakukan perintah npm run build

Kemudian jalan kan perintah npm run start

Refresh lagi browsernya dan login kembali

Jalankan query sql di bawah ini

-- --------------------------------------------------------

-- Host: 127.0.0.1

-- Server version: 10.4.25-MariaDB - mariadb.org binary distribution

-- Server OS: Win64

-- HeidiSQL Version: 12.1.0.6537

-- --------------------------------------------------------

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET NAMES utf8 */;

/*!50503 SET NAMES utf8mb4 */;

/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;

/*!40103 SET TIME_ZONE='+00:00' */;

/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;

/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;

/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

-- Dumping structure for table laravel_nimkalian_db.categories

CREATE TABLE IF NOT EXISTS `categories` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`image` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`slug` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`),

UNIQUE KEY `categories_slug_unique` (`slug`)

) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.categories: ~7 rows (approximately)

INSERT INTO `categories` (`id`, `image`, `name`, `slug`, `created_at`, `updated_at`) VALUES

(1, 'nkT1essIJzWdBpzYbpYS8JvmMl0UXLqzMoA6QK0P.png', 'Layanan', 'layanan', '2022-07-27

10:16:58', '2022-08-12 04:32:21'),

(2, 'W8UzMqYgIAwhiOKOxRidguQEb4vlnWxCaJeglaoC.png', 'Infrastruktur desa', 'infrastruktur-desa',

'2022-07-27 10:21:34', '2022-08-15 10:09:38'),

(3, '8Ny4J8pDWFI5XG8wsbkx9Dz99RIVvPxVwsHCWTmQ.jpg', 'Kesehatan', 'kesehatan', '2022-07-27

10:22:13', '2022-07-27 10:22:13'),

(4, 'zNAxEw5TtI40NntWhizVciwTEzqJBhS384qJ9kFT.png', 'Keagamaan', 'keagamaan', '2022-07-27

10:23:46', '2022-08-15 08:56:47'),

(6, 'BAnd6ZOIgK4YH5ohQ1cdi6nMmZ4mPxvVQ2bidLj1.png', 'Keamanan', 'keamanan', '2022-08-15

08:58:58', '2022-08-15 08:58:58'),

(7, 'gg3c3ZKh2G83nOT9J0O16cjblKI9C7TyxokVQ8AB.png', 'Ekonomi', 'ekonomi', '2022-08-15

08:59:33', '2022-08-15 08:59:33'),

(8, 'vyNCRUzsbqInX5r970onDp5ilXhHwTQUYZxIX3Ad.png', 'Seni Budaya & Olahragaa', 'seni-budaya-

olahragaa', '2022-08-15 09:00:15', '2022-08-18 00:01:48');

-- Dumping structure for table laravel_nimkalian_db.comments

CREATE TABLE IF NOT EXISTS `comments` (

 `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`post_id` int(10) unsigned NOT NULL,

`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`comment` text COLLATE utf8mb4_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=37 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.comments: ~5 rows (approximately)

INSERT INTO `comments` (`id`, `post_id`, `name`, `email`, `comment`, `created_at`, `updated_at`) VALUES

(31, 4, 'sunan', '[email protected]', 'Mantap, aplikasi', '2022-07-30 00:24:43', '2022-07-30 00:24:43'),

(32, 6, 'Prodi TI', '[email protected]', 'Mantap', '2022-07-30 03:28:11', '2022-07-30 03:28:11'),

(34, 7, 'andi', '[email protected]', 'akmdkmadkm', '2022-07-30 04:57:31', '2022-07-30 04:57:31'),

(35, 7, 'Android', '[email protected]', 'mantap guys', '2022-07-30 05:04:20', '2022-07-30 05:04:20'),

(36, 9, 'ade', '[email protected]', 'bagus', '2022-12-25 06:34:00', '2022-12-25 06:34:00');

-- Dumping structure for table laravel_nimkalian_db.failed_jobs

CREATE TABLE IF NOT EXISTS `failed_jobs` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`uuid` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`connection` text COLLATE utf8mb4_unicode_ci NOT NULL,

`queue` text COLLATE utf8mb4_unicode_ci NOT NULL,

`payload` longtext COLLATE utf8mb4_unicode_ci NOT NULL,

`exception` longtext COLLATE utf8mb4_unicode_ci NOT NULL,

`failed_at` timestamp NOT NULL DEFAULT current_timestamp(),

 PRIMARY KEY (`id`),

UNIQUE KEY `failed_jobs_uuid_unique` (`uuid`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.failed_jobs: ~0 rows (approximately)

-- Dumping structure for table laravel_nimkalian_db.informasis

CREATE TABLE IF NOT EXISTS `informasis` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`image` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`content` text COLLATE utf8mb4_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.informasis: ~3 rows (approximately)

INSERT INTO `informasis` (`id`, `image`, `title`, `content`, `created_at`, `updated_at`) VALUES

(1, 'pU6K5YkUhssh1ypjFSBDacHJdg8PHe5rR00y7Fe7.png', 'Informasi Kesehatan', 'Informasi kesehatan

desa masa khidmah 2022-2027 memberikan luang mudah bagi setiap warga untuk mendapatkan layanan
kesehatan seperti Posyandu dll.', '2022-08-12 02:33:20', '2022-08-18 04:36:57'),

(2, 'P58mGYVd1GgxsdDgRhhwnByxCprOyLcU3ncvMV9W.png', 'Keamanan Desa', 'Informasi keamanan

desa masa khidmah 2022-2027 akan merencanakan beberapa program keamanan desa, pengaktifan kembali
jaga pos dengan tujuan untuk meningkatkan keamanan desa. hal ini tidak akan berjalan tanpa adanya
kerjasama dengan warga. Maka dari itu kami sangat membutuhkan kerja sama dari ketua Rukun Tetangga,
Agar proses ini berjalan dengan baik', '2022-08-12 02:39:00', '2022-08-12 02:41:43'),

(3, 'LhnuG4ic2oQHEV9SaFgtvTuo868MDbFILDb5aNZa.png', 'Seni dan Olahraga', 'Informasi olahraga

desa masa khidmah 2022-2027. Dengan melengkapi dan memfasilitasi beberapa sarana, maka kami ingin
menciptakan desa Sehat. Salah satunya adalah dengan membentuk acara Senam pagi yang di pelopori olehg
ibu ibu pkk', '2022-08-12 02:39:55', '2022-08-12 02:39:55');
-- Dumping structure for table laravel_nimkalian_db.migrations

CREATE TABLE IF NOT EXISTS `migrations` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT,

`migration` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`batch` int(11) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.migrations: ~12 rows (approximately)

INSERT INTO `migrations` (`id`, `migration`, `batch`) VALUES

(1, '2014_10_12_000000_create_users_table', 1),

(2, '2014_10_12_100000_create_password_resets_table', 1),

(3, '2019_08_19_000000_create_failed_jobs_table', 1),

(4, '2019_12_14_000001_create_personal_access_tokens_table', 1),

(5, '2022_07_26_071659_create_categories_table', 1),

(6, '2022_07_26_073349_create_posts_table', 1),

(7, '2022_07_26_163333_create_comments_table', 1),

(8, '2022_08_10_125322_create_profiles_table', 2),

(9, '2022_08_10_131854_create_profils_table', 3),

(10, '2022_08_12_085025_create_statistiks_table', 4),

(11, '2022_08_12_085215_create_informasis_table', 4),

(12, '2022_08_16_023332_create_sarans_table', 5);

-- Dumping structure for table laravel_nimkalian_db.password_resets

CREATE TABLE IF NOT EXISTS `password_resets` (

`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

 `token` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

KEY `password_resets_email_index` (`email`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.password_resets: ~0 rows (approximately)

-- Dumping structure for table laravel_nimkalian_db.personal_access_tokens

CREATE TABLE IF NOT EXISTS `personal_access_tokens` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`tokenable_type` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`tokenable_id` bigint(20) unsigned NOT NULL,

`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`token` varchar(64) COLLATE utf8mb4_unicode_ci NOT NULL,

`abilities` text COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`last_used_at` timestamp NULL DEFAULT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`),

UNIQUE KEY `personal_access_tokens_token_unique` (`token`),

KEY `personal_access_tokens_tokenable_type_tokenable_id_index` (`tokenable_type`,`tokenable_id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.personal_access_tokens: ~0 rows (approximately)

-- Dumping structure for table laravel_nimkalian_db.posts

CREATE TABLE IF NOT EXISTS `posts` (

 `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`slug` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`category_id` int(10) unsigned NOT NULL,

`user_id` int(10) unsigned NOT NULL,

`content` text COLLATE utf8mb4_unicode_ci NOT NULL,

`image` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`description` text COLLATE utf8mb4_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`),

UNIQUE KEY `posts_slug_unique` (`slug`)

) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.posts: ~10 rows (approximately)

INSERT INTO `posts` (`id`, `title`, `slug`, `category_id`, `user_id`, `content`, `image`, `description`, `created_at`,
`updated_at`) VALUES

(4, 'Aplikasi Sederhana', 'aplikasi-sederhana', 8, 1, '<p>Mobile Programming adalah</p>',

'w9TW73lj2XRykYBvNR7nF0jBlGfdTwLXSeCtjZ4S.png', 'Mobile Programming adalah', '2022-07-27 13:04:10',
'2022-11-18 01:49:37'),

(6, 'Kesehatan Adalah Segalanya', 'kesehatan-adalah-segalanya', 3, 1, 'Badan sehat jiwa sehat itu yang
kami inginkan', 'yhJmToPQhWpASP2YvdUq70bcwro7aGwogF3w8d21.jpg', 'Cara sehat dengan sederhana',
'2022-07-29 00:02:14', '2022-07-29 00:02:14'),

(7, 'Cara Buat Roti Pisang Cokelat Keju, Enak dan Empuk', 'cara-buat-roti-pisang-cokelat-keju-enak-
dan-empuk', 8, 1, '<p>Cara Buat Roti Pisang Cokelat Keju, Enak dan Empuk</p>',
'bxSCwR3EPckf2h14nN4nXhOp2KRyuCHl2WYsd5ce.jpg', 'Cara Buat Roti Pisang Cokelat Keju, Enak dan Empuk',
'2022-07-29 00:21:35', '2022-11-18 01:49:11'),

(8, 'Pembangunan irigasi Desa', 'pembangunan-irigasi-desa', 2, 1, 'Salah satu updaya kami dalam
menangani banjir yang terjadi di beberapa titik desa adalah akan melakukan proses pemetaan saluran irigasi
desa,\nhal ini bertujuan agar keluar masuk air di dalam pemukiman warga bisa terkendali dan hal ini akan
meminimalisir terjadinya banjir', 'mKTXlMFWQeP2idFnKSc59e2AX57Xpx22HuZXIe2B.jpg', 'Pemetaan Lokasi
Saluran Air', '2022-08-15 10:16:07', '2022-08-15 10:16:07'),

(9, 'Program Ekonomi Desa', 'program-ekonomi-desa', 7, 1, 'Beberapa sumber pangan yang terdapat
di desa Sidomulyo adalah sebagai berikut\n<br>\n1) Bertani di Ladang Sawah\n<br>\n2) Berkebun\n<br>\n3)
Bercocok Tanam\n<br>\n4) Berjualan\n<br>\n5) Peternakan\n<br>\n6) Pertanian\n<br>\n7)
Perikanan\n<br>\n\nKami akan berusaha memberikan beberapa penyuluhan terhadap Masyarakat desa
sidomulyo melalui \nbeberapa pertemuan(Seminar Desa) untuk meningkatkan SDM desa Sidomulyo',
'bnrjElYsOcqjF9fSQ33B52OWAOocexiFv6FJBVoF.jpg', 'Dongkrak Ekonomi Desa agar Maju', '2022-08-15
10:21:30', '2022-08-15 10:21:30'),

(10, 'Tahlil Kubro', 'tahlil-kubro', 4, 1, 'Bp. Imam Siswanto ikut serta dalam acara Tahlil Kubro yang
didalamnya terdapat beberapa rangkaian acara, diantara nya adalah acara santunan anak yatim\nacara ini
termasuk acara rutin desa, dimana dilakukan satu tahun satu kali tepatnya pada bulan Suro (Muharram)',
'fgS7CM85rPtXQ5dG1Giscn4CzjrdINmfLwCylkWc.png', 'Acara rutinan pada bulan Suro', '2022-08-15 10:28:19',
'2022-08-15 10:28:19'),

(11, 'Jaga Desa', 'jaga-desa', 6, 1, '<p>Kami membuka ruang lebar untuk setiap warga ketika hendak
melakukan penjagaan terhadap desa, dengan tujuan agar kemanan desa tetap terjaga</p>',
'fgxEKPJTxHlYIUm0XPtUN5DBLOuRd8JrGWWLgZSs.jpg', 'Keamanan Desa, Harus di Utamakan!', '2022-08-15
10:31:57', '2022-11-18 01:49:53'),

(13, 'Posyandu Desa', 'posyandu-desa', 3, 1, 'Posyandu adalah jenis pelayanan kepada anak berupa
penimbangan untuk memantau pertumbuhan anak. Manfaat Posyandu ialah memberikan layanan kesehatan
ibu dan anak, KB, imunisasi, gizi, dan penanggulangan diare.\n<br>\n1. Penimbangan Balita: Penimbangan
balita dilakukan tiap bulan di posyandu. Penimbangan secara rutin di posyandu untuk pemantauan
pertumbuhan dan mendeteksi sedini mungkin penyimpangan pertumbuhan balita. Dari penimbangan yang
kemudian dicatat di KMS, dari data tersebut dapat diketahui status pertumbuhan balita, apabila
penyelenggaraan posyandu baik maka upaya untuk pemenuhan dasar pertumbuhan anak akan baik
pula.\n<br>\nKMS adalah kartu untuk mencatat dan memantau pekembangan balita dengan melihat garis
pertumbuhan berat badan anak dari bulan ke bulan. Pada KMS dapat diketahui status pertumbuhan
anaknya.\n<br>\n2. Imunisasi \nDi posyandu balita akan mendapatkan layanan imunisasi. \nMacam imunisasi
yang diberikan di posyandu adalah \n- BCG untuk mencegah penyakit TBC.\n- DPT untuk mencegah penyakit
difteri, pertusis (batuk rejan), tetanus.\n- Polio untuk mencegah penyakit kelumpuhan.\n- Hepatitis B untuk
mencegah penyakit hepatitis B (penyakit kuning).\n<br>\n3. Peningkatan Gizi \nDengan adanya posyandu
yang sasaran utamanya bayi dan balita, sangat tepat untuk meningkatkan gizi balita. Peningkatan gizi balita di
posyandu yang dilakukan oleh kader berupa memberikan penyuluhan tentang ASI, status gizi balita, MPASI,
Imunisasi, Vitamin A, stimulasi tumbuh kembang anak, diare pada balita.\n<br>\n4. Penanggulangan diare
\nPenyediaan oralit di posyandu. Melakukan rujukan pada penderita diare yang menunjukan tanda bahaya di
Puskesmas. Memberikan penyuluhan penggulangan diare oleh kader posyandu.',
'lG28jJvTKwUTkTfpPpaGrSndpuJzw1pAYYU2g639.jpg', 'Tingkatkan Kesehatan Warga', '2022-08-15 10:36:38',
'2022-08-15 10:36:38'),

(14, 'Kotak Saran', 'kotak-saran', 1, 1, 'Dengan adanya fitur ini, kami sangat memberikan luang bagi
setiap warga untuk mengusulkan bebrapa gagasan dengan tujuan agar desa bisa berbenah dan menuju desa
maju dan mandiri', 'qjYqtlHAhokhzGVnLvvZj1An22T1TqGikyjBqUHg.jpg', 'Warga bebas mengirim Kritik Dan
Saran', '2022-08-15 10:39:25', '2022-08-15 10:39:25'),

(15, 'Upacara Adat Kalimantan Selatan', 'upacara-adat-kalimantan-selatan', 8, 1, '<p>Kalimantan

Selatan adalah salah satu provinsi yang dikenal masih memegang teguh tradisi dan adat istiadat daerahnya. <a
href="https://kumparan.com/topic/upacara">Upacara </a>adat Kalimantan Selatan masih tetap dilakukan di
sejumlah daerah dengan tujuan dan cara pelaksanaan yang berbeda-beda. Upacara adat dilakukan di waktu
tertentu, sehingga pelaksanaannya tidak dilakukan secara sembarangan. Pada dasarnya, upacara adat yang
diadakan oleh masyarakat Kalimantan Selatan sangat banyak.</p><p>Berikut adalah beberapa jenis <a
href="https://kumparan.com/topic/upacara-adat">upacara adat</a> di Kalimantan Selatan yang masih
dilestarikan:</p><p>&nbsp;</p><h3>1. Upacara Badudus</h3><p>Mengutip buku <i>Utang Banjar dan
Kebudayaannya (2007), </i>badudus merupakan upacara yang dilakukan saat masa peralihan dari remaja
menuju dewasa. Upacara ini adalah ritual yang dilakukan untuk membersihkan jiwa serta
raga.</p><p>&nbsp;</p><p>Upacara ini dilakukan oleh mereka yang dinobatkan sebagai orang dewasa dan
akan menjadi calon pengantin.</p>', 'YICvlJGIYF8OE5uLjDGd6QEIs3i97IcWghZRH7MB.jpg', 'beberapa jenis
upacara adat di Kalimantan Selatan', '2022-08-15 10:42:01', '2022-12-25 02:39:43');
-- Dumping structure for table laravel_nimkalian_db.profils

CREATE TABLE IF NOT EXISTS `profils` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`image` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`content` text COLLATE utf8mb4_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.profils: ~3 rows (approximately)

INSERT INTO `profils` (`id`, `image`, `title`, `content`, `created_at`, `updated_at`) VALUES

(1, '1TwWKXvGdaYRwdKIv52nHsnP3FV90mHLM3NbTs0K.png', 'Profil Desa', 'Masyarakat bisa melihat

informasi mengenai Profil Desa Sungai Tabuk', '2022-08-18 00:25:29', '2022-12-25 03:42:13'),

(3, 'w2YFSpNukaQ78BOb2rDxTstwm1aMI5vR5kT7OALl.png', 'Data Agama', 'Data informasi tentang

agama meliputi tentang presentase data Agama di Desa Sungai Tabuk. Mencakup juga tentang informasi acara
keagamaan seperti pengajian, tahlil dan juga beberapa acara kirab agama yang di selenggarakan oleh
pemerintah Desa', '2022-08-10 19:28:03', '2022-12-25 03:42:30'),

(4, 'gjIUWEmaZkjUGi4pyEZgXgmVtm28kAH9ORVsNDpP.png', 'Layanan Desa', 'Membantu masyarakat

dalam mengakses berbagai layanan umum yang disediakan oleh pemerintah desa.\r\nSurat Keterangan
Usaha\r\nSurat Keterangan Tempat Usaha\r\nSurat Keterangan Pengantar Barang\r\nSurat Keterangan
Pengantar Ternak\r\nSurat Keterangan Tidak Mampu(Sekolah)\r\nSurat Keterangan Tidak
Mampu(Umum)\r\nSurat Pengantar SKCK\r\nSurat Keterangan Ahli Waris\r\nSurat Keterangan
Bepergian\r\nSurat Keterangan Tidak Berada di Tempat\r\nSurat Keterangan Beda Identitas\r\nSurat
Keterangan Lainnya', '2022-08-10 19:28:12', '2022-12-07 23:58:57');

-- Dumping structure for table laravel_nimkalian_db.sarans

CREATE TABLE IF NOT EXISTS `sarans` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

 `content` text COLLATE utf8mb4_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.sarans: ~5 rows (approximately)

INSERT INTO `sarans` (`id`, `name`, `content`, `created_at`, `updated_at`) VALUES

(7, 'deni', 'Tolong dipercepat', '2022-11-18 00:31:41', '2022-11-18 00:31:41'),

(8, 'Andi', 'Testing saran', '2022-11-18 07:34:32', '2022-11-18 07:34:32'),

(9, 'Prodi TI', 'test kirim saran', '2022-11-18 07:34:43', '2022-11-18 07:34:43'),

(10, '[email protected]', 'Sukses bro', '2022-12-05 20:52:46', '2022-12-05 20:52:46'),

(13, 'Arifin Noor Asyikin', 'Semangat belajar coodingnya', '2022-12-25 06:36:47', '2022-12-25
06:36:47');

-- Dumping structure for table laravel_nimkalian_db.statistiks

CREATE TABLE IF NOT EXISTS `statistiks` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`image` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`content` text COLLATE utf8mb4_unicode_ci NOT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.statistiks: ~3 rows (approximately)

INSERT INTO `statistiks` (`id`, `image`, `title`, `content`, `created_at`, `updated_at`) VALUES

(1, 'DCAZefhNqggXHVMzWoF351mcmZlFxuihadnpepJZ.png', 'Statistik Desa', 'Kami juga memberikan

fitur transparansi statistik desa, dengan ini Masyarakat bisa mengetahui prospek perkembangan desa seperti
peningkatan sumber daya manusia Dst.', '2022-08-12 02:07:06', '2022-08-18 04:41:37'),

(3, 'BWRGcUXeuLsH6ftezMKQ8NoFM21j8PSipslmUONx.png', 'Infrastruktur Desa', 'Infrastruktur

perdesaan\ndidefinisikan sebagai infrastruktur yang\nbersifat fisik dan memberikan akses\nterhadap
pelayanan dasar maupun\npelayanan sosial serta ekonomi bagi\nmasyarakat pedesaan', '2022-08-12
02:23:44', '2022-08-15 09:06:36'),

(4, 'GEmazKoNMjOM04A5mB7ppK0LUcPWnuFTjcVKNwhM.png', 'Program Desa', 'Program Inovasi

Desa (PID) dapat diartikan sebagai salah satu upaya pemerintahan untuk meningkatkan kesejahteraan
masyarakat desa melalui peningkatan kapasitas desa dalam mengembangkan rencana dan pelaksanaan
pembangunan desa yang terfokus dalam 3 sasaran program diantaranya pengembangan wirausaha,
peningkatan Sumber Daya Manusia (SDM), serta pengadaan infrastruktur desa', '2022-08-12 02:25:30', '2022-
08-15 09:10:24');

-- Dumping structure for table laravel_nimkalian_db.users

CREATE TABLE IF NOT EXISTS `users` (

`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,

`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`email_verified_at` timestamp NULL DEFAULT NULL,

`password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,

`remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`created_at` timestamp NULL DEFAULT NULL,

`updated_at` timestamp NULL DEFAULT NULL,

PRIMARY KEY (`id`),

UNIQUE KEY `users_email_unique` (`email`)

) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Dumping data for table laravel_nimkalian_db.users: ~2 rows (approximately)

INSERT INTO `users` (`id`, `name`, `email`, `email_verified_at`, `password`, `remember_token`, `created_at`,
`updated_at`) VALUES
 (1, 'Teknik Informatika', '[email protected]', NULL,
'$2y$10$7aF3qBmU7CL1AXoypW.VMe90e0tzq2BDUGWpu.yXeBFgW1Oqnz4fS', NULL, NULL, NULL),

(4, 'arifin', '[email protected]', NULL,

'$2y$10$HueBiKRBDQW.1VfUt6aCiebeI2HZgbA8hcN7c53otNADxgJJj/ZsW', NULL, '2022-12-25 03:16:17', '2022-
12-25 03:16:17');

/*!40103 SET TIME_ZONE=IFNULL(@OLD_TIME_ZONE, 'system') */;

/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;

/*!40014 SET FOREIGN_KEY_CHECKS=IFNULL(@OLD_FOREIGN_KEY_CHECKS, 1) */;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40111 SET SQL_NOTES=IFNULL(@OLD_SQL_NOTES, 1) */;

Maka jika dijalankan akan menampilkan seperti berikut