PEMROGRAMAN APLIKASI WEB

Modul 11 – Laravel & Vue Js

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS ATMA JAYA YOGYAKARTA
2022
1
Requirement
1. Web Browser (Ex: Mozilla Firefox, Chrome, IE, dll)
2. Teks Editor (Ex: Visual Studio Code, Sublime Text, Intellij Idea, dll)
3. Web Server Apache (Ex: Xampp, Wamp)
4. Composer (https://getcomposer.org/download/)
5. Php Version Above 8.0

Penjelasan

Laravel & Vue Js

Pada modul ini kita semua akan belajar bersama-sama bagaimana cara menggabungkan
project Laravel 9 dengan Vue Js 3. Kita akan menerapkan composition API di dalam Vue Js
dan menggunakan Laravel sebagai backend yang menyediakan RESTful API.

Persiapan Proyek
Pada modul kali ini, kita akan menggunakan project tugas dari modul 6. Sebelum
memulai pengerjaan guided, silakan buka file project kalian dan ikuti beberapa tahapan di
bawah:

1. Membuat folder baru dengan format nama PAW11_X_YYYY (X = Kelas, Y = 4

Digit NPM).
2. Menyalin folder project UGD5_X_YYYY (Tugas Modul 6 Laravel CRUD & Email)
ke dalam folder PAW11_X_YYYY yang baru dibuat.

2
Guided

Silakan buka file project kalian dan ikuti beberapa tahapan di bawah:
1. Membuat Restful API di Laravel 9
a. Membuat API Resources
API Resources merupakan sebuah layer yang mentransformasi data yang di
dapatkan dari Model dan mengubahnya menjadi format JSON dengan lebih
cepat dan baik. Dengan menggunakan fitur ini kita bisa lebih mudah melakukan
custom response, misalnya ingin menampilkan attribute dan collection tertentu
yang ada di dalam model menjadi format JSON.
Sekarang kita lanjutkan untuk melakukan generate resources. Silahkan
jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada
di dalam project.

php artisan make:resource DepartemenResource

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file
resource baru dengan nama DepartemenResource.php yang berada di dalam folder
app/Http/Resources.
b. Melakukan Custom API Resources
Sekarang kita lanjutkan untuk melakukan kustomisasi resource yang sudah kita
buat tadi. Silakan buka file app/Http/Resources/DepartemenResource.php,
kemudian ubah semua kode-nya menjadi seperti berikut ini :

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class DepartemenResource extends JsonResource

{
public $status;
public $message;

/**
* __construct
*

3
 * @param mixed $status
* @param mixed $message
* @param mixed $resource
* @return void
*/
public function __construct($status, $message, $resource)
{
parent::__construct($resource);
$this->status = $status;
$this->message = $message;
}

/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request $request
* @return
array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
*/
public function toArray($request)
{
return [
'success' => $this->status,
'message' => $this->message,
'data' => $this->resource
];
}
}

Dari perubahan kode di atas, pertama kita menambahkan 2 properti baru,

yaitu $status dan $message. Setelah itu kita membuat sebuah method dengan
jenis __construct, dimana fungsi ini akan pertama kali dijalankan ketika class
tersebut di panggil. Dan di dalamnya kita parsing 3 variable :
• $status - merupakan properti $status yang kita buat di atas, yang mana isinya
nanti akan berupa nilai boolean, yaitu true atau false.
• $message - merupakan properti $message yang kita buat di atas, yang mana
isinya nanti akan berupa pesan/message tentang hasil yang dibuat.
• $resource - merupakan data yang akan di transformasi, ini nanti akan berupa
data Model yang dikirim dari controller.

4
c. Memperbarui Departemen Controller
Karena pada project sebelumnya kita sudah membuat controller departemen,
maka sekarang kita tinggal memodifikasi method yang sudah ada. Silahkan buka
file app/Http/Controllers/DepartemenController.php, import resource dan validator
dengan menambahkan syntax :

use App\Http\Resources\DepartemenResource;
use Illuminate\Support\Facades\Validator;

Kemudian ubah beberapa baris kode pada method index dan store menjadi
seperti berikut ini :

/**
* index
*
* @return void
*/
public function index()
{
//get departemen
$departemen = Departemen::latest()->get();

//render view with posts

return new DepartemenResource(true, 'List Data Departemen',
$departemen);
}

/**

* store
*
* @param Request $request
* @return void
*/
public function store(Request $request)
{
//Validasi Formulir
$validator = Validator::make($request->all(), [
'nama_departemen' => 'required',
'nama_manager' => 'required',
'jumlah_pegawai' => 'required'
]);

5
 if ($validator->fails()) {
return response()->json($validator->errors(), 422);
}

//Fungsi Post ke Database

$departemen = Departemen::create([
'nama_departemen' => $request->nama_departemen,
'nama_manager' => $request->nama_manager,
'jumlah_pegawai' => $request->jumlah_pegawai
]);

return new DepartemenResource(true, 'Data Departemen

Berhasil Ditambahkan!', $departemen);
}

d. Membuat Route Api Resource

Setelah berhasil mengubah controller, sekarang kita lanjutkan menambahkan
route-nya. Silahkan buka file routes/api.php, kemudian ubah semua kode-nya
menjadi seperti berikut ini :

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|-------------------------------------------------------------------
-------
| API Routes
|-------------------------------------------------------------------
-------
|
| Here is where you can register API routes for your application.
These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::apiResource('/departemens',
App\Http\Controllers\DepartemenController::class);

6
 Dari perubahan kode di atas, kita menambahkan route baru dengan jenis
apiResource. Dengan menggunakan route tersebut, kita akan otomatis dibuatkan
beberapa method route, seperti index, store, show, update, dan destroy. Untuk
memastikan route telah berhasil ditambahkan, silakan jalankan perintah
berikut ini di dalam terminal/CMD :

php artisan route:list

Jika berhasil, maka akan menampilkan hasil seperti berikut ini :

e. Uji Coba Rest API

Sekarang kita akan lakukan uji coba Rest API kita menggunakan aplikasi
Postman. Silahkan buka aplikasi postman kemudian masukkan URL berikut ini
http://localhost:8000/api/departemens dan untuk method-nya silahkan pilih GET.
Jika sudah, silakan klik send dan jika berhasil maka akan menampilkan response
data seperti berikut:

7
 Sekarang kita lanjutkan untuk melakukan proses uji coba insert data
departemen. Ubah method-nya menjadi POST. Jika sudah, silakan klik send, maka
kita akan mendapatkan response error validasi yang dikirimkan oleh controller
seperti berikut:

2. Membangun Frond End Dengan Vue 3

a. Membuat Project Vue
Setelah berhasil membangun backend, sekarang kita akan membangun frontend
menggunakan Vue 3. Buka folder utama (PAW11_X_YYYY), kemudian
jalankan perintah berikut ini di dalam terminal/CMD :

vue create contoh_project

Ganti contoh_project dengan format vue_x_yyyy.

Perintah di atas, digunakan untuk membuat project vue baru dengan nama
contoh_project, jika muncul pilihan preset, silahkan pilih Default (Vue 3 Preview)
([Vue 3] babel eslint).

8
 Setelah proses instalasi selesai, sekarang kita akan belajar menjalankan project
vue tersebut. Silakan jalankan perintah berikut ini :

npm run serve

Jika berhasil, maka project vue kita akan di jalankan di dalam port 8080, kita
bisa membukanya di http://localhost:8080.

b. Installasi dan Konfigurasi Vue Router, Axios dan Bootstrap

Setelah membuat project, sekarang kita semua akan belajar bagaimana cara
menginstall library pendukung untuk kebutuhan project yang kita bangun beserta
konfigurasinya. Beberapa library tersebut di antaranya :
i. Vue-Router
Vue Router merupakan library yang digunakan untuk membuat navigasi di
dalam aplikasi Vue menjadi SPA atau Single Page Application.
ii. Axios
Axios merupakan library yang bersifat open source dan digunakan untuk
melakukan HTTP request ke dalam server untuk melakukan manipulasi
data. Axios akan kita manfaatkan untuk mengelola endpoint API dari laravel
yang sudah kita buat.
iii. Boostrap
Bootstrap akan kita gunakan sebagai CSS framework untuk membangun
tampilan agar lebih mudah.

9
 Untuk memulai instalasi library-library tersebut, silakan jalankan perintah di
bawah ini di dalam terminal/CMD pada project vue.

npm install vue-router@next

npm install axios

npm install bootstrap popper.js jquery

Sekarang, kita lanjutkan untuk mengintegrasikan Bootstrap di dalam aplikasi

Vue kita, silahkan buka file src/main/js dan ubah kode-nya menjadi seperti berikut
ini :

import { createApp } from 'vue'

import App from './App.vue'

//import Bootstrap, Popper, jQuery

import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min'

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

c. Membuat Views dan Components

Kita lanjutkan membuat views dan components yang akan kita gunakan untuk
menampilkan halaman pada vue. Buatlah hingga struktur file nya seperti ini:

10
Pada components/DashboardLayout.vue isikan dengan kode berikut:

<template>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-
nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3"
href="#">VUE_X_YYYY</a>
<button class="navbar-toggler position-absolute d-md-none
collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#sidebarMenu" aria-
controls="sidebarMenu" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</header>

<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-
block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<router-link :to="{name:
'departemen.index'}" class="nav-link">Departemen</router-link>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Pegawai</a>
</li>
</ul>
</div>
</nav>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-

4">
<!-- View Route -->
<router-view></router-view>
</main>
</div>
</div>
</template>

<script>
export default {

11
}
</script>

<style>
body {
font-size: .875rem;
}

.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}

