Coding Mix

Upload an image and downsize it (in KB`s) using php and GD

noreply@blogger.com (Csabi) — Sat, 15 Jan 2011 03:41:15 PST

If you have a website where you let your users to upload images, you know that even the small images (around 100x100) can reach 50 - 100KB. This is way too much, when you could simply downsize the image to around 1 - 5KB, this is only the 1 - 5% of the size of the original image. Just imagine the benefits of downsizing 100.000 images...
Bellow is an image before and after resizing:

Before

24.80KB

After

3.52KB

So let`s begin downsizing those images...
The upload form
upload-form.php:

<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Select image: <input name="theimage" type="file" /><br />
<input type="submit" value="Upload image" />
</form>

enctype="multipart/form-data" - this line tells the server that you want to send a file
MAX_FILE_SIZE - limits the maximum file size in bytes
type="file" - this is the file selecting input

Checking the image
First we need to check the file for 3 different problems:
- it was submitted or not ?
- it was uploaded ?
- it is too big ?
upload.php:

Check image type
Now we will check the type of the file, because we will accept only .jpg .gif and .png. At this step we will use some GD, too, because we will put our image in a variable:

Working with transparent images
We will downsize the images by converting it to .jpg. The jpg images can not be transparent and when the user uploads a transparent image, the transparent part will be painted in black. To make the transparent part white we need to create a white image with the same size as our uploaded image and then copy the uploaded image over the white image:

<?php
if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
else {
$size = getimagesize($_FILES['theimage']['tmp_name']);
$background = imagecreatetruecolor($size[0],$size[1]);
$white = imagecolorallocate($background,255,255,255);
imagefill($background,0,0,$white);
imagecopy($background,$image,0,0,0,0,$size[0],$size[1]);
}
}
}
else {
echo 'There is no image!';
}
?>

Downsize the image
This is the final step, when we save the image in .jpg format:

If you have any questions please don`t hesitate to ASK!

Private chat room script

noreply@blogger.com (Csabi) — Wed, 04 Jan 2012 00:47:49 PST

Finally my private chat room is ready! I`we used jQuery, PHP and 2 MySQL tables to write this script. This is the first version, this is some kind of beta version, because I hadn`t test it yet, because it needs at least 2 users to work... Here is a live demo, have fun with it and please tell me about the errors:

NOTES:
Everything is refreshed each 15 seconds.
An user is logged out after 10 minutes of inactivity.
Each message is kept for 30 minutes.
An users name is highlighted with orange if the user sent you a message.
The selected username is highlighted with red.

As I said, we will need two mysql tables: one to hold the users (username, ip, last activity date) and one for the messages (from, to, message, date). Here is my code to create the tables:
table1.php

<?php
mysql_connect("host", "username", "password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());
mysql_query("CREATE TABLE chatusers(
username VARCHAR(30),
ip CHAR(15),
lastactive INT UNSIGNED,
PRIMARY KEY(username)
)")
or die(mysql_error());
echo "Table Created!";
?>

table2.php

<?php
mysql_connect("host", "username", "password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());
mysql_query("CREATE TABLE messages(
messagefrom VARCHAR(30),
sendto VARCHAR(30),
message VARCHAR(255),
date INT UNSIGNED
)")
or die(mysql_error());
echo "Table Created!";
?>

It`s hard to explain how it works... but I will try to. At the start if your ip is not in the database you will be asked for an username and you will be added to the database and a list with the online users is generated by the onlineusers.php file. When you click on somebody the messages sent by that person to you and the messages sent by you to that person are shown by the show-messages.php file. When you write a message and press the send button then your message will be sent to the selected user by saving it on the messages table.

Here is the rest of the code:
chat.php

