New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Dynamic Dreamweaver Websites: Creating Login Areas
Illustration by

Adding form validation: Part one


From:

Dynamic Dreamweaver Websites: Creating Login Areas

with Candyce Mairs

Video: Adding form validation: Part one

Our login form is now built. However, we don't have any validation for this form. If I put this in the browser. There is nothing stopping the user from just putting in things such as this and logging in. We don't have this page actually going out to an action page right now. Our action area is blank but if we did we'd be sending bad data and inserting all kinds of new users or trying to authenticate users on the server side. When we want to prevent that.
Expand all | Collapse all
  1. 1m 32s
    1. Welcome
      1m 32s
  2. 2m 57s
    1. Course overview
      1m 16s
    2. The course environment
      1m 41s
  3. 26m 58s
    1. Static vs. dynamic requests
      4m 8s
    2. Installing XAMPP on a Windows system
      8m 54s
    3. Installing MAMP on a Mac system
      4m 29s
    4. Using admin consoles
      3m 54s
    5. Installing the course files
      5m 33s
  4. 18m 36s
    1. Overview of the Dreamweaver interface
      6m 22s
    2. Setting up the course site
      6m 20s
    3. Previewing pages
      5m 54s
  5. 33m 38s
    1. Creating PHP pages
      5m 45s
    2. Adding PHP code
      5m 44s
    3. Displaying variables
      4m 45s
    4. Commenting your code
      5m 30s
    5. Working with includes
      5m 58s
    6. Building the course templates
      5m 56s
  6. 35m 13s
    1. What is a database?
      5m 2s
    2. Adding database tables
      7m 34s
    3. Connecting to the database
      8m 28s
    4. Getting data from a database: Part one
      8m 25s
    5. Getting data from a database: Part two
      5m 44s
  7. 1h 16m
    1. Planning the login process
      7m 25s
    2. Creating a login form
      7m 45s
    3. Adding form validation: Part one
      9m 22s
    4. Adding form validation: Part two
      1m 37s
    5. Exploring the registration page
      7m 17s
    6. Correcting table fields
      6m 1s
    7. Setting up the login landing page
      4m 1s
    8. Using server behaviors
      3m 36s
    9. Inserting new members
      8m 48s
    10. User authentication
      10m 3s
    11. Restricting access to pages
      5m 17s
    12. Testing the login
      4m 53s
  8. 1h 6m
    1. Admin area overview
      5m 9s
    2. Adding new users
      5m 19s
    3. Restricting access
      12m 25s
    4. Planning the admin update area
      5m 19s
    5. Building the members table listing
      6m 55s
    6. Building the querystring
      9m 14s
    7. Populating the update form
      6m 33s
    8. Updating the database data
      11m 28s
    9. Testing the admin update process
      3m 47s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Dynamic Dreamweaver Websites: Creating Login Areas
4h 21m Intermediate Jun 06, 2011

Viewers: in countries Watching now:

An important but little-understood concept in dynamic web development is that of role-based logins, which allow different types of users to access different parts of the site. In this course Adobe Certified Expert Candyce Mairs shows how to use Dreamweaver's features to create role-based logins, restrict page access, build an administrator area, and test everything to make sure it works. Plus, see how to set up a development environment and work with a database from within Dreamweaver. Along the way, build your skills in areas like working with PHP, adding form validation, using server behaviors, and much more.

Topics include:
  • Installing XAMPP on a Windows system
  • Installing MAMP on a Mac system
  • Using admin consoles
  • Previewing pages
  • Working in PHP
  • Adding database tables
  • Getting data from a database
  • Building the login area
  • Planning the admin update area
  • Testing the admin update process
Subjects:
Developer Web Web Design Web Development video2brain
Software:
Dreamweaver
Author:
Candyce Mairs

Adding form validation: Part one

Our login form is now built. However, we don't have any validation for this form. If I put this in the browser. There is nothing stopping the user from just putting in things such as this and logging in. We don't have this page actually going out to an action page right now. Our action area is blank but if we did we'd be sending bad data and inserting all kinds of new users or trying to authenticate users on the server side. When we want to prevent that.

We want to make sure that a user enters an email address as best we can in this area, and, the correct password. So, how do we go about adding form validation to this form? Well, there is client side form validation we can do in two different ways using Dreamweaver. There is also server-side validation, however that server-side validation requires quite a bit of hand coding in PHP. So we're going to use the client-side version, and Dreamweaver has two ways to add client-side validation, but I want to show you one in particular.

And I'm going to open up my insert bar once again by going to Window, Insert. And that is this bar up across the top of this area. Now, if you are not in Classic View, you will not have the Insert bar in this upper section. So when you install Dreamweaver. The view is set up for Designer View and what I did was switched it to Classic View which moves my Insert bar up here. I think it's easier for you to see what I'm doing and it's also easier for you to see what's in the PHP portion of this Insert bar. So I'm going to use that.

Now I've created the basics for another form. We are going to look at a feature built into Dreamweaver called Spry, and Spry is a series of JavaScript libraries that Adobe has grouped together and incorporated into Dreamweaver to make it really easy for you to use. So we're adding a bunch of Spry features, which is just JavaScript, but it's more complicated JavaScript features. I'm going to move out to the login Spry area, and you can see on this form, I've decided to keep login as a single word I will add a title up here of login form. This is the actual form we'll be using for our website now this area is blank right now and within this area I'm going to add my form information so if I go over to Code View.

I do have an extra paragraph set up between the legend and the form. I also have one underneath the header one. So if I go into Split View, that's what's causing the space, here. And we have a space here in our form. This paragraph, I do not need. So I'm going to get rid of. This one. And you'll see it moves our form up. The other one I want to get rid of is this area here, and I'll just hit the backspace or the big Delete key.

Now, I'll let you fine tune this form as you like. The important piece is, I get my cursor inside our form itself. So I need to be inside the form tag and Dreamweaver shows you it's a form tag by adding the red dotted line. That does not show up once we get into the browser. Now I can do everything I need to in Design View here. So I'm going to go up to the Spry tab. Within the Spry tab there is this Spry validation text field and that's what we're going to be adding. I will click on that icon and this is very similar, the exact same interface you would get for a standard HTML form.

So the ID is going to be email. Label will be email. The label is the text that's going to show. And we get a Spry text field. Now, as soon as I have added this, I have Spry text field in my properties' area. If I select the box only, within this area, not the tab, but the box. I get my character widths, and since our database allows 50 characters here for username, that's this field we're doing.

I'll set it to 50 and 50 just like I would a standard HTML form. The distinction is I'm going to select this by Text Field tab and I can click on it here or once I'm inside this field I can click on it right here. This is known as the Tag Selector. Sometimes it's easier to select it here. And I'm going to say. This needs to be an email address under Type.

And you can see what that does is adds some information here. Now, I generally like to go into Code View to do this piece. You'll be able to see, it does say a value is required. It also says invalid format, which is the text we're looking at, so I'm going to say, let me, plug into here please, enter a valid email address. So well set up instead of the word Format, we'll put email address.

The reason I like to do it in this area, is because it's very easy to accidentally delete this entire message if you are doing it InDesign view. You can always select the text in this area on your page and it will pull you right to that section here. So there's our email address. I will select that text field again. And the preview states is what you want to walk through. So, in this drop down, this is what it's going to look like when the page first loads to the user.

This is what it's going to look like if they don't enter anything into the field. If they don't enter an email address this is what it's going to look like, which is what we're looking at right now and if it's valid it will turn to look like this. So let me go through these. When it initially loads for the user it will be white like this. When they don't enter the correct data this is what it's going to look like. And this particular message here is not the nicest. So I'm going to say, an email address is required.

When I click off of this, you'll see that here. I'll select my text field again. So, this is what it looks like when they first come into the page. This is what it looks like if they don't enter data. This is what it looks like if it's not an email. And if they entered an email correctly, it's going to turn green like this and this is how all of the Spry fields work. So you plug in what you want. You can put minimum and maximum here. I have done it in the HTMP piece and then each item you add down in this area. We'll add another message, and you'll want to go through and make sure you double check all of those messages.

If I go out to preview this in the browser, and save this page, Dreamweaver is going to add the javascript and CSS information to produce this text field. Once I click OK, here is my email address. And you can see if I don't put anything in that pops up. If I put in just letters, it says, please enter a valid email address.

I can put a break in fornt of this so it goes underneath instead. So we have a few options in terms of working with this and if I put my proper email address in here and click Submit it turns green and submits the data. So go ahead and add the password field for this Spry on your own. If you have difficulty doing that. Come back through and watch the beginning of this movie to show you how to work with that.

And that is the log-in form that we're going to work within our Scuba2You website for form validation

There are currently no FAQs about Dynamic Dreamweaver Websites: Creating Login Areas.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dynamic Dreamweaver Websites: Creating Login Areas.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.