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.
We now have our members' table setup to display all the information for each member that are stored in our database. So, we have this table setup to display all the users' information. The next step in this process is to take the user ID for a member and make it a hyperlink to the admin user update page and we need the user ID attached as a query string to that hyperlink.
So, in case none of that made sense to you, if you're new to all of this, don't worry. We'll walk through the process, and then I'll do a review once again, once we're done. So, how do we go about making this a hyperlink to the Admin User Update with some information attached to it? The first piece I'm going to do is delete that data that's presently in that area. So, I simply selected it and hit the Delete key. Now, that we have no information within this area, I'm going to add just an x x within there.
I just need some kind of information, so I can make it a hyperlink before we do this process. So, I typed in, it doesn't matter what you type, as long as you have a couple of characters in there, so it's easy to access. I'm going to make it a link down here, just by hitting the letter A. So, we're setting up a mock hyperlink first. So, I have this as a hyperlink now. If I click this area, you can see it's a hyperlink with just two letters. Now, I'm going to take that hyperlink and select that area. I'll go over to Split View to do that.
So, here is my hyperlink with the letter A. And here is my fake text. So, I'm going to select the fake text. Now, I'm going to go over to my Bindings panel and I'm going to say OK. Now that that hyperlink is selected, you can see my A is showing down in the link area. I want to attach something to it. And what we're going to attach is the user ID. Now that I have user ID chosen here, make sure ref shows up in this area. And that's why we made it a hyperlink first.
So, ref should be showing. In case it's not, there is a drop down list here, where you can choose it. So, ref is listed here. User ID is chosen and I click Bind. Now that I've done that, you can see my link area looks very different. Here it is in Code View. Now, it's a matter of setting up the text here to show the correct information. But we have attached the user ID as a hyperlink.
What I want to do now is within this area in the link, I'm going to hit the Home key. So, the Home key on your keyboard. It takes me to the very first character within the link area. You can see my cursor is now blinking right here. So, I'm going to type out where I want that hyperlink to go. And that is going to be adminuserupdate.php. Then I'm going to add a question mark. The question mark segregates the URL on the left-hand side of the question mark with the data on the right.
Now, Dreamweaver added that user ID information to create the user ID. We are going to say user ID, and make sure you were key sensitive. We need to type it out just like it is on our database. So, user ID equals, and whatever that number is. So, the rest of the code here, this piece here is going to be populated by Dreamweaver. I will hit enter or return to register that information and let me show it to you within Code View, it will be a little bit easier to see.
Here is our hyperlink, up in our code for that user ID. We now have them going to the userupdatepage.php. And we are attaching the user ID equals. And then, PHP will process out that number. Let's make sure that that really works. So, I'm going to put this in the browser. E-mail. I do have to type out and log in each time. Oops. I will put unique vacations.
I have to do it exactly as my member is in the database. Hit Tab and candice, all lowercase, is the password. Now, if you keep your Browser window open, you don't have to log in each time. Click Log In. You can see if I highlight over this, let me move this down a little, what you want to watch is this area of the page. As I highlight each one of these, you can see it says user ID equals and the number for that user ID, for each user. So, that information is all correct.
Now, we have x x representing that information right now. That's not exactly what we want to have to show to the user. So, what I can do instead of using x x, I can drag out user ID into this area. We have all of the information setup in order to do that. So, I'll click in Design View. Put my cursor in this area. And what I'm going to do is select user ID here. And that's what I want to insert into this area that shows.
Now, I can drag this information out into this area. So, if I click on it, I can drag it out. But because the x x is already showing, that becomes a bit of an issue. So, what we're doing is replacing this information with our user ID up here. Since it's already bound, it doesn't want to add, but notice if I click on it and drag it here into Code View, it's a little bit easier. So, what I did was replace the x x with this information. In case it doesn't work to drag it within the Design View, you can always select it and drag within Code View.
This should be fully functional now. Let's test it out. I did close my browser. So, I do have to log in. I'm getting very good at typing this. (LAUGH) The downside of setting up the log in section before you set up these types of areas is it does activate, you having to log in, in order to do your testing. I will click Log In. Now you can see each users' user ID is showing, within the table. If I click number 2, we only have a number 2. So, my page, somehow is eliminated when I dragged this out, and this is something to watch for.
It's not that big of deal to fix. Let me show you what happened. We have our user ID information. So, dreamweaver, or should I say, Dreamweaver created the code for PHP to be able to add the number. What we have lost is the page name. So, I simply need to add that once again. So, if you only see the number, don't panic it's working correctly. You just need to add the front portion of the page and build the rest of the query string.
So, I have adminuserupdate.php?userid=. That's the piece we had typed out when we had the x x as the code within the user ID. And that x x was the hyperlink. So, I hit Enter or Return to register that piece. Save my page. And I will go back out to the browser and log in to test this out.
Click Log In. Here is our information. Now, you can see, if you look down in this area, when I hover over this, it now says the page name along with the user ID. So, if I click on number 5, it takes me out to Admin User Update, attaching the user ID information. Now, we need to get this page using this user ID to query the database and populate our form. So that's the next piece of this process.
There are currently no FAQs about Dynamic Dreamweaver Websites: Creating Login Areas.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.