/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 48px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto;
}

.sidebar .nav-link {
font-weight: 500;
color: #333;
}

.sidebar .nav-link .feather {

margin-right: 4px;
color: #727272;

12
}

.sidebar .nav-link.active {
color: #2470dc;
}

.sidebar .nav-link:hover .feather,

.sidebar .nav-link.active .feather {
color: inherit;
}

.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}

/*
* Navbar
*/
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}

.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}

.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {

13
 border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
</style>

Pada views/departemen/indexPage.vue isikan dengan kode berikut:

<template>
<div class="d-flex justify-content-between flex-wrap flex-md-
nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>

<div class="container mt-5">

<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow">
<div class="card-body">
<router-link :to="{name: 'departemen.create'}"
class="btn btn-md btn-success">TAMBAH DEPARTEMEN</router-link>
<table class="table table-striped table-bordered mt-
4">
<thead class="thead-dark">
<tr>
<th scope="col">NAMA DEPARTEMEN</th>
<th scope="col">NAMA MANAGER</th>
<th scope="col">JUMLAH PEGAWAI</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
<tr v-for="(departemen, id) in departemens"
:key="id">
<td>{{ departemen.nama_departemen }}</td>
<td>{{ departemen.nama_manager }}</td>
<td>{{ departemen.jumlah_pegawai }}</td>
<td class="text-center">
<!-- <router-link :to="{ name:
'departemen.edit', params: { id: departemen.id } }" class="btn
btn-sm btn-primary mr-1">
EDIT</router-link>
<button class="btn btn-sm btn-danger ml-
1">DELETE</button> -->
</td>
</tr>

