html tutorials | css tutorials | php tutorials | Nodstrum Blog » Code

Shorthand PHP IF/ELSE Statements = much shorter code!

Jamie — Thu, 14 Feb 2008 11:27:47 +0000

You may or may not have heard of shorthand if/else statements, but they do exist, and trust me they make things SO much more ordered in your code when used in the right way.

This is the Shorthand version – below this, if you cannot work it out for yourself is a nice description.

// Will print out ‘i am male’ if $myGender is ‘male’ and vice-versa.
echo ($myGender == ‘male’ ? ‘i am male’ : ‘I am female’);

Description of how this actually works
We all (i would hope) know the normal way of writing if/else statements (here is a recap just incase)

$myVar = true;
if($myVar) {
echo ‘My Var is TRUE!’;
} else {
echo ‘My Var is FALSE’;
}

That sort of statement is great for in the body of your code, but when want a dynamic selector within your HTML code, it gets very messy.

EG:

if($myGender == ‘male’) {
// Gender is MALE.
$maleOpt = ’selected’;
$femaleOpt = ”;
} else {
// Gender is FEMALE.
$maleOpt = ”;
$femaleOpt = ’selected’;
}

Now – that is alot to write and will make your HTML form look a total mess, this is where the shorthand comes in. It allows us to write the same thing inline

Look:

As you can see – there is a huge difference in the amount of code – and if Wordpress formatted it nicely – it would look loads better!

And the all important Explanation!

// This will echo selected to the screen if $myGender is male.
echo ($myGender = ‘male’ ? ‘ selected’ : ”);

So – $myGender is the variable we are checking, in this case we are checking to see if $myGender == ‘male’

The questionmark (?) seperates the ‘answers’.

The first ‘answer’ is what is set/displayed when the query is true, the second is if the query is false.

This is the equilivent to :

if($myGender == ‘male’) {
echo ’selected’;
} else {
echo ”;
}

Hope that helps some of you out!

Captcha – in 5 lines of php :)

Jamie — Sun, 23 Sep 2007 08:08:18 +0000

Yes you read it right…! 5 lines of code

I know its hard to believe but this has to be one of the simplest implementation of Captcha, mainly because i can’t find any easier ones.

So here goes, this is how it works:

At the top of the page with the form you want to Captcha protect add these 3 lines of code, this generates the Captcha and adds it all to a nice variable to print out later:

require_once(‘captcha.class.php’);

$captcha = new Captcha;

$captchaImage = $captcha->create();

Then in your form where you want the Captcha, usually at the bottom, just above the submit button add this line, enclosed in php tags of course, this adds the captcha elements to the form:

echo $captchaImage;

So that is the form part done, now we just need to verify what the user has put in. For this i am going to assume that you are verifying atleast one part of the users input, so we need to add this line into it:

$captcha->verify($_POST[$captcha->captchaInputName]);

This would probably fit into your current checking like so:

