MODUL PRAKTIKUM

Pemrosesan Data Terdistribusi

Cache

Dosen :
Alam Rahmatulloh

Disusun Oleh :

Riki Abdul Holik

TASIKMALAYA
 2022

1. Instalasi Composer dan Laravel

Pertama, lakukan instalasi Composer. Composer dapat diunduh dalam link berikut ini
https://getcomposer.org/download/. Jika sudah diunduh, jalankan file setup-nya lalu ikuti
sesuai dengan petunjuk instalasi, diantaranya adalah :

a. Tentukan Lokasi File Instalasi

b. Pilih Penggunaan Proxy
c. Review Lokasi Instalasi
d. Review Perubahan Instalasi
e. Instalasi Selesai

Setelah instalasi dinyatakan selesai, kita dapat mengecek Composer dengan

menggunakan perintah berikut ini di dalam Command Prompt.
composer --version

Mambuat project Laravel dengan menggunakan Composer.

Memuka buka project tersebut dengan code editor.

1. Integrasi MongoDB dengan project Laravel

Pertama, lakukan pemasangan extension php_mongodb.dll ke dalam PHP. File
tersebut bisa diunduh di https://pecl.php.net/package/mongodb serta langkah pemasangannya
terdapat pada link berikut
https://www.php.net/manual/en/mongodb.installation.windows.php. Cara untuk
memasangnya cukup dengan mengunduh php_mongodb.dll versi 1.11, kemudian
pindahkan file php_mongodb.dll ke dalam folder ext yang berada di dalam folder php. Folder
php berada di dalam folder xampp. Biasanya, defaultnya berada di C:\xampp\php\ext.

Setelah itu, edit file php.ini yang terletak pada folder PHP yang berada di dalam folder
XAMPP atau biasanya berada di C:\xampp\php.
 Untuk mengecek apakah ekstensi php_mongodb.dll sudah terpasang atau belum,
buatlah sebuah folder di dalam XAMPP, lalu buatlah file php yang berisikan kode berikut.
<?php
phpinfo();
?>

Setelah itu, nyalakan Apache dalam XAMPP.

Selanjutnya, kita kunjungi halaman php yang telah kita buat. Gambar di bawah ini
merupakan tampilan halaman web yang memuat informasi PHP, salah satunya memuat
informasi mengenai ekstensi yang dipakai. Jika kita telusuri halaman web-nya dan
menemukan mongodb, maka extension php_mongodb.dll telah berhasil terpasang.

Setelah extension php_mongodb.dll terpasang ke dalam php.ini, MongoDB ke dalam

folder direktori project Laravel dengan menggunakan command berikut.
composer require jenssegers/mongodb:^3.8

Setelah itu, kita atur file .env dengan pengaturan sebagai berikut.
DB_CONNECTION=mongodb
DB_HOST=127.0.0.1
DB_PORT=27017
DB_DATABASE=<nama database yang diinginkan>
DB_USERNAME=
DB_PASSWORD=
 Langkah ketiga untuk mengintegrasikan MongoDB ke dalam project, yaitu dengan mengubah
mysql menjadi mongodb dalam file config/database.php.

Setelah itu, masih dalam file yang sama, kita perlu mendefinisikan database
MongoDB dengan code snippet sebagai berikut ke dalam list ‘connections’.

'mongodb' => [
'driver' => 'mongodb',
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', 27017),
'database' => env('DB_DATABASE'),
'username' => env('DB_USERNAME'),
'password' => env('DB_PASSWORD'),
'options' => [
// here you can pass more settings to the Mongo
Driver Manager
// see https://www.php.net/manual/en/mongodb-
driver-manager.construct.php under "Uri Options" for a list of
complete parameters that you can use

'database' => env('DB_AUTHENTICATION_DATABASE',

'admin'), // required with Mongo 3+
],
],
 Setelah itu, kita beralih ke dalam file config/app.php. Di sini, kita menambahkan
package untuk MongoDB Service Provider. Kita tambahkan ke dalam list ‘providers’.

Jenssegers\Mongodb\MongodbServiceProvider::class,

