Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our last exercise we defined a recordset and that's going to allow us to display this dynamic information on page. So on the page we have the page some placeholder information and this is how we would like each our artist's short description to display, and at the top we have Aimee Hutchins' name and we need to replace this with some dynamic data. So I am going to highlight Aimee's name. Notice that I've highlighted just her first name and I can go up to recordset and choose firstName from the database and choose Insert. And when I do that her first name was replaced with rsArtists, recordsetArtist. firstName. Now if you have done some Spry development, if you have done any XML, XSL transfers, this type of workflow is going to seem very familiar to you.
Dreamweaver uses a very similar workflow regardless of the type of dynamic data that you are going to be placing on the page. So I will go ahead and highlight her last name, which is Hutchins. We will go up to the database and if you don't feel like clicking the Insert button, you can indeed just go ahead and drag and drop. You want to be careful with doing that, however, because dragging and dropping can cause you certainly to put it in wrong place. I am going to highlight the descripted ( ph) text and after that's highlighted I am going to go over to the tag line, and the tag line is our short description and we will click Insert and it will be the tag line there. Now the next thing I want do is go ahead and select Aimee's picture. Since I want whatever picture is going to represent whatever artist, I can't just select the image. I am going to replace it with the small image item in the recordset. If I do that, it will actually display the link as text and that's not what I am going for.
So what I will need to do is the process known as binding an attribute. I can select the image and I can come up to my recordset and click just once on smImg. Now as I select smImg, look at the bottom of the Bindings panel, there is a little pulldown menu. Because we have an image selected, I can grab that pulldown menu and I can take a look all of the different image attributes that I can bind dynamic data to. And you can bind it to pretty much any attribute a tag has. So we'll choose image.source. That represents the path to the image, and then I am going to choose Bind. Now when you do that, your image is going to change and you are going to get a placeholder graphic that has a little lightning bolt on it. And you may need to click off of it to see the lightning bolt.
Now the great thing about the lightning bolt symbol is Dreamweaver uses it universally all throughout the application. If you ever see that, the lightning bolt indicates dynamic data. So let's go ahead and save our file. We are not quite done with our image yet. So go ahead and select it again, if you have deselected it. We went ahead and bound the small image property to the Source attribute and that's great, but we also want to take care of our alt text. We want every single image to be alt tagged and right now the alt tag is set to default of Aimee Hutchins and that is not going to get the job done for us. So the next thing I am going to do with the image selected is I am going to click on shortName and we will use the artist's short name for the alt tag.
So we will select that and again down here in the Bindings panel at the bottom we will grab the pulldown menu for bind to. And I am going to go scroll up until I find the image.alt attribute. There we go, and once again I am going to choose Bind. So you first select the object that you want to bind an attribute to, you then go to the Bindings panel, click on the item that you want to bind, and then using the pulldown menu you choose the attribute and you select Bind. So you can bind really any attribute and I want you to think about how flexible that is the fact that for example you could bind a class attribute to something coming in dynamically and you could actually cause things to display differently based upon what information was coming in from the database. So there is some really cool stuff that we can do with that.
Okay, well now it's time to see if this is going to work. So we will go ahead and save our file and we are going to preview this on our browser. Now if you are used to previewing things in your browser you just hit the hot key and up it comes and you are going to see that when we develop with dynamic data it's a slightly different workflow. So we will go ahead and preview that in our browser. Now Dreamweaver is going to prompt us and say hey do you want to update the copy on the testing server? Now if you haven't made the change to the document, you probably don't need to do this. But if we have made a change, so we are going to click Yes. I'll go ahead to take a moment to point out to you that.
You should make sure that either your MAMP or your WAMP server or whatever application server you are working with, you want to make sure it's running. If you shut the server down, you are not going to be able to preview your pages. So you ever run into a situation where your previewing your pages and it come up blank, just check to make sure your server is running. So we are going to go ahead and click Yes. It's then going to ask me if I want to upload any independent files, I will click Yes on that as well. And it will go through the upload process until open up in the browser, and as I scroll down, I can see there is Aimee's information. So we've got her first name and last name coming in from the database, the short tag line. We haven't modified the links yet to the bio and the gallery, we will do that later, and we are getting her image and it is alt tagged properly. So that is wonderful.
I also want to point out to you the address. So normally when you test, it will actually show you testing locally, but you will note up here in the address that I see localhost and there is the port I am testing from and there is my artist page. So I am looking at this currently on my application server. So in this exercise we put dynamic data on the page, we are testing it through the server and we are watching the database information populate the page. In our next exercise we are going to look at finishing building up the page by displaying all artist instead of just the one.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.