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.