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

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 hideout.html below with the url of the destination page.
var target = "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.)

A couple things I want to mention here. First notice that unlike previous versions 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 document name. Don't leave them as frumpy, fanny, hideout 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 folder. For now, call it stuff.

Let's say in that folder 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>

<A HREF="chat.html">Click here</A> for my chat room!

</BODY>
</HTML>

Now save the following 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>

As of right now it's simply one page linked to another.

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. Alter 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 chatroom.html...

[snip...]

// Replace hideout.html below with the url of the destination page.
var target = "chatroom.html"

[...snip]

3. Alter the link...

Re-open index.html and replace what's in front of the link with this...

<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.1  -  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.

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.1
Installation Overview | HTTP Authentication

PROFESSIONAL WEB DESIGN