Recent Update
7/20/08 - Website's back up 8D
Home > Tutorials > Creating a Tagboard - Report an Error





Currently you aren't logged in.
Log in, or Register
Creating a Tagboard
Let's first start off with the requirements.
    1. Decent PHP/MySQL knowledge
    2. Know HTML/css
    3. One MySQL database and table
Once you have all of this, you should first start with the design of the Tagboard. I like to get this out of the way. Let me explain what we will be doing in this tutorial.
    1. Design the Tagboard in a file
    2. Create a MySQL table with the appropriate columns in a database
    3. Learn how to insert information into tables with PHP
    4. Learn how to display the information from the tables with the help of PHP
    5. Add extra features, etc
    6. Finished!
Designing
First, create a file named "tagboard.php". Pretend it's like any other page. Think of the color you want your tagboard to be. Green? Blue? Purple?! It's your choice. Once you have chosen of a color, get the HTML color code for it (Black is #000000, etc). Once you have this, add this in your CSS.
    body {
    background-color:#colorcode;
    }
Now, choose what you want the font to be. Typically, Verdana, Tahoma, and Helvetica work the best when it comes to 9 and 10px font sizes. Ocassionaly I change the font family for our tagboard. Also, pick what color you want the text to be.
    body {
    background-color:#colorcode;
    font-family:verdana;
    font-size:10px;
    color:#fontcolor;
    }
That's pretty much going to be the design of your tagboard. If you want to be fancy and add things like background images, that's up to you. If you are going to do that, you do:
    body {
    background-color:#colorcode;
    font-family:verdana;
    font-size:10px;
    color:#fontcolor;
    background-image:url('imageurl');
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:whatever position;
    }
Creating the table
I'm pretty sure you know how to access your MySQL database, so do that now. Log in to your pMA (phpMyAdmin). Go to "Create new table" and type in the name Tagboard, with five fields. Make these fields "name", "message", "ip", "time", and "id". For "Type", choose VARCHAR, and for "Length" put 250, for all of the fields EXCEPT for id. For ID, choose type "INT", and under Extra, choose "auto_increment". Do you see the little key and then the column? Click on the bubble under that column for the ID field. This is what your table should basically be:
    name VARCHAR 250
    message VARCHAR 500
    ip VARCHAR 100
    id INT 250 auto_increment primary

Inserting information into the table
Go back to your "tagboard.php" file. Put in the body:
    <form method='post'>
    Name: <br> <input type='text' name='name' style='width:100%;'><br>
    Message: <br> <input type='text' name='message' style='width:100%;'><br>
    <input type='submit' name='post' value='Post' style='width:100%;'>
    </form>
Now, before ANY of your code on that page, put this:
    <?php

    $database = "your_database";
    mysql_connect ("localhost", "username", "password");
    mysql_select_db($database) or die( "Unable to select database");

    if(isset($_POST['post'])){
    $name = htmlspecialchars(addslashes($_POST['name']));
    $message = htmlspecialchars(addslashes($_POST['message']));
    $ip = $_SERVER['REMOTE_ADDR'];
    $time = time();

    if(empty($name)){ print "You need a name."; }{
    if(empty($message)){ print "You need a message."; }{
    mysql_query("INSERT INTO tagboard (name, message, ip, time) VALUES ('$name', '$message', '$ip', '$time')");
    header("Location: tagboard.php");
    }}}
    ?>
Displaying messages
This part isn't really hard. Just add this after your form.
    <?php
    $get_tagbox = mysql_query("SELECT * FROM tagboard ORDER BY time DESC");
    while($tagboard = mysql_fetch_array($get_tagboard)){
    print "<p><strong>" . $tagboard['name'] . "</strong>: ". $tagboard['message'] . "</p>";
    }
    ?>
Wrapping it up
Everything should be working now. If it isn't, you messed up on something in the process. Enjoy your tagboard! If you have any questions or concerns, whatever, contact me.