Transcript New Kogod Powerpoint Template

ITEC 334 Fall 2010
Online (Business) Application Development
Course Introduction,
Dynamic Web Pages & Scripting
Professor J. Alberto Espinosa
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
2
Contact
• Office: KSB 33
• Office hours on Blackboard and course web site
• Telephone:
•
Office: 202-885-1958
•
Fax:
202-885-1992
• E-mail: [email protected]
• Web: http://auapps.american.edu/~alberto
3
Agenda
• Course Introduction
• Dynamic Web Pages & Scripting
4
Course
Introduction
5
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
6
Course Objectives
• Help students develop an understanding and handson 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
7
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/
8
Dynamic Web
Pages and
Scripting
9
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
10
Static Web Sites
Web
Server
Browser
Web Page Request
(click hyperling)
Send Web Page
Browser
i.e., Web Client
The Internet
Web
Server
Browser
11
Static HTML via HTTP
Web Server
Microsoft Internet Information Server (IIS)
Apache
Open connection
and find
HTML file
file.html =
Connect
to server and
request
HTML file
Send HTML
file “as is”
and close
connection
Client Browser
Internet Explorer
Netscape Navigator
file.html
12
HTML
(Hypertext Markup Language)
• 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>
•
•
•
•
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>
Example:
<FONT SIZE=2><BOLD>Hello!! </BOLD><U>there</U></FONT>
Displays as: Hello!! there
Other examples
13
Static Web Site Components
HTML
Tags
Graphics
Files
(jpg,gif,etc.)
HTML
File
Text
Static
Web
Page
Other
Files
(video, sound)
Static
Web
Site
Other
Web
Pages
14
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?
15
Dynamic Web Application Components
HTML
Tags
Graphics
Files
(jpg,gif,etc.)
HTML
File
Text
Static
Web
Page
Other
Files
(video, sound)
Other
Server-Side
Programs,
Scripts
etc.
Dynamic
Web
Page
Client-Side
Scripts
Dynamic
Web
Application
Other
Web
Pages
16
Web Scripts
What is a web script? is a short program that is embedded
on a web page.
Where does a script execute? A web script can be
written to run on the web client (i.e., browser) or server.
How to make web pages Dynamic? 2 generic
approaches (workarounds) to overcome static HTML:
1.
2.
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
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
17
Client-Side
Scripting
18
Dynamic Web Pages with
Client-Side Scripts
Web Server
Microsoft Internet Information Server (IIS)
Apache
Open connection
and find
HTML file
Connect
to server and
request
HTML file
file.html
with client- =
side scripts
Send HTML file
with scripts
“as is” and close
connection
Client Browser
Internet Explorer
Netscape Navigator
Display
file.html
& execute
scripts
19
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
20
Client-Side Scripting
Embedding Client-Side Scripts in HTML
HTML lines
<SCRIPT LANGUAGE = “JavaScript”>
script lines
</SCRIPT>
More HTML lines
<SCRIPT LANGUAGE = “Perl”>
script lines
</SCRIPT>
More HTML lines
…………
21
Example 1
22
Example 2
See: http://faculty.vassar.edu/lowry/kappa.html
23
Example 3
Other examples:
http://auapps.american.edu/~alberto/images/BouncingDots.html
http://auapps.american.edu/~alberto/images/BouncingHearts.html
24
Server-Side
Scripting
25
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)
26
Client-Server Computing:
Web Application with Server-Side Scripts
Web
Server
Client
Query
String
Results
Network
Click
Submit
Browser
Service Request
Database
Query
Results
Database
Server
(usually runs in
the same
computer as the
web server)
Response:
Dynamically
Formatted
HTML Page
w/Results
Server
27
Dynamic Web Pages with
(ASP) Server-Side Scripts
Microsoft’s Web Server
(ASP + MS Access or SQL Server)
SQL Query
(if any)
Process
Scripts
file.asp
asp.dll
Databases
Query
Results
(record set)

file.asp file.asp
Response
HTML doc
Generated
On-the-Fly
Web Server
Request
file.html
Request
file.asp
Client Browser
Internet Explorer
file.html Netscape Navigator file.html
file.html
HTML doc
Fetched
(+ Client-Side
scripts, if any)
=
file.html file.html
28
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!!
29
Server-Side Scripting
with Microsoft’s ASP
• 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.
30
Dynamic HTML with ASP
ASP file on web server (file.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
≠
HTML file sent to browser (file.asp)
HTML
<H3>Welcome to my page</H3>
<H2>Here is my product list</H2>
Dynamically
generated
HTML lines
by ASP
HTML
<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
<P>Thank you very much for
inquiring about our products
31
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)
32
See: http://www.jibe4fun.com/scripts/orders/
33
ASP
HTML
Both
Example:
ASP (Query) Script
34
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>
35
See: http://www.jibe4fun.com/scripts/orders/Customer_List.asp
36
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.)
37
Example: HTML Form (Data Input)
Doesn’t have to be ASP, can be plain HTML
<B>Customer Registration</B><P>
On submit,
Pass on to
<FORM ACTION=
“http://www.jibe4fun.com/scripts/orders/customerSubmit.asp”
METHOD=“POST”>
<TABLE>
<TR><TD>Please
<TD><INPUT
</TD></TR>
<TR><TD>Please
<TD><INPUT
</TD></TR>
etc.
</TABLE>
enter a customer ID (4 to 16 characters)</TD>
TYPE=“text” SIZE=“35” NAME="CustomerID">
enter your name</TD>
TYPE=“text” SIZE=“35” NAME="CustName">
Form Object
<INPUT TYPE="submit" VALUE=“Submit”></TD></TR>
</TABLE>
</FORM>
38
See:
http://www.jibe4fun.com/scripts/orders/Customer_Input.html
http://www.jibe4fun.com/scripts/orders/
39
Example: ASP Processing Data from Forms
ASP script
<!-- customerSubmit.asp -->
Request
From Form
Object
HTML
Add record
in database
40
Other Related Technologies
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)
41
Other Related Technologies
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
42
Setting Up Your Own Domain & Site
Steps (more on this later):
1.
2.
3.
4.
5.
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)
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 ecommerce 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
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)
Design, populate, upload and register your database(s) ODBC
DSN.
Design, develop and upload your HTML files and scripts
43
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
44
Web Hosting
Setup
45
Setting Up Your Own Domain & Site
Steps:
1.
2.
3.
4.
5.
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)
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 ecommerce 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
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)
Design, populate, upload and register your database(s) ODBC
DSN.
Design, develop and upload your HTML files and scripts
46
Registering your own Domain (example)
http://www.alentus.com/hosting/
47
Editing Domain Name Details (example)
https://www.domainname.com
48
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
49
Uploading Files via FTP
Download Button
Upload Button
50
Using FTP from a Browser
Use “ftp” instead of “http” Domain name
Note: when you type the URL you will be prompted for your FTP account ID and password
51
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)
52
Connecting to Your Web Hosting
Service via Dreamweaver (2)
Select:
53
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)
54
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)
55
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.
56
Connecting to Your Web Hosting
Service via Dreamweaver (5)
Select:
57
Connecting to Your Web Hosting
Service via Dreamweaver (6)
Select:
58
A Student’s Typical Dreamweaver Setup
(ALWAYS WORK ON LOCAL VIEW)
Click
DSN for this file is Prj01
DSN for this file is Lab01
DSN for this file is HW01
59
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
60
Setting
up an
ODBC DSN
(example)
61
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
62