0% found this document useful (0 votes)

5 views48 pages

Laprak Modul 17

This document outlines the practical report on developing a web application using Laravel, focusing on the implementation of Laravel DataTables and file storage. It details the steps to set up a data table for employee management, including seeding data, creating routes, and integrating SweetAlert for notifications. The report serves as a guide for setting up an employee list with functionalities for data export and modal forms for adding new employees.

Uploaded by

Ahmadnunu

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

5 views48 pages

Laprak Modul 17

Uploaded by

Ahmadnunu

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 48

PENGEMBANGAN APLIKASI WEBSITE

LAPORAN PRAKTIKUM
Laravel Factory & File Storage

oleh:
Ahmad Nunu Gustama (IS-06-02 – 1204230051)

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS REKAYASA INDUSTRI

TELKOM UNIVERSITY SURABAYA

2024
1. Penerapan Laravel DataTables
 Edit file EmployeeSeeder untuk dapat menambahkan data dummy
seperti di bawah ini. Data dummy ditambahkan menjadi sebanyak
200.

<?php

namespace Database\Seeders;

use App\Models\Employee;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class EmployeeSeeder extends Seeder

{
/**
* Run the database seeds.
*/
public function run(): void
{
Employee::factory()->count(200)->create();
}
}

 Jalankan file seeder tersebut via Artisan seperti di bawah ini.

 Install packages Laravel DataTables via composer

 Install aset-aset DataTables yang dibutuhkan via NPM

 Registrasikan aset aset DataTables pada file /resources/js/app.js seperti yang

terlihat di bawah ini.
import './bootstrap';
import 'datatables.net-bs5';
import 'datatables.net-buttons-bs5';
import './employee';
import.meta.glob(["../images/**"]);

 Registrasikan aset-aset DataTables pada file /resources/sass/app.scss seperti

yang terlihat di bawah ini.
// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';
@import "bootstrap-icons/font/bootstrap-icons.css";

// Icons
@import "bootstrap-icons/font/bootstrap-icons.css";

// DataTables
@import "datatables.net-bs5/css/dataTables.bootstrap5.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.css";

 Import jQuery pada file /resources/js/bootstrap.js seperti yang terlihat di bawah ini.
import 'bootstrap';

import axios from 'axios';

window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] =
'XMLHttpRequest';

import $ from 'jquery';

window.$ = $;

 Buka file base layout pada /resources/views/layouts/app.blade.php kemudian

tambahkan blade directive stack() dengan nama “scripts” seperti di bawah ini.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>{{ $pageTitle }}</title>
@vite('resources/sass/app.scss')
</head>

<body>
@include('layouts.nav')
@yield('content')
@vite('resources/js/app.js')
@include('sweetalert::alert')
@stack('scripts')
</body>

</html>
 Buka file view pada /resources/views/employee/index.blade.php kemudian
gunakan block blade directive push() untuk menambahkan kode program seperti di
bawah ini.
@extends('layouts.app')
@section('content')
<div class="container mt-4">
<div class="row mb-0">
<div class="col-lg-9 col-xl-6">
<h4 class="mb-3">{{ $pageTitle }}</h4>
</div>
<div class="col-lg-3 col-xl-6">
<ul class="list-inline mb-0 float-end">
<li class="list-inline-item"> <a href="{{
route('employees.exportExcel') }}" class="btn btn-outline-success">
<i class="bi bi-download me-1"></i> to Excel
</a> </li>
<li class="list-inline-item"> <a href="{{
route('employees.exportPdf') }}" class="btn btn-outline-danger"> <i
class="bi bi-download me-1"></i> to PDF </a> </li>
<li class="list-inline-item">|</li> {{-- <li
class="list-inline-item"> <a
href="{{ route('employees.create') }}"
class="btn btn-primary"> <i
class="bi bi-plus-circle me-1"></i> Create
Employee </a> </li> --}} <button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#createEmployee">
<i class="bi bi-plus-circle me-
1"></i>Create Employee </button>
</ul>
</div>
</div>
<hr>
<div class="table-responsive border p-3 rounded-3">
<table class="table table-bordered table-hover table-striped
mb-0 bg-white datatable" id="employeeTable">
<thead>
<tr>
<th>ID</th>
<th>No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Age</th>
<th>Position</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action="{{ route('employees.store') }}" method="POST"
enctype="multipart/form-data">
@csrf <div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">Tambah Karyawan</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label for="firstName" class="form-label">First
Name</label>
<input class="form-control @error('firstName')
is-invalid @enderror" type="text"
name="firstName" id="firstName" value="{{
old('firstName') }}"
placeholder="Enter First Name">
@error('firstName')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="form-group">
<label for="lastName" class="form-label">Last
Name</label>
<input class="form-control @error('lastName') is-
invalid @enderror" type="text"
name="lastName" id="lastName" value="{{
old('lastName') }}" placeholder="Enter Last Name">
@error('lastName')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input class="form-control @error('email') is-
invalid @enderror" type="text" name="email"
id="email" value="{{ old('email') }}"
placeholder="Enter Email">
@error('email')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="form-group">
<label for="age" class="form-label">Age</label>
<input class="form-control @error('age') is-invalid
@enderror" type="text" name="age"
id="age" value="{{ old('age') }}"
placeholder="Enter Age">
@error('age')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="col-md-12 mb-3">
<label for="position" class="form-
label">Position</label>
<select name="position" id="position" class="form-
select">
@foreach ($positions as $position)
<option value="{{ $position->id }}"
{{ old('position') == $position->id ?
'selected' : '' }}>
{{ $position->code.' - '.$position-
>name }}</option>
@endforeach
</select>
@error('position')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="col-md-12 mb-3">
<label for="cv" class="form-label">
Curriculum Vitae (CV)
</label>
<input type="file" class="form-control"
name="cv" id="cv">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save
changes</button>
</div>
</form>
</div>
</div>
</div>

