AutoComplete Ala Google dan Facebook {Ajax}

Autocomplete dikenal juga dengan sebutan AutoSuggest, fitur ini adalah fitur tambahan dalam suatu form input untuk menampilkan data-data yang sesuai dengan apa yang diketikan user pada form. Sering ditemui ketika teman-teman sedang mencari informasi dan menginputkan keyword di textbox Google atau mencari teman di kotak pencarian Facebook.

Apa keuntungan dari AutoComplete ini? ketika teman-teman menuliskan satu kalimat yang belum utuh, maka secara otomatis akan tersedia daftar data-data yang menyambungkan kalimat secara utuh, sehingga teman-teman tidak perlu lagi menuliskan semua kata yang ingin dicari.

Contoh AutoComplete pada pencarian di Facebook:

 

AutoComplete sangat diperlukan untuk memudahkan para pengunjung website agar dapat mencari sesuatu dara tanpa perlu merefresh halaman dan memanggil database terlebih dahulu.

Codingan yang telah Fauzi Online paktekan sebagai berikut:

AutoComplete di atas Lumayan bukan? hehehe..

Bagi teman-teman yang ingin mencoba AutoComplete Ala Facebook atau Google dapat download source codenya klik di link berikut ini: AutoComplete Ala Google dan Facebook {Ajax}

Apa Saja Kemampuan Teknologi Ajax

Kemampuan Ajax lebih lanjut...

Postingan sebelumnya Fauzi Online telah membahas mengenai pengenalan asal muasal teknologi ajax, Berikut ini akan dijabarkan lebih lengkap lagi mengenai manfaat Ajax yang biasanya digunakan dalam suatu website, dan para developer websit, mari kita urutkan satu per satu jenis dan penamaan teknologi Ajax berikut:

• AutoComplete atau AutoSuggest
  Penjelasanya lebih lanjut adalah ketika user sedang mengisi data di sebuah form, karakter yang sedang dituliskan oleh user akan bisa langsung dilengkapi oleh data-data yang disarankan (suggestion). Contoh yang paling akrab adalah gambar di atas yaitu form Google (Google Suggest) di mana ketika teman-teman menuliskan satu kalimat yang belum utuh, maka secara otomatis akan tersedia daftar data-data yang menyambungkan kalimat tersebut secara utuh, sehingga teman-teman tidak perlu lagi menuliskan semua kata yang ingin dicari.
• Real Time Validation
  Selain validasi terhadap data berupa email, pencoccokan password, umur (harus angka), dan lain-lain.
  Contoh lain adalah pengecekan username sudah ada yang memakai merupakan salah satu validasi yang dilakukan dengan segera atau real time. Hal ini sangat berguna pada kondisi yang tidak memungkinkan pengiriman keseluruhan data ke client yang dibutuhkan untuk melakukan validasi ketika halaman di load di awal mula.
• Load on demand
  Berdasarkan event tertentu, sebuah halaman HTML bisa mengambik tambahan data di belakang layar, sehingga memungkinkan browermenampilkan halaman web secara lebih cepat dan bisa diatur kapan penampilannya.
• Refresh data dan server push
  Halaman web dapat mengambil data dari server tertentu untuk menampilkan informasi terkini, misalknya nilai tukar, dolar, stok, ramalan cuaca, dan sebagainya. Kemampuan ini memungkinkan halaman web melihat informasi terkini tanpa harus merefresh atau reload halaman web.
• Partial Submit
  Halaman web dapat melakukan submit atau pengiriman sebagian form terlebih dahulu, tanpa meminta halaman web untuk merefreshnya terlebih dahulu.
• Mashup (Mencampur data)
  Halaman web dapat menampilkan data menggunakan berbagai media seperti proxy server side ataupun menggunakan skrip eksternal. Dengan demikian, teman-teman dapat menggunakan berbagai data untuk aplikasi teman-teman. Misalnya menggabungkan nilai tukar menukar dolar ke rupiah dengan halaman web e-comerce.
• Membuat Chat Online
  Chat online dapat dibuat dengan sederhana yang tidak memerlukan library eksternal seperti Java Runtime Machine atau Flash.
• Membuat aplikasi
  Lebih fungsionalitas Google Suggest.
  
• Mendayagunakan teknologi
  Misalnya pembuatan garafik secara real time menggunakan Scalable Vector Graphics (SVG) atau membuat daftar yang bisa di drag and drop.
• Pembuatan data grid
  Data grid yang responsive untuk mengupdate database server-sever secara on the fly.
  
• Membuat aplikasi yang membutuhkan update
  Update di sini berarti secara real time dari berbagai sumber eksternal misalnya RSS.

Naaah , banyak banget yah? hehehe... oke oke sabar yah... di postingan berikutnya Fauzi Online akan jabarkan satu-satu niih teknik-teknik Ajax di atas.. insya ALLAH.. AMIIN... teman-teman tetap stay di Fauzi Online yah.. See you

Pengenalan Asal Muasal Teknologi AJAX

Sebelumnya Teman-teman fauzi online sudah tahu belum perbedaan paling mencolok antara aplikasi website dengan aplikasi dekstop di komputer? hmmmm... apa hayo? mau tahu banget gag? hehe.. Aplikasi dekstop lebih interaktif dan responsif dibandingkan aplikasi website.

Jika teman-teman pernah melihat atau menjalankan aplikasi dekstop, di mana jika mengklik suatu tombol, maka reaksi perubahannya akan langsung terlihat pada aplikasi tersebut, hal itulah yang menjadikan aplkasi dekstop sangat interaktif.

Lain ceritanya jika dibandingkan dengan aplikasi website, di mana jika teman-teman mengklik suatu tombol maka browser akan melakukan refresh atau load pada browser, biasanya layar browser akan menjadi halaman kosong berwarna putih sesaat, karena pada saat itu browser sedang melakukan request atau permintaan data ke server. Hal itulah yang membuat aplikasi website menjadi kurang interaktif dan responsif dibandingkan aplikasi dekstop.

Namun, pada suatu hari.. hahaha kayak dongeng nih fauzi, seorang pria london, presiden sekaligus pendiri perusahaan Adaptive Path, bernama Jesse James Garret yang memperkenalkan Ajax untuk mengatasi masalah tersebut, di mana Ajax dapat membuat aplikasi website menjadi lebih interaktif dan respondif layaknya aplikasi dekstop.

Dikemudian hari, ajax semakin populer saja dikalangan pengembang website, karena kehadiran Ajax menandai lahirnya suatu generasi baru bagi web modern, atau istilah kerennya Web 2.0 yang kini telah berkembang menjadi Web 3.0(Semantic Web).

Bermula dari provokasi Google yang menggunakan Ajax untuk membuat aplikasi Google Maps, Google Suggest dan Gmail. Diikuti oleh Flickr, Apple, Yahoo!, news dan Yahoo!Mail. Terus lahirnya Facebook serta Twitter. Dan terus menginspirasi website-website populer lainnya. Semakin membuat Ajax tak terbendung saja. Mau lihat contoh-contoh aplikasi yang menggunakan ajax?

Facebook Notification

Gmail Loading

Dikarenakan Ajax banyak digunakan oleh website terkemuka di dunia, maka mau tidak mau akan mempengaruhi website-website lainnya untuk mengikuti jejak mereka. Saat ini, rasanya website tanpa sentuhan mereka bagaikan sayur tanpa gula, eh garam .. hehehe

Demikian pengenalan Mengenai Ajax, postingan berikutnya insya ALLAH fauzi online akan membahas mengenai perintah-perintah dan contoh-contoh program menggunakan jQuery (Sintaks bawaan Ajax) ..
See you, bye

Thanks to: Lukmanul Hakim : bukulokomedia.com