mark dixon, socce soft 131page 1 08 – web applications: html and activex controls

21
Mark Dixon, SoCCE SOFT 131 Page 1 08 – Web applications: HTML and ActiveX controls

Post on 22-Dec-2015

224 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

Mark Dixon, SoCCE SOFT 131 Page 1

08 – Web applications: HTML and ActiveX controls

Page 2: Mark Dixon, SoCCE SOFT 131Page 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

Page 3: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

Mark Dixon, SoCCE SOFT 131 Page 5

Example: MulTest - Test

http://mdixon.soc.plym.ac.uk/soft131/multestX.htm

Page 6: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

Mark Dixon, SoCCE SOFT 131 Page 6

networkconnection

Web Hardware and Software

ClientServer

BrowserApplication(MS Explorer,

Netscape)

Web-serverApplication

(MS IIS,Apache)

Page 7: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

Mark Dixon, SoCCE SOFT 131 Page 11

HTML - Limitations

• static– cannot change

– no real interaction (only links)

Page 12: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

Mark Dixon, SoCCE SOFT 131 Page 12

ActiveX controls• VB can create

– stand alone .exe files

– ActiveX controls (.ocx files)

Page 13: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

Mark Dixon, SoCCE SOFT 131 Page 16

Enabling/Disabling IIS• Start, Settings, Control Panel,

Administrative Tools, Internet Services Manager StopStart

Page 17: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

Mark Dixon, SoCCE SOFT 131 Page 18

Testing you Web-server (IIS)• Use localhost in browser:

Page 19: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

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: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

Mark Dixon, SoCCE SOFT 131 Page 20

Creating Internet Package

Page 21: Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls

Mark Dixon, SoCCE SOFT 131 Page 21

Deployment to Web-server• Deploy to C:\INetPub\wwwroot folder on

server: