How to Build a Simple Login System in Dreamweaver

Hello! In this Instructable, I'll show you how to create your own login interface using Adobe Dreamweaver. This tutorial will work fairly well for all versions of Dreamweaver, but I'm using the CC edition. I have provided instructions for doing this on Windows, but I'm doing it on a Mac. If anything doesn't work as it should, feel free to write in the comment section below. Now, let's get coding!

Or downloading...

Step 1: Installing the Server Behaviours Panel in Dreamweaver

If you have an older version (CS6 or older) of Dreamweaver, you already have this panel. But for reasons no one knows, Adobe removed this panel from the software. Luckily, there's a way to get it back.

Go to this link and at the bottom of the text, there's a link to download the panel. You have to sign in to Adobe first.

Step 2: Check to See If the Panel Downloaded

Click Window in the menu, and see if "Server Behaviours" shows up. If it doesn't, shut down all creative cloud applications including Creative Cloud. Boot them back up and sign back in, and it should show up. If it still doesn't, post a comment.

Step 3: Install a Testing Server

If that sounds daunting to you, don't worry. If you run windows, click here to download wamp server. Depending on whether you run a 32-bit or 64-bit computer, download the appropriate software.

If you run on a mac like me, click here to download mamp server. You don't have to worry about what processor you run here.

After the download, click "Start Servers" in the welcome window(MAMP) or drop-up window(WAMP).

If you want, type "localhost" into your browser address bar to see if it works.

If anything else doesn't work in WAMP, leave a comment.

Step 4: For MAMP Users Only...

If you are a Mac user and have installed MAMP, please follow this extra step. Open MAMP, and -

- click preferences.
Click Ports
Click Reset Ports to Default
Click PHP
Click the most recent version of PHP
Set Cache to "off".
Click Web Servers
Click the folder with three dots in it
Navigate to the folder within MAMP in the Applications section, and select the htdocs folder
Make sure the server type says "Apache".
Check the picture.

Step 5: Create a Site!

Now we're going to create a website to test it out.

In Dreamweaver, create a new site either in the welcome window or by clicking Site/New Site in the menu. Make sure the site's root folder is stored in the htdocs folder(MAMP) or the www folder(WAMP).

After you name and locate the site, click the "Server" button in the sidebar of that same panel. If you closed the panel, just click Site/Manage Sites/< >.

In that panel, click the plus icon. In the new panel, name the server. The name doesn't matter, it just can't have any spaces. You'll be connecting over Local/Network. The server folder is the same thing as your site root folder. The web URL is http://localhost.

Then, click the advanced tab, and make it look like the picture. The server model is PHP MySQL. When you're done, click OK in the popup error box. If it doesn't come, great.

Make sure the radio button for "Testing" is selected. It's located in the window where you see site, server, version control, and advanced in the sidebar.

Step 6: Go Crazy!

You can design the site in any way you choose. For this demo, I'm going to design a bare-bones, limited CSS website. It's going to look ugly, but it's basic. I'll go through each page step by step.

Step 7: Success and Failure

Create a new php (not html) file called index.php. Make a green h1 that says, "Success" and a link that links to # saying, "Logout".

Duplicate the file and call it fail.php. Make a red h1 that says, "Failed" and a link that links to # saying, "login" and another link saying, "register".

Step 8: Login and Register

These pages are a bit more complicated.

Login: Create a h1 saying "Login". Then, create a form. If you don't know how, watch the video at the end of the tutorial.

I forgot to check the "required" box after naming the fields in the end. Make sure you do that.

Step 9: Creating a Database

Open MAMP or open the pop-up menu in WAMP and click the button to go to the start website. When you get there, click the button for PHPmyAdmin.

When you get there, create a database and a table:

Step 10: In Dreamweaver, Connect the Database to the Website

Now that you have the server behaviours panel installed, this should be a piece of cake.

On the login page, click the plus icon in the Server Behaviours panel
In the dropdown menu, click "Recordset".
Define a new connection
Name the connection anything, but I'll name it "form_retrieval"
Type "localhost" in the server name.
Your username and password should both be "root"
Click the "select" button and choose your database.
1. If it doesn't work, try making your website server (in step five, where you typed "localhost") http://localhost/your_website_root_folder
2. If it still doesn't work, see if the plug icon in the picture above is plugged in.
3. If it still doesn't work, post a comment.
Name the recordset anything, but I'll name it "Validation"

Step 11: Create the Login Function

In Design View(If you only see Code, Split, and Live, click the arrow next to Live and click Design), click the username text field
In that same menu where you clicked recordset, click "User Authentication" and then "Log in User"
Set up the window as per what is in the picture.

Step 12: Create the Registration Function...

On the registration page, add a recordset like you did earlier. This time though, after you hit "Recordset", a bunch of boxes will flash at the screen, and you'll be connected.

In the same menu in the Server Behaviours panel, hit the "Insert Record" link
Everything should be automatic, but check the picture to make sure
Click the "Browse" button and select login.php

Step 13: Insert the Recordsets on the Success and Failed Pages

Step 14: Restrict Access

On index.php, do the following:

In that same menu I've been talking about, click User Authentication > Restrict Access to Page
Everything should be automatic except for what page to go to if access is denied
Check the picture