0

Simple random password generator in PHP


By: Marijn Rongen
December 8th, 2009

Lately I have encountered the need for random password generators in several of my clients’ projects. Applications vary from anti-spambot security codes to automatic password generating. To retain a flexible solution applicable in all those circumstances and more I have created a simple function in PHP.

The function can be called with 2 arguments, the first controlling the lenght of the output string and the second sets the allowed characters. Both of these are optional, if you call the function without arguments a six character long alphanumeric string will be generated.

function generatePassword($length = 6,
		$chars = '0123456789abcdefghijkmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')
{
	$password = '';
	$char_length = strlen($chars);
	srand((double)microtime()*1000000);
	for ($i = 0; $i < $length; $i++)
	{
		$num = rand() % $char_length;
		$password .= $chars[$num];
	}
	return $password;
}

The following line can be omitted when using PHP 4.2 or higher:

srand((double)microtime()*1000000);

The seeding of the random number generator happens automatically in later versions.

Below are some examples to demonstrate what this function can do for you.

generatePassword(); // May return: 9inhpS

generatePassword(8, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'); // May return: UYHCCZBD

generatePassword(4, '0123456789'); // May return: 2561

If you found this helpful or have any improvements I would love to hear it!

2

Valid cross browser CSS drop-down menu


By: Marijn Rongen
December 4th, 2009

For this blog (a previous, self-programmed version) I created a menu with drop-down menus. I’m not ashamed to admit the main inspiration for the menu was DannyChoo.com.
I did however set out to build this menu by my own design, without the aid of JavaScript, it should be (X)HTML & CSS valid and be as compact as possible.

What I came up with is tested and proven to work on Safari 4, Firefox 3.5, Opera 10, Google Chrome and Internet Explorers 7 & 8. It has been proven not to work on Internet Explorer 6, and I really can’t be bothered to fix that as people should not be using that browser anymore.

Dropdown menu

The menu gets created by PHP depending on the active content within the site, while writing this article the (X)HTML code created looks like:

<div id="menu_bar">
	<div>
		<a href="http://www.marijnrongen.com">Home</a>
	</div>
	<div>
		<a href="/category">Categories</a>
		<div>
			<a href="/category/about">About</a>
			<a href="/category/Active-Bits">Active-Bits</a>
			<a href="/category/celica">Celica</a>
			<a href="/category/random stuff">Random stuff</a>
			<a href="/category/Tips">Tips</a>
		</div>
	</div>
	<div>
		<a href="/month">Archive</a>
		<div>
			<a href="/month/09_12">December 2009</a>
			<a href="/month/09_11">November 2009</a>
			<a href="/month/09_09">September 2009</a>
			<a href="/month/09_01">January 2009</a>
			<a href="/month/07_08">August 2007</a>
		</div>
	</div>		
</div>

I put this piece of code after the content in the page so a submenu will cover the content once opened.
It is a simple structure, a positioned div element (div#menu_bar), this controls the position of the entire menu. That element can contain several div elements (div.menu) with each one link and an optional div element (div.submenu). This optional div element may contain multiple links.

The CSS is kept as compact as possible, I have omitted the color, background and text formatting declarations for clarity.

#menu_bar
{
	float:left;
	position:absolute;
	top:30px;
	left:50%;
	width:960px;
	margin:0 0 0 -480px;
}

This simply sets the position of the div containing the menu to be 30 pixels from the top and 480 pixels to the left of the center. Exactly where I need it.

div.menu
{
	float: left;
	width: auto;
	height: 20px;
	margin: 0;
	overflow: hidden;
}

div.menu:HOVER
{
	height:auto;
}

Here is where the opening and closing happens. The height is set at a fixed 20 pixels and overflow is set on hidden. This way only the first link element will be visible.
The height is set at auto in the HOVER state, which will overide the fixed 20 pixels height and shows all the content within the element when the mouse moves over it.

.submenu
{
	float: left;
	width: auto;
	padding: 5px 0 5px 0;
}

The sole purpose of this bit is to be able to give the submenu a seperate style. In my case a bit of top and bottom padding.

.menu a,.submenu a
{
	display:block;
	height:18px;
	padding:2px 5px 0 5px;
	margin:0 5px 0 5px;
}

The last bit is to neatly position the links with some paddings and margins.

Thats it!

If you have learned something from this post, or have applied this concept, I would love to hear from you.
Of course, any comment or improvement is most welcome.

0

Creating valid cross-browser CSS using PHP


By: Marijn Rongen
November 17th, 2009

Every webdesigner or -programmer knows it is usually necessary to give special care to some specific browsers when making an interface cross-browser compatible. In the case of Internet Explorer 6 having no extra measures is an exeption. Luckily Internet Explorer 7 behaved better and 8 even more so, but still there is their annoying older who will be around for some time to come.

Solutions range from completely seperate stylesheets for every single browser or conditions or hacks to make certain parts of a stylesheet readable only by a specific browser. The former forces you to check which browser is used on every page load and the latter will likely cause your css to become invalid.

The solution I prefer takes advantage of the way CSS is interpreted. You should understand that CSS is read from top to bottom and the latest declarations are applied. So if you have 2 “color” declarations for one selector the latest declaration will be applied.

For more information on stylesheets visit the CSS section at w3schools.com.

I use PHP to output the CSS we need depending on the browser. This means I only have to call one PHP-generated stylesheet, and have the browser specific attributes in seperate .css files. I usually put the .css files in a folder called “layout/”, this example is no different. The .php file (style.php) should be in the same folder as your .css files.

				
<link href="layout/style.php" rel="stylesheet" type="text/css" />

As you can see it is linked to the page the same way as other external stylesheets.

The PHP code is very simple but effective. First it identifies its content as CSS using the header() function and loads the content of my main stylesheet (style.css). It then checks to see if the browser is Internet Explorer. The last check is to make sure the version of Internet Explorer is 6 or lower, and that the IE6 specific stylesheet (style_ie6.css) exists. If that is all true it loads the IE6 specific stylesheet. This stylesheet only contains the classes and attributes that differ from the main stylesheet.
The code is as follows:

<?php
	header("Content-type: text/css");

	include 'style.css';
	$agent = $_SERVER['HTTP_USER_AGENT'];
	if (eregi("msie",$agent) && !eregi("opera",$agent))
	{
		$val = explode(" ",stristr($agent,"msie"));
		$version = explode(".",$val[1]);
		if ($version[0] <= 6 && file_exists('style_ie6.css'))
		{
			include 'style_ie6.css';			
		}
	}
?>

If you also have a .css file for another browser, you can simply add more checks for those specific browsers.

Feel free to comment if you have any questions or remarks about this post.