the  
GATEKEEPER
v3.2
Part 2
Part 1 | Part 2 | Part 3 | Part 4 (GateKeeper-II) | Version 2.2
Installation Overview | HTTP Authentication | The Vault

All rightee then. Got it to work? Good. Now we'll start fiddling with the knobs.

The first thing we'll do is change the password. Change frumpy.html to glimmerman.html. The password is now glimmerman.

Try it here.

Let's do it again. (You would not believe how many people email me and ask how to change the password.)

Change glimmerman.html to fanny.html. The password is now fanny.

Try it.

Very good. Now we'll change the name of the target document to myclub.html. First, rename hideout.html to myclub.html. Then open fanny.html and change the target variable to myclub.html... 

[snip]...

// Replace sluggo/hideout.html below with the directory/filename of the destination page.
var target = "sluggo/myclub.html"

...[snip]

The password is still fanny, but now it takes you to myclub.html. Try it here. (The page still looks the same of course... you can change that some other time. Just notice that it went to myclub.html rather than hideout.html.)

Also you can change the secret directory from sluggo to mrbill. 

[snip]...

// Replace sluggo/hideout.html below with the directory/filename of the destination page.
var target = "mrbill/myclub.html"

...[snip]

This is one of the neat improvements of v3.2 over v3.1. In previous versions, if you changed password every so often, an old user could still access the target documents directly. With this improvement, you would change both the password AND the directory. Now an old user would get nothing. If you have multiple users each using a different password, you can do an occassional Search & Replace across all the password docs changing "sluggo" to something else. This doesn't affect current users at all, but anyone who is attempting to access the secret docs directly will be stopped.

Try it. (password is fanny)

To explain further... the password doc points to the secret pages which reside in a secret directory. Change the name of the secret directory and you immediately "re-hide" all the secret documents...

If you have several members each using a different password document, old members won't be able to access any of the secret documents after you change the name of the secret directory. Remember, if you have multiple password docs, every time you change the name of the secret directory, you must also run a Search & Replace on all the password docs (changing sluggo to mrbill, etc)

A couple things I want to mention here. First notice that unlike version 1 and 2 of GateKeeper, the password is not the name of the ultimate target document. It's the name of an intermediate document. Once loaded in the invisible GateKeeper frame, that intermediate document then loads the ultimate target document in the main browser window.

Second, keep in mind that most of the time, file names are case sensitive. Get in the habit of using all lower case filenames with no spaces. (If you want a space, use an underscore instead... jim_dandy.html)

A third thing to point out is that you should definitely make up your own password and target directory/document name. Don't leave them as frumpy, fanny, hideout, sluggo or myclub. If someone wants at your stuff, and they've read this tutorial, they might try those words just for the heck of it. If you're still using these words then... he gets your stuff. (don't rename gatemain.html, gateblank.html, or gatehelp.html. None of these will do an intruder any good and changing those names will break the script.)

OK, moving right along... Let's make a password protected page completely from scratch. First make a new directory (folder). For now, call it stuff. Also make a new subdirectory in stuff and name it gwbush.

Let's say in stuff you have a document that points to a chat room and you want to protect it with the password gabby. Copy the following and save it as index.html. (Of course you can name it whatever you want, but somewhere in that folder there must be a document named index.html or the contents of that folder are easy pickins.) 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
Click here for my chat room!
</BODY>
</HTML>

Now save the following in sub-directory gwbush as chatroom.html. (This is your chat page that we will protect.) 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY BGCOLOR="#99FFCC">
<H1 ALIGN=center>My Chat Room!</H1>
</BODY>

</HTML>

A note here for users of certain free web hosts... You may have trouble here because some free web hosts limit you to one layer of sub-directories (Tripod comes to mind). You can still use the GateKeeper as is, it's just that your link will need to be on a document in the main directory. Angelfire users are limited to one sub-directory that must be named "images", therefore if you insist on placing your site with Angelfire, you cannot use this version of gateKeeper as is. You must eliminate the sub-directory part of the target as specified in gatemain.html. Better yet, you might consider moving your pages to a different host that doesn't have such lame requirements.

This is what we have so far. As of right now it's just a simple page. Not even a link yet.

Try it.

To add Gatekeeper to this link we must do three things...

  1. Add the GateKeeper files.
  2. Add and configure the intermediate page.
  3. Make the link.

1. Add the GateKeeper files...

From your first sample, copy these 3 documents into the stuff folder (all the files that begin with "gate"):

  1. gateblank.html
  2. gatehelp.html
  3. gatemain.html

2. Add and configure the intermediate page...

Grab frumpy.html from your first sample, copy it to your stuff folder, and rename it to gabby.html. (We wanted our password to be gabby, remember? So name this document gabby.html)

Now open gabby.html and change the "target" to gwbush/chatroom.html... 

[snip...]

// Replace sluggo/hideout.html below with the directory/filename of the destination page.
var target = "gwbush/chatroom.html"

[...snip]

3. Make the link...

Re-open index.html and add the link as follows... 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<A HREF="javascript:gateKeeper()"
   onMouseOver="self.status=statusMsg; return true"
   onMouseOut="self.status=''; return true"
   onClick="gateKeeper(); return false">Click here</A> for my chat room!

</BODY>
</HTML>

Add the blurb for those with javascript disabled... 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<A HREF="javascript:gateKeeper()"
   onMouseOver="self.status=statusMsg; return true"
   onMouseOut="self.status=''; return true"
   onClick="gateKeeper(); return false">Click here</A> for my chat room!

<NOSCRIPT><FONT COLOR="#FF0000">
   <BR>Javascript is required to access this area.
   Yours seems to be disabled.
   </FONT></NOSCRIPT>

</BODY>
</HTML>

And lastly, add the scripting between the <HEAD> tags... 

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript"><!--
/*********************************************************
            GateKeeper  v3.2  -  by Joe Barta
       http://junior.apk.net/~jbarta/tutor/keeper/
     Permission is granted to freely use this script.
**********************************************************/

// You can edit the following line to change the status bar message.
   var statusMsg = "Password Protected Area"

function gateKeeper() {
   gateKeeperBox = window.open('gatemain.html', 'theKeeper', 'width=230,height=100,resizable=yes');
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:gateKeeper()"
   onMouseOver="self.status=statusMsg; return true"
   onMouseOut="self.status=''; return true"
   onClick="gateKeeper(); return false">Click here</A> for my chat room!

<NOSCRIPT><FONT COLOR="#FF0000">
   <BR>Javascript is required to access this area.
   Yours seems to be disabled.
   </FONT></NOSCRIPT>

</BODY>
</HTML>

And that should do it!

Try it now. (password is gabby)

Now for an excercise. I have a diary page. The text is below. Copy it and save it somewhere as joesdiary.html. 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99">

<H2 align=center>Joe's Diary - My most private shtuff</H2>

</BODY>
</HTML>

Next is my home page with a link to my diary. Save it as index.html. 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H1>Big Joe's Home Page</H1>
Check out <A HREF="joesdiary.html">my diary</A>.

</BODY>
</HTML>

Your job is to protect my diary, my most precious writings, my most intimate thoughts, with a password. Make that password be bugzapper. You can name the sub-directory anything you wish.

When you have managed to put together this project, you will be ready for part 3.

Part 3...

Part 1 | Part 2 | Part 3 | Part 4 (GateKeeper-II) | Version 2.2
Installation Overview | HTTP Authentication | The Vault

General Table
of Contents		 So, you want to make a Web Page!
Table Tutor - Form Tutor - Frames Tutor		 Barebones
HTML Guide
PROFESSIONAL WEB DESIGN Joke BreakJoke Break