@endsection

 Berikan atribut id dengan nilai “employeeTable” pada elemen tag <table> seperti
kode program di bawah ini.
<table class="table table-bordered table-hover table-striped mb-0 bg-
white datatable" id="employeeTable">

 Akses halaman Employee List via browser, jika berhasil akan muncul tampilan
DataTables untuk data employee.

 Buat Route baru pada /routes/web.php dengan URI /getEmployees, mengarahkan

ke method getData() pada EmployeeController seperti kode program di bawah ini.

Route::get('getEmployees', [EmployeeController::class, 'getData'])-

>name('employees.getData');

 Buat method getData() pada EmployeeController seperti di bawah ini.

public function getData(Request $request)

{
$employees = Employee::with('position');
if ($request->ajax()) {
return datatables()->of($employees)->addIndexColumn()-
>addColumn('actions', function ($employee) {
return view('employee.actions', compact('employee'));
})->toJson();
}
}

 Sesuaikan method index() pada EmployeeController seperti kode program di

bawah ini. Query eloquent untuk mengambil data employee sudah tidak diperlukan
lagi karna sudah digantikan proses nya pada method getData().

public function index()

{
$pageTitle = 'Employee List';
return view('employee.index', compact('pageTitle'));
}

 Buka file view pada /resources/views/employee/index.blade.php kemudian

sesuaikan kode program pada bagian tag <table> nya seperti di bawah ini.
Perulangan yang ada pada tag <tbody> dihapus karna data akan diload secara
asynchronous dan ditangani oleh DataTable.

@extends('layouts.app')
@section('content')
<div class="container mt-4">
<div class="row mb-0">
<div class="col-lg-9 col-xl-6">
<h4 class="mb-3">{{ $pageTitle }}</h4>
</div>
<div class="col-lg-3 col-xl-6">
<ul class="list-inline mb-0 float-end">
<li class="list-inline-item"> <a href="{{
route('employees.exportExcel') }}" class="btn btn-outline-success">
<i class="bi bi-download me-1"></i> to Excel
</a> </li>
<li class="list-inline-item"> <a href="{{
route('employees.exportPdf') }}" class="btn btn-outline-danger"> <i
class="bi bi-download me-1"></i> to PDF </a> </li>
<li class="list-inline-item">|</li> {{-- <li
class="list-inline-item"> <a
href="{{ route('employees.create') }}"
class="btn btn-primary"> <i
class="bi bi-plus-circle me-1"></i> Create
Employee </a> </li> --}} <button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#createEmployee">
<i class="bi bi-plus-circle me-
1"></i>Create Employee </button>
</ul>
</div>
</div>
<hr>
<div class="table-responsive border p-3 rounded-3">
<table class="table table-bordered table-hover table-striped
mb-0 bg-white datatable" id="employeeTable">
<thead>
<tr>
<th>ID</th>
<th>No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Age</th>
<th>Position</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

@endsection

 Akses halaman Employee List via browser, jika berhasil akan muncul tampilan
DataTables untuk data employee dengan teknik server-side processing.
2. Penerapan Laravel Sweet Alert

 Install package SweetAlert via composer

 Buka file base layout pada /resources/views/layouts/app.blade.php kemudian

tambahkan blade directive include() untuk menerapkan package SweetAlert seperti
di bawah ini. Letakkan setelah vite() dan sebelum stack().

<!DOCTYPE html>
<html lang="en">

<body>
@include('layouts.nav')
@yield('content')
@vite('resources/js/app.js')
@include('sweetalert::alert')
@stack('scripts')
</body>

</html>

 Publish aset dari SweetAlert via Artisan.

 Buka EmployeeController dan letakkan SweetAlert pada method store(), update()

dan destroy().

public function store(Request $request)

{
$messages = [
'required' => ':Attribute harus diisi.',
'email' => 'Isi :attribute dengan format yang benar',
'numeric' => 'Isi :attribute dengan angka'
];

$validator = Validator::make($request->all(), [
'firstName' => 'required',
'lastName' => 'required',
'email' => 'required|email',
'age' => 'required|numeric',
], $messages);

if ($validator->fails()) {
return redirect()->back()->withErrors($validator)-
>withInput();
}

// Get File
$file = $request->file('cv');
if ($file != null) {
$originalFilename = $file->getClientOriginalName();
$encryptedFilename = $file->hashName();

// Store File
$file->store('public/files');
}

// ELOQUENT
$employee = new Employee;
$employee->firstname = $request->firstName;
$employee->lastname = $request->lastName;
$employee->email = $request->email;
$employee->age = $request->age;
$employee->position_id = $request->position;

if ($file != null) {
$employee->original_filename = $originalFilename;
$employee->encrypted_filename = $encryptedFilename;
}

$employee->save();

Alert::success('Added Successfully', 'Employee Data Added

Successfully.');

return redirect()->route('employees.index');
}

public function update(Request $request, string $id)

{
$messages = [
'required' => ':Attribute harus diisi.',
'email' => 'Isi :attribute dengan format yang benar',
'numeric' => 'Isi :attribute dengan angka',
];

$validator = Validator::make($request->all(), [
'firstName' => 'required',
'lastName' => 'required',
'email' => 'required|email',
'age' => 'required|numeric',
], $messages);

if ($validator->fails()) {
return redirect()->back()->withErrors($validator)-
>withInput();
}

// ELOQUENT
$employee = Employee::find($id);
$employee->firstname = $request->firstName;
$employee->lastname = $request->lastName;
$employee->email = $request->email;
$employee->age = $request->age;
$employee->position_id = $request->position;

// Handle file upload

if ($request->hasFile('cv')) {
// Hapus file lama jika ada
if ($employee->encrypted_filename &&
Storage::exists('public/files/' . $employee->encrypted_filename)) {
Storage::delete('public/files/' . $employee-
>encrypted_filename);
}

$file = $request->file('cv');
$originalFilename = $file->getClientOriginalName();
$encryptedFilename = $file->hashName();

// Simpan file baru

$file->store('public/files');

$employee->original_filename = $originalFilename;
$employee->encrypted_filename = $encryptedFilename;
}

$employee->save();

Alert::success('Changed Successfully', 'Employee Data Changed

Successfully.');

return redirect()->route('employees.index');
}

public function destroy(string $id)

{
// ELOQUENT
Employee::find($id)->delete();

Alert::success('Deleted Successfully', 'Employee Data Deleted

Successfully.');

return redirect()->route('employees.index');
}

 Buka file view pada /resources/views/employee/actions.blade.php kemudian

sesuaikan kode program pada bagian tag <button>. Tambahkan class “btn-delete”
dan atribut “data-name” seperti di bawah ini.

<div class="d-flex"><a href="{{ route('employees.show', ['employee' =>

$employee->id]) }}"
class="btn btn-outline-dark btn-sm me-2"><i class="bi-person-
lines-fill"></i></a>
<a href="{{ route('employees.edit', ['employee' => $employee-
>id]) }}" class="btn btn-outline-dark btn-sm me-2"><i
class="bi-pencil-square"></i></a>
<div>
<form action="{{ route('employees.destroy', ['employee' =>
$employee->id]) }}" method="POST"> @csrf
@method('delete') <button type="submit" class="btn btn-
outline-dark btn-sm me-2 btn-delete"
data-name="{{ $employee->firstname . ' ' . $employee-
>lastname }}"> <i class="bi-trash"></i> </button>
</form>
</div>
</div>

 Buka file view pada /resources/views/employee/index.blade.php kemudian

sesuaikan kode program pada bagian tag <table>. Tambahkan class “datatable”
seperti di bawah ini.

<table class="table table-bordered table-hover table-striped mb-0 bg-

white datatable" id="employeeTable">

 Buka file view pada /resources/views/employee/index.blade.php kemudian

tambahkan kode program di bawah ini pada block blade directive push() seperti di
bawah ini.

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

@endsection

 Sesuaikan method index() pada EmployeeController seperti kode program di

bawah ini. Panggil method confirmDelete() milik SweetAlert.

public function index()

{
$pageTitle = 'Employee List';
confirmDelete();
$positions = Position::all();

// ELOQUENT
// $employees = Employee::all();

return view('employee.index', [
'pageTitle' => $pageTitle,
'positions' => $positions
]);
}

 Akses Fitur Create, Edit dan Delete Employee via browser, jika berhasil akan
muncul tampilan popup window dari SweetAlert sebagai feedback sistem untuk
proses yang sedang dilakukan oleh user. Contoh tampilannya seperti gambar di
bawah ini
3. Penerapan Laravel Excel

 Install Laravel Excel via Composer.

 Publish file konfigurasi dengan menjalankan command script seperti di bawah ini.

 Buka file view pada /resources/views/employee/index.blade.php kemudian buat

button untuk fitur export data employee menjadi Excel. Sesuaikan bagian kode
program seperti di bawah ini.

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

@endsection

 Buat Route baru pada /routes/web.php dengan URI /exportExcel, mengarahkan ke

method exportExcel() pada EmployeeController seperti kode program di bawah
ini.

Route::get('exportExcel', [EmployeeController::class, 'exportExcel'])-

>name('employees.exportExcel');

 Buat file Export dengan nama EmployeesExport via Artisan seperti di bawah ini.
Diarahkan kepada model Employee.

 Edit atau ubah file EmployeesExport, sesuaikan seperti di bawah ini.

<?php
namespace App\Exports;
use App\Models\Employee;
use Illuminate\Contracts\View\View;
use Maatwebsite\Excel\Concerns\FromView;
use Maatwebsite\Excel\Concerns\ShouldAutoSize;
use Maatwebsite\Excel\Concerns\WithStyles;
use PhpOffice\PhpSpreadsheet\Worksheet\Worksheet;
class EmployeesExport implements FromView, WithStyles, ShouldAutoSize
{
public function styles(Worksheet $sheet)
{
return [1 => ['font' => ['bold' => true]],];
}
public function view(): View
{
return view('employee.export_excel', ['employees' =>
Employee::all()]);
}
}

 Buat file view baru dengan nama export_excel.blade.php pada direktori

/resources/views/employee. Isi dengan kode program seperti di bawah ini.

<table>
<thead>
<tr>
<th>No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Age</th>
<th>Position</th>
</tr>
</thead>
<tbody>
@foreach ($employees as $index => $employee)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $employee->firstname }}</td>
<td>{{ $employee->lastname }}</td>
<td>{{ $employee->email }}</td>
<td>{{ $employee->age }}</td>
<td>{{ $employee->position->name }}</td>
</tr>
@endforeach
</tbody>
</table>

 Buat method exportExcel() pada EmployeeController seperti kode program di

bawah ini.

public function exportExcel()

{
return Excel::download(new EmployeesExport, 'employees.xlsx');
}
 Akses halaman Employee List via browser, kemudian klik button “to Excel” untuk
meng-export data employee ke dalam bentuk file Excel.

4. Penerapan Laravel Dompdf

 Install Laravel DomPdf via Composer.

 Publish file konfigurasi dengan menjalankan command script seperti di bawah ini.

 Buka file view pada /resources/views/employee/index.blade.php kemudian buat

button untuk fitur export data employee menjadi PDF. Sesuaikan bagian kode
program seperti di bawah ini.

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

@endsection

 Buat Route baru pada /routes/web.php dengan URI /exportPdf, mengarahkan ke

method exportPdf() pada EmployeeController seperti kode program di bawah ini.

Route::get('/employees/export-pdf', [EmployeeController::class,
'exportPdf'])->name('employees.exportPdf');

 Buat file view baru dengan nama export_pdf.blade.php pada direktori

/resources/views/employee. Isi dengan kode program seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Employee List</title>
<style>
html {
font-size: 12px;
}
.table {
border-collapse: collapse !important;
width: 100%;
}

.table-bordered th,
.table-bordered td {
padding: 0.5rem;
border: 1px solid black !important;
}
</style>
</head>
<body>
<h1>Employee List</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Age</th>
<th>Position</th>
</tr>
</thead>
<tbody>
@foreach ($employees as $index => $employee)
<tr>
<td align="center">{{ $index + 1 }}</td>
<td>{{ $employee->firstname }}</td>
<td>{{ $employee->lastname }}</td>
<td>{{ $employee->email }}</td>
<td align="center">{{ $employee->age }}</td>
<td>{{ $employee->position->name }}</td>
</tr>
@endforeach
</tbody>
</table>
</body>
</html>

 Buat method exportPdf() pada EmployeeController seperti kode program di bawah

ini.

public function exportPdf()

{
$employees = Employee::all();
$pdf = Pdf::loadView('employee.export_pdf',
compact('employees'));
return $pdf->download('employees.pdf');
}

 Akses halaman Employee List via browser, kemudian klik button “to PDF” untuk
meng-export data employee ke dalam bentuk file PDF.
5. Memindahkan dan Memisahkan Kode Javascript

 Kita dapat memindahkan kode javascript yang ada pada file view kita dan kita
kelompokkan dengan file-file javascript pada project laravel kita.

 Buat file employee.js pada direktori /resources/js/. Hapus blok kode yang ada pada
blade directive push() pada file /resources/views/index.blade.php dan pindahkan
kode javascript yang ada ke file employee.js. Kode program pada file
index.blade.php akan menjadi seperti di bawah ini.
@extends('layouts.app')
@section('content')
<div class="container mt-4">
<div class="row mb-0">
<div class="col-lg-9 col-xl-6">
<h4 class="mb-3">{{ $pageTitle }}</h4>
</div>
<div class="col-lg-3 col-xl-6">
<ul class="list-inline mb-0 float-end">
<li class="list-inline-item"> <a href="{{
route('employees.exportExcel') }}" class="btn btn-outline-success">
<i class="bi bi-download me-1"></i> to Excel
</a> </li>
<li class="list-inline-item"> <a href="{{
route('employees.exportPdf') }}" class="btn btn-outline-danger"> <i
class="bi bi-download me-1"></i> to PDF </a> </li>
<li class="list-inline-item">|</li> {{-- <li
class="list-inline-item"> <a
href="{{ route('employees.create') }}"
class="btn btn-primary"> <i
class="bi bi-plus-circle me-1"></i> Create
Employee </a> </li> --}} <button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#createEmployee">
<i class="bi bi-plus-circle me-
1"></i>Create Employee </button>
</ul>
</div>
</div>
<hr>
<div class="table-responsive border p-3 rounded-3">
<table class="table table-bordered table-hover table-striped
mb-0 bg-white datatable" id="employeeTable">
<thead>
<tr>
<th>ID</th>
<th>No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Age</th>
<th>Position</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="modal fade" id="createEmployee" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action="{{ route('employees.store') }}" method="POST"
enctype="multipart/form-data">
@csrf <div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">Tambah Karyawan</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label for="firstName" class="form-label">First
Name</label>
<input class="form-control @error('firstName')
is-invalid @enderror" type="text"
name="firstName" id="firstName" value="{{
old('firstName') }}"
placeholder="Enter First Name">
@error('firstName')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="form-group">
<label for="lastName" class="form-label">Last
Name</label>
<input class="form-control @error('lastName') is-
invalid @enderror" type="text"
name="lastName" id="lastName" value="{{
old('lastName') }}" placeholder="Enter Last Name">
@error('lastName')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input class="form-control @error('email') is-
invalid @enderror" type="text" name="email"
id="email" value="{{ old('email') }}"
placeholder="Enter Email">
@error('email')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="form-group">
<label for="age" class="form-label">Age</label>
<input class="form-control @error('age') is-invalid
@enderror" type="text" name="age"
id="age" value="{{ old('age') }}"
placeholder="Enter Age">
@error('age')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="col-md-12 mb-3">
<label for="position" class="form-
label">Position</label>
<select name="position" id="position" class="form-
select">
@foreach ($positions as $position)
<option value="{{ $position->id }}"
{{ old('position') == $position->id ?
'selected' : '' }}>
{{ $position->code.' - '.$position-
>name }}</option>
@endforeach
</select>
@error('position')
<div class="text-danger">
<small>{{ $message }}</small>
</div>
@enderror
</div>
<div class="col-md-12 mb-3">
<label for="cv" class="form-label">
Curriculum Vitae (CV)
</label>
<input type="file" class="form-control"
name="cv" id="cv">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save
changes</button>
</div>
</form>
</div>
</div>
</div>

@endsection

 Kode program pada file employee.js akan menjadi seperti di bawah ini.

$(function () {
$("#employeeTable").DataTable({
serverSide: true,
processing: true,
ajax: "/getEmployees",
columns: [
{ data: "id", name: "id", visible: false },
{ data: "DT_RowIndex", name: "DT_RowIndex", orderable:
false, searchable: false },
{ data: "firstname", name: "firstname" },
{ data: "lastname", name: "lastname" },
{ data: "email", name: "email" },
{ data: "age", name: "age" },
{ data: "position.name", name: "position.name" },
{ data: "actions", name: "actions", orderable: false,
searchable: false },
],
order: [[0, "desc"]],
lengthMenu: [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"],
],
});

$(".datatable").on("click", ".btn-delete", function (e) {

e.preventDefault();
var form = $(this).closest("form");
var name = $(this).data("name");

Swal.fire({
title: "Are you sure want to delete\n" + name + "?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonClass: "bg-primary",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
form.submit();
}
});
});
});

 Buka file /resources/js/app.js kemudian import file employee.js.

import './bootstrap';
import 'datatables.net-bs5';
import 'datatables.net-buttons-bs5';
import './employee';
import.meta.glob(["../images/**"]);

 Akses halaman Employee List via browser, jika berhasil seluruh fitur tetap
berjalan dengan baik.

6. Penerapan Laravel Charts (Larapex)

 Install Larapex Charts via Composer.

 Publish file konfigurasi dengan menjalankan command script seperti di bawah

ini.
 Buat file chart dengan nama EmployeesChart via Artisan seperti di bawah
ini.

 Pilih Bar Chart (Bisa disesuaikan dengan kebutuhan) pada pilihan chart yang
muncul di terminal seperti gambar di bawah ini.

 Edit atau ubah file EmployeesChart pada direktori \app\Charts\, sesuaikan

seperti di bawah ini.
<?php

namespace App\Charts;

use App\Models\Position;
use ArielMejiaDev\LarapexCharts\LarapexChart;

class EmployeesChart
{
protected $chart;

public function __construct(LarapexChart $chart)

{
$this->chart = $chart;
}

public function build(): \ArielMejiaDev\LarapexCharts\BarChart

{
$positions = Position::withCount('employees')->get();
$positionsLabels = $positions->pluck('name')->toArray();
$employeesCount = $positions->pluck('employees_count')-
>toArray();
return $this->chart->barChart()->setTitle('Posisi')-
>setSubtitle('Posisi dengan Jumlah Karyawan Terbanyak')-
>addData('Jumlah Karyawan', $employeesCount)-
>setXAxis($positionsLabels);
}
}

 Sesuaikan method index() pada HomeController.php seperti kode program

