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

4

• Course Introduction• Dynamic Web Pages & Scripting

Agenda

5

CourseIntroducti

on

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/

9

Dynamic Web Pages

and Scripting

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:

18

Client-Side Scripting

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

22

Example 1

23

Example 2

See: http://faculty.vassar.edu/lowry/kappa.html

24

Other examples: http://auapps.american.edu/~alberto/images/BouncingDots.html http://auapps.american.edu/~alberto/images/BouncingHearts.html

Example 3

25

Server-Side Scripting

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)

33

See: http://www.jibe4fun.com/scripts/orders/

34

HTML

Both

Example: ASP (Query) Script

ASP

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>

36

See: http://www.jibe4fun.com/scripts/orders/Customer_List.asp

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

45

Web Hosting Setup

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

47

Registering your own Domain (example)

http://www.alentus.com/hosting/

48

Editing Domain Name Details (example)

https://www.domainname.com

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

50

Uploading Files via FTP

Upload Button

Download Button

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)

53

Connecting to Your Web Hosting Service via Dreamweaver (2)

Select:

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.

57

Connecting to Your Web Hosting Service via Dreamweaver (5)

Select:

58

Connecting to Your Web Hosting Service via Dreamweaver (6)

Select:

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

61

Settingup an

ODBC DSN(example)

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