16 Web applications HTML and Clientside code Mark
16 – Web applications: HTML and Client-side code Mark Dixon, So. CCE SOFT 131 Page 1
Session Aims & Objectives • Aims – To introduce the fundamental ideas involved in web applications • Objectives, by end of this week’s sessions, you should be able to: – create a static web page, using HTML – add dynamic functionality, using VB Script Mark Dixon, So. CCE SOFT 131 Page 2
Web Hardware and Software network connection Client Mark Dixon, So. CCE Server Browser Application Web-server Application (MS Explorer, Netscape) (MS IIS, Apache) SOFT 131 Page 3
Request-Response Cycle <html> <head> <title>Mark Dixon's web site</title> </head> <body background="Back. Ground. JPG"> <font size=+3><center><b><p>Mark Dixon's web site</b></center> <font size=+2> <p>Welcombe to my web server. Please select from the following list: <ul> <li><a href=". /Soft 131/Index. htm">Soft 131: Introduction to programming for Multimedia and Internet applications. </a> </ul> </font> </body> </html> Browser Application (MS Explorer, Netscape) Response Request Web-server Application (MS IIS, Apache) http: //mdixon. soc. plym. a c. uk/ Mark Dixon, So. CCE SOFT 131 Page 4
HTML • Hyper-Text Markup Language • text files – edited with notepad • with tags, e. g. – bold: <b>This will be in bold</b> – italic: <i>This will be in italic</i> • work like brackets – start/open – end/close <b> </b> • reference: http: //www. willcam. com/cmat/html/crossref. html SOFT 131 Mark Dixon, So. CCE Page 5
HTML page - Structure head (info) body (content) Mark Dixon, So. CCE <html> <head> <title>Test</title> </head> <body> <p> This is a test <b>page</b>. </body> </html> SOFT 131 Page 6
Example 1: Intro page <html> <head> <title>Mark Dixon's web site</title> </head> <body background="Back. Ground. JPG"> <font size=+3><center><b><p>Mark Dixon's web site</b></ce <font size=+2> <p>Welcombe to my web server. Please select from the follow <ul> <li><a href=". /Soft 131/Index. htm"> Soft 131: Introduction to programming for Multimed and Internet applications. </a> </ul> </font> </body> </html> Mark Dixon, So. CCE SOFT 131 Page 7
Forms • Form – collection of input tags <HTML> <HEAD> <TITLE>Login</TITLE> </HEAD> <BODY> <FORM NAME="frm. Login"> <INPUT NAME="txt. User. Name" TYPE="input"><BR> <INPUT NAME="txt. Password" TYPE="password"><BR> <INPUT NAME="btn. Logon" TYPE="button" VALUE="Logon" DISABL </FORM> </BODY> </HTML> Mark Dixon, So. CCE SOFT 131 Page 8
Dynamic processing (what) • HTML is static – identical on each load – very limiting • Dynamic processing – client-side (browser) • quicker (no request-response cycle) • insecure (view source) • limited (can't access server-side databases) – server-side (server application) • slower • more powerful Mark Dixon, So. CCE SOFT 131 Page 9
Client-side processing (how) • Use <script> tags, to enclose • Script code – VB Script – Java Script <SCRIPT LANGUAGE=VBScript> <!-Msg. Box "Hello there!" --> </SCRIPT> Mark Dixon, So. CCE SOFT 131 Page 10
Example 2: Form validation <HTML> <HEAD> <TITLE>Login</TITLE> <SCRIPT LANGUAGE=VBScript> <!-Sub txt. User. Name_On. Key. Up() If Document. frm. Login. txt. User. Name. Value = "" Then Document. frm. Login. btn. Logon. Disabled = True Else Document. frm. Login. btn. Logon. Disabled = False End If End Sub --> </SCRIPT> </HEAD> <BODY> <FORM NAME="frm. Login"> <INPUT NAME="txt. User. Name" TYPE="input"><BR> <INPUT NAME="txt. Password" TYPE="password"><BR> <INPUT NAME="btn. Logon" TYPE="button" VALUE="Logon" DISABLED="True"> </FORM> </BODY> </HTML> Mark Dixon, So. CCE SOFT 131 Login Page 11
Reference • Inputs – Text – Password – Button – Submit • Events – On. Click – On. Key. Up – On. Mouse. Over Mark Dixon, So. CCE SOFT 131 Page 12
- Slides: 12