<html>
<head>
<style>
#chat {
width:500px;
margin:0 auto;
}
#login {
width:230px;
height:50px;
margin:100px;
border:1px solid black;
text-indent:10px;
}
.onlineuser {
padding:0 10px;
background:#CCC;
margin-left:2px;
}
.yes {
background:#F90;
}
.message {
float:left;
border:1px solid black;
width:498px;
}
.messdate {
float:right;
}
.selected {
background:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
<div id="chat"><div id="messages"></div>
<?php mysql_connect('host', 'username', 'password') or die (mysql_error());
mysql_select_db('database') or die (mysql_error());
if(mysql_num_rows(mysql_query("SELECT username FROM chatusers WHERE ip = '" . $_SERVER['REMOTE_ADDR'] . "'")) == 0){ ?>
<div id="login">
Select username: <br />
<input type="text" id="usernameinput"/>
<input type="button" value="Login" id="loginbutton"/>
</div>
<?php }
else {
mysql_query("UPDATE chatusers SET lastactive = " . time() . " WHERE ip = '" . $_SERVER['REMOTE_ADDR'] . "'");
?>
<div id="onlineusers">
</div>
<div id="send">
<textarea id="message" cols="50" rows="5"></textarea><br/><input type="button" value="Send" id="sendbutton" disabled="disabled"/>
</div>
<?php } ?>

<script>
$('#loginbutton').click(function (){
if($(this).attr("disabled") != "disabled"){
var error = $.ajax({
url: "login.php",
data: "username=" + $('#usernameinput').val(),
async:false
}).responseText;
if(error != ''){
alert(error);
}
else {
location.reload();
}
}
});

var from = '';
showusers();
function showusers(){
$('#onlineusers').html($.ajax({
url: 'onlineusers.php?x=' + Math.random() + '&selected=' + from,
async:false
}).responseText);
$('#messages').html($.ajax({
url: 'show-messages.php',
data: '?x=' + Math.random() + '&from=' + from,
async:false
}).responseText);
setTimeout('showusers()',15000);
}

$('.onlineuser').click(function (){
from = $(this).html();
$('#messages').html($.ajax({
url: 'show-messages.php',
data: '?x=' + Math.random() + '&from=' + $(this).html(),
async:false
}).responseText);
$('#sendbutton').removeAttr("disabled");
showusers();
});

$('#sendbutton').click(function (){
if($(this).attr("disabled") != "disabled"){
var message = $('#message').val();
$.ajax({
url: 'send.php?to=' + from + '&mes=' + message
});
$('#message').val('');
showusers();
}
});
</script>
</body>
</html>

onlineusers.php

<?php
mysql_connect('host', 'username', 'password') or die (mysql_error());
mysql_select_db('database') or die (mysql_error());
mysql_query("UPDATE chatusers SET lastactive = " . time() . " WHERE ip = '" . $_SERVER['REMOTE_ADDR'] . "'");
$users = mysql_query("SELECT username FROM chatusers WHERE ip != '" . $_SERVER['REMOTE_ADDR'] . "'");
mysql_query("DELETE FROM chatusers WHERE lastactive < " . (time() - 600)) or die(mysql_error());
echo 'Online users: ';
$username = mysql_fetch_array(mysql_query("SELECT username FROM chatusers WHERE ip = '" . $_SERVER['REMOTE_ADDR'] . "'"));
$username = $username['username'];
while($row = mysql_fetch_array($users)){
$class = '';
$class2 = '';
if(mysql_num_rows(mysql_query("SELECT * FROM messages WHERE sendto = '" . $username . "' and messagefrom = '" . $row['username'] . "'")) > 0) {
$class = 'yes';
}
if($_GET['selected'] == $row['username']){
$class2 = 'selected';
}
echo '<span class="onlineuser ' . $class . ' ' . $class2 . '">' . $row['username'] . '</span>';
}
?>

show-messages.php

<?php
mysql_connect('host', 'username', 'password') or die (mysql_error());
mysql_select_db('database') or die (mysql_error());
$username = mysql_fetch_array(mysql_query("SELECT username FROM chatusers WHERE ip = '" . $_SERVER['REMOTE_ADDR'] . "'"));
$username = $username['username'];
mysql_query("DELETE FROM messages WHERE date < " . (time() - 1800));
$result = mysql_query("(SELECT * FROM messages WHERE messagefrom = '" . $_GET['from'] . "' and sendto = '" . $username . "' ORDER BY date ASC LIMIT 0, 10) UNION (SELECT * FROM messages WHERE messagefrom = '" . $username . "' and sendto = '" . $_GET['from'] . "' ORDER BY date ASC LIMIT 0, 10)") or die(mysql_error());
while($row = mysql_fetch_array($result)){
if($row['messagefrom'] == $username){
$by = 'You';
}
else{
$by = $_GET['from'];
}
echo '<div class="message"><b>' . $by . ':</b> ' . $row['message'] . '<span class="messdate">' . date('g:i A M, d Y',$row['date']) . '</span></div>';
}
?>

login.php

<?php
mysql_connect('host', 'username', 'password') or die (mysql_error());
mysql_select_db('database') or die (mysql_error());
if(mysql_num_rows(mysql_query("SELECT * FROM chatusers WHERE username = '" . $_GET['username'] . "'")) == 0){
mysql_query("INSERT INTO chatusers VALUES('" . $_GET['username'] . "', '" . $_SERVER['REMOTE_ADDR'] . "', " . time() . ")") or die(mysql_error());
}
else{
echo 'Username is taken';
}
?>

send.php

If something is not working please let me know!

Create SEO friendly URL`s using mod rewrite in PHP (.htaccess)

noreply@blogger.com (Csabi) — Sun, 19 Dec 2010 07:12:33 PST

In this tutorial I will show you how to transform this:

http://www.mywebsite.com/tutorials.php?id=123&title=mod_rewrite&category=php

into this

http://www.mywebsite.com/tutorials/php/mod_rewrite-123

Why to rewrite your URL`s ?
The main reason is because static URL`s (the second URL is static) are indexed more faster than dynamic URL`s (like the first one), because from a static URL is easier to understand what the page is about both for search engines and your visitors. When using dynamic URL`s there is an another problem: search engines are reading only the beginning of the long URL`s, so if your addresses are different only at the end, than search engines will see the same URL for all of your pages and from this reason none will be indexed.

How this works ?
We will use Apache mod_rewrite. The mod_rewrite transforms back the second URL into the first URL, so the server will access the "ugly" address, but the visitors and the search engines will see the "clear" one. mod_rewrite simply rewrites the URL`s what meets specific conditions into addresses what are understood by the server.

Let`s rewrite it!
The code what rewrites the website address needs to be placed in your .htaccess file (if you don`t have it in your root folder, create it), the code is very short:

RewriteEngine on
RewriteRule ^tutorials/(.*)/(.*)-([0-9]+)/?$ /tutorials.php?id=$3&title=$2&category=$1

Take it apart!
The first line: RewriteEngine on simply does what it says, it starts the rewrite engine.
Now let`s take apart the second line:

RewriteRule - this tells the server about the rule to follow when rewriting the URL
^ - this exponential sign means the start of the URL: http://www.mywebsite.com/
tutorials - this word is simply added to the website adress
/ - this character separates the directories
(.*) - this tells the server that here will be placed some data (any kind of characters) (e.g.: php)
- - this character will be simply added to the website adress
([0-9]) - this tells the server that here will be placed a digit (e.g: 1)
+ - the plus sign tells the server that here can be more digits (e.g.: 123)
? - this sign tell the server that the character in it`s front it`s not required (so the URL will work with and without the last "/")
$ - the dollar sign tells the server that here is the end of the rule

The last part of the line is the old address, the value of each variable (id, title and category) are changed to $3, $2 and $1. mod_rewrite takes these variables and places them in their new position in the new URL. In the first place for data (the first (.*)) it places the $1`s value (the category value), in the second place the value of $2 and so on. If you want to change the order just change the $1, $2 and $3 order, but be careful to set the right data type in the new URL.

I know that it`s not easy, if you have any question please don`t hesitate, ASK ME! And I will try to answer as fast as I can. You can for example write me in a comment your URL and how you want to transform it and I will try to make it ;)

Simple Chat script in PHP and jQuery

noreply@blogger.com (Csabi) — Mon, 22 Nov 2010 05:48:54 PST

This is a very basic Chat script written in PHP and jQuery for more browser compatibility. The script saves the messages in a MySQL table and automatically removes the old messages, so it needs minimum disk space. If you prefer Javascript instead, check out this version of the chat script. Here is a live demo:

The script first needs a MySQL table:
create-table.php

<?php
mysql_connect('host', 'database', 'password')
or die (mysql_error());
mysql_select_db('database')
or die (mysql_error());
mysql_query("create table chat(
time int(11) NOT NULL,
name varchar(30) NOT NULL,
ip varchar(15) NOT NULL,
message varchar(255) NOT NULL,
PRIMARY KEY (time)
)") or die (mysql_error());
echo "Complete.";
?>

Than we need the main page of the script:
chat.php

<html>
<head>
<style>
.message {
overflow:hidden;
width:498px;
margin-bottom:5px;
border:1px solid #999;
}
.messagehead {
overflow:hidden;
background:#FFC;
width:500px;
}
.messagecontent {
overflow:hidden;
width:496px;
}
</style>
//Include jQuery
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
<div id="chat" style="width:500px;margin:0 auto;overflow:hidden;">
<div id="messages"></div>
<div id="error" style="width:500px;text-align:center;color:red;"></div>
<div id="write" style="text-align:center;"><textarea id="message" cols="50" rows="5"></textarea><br/>Name:<input type="text" id="name"/><input type="button" value="Send" id="sendbutton"/></div>
</div>
<script type="text/javascript">
function showmessages(){
//Change the content of the messages div with the response from the show-messages.php file.
$('#messages').html($.ajax({
url: 'show-messages.php?x=' + Math.random(), //The URL is always unique because of the random number
async:false
}).responseText);
//Repeat the function each 30 seconds
setTimeout('showmessages()',30000);
}
showmessages();
$('#sendbutton').click(function(){
var error = '';
//Show an error message based on the response from send.php
switch(parseInt($.ajax({
url: 'send.php?message=' + $('#message').val() + '&name=' + $('#name').val(),
async:false
}).responseText)){
case 1:
error = 'The database is down!';
break;
case 2:
error = 'The database is down!';
break;
case 3:
error = 'Don`t forget the message!';
break;
case 4:
error = 'The message is too long!';
break;
case 5:
error = 'Don`t forget the name!';
break;
case 6:
error = 'The name is too long!';
break;
case 7:
error = 'This name is already used by somebody else!';
break;
case 8:
error = 'The database is down!';
}
if(error == ''){
$('#error').html('');
showmessages();
}
else{
$('#error').html(error);
}
});
</script>
</body>
</html>

Now we need to create the file that saves the message:
send.php

<?php
mysql_connect('host', 'database', 'password') or die (1);
mysql_select_db('database') or die (2);
if(strlen($message) < 1){
echo 3;
}
else if(strlen($message) > 255){
echo 4;
}
else if(strlen($name) < 1){
echo 5;
}
else if(strlen($name) > 29){
echo 6;
}
else if(mysql_num_rows(mysql_query("select * from chat where name = '" . $name . "' and ip != '" . @$REMOTE_ADDR . "'")) != 0){
echo 7;
}
else{
//Insert the new message in the table and remove the unwanted characters
$search = array("<",">",">","<");
mysql_query("insert into chat values ('" . time() . "', '" . str_replace($search,"",$name) . "', '" . @$REMOTE_ADDR . "', '" . str_replace($search,"",$message) . "')") or die(8);
}
?>

And the file that sends back the messages to us:
show-messages.php

<?php
mysql_connect('host','database','password');
mysql_select_db('database') or die(2);
$result = mysql_query("select * from chat order by time desc limit 0,10");
$messages = array();
$i = 0;
while($row = mysql_fetch_array($result)){
$messages[$i] = "<div class='message'><div class='messagehead'>" . $row[name] . " - ";
$timeago = time() - $row['time'];
//Calculate the message date
if($timeago > 86400){
$messages[$i] .= date('g:i A M, d Y',$row[time]);
}
else{
$hours = floor($timeago / 3600);
$minutes = floor(($timeago - ($hours * 3600)) / 60);
$seconds = floor($timeago - ($hours * 3600) - ($minutes * 60));
if($hours > 0){
if($minutes > 9){
if($seconds > 9){
$messages[$i] .= $hours . ' h, ' . $minutes . ' min, ' . $seconds . ' sec';
}
else{
$messages[$i] .= $hours . ' h, ' . $minutes . ' min, 0' . $seconds . ' sec';
}
}
else{
if($seconds > 9){
$messages[$i] .= $hours . ' h, 0' . $minutes . ' min, ' . $seconds . ' sec';
}
else{
$messages[$i] .= $hours . ' h, 0' . $minutes . ' min, 0' . $seconds . ' sec';
}
}
}
else if($minutes > 0){
if($seconds > 9){
$messages[$i] .= $minutes . ' min, ' . $seconds . ' sec';
}
else{
$messages[$i] .= $minutes . ' min, 0' . $seconds . ' sec';
}
}
else{
$messages[$i] .= $seconds . ' sec';
}
$messages[$i] .= ' ago';
}
$messages[$i] .= "</div><div class='messagecontent'>" . $row[message] . "</div></div>";
$old = $row[time];
$i++;
}
for($i=9;$i>=0;$i--){
//Output the messages from the oldest to the newest
echo $messages[$i];
}
//Delete old messages
mysql_query("delete from chat where time < " . $old);
?>

