1 PERSIAPAN

Komponen aplikasi yang dibutuhkan untuk melakukan pemrograman

menggunakan laravel
1. Xampp terbaru dengan minimal php 8.1
2. Code editor menggunakan visual studio (vs. code)
3. Composer versi 2
4. Node.Js
Langkah-langkah
Langkah pertama dalam membangung aplikasi untuk kebutuhan UKK
pembuatan Album Gallery Foto kita harus menjalankan dua services apache
sebagai webserver aplikasi web kita, dan satu lagi services mysql sebagai
database yang akan kita gunakan untuk menyimpan data, seperti terlihat
pada gambar dibawah ini.

Gambar. Menjalankan services apache dan mysql

Untuk melakukan installasi Laravel kita harus menginstall compser terlebih
dahulu. Composer sendiri merupakan aplikasi package manager yang
bertugas untuk melakukan installasi file php, baik yang berhubungan
dengan library ataupun framework php lainnya. Pada modul ini tidak akan
dibahas cara installasi composer dan xampp, dengan asumsi bahwa

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

pengelola Lab Komputer sudah melakukan installasi aplikasi yang
dibutuhkan untuk UKK.
Langkah selanjutnya adalah buka command prompt (cmd) lalu ketikan
perintah untuk masuk kefolder installasi xampp, jika folder xampp berada
pada direktori D: maka ketik pada cmd perintah D: kemudian enter
Seperti pada gambar dibawah ini

Atau jika direktori xampp ada pada folder C atau F maka perintahnya sama
tinggal ketikan perintah C: enter atau F: enter. Langkah selanjutnya adalah
masuk kedalam direktori xampp/htdocs dengan perintah cd xampp\htdocs
enter.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Setelah itu ketikan perintah untuk installasi laravel dengan mengetikan
perintah
composer create-project laravel/laravel=9.0 belajar
composer adalah perintah utama yang menerangkan bahwa laravel diinstall
melalui aplikasi composer. create-project laravel/laravel=9.0 berarti kita akan
membuat projek laravel menggunakan versi 9.0 dan perintah belajar berarti
nama projek yang kita buat adalah belajar. Nama belajar disini bisa diganti
sesuai dengan nama projek yang diinginkan, digambar bawah ini saya
memberi nama projeknya dengan nama belajar.

Tunggu sampai muncul keterangan bahwa laravel telah sukses terinstall.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Selanjutnya masuk kedalam folder belajar dengan perintah cd belajar

Setelah masuk kedalam folder project kita selanjutnya kita ketikan

perintah untuk menjalankan projek yang telah kita buat Dengan perintah
php artisan serve

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Kemudian kita browser (google chrome, firefox, atau microsoft edge dan
lainnya) ketikan 127.0.0.1:8000 atau localhost:8000 maka tampilan awal
laravel akan tampil seperti dibawah ini

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

2. Installasi User Login Laravel UI

Tahapan pertama dalam melakukan pemrograman laravel buka aplikasi

visual code, lalu buka folder project yang telah dibuat tadi dengan
menekan menu file->open folder.

Lalu pilih folder project laravel yang telah dibuat yaitu belajar.

Tampilan visual studio code setelah project laravel dibuka akan seperti
dibawah ini.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Kemudian buka browser untuk membuat database. Ketik pada url browser
localhost/phpmyadmin
kemudian dibagian kanan klik tombol baru lalu masukan nama database
yang akan digunakan untuk projek disini nama database yang dibuat
adalah ukk lalu klik go atau buat.

Hasil database yang telah dibuat akan terlihat seperti dibawah ini.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Perintah didalam laravel bisa dibuat di command prompt (cmd) windows,
bisa juga menggunakan terminal langsung laravel. Untuk membuka
terminal laravel tinggal klik menu terminal->new terminal.

Kemudian ketik perintah untuk menginstall user login autentikasi

menggunakan laravel ui dengan perintah
Composer require laravel/ui=3.4

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Tunggu sampai proses installasi selesai seperti gambar dibawah ini.

