bgallz.org | Web coding & design tutorials, scripts, resources and more. » Scripts

Javascript & PHP Star Rating Script

Brian — Mon, 27 Jun 2011 00:15:42 +0000

I’ve searched around the interwebs for an ajax star rater and I came across a few different possibilities, all of which looked very good. The top result from google was Nick Stakenburg’s “Starbox” for “ajax star rater”. I also found Masuga Web Design’s Ajax Star Rater and a script from MySandbox to be popular results. However I couldn’t really seem to find a PHP / Mysql script that used Javascript for the rater effects. So I decided to make one based off of a script I found:

Reign Water Design’s 5 Star Rating System

This was a very nice easy to use Javascript 5 star rating script. All I had to do was make some tweaks to my preference and add on some PHP/Mysql code to submit the rating.

See the demo or download this script.

To view the PHP source code, images, and everything together you must download this script.

Javascript:

Insert the following in the <head> tags of your page:

Javascript Source Code

<script type="text/javascript">
function insertParam(key, value)
{
    key = escape(key); value = escape(value);
    var kvp = document.location.search.substr(1).split("&");
    var i=kvp.length; var x; while(i--)
    {
        x = kvp[i].split("=");
        if (x[0]==key)
        {
                x[1] = value;
                kvp[i] = x.join("=");
                break;
        }
    }
    if(i<0) {kvp[kvp.length] = [key,value].join("=");}
    //this will reload the page, it's likely better to store this until finished
    document.location.search = kvp.join("&");
}
function alterDisplay(id){
	var dropdown = document.getElementById(id);
	if(dropdown.style.display == "none"){
		dropdown.style.display = "";
	} else {
		dropdown.style.display = "none";
	}
}

<script type="text/javascript" language="javascript" src="./scripts/ratingsys.js"></script>

CSS

You will need to include this in the <head> tags as well either in <style> tags or by <link>:

CSS Styles

#rateMe #rate_overlay {
	position:absolute;
	display:block;
	float:left;
	margin:0;
	padding:0;
	height:30px;
	width:auto;
	background:#eee url(./images/star_overlay.gif) repeat-x;
	z-index:2;
}
#rateStatus{width:100px; height:20px;margin:2px 0 0 5px;font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold}
#rateMe{width:152px; height:50px; padding:0px; margin:0px; vertical-align:top; z-index:auto}
#rateMe li{float:left;list-style:none;}
#rateMe li a:hover,
#rateMe .on{background:url(./images/star_on.gif) no-repeat;}
#rateMe a{float:left;background:url(./images/star_off.gif) no-repeat;width:30px; height:30px;cursor:pointer;}
#rateMe a:hover{background:url(./images/star_on.gif) no-repeat;}
#ratingSaved{display:none;}
.saved{color:red; }

Basically I took the script that Water’s made and changed a few things to the css styles, added an overlay for the current rating, and wrote a php script to insert rates and determine the current rating, etc. I also added the Javascript functions insertParam() and alterDisplay(). You do not need to use this function insertParam() to create the url, you can simply set the <a> tags to something like this:

Source code

<a href="./index.php?r=1" id="_1" title="Terrible" onmouseover="rating(this)" onmouseout="off(this)"></a>

The Javascript function alterDisplay() is used to hide and show the overlay

that holds the current rating (if there is one). So when you mouse over the rating bar holder it hides the overlay so you can rate.

The PHP script grabs the information from the Mysql table that you specify in the function. You will need to adjust the following values:

$var – The column to base your mysql selection off of. Grab all rows where this column equals $id.
$table – The table where the ratings are being held.
$star_width – Width of the stars, default is 30px.

You will need to be connected to a MYSQL database before calling the rating bar function.

Since the syntax of the function is the following:

Rating Bar Syntax

function rating_bar($id);

You will need to supply the identifier ($id) which tells the PHP script which row to grab from the Mysql table.

To display the current rating after it has been rated on – because Javascript alone is not enough – I added an overlay <div> which will hold the current rating. This is done by setting the css style of this overlay div to the following:

Rate Overlay CSS Style

#rateMe #rate_overlay {
	position:absolute;
	display:block;
	float:left;
	margin:0;
	padding:0;
	height:30px;
	width:auto;
	background:#eee url(./images/star_overlay.gif) repeat-x;
	z-index:2;
}

The position: aboslute and z-index: 2 style attributes make the div lay over top of the rateMe div which holds the rater and has a z-index: 1.

Gaming Website Script

Brian — Fri, 24 Dec 2010 16:43:19 +0000

Want to run a gaming website full of screenshots, videos, reviews, downloads and everything else on the games you wish to run? Easily upload and manage all data for the games you include on your website through the admin panel and control the entire site. The BFGamerz Gaming Script comes with vBulletin announcement thread viewer custom installed so you can share your forum announcements on your homepage.

The BFGamerz Gaming Script allows you to easily add/edit/remove:

Screenshots
Videos
Downloads
Reviews
Maps
Resources

for every game you include on your website. Viewers will easily obtain all the information they need for your games. Create categories and sub-categories for your games as far as expansions, mods, etc. Members can use private messaging, add games to their profile with their in-game names, comment on nearly everything, and share videos and so much more.

Username: Demo11
Password: demopass

Try the BFGamerz Gaming Script here!

The BFGamerz Gaming Script is regularly $80.00 and is currently on sale for 50% OFF!

Act now and get this script for just $40.00!

~~Regular Price: $80.00~~.
Sale Price: $40.00!

PHP Prime Number Script

Brian — Wed, 27 Oct 2010 05:38:58 +0000

Here is a simple little script that will determine if a number is prime or not. Just submit the function through with the parameter number as the integer you want to determine – is prime or not.

Syntax

is_prime(number);

Here is the function’s definition:

function is_prime($num=0)
{

$num = (int)$num; // Make sure it's an integer.
if($num > 0)
{
	$count = 0;
	$half = round($num / 2);

	for($i=2;$i<=$half;$i++)
	// Check the remainder from 2 to the half point.
	{
		if(($num % $i) == 0)
		// Remainder is 0, it is divisible. Not a prime number.
		{
			$count++;
			// Increase count of divisible numbers.
		}
	}
	if($count > 0)
	{
		return false;
	} else {
		return true;
	}
} else {

return false;

}

}

Examples:

is_prime(10);
is_prime(3);
is_prime(109);

false
true
true

Basically our script here takes a parameter, makes sure it is an integer greater than 0, then divides it by each number from 2 to half way to that number. So if our number was 7 the script would divide 7 by 2, 3, 4. The half mark is rounded to the nearest whole number. Since a remainder exists from each of these divisions, the number is declared as prime.

Click here to demo the script!

Click here to download this script!

PHP Upload and Resize Image

Brian — Tue, 27 Jul 2010 17:21:42 +0000

Many times when you upload a image somewhere you want to resize it to different dimensions based off of a maximum width or height. Here is a simple script that does this for you, using a HTML form and a PHP script. We start with the PHP script that will run if our $_GET['do'] is set to “upload.” Then we include the HTML form that has three inputs (max width, max height, image file).

Use the Upload and Resize Demo Here!

Download This Script!

Here is the PHP:

Upload and Resize PHP Code