Di sini, kita telah berhasil menghubungkan project Laravel kita dengan database
MongoDB.
 2. Pemasangan Fungsi CRUD NoSQL dan DomPDF dalam Proyek Laravel
Pada tahapan ini, kita memasang sistem CRUD berbasis MongoDB dalam proyek
Laravel. Pertama, buatlah model Buku :

php artisan make:model Buku

Selanjutnya kita mengatur bagian Model Buku :

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
// use Illuminate\Database\Eloquent\Model;
use Jenssegers\Mongodb\Eloquent\Model;

class Buku extends Model

{
use HasFactory;
protected $connection = 'mongodb';
protected $collection = 'buku';
}

Pada model Buku, kita menginisasi koneksi mongodb serta collection yang bernama
buku.

Setelah itu, kita lakukan migrasi database terlebih dahulu. Jalankan perintah :
Php artisan migrate

Selanjutnya kita membuat controller untuk Buku. Jalankan perintah :

php artisan make:controller BukuController
 Langkah berikutnya yaitu kita melakukan routing.
Route::get('/', [BukuController::class, 'index'])->name('home');

Route::post('/store', [BukuController::class, 'store'])-

>name('store');

Route::put('/update', [BukuController::class, 'update'])-

>name('update');
Route::delete('/destroy/{id}', [BukuController::class, 'destroy'])-
>name('destroy');

Route::get('/pdf', [BukuController::class, 'createPDF'])-

>name('cetak_pdf');

Selanjutnya, kita atur BookController agar dapat melakukan aksi CRUD.

D:\Web\cache-mongodb-laravel\app\Http\Controllers\BukuController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Buku;
use Barryvdh\DomPDF\Facade as PDF;

class BukuController extends Controller

{
public function index()
{
$buku = Buku::all();

return view('home', compact('buku'));

}

public function store(Request $request)

{
$buku = new Buku();
$buku->judul = $request->input('judul_buku');
$buku->penerbit = $request->input('penerbit_buku');
$buku->harga = $request->input('harga_buku');
$buku->save();

return redirect('/')->with('status', 'Data buku telah

berhasil ditambahkan!');
}

public function update(Request $request)

{
$buku = Buku::find($request->input('id'));
$buku->judul = $request->input('judul_buku_updt');
$buku->penerbit = $request->input('penerbit_buku_updt');
$buku->harga = $request->input('harga_buku_updt');
$buku->save();

return redirect('/')->with('status', 'Data buku berhasil

diubah!');
}

public function destroy($id)

{
$buku = Buku::find($id);
$buku->delete();

return redirect('/')->with('status', 'Data buku

berhasil dihapus!');
}

public function createPDF()

{
$buku = Buku::all();

$pdf = PDF::loadview('report.report', ['buku'=>$buku]);

return $pdf->download('book_data_report.pdf');
}

}
 Pada tahapan ini, kita memasang DomPDF, yang dimana kita nantinya bisa mencetak
tabel data dalam bentuk .pdf. Pertama, lakukan instalasi DomPDF dalam proyek Laravel. Ini
akan mengunduh paket dan pustaka dompdf + fontlib juga.

Tunggu sampai prosesnya selesai, kemudian kita akan mengintegrasikan package

DomPDF dengan proyek kita. Bukalah file app.php yang terletak dalam folder config lalu
tambahkan package yang baru kita unduh pada bagian providers dan aliases dalam file app.php
agar Laravel mengenali package DomPDF ini.
 Pada tahap selanjutnya, kita mengatur tampilan website kita.
File home.blade.php merupakan file untuk mengatur tampilan halaman utama.

D:\Web\cache-mongodb-laravel\resources\views\home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.2/css/all.min.css" rel="stylesheet" integrity="sha512-
HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFA
mJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous"/>

<title>LIMAS Bookstore</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">LIMAS Bookstore</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="container mt-4">

<h3>Data Buku</h3>
<hr>
<button type="button" class="btn btn-success btn-sm mt-1"
data-bs-toggle="modal" data-bs-target="#modal-create">+ Tambah
Data</button>
<a href="{{ route('cetak_pdf') }}" target="_blank" class="btn
btn-danger btn-sm mt-1"><i class="fas fa-print me-2"></i>Cetak ke
PDF</a>
@if (session('status'))
<div class="alert alert-success alert-dismissible fade show
mt-3" role="alert">
<strong>{{ session('status') }}</strong>
<button type="button" class="btn-close" data-bs-
dismiss="alert" aria-label="Close"></button>
</div>
@endif
<table class="table table-bordered mt-4">
<thead>
 <tr class="text-center">
<th scope="col">No</th>
<th scope="col">Judul</th>
<th scope="col">Penerbit</th>
<th scope="col">Harga</th>
<th scope="col">Aksi</th>
</tr>
</thead>

<tbody>
@php
$no = 1
@endphp
@foreach ($buku as $key => $value)
<tr class="text-center">
<th scope="row">{{ $no++ }}</th>
<td>{{ $value->judul }}</td>
<td>{{ $value->penerbit }}</td>
<td>{{ $value->harga }}</td>
<td>
<form action="{{ route('destroy', $value->id) }}"
method="POST">
<button type="button" class="btn btn-success btn-sm"

title="Update Data" data-bs-toggle="modal" data-bs-

target="#modal-
update"

data-id="{{ $value->id }}"

data-judul="{{ $value->judul }}"
data-penerbit="{{ $value->penerbit }}"
data-harga="{{ $value->harga }}">
<i class="fas fa-pencil-alt"></i>
</button>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm"
title="Delete Data"><i class="fas fa-trash"></i></button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@include('modal/modal-create')
@include('modal/modal-update')
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/
t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<!-- JQuery JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/
jquery.min
.js" integrity="sha512-
bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fj
qhx/qt
q/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#modal-update').on('show.bs.modal', function (event) {
 var div = $(event.relatedTarget)
var modal = $(this)
modal.find('#id').attr("value", div.data('id'));
modal.find('#judul_buku_updt').attr("value",
div.data('judul'));
modal.find('#penerbit_buku_updt').attr("value",
div.data('penerbit'));

modal.find('#harga_buku_updt').attr("value",
div.data('harga'));
});
window.setTimeout(function()
{
$(".alert").fadeTo(500, 0).slideUp(500,
function(){
$(this).remove();
});
}, 4000);
});
</script>
</body>
</html>

File modal-create.blade.php merupakan file untuk mengatur tampilan yang bersifat

modal yang digunakan sebagai form untuk membuat data.
 D:\Web\cache-mongodb-laravel\resources\views\modal\modal-create.blade.php
<div class="modal fade" id="modal-create" data-bs-backdrop="static"
data-bs-keyboard="false" tabindex="-1" aria-
labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Tambah
Data Buku</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{{route('store')}}" method="post">
@csrf
<div class="row mb-3">

<label for="#" class="col-sm-3 col-form-label">Judul Buku</label>

<div class="col-sm-9">

<input type="text" class="form-control"

name="judul_buku">
</div>
</div>
<div class="row mb-3">
<label for="#" class="col-sm-3 col-form-
label">Penerbit</label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="penerbit_buku">
</div>
</div>
<div class="row mb-3">
<labelfor="#"class="col-sm-3col-form- label">Harga</label>
<div class="col-sm-9">

<input type="text" class="form-control"

name="harga_buku">
</div>
</div>
</div>
<div class="modal-footer">
<buttontype="submit"class="btnbtn- primary">Tambah</button>
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
 File modal-update.blade.php merupakan file untuk mengatur tampilan yang bersifat
modal yang digunakan sebagai form untuk mengedit data.

D:\Web\cache-mongodb-laravel\resources\views\modal\modal-update.blade.php
<div class="modal fade" id="modal-update" data-bs-backdrop="static"
data-bs-keyboard="false" tabindex="-1" aria-
labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Ubah Data
Buku</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="frm_updt" method="post"
action="{{route('update')}}">
@csrf
@method('PUT')
<div class="row mb-3">
<label for="#" class="col-sm-3 col-form-label">Judul
Buku</label>
<div class="col-sm-9">
<input type="hidden" class="form-control" name="id"
id="id">
<input type="text" class="form-control"
name="judul_buku_updt" id="judul_buku_updt">
</div>
</div>
<div class="row mb-3">
<label for="#" class="col-sm-3 col-form-
label">Penerbit</label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="penerbit_buku_updt" id="penerbit_buku_updt">
</div>
</div>
<div class="row mb-3">
<label for="#" class="col-sm-3 col-form-
label">Harga</label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="harga_buku_updt" id="harga_buku_updt">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Ubah</button>
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
 File report.blade.php merupakan file untuk mengatur tampilan halaman .pdf yang
