Modul Praktek Mata Kuliah Web Programming

DAFTAR ISI

DAFTAR ISI ................................................................................................................................................. 1

BAGIAN 1:Instalasi XAMPP, Composer dan Laravel .................................................................................. 2
Langkah 1 - Installasi XAMPP .............................................................................................................2
Langkah 1 - Installasi Composer ........................................................................................................ 4
Langkah 2 - Membuat Project Laravel 10 ..........................................................................................5
Langkah 3 - Testing-Menjalankan Project Laravel .............................................................................6
BAGIAN 2:Run XAMPP, Run Laravel, Run Symlink, Konfigurasi MySQL .................................................... 8
1. RUN/HIDUPKAN APACHE DAN MYSQL DI XAMPP .........................................................................8
2. RUN VISUAL STUDIO CODE DAN RUN LARAVEL ARTISAN SERVER ................................................8
3. MENJALANKAN STORAGE LINK ................................................................................................... 10
4. KONFIGURASI KONEKSI DATABASE MySQL DI LARAVEL 10 ........................................................ 11
5. MEMBUAT DATABASE DI MYSQL DENGAN PHPMYADMIN ........................................................ 11
BAGIAN 3: Model dan Migration .............................................................................................................13
1. MEMBUAT MODEL DAN MIGRATION ......................................................................................... 13
2. MENAMBAHKAN FIELD/KOLOM DI DALAM DATABASE ..............................................................13
3. KONFIGURASI MASS ASSIGNMENT ............................................................................................. 14
4. MENJALANKAN MIGRATION ........................................................................................................15
5. MEMBUAT CONTROLLER POST ................................................................................................... 16
6. MEMBUAT ROUTE POSTS ............................................................................................................18
7. MEMBUAT VIEW DAN MENAMPILKAN DATA ............................................................................. 19
8. UJICOBA MENAMPILKAN DATA ...................................................................................................23
BAGIAN 4: Insert Data Ke Dalam database dan Menampilkannya ......................................................... 25
1. MENAMBAH METHOD CREATE DAN STORE ................................................................................25
2. MEMBUAT VIEW FORM CREATE ................................................................................................. 27
3. UJI COBA INSERT DATA POST ...................................................................................................... 29
BAGIAN 5: Menambah Method SHOW Detail Data ................................................................................ 31
1. MENAMBAH METHOD SHOW DI CONTROLLER .......................................................................... 31
2. MEMBUAT VIEW DETAIL POST .................................................................................................... 31
3. UJI COBA MENAMPILKAN DETAIL DATA POST ............................................................................ 33
BAGIAN 6 : Menambah Method Edit dan Update Data .......................................................................... 34
1. MENAMBAH METHOD EDIT DAN UPDATE DI CONTROLLER ....................................................... 34
2. MEMBUAT VIEW FORM EDIT ...................................................................................................... 36
3. UJI COBA EDIT DAN UPDATE DATA POST .................................................................................... 38
BAGIAN 7: Menghapus Data ....................................................................................................................40
1. DELETE DATA DARI DATABASE .................................................................................................... 40
2. UJI COBA DELETE DATA ............................................................................................................... 40

Latihan CRUD Laravel 10 Page 1 of 42

 BAGIAN 1:
Instalasi XAMPP, Composer dan Laravel
Langkah 1 - Installasi XAMPP
Jalankan/run installer XAMPP dengan mode Run As Administrator

Klik Next pada gambar dibawah

Klik Next pada gambar dibawah

Latihan CRUD Laravel 10 Page 2 of 42

Pada gambar dibawah, tekan NEXT dan proses instalasi akan berjalan. Silahakn tunggu sampai proses
instalasi selesai

Latihan CRUD Laravel 10 Page 3 of 42

Langkah 1 - Installasi Composer
Composer merupakan tools dependensi manajer untuk bahasa pemrogramman PHP, sehingga
dengan Composer kita bisa melakukan installasi library-library PHP dengan mudah.
Untuk menginstall Composer, kita harus menyesuaikan sistem operasi yang digunakan, apakah
itu Windows, Linux atau MacOS.
Berikut ini Link installasi Composer berdasarkan sistem operasi, jadi silahkan lakukan installasi
melalui Link berikut ini.
• Installation - Linux / Unix / macOS : https://getcomposer.org/doc/00-intro.md#installation-
linux-unix- macos

