View
216
Download
1
Category
Tags:
Preview:
Citation preview
AUCourse Introduction,
Dynamic Web Pages & Scripting
Professor J. Alberto Espinosa
ITEC 334 Fall 2010Online (Business) Application
Development
2
My Background• Coordinator for undergraduate IST concentration
• Started at AU in Fall’02
• Previously at Carnegie Mellon University
• PhD and MS in IS at Carnegie Mellon
• Also, BS Mechanical Engineering & MBA
• Several years of working experience
• Designing, implementing and managing IT & as CFO
• Mostly in international contexts
• Teach: ITEC 200, ITEC 630/ITEC 455 business analysis and database, ITEC 334 web applications
• Research focus: • IT support for global & geographically distributed collaboration
• Global software team coordination across distance and time zones
3
Contact
• Office: KSB 33
• Office hours on Blackboard and course web site
• Telephone:
• Office: 202-885-1958
• Fax: 202-885-1992
• E-mail: alberto@american.edu
• Web: http://auapps.american.edu/~alberto
6
Introduction
• “Online (Business) Application Development”
• Textbook: NO required textbook
• Only optional resource books – see syllabus:http://auapps.american.edu/~alberto/itec334/syllabus.html
• Generally, we will meet in FS&IT lab, but we will meet in the classroom some times, per the class schedule:http://auapps.american.edu/~alberto/itec334/schedule.html
7
Course Objectives
• Help students develop an understanding and hands-on experience on how to develop and implement web business applications online.
• Take students step by step through this process while learning the fundamentals of web application programming – NOT a heavy duty programming course.
• Learn how to manipulate and access data from databases through the web – i.e., to be able to handle online business transactions.
• Provide students with a practical and hands-on experience
8
Class Web Site
• Current versions of syllabus, class schedule, lecture notes, and homework assignments will be posted on the Blackboard class web site. Class announcements, grades, and e-reserve articles will be available via Blackboard only
• Course Syllabus also available at (let’s explore it):http://auapps.american.edu/~alberto/itec334/syllabus.html
• Class Schedule also available at (we will explore this later): http://auapps.american.edu/~alberto/itec334/schedule.html
• All homework assignments, lecture slides, and other class materials will be available via the Class Schedule link above, and also via Blackboard. See:– Class Notes: http://www.ksbit.net/scripts/itec334/notes.html
– Tutorials: http://www.w3schools.com/
10
Client-Server Architecture with Static Web Pages
• HTTP (hypertext transfer protocol):– Standard communication protocol between web client applications
(i.e., browsers) and servers– Web client requests connection and page to web server– Web server connects to web client– Web server searches and sends page to web client (AS IS)– Web server disconnects from browser
• Web Server Main Roles:– Grant, deny, open and terminate connections with web clients– Store, search and send requested pages
• Web clients (browsers) Main Roles:– Request, receive and interpret pages from Web servers– Format and display page per HTML description
11
Static Web Sites
The Internet
Web Page Request(click hyperling)
Send Web Page
BrowserWeb
Server
Browseri.e., Web Client
Web Server
Browser
The Internet
Web Page Request(click hyperling)
Send Web PageSend Web Page
BrowserWeb
Server
Browseri.e., Web Client
Web Server
Browser
12
Client BrowserInternet Explorer
Netscape Navigator
Static HTML via HTTP
Web ServerMicrosoft Internet Information Server (IIS)
Apache
Connectto server and
requestHTML file
Open connection and
findHTML file
Send HTML file “as is”
and close connection
file.html
file.html
=
13
HTML (Hypertext Markup Language)
• Some tags don’t need attributes – e.g., <BOLD>• Some tags do – e.g., <FONT size=2 color=blue>• Always need a beginning tag, e.g. <U> (underline)• And some times an ending tag, e.g. <U>Hello!</U>
• Is a “page description” language– NOT a programming language – very STATIC
• It contains
– Text (i.e., the information to display) and
– Tags (i.e., describing how the information will be displayed)
– Format: <TAG attrib1=value1 attrib2=value2….>Text</TAG>
Example: <FONT SIZE=2><BOLD>Hello!! </BOLD><U>there</U></FONT>Displays as: Hello!! there
Other examples
14
Static Web Site Components
HTML File
Text
HTML Tags
Graphics Files
(jpg,gif,etc.)
OtherFiles
(video, sound)
OtherWeb
Pages
StaticWebSite
StaticWebPage
15
Static HTML:HTTP Shortcomings
• Corporate information is dynamic As corporate information changes, Database contents change too Web pages need to change too By hand? Or, do we link to databases?
• How to customize displays for different users?
16
Dynamic Web Application Components
HTML File
Text
HTML Tags
Graphics Files
(jpg,gif,etc.)
OtherFiles
(video, sound)
DynamicWebPage
OtherWeb
Pages
DynamicWeb
Application
Client-Side Scripts
Server-Side Scripts
StaticWebPage
OtherPrograms,
etc.
17
Where does a script execute? A web script can be written to run on the web client (i.e., browser) or server.
1. Client-side scripts: scripts embedded in a web page which are processed (run) by the browser AFTER the web page has been downloaded to the client computer
2. Server-side scripts: scripts embedded in a web page which are processed (run) by the web server BEFORE the web page is sent to the browser
What is a web script? is a short program that is embedded on a web page.
Web Scripts
How to make web pages Dynamic? 2 generic approaches (workarounds) to overcome static HTML:
19
Client BrowserInternet Explorer
Netscape Navigator
Dynamic Web Pages with Client-Side Scripts
Web ServerMicrosoft Internet Information Server (IIS)
Apache
Connectto server and
requestHTML file
Open connection and
findHTML file
Send HTML file with scripts “as is” and
close connection
file.html with client-
side scripts
Display file.html
& execute scripts
=
20
Client-Side Scripting • Client-side scripts are commands embedded in (written within) an
HTML file
• Browsers need capability to process scripts
• Processing is done by browser AFTER the page has been received from the server
• Very useful for interactive and visual effects
• The Browser MUST support the scripting language used to write the script
• Most popular client-side scripting languages: JavaScript, Visual Basic Script (VB Script)
• One HTML page can have more than one script and each one can be written in a different language, but the common practice is to write all the scripts in the same language
21
HTML lines
<SCRIPT LANGUAGE = “JavaScript”> script lines</SCRIPT>
More HTML lines
<SCRIPT LANGUAGE = “Perl”> script lines</SCRIPT>
More HTML lines …………
Client-Side ScriptingEmbedding Client-Side Scripts in HTML
24
Other examples: http://auapps.american.edu/~alberto/images/BouncingDots.html http://auapps.american.edu/~alberto/images/BouncingHearts.html
Example 3
26
Server-Side Scripting
• Script commands are embedded in HTML file• The server must have capability to process scripts• Processing is done by web server BEFORE page is sent
to browser• Useful to customize pages based on data stored on the server
(databases, images, etc.)• And for centralized processing (at the server)• Web sever must support the scripting language
• For example: – Microsoft’s Active Server Pages (ASP)– Which is a web scripting environment– It runs on Microsoft IIS (Internet Info Server) Web Servers– Supports VB Script or JScript (MS version of JavaScript)
• Other scripting languages– PHP: Like ASP, Open Source for Apache servers– Perl: used with CGI scripts (Unix servers)
27
Client-Server Computing:Web Application with Server-Side Scripts
Network Service Request
Response:DynamicallyFormatted
HTML Pagew/Results
Client
WebServer
Browser Server
Database Server
(usually runs in the same
computer as the web server)
DatabaseQuery String Query
ResultsResults
ClickSubmit
28
Dynamic Web Pages with (ASP) Server-Side Scripts
Microsoft’s Web Server(ASP + MS Access or SQL Server)
Client BrowserInternet Explorer
Netscape Navigator
Requestfile.html
Requestfile.asp
Query Results(record
set)
Databases
SQL Query (if any)
Process Scripts
Web Serverasp.dll
HTML docFetched
(+ Client-Side scripts, if any)
Response HTML doc Generated On-the-Fly
file.asp file.asp
=file.html file.html
file.asp
file.html
file.htmlfile.html
29
How ASP Works:
1. Server script file needs to be named .asp (instead of .html) User clicks on URL with .asp file Browser sends request for .asp file to server
2. Web server notices file extension .asp and Loads a program (DLL) called ASP.DLL Which processes this and other .asp files Server generates a “new” web file Contains all original HTML stuff Plus processing results from ASP scripts These are dynamically formatted w/HTML tags
3. Server sends the “new” web file to the browser Not the “original” ASP file!!
30
• Embedded scripts in HTML page
HTML code (i.e., tags and text)<% ‘ Everything after <% is an ASP script
‘ Note: use quote for comments ASP script code (using VB Script as default or other as declared) ………..………. ………………....
%> ‘ ASP script ends with %>More HTML code
<% more ASP %>Etc.
Server-Side Scripting with Microsoft’s ASP
31
Dynamic HTML with ASP
<H3>Welcome to my page</H3>
<H2>Here is my product list</H2>
<% ‘Start ASP script
Open a database connection
SQL queries to database
Copy results to a record set
Display records one at a time
Close database connection
%> ‘End ASP script
<P>Thank you very much for inquiring about our products
ASP file on web server (file.asp) ≠ HTML file sent to browser (file.asp)
<H3>Welcome to my page</H3><H2>Here is my product list</H2>
<P>Thank you very much for inquiring about our products
HTML
HTML
Dynamically generated HTML lines
by ASP
<P><B>Product Price</B><HR><P>Hammer ……... $8.50<P>Pliers ……….… $7.79<P>Screwdriver ..… $4.50<P>Power Drill ….. $49.99<P>Chainsaw …… $95.95<P>Wrench ……….. $6.50
32
Common Uses of ASP with Databases
• Register a client (add a record)
• Membership maintenance (add/update records)
• List products & services (select query)
• Place orders (add records in database)
• Track order status (select query)
• Tech support (add and view record)
• Fill out a survey (add records in database)
35
Example: Query Results Sent to Browser(HTML dynamically generated by previous ASP script)
<IMG SRC="music22.gif"><B>Alberto's Music Instruments, Inc.<p>
<TABLE BORDER="0"><B>Customer List</B>
<TR><TH>ClientID</TH> <TH>Client Name</TH>
<TH>Shipping Address</TH> <TH>Telephone</TH> </TR>
<TR><TD>josee</TD>
<TD>Alberto Espinosa</TD>
<TD>Schenley Park, GSIA Building, #20</TD>
<TD>412-268-3681<BR></TD> </TR>
<TR><TD>sandy</TD>
<TD>Sandra Slaughter</TD>
<TD>5000 Forbes Avenue, Pittsburgh PA 15213</TD>
<TD>412-268-3681<BR></TD> </TR>
etc.
</TABLE></BODY></HTML>
37
Using Forms with ASP, HTML and Databases
• Capture data from user using HTML forms• Feed form data to an ASP script • Which is what the “Submit” button does• HTML forms contain data items with field names• Which are passed to ASP scripts for processing• Often used to embed an SQL command• To query a database (product list, etc.)• Or to insert records in a database (orders, etc.)
38
Example: HTML Form (Data Input)Doesn’t have to be ASP, can be plain HTML
<B>Customer Registration</B><P>
<FORM ACTION= “http://www.jibe4fun.com/scripts/orders/customerSubmit.asp”
METHOD=“POST”>
<TABLE><TR><TD>Please enter a customer ID (4 to 16 characters)</TD> <TD><INPUT TYPE=“text” SIZE=“35” NAME="CustomerID"> </TD></TR><TR><TD>Please enter your name</TD> <TD><INPUT TYPE=“text” SIZE=“35” NAME="CustName"> </TD></TR>etc.</TABLE>
<INPUT TYPE="submit" VALUE=“Submit”></TD></TR>
</TABLE></FORM>
On submit,Pass on to
Form Object
39
See: http://www.jibe4fun.com/scripts/orders/Customer_Input.htmlhttp://www.jibe4fun.com/scripts/orders/
40
Example: ASP Processing Data from Forms<!-- customerSubmit.asp -->
Request From Form
Object
Add record in database
AS
P s
crip
tH
TM
L
41
Client-Side Processing:• Java applets (like client-side scripts but these are
full programs)• AJAX (Asynchronous JavaScript and XML –
dynamic pages that retrieve data from the server)
Other Related Technologies
42
Server-Side Processing:• JSP (Java Server Pages): Sun's version of ASP (*.jsp files)• ASP.NET newer Microsoft development framework • ColdFusion (*.cfm files by Adobe’s Macromedia)
http://www.macromedia.com/
• PHP (*.php files – like ASP but is open source )• Lotus Notes & Domino
IBM, http://lotus.com/home.nsf/welcome/domino
Other Related Technologies
43
Setting Up Your Own Domain & SiteSteps (more on this later):
1. Register your own domain name or use the domain established for this course: www.ksbit.net. There are many domain registration services ($10 to $30 per year to keep your domain name active – note: you can register your domain name when you purchase your web hosting plan – see below)
2. Contract web hosting services with a company to hold your web pages – there are hundreds of web hosting services ranging from ($100 per year to highly priced commercial-strength e-commerce services. For this course, you need a web hosting service that supports Microsoft ASP. The web hosting service used for this course is Alentus Premier Plan: http://www.alentus.com/hosting/premierplan.asp
3. Go to your domain name service provider, edit your domain details and enter your web hosting service server name (or location – your service provider will send you this information)
4. Design, populate, upload and register your database(s) ODBC DSN.
5. Design, develop and upload your HTML files and scripts
44
Course Overview
• Brief database refresher
• HTML and Cascading Stylesheets (CSS)
• Introduction to programming concepts and object orientation
• Client-side scripting (JavaScript)
• Server-side scripting (ASP and VBScript)
• Security and business issues
Let’s look at the class schedule:
http://auapps.american.edu/~alberto/itec334/schedule.html
46
Setting Up Your Own Domain & SiteSteps:
1. Register your own domain name or use the domain established for this course: www.ksbit.net. There are many domain registration services ($10 to $30 per year to keep your domain name active – note: you can register your domain name when you purchase your web hosting plan – see below)
2. Contract web hosting services with a company to hold your web pages – there are hundreds of web hosting services ranging from ($100 per year to highly priced commercial-strength e-commerce services. For this course, you need a web hosting service that supports Microsoft ASP. The web hosting service used for this course is Alentus Premier Plan: http://www.alentus.com/hosting/premierplan.asp
3. Go to your domain name service provider, edit your domain details and enter your web hosting service server name (or location – your service provider will send you this information)
4. Design, populate, upload and register your database(s) ODBC DSN.
5. Design, develop and upload your HTML files and scripts
49
Connecting to Your Web Hosting Service via FTP
(Note: I use IPSwitch’s FTP, but there are many other FTP products and some are free)
Your FTP account user ID
Your assigned password
51
Use “ftp” instead of “http”
Using FTP from a Browser
Domain name
Note: when you type the URL you will be prompted for your FTP account ID and password
52
Connecting to Your Web Hosting Service via Dreamweaver (1)
From the main menu, select:Site Manage Sites New
Then enter a name for your web site (any name you wish)
54
Connecting to Your Web Hosting Service via Dreamweaver (3)
Enter your work folder, either a folder in your G drive or on your computer (this is where you will do all your work before publishing to the web)
55
Connecting to Your Web Hosting Service via Dreamweaver (4)
Your FTP account ID (to be provided by me)
Your password to be provided by me
Test your connection (before you do this, click on the Advanced tab an read the next slide)
56
Connecting to Your Web Hosting Service via Dreamweaver (4)
Be sure to check the Use Passive FTP box, if not checked already
Then click back on the Basic tab and test your connection.
59
DSN for this file is Prj01
DSN for this file is Lab01
DSN for this file is HW01
A Student’s Typical Dreamweaver Setup(ALWAYS WORK ON LOCAL VIEW)
Click
60
ODBC DSN Setup• ODBC is a driver that allows applications to share data
• DSN is the domain system name – i.e., a name you give to your database (doesn’t have to be the same as the file name) when you register the database in the ODBC registry. After you upload a database to your web hosting service provider you need to record a DSN for that database.
• To do this, access your web hosting service provider’s support site and submit a request (or support ticket) to setup this DSN. Typically, they will ask you for the following information:
– ODBC DSN: music name you want to use in your scripts (can use the same or different name than the actual file name)
– Website: www.ksbit.net your domain’s web site– Folder: database folder in this domain where the database is
located– Driver Type: MS Access– File Name: MusicInventory.mdb actual file name
• Once the DSN is registered, all your scripts will refer to this DSN (e.g., “music”) when accessing that database, not the file name (e.g., MusicInventory.mdb
62
Your Web Hosting Service FTP Accounts
• Log in ID: st01 for student 01, st02, st03 etc. for other students
• Password: will be provided to you individually
• Root folder: ksbit\students\01 (or 02 for st02, 03 for st03, etc.)
• Scripts folder: ksbit\students\01\scripts
• URL to your scripts folder:
http://www.ksbit.net/students/01/scripts/filename
For example, the file test.html for student st01 is:
http://www.ksbit.net/students/01/scripts/test.html
• Database folder: ksbit\students\01\database
• MS Access 2003 database: Lab01.mdb; DSN: Lab01
• MS Access 2003 database: HW01.mdb; DSN: HW01
• MS Access 2003 database: Pr01.mdb; DSN: Prj01
• Note, if you use MS Access 2007 be sure to save your file as 2003
Recommended