Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

This chapter is from the book

Building a Simple, Dynamic Application

You have now tested the site going through the remote server, and—assuming you saw index.asp, index.cfm, or index.php in your browser—you have everything correctly configured. But nothing in the Newland site is actually dynamic yet. At this point, you’ve done all the work and haven’t seen any of the benefits. In this task, you will create a very simple dynamic application, which will reward you with a taste of what’s to come, both conceptually (how dynamic sites work) and behaviorally (the sequence of steps needed to create the functionality).

Creating the Input Page

You’re going to build a page containing a Web form that asks users their names. Then they will click Submit, at which point they will be redirected to a second page, which will display the name they entered. No, this application doesn’t exactly push the limits of ASP, ColdFusion, or PHP. It does, however, introduce you to building forms, dealing with dynamic data, and distinguishing between server-side and client-side code.

  1. With the Newland site open, choose File > New. In the New Document dialog, choose Dynamic Page in the Category list on the left side, and then choose ASP VBScript, ColdFusion, or PHP on the right. Make sure XHTML 1.0 Transitional is selected as the Document Type. Click Create.

    In this step, you are creating a new dynamic page. By specifying the type of dynamic page, you tell Dreamweaver what code to use when you use Dreamweaver’s ready-made server behaviors, which extension to use when you save the file, and in some cases, which additional code to add to the document header.

    ASP users will see <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>; this line specifies whether you are using VBScript or JScript, either of which you can use with ASP. For the exercises in this book, though, you must work with VBScript. ColdFusion and PHP don’t have multiple scripting languages, so a new ColdFusion or PHP page has no equivalent for this line.

  2. Click anywhere in the design window, select the Forms category in the Insert panel, and click the Form button to insert a form.

    You have just added a basic form to your page.

    The red dashed line indicates the form’s boundaries. This will not appear in the browser; it is there just to help you know where the form begins and ends on the page.

  3. Click the Text Field button. In the Input Tag Accessibility Attributes dialog, label it First Name and click OK. Click the Button button, and in the Input Tag Accessibility Attributes dialog, click Cancel.

    Here you’ve added two form elements, a text input field into which users can type, and a Submit button.

    Dreamweaver has become more proactive about encouraging developers to design according to Web standards and accessibility guidelines, as you can see from the accessibility dialog encountered twice in this step.

  4. Click the text field, and in the Property inspector, name it firstName and press Tab or Enter/Return.

    You will use this name to retrieve the value in ASP, ColdFusion, or PHP in a few minutes. Always give your form fields meaningful names. Code is hard enough to write as it is—don’t make it worse by sticking with Textfield1, Textfield2, and Textfield3, which Dreamweaver inserts by default.

    You press Tab or Enter/Return to apply a setting entered in the Property inspector.

  5. Click <form#form1> in the tag selector, to activate the Property inspector for the form. Name the form frm_name, and type test_form_processor.asp (or .cfm or .php) in the Action field.

    The Action field points to the page (or other resource) that contains the script that can process the form data. It is always a URL. In this case, it points to a URL that doesn’t exist, because you haven’t created test_form_processor.asp (or .cfm or .php) yet. The method should be set to POST. I’ll explain what POST means in a later lesson.

  6. Choose File-> Save As and name the file test_form.asp.

    This is a throwaway file that you are creating just to test a simple dynamic site feature. I often prefix such files used for testing purposes with “test_”; that way, when I am finished, I can easily find and remove them.

Creating the Output Page

You have completed the input page. Now it’s time to show how ASP or ColdFusion can collect that information, insert it into regular XHTML code, and return it to the client browser.

  1. Create a new dynamic page.

    See Step 1 from the previous task if you forgot how.

  2. Save the new file as test_form_processor.asp.

    I often use the suffix “_processor” for pages that exist to process some sort of data. This page will process the data entered by the user in the form.

  3. In design view, type Thank you, , for filling out my form. With the cursor anywhere inside this paragraph, choose Paragraph from the Format menu in the Property inspector.

    Eventually, this text will say, Thank you, [whatever the user’s first name is], for filling out my form. Most of the sentence is just static text. The dynamic part will be the actual value of the first name, which will be pulled in from the form.

    By selecting Paragraph as the Format, you wrap the text string in <p></p> tags.

  4. Position the cursor between the commas, where you would enter someone’s name. Open the Bindings panel (Window > Bindings).

    The Bindings panel is used to specify all the data that is available to the page. Data is typically stored in a name-value format. In this particular case, the name is firstName. The value doesn’t yet exist—it won’t exist until someone fills out the form. Remember also that this value comes to the page from a form on the test_form.asp page. Other possible sources besides forms (and you’ll get quite familiar with these later) include the URL, a recordset (data retrieved from a database), a cookie, and more. But this time, it’s from a form.

  5. Click the + button to add a new binding. From the menu, choose Request Variable (ASP) or Form Variable (ColdFusion and PHP). In the resulting dialog, for ASP, select Request.Form in the Type Menu and type firstName in the Name field, or for ColdFusion or PHP type firstName in the Name field. Click OK.

    The first screen shot shows the Request Variable dialog, which ASP users see, while the second one shows the Form Variable dialog, which ColdFusion and PHP users see.

    The Bindings panel is updated to show the firstName variable. The screen shot shows what the Bindings panel looks like in ASP. It looks slightly different in ColdFusion and PHP (the word Request is replaced with Form, and the word Form.firstName is replaced with firstName).

    You might be wondering what exactly you’ve just accomplished. If you take a look at your code, you’ll see that you haven’t changed the document at all: The code is the same as it was before you opened the Bindings panel. What you’ve done is use Dreamweaver’s graphic interface to tell Dreamweaver how to write a block of dynamic code.

    Back at the beginning of the chapter, I listed three code snippets side by side: one each in ASP, ColdFusion, and PHP. The code in those snippets specified a variable (firstName); its origin (a form); and what to do with it (output it to XHTML). What you’ve just done in the Bindings panel is specify that logic in a way that Dreamweaver can understand and translate into code.

    For ASP, you specified a Request variable. In ASP, the Request object is used to retrieve information from a given location. In the dialog, you then specified Request.Form, which tells ASP to look in the Request object for the variable in a form. Finally, you specified the name of the variable itself. You have provided a road map for Dreamweaver/ASP to find the value of the firstName variable.

    For ColdFusion and PHP, you specified a form variable, which is sufficient for ColdFusion or PHP to look in the right place (no need to worry about Request objects and such). Then you provided the name of the variable. Again, to summarize, you have provided a road map for Dreamweaver/ColdFusion or PHP to find the value of the firstName variable.

    At this point, though, you have told Dreamweaver only how to find the variable. You haven’t actually asked it to find that variable; nor have you asked Dreamweaver to do anything with that value once it has it.

  6. Make sure that the variable Form.firstName (ASP) or firstName (ColdFusion/PHP) is selected in the Bindings panel, and click the Insert button at the bottom.

    A blue highlighted {Form.firstName} appears on the page, between the commas. Blue highlighted text signifies the presence of dynamic content in Dreamweaver. The text won’t appear blue when viewed in a browser. For that matter, it also won’t display {form.firstName}, either: It will display instead the user’s first name.

    If you look in the actual code, you should see that <%= Request.Form("firstName") %> (ASP), <cfoutput>#form.firstName#</cfoutput> (ColdFusion), or <?php echo $_POST['firstName']; ?> (PHP) has been added. These are the same snippets I showed you earlier in the chapter, with one small exception in the ASP code.

    The way to tell IIS to output an expression is to use the Response object. The most common use of the Response object is Response.Write(). This is a command that tells IIS to insert whatever’s inside the parentheses into the document. With a few nuances, Response.Write() is more or less the equivalent of <cfoutput> or echo. Response.Write() is so popular that it has a shortcut. When you see an ASP code block that begins <%= rather than simply <%, it means <% Response.Write(). In other words, the following two lines of code mean the exact same thing:

    <% Response.Write(Request.Form("firstName")) %>
    <%= Request.Form("firstName") %>
    

    To summarize what you have done in the last two steps, you told Dreamweaver/ASP, Dreamweaver/ColdFusion, or Dreamweaver/PHP how to find the firstName variable, using the Bindings panel’s + button. Then, you inserted that binding onto the page, which told ASP, ColdFusion, or PHP how to find the variable and also to display the current value of the variable.

  7. Save and close all open documents. In the Site panel, hold down the Shift key and select both test_form.asp and test_form_processor.asp. Click the Put File(s) button in the toolbar at the top of the panel.

    You can’t test the site unless you run it through a server, and your server is not your local site. To test your site, you have to upload, or Put, your file to the server.

  8. Select test_form.asp in the Site panel, and press F12 to test it in a browser. When the page loads, type your first name in the field and click Submit.

    You are redirected to the test_form_processor.asp page. As I hope you anticipated, the first name you entered in the form now appears on the screen.

  9. Still in your browser, choose View > Source (or your browser’s equivalent). Look at the line enclosed in <p> tags.

    This is the interesting part. The dynamic code has been completely removed! The code for this page is that of a static XHTML Web page. Even the dynamic part, the first name, looks as though it were hard-coded in there. But of course, you know it wasn’t.

    Our review of the output code brings up a critical concept. The page you code in Dreamweaver is different from the page the user sees in a browser, even though they both have the same name (and still, of course, a great deal in common).

    The difference between the two versions of the page is that the original page’s ASP/ColdFusion/PHP code is processed and removed, with its output values written into the XHTML as regular XHTML.

    The two versions of the page also share some similarities: All the standard XHTML code written into the original, including the <body> and <p> tags, and most of the text, are passed unchanged to the output version of the page.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020