• Installation - Windows : https://getcomposer.org/doc/00-intro.md#installation-windows

Ketika install Composer, instalasi Composer akan menanyakan dimana letak php.exe, maka dari
itu mengapa kita harus menginstall XAMPP terlebih dahulu karena php.exe berada didalam XAMPP.
Lihat gambar dibawah

Latihan CRUD Laravel 10 Page 4 of 42

 Lanjutkan instalasi sampai selesai.

Untuk memastikan apakah Composer sudah benar-benar terinstall di dalam komputer, maka
bisa coba jalankan perintah berikut ini di dalam terminal/CMD.

composer

Jika berhasil maka akan keluar hasil sebagai berikut:

Langkah 2 - Membuat Project Laravel 10

INFORMASI: minimal PHP yang digunakan adalah versi 8.1.x .

Di dalam Laravel, ada beberapa cara yang bisa kita gunakan dalam pembuatan sebuah project,
salah satunya adalah composer create-project . Dengan perintah ini, kita bisa menentukan versi
Laravel yang akan kita gunakan dengan lebih mudah.

Latihan CRUD Laravel 10 Page 5 of 42

 Sekarang, silahkan masuk ke dalam folder dimana akan menyimpan pro/ecf-nya, jika
menggunakan XAMPP biasanya berada di dalam folder htdocs .
Setelah itu, silahkan jalankan perintah berikut ini di dalam terminal/CMD.

composer create-project --prefer-dist laravel/laravel:^10.0 crud-laravel-10

Jika perintah di atas berhasil dijalankan, maka kita akan membuat project Laravel baru dengan
versi 10.x.x dan nama dari project-nya adalah crud-laravei-10 .
Silahkan tunggu proses installasinya sampai selesai dan pastikan terhubung dengan internet,
karena semua paketnya akan diunduh secara online.

Langkah 3 - Testing-Menjalankan Project Laravel

Setelah berhasil terinstall, maka selanjutnya kita akan belajar bagaimana cara menjalankan
project Laravel 10 tersebut.
Silahkan jalankan perintah berikut ini di dalam terminal/CMD.

cd crud-laravel-10

Perintah di atas digunakan untuk masuk ke dalam folder project kita yang bernama crud-
laravel-10 . Setelah berhasil masuk di dalam project-nya, sekarang jalankan perintah berikut ini di
dalam terminal/CMD untuk menjalankan server-nya.

php artisan serve

Jika berhasil, maka terminal akan muncul seperti dibawah ini

Latihan CRUD Laravel 10 Page 6 of 42

 project Laravel kita akan dijalankan di dalam localhost dengan port 8000 .Kalian bisa
membukanya di dalam browser dengan mengetikkan http://localhost:8000.
Jika berhasil, maka hasilnya dihalaman web browser akan seperti berikut ini.

Setelah berhasil, matikan kembali server laravel dengan menekan CTRL+C di terminal

Latihan CRUD Laravel 10 Page 7 of 42

 BAGIAN 2:
Run XAMPP, Run Laravel, Run Symlink,
Konfigurasi MySQL
1. RUN/HIDUPKAN APACHE DAN MYSQL DI XAMPP

1. Run Apache dan MySQL di XAMPP

2. RUN VISUAL STUDIO CODE DAN RUN LARAVEL ARTISAN

SERVER
3. Buka Visual Studio Code/VSC, buka File->Open Folder, cari folder crud-laravel-10 dan klik Select
Folder

Latihan CRUD Laravel 10 Page 8 of 42

4. Setelah select folder, buka terminal VCS

5. Didalam terminal ketik php artisan server dan ENTER

6. Pastikan Artisan berjalan

7. Buka browser dan ketikkan 127.0.0.1:8000 atau localhost:8000, pastikan halaman welcome to
laravel muncul

Latihan CRUD Laravel 10 Page 9 of 42

 3. MENJALANKAN STORAGE LINK
