08 – Web applications: HTML and ActiveX controls
description
Transcript of 08 – Web applications: HTML and ActiveX controls
![Page 1: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/1.jpg)
Mark Dixon, SoCCE SOFT 131 Page 1
08 – Web applications: HTML and ActiveX controls
![Page 2: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/2.jpg)
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
![Page 3: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/3.jpg)
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
![Page 4: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/4.jpg)
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
![Page 5: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/5.jpg)
Mark Dixon, SoCCE SOFT 131 Page 5
Example: MulTest - Test
http://mdixon.soc.plym.ac.uk/soft131/multestX.htm
![Page 6: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/6.jpg)
Mark Dixon, SoCCE SOFT 131 Page 6
networkconnection
Web Hardware and Software
ClientServer
BrowserApplication(MS Explorer,
Netscape)
Web-serverApplication
(MS IIS,Apache)
![Page 7: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/7.jpg)
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
![Page 8: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/8.jpg)
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
![Page 9: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/9.jpg)
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)
![Page 10: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/10.jpg)
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>
![Page 11: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/11.jpg)
Mark Dixon, SoCCE SOFT 131 Page 11
HTML - Limitations
• static– cannot change
– no real interaction (only links)
![Page 12: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/12.jpg)
Mark Dixon, SoCCE SOFT 131 Page 12
ActiveX controls• VB can create
– stand alone .exe files
– ActiveX controls (.ocx files)
![Page 13: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/13.jpg)
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>
![Page 14: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/14.jpg)
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
![Page 15: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/15.jpg)
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
![Page 16: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/16.jpg)
Mark Dixon, SoCCE SOFT 131 Page 16
Enabling/Disabling IIS• Start, Settings, Control Panel,
Administrative Tools, Internet Services Manager StopStart
![Page 17: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/17.jpg)
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)
![Page 18: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/18.jpg)
Mark Dixon, SoCCE SOFT 131 Page 18
Testing you Web-server (IIS)• Use localhost in browser:
![Page 19: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/19.jpg)
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
![Page 20: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/20.jpg)
Mark Dixon, SoCCE SOFT 131 Page 20
Creating Internet Package
![Page 21: 08 – Web applications: HTML and ActiveX controls](https://reader035.fdocuments.net/reader035/viewer/2022081501/56815270550346895dc0a119/html5/thumbnails/21.jpg)
Mark Dixon, SoCCE SOFT 131 Page 21
Deployment to Web-server• Deploy to C:\INetPub\wwwroot folder on
server: