This post is also available in:
English
Hallo apa kabar teman teman semua, kali ini kita membahas codeigniter 3 dan select2. Select2 sangat berguna bagi kita ketika membuat data pencarian sesai data tertentu. Select2 sangat membantu developer ketika membangun aplikasi berbasis web. Sebelum kita lanjutkan di mohon teman teman pelajari dasar dari Codeigniter 3.
Kita langsung saja ke pemabasan kita, cara menggunakan select2 di Codeigniter 3.
1. Database
Buatlah tabel User dan Hobby pada sql teman semua. Struktur tabel seperti ini seperti ini:
- Tabel Users
CREATE TABLE `users` (
`id` varchar(25) NOT NULL,
`name` varchar(255) NOT NULL,
`data_pro_hobby` text DEFAULT NULL COMMENT 'Data Format JSON',
) ENGINE=InnoDB DEFAULT CHARSET=utf8;Tabel users ini hanya sebagai contoh untuk menyimpan data hobby dalam format json.
- Tabel Hobby
CREATE TABLE `hobbies` (
`id` varchar(25) NOT NULL,
`data_name` varchar(255) NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8;Tabel hobby berfungsi untuk menympan data hobby.
2. Controller Index
Kali ini teman teman buat controller sebagai fungsi untuk menampilkan data.
public function index()
{
$data['name'] = $this->security->get_csrf_token_name();
$data['hash'] = $this->security->get_csrf_hash();
$data["hobby"] = $this->db->get_where('hobbies',array('status'=>1))->result();
$this->display('index', $data);
}
}3. View Hobby
Selanjutnya kita tambahkan view untuk input data hobby kita.
<div class="modal fade" id="modalHobby" role="dialog" aria-labelledby="Label" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Lable">Add Hobby</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<form action="<?php echo base_url('user/profile/add_hobby/) ?>" method="post" role="form" enctype="multipart/form-data">
<input type="hidden" name="<?php echo $CSRF['name']; ?>" value="<?php echo $CSRF['hash']; ?>"/>
<input type="hidden" name="id" value="<?php echo $users->id ?>" />
<input type="hidden" name="form" value="profile/setting" />
<div class="modal-body">
<div class="mb-3">
<input type="text" name="name" class="form-controll">
</div>
<div class="mb-3">
<select class="hobby w-100 form-select" name="hobbies[]" multiple="multiple" require>
<?php
if(!empty($hobby)){
foreach($hobby as $value){
echo "<option value='$value->id'>$value->data_name</option>";
}}
?>
</select>
</div>
</div>
<div class="modal-footer border-top">
<button type="button" class="btn btn-muted" data-bs-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-danger" value="Save">
</div>
</form>
</div>
</div>
</div>Maka langkah selanjutnya kita tambahkan, code select2.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$(this).find('.hobby').each(function() {
var dropdownParent = $(document.body);
if ($(this).parents('.modal.show').length !== 0)
dropdownParent = $(this).parents('.modal.show');
$(this).select2({
theme: "bootstrap5",
placeholder: '-Select Hobby-',
dropdownParent: dropdownParent,
ajax: {
url: '<?php echo base_url();?>user/setting/searchhobby',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
},
tags: true
});
});
</script>Hasil dari kode di atas:
4. Route
Tambahkan route untuk menjalankan select2 dan penyimpanan data kita.
// Hobby
$route['user/setting/searchhobby'] = 'users_setting/searchHobby';
$route['user/profile/add_hobby/(:any)'] = 'users_profile/hobby_add';5. Controller Search Data Hobby
function searchHobby()
{
$q = $this->input->get('q');
$this->load->model('M_hobby');
echo json_encode($this->M_setting->getHobby($q));
}6. Model Hobby
<?php
class M_hobby extends CI_Model
{
function __construct()
{
parent::__construct();
}
function getHobby($str)
{
$this->db->select('id, data_name as text');
$this->db->like('data_name', $str);
$query = $this->db->get('mst_hobbies');
return $query->result();
}
}
?>7. Controller tambah hobby
Kali ini kita akan membuat sebuah fungsi untuk menyimpan data hobby kita ke tabel users.
/** add hobby */
public function hobby_add()
{
$this->form_validation->set_rules('hobbies[]', 'hobby', 'trim|required');
$name = $this->input->post('name');
$hobbies = $this->input->post('hobbies');
if(!empty($hobbies)){
$result = [];
foreach($hobbies AS $key => $val){
$hobby = $this->db->get_where('hobbies', array('id'=>$hobbies[$key]))->row();
$result[] = array(
'hobby_id' => $hobby->id,
);
}
$contact['hobby'] = json_encode($result, true);
$update = $this->db->update('users', $contact);
}
if($update == true){
$this->session->set_flashdata('success', 'Account has been saved');
}
redirect('index');
}Output data json ke tabel users:
[{"hobby_id":"21090861384371A7E59"},{"hobby_id":"210908613842CA630B1"},{"hobby_id":"210908613842D26118E"},{"hobby_id":"210908613842D8F29B9"}]Demikian tutorial yang bisa saya sampaikan, semoga bermanfaat untuk teman teman semuanya.
Baca juga tutorial yang lainnya:
Tutorial Codeigniter 4 ~ Load more menggunakan ajax