Aplikasi kita akan melakukan upload gambar, jadi kita harus menjalankan storage:link agar storage
diaktifkan
8. Kembali ke VSC, tambahkan New Terminal (+) untuk membuka terminal baru tanpa mengganggu
terminal 1 yang sedang menjalankan server Artisan

9. dengan terminal ke 2 yang terbuka ketik

php artisan storage:link
10. dan ENTER. Pastikan storage link sukses terhubung

11. Di VCS, Lihat di panel explorer, dalam folder public, ada folder storage yang sudah berhasil
terhubung dengan ikon panah kecil

Latihan CRUD Laravel 10 Page 10 of 42

 4. KONFIGURASI KONEKSI DATABASE MySQL DI LARAVEL 10
12. Klik file .env untuk emmbuka konfigurasi dasar Laravel 10 dan ubah konfigurasi seperti dibawah ini.
Klik File->Save atau CTRL+S untuk menyimpan file

INGAT!!! DATABASE-NYA BELUM DIBUAT DI MYSQL MELALUI PHPMYADMIN

5. MEMBUAT DATABASE DI MYSQL DENGAN PHPMYADMIN

13. Pastikan Apache dan MySQL running di XAMPP, Buka browser dan ketik
http://localhost/phpmyadmin/ atau http://localhost:8080/phpmyadmin/ (tergantung port mana jalur
APACHE )
14. Masukkan nama database yang PERSIS SAMA dengan nama database yang kita setting di file .env
diatas yaitu crud_laravel_10_db. dan klik CREATE

Latihan CRUD Laravel 10 Page 11 of 42

Latihan CRUD Laravel 10 Page 12 of 42
 BAGIAN 3:
Model dan Migration
1. MEMBUAT MODEL DAN MIGRATION
Setelah Laravel dan database MySQL terhubung, maka kita membuat MODEL dan MIGRATION
15. Kembali ke Terminal VS, jalan perintah :
php artisan make:model Post -m
Kopas saja perinhah ini ke terminal dan ENTER
16. Perintah point 13 diatas akan membuat 2 file baru yaitu app/Models/Post.php dan
database\migrations/2024_05_22_142557_create_posts_table.php (nama file migration akan
random sesuai dengan tanggal dibuat-nya)

2. MENAMBAHKAN FIELD/KOLOM DI DALAM DATABASE

17. Sekarang kita akan membuat table sekaligus menambah field/kolom yang dibutuhkan. Buka file
migration yang barusan kita buat yaitu
database\migrations/2024_05_22_142557_create_posts_table.php
Tambahkan kode dibawah ini dan SAVE (kopas saja, kode adalah baris yang berlatar abu-abu):

Latihan CRUD Laravel 10 Page 13 of 42

 <?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration

{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('image');
$table->string('title');
$table->text('content');
$table->timestamps();
});
}

/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('posts');
}
};

Seperti gambar dibawah:

3. KONFIGURASI MASS ASSIGNMENT

Field atau kolom yang sudah ditambahkan dalam migration tidak akan bisa menyimpan data ke dalam
database sbelum kita melakukan konfigurasi Mass Assignment di dalam MODEL

Latihan CRUD Laravel 10 Page 14 of 42

18. Buka app/Models/Post.php dan tambahkan kode dibawah ini dan SAVE (kopas saja, kode adalah
baris yang berlatar abu-abu):

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model

{
use HasFactory;

/**
* fillable
*
* @var array
*/
protected $fillable = [
'image',
'title',
'content',
];
}

Seperti gambar dibawah

4. MENJALANKAN MIGRATION

19. Agar table dan field-field yang ada di dalam MIGRATION di buat ke dalam database, maka kita
perlu menjalankan perintah migrate
20. Dalam Terminal VSC, jalankan
php artisan migrate
Kopas saja perintah ini ke terminal Dan ENTER, seperti dalam gambar dibawah

Latihan CRUD Laravel 10 Page 15 of 42

21. Buka kembali PHPMYADMIN, untuk memastikan apakah table dan field-field-nya sudah berhasil di
generate oleh MIGRATION

5. MEMBUAT CONTROLLER POST