// index.php
function generate_resized_image(){
$max_dimension = 800; // Max new width or height, can not exceed this value.
$dir = "./images/"; // Directory to save resized image. (Include a trailing slash - /)
// Collect the post variables.
$postvars = array(
"image"    => trim($_FILES["image"]["name"]),
"image_tmp"    => $_FILES["image"]["tmp_name"],
"image_size"    => (int)$_FILES["image"]["size"],
"image_max_width"    => (int)$_POST["image_max_width"],
"image_max_height"   => (int)$_POST["image_max_height"]
);
// Array of valid extensions.
$valid_exts = array("jpg","jpeg","gif","png");
// Select the extension from the file.
$ext = end(explode(".",strtolower(trim($_FILES["image"]["name"]))));
// Check not larger than 175kb.
if($postvars["image_size"] <= 179200){
// Check is valid extension.
if(in_array($ext,$valid_exts)){
if($ext == "jpg" || $ext == "jpeg"){
$image = imagecreatefromjpeg($postvars["image_tmp"]);
}
else if($ext == "gif"){
$image = imagecreatefromgif($postvars["image_tmp"]);
}
else if($ext == "png"){
$image = imagecreatefrompng($postvars["image_tmp"]);
}
// Grab the width and height of the image.
list($width,$height) = getimagesize($postvars["image_tmp"]);
// If the max width input is greater than max height we base the new image off of that, otherwise we
// use the max height input.
// We get the other dimension by multiplying the quotient of the new width or height divided by
// the old width or height.
if($postvars["image_max_width"] > $postvars["image_max_height"]){
if($postvars["image_max_width"] > $max_dimension){
$newwidth = $max_dimension;
} else {
$newwidth = $postvars["image_max_width"];
}
$newheight = ($newwidth / $width) * $height;
} else {
if($postvars["image_max_height"] > $max_dimension){
$newheight = $max_dimension;
} else {
$newheight = $postvars["image_max_height"];
}
$newwidth = ($newheight / $height) * $width;
}
// Create temporary image file.
$tmp = imagecreatetruecolor($newwidth,$newheight);
// Copy the image to one with the new width and height.
imagecopyresampled($tmp,$image,0,0,0,0,$newwidth,$newheight,$width,$height);
// Create random 4 digit number for filename.
$rand = rand(1000,9999);
$filename = $dir.$rand.$postvars["image"];
// Create image file with 100% quality.
imagejpeg($tmp,$filename,100);
return "Image Preview:

\"".$filename."\" border=\"0\" title=\"Resized  Image Preview\" style=\"padding: 4px 0px 4px 0px;background-color:#e0e0e0\" />

Resized image successfully generated. \"".$filename."\" target=\"_blank\" name=\"Download your resized image now!\">Click here to download your image.";
imagedestroy($image);
imagedestroy($tmp);
} else {
return "File size too large. Max allowed file size is 175kb.";
}
} else {
return "Invalid file type. You must upload an image file. (jpg, jpeg, gif, png).";
}
}
if(isset($_GET["do"])){
if($_GET["do"] == "upload"){
$upload_and_resize = generate_resized_image();
} else {
$upload_and_resize = "";
}
} else {
$upload_and_resize = "";
}
?>

Here is the HTML:

HTML Form

<form action="./index.php?do=upload" method="post" enctype="multipart/form-data">
<table width="100%" align="center" border="0" cellpadding="2" cellspacing="0">
<tr>
<td align="left" width="100">
Max Width:</td>
<td align="left"><input name="image_max_width" style="width: 120px" type="text" maxlength="4" /> px.</td>
</tr>
<tr>
<td align="left">
Max Height:</td>
<td align="left"><input type="text" name="image_max_height" style="width: 120px" maxlength="4" /> px.</td>
</tr>
<tr>
<td align="left">
Image:</td>
<td align="left"><input type="file" name="image" size="40" /></td></tr>
<tr>
<td align="left" colspan="2">
<ol style="margin:0;padding:3px 0px 3px 15px">
<li>Max file size: 175 KB.</li>
<li>Allowed extensions: jpg, jpeg, gif, png.</li>
<li>Max Dimension: <em>800</em>px.</li>
</ol>
</tr>
<tr>
<td align="left" colspan="2">
<input type="submit" name="submit" value="Submit!" style="font: 14pt verdana" />
</td>
</tr>
</table>
</form>

This will create a form that looks like this:

Then we just have to call the functions returned value ($upload_and_resize).

Show Upload and Resize


 echo $upload_and_resize; ?>

PHP Favicon Generator Script

Brian — Sat, 24 Jul 2010 18:12:40 +0000

I decided to make a free easy to use favicon generating script that uses PHP. The script has a few features and requirements when uploading your image to be converted to a favicon. First the script checks for a few things such as file type, file size, if the directory is writable, and the specified dimensions. You can create a 16×16 icon or a 32×32 icon.

Click here to check out the demo for this script!

Just select the image file you want converted to a 16×16 or 32×32 icon and hit submit! It’s that easy. Here is how it works:

