Tutorials Navigation

Tutorials :: New :: Popular :: Top Rated

Show Search Options

Search in categories

(Hold the CTRL/CMD key to select multiple categories)

Tutorials: 18,357 Categories: 12

Total Tutorial Views: 42,549,421

How to Make a Very Simple Shoutbox | php | My Sql

Tutorial Name: How to Make a Very Simple Shoutbox | php | My Sql  

Category: PC Tutorials

Submitted By: iHasZombiesHD

Date Added:

Comments: 2

Views: 8,625

Related Forum: PC Building Forum

Share:

Ok to day i am going to show you how to make a shoutbox. I hope this will be a learning experience for you, and also help you when building your forums/site.

Also help/credit from: [ Register or Signin to view external links. ] Thank you


How to make a shoutbox (Simple)


To make this shoutbox it will require basic knowledge of php and mysql.

We will first you need to make a database where you will store this chats logs and repots, so on phpmyadmin you can create a database for the shout box it's self.

If you don't know what phpmyadmin is here is a link to it: [ Register or Signin to view external links. ]

*You can also find it when you go to your hosting>cpanle>php-admin. *

Next we will submit a chart, in sql query window. Also copy the code below:


CREATE TABLE `shoutbox` (
`id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
`name` VARCHAR(45) NOT NULL,
`email` VARCHAR(60) NOT NULL,
`post` TEXT NOT NULL,
`ipaddress` VARCHAR(45) NOT NULL,
PRIMARY KEY (`id`)
);


Thank ntechi for the code (Not from ttg)

Here is a pic.

[ Register or Signin to view external links. ]

To get to this step you must go to the operation's tag on the page and create a new table in the phpadmin. Then copy my code and you should get what i have on my pic.

Here we made a table with name, email, id and ipaddress fields, where all values is must, id is set to auto increement and we are using IP address to track the user.

Next we will create a file named as db.php, where we make our MYSQL Connection, so just paste the below code in your file db.php

<?php
$host = localhost; //Normally localhost
$username = root; //Username which is added to your database, root is default
$password = ; //Password for your user, for root password is null
$database = shoutbox; //your database name
?>


Now we will create our actual shoutbox code file, make a file and name it to index.php, and add following code in it:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shoutbox Tutorial For TTG</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
 
<h1>Shoutbox</h1>
<h5><a href="http://www.iHasZombiesHD.com" title="IHasZombiesHD">iHasZombiesHD</a></h5>
 
<div id="boxtop"></div>
<div id="content">
 
<?php
$self = $_SERVER['PHP_SELF']; //the $self variable equals this file
$ipaddress = ("$_SERVER[REMOTE_ADDR]"); //the $ipaddress var equals users IP
include ('db.php'); // for db details
 
// defines a $connect variable, which when used
// will attempt to connect to the databse using
// details provided in config.php
// if it fails, will display error - or die();
$connect = mysql_connect($host,$username,$password) or die('<p>Unable to connect to the database server at this time.</p>');
 
// connect to database using details provided
// and uses the $connect variable above
// if it fails, will return error - or die();
mysql_select_db($database,$connect) or die('<p>Unable to connect to the database at this time.</p>');
 
// checks the POST to see if something has been submitted
if(isset($_POST['send'])) {
// are any of the fields empty? the || means 'or'
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['post'])) {
echo('<p>You did not fill in a required field.</p>');
} else {
 
// if there are no empty fields, insert into the database:
 
// escape special characters to stop xss and sql injecting
// we take the 'name' and 'post' parts from the POST
// and run it through htmlspecialchars()
// this stops users sending HTML code, as it could be malicious
//
// also runs through mysql_real_escape_string()
// stops users sending SQL code, which could be used to access the db
$name = htmlspecialchars(mysql_real_escape_string($_POST['name']));
$email = htmlspecialchars(mysql_real_escape_string($_POST['email']));
$post = htmlspecialchars(mysql_real_escape_string($_POST['post']));
 
// this is our SQL string to insert shouts into db
$sql = "INSERT INTO shouts SET name='$name', email='$email', post='$post', ipaddress='$ipaddress';";
 
// we run the SQL string now
// if it succeeds, display message
if (@mysql_query($sql)) {
echo('<p>Thanks for shouting!</p>');
} else {
// if it errors, send message
echo('<p>There was an unexpected error when posting your shout.</p>');
}
}
}
 
// now we retrieve the 8 latest shouts from the db
$query = "SELECT * FROM shouts ORDER BY `id` DESC LIMIT 8;";
 
// run the query. if it fails, display error
$result = @mysql_query("$query") or die('<p>There was an unexpected error grabbing shouts from the database.</p>');
 
?><ul><?php
// while we still have rows from the db, display them
while ($row = mysql_fetch_array($result)) {
 
$ename = stripslashes($row['name']);
$eemail = stripslashes($row['email']);
$epost = stripslashes($row['post']);
 
// Woop! We can use Gravatars aswell!!
$grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5(strtolower($eemail)&#
41;."&size=70";
 
echo('<li><div><p>'.$ename.'</p><img src="'.$grav_url.'" alt="Gravatar" /></div><div><p style="padding:20px 0 0 0;">'.$epost.'</p></div></li>');
 
}
?></ul>
 
<!-- at the bottom of the page, we display our comment form -->
<form action="<?php $self ?>" method="post">
<h2>Shout!</h2>
<div><label for="name"><p>Name:</p></label><input name="name" type="text" cols="20" /></div>
<div><label for="email"><p>Email:</p></label><input name="email" type="text" cols="20" /></div>
<textarea name="post" rows="5" cols="40"></textarea>
<input name="send" type="hidden" />
<p><input type="submit" value="send" /></p>
</form>
 
</div><!--/content-->
<div id="boxbot"></div>
 
</div><!--/container-->
 
</body>
</html>


This is a quota:

"OK, in this file first we get the IP address of the person and open the db connection by including our first created db.php file.

Then we pass a check condition to check the emptiness in the textboxes. And we also store the values in respective variables, here while storing them we are using php functions htmlspecialchars, to avoid html characters and mysql_real_escape_string to avoid sql statements, this two are very important in terms of security else anyone will pass html and sql codes and pamper the database or server.

After storing them, we finally code the insert query and echoes a custom message of successful execution.

Wait a minute, this is not the end, now we will also have to display the recently 8 shouts, so we fire a select query and store the array in a variable.

And finally in a while loop we echo the email, name and the shout message.

Woila, done, but arghhhhhhhhhhh without CSS, its like image without color, so make a file style.css and add the following css code in it." This is from [ Register or Signin to view external links. ]



/* Shoutbox PHP tutorial from WebsTutorial */
 
* {
margin: 0;
padding: 0;
}
 
body {
background: #323f66 top center url("images/back.png") no-repeat;
color: #ffffff;
font-family: Helvetica, Arial, Verdana, sans-serif;
}
 
h1 {
font-size: 3.5em;
letter-spacing: -1px;
background: url("images/shoutbox.png") no-repeat;
width: 303px;
margin: 0 auto;
text-indent: -9999em;
color: #33ccff;
}
 
h2 {
font-size: 2em;
letter-spacing: -1px;
background: url("images/shout.png") no-repeat;
width: 119px;
text-indent: -9999em;
color: #33ccff;
clear: both;
margin: 15px 0;
}
 
h5 a:link, h5 a:visited {
color: #ffffff;
text-decoration: none;
}
 
h5 a:hover, h5 a:active, h5 a:focus {
border-bottom: 1px solid #fff;
}
 
p {
font-size: 0.9em;
line-height: 1.3em;
font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;
}
 
p.error {
background-color: #603131;
border: 1px solid #5c2d2d;
width: 260px;
padding: 10px;
margin-bottom: 15px;
}
 
p.success {
background-color: #313d60;
border: 1px solid #2d395c;
width: 260px;
padding: 10px;
margin-bottom: 15px;
}
 
#container {
width: 664px;
margin: 20px auto;
text-align: center;
}
 
#boxtop {
margin: 30px auto 0px;
background: url("images/top.png") no-repeat;
width: 663px;
height: 23px;
}
 
#boxbot {
margin: 0px auto 30px;
background: url("images/bot.png") no-repeat;
width: 664px;
height: 25px;
}
 
#content {
margin: 0 auto;
width: 664px;
text-align: left;
background: url("images/bg.png") repeat-y;
padding: 15px 35px;
}
 
#content ul {
margin-left: 0;
margin-bottom: 15px;
}
 
#content ul li {
list-style: none;
clear: both;
padding-top: 30px;
}
 
#content ul li:first-child {
padding-top:0;
}
 
.meta {
width: 85px;
text-align: left;
float: left;
min-height: 110px;
font-weight: bold;
}
 
.meta img {
padding: 5px;
background-color: #313d60;
}
 
.meta p {
font-size: 0.8em;
}
 
.shout {
width: 500px;
float: left;
margin-left: 15px;
min-height: 110px;
padding-top: 5px;
}
 
form {
clear: both;
margin-top: 135px !important;
}
 
.fname, .femail {
width: 222px;
float: left;
}
 
form p {
font-weight: bold;
margin-bottom: 3px;
}
 
form textarea {
width: 365px;
overflow: hidden; /* removes vertical scrollbar in IE */
}
 
form input, form textarea {
background-color: #313d60;
border: 1px solid #2d395c;
color: #ffffff;
padding: 5px;
font-family: Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;
margin-bottom: 10px;
}
 
ul li{
border: 1px solid #2A3556;
float: left;
margin-right: 10px;
padding: 10px;
position: relative;
right: 12px;
margin-bottom:5px;
}


Thanks for reading, the help i got was from here:

[ Register or Signin to view external links. ]

Thanks for reading

If you need any help hit me up with a p.m

Ratings

Current rating: 3.00 by 9 users
Please take one second and rate this tutorial...

Not a Chance
1
2
3
4
5
6
7
8
9
10
 Absolutely

Comments

"How to Make a Very Simple Shoutbox | php | My Sql" :: Login/Create an Account :: 2 comments

If you would like to post a comment please signin to your account or register for an account.

qburt1Posted:

I did everything and edited everything I needed to and it still gave me an error about getting logs from database

F22Posted:

Ok PHP admin wth do I do with it and witch download I need


Related Tutorials