If you have any related questions or problems please ask me!

Creating a full PHP Login system (Very Detailed) part 4

noreply@blogger.com (Csabi) — Mon, 22 Nov 2010 05:15:20 PST

Before reading this tutorial please read the previous parts. In this part of the tutorial we will discuss about how the users will log in and log out. I will use the same database as in the third part of the tutorial, if you have registered there now you can log in:

To log in we will use sessions (here you can read more about sessions). As you already know, a session can transfer data from a page to another pages. When the user logs in we will create a session with the username and later we will check this session: while the session exists the user is logged in.

But first we need the log in form:
index.php

<html>
</head>

<body>
<form action="login.php" method="post">
<b style="font-size:150%;">Log in</b><br/>
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
<input type="submit" value="Log in"/>
</form>
Don`t have an account?
<form action="register.php" method="post"><br/>
<b style="font-size:150%;">Register</b><br/>
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
Retype password: <input type="password" name="retype-password"/><br />
<input type="submit" value="Register" />
</form>
</body>
</html>

And now we need to create the login.php file. This file will create the session if the given username and password are matching. It will check the username and password by searching in the MySQL table for a row where the username field matches the given username and password field with the given password.
login.php:

<?php
session_start(); //Start sessions
mysql_connect('host', 'database', 'password')
or die ("Could not connect to mysql because ".mysql_error());
mysql_select_db('database')
or die ("Could not select database because ".mysql_error());
if(mysql_num_rows(mysql_query("SELECT * FROM users WHERE username='".$_POST["username"]."' and password='".$_POST["password"]."'"))==1){
session_register("username"); //Create the session
}
else {
echo 'Wrong username or password!';
}
?>

Now the session is created but we are not seeing the results. To see some results we will need to modify the index.php to show a welcome message if the user is logged in, else to show the login and registration forms:
index.php:

<?php
session_start();
?>
<html>
<head>
</head>

<body>
<?php
if(!session_is_registered("username")){?>
<form action="login.php" method="post">
<b style="font-size:150%;">Log in</b><br/>
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
<input type="submit" value="Log in"/>
</form>
Don`t have an account?
<form action="register.php" method="post"><br/>
<b style="font-size:150%;">Register</b><br/>
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
Retype password: <input type="password" name="retype-password"/><br />
<input type="submit" value="Register" />
</form>
<?php }
else{
echo 'Welcome ' . $_SESSION["username"];
}?>
</body>
</html>

In this moment if you log in ,you need to go back to the index.php file to see the welcome message. To solve this problem we will need to edit the login.php file in a way to redirect the user back to index.php. We will make this by using the header("location:index.php") function:
login.php:

<?php
session_start();
mysql_connect('host', 'database', 'password')
or die ("Could not connect to mysql because ".mysql_error());
mysql_select_db('database')
or die ("Could not select database because ".mysql_error());
if(mysql_num_rows(mysql_query("SELECT * FROM users WHERE username='".$_POST["username"]."' and password='".$_POST["password"]."'"))==1){
session_register("username");
header("location:index.php");
}
else {
echo 'Wrong username or password!';
}
?>

Now there is only one thing that needs to be done: the log out option. We will make logging out possible by creating a file: logout.php. This file will simply delete the username session and redirect the users back to index.php, but first we need to include the log out button in the index.php file:
index.php:

And here is the log out part:
logout.php:

<?php
session_start();
session_destroy(); //Delete session
header("location:index.php");
?>

And now the script should work fine, if it doesn`t or you have a question please comment. This script can be easily adapted to any website, by checking the existence of the session on each page.

Cross-browser Chat script using PHP, MySQL and Javascript

noreply@blogger.com (Csabi) — Mon, 31 Jan 2011 23:41:49 PST

I write this tutorial because the first version of my Chat script had some problems in IE (Internet Explorer): After the message was submitted the page was not refreshed. Now I`we found the problem and a solution and here is the new, cross-browser chat script:

The chat is refreshed automatically each 30 seconds.

This script works the same way as the old one.

Let`s start: First we need to create a MySQL table with 4 fields:

time - the time when the message was posted (UNIX)
name - the name of the author of the message
ip - the ip of the author of the message
message - the message text

To create the table (I will call it chat) I`we used the following file:
create-table.php

