Ades Design - High Quality Website Templates, Free Website Templates, Tutorials: Photoshop, Dreamweaver, Flash, CSS and PHP


Creating Login Page
Home » Tutorials » Dreamweaver


Note: Before you attempt this tutorial you should have some DB server running on your computer such as MySql. If not download dev5beta3.exe and install PHP, Apache and MySql together with phpMyAdmin with one click, and you will be ready for all the dynamic tutorials.
This tutorial will teach you how to make a login page in Dreamweaver MX. At the end of the tutorial you will have a page where users can enter their username and password and if the username and password which they entered match the records in the database they will be allowed to enter the restricted page in other words redirected to the members area.

First we should create a table called users. This is the table that we will check the form fields against. Use the followig code to create this table. phpMyAdmin is preferred.
CREATE TABLE users (
username varchar(20) NOT NULL default '',
password varchar(20) NOT NULL default ''
);

After you have created your table populate it at least with one entry, for the sake of example we will use admin for username and admin for password. You are free to populate with your own data.

Now Open your dreamweaver and create a new page called login.php Here is the page and here is the code for creating that form with the two fields.

After you have created your login page make a connection to your database. (Go to Connecting to Database Tutorial if you don't know how to make a connection) If you have made a successful connection you should see your Table details in the Application window similar to the screenshot below.

While you are still in login.php page Choose Applications > Log In User.

 

Next you will be displayed with a pop up window where you have to make selections. First part of the window shows details of your form, second part your database and third part is a redirection process and finally restriction option based on your database table structure. This window is quite self explanatory just choose the right option from drop down menu. If you have a successful connection to your database your connection will be displayed in the Validate using connection section. If you don't see your connection in the drop down menu then you have to check your connection again (Step 2).

For Restrict access based on choose Username and password and not Username, password and access level. This is because our table has only username and password fields. After you are done choose OK.

Check Application > Server Behaviors Panel and you should see your script name there now. You can double click on it and edit anytime again, in case if you want to redirect to different page...etc

You are done! That was pretty easy huh? ;) Go ahead and test your login.php and see if it will do what it supposed to do. Remember it will check against users table in your database so make sure you enter correct data, in our case it was admin admin for username and password respectively.

Related Dreamweaver Tutorials
  How to backup Dreamweaver New
Backup your templates, extensions, behaviors...etc
  Creating CSS in Dreamweaver MX 2004
Learn how to create and apply CSS in Dreamweaver
  Create Rollover/MouseOver effect
Rollover effect made easy with Dreamweaver
  Opening a Fixed Size Window
Learn how to open a window in a fixed size
  Redirection based on Browser Type
Learn how to make redirection script with Dreamweaver
     

Color Picker for your AdSense job more info
 

Note: Your menu.php (page which user is redirected if login succeeds) should be user protected. Otherwise it does not make sense to make a login page to access it right? How do we protect a page. Well you can find out more about it here.



Web2.0 Bookmarks - Social bookmarking is good, but old skool way of hand-picking sites is better!
That's what we do best, collecting the coolest WEB2.0 sites. click here

 


Advertise | AdesBlog New | Free Templates | Premium Templates | Products | Services | Portfolio | Contact

2002 - 2007 Ades Design. All Rights Reserved. http://www.adesdesign.net

 









Logo Design, Web Design, Graphic Design (Cartoons, Caricatures etc.)
Software Development Company 
Search Engine Optimization by Design
Logo Design
 
Advertise Here