20 Useful PHP + jQuery Components & Tuts for Everyday Project

April 5th, 2009

Web applications have made huge leaps and bounds in improving user experience thanks to a lot of recently developed Ajax technology. When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty neat effects. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move.

The post below is made up of the best 20 PHP + jQuery Components and Tutorials that you will likely need in many of your projects, they are all of the highest quality and more or less easy to configure. Give them a try.

1. Directory Trees With PHP And jQuery

A simple way to keep track of many files is to use a directory tree. A directory tree lists out files and directories so that it’s easy to find what you’re looking for. In this tutorial, you will learn how to create a directory tree using PHP and jQuery.

Check out the Demo Here

2. Create a Photo Admin Site Using PHP and jQuery

A sceencast tutorial for creating a photo site using PHP, jQuery, and AJAX. You will learn how to retrieve images from a database, create a simple login form with authentication, and then allow for the database to be asynchronously updated.

3. Asynchronous Comments with PHP, jQuery, and JSON

In this article, learn how to create a simple but effective means of capturing and displaying visitor comments using a blend of jQuery, PHP and JSON. In the public forum that is the blogosphere, the ability to capture and display visitor comments on your blogs can give you instant feedback and opinions from the people that matter most – those that read your blog.

Check out the Demo Here

4. PHP ajax login form using Jquery

Create a new PHP ajax login functionality using Jquery. You can easliy switch the data source between database and PHP array, login authentication can be using username or email, or even both of ‘em by changing the config, automattic redirection could be done within the javascript config.

Check out the Demo Here

5. PHP + jQuery Todo List Part 1, part2

This is part 1 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX and manipulation capabilities.

Check out the Demo Here

6. Newsletter module

A PHP, jQuery and AJAX module, which should be great for any newsletter management needs. You just need to copy one file onto your site, and you’re ready to send and archive all newsletters, manage e-mail addresses and categories, and configure a template for your e-mails. Also have an ability of optional password protection. All options can be easily configured at the top of included .php file.

Check out the Demo Here

7. From PHP to XML to jQuery and Ajax

This tutorial will focus on getting data from a database using PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems complex, but is in fact, very easy.

Check out the Demo Here

8. How to Validate Forms in both sides using PHP and jQuery

We are going to learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.

Check out the Demo Here

9. Create a shoutbox using PHP and AJAX

We will learn how to create a dynamic ajax based shoutbox with jQuery from scratch. It will be very interesting to know how to use the ajax function of jQuery and how it can be used to insert and recover data from a MySQL database via PHP in a way asynchronous.

Check out the Demo Here

10. HOWTO: PHP and jQuery upload progress bar

With the controllable jQuery Progress Bar, writing a form upload progress bar seems like a piece of cake now. Hypothetically, all we need is to create the bar, poll for the progress of the file upload, drive the new progress bar value (in percentage) and set it using PHP.

Check out the Demo Here

11. Auto-Complete Field with jQuery, JSON & PHP

Using jQuery with PHP to create auto complete field, beside the auto-complete code we need the jQuery library along with its Dimensions plug-in.

12. A fancy search suggestion

Learn how to recreate the effect from Apple website by creating a fancy search suggestion. This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request.

Check out the Demo Here

13. PHP & jQuery image upload and crop v1.2

Create a PHP and jQuery image upload and crop tool using PHP, jQuery, PHP GD Library and Image Area Select.

Check out the Demo Here

14. FlickrScrollr

FlickrScrollr is a combination of PHP and jQuery that parses a Flickr RSS feed and creates an animated thumbnail display.

Check out the Demo Here

15. Reddit-style Voting With PHP, MySQL And jQuery

If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.

Check out the Demo Here

16. SMTP Feedback Mail class with jQuery Slide Effect

This post is about feedback mail with nice slide effect using php SMTP class and jQuery. It’s very useful to add contact/feedback page to your php websites.

Check out the Demo Here

17. Ajax Add a Record with Button Status Change using jQuery

If you like Facebook and Twitter API method of clicking follow, add a friend button. Where you click the button, the button status changed to ‘You following’ and ‘Remove’ at the same time request inserted into database. This tutorial will show you how to do it.

Check out the Demo Here

18. Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax

Now lets say that you a web page that has a big Block of “something” and inside this “something” you would like to have some information change at a set time interval. Well with Jquery, some PHP and a sprinkle of Ajax, you can get this done quick fast and in a hurry.

Check out the Demo Here

19. CakePHP Ajax “Quick Save” with jQuery

When you are in an administration panel, sometimes you want a “quick save” feature that allows you to save without leaving the page. Here is how to accomplish this with CakePHP and jQuery.

