Sending Data with Hyperlinks
The querystring's open display of data, though a problem for confidential information, has certain benefits. One of them is that you can embed data in hyperlinks. That is, you can collect information from users without requiring them to fill out a form. In this task, you will build a simple page, which, though a bit silly superficially, exhibits a couple of key dynamic Web site concepts in action.
You will build a two-page mini-application that lets each user specify whether she or he is a cat person or a dog person. The first page contains two linksone for cats and one for dogs. The interesting thing about these links is that they both point to the same page. The links are differentiated in that each has a querystring appended to it with the chosen animal preference. On the second page, dynamic text is output, based on the selected link. If you first choose one animal, and then go back and choose the other, it will appear as if you went to two different pages, while in fact you went to only one, with different dynamic text values displaying.
This is an important concept. Think about a large e-commerce site, such as Amazon. Rather than having a different page for every single book they sell, they have only one product detail page, and the page is populated dynamically when the user selects a book. In other words, dynamic pages enable developers to drastically reduce the number of pages they must create and maintain, while simultaneously expanding the amount of content that their pages can show.
So set aside the impracticality of this application for the time being. It forms the basis of the site maintenance functionality that you'll build later in the Newland site.
Choose File > New, and create a new dynamic page using ASP/VBScript or ColdFusion. Make sure it's XHTML-compliant.
By choosing the correct document type in this dialog, you ensure that Dreamweaver will write the correct type of code for your site.
In design view, type the text shown in the accompanying figure. Format the first one as an <h1> heading and the second two as body paragraph elements <p>.
In this step, you are marking up just the static portion of the application.
Save the file as animal_questions.asp. Then choose File > Save As and save the page again, this time as animal_home_page.asp.
Here you are both saving the file and creating a second page based on the first.
Still in animal_home_page.asp, replace the existing heading with The Person Home Page, and replace the first question with You are a person. Remove the second question.
Again, you are setting up the static portion of this page. As it now stands, it's nonsensical. In a moment, it will make more sense when you add functionality that will place Cat or Dog before the word person in each paragraph.
Open animal_questions.asp. Double-click to select the word Cat in the second paragraph. In the Link field of the Property inspector, type the following: animal_home_page.asp?mypet=Cat.
Here you are manually adding a querystring to the URL. When the user clicks this link, both the URL and the querystring will be sent, and the querystring's contents will be available on animal_home_page.asp.
NOTE
Dreamweaver doesn't appear to like uppercase letters in the Link field. For example, here you may notice that Cat becomes cat. To fix this problem and prevent the heading on the next page from having inconsistent capitalization, you'll need to manually change c to C in the appropriate place in the code editor.
Repeat step 5 to add a link to the word Dog, with the appropriate querystring added to the link. Save and upload (Put) the file.
You are finished with this page.
Return to animal_home_page.asp. In the Bindings panel, add a QueryString/URL variable named mypet.
This is the variable that you coded into the each link's URL on the previous page. But you set each one to a different valueCat or Dog. In this step, you are using the Bindings panel to retrieve this name-value pair.
Position the cursor just ahead of Person in the heading. Click the mypet variable in the Bindings panel, and click Insert. Add another instance of this variable before person in the body paragraph. Save and upload the page.
The application is complete.
Select animal_questions.asp in the Site panel, and press F12 to test the application.
In turn, click both Cat and Dog, so you can see that the page does indeed change.
As you can see, animal_home_page.asp is a template that can hold any content. You could easily add links on animal_questions.asp for iguanas, tropical fish, and pythons, and animal_home_page.asp would function without any changes to the code. And this is the ultimate power of dynamic Web pages: You can present infinite contentas well as add to or change that contentwithout having to redo the XHTML pages. Change the content in the source, and the update takes place seamlessly in the output XHTML page.