Setelah itu ketikan perintah untuk menginstall tampilan bootstrap untuk

login yan akan kita buat dengan perintah
php artisan ui bootstrap --auth

Tunggu sampai proses installasi selesai.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Setelah bootstrap ui selesai diinstall selanjutnya ketik perintah
npm install

Tunggu sampai proses selesai.

Perintah selanjutnya melakukan installasi laravel mix dengan perintah

npm install laravel-mix

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Tunggu sampai proses installasi selesai.

Ketik perintah untuk menjalankan laravel-mix dengan perintah

npx mix

Silahkan refresh dengan menekan tombol refresh pada browser atau

dengan menekan tombol F5 pada keyboard maka akan ada menu login dan
register dibagian kanan atas untuk melakukan login dan registrasi.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024
3 ALTERNATIF PEMBUATAN DATABASE (PHPMYADMIN)

Langkah pertama buka browser kemudian ketika localhost/phpmyadmin

lalu enter. Setelah database terbuka kemudian lihat bagian kiri dan klik
new atau baru dalam bahasa Indonesia seperti pada gambar dibawah ini

setelah itu beri nama pada bagian tengah create database atau ciptakan
database. Berikan nama sesuai yang diinginkan lalu klik create.

Pada modul ini nama database yang dibuat adalah belajar, setelah
database dibuat selanjutnya adalah membuat tabel baru.

berikan nama tabel users dengan isi kolom sebanyak 8 kolom seperti
dibawah ini lalu klik simpan atau save.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Sehingga menghasilkan

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

3 ALTERNATIF 1 PEMBUATAN DATABASE (MIGRASI DATABASE)

Untuk membuat tabel yang dibutuhkan dalam laravel sangat sederhana,

cukup dengan membuat migrasi di laravel sehingga tabel-tabel yang
dibutuhkan langsung dibuat. Berikut adalah perintah untuk membuat
migrasi database.
php artisan make:migration gallery_table

Maka hasilnya akan tampil sesuai tanggal pembuatan migrasi, silahkan

buka migrasi tabel yang telah dibuka pada bagian database->migration-
>tanggal_pembuatan_gallery_table

Ketika pertama kali dibuka isi dari migrasi masih bawaan hany berisi id dan
timestamp, silahkan tambahkan data yang diinginkan sesuai kebutuhan.
public function up()
{
Schema::create('gallery', function (Blueprint $table) {
$table->id();

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 $table->integer('id_kategory');
$table->integer('id_user'); public function up()

{
Schema::create('gallery', function (Blueprint $table) {
$table->id();
$table->integer('id_kategory');
$table->integer('id_user');
$table->char('namagambar',100);
$table->string('gambar');
$table->string('keterangan')->nullable();
$table->timestamps();
});

Kemudian buat lagi migrasi untuk kategori dengan cara yang sama
sampai keluar notifikasi sukses.

Buka hasil pembuatan mikrasi kategori lalu masukan data yang

dibutuhkan
public function up()
{
Schema::create('category', function (Blueprint $table) {
$table->id();
$table->char('nama_kategori',100);
$table->timestamps();
});
}
Buka migrasi yang bernama ujungnya users pada migrasi user tersebut
tambahkan level untuk levelisasi user sehingga kode migrasi user menjadi
sebagai berikut.
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->enum('level',['admin','user']);
$table->rememberToken();
$table->timestamps();
});
}

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Sebelum menjalankan migrasi tabel yang telah dibuat, terlebih dahulu
kita harus konfigurasi database untuk menghubungkan laravel dengan
database yang kita gunakan. Buka file pada folder Belajar->.env jika
tidak ada file .env maka kita rename dulu .env.example menjadi .env
setelah itu ganti isi .env pada bagian mysql menjadi seperti dibawah ini.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ukk
DB_USERNAME=root
DB_PASSWORD=
Setelah migrasi selesai dibuat langkah selanjutnya menjalankan migrasi
dengan perintah
php artisan migrate

Buka database phpmyadmin pada browser dengan perintah seperti diatas

yaitu localhost/phpmyadmin, maka lihat tabelnya sudah masuk semua

Untuk mencoba database yang dibuat sudah terkoneksi dengan laravel

silahkan buka localhost:8000 kemudian klik menu register dibagian atas
kanan lalu isi datanya.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Pembuatan login pada laravel sudah selesai.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

4 Desain Tampilan Landing

Pertama dalam pembuatan desain landing page kita buat terlebih dahulu
bagian header yang nantinya dipanggil oleh beberapa page (halaman)
web. Halaman yang pertama kali di load oleh web pada laravel bernama
welcome.blade.php kita akan melakukan perubahan pada file tersebut.
Pertama kita buat file bernama header.blade.php dengan cara klik kanan
pada folder view terus pilih new file kemudian beri nama
header.blade.php

lalu buka file welcome.blade.php pada folder view lalu copy bagian
<!doctype html>
Sampai dengan bagian
</head>
Ganti bagian title menjadi judul web
<title>UKK RPL</title>
Tambahkan url untuk memanggil bootstrap dengan cara buka web resmi
bootstrap https://getbootstrap.com/docs/5.3/getting-
started/introduction/ kemudian pilih menu download

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Scroll kebawah cari bagian cdn lalu copy bagian code cdn

Paste dibagian kode antara <head> dan </head> tepatnya dibawah title
seperti dibawah ini

Kemudian tambahkan kode dibawah ini setelah bagian </head>

sesuaikan kode yang telah dicopy menjadi seperti dibawah ini.

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

<nav class="navbar navbar-expand-lg bg-info border-bottom border-warning">
<div class="container">
<a class="navbar-brand" href="#"><img src="{{asset('image/logo.png')}}"
width="50rem"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link btn btn-secondary text-white" href="#">Home</a>
</li>
<div class="vr"></div>
@if (Route::has('login'))
@auth
@if (Auth::user()->level == 'admin')
<li class="nav-item">
<a class="nav-link btn btn-secondary text-white" href="{{
url('/kategori') }}">Kategori</a>
</li>
<div class="vr"></div>
<li class="nav-item">
<a class="nav-link btn btn-secondary text-white" href="{{
url('/gallery') }}">Gallery Foto</a>
</li>
<div class="vr"></div>
@else
<li class="nav-item">
<a class="nav-link btn btn-secondary text-white" href="{{
url('/kategori') }}">Kategori</a>
</li>
<div class="vr"></div>
<li class="nav-item">
<a class="nav-link btn btn-secondary text-white" href="{{
url('/gallery') }}">Gallery</a>
</li>
<div class="vr"></div>
@endif
<li class="nav-item">
<a class="nav-link btn btn-danger text-white" href="{{
route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}</a>
</li>

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 <form id="logout-form" action="{{ route('logout') }}" method="post"
class="d-none">
@csrf
</form>
@else
<li class="nav-item">
<a href="{{ route('login') }}" class="nav-link btn btn-success">Log
in</a>
</li>
@if (Route::has('register'))
<div class="vr"></div>
<li class="nav-item"> <a href="{{ route('register') }}" class="nav-
link btn btn-danger">Register</a></li>
@endif
@endauth
</div>
@endif
</li>
</ul>
</div>
</div>
</nav>

Buka file welcome.blade.php kemudian dibagian paling atas ketik

perintah
@include('header')

Kemudian buka bootstrap scroll kebawah cari menu carousel disebelah

kiri

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Scroll kebawah cari contoh slider yang mau dipakai, lalu copy kode
dibawahnya

Copy kode ini

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Ubah data image (gambar) bawaan bootstrap dengan gambar yang telah
dibuat untuk keperluan ukk. Sesuaikan nama file gambarnya seperti
gambar dibawah ini pada bagian <img src=... diganti dengan perintah
{{asset(‘/image/gambar.jpg’)}}

Sesuaikan gambar.jpg dengan nama gambar yang digunakan, ganti

semua bagian <img=... dengan kode {{asset

Silahkan refresh browser Sehingga tampilannya akan sesuai dengan

gambar yang telah dibuat

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

KONFIGURASI FILE HOME.BLADE.PHP

Buka file home.blade.php yang ada pada folder resource->view-

>home.blade.php lalu copy semua file yang ada di welcome.blade.php
dan paste di home.blade.php. Akan tetapi jika menginginkan tampilan
home yang berbeda bisa disesuaikan.
@include('header')
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-
slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-
slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-
slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{asset('/image/back.jpg')}}" class="d-block w-100" height=""
alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('/image/back2.jpg')}}" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('/image/back3.jpg')}}" class="d-block w-100"
alt="...">
</div>

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 </div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

Silahkan coba login pada web yang telah dibuat maka seharusnya bagian
header berubah menjadi seperti ini

5 KONFIGURASI KATEGORI.BLADE.PHP

hal pertama untuk membuat halaman kategori adalah buka file pada folder
route->web.php

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Selanjutnya setelah web.php pada folder route dibuka tambahkan routing
untuk akses kategori
Route::get('/kategori', [App\Http\Controllers\HomeController::class,
'kategori'])->name('kategori');

Sehingga tampilan seperti dibawah ini.

Buat file baru di view dengan cara klik kanan pada folder view lalu pilih new
file dan berinama kategori.blade.php

Isi dengan kode berikut

@include('header')
<div class="card container mb-3 mt-3">
<a href="{{url('/tambahkategori')}}" class="btn btn-success col-md-2 mb-2
mt-2">Tambah Kategori </a>

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 <div class="card-header">
Kategori Gallery Foto
</div>
<div class="card-body row ">
@if ($message = Session::get('sukses'))
<div class="alert alert-success alert-block">
<strong>{{ $message }}</strong>
</div>
@endif
<table class="table bordered">
<tr>
<td>No</td>
<td>Nama Kategori</td>
<td>Aksi</td>
</tr>
@forelse($data as $b)
<tr>
<td>{{$loop->iteration}}</td>
<td>{{$b->nama_kategori}}</td>
<td><a href="{{url('detail/'.$b->id.'/')}}" class="btn btn-
primary">Lihat Gallery</a>
<a href="{{url('editkategori/'.$b->id.'/')}}" class="btn
btn-secondary">Edit</a>
<a href="{{url('hapuskategori/'.$b->id.'/')}}" class="btn
btn-danger" onclick="return confirm('Apakah anda yakin ingin menghapus
data?')">Hapus</a>
</td>
</tr>
@empty
@endforelse
</table>
</div>
</div>

Buka folder app->http->controller->HomeController.php

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Lakukan import namespace pada bagian paling atas controller laravel

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\File;

Tambahkan kode berikut dibawah tanda kurung kurawan index

public function kategori()
{
$data=DB::table('category')->get();
return view('kategori',compact('data'));
}
Sehingga menjadi seperti ini
public function index()
{
return view('home');
}
public function kategori()
{
$data=DB::table('category')->get();
return view('kategori',compact('data'));
}
Selanjutnya buka lagi file web.php pada folder route->web.php dan
tambahkan lagi route untuk tambah kategori
Route::get('/tambahkategori', [App\Http\Controllers\HomeController::class,
'tambahkategori'])->name('tambahkategori');

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Sehingga kode route menjadi
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
return view('welcome');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])-

>name('home');
Route::get('/kategori', [App\Http\Controllers\HomeController::class,
'kategori'])->name('kategori');
Route::get('/tambahkategori', [App\Http\Controllers\HomeController::class,
'tambahkategori'])->name('tambahkategori');
Buka lagi app->http->controller->HomeController.php
Tambahkan fungsi untuk tambah kategori sehingga kode pada
Homecontroller.php jadi seperti ini
public function index()
{
return view('home');
}
public function kategori()
{
$data=DB::table('category')->get();
return view('kategori',compact('data'));
}
public function tambahkategori()
{
return view('tambahkategori');
}
Klik kanan lagi folder view pilih new file dan beri nama tambahkategori.php

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Isi file tersebut dengan kode dibawah ini
@include('header')
<form method="post" action="{{ url('postkategori') }}"
enctype="multipart/form-data">
@csrf
<div class="card container mt-3">
<div class="card-header">Tambah Kategori Gambar Gallery</div>
<div class="card-body">

