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 ;)

My first AdSense payment arrived today!

noreply@blogger.com (Csabi) — Fri, 10 Dec 2010 12:55:27 PST

I`m very happy, today my first AdSense payment has arrived. When I`we opened this website I wasn`t even sure if AdSense will send me the money if I reach the threshold. In the first 1 - 2 months it seems that I will never reach the 70€, but since that time my incomings are slowly increasing. I`we worked hard for this money but it worth it!
I`we made an image about the check, bellow the check is my adsense pin:

I know that 70€ is a small amount but I`m sure that I will get more checks like this or even with higher amount of money.

Most of my traffic comes from tutorial sites and only a small percentage from google so I want to search engine optimize this website, this would bring more visitors, more visitors means more money and a larger community!

Oh and Thanks for all of my visitors, you all have contributed to this!

My first 2D game in C++ using Direct3D

noreply@blogger.com (Csabi) — Fri, 10 Dec 2010 12:54:38 PST

This is my first 2D game. It`s written in C++ using DirectX9 (Direct3D and DirectInput). This is a very simple Snake game. At the beginning the snake is only 1 square long and when it "eats" the target it`s length is encreased by 1 square. The snake can have a maximum of 20 squares long (each square is 20px), after it reaches this maximum length the snake is moving faster and faster. If the head of the snake hit`s it`s tail the game is over:

And here is the source-code:

#include <Windows.h>
#include <WindowsX.h>
#include <d3d9.h>
#include <d3dx9.h>
#include <dinput.h>
#include <ctime>

#pragma comment(lib,"d3d9.lib");
#pragma comment(lib,"d3dx9.lib");
#pragma comment(lib,"dinput8.lib");
#pragma comment(lib,"dxguid.lib");

LPDIRECT3D9 d3d;
LPDIRECT3DDEVICE9 d3ddev;
LPDIRECT3DVERTEXBUFFER9 buffer=NULL;
LPDIRECTINPUT8 dinput;
LPDIRECTINPUTDEVICE8 keyboard;
BYTE buttons[256];
ID3DXFont *m_font;

LRESULT CALLBACK WindowProc(HWND hWnd,
UINT message,
WPARAM wParam,
LPARAM lParam);
void initialized3d(HWND hWnd);
void renderframe(void);
void cleand3d(void);
void graphics(void);
void initializedinput(HINSTANCE hInstance,
HWND hWnd);
void getkey(void);
void cleandinput(void);

struct VERTEX {
FLOAT X, Y, Z, RHW;
DWORD COLOR;
};

#define FVF (D3DFVF_XYZRHW | D3DFVF_DIFFUSE)

int WINAPI WinMain(HINSTANCE hInstance,
HINSTANCE hPrevInstance,
LPSTR lpCmdLine,
int nCmdShow){
WNDCLASSEX windowclass;
ZeroMemory(&windowclass,sizeof(WNDCLASSEX));

windowclass.cbSize = sizeof(WNDCLASSEX);
windowclass.style = CS_HREDRAW | CS_VREDRAW;
windowclass.lpfnWndProc = WindowProc;
windowclass.hInstance = hInstance;
windowclass.hCursor = LoadCursor(NULL,IDC_ARROW);
windowclass.hbrBackground = (HBRUSH)COLOR_WINDOW;
windowclass.lpszClassName = L"WindowClass";

RegisterClassEx(&windowclass);
HWND hWnd = CreateWindowEx(NULL,
L"WindowClass",
L"Snake - www.codingmix.com",
WS_OVERLAPPEDWINDOW,
600,
200,
636,
478,
NULL,
NULL,
hInstance,
NULL);
ShowWindow(hWnd,
nCmdShow);
initialized3d(hWnd);
initializedinput(hInstance,
hWnd);
MSG message;
while(TRUE){
while(PeekMessage(&message,
NULL,
0,
0,
PM_REMOVE)){
TranslateMessage(&message);
DispatchMessage(&message);
}
if(message.message == WM_QUIT){
break;
}
getkey();
graphics();
renderframe();
}
cleand3d();
cleandinput();
}

void initialized3d(HWND hWnd){
d3d = Direct3DCreate9(D3D_SDK_VERSION);
D3DPRESENT_PARAMETERS d3dpp;
ZeroMemory(&d3dpp,sizeof(d3dpp));

d3dpp.Windowed = TRUE;
d3dpp.SwapEffect = D3DSWAPEFFECT_DISCARD;
d3dpp.hDeviceWindow = hWnd;

d3d->CreateDevice(D3DADAPTER_DEFAULT,
D3DDEVTYPE_HAL,
hWnd,
D3DCREATE_SOFTWARE_VERTEXPROCESSING,
&d3dpp,
&d3ddev);
D3DXCreateFont(d3ddev,
50,
0,
FW_BOLD,
0,
FALSE,
DEFAULT_CHARSET,
OUT_DEFAULT_PRECIS,
DEFAULT_QUALITY,
DEFAULT_PITCH | FF_DONTCARE,
TEXT("Arial"),
&m_font );
}

void initializedinput(HINSTANCE hInstance,
HWND hWnd){
DirectInput8Create(hInstance,
DIRECTINPUT_VERSION,
IID_IDirectInput8,
(void**)&dinput,
NULL);
dinput->CreateDevice(GUID_SysKeyboard,
&keyboard,
NULL);
keyboard->SetDataFormat(&c_dfDIKeyboard);
keyboard->SetCooperativeLevel(hWnd,
DISCL_NONEXCLUSIVE | DISCL_FOREGROUND);
}

