Web based School
A JavaScript Application |
 |
 |
Chapter NineA JavaScript ApplicationToday you will use knowledge gained yesterday to
construct an application using JavaScript and ActiveX controls. You will start with the
requirements for the application, do some quick design work, then implement the design. Project RequirementsYou've got a friend, let's call him JP, who runs a
programming shop. He has a new project that requires daily interaction with the customer
during development. The customer's headquarters is on the other coast. Both JP and the
customer have an Internet connection, and he wants to use it to facilitate the necessary
technical exchange. Specifically, he wants to be able to present the current status of the
project, give the user access to project documents and briefings, let the customer enter
in a change request, and finally, let the customer see the status of any change requests.
Overall, he also doesn't what this to look like a normal, billboard-type Internet site. He
wants it to look and act more like one of his company's programs. He asks, "Can you
do it?" You respond, "Is tomorrow too late?" Can You Do It?When you get back to your office, you kick yourself
for your traditional, overly optimistic estimate. You start to take a look at what he
wants and how you might do it. You are lucky in that the customer knows what he
wants. The worst times I have spent in the programming business revolve around situations
in which the customer knew what he didn't want (normally after it was built), but couldn't
quite articulate what he wanted. Let's look at the basic requirements:
You write these down, call home, and tell them you
will be a little late. "How late?" home asks. "Spring," you say. The
first thing you want to do is create a rough layout of the Web site. On a napkin, you
sketch something that looks like Figure 9.1. Figure 9.1. Layout of the
Web site. This shows a Welcome page linked to Project Status,
Change Request, and Status pages. From here you will
After you have done all this, you will finish the
project by
Use Word to Rough Out the Three Main Pages
Open up Word; make sure you have Internet Assistant
installed (see Day 4, "Tools of the Trade" for details).
Select New from the File menu and select HTML.dot as your template. Add the logo (logo.bmp
on the CD-ROM), some general welcome remarks, and links to the Project Status
(projstat.asp), Change Request (chngreq.asp), and Change Request Tracking (chngtrac.asp)
pages. Your screen should look like Figure 9.2. Figure 9.2. Welcome page
for JP Programming . Save your work as welcome.asp. Your HTML Code should
look like Listing 9.1. Listing 9.1. welcome.asp . Next, open a new HTML page in Word. This will be the
Project Status page . You will be putting some ActiveX controls here later. For now, all
you need is a logo, a return link to welcome.asp, and a link to a file called bigproj.doc
Your page should look like Figure 9.3. Figure 9.3. Project Status
page. Save your work as projstat.asp. Your HTML code
should look like Listing 9.2. Listing 9.2. projstat.asp . Open a new HTML page in Word. This
will be the Change Request page. You will be putting some ActiveX controls here to collect
and send the Change Request. You will also add some of the code generated by Internet
Information Server Add-In and generate the order from this page. Place a logo and a return
link to the Welcome page (welcome.asp) Your page should look like Figure 9.4. Figure 9.4. Change Request
page. Save your work as chngreq.asp. Your HTML code should
look like Listing 9.3. Listing 9.3. chngreq.asp . Open a new HTML page in Word. This will be the
Change Request Tracking page. You will be modifying this page with frames and code
generated by Internet Information Server Add-In. Again, all we need now is a logo and a
return link to the Welcome page (welcome.asp) Your page should look like Figure 9.5. Figure 9.5. Change Request
Tracking page . Save your work as chngtrac.asp. Your HTML code
should look like Listing 9.4. Listing 9.4. chngtrac.asp . This is a good point to stop and check your work so
far. You can look at these pages and test the links in Word or in the browser. I recommend
using the browser because few of your friend's customers will be using Word to look at
this site. Now, let's design a database. Design the Database in AccessI won't go into any database theory or design
philosophy here—it would be fun, but it is beyond the scope of this guide. In this
section, you will simply create the objects you need. Open Access and create a new database called
bigproj.mdb. Add two new tables, Project and Chngreq, as shown in Figure 9.6. Switch to the Project table and create the fields
shown in Figure 9.7. Switch to the chngreq table and create the fields
shown in Figure 9.8. Add a DriverAt this point you need to add a reference to the
database to the ODBC Driver Manager . Open your ODBC Administrator, push the System DSN
button, and add a new entry based on an Access driver. Fill the entry in as shown in
Figure 9.9. Figure 9.9. ODBC
Administrator . Using the Internet Information Server Add-InNow you are ready to use the Internet Information
Server Add-In to add a dynamic data page to use with the Project Status page. This new
page will return a current view of the data every time the page is called. Name this new
page pjdynam.asp. You will have to close Access and then open it again. Otherwise, the
Internet Information Server Add-In will not see the new entry you just made in the ODBC
Administrator. Open up the BigProj database and launch The Internet Information Server
Add-In by choosing it from the Tools menu under Add-ins. On the first page of the Internet
Information Server Add-In Wizard, choose Dynamic Display Wizard. On the next screen choose
the table project. Make sure your datasource is BigProj. Proceed to the field screen and
add all the fields. Move on to the final input page. You are going to
tinker with this screen so there is no need to add anything. Press Finish. Print out the
instruction sheet generated if you can't remember what to do with the three files you just
generated. (You will have created two files like Listings 9.5 and 9.6.) pjdynam.htx is the
template file that will show the data when requested. pjdynam.idc is the file you will
call from the Web page to generate the up-to-date project report. Listing 9.5. pjdynam.htx . This file will stand by itself. You will customize
it later. Listing 9.6. pjdynam.idc . For those of you familiar with Structured Query
Language, you can see that this IDC will execute a Select * from project. This statement
gets all the columns and rows from the database. Now, for the Change Request Page you will need to
generate an HTM, an HTX, and an IDC file to do an insert into the database. Launch the
Internet Information Server Add-In again. This time, on the first page, choose Insert Page
Wizard. On the next screen choose the Custreq table. Make sure your datasource is BigProj.
On the next screen choose all the fields except reqnum. The easiest way do this is select
all the fields and then remove reqnum. You are going to tinker with this page so nothing
is necessary on the final screen. Save your work as crinsrt.asp. (The Add-In will name the
other two files automatically.) You will generate crinsrt.asp, crinsrt.htx, and
crinsrt.idc as shown in Listings 9.7, 9.8, and 9.9. Print out the file summary report. Listing 9.7. crinsrt.asp. Listing 9.8. crinsrt.htx . Listing 9.9. crinsrt.idc . You need to generate one more group of forms with
the Internet Information Server Add-in Wizard—the query for the Track Status Change
Order page. This time call up the wizard and choose the Query and Display option. Pick the
Chrgreq table. Choose the ReqNum field to search. Pick the Requestor, DateofRequest, and
Status field for display. These will be the fields included in the return record. All this
is shown in Figure 9.10. Figure 9.10. Setting up the
Search and Return page . Save the file as crtrac.asp. This will also save
crtrac.asp and crtrac.idc. Your files should look like Listings 9.10, 9.11, and 9.12. Listing 9.10. crtrac.asp . Listing 9.11. crtrac.htx . Listing 9.12. crtrac.idc . You have what you need from the Internet Information
Server Add-in Wizard. Let's move on. What Do We Have So Far?All the files you have generated so far are in the
rough subdirectory of this chapter's entry on the CD-ROM. Feel free to link them up and
put them on your Web site. This is the end of the rough draft stage. From here you will
complete each Web page using JavaScript and ActiveX controls. From here you will
When you are done with these changes, you will have
the Web site JP wanted. The Main FrameOne of the most interesting current developments in
Web page technology is the frame. You have seen examples of frames throughout this guide.
From them you know that frames can make your Web site look and act more like a program.
Instead of being sequential, a site with a frame can have parts that stay put while others
are dynamic. For this project, to satisfy the requirement for a program look and feel you
will use a frame to divide the screen into four parts, as shown in Figure 9.11. The source for this frame is pretty straightforward,
as shown in Listing 9.13. Listing 9.13. bigframe.asp . The frames are named by the NAME attribute in the
<FRAME> tag. It is not obvious from the code where the frames are located. To
clarify which frame is where the page basic.asp, which is loaded into each frame, uses a
JavaScript routine that runs when the window loads to print out the window name. Listing
9.14 shows how this works. Listing 9.14. basic.asp . <HTML> Let's solve part of our puzzle by adding the link to
the document , bigproj.doc, that you put in projstat.asp. Load projstat.asp into Word or
edit it by hand. Remove the logo, left justify the links, and add new links to memo.doc
(done with Memo Wizard) and briefing.ppt (done with Briefing Wizard. Then target these
links to Frame4. See Listing 9.15 for details. Listing 9.15. Revised projstat.asp. Replace basic.asp with projstat.asp in bigframe.asp.
While you are at it, put the small company logo in Frame2. To do that, modify the projstat
in the rough directory to logo.asp, as shown in Listing 9.16. Listing 9.16. logo.asp . Change bigframe.asp to load logo.asp. After changing
bigframe.asp to load both logo.asp and projstat.asp, bigframe.asp should look like Listing
9.17. Listing 9.17. bigframe.asp . Your project so far should look like Figure 9.12. Figure 9.12. The project so
far. Note that when you select one of the links, Frame4
acts as an OLE container and brings in Word or PowerPoint, depending on the document you
chose. Tell your customer you worked for weeks to get this. The customer doesn't have to
know you haven't coded a single line yet, only changed some HTML tags. Let's do some
coding. The Navigation BarOpen up the ActiveX Control Pad , make a new HTML
layout, and place three buttons. Associate the pictures, home.gif, docs.gif, and
cardfile.gif with btnHome, bntStatus, and btnChangeRequest. (You can use your own pictures
if you want.) Since this is a navigation bar, most users would
expect some kind of text to come up when the mouse is over the buttons. Place code in the
onMouseMove events of each button to put a message describing the button in the status
bar. Then put code in the btnHome click event to launch welcome.asp. Finally, put code in
the btnStatus click event to launch the pydynam.idc file that generates the current
status. Make both the welcome.asp and the pjdynam.idc results appear in Frame4. Your code
should look like Listing 9.18. Listing 9.18. navigate.alx . Put navigate.alx into navigate.asp. Listing 9.19. navigate.asp . Finally modify bigframe.asp to place navigate.asp into Frame1. The line:
reflects the placement of navigate.asp into Frame1.
Place pjdynam.idc and pjdynam.htx into the scripts directory and fire up your browser. You
should see something like Figure 9.13. Figure 9.13. The navigation
bar in the main frame . As you play with this, you will notice a couple of
things. First, the welcome window we designed seems out of place in this environment. I'm
not running an art class (you may have seen my bicycle pictures in an earlier chapter),
and it won't further your study of design with ActiveX and JavaScript, but as you start to
use frames in Web site, you will have to rethink how you present your content. Also, the
text you put in the MouseMove events does change as you float over the buttons and does
communicate what the buttons are to the icon challenged. Time to build the next form. The Change Request FormThe Change Request form needs to gather data about
what the user wants to change. You will use the ActiveX Control Pad to create a Change
Request form. Place four text boxes, one combo box, two buttons, and five labels as shown
in Figure 9.14. Figure 9.14. Change Request
form. Then name the controls and add the code shown in
Listing 9.20. Listing 9.20. crform.alx . You put code in the bntClear click event to clear
the fields. You made a new function, CheckValues, that is called on the btnSend click
event. CheckValues makes sure the user has put values in all the fields. You placed code
in the Layout1.onload event to put items into the combo box (AffectedArea). In
anticipation of the manipulation of the IDC files in the next section, add crform.alx to
crinsrt.asp (the form you generated to insert the Change Request data into the database)
and modify crinsrt.asp to look like the Listing 9.21.. Listing 9.21. crinsrt.asp . <HTML> <META NAME="GENERATOR" CONTENT="IIS Add In For Access 95"> <HEAD><Title>Change Request Form</Title></HEAD> <BODY> <OBJECT CLASSid="CLSID:812AE312- 8B8E-11CF-93C8-00AA00C08FDF" id="crform_alx" STYLE="LEFT:0;TOP:0"> <PARAM NAME="ALXPATH" REF VALUE="crform.alx"> </OBJECT> <FORM ACTION="/scripts/crinsrt.idc" METHOD = "POST" NAME = "ORDERFORM" > <INPUT TYPE = "Hidden" NAME="Requestor"> <INPUT TYPE = "Hidden" NAME="DateofRequest"> <INPUT TYPE = "Hidden" NAME="AffectedArea"> <INPUT TYPE = "Hidden" NAME="RequestedChange"> <INPUT TYPE = "Hidden" NAME="NeedByDate"> <INPUT TYPE = "Hidden" NAME="Status"> </FORM> </BODY></HTML> The layout of crinst.asp will become clearer in the
next section. Open up navigate.alx and add this line: to the btnChangeRequest click method. This will
enable crinsrt.asp to be placed into Frame4 by navigate.alx. Fire up bigframe.asp and test
out your new page. It should look like Figure 9.15. Figure 9.15. Change Request
Form in action. You are on the homestretch. One big and one little
thing left to clean up. Let's do the big thing first. Returning the Change Request Tracking Number.The way crinst.htx is written now, it will send a
list of the data the user sends via crinst.idc. What you want to do here is have it return
a unique tracking number from the field ReqNum. In the Access database bigproj.mdb, this
field is of type Autonumber. This means that the database will assign it a unique value
after the data is inserted. What you will do here is have crinst.htx create another
request, routed through a new IDC and HTX file, that will return the ReqNum. Modify
crinst.htx to look like Listing 9.22. Listing 9.22. Changed crinst.htx . Here, you have embedded script in the template file
that loads up another request and submits it when window.onload event occurs. Write a new
file, crreqnum.idc, that will use RequestDate and Requestor to return a ReqNum. Name it
crreqnum.idc. It should look like Listing 9.23. Listing 9.23. crreqnum.idc . Notice this is an SQL statement that returns a
chngreq (which has been created by the database because it is an Autonumber) and passes
the results to the template crreqnum.htx. What you need here is a simple template that
will present the user with the Change Request Number. Try the code in Listing 9.24. Listing 9.24. crreqnum.htx . Upon closer examination, this is a simple HTML that
just presents the Change Request Number. The project now looks like Figure 9.16. Figure 9.16. The Returned
Change Tracking Number . Now that you have given the users a Change Request
Number, which they will probably lose (that is a different project), you need to give them
a way to use it. Adding a Track Change Request to the Navigation Bar .Add another button to the navigation bar. Name it
btnfind. Use picture findpeps.gif. Your navigation bar should now look like Figure 9.17. Figure 9.17. Final
navigation bar. Add code to the MouseMove and onclick events of
btnfind. In the MouseMove, add a line to print a message to the status bar. In the click
event, add code to launch the form crtrac.asp that you generated at the start of this
process. You are now done with the project. The code section of navigate.alx should look
like Listing 9.25. Listing 9.25. New navigate.alx . Remember the pictures in the <OBJECT> tags
generate lots of lines of characters that you don't need to see. If you fire up your Web
site and hit the Find button, your screen will look like Figure 9.18. Figure 9.18. Finding a
Change Request Number. SummaryYou have covered lots of ground today. You used all
your acquired skill to build a project using ActiveX and JavaScript. The application you
built looks more like a program that a traditional Web site, a trend I suspect will
continue. At this point you have had the opportunity to use both scripting languages. You
should probably have some initial feelings about which one will suit your purpose.
Tomorrow your ActiveX education will continue. Q&A
Quiz
|
|
|
Popular Tutorials
-
MS Access
1109
-
C++
1222
-
HTML
584
-
JavaScript
616
-
Vbscript
873
-
Oracle
473
-
VC++
875
-
SQL
2959
-
XML
514
-
Java
814
-
Perl
455
-
Linux
451