<div class="row mb-3">

<label for="nama" class="col-md-3 col-form-label text-md-
end">Nama Kategori</label>
<div class="col-md-8">
<input type="text" class="form-control" name="nama"
required>
</div>
</div>

</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-end"></label>
<div class="col-md-8">
<input type="submit" name="save" id="save" class="btn btn-md btn-
info col-md-3" value="Simpan">
</div>
</div>
</div>
</form>

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Buka lagi route->web.php dan tambahkan kode ini dibawah route
tambahkategori
Route::post('/postkategori', [App\Http\Controllers\HomeController::class,
'postkategori'])->name('postkategori');
Buka kembali app->http->controller->HomeController.php
Tambahkan kode berikut dibawah kurung penutup function tambahkategori
public function postkategori(Request $request)
{
DB::table('category')->insert(

[
'nama_kategori' => $request->nama,
]
);
return redirect('/kategori')
->with('sukses', 'Berhasil Menambah Kategori');
}
Hasilnya bisa dilihat

Selanjutnya kita akan melakukan edit data kategori, buka route->web.php

lalu tambahkan editkategori
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
return view('welcome');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])-

>name('home');

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Route::get('/kategori', [App\Http\Controllers\HomeController::class,
'kategori'])->name('kategori');
Route::get('/tambahkategori', [App\Http\Controllers\HomeController::class,
'tambahkategori'])->name('tambahkategori');
Route::post('/postkategori', [App\Http\Controllers\HomeController::class,
'postkategori'])->name('postkategori');
Route::get('/editkategori/{id}', [App\Http\Controllers\HomeController::class,
'editkategori'])->name('editkategori');
Kemudian buka app->http->controller->HomeController.php tambahakan
editkategori dibawah penutup postkategori
public function editkategori($id)
{
$data= DB::table('category')->where('id',$id)->first();
return view('/editkategori',compact('data'));
}
Kemudian buat file baru di view, dengan nama editkategori.blade.php
@include('header')
<form method="post" action="{{ url('updatekategori') }}"
enctype="multipart/form-data">
@method('put')
@csrf
<div class="card container mt-3">
<div class="card-header">Edit Kategori Gambar Gallery</div>
<div class="card-body">

<div class="row mb-3">

<label for="nama" class="col-md-3 col-form-label text-md-
end">Nama Kategori</label>
<div class="col-md-8">
<input type="hidden" name="id" required value="{{$data-
>id}}">
<input type="text" class="form-control" name="nama" required
value="{{$data->nama_kategori}}">
</div>
</div>

</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-end"></label>
<div class="col-md-8">
<input type="submit" name="save" id="save" class="btn btn-md btn-
info col-md-3" value="Update">
</div>
</div>
</div>
</form>
Ketika dijalankan harusnya seperti ini

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Buka lagi route->web.php tambahkan lagi route updatekategori
Route::get('/', function () {
return view('welcome');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])-

>name('home');
Route::get('/kategori', [App\Http\Controllers\HomeController::class,
'kategori'])->name('kategori');
Route::get('/tambahkategori', [App\Http\Controllers\HomeController::class,
'tambahkategori'])->name('tambahkategori');
Route::post('/postkategori', [App\Http\Controllers\HomeController::class,
'postkategori'])->name('postkategori');
Route::get('/editkategori/{id}', [App\Http\Controllers\HomeController::class,
'editkategori'])->name('editkategori');
Route::put('/updatekategori', [App\Http\Controllers\HomeController::class,
'updatekategori'])->name('updatekategori');
Buka lagi app->http->controller->HomeController, tambahkan function
updatekategori
public function updatekategori(Request $request)
{
DB::table('category')->where('id',$request->id)->update(
[
'nama_kategori' => $request->nama,
]
);
return redirect('/kategori')->with('sukses', 'Berhasil Mengubah
kategori Foto gallery');
}
Sehingga ketika dilakukan perubahan kategori menjadi seperti ini

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Sekarang kita akan melakukan penghapusan data kategori, Buka route-
>web.php tambahkan route hapuskategori
Route::get('/', function () {

return view('welcome');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])-

>name('home');
Route::get('/kategori', [App\Http\Controllers\HomeController::class,
'kategori'])->name('kategori');
Route::get('/tambahkategori', [App\Http\Controllers\HomeController::class,
'tambahkategori'])->name('tambahkategori');
Route::post('/postkategori', [App\Http\Controllers\HomeController::class,
'postkategori'])->name('postkategori');
Route::get('/editkategori/{id}', [App\Http\Controllers\HomeController::class,
'editkategori'])->name('editkategori');
Route::put('/updatekategori', [App\Http\Controllers\HomeController::class,
'updatekategori'])->name('updatekategori');
Route::get('/hapuskategori/{id}', [App\Http\Controllers\HomeController::class,
'hapuskategori'])->name('hapuskategori');
Buka app->http->controller->HomeController.php tambahkan function
hapuskategori
public function hapuskategori($id)
{
DB::table('category')->where('id',$id)->delete();
return redirect('/kategori')->with('hapus','Berhasil Menghapus data');
}
Sehingga ketika ingin menghapus data akan muncul popup

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Ketika diklik ok maka data akan terhapus.

Terakhir pada menu kategori kita akan melakukan konfigurasi pada tombol
lihat gallery, buka route->web.php tambahan route lihat gallery
berdasarkan kategori yang dipilih
Route::get('/hapuskategori/{id}', [App\Http\Controllers\HomeController::class,
'hapuskategori'])->name('hapuskategori');
Route::get('/detail/{id}', [App\Http\Controllers\HomeController::class,
'detail'])->name('detail');

Buka kembail app->http->controller->HomeController.php tambahkan

function detail
public function detail($id)
{
$data=DB::table('gallery')->where('id_kategori',$id)->get();
return view('detail',compact('data'));
}
Buat file baru di view dengan nama detail.blade.php

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Isi dengan kode dibawah ini

Sehingga ketika diklik detail gallery akan tampil sesuai Id kategori

Data gallery dengan id 2 masih kosong

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

6 PEMBUATAN MENU GALLERY

Pertama kita buka terlebih dahulu route->web.php kemudian tambahkan

route untuk gallery dibawah detail
Route::get('/hapuskategori/{id}', [App\Http\Controllers\HomeController::class,
'hapuskategori'])->name('hapuskategori');
Route::get('/detail/{id}', [App\Http\Controllers\HomeController::class,
'detail'])->name('detail');
Route::get('/gallery', [App\Http\Controllers\HomeController::class,
'gallery'])->name('gallery');
Kemudian buka HomeController.php tambahkan function gallery dibawah
detail
public function gallery()
{
$data=DB::table('gallery')->get();
return view('gallery',compact('data'));
}
Lalu buat file baru di folder view dengan nama gallery.blade.php kemudian
masukan kode berikut pada file tersebut
@include('header')
<div class="card container mb-3 mt-3">
<a href="{{url('/tambahgambar')}}" class="btn btn-success col-md-2 mb-2
mt-2">Tambah Gambar </a>
<div class="card-header">
Gallery Foto
</div>
@if ($message = Session::get('sukses'))
<div class="alert alert-success alert-block">
<strong>{{ $message }}</strong>
</div>
@endif
@if ($message = Session::get('hapus'))
<div class="alert alert-danger alert-block">
<strong>{{ $message }}</strong>
</div>
@endif
<div class="card-body row ">
@forelse($data as $b)
<div class="col-md-3">
<img src="{{asset('')}}image/{{$b->gambar}}" class="card-img-top"
alt="...">
<div class="card-body">
<h4 class="card-text text-center">{{$b->namagambar}}</h4>

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 <p class="card-text text-center">{{$b->keterangan}}</p>
<p class="card-text text-center">
<a href="{{url('edit/'.$b->id.'/')}}" class="btn btn-
secondary">Edit</a>
<a href="{{url('hapus/'.$b->id.'/')}}" class="btn btn-
danger" onclick="return confirm('Apakah anda yakin ingin menghapus
data?')">Hapus</a>
</p>
</div>
</div>
@empty
Data Masih Kosong
@endforelse
</div>
</div>

Sekarang silahkan klik menu gallery

Data masih kosong, sekarang kita akan membuat fasilitas tambah data
pertama biasa kita buka dulu route->web.php dan tambahkan route
tambah gambar
Route::get('/detail/{id}', [App\Http\Controllers\HomeController::class,
'detail'])->name('detail');
Route::get('/gallery', [App\Http\Controllers\HomeController::class,
'gallery'])->name('gallery');
Route::get('/tambahgambar', [App\Http\Controllers\HomeController::class,
'tambahgambar'])->name('tambahgambar');
Kemudian buka HomeController.php dan tambahkan function
tambahgambar dibawah gallery
public function tambahgambar()
{
return view('tambahgambar');
}
Kemudian buat file baru di folder view dengan nama tambahgambar dan isi
dengan kode berikut
@include('header')
<form method="post" action="{{ url('postgambar') }}" enctype="multipart/form-
data">

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 @csrf
<div class="card container mt-3">
<div class="card-header">Tambah Gambar Gallery</div>
<div class="card-body">
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-
end">Kategori</label>
<div class="col-md-8">
<select name="kategori" class="form-control">
@forelse($data as $d)
<option value="{{$d->id}}">{{$d-
>nama_kategori}}</option>
@empty
@endforelse
</select>
</div>
</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-
end">Nama Gambar</label>
<div class="col-md-8">
<input type="text" class="form-control" name="nama"
required>
</div>
</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-
end">Foto Gallery</label>
<div class="col-md-8">
<input id="nama" type="file" class="form-control"
name="gambar" required accept=".jpg,.png,.bmp">
</div>
</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-
end">Keterangan</label>
<div class="col-md-8">
<textarea name="ket" class="form-control"
style="height:17rem"></textarea>
</div>
</div>

</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-
end"></label>
<div class="col-md-8">

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 <input type="submit" name="save" id="save" class="btn btn-md
btn-info col-md-3" value="Simpan">
</div>
</div>
</div>
</form>
Kemudian buka lagi route->web.php dan tambahkan route untuk
menyimpan gambar dibawah tambahgambar
Route::get('/gallery', [App\Http\Controllers\HomeController::class,
'gallery'])->name('gallery');
Route::get('/tambahgambar', [App\Http\Controllers\HomeController::class,
'tambahgambar'])->name('tambahgambar');
Route::post('/postgambar', [App\Http\Controllers\HomeController::class,
'postgambar'])->name('postgambar');
Buka lagi HomeController.php dan tambahkan function untuk simpan data
gambar
public function postgambar(Request $request)
{
if ($request->hasFile('gambar')) {
$extFile = $request->gambar->getClientOriginalExtension();
$namaFile = 'gambar-' . time() . "." . $extFile;
$request->gambar->move('image', $namaFile);
} else {
$namaFile = '';
}
DB::table('gallery')->insert(

[
'id_user'=>Auth::user()->id,
'id_kategory'=>$request->kategori,
'namagambar' => $request->nama,
'gambar'=>$namaFile,
'keterangan' => $request->ket,
]
);
return redirect('/gallery')
->with('sukses', 'Berhasil Menambah Gambar Gallery');
}
Tampilan ketika tambah data

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Dan ketika dimasukan data maka gambar berhasil ditambahkan

Melakukan edit data pada gallery buka route->web.php tambahkan route

edit gallery
Route::get('/tambahgambar', [App\Http\Controllers\HomeController::class,
'tambahgambar'])->name('tambahgambar');
Route::post('/postgambar', [App\Http\Controllers\HomeController::class,
'postgambar'])->name('postgambar');
Route::get('/edit/{id}', [App\Http\Controllers\HomeController::class,
'edit'])->name('edit');
Kemudian tambahkan function edit pada HomeController.php
public function edit($id)

{
$kategori=DB::table('category')->get();
$data= DB::table('gallery')->where('id',$id)->first();

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 return view('/editgallery',compact('data','kategori'));
}
Tambahkan file baru pada folder view dan beri nama editgallery.blade.php
isi file tersebut dengan kode
@include('header')
<form method="post" action="{{ url('updategambar') }}"
enctype="multipart/form-data">
@method('put')
@csrf
<div class="card container mt-3">
<div class="card-header">Edit Gambar Gallery</div>
<div class="card-body">
<input type="text" class="form-control" name="id" required value="{{
$data->id }}" hidden>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-
end">Kategori</label>
<div class="col-md-8">
<select name="kategori" class="form-control">
@forelse($kategori as $d)
<option value="{{$d->id}}">{{$d-
>nama_kategori}}</option>
@empty
@endforelse
</select>
</div>
</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-
end">Nama Gambar</label>
<div class="col-md-8">
<input type="text" class="form-control" name="nama"
required value="{{ $data->namagambar }}">
</div>
</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-
end">Foto Gallery</label>
<div class="col-md-8">
<img src="{{asset('')}}image/{{$data->gambar}}"
width="100rem">
<input id="nama" type="file" class="form-control"
name="gambar" required accept=".jpg,.png,.bmp">
</div>
</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-
end">Keterangan</label>

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 <div class="col-md-8">
<textarea name="ket" class="form-control"
style="height:17rem">{{ $data->keterangan }}</textarea>
</div>
</div>

