This time, we are making a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
Step 1 – XHTML
First, lets take a look at the markup of the comments. This code is generated by PHP in the Comment class, which we are going to take a look at in a moment.
demo.php
09 |
<div title="Added at 06:40 on 30 Jun 2010" class="date">30 Jun 2010</div> |
The avatar div contains a hyperlink (if the user entered a valid URL when submitting the comment) and an avatar image, which is fetched from gravatar.com. We will return to this in the PHP step of the tut. Lastly we have the name and time divs, and the comment body.
The other important element in the XHTML part is the comment form. It is sent via POST. All fields except for the URL field are required.
demo.php
01 |
<div id="addCommentContainer"> |
03 |
<form id="addCommentForm" method="post" action=""> |
05 |
<label for="name">Your Name</label> |
06 |
<input type="text" name="name" id="name" /> |
08 |
<label for="email">Your Email</label> |
09 |
<input type="text" name="email" id="email" /> |
11 |
<label for="url">Website (not required)</label> |
12 |
<input type="text" name="url" id="url" /> |
14 |
<label for="body">Comment Body</label> |
15 |
<textarea name="body" id="body" cols="20" rows="5"></textarea> |
17 |
<input type="submit" id="submit" value="Submit" /> |
The form is submitted via AJAX. The validation is performed entirely in the backend by submit.php, as you will see in the jQuery step of the tutorial. Every field has a corresponding label element, with an appropriate for attribute.
Download Demo
Related Posts :
QUnit is a powerful JavaScript unit testing framework that helps you to debug code. It’s writte ...
The first Tutorialzine giveaway has finished! Now is the time to draw the winners. But, as this ...
Much of HTML 5′s feature set involves JavaScript APIs that make it easier to develop intera ...
