Validate IP Addresses in PHP

Let’s say you were given a task to validate an IP address in a custom script. One approach is to use regular expressions and use pattern matching to see if user input is correct or not. In this example, we will use a regular expression below to validate IP addresses.

We assume user input is done via a form. First things first, we need to sanitize the input. Once sanitized, we can then test the input against the regular expression using a PHP function called the ereg().

// the regular expression for valid ip addresses
$reg_ex = '/^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/';
// sanitize input from form
$ip_address = addslashes(htmlspecialchars(strip_tags(trim($_POST['ip_address']))));
// test input against the regular expression
if (ereg($reg_ex, $ip_address)) { 
   // ip address is valid
} else {
   // ip address is not valid
}

The result is, we now have a facility to check the validity of IP addresses. We can now perform additional steps when the IP address is valid, or display errors if the IP address is invalid.

JQuery Datepicker

Typing in dates in a date field is never fun. It’s cumbersome. There is always a possibility of typing in the wrong format. There are far superior techniques that can be used and implemented when populating date fields.

JQuery is one tool that can be used to format date fields. JQuery is a set Javascript libraries that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

JQuery has a component called JQuery UI, that provides low-level interaction like animation, advanced effects and themeable widgets use to build highly interactive web applications.

1. Download JQuery UI.

You can build your own custom JQuery scripts directly from JQuery’s website. You can select which feature you want installed. You can also select a specific theme. By selecting only the theme and features that you want, you can create a lean, strip-down version of JQuery. The download will include the following folders: css, js, development-bundle.

2. A Sample Datepicker Page

I created a simple HTML page that display how Datepicker works. In this example, I’m referencing Jquery UI from a local file. You can use a CDN if you want. I’m using the Smoothness theme and its supplied CSS.

The HTML input form needs to have an ID. In this case, we are using the id=”datepicker” for the date field. We are forcing the datepicker to use the ISO 8601 format which is “yy-mm-dd.”

<link href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
// <![CDATA[
  $(function() {
  $( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
  });
// ]]>
</script>

Here’s a demo.

HTML Redirect

Redirecting a web page to another page or domain is quite easy. All you have to do is create a simple HTML page with the code below. The code that actually does the redirecting is meta http-equiv=”refresh” command. Substitute “domain.com” with your own target url or domain. The number that you see is the amount of delay. “0” means immediate, “1” is one second delay, and “5” is five second delay before being redirected.

Here’s the full code:

<!doctype html>
<html>
<head>
<meta http-equiv="refresh" content="0;url=http://domain.com">
</head>
<body>
</body>
</html>

Give Fluxbox A Try

Are you getting tired of running Unity, Gnome or KDE on your Ubuntu desktop? Try Fluxbox, a windows manager that is light on resources. Fluxbox is based on Blackbox. It’s extremely easy to use. If you are looking for an alternative to Unity, Gnome or KDE, then you should give Fluxbox a try.

How To Install Fluxbox

To install Fluxbox, you can access the Ubuntu Software Center and search for Fluxbox, and then Click Install. If you prefer the Terminal, you simply type the following command:

sudo apt-get install fluxbox

Start Fluxbox

To start Fluxbox, you will need to log out of your current windows manager. There is no need to reboot your computer. You will be taken to the Ubuntu Login screen instead. You can choose Fluxbox instead of your default windows manager. Mine was originally set to Gnome.

Right Click

Once inside Fluxbox, you can access everything using the left click of your mouse. Fluxbox has a simple menu that is accessible anywhere on the screen. Just right click and select any application that you want.

Adding to the Menu

Not everything is on the menu. You may have to add a few things. It’s easy. The file is located in ~/.fluxbox/menu. You may want to edit it and add your own entries.

vi ~/.fluxbox/menu

It uses the following format:

[exec] (Gimp) {/usr/bin/gimp}

Change Background Image

You can change background by typing this command on the Terminal:

fbsetbg -f path/to/file/image.jpg

In addition, you can also change themes. Just right click and select Styles. Choose one from about 25 different themes. I happen to like bora_black.

Give Fluxbox a try. If you don’t like it, you can always go back to your default windows manager. If you like it, you might want to stick around for a while. Enjoy the fast response of Fluxbox.

Multiple Columns in HTML5 and CSS3

Creating a multiple column pages is so much easier now with HTML5 and CSS3 than was previously possible. Consider if you have a page with 200 unordered lists. The HTML markup for this would be something similar to this:

Unordered List

<ul>
<li>1</li>
<li>2</li>
and so on….
<li>200</li>
</ul>

As you’ve noticed, I’ve abbreviated the markup. The page rendered will be long. It will take some scrolling down to get to the bottom of the page. The obvious solution for this page layout is to display the data in multiple columns.

Displaying two to three columns is ideal. You can add more if you like. It really depends on how you want to layout your page. How do we add multiple columns on our pages? It’s quite easy. You’ll be surprised how simple it is.

First, let’s add a class div to our markup. In this example, we will call our div “data.” Our markup will now look like the example below. It’s relatively unchanged, except for the div we’ve just added.

HTML5 Markup

<div class=”data”>
<ul>
<li>1</li>
<li>2</li>
and so on….
<li>200</li>
</ul>
</div>

CSS3 Markup

The magic is really in CSS. It’s ideal to place a width in your class div, unless your class div is already inside another div that already has a width limit. We can then set a limit how wide we want our columns widths and column gaps.

I’m using a div with a width of 500px because it goes well with the 150px columns widths and 25px column gaps. You probably already guessed, the column widths are how wide the columns are, and the gaps are the spaces between column widths.

.data {
  width:500px;
  -moz-column-width:150px;
  -webkit-column-width:150px ;
  -moz-column-gap: 25px;
  -webkit-column-gap: 25px;
}

Give It A Try

Give it a try. Adding multiple columns in HTML5 and CSS3 is much easier than was previously thought. Create a simple page with some sample data. Add a class div and use the CSS3 multiple column styles to it.

Compatibility

The code has been tested with Mozilla Firefox, Google Chrome and Apple’s Safari. I haven’t tested it with any Internet Explorer. I’ll be curious if it works with IE 7, 8 or 9.

Here’s a demo of a page using the multiple columns.

Add Focus To HTML Forms

When you visit Google.com, you probably noticed that the mouse cursor jumps to the searchbox, ready for users to type and submit a search. This method is called form focus. It’s made possible by using Javascript. With Javascript, you can set certain elements of the HTML form to be set in focus. This is particularly helpful for pages where there is minimal content, and the intent of the web developer/designer is to get the user to enter data and submit quickly. A login page is a perfect example of such a page.

You can bring into focus the username field, so users can start typing their login credentials. The form focus saves users from finding the mouse cursor on the screen, and then clicking on the field. With form focus, users are already on the form, ready to input text and submit. If the user presses Tab, the cursor jumps to the next field, which happens to be the password field. Pressing Enter, simply submits the form to start the login process. This article will show you the most simple way to add form focus to your HTML forms. Consider a login page. It has two fields: username, password, and a Submit button. The HTML markup is:

<form method="post' action="submit.php">
<label for="username">Username: </label>
<input type="text" name="username" />
<label for="password">Password: </label>
<input type="password" name="password" />
<input type="submit" name="submit" value="Login" />
</form>

How To Add Focus To Forms

1. Assign an ID to the form. We are using an id of “login” in this example.

<form id="login" method='post' action="submit.php">

2. Add IDs to the fields.

<input id= "user" type="text"  name="username" />
<input id= "pass" type="password" name="password" />

3. Add Tab Index to the fields. Notice the order starting with 1 and then 2.

<input id= "user" type="text" name="username" tabindex="1" />
<input id= "pass" type="password" name="password" tabindex="2" />

4. Add Javascript at the end of the form.

<script type=”text/javascript” language=”JavaScript”>
document.login.user.focus();
</script>

Where login is the id of the form, and user is the id of the field.

Final Form

<form id="login" method="post" action="submit.php">
<label for="username">Username: </label>
<input id="user" type="text" name="username" tabindex="1" />
<label for="password">Password: </label>
<input id="pass" type="password" name="password" tabindex="2" />
<input type="submit" name="submit" value="Login" />
</form>
<script type="text/javascript" language="JavaScript">
document.login.user.focus();
</script>

This is just one way of adding form focus to HTML forms. There are other methods, like using body onload and such, but I find this method the cleanest and the most simple one to implement by far.

Resize Images Using CSS

This is an older CSS trick that is worth repeating. Back in the days, resizing images was done via HTML height and width options. Here’s an example below. We will resize the image to 100 x 100 pixels.

HTML

<img src="example.jpg" width="100" height="100" alt="example" />

The problem with this approach is, first, we will lose image quality when resizing regardless of which direction we go, either up or down. The resized image is never going to be as good as the original. Second, there’s a good chance the image will NOT be proportioned. We have to be constantly be aware of image ratios when resizing images.

CSS

So, here comes CSS to the rescue. We will assign a class called “image” to our image.

<img class="image" src="example.jpg" alt="example" />

Next, we will apply CSS to our “image” class.

.image { width: 400px;height : auto; }
.image { width: auto;height : 600px; }

The result is, a well-porportioned image that is never going to be wider than 400px or taller than 600px. In addition, we maintain the standard dimension for all images using the “image” class.