Integrating PHP and jQuery: New Plus Tutorial
plus

Integrating PHP and jQuery: New Premium Tutorial

on Feb 17th 2010 with 35 comments
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

NETTUTS+ Screencasts and Bonus Tutorials

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!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Nouman

    Oh geeze, I need to sign up again now ;]

  • http://johnathanbarrett.me Johnathan

    AWESOME!!! Been waiting for something like this for ages. Never been able to get my head around this AJAX stuff.
    ty :)

  • http://www.msinkinson.co.uk Mark Sinkinson

    Right….I need this, but a quick question first.

    Are you returning data as JSON or XML or just echoing from the PHP?

  • http://spotdex.com/ David Moreen

    My two favorite things!

  • Gav

    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

    • http://laranzjoe.blogspot.com lawrence77

      Yes u can find all plus tuts/screencasts for download… :)

      Enjoy

  • http://laranzjoe.blogspot.com lawrence77

    just thought about whats the PLUS post this week!

    Thanks for this :D

  • http://taylorhutchison.com Taylor Hutchison

    Just became a Tuts Plus Member for this tutorial! You run an awesome website here Jeff!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Very cool. Hope you enjoy it! :)

    • hard_rockin_man

      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?

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Just some updates, it seems. They’ll all be back up ASAP. :)

  • http://www.bopjodesign.com bopjo

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      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.

      • http://www.bopjodesign.com bopjo

        My source code has:

        $.post(src, this.switchFeature );

        Apparently “src” refers to getPop.php but where is is this determined in the code?

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        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.”

  • http://www.nunomedia.com Nuno

    Great. I love plus tutorials…

  • http://sonergonul.com Soner Gönül

    I think that’s great !

    Thanks !

    Cool !

  • http://www.voixdunet.com Julien L

    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’ :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      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.

  • http://www.engram.nu Niklas

    Great tutorial Jeff! I love the clean style you use when writing Javascript code!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks! There’s definitely an art to formatting code. I still struggle with it a lot.

      Glad you enjoyed the video.

  • http://wptricks.net WP Tricks

    Until today, jQuery is my favorite JavaScript framework to play around on web..

  • Patrick

    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

  • http://www.jordanwalker.net Jordan Walker

    Great combination between two powerhouses!

  • Keith

    Many, many thanks!

  • Ortwin

    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.

  • Marcos Cerutti

    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!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      I believe the video is Mp4. :)

  • Justin St. Germain

    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?

  • Daryl

    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?

  • Gavin

    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?

  • akabaker

    where can i download the screencast? I’m a premium member.. ( was able to download the source code, but not the video )

  • cinek2

    Can’t view the screen cast. Getting error 200 not found… ;/

  • JIm E D

    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.

  • pleasedon’taskname