akan dicetak.

D:\Web\cache-mongodb-laravel\resources\views\report\report.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Book Data Report</title>
</head>
<style type="text/css">
table { border: solid 1px #000; border-collapse: collapse;
width: 100%; margin-top: 40px;}
tr th { font-size: 13px; border: solid 1px #000; padding: 8px
0; text-align: center; }
td { padding: 7px 5px; font-size: 12px; border: solid 1px
#000; text-align: center; }
h2 { text-align: center; }
</style>
<body>
<h2>Book Data Report</h2>
<table>
<thead>
<tr>
<th>No</th>
<th>Judul Buku</th>
<th>Penerbit</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
@php
$no = 1;
@endphp
@foreach($buku as $key => $value)
<tr>

<td>{{ $no++ }}</td>

<td>{{$value->judul}}</td>
<td>{{$value->penerbit}}</td>
<td>{{$value->harga}}</td>
</tr>
@endforeach
</tbody>
</table>
</body>
</html>
 Untuk melakukan uji coba web yang telah dibuat, lakukan perintah berikut ini.

php artisan config:cache

php artisan cache:clear
php artisan serve

Setelah melakukan perintah tersebut, maka kita akan melihat tampilan utama web.
 Jika kita menekan tombol yang terdapat simbol pensil yang berada di dalam kolom
“Aksi”, maka akan muncul modal untuk mengupdate data yang berada di dalam baris data
tersebut.
 Jika kita menekan tombol yang terdapat simbol keranjang sampah yang berada di
dalam kolom “Aksi”, maka data akan langsung terhapus.

Kita juga dapat mengecek data tersebut di dalam MongoDBCompass atau Mongosh
(MongoDB Shell).
Jika kita menekan tombol “Cetak ke PDF”, maka kita akan mengunduh file book_data_report.pdf yang
berisikan tabel data buku sesuai dengan tampilan yang telah diatur dalam file D:\Web\cache-mongodb-
laravel\resources\views\report\report.blade.php
 Dari langkah-langkah yang kita lakukan sejauh ini, kita telah berhasil membangun
website yang memiliki fungsi dasar seperti CRUD dan mencetak file .pdf dari data yang ada.
Selanjutnya, kita akan mengimplementasikan sistem cache.

3. Caching
Sebelumnya, kita perlu melakukan instalasi Redis ke dalam PC kita. Redis dapat
diunduh di https://github.com/microsoftarchive/redis/releases. Kali ini, Redis yang kita
gunakan yaitu versi 3.2.100. Di sini, kita cukup unduh Redis-x64-3.2.100.msi. Setelah
diunduh, kita buka file tersebut lalu ikuti langkah-langkah sesuai dengan instruksinya.

Setelah kita berhasil dalam instalasi Redis, kita dapat menjalankan redis-server
kemudian kita jalankan redis-cli.

Instalasi Redis dalam project Laravel dapat dilakukan dengan perintah berikut ini.

php artisan migrate

composer require predis/predis
 Setelah itu, kita mengubah pada bagian CACHE_DRIVER dari file menjadi redis
serta menambahkan REDIS_CLIENT=predis pada file .env.

Setelah itu, kita ubah juga pada bagian config/cache.php yang awalnya file menjadi
redis.
 Untuk menerapkannya, kita cukup melakukan perintah berikut.

php artisan
config:cache php
artisan cache:clear

Jika tidak ada error, maka redis berhasil diterapkan.

Untuk mencobanya, kita dapat melakukan test sederhana.

Kita dapat memanggil redis seperti pada gambar di bawah
ini.
use Illuminate\Support\Facades\Redis;
Route::get('/test', function () {
$p = Redis::incr('p');
return $p;
});
 Hasilnya yaitu sebagai berikut.

Data tersebut tersimpan di dalam Redis.

Untuk menerapkan cache pada BukuController, maka kita harus melakukan

perubahan pada BukuController.
D:\Web\cache-mongodb-laravel\app\Http\Controllers\BukuController.php
<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Buku;
use Illuminate\Support\Facades\Cache;
use Barryvdh\DomPDF\Facade as PDF;

class BukuController extends Controller

{
public function index()
{
$buku = Cache::remember('bukus:all', 60, function () {
return Buku::all();
});

return view('home', compact('buku'));

}

public function store(Request $request)

{
$buku = new Buku();
$buku->judul = $request->input('judul_buku');
$buku->penerbit = $request->input('penerbit_buku');
 $buku->harga = $request->input('harga_buku');
$buku->save();
Cache::forget('bukus:all');
return redirect('/')->with('status', 'Data buku berhasil
ditambahkan!');
}

public function update(Request $request)

{
$buku = Buku::find($request->input('id'));
$buku->judul = $request->input('judul_buku_updt');
$buku->penerbit = $request->input('penerbit_buku_updt');
$buku->harga = $request->input('harga_buku_updt');
$buku->save();
Cache::forget('bukus:all');
return redirect('/')->with('status', 'Data buku berhasil
diubah!');
}

public function destroy($id)

{
$buku = Buku::find($id);
$buku->delete();
Cache::forget('bukus:all');
return redirect('/')->with('status', 'Data buku berhasil
dihapus!');
}

public function createPDF()

{
$buku = Buku::all();

$pdf = PDF::loadview('report.report', ['buku'=>$buku]);

return $pdf->download('book_data_report.pdf');
}

}
4. Pemasangan Laravel DebugBar untuk Melakukan Uji Coba Cache Redis
Laravel DebugBar dapat memberi kita informasi mengenai query apa saja yang telah
berjalan serta memberikan informasi mengenai response time.

Cara instalasi Laravel DebugBar ke dalam project kita adalah sebagai berikut.

composer require barryvdh/Laravel-debugbar --dev

Seteleah itu, kita perlu memasukkan package ke dalam label ‘providers’ yang berada
di dalam file config/app.php.
Barryvdh\Debugbar\ServiceProvider::class,
Masih dalam file yang sama, kita juga perlu memasukkan package ke dalam label ‘aliases’ yang
berada di dalam file config/app.php.

'Debugbar' => Barryvdh\Debugbar\Facade::class,

Setelah itu, kita perlu melakukan publish debugbar agar konfigurasi yang berasal dari vendor dapat
dipindahkan ke dalam konfigurasi utama project.

php artisan vendor:publish --

provider=”Barryvdh\Debugbar\ServiceProvider”

Setelah itu, kita dapat mencoba Laravel DebugBar yang baru saja kita pasang.

Pada gambar di bawah ini, kita dapat melihat response time serta query apa saja yang dijalankan.
 5. Pengisian Data dan Pengujian Ulang Cache melalui Laravel DebugBar
Agar perubahan Response Time antara web yang menggunakan caching serta yang
tidak menggunakan caching dapat terlihat dengan jelas, di sini kita akan mencoba
memasukkan 1000 data ke dalam database MongoDB melalui file. File yang didukung oleh
MongoDB, diantaranya file yang berformat JSON dan CSV.

Pertama, kita masuk terlebih dahulu ke dalam database dan collection kita di
MongoDBCompass. Setelah itu, klik “ADD DATA” lalu klik “Import File”.
 Setelah itu, kita dapat membandingkan kecepatannya.

6. JMeter Load Test/Stress Test

Untuk menguji serta membandingkan hasil response time antara aplikasi yang
menggunakan cache dengan yang tidak menggunakan cache dapat dilakukan uji load testing
atau stress test dengan menggunakan Apache JMeter.

Apache JMeter (Binaries) dapat diunduh di

https://jmeter.apache.org/download_jmeter.cgi.

Untuk menjalankan JMeter di Windows cukup klik dua kali jmeter.bat di dalam folder
apache-jmeter-5.4.1/bin/ atau buka command prompt dan ketik <file path>/apache-jmeter-
5.4.1/bin/jmeter.bat dan tunggu beberapa detik JMeter GUI akan diluncurkan.