Membuat Aplikasi CRUD dengan CodeIgniter 4 - gallangsdw/crud-with-Ci4-1800016063 GitHub Wiki
Hallo Gallang disini, dan ini adalah langkah-langkah Membuat aplikasi CRUD dengan CodeIgniter 4. Dari beberapa Framework PHP, Codeigniter merupakan salah satu framework yang paling sering dipakai. Codeigniter adalah framework untuk menciptakan dan mengembangkan situs atau aplikasi dengan cepat yang berbasis MVC (Model-View-Controller). Ketika seorang pengguna melakukan permintaan untuk suatu resource, controller yang akan memberi respon pertama. “Controller” akan memahami permintaan pengguna dan melakukan permintaan data yang diperlukan dari “Model”. Tidak perlu berlama-lama mari kita coba
sebelum kita membuat aplikasi CRUD dengan CodeIgniter, ada baiknya kita membuat database terlebih dahulu. kali ini database yang dibuat bernama databuser dengan tabel bernama user dan strukturnya seperti dibawah ini
jangan lupa nyalakan XAMPP terlebih dahulu
Setelah database sudah siap sekarang mari kita buat konfigurasikan database dengan CodeIgniternya, masuk ke file app/config/database.php lalu tuliskan kode seperti dibawah sesuai database yang telah dibuat
/**
* The default database connection.
*
* @var array
*/
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'datauser',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !== 'production'),
'cacheOn' => false,
'cacheDir' => '',
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];
untuk menghubungkan database dengan CI maka perlu membuat modelnya terlebih dahulu. Buatlah file M_User.php pada folder Models dengan kode sebagai berikut
<?php
namespace App\Models;
use CodeIgniter\Model;
class M_user extends Model
{
protected $table = 'user';
public function get_data($email, $password)
{
return $this->db->table($this->table)
->where(array('email' => $email, 'pass' => $password))
->get()->getRowArray();
}
}
sesuaikan kode diatas dengan nama row pada tabel database yang dibuat.
kemudian kita buat controller untuk menghubungkan model dengan viewsnya. pada folder controllers buatlah file dengan nama Login.php. disini kita akan membuat method login action dan logout, kode sebagai berikut
<?php namespace App\Controllers;
use App\Models\M_user;
class Login extends BaseController
{
public function index()
{
return view('form');
}
public function login_action()
{
$muser = new M_user();
$email = $this->request->getPost('email');
$password = $this->request->getPost('password');
$cek = $muser->get_data($email, $password);
if (($cek['email'] == $email) && ($cek['pass'] == $password))
{
session()->set('email', $cek['email']);
session()->set('nama', $cek['nama']);
session()->set('id', $cek['id']);
return redirect()->to(base_url('user'));
} else {
session()->setFlashdata('gagal', 'Username / Password salah');
return redirect()->to(base_url('login'));
}
}
public function logout()
{
session()->destroy();
return redirect()->to(base_url('login'));
}
}
Kemudian kita buat controller user untuk menampilkan view jika user berhasil masuk/login. Kodenya seperti dibawah ini
<?php
namespace App\Controllers;
use App\Models\M_user;
class User extends BaseController
{
public function index()
{
if (session()->get('nama') == '') {
session()->setFlashdata('gagal', 'Anda belum login');
return redirect()->to(base_url('login'));
}
return view('view', $data);
}
}
Jika sudah mari lanjut ke langkah berikutnya
selanjutnya adalah membuat tampilan views untuk form loginnya dengan bootstrap pada folder views dan file form.php, kodenya seperti dibawah ini
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Masuk dulu</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto pt-5">
<form method="POST" action="<?= base_url('login/login_action'); ?>">
<div class="form-group">
<label for="email">Email kamu</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="password">Kata sandi</label>
<input type="password" name="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
<p>
<?php if(!empty(session()->getFlashdata('gagal'))) { ?>
<div class="alert alert-warning">
<?php echo session()->getFlashdata('gagal') ?>
</div>
<?php } ?>
</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
langkah selanjutnya adalah membuat halaman view untuk usernya
Jika berhasil login maka user akan didirect pada halaman ini, buat file bernama view.php pada folder views. kodenya akan sperti dibawah ini
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>User</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Tambah Data <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="" tabindex="-1" aria-disabled="true">Logout</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-3">
<h1>Selamat datang, <?= session()->get('nama'); ?>!</h1><br>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
pada tampilan diatas kita menambahkan navbar dengan button tambah data dan logout, untuk script logoutnya silahkan tambahkan kode dibawah ini
<li class="nav-item">
<a class="nav-link" href="<?= base_url('login/logout'); ?>" tabindex="-1" aria-disabled="true">Logout</a>
</li>
jika sistem login telah berhasil dibuat mari kita lanjutkan dengan membuat aplikasi CRUDnya.
kali ini kita kan menambahkan beberapa method yang dibutuhkan, pertama adalah get_user yang digunakan untuk menampilkan data user yang telah tersimpan pada database. Kodenya akan seperti dibawah ini
public function get_user($id = false)
{
if ($id === false) {
return $this->findAll();
}
return $this->getWhere(['id' => $id]);
}
kemudian tambahkan juga method saveUser untuk menyimpan data user saat melakukan penambahan data. kodenya seperti berikut
public function saveUser($data)
{
$query = $this->db->table($this->table)
->insert($data);
return $query;
}
setelah itu kita buat method deleteUser yang berguna tidak lain tidak bukan untuk menghapus data user
public function deleteUser($id)
{
$query = $this->db->table($this->table)
->delete(['id' => $id]);
return $query;
}
kemudian method yang terakhir adalah updateUser untuk melakukan perubahan data pada user, method ini sedikit berbeda dengan saveUser karena pada method saveUser akan menambahkan row baru pada database sendangkan method ini tidak
public function updateUser($data, $id)
{
return $this->db->table('user')->update($data, ['id' => $id]);
}
jika sudah maka tampilan model M_User.php akan seperti ini
Setelah selesai bermain-main dengan model sekarang kita buat beberapa method pada file user sebagai controllernya. sesuaikan kode pada function index() menjadi seperti dibawah ini. ada beberapa tambahan kode untuk menampilkan daftar user
public function index()
{
if (session()->get('nama') == '') {
session()->setFlashdata('gagal', 'Anda belum login');
return redirect()->to(base_url('login'));
}
$model = new M_user();
$data['user'] = $model->get_user();
return view('view', $data);
}
lalu kita buat juga method tambahdata() dan save() yang berguna untuk menampikan halaman tambah data dan menyimpan data yang dimasukkan. kodenya seperti dibawah ini
public function tambahdata()
{
echo view('view_tambah');
}
public function save()
{
$model = new M_user();
$data = [
'nama' => $this->request->getPost('nama'),
'email' => $this->request->getPost('email'),
'pass' => $this->request->getPost('pass')
];
$model->saveUser($data);
return redirect()->to('/user');
}
jika sudah, lalu kita buat method delete yang berguna untuk menghapus data user yang akan diolah oleh model tadi
public function delete($id)
{
$model = new M_user();
$model->deleteUser($id);
return redirect()->to('/user');
}
Kemudian yang terakhir adalah membuat method edit() dan updateData() yang berguna untuk menampilkan halaman edit dan menyimpan hasil perubahannya
public function edit($id)
{
$model = new M_user();
$data['user'] = $model->get_user($id)->getRow();
return view('view_edit', $data);
}
public function updateData()
{
$model = new M_user();
$id = $this->request->getPost('id');
$data = [
'nama' => $this->request->getPost('nama'),
'email' => $this->request->getPost('email')
];
$model->updateUser($data, $id);
return redirect()->to('/user');
}
//--------------------------------------------------------------------
}
maka tampilan dari controller user.php akan seperti dibawah ini
untuk menampilkan data user maka bukalah file view.php pada folder views dan sesuaikan kodenya menjadi seperti dibawah ini
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function() {
$('#save').click(function() {
$('#myForm').submit()
$('#tambahdata').modal('hide')
})
})
</script>
<title>User</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/user/tambahdata">Tambah Data <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('login/logout'); ?>" tabindex="-1" aria-disabled="true">Logout</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-3">
<h1>Selamat datang, <?= session()->get('nama'); ?>!</h1><br>
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">nama</th>
<th scope="col">email</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($user as $row) : ?>
<tr>
<td><?= $row['nama']; ?></td>
<td><?= $row['email']; ?></td>
<td>
<a class="btn btn-success" href="/user/edit/<?= $row['id']; ?>" role="button">ubah</a>
<a class="btn btn-danger text-white" onclick="hapusData(<?= $row['id']; ?>)" role="button">hapus</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<script>
function hapusData(id) {
message = confirm('are sure want to delete this data ?')
if (message) {
window.location.href = ("<?= base_url('user/delete'); ?>") + "/" + id
} else return false
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Kode diatas terdapat tambahan berupa script untuk memanggil tambah data, tabel untuk menampilkan data user yang sudah tersimpan di database dan juga alert jika melakukan delete data.
selanjutnya kita akan membuat halaman untuk mengubah data/edit atau update. kode yang digunakan hampir sama dengan form namun ada beberapa penyesuaian menjadi seperti berikut
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Ubah data</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto pt-5">
<h2>Ubah Data</h2><br>
<form action="/user/updateData" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="user_id" value="<?= $user->id; ?>" readonly>
</div>
<div class="form-group">
<input type="text" class="form-control" name="user_nama" value="<?= $user->nama; ?>">
</div>
<div class="form-group">
<input type="text" class="form-control" name="user_email" value="<?= $user->email; ?>">
</div>
<div class="form-group">
<input type="text" class="form-control" name="user_pass" value="<?= $user->pass; ?>" readonly>
</div>
<button class="btn btn-primary" type="submit">Simpan</button>
</form>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
dari kode diatas setiap class input memilki value yang sesuai dengan row pada database untuk menampilkan masing-masing nilainya
kemudian kita buat halaman tampilan untuk menambah data dengan nama view_tambah dengan kode seperti dibawah ini
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>tambah data</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto pt-5">
<h2>Tambah Data</h2> <br>
<form action="/user/save" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="nama" placeholder="Nama">
</div>
<div class="form-group">
<input type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" name="pass" placeholder="password">
</div>
<button class="btn btn-primary" type="submit">Simpan</button>
</form>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Cara kerja dari kode diatas sebenarnya hampir sama dengan login form namun data yang dikirim adalah ke controller user.php dan ke method save pada controller tersebut
Langkah terakhir adalah mencobanya, jangan lupa tulis c:/xampp/php/php spark serve pada terminal dan mari kita coba
setalah berhasil login maka akan didirect ke halaman view seperti ini
mari kita coba lihat terlebih dahulu isi databasenya
pada tabel tersebut terdapat 4 data, mari kita tambahkan data dengan mengeklik tombol tambah data pada aplikasi CRUD yang sudah kita buat tadi
jika sudah disimpan maka otomatis akan didirect ke halaman awal dan tampilan menjadi seperti ini
data pada database pun juga bertambah
lalu kita coba melakukan perubahan atau update seperti dibawah ini
jika sudah disimpan maka otomatis tampilan data akan berubah seperti ini
kemudian kita akan mencoba menghapus data tersebut dan akan muncul alert seperti berikut
jika sudah dihapus maka halaman awal akan otomatis menjadi seperti berikut
Wiki ini ditulis oleh Gallang Sadewa, beberapa langkah yang disertai dengan screenshot ada yang sedikit berbeda karena ada penyesuaian agar tidak terjadi error
Made with love by @gallangsdw