Langkah 1 – Unduh kerangka kerja Codeigniter 4
Pada langkah ini, Anda harus mengunduh framework Codeigniter 4 versi terbaru. Disini kita akan menggunakan composer untuk mendownload framework Codeigniter 4. Jadi untuk ini, kita harus pergi ke command prompt, dan kemudian setelah pergi ke direktori di mana Anda ingin mengunduh dan menginstal framework codeigniter 4 dan di sini kita ingin menjalankan perintah berikut.
composer create-project codeigniter4/appstarter dynamic-dependent
Perintah ini akan membuat direktori yang bergantung pada dinamis dan di bawah direktori itu akan mengunduh dan menginstal kerangka kerja Codeigniter 4.
Langkah 2 – Buat Tabel di Database Mysql
Pada langkah ini, kita perlu membuat database dengan nama testing . Jadi, kita harus membuka PHPMyAdmin dan di bawah ini kita harus membuat database dengan pengujian nama. Dan setelah berhasil membuat database, kita harus menjalankan skrip sql berikut untuk membuat tabel yang diperlukan dalam database.
--
-- Database: `country_state_city`
--
-- --------------------------------------------------------
--
-- Table structure for table `country`
--
CREATE TABLE `country` (
`country_id` int(11) NOT NULL,
`country_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `country`
--
INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'USA'),
(2, 'Canada'),
(3, 'Australia'),
(4, 'India');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `country`
--
ALTER TABLE `country`
ADD PRIMARY KEY (`country_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `country`
--
ALTER TABLE `country`
MODIFY `country_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
--
-- Table structure for table `state`
--
CREATE TABLE `state` (
`state_id` int(11) NOT NULL,
`country_id` int(11) NOT NULL,
`state_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `state`
--
INSERT INTO `state` (`state_id`, `country_id`, `state_name`) VALUES
(1, 1, 'New York'),
(2, 1, 'Alabama'),
(3, 1, 'California'),
(4, 2, 'Ontario'),
(5, 2, 'British Columbia'),
(6, 3, 'New South Wales'),
(7, 3, 'Queensland'),
(8, 4, 'Karnataka'),
(9, 4, 'Telangana');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `state`
--
ALTER TABLE `state`
ADD PRIMARY KEY (`state_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `state`
--
ALTER TABLE `state`
MODIFY `state_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
--
-- Table structure for table `city`
--
CREATE TABLE `city` (
`city_id` int(11) NOT NULL,
`state_id` int(11) NOT NULL,
`city_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `city`
--
INSERT INTO `city` (`city_id`, `state_id`, `city_name`) VALUES
(1, 1, 'New York city'),
(2, 1, 'Buffalo'),
(3, 1, 'Albany'),
(4, 2, 'Birmingham'),
(5, 2, 'Montgomery'),
(6, 2, 'Huntsville'),
(7, 3, 'Los Angeles'),
(8, 3, 'San Francisco'),
(9, 3, 'San Diego'),
(10, 4, 'Toronto'),
(11, 4, 'Ottawa'),
(12, 5, 'Vancouver'),
(13, 5, 'Victoria'),
(14, 6, 'Sydney'),
(15, 6, 'Newcastle'),
(16, 7, 'City of Brisbane'),
(17, 7, 'Gold Coast'),
(18, 8, 'Bangalore'),
(19, 8, 'Mangalore'),
(20, 9, 'Hydrabad'),
(21, 9, 'Warangal');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `city`
--
ALTER TABLE `city`
ADD PRIMARY KEY (`city_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `city`
--
ALTER TABLE `city`
MODIFY `city_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
Langkah 3 – Setup Koneksi Database Mysql
Pada langkah ketiga, kita harus menghubungkan aplikasi Codeigniter 4 kita dengan database Mysql. Untuk ini, kita harus membuka file app/Config/Database.php di editor teks Anda. Dan Setelah membuka file itu di texteditor, kita harus mendefinisikan detail konfigurasi database, yang dapat kita lihat di bawah ini.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'testing',
'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,
];
Langkah 4 – Buat File Model
Setelah membuat koneksi database mysql, selanjutnya kita harus pergi ke folder app/Models dan di bawah ini kita harus membuat tiga file kelas model untuk setiap tabel Negara, Negara Bagian dan kota yang dapat Anda temukan di bawah ini.app/Models/CountryModel.php
<?php
//CountryModel.php
namespace App\Models;
use CodeIgniter\Model;
class CountryModel extends Model{
protected $table = 'country';
protected $primaryKey = 'country_id';
protected $allowedFields = ['country_name'];
}
?>
app/Models/StateModel.php
<?php
//StateModel.php
namespace App\Models;
use CodeIgniter\Model;
class StateModel extends Model{
protected $table = 'state';
protected $primaryKey = 'state_id';
protected $allowedFields = ['country_id', 'state_name'];
}
?>
app/Models/CityModel.php
<?php
//CityModel.php
namespace App\Models;
use CodeIgniter\Model;
class CityModel extends Model{
protected $table = 'city';
protected $primaryKey = 'city_id';
protected $allowedFields = ['state_id', 'city_name'];
}
?>
Di bawah semua file ini, kita harus mendefinisikan nama tabel Mysql, kunci utama tabel dan detail nama bidang di semua model untuk operasi terkait database menggunakan kelas Model.
Langkah 5 – Buat Pengontrol
Dalam langkah ini, kita harus membuat kelas pengontrol untuk menangani permintaan http. Jadi untuk membuat kelas Controllers, kita harus mengunjungi folder app/Controllers dan membuat controller dengan nama Dynamic_dependent.php . Di bawah kelas pengontrol ini, kita perlu menambahkan metode berikut di bawah kelas pengontrol ini.app/Controllers/Dynamic_dependent.php
<?php
//Dynamic_dependent.php
namespace App\Controllers;
use App\Models\CountryModel;
use App\Models\StateModel;
use App\Models\CityModel;
class Dynamic_dependent extends BaseController
{
function index()
{
$countryModel = new CountryModel();
$data['country'] = $countryModel->orderBy('country_name', 'ASC')->findAll();
return view('dynamic_dependent', $data);
}
function action()
{
if($this->request->getVar('action'))
{
$action = $this->request->getVar('action');
if($action == 'get_state')
{
$stateModel = new StateModel();
$statedata = $stateModel->where('country_id', $this->request->getVar('country_id'))->findAll();
echo json_encode($statedata);
}
if($action == 'get_city')
{
$cityModel = new CityModel();
$citydata = $cityModel->where('state_id', $this->request->getVar('state_id'))->findAll();
echo json_encode($citydata);
}
}
}
}
?>
Langkah 6 – Buat Lihat File
Di bawah langkah ini, kita harus membuat file tampilan dengan nama dynamic_dependent.php di bawah direktori Views . File ini akan digunakan untuk menampilkan output html di browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php echo base_url('/css/bootstrap.min.css'); ?>" >
<script src="<?php echo base_url('/js/jquery.min.js'); ?>"></script>
<script src="<?php echo base_url('/js/popper.min.js'); ?>"></script>
<script src="<?php echo base_url('/js/bootstrap.min.js'); ?>"></script>
<title>Codeigniter 4 Dynamic Dependent Dropdown with Ajax</title>
</head>
<body>
<div class="container">
<h2 class="text-center mt-4 mb-4">Codeigniter 4 Dynamic Dependent Dropdown with Ajax</h2>
<span id="message"></span>
<div class="card">
<div class="card-header">Codeigniter 4 Dynamic Dependent Dropdown with Ajax</div>
<div class="card-body">
<div class="row justify-content-md-center">
<div class="col col-lg-6">
<div class="form-group">
<select name="country" id="country" class="form-control input-lg">
<option value="">Select Country</option>
<?php
foreach($country as $row)
{
echo '<option value="'.$row["country_id"].'">'.$row["country_name"].'</option>';
}
?>
</select>
</div>
<div class="form-group">
<select name="state" id="state" class="form-control input-lg">
<option value="">Select State</option>
</select>
</div>
<div class="form-group">
<select name="city" id="city" class="form-control input-lg">
<option value="">Select City</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#country').change(function(){
var country_id = $('#country').val();
var action = 'get_state';
if(country_id != '')
{
$.ajax({
url:"<?php echo base_url('/dynamic_dependent/action'); ?>",
method:"POST",
data:{country_id:country_id, action:action},
dataType:"JSON",
success:function(data)
{
var html = '<option value="">Select State</option>';
for(var count = 0; count < data.length; count++)
{
html += '<option value="'+data[count].state_id+'">'+data[count].state_name+'</option>';
}
$('#state').html(html);
}
});
}
else
{
$('#state').val('');
}
$('#city').val('');
});
$('#state').change(function(){
var state_id = $('#state').val();
var action = 'get_city';
if(state_id != '')
{
$.ajax({
url:"<?php echo base_url('/dynamic_dependent/action'); ?>",
method:"POST",
data:{state_id:state_id, action:action},
dataType:"JSON",
success:function(data)
{
var html = '<option value="">Select City</option>';
for(var count = 0; count < data.length; count++)
{
html += '<option value="'+data[count].city_id+'">'+data[count].city_name+'</option>';
}
$('#city').html(html);
}
});
}
else
{
$('#city').val('');
}
});
});
</script>
Langkah 7 – Mulai Server Codeigniter 4
Sekarang kita telah sampai pada langkah terakhir, setelah mengikuti semua langkah di atas, sekarang kita perlu memulai server framework Codeigniter 4, jadi kita harus command prompt dan masuk ke direktori di mana kita telah mendownload dan menginstal framework Codeigniter, dan kemudian setelah kita memiliki untuk menjalankan perintah berikut.
php spark serve
Perintah ini akan memulai server Codeigniter 4 dan itu akan memberi kita url dasar dari aplikasi Codeigniter 4 kita dan untuk menjalankan kode di atas, kita telah menekan url berikut di browser.
http://localhost:8080/dynamic_dependent
sumber:https://www.webslesson.info/