</div>
<div class="row mb-3">
<label for="nama" class="col-md-3 col-form-label text-md-end"></label>
<div class="col-md-8">
<input type="submit" class="btn btn-md btn-info col-md-3"
value="Update">
</div>
</div>
</div>
</form>
Buat kembali route->web.php untuk menampung update data
Route::post('/postgambar', [App\Http\Controllers\HomeController::class,
'postgambar'])->name('postgambar');
Route::get('/edit/{id}', [App\Http\Controllers\HomeController::class,
'edit'])->name('edit');
Route::put('/updategambar', [App\Http\Controllers\HomeController::class,
'updategambar'])->name('updategambar');
Tambahkan function update gambar pada HomeController.php
public function updategambar(Request $request)
{
$datalama = DB::table('gallery')->where('id', $request->id)->first();
if ($request->hasFile('gambar')) {
$extFile = $request->gambar->getClientOriginalExtension();
$namaFile = 'gambar-' . time() . "." . $extFile;
$request->gambar->move('image', $namaFile);
$fotolama = 'image/' . $datalama->gambar;
if (File::exists($fotolama)) {
File::delete($fotolama);
}
} else {
$namaFile = $datalama->gambar;
}
DB::table('gallery')->where('id',$request->id)->update(
[
'id_user'=>Auth::user()->id,
'id_kategory'=>$request->kategori,
'namagambar' => $request->nama,
'gambar' => $namaFile,
'keterangan' => $request->ket,
]
);

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

 return redirect('/gallery')->with('sukses', 'Berhasil Mengubah Foto
gallery');
}
Berhasil mengubah data

Terakhir melakukan hapus data, kita akan menghapus salah satu foto yang
telah dibuat

Buka route->web.php tambahkan routing hapus dibawah route update

Route::get('/edit/{id}', [App\Http\Controllers\HomeController::class,
'edit'])->name('edit');
Route::put('/updategambar', [App\Http\Controllers\HomeController::class,
'updategambar'])->name('updategambar');
Route::get('/hapus/{id}', [App\Http\Controllers\HomeController::class,
'hapus'])->name('hapus');

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024

Kemudian buka HomeController.php dan tambahkan function hapus
public function hapus($id)
{
DB::table('gallery')->where('id',$id)->delete();
return redirect('/gallery')->with('hapus','Berhasil Menghapus data');
}
Kita akan menghapus salah satu gambar, maka akan muncul popup

ketika di klik ok maka akan terhapus

Team Pengajar RPL/PPLG SMKN 1 Narmada 2024