MODUL PEMOGRAMAN WEB III

Create, Read, Update, Delete Produk

Dosen Pengampu :

Hazar Hamzah .ST

AKADEMI MANAGEMENT INFORMATIKA DAN KOMPUTER

PURNAMA NIAGA INDRAMAYU
Persiapan

🙏
Sebelum kita memulai latihan, silahkan selesaikan modul sebelumnya karena kita akan
melanjutkan materi dari projek sebelumnya.. Terimakasih

Jalankan MySQL Xampp

Buka Aplikasi VSCode dan buka folder Inventory (Yang dibuat dipertemuan sebelumnya)

Jalankan perintah ini di terminal untuk mengakses laravel di browser ( php artisan serve )

Buat terminal baru dan jalankan perintah ini di terminal untuk menjalankan CSS & Javascript
 CRUD PRODUK

Selanjutnya kita akan membuat menu produk, dimana kategori ini berfungsi untuk
membuat daftar produk yang akan berelasi dengan tabel kategori. Berikut contoh tampilannya :

Relasi database antara produk dan ketegori

Create ( Tambah Data ) & Read ( Menampilkan Data )

1. Membuat Migration Produk, ini bertujuan untuk membuat tabel pada database. Karena
kita akan menyimpan data produk pada database

Ketikan php artisan make:migration create_produk_table pada terminal

Cek migration yang sudah kita bikin dan isi sesuai pada gambar

Ketikan php artisan migrate pada terminal, Enter

Cek database kalain di phpmyadmin, jika berhasil akan ada tabel bernama produk

2. Membuat Model Produk, ini bertujuan untuk membuat tabel pada database. Model
memungkinkan kita untuk berinteraksi dengan data dalam tabel database dengan cara
yang mudah dan ekspresif.
 Ketikan php artisan make:model Produk pada terminal, Enter

Atur model kategori seperti ini

3. Membuat Controller, Controller dalam Laravel adalah kelas yang bertanggung jawab
untuk mengelola logika aplikasi dan menghubungkan model dengan tampilan (view).

Ketikan php artisan make:controller ProdukController pada terminal, Enter

4. Membuat View ( Tampilan ), View bertanggung jawab untuk menampilkan informasi

kepada pengguna. View mengambil data dari controller dan menampilkan informasi
tersebut dalam format yang sesuai.

Kita akan membuat tampilan index, tambah dan Edit seperti struktur dibawah ini
 Klik kanan pada folder views pilih New Folder berinama produk

Buat file pada folder kategori caranya klik kanan pada folder kategori pilih New File
Buat file : index.blade.php, tambah.blade.php, edit.blade.php

5. Membuat Route, Route menentukan URL mana yang akan dihubungkan dengan
tindakan (action) dalam controller, sehingga ketika pengguna mengakses URL tertentu,
Laravel tahu tindakan apa yang harus dilakukan
 Membuat route produk menggunakan resource adalah cara untuk secara otomatis
membuat rute yang terkait dengan operasi CRUD (Create, Read, Update, Delete) pada
suatu resource atau model.

6. Membuat Navigasi Menu, membuat menu khusus untuk mengelola data kategori
7. Membuat Halaman Index, disini kita akan membuat halaman index yang memiliki
tampilan seperti ini

Copy kodingan yang ada di halaman index.blade.php bagian kategori

Paste pada halama index, selanjutnya sesuakan judul, tombol tambah, dan isi tabel
 Buat fungsi pada Controller untuk menampilkan halaman index

8. Membuat Form Tambah

Copy kodingan yang ada di ini Paste pada halama tambah

<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200
leading-tight">
{{ __('Tambah Kategori') }}
</h2>
</x-slot>

<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm
sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100">

<form method="post" action="{{ route('produk.store') }}"

enctype="multipart/form-data" class="mt-6 space-y-6">
@csrf

<div>
<x-input-label for="nama" :value="__('Nama Kategori')"
/>
<x-text-input id="nama" name="nama" type="text"
class="mt-1 block w-full"
:value="old('nama')" required autofocus
autocomplete="nama" />
<x-input-error class="mt-2"
:messages="$errors->get('nama')" />
</div>
<div>
<x-input-label for="gambar" :value="__('Gambar')" />
<x-text-input id="gambar" name="gambar" type="file"
class="mt-1 block w-full"
:value="old('gambar')" required autofocus
autocomplete="gambar" />
<x-input-error class="mt-2"
:messages="$errors->get('gambar')" />
</div>
<div>
<x-input-label for="deskripsi" :value="__('Deskripsi')"
/>
 <x-text-input id="deskripsi" name="deskripsi"
type="text" class="mt-1 block w-full"
:value="old('deskripsi')" required autofocus
autocomplete="deskripsi" />
<x-input-error class="mt-2"
:messages="$errors->get('deskripsi')" />
</div>
<div>
<x-input-label for="harga" :value="__('Harga')" />
<x-text-input id="harga" step="0.01" name="harga"
type="number" class="mt-1 block w-full"
:value="old('harga')" required autofocus
autocomplete="harga" />
<x-input-error class="mt-2"
:messages="$errors->get('harga')" />
</div>
<div>
<x-input-label for="stok" :value="__('Stok')" />
<x-text-input id="stok" name="stok" type="text"
class="mt-1 block w-full"
:value="old('stok')" required autofocus
autocomplete="stok" />
<x-input-error class="mt-2"
:messages="$errors->get('stok')" />
</div>
<div>
<x-input-label for="kategori" :value="__('Kategori')" />
<select id="kategori_id" name="kategori_id"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
focus:ring-blue-500 focus:border-blue-500 block w-full
p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
dark:text-white dark:focus:ring-blue-500
dark:focus:border-blue-500">
<option selected>Pilih Kategori</option>
@foreach($kategori as $kat)
<option value="{{ $kat->id }}">{{ $kat->nama
}}</option>
@endforeach
</select>
</div>
<x-primary-button>{{ __('Simpan') }}</x-primary-button>
</form>
 </div>
</div>
</div>
</div>
</x-app-layout>

Buat fungsi pada Controller untuk menampilkan halaman tambah

Buat fungsi Store pada Controller untuk menyimpan data

9. Slihakan coba inputkan data

Cek di database phpmyadmin pada tabel produk apakah data kategori sudah
tersimpan? Jika iya.. Kalian telah berhasil dalam tahap menyimpan data ke database.

Jika gambar tidak muncul maka jalankan perintah ini php artisan storage:link
 🔥👋
Selamat Mencoba
Menyala Abangku