Langkah 1 – Instal Aplikasi Codeigniter 4
Silahkan kunjungi tautan ini https://codeigniter.com/download Download aplikasi Codeigniter 4 dan unzip setup di sistem lokal Anda xampp/htdocs/ .
Langkah 2 – Konfigurasi Aplikasi Dasar
Kemudian silahkan konfigurasi dasar pada file app/config/app.php , silahkan pergi ke application/config/config.php dan buka file ini pada editor teks.
Setel URL berikut ini
publik $baseURL = ‘http://localhost:8080’;
Ke publik $baseURL = ‘http://localhost/demo/’;
Langkah 3 – Buat Database dan Tabel
BUAT demo DATABASE ;
BUAT pengguna TABEL ( id int( 11 ) NOT NULL AUTO_INCREMENT COMMENT ‘Primary Key’ , nama varchar( 100 ) NOT NULL COMMENT ‘Name’ , email varchar( 255 ) NOT NULL COMMENT ‘Email Address’ , PRIMARY KEY (id) ) ENGINE = InnoDB DEFAULT CHARSET = latin1 COMMENT = ‘demo database’ AUTO_INCREMENT = 1 ;
INSERT INTO `users` ( `id` , `name` , `email` ) NILAI
( 1 , ‘Mamat Sunardi’ , ‘paul@gmail.com’ ),
( 2 , ‘Vanya Imayan’ , ‘vanya@gmail.com’ ),
( 3 , ‘Dewa Luther’ , ‘luther@gmail.com’ ),
( 4 , ‘Dwi John Doe’ , ‘john@gmail.com’ ),
( 5 , ‘Tika Dewi Paul’ , ‘paul@gmail.com’ ),
( 6 , ‘Didik Vanya’ , ‘vanya@gmail.com’ ),
( 7 , ‘Minka Luther’ , ‘luther@gmail.com’ ),
( 8 , ‘Wayne Diew Barrett’ , ‘wayne@gmail.com’ ),
( 9 , ‘Vincent Ros’ , ‘ramos@gmail.com’ ),
( 10 , ‘Susan Warren’ , ‘sussan@gmail.com’ ),
( 11 , ‘Jason Evans’ , ‘jason@gmail.com’ ),
( 12 , ‘Madison Simpson’ , ‘madison@gmail.com’ ),
( 13 , ‘Marvin Ortiz’ , ‘paul@gmail.com’ ),
( 14 , ‘Felecia Phillips’ , ‘felecia@gmail.com’ ),
( 15 , ‘Tommy Hernandez’ , ‘hernandez@gmail.com’ );
Langkah 4 – Siapkan Kredensial Basis Data
Menghubungkan aplikasi codeigniter 4 Anda ke database. kunjungi direktori app/Config/ dan buka Database.php . Kemudian tambahkan detail database seperti di bawah ini ke dalam file database.php
publik $default = [
‘DSN’ = > ” ,
‘hostname’ = > ‘localhost’ ,
‘nama pengguna’ = > ‘tes’ ,
‘kata sandi’ = > ‘4Mu99BhzK8dr4vF1’ ,
‘database’ = > ‘demo’ ,
‘DBDriver’ = > ‘MySQLi’ ,
‘DBPrefix’ = > ” ,
‘pConnect’ = > salah ,
‘DBDebug’ = > ( LINGKUNGAN !== ‘pengembangan’ ) ,
‘cacheOn’ = > salah , ‘cacheDir’ = > ” ,
‘charset’ = > ‘utf8’ ,
‘DBCollat’ = > ‘utf8_general_ci’ ,
‘swapPre’ = > ” ,
‘enkripsi’ = > salah ,
‘kompres’ = > salah ,
‘strictOn’ = > salah ,
‘gagal’ = > [] ,
‘pelabuhan’ = > 3306,
] ;
Langkah 5 – Buat Kelas Model
< ?php
namespace App\Models;
gunakan CodeIgniter\Model;
kelas UserModel memperluas Model{ protected $table = ‘pengguna’ ;
protected $primaryKey = ‘id’ ;
protected $allowedFields = [ ‘nama’ , ’email’ ] ;
}
Langkah 6 – Buat Controller
Buat file .php UserCrudController . Jadi, kunjungi direktori app/Controllers dan buat UserCrudController .php .Kemudian tambahkan kode berikut ke dalamnya
< ?php
namespace App\Controllers;
gunakan App\Models\UserModel;
gunakan CodeIgniter\Controller;
kelas UserCrudController memperluas Controller{ // tampilkan daftar pengguna indeks fungsi publik (){ $userModel = new UserModel () ;
$data[‘users’] = $userModel->orderBy ( ‘id’ , ‘DESC’ ) – > paginate ( 10 ) ;
$data[‘pagination_link’] = $userModel->pager ;
tampilan kembali ( ‘daftar’ , $data ) ; }
// tambahkan formulir pengguna fungsi publik buat (){ tampilan kembali ( ‘add_user’ ) ; }
//masukkan data toko fungsi publik () { $userModel = new UserModel () ; $data = [ ‘name’ = > $this – > request ->getVar ( ‘name’ ) , ’email’ = > $this – > request ->getVar ( ’email’ ) , ] ; $userModel->insert ( $data ) ; return $this – > response ->redirect ( site_url ( ‘/list’ )) ; }
// tampilkan pengguna tunggal fungsi publik singleUser ( $id = null ){ $userModel = new UserModel () ; $data[‘user_obj’] = $userModel->where ( ‘id’ , $id ) – > first () ; tampilan kembali ( ‘edit_user’ , $data ) ; }
// perbarui data pengguna pembaruan fungsi publik (){ $userModel = new UserModel () ; $id = $this – > request ->getVar ( ‘id’ ) ; $data = [ ‘name’ = > $this – > request ->getVar ( ‘name’ ) , ’email’ = > $this – > request ->getVar ( ’email’ ) , ] ; $userModel->update ( $id, $data ) ; return $this – > response ->redirect ( site_url ( ‘/list’ )) ; }
// Hapus pengguna hapus fungsi publik ( $id = null ){ $userModel = new UserModel () ; $data[‘user’] = $userModel->where ( ‘id’ , $id ) – > delete ( $id ) ; return $this – > response ->redirect ( site_url ( ‘/list’ )) ; } }
Langkah 7 – Buat VIEW
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title>Codeigniter 4 CRUD App Example – laratutorials.com</title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
</head>
<body>
<div class=”container mt-4″>
<div class=”d-flex justify-content-end”>
<a href=”<?php echo site_url(‘/user-form’) ?>” class=”btn btn-success mb-2″>Add User</a>
</div>
<?php
if(isset($_SESSION[‘msg’])){
echo $_SESSION[‘msg’];
}
?>
<div class=”mt-3″>
<table class=”table table-bordered” id=”users-list”>
<thead>
<tr>
<th>User Id</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php if($users): ?>
<?php foreach($users as $user): ?>
<tr>
<td><?php echo $user[‘id’]; ?></td>
<td><?php echo $user[‘name’]; ?></td>
<td><?php echo $user[’email’]; ?></td>
<td>
<a href=”<?php echo base_url(‘edit-view/’.$user[‘id’]);?>” class=”btn btn-primary btn-sm”>Edit</a>
<a href=”<?php echo base_url(‘delete/’.$user[‘id’]);?>” class=”btn btn-danger btn-sm”>Delete</a>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
<div>
<?php
if($pagination_link)
{
$pagination_link->setPath(‘list’);
echo $pagination_link->links();
}
?>
</div>
</div>
</div>
</body>
</html>
Selanjutnya, Buat file view add_user .php , direktori application/views/ dan buat file add_user .php. Kemudian tambahkan HTML berikut ke dalam file .php
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 4 Add Form With Validation – Laratutorials.com</title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”>
<style>
.container {
max-width: 500px;
}
.error {
display: block;
padding-top: 5px;
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<div class=”container mt-5″>
<form method=”post” id=”add_create” name=”add_create”
action=”<?= site_url(‘/submit-form’) ?>”>
<div class=”form-group”>
<label>Name</label>
<input type=”text” name=”name” class=”form-control”>
</div>
<div class=”form-group”>
<label>Email</label>
<input type=”text” name=”email” class=”form-control”>
</div>
<div class=”form-group”>
<button type=”submit” class=”btn btn-primary btn-block”>Update Data</button>
</div>
</form>
</div>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js”></script>
<script>
if ($(“#add_create”).length > 0) {
$(“#add_create”).validate({
rules: {
name: {
required: true,
},
email: {
required: true,
maxlength: 60,
email: true,
},
},
messages: {
name: {
required: “Name is required.”,
},
email: {
required: “Email is required.”,
email: “It does not seem to be a valid email.”,
maxlength: “The email should be or equal to 60 chars.”,
},
},
})
}
</script>
</body>
</html>
Buat file view edit_view .php , kunjungi direktori application/views/ dan buat file edit_view .php. Kemudian tambahkan HTML berikut ke dalam file .php
<!DOCTYPE html>
< html >
< kepala >
< title > Codeigniter 4 Contoh Edit Form – Laratutorials.com </ title >
< link rel = “stylesheet” href = “https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css” >
< gaya >
.wadah {
lebar maks: 500 piksel;
}
.kesalahan {
tampilan: blok;
padding-atas: 5px;
ukuran font: 14px;
warna merah;
}
</ gaya >
</ kepala >
< tubuh >
< div class = “wadah mt-5” >
< form method = “posting” id = “update_user” name = “update_user”
action=”<?= site_url(‘/update’) ? > “>
< tipe input = “tersembunyi” nama = “id” id = “id” value=”<?php echo $user_obj[‘id’]; ? > “>
< div class = “form-group” >
< label > Nama </ label >
< input type = “text” name = “name” class = “form-control” value=”<?php echo $user_obj[‘name’]; ? > “>
</ div >
< div class = “form-group” >
< label > Email </ label >
< input type = “email” name = “email” class = “form-control” value=”<?php echo $user_obj[’email’]; ? > “>
</ div >
< div class = “form-group” >
< jenis tombol = “kirim” class = “btn btn-bahaya btn-block” > Simpan Data </ tombol >
</ div >
</ bentuk >
</ div >
< script src = “https://code.jquery.com/jquery-3.5.1.slim.min.js” > </ script >
< script src = “https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js” > </ script >
< script src = “https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js” > </ script >
< naskah >
if ($(“#update_user”).length > 0) {
$(“#update_user”).validate({
aturan: {
nama: {
diperlukan: benar,
},
surel: {
diperlukan: benar,
panjang maksimum: 60,
email: benar,
},
},
pesan: {
nama: {
diperlukan: “Nama diperlukan.”,
},
surel: {
diperlukan: “Email diperlukan.”,
email: “Sepertinya itu bukan email yang valid.”,
maxlength: “Email harus atau sama dengan 60 karakter.”,
},
},
})
}
</ skrip >
</ tubuh >
</ html >
Langkah 8 – Atur Rute
Untuk menentukan rute, kunjungi direktori app/Config/ dan buka file Routes.php . Kemudian tambahkan rute berikut ke dalamnya
// Rute RESTful CRUD
$routes->setDefaultController ( ‘UserCrudController’ ) ;
$routes->get ( ‘daftar’ , ‘UserCrudController::index’ ) ;
$routes->get ( ‘user-form’ , ‘UserCrudController::create’ ) ;
$routes->post ( ‘kirim-form’ , ‘UserCrudController::store’ ) ;
$routes->get ( ‘edit-view/(:num)’ , ‘UserCrudController::singleUser/$1’ ) ;
$routes->post ( ‘update’ , ‘UserCrudController::update’ ) ;
$routes->get ( ‘delete/(:num)’ , ‘UserCrudController::delete/$1’ ) ;
Langkah Terakhir menjalankan aplikasi silahkan kunjungi command prompt atau terminal jalan kan perintah
php spark serve
silahkan kunjungi URL di bawah ini
http://localhost/demo/ atau http://localhost:8080/
temen temen joki coding semoga berhasil dan juga jangan lupa semangat untuk ngoding salam sukses dan sehat lebih lanjut kunjungi https://laratutorials.com/