<?php
//Connect to MySQL
mysql_connect('host', 'database', 'password')
or die (mysql_error());
//Select database
mysql_select_db('database')
or die (mysql_error());
//Create the table
mysql_query("create table chat(
time int(11) NOT NULL,
name varchar(30) NOT NULL,
ip varchar(15) NOT NULL,
message varchar(255) NOT NULL,
PRIMARY KEY (time)
)") or die (mysql_error());
echo "Complete.";
?>

For the rest of the Chat script we will need 3 more files:
chat.php
send.php
show-messages.php

Let`s start with the chat.php what will contain the forms and all the Ajax scripts what will trigger the other 2 files:
chat.php

<html>
<head>
<style>
.message {
overflow:hidden;
width:498px;
margin-bottom:5px;
border:1px solid #999;
}
.messagehead {
overflow:hidden;
background:#FFC;
width:500px;
}
.messagecontent {
overflow:hidden;
width:496px;
}
</style>
</head>

<body>
<div id="chat" style="width:500px;margin:0 auto;overflow:hidden;">
//This div will contain the messages
<div id="messages"></div>
//This div will contain an eventual error message
<div id="error" style="width:500px;text-align:center;color:red;"></div>
//This div contains the forms and the send button
<div id="write" style="text-align:center;"><textarea id="message" cols="50" rows="5"></textarea><br/>Name:<input type="text" id="name"/><input type="button" value="Send" onClick="send();"/></div>
</div>

<script type="text/javascript">
//This function will display the messages
function showmessages(){
//Send an XMLHttpRequest to the 'show-message.php' file
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
//And here is the line what makes it cross-browser:
xmlhttp.open("GET","show-messages.php?" + Math.random(),false);
xmlhttp.send(null);
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","showmessages.php?" + Math.random(),false);
xmlhttp.send();
}
//Replace the content of the messages with the response from the 'show-messages.php' file
document.getElementById('messages').innerHTML = xmlhttp.responseText;
//Repeat the function each 30 seconds
setTimeout('showmessages()',30000);
}
//Start the showmessages() function
showmessages();
//This function will submit the message
function send(){
//Send an XMLHttpRequest to the 'send.php' file with all the required informations
var sendto = 'send.php?message=' + document.getElementById('message').value + '&name=' + document.getElementById('name').value;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",sendto,false);
xmlhttp.send(null);
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET",sendto,false);
xmlhttp.send();
}
var error = '';
//If an error occurs the 'send.php' file send`s the number of the error and based on that number a message is displayed
switch(parseInt(xmlhttp.responseText)){
case 1:
error = 'The database is down!';
break;
case 2:
error = 'The database is down!';
break;
case 3:
error = 'Don`t forget the message!';
break;
case 4:
error = 'The message is too long!';
break;
case 5:
error = 'Don`t forget the name!';
break;
case 6:
error = 'The name is too long!';
break;
case 7:
error = 'This name is already used by somebody else!';
break;
case 8:
error = 'The database is down!';
}
if(error == ''){
document.getElementById('error').innerHTML = '';
showmessages();
}
else{
document.getElementById('error').innerHTML = error;
}
}
</script>

</body>
</html>

send.php

<?php
//Connect to MySQL
mysql_connect('host', 'database', 'password') or die (1);
//Select database
mysql_select_db('database') or die (2);
//Check if message is empty and send the error code
if(strlen($message) < 1){
echo 3;
}
//Check if message is too long
else if(strlen($message) > 255){
echo 4;
}
//Check if name is empty
else if(strlen($name) < 1){
echo 5;
}
//Check if name is too long
else if(strlen($name) > 29){
echo 6;
}
//Check if the name is used by somebody else
else if(mysql_num_rows(mysql_query("select * from chat where name = '" . $name . "' and ip != '" . @$REMOTE_ADDR . "'")) != 0){
echo 7;
}
//If everything is fine
else{
//This array contains the characters what will be removed from the message and name, because else somebody could send redirection script or links
$search = array("<",">",">","<");
//Insert a new row in the chat table
mysql_query("insert into chat values ('" . time() . "', '" . str_replace($search,"",$name) . "', '" . @$REMOTE_ADDR . "', '" . str_replace($search,"",$message) . "')") or die(8);
}
?>

show-messages.php

<?php
//Connect to MySQL
mysql_connect('host','database','password');
//Select database
mysql_select_db('database') or die(2);
//Get the first 10 messages ordered by time
$result = mysql_query("select * from chat order by time desc limit 0,10");
$messages = array();
//Loop and get in an array all the rows until there are not more to get
while($row = mysql_fetch_array($result)){
//Put the messages in divs and then in an array
$messages[] = "<div class='message'><div class='messagehead'>" . $row[name] . " - " . date('g:i A M, d Y',$row[time]) . "</div><div class='messagecontent'>" . $row[message] . "</div></div>";
//The last posts date
$old = $row[time];
}
//Display the messages in an ascending order, so the newest message will be at the bottom
for($i=9;$i>=0;$i--){
echo $messages[$i];
}
//This is the more important line, this deletes each message older then the 10th message ordered by time is deleted, so the table will never have to store more than 10 messages.
mysql_query("delete from chat where time < " . $old);
?>

If we try to send multiple times the httpRequest to the same file IE will cache the first response and it will return the first result each time. To make IE to believe that we are sending the request to an another file we will use the url in the following way:

'file.php?' + Math.random
this will result something like this: file.php?0.12321321 - this is a new file for IE

