Embed Size (px)
DESCRIPTION
Web-Application Development Workshop. Session Aims & Objectives. Aims to introduce the main concepts involved in creating web-applications Objectives, by end of this week’s sessions, you should be able to: create an html page create objects by adding html tags create an asp page - PowerPoint PPT Presentation
Citation preview
Mark Dixon Page 1
Web-Application DevelopmentWorkshop
Mark Dixon Page 2
Session Aims & Objectives• Aims
– to introduce the main concepts involved in creating web-applications
• Objectives,by end of this week’s sessions, you should be able to:
– create an html page– create objects by adding html tags– create an asp page– make your page interactive
• respond to events, read in form input and display dynamic output
– connect to a database – display data– create a php page
Mark Dixon Page 3
HTML: Elements & Tags• Hyper-Text Markup Language
• text files – edited with notepad
• tags, e.g. <b> <html> </a>
• element = start tag + content + end tag– bold: <b>This will be in bold</b>– italic: <i>This will be in italic</i>
• work like brackets– start/open <b> <i>– end/close </b> </i>
Mark Dixon Page 4
Questions: TagsHow many tags are in the following:
<head><title>Hello</title></head>
<body>
<i>Soft</i><b>131</b>
</body>
4
6
Mark Dixon Page 5
Questions: ElementsHow many elements are in the following:
<head><title>Hello</title></head>
<body>
<i>Soft</i><b>131</b>
</body>
2
3
Mark Dixon Page 6
HTML: Nesting Elements• Nesting – puts one element inside another:
<b><i>Hello</i></b>
• Cannot overlap elements:
<b><i>Hello</b></i>
Mark Dixon Page 7
Questions: HTML ElementsWhich of the following are valid elements?
<center><b>Title</b>
<head><title></title></head>
<p>Good <b>morning.</p></b>
<body><i>Soft</i><b>131</b></body>
Mark Dixon Page 8
HTML: page structure
<html> <head> <title>Test</title> </head> <body> <p>This is a test <b>page</b>.</p> </body></html>
head(info)
body(content)
• every HTML page has 2 sections:
Mark Dixon Page 9
<html><head><title>Test</title></head><body><p>This is a test <b>page</b>.</p></body></html>
• spaces are used to move lines in from left
• helps see structure
Indentation
<html> <head> <title>Test</title> </head> <body> <p>This is a test <b>page</b>.</p> </body></html>
head(is inside html)
title(is inside head)
Mark Dixon Page 10
HTML: Attributes• Some tags need extra information to work:
– Anchor (hyper-link) element: <a href=“nextpage.htm”>Next Page</a>
– Image element: <img src=“Beach.jpg” />
– Embedded object element: <embed src=“Music.mp3”></embed>
attribute (page to jump to)
attribute (filename of picture to display)
attribute (filename of music to play)
Mark Dixon Page 11
• Attributes go inside the start tag:
<a href=“nextpage.htm”>Next Page</a>
• not anywhere else
<a>href=“nextpage.htm”Next Page</a>
HTML: Attributes (where)
attribute
start tag
start tag
Mark Dixon Page 12
Questions: HTML attributesConsider the following HTML:
<a href="next.htm">Next Page</a>
a) Give an example of an attribute
b) Is the following an attribute? <img src=“House.jpg”>
c) How many attributes are there in: <font color=“green” size=3>
href="next.htm"
No (start tag)
2
Mark Dixon Page 13
HTML Tags: Reference• Lots of info available on-line, e.g.:
http://www.willcam.com/cmat/html/crossref.html
• Short list of tags:– <p>: new paragraph– <b>: bold text– <i>: italic text– <a>: anchor (link) to another web page– <img>: image/picture (.bmp, .jpg, .gif)– <embed>: embedded object (.avi .mpg .wav .mp3)
Mark Dixon Page 14
Example: My Summer
My summer web-page 2006
My summer web-page 2008
Mark Dixon Page 15
Visual Studio 2005
Mark Dixon Page 16
Create New Web-site• Select Empty web site
• Browse to D:\ and create folder
Mark Dixon Page 17
Create New Web page
Mark Dixon Page 18
Create New Web Page• Select HTML Page
• Type filename
Mark Dixon Page 19
Visual Studio
Design view – see page as it will appear
Mark Dixon Page 20
Visual Studio
Source view – see HTML code
Mark Dixon Page 21
View page (Run)
Mark Dixon Page 22
Enable debugging• Select Add new Web.config file
Mark Dixon Page 23
Environment Settings• Choose VB settings (same as my laptop):
Mark Dixon Page 24
Example: Default.aspx<%@ Page Language="VB" %>
<script runat="server"> Sub Page_Load() End Sub</script>
<html> <head><title></title></head> <body> <form runat="server"> </form> </body></html>
Mark Dixon Page 25
Example: Date.aspx<%@ Page Language="VB" %>
<script runat="server"> Sub Page_Load() lblDate.InnerHtml = Format(Now(), "ddd dd MMM yyyy") lblTime.InnerHtml = Format(Now(), "hh:mm:ss") End Sub</script>
<html> <head><title></title></head> <body> <span id="lblDate" runat="server"></span> <span id="lblTime" runat="server"></span> </body></html>
Mark Dixon Page 26
Example: Temperature.aspx<%@ Page Language="VB" %>
<script runat="server"> Sub btnCalc_ServerClick(ByVal s As Object, ByVal e As EventArgs) lblCel.InnerHtml = ((txtFah.Value - 32) * 5) / 9 End Sub</script>
<html> <head><title>Temperature Conversion</title></head> <body> <form runat="server"> <input id="txtFah" type="text" runat="server" /> <input id="btnCalc" type="submit" value="Calculate" runat="server" onserverclick="btnCalc_ServerClick" /> <span id="lblCel" runat="server"></span> </form> </body></html>
Mark Dixon Page 27
Example: Loan.aspx<%@ Page Language="VB" %>
<script runat="server"> Sub btnCalc_ServerClick(ByVal s As Object, ByVal e As EventArgs) lblPayAn.InnerHtml = (txtSal.Value - 15000) * 0.09 lblPayMo.InnerHtml = lblPayAn.InnerHtml / 12 End Sub</script>
<html> <head><title>Student Loan</title></head> <body> <form runat="server"> <input id="txtSal" type="text" runat="server" /> <input id="btnCalc" type="submit" value="Calculate" runat="server" onserverclick="btnCalc_ServerClick" /> <span id="lblPayAn" runat="server"></span> <span id="lblPayMo" runat="server"></span> </form> </body></html>
Mark Dixon Page 28
Example: PACS_VB.aspx<%@ Page Language="VB" %><%@ Import Namespace="System.Data.OleDb" %>
<script runat="server"> Sub Page_Load() Dim cs As String = "Provider=Microsoft.Jet.OLEDB.4.0;" + _ "Data Source=" + Server.MapPath("PACS.mdb") + ";" + _ "Persist Security Info=False" Dim sql As String = "SELECT * FROM [Image] ORDER BY [Date] DESC;" Dim cn As New OleDbConnection(cs) Dim cmd As New OleDbCommand(sql, cn) Dim r As OleDbDataReader Dim s As String cn.Open() r = cmd.ExecuteReader() s = "" Do While r.Read() s = s + "<b>" + Format(r("Date"), "ddd dd MMM yyyy") + "</b> " s = s + r("Title") + "<br>" Loop lblRes.InnerHtml = s End Sub</script>
<html> <head><title></title></head> <body> <p id="lblRes" runat="server"></p> </body></html>
Mark Dixon Page 29
Example: PACS_CS.aspx<%@ Page Language="C#" %><%@ Import Namespace="System.Data.OleDb" %>
<script runat="server"> void Page_Load(){ string cs = "Provider=Microsoft.Jet.OLEDB.4.0;" + "Data Source=" + Server.MapPath("PACS.mdb") + ";" + "Persist Security Info=False"; string sql = "SELECT * FROM [Image] ORDER BY [Date] DESC;"; OleDbConnection cn = new OleDbConnection(cs); OleDbCommand cmd = new OleDbCommand(sql, cn); OleDbDataReader r; string s; cn.Open(); r = cmd.ExecuteReader(); s = ""; while(r.Read()){ s = s + "<b>" + String.Format("{0:ddd dd MMM yyyy}", r["Date"]) + "</b> "; s = s + r["Title"] + "<br>"; }; lblRes.InnerHtml = s; }</script>
<html> <head><title></title></head> <body> <p id="lblRes" runat="server"></p> </body></html>