Kembali ke VSC, Controller digunakan sebagai penghubung antara Model dan View, controller berisi
logika dan fungsi untuk memanipulasi data dari dan ke database yang dikelola oleh Model dan
mengirimkannya ke View
22. Jalankan perintah dibawah ini didalam Terminal VSC (kode adalah baris yang berlatar abu-abu):
php artisan make:controller PostController
23. Kopas saja perintah ini ke terminal Dan ENTER
Perintah membuat file PostController seperti gambar dibawah:

Latihan CRUD Laravel 10 Page 16 of 42

24. Buka file PostController.php dan masukkan kode dibawah dan SAVE (kopas saja, kode adalah baris
yang berlatar abu-abu):

<?php

namespace App\Http\Controllers;

//import Model "Post

use App\Models\Post;

//return type View

use Illuminate\View\View;

use Illuminate\Http\Request;

class PostController extends Controller

{
/**
* index
*
* @return View
*/
public function index(): View
{
//get posts
$posts = Post::latest()->paginate(5);

//render view with posts

return view('posts.index', compact('posts'));
}
}

Seperti gambar dibawah

Latihan CRUD Laravel 10 Page 17 of 42

 6. MEMBUAT ROUTE POSTS
Agar bisa mengakses controller melalui URL/address browser, maka kita perlu membuat ROUTE-nya
terlebih dahulu. Jadi ketika kita memasukkan URL ke browser maka permintaan kita akan diterima
oleh ROUTE, kemudian di teruskan ke CONTROLLER, CONTROLLER akan berkomunikasi dengan
MODEL untuk meminta data dan kemudian CONTROLLER akan meneruskan ke VIEW dan VIEW
menampilkan permintaan kita di halaman web browser.
Diagaram alur-nya seperti dibawah ini:

25. Untuk membuat ROUTE, buka file routes/web.php dan masukkan kode dibawah ini dan SAVE
(kopas saja, kode adalah baris yang berlatar abu-abu)

<?php

Latihan CRUD Laravel 10 Page 18 of 42

 use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

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

//route resource
Route::resource('/posts', \App\Http\Controllers\PostController::class);

Seperti gambar dibawah ini

7. MEMBUAT VIEW DAN MENAMPILKAN DATA

Setalh CONTROLLER dan ROUTE berhasil dibuat, maka sekarang kita akan melanjutkan membuat view
untuk menampilkan data
26. Buat Folder baru dengan nama posts dalam folder resources/views

Latihan CRUD Laravel 10 Page 19 of 42

Menjadi seperti ini:

27. Didalam resources/views/posts, buat sebuah file yaitu index.blade.php

Latihan CRUD Laravel 10 Page 20 of 42

28. Masukkan kode ini ke dalam index.blade.php di atas dan SAVE (kopas saja, kode adalah baris yang
berlatar abu-abu)

<!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>Data Posts - Latihan CRUD Laravel10 </title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body style="background: lightgray">

<div class="container mt-5">

<div class="row">

Latihan CRUD Laravel 10 Page 21 of 42

 <div class="col-md-12">
<div>
<h3 class="text-center my-4">Tutorial Laravel 10 untuk Pemula</h3>
<h5 class="text-center"><a
href="https://google.com.com">www.belajarlaravel10.com</a></h5>
<hr>
</div>
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<a href="{{ route('posts.create') }}" class="btn btn-md btn-success mb-
3">TAMBAH POST</a>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">GAMBAR</th>
<th scope="col">JUDUL</th>
<th scope="col">CONTENT</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
@forelse ($posts as $post)
<tr>
<td class="text-center">
<img src="{{ asset('/storage/posts/'.$post->image) }}" class="rounded"
style="width: 150px">
</td>
<td>{{ $post->title }}</td>
<td>{!! $post->content !!}</td>
<td class="text-center">
<form onsubmit="return confirm('Apakah Anda Yakin ?');"
action="{{ route('posts.destroy', $post->id) }}" method="POST">
<a href="{{ route('posts.show', $post->id) }}" class="btn btn-sm btn-
dark">SHOW</a>
<a href="{{ route('posts.edit', $post->id) }}" class="btn btn-sm btn-
primary">EDIT</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-
danger">HAPUS</button>
</form>
</td>
</tr>
@empty
<div class="alert alert-danger">
Data Post belum Tersedia.
</div>
@endforelse
</tbody>
</table>
{{ $posts->links() }}
</div>
</div>
</div>
</div>
</div>

Latihan CRUD Laravel 10 Page 22 of 42

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
//message with toastr
@if(session()->has('success'))

toastr.success('{{ session('success') }}', 'BERHASIL!');

@elseif(session()->has('error'))

toastr.error('{{ session('error') }}', 'GAGAL!');

@endif
</script>

</body>
</html>

Seperti gambar berikut

8. UJICOBA MENAMPILKAN DATA

29. Silahkan jalankan projectnya dengan mengakses localhost:8000/posts di web browser
30. Halaman web brower akan muncul gambar seperti ini: (karena belum ada masukan data maka
pesan yang muncul adalah Data Post Belum Tersedia

Latihan CRUD Laravel 10 Page 23 of 42

Latihan CRUD Laravel 10 Page 24 of 42
 BAGIAN 4:
Insert Data Ke Dalam database dan
Menampilkannya
1. MENAMBAH METHOD CREATE DAN STORE
Setelah berhasil menampilkan halaman untuk menampilkan data, kita akan menambah 2
metode/method di dalam controller PostController.php yaitu function create dan function store.
31. Function create adalah method yang digunakan untuk menampilkan halaman form tambah data
32. Function store adalah method yang digunakan untuk memporses data ke dalam database dan juga
upload gambar
33. Buka file app/HTTP/Controllers/PostController.php
34. Ubah kode nya menjadi seperti dibawah ini (kopas saja, kode adalah baris yang berlatar abu-abu)

<?php

namespace App\Http\Controllers;

//import Model "Post

use App\Models\Post;

//return type View

use Illuminate\View\View;

//return type redirectResponse

use Illuminate\Http\RedirectResponse;

use Illuminate\Http\Request;

class PostController extends Controller

{
/**
* index
*
* @return View
*/
public function index(): View
{
//get posts
$posts = Post::latest()->paginate(5);

//render view with posts

return view('posts.index', compact('posts'));
}

/**
* create
*
* @return View
*/
public function create(): View
{

Latihan CRUD Laravel 10 Page 25 of 42

 return view('posts.create');
}

/**
* store
*
* @param mixed $request
* @return RedirectResponse
*/
public function store(Request $request): RedirectResponse
{
//validate form
$this->validate($request, [
'image' => 'required|image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'content' => 'required|min:10'
]);

//upload image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());

//create post
Post::create([
'image' => $image->hashName(),
'title' => $request->title,
'content' => $request->content
]);

//redirect to index
return redirect()->route('posts.index')->with(['success' => 'Data Berhasil Disimpan!']);
}
}

Seperti tampil pada gambar berikut:

Latihan CRUD Laravel 10 Page 26 of 42

 2. MEMBUAT VIEW FORM CREATE
Setelah melakukan modifikasi kode pada PostController.php, kita harus membuat view menampilkan
halaman tambah data post
35. Buat file baru dengan nama create.blade.php di dalam folder resource/view/posts dan masukkan
kode (kopas saja) dibawah ini dan SAVE

<!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>Tambah Data Post - SantriKoding.com</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background: lightgray">

<div class="container mt-5 mb-5">

<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<form action="{{ route('posts.store') }}" method="POST"
enctype="multipart/form-data">

@csrf

<div class="form-group">

Latihan CRUD Laravel 10 Page 27 of 42

 <label class="font-weight-bold">GAMBAR</label>
<input type="file" class="form-control @error('image') is-invalid
@enderror" name="image">

<!-- error message untuk title -->

@error('image')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>

<div class="form-group">
<label class="font-weight-bold">JUDUL</label>
<input type="text" class="form-control @error('title') is-invalid @enderror"
name="title" value="{{ old('title') }}" placeholder="Masukkan Judul Post">

<!-- error message untuk title -->

@error('title')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>

<div class="form-group">
<label class="font-weight-bold">KONTEN</label>
<textarea class="form-control @error('content') is-invalid @enderror"
name="content" rows="5" placeholder="Masukkan Konten Post">{{ old('content') }}</textarea>

<!-- error message untuk content -->

@error('content')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>

<button type="submit" class="btn btn-md btn-primary">SIMPAN</button>

<button type="reset" class="btn btn-md btn-warning">RESET</button>

</form>
</div>
</div>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'content' );
</script>
</body>
</html>

Latihan CRUD Laravel 10 Page 28 of 42

Seperti gambar dibawah ini:

3. UJI COBA INSERT DATA POST

36. Buka kembali ke Browser dengan alamat http://localhost:8000/posts , klik tombol TAMBAH POST

37. Halaman TAMBAH POST atau CREATE akan muncul

Latihan CRUD Laravel 10 Page 29 of 42

38. Masukkan data JUDUL, KONTENT dan GAMBAR. Untuk GAMBAR, gunakan foto tidak lebih besar
dari 200px atau ukuran dibawah 2MB. Klik SIMPAN untuk menyimpan masukan ke database. Jika
masukan berhasil maka gambar dibawah akan muncul

Latihan CRUD Laravel 10 Page 30 of 42

 BAGIAN 5:
Menambah Method SHOW Detail Data
1. MENAMBAH METHOD SHOW DI CONTROLLER

Method SHOW akan menampilkan detail dari data post yang sudah di masukkan/entri. Method ini
akan menampilkan data berdasarkan field id
39. Buka kembali PostController.php dan tambahkan kode dibawah ini dan letakkan dibawah
methode store dan SAVE (kopas saja, kode adalah baris yang berlatar abu-abu)

/**
* show
*
* @param mixed $id
* @return View
*/
public function show(string $id): View
{
//get post by ID
$post = Post::findOrFail($id);

//render view with post

return view('posts.show', compact('post'));
}

Seperti dalam gambar dibawah

2. MEMBUAT VIEW DETAIL POST

40. Setelah CONTROLLER mengambil data dari MODEL dan memprosesnya maka CONTROLLER
mengirmkan data tersebut untuk ditampilanoleh VIEW. VIEW yang akan menampung data dari
CONTROLLER dan menampilkannya bernama show.blade.php di dalam resources/views.
41. Buat file show.blade.php terlebih dahulu dalam folder resources/views.

Latihan CRUD Laravel 10 Page 31 of 42

42. Kopas kode dibawah ini ke dalam show.blade.php (kode adalah baris yang berlatar abu-abu):
<!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>Detail Data Post - SantriKoding.com</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background: lightgray">

<div class="container mt-5 mb-5">

<div class="row justify-content-center">
<div class="col-md-8">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<img src="{{ asset('storage/posts/'.$post->image) }}" class="w-100 rounded">
<hr>
<h4>{{ $post->title }}</h4>
<p class="tmt-3">
{!! $post->content !!}
</p>
</div>
</div>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Seperti ditampilkan oleh gambar dibawah

Latihan CRUD Laravel 10 Page 32 of 42

 3. UJI COBA MENAMPILKAN DETAIL DATA POST
43. Kembali ke web Browser di halaman http://localhost:8000/posts
44. Klik tombol SHOW di salah satu data pada kolom AKSI

45. Maka halaman detail dari post akan muncul seperti gambar dibawah

Latihan CRUD Laravel 10 Page 33 of 42

 BAGIAN 6 :
Menambah Method Edit dan Update Data
1. MENAMBAH METHOD EDIT DAN UPDATE DI CONTROLLER

46. Tambahkan 2 method dalam PostController.php yaitu function edit dan function update
47. Function edit adalah method untuk menampilkan halaman form edit
48. Function update adalah method untuk memproses data yang dikitim oleh halaman form edit dan
mengupdate data ke dalam database
49. Buka kembali file PostController.php di VSC
50. Tambah kode ini di bawah redirectResponse dan SAVE:

//import Facade "Storage"

use Illuminate\Support\Facades\Storage;

51. Tambahkan kode dibawah ini dalam PostController.php, di bawah function SHOW dan SAVE:
(kopas saja, kode adalah baris yang berlatar abu-abu)

public function edit(string $id): View

{
//get post by ID
$post = Post::findOrFail($id);

//render view with post

return view('posts.edit', compact('post'));
}

