Download Source Files
So you can work with PHP, and have a basic understanding of jQuery, but you haven’t yet figured out how to combine the two into your projects? If so, we’ve got you covered today! In this Plus tutorial, you’ll learn how to take advantage of PHP’s MySQL improved and prepared statements to query a database, how to request that returned data with jQuery, and then how to filter through the returned items and display them on the page, adding a touch of animations. If this sounds interesting, give back to Nettuts+, and become a Premium member to watch this helpful video tutorial!
In this screencast, you’ll learn how to:
- Create a new database
- Query that database with MySQL improved and prepared statements
- Make AJAX requests with jQuery to retrieve the information that was pulled from the database
- Filter through that returned information, and display it on the page
- Add a bit of animation
- Create singletons with JavaScript
- Create private variables in JavaScript
- Throw errors to allow for easier debugging
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Oh geeze, I need to sign up again now ;]
AWESOME!!! Been waiting for something like this for ages. Never been able to get my head around this AJAX stuff.
ty :)
Right….I need this, but a quick question first.
Are you returning data as JSON or XML or just echoing from the PHP?
My two favorite things!
Just a quickie.. i’m looking to join Plus soon.. is there a list where I can find all of the Plus tutorials/screencasts?
Thanks,
Gav
Yes u can find all plus tuts/screencasts for download… :)
Enjoy
just thought about whats the PLUS post this week!
Thanks for this :D
Just became a Tuts Plus Member for this tutorial! You run an awesome website here Jeff!
Very cool. Hope you enjoy it! :)
I subscribed today as well but I was only able to download this latest video. All download links of the previous ones seem to be broken. Can anyone help?
Just some updates, it seems. They’ll all be back up ASAP. :)
I really appreciate that someone would try to bridge the education gap and help others understand using PHP and AJAX, but the video was still over my head, I’m afraid. I would rather see it done with more basic, procedural PHP and not OOP.
Also, I still feel the most critical link was not explained clearly enough. At what point specifically does the JavaScript interact with getPop.php? I don’t see anywhere in the JavaScript code where it references the php file. Probably this is made more difficult to understand because of the OOP. is “bind_result” a way to make a new variable named “result”? And if it is, how does index.php have access to that variable or any data made available by getPop.php? It is not an include file and there is no session variable so how does the JavaScript know where to look?
Again, thanks for the tutorial, but I’m still no closer to understanding.
The JavaScript accesses getPop.php in the $.post part. If you’ll download the source code, you’ll see something like $.post(‘getPop.php’, this.switchFeature).
This is where we make an Ajax call to the PHP file that queries the database.
My source code has:
$.post(src, this.switchFeature );
Apparently “src” refers to getPop.php but where is is this determined in the code?
Right, that method accepts a “src” parameter. If you look at the bottom of index.php, you’ll see a call to SingleFeature.getItems(‘getPop.php’) — this is where we pass in the path to the php file. It’s then represented by the variable “src.”
Great. I love plus tutorials…
I think that’s great !
Thanks !
Cool !
Great tutorial, I didn’t know about improved and prepared statements in OOP so it was really interesting. Also, I really like your voice Jeff’ :)
Yeah, you really shouldn’t be using mysql_connect at this point…unless performance isn’t much of an issue. Plus, the bonus is that it cleans your sql query, so you don’t have to worry about escaping.
Great tutorial Jeff! I love the clean style you use when writing Javascript code!
Thanks! There’s definitely an art to formatting code. I still struggle with it a lot.
Glad you enjoyed the video.
Until today, jQuery is my favorite JavaScript framework to play around on web..
Glad to know, that i know how to use PHP , MySQL and jQuery together. yet another 9 dollars saved.
I wait for a plustut, that persuaded me to invest 9 bucks ;D
Great combination between two powerhouses!
Many, many thanks!
Another great tutorial! Maybe out of the scope but could you explain how to integrate the next and previous buttons like on Yahoo Video?
That would make the tutorial complete in my opinion.
Jeff dude, I follow your screencasts almost religiously, but today I had something to ask. I have plust account, but my minimac G4 1.25ghz suffer to play video flash, honestly, it almost can’t play. is there a way to you guys aloow this tut as mp4 / mov?
Cheers and thanks for your effort to teach us!
I believe the video is Mp4. :)
ok, so, i have slightly modified the code to not read from a database, but, instead i am utilizing it for a twitter status message plugin i built for a CMS i have been working on. so, i have it working now to show 10 messages, and rotate through them, but, here is my problem, i want to show two messages at a time and then go to the next two, then the next two, till it is dont showing all 10 messages, and then show the first two again and keep looking. anyone have any idea what to modify to do this?
Thanks for the tutorial!!
Will this method only retrieve data every time the page loads or will the page update as new data is added to the database without a full page refresh?
I would like to know how you managed to get this to work with twitter?
Would you have to somehow save the twitters into a table in your database and then display them?
Has anyone seen a twitter scroller like this?
where can i download the screencast? I’m a premium member.. ( was able to download the source code, but not the video )
Can’t view the screen cast. Getting error 200 not found… ;/
GREAT Stuff ! ! Thanks for the effort. I’m having trouble getting the jquery to work, I’ve been able to get my own data to roll through but it’s displaying the video does. I hope you’re still reading these post and can send me and email for some help. THANKS Again… I was looking to do something like this for a while.