20. PHP / jQuery Image Replacement

This is a tiny plugin that, in combination with a separate server-side script, dynamically replaces the text of an element with an image, generated using fonts you specify. This allows you to use beautiful text in headings without having to manually produce images in Photoshop, GIMP, or similar.

Check out examples here

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

106 comments for „20 Useful PHP + jQuery Components & Tuts for Everyday Project
  1. joão on April 5th, 2009 at 5:08 pm

    Impressive article!
    You should post some more stuff about jQuery integration with CakePHP :)

    • Abhisek on April 6th, 2009 at 5:25 pm

      I second that!

      • Kelly Cook on April 10th, 2009 at 12:32 pm

        yay for CakePHP and jQuery!

      • CS Org Sunda on March 11th, 2010 at 6:58 pm

        am newbie on jquery, and I have no idea to list mysql data on my pages, so am still looking the simple tutorial to learn fast and easly, but the component on this pages is so cool, so I’ve get some of the code freely

      • jay on May 20th, 2010 at 2:17 am


    • Celso Soares on August 2nd, 2011 at 12:20 am

      Hey João cagalhão!
      You must try codeigniter. Is awesome

  2. Matt Evans on April 5th, 2009 at 5:12 pm

    Awesome! – Thanks :-)

  3. Marcus on April 5th, 2009 at 5:34 pm

    Great! Wanderfull!

    The best for me is a 6th tut. I’m find for it :-)

    Muito bom! eu estava procurando isso :-D

  4. Brandon Cox on April 5th, 2009 at 7:02 pm

    I’m totally in love with jquery… I mean, not in a wierd way, just sort of a distant admiration. Anyway, thanks for the collection!

  5. miron on April 5th, 2009 at 7:17 pm

    yea i agree with joão :)

    keep it up!

  6. Dumitru Brînzan on April 5th, 2009 at 10:06 pm

    Very nice list! Thanks for compiling it!

  7. Johnson Koh on April 5th, 2009 at 10:26 pm

    This list is amazing! Thanks so much!

  8. Danh ba web 2.0 on April 5th, 2009 at 10:31 pm

    Great list. Thanks you very much
    Nice day

  9. Daniel on April 5th, 2009 at 11:00 pm

    Great and useful list here. I´ll use some of them i think. Thanks.

  10. jack on April 5th, 2009 at 11:32 pm

    thanks, nice list

  11. saurabh shah on April 5th, 2009 at 11:46 pm

    nice article….. very useful …

  12. Marco on April 5th, 2009 at 11:47 pm

    Great round-up Noura! Pretty cool to see many of these amazing and yet very useful jQuery articles in one place.

    Also, thanks for including one of my articles (A fancy search suggestion)!


  13. Martin Gonzalez on April 6th, 2009 at 12:03 am

    very nice!!!
    i was looking for some of this tutorials :D

  14. webchecker on April 6th, 2009 at 12:29 am

    Hey, this is a beauty. first time came to know about jquery and it wide usage. excellent article :) keep it up.

  15. insic on April 6th, 2009 at 1:23 am

    useful list.

    • Ashish on January 20th, 2010 at 2:28 am

      i need to tool jquery.
      pls tell me a site….

  16. Design freak on April 6th, 2009 at 2:32 am

    very useful script… thanks for the list

  17. Dinesh on April 6th, 2009 at 3:03 am

    Much thanks man.. Newsletter Management! This is what i’m looking for past couple of days.. much much thanks.

  18. joyoge designers' bookmark on April 6th, 2009 at 6:02 am

    helpful scripts thanks for the list..

  19. taylan on April 6th, 2009 at 6:15 am

    Great list, Thanks a lot.

  20. George Campos on April 6th, 2009 at 6:55 am

    Great list!


    George Campos
    Sao Paulo – Brazil

  21. sean steezy on April 6th, 2009 at 7:02 am

    sweetness. thanks!

  22. Jason Grant on April 6th, 2009 at 8:59 am

    Very useful. Some of these are on the cutting edge of reusable AJAX patterns, which is really nice to see.

    This one is definitely a keeper.

  23. Tutorial Library on April 6th, 2009 at 10:29 am

    very useful tutorial thanks

  24. Amber Weinberg on April 6th, 2009 at 11:00 am

    amazing list, thanks!

    • Khalid on December 10th, 2010 at 11:21 am

      Wow. Nice girl in this pic.

  25. King Don on April 6th, 2009 at 11:17 am

    A friend sent this link to me, and i’m so happy he did. Can’t wait to jump in. I can see 4 of these i want to use right away.

  26. Jason Lengstorf on April 6th, 2009 at 1:18 pm

    Thanks for featuring my FlickrScrollr!

    Great list!

  27. Sklep Zoologiczny on April 6th, 2009 at 2:44 pm

    Another idea for new website. Thanks!

  28. art2code on April 6th, 2009 at 3:47 pm

    thanks for those useful tuts !

  29. Abhisek on April 6th, 2009 at 5:26 pm

    Thanks for posting one of my tuts. :)

  30. Farid Hadi on April 6th, 2009 at 10:49 pm

    This is a good, useful list. Thanks for sharing.

  31. Josh Read on April 7th, 2009 at 8:12 am

    Such a fantastic resource. Thank you!

  32. AlfredN on April 7th, 2009 at 8:46 am

    Thanks for this, there’s no doubt in my mind that jquery has eased many of my own issues.

  33. Fred Rivett on April 7th, 2009 at 2:52 pm

    An interesting read with some helpful tuts, cheers!

  34. W3Planting on April 7th, 2009 at 11:59 pm

    this post is simply a cool one!

  35. Pradeep on April 8th, 2009 at 6:24 am

    I am a regular reader of your website. I like the way you find out lots of cool things and put it in one place. It makes our life so simple.Thanks and great job man!

  36. awake on April 8th, 2009 at 8:42 am

    This was wack! sorry

  37. Kim H on April 8th, 2009 at 5:53 pm

    The Flickr scroll is especially nice – I think I have a few of these bookmarked. Thanks for making life simple!

  38. jack on April 8th, 2009 at 11:10 pm

    thanks! this is very useful!

  39. z.Yleo77 on April 13th, 2009 at 11:20 pm

    I like these script. ..thx

  40. Rahul on April 14th, 2009 at 8:14 am

    Wow man this is a gigantic post.

  41. Arjen on April 16th, 2009 at 8:25 am

    Great article, there are some really good ones in your list! Thanks for sharing!

  42. Sheevaa on April 16th, 2009 at 10:52 am

    The Real 20 Useful PHP + j Query Components…. Nice Share

  43. Alex on April 22nd, 2009 at 10:59 am

    thank you very much.

  44. Gopinath on April 25th, 2009 at 4:47 am

    You are amazing. I just cant refuse saying a BIGGGGGGGGGGGGGG thanks to you.

  45. Robert on April 25th, 2009 at 6:09 am

    I just discovered your site and am completely amazed with all the great resources. I’m sure i’ll be on here for a while browsing the archives. Thanks for this article.

  46. Arif Bin Forhad on May 26th, 2009 at 2:06 am


  47. Srinivas Tamada on June 4th, 2009 at 2:59 am

    Great List..

  48. Shyju P Nair on October 18th, 2009 at 6:29 am

    Nice. Great Job.

  49. Web Design Talk on November 5th, 2009 at 3:05 pm

    Really like the apple auto suggest. That’s very cool, much betetr than vanilla suggest boxes.

  50. denbagus on November 27th, 2009 at 8:58 pm

    nice tutorial ..thanks full

  51. surya on December 15th, 2009 at 6:29 am

    Excellent list, thanks

  52. Umnaj on February 2nd, 2010 at 8:14 pm

    Very Great!!! Thanks..

  53. macs1407 on February 10th, 2010 at 8:24 am

    truth has long been looking for tutorials so thank you very much for this great work. sorry for my English

    • balaraju on December 7th, 2010 at 3:52 pm

      great execllent

  54. Jaspal Singh on February 18th, 2010 at 11:19 pm

    Really useful list of resources.
    Thanks for sharing.

  55. PeterX on March 17th, 2010 at 10:48 am

    thanks excelent post

  56. nagarjuna on March 26th, 2010 at 5:38 am

    its very usefull for every one
    cloud plz forward more concepts and materiel to my mail id

  57. alin boby on April 26th, 2010 at 12:36 am

    Nice post! hope you will provide more posts like that.

  58. densky on April 30th, 2010 at 9:01 pm

    pretty nice tutorial,

    i just have a request, if you could add some tutorials on how to pass parameter from php – jquery or vice versa


  59. shirish on May 15th, 2010 at 11:26 am

    Very nice tutes it helped me a lot. Can you place a basic tutorial on building a basic CMS with cakePHP and Jquery?

  60. dolido on May 19th, 2010 at 2:37 pm

    Thanks :-) all i need actually.

  61. create mirror on July 27th, 2010 at 10:34 pm

    can I copy this blog post? i will add a link to this post.. let me know please, thanks

  62. chip on July 28th, 2010 at 11:05 pm

    PHP + jQuery Components for thanx.

  63. mathew on August 11th, 2010 at 11:12 pm

    Good article,nice really helped me

  64. jelow on August 17th, 2010 at 12:27 am


  65. jelow on August 17th, 2010 at 12:27 am


  66. Saurabh on August 22nd, 2010 at 6:38 am

    nice collection guys.. well appreciated .. hope to get more…

  67. usman on September 17th, 2010 at 3:01 pm

    awesommmmmmmmmmmmmmmm thanx

  68. Matt Butcher on September 21st, 2010 at 4:23 pm

    Might I suggest QueryPath as a good PHP/jQuery tool? QueryPath ( implements the vast majority of jQuery’s API in PHP. And it works great not only on HTML, but on server-to-server XML and REST APIs.

  69. rashed on November 8th, 2010 at 1:34 pm

    thanks a lot

  70. Karey Luzinski on November 10th, 2010 at 9:57 pm

    This is really one of the much better reports regarding those that I’ve keep reading this specific subject as of late. Fantastic perform.

  71. pave on January 5th, 2011 at 6:15 am

    Thanks a ton!! Great article

  72. Santosh on February 1st, 2011 at 6:16 pm

    It’s a awesome list. I’m a web developer and Noupe has always been my first choice :)

    Thanks for sharing :)

  73. TheVoIPTech on February 24th, 2011 at 8:34 pm

    Awesome! You should get a Donate link! So that folks like us can buy some beer! Thank you!.

  74. azam on February 28th, 2011 at 1:45 pm

    superb! thank you.

  75. Fat Lizard on February 28th, 2011 at 2:51 pm

    Cool bananas. Thanks.

  76. Naqeeb Ullah on March 2nd, 2011 at 7:07 am

    great job man… very helpful tutorial…

  77. Slim on April 14th, 2011 at 3:36 pm

    That’s amazing .. thanks so much !!

  78. dll on April 28th, 2011 at 7:21 pm

    Wow this is awesome, been looking for some nice JQuery perfs and you’ve listed a bunch of good ones I can integrate into my web apps. Thanks so much and keep up the good work!

  79. vikas on May 11th, 2011 at 8:45 am

    This is best way for learning jquery but i want to make easy utlize jquery of every person. but not right way

  80. John on May 17th, 2011 at 6:29 am

    Nice one, but I need some sample example of cakephp to save form data without refresh page.

  81. Meir on May 24th, 2011 at 10:50 am

    Great list. Really appreciated

  82. ayodele on June 21st, 2011 at 2:10 pm

    you have done great and I appreciate your talent and time spent….I need more on Jquery…Thanks.

  83. MHD on June 23rd, 2011 at 9:04 am

    This list is amazing! Thanks so much!…

  84. Abdul Rehman on June 28th, 2011 at 12:48 am

    how to add a coment form in stand php, ajax jquery

  85. sekhar on July 2nd, 2011 at 1:52 pm

    you have done great and I appreciate your talent and time spent….I need more on Jquery…Thanks

  86. Manikandan on July 5th, 2011 at 8:18 pm

    this is very useful for me…..nice collections…

  87. Mihai Herman on July 16th, 2011 at 7:41 am

    Great article, only if i knew how to install them on my WordPress website :))

  88. Beraki on October 17th, 2011 at 10:10 am

    Best posts. Nice helpful links

  89. Raj Sandhu on November 21st, 2011 at 2:51 am

    Excellent Article and quite helpful. Thanks :)

  90. John BP on November 22nd, 2011 at 11:34 am

    Collection is amazing!, Facebook and Twitter API method saved my time, using it in my current project and I’m using this nice ajax login also


  91. Sachin Baghel on January 18th, 2012 at 11:48 am

    very good collection man, hope in future there will be more jq in collection, best of luck,

  92. Sachin Baghel on January 18th, 2012 at 11:50 am

    And One More Thing Happy New Year,

  93. Brushstroke Media on April 17th, 2012 at 10:28 pm

    You can clearly see that this post has been received brilliantly, I read quite a few design blogs on a daily basis, mostly looking for inspiration and I can honestly say that it is a breath of fresh air to read a tutorial that was actually well thought out, bookmarked.

  94. kumar on April 26th, 2012 at 4:48 am

    very useful stuff for Developers,very good stuff

  95. Anilkumar on May 2nd, 2012 at 7:54 am

    Thanks for the article. It will be great if we have some more examples on cakePHP and ajax.

  96. Yashwant on May 31st, 2012 at 7:50 am

    Good One

  97. anonymus on November 6th, 2012 at 12:02 pm


  98. Faisal on November 27th, 2012 at 11:38 pm

    Absolutely great stuff. Gonna “Ctrl+D” it. :)