Salam sejahtera bagi kita semua,
Dikesempatan kali ini saya akan memberikan sedikit tutorial tentan Autocomplete pada Codeigniter dengan JQuery serta MySQL.
Apasih gunanya? Autocomplete disini berguna untuk memudahkan dalam pencarian suatu data yang terdapat pada database sesuai dengan apa yang diketikan pada form search. Langsung pada pembahasan.
Framework Codeigniter jika masih belum download bisa langsung click Download
Buat database dan juga tabel pada MySQL.
Setelah membuat database dan tabel selesai, langsung saja masuk ke dalam codeigniter.
Pertama ubah dulu konfigurasi pada database.php yang dapa pada folder application->config.
Pada gambar saya menggunakan database bernama 'tutorial' lalu untuk username isikan root, untuk password dikosongkan saja.
lanjut ke konfigurasi config.php tetap berada difolder yang sama.
Lalu ke autoload.php dimana berfungsi untuk memanggil otomatis library / helper yang akan dipakai. Pada kasus ini menggunakan database jadi harus memanggil terlebih dahulu library dari database.
Untuk helper yang diatas gunanya agar bisa memanggil fungsi base_url() / site_url() pada view nanti.
Setelah selesai semua, buat lagi file model untuk mengambil data yang akan dicari.
Lalu buat controller seperti gambar dibawah ini.
Pada controller ini berfungsi untuk memanggil fungsi yang sudah kita buat tadi pada model, sebelum itu harus load dulu model pada fungsi __construct. seperti gambar. lalu buat fungsi autocomplete untuk memecah data dari model agar bisa ditampilkan pada view. Jika sudah, langsung saja buat view. Kali ini saya berinama Search.php.
Script tag head pada view search.php
Code untuk membuat form search yang ada pada view search.php
Dan yang terakhir adalah script jquery yang digunakan untuk mempercepat dan efisien dan melakukan pencarian tanpa reload dan dinamis.
fungsi ajaxsearch pada jquery nanti akan diletakan didalam atribut onkeyup pada input search karena pencarian ini akan dijalankan ketika keyboard diketik.
Jika sudah selesai, jalankan program dengan url yang telah disetting pada config.php tadi. Apabila berhasil maka akan keluar seperti di bawah.
Sekian dari tutorial ini, semoga bermanfaat apabila ada kesalahan dan pertanyaan sampaikan pada kolom komentar. Terimakasih.
SELAMAT MENCOBA GOODLUCK :)
Untuk file bisa didownload disini
Dikesempatan kali ini saya akan memberikan sedikit tutorial tentan Autocomplete pada Codeigniter dengan JQuery serta MySQL.
Apasih gunanya? Autocomplete disini berguna untuk memudahkan dalam pencarian suatu data yang terdapat pada database sesuai dengan apa yang diketikan pada form search. Langsung pada pembahasan.
Framework Codeigniter jika masih belum download bisa langsung click Download
Buat database dan juga tabel pada MySQL.
Setelah membuat database dan tabel selesai, langsung saja masuk ke dalam codeigniter.
Pertama ubah dulu konfigurasi pada database.php yang dapa pada folder application->config.
Pada gambar saya menggunakan database bernama 'tutorial' lalu untuk username isikan root, untuk password dikosongkan saja.
lanjut ke konfigurasi config.php tetap berada difolder yang sama.
Lalu ke autoload.php dimana berfungsi untuk memanggil otomatis library / helper yang akan dipakai. Pada kasus ini menggunakan database jadi harus memanggil terlebih dahulu library dari database.
Untuk helper yang diatas gunanya agar bisa memanggil fungsi base_url() / site_url() pada view nanti.
Setelah selesai semua, buat lagi file model untuk mengambil data yang akan dicari.
Lalu buat controller seperti gambar dibawah ini.
Pada controller ini berfungsi untuk memanggil fungsi yang sudah kita buat tadi pada model, sebelum itu harus load dulu model pada fungsi __construct. seperti gambar. lalu buat fungsi autocomplete untuk memecah data dari model agar bisa ditampilkan pada view. Jika sudah, langsung saja buat view. Kali ini saya berinama Search.php.
Script tag head pada view search.php
Code untuk membuat form search yang ada pada view search.php
Dan yang terakhir adalah script jquery yang digunakan untuk mempercepat dan efisien dan melakukan pencarian tanpa reload dan dinamis.
fungsi ajaxsearch pada jquery nanti akan diletakan didalam atribut onkeyup pada input search karena pencarian ini akan dijalankan ketika keyboard diketik.
Jika sudah selesai, jalankan program dengan url yang telah disetting pada config.php tadi. Apabila berhasil maka akan keluar seperti di bawah.
Sekian dari tutorial ini, semoga bermanfaat apabila ada kesalahan dan pertanyaan sampaikan pada kolom komentar. Terimakasih.
SELAMAT MENCOBA GOODLUCK :)
Untuk file bisa didownload disini
0 komentar:
Post a Comment