int verticesnr = 132;
int trianglesnr = 44;
bool left = false;
bool right = false;
bool up = true;
bool down = false;
float posy = 220.0f;
float posx = 280.0f;
bool target = false;
float random1;
float random2;
float newpos[][2] = {
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
{-20.0f, -20.0f},
};
int squares = 0;
bool gameover = false;
int col1 = 0;
int col2 = 255;
int currentframe = 0;
int speed = 30;
void graphics(void){
static int framenr = 0;
framenr++;
if(framenr % speed == 0 && !gameover){
if(squares > 0){
for(int i=squares-1;i>0;i--){
newpos[i][0] = newpos[i-1][0];
newpos[i][1] = newpos[i-1][1];
}
newpos[0][0] = posx;
newpos[0][1] = posy;
}
if(up){
posy -= 20.0f;
}
else if(down){
posy += 20.0f;
}
else if(left){
posx -= 20.0f;
}
else{
posx += 20.0f;
}
for(int i=0;i<=squares;i++){
for(int y=0;y<=squares;y++){
if(newpos[i][0] == newpos[y][0] && newpos[i][1] == newpos[y][1] && i != y){
gameover = true;
}
}
if(posx == newpos[i][0] && posy == newpos[i][1]){
gameover = true;
}
}
if(posx == random1 && posy == random2){
target = false;
if(squares > 19 && squares > 0){
speed--;
}
else{
if(squares == 0){
newpos[0][0] = posx;
newpos[0][1] = posy;
}
else{
newpos[squares][0] = newpos[squares-1][0];
newpos[squares][1] = newpos[squares-1][1];
}
squares++;
}
}
for(int i=0;i<squares;i++){
if(newpos[i][0] > 600){
newpos[i][0]-=620;
}
else if(newpos[i][0] < 0){
newpos[i][0]+=620;
}
else if(newpos[i][1] > 420){
newpos[i][1]-=440;
}
else if(newpos[i][1] < 0){
newpos[i][1]+=440;
}
}
if(posx > 600){
posx-=620;
}
else if(posx < 0){
posx+=620;
}
else if(posy > 420){
posy-=440;
}
else if(posy < 0){
posy+=440;
}
currentframe = 0;
}
else if(framenr % 20 == 0 && gameover){
if(col1 == 255){
col1 = 0;
col2 = 255;
}
else{
col1 = 255;
col2 = 0;
}
}
if(buttons[DIK_LEFT] & 0x80 && right == false && currentframe == 0){
left = true;
up = false;
down = false;
currentframe = 1;
}
else if(buttons[DIK_RIGHT] & 0x80 && left == false && currentframe == 0){
right = true;
up = false;
down = false;
currentframe = 1;
}
else if(buttons[DIK_UP] & 0x80 && down == false && currentframe == 0){
up = true;
left = false;
right = false;
currentframe = 1;
}
else if(buttons[DIK_DOWN] & 0x80 && up == false && currentframe == 0){
down = true;
left = false;
right = false;
currentframe = 1;
}
if(!target){
srand((unsigned)time(0));
random1 = (rand() % 30) * 20.0f;
random2 = (rand() % 22) * 20.0f;
target = true;
}
VERTEX vertices[] = {
//Target
{random1 + 10.0f, random2, 1.0f, 1.0f, D3DCOLOR_XRGB(255, 0, 0),},
{random1 + 20.0f, random2 + 10.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(255, 0, 0),},
{random1, random2 + 10.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(255, 0, 0),},
{random1, random2 + 10.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(255, 0, 0),},
{random1 + 20.0f, random2 + 10.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(255, 0, 0),},
{random1 + 10.0f, random2 + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(255, 0, 0),},
//Head
{posx , posy, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{posx + 20.0f, posy, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{posx, posy + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{posx, posy + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{posx + 20.0f, posy, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{posx + 20.0f, posy + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 1
{newpos[0][0] , newpos[0][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[0][0] + 20.0f, newpos[0][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[0][0], newpos[0][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[0][0], newpos[0][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[0][0] + 20.0f, newpos[0][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[0][0] + 20.0f, newpos[0][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 2
{newpos[1][0] , newpos[1][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[1][0] + 20.0f, newpos[1][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[1][0], newpos[1][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[1][0], newpos[1][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[1][0] + 20.0f, newpos[1][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[1][0] + 20.0f, newpos[1][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 3
{newpos[2][0] , newpos[2][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[2][0] + 20.0f, newpos[2][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[2][0], newpos[2][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[2][0], newpos[2][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[2][0] + 20.0f, newpos[2][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[2][0] + 20.0f, newpos[2][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 4
{newpos[3][0] , newpos[3][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[3][0] + 20.0f, newpos[3][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[3][0], newpos[3][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[3][0], newpos[3][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[3][0] + 20.0f, newpos[3][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[3][0] + 20.0f, newpos[3][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 5
{newpos[4][0] , newpos[4][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[4][0] + 20.0f, newpos[4][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[4][0], newpos[4][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[4][0], newpos[4][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[4][0] + 20.0f, newpos[4][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[4][0] + 20.0f, newpos[4][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 6
{newpos[5][0] , newpos[5][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[5][0] + 20.0f, newpos[5][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[5][0], newpos[5][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[5][0], newpos[5][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[5][0] + 20.0f, newpos[5][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[5][0] + 20.0f, newpos[5][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 7
{newpos[6][0] , newpos[6][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[6][0] + 20.0f, newpos[6][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[6][0], newpos[6][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[6][0], newpos[6][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[6][0] + 20.0f, newpos[6][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[6][0] + 20.0f, newpos[6][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 8
{newpos[7][0] , newpos[7][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[7][0] + 20.0f, newpos[7][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[7][0], newpos[7][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[7][0], newpos[7][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[7][0] + 20.0f, newpos[7][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[7][0] + 20.0f, newpos[7][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 9
{newpos[8][0] , newpos[8][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[8][0] + 20.0f, newpos[8][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[8][0], newpos[8][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[8][0], newpos[8][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[8][0] + 20.0f, newpos[8][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[8][0] + 20.0f, newpos[8][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 10
{newpos[9][0] , newpos[9][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[9][0] + 20.0f, newpos[9][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[9][0], newpos[9][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[9][0], newpos[9][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[9][0] + 20.0f, newpos[9][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[9][0] + 20.0f, newpos[9][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 11
{newpos[10][0] , newpos[10][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[10][0] + 20.0f, newpos[10][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[10][0], newpos[10][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[10][0], newpos[10][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[10][0] + 20.0f, newpos[10][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[10][0] + 20.0f, newpos[10][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 12
{newpos[11][0] , newpos[11][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[11][0] + 20.0f, newpos[11][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[11][0], newpos[11][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[11][0], newpos[11][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[11][0] + 20.0f, newpos[11][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[11][0] + 20.0f, newpos[11][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 13
{newpos[12][0] , newpos[12][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[12][0] + 20.0f, newpos[12][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[12][0], newpos[12][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[12][0], newpos[12][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[12][0] + 20.0f, newpos[12][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[12][0] + 20.0f, newpos[12][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 14
{newpos[13][0] , newpos[13][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[13][0] + 20.0f, newpos[13][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[13][0], newpos[13][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[13][0], newpos[13][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[13][0] + 20.0f, newpos[13][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[13][0] + 20.0f, newpos[13][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 15
{newpos[14][0] , newpos[14][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[14][0] + 20.0f, newpos[14][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[14][0], newpos[14][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[14][0], newpos[14][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[14][0] + 20.0f, newpos[14][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[14][0] + 20.0f, newpos[14][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 16
{newpos[15][0] , newpos[15][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[15][0] + 20.0f, newpos[15][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[15][0], newpos[15][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[15][0], newpos[15][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[15][0] + 20.0f, newpos[15][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[15][0] + 20.0f, newpos[15][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 17
{newpos[16][0] , newpos[16][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[16][0] + 20.0f, newpos[16][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[16][0], newpos[16][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[16][0], newpos[16][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[16][0] + 20.0f, newpos[16][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[16][0] + 20.0f, newpos[16][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 18
{newpos[17][0] , newpos[17][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[17][0] + 20.0f, newpos[17][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[17][0], newpos[17][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[17][0], newpos[17][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[17][0] + 20.0f, newpos[17][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[17][0] + 20.0f, newpos[17][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 19
{newpos[18][0] , newpos[18][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[18][0] + 20.0f, newpos[18][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[18][0], newpos[18][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[18][0], newpos[18][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[18][0] + 20.0f, newpos[18][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[18][0] + 20.0f, newpos[18][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
//Square 20
{newpos[19][0] , newpos[19][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[19][0] + 20.0f, newpos[19][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[19][0], newpos[19][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[19][0], newpos[19][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[19][0] + 20.0f, newpos[19][1], 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
{newpos[19][0] + 20.0f, newpos[19][1] + 20.0f, 1.0f, 1.0f, D3DCOLOR_XRGB(col1, col2, 0),},
};
d3ddev->CreateVertexBuffer(verticesnr*sizeof(VERTEX),
0,
FVF,
D3DPOOL_MANAGED,
&buffer,
NULL);
VOID* pVoid;
buffer->Lock(0,
0,
(void**)&pVoid,
0);
memcpy(pVoid,
vertices,
sizeof(vertices));
buffer->Unlock();
}

void getkey(void){
keyboard->Acquire();
keyboard->GetDeviceState(256,
(LPVOID)buttons);
}

void renderframe(void){
d3ddev->Clear(0,
NULL,
D3DCLEAR_TARGET,
D3DCOLOR_XRGB(255,222,173),
1.0f,
0);
d3ddev->BeginScene();

D3DCOLOR fontColor = D3DCOLOR_ARGB(255,255,0,0);
RECT rct;
rct.left=200;
rct.right=480;
rct.top=150;
rct.bottom=rct.top+50;
if(gameover){
m_font->DrawText(NULL,
(LPCWSTR)L"Game over",
-1,
&rct,
0,
fontColor);
}
d3ddev->SetFVF(FVF);
d3ddev->SetStreamSource(0,
buffer,
0,
sizeof(VERTEX));
d3ddev->DrawPrimitive(D3DPT_TRIANGLELIST,
0,
trianglesnr);
d3ddev->EndScene();
d3ddev->Present(NULL,
NULL,
NULL,
NULL);
}

void cleand3d(void){
buffer->Release();
d3ddev->Release();
d3d->Release();
m_font->Release();
}

void cleandinput(void){
keyboard->Unacquire();
dinput->Release();
}

LRESULT CALLBACK WindowProc(HWND hWnd,
UINT message,
WPARAM wParam,
LPARAM lParam){
if(message == WM_DESTROY){
PostQuitMessage(0);
return 0;
}
return DefWindowProc(hWnd,
message,
wParam,
lParam);
}

You can ask anything about how it works but I`m just a beginner in DirectX programming...

Addition with extremely huge numbers in C++

noreply@blogger.com (Csabi) — Fri, 03 Dec 2010 11:40:56 PST

In C++ you the data type with the largest range is the long long, with a maximum limit of ~19 digits. This means that you can`t make additions with numbers that result a larger number. I know this is a crazy thing, why would you need to calculate with such huge numbers ? I think never..., but the method is very useful and ingenious.

Here is my code:

#include <iostream>
#include <string>

using namespace std;

int main(){
string nr;
bool validnr = false;
while(!validnr){
cout << "Enter the first number: " << endl;
cin >> nr;
validnr = true;
//Check the number for invalid characters
for(int i=0;i<nr.length();i++){
if((int) nr[i] < 48 || (int) nr[i] > 57){
//48 is the ASCII code of number 0
//57 is the ASCII code of number 9
validnr = false;
}
}
if(!validnr){
cout << endl << "Please enter a valid number!" << endl;
}
}
string nr2;
validnr = false;
//Do the same for the second number
while(!validnr){
cout << "Enter the second number: " << endl;
cin >> nr2;
validnr = true;
for(int i=0;i<nr2.length();i++){
if((int) nr2[i] < 48 || (int) nr2[i] > 57){
validnr = false;
}
}
if(!validnr){
cout << endl << "Please enter a valid number!" << endl;
}
}
int digitsnr;
//Make the two digits to have the same size
//by adding 0`s in front of it
//This is important because we can`t add a digit with nothing
if(nr.length() > nr2.length()){
digitsnr = nr.length() - 1;
while(nr.length() != nr2.length()){
nr2 = "0" + nr2;
}
}
else{
digitsnr = nr2.length() - 1;
while(nr.length() != nr2.length()){
nr = "0" + nr;
}
}
string result;
char digit;
int remainder = 0; //If the result of two digits is more than 10
//we need to add 1 to the following digit(e.g: 5 + 7 = 12, 12 is made from 2 digits
for(int i=digitsnr;i>=0;i--){ //Loop through each digit
if(remainder + nr[i] + nr2[i] - 96 > 9){
digit = remainder + nr[i] + nr2[i] - 48 - 10; //We are working with ASCII codes
result = digit + result;
remainder = 1; //We have to increase the following digit
}
else{
digit = remainder + nr[i] + nr2[i] - 48;
remainder = 0;
result = digit + result;
}
}
if(remainder){
result = "1" + result;
//Add the last remaining if required
}
cout << endl << "Result = " << result << endl;
system("pause");
}

The numbers are stored in strings, each character of the strings is checked to avoid wrong characters. Each character is checked using it`s ASCII code, (for example 0 has the 47 code number, 1 has the 49 code). After the numbers are validated the two numbers are added digit by digit starting from the last number:

123 + 56 =
9
79
179

Is that simple, but if something it`s not clear please don`t hesitate, ASK ME!

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.

PHP sessions

noreply@blogger.com (Csabi) — Sun, 05 Dec 2010 01:45:00 PST

Sessions can transfer data between two or more pages. It`s somehow like a variable that keep`s it`s value even if you call it from an another file. Let`s say that we have a website and in the index.php file we are asking for the name of the visitor and we store it in the $name variable (e.g.:$name = 'Tom').

If the visitor navigates to an another page the value of $name will be lost, so we would need to ask for the name on each page so in this case is way better to use sessions.

In order to use a session first we need to "start" it:

<?php
session_start();
?>

NOTE: The session_start(); function must be the at the very beginning of your code, even before the <html> tag.

A session variable look`s and works like an element of an associative array:

$_SESSION['name'] = 'Tom';
echo $_SESSION['name'];

And because sessions are keeping their value even if you go to an another page:
page1.php

<?php
session_start();
$_SESSION['name'] = 'Tom';
?>

page2.php

<?php
session_start();
echo $_SESSION['name'] ;
?>

Will output

Tom

Let`s say that we have a page that is displayed only to members. If somebody is logged in than it`s username is stored in a session. In order to show the content of the page to the visitor we need to check if the username session exists or not. This can be easily done using this function:

isset($_SESSION['username']); //Returns True if exists and False if not

So if we use the isset function our code will look like this:

<?php
session_start();
if(isset($_SESSION['username'])){
echo 'Welcome ' . $_SESSION['username'];
}
else{
echo 'You are not logged in!';
}
?>

When the user leaves your website or closes the browser the sessions are automatically deleted, but if you want to delete a session yourself use the following code:

unset($_SESSION['username']);

This is useful when you want to delete only a single session.

If you want to delete all the sessions use the following code:

session_destroy();

NOTE: After this function you can`t use more sessions on the page.

Example of using the session_destroy(); function:
log-out.php

session_start();
session_destroy();

By destroying the sessions the user is logged out.

This is enough about sessions, but if you any question related to this session please ask!

How to change title bar message using Javascript

noreply@blogger.com (Csabi) — Fri, 12 Nov 2010 06:31:14 PST

For those who doesn`t know what is the title bar: The title bar is the top part of the browser window where the website`s (page) title is shown: In this lesson I will show you how the title bar message (text) can be changed using only Javascript.

The title bar message can be changed easily using the following property:

document.title

And the easiest way to use it is:

But there are many other, funny ways to change the title bar message:

Changing the title bar message

This is done by the following script:

<input type="text" id="newtitle" value="New title bar message..."/>
<input type="button" value="Change title" onclick="changetitle(document.getElementById('newtitle').value);"/>

<script type="text/javascript">
function changetitle(changeto){
document.title = changeto;
}
</script>

Dynamic title bar message

Title 1:
Title 2:
Title 3:
Title 4:
Title 5:

Or loop from 0% to 100%

Here is the script for the first example (loop through the 5 titles):

<input type="text" id="newtitle1" value="--"/><br />
Title 2:<input type="text" id="newtitle2" value="----"/><br />
Title 3:<input type="text" id="newtitle3" value="------"/><br />
Title 4:<input type="text" id="newtitle4" value="--------"/><br />
Title 5:<input type="text" id="newtitle5" value="----------"/><br />
<input type="button" value="Start" onclick="clearTimeout(timeout);starttitle();"/>
<input type="button" value="Stop" onclick="clearTimeout(timeout);"/>

<script type="text/javascript">
var i=1;
var timeout;
function starttitle(){
document.title = document.getElementById('newtitle' + i).value;
i++;
if(i > 5){
i=1; //When the 5th title is used go back to the first one
}
timeout = setTimeout(starttitle,1000); //1000 is the number of milliseconds between each change
}
</script>

And here is the script for the second example (loop from 1% to 100%):

<input type="button" value="Start" onclick="clearTimeout(timeout);starttitle();"/>
<input type="button" value="Stop" onclick="clearTimeout(timeout);"/>

<script type="text/javascript">
var number=0;
var timeout;
function starttitle(){
document.title = number + "%";
number++;
timeout = setTimeout(starttitle,500);
if(number > 100){
clearTimeout(timeout); //When reach 100% stop and set number back to 0
number = 0; //Without this line the script will be able to run only once
}
}
</script>

These where just some examples, but using this property you can change the title bar in almost any way. If you have any question or somethings is not working then let me know it in a comment!

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!

Display data from MySQL table using PHP

noreply@blogger.com (Csabi) — Fri, 15 Oct 2010 09:03:16 PDT

In this lesson I will teach you how to display data from a MySQL table using PHP. In order to be able to display data from a MySQL table, first we will need a MySQL table to display data from.

For this tutorial I will use the example MySQL table:

Name	Age	Country
Joe	45	India
Emily	19	USA
Emma	23	Romania
Bob	34	Hungary

To read out the data from the table we will nned to use two functions:
mysql_query and mysql_fetch_array

mysql_query
The mysql_query function requests information from the database. This function returns false on error, else it returns a resource. A resource is special data type, it holds a reference to an external resource. Additional functions are required to extract data from it.

mysql_fetch_array
The mysql_fetch_array function returns an the first row of data from the resource returned from the mysql_query function and moves the internal data pointer ahead to the beginning of the following row. The internal data pointer shows the place from where you are reading. If you run this function two times, first it will return an array of the data from the first row of the table, secondly it will return an array of the data from the second row, because the function moves the internal data pointer to the beginning of the following row. If there are no more rows than it returns false.

Now let`s put all together

<?php
//Connect to MySQL
mysql_connect('host', 'database', 'password') or die (mysql_error());
//Select database
mysql_select_db('database') or die (mysql_error());
//Use the mysql_query function to extract everything from the example table
$result = mysql_query("SELECT * from example");
//Use the mysql_fetch_array function on the resource returned by the mysql_query
$row = mysql_fetch_array($result);
//Display the results
echo $row['name'] . " - " . $row['age'] . " - " . $row['country'];
?>

The above code will display:

Joe - 45 - India

Only the first line is displayed because we used only one the mysql_fetch_array function. To display the data from each row we could write the last part of the code multiple times, once for each row or we could simply use a loop. Because mysql_fetch_array returns null when there are no more rows to fetch we can use it as the condition of a while loop in the following way:

<?php
mysql_connect('host', 'database', 'password') or die (mysql_error());
mysql_select_db('database') or die (mysql_error());
$result = mysql_query("SELECT * from example");
//While there are rows to display
while($row = mysql_fetch_array($result)){
//Display the results from the current row and a line break
echo $row['name'] . " - " . $row['age'] . " - " . $row[country] . "<br />";
}
?>

And this will display:

Joe - 45 - India
Emily - 19 - USA
Emma - 23 - Romania
Bob - 34 - Hungary

Now we just need to put the displayed result in a HTML table. I assume that everyone of you knows how a HTML table looks like.

<?php
mysql_connect('host', 'database', 'password') or die (mysql_error());
mysql_select_db('database') or die (mysql_error());
$result = mysql_query("SELECT * from example");
//Table starting tag and header cells
echo "<table border='1'><tr><th>Name</th><th>Age</th><th>Country</th></tr>";
while($row = mysql_fetch_array($result)){
//Display the results in different cells
echo "<tr><td>" . $row['name'] . "</td><td>" . $row['age'] . "</td><td>" . $row['country'] . "</td></tr>";
}
//Table closing tag
echo "</table>";
?>

And now a nice table full of data will be displayed. These functions and methods can be used in many ways with minor modifications.

Thanks for reading my blog! If you have any question or problem don`t hesitate, ASK ME!

Wow, My FIRST Yahoo Widget got 1000+ downloads

noreply@blogger.com (Csabi) — Mon, 25 Oct 2010 06:59:44 PDT

Nearly 2 months ago I`we downloaded the Yahoo! Widgets application and I wondered how the widgets are made. After googling it I`we found that the widgets are written in Javascript and XML, and I`we decided to create a widgets.

It took me some time to think out a good widget idea, something simple but useful what people may want to download and use, something what looks good without using a very complicated images (because I`m not a Photoshop expert). I got more ideas but finally I`we decided to create a simple Calculator (mathematical) widget.

Writing the code of the widget wasn`t big deal. It took me around 2-3 hours if I remember right. After writing it I`we submitted it to Yahoo! Widgets and it was published on august 25. Since than it was downloaded more than 1000 times. Bellow is an image of the widget and a link to it (on yahoo widgets):And the widget is here: Calculator
Please review it and say what do you think about it.

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!

A very simple C++ Tic Tac Toe game (v2)

noreply@blogger.com (Csabi) — Fri, 01 Oct 2010 13:45:13 PDT

This is my second C++ Tic Tac Toe game. This one has a shorter source-code because instead of using a variable for each square I`we used a two-dimensional array. With arrays is more simple to check if a square is available or to check for an eventual winner.

The rest of the game is almost the same as the first version, the only difference is that I`we used chars instead of ints to show the state of the squares.

Required knowledge: variables, input/output, if/else/else if statements, loop, arrays.

Here is my code:

#include <iostream>

using namespace std;

int main(){
//This array of chars represents the game board, and it holds the content of each square (x,o or empty)
char square[3][3] = {{' ',' ',' '},{' ',' ',' '},{' ',' ',' '}};
//The current player (x or o)
char turn = 'X';
//These variables will hold the number of the row and column selected by the players.
int row;
int column;
//The winner (x, o, t(if it`s a tie) or empty)
char winner = ' ';
//Required variables to check if a move is valid or not
bool validmove;
bool validrow;
bool validcolumn;
//The game loop`s again and again until the game is over
while(winner == ' '){
//Draw the board
cout << " 1 2 3" << endl << " +---+---+---+" << endl;
for(int i=1;i<4;i++){
cout << " " << i << " | " << square[i-1][0] << " | " << square[i-1][1] << " | " << square[i-1][2] << " |" << endl << " +---+---+---+" << endl;
}
//Check for an eventual winner of for a tie
for(int i=0;i<3;i++){
if(square[i][0] == square[i][1] && square[i][1] == square[i][2] && square[i][0] != ' '){
winner = square[i][0];
}
}
for(int i=0;i<3;i++){
if(square[0][i] == square[1][i] && square[1][i] == square[2][i] && square[0][i] != ' '){
winner = square[0][i];
}
}
if(square[0][0] == square[1][1] && square[1][1] == square[2][2] && square[0][0] != ' '){
winner = square[0][0];
}
if(square[0][2] == square[1][1] && square[1][1] == square[2][0] && square[0][2] != ' '){
winner = square[0][2];
}
if(square[0][0] == square[0][1] && square[0][1] == square[0][2] && square[0][2] == square[1][0] && square[1][0] == square[1][1] && square[1][1] == square[1][2] && square[1][2] == square[2][0] && square[2][0] == square[2][1] && square[2][1] == square[2][2] && square[0][0] != ' '){
winner = 't';
}
//If somebody won
if(winner == 'X' || winner == 'O'){
//Display congratulations message
cout << "Congratulations! Player ";
if(winner == 'X'){
cout << 1;
}
else{
cout << 2;
}
cout << " is the winner!" << endl;
break;
}
else if(winner == 't'){
//Display a message if it`s tie
cout << "Tie!" << endl;
break;
}
//If the game is not yet over show who`s the next player to move
cout << "Player ";
if(turn == 'X'){
cout << 1;
}
else{
cout << 2;
}
cout << "'s turn:" << endl;
//Loop until the player selects a valid square
validmove = false;
while(!validmove){
validrow = false;
//Loop until the player selects a valid row
while(!validrow){
cout << "Row: ";
cin >> row;
if(row == 1 || row == 2 || row == 3){
validrow = true;
}
else{
cout << endl << "Invalid row!" << endl;
}
}
validcolumn = false;
//Loop until the player selects a valid column
while(!validcolumn){
cout << "Column: ";
cin >> column;
if(column == 1 || column == 2 || column == 3){
validcolumn = true;
}
else{
cout << endl << "Invalid column!" << endl;
}
}
//Change the turn to the next player
if(square[row-1][column-1] == ' '){
square[row-1][column-1] = turn;
validmove = true;
if(turn == 'X'){
turn = 'O';
}
else{
turn = 'X';
}
}
//If the selected square is occupied display a message and loop again
else{
cout << "The selected square is occupied!" << endl << "Select again:" << endl;
}
}
}
system("pause");
}

If something it`s not clear or you have any question just ask!
If this is too advanced for you feel free to read my lessons or view the previous, simpler version of the game here: The simplest C++ Tic Tac Toe game ever

C++ Console Calculator v3

noreply@blogger.com (Csabi) — Sat, 16 Oct 2010 07:13:34 PDT

This is a tutorial about creating the third version of my C++ Calculator (console application). Here are the first and second versions: Calculator v1 and Calculator v2. The previous versions of this applications are closed after displaying a warning message when an invalid operation is selected. In this version this was improved: the programs shows an error message and it asks again and again until a valid operation is selected. This version is also a bit shorter because in some places I`we used arrays and loops.

Required knowledge: variables, input/output, if/else/else if statements, switch/case statements, loop, arrays.
Here is my code:

#include <iostream>

using namespace std;

int main(){
cout << "Enter the first number:" << endl;
int numone;
cin >> numone;
bool validselection = false;
char operation[] = {'*','/','+','-'};
int selectedoperation;
while(!validselection){
cout << "Select an operation:" << endl;
for(int i=0;i<4;i++){
cout << i+1 << ". " << operation[i] << endl;
}
cin >> selectedoperation;
if(selectedoperation == 1 || selectedoperation == 2 || selectedoperation == 3 || selectedoperation == 4){
validselection = true;
}
else{
cout << "Invalid selection!" << endl;
}
}
cout << "Enter the second number:" << endl;
int numtwo;
cin >> numtwo;
float result;
bool dividebyzero = false;
switch(selectedoperation){
case 1:
result = numone * numtwo;
break;
case 2:
if(numtwo == 0){
dividebyzero = true;
}
else{
result = (float)numone / numtwo;
}
break;
case 3:
result = numone + numtwo;
break;
case 4:
result = numone - numtwo;
break;
}
if(!dividebyzero){
cout << numone << " " << operation[selectedoperation - 1] << " " << numtwo << " = " << result << endl;
}
else{
cout << "Cannot divide by zero!" << endl;
}
system("pause");
}

This works almost the same way as the Calculator v2, the difference is that this version uses a loop and an array to display the available operations instead of multiple cout`s and this whole part of code where the operation is asked is inside a loop and it loops until a valid operation is selected.
This was the second version, but there will be more advanced ones, too.

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

Searching in a list with Javascript

noreply@blogger.com (Csabi) — Fri, 10 Sep 2010 08:07:00 PDT

In this tutorial I will show you how to create a script what searches in a list (li or table) for the inputted text at each press of a button. Because I can`t explain better what the script can do, here is an example:

Coffee
Milk
Chees
Tea
Orange
Sugar
Honey
Milkshake

How it works:
The script loops through all the 'li' elements from the document and searches for the ones with class "search". From these 'li' elements it resizes to 0 pixels the ones what don`t contain the searched word, and it resizes to its original size the ones what contain the searched word:

<html>
<head>

<style>
.search {
overflow:hidden;
}
</style>

</head>
<body>

<input type="text" id="searchbar" onKeyUp="searchit();"/>
<ul style="list-style:none;margin:0px;padding:0 15px;">
<li class="search">Coffee</li>
<li class="search">Milk</li>
<li class="search">Chees</li>
<li class="search">Tea</li>
<li class="search">Orange</li>
<li class="search">Sugar</li>
<li class="search">Honey</li>
<li class="search">Milkshake</li>
</ul>

<script type="text/javascript">
function searchit(){
var keyword = document.getElementById('searchbar').value;
for(var i=0;i<document.getElementsByTagName('li').length;i++){
if(document.getElementsByTagName('li')[i].className == 'search'){
if(document.getElementsByTagName('li')[i].innerHTML.toLowerCase().indexOf(keyword.toLowerCase()) == -1){
document.getElementsByTagName('li')[i].style.height = '0px';
}
else{
document.getElementsByTagName('li')[i].style.height = '20px';
}
}
}
}
</script>

</body>
</html>

Note: The list must have the overflow:hidden; property!

C++ Lesson 9 - Arrays

noreply@blogger.com (Csabi) — Fri, 03 Sep 2010 08:46:32 PDT

Imagine a running competition with 5 runners. We want to store the seconds needed to finish the race for each runner. We would need 5 variables, one for each runner:

int runner1 = 200;
int runner2 = 105;
int runner3 = 340;
int runner4 = 243;
int runner5 = 345;

The disadvantage of the above code is that we can`t loop through the results. In this situation the best method is to use an array.
An array would look in the following way:

runner[0] = 200;
runner[1] = 105;
runner[2] = 340;
runner[3] = 243;
runner[4] = 345;

Those numbers in the brackets are the index number, and these numbers are showing the position of a given value in the array.
Initializing arrays
An array can be initialized in three different ways:

1. Syntax:

type identifier[max_elements_number];

Example:

int runner[5];
runner[0] = 200;
runner[1] = 105;
runner[2] = 340;
runner[3] = 243;
runner[4] = 345

2. Syntax:

type identifier[max_elements_number] = {element_1,element_2,element_max_elements_numbe};

Example:

int runner[5] = {200,105,340,243,345};

The number of elements can be fewer than the max_elements_number, but not greater.

3. Syntax:

type identifier[] = {element_1,element_2,element_n};

Example:

int runner[] = {200,105,340,243,345};

The maximum number of elements is generated automatically based on the added elements number.

The runner array look in the following way for the computer:

runner =

200

105

340

243

345

(0) (1) (2) (3) (4)

This is an one-dimensional array, because it has only one index number. So, yes an array can have more than one index. Now you probably ask, why to use more than one indexes ?

Well, let`s continue the idea of a running competition. Now imagine that you need to store the timings of the last 3 competitions for our 5 runners. The new array would look like this:

runner =

200	105	340	243	345
223	324	323	454	123
245	203	150	340	311

(0)
(1)
(2)

(0) (1) (2) (3) (4)

So we have 5 runners and a column for each of them. We have 3 competitions and a row for each of them.

Getting a value from this table
Let`s say we need the timing of runner 2`s from the competition 1:

cout << runner[2][1]; //323

Initializing a multi-dimensional array
Because this is very similar to the one-dimensional arrays I will show you just some example:

int runner[5][3];

or

int runner[5][3] = {{200,223,245},{105,324,203},{340,323,150},{243,454,340},{345,123,311}};

or

int runner[][3] = {{200,223,245},{105,324,203},{340,323,150},{243,454,340},{345,123,311}};
Note: With multi-dimensional arrays only the first index can be leaved blank!

The max_elements_number needs to be a constant value, this can`t be changed during the program runs. The first element of an array is always the 0th element.

Here is an example of how useful can arrays be:

#include

using namespace std;

int main(){
int number[11];
for(int i=0;i<=10;i++){
number[i] = i;
}
for(int i=0;i<=10;i++){
cout << number[i] << endl;
}
system("pause");
}

The above program simply loads an array with numbers from 0 to 10 (11 elements) and then writes out the numbers. Using simple variables this would not be possible, we would need 11 variables and many lines of code for the same result.

Next lesson: Coming soon
Previous lesson: C++ Lesson 8 - while loop and for loop

Creating a Javascript Slideshow part 6

noreply@blogger.com (Csabi) — Sun, 29 Aug 2010 05:44:16 PDT

Before reading this please read the first parts of the tutorial.
This is the last part of this tutorials series. In this part of the tutorial we will finish the slideshow.

Positioning the buttons in a better way
Let`s make the slideshow controls look better. My idea is to place the "Prev" button in the left corner, the "Slow Medium Fast" button in the middle of the div and the "Next" button in the right corner, each with a margin of 5px. Here is how I did:

<div id="slideshowcontrols" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;z-index:-1;text-align: center;">
<a onClick="changeimage(-1);" style="float:left;margin-left:5px;">Prev</a>
<span id="startslideshowbutton" style="margin:0 1px;"><a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);">Slow</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);">Medium</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);">Fast</a></span>
<a onClick="changeimage(1);" style="float:right;margin-right:5px;">Next</a>
</div>

Showing the current image number
This will be the last step in finishing the slideshow. Now we will place a message like this: 3/5 ,the number of the current image/images number.
I think it would be the best to place it in the right upper corner of the slideshow with a black transparent background (so we will need two div`s, one for the background and one for the numbers, just like at the controls).
First let`s create the two divs:

Place them right before the loadingimage div.
For now the two divs are empty and are placed in the left corner. Because the position:absolute; property we can`t use the float:right; property, instead we will need to use the margin-left: property, but we need to calculate the distance required.
We will do this by adding some code to the changeimage function. Here will come the code what will change the numbers, too. This entire piece of code will look like this:

var requiredmargin = parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('imagesnumberbg').style.width);
document.getElementById('imagesnumberbg').style.marginLeft = requiredmargin + 'px';
document.getElementById('imagesnumber').style.marginLeft = requiredmargin + 'px';
document.getElementById('imagesnumber').innerHTML = currentimage + '/' + (images.length - 1);

After all of these 6 parts of creating and styling the slideshow my code looks in the following way, yours should be the same:

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;background:black;color:white;" onMouseOver="showcontrols();" onMouseOut="hidecontrols();">
<div id="imagesnumberbg" style="background:black;position:absolute;width:50px;height:20px;filter:alpha(opacity=60);opacity:0.6;margin-left:400px;"></div>
<div id="imagesnumber" style="position:absolute;width:50px;height:20px;text-align:center;"></div>
<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;filter:alpha(opacity=60);opacity:0.6;">Loading...</div>
<div id="slideshowimage" style="height:301px;width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrolsbg" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;background:black;filter:alpha(opacity=60);opacity:0.6;z-index:-1;"></div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;z-index:-1;text-align: center;">
<a onClick="changeimage(-1);" style="float:left;margin-left:5px;">Prev</a>
<span id="startslideshowbutton" style="margin:0 1px;"><a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);">Slow</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);">Medium</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);">Fast</a></span>
<a onClick="changeimage(1);" style="float:right;margin-right:5px;">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
document.getElementById('loadingimage').style.margin = ((parseInt(document.getElementById('slideshowimage').style.height) - parseInt(document.getElementById('loadingimage').style.height))/2 + 'px ' + (parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('loadingimage').style.width))/2 + 'px');
function changeimage(change){
currentimage += change;
if(currentimage > images.length - 1){
currentimage = 1;
}
else if(currentimage < 1){
currentimage = images.length - 1;
}
var requiredmargin = parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('imagesnumberbg').style.width);
document.getElementById('imagesnumberbg').style.marginLeft = requiredmargin + 'px';
document.getElementById('imagesnumber').style.marginLeft = requiredmargin + 'px';
document.getElementById('imagesnumber').innerHTML = currentimage + '/' + (images.length - 1);
document.getElementById('slideshowimage').innerHTML = '<img id="image" width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';
waitimage();
}
function waitimage(){
if(document.getElementById('image').complete){
positioningimage();
return;
}
document.getElementById('loadingimage').style.zIndex = 1;
setTimeout('waitimage()',250);
}
function positioningimage(){
document.getElementById('image').style.marginTop = (parseInt(document.getElementById('slideshowimage').style.height) - document.getElementById('image').height) / 2 + 'px';
document.getElementById('loadingimage').style.zIndex = -1;
}
function showcontrols(){
document.getElementById('slideshowcontrols').style.zIndex = 1;
document.getElementById('slideshowcontrolsbg').style.zIndex = 1;
}
function hidecontrols(){
document.getElementById('slideshowcontrols').style.zIndex = -1;
document.getElementById('slideshowcontrolsbg').style.zIndex = -1;
}
function slideautomatically(timeinterval){
changeimage(1);
timeout = setTimeout(function(){slideautomatically(timeinterval)},timeinterval);
}
function stopsliding(){
clearTimeout(timeout);
document.getElementById('startslideshowbutton').innerHTML = "<a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);\">Slow</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);\">Medium</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);\">Fast</a>";
}
changeimage(0);
</script>

</body>
</html>

And here is the slideshow: Start it
(In the preview the Stop slideshow button is not working because the new window is written by Javascript and it can`t format well all the quotes - but else it works :D )
If something is not working or just have a question, don`t hesitate, ASK!

Javascript - get elements by class

noreply@blogger.com (Csabi) — Thu, 09 Sep 2010 14:48:23 PDT

I will show you two ways to get an element by class: using getElementsByTagName or creating a getElementByClass function:

1. Using getElementsByTagName
This code loops through each element of the page and check`s it`s class name:

for(var i=0;i<document.getElementsByTagName('*').length;i++){
if(document.getElementsByTagName('*')[i].className == 'YOUR-CLASS'){
document.getElementsByTagName('*')[i].style.backgroundColor = 'black';
}
}

2. Creating a getElementsByClass function
This code creates the getElementsByClass function what returns an array of elements with the selected class name:

Use it in the following way to select only the element with the specified index:

document.getElementsByClass('YOUR-CLASS')[0].style.backgroundColor = 'black';

Or use this if you want to select each element:

for(var i=0;i<=document.getElementsByClass('YOUR-CLASS').length;i++){
document.getElementsByClass('YOUR-CLASS')[i].style.backgroundColor = 'black';
}

Note: Javascript is case sensitive

Creating a Javascript Slideshow part 5

noreply@blogger.com (Csabi) — Sun, 29 Aug 2010 05:32:06 PDT

Before reading this please read the first parts of this tutorials: Part 1
In this part we will add an automatic sliding option to our slideshow, whit 3 speed levels: slow, medium, fast.

Let`s make it:

Sliding the images automatically
To slide the images automatically we need a function (name it slideautomatically) what will start the changeimage function again and again with a delays. We will make it using the setTimeout funtion and we will adjust the speed by changing the delay (in milliseconds) between each run of the function. This function will be triggered by the three buttons: Slow, Medium and the Fast buttons using onClick events. Each of these buttons will have as parameter the delay between each run of the function in milliseconds. Name tha parameter timeinterval
The function should look like this:

function slideautomatically(timeinterval){
changeimage(1);
timeout = setTimeout(function(){slideautomatically(timeinterval)},timeinterval);
}

Note: I have used a variable to store the timeout, because later will need to clear it.
Now we need to create the buttons what will start this function:

<span id="startslideshowbutton"><a onClick="slideautomatically(8000);">Slow</a> <a onClick="slideautomatically(4000);">Medium</a> <a onClick="slideautomatically(2000);">Fast</a></span>

Place it between the Prev and Next buttons.

After editing it my code look like this:

Now the images are changed automatically but now we need a way to stop it.

Stop it
To stop the automatic sliding we will need first a button to stop it by triggering a function. Call this function stopsliding. We will place this button in the place of the "Slow Medium Fast" button by changing the content of the startslideshowbutton span when the automatic sliding starts. We will change the content of the startslideshowbutton span by changing the onClick event of the "Slow Medium Fast" buttons from this:

onClick="slideautomatically(8000);"
onClick="slideautomatically(4000);"
onClick="slideautomatically(2000);"

to this:

onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);"
onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);"
onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);"

Note: The " character is used to replace a double quote. Because this is an inline Javascript event we can`t use the \" character instead.

Now we just need to create the stopsliding function:

function stopsliding(){
clearTimeout(timeout);
document.getElementById('startslideshowbutton').innerHTML = "<a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);\">Slow</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);\">Medium</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);\">Fast</a>";
}

The above function first clears the timeout so stops the automatic sliding and then it replaces the "Stop slideshow" button with the "Slow Medium Fast" buttons.

Here is my code, yours should look the same:

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;background:black;color:white;" onMouseOver="showcontrols();" onMouseOut="hidecontrols();">
<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;filter:alpha(opacity=60);opacity:0.6;">Loading...</div>
<div id="slideshowimage" style="height:301px;width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrolsbg" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;background:black;filter:alpha(opacity=60);opacity:0.6;z-index:-1;"></div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;z-index:-1;">
<a onClick="changeimage(-1);">Prev</a>
<span id="startslideshowbutton"><a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);">Slow</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);">Medium</a> <a onClick="this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);">Fast</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
document.getElementById('loadingimage').style.margin = ((parseInt(document.getElementById('slideshowimage').style.height) - parseInt(document.getElementById('loadingimage').style.height))/2 + 'px ' + (parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('loadingimage').style.width))/2 + 'px');
function changeimage(change){
currentimage += change;
if(currentimage > images.length - 1){
currentimage = 1;
}
else if(currentimage < 1){
currentimage = images.length - 1;
}
document.getElementById('slideshowimage').innerHTML = '<img id="image" width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';
waitimage();
}
function waitimage(){
if(document.getElementById('image').complete){
positioningimage();
return;
}
document.getElementById('loadingimage').style.zIndex = 1;
setTimeout('waitimage()',250);
}
function positioningimage(){
document.getElementById('image').style.marginTop = (parseInt(document.getElementById('slideshowimage').style.height) - document.getElementById('image').height) / 2 + 'px';
document.getElementById('loadingimage').style.zIndex = -1;
}
function showcontrols(){
document.getElementById('slideshowcontrols').style.zIndex = 1;
document.getElementById('slideshowcontrolsbg').style.zIndex = 1;
}
function hidecontrols(){
document.getElementById('slideshowcontrols').style.zIndex = -1;
document.getElementById('slideshowcontrolsbg').style.zIndex = -1;
}
function slideautomatically(timeinterval){
changeimage(1);
timeout = setTimeout(function(){slideautomatically(timeinterval)},timeinterval);
}
function stopsliding(){
clearTimeout(timeout);
document.getElementById('startslideshowbutton').innerHTML = "<a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(8000);\">Slow</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(4000);\">Medium</a> <a onClick=\"this.parentNode.innerHTML='<a onClick="stopsliding();">Stop slideshow</a>';slideautomatically(2000);\">Fast</a>";
}
changeimage(0);
</script>

</body>
</html>

If something is not clear ASK ME!
Continue to part 6