Creating login page with Dreamweaver CS3, PHP 5 and MySQL 5

• Web Designer
• Skills
• Portfolio
• Tutorials
• Contact

Link Exchange System with Dreamweaver CS3, PHP, MySQL and CSS Part 2

<< Control Panel Template | Manage Links Page >>

Creating Login Page
Open login.php located in admin folder. Select everything (Ctrl+A) and press Delete key on you keyboard. This should remove the whole content of the page.
Now go to Modify > Templates > Apply Template to Page... (Fig. 27)

Fig. 27

In the new window choose admin_temp, click OK (Fig. 28) and save file.

Fig. 28

Replace Title Placeholder with Login to the system and completely remove Content Placeholder paragraph (Fig. 29).

Fig. 29

Now go to Code view and place your cursor on new line, after the Login to system paragraph (Fig. 30).

Fig. 30

Go back to Design view and in Insert panel choose Layout and click Table icon (Fig. 31).

Fig. 31

In new dialog window choose Rows: 3, Columns: 2, clear Table width:, Border thickness: 0, Cell padding: 0 and Cell spacing: 0.
In Header section choose Left and in Caption: type Login (Fig. 32).

Fig. 32

Click OK to close the dialog box and create a table in our page.
You should now be able to see a table on your page as in Fig. 33

Fig. 33

Place cursor anywhere in the table and click <table> on the bar at the bottom.
This will select the whole table (Fig. 34).

Fig. 34

On your keyboard press Ctrl+T. This will bring up an Edit tag: dialog where you can modify content of the tag.
Place your cursor after cellpadding="0" and type id="tblinsert" (Fig. 35).

Fig. 35

Press Enter and save the file.
By adding id to the table we have applied predefined formatting from the CSS file and now our table start looking a bit more interesting.

Now select table once again and this time press Ctrl+T twice.
This will bring up Wrap tag: dialog (Fig. 36).
Type form and press Enter. This will wrap our table with <form></form> tags.
You can now save file.

Fig. 36

Go to Code view and in the form tag type id="forminsert" (Fig. 37) and save the file.
This again will apply the formatting from css file this time to the form.

Fig. 37

Now go back to the Design view and place your cursor in the right column of the first row (Fig. 38).

Fig. 38

From the Insert bar choose Forms tab and click Text Field.

Fig. 39

In the new dialog box type the following ID: username, Label: Username: and select Attach label tag using 'for' attribute as Style. Leave the rest as default and click OK (Fig. 40).

Fig. 40

This will insert text field into the right cell of the first row in the table.
Now go to Code view and move <label for="username">Username:</label> in between <th scope="row"></th> tags so it looks like in Fig. 41.

Fig. 41

Now place your cursor in the right column of the second row and repeat the same steps as before except this time type ID: password and Label: Password:.
Again move <label> tags in between the <th> tags.

Lastly place your cursor in the right column of the third row and from the Forms tab of the Insert bar choose Button (Fig. 42).

Fig. 42

In the dialog box select No label tag and click OK (Fig. 43).
This will insert a submit button.

Fig. 43

Select button by clicking on it in Design view and press Ctrl+T.
In the Edit tag: dialog type id="button" (Fig. 44). Sometimes Dreamweaver puts id's automatically so first check if it isn't already there.
Press Enter on your keyboard and save file.

Fig. 44

Our form is now ready to apply login Server Behavior.

Select the forminsert by clicking the tag in the bottom bar (Fig. 45).

Fig. 45

From the Application panel select Server Behaviors tab.
Click the + sign and choose User Authentication > Log In User (Fig. 46).

Fig. 46

In the new dialog box choose the following:
Get input from form: forminsert
Username field: username
Password field: password
Validate using connection: conndb
Table: tbl_admin
Username column: adminusername
Password column: adminpassword

For If login succeeds, go to: click Browse button and navigate to admin folder. Select links_list.php and click OK.
For If login fails, go to: click Browse and in the admin folder select login.php.
Select Username and password in Restrict access based on: section and click OK (Fig. 47).

Fig. 47

The last thing we need to do is to select password form field and to assign Password field type from the Properties panel so that when you will be typing your password all characters will be replaced with dots (Fig. 48).

Fig. 48

And here we have our login page competed.
You can test it by clicking the globe icon from the toolbar and choosing any of the available browsers (Fig. 49).

Fig. 49

In the Username field type admin and in the Password field type password (Fig. 50) - these are the login details which we store in the database. Information from the form will be compared against the database record and if the login is correct it will redirect you to the links_list.php (which currently is a blank page) or if you type in the wrong login details you will be redirected back to the same page which is login.php.

Fig. 50

Before we move on to the next section I would like to show you how to add one extra feature which forces automatic cursor placement in the Username field when the page first loads.

To force cursor to be in the username form field when the page first loads copy and paste the following javascript in between <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --> tags which are generated by Dreamweaver (Fig. 51).

<script type="text/javascript">
onload = function getFocus() {
var toFocus = document.getElementById("username");
toFocus.focus();
}
</script>

Fig. 51

This short javascipt forces cursor to be focused on the form field with id="username" when the page loads (onload).
You can test it by refreshing login.php page - cursor should automatically be placed in the username field.

This way we have finished our login page and we can move to the next section where we will learn how to display the list of the links.

<< Control Panel Template | Manage Links Page >>