di bawah ini.
public function index()
{
$pageTitle = 'Employee List';
confirmDelete();
$positions = Position::all();

// ELOQUENT
// $employees = Employee::all();

return view('employee.index', [
'pageTitle' => $pageTitle,
'positions' => $positions
]);
}

 Buka file view pada /resources/views/home.blade.php kemudian edit atau

ubah bagian kode program seperti di bawah ini.

@extends('layouts.app')
@section('content')
@include('default')
<div class="p-6 m-20 bg-white rounded shadow">
{!! $chart->container() !!}
</div>

<script src="{{ $chart->cdn() }}"></script>

{{ $chart->script() }}
@endsection

 Akses halaman Home via browser, jika berhasil akan muncul tampilan Bar
Chart untuk data employee
7. Penerapan Modal Pop Up

 Buka file view pada /resources/views/employee/index.blade.php, nonaktifkan

tombol “create employee” seperti kode program di bawah ini.

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

@endsection

 Masih tetap pada file yang sama, tambahkan kode program pada bagian
bawah sesuai pada kode program di bawah ini.

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

@endsection

 Buka file EmployeeController.php pada direktori /app/Http/Controllers.

Update atau ubah method index() sesuai dengan kode program di bawah ini.
public function index()
{
$pageTitle = 'Employee List';
confirmDelete();
$positions = Position::all();

// ELOQUENT
// $employees = Employee::all();

return view('employee.index', [
'pageTitle' => $pageTitle,
'positions' => $positions
]);
}

 Akses halaman Employee List via browser, lalu tekan tombol Create
Employee, jika berhasil akan muncul tampilan Pop Up Create employee
seperti pada gambar di bawah ini.
 LINK GITHUB
https://github.com/ahmadnunu/Modul-17.git

