Course Introduction, Dynamic Web Pages & Scripting

clangpotatoSoftware and s/w Development

Oct 28, 2013 (3 years and 5 months ago)

70 views

Course Introduction,

Dynamic Web Pages & Scripting


Professor J. Alberto Espinosa


ITEC 334 Fall 2010

Online (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

Course

Introduction

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

12

Client Browser

Internet Explorer

Netscape Navigator

Static

HTML via HTTP

Web Server

Microsoft Internet Information Server (IIS)

Apache




Connect

to server and

request

HTML file

Open connection
and find

HTML 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

attrib
1
=value
1
attrib
2
=value
2
….
>
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.)

Other

Files

(video, sound)

Other
Web
Pages

Static

Web

Site

Static

Web

Page

15

Static

HTML:

HTTP Shortcomings



Corporate information is dynamic



As corporate information changes,



Database contents
change too



W
eb
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.)

Other

Files

(video, sound)

Dynamic

Web

Page

Other
Web
Pages

Dynamic

Web
Application

Client
-
Side
Scripts

Server
-
Side
Scripts

Static

Web

Page

Other

Programs,
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 Browser

Internet Explorer

Netscape Navigator

Dynamic

Web Pages with
Client
-
Side
Scripts

Web Server

Microsoft Internet Information Server (IIS)

Apache




Connect

to server and

request

HTML file

Open connection
and find

HTML 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 Scripting

Embedding 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:

Dynamically

Formatted

HTML Page

w/Results

Client

Web

Server

Browser

Server

Database
Server

(usually runs in
the same
computer as the
web server)

Database

Query
String

Query

Results

Results

Click

Submit

28

Dynamic

Web Pages with
(ASP) Server
-
Side Scripts

Microsoft’s Web Server

(ASP + MS Access or SQL Server)






Client Browser

Internet Explorer

Netscape Navigator

Request

file.html

Request

file.asp

Query
Results

(record set)

Databases

SQL Query

(if any)

Process
Scripts

Web Server

asp.dll

HTML doc

Fetched

(+ 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.html

file.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.html


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

40

Example: ASP Processing Data from Forms

<!
--

customerSubmit.asp
--
>


Request
From Form
Object

Add record
in database

ASP script

HTML

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 & Site

Steps (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 & Site

Steps:


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

Setting

up 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