Make login page - protect web site sections / content

This article will help you make a login page even if you don't know any programming. Obviously, when things have been oversimplified, there have to be some 'catches', right? And yes there are. It's assumed that, firstly, your web site is running on the Apache web server. And secondly, the control panel through which the web site is administered has a "password protect directory" (or equivalent) feature.

Most of my web sites are hosted on Hostgator and Lunarpages servers. Both these companies provide the directory protection tool in the control panel. If your web site is hosted by another company (and there are high chances of it being so), I suggest you get in touch with their technical support. Or just login at the control panel and check it out yourself. Don't have access to a password protect directory tool from the control panel? No problem; you can still make a login section. As long as the server is running Apache, you can use a password file and upload it using FTP - read the last paragraph to know more.

Use directory protect to make people login to view sensitive information

The screenshots are presented in a slideshow below. These have been taken from the Lunar Pages web hosting control panel and might be different for you in which case I advice a dash of common sense.

• Login at the web site control panel.
• Click on "Password Protect Directories" or an equivalent option - [Slide 1].
• You will be presented with the list of directories in your web site space - [Slide 2].
• Now move down the tree and open the directory you want to protect. Remember, you need to click on the directory name and not the small folder icon in front of it - [Slide 3].
• Put a check mark in the box - "Directory requires a password...". Now enter a Protected Resource Name (I soon tell you where this is used) and click the "Save" button - [Slide 4]. The directory of your choice is protected - [Slide 5].
• It's time to add login information (username and password) so that people can access the contents of this folder. Populate the User Name and Password fields and hit the "Add/modify authorized user" button to get a confirmation from the system - [Slides 6 and 7].
• The user you've added ("sherlock", in the screenshot) will be added to the list - [Slide 8]. FYI, you can add more users if you so want - simply repeat the steps of providing the username and password - [Slide 9]. The "Delete" button will get rid of the user - [Slide 10].

Testing your login page

Technically, you don't make a login page but rather create a protected area. The username and password fields will be presented to the visitors when they want to access content in this shielded section. The login information is requested through a small pop-up window displayed by the browser. The look and feel of this window depends entirely on the browser - [Slide 11].

Open a browser window and go to the directory. You shall see the small pop-up login window. Enter the username and password (of any user) to access the information in this folder.

Example of a login page made with this method

Click "Top Secret Area" to access the protected area I've made with the steps detailed above. I've added two users each having their own username/password combination.

• Username: sherlock     |      Password: Holmes
• Username: ellery     |      Password: Queen

The method detailed uses HTTP authentication - a cool techie term to impress your friends with. And as I mentioned before, it will work if your web site is on the Apache web server. FYI, almost half of the world's web sites are running on Apache - check the Netcraft survey. With HTTP authentication you make a login page on your web site to protect the contents of an entire directory.

Make .htaccess and .htpasswd files online

You don't need to tinker around much with Apache files and settings to make a login page. Simply use Htaccess Tools free service to create .htaccess and .htpasswd files. Check the Htpasswd generator on the web site.

The .htaccess file placed in the protected directory once you make the login window looks something like the one below:

AuthType Basic
AuthName "REALM"
AuthUserFile "PATH-TO-THE-PASSWD-FILE"
require valid-user

The REALM is the protected resource name - Secret Information in our example. It is displayed in the small login pop-up window. As mentioned before, the layout and 'prettiness' of this window depends solely on the web browser and you have little control.

The PATH-TO-THE-PASSWD-FILE points to the location of the file that stores the username and passwords of users who can access the protected area. The file is, typically, tucked away in a safe directory on your web space. Though the file can be opened and viewed in a simple text editor, the actual password is encrypted.