Alvika Dae - You
No ratings yet
Alvika Dae - You
601 pages
PHP CRUD Operation
No ratings yet
PHP CRUD Operation
9 pages
Best No Logs VPN - Free VPN No Logs - Planet VPN
No ratings yet
Best No Logs VPN - Free VPN No Logs - Planet VPN
5 pages
Project Report For Aes
100% (1)
Project Report For Aes
89 pages
Excel Tutorial PDF
No ratings yet
Excel Tutorial PDF
13 pages
HTML Application Form With PHP Validation: Home - HTML
No ratings yet
HTML Application Form With PHP Validation: Home - HTML
71 pages
CRUD Laravel9
No ratings yet
CRUD Laravel9
10 pages
Login
No ratings yet
Login
6 pages
Pemrograman Framework Modul 8
No ratings yet
Pemrograman Framework Modul 8
10 pages
Belajar Login
No ratings yet
Belajar Login
8 pages
Recaptcha Guide
No ratings yet
Recaptcha Guide
6 pages
Laravel 8 Jet Live
No ratings yet
Laravel 8 Jet Live
31 pages
Exemple - Implémenter CRUD Sur Laravel
No ratings yet
Exemple - Implémenter CRUD Sur Laravel
8 pages
Abram Pasaribu
No ratings yet
Abram Pasaribu
7 pages
Registration Blade
No ratings yet
Registration Blade
4 pages
Nononofdhj
No ratings yet
Nononofdhj
70 pages
01 Crud
No ratings yet
01 Crud
7 pages
Project Baru
No ratings yet
Project Baru
35 pages
Customize Laravel Jetstream (Registration and Login) - DeV Community
No ratings yet
Customize Laravel Jetstream (Registration and Login) - DeV Community
13 pages
Membuat Datatable Dengan AJAX Part 1
No ratings yet
Membuat Datatable Dengan AJAX Part 1
10 pages
#24 Add Student (Frontend)
No ratings yet
#24 Add Student (Frontend)
3 pages
Praktikum 9 Pemweb2 - Putri Tari Lestari - 2110131120002
No ratings yet
Praktikum 9 Pemweb2 - Putri Tari Lestari - 2110131120002
19 pages
'Username', 'Email', 'Password','nama - Petugas','id - Level')
No ratings yet
'Username', 'Email', 'Password','nama - Petugas','id - Level')
26 pages
Unlidata PHP
No ratings yet
Unlidata PHP
4 pages
Store - Image - in - Public - Path 1
No ratings yet
Store - Image - in - Public - Path 1
7 pages
Laporan Flutter Dan Android Studio - 1815051088
No ratings yet
Laporan Flutter Dan Android Studio - 1815051088
13 pages
U 942319412
No ratings yet
U 942319412
2 pages
AWP Practical.8
No ratings yet
AWP Practical.8
5 pages
! - Button Trigger Modal
No ratings yet
! - Button Trigger Modal
3 pages
Dokumen
No ratings yet
Dokumen
4 pages
Profile
No ratings yet
Profile
3 pages
Laravel 11 Chat App
No ratings yet
Laravel 11 Chat App
20 pages
Flask
No ratings yet
Flask
3 pages
Individual - Contribution To Implementation BIT-007-17..
No ratings yet
Individual - Contribution To Implementation BIT-007-17..
46 pages
Ayan Tiwari ROLL NO-58072 BSC Hons Computer Science 2 Year
No ratings yet
Ayan Tiwari ROLL NO-58072 BSC Hons Computer Science 2 Year
7 pages
Request Data Retrirval
No ratings yet
Request Data Retrirval
19 pages
Laprak Modul 15
No ratings yet
Laprak Modul 15
8 pages
Pro Apl Pengweb Per6-Dikonversi
No ratings yet
Pro Apl Pengweb Per6-Dikonversi
19 pages
Nuyy
No ratings yet
Nuyy
12 pages
Laravel Code
No ratings yet
Laravel Code
4 pages
Layouts
No ratings yet
Layouts
17 pages
P06 Database Basics
No ratings yet
P06 Database Basics
32 pages
222
No ratings yet
222
3 pages
Visual Branding
No ratings yet
Visual Branding
19 pages
StarTutorial - PHP Crud Tutorial Part 2
No ratings yet
StarTutorial - PHP Crud Tutorial Part 2
16 pages
Crud Ajaxa
No ratings yet
Crud Ajaxa
8 pages
Phyton Pagos
No ratings yet
Phyton Pagos
33 pages
18 Julio Commit
No ratings yet
18 Julio Commit
9 pages
WebTech Ass 2
No ratings yet
WebTech Ass 2
12 pages
Termina Admin - Empleados, Tramites y Vinculo Empleado-Tramite. Otras Correciones
No ratings yet
Termina Admin - Empleados, Tramites y Vinculo Empleado-Tramite. Otras Correciones
14 pages
XXXXXXXXXX
No ratings yet
XXXXXXXXXX
12 pages
PHP Artisan Make
No ratings yet
PHP Artisan Make
13 pages
10.laravel Best Practice (Coding Standards Part 02) ? ?? ? - DEV Community
No ratings yet
10.laravel Best Practice (Coding Standards Part 02) ? ?? ? - DEV Community
13 pages
Webdevelopmentexercise
No ratings yet
Webdevelopmentexercise
9 pages
CSE 066 07731 (Final Assignment)
No ratings yet
CSE 066 07731 (Final Assignment)
25 pages
Form - HTML Start
No ratings yet
Form - HTML Start
4 pages
Cookies
No ratings yet
Cookies
9 pages
How To Install A Raspberry Pi SMS Server
100% (1)
How To Install A Raspberry Pi SMS Server
19 pages
Import Excel File Using PHPSpreadsheet Library in CodeIgniter 3 Using AJAX
No ratings yet
Import Excel File Using PHPSpreadsheet Library in CodeIgniter 3 Using AJAX
8 pages
A Whirlwind Tour Through Concurrency: Kedar Namjoshi Bell Labs
No ratings yet
A Whirlwind Tour Through Concurrency: Kedar Namjoshi Bell Labs
37 pages
CRUD Operation in DBMS
No ratings yet
CRUD Operation in DBMS
8 pages
MODUL 5.2 CRUD DGN PHP OOP
No ratings yet
MODUL 5.2 CRUD DGN PHP OOP
6 pages
Controller
No ratings yet
Controller
3 pages
Membuat Crud File Json
No ratings yet
Membuat Crud File Json
10 pages
Pembahasan UKK RPL 2023-2024
No ratings yet
Pembahasan UKK RPL 2023-2024
27 pages
File Extensions
No ratings yet
File Extensions
75 pages
SDLC RUP System Architecture Document
No ratings yet
SDLC RUP System Architecture Document
6 pages
All Tables
No ratings yet
All Tables
43 pages
Phaneendra Kumar
100% (1)
Phaneendra Kumar
2 pages
Cloudera Hue
No ratings yet
Cloudera Hue
119 pages
iTHINK User Manual English PDF
No ratings yet
iTHINK User Manual English PDF
28 pages
Multimedia Programming: Scripting (Lingo)
No ratings yet
Multimedia Programming: Scripting (Lingo)
29 pages
Tablet Computer Model No. FZ-G1 Series Operating Instructions - Reference Manual
No ratings yet
Tablet Computer Model No. FZ-G1 Series Operating Instructions - Reference Manual
145 pages
Log
No ratings yet
Log
39 pages
Software Engineer CV Rishabh Copy
No ratings yet
Software Engineer CV Rishabh Copy
1 page
Bar 39 F
No ratings yet
Bar 39 F
12 pages
VPH Issue 2 2v6 ISSUE2
No ratings yet
VPH Issue 2 2v6 ISSUE2
36 pages
Unit 2 BCA
No ratings yet
Unit 2 BCA
13 pages
Final Project Programming 2 - Lab
No ratings yet
Final Project Programming 2 - Lab
7 pages
Step7 Keycontrol Edit e
No ratings yet
Step7 Keycontrol Edit e
3 pages
Guide YRC1000 To Omron NX-NJ by EtherNetIP Rev0
No ratings yet
Guide YRC1000 To Omron NX-NJ by EtherNetIP Rev0
14 pages
Aws Docker Spring Boot
No ratings yet
Aws Docker Spring Boot
15 pages
Room Booking System CLI Guide
No ratings yet
Room Booking System CLI Guide
5 pages
File Upload Servlet
No ratings yet
File Upload Servlet
4 pages
WDF Flyer
No ratings yet
WDF Flyer
2 pages
Keyboard Shortcuts
No ratings yet
Keyboard Shortcuts
6 pages
Yard Management System For Efficient Trailer Dispatches
No ratings yet
Yard Management System For Efficient Trailer Dispatches
7 pages
Excel To PDF Missing Text
No ratings yet
Excel To PDF Missing Text
2 pages
React Portfolio App Development: Increase your online presence and create your personal brand
From Everand
React Portfolio App Development: Increase your online presence and create your personal brand
Abdelfattah Ragab
No ratings yet
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
From Everand
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
Thomas Curley
No ratings yet

Laprak Modul 17

Uploaded by

Laprak Modul 17

Uploaded by

PENGEMBANGAN APLIKASI WEBSITE

PROGRAM STUDI SISTEM INFORMASI

TELKOM UNIVERSITY SURABAYA

class EmployeeSeeder extends Seeder

 Jalankan file seeder tersebut via Artisan seperti di bawah ini.

 Install packages Laravel DataTables via composer

 Install aset-aset DataTables yang dibutuhkan via NPM

 Registrasikan aset aset DataTables pada file /resources/js/app.js seperti yang

 Registrasikan aset-aset DataTables pada file /resources/sass/app.scss seperti

import axios from 'axios';

import $ from 'jquery';

 Buka file base layout pada /resources/views/layouts/app.blade.php kemudian

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

 Buat Route baru pada /routes/web.php dengan URI /getEmployees, mengarahkan

Route::get('getEmployees', [EmployeeController::class, 'getData'])-

 Buat method getData() pada EmployeeController seperti di bawah ini.

public function getData(Request $request)

 Sesuaikan method index() pada EmployeeController seperti kode program di

public function index()

 Buka file view pada /resources/views/employee/index.blade.php kemudian

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

 Install package SweetAlert via composer

 Buka file base layout pada /resources/views/layouts/app.blade.php kemudian

 Publish aset dari SweetAlert via Artisan.

 Buka EmployeeController dan letakkan SweetAlert pada method store(), update()

public function store(Request $request)

Alert::success('Added Successfully', 'Employee Data Added

public function update(Request $request, string $id)

// Handle file upload

// Simpan file baru

Alert::success('Changed Successfully', 'Employee Data Changed

public function destroy(string $id)

Alert::success('Deleted Successfully', 'Employee Data Deleted

 Buka file view pada /resources/views/employee/actions.blade.php kemudian

<div class="d-flex"><a href="{{ route('employees.show', ['employee' =>

 Buka file view pada /resources/views/employee/index.blade.php kemudian

<table class="table table-bordered table-hover table-striped mb-0 bg-

 Buka file view pada /resources/views/employee/index.blade.php kemudian

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

 Sesuaikan method index() pada EmployeeController seperti kode program di

public function index()

 Install Laravel Excel via Composer.

 Buka file view pada /resources/views/employee/index.blade.php kemudian buat

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

 Buat Route baru pada /routes/web.php dengan URI /exportExcel, mengarahkan ke

Route::get('exportExcel', [EmployeeController::class, 'exportExcel'])-

 Edit atau ubah file EmployeesExport, sesuaikan seperti di bawah ini.

 Buat file view baru dengan nama export_excel.blade.php pada direktori

 Buat method exportExcel() pada EmployeeController seperti kode program di

public function exportExcel()

4. Penerapan Laravel Dompdf

 Install Laravel DomPdf via Composer.

 Buka file view pada /resources/views/employee/index.blade.php kemudian buat

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

 Buat Route baru pada /routes/web.php dengan URI /exportPdf, mengarahkan ke

 Buat file view baru dengan nama export_pdf.blade.php pada direktori

 Buat method exportPdf() pada EmployeeController seperti kode program di bawah

public function exportPdf()

$(".datatable").on("click", ".btn-delete", function (e) {

 Buka file /resources/js/app.js kemudian import file employee.js.

6. Penerapan Laravel Charts (Larapex)

 Install Larapex Charts via Composer.

 Publish file konfigurasi dengan menjalankan command script seperti di bawah

 Edit atau ubah file EmployeesChart pada direktori \app\Charts\, sesuaikan

public function __construct(LarapexChart $chart)

public function build(): \ArielMejiaDev\LarapexCharts\BarChart

 Sesuaikan method index() pada HomeController.php seperti kode program

 Buka file view pada /resources/views/home.blade.php kemudian edit atau

<script src="{{ $chart->cdn() }}"></script>

 Buka file view pada /resources/views/employee/index.blade.php, nonaktifkan

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

<div class="modal fade" id="createEmployee" tabindex="-1" aria-

 Buka file EmployeeController.php pada direktori /app/Http/Controllers.

You might also like