20 Useful PHP + jQuery Components & Tuts for Everyday Project
- By Editorial
- Posted in PHP
- 101 comments
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 Apple.com-style search suggestion
Learn how to recreate the effect from Apple website by creating a fancy apple.com-style 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.
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.
14. FlickrScrollr
FlickrScrollr is a combination of PHP and jQuery that parses a Flickr RSS feed and creates an animated thumbnail display.
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.
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.
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.
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.
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.



















joão, 05 April 2009
Impressive article!
You should post some more stuff about jQuery integration with CakePHP :)
Abhisek, 06 April 2009
I second that!
Kelly Cook, 10 April 2009
yay for CakePHP and jQuery!
CS Org Sunda, 11 March 2010
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, 20 May 2010
test
Celso Soares, 02 August 2011
Hey João cagalhão!
You must try codeigniter. Is awesome
Matt Evans, 05 April 2009
Awesome! – Thanks :-)
Marcus, 05 April 2009
Great! Wanderfull!
The best for me is a 6th tut. I’m find for it :-)
Muito bom! eu estava procurando isso :-D
Brandon Cox, 05 April 2009
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!
miron, 05 April 2009
yea i agree with joão :)
keep it up!
Dumitru Brînzan, 05 April 2009
Very nice list! Thanks for compiling it!
Johnson Koh, 05 April 2009
This list is amazing! Thanks so much!
Danh ba web 2.0, 05 April 2009
Great list. Thanks you very much
Nice day
Daniel, 05 April 2009
Great and useful list here. I´ll use some of them i think. Thanks.
jack, 05 April 2009
thanks, nice list
saurabh shah, 05 April 2009
nice article….. very useful …
Marco, 05 April 2009
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 Apple.com-style search suggestion)!
Greetings,,,
Martin Gonzalez, 06 April 2009
very nice!!!
i was looking for some of this tutorials :D
webchecker, 06 April 2009
Hey, this is a beauty. first time came to know about jquery and it wide usage. excellent article :) keep it up.
insic, 06 April 2009
useful list.
Ashish, 20 January 2010
i need to tool jquery.
pls tell me a site….
Design freak, 06 April 2009
very useful script… thanks for the list
Dinesh, 06 April 2009
Much thanks man.. Newsletter Management! This is what i’m looking for past couple of days.. much much thanks.
joyoge designers' bookmark, 06 April 2009
helpful scripts thanks for the list..
taylan, 06 April 2009
Great list, Thanks a lot.
George Campos, 06 April 2009
Great list!
Thanks
George Campos
Sao Paulo – Brazil
sean steezy, 06 April 2009
sweetness. thanks!
Jason Grant, 06 April 2009
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.
Tutorial Library, 06 April 2009
very useful tutorial thanks
Amber Weinberg, 06 April 2009
amazing list, thanks!
Khalid, 10 December 2010
Wow. Nice girl in this pic.
King Don, 06 April 2009
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.
Jason Lengstorf, 06 April 2009
Thanks for featuring my FlickrScrollr!
Great list!
Sklep Zoologiczny, 06 April 2009
Another idea for new website. Thanks!
art2code, 06 April 2009
thanks for those useful tuts !
Abhisek, 06 April 2009
Thanks for posting one of my tuts. :)
Farid Hadi, 06 April 2009
This is a good, useful list. Thanks for sharing.
Josh Read, 07 April 2009
Such a fantastic resource. Thank you!
AlfredN, 07 April 2009
Thanks for this, there’s no doubt in my mind that jquery has eased many of my own issues.
Fred Rivett, 07 April 2009
An interesting read with some helpful tuts, cheers!
W3Planting, 07 April 2009
this post is simply a cool one!
Pradeep, 08 April 2009
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!
awake, 08 April 2009
This was wack! sorry
Kim H, 08 April 2009
The Flickr scroll is especially nice – I think I have a few of these bookmarked. Thanks for making life simple!
jack, 08 April 2009
thanks! this is very useful!
z.Yleo77, 13 April 2009
I like these script. ..thx
Rahul, 14 April 2009
Wow man this is a gigantic post.
Arjen, 16 April 2009
Great article, there are some really good ones in your list! Thanks for sharing!
Sheevaa, 16 April 2009
The Real 20 Useful PHP + j Query Components…. Nice Share
Alex, 22 April 2009
thank you very much.
Gopinath, 25 April 2009
You are amazing. I just cant refuse saying a BIGGGGGGGGGGGGGG thanks to you.
Robert, 25 April 2009
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.
Arif Bin Forhad, 26 May 2009
Wow!! Great..post..
Srinivas Tamada, 04 June 2009
Great List..
Shyju P Nair, 18 October 2009
Nice. Great Job.
Web Design Talk, 05 November 2009
Really like the apple auto suggest. That’s very cool, much betetr than vanilla suggest boxes.
denbagus, 27 November 2009
nice tutorial ..thanks full
Dzinepress, 11 December 2009
today i was searching something for help my developer and got this really amazing listing of php with jquery tutorials.
surya, 15 December 2009
Excellent list, thanks
Umnaj, 02 February 2010
Very Great!!! Thanks..
macs1407, 10 February 2010
truth has long been looking for tutorials so thank you very much for this great work. sorry for my English
balaraju, 07 December 2010
great execllent
Jaspal Singh, 18 February 2010
Really useful list of resources.
Thanks for sharing.
PeterX, 17 March 2010
thanks excelent post
nagarjuna, 26 March 2010
its very usefull for every one
cloud plz forward more concepts and materiel to my mail id
alin boby, 26 April 2010
Nice post! hope you will provide more posts like that.
densky, 30 April 2010
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
tnx…
shirish, 15 May 2010
Very nice tutes it helped me a lot. Can you place a basic tutorial on building a basic CMS with cakePHP and Jquery?
dolido, 19 May 2010
Thanks :-) all i need actually.
create mirror, 27 July 2010
can I copy this blog post? i will add a link to this post.. let me know please, thanks
chip, 28 July 2010
PHP + jQuery Components for thanx.
mathew, 11 August 2010
Good article,nice really helped me
jelow, 17 August 2010
testing
jelow, 17 August 2010
sadsadasd
Saurabh, 22 August 2010
nice collection guys.. well appreciated .. hope to get more…
usman, 17 September 2010
awesommmmmmmmmmmmmmmm thanx
Matt Butcher, 21 September 2010
Might I suggest QueryPath as a good PHP/jQuery tool? QueryPath (http://querypath.org) 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.
rashed, 08 November 2010
thanks a lot
Karey Luzinski, 10 November 2010
This is really one of the much better reports regarding those that I’ve keep reading this specific subject as of late. Fantastic perform.
pave, 05 January 2011
Thanks a ton!! Great article
Santosh, 01 February 2011
It’s a awesome list. I’m a web developer and Noupe has always been my first choice :)
Thanks for sharing :)
TheVoIPTech, 24 February 2011
Awesome! You should get a Donate link! So that folks like us can buy some beer! Thank you!.
azam, 28 February 2011
superb! thank you.
Fat Lizard, 28 February 2011
Cool bananas. Thanks.
Naqeeb Ullah, 02 March 2011
great job man… very helpful tutorial…
Slim, 14 April 2011
That’s amazing .. thanks so much !!
dll, 28 April 2011
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!
vikas, 11 May 2011
This is best way for learning jquery but i want to make easy utlize jquery of every person. but not right way
John, 17 May 2011
Nice one, but I need some sample example of cakephp to save form data without refresh page.
Meir, 24 May 2011
Great list. Really appreciated
ayodele, 21 June 2011
you have done great and I appreciate your talent and time spent….I need more on Jquery…Thanks.
MHD, 23 June 2011
This list is amazing! Thanks so much!…
Abdul Rehman, 28 June 2011
how to add a coment form in stand php, ajax jquery
sekhar, 02 July 2011
you have done great and I appreciate your talent and time spent….I need more on Jquery…Thanks
Manikandan, 05 July 2011
this is very useful for me…..nice collections…
Mihai Herman, 16 July 2011
Great article, only if i knew how to install them on my WordPress website :))
Beraki, 17 October 2011
Best posts. Nice helpful links
Raj Sandhu, 21 November 2011
Excellent Article and quite helpful. Thanks :)
John BP, 22 November 2011
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
Cheers
Sachin Baghel, 18 January 2012
very good collection man, hope in future there will be more jq in collection, best of luck,
Sachin Baghel, 18 January 2012
And One More Thing Happy New Year,