Skip to main content

Use PHP Jquery to build AJAX web application

SISINDOTEK Tips

If you're like most PHP developers, you probably learned your craft the old-fashioned way. You learned how to define and build simple PHP pages, connect them to simple MySQL tables, and off you went. As you progressed through various skill levels, you learned how to create ever-more complex PHP functionality, and you learned how to join tables in MySQL and perform other advanced tasks.

Along the way, you probably picked up a number of client-side skills to bring your Web applications to life. You may have learned a bit about XHTML or CSS, maybe some JavaScript programming. Depending on the kinds of projects you're used to, you may even have had the chance to work with Ajax to give your Web applications that Web 2.0, or "desktop," feel. If your first experience with Ajax was anything like mine, however, you probably did too much work — hand-rolling your functions and struggling through the process of creating an Ajax-driven page.

Frequently used acronyms




  • CSS: Cascading Style Sheet

  • HTML: Hypertext Markup Language

  • XHTML: Extensible Hypertext Markup Language

  • XML: Extensible Markup Language



For some, Ajax is still a mystery. It's something that the "cool kids" and "bad boys" of Web development/interactivity do, and they've never had the time, patience, or skill to take it on. It's a shame, too, because a lot of clients really like adding Ajax-style functionality — it makes Web applications easier to work with. If you're one of these PHP developers, never fear: By the time you're done reading this article, you'll know enough to become a real Ajax pro.

This article shows how to use jQuery to easily add Ajax functionality to any PHP Web application. You'll build a simple Web application with PHP and MySQL — a phone book containing names and phone numbers. The application has all the standard things you'd expect — a way to search for names or phone numbers, a MySQL table, etc. Next, you'll add jQuery to the application, giving you the ability to search for names and phone numbers in real time, as you type. When you're done, you should have a pretty good grounding in not only some jQuery basics but also in the fundamentals of Ajax.

What is Ajax?

The best way to describe Ajax is to compare it to what you already know. Most Web pages and applications work in synchronous mode. You click a link or a form's Submit button, and the request is sent to the server, which then processes that request and sends back a response. The best way to sum up this model is "click, wait, view." It's a never-ending rinse-and-repeat cycle that you know all too well. In other words, if your page needed to show constantly updated information, you either had to put in some kind of auto-refresh hack or make the user refresh or click a link to make things happen.

Ajax changes all that. The first A in Ajax stands for asynchronous. Ajax allows you to create a page in any programming language, then refresh different parts of that page with information from a database or some other back-end server process. For example, say you have an e-commerce site that shows products for sale. On each product page, there are the usual items: headlines, sales copy, thumbnail photos, the number of items in stock.

Say you wanted to keep the site visitor updated on how many items were in stock. You could add an Ajax function that would run a separate PHP page containing a MySQL query, then repopulate the information on the original page without any input from the user or without regard to the synchronous nature of the click-wait-view pattern of events.

The j in Ajax stands for JavaScript, and that's what powers all the behavior you get. That's a blessing and a curse, really — a blessing because it's all client-side code, so it's portable and doesn't affect the server; a curse for a lot of PHP developers because it's a different environment than they're used to. That's where tools and frameworks like jQuery come in: They vastly simplify how you interact with Ajax, speeding our time to code completion.

What about the final two pieces: the + and the x? They stand for and XML, although the XML part is sometimes not really true. Plenty of Ajax applications work well without any XML code at all: They merely pass HTML or even plain text back and forth. It's probably more accurate to have the x stand for XMLHttpRequest, as you're using that object to retrieve data in the background, thereby not interfering with the display or behavior of the existing page.

Comments

Popular posts from this blog

salingsapa.com , sekalipun pakai script open source JCOW tapi salut buat de Yahya

Mungkin semua sudah mulai mengenal salingsapa.com , bukan karena isi webnya saja tapi pemiliknya adalah seorang anak SMP yaitu de yahya. Beberapa komentar muncul di internet soal keberadaan web ini, baik yang positif atau negatif. Memang benar bahwa salingsapa.com bukanlah tailormade website, atau website yang dibangun dengan kemampuan skill programming si pemiliknya, salingsapa.com menggunakan script JCOW.com. Tapi kita ambil positifnya, lihatlah dari sisi kecerdasan si anak yang bisa melihat potensi pasar di internet, yang bisa berinisiatif membuat sebuah website yang bisa mendatangkan orang , yang tahu apa yang dibutuhkan publik ? sesuatu yang tidak dimiliki anak - anak SMP kita saat ini yang cenderung hanya menjadi penonton dan user saja Petron yakin dalam 2 -5 tahun lagi de Yahya akan benar benar membuat web social buatannya dia sendiri. Biasakanlah memberi dukungan yang positif kepada generasi dibawah kita untuk hal hal yang mengarah kepada perkembangan yang positif juga. Dan med...

Cara Akses Tol Bandung ke PRJ Kemayoran Jakarta , Jakartafair ? lewat tol ancol ?

Gw kira paman google sudah menyediakan segalanya... mmhhh ternyata belum.khususnya saat gw nyari jalur tol dari bandung menuju PRJ Kemayoran jakarta yang lagi diselenggarakan 2010 ini, mmhhh sepertinya i'm in trouble :) . Ok gini ceritanya balik kejakarta dari bandung ternyata ada tugas mulia menanti, rencananya mertua , adik ipar dan pasukan kecil (anak gw dan ponakan) bakal berangkat main ke jakarta hari sabtu , targetnya ? PRJ and Grand Indonesia, grand indonesia sih gak masalah.. nah PRJ ini yang jadi masalah.. maklum seumur umur cuma denger aja kehebohan PRJ ini tapi nengok kesana gw belum pernah bahkan setelah 1 tahun lebih dijakarta akses menuju kesana saja bener bener gak tau, perasaan sih dulu pernah di tunjukin supir kantor waktu gw mau ke mangga dua, tapi ya ilahhh... mana kepikiran dulu bakal ada tugas ini sekarang... :D gw coba nyari di google.. dengan mengetikan semua yang terkait akses tol dari bandung ke PRJ ini .. hasilnya gak ada,.. mungkin ada petunjuk kecil yang...

Magento 2 , Using SMTP Gmail

Using SMTP GMAIL in Magento 2.1.0 Tidak seperti Magento Release 1.x dimana Admin bisa me-reset password customer secara manual maka  Ketika Anda menggunakan Magento release 2 anda akan menemukan masalah besar saat Anda membuat customer baru dikarenakan mekanisme di magento 2 tidak memungkinkan lagi buat Anda sebagai Admin untuk men-generate password secara manual. Mungkin ketika web magento 2 anda sudah go live tidak masalah karena sudah terhubung dengan mail server yang secara otomatis menggunakan  function php mail yang ada dimagento untuk menggunakan SMTP server host Anda, Namun jika Anda masih belajar dan masih menggunakan localhost maka tentu saja ini akan jadi masalah. di magento 2 memang tersedia konfigurasi untuk setting SMTP ( Stores -> Configuration -> Advanced -> System - Mail Sending Seeting) namun fitur ini tersedia dengan mode no authentication , kondisi ini tidak memungkinkan kalau Anda menggunakan SMTP Gmai...