How to add comments option to iWeb website without MobileMe

Comments in iWeb Webpages without MobileMe Account

So, here you are, good old rebellious Apple users, have opened up your hearts Apple, but don't want to open up the wallets!

You have ended up at the right place!

I am going to load you with the ability to add comments to your iWeb websites that you rightly chose not to host on Apple Mobile Me service!

I am going to provide you with the code snippets, and step by step process. All you need to is: FOLLOW!

Before we start, I am going to make a couple of things clear, this process requires nothing more than common sense on your part, and if you find a mistake in the tutorial or find something ambiguous feel free to use the comments form and I am going to answer personally as soon as possible!

You will need to post your website to a Folder in your computer, and when you are finished with this tutorial simply upload the folder to your server.

I am going to use a MySQL database to store the comments. To manage the database I am going to use phpMyAdmin interface. Again I would make one thing clear, "THIS TUTORIAL DOES NOT ASSUME YOU TO HAVE ANY PROGRAMMING EXPERTISE!"

There are going to be FOUR major parts of the code that you would need to insert in the right places with the needed changes.

A- First, we are going to lay down the database where we are going to store the comments

B- Second would be the Form which takes the information like name, email address and, of course, the comments

C- Then we are going to write the code that is going to do the actual inserting of the comments into the Database

D- The final part would show the previously posted comments on the page

A- Laying down the basic database to hold our comments

Every hosting service comes with a database support. If you think yours doesn't, you need to take another look at the confirmation email from the service provider, the one which had the login information and stuff.

You need to locate the mysql data in the email.

there should be four different pieces of information.

1.-Host -> example.com.mysql
2.-Database -> example_com
3.-User -> example_com
4.-Password -> SomEthingsoMthing123

lets start:

1- Start by making a new table in the database of your website.

For obvious reason, we are going to name our table: comments and we are going to type the number 6 in the Number of Fields.

2- Lets now set the fields for the table "comments"

We set 6 fields as following:

1.- Sr_ No
2.- nam
3.- e_mail
4.- comments
5.- time_stamp
6.- article

Please be meticulous about the settings. Type everything exactly as shown in the snap, and if something is not clear, please ask!

With this we are done with the database part. See, I told you, it was going to be painless :)

B- Creating the FORM which takes the information from the users and inserts into the Database

1- Create a HTML Snippet

2- Paste this code into the snippet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<br>

<br>

<span class="textfieldRequiredMsg">Please tell my your name!</span>

<span class="textfieldMinCharsMsg">This can't be your real name, and if it is; I would like to talk to your parents!"</span><br>

<span class="textfieldMaxCharsMsg">You have a wonderfully simple and small name, have you ever filled a paper form?<br>

<br>

</span></span><span id="sprytextfield2">

<label for="email"> Email<br>

</label>

<br>

<span class="textfieldRequiredMsg">I solmenly swear, I will never send you spam! please enter your email address<br>

</span><span class="textfieldInvalidFormatMsg">Honestly, do you really think you are going to pass THIS on as a valid email address?</span>

<span class="textfieldMinCharsMsg">Too short, please try again!</span></span>

<label for="comments">Comments<br>

</label>

<span class="textareaRequiredMsg">You forgot the most important part!.</span></span></p>

<p>

</p>

</form>

<!--

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"], minChars:3, maxChars:15});

var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {useCharacterMasking:true, minChars:" ", validateOn:["blur"]});

var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");

//-->

</script>

</html>

3- This snippet depends exclusively to validate input from the user before writing it into the database on Spry. I am not going to talk about it at all, because you don't need it. This code simply works!!

4- But for it to work, you also need to download THESE folders and place them with the file (normally in the files folder).

5- Don't worry if this doesn't look right in iWeb, it is going to look perfect in Safari after you have uploaded it to the server. It needs the SpryAssets to work!

C- The code that takes the information from the Form we generated in the previous section and inserts it into the Database

1- Open TextEdit and paste this code in there:

<?php

$name = $_POST['name'];

$email = $_POST['email'];

$comments = $_POST['comments'];

$myServer = "YourWebsite.com.mysql";

$myUser = "YourWebsite_com";

$myPass = "SomeThingSoMthinG123";

$myDB = "YourWebsite_com";

$article = "YourArticleNumber";

//connection to the database

$dbhandle = mysql_connect($myServer, $myUser, $myPass) or die("Couldn't connect to SQL Server on $myServer");

//select a database to work with

$selected = mysql_select_db($myDB, $dbhandle) or die("Couldn't open database $myDB");

$query = "INSERT INTO comments (nam, e_mail, comments, article) VALUES ('$name','$email','$comments', $article)";

mysql_query($query);

header("Location:http://www.YourWebsiteHere.com");

//close the connection

mysql_close($dbhandle);

2- Save it as: "db_access.php" It is really important to name it exactly the same since otherwise the form won't be able to contact with it.

3- Save it into the same directory as the Form from the previous section.

D- Show the previously posted comments on the website

This part is a little complicated because there is a small thing that you need to find out on your own. You need to know if your hosting company allows embedded PHP code in HTML files. If yes, than things are a little easier, otherwise a little tedious!

case 1: Your hosting company allows PHP code snippets in HTML files: You simply create another HTTP snippet resize it and place it to accommodate your comments from the database and paste the following code into it:

$username="YourWebsite_com";

$password="YourPassword";

$database="YourWebsite_com";

$host="YourWebsite.com.mysql";

$article="the same number you aloted when you were posting the comment";

mysql_connect($host,$username,$password);

@mysql_select_db($database) or die( "Unable to select database");

$query="SELECT * FROM comments WHERE article = $article ORDER BY Sr_No DESC ";

$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();

echo "<b><center>Comments</center></b><br><br>";

$i=0;

while ($i < $num) {

$name=mysql_result($result,$i,"nam");

$email=mysql_result($result,$i,"e_mail");

$comments=mysql_result($result,$i,"comments");

$tstamp=mysql_result($result,$i,"time_stamp");

echo "<b>".$name."</b> wrote:<br>".$comments."<br><i><b>this comment was made on: ".$tstamp."</b></i><br><br><br>";

$i++;

}

Case 2: If your hosting company doesn't support embedded PHP code in HTML files: You insert a HTML snippet where you want the comments to appear. Resize it to accommodate the data from the database.

Since we are using PHP to do the extraction from the database, we need to find out a way to make PHP code work!

The only solution I came up with is dirty! I am going to look for something cleaner, but for now this is the only solution I can think of:

Go to the HTML file which creates the page where you want the comments. You look for the HTML widget that you just created. If you haven't inserted any more widgets than this should be the second widget. It would be called something like "widget2_markup.html"

You need to simply rename it to "widget2_markup.php"

And when you have done that, you open up Textedit, copy the code from above paste into it and save it as "widget2_markup.php"

And the last part would be to upload it to the same folder where the HTML file is, which creates the page where you comments are going to be!

Sunday, October 25, 2009

LATEST UPDATE: You can either try your hands on this long and tedious tutorial or try this all new “copy-paste” Flexi Comment Box for FREE!

next >

< previous