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
M Dixon 1
Web-Application DevelopmentWorkshop
M Dixon 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
M Dixon 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>
M Dixon 4
Questions: Tags
How many tags are in the following:
<head><title>Hello</title></head>
<body>
<i>Soft</i><b>131</b>
</body>
4
6
M Dixon 5
Questions: Elements
How many elements are in the following:
<head><title>Hello</title></head>
<body>
<i>Soft</i><b>131</b>
</body>
2
3
M Dixon 6
HTML: Nesting Elements
• Nesting – puts one element inside another:
<b><i>Hello</i></b>
• Cannot overlap elements:
<b><i>Hello</b></i>
M Dixon 7
Questions: HTML Elements
Which 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>
M Dixon 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:
M Dixon 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)
M Dixon 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)
M Dixon 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
M Dixon 12
Questions: HTML attributes
Consider 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
M Dixon 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)
M Dixon 14
Example: Default.aspx (VB)<%@ Page Language="VB" %><script runat="server"> Sub Page_Load() End Sub</script>
<html> <head><title></title></head> <body> <form runat="server"> </form> </body></html>
M Dixon 15
Example: Default.aspx (C#)<%@ Page Language="C#" %><script runat="server"> void Page_Load(){ };</script>
<html> <head><title></title></head> <body> <form runat="server"> </form> </body></html>
M Dixon 16
Example: Date.aspx<%@ Page Language="VB" %><script runat="server"> Sub Page_Load() parDate.InnerHtml = Format(Now(), "ddd dd MMM yyyy") parTime.InnerHtml = Format(Now(), "hh:mm:ss") End Sub</script>
<html> <head><title></title></head> <body> <p id=“parDate" runat="server"></p> <p id=“parTime" runat="server"></p> </body></html>
M Dixon 17
Example: Temperature.aspx<%@ Page Language="VB" %><script runat="server"> Sub btnCalc_ServerClick(ByVal s As Object, ByVal e As EventArgs) Handles btnCalc.ServerClick parCel.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" /> <p id=“parCel" runat="server"></p> </form> </body></html>
M Dixon 18
Example: Loan.aspx<%@ Page Language="VB" %><script runat="server"> Sub btnCalc_ServerClick(ByVal s As Object, ByVal e As EventArgs) Handles btnCalc.ServerClick parPayAn.InnerHtml = (txtSal.Value - 15000) * 0.09 parPayMo.InnerHtml = parPayAn.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" /> <p id=“parPayAn" runat="server"></p> <p id=“parPayMo" runat="server"></p> </form> </body></html>
M Dixon 19
Example: PACS_VB.aspx (accdb)<%@ Page Language="VB" %><%@ Import Namespace="System.Data.Odbc" %><script runat="server"> Sub Page_Load() Dim cs As String = "Driver={Microsoft Access Driver (*.mdb, *.accdb)};" + _ "Data Source=" + Server.MapPath("PACS.accdb") + ";" + _ "Persist Security Info=False" Dim sql As String = "SELECT * FROM [Image] ORDER BY [Date] DESC;" Dim cn As New OdbcConnection(cs) Dim cmd As New OdbcCommand(sql, cn) Dim r As OdbcDataReader Dim s As String cn.Open() r = cmd.ExecuteReader() s = "" Do While r.Read() s = s + r("Title") + "<br>" Loop cn.Close() lblRes.InnerHtml = s End Sub</script>
<html> <head><title></title></head> <body> <p id="lblRes" runat="server"></p> </body></html>
M Dixon 20
Example: PACS_VB.aspx (mdb)<%@ 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 + r("Title") + "<br>" Loop cn.Close() lblRes.InnerHtml = s End Sub</script>
<html> <head><title></title></head> <body> <p id="lblRes" runat="server"></p> </body></html>
M Dixon 21
Example: PACS_CS.aspx (accdb)<%@ Page Language="C#" %><%@ Import Namespace="System.Data.Odbc" %><script runat="server"> void Page_Load(){ string cs = "Driver={Microsoft Access Driver (*.mdb, *.accdb)};" + "Data Source=" + Server.MapPath("PACS.accdb") + ";" + "Persist Security Info=False"; string sql = "SELECT * FROM [Image] ORDER BY [Date] DESC;"; OdbcConnection cn = new OdbcConnection(cs); OdbcCommand cmd = new OdbcCommand(sql, cn); OdbcDataReader r; string s; cn.Open(); r = cmd.ExecuteReader(); s = ""; while(r.Read()){ s = s + r["Title"] + "<br>"; }; cn.Close(); lblRes.InnerHtml = s; }</script>
<html> <head><title></title></head> <body> <p id="lblRes" runat="server"></p> </body></html>
M Dixon 22
Example: PACS_CS.aspx (mdb)<%@ 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 + r["Title"] + "<br>"; }; cn.Close(); lblRes.InnerHtml = s; }</script>
<html> <head><title></title></head> <body> <p id="lblRes" runat="server"></p> </body></html>
M Dixon 23
Example: PACS_CS.aspx (both?)<%@ Page Language="C#" %><%@ Import Namespace="System.Data.OleDb" %><script runat="server"> void Page_Load(){ string cs = "Provider=Microsoft.ACE.OLEDB.12.0;" + "Data Source=" + Server.MapPath("PACS.accdb") + ";"; 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 + r["Title"] + "<br>"; }; cn.Close(); lblRes.InnerHtml = s; }</script>
<html> <head><title></title></head> <body> <p id="lblRes" runat="server"></p> </body></html>
Access Driver (for 32bit Office)
• http://www.microsoft.com/en-gb/download/details.aspx?id=13255
M Dixon 24
Access Driver (for 64bit Office)
• http://www.microsoft.com/en-gb/download/details.aspx?id=23734
M Dixon 25
Mark Dixon Page 26
How to: Environment Settings• If you install Visual Studio on your laptop:
– Choose VB settings (same as my laptop):
Mark Dixon Page 27
How to: Create Web Site1. Click File menu2. Click New Web Site menu item
3. Click Visual Basic item4. Click ASP.NET Empty Web Site item5. Click File System item6. Click Browse button
Mark Dixon Page 28
How to: Create Web Site7. Navigate to your USB stick8. Type name in folder box
(e.g. \MySummer)9. Click Open button
10. Click Yes button11. Click OK button
Mark Dixon Page 29
How to: Create Web page12. Click Add New Item button
(or right click project name)
13. Click HTML Page item14. Change page name
(e.g. MySummer.htm)15. Click Add button
Mark Dixon Page 30
How to: Edit code
16. Click Source button
Mark Dixon Page 31
How to: View page (Run)17. Click Play button
18. Click OK button (to enable debugging)
