User Interfaces for Apache Graphical and More Useful Ones

Download Report

Transcript User Interfaces for Apache Graphical and More Useful Ones 

Accelerated Web Development Course
JavaScript and Client side programming
Day 2
Rich Roth
On The Net
http://east.on-the-net.com/neu
413-586-9668 - [email protected]
1
Day 2 outline
Database Connectivity overview
 Calendar Example
 Lab work on your web sites

– Mixed with discussion of JS Language
– and individual review of assignment
2
Client/Server - What is it ?
Browser
Web Server
Text Rendering
HTML
Engine
file transfer
3
Client/Server - Programmable
Browser
Web Server
Text Rendering
HTML
Engine
Programming
file transfer
CGI
Language(s)
External
Program
4
Client/Server - Programmable
Browser
Text Rendering
Engine
Programming
Language(s)
Forms:
1) GET - on URL
2) POST - stdin
Socket:
To data
server process
5
CGI: Common Gateway Interface
Based on passing form contents to program
outside the web server.
 Fields on forms are only HTML
controllable information
 Hidden fields are used to pass NON-user
entered information.

6
CGI Data Passing to program

GET:
– Information on URL of next page
– Easy to bookmark

POST:
– Passed as into to program
– Not visable
– Can NOT be bookmarked
7
CGI returning data
CGI Program creates a new web page
 Page created totally by the program.
 Program ‘populates’ template with
meaningful data
 Template written in HTML like statements
 XML

8
Server Template
<HTML><table>
<tr><th>Col one</th><th>Col 2</th></tr>
<datarow select day,event from dayinfo
where month=thismonth() sort by day>
<tr><td>[col1]</td><td>[col2]</td></tr>
</datarow>
</table></HTML>
9
Programmable Socket
Client side applet opens socket to server
 Only server allowed is one applet was
loaded from - (security sandbox)
 Socket is two way connection.
 Program on client asks/sends info to server
 Server is usually a custom data server or
standard interface to a database.

10
Data Server
Can Custom code or standard method
 Standards:

– ODBC - Open data base connector (MS)
– JDBC - Java DB connector (SUN)
– All requests done using SQL
Connector talks to Database server
 JS can call Java applet or JavaBean to
provide logic

11
SQL - Standard Query Language

Embedded Language
– Built on top of a standard language
A Database consists of a group of Table
 Each Table has Row and Columns
 Each Column is a specific data element
 Each Row is a record of data elements that
group together
 Each Row has a unique Identifier
 Tables are in ‘Third Normal Form’ (kinda) 12

Sample SQL Database

Table: Students
– Columns: Student ID, Name, DOB, Major
– One Row per student

Table: Classes
– Columns: Class No, Room, Time, Grade Level
– One Row per Class

Table: Attendence
– Columns: Class No, Student ID
– One row per student per class
13
Using Existing Scripts: Objects

Window
– Document
» Anchor, Applet, Area
» Form: Form elements
» Image, Link
– History
– Location
14
Built-in Objects, Data and Events

Properties:
– Data of an object

Methods:
– Actions on an object

Naming:
– Property: Object.property.subproperty
– Method: Object.property.subproperty()
15
Programming techniques

Basic Logic Flow
–
–
–
–
Variables: literal, ‘var’
Objects: ‘new’, no inheritance
if/then/else
Loop:
» for, while, for … in
» Break, Continue
– Functions

Expressions
16
Finding Javascript programs

Archives:
– Javascript.com
– See Class notes
– Check Search engines

Books:
– Get with Cdrom or disk, so don’t have to retype
Pages you like
 Ownership and Copyright

17
Homework
Find a script that fits into your site design
 Create a test page using that script
 Define what about the script needs changing
 Change if you can, in any case, send:

– A description of the purpose of the script
– The URL of where you found it.
– The web page using it, as far as you have done.

Email me ([email protected]) the page
Email only Text or HTML.
18
Cookie manipulation
Remember information from prior visits
 Carry “State” information between sessions

– Order in process
– Credit approved

Get information set by server for local use
19
Day 2 - Digging into JS
Javascript programming:
 Controlling Browser Objects:
 Programming tools:
 Lab:

– Special Calculators
– Reminder Calendar
20
Day 3 - Going beyond JS
Integration:
 Operations:
 Database operations with JS
 Lab:

– Events Database with calendar display
21