Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : mail@rizaldimaulidia.com. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

Codeigniter Tips and Trick

Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan Codeigniter

img-responsive

Catatan saya kali ini akan membahas yang namanya Pencarian Data. Pencarian adalah salah satu fitur yang penting dalam sebuah aplikasi/web. Karena dengan fitur ini bisa memudahkan pengguna dalam mencari sebuah data yang sudah tersimpan dalam database. Pencarian yang akan kita buat kali ini adalah pencarian data dari database dan dari hasil pencarian tersebut, datanya akan kita tampilkan ke dalam sebuah textbox yang telah kita sediakan. Kita akan menggunakan Framework Codeigniter 3 (Versi 3), Jquery dan Database MySQL untuk menyimpan datanya. Berikut ini langkah-langkahnya.


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN

  1. Buat sebuah folder dengan nama getdata_ajax_ci lalu simpan pada folder xampp/htdocs/
  2. Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/getdata_ajax_ci/.
  3. Download plugin JQUERY, klik link berikut : Download.
  4. Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/getdata_ajax_ci/js/.
  5. Download Framework Codeigniter, klik link berikut : download.
  6. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/getdata_ajax_ci/.
  7. Ekstrak file codeigniter_v3.7z nya.

STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode
  2. Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
    Tabel - Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan Codeigniter

    CREATE TABLE IF NOT EXISTS `siswa` (
      `nis` varchar(11) NOT NULL,
      `nama` varchar(50) NOT NULL,
      `jenis_kelamin` varchar(10) NOT NULL,
      `telp` varchar(15) NOT NULL,
      `alamat` text NOT NULL,
      PRIMARY KEY (`nis`)
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/getdata_ajax_ci/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/getdata_ajax_ci/';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');

    Kode diatas digunakan untuk memuat (menload) class database dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'form';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi form.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
Sekarang kita akan membuat modelnya. Berisi sebuah fungsi untuk menampilkan semua data siswa pada tabel siswa. Buat sebuah file dengan nama SiswaModel.php, Lalu simpan pada folder xampp/htdocs/getdata_ajax_ci/application/models/. Berikut kodenya :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class SiswaModel extends CI_Model {
  
  public function viewByNis($nis){
    $this->db->where('nis', $nis);
    $result = $this->db->get('siswa')->row(); // Tampilkan data siswa berdasarkan NIS
    
    return $result; 
  }
}

Pada kode diatas, kita membuat sebuah fungsi viewByNis(). Dimana didalamnya terdapat kode $this->db->where(‘nis’, $nis);, kode ini yang berguna untuk menyeleksi data siswa berdasarkan NIS Jadi tidak akan semua kota yang munculnya. Pada fungsi ini juga, kita membutuhkan parameter $nis, $nis tersebut adalah NIS yang nantinya akan kita ambil dari controller. Lalu terdapat juga kode return $this->db->get(‘siswa’)->row(). Kode tersebut berfungsi untuk menampilkan data siswa berdasarkan NIS yang telah diset pada where clausenya. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->row(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data siswa.


STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Form.php, lalu simpan pada folder xampp/htdocs/getdata_ajax_ci/application/controllers/. Berikut ini kodenya :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Form extends CI_Controller {
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('SiswaModel');
  }

  public function index(){
    $this->load->view('form');
  }
  
  public function search(){
    // Ambil data NIS yang dikirim via ajax post
    $nis = $this->input->post('nis');
    
    $siswa = $this->SiswaModel->viewByNis($nis);
    
    if( ! empty($siswa)){ // Jika data siswa ada/ditemukan
      // Buat sebuah array
      $callback = array(
        'status' => 'success', // Set array status dengan success
        'nama' => $siswa->nama, // Set array nama dengan isi kolom nama pada tabel siswa
        'jenis_kelamin' => $siswa->jenis_kelamin, // Set array jenis_kelamin dengan isi kolom jenis_kelamin pada tabel siswa
        'telepon' => $siswa->telp, // Set array jenis_kelamin dengan isi kolom telp pada tabel siswa
        'alamat' => $siswa->alamat, // Set array jenis_kelamin dengan isi kolom alamat pada tabel siswa
      );
    }else{
      $callback = array('status' => 'failed'); // set array status dengan failed
    }

    echo json_encode($callback); // konversi varibael $callback menjadi JSON
  }
}

Mungkin tidak perlu saya jelaskan lagi karena sudah saya kasih penjelasan tiap kode dengan  komentar.


STEP 6 – PROSES AJAX
Langkah selanjutnya adalah membuat sebuah file javascript untuk menampung kode jquery ajax nya. Buat sebuah file dengan nama config.js, lalu simpad pada folder xampp/htdocs/getdata_ajax_ci/js/. Berikut ini kodenya :

function search(){
  $("#loading").show(); // Tampilkan loadingnya
  
  $.ajax({
        type: "POST", // Method pengiriman data bisa dengan GET atau POST
        url: baseurl + "form/search", // Isi dengan url/path file php yang dituju
        data: {nis : $("#nis").val()}, // data yang akan dikirim ke file proses
        dataType: "json",
        beforeSend: function(e) {
            if(e && e.overrideMimeType) {
                e.overrideMimeType("application/json;charset=UTF-8");
            }
    },
    success: function(response){ // Ketika proses pengiriman berhasil
            $("#loading").hide(); // Sembunyikan loadingnya
            
            if(response.status == "success"){ // Jika isi dari array status adalah success
        $("#nama").val(response.nama); // set textbox dengan id nama
        $("#jenis_kelamin").val(response.jenis_kelamin); // set textbox dengan id jenis kelamin
        $("#telepon").val(response.telepon); // set textbox dengan id telepon
        $("#alamat").val(response.alamat); // set textbox dengan id alamat
      }else{ // Jika isi dari array status adalah failed
        alert("Data Tidak Ditemukan");
      }
    },
        error: function (xhr, ajaxOptions, thrownError) { // Ketika ada error
      alert(xhr.responseText);
        }
    });
}

$(document).ready(function(){
  $("#loading").hide(); // Sembunyikan loadingnya
  
    $("#btn-search").click(function(){ // Ketika user mengklik tombol Cari
        search(); // Panggil function search
    });
    
    $("#nis").keyup(function(){ // Ketika user menekan tombol di keyboard
    if(event.keyCode == 13){ // Jika user menekan tombol ENTER
      search(); // Panggil function search
    }
  });
});

STEP 7 – BUAT VIEW
Selanjutnya kita akan buat sebuah file untuk menampilkan formnya. Buat file baru dengan nama form.php, lalu simpan pada folder xampp/htdocs/getdata_ajax_ci/application/views/. Berikut ini kode dan tampilannya :

Form - Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan Codeigniter

<html>
<head>
    <title>GET DATA with AJAX</title>
    
    <script>
    var baseurl = "<?php echo base_url("index.php/"); ?>"; // Buat variabel baseurl untuk nanti di akses pada file config.js
    </script>
    <script src="<?php echo base_url("js/jquery.min.js"); ?>"></script> <!-- Load library jquery -->
    <script src="<?php echo base_url("js/config.js"); ?>"></script> <!-- Load file process.js -->
</head>
<body>

<h1>FORM SISWA</h1><hr>
<form>
<table>
  <tr>
    <td>NIS</td>
    <td>:</td>
    <td><input type="text" name="nis" id="nis"> <button type="button" id="btn-search">Cari</button> <span id="loading">LOADING...</span></td>
  </tr>
  <tr>
    <td>Nama</td>
    <td>:</td>
    <td><input type="text" name="nama" id="nama"></td>
  </tr>
  <tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td><input type="text" name="jenis_kelamin" id="jenis_kelamin"></td>
  </tr>
  <tr>
    <td>Telepon</td>
    <td>:</td>
    <td><input type="text" name="telepon" id="telepon"></td>
  </tr>
  <tr>
    <td>Alamat</td>
    <td>:</td>
    <td><input type="text" name="alamat" id="alamat"></td>
  </tr>
</table>
</form>

</body>
</html>

PENJELASAN CARA KERJA
Saya akan coba jelaskan cara kerja / alur proses pencarian.
Pertama, User akan menginput NIS pada textbox dengan id=”nis”.

<input type="text" name="nis" id="nis">

Kemudian ketika user menekan tombol ENTER atau mengklik tombol Cari,

<button type="button" id="btn-search">Cari</button>

function search() akan mengeksekusi perintah AJAX (yang ada di file config.js) untuk mengirimkan NIS yang telah diinput tadi ke fungsi search() yang ada di file controller Form.php. Lalu di file fungsi search(), dilakukan pencarian data ke tabel siswa di database berdasarkan NIS yang dikirim tadi oleh AJAX. Kemudian, fungsi search() akan memberikan hasil pencarian dalam bentuk array $callback yang telah di konversi menjadi JSON. Array tersebut akan diambil kembali oleh AJAX dan memasukkannya ke dalam variabel response. Lalu langkah terakhir adalah men-set textbox dengan hasil pencarian tadi.


Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Load data dari database ke dalam textbox dengan Codeigniter, Cara membuat pencarian tanpa refresh halaman dan menampilkannya ke textbox dengan Codeigniter, Cara mudah dan cepat membuat pencarian tanpa refresh halaman dan menampilkannya ke textbox dengan Codeigniter, Load data dari database tanpa refresh halaman ke dalam textbox dengan Codeigniter, cara menampilkan data otomatis dari database ke textbox dengan Codeigniter

Pencarian

(Total : 15,987 viewers, 1 viewers today)
pencarian-data-textbox-codeigniter

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

17 Comments

  1. obinkmalmsteen

    Bang,mantap source dan tutorialnya. cuman ketika saya nambahin kolom database dan field nya koq ngga berfungsi ya?

  2. Syafa Muh

    Permisi bang, untuk search ke beberapa tabel berbeda bagaimana ya?

  3. Syafa Muh

    Permisi mas mau tanya, kan di source code di atas untuk 1 tabel siswa, kalau search nya ke beberapa tabel untuk controller dan modelnya bagaiamana ya?

  4. dwiiiiiiii

    punten, link utk download jquerynya kok ga bisa diklik ya?

    • Maaf om, ada kesalahan pada link downloadnya, sudah saya perbaiki. Kalau masih belum bisa, coba Clear Cache browsernya dulu, lalu coba lagi. Mohon Maaf sebelumnnya.

  5. Abdul Azis Gea

    Maaf mas, mau nanya…
    Saya sudah implementasikan code yg mas buat ke aplikasi saya. Tp kenapa yh ada error html 404 . Mohon pencerahan nya mas 🙏😊
    Terimakasih.

  6. armanmaulana

    pas klik cari data tidak keluar dan ada perigatan html knp ya?

    • coba buka console browsernya om, pada tab network nanti keliatan request ajax nya. nah klik itu, biar keliatan errornya apa

  7. iza131313

    Bagaimana agar serch ini bisa digunakan di modal bootstrap 3 mas

NOTE ARCHIVES