MODUL PRAKTIKUM

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

Pada modul sebelumnya kita telah menyelesaikan fitur Create (Input Data) dan Read (Menampilkan
Data) pada aplikasi Codeigniter 4.

Pada modul ini kita akan menambahkan beberapa fitur, diantaranya Delete (Menghapus Data),
Update (Mengubah Data) dan menampilkan detail data.

Oke, kita mulai dari fitur Delete (Menghapus data) terlebih dahulu, buka file index.php yang berada
pada folder Barang, kemudian ubah nilai pada atribut href tombol hapus menjadi
seperti di bawah ini:
<a
href="<?= base_url('Barang/hapus_data/' . $brg['id']); ?>"
class="btn btn-sm btn-danger" >
<i class="fas fa-trash mr-2"></i>
Hapus
</a>

Selanjutnya kita akan menambahkan sebuah method baru pada controller Barang dengan nama
method hapus_data, kemudian sesuaikan isi methodnya seperti di bawah ini:
public function hapus_data($id)
{
$this->barangModel->delete($id);
return redirect()->to('Barang');
}

Jalankan aplikasi pada web browser, kemudian coba hapus salah satu data, jika berhasil data akan
terhapus dan akan langsung diarahkan kembali ke halaman index barang.
Selanjutnya kita akan menambahkan fitur Update (Edit data), buka kembali file index.php yang
terdapat pada folder Barang, kemudian ubah nilai dari atribut href pada tombol edit
menjadi seperti di bawah ini :
<a
href="<?= base_url('Barang/edit_data/' . $brg['id']); ?>"
class="btn btn-sm btn-warning">
<i class="fas fa-edit mr-2"></i>
Edit
</a>
Kemudian buka kembali file Controller Barang, tambahkan sebuah method baru untuk menampilkan
form edit data dengan nama edit_data, kemudian sesuaikan syntax-nya seperti di bawah ini :
public function edit_data($id)
{
$editBarang = $this->barangModel->find($id);

$data = [
'title' => 'Barang',
'judul_konten' => 'Data Barang',
'validation' => \Config\Services::validation(),
'edit_barang' => $editBarang
];
return view('Barang/form_edit_data', $data);
}

Selanjutnya, buatlah sebuah file view baru pada folder Barang, dengan nama form_edit_data.php,
lalu ketikkan syntax di bawah ini :
<?= $this->extend('template') ?>
<?= $this->section('konten'); ?>
<div class="card card-success">
<div class="card-header">
<h1 class="card-title mt-1">Form edit Data Barang</h1>
<a href="<?= base_url('Barang'); ?>"
class="btn btn-sm btn-primary float-right">
<i class="fas fa-chevron-left mr-2 "></i>
Kembali
</a>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6 m-auto">
<form action="<?= base_url('/Barang/proses_edit/' . $edit_barang['id']); ?>"
method="post"
class="user">

<div class="form-group">
<label for="kode_barang" class="font-weight-bold">Kode Barang</label>
<input type="text"
class="form-control <?= $validation->hasError('kode_barang') ? 'is-invalid' : ''; ?>"
id="kode_barang"
name="kode_barang"
value="<?= $edit_barang['kode_barang']; ?>">
<div class="invalid-feedback">
<?= $validation->getError('kode_barang'); ?>
</div>
</div>

<div class="form-group">
<label for="nama_barang" class="font-weight-bold">Nama Barang</label>
<input type="text"
class="form-control <?= $validation->hasError('nama_barang') ? 'is-invalid' : ''; ?>"
id="nama_barang"
name="nama_barang"
value="<?= $edit_barang['nama_barang']; ?>">
<div class="invalid-feedback">
<?= $validation->getError('nama_barang'); ?>
</div>
</div>

<div class="form-group">
<label for="jml_barang" class="font-weight-bold">Jumlah Barang</label>
<input type="number"
class="form-control <?= $validation->hasError('jml_barang') ? 'is-invalid' : ''; ?>"
id="jml_barang"
name="jml_barang"
value="<?= $edit_barang['jml_barang']; ?>">
<div class="invalid-feedback">
<?= $validation->getError('jml_barang'); ?>
</div>
</div>

