Introduction to Computer Science – CSC101
Lab #4 – Dreamweaver II: Client / Server Scripting
Due: July, 25 2011 @ 5:00pm (Monday)
Points will be deducted for labs that are turned in late!
Your Name: __________________
Summer II 2011
WFU E-mail Address:_________________
Pre-Lab Reading Assignment:
If you have not completed the Pre-Lab instructions then stop now and complete
them. They can be located by going to http://www.wfu.edu/~pryoree and then to
Course Calendar.
Lab Objectives:
Today we will be adding another page to our CSC101 blog. This page will ask the
user for information, process it, and allow the user to view responses that others
have written about the class webpages. The overall objectives for this lab are:
-
To gain a basic understanding of how data is sent to a web server
To understand the basics of client-side scripting
To understand the difference between client and server side scripting
Grading:
I will visit your web site and look at the page you will create this week
(guestbook.html). In addition there are questions on the final page of this report
that you will answer. Your score for the lab will be based on the web page that
you create and post on your web site and your answers to the questions.
-
Lab Questions: 10pts
Web Page that displays properly on your site: 10pts
o Form properly constructed
o Client side script checks form input correctly
o All links display in the correct frames
I will check the following website for your page, and then click the Guestbook link:
http://www.wfu.edu/~yourusername/csc101/index.html
If this link does not open up the proper webpage, you will receive no points for the
completion of the page, even if it is located somewhere else. It is your responsibility
to ensure this link works before handing in you lab. If you have any problems,
please ask me during lab!
Lab Instructions:
I.
Starting up Dreamweaver
1. We will be editing our pages in this lab (and from now on) in
Dreamweaver. Open up Dreamweaver, and make sure you are in your
csc101 site that we created in lab 3. In the files browser on the right
hand site, make sure that you are in local view (the files on your
computer).
You should see the files that are located in your
userdata/csc101 (including your newly created lab4 folder)
II.
Setting Up a New Page
1. In Dreamweaver, create a HTML file in your lab4 folder. You can do
this by going to File -> New -> Basic Page -> HTML. Save the file with
the name guestbook.html, in your lab4 folder.
2. Change the background color of the page to something other than
white. How do you do this?
3. Insert the following as centered text at the top of your page:
i. CSC101 Blog Guestbook
4. Give the text some flair by changing the color and size.
5. Underneath the heading, add some left justified text thanking the
viewer for signing the guestbook.
6. Under this line, also add the line “You can Click Here to view the
guestbook for the CSC101 Class”.
i. Make the words Click Here link to the following file:
ii. http://www.wfu.edu/~pryoree/csc101/book.txt
iii. Be sure to set the target of this link so that it opens in the
frame called “content”
7. Save this file and view it in a browser. Check to make sure the link
works.
III.
Creating a Form for a Server Side Script
1. Under the two lines of text that you have just added we are going to
add our form. The rest of the steps in this section will be inside of a
HTML form. Your form will be visualized by a red dashed rectangle in
Dreamweaver. All of the form elements you add to your page must
be inside of this rectangle. There should only be one rectangle, or
else your page will not work properly.
2. Create the form by selecting Insert -> Form -> Form. In the
Properties panel for the form, set the following values exactly as
typed: (be careful of case)
i. Form Name – feedback
ii. Action – http://www.wfu.edu/~pryoree/csc101/guestbook.php
iii. Method – POST
iv. Target – blank
v. Enctype – application/x-www-form-urlencoded
vi. Class - None
3. Typing inside of the red dashed rectangle, insert a line of left-justified
text containing the words: “Name”. After that text, we will insert a
text box where the user can enter their name. Do this by choosing
Insert -> Form -> Text Field. In the Properties panel for the text field,
set the following values:
i. Textfield – name
4.
5.
6.
7.
8.
9.
IV.
ii. Char width – 50
iii. Type – Single line
iv. Other Fields can Remain Blank.
Repeat step 3 changing the text to E-Mail, and also changing the name
of the Textfield to email.
Still working inside of the red rectangle, Type the following:
i. Please rate my Website
Add a dropdown box next to this text by clicking Insert -> Form ->
List/Menu.
i. Change the name to: rating
ii. Type – Menu
iii. Click List Values, create 5 Labels and a value for each rating.
For example, you will have the Item Label “Not Too Good”, with
the corresponding value, “1”, and the Label “Outstanding”
corresponding with the value “5”. Create 5 labels and give
each a value from 1-5. Do not select one to be initially selected
right now; we will deal with that later.
Finally, add another line of text that asks the viewer for any additional
comments. Under this line, add a text field, by clicking Insert -> Form
-> Text Field. Give this element the following properties:
i. Name – comments
ii. Char Width – 50
iii. Num Lines – 5
iv. Type – Multi Line
v. Wrap – Default
The last thing we need to do is to add some buttons for the user to
submit the form, and also reset the data in the form.
Still working in the red rectangle, under the text field that you just
added, click Insert -> Form -> Button. The Name and the value for
this button should be submit, and the action should be set to Submit
form. Repeat these steps to add a reset button.
Adding a Client Side Script
1. Switch to CODE view. Minimize the Dreamweaver window and open
up your browser. Go back to the lab web site to the Lab instructions.
Open the file “clientscript.txt”. Select all the text in the window and
“copy” it. Reopen your Dreamweaver window. Paste the copied text
into your form.html page IMMEDIATELY FOLLOWING THE <HEAD>
tag.
The client-side code you just pasted into your file is in a language
named Javascript. We’ll see later what effect this code has on your
page but first we’ll need to make several minor changes to your
guestbook.html page. It will be easier to make these changes in CODE
view rather than Design view.
2. Find the <form> tag in your page. Inside the <form> tag, add the
following attribute: onsubmit="return CheckForm()" This is case
sensitive, enter this exactly!
Your <form> tag should look like this:
<form action="http://www.wfu.edu/~pryoree/csc101/guestbook.php" method="post" enctype="application/xwww-form-urlencoded" name="feedback" target="_blank" id="feedback" onsubmit="return CheckForm()">
For the curious, the changes you have just made cause the form to
first use the Javascript function named CheckForm before sending the
data from the form to the web server. This function checks some
aspects of the form data to see if they are valid.
3. We are now going modify your ratings drop down box to add an option
that is selected when the page first loads.
i. Find the section of your HTML code that looks similar to this:
<select name="rating" id=”rating”>
<option value=”1”>Not Too Good</option>
<option value=”2”>Decent</option>
<option value=”3”>Pretty Good</option>
<option value=”4”>Very Good</option>
<option value=”5”>Outstanding</option>
</select>
ii. Modify this code so it looks like this: (one option is added):
<select name="rating" id=”rating”>
<option selected>Select a Rating</option>
<option value=”1”>Not Too Good</option>
<option value=”2”>Decent</option>
<option value=”3”>Pretty Good</option>
<option value=”4”>Very Good</option>
<option value=”5”>Outstanding</option>
</select>
4. Test out guestbook.html in a web browser. Try submitting the form
with no data entered. A pop-up box should appear. Try submitting
the form with a name and e-mail entered, but with no rating selected.
Another pop-up box should appear. If they don’t, then there is
something wrong.
V.
Adding guestbook.html to your CSC101 blog.
1. Add a link to your newly created guestbook.html in the file menu.html.
Be sure to set the target attribute of this link so that it opens up in the
right hand frame called content.
VI.
Uploading your files to the WFU Web Server.
1. Click the lab4 folder in Dreamweaver then click the blue up arrow.
2. Click menu.html and click the blue up arrow
3. You can now look at your updated webpage online at the address:
i. http://www.wfu.edu/~user/csc101
ii. click the link to Guestbook and try it out.
4. If your page does not appear, follow the following steps:
i. Goto http://users.wfu.edu/update.html
ii. Enter your User / Password
iii. Click on “Set permissions for personal homepage”
iv. Click Submit
v. Select Yes, then click OK
Short Answer Questions:
1) What happens when you submitted your page with no e-mail or name entered in
the text box? Why does this happen? (2 pts)
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
2) What happens when you submitted your page with no rating selected in the drop
down box? Why does this happen? (2 pts)
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
3) When you submit a fully completed form, what information do you receive in
response? (2 pts)
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
4) Which of the above actions (Q1, Q2, Q3) are carried out by a client side script?
(1 pt)
5) Which of the above actions (Q1, Q2, Q3) are carried out by a server side script?
(1 pt)
6) What additional information do you pass along to a web server when you submit
a form? (1 pt)
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
7) Name two languages commonly used for client side scripts (.5 pts)
8) Name two languages commonly used for server side scripts (.5 pts)