if($someothervariable && ($captcha->verify($_POST[$captcha-> captchaInputName])) {…

Of course we have to add these 2 lines at the top of this processing page aswell (these are not included in the ‘5′ because they have already been added.

require_once(‘captcha.class.php’);

$captcha = new Captcha;

And thats it, the class handles everything else, well you have to put the files on your web-server, create a new directory to store the images and make it writeable, but thats a one-shot 10 second job!

Now for a screenshot:

Now for demo and the code:

Captcha DEMO

Captcha Formatted Source

Captcha ZIP

MySQL Calendar

Jamie — Wed, 27 Jun 2007 10:57:10 +0000

VERSION 1.1 RELEASED!

Changes: Added (by popular demand) Event deletion!
Ok… I have finally got this script working!

I have not done it like a tutorial because it is just too big, so here are a load of screen shots, There is a link to a fully functional demo and zip at the bottom!

A little setup information:

1. Copy the entire calendar into whatever directory you want.

2. Create your database and import the ‘databaseSQL.sql’ file into it, this will create the default data for running it.

3. Alter the ‘databaseConnection.php’ file to show your connection details.That should be it..

NOTE:By default the username and password are both ‘admin‘ (without the quotes), i suggest you change your password in the control panel.

If you have any problems i will be happy to help, just post your query as a comment to this page.

Screen Shots

Default View

View Events

View Events 2

Login

Control Panel

Add Event

Add Event 2

Downloads

MySQL Calendar V1.1 DEMO

MySQL Calendar v1.1 ZIP

AJAX/PHP – the beginners guide to loading external content

Jamie — Tue, 27 Feb 2007 12:08:54 +0000

I’m going to assume that we all know, or have atleast heard of Prototype and script.aculo.us the two combine to form one powerful javascript library enabling developers to become designers (well, kind of).
– Example and code at the bottom –

I have created a ZIP file to get you up and running right away: Download it now!

I was showing a friend a few days ago something i made for a university module, Multimedia Applications Desgn (a mouthful i know). Basically we had to create a website promoting our group as a duo, thats all your getting about the project as its not really relevant and a tad embarrassing should anyone find the site!

There was a part of the site that my friend really liked and wanted to incorporate into his final year project… after sketching it out for him on paper i reconed that other people could benefit.
This has probably been splashed everywhere, but i havent seen anything that incorporates all the same characteristics on Digg.

So here is a quick, hopefully easy to understand, tutorial of how its done.

Abstract
We are trying to achieve loading content into a ‘div’ element without refreshing the page, as well as showing a cool loading window inplace of the content as it is loading.

Method
1 HTML page and 1 PHP page are required.
You dont need to follow my method exactly as there are probably many many more out there, this is just my simple approach that seems to work.

The HTML Page
This page will be the one we want the user to stay on with the ‘div’ element in it for loading the content into.

Firstly we need to include the script.aculo.us javascript files.
I just unzipped the script.aculo.us javascript files into my own folder called ‘js’.

Next we need to create a few functions to make our life easier.
The reason for this is it makes them reuseable and therfore we dont need to make our code look messy, im a little anal about code being correctly formatted and using the same chunks of code over and over again when they could simply be made into functions.

function startLoading() {
// First we want to show the loading window then hide the content are we are loading into.
Element.show(‘mainAreaLoading’);
Element.hide(‘mainAreaInternal’);
}

function finishLoading() {
// First we want to show the content are, then toggle the loading window so it fades away.
Element.show(‘mainAreaInternel’);
// This happens 1 second after the mainAreaInternal is shown incase the content is still loading.
setTimeout("Effect.toggle(‘mainAreaLoading’);", 1000);
}

function loadContent(id) {
// We make use of the Ajax.Updater function to load the external data from our file.
// Start the loading window first by calling the function we made previously.
startLoading();

// Request the content and update the ‘div’ area (i’ll explain this in more detail later).
new Ajax.Updater(‘mainAreaInternal’, ‘rpc.php’, {method: ‘post’, postBody:‘content=’+ id +”});

// Now finish the loading.
finishLoading();
}

Next we have to make our ‘RPC file’ (probably the wrong phrase to use, but it works for me).

Whatever you ‘echo’ out to from this script will be what appears on the screen, html tags et-all, although i have found that outputting certain types of Javascript, like entire functions does not seem to work.

// We are posting our request, like the ‘method="post"’ in a form, so we need to catch it.
$content = $_POST[‘content’];

// The content to show is determined by the $content integer we send through from the javascript.
switch($content) {
case 1:
echo ‘This is the content for the FIRST case statement!’;
break;
case 2:
echo ‘Congratulations, you have loaded the second bit of content!’;
break;

default:
// This default case catches any $content value that does not have a case. I’m giving a nice error message so you can work out what went wrong.
echo ‘Whoops, there was a problem in the switch.You passed: ’. $content .‘ to the switch statement in rpc.php.’;
} // end Content Switch.
?>

Here is the CSS Stylesheet to make all this possible

.mainAreaInternal {
position: absolute;
top: 40px;
left: 0px;
width: 500px;
height: 300px;
background-color: #cccccc;

overflow: auto;
z-index: 0;
}

.mainAreaLoading {
position: absolute;
top: 40px;
left: 0px;
width: 500px;
height: 300px;

z-index: 1;
}

Ok, now that the backend is all there, we need to do the difficult part (probably the easy bit for everyone else!), making the HTML page.

Load Content 1
Load Content 2

This is the content that will be visible at the very beginning.

Loading Please Wait…

Now for the little explaination
Basically the loading ‘div’ area is always there, it is just hidden from view, so when you call the ’startLoading()’ function it shows it, then hides it after the allotted time.
Adding new ‘cases’ to the rpc.php file will allow more content to be loaded

Example and Code
Content Loading Example
RPC.php Source Code

Get the Full Code in a ZIP Here.

– If you are using this script, i would greatly appreciate it if you referenced http://nodstrum.com in your sourcecode –

Image Manipulation using PHP and ImageMagicK

Jamie — Tue, 06 Feb 2007 17:46:06 +0000

So there were a couple of problems with my last image processing functions (http://nodstrum.com/2006/12/09/image-manipulation-using-php/).

1. If you were trying to process a massive image > 1024pxÃ—768px it failed.
2. I only accounted for people processing Jpegs.
3. CPU spikes, because of the amount of processing that is being done with the image the CPU is really taking a hit.
4. The functions were really quite long.

These new function will use ImageMagicK, not all servers have ImageMagicK installed by default, check with your hosting provider.

So, here are the functions…

Thumbnail

function createThumbIMK($img, $imgPath, $thumbDir, $suffix, $newWidth, $newHeight) {
// add in the suffix after the ‘.’ dot.
$newNameE = explode(".", $img);
$newName = ”. $newNameE[0] .”. $suffix .‘.’. $newNameE[1] .”;

// ImageMagicK doesnt like ‘/’ and ‘x’ characters in the command line call.
$uploadedImg = ”. $imgPath .‘/’. $img .”;
$newThumb = ”. $thumbDir .‘/’. $newName .”;
$newRes = ”. $newWidth .‘x’. $newHeight .”;

// This makes a command line call to ImageMagicK.
// My path to ImageMagicK Convert is ‘/usr/lib/php/bin/convert’
// ‘convert’ is a program (UNIX) so no forward slash.
$ct = system("/usr/lib/php/bin/convert -resize $newRes $uploadedImg $newThumb", $retval);

return $ct;
}

Resize

function createResizedIMK($img, $imgPath, $thumbDir, $suffix, $by) {
// add in the suffix after the ‘.’ dot.
$newNameE = explode(".", $img);
$newName = ”. $newNameE[0] .”. $suffix .‘.’. $newNameE[1] .”;

// ImageMagicK doesnt like ‘/’ and ‘x’ characters in the command line call.
// And workout the size based on ‘$by’.
$uploadedImg = ”. $imgPath .‘/’. $img .”;
$newResized = ”. $reduceDir .‘/’. $newName .”;
list($width, $height, $type, $attr) = getimagesize("$imgPath/$img");
$newWidth = ($width/$by);
$newHeight = ($height/$by);
$newRes = ”. $newWidth .‘x’. $newHeight .”;

// This makes a command line call to ImageMagicK.
// My path to ImageMagicK Convert is ‘/usr/lib/php/bin/convert’
// ‘convert’ is a program (UNIX) so no forward slash.
$cr = system("/usr/lib/php/bin/convert -resize $newRes $uploadedImg $newResized", $retval);

return $cr;
}

!! Important: you must ensure that when you pass $img to the functions that it has no spaces in it… here is an example (replacing spaced with ‘_’ underscores. Also dont forget to rename the actual file. !!

$imgSafe = str_replace(" ", "_", $img);
rename("$dir/$img", "$dir/$imgSafe");

Here are some examples.
Building Original (916K (2576×1932))
Building Thumb (20K (120×90))
Building Resized and Reduced (71K (515×386))

Transparency in IE6 and Other Browsers :)

Jamie — Fri, 02 Feb 2007 10:06:44 +0000

This post will cover backgrounds (for DIVs) and transparent images (.PNGs)

As we ALL know; IE6 poses far too many challenges for designers, resulting in seperate stylesheets and hacks.
I found the need for a transparent background with links on top of it, in Firefox & Safari (and IE7) PNGs are supported, so all worked fine, but when tried with IE6, Yea, there were PROBLEMS! No PNG support and links within the transparent window disappeared.

There are links to the PNGs and Demos at the bottom of the post.

This is the difinitive way to make transparency work with all browsers!

CSS code for STANDARD supporting browsers (Firefox, Safari).

.transparent {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 250px;
border: 1px solid #000;

background: url(‘../images/blackTransparent80.png’);

z-index: 1;
}

CSS code for IE6 (hack). this is put in the style-sheet as well.
(The ‘*html’ only works on IE and is ignored by all other browsers.)

*html .transparent {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 250px;
border: 1px solid #000;

background: none;
filter:progid XImageTransform.Microsoft.AlphaImageLoader(src=‘images/blackTransparent80.png’, sizingMethod=’scale’);

z-index: 1;
}

This code is the code for the DIV

nodstrum.com

blue44.com

teenfirst.com

Here are the links to my pre-made transparent backgrounds and the demos.
Transparency Demo – White
Transparency Demo – Black
White 80% Transparent PNG (1px x 1px)
Black 80% Transparent PNG (1px x 1px)

Enjoy!

Calendar System – Easily using PHP & Script.aculo.us

Jamie — Mon, 29 Jan 2007 21:37:48 +0000

THIS HAS BEEN UPDATED, PLEASE SEE THIS POST: http://nodstrum.com/2007/06/27/mysql-calendar/

Hi,

Quite a few people seemed to like my previous tutorial Image Manipulation using PHP, and looking around many of the tutorial sites there are hardly any Calendar systems. Perfect, here is a simple, in calendar terms one…
You’ll see what i mean.

At the bottom of this tutorial there is a link to the ZIP and the test site.

There are 3 main parts, the Javascript, the HTML and the PHP script.
For this tutorial i am making it so you can change the date with the form and it will update the calendar without having to reload the entire page, AJAX style.

First we need the Script.aculo.us library, if you download my zip test file it is already included, but if not go to: http://script.aculo.us

This is the basic HTML page with the style sheet.
The stylesheet is important because it contains the .calendarFloat part.
The important part is the < div id=”calendarInternal” > this is where the calendar will be loaded into, its in its own < div > because we need to clear the float to enclose the calendar and make the box enclose the entire calendar.

Next is the Javascript that has to be added to the Head of the document.
This does the highlighting and loading of the calendar using the script.aculo.us

The 2nd to last part is the RPC page, its not truly an RPC (remote procedure call) page, i just call it that because it is distinct.
I use a switch statement because my function is normally enclosed in a huge page, so here goes.

$action = $_POST[‘action’];
switch($action) {

case ’startCalendar’:
$month = $_POST[‘month’];
$year = $_POST[‘year’];

if(($month == 0) || ($year == 0)) {
$thisDate = mktime(0, 0, 0, date("m"), date("d"), date("Y"));
} else {
$thisDate = mktime(0, 0, 0, $month, 1, $year);
}

echo ‘

‘;

// Display the week days.
echo ‘

Mon

Tue

Wed

Thur

Fri

Sat

Sun

‘;

// Show the calendar.
for($i=0; $i("t",>
{
$thisDay = ($i + 1);
if(($month == 0) || ($year == 0)) {
$finalDate = mktime(0, 0, 0, date("m"), $thisDay, date("Y"));
$today = mktime(0, 0, 0, date("m"), date("d"), date("Y"));
$fdf = mktime(0, 0, 0, date("m"), 1, date("Y"));
$month = date("m");
$year = date("Y");
} else {
$finalDate = mktime(0, 0, 0, $month, $thisDay, $year);
$fdf = mktime(0, 0, 0, $month, 1, $year);
}

// Skip some cells to take into account for the weekdays.
if($i == 0) {
$firstDay = date("w", $fdf);
$skip = ($firstDay – 1);
if($skip < 0) { $skip = 6; }

for($s=0; $s<$skip; $s++)
{
echo ‘

‘;
}
}

// Make the weekends a darker colour.
if((date("w", $finalDate) == 0) || (date("w", $finalDate) == 6)) {
$bgColor = ‘#CCC’;
} else {
$bgColor = ‘#f0f2ff’;
}

// == Add any database query here using $finalDate as the timestamp for this date.

// Display the day.
echo ‘

$thisDay .‘" style="cursor: pointer">

onMouseOver="highlightCalendarCell(‘calendarDay_‘. $thisDay .’‘)"
onMouseOut="resetCalendarCell(‘calendarDay_‘. $thisDay .’‘)">
’. $thisDay .‘

‘;
}
break;
}

The final part is the one that ties it all together. This javascript is placed at the bottom of the page, within the < body > tags.

Now for a short explaniation…
If startCalendar(0,0) is called like so, with zeros, it defaults to the current month, if you have a look at the RPC file, at the top, you will notice there is a line that is if $month == 0 and $year == 0, then the date is date(“m”); (i think).

Next we are making the form for selecting the month and year, at the same time making the selected month and year (gotten by $month and $year) the current ones in the drop doen boxes.

Now we are just displaying the days of the week so the calendar is readable.
Now the difficult part, determining the timestamp incase we want to use the database.
Skipping some days to take into account days from the previous month, so the 1st of the month starts ont he proper week day, thats a tough one.
Then its just spitting out the calendar.

And here is the Piece De Resistance, if you can call it that…
http://res.nodstrum.com/calendar/

And now for the downloads:
Calendar System ZIP

Image Manipulation using PHP

Jamie — Sat, 09 Dec 2006 14:24:57 +0000

I have been trawling around the internet looking for some simple functions for do basic automated manipulation to some images im using.

if you want to skip straight to the examples just to prove im not bulls**ting skip to the bottom

Basically i wanted to have these functions:
1. thumbnail
2. resize (actual image)
3. reduce (image file size)
4. rotate (by degrees)

Most of the scripts i found couldnt be changed easily to make them do what i wanted…
So here are what i got working.. and a few instructions…

Create a thumbnail

function createThumbnail($img, $imgPath, $suffix, $newWidth, $newHeight, $quality)
{
// Open the original image.
$original = imagecreatefromjpeg("$imgPath/$img") or die("Error Opening original");
list($width, $height, $type, $attr) = getimagesize("$imgPath/$img");

// Resample the image.
$tempImg = imagecreatetruecolor($newWidth, $newHeight) or die("Cant create temp image");
imagecopyresized($tempImg, $original, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height) or die("Cant resize copy");

// Create the new file name.
$newNameE = explode(".", $img);
$newName = ”. $newNameE[0] .”. $suffix .‘.’. $newNameE[1] .”;

// Save the image.
imagejpeg($tempImg, "$imgPath/$newName", $quality) or die("Cant save image");

// Clean up.
imagedestroy($original);
imagedestroy($tempImg);
return true;
}
?>

Rotate

function rotateImage($img, $imgPath, $suffix, $degrees, $quality, $save)
{
// Open the original image.
$original = imagecreatefromjpeg("$imgPath/$img") or die("Error Opening original");
list($width, $height, $type, $attr) = getimagesize("$imgPath/$img");

// Resample the image.
$tempImg = imagecreatetruecolor($width, $height) or die("Cant create temp image");
imagecopyresized($tempImg, $original, 0, 0, 0, 0, $width, $height, $width, $height) or die("Cant resize copy");

// Rotate the image.
$rotate = imagerotate($original, $degrees, 0);

// Save.
if($save)
{
// Create the new file name.
$newNameE = explode(".", $img);
$newName = ”. $newNameE[0] .”. $suffix .‘.’. $newNameE[1] .”;

// Save the image.
imagejpeg($rotate, "$imgPath/$newName", $quality) or die("Cant save image");
}

// Clean up.
imagedestroy($original);
imagedestroy($tempImg);
return true;
}

Resize

function resizeImage($img, $imgPath, $suffix, $by, $quality)
{
// Open the original image.
$original = imagecreatefromjpeg("$imgPath/$img") or die("Error Opening original ($imgPath/$img)");
list($width, $height, $type, $attr) = getimagesize("$imgPath/$img");

// Determine new width and height.
$newWidth = ($width/$by);
$newHeight = ($height/$by);

// Create the new file name.
$newNameE = explode(".", $img);
$newName = ”. $newNameE[0] .”. $suffix .‘.’. $newNameE[1] .”;

// Save the image.
imagejpeg($tempImg, "$imgPath/$newName", $quality) or die("Cant save image");

// Clean up.
imagedestroy($original);
imagedestroy($tempImg);
return true;
}

Reduce

function reduceImage($img, $imgPath, $suffix, $quality)
{
// Open the original image.
$original = imagecreatefromjpeg("$imgPath/$img") or die("Error Opening original ($imgPath/$img)");
list($width, $height, $type, $attr) = getimagesize("$imgPath/$img");

// Create the new file name.
$newNameE = explode(".", $img);
$newName = ”. $newNameE[0] .”. $suffix .‘.’. $newNameE[1] .”;

// Save the image.
imagejpeg($tempImg, "$imgPath/$newName", $quality) or die("Cant save image");

// Clean up.
imagedestroy($original);
imagedestroy($tempImg);
return true;
}

The simple instructions I used for the examples

$thumb = createThumbnail($img, $imgPath, "-thumb", 120, 100, 100);
$rotate = rotateImage($img, $imgPath, "-rotated", 270, 100, 1);
$resize = resizeImage($img, $imgPath, "-resized", 2, 100);
$reduce = reduceImage($img, $imgPath, "-reduced", 70);
?>

Those are the function calls i used to create the images linked to below.

createThumbnail variables
image file
image file path
suffix to append to the name before the .jpg
thumbnail width
thumbnail height
thumbnail quality

rotateImage variables
image file
image file path
suffix to append to the name before the .jpg
degrees to rotate (anticlockwise i think) by
image quality
save or not (if you wanted to output to a temp to preview, i dont use it, so leave as 1

resize variables
image file
image file path
suffix to append to the name before the .jpg
resize by (i used 2 which i thought was half.. not so hot on the maths)
image quality

reduce variables
image file
image file path
suffix to append to the name before the .jpg
quality (100 best, 0 worst… Duhh).

Here are the links to my examples
Original File (904k (1840×1232))
Thumbnail (16k (120×100))
Resized and Reduced (24k (368×246))