Belajar PHP Untuk Pemula |22. Live Search (JQUERY)

-

  Belajar Bahasa PHP Untuk Pemula Part 21 

Di artikel kali ini kita masih membahas mengenai live search menggunakan ajax dan dibantu oleh java script.

Kali ini kita akan melakukan hal yang sama tapi menggunakan JQUERY.

Seperti biasa kalian bisa mengduplikat folder pertemuan19 menjadi pertemuan20 dan buka di kode editor kalian masing-masing.

Kita lihat hasil terakhir dari pertemuan19


Di artikel sebelumnya kita sudah berhasil menambahkan live search dengan keyword yang ingin dicari.

Kali ini kita akan melakukan hal yang sama tapi menggunakan JQUERY,yang nanti codingan kita yang banyak akan lebih ringkas dibandingkan sebelumnya.

Sebelumnya kita download library dari JQUERY,link

Klik tombol download JQUERY-nya dan nanti akan diberikan banyak pilihan untuk mendowload library JQUERY.

Download yang paling baru dan yang sudah di compressed


Dan di saat saya membuat artikel ini versi terbaru dari JQUERY ini adalah 3.5.1.

Kalian bisa simpan di dalam folder yang sama dengan JS(Java Script) dan apabila kalian klik muncul scripty-nya,jangan panik kalian CTRL+S dan simpan di folder JS.

Sekarang kita kembali ke kode editor kita dan yang pertama kali kita lakukan adalah memanggil library JQUERY-nya dulu.

Pastikan untuk memanggil library itu harus sebelum kalian memanggil script kalian sendiri.


Pastikan namanya persis dengan JQUERY yang kalian download.

Masuk ke bagian script.js dan hapus sintaks javascript menjadi sintaks JQUERY.

Kita bisa akan mengambil dokumen,seperti ini

Pertama kita akan membuat event ketika keyword ditulis,

Ini memanggil ajax hanya satu baris yang sebelumnya kita membutuhkan beberapa baris dan yang kita gunakan adalah fungsi load.


Sekarang ada beberapa hal yang ingin saya tambahkan.

Pertama tombol carinya kita hilangkan,supaya pencariannya menggunakan keyword,caranya



Tombol carinya sudah tidak ada,gampang bukan?
Setelah itu saat kita mencari data maka ada loading supaya aplikasi kita kelihatan mikir.
Kita butuh sebuah gambar kalian bisa cari loader gif dan pilih sesuka kalian dan save di folder img kalian.
Simpan setelah button,seperti ini

Tambahkan css
Hasilnya

Kalian mau taruh dimana saja bebas,tapi loading ini akan muncul setelah kita mencari data dan hilang setelah data-nya tampil
Hasilnya
Lalu selajutnya ketika kita mengketikkan sesuatu munculkan loading dan kalau ketemu hilangkan loadingnya,




Ketika kita mengketikan sesuatu maka loadingnya muncul,bisa gunakan $.get() ,seperti ini
Hasilnya
Ketika kalian mengketikan sesuatu maka loadingnya akan muncul sekejap lalu hilang lagi.

Sampai disini dulu pembahasan mengenai Live Search(JQUERY)
Dan terima kasih sudah meluangkan waktu untuk membaca artikel ini  dan sampai jumpa di artikel selajutnya 

Komentar

Posting Komentar

Postingan populer dari blog ini

Program Python untuk Menghitung Luas Lingkaran

-
Gambar
 Program Python untuk Menghitung Luas Lingkaran Python adalah salah satu bahasa pemrograman yang populer dan banyak digunakan oleh para pengembang perangkat lunak. Pada artikel kali ini, kami akan membagikan contoh kode Python sederhana yang dapat digunakan untuk menghitung luas lingkaran berdasarkan jari-jari yang dimasukkan oleh pengguna. Program yang kami buat menggunakan modul math untuk mengakses nilai pi. Pengguna hanya perlu memasukkan nilai jari-jari lingkaran saat diminta, dan program akan menghitung luas lingkaran secara otomatis. Berikut adalah contoh kode Python untuk menghitung luas lingkaran import math radius = float ( input ( "Masukkan jari-jari lingkaran: " )) area = math . pi * radius * radius print ( "Luas lingkaran adalah: " , area ) Setelah program dijalankan, pengguna akan melihat hasil perhitungan luas lingkaran pada layar. Program ini sangat sederhana dan dapat diubah atau disesuaikan sesuai dengan kebutuhan pengguna. Semoga contoh k...
Read more »

Program Python untuk menghitung rata-rata dari beberapa angka yang dimasukkan oleh pengguna

-
Gambar
  Program Python untuk menghitung rata-rata dari beberapa angka yang dimasukkan oleh pengguna. Berikut ini adalah contoh kode Python yang bisa digunakan untuk menghitung rata-rata dari beberapa angka yang dimasukkan oleh pengguna melalui program. Program ini dapat sangat berguna dalam situasi di mana Anda perlu menghitung rata-rata dari sejumlah angka yang diberikan. n = int ( input ( "Masukkan banyak angka: " )) Pertama, program akan meminta pengguna untuk memasukkan banyak angka yang akan dihitung rata-ratanya. Kemudian, program akan meminta pengguna untuk memasukkan angka-angka tersebut satu per satu. angka = [] for i in range ( n ):     angka . append ( float ( input ( "Masukkan angka ke- %d : " % ( i + 1 )))) rata_rata = sum ( angka ) / n print ( "Rata-rata dari angka yang dimasukkan adalah:" , rata_rata )  Setelah itu, program akan menghitung rata-rata dari angka-angka tersebut dan menampilkan hasilnya. Program ini relatif sederhana dan mud...
Read more »

Program Python tentang lagu anak ayam.

-
Gambar
Program Python tentang lagu anak ayam.  Nah saya disini akan membuat program python tentang lagu anak ayam. nah disini kalian harus mempunyai visual studio atau  compiler . ok mari kita lanjut di bagian mengodingnya. Kode Python tentang lagu anak ayam n = int ( input ( "masukkan jumlah anak ayam: " )) if n >= 2 :     while n > 1 :         print ( 'anak ayam turun %d mati 1 tinggal %d ' %( n , n - 1 ))         n = n - 1 else :     print ( 'anak ayam turun %d mati 1 tinggal induknya' % (n) ) Anda dapat melihat output atau keluaran sebagai berikut dan jika anda memasukkan jumlah anak ayam 5 maka output yang dihasilkan akan seperti berikut Sampai disini dulu pembahasan mengenai program python dan terima kasih sudah meluangkan waktu untuk membaca artikel ini  dan sampai jumpa di artikel selajutnya :)
Read more »