Permissions To Webroot

I was wondering about the best way to implement and give permissions to webroot, also known as the root directory of your web server. I’m familiar with Ubuntu’s structure, so I’ll use Ubuntu’s default webroot directory, which is /var/www.

Based on numerous documents and discussions I’ve read online, the proper way to give permissions to webroot is to (1 ) add a user to the www-data group, (2) change webroot’s ownership to www-data, (3) give all members of www-data group read and right access.

ulysses = user
webroot = /var/www
www-data = user and group for Apache

Here are the commands to run from the Terminal.

Step 1

Add new user to the www-data group.

sudo adduser ulysses www-data

Or

Add existing user to the www-data group.

sudo usermod -a -G www-data ulysses

Step 2

Make www-data the group owner of /www/data

sudo chown -R ulysses:www-data /var/www

Step 3

Give members of www-data permissions.

sudo chmod -R g+rw /var/www

That’s it. Pretty straightforward.

Linode Kicks Ass

Get a web server running within minutes. Choose a Linux distro, resources, and node location. That’s essentially Linode in a nutshell. I signed up with Linode about two weeks ago. I’ve been playing around with it since then. I can happily say that I’m very impressed with Linode. It has exceeded my expectations.

If you want total control of your web server, Linode VPS is really the way to go. You will be asked to choose server size when you sign up. They come in many configurations. I chose Linode 512. You also need to choose a data center location. There are six data centers worldwide. I choose the one in Fremont since I live in California.

So far, I’m loving the guaranteed server resources. My websites are running faster . I chose Ubuntu 12.04 LTS 32 bit because it’s a Linux distro I am very familiar with. Apparently, 57% Linode users have chosen Ubuntu as well. I already transferred a couple of domains over to Linode. The websites are screaming.

I plan to migrate more websites later. If you are curious about how Linode works, here is a short list of features to get you started:

  • Full ssh and root access
  • Guaranteed Resources
  • 4 processor Xen instances
  • Out of band console shell
  • Dedicated IP address, premium bw
  • Six datacenters in the US, Europe, and Asia-Pacific
  • HA and Clustering Support
  • Bandwidth pooling
  • Managed DNS with API

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.

Redirect With Cancel Button

When working with HTML Forms, a Cancel button is sometimes handy when you want to reset a form. It deletes the user’s input and displays the same form again. This is particularly helpful to users that want to reset a form from scratch and start with a new form entry.

Here’s a simple HTML page called “form.html” that uses the “post” form method and uses an action to itself – the same page which is “form.html.” The form also contains a Cancel button which will be rendered using the input markup below. Notice the input type is set to “submit.”

Cancel Button To Reset Form

<html>
<head>
<title>Form</title>
</head>
<body>
<form method="post" action="form.html">
<label for="firstname">Firstname:</label><br/>
<input type="text" name="firstname" value="" />
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="cancel" value="Cancel" />
</form>
</body>
</html>

Redirect With The Cancel Button

To use redirect with the Cancel button, we will use a simple Javascript event called “onclick=window.location” to send the user to another page called “anyfile.html.” We can also redirect the user to another domain if we want to such as “http://google.com.” Notice the input type is now changed from “submit” to “button.” This is very important. The input type needs to be set to “button,” otherwise our redirect will never work.

<input type="button" name="cancel" value="Cancel"
onclick="window.location='anyfile.html'" />

This is just a simple way to redirect users with the Cancel button. There are other ways of redirecting users such as using Javascript functions, etc., but it’s beyond the scope of this article.