Favicon Generator Script


// bgallz.org - Web coding and design tutorials, scripts, resources and more.
// favicon Generator Script
function generate_favicon(){
// Create favicon.
$postvars = array("image" => trim($_FILES["image"]["name"]),
"image_tmp"        => $_FILES["image"]["tmp_name"],
"image_size"    => (int)$_FILES["image"]["size"],
"image_dimensions"    => (int)$_POST["image_dimensions"]);
$valid_exts = array("jpg","jpeg","gif","png");
$ext = end(explode(".",strtolower(trim($_FILES["image"]["name"]))));
$directory = "favicon/"; // Directory to save favicons. Include trailing slash.
// Check not larger than 175kb.
if($postvars["image_size"] <= 179200){
// Check is valid extension.
if(in_array($ext,$valid_exts)){
if($ext == "jpg" || $ext == "jpeg"){
$image = imagecreatefromjpeg($postvars["image_tmp"]);
}
else if($ext == "gif"){
$image = imagecreatefromgif($postvars["image_tmp"]);
}
else if($ext == "png"){
$image = imagecreatefrompng($postvars["image_tmp"]);
}
list($width,$height) = getimagesize($postvars["image_tmp"]);
$newwidth = $postvars["image_dimensions"];
$newheight = $postvars["image_dimensions"];
$tmp = imagecreatetruecolor($newwidth,$newheight);
// Copy the image to one with the new width and height.
imagecopyresampled($tmp,$image,0,0,0,0,$newwidth,$newheight,$width,$height);
$rand = rand(1000,9999);
$filename = "./".$directory.$rand.$postvars["image"];
// Create image file with 100% quality.
if(is_writable($directory)){
imagejpeg($tmp,$filename,100);
// Image created, now rename it to its
$ext_pos = strpos($postvars["image"],"." . $ext);
$strip_ext = substr($postvars["image"],0,$ext_pos);
// Rename image to .ico file
rename($filename,"./favicon/".$strip_ext.".ico");
return "Icon Preview:
\Favicon Preview\" src="\".$filename."\" border="\0\" alt=\"Favicon\" />
Favicon successfully generated. " href=\"".$filename."\" target=\"_blank\">Click here to download your favicon.
If favicon doesn't download, right click the link above. Click SAVE AS to download .ico.";
} else {
return "The directory: \"".$directory."\" is not writable.";
}
imagedestroy($image);
imagedestroy($tmp);
} else {
return "File size too large. Max allowed file size is 175kb.";
}
} else {
return "Invalid file type. You must upload an image file. (jpg, jpeg, gif, png).";
}
}
if(isset($_GET["do"])){
if($_GET["do"] == "create"){
if(isset($_POST["submit"])){
$generate_favicon = "".generate_favicon()."";
$generate_favicon .= "Place your download instructions and anything else you want here to follow the download link after upload.";
} else {
$generate_favicon = "";
}
}
}
?>

Then we must include the HTML form that will submit the image and dimensions to PHP:

Source code
<form action="index.php?do=create" enctype="multipart/form-data" method="post">Image Dimensions:<br /> <select style="width: 170px;" name="image_dimensions"> <option selected="selected" value="16">16px x 16px</option> <option value="32">32px x 32px</option> </select> <p><span style="font-size: 14pt;">Favicon Image:</span></p> <input name="image" size="40" type="file" /> <input style="font: 14pt verdana;" name="submit" type="submit" value="Submit!" />

Be sure to include the HTML head tags in your HTML pages that use the favicon. These are given on the script’s index and on the demo.

Click here to download the script!

CSS Drop-Down Menu

Brian — Tue, 08 Jun 2010 04:32:42 +0000

Drop down menus are very useful for navigation on websites and for holding many links to pages on your site without taking up much space on your web pages. Using just CSS and Javascript we can make a nice simple drop down menu you can put on your web page. To do this we’ll have three files: dropdown.css, dropdown.js, and index.html. Our index.html page will display the drop down menu and our stylesheet – dropdown.css – will hold the styles for the drop down menu.

