Membuat Pencarian Data Dengan Codeigniter 4

Pada kesempatan kali ini admin akan membahas tentang pencarian data dengan codeigniter 4, pencarian data atau search engine merupakan alat bantu yang berfungsi untuk membantu user dalam mencari sebuah data maupun informasi di aplikasi yang kita buat.

Di setiap aplikasi website pasti terdapat fitur pencarian data, fitur ini wajib di terapkan dalam website karena sangat membantu user dalam mencari informasi, Pada tutorial pencarian data dengan codeigniter 4 kali ini admin akan menggabungkannya dengan pagination yang sudah admin bahas di tutorial sebelumnya.

Baca Juga : Cara Membuat Pagination dengan Codeigniter 4

Ok langsung saja kita ke tutorialnya 

Installasi Codeigniter 4

Langkah pertama yang harus kita lakukan adalah menginstal aplikasi codeigniter 4 di komputer/laptop kita jika belum tahu silahkan buka tutorial sebelumnya Cara Installasi Codeigniter 4 langkah pertama ini wajib kita lakukan agar bisa lanjut ke langkah berikutnya.

Membuat Database

Database yang akan kita gunakan sama persis seperti database yang digunakan pada tutorial membuat pagination dengan codeignier 4, jika kalian belum mengikuti tutorial admin yang sebelumnya kalian bisa langsung saja buat database dengan nama sekolah buat satu tabel dengan nama siswa.

mysql> create database sekolah;
Query OK, 1 row affected (0.00 sec)
mysql> create table siswa (ID int(5) not null AUTO_INCREMENT, NamaLengkap varchar(50), Kelas varchar(20), PRIMARY KEY(ID));
Query OK, 0 rows affected (0.53 sec)

Jika database dan tabel sudah berhasil dibuat silahkan input data ke tabel tersebut minimal 50 data.

Membuat Koneksi Database.

Agar data yang ada didatabase bisa di tampilkan dengan balutan codeigniter 4 maka koneksi database ini wjib dilakukan, dalam membuat koneksi database di Codeigniter 4 ini ada dua cara yaitu dengan cara seperti dengan versi sebelumnya, dan untuk membuat koneksi dengan cara terbaru kita menggunakan file env. Silahkan anda rename file env di folder root codeigniter 4 kalian menjadi .env kemudian buka di text editor edit bagian berikut ini 

  CI_ENVIRONMENT = development

 database.default.hostname = localhost
 database.default.database = sekolah
 database.default.username = root
 database.default.password = 
 database.default.DBDriver = MySQLi

Silahkan sesuaikan dengan web server kalian.

Membuat File Model

Setelah koneksi database terbuat saatnya kita buat membuat file model silahkan buat file baru dengan nama ModelsSiswa.php simpan di folder app/Model  kemudian masukan kode dibawah ini (jika kalian sudah mengikuti tutorial pagination yang kemarin silahkan buka dan edit sesuaikan dengan kode berikut ini)

<?php namespace App\Models;
use CodeIgniter\Model;
 
class ModelsSiswa extends Model
{

    protected $table = 'siswa';

  public function pencarian($kunci) {
  	return $this->table('siswa')->like('NamaLengkap', $kunci);
  }
}

Pada kode diatas terdapat kelas pencarian yang berisi kode query untuk pencarian data.

Membuat Controller Controller

Controller merupakan jembatan yang digunakan untuk mengubungkan query yang ada dalam models ke halaman user interface atau view. Silahkan buat file baru dengan nama Siswa.php simpan di folder app/controller lalu masukan kode dibawah ini 

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\ModelsSiswa;
 
class Siswa extends BaseController
{
    public function index()
    {
        $pager = \Config\Services::pager();
    	$model = new ModelsSiswa();
    	$kunci = $this->request->getVar('cari');

        if ($kunci) {
            $query = $model->pencarian($kunci);
            $jumlah = "Pencarian dengan nama <B>$kunci</B> ditemukan ".$query->affectedRows()." Data";
        } else {
            $query = $model;
            $jumlah = "";
        }

        $data['siswa'] = $query->paginate(10);
        $data['pager'] = $model->pager;
        $data['page'] = $this->request->getVar('page') ? $this->request->getVar('page') : 1;
        $data['jumlah'] = $jumlah;

        echo view('list_siswa',$data);
    }
}

Pada kode diatas terdapat logika pencarian jika kata kunci yang dimasukan kosong maka data akan tampil semua jika tdak kosong maka akan menampilkan sesuai dengan kata kunci.

Membuat Views

Yang terakhir adalah membuat sebuah view yang nantinya akan menampilkan user interface ke pengguna.Silahkan buat file  baru dengan nama list_siswa simpan di folder app/view kemudian masukan kode dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SEARCHING DATA DENGAN CODEIGNITER 4</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
	<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet"> 
</head>
<body style="width: 70%; margin: 0 auto; padding-top: 30px;">
	<div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>SEARCHING DATA DENGAN CODEIGNITER 4 </h2>
            </div>
        </div>
    </div>
    <hr>
    <form method="GET" action="" class="form-group">
    <div class="row">
    	<div class="col-lg-12">
			<div class="input-group mb-3">
			  <input type="text" class="form-control" name="cari" placeholder="Mencari Data Berdasarkan Nama">
			  <div class="input-group-append">
			    <button class="btn btn-outline-secondary" type="Submit">CARI DATA</button>
			  </div>
			</div>
		</div>
    	<div class="col-lg-12">
    		<?php echo $jumlah; ?>
    	</div>
    </div>
    </form>

    <div class="row">
        <div class="col-lg-12 margin-tb">
			<table class="table table-bordered">
		        <tr>
		            <th>No</th>
		            <th>Nama Siswa</th>
		            <th>Kelas</th>
		        </tr>
		        	<?php $no=1+(10*($page-1));
		        	foreach($siswa as $row):?>
		        <tr>
		        	<td><?=$no;?></td>
		            <td><?=$row['NamaLengkap'];?></td>
		            <td><?=$row['Kelas'];?></td>
		        </tr>
		        <?php $no++; endforeach;?>
		    </table>
		    <?= $pager->Links() ?>
		</div>
	</div>
</body>
</html>

Tahap selanjutnya adalah menguji aplikasi yang sudah kita buat silahkan buka terminal/CMD kalian masuk kedalam folder root ketika php spark serve kemudian buka web browser ketikan alamat http://localhsot:8080/siswa jika berhasil maka tampilannya akan seperti gambar berikut ini

Kesimpulan

Pencarian merupakan fitur yang sangat membantu bagi pengguna sebuah aplikasi untuk mendapatkan sebuah informasi dengan cepat dan mudah.

Kita sudah berhasil mempraktekan Tutorial pencarian dengan menggunakan codeigniter 4 yang dilengkapi dengan pagination.

Semoga tutorial search engine ini dapat bermanfaat dan dapat diterapkan dalam pembuatan aplikasi yang lebih komplek.