<div class="float-right">
<button type="submit" name="submit" class="btn btn-success">Edit</button>
<button type="reset" name="reset" class="btn btn-warning">Batal</button>
</div>
</form>
</div>
</div>
</div>
</div>
<?= $this->endSection(); ?>
Jika sudah, jangan lupa di simpan, kemudian coba jalankan, tekan tombol edit jika berhasil akan
tampil sebuah form untuk mengubah data sesuai data yang kita klik tadi.

Selanjutnya kita harus menambahkan sebuah method baru pada Controller Barang untuk
memproses perubahan data. Buka file Controller Barang, kemudian tambahkan method
proses_edit berikut ini :
public function proses_edit($id)
{
$dataLama = $this->barangModel->find($id);

if ($dataLama['kode_barang'] == $this->request->getVar('kode_barang')) {
$ruleKodeBarang = 'required';
} else {
$ruleKodeBarang = 'required|is_unique[tb_barang.kode_barang]';
}
// Validasi data inputan
if (!$this->validate([
'kode_barang' => [
'rules' => $ruleKodeBarang,
'errors' => [
'required' => 'Kode Barang harus diisi!',
'is_unique' => 'Kode Barang sudah digunakan!'
]
],
'nama_barang' => [
'rules' => 'required',
'errors' => [
'required' => 'Nama Barang harus diisi!'
 ]
],
'jml_barang' => [
'rules' => 'required',
'errors' => [
'required' => 'Jumlah Barang harus diisi!'
]
]

])) {
return redirect()->to('/Barang/tambah_data')->withInput();
}

$this->barangModel->save([
'id' => $id,
'kode_barang' => htmlspecialchars($this->request->getVar('kode_barang')),
'nama_barang' => htmlspecialchars($this->request->getVar('nama_barang')),
'jml_barang' => htmlspecialchars($this->request->getVar('jml_barang'))
]);

return redirect()->to('/Barang');
}

Selanjutnya kita akan menambahkan fitur detail data, buka terlebih dahulu file index.php pada
folder View Barang, kemudian ubah nilai atribut href pada tombol detail menjadi
seperti di bawah ini :
<a
href="<?= base_url('Barang/detail_data/' . $brg['id']); ?>"
class="btn btn-sm btn-info">
<i class="fas fa-info mr-2"></i>
Detail
</a>

Setelah itu buatlah sebuah method baru pada Controller Barang dengan nama detail_data, dengan
isi method seperti di bawah ini :
public function detail_data($id)
{
$detailBarang = $this->barangModel->find($id);

$data = [
'title' => 'Barang',
'judul_konten' => 'Data Barang',
'detail_barang' => $detailBarang
];
return view('Barang/detail_data', $data);
}

Kemudian buat sebuah file baru pada folder Views-Barang, dengan nama file detail_data.php, lalu
ketikkan syntax di bawah ini pada file tersebut.
<?= $this->extend('template') ?>
<?= $this->section('konten'); ?>
<div class="card card-success">
<div class="card-header">
<h1 class="card-title mt-1">Detail Data Barang</h1>
<a href="<?= base_url('Barang'); ?>"
class="btn btn-sm btn-primary float-right">
<i class="fas fa-chevron-left mr-2 "></i>
Kembali
</a>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4 text-center">
<img src="/image/default.png" alt="Foto Barang" width="50%">
</div>
<div class="col-sm-8">
<table class="table table-borderless">
<tr>
<th>Kode Barang</th>
<td>: <?= $detail_barang['kode_barang']; ?></td>
</tr>
<tr>
<th>Nama Barang</th>
<td>: <?= $detail_barang['nama_barang']; ?></td>
 </tr>
<tr>
<th>Jumlah</th>
<td>: <?= $detail_barang['jml_barang']; ?></td>
</tr>
</table>
</div>
</div>
<div class="row float-right">
<div class="col-sm-12">
<a href="<?= base_url('Barang/edit_data/' . $detail_barang['id']); ?>"
class="btn btn-sm btn-warning">
<i class="fas fa-edit mr-2"></i>
Edit
</a>
<a href="<?= base_url('Barang/hapus_data/' . $detail_barang['id']); ?>"
class="btn btn-sm btn-danger">
<i class="fas fa-trash mr-2"></i>
Hapus
</a>
</div>
</div>
</div>
</div>
<?= $this->endSection(); ?>

Setelah selesai, simpan terlebih kemudian jalankan pada web browser, lalu coba klik tombol detail,
jika berhasil akan tampil halaman detai data barang seperti pada gambar di bawah ini :