Passwords

So, after two nights, I have finally figured out how to do the password thing on javascript. (I did this yesterday night (3 hours), this morning (2 hours) and tonight (1 hour)- this totals up to an amazing 6 hours. Time sure flies when you are having fun)

To be honest, I think javascript is a lot easier than php since I've been using it for some time now (a couple of summer holidays were spent on web programming), however, php is probably better and more reliable since it is probably easier to change the password on PHP. I'll probably end up using php in the end but for now, I'll settle for javascript. If i dont manage to do the php version of this i can always use this instead.

Anyway, i encountered so many problems here. Many were solved using the ever reliable http://www.w3schools.com/

first, i visited
http://www.w3schools.com/js/js_popup.asp
to find out about popups and discovered something called a prompt which would prompt you to enter something. I assumed this could be a password and set up a series of if else if statements.

The main part goes like this
<script type="text/javascript">
function showcomments()
{
document.getElementById('comment_box').style.display='block';
}
</script>

<script type="text/javascript">
function showprompt()
{
var password=prompt("Please enter the password"," ");
if (password=="hello"){
showcomments();}
else if (password!="hello" && password!=null)
{
alert ('Sorry you are not authorised to comment');}</script>
One thing that really annoyed me at first was how cancel was treated as a null value. At first my if else statement said that if you typed the password (which was "hello") then the page would redirect to another page where you could comment. And then if you got it wrong (password!="hello") then the page would redirect you to another page where you would receive a message saying that you had no authorisation.

So many things were wrong about that whole system.
1) If you hit cancel, that counted as NOT equals to "hello" so you would redirect to another page saying you had no authorisation. But what if the user had accidentally hit the button and wanted to go out? By redirected to another page would be annoying.
2) What if someone realized that the url changed to say...localhost/commentonphoto.php everytime you succeeded and localhost/noauthorisation.php each time the password was wrong. Then they could just type the url in.
3) Also the redirecting was annoying for me since I tested it at least 50 times throughout these 2 nights

Solutions
1) I realized that...what if i did this?
if (password=="hello"){
showcomments();}
else if (password!="hello" && password!=null)
{
alert ('Sorry you are not authorised to comment');}First of all, it would check if the password was right. Then, if it wasnt, it would check if the password did not equal to the password AND not equal to null. This last touch, not equal to null, made it impossible to redirect to another page when cancel was hit.

2) Okay, first of all for the comment box, if the user had the password, then the comment box would appear right? So how about combining html div tags with javascript and css to show and hide the comment box? That's what I thought, so i went and googled it and it just so turned out that it was possible.

That bit in the blue tells the computer to show the comment box. I think that block doesnt mean show, but block the css from affecting the display of the div. So I set the css to display: none first. I found out about the block and none here http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/

To fix the other page changing problem, i decided i would have an alert box pop up to say something the lack of authorisation.

Oh yeah one more thing. I forgot to mention i used a stock photo for the background
http://static4.grsites.com/archive/textures/paper/paper017.jpg
I do not intend to use stock photos in my final version. I have installed photoshop elements on my laptop now and i intend to use it create tiling textures.