14
 </tbody>
</table>

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

<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'

export default {
setup() {
//reactive state
let departemens = ref([])

//mounted
onMounted(() => {
//get API from Laravel Backend
axios.get('http://localhost:8000/api/departemens')
.then(response => {
//assign state posts with response data
departemens.value = response.data.data
}).catch(error => {
console.log(error.response.data)
})

})

//return
return {
departemens
}
}
}
</script>

<style>

</style>

15
Pada views/departemen/createPage.vue isikan dengan kode berikut:

<template>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h4>TAMBAH POST</h4>
<hr>

<form @submit.prevent="store">
<div class="form-group mb-3">
<label class="form-label">Nama
Departemen</label>
<input type="text" class="form-
control" v-model="departemen.nama_departemen"
placeholder="Masukkan nama departemen">
<!-- validation -->
<div v-
if="validation.nama_departemen" class="mt-2 alert alert-danger">
{{
validation.nama_departemen[0] }}
</div>
</div>
<div class="form-group mb-3">
<label for="content" class="form-
label">Nama Manager</label>
<input class="form-control" v-
model="departemen.nama_manager" placeholder="Masukkan nama
manager">
<!-- validation -->
<div v-
if="validation.nama_manager" class="mt-2 alert alert-danger">
{{ validation.nama_manager[0]
}}
</div>
</div>
<div class="form-group mb-3">
<label for="content" class="form-
label">Jumlah Pegawai</label>
<input class="form-control"
type="number" v-model="departemen.jumlah_pegawai"
placeholder="Masukkan jumlah pegawai">
<!-- validation -->