/**
* update
*
* @param mixed $request
* @param mixed $id
* @return RedirectResponse
*/
public function update(Request $request, $id): RedirectResponse
{
//validate form

Latihan CRUD Laravel 10 Page 34 of 42

 $this->validate($request, [
'image' => 'image|mimes:jpeg,jpg,png|max:2048',
'title' => 'required|min:5',
'content' => 'required|min:10'
]);

//get post by ID
$post = Post::findOrFail($id);

//check if image is uploaded

if ($request->hasFile('image')) {

//upload new image

$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());

//delete old image

Storage::delete('public/posts/'.$post->image);

//update post with new image

$post->update([
'image' => $image->hashName(),
'title' => $request->title,
'content' => $request->content
]);

} else {

//update post without image

$post->update([
'title' => $request->title,
'content' => $request->content
]);
}

//redirect to index
return redirect()->route('posts.index')->with(['success' => 'Data Berhasil Diubah!']);
}

Latihan CRUD Laravel 10 Page 35 of 42

 2. MEMBUAT VIEW FORM EDIT

52. Setelah menambah function/metho dalam CONTROLLER, maka kita harus membuat halaman
VIEW form edit
53. Dalam folder resources/views/posts, buat file edit.blade.php
54. Tambahkan kode dibawah ini kedalam edit.blade.php dan SAVE (kopas saja, kode adalah baris
yang berlatar abu-abu)
<!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>Edit Data Post - SantriKoding.com</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background: lightgray">

<div class="container mt-5 mb-5">

<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<form action="{{ route('posts.update', $post->id) }}" method="POST"
enctype="multipart/form-data">
@csrf
@method('PUT')

<div class="form-group">
<label class="font-weight-bold">GAMBAR</label>
<input type="file" class="form-control" name="image">

Latihan CRUD Laravel 10 Page 36 of 42

 </div>

<div class="form-group">
<label class="font-weight-bold">JUDUL</label>
<input type="text" class="form-control @error('title') is-invalid @enderror"
name="title" value="{{ old('title', $post->title) }}" placeholder="Masukkan Judul Post">

<!-- error message untuk title -->

@error('title')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>

<div class="form-group">
<label class="font-weight-bold">KONTEN</label>
<textarea class="form-control @error('content') is-invalid @enderror"
name="content" rows="5" placeholder="Masukkan Konten Post">{{ old('content', $post-
>content) }}</textarea>

<!-- error message untuk content -->

@error('content')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>

<button type="submit" class="btn btn-md btn-primary">UPDATE</button>

<button type="reset" class="btn btn-md btn-warning">RESET</button>

</form>
</div>
</div>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'content' );
</script>
</body>
</html>
Seperti gambar dibawah ini

Latihan CRUD Laravel 10 Page 37 of 42

 3. UJI COBA EDIT DAN UPDATE DATA POST
55. Kembali ke Browser, di halaman index atau halaman depan, klik tombol EDIT di kolom AKSI

56. Halaman edit akan muncul, edit data didalam kotak merah diatas
57. Edit KONTEN seperlunya dan klik tombol UPDATE

Latihan CRUD Laravel 10 Page 38 of 42

58. Halaman akan redirect/kembali ke halaman depan/halaman index dengan data yang sudah
diperbarui

Latihan CRUD Laravel 10 Page 39 of 42

 BAGIAN 7:
Menghapus Data
1. DELETE DATA DARI DATABASE
59. Kita menambahkan method baru yaitu DESTROY pada controller kita
60. Buka file PostController.php
61. Tambahkan code berikut ke dalam PostController.php, sisipkan/kopas dibawah function update

public function destroy($id): RedirectResponse

{
//get post by ID
$post = Post::findOrFail($id);

//delete image
Storage::delete('public/posts/'. $post->image);

//delete post
$post->delete();

//redirect to index
return redirect()->route('posts.index')->with(['success' => 'Data Berhasil Dihapus!']);
}
Seperti gambar berikut

2. UJI COBA DELETE DATA

62. Kembali ke browser, pada halaman index (http://localhost:8000/posts), klik tombol HAPUS dan
jika ada konfirmasi “Apakah Anda Yakin?” klik OK.
Seperti pada gambar dibawah

Latihan CRUD Laravel 10 Page 40 of 42

63. Data berhasil dihapus!

Latihan CRUD Laravel 10 Page 41 of 42