MODUL Pemrograman Framework CRUD CI4
MODUL Pemrograman Framework CRUD CI4
Sebelum kita mulai praktik, ada tahapan-tahapan yang mesti kita lakukan, yaitu:
a. Membuat dan Mengkonfigurasi Database
Silahkan buka localhost/phpmyadmin kemudian buat database dengan nama
ci4app jangan lupa aktifkan apache web server di control panel xampp terlebih
dahulu seperti gambar dibawah ini :
Hingga database yang berhasil dibuat muncul di daftar database local kita.
Kemudian buat table product dengan cara ketik command berikut pada terminal
yang ada di:
Kemudian buat table mahasiswa dengan cara ketik command berikut pada
terminal VScode kita:
php spark migrate:create mahasiswa
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
'jenis_kelamin' => [
'type' => 'ENUM',
'constraint' => "'pria','wanita'",
],
'no_telp' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'email' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'alamat' => [
'type' => 'VARCHAR',
'constraint' => '255',
],
'created_at' => [
'type' => 'DATETIME',
'null' => true,
],
'updated_at' => [
'type' => 'DATETIME',
'null' => true,
]
]);
$this->forge->addPrimaryKey('nim');
$this->forge->createTable('mahasiswa');
}
//--------------------------------------------------------------------
di Codeigniter 4, kita bisa membuat table secara manual atau melalui migration.
Fitur migration ini akan kita bahas lebih detail pada pertemuan selanjutnya.
Langkah selanjutnya kita akan Setting Codeigniter 4 kita ci4app agar dapat
terkoneksi dengan database yang telah buat sebelumnya dengan cara :
- didalam folder dari project codeigniter4 terdapat file dengan nama env
silahkan rename menjadi .env
berikutnya buka file .env tersebut dan edit code didalamnya, untuk konfigurasi
database berada pada line 52 – 56, hilangkan tanda # untuk mengaktifkan
konfigurasi tersebut.
database.default.hostname = localhost
database.default.database = ci4app
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi
Keterangan :
hostname adalah alamat server dari database
database adalah nama database yang barusan kita buat, jadi kita isi
nilainya dengan nama pegawai
username adalah nama user dari database dalam contoh ini adalah root
password adalah password dari database dalam contoh ini saya biarkan
kosong, karena default dari password user root di xampp itu kosong
DBDriver saya biasakan default yaitu MySQLi
Berikutnya kita akan menjalankan file migration untuk membuat tabel didatabase,
silahkan masuk ke project codeigniter anda melalui terminal, lalu jalankan
perintah :
php spark migrate
lalu tekan enter, jika proses berhasil maka tampilannya adalah sebagai berikut :
Silahkan di cek database pada phpmyadmin untuk melihat struktur table yang
telah dibuat melalui fitur migration yang ada pada codeigniter 4
Sampai tahap ini kita sudah berhasil untuk membuat database ci4app dan table
mahasiswa untuk menyimpan data data mahasiswa. Untuk mengisi data
mahasiswa nya bisa secara manual melalui phpmyadmin atau kita dapat
membuat Insert Dummy Data menggunakan Seeding yang telah disediakan oleh
Codeigniter 4.
Kita coba akan tambahkan dummy data didalam tabel mahasiswa menggunakan
fitur seeding, sehingga nanti saat kita belajar untuk menampilkan data
mahasiswa ke dalam bentuk tabel kita sudah memiliki beberapa data didalam
tabel tersebut, langkah – langkanya adalah sebagai berikut :
<?php
namespace App\Database\Seeds;
use CodeIgniter\Database\Seeder;
use CodeIgniter\I18n\Time;
Keterangan :
dalam perintah diatas, kita menginsert 3 data mahasiswa dengan nama alexander
osten prawara, budi, dan Avrilyne Odela Prawara.
berikutnya kita akan jalankan perintah diatas untuk insert data mahasiswa tersebut
ke dalam tabel mahasiswa, silahkan masuk ke folder project codeigniter melalui
terminal, lalu jalankan perintah sebagai berikut ini :
yang perlu kita perhatikan adalah dibagian nama file yaitu MahasiswaSeeder
silahkan sesuaikan untuk bagian ini sesuaikan dengan nama file Seeder, lalu
tekan enter untuk menjalankan perintah tersebut.
Lalu silahkan cek untuk tabel mahasiswa, harusnya sudah berisi 3 data
mahasiswa yang kita insert melalui fitur seeder ini.
b. Membuat Model Mahasiswa
Sebelum kita memulai proses membuat CRUD, kita persiapkan dulu model yang
akan kita gunakan untuk berkomunikasi dengan tabel mahasiswa di database,
untuk langkah awal buat file model dengan nama MahasiswaModel.php, simpan
file tersebut didalam folder app/Models
lalu isi file MahasisaModel.php dengan code sebagai berikut :
<?php
namespace App\Models;
use CodeIgniter\Model;
Keterangan :
untuk classnya kita beri nama yang sama dengan nama filenya yaitu
MahasiswaModel
beberapa settingan yang kita tulis adalah :
o $table dengan nilai mahasiswa karena kita akan komunikasi dengan
tabel mahasiswa
o $primaryKey dengan nilai nim karena kolom nim merupakan
primary key dari tabel mahasiswa
o $returnType dengan nilai object karena kita ingin untuk return type
nanti berupa object
o $useTimestamps dengan nilai true karena kita akan mengisikan
kolom created_at (saat insert data), dan kolom updated_at (saat
update data)
o $allowedFields kita isikan nama kolom di tabel mahasiswa yang
boleh diinsert data
<?php
namespace App\Controllers;
use App\Models\MahasiswaModel;
function __construct()
{
$this->mahasiswa = new MahasiswaModel();
}
Kemudian edit kembali file routes.php kita yang ada pada folder
apps/config/routes.php dengan menambahkan :
$routes->get('/mahasiswa', 'Mahasiswa::index');
Mahasiswa.php
<?= $this->extend('layout/dashboard-layout'); ?>
<?= $this->section('content'); ?>
</tbody>
</table>
</div>
<!-- /.card-body -->
mahasiswa_create.php
<?= $this->extend('layout/dashboard-layout'); ?>
<?= $this->section('content'); ?>
<div class="col-md-10">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Tambah Data Mahasiswa</h3>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-
primary">Simpan</button>
</div>
<!-- /.card-footer -->
</form>
</div>
<!-- /.card -->
</div>
<?= $this->endSection('content'); ?>
Tambahkan method baru create() dan store() di bawah ini pada file controller
Mahasiswa.php yang sebelumnya sudah pernah kita buat
'nama' => [
'rules' => 'required',
'errors' => [
'required' => '{field} Harus diisi'
]
],
'jurusan' => [
'rules' => 'required',
'errors' => [
'required' => '{field} Harus diisi'
]
],
'jenis_kelamin' => [
'rules' => 'required',
'errors' => [
'required' => '{field} Harus diisi'
]
],
'no_telp' => [
'rules' => 'required',
'errors' => [
'required' => '{field} Harus diisi'
]
],
'email' => [
'rules' => 'required|valid_email',
'errors' => [
'required' => '{field} Harus diisi',
'valid_email' => 'Email Harus Valid'
]
],
'alamat' => [
'rules' => 'required',
'errors' => [
'required' => '{field} Harus diisi'
]
],
])) {
session()->setFlashdata('error', $this->validator->listErrors());
return redirect()->back()->withInput();
}
$this->mahasiswa->insert([
'nim' => $this->request->getVar('nim'),
'nama' => $this->request->getVar('nama'),
'jurusan' => $this->request->getVar('jurusan'),
'jenis_kelamin' => $this->request->getVar('jenis_kelamin'),
'no_telp' => $this->request->getVar('no_telp'),
'email' => $this->request->getVar('email'),
'alamat' => $this->request->getVar('alamat')
]);
session()->setFlashdata('message', 'Tambah Data Mahasiswa
Berhasil');
return redirect()->to('/mahasiswa');
}
selanjutnya kita lihat hasilnya pada browser dengan mengetikkan
http://localhost:8080/mahasiswa/create jangan lupa untuk mengaktifkan server
development local kita dan database server kita di xampp agar dapat diakses
melalui browser..
setelah tampil form nya silahkan isi data mahasiswa yang ingin kita tambahkan,
sebagai contoh saya menambahkan data mahasiswa atas nama Andina lalu tekan
tombol simpan.
Jika sdh berhasil maka data mahasiswa tersebut akan tampil di table mahasiswa.
Membuat dan menampilkan form edit data mahasiswa, yang berisi data
mahasiswa yang akan diedit
Membuat method baru pada controller Mahasiswa.php untuk proses
update data mahasiswa.
Membuat dan Menampilkan Form Edit Data Mahasiswa
Pada saat kita membuat menu untuk menampilkan data mahasiswa, pada file view
yang berada di folder app/views/dasboard/mahasiswa.php, perhatikan pada line
40 kita buat tombol untuk kebutuhan edit data mahasiswa
jika kita melihat code untuk link diatas, ketika tombol edit di klik maka akan
mengakses url : base_url/mahasiswa/edit/data-nim-mahasiswa
Langkah awal kita buat routing terlebih dahulu, silahkan buka file Routes.php di
folder app/Config/Routes.php tambahkan routing sebagai berikut :
$routes->get('/mahasiswa/edit', 'Mahasiswa::edit');
Setelah proses pembuatan routing, berikutnya kita akan membuat method edit di
controller Mahasiswa, silahkan buka controller Mahasiswa.php, dan
buat/tambahkan method edit seperti berikut ini :
function edit($nim)
{
$dataMahasiswa = $this->mahasiswa->find($nim);
if (empty($dataMahasiswa)) {
throw new
\CodeIgniter\Exceptions\PageNotFoundException('Data Mahasiswa
Tidak ditemukan !');
}
$data['pageTitle'] = 'Edit Data Mahasiswa';
$data['mahasiswa'] = $dataMahasiswa;
return view('dashboard/mahasiswa_edit', $data);
}
Kemudian buatlah form edit data pada folder
app/views/dassboard/mahasiswa_edit.php untuk isi kode programnya dapat
dilihat seperti dibawah ini :
mahasiswa_edit.php
<?= $this->extend('layout/dashboard-layout'); ?>
<?= $this->section('content'); ?>
<div class="col-md-10">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Edit Data Mahasiswa</h3>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-
primary">Simpan</button>
</div>
<!-- /.card-footer -->
</form>
</div>
<!-- /.card -->
</div>
<?= $this->endSection('content'); ?>
])) {
session()->setFlashdata('error', $this->validator->listErrors());
return redirect()->back();
}
$this->mahasiswa->update($nim, [
'nama' => $this->request->getVar('nama'),
'jurusan' => $this->request->getVar('jurusan'),
'jenis_kelamin' => $this->request->getVar('jenis_kelamin'),
'no_telp' => $this->request->getVar('no_telp'),
'email' => $this->request->getVar('email'),
'alamat' => $this->request->getVar('alamat')
]);
session()->setFlashdata('message', 'Update Data Mahasiswa
Berhasil');
return redirect()->to('/mahasiswa');
}
Jika sudah ulagi kembali langkah untuk memilih update data mahasiswa seperti
sebelumnya dan klik tombol simpan, jika sudah berhasil maka aka nada
pemberitahuan “Update Data Mahasiswa Berhasil” seperti gambar dibawah ini :
g. Membuat Fitur Delete
Pada saat kita membuat menu untuk menampilkan data mahasiswa, pada file view
yang berada di folder app/views/dasboard/mahasiswa.php, perhatikan pada line
41 kita sudah membuat tombol untuk kebutuhan delete data mahasiswa
jika kita melihat code untuk link diatas, ketika tombol delete di klik maka akan
mengakses url : base_url/mahasiswa/delete/data-nim-mahasiswa
function delete($nim)
{
$dataMahasiswa = $this->mahasiswa->find($nim);
if (empty($dataMahasiswa)) {
throw new
\CodeIgniter\Exceptions\PageNotFoundException('Data Mahasiswa
Tidak ditemukan !');
}
$this->mahasiswa->delete($nim);
session()->setFlashdata('message', 'Delete Data Mahasiswa
Berhasil');
return redirect()->to('/mahasiswa');
}
jika proses delete data selesai.. maka data akan hilang, dan terdapat notifikasi
bertuliskan “Delete Data Mahasiswa Berhasil”.
h. Membuat Fitur View Detail.
Pada saat kita membuat menu untuk menampilkan data mahasiswa, pada file view
yang berada di folder app/views/dasboard/mahasiswa.php, perhatikan pada line
39 kita sudah membuat tombol untuk kebutuhan view data detail mahasiswa
jika kita melihat code untuk link diatas, ketika tombol view di klik maka akan
mengakses url : base_url/mahasiswa/view/data-nim-mahasiswa