16
 <div v-
if="validation.jumlah_pegawai" class="mt-2 alert alert-danger">
{{
validation.jumlah_pegawai[0] }}
</div>
</div>
<button type="submit" class="btn btn-
primary">SIMPAN</button>
</form>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

export default {
setup() {
//state departemen
const departemen = reactive({
nama_departemen: '',
nama_manager: '',
jumlah_pegawai: ''
})

//state validation
const validation = ref([])

//vue router
const router = useRouter()

//method store
function store() {
let nama_departemen = departemen.nama_departemen
let nama_manager = departemen.nama_manager
let jumlah_pegawai = departemen.jumlah_pegawai

axios.post('http://localhost:8000/api/departemens', {
nama_departemen: nama_departemen,
nama_manager: nama_manager,

17
 jumlah_pegawai: jumlah_pegawai
}).then(() => {
//redirect ke post index
router.push({
name: 'departemen.index'
})
}).catch(error => {
//assign state validation with error
validation.value = error.response.data
})

//return
return {
departemen,
validation,
router,
store
}

}
}
</script>

<style>

</style>

d. Membuat Route
Sekarang, kita akan membuat sebuah route di dalam aplikasi Vue. Silahkan
buat file baru dengan nama router.js di dalam folder src kemudian masukkan
kode berikut ini :

//import vue router

import { createRouter, createWebHistory } from 'vue-router'

//define a routes
const routes = [
{
path: '/',

18
 name: 'beranda',
component: () => import('@/components/DashboardLayout.vue'),
children:[
{
path: "/departemen",
name: "departemen.index",
component: () =>
import('@/views/Departemen/indexPage.vue'),
},
{
path: "/departemen/create",
name: "departemen.create",
component: () =>
import('@/views/Departemen/createPage.vue'),
},
],
},
]

//create router
const router = createRouter({
history: createWebHistory(),
routes // config routes
})

export default router;

Pada kode di atas, kita mengimport createRouter dan createWebHistory dari

Vue Router.
createRouter akan digunakan untuk menginisialisasi konfigurasi dari route
yang akan kita buat, sedangkan createWebHistory merupakan mode history dari
Vue Router.
Pada kode diatas, juga terdapat beberapa komponen yang digunakan di
antaranya:
i. Path, merupakan URL yang akan dibuat, di atas contohnya adalah /.
ii. Name, merupakan nama dari route yang kita buat, ini digunakan agar
mempermudah kita dalam memanggil route di dalam component.
iii. Component, merupakan view/component yang akan digunakan saat route
ini di panggil, di atas contohnya kita akan memanggil file di dalam folder
src/views/post/Index/vue.

19
e. Register Vue Router di Main.js
Lanjutkan dengan proses register vue router agar bisa diakses secara global di
dalam project vue. Silahkan buka file src/main.js kemudian, ubah semua kode-
nya menjadi seperti berikut ini :

import { createApp } from 'vue'

import App from './App.vue'

//import router
import router from './router'

//import Bootstrap, Popper, jQuery

import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min'

const app = createApp(App)

//use vue router

app.use(router)

app.mount('#app')

f. Menambah Router View pada App.vue

Silahkan buka file src/App.vue kemudian, ubah semua kode-nya menjadi
seperti berikut ini :

<template>
<router-view></router-view>
</template>

<script>
export default {

}
</script>

20
3. Uji Coba Project
Sekarang kita bisa mencoba menjalankan project-nya, silakan jalankan project laravel
dan vue kalian menggunakan syntax :

php artisan serve

npm run serve

Kemudian buka http://localhost:8080, jika berhasil, maka kita akan mendapatkan

tampilan seperti berikut ini :

Tampilan halaman departemen

Halaman create departemen dan validasi form

21