Try it out and don`t hesitate to ask if something is not clear or if you find an error!

Creating a full PHP Login system (Very Detailed) part 3

noreply@blogger.com (Csabi) — Sun, 21 Nov 2010 10:50:25 PST

This is the third part of this tutorial (here is the first). In this part we will complete the registration process by recording the registration details in our MySQL table: users and by outputting different error messages for different errors that may occur (e.g.: username already exist, password too short... ).

In the previous part of this tutorial we have discussed about how we can get the value of a text input. Now we will need to store these values in our MySQL table. To insert the data into the table we will use the insert query:

<?php
mysql_connect('host', 'database', 'password') or die (mysql_error());
mysql_select_db('database') or die (mysql_error());
mysql_query("INSERT into users VALUES ('".$_POST['username']."', '".$_POST['password']."')") or die(mysql_error());
?>

When using this query make sure you put the data in the right order (name,password)!

The above code will not write out any success message, it will just simply insert the data into the users table. To see the result you should display the data from the mysql table.

Now try to register twice with the same username. Because the username need`s to be unique you will get an error like this:

Duplicate entry 'username' for key 'PRIMARY'

To avoid such errors we should begin with checking the username. We will check it using the select query and the mysql_num_rows function.

This is very simple. We will count the rows where the username is the one what we are searching for. If this number is 0 means that the username is not in the table so we can register it, if it`s 1 than there is already somebody with this username in our table.

In the same way (using if/else and else if statements) we will need to check for a list of possible errors:

Username too long
Username too short
Password too long
Password too short
Invalid characters in password
Invalid characters in username

This is a very simple, here is my code:

<?php
mysql_connect('host', 'database', 'password') or die (mysql_error());
mysql_select_db('database') or die (mysql_error());
if(mysql_num_rows(mysql_query("SELECT * from users WHERE username='" . $_POST['username'] . "'")) == 1){
echo "Sorry, this username is already taken!";
}
else if(strlen($_POST['username']) > 15){
echo "Username is too long!";
}
else if(strlen($_POST['username']) < 6){
echo "Username is too short!";
}
else if(strlen($_POST['password']) > 15){
echo "Password is too long!";
}
else if(strlen($_POST['password']) < 6){
echo "Password is too short!";
}
else if(preg_match('/[^0-9A-Za-z]/',$_POST['username'])){
echo "Invalid characters in username!";
}
else if(preg_match('/[^0-9A-Za-z]/',$_POST['password'])){
echo "Invalid characters in password!";
}
else{
mysql_query("INSERT into users VALUES ('".$_POST['username']."', '".$_POST['password']."')") or die(mysql_error());
}
?>

These days most of the registration forms have a retype password field, to avoid mistyped passwords. To add this feature to our registration form we will need to edit both the index.php and the register.php files. First we need to include the retype password text input and secondly to compare the two passwords.

index.php

<html>
<head>
</head>

<body>
<form action="register.php" method="post"><br/>
<b style="font-size:150%;">Register</b><br/>
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
Retype password: <input type="password" name="retype-password"/><br />
<input type="submit" value="Register" />
</form>
</body>
</html>

register.php

<?php
mysql_connect('host', 'database', 'password') or die (mysql_error());
mysql_select_db('database') or die (mysql_error());
if(mysql_num_rows(mysql_query("SELECT * from users WHERE username='" . $_POST['username'] . "'")) == 1){
echo "Sorry, this username is already taken!";
}
else if($_POST['password'] != $_POST['retype-password']){
echo "The two passwords don`t match!";
}
else if(strlen($_POST['username']) > 15){
echo "Username is too long!";
}
else if(strlen($_POST['username']) < 6){
echo "Username is too short!";
}
else if(strlen($_POST['password']) > 15){
echo "Password is too long!";
}
else if(strlen($_POST['password']) < 6){
echo "Password is too short!";
}
else if(preg_match('/[^0-9A-Za-z]/',$_POST['username'])){
echo "Invalid characters in username!";
}
else if(preg_match('/[^0-9A-Za-z]/',$_POST['password'])){
echo "Invalid characters in password!";
}
else{
mysql_query("INSERT into users VALUES ('".$_POST['username']."', '".$_POST['password']."')") or die(mysql_error());
}
?>

Here is a live demo of what we have until now:
And here is a list with the registered users (it`s not refreshing when you register!)
And this is enough for now. If something doesn`t work or you have a question just ask in a comment and I will try to answer to each comment.

Here you can find the 4th part of the tutorial

Creating a full PHP Login system (Very Detailed) part 2

noreply@blogger.com (Csabi) — Wed, 03 Nov 2010 07:27:29 PDT

This is the second part of this tutorial. In the first part we created a MySQL table to store the required user informations. In this part we will continue our Login/Register system by making registration possible.

First we will need to create an empty .php page, later this page will contain the log in and the register form. I will name it index.php because when you enter the URL of a website or a folder in the address bar the browser will open the first file with the name index. For sure you can name it anyway you want if you want to make registration and logging in possible only from a secondary page.
Here is my index.php file:
index.php

Now we need to create the registration form, this will contain a text inputs for the username, a password input for the password and a submit button. This form will be placed in the index.php page.
Here is an example of how it should look:

(The form is just an example, it will do nothing if you press the Register button.)

Later we will create a file called register.php. The above form will be submitted to this new file and this file (register.php) will read the value of the username and the password input, but to make reading it possible we will need to set the name attribute of the two field: the username input will be called username and the password input password. After this we just need to specify the page to submit the form to and the submission method. As I said before the form will be submitted to register.php using post as method.
After making the above modifications my index.php file look`s in the following way:
index.php

<html>
<head>
</head>

<body>
<form action="register.php" method="post"><br/>
<b style="font-size:150%;">Register</b><br/>
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
<input type="submit" value="Register" />
</form>
</body>
</html>

Now let`s start to write the register.php file. First we will make it to write out the username and the password to familiarize with PHP and how to read from a form. At this step my register.php look`s in the following way:

<?php
echo $_POST["username"] . "<br />" . $_POST["password"];
?>

The $_POST["username"] function reads the value of the input with the name specified in the parameter (in red), in our case "username". (This function works only with method="post" forms.)

Here is a live demo of what we have until now:
This is enough for now. If you have a question or something it`s not working just ASK ME!

Here is the third part

Creating a full PHP Login system (Very Detailed) part 1

noreply@blogger.com (Csabi) — Fri, 29 Oct 2010 05:45:15 PDT

In this tutorial we will make a full PHP Login script, what will allow users to register, login and to log out. This system can be easily used on any PHP website. In this tutorial we will deal more with the technical (PHP) part and less with styling it, as you can see it in the bellow example of how the login system will look and work:

When somebody registers the username and the password is stored in a MySQL table. When somebody tries to log in the script will verify if exists an user with the given username and password in the MySQL table. If the login was successful a session is created and a welcome message is displayed. From here the user can log out by destroying the session.

Creating the users MySQL table
As I said, the username and the password of each user will be stored in a MySQL table. I will call this table users. We need two columns: username and password.
I`we used the following file to create the table:
create-table.php

<?php
//Connect to MySQL
mysql_connect('host', 'database', 'password') or die (mysql_error());
//Select database
mysql_select_db('database') or die (mysql_error());
//Create the table
mysql_query("create table users(
username varchar(30) NOT NULL,
password varchar(30) NOT NULL,
PRIMARY KEY (username)
)") or die (mysql_error());
//Show "Complete" if everything works
echo "Complete.";
?>

Now let`s take apart this code and talk about the following code:

mysql_query("create table users(
username varchar(30) NOT NULL,
password varchar(30) NOT NULL,
PRIMARY KEY (username)
)") or die (mysql_error());

By using mysql_query we "ask" the MySQL database to do something. In this case we ask it to create a table with the name users: create table users.
After this we need to specify some details about the table. These details needs to be placed between brackets ("()").
First we will specify the two fields (columns):

username varchar(30) NOT NULL,
password varchar(30) NOT NULL

"username" and "password" is the name of the field.
"varchar" is the data type of the field - it will contain characters
"(30)" is the maximum length of the field
"NOT NULL" means the field can`t be leaved blank
And we specify the PRIMARY KEY:

PRIMARY KEY (username)

The primary key is an unique identifier, this means that there can`t be two users with the same username.

Now just run your create-table.php but don`t forget to change the host, database and the password to yours. If everything works you will see the message: "Complete.", otherwise an error message. In this case double check your code or ASK ME!

Here is the second part!

How to create a POLL system using PHP, MySQL and Ajax

noreply@blogger.com (Csabi) — Thu, 07 Oct 2010 06:19:34 PDT

In this tutorial I will show you how to create a basic POLL system using PHP, MySQL and Ajax. This poll will have some great features like: nobody can vote multiple times and the result of the poll is shown automatically after voting without refreshing the page.

Here is a live demo:

The poll system uses a MySQL table to store the votes. This table requires only two columns:

vote - the number of the selected option (the "Yes..." option has the number 2)
ip - the ip is used to prevent multiple votes

To create the table you can use the following file:
create-table.php

mysql_connect('host', 'database', 'password')
or die (mysql_error());
mysql_select_db('database')
or die (mysql_error());
mysql_query("create table poll(
vote tinyint(2) NOT NULL,
ip varchar(15) NOT NULL,
PRIMARY KEY (ip)
)") or die (mysql_error());
echo "Complete.";
?>

The poll itself is made from two files. One contains the forms and the javascript and ajax parts, and an another file what`s called by the first one.
The first file (poll.php) just sends the selected option number to the second file (vote.php) and displays the response. Here is my poll.php:

poll.php

<html>

<head>
<style>
.votes {
overflow:hidden;
background:#CCC;
height:20px;
width:100px;
margin:5px 0 0 23px;
float:left;
}
.percentage {
overflow:hidden;
background:#F00;
height:20px;
}
.option {
position:absolute;
width:100px;
height:20px;
}
.percentagetext {
overflow:hidden;
width:75px;
height:20px;
margin:5px 0 0 0;
float:left;
text-align:left;
}
</style>
</head>

<body>
<div id="poll" style="width:200px;overflow:hidden;text-align:center;">
Do you like this poll?<br/>
<div style="text-align:left;width:180px;margin:0 auto;">
<input type="radio" name="poll" id="poll1" checked>Yes, it`s great<br/>
<input type="radio" name="poll" id="poll2">Yes...<br/>
<input type="radio" name="poll" id="poll3">Not bad...<br/>
<input type="radio" name="poll" id="poll4">No!<br/>
</div>
<input type="button" value="Vote!" onClick="vote();"/>
</div>
<script type="text/javascript">
function vote(){
for(var i=1;i<=4;i++){
if(document.getElementById('poll' + i).checked){
//Check which one has been checked
var sendto = 'vote.php?vote=' + i;
}
}
// Call the vote.php file
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest;
xmlhttp.open("GET",sendto,false);
xmlhttp.send(null);
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET",sendto,false);
xmlhttp.send();
}
//Output the response
document.getElementById('poll').innerHTML = xmlhttp.responseText;
}
</script>

</body>
</html>

The CSS code is used to bring style to the response.

Now let`s create the vote.php file. This file will need to check if the user has already voted or not (by checking the ip) and it will need to calculate the percentage of votes and output the result in HTML format:

vote.php

<?php
//Connect to MySQL
mysql_connect('host','database','password');
//Select database
mysql_select_db('borcsa9_database');
//Check if the current user has already voted or not
//@$REMOTE_ADDR is used to get the ip of the user
if(mysql_num_rows(mysql_query("select * from poll where ip = '" . @$REMOTE_ADDR . "'")) != 0){
echo 'You can vote only once!';
}
else{
//If the user had not voted then insert the new vote in the poll table
mysql_query("insert into poll values ('" . $vote . "', '" . @$REMOTE_ADDR . "')") or die (mysql_error());
}
$mostvotes = 0;
for($i=1;$i<=4;$i++){
//Create an array of votes for each option
$votes[$i] = mysql_num_rows(mysql_query("select * from poll where vote = " . $i));
if($votes[$i] > $mostvotes){
//Select the option with the higher number of votes
$mostvotes = $votes[$i];
}
//Each vote
$allvotes += $votes[$i];
}
$option[1] = 'Yes, it`s great';
$option[2] = 'Yes...';
$option[3] = 'Not bad...';
$option[4] = 'No!';
//Generate the result in a HTML form by calculating the percentage of each option and showing the number of votes
for($i=1;$i<=4;$i++){
echo "<div class='votes'><div class='option'>" . $option[$i] . "</div><div class='percentage' style='width:" . floor($votes[$i] / $allvotes * 100) . "px'></div></div><div class='percentagetext'> - " . floor($votes[$i] / $allvotes * 100) . "% (" . $votes[$i] . ")</div>";
}
?>

And the our poll system is ready to use. This is a very basic poll system, but this can be easily modified by adding more style or more functions to it.
If you have any question, don`t hesitate, ask!

Simple Chat script in PHP, MySQL and Ajax

noreply@blogger.com (Csabi) — Fri, 05 Nov 2010 04:58:55 PDT

In this tutorial I will show you how to create a simple but very effective Chat script, and I said effective because unlike the most of the chat scripts this one deletes automatically the old messages from the database. Here is a live demo:

The chat is refreshed automatically each 30 seconds.

Let`s start: First we need to create a MySQL table with 4 fields:

time - the time when the message was posted (UNIX)
name - the name of the author of the message
ip - the ip of the author of the message
message - the message text

To create the table (I will call it chat) I`we used the following file:
create-table.php

<html>
<head>
<style>
.message {
overflow:hidden;
width:498px;
margin-bottom:5px;
border:1px solid #999;
}
.messagehead {
overflow:hidden;
background:#FFC;
width:500px;
}
.messagecontent {
overflow:hidden;
width:496px;
}
</style>
</head>

<body>
<div id="chat" style="width:500px;margin:0 auto;overflow:hidden;">
//This div will contain the messages
<div id="messages"></div>
//This div will contain an eventual error message
<div id="error" style="width:500px;text-align:center;color:red;"></div>
//This div contains the forms and the send button
<div id="write" style="text-align:center;"><textarea id="message" cols="50" rows="5"></textarea><br/>Name:<input type="text" id="name"/><input type="button" value="Send" onClick="send();"/></div>
</div>

<script type="text/javascript">
//This function will display the messages
function showmessages(){
//Send an XMLHttpRequest to the 'show-message.php' file
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","show-messages.php",false);
xmlhttp.send(null);
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","showmessages.php",false);
xmlhttp.send();
}
//Replace the content of the messages with the response from the 'show-messages.php' file
document.getElementById('messages').innerHTML = xmlhttp.responseText;
//Repeat the function each 30 seconds
setTimeout('showmessages()',30000);
}
//Start the showmessages() function
showmessages();
//This function will submit the message
function send(){
//Send an XMLHttpRequest to the 'send.php' file with all the required informations
var sendto = 'send.php?message=' + document.getElementById('message').value + '&name=' + document.getElementById('name').value;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",sendto,false);
xmlhttp.send(null);
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET",sendto,false);
xmlhttp.send();
}
var error = '';
//If an error occurs the 'send.php' file send`s the number of the error and based on that number a message is displayed
switch(parseInt(xmlhttp.responseText)){
case 1:
error = 'The database is down!';
break;
case 2:
error = 'The database is down!';
break;
case 3:
error = 'Don`t forget the message!';
break;
case 4:
error = 'The message is too long!';
break;
case 5:
error = 'Don`t forget the name!';
break;
case 6:
error = 'The name is too long!';
break;
case 7:
error = 'This name is already used by somebody else!';
break;
case 8:
error = 'The database is down!';
}
if(error == ''){
document.getElementById('error').innerHTML = '';
showmessages();
}
else{
document.getElementById('error').innerHTML = error;
}
}
</script>

</body>
</html>

send.php

show-messages.php

And this is it. A very effect chat system what uses only 10 rows of a MySQL table. This chat system can be easily upgraded with admin options or IP bans, smileys and other stuff like this. If you have any question related to this chat system just ASK!

UPDATE: a new version of this script (that works in IE) is ready: Cross-browser chat