Here is a preview of what our drop down menu will look like:

Homepage

Drop Down Menu #1
Drop Down Link #1
Drop Down Link #2
Drop Down Link #3

Drop Down Menu #2
Drop Down Link #1
Drop Down Link #2
Drop Down Link #3

Link #1

Link #2

Dropdown.css

@charset "utf-8"; #dropdown { margin: 0px; padding: 0px; list-style-type: none; text-align: left; font: 11px Arial, Helvetica, sans-serif; } #dropdown li { float: left; margin: 0px; padding: 5px; list-style-type: none; border-bottom: 2px solid #cccccc; border-right: 1px solid #eeeeee; } #dropdown li a { display: block; margin: 0; text-decoration: none; } #dropdown div { position: absolute; visibility: hidden; margin: 7px 0px 0px 0px; padding: 0; background-color: #e8e8e8; border-right: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5; } #dropdown div a { position: relative; display: block; margin: 0; padding: 3px 6px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; font: 11px Verdana, Arial, Helvetica, sans-serif; color: #333; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #e2e2e2; } #dropdown div a:hover { background-color: #f1f1f1; color: #000; }

Dropdown.js

// Dropdown menu javascript var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose;

Index.html

Untitled Document

Homepage

Drop Down Menu #1
Drop Down Link #1 Drop Down Link #2 Drop Down Link #3

Drop Down Menu #2
Drop Down Link #1 Drop Down Link #2 Drop Down Link #3

Link #1

Link #2

Drop Down Menu #3
Drop Down Link #1 Drop Down Link #2 Drop Down Link #3

Click here to download this drop down menu script!

PHP Create Thumbnail Images

Brian — Sun, 20 Dec 2009 15:54:54 +0000

Here we are going to observe how to use PHP to generate thumbnails for us. A thumbnail is a smaller size and usually smaller quality of an image shown as preview or link to the original image. Thumbnails can be very useful for faster loading times and quicker display of images on your web pages and a few other reasons. This script will allow us to use a directory on our server and convert all image files in it to a new thumbnail, with dimensions we want, and save it on a new thumbnails directory.

We do this using some PHP functions. First we have to open the directory that we specify as the directory to the images we want to convert to thumbnails. We use the function opendir().

The next part:

while (false !== ($fname = readdir($dir))) {

This loops through the directory until it reaches the end of the files stored in the directory.

Then we make sure it is an image file type by checking its extension:

$valid_extensions = array("jpg","gif","png","jpeg"); if(in_array(strtolower($info['extension']),$valid_extensions)){

We use the function imagecreatefromjpeg() to make an image out of the file with the image extension. With this we grab the image’s width and height to calculate the new height of the thumbnail based off of the $thumbWidth specified in the beginning of the function (200).

We then use the function imagecreatetruecolor() to make a temporary image for the new thumbnail. With it we transfer it to a new image file in our thumbnails directory with the following code:

$genThumb = imagejpeg($tempImage,$pathToThumbs . rand(100,999) . $fname);

The rand(100,900) make a random 3 digit number in front of the file name. Remove it if you wish.

Here is our function:

function generateThumbs(){ $pathToScreens = "../screenshots/"; // Directory to your images you want converted to thumbnails. $pathToThumbs = "../screenshots/thumbs/"; // Directory to your thumbnails. $thumbWidth = 200; // Width of the thumbnails generated. $dir = opendir($pathToScreens) or die("Could not open directory"); $counter = 0; while(($fname = readdir($dir)) !== false){ if($fname != "." && $fname != ".."){ // Remove folders. $valid_extensions = array("jpg","jpeg"); // Only jpeg images allowed. $info = pathinfo($pathToScreens . $fname); if(in_array(strtolower($info["extension"]),$valid_extensions)){ // Make sure the file is an image file by checking its extension to the array of image extensions. $img = imagecreatefromjpeg($pathToScreens . $fname); // Select the file as an image from the directory. $width = imagesx($img); $height = imagesy($img); // Collect its width and height. $newHeight = floor($height * ($thumbWidth / $width)); // Calculate new height for thumbnail. $tempImage = imagecreatetruecolor($thumbWidth,$newHeight); // Create a temporary image of the thumbnail. // Copy and resize old image into new image. imagecopyresized($tempImage,$img, 0, 0, 0, 0, $thumbWidth,$newHeight,$width,$height); $genThumb = imagejpeg($tempImage,$pathToThumbs . rand(100,999) . $fname); // Create the thumbnail with the new width and height in the thumbnails directory. // I added a rand 3 digit number in front of the file name to avoid overwrite. $counter++; // Increment. } } } if($counter > 0){ return $counter . " thumbnails generated from the directory \"".$pathToScreens."\"."; } else { return "No image files could be processed."; } closedir($dir); // Close the directory. } ?>

Then we can just call it like so:

echo generateThumbs();

Javascript Snowing Effect Script

Brian — Fri, 11 Dec 2009 17:06:00 +0000

Here is a nice feature to add to your web pages during the holiday season. Falling snowflakes are very simple and yet a great eye catcher to new visitors to your website.

Here is the snowflake gif I made for this:

Now, to make the effect of the snowflake falling on the webpage we will just use javascript. You want to place this code in the tags of your webpage and it will give you the pretty effect that it is snowing! You can do this with other seasons as well like autumn, you would want to use a leaf of some kind. Here is the code:

Enjoy!

Simple File Hosting Script

Brian — Mon, 09 Nov 2009 04:15:55 +0000

I’ve made an easy to use file hosting script that is free for download.

It has some nice features such as:

Allowed file extensions.

File size limit.

Generated file names.

BBcode, IMG code, Url, etc.

Terms of Conditions

Generated file names on the server are created using the functions rand() and the md5() hash generator. Here is the code:

The script also uses javascript to check for the Terms and Conditions checkbox being checked to make the submit button enabled.

I will be updating this script with more features, but this is meant to be a simple file hosting script. I will later include a download file page.

Here is what the upload form looks like:

Check out the demo here!

Click here to download the script!

PHP Cookies with Login – setcookie()

Brian — Fri, 06 Nov 2009 04:48:27 +0000

A cookie is a small file that the server embeds on the user’s computer. This data is sent and recieved with each browser that is used to view a page using cookies.

To create a cookie in PHP use the setcookie() function. Here is its syntax:

setcookie($name, $value, $expire, $path, $domain);

So if you want to create a cookie for someone’s status that will last one day, the code would look something like this:

// name = status // expire = current timestamp plus 24 hours // path = current path "/" setcookie("status","user status here",time()+(3600*24),"/");

So let’s say we want to create a cookie for every user that logs in and have it last for 12 hours. We need to run a login form and validate the login details to match someone on our database, and then create the cookies and set them to a specific time interval. Let’s make a function for this on function.php:

function.php

0){ $row = mysql_fetch_assoc($sql); // User found, now let's create the cookies for the user! if(!$_COOKIE["userid"] && !$_COOKIE["username"]) { setcookie("userid",$row["userid"],time()+(3600*12),"/"); setcookie("username",$username,time()+(3600*12),"/"); } return true; } else { return false; } } ?>

Now if you have a simple form with two inputs, one for username and password, you can send these to a login page which will run the above function to validate and check the login. We’ll put this form on our index.php:

index.php

PHP Login / Logout
Username:
Password:

Now on login.php we include that function and run it with the submitted username and password.

login.php

Now we’ve made the user logged in. Basically we checked the mysql database for a user with those login details and upon finding a match, we created two cookies for that user. One being their userid (an ID we keep in our database for each user) and the other being their username.

So what if the user wants to log out? This is very easy when dealing with simply erasing the cookies we made. We place the following code on our index.php page.

Now when the user visits index.php?do=logout it will run this logout code. If the cookies are found, it erases them and they will be treated as a guest based on how your script treats users without these cookies. This way we can check each user on every page they visit for these cookies to tell if they are a registered and logged in user or a guest.

Max Width:	px.
Max Height:	px.
Image:
Max file size: 175 KB Allowed extensions: jpg, jpeg, gif, png. Max Dimension: 800px.