Ok, now we will make a simple login form, which submits the username and password to a perl script (which we will cover later). This tutorial is more about HTML than Perl, but is very important.
I really had a hard time in the past myself, figuring out how to use Perl & HTML for my website, I almost gave up on Perl, and almost decided to use PHP. So pay attention please :)
A thing to note is this, that even though we can make a perl script, and put HTML into it, we can't do the opposite i.e, make a HTML file and put Perl in it. This is a Frequently Asked Question(FAQ) for Web Perl.
Yet, for our login form, we will just make a HTML file, and have it send data to a Perl Script. There are various reasons for doing so instead of just making a big Perl file/script, or making two Perl script.
1. If you put all the code in one Perl file, it is unsafe, as the login form is publicly available, people should not know how there login credentials are actually being authenticated/checked. That is a big no no! The data should just dissappear for checking, like a high class hotel's butler, who goes inside a special room to check whether you are invited to the party or not.
2. Also, instead of making two Perl files, one frontend (which sends the credentials/data) and second Backend (which checks if your username/pass combination matches the records) using one HTML and one Perl script is better. As HTML is easier to maintain.
So again, in this tutorial we will only be making a frontend of the login system that is the 'form' only. Things to note about it are:
- It sends data, but we have not yet created a Perl script in the back to receive and process that data.
- I have also left out the CSS styling for the time being, so the form will appear without styles on the top-left of your browser.
Now here is the explanation for the above code. If you are familiar with HTML, read from Line 9.
Line 1: The standard HTML 5 starting line which announces that this is a HTML5 document.
Line 2: It basically says everything after this is html code.
Line 3: It basically says everything after this is the head of the html document.
Line 4: Just optional to say that the encoding of this document is in UTF-8 characters. If you skip this line, everything should work normally, so don't worry.
Line 5: In html, this is called the ending tag (notice the / before head). Which basically says that the head of this html document, which should have started earlier, has now ended, so anything after this is not head. The line 4 is the only line inside the head tag.
This is basic HTML knowledge, in case you have any confusion, go to
http://www.w3schools.com/html/DEFAULT.asp
http://www.w3schools.com/html/DEFAULT.asp
Line 6: The body tag starts here, and everything after it is inside of the body of this HTML document.
Line 7: The div tag starts here.
Line 8: Now this is the most important part of this tutorial. We have started the form tag here.
we have defined two things here about our form:
- the method of sending it to the Perl Script is POST ( and not GET. For security reasons).
- secondly, the data is being sent to a perl file called 'login.pl' located in a folder called cgi-bin on the same server as our html file. See the picture below:
Line 9: In this line, we first write the text "Username" inside a paragraph tag (the two p) and after that, is the white box in which to enter the text. Again, we have given it a few important properties:
- The type of the input is text
- The 'name="username" basically says that what ever the value is sent, it should be marked as username, so when the Perl script would receive the data from this HTML form, it would be able to distinguish that among the values it received, what value is actually a username or what value is a password.
-The value="" basically resets the form each time. As you see there is no value between the two inverted commas, it is empty. From what I have heard, it also serves as a security measure against data leakage.
-maxlength="40" basically says that only 40 characters can be entered and no more. This is a basic security measure as well.
- The 'required' makes it mandatory for the user of the form to enter something before submitting the form.
- The 'autofocus' is explained here, if not obvious: http://www.w3schools.com/tags/att_input_autofocus.asp
Line 10: This is password text and the input field. Works similarly to the Line 10, so read above carefully.
Line 11: This is the Submit button. Here only one thing is new(compared to line 10 & 11), and is worth noting about. The value is "Login". What this does is different from the username/password input feilds. In case of a submit button, it is the text that appears on the submit button. Try changing it to something like "THIS IS THE BIG BAD LOGIN BUTTON!"
Line 12: The form ends here.
Line 13: The div containing the form ends here.
Line 14: The body of the document, containing the div, ends here.
Line 15: The html document ends here.
The last thing to do now, is to copy the above code, into one of your favorite text editor like Notepad++ and save the file as test.html. Then right click on it, and open it in a browser like Google Chrome/Mozilla Firefox.
Thats all for now, next time.. we will make the perl script that receives the input from this form. For now try out your newly created form, and try styling it yourself, using CSS.
Thats all for now, next time.. we will make the perl script that receives the input from this form. For now try out your newly created form, and try styling it yourself, using CSS.
