Post on 22-Dec-2015
Mark Dixon, SoCCE SOFT 131 Page 1
08 – Web applications: HTML and ActiveX controls
Mark Dixon, SoCCE SOFT 131 Page 2
Session Aims & Objectives• Aims
– To introduce two 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– create an ActiveX control VB application,– embed this ActiveX control in a web page
– install IIS on server– deploy your ActiveX control to your web-site
Mark Dixon, SoCCE SOFT 131 Page 3
Example: Multiplication TestSPECIFICATION
• User Requirements – allow children to practice multiplication
• Software Requirements– Functional: software should
–pick two numbers between 0 and 12 randomly–ask user what the result of multiplying them is–allow user to enter answer–check whether answer is correct–tell user
– Non-functionalshould be interesting and colourful, and available on-line
Mark Dixon, SoCCE SOFT 131 Page 4
Example: MulTest - Design• User interface design:
• Functional design:Trigger (when) Actions (what)User clicks Ask button select 2 random numbers, & ask user
what result of multiplying them is
User types in Text box only allow digits 0 to 9
User clicks Check button compare user's answer with correct answer, & display appropriate message
Mark Dixon, SoCCE SOFT 131 Page 5
Example: MulTest - Test
http://mdixon.soc.plym.ac.uk/soft131/multestX.htm
Mark Dixon, SoCCE SOFT 131 Page 6
networkconnection
Web Hardware and Software
ClientServer
BrowserApplication(MS Explorer,
Netscape)
Web-serverApplication
(MS IIS,Apache)
Mark Dixon, SoCCE SOFT 131 Page 7
Request-Response Cycle
BrowserApplication(MS Explorer,
Netscape)
Web-serverApplication
(MS IIS,Apache)
http://mdixon.soc.plym.ac.uk/
Request
<html> <head> <title>Mark Dixon's web site</title> </head> <body background="BackGround.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="./Soft131/Index.htm">Soft131: Introduction to programming for Multimedia and Internet applications.</a> </ul> </font> </body></html>
Response
Mark Dixon, SoCCE SOFT 131 Page 8
• 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 <b>– end/close </b>
• reference: http://www.willcam.com/cmat/html/crossref.html
HTML
Mark Dixon, SoCCE SOFT 131 Page 9
HTML page - Structure
<html> <head> <title>Test</title> </head> <body> <p> This is a test <b>page</b>. </body></html>
head(info)
body(content)
Mark Dixon, SoCCE SOFT 131 Page 10
Example: Intro page<html> <head> <title>Mark Dixon's web site</title> </head> <body background="BackGround.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="./Soft131/Index.htm"> Soft131: Introduction to programming for Multimedia and Internet applications.</a> </ul> </font> </body></html>
Mark Dixon, SoCCE SOFT 131 Page 11
HTML - Limitations
• static– cannot change
– no real interaction (only links)
Mark Dixon, SoCCE SOFT 131 Page 12
ActiveX controls• VB can create
– stand alone .exe files
– ActiveX controls (.ocx files)
Mark Dixon, SoCCE SOFT 131 Page 13
ActiveX Controls & HTML• Use <object> tag:
<HTML> <HEAD> <TITLE>Multiplication Test</TITLE> </HEAD> <BODY> <p><font size=+2><center><b>Multiplication Test</b></center></font> <p>This page contains an ActiveX control (written in VB) that tests your multiplication skills. <center>
<OBJECT ID="ctlMulTest" CLASSID="CLSID:0F8291D9-81A5-4E59-AF18-26F7515D3F82" CODEBASE="MulTestX.CAB#version=1,0,0,0"> </OBJECT> </center> <p>Good luck! </BODY></HTML>
Mark Dixon, SoCCE SOFT 131 Page 14
Obtaining CLID• Run ActiveX control in browser from VB (F5)
• View Source
• Copy HTML <object … > tag to new html file
Mark Dixon, SoCCE SOFT 131 Page 15
Internet Information Services (IIS)• IIS / personal web server on Windows CD
Start, Settings, Control Panel, Add/Remove Programs
Add/RemoveWindows
Components
IIS
Mark Dixon, SoCCE SOFT 131 Page 16
Enabling/Disabling IIS• Start, Settings, Control Panel,
Administrative Tools, Internet Services Manager StopStart
Mark Dixon, SoCCE SOFT 131 Page 17
Making pages available on-line• For others to see your pages:
– copy/move them to C:\INetPub\wwwroot folder (on server)
– enable IIS (on server)– create installation package– deploy to server– give people address of your server, either:
• Dynamic IP address: not practical as it changes on server re-boot
• Static IP address fixed by ISP (e.g. 141.163.57.220)
• register a domain name (e.g. mdixon.soc.plymouth.ac.uk)
Mark Dixon, SoCCE SOFT 131 Page 18
Testing you Web-server (IIS)• Use localhost in browser:
Mark Dixon, SoCCE SOFT 131 Page 19
Package & Deployment• Create installation program
– Setup.Exe: standalone installation– cab files: installation via internet
• Start menu, …– Visual Studio Tools
menu• Package and
Deployment item
Mark Dixon, SoCCE SOFT 131 Page 20
Creating Internet Package
Mark Dixon, SoCCE SOFT 131 Page 21
Deployment to Web-server• Deploy to C:\INetPub\wwwroot folder on
server: