How do I code a comment box on my blog?

Question

Obviously, I am a novice web designer. I'm using php and sql to do all the under-the-hood stuff, but I want a visually appealing as well as functional comment system.

Right now I am just using HTML forms but they don't look very good. Should I be using javascript? Any tips to get me started?

Answer 1

There are an infinate amount of answers to this. The simplist answer is to use/learn CSS.

If you are sing a JS library like jQuery then you could use one of their plugins that already have the forms css'd for you.

Answer 2

If you just want the comments and aren't looking for a learning experience, then cut some corners and use Disqus! It's crazy easy to set up.

Right now I am just using HTML forms but they don't look very good. Should I be using javascript?

If you use JavaScript you're going to have HTML forms somewhere in there anyways.

Very basically you'd want to:

• Create a SQL table comments
• Create a PHP script 'comment.php'
• Add code to the bottom of all pages displaying comments...
• ...and an HTML <form> to the bottom of all the pages you want to have commenting on, with an action attribute directing to your 'comment.php' script.

Create a SQL table comments

Create a table in your DB with the following columns:

• id - a unique identifier
• url - the url of the page which was commented on.
• author - who left the comment
• comment - the comment which was left

A little SQL:

CREATE TABLE `comments`
    ( `id` INT NOT NULL AUTO_INCREMENT,
      `url` VARCHAR(255) NOT NULL ,
      `author` VARCHAR(255) NOT NULL ,
      `comment` TEXT NOT NULL ,
      PRIMARY KEY (id)
     )

No promises my syntax is perfect ;)

Create a PHP script 'comment.php'

Have it respond to a POST request and insert a row into table comments. (Why POST? Read about Safe Methods)

<?php
    $db = DB::connect(...);
    // I'm being a little lazy with the intricacies of PHP-DB interaction...
    // Be sure to validate the input a little.
    // You'll want to take some measures to prevent spoofing.
    $db->insert("INSERT INTO `comments` (`url`, `author`,`comment`) VALUES (?,?,?)", array($_POST['url'], $_POST['author'], $_POST['comment']));
    header("Location: ".$_POST['url']); // redirect back to the commented page
                                        // actually, I'm being lazy;the Location header is supposed to be a full url including protocol and domain etc
?>

Note that I've used placeholders ? in the SQL...

Add code to the bottom of all pages displaying comments

At the bottom of all pages with comments, add something like...

<?php
    $db = DB::connect(...);
    // I'm being a little lazy with the intricacies of PHP-DB interaction...
    $result = $db->query("SELECT * FROM `comments` WHERE `url`=?", array($_SERVER['REQUEST_URI']));
    while($row = $result->fetchRow()) }
        echo "<div class=\"comment\">";
        echo "<div class=\"author\">Comment By:".htmlentities($row['author'])."</div>";
        echo htmlentities($row['comment']);
        echo "</div>";
    }
?>

Note the use of htmlentities to prevent XSS.

Add an HTML <form> to the bottom of all the pages

Now, for user's to be able to add comments, you need an HTML <form>.

<form method="post" action="/path/to/comments.php">
<label for="author">Your name:</label><input name="author" id="author" />
<textarea name="comment"></textarea>
<input type="hidden" name="url" value="<?php echo htmlentities($_SERVER['REQUEST_URI'])?>" />
<input type="submit" />
</form>

Doing this, however, you only have text (no cool gravitars or anything) and you're really just trusting people on their names (no OpenID authentication). You also don't really have any formatting on the comments (they're all plain text).

All this is covered by using Disqus.

Answer 3

you can install wordpress or a similar blog software platform. the look-and-feel is then easily customizable via CSS.

Answer 4

Imho if the only thing you want are comments, then check this service:

http://disqus.com

You can see working example here:

http://mashinaizec.com/mons-2

Its very easy to implement, just copy the code you get on the site, and paste it into your pages. Code for the site above is this:

<div id="disqus_thread"></div>
<script type="text/javascript">
/**
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread] 
*/
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://mashinazec.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=mashinazec"&gt;&lt;/a&gt;&lt;/noscript&gt;

I find this service to be of great help when i only need comments on few pages.

After implementing, its easy to style it the way you want simply by using CSS.

Answer 5

For a quick spruce up of your form, check out JQueryUI's Theme roller themes.

http://jqueryui.com/