WebApplication Development Workshop Mark Dixon Page 1 Session
Web-Application Development Workshop Mark Dixon Page 1
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 2
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: – italic: <b>This will be in bold</b> <i>This will be in italic</i> • work like brackets – start/open – end/close Mark Dixon <b> </b> <i> </i> Page 3
Questions: Tags How many tags are in the following: <head><title>Hello</title></head> 4 <body> <i>Soft</i><b>131</b> </body> Mark Dixon 6 Page 4
Questions: Elements How many elements are in the following: <head><title>Hello</title></head> 2 <body> <i>Soft</i><b>131</b> </body> Mark Dixon 3 Page 5
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 6
Questions: HTML Elements Which of the following are valid elements? <center><b>Title</b> <head><title></head> <p>Good <b>morning. </p></b> <body><i>Soft</i><b>131</b></body> Mark Dixon Page 7
HTML: page structure • every HTML page has 2 sections: head (info) body (content) Mark Dixon <html> <head> <title>Test</title> </head> <body> <p>This is a test <b>page</b>. </p> </body> </html> Page 8
Indentation • spaces are used to move lines in from left head (is inside html) title (is inside head) <html> <head> <title>Test</title> </head> <body> <p>This is aistest a test <b>page</b>. </p> </body> </html> • helps see structure Mark Dixon Page 9
HTML: Attributes • Some tags need extra information to work: – Anchor (hyper-link) element: <a href=“nextpage. htm”>Next Page</a> attribute (page to jump to) – Image element: <img src=“Beach. jpg” /> attribute (filename of picture to display) – Embedded object element: <embed src=“Music. mp 3”></embed> attribute (filename of music to play) Mark Dixon Page 10
HTML: Attributes (where) • Attributes go inside the start tag: start tag <a href=“nextpage. htm”>Next Page</a> attribute • not anywhere else start tag <a>href=“nextpage. htm”Next Page</a> Mark Dixon Page 11
Questions: HTML attributes Consider the following HTML: <a href="next. htm">Next Page</a> a) Give an example of an attribute href="next. htm" b) Is the following an attribute? <img src=“House. jpg”> No (start tag) c) How many attributes are there in: <font color=“green” size=3> Mark Dixon 2 Page 12
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. mp 3) Mark Dixon Page 13
Example: My Summer My summer web-page 2006 My summer web-page 2008 Mark Dixon Page 14
Visual Studio 2005 Mark Dixon Page 15
Create New Web-site • Select Empty web site • Browse to D: and create folder Mark Dixon Page 16
Create New Web page Mark Dixon Page 17
Create New Web Page • Select HTML Page • Type filename Mark Dixon Page 18
Visual Studio Design view – see page as it will appear Mark Dixon Page 19
Visual Studio Source view – see HTML code Mark Dixon Page 20
View page (Run) Mark Dixon Page 21
Enable debugging • Select Add new Web. config file Mark Dixon Page 22
Environment Settings • Choose VB settings (same as my laptop): Mark Dixon Page 23
Example: Default. aspx <%@ Page Language="VB" %> <script runat="server"> Sub Page_Load() End Sub </script> <html> <head><title></head> <body> <form runat="server"> </form> </body> </html> Mark Dixon Page 24
Example: Date. aspx <%@ Page Language="VB" %> <script runat="server"> Sub Page_Load() lbl. Date. Inner. Html = Format(Now(), "ddd dd MMM yyyy") lbl. Time. Inner. Html = Format(Now(), "hh: mm: ss") End Sub </script> <html> <head><title></head> <body> <span id="lbl. Date" runat="server"></span> <span id="lbl. Time" runat="server"></span> </body> </html> Mark Dixon Page 25
Example: Temperature. aspx <%@ Page Language="VB" %> <script runat="server"> Sub btn. Calc_Server. Click(By. Val s As Object, By. Val e As Event. Args) lbl. Cel. Inner. Html = ((txt. Fah. Value - 32) * 5) / 9 End Sub </script> <html> <head><title>Temperature Conversion</title></head> <body> <form runat="server"> <input id="txt. Fah" type="text" runat="server" /> <input id="btn. Calc" type="submit" value="Calculate" runat="server" onserverclick="btn. Cal <span id="lbl. Cel" runat="server"></span> </form> </body> </html> Mark Dixon Page 26
Example: Loan. aspx <%@ Page Language="VB" %> <script runat="server"> Sub btn. Calc_Server. Click(By. Val s As Object, By. Val e As Event. Args) lbl. Pay. An. Inner. Html = (txt. Sal. Value - 15000) * 0. 09 lbl. Pay. Mo. Inner. Html = lbl. Pay. An. Inner. Html / 12 End Sub </script> <html> <head><title>Student Loan</title></head> <body> <form runat="server"> <input id="txt. Sal" type="text" runat="server" /> <input id="btn. Calc" type="submit" value="Calculate" runat="server" onserverclick="btn. Calc_Server. Clic <span id="lbl. Pay. An" runat="server"></span> <span id="lbl. Pay. Mo" runat="server"></span> </form> </body> </html> Mark Dixon Page 27
Example: PACS_VB. aspx <%@ Page Language="VB" %> <%@ Import Namespace="System. Data. Ole. Db" %> <script runat="server"> Sub Page_Load() Dim cs As String = "Provider=Microsoft. Jet. OLEDB. 4. 0; " + _ "Data Source=" + Server. Map. Path("PACS. mdb") + "; " + _ "Persist Security Info=False" Dim sql As String = "SELECT * FROM [Image] ORDER BY [Date] DESC; " Dim cn As New Ole. Db. Connection(cs) Dim cmd As New Ole. Db. Command(sql, cn) Dim r As Ole. Db. Data. Reader Dim s As String cn. Open() r = cmd. Execute. Reader() s = "" Do While r. Read() s = s + "<b>" + Format(r("Date"), "ddd dd MMM yyyy") + "</b> " s = s + r("Title") + " " Loop lbl. Res. Inner. Html = s End Sub </script> <html> <head><title></head> <body> <p id="lbl. Res" runat="server"></p> </body> </html> Mark Dixon Page 28
Example: PACS_CS. aspx <%@ Page Language="C#" %> <%@ Import Namespace="System. Data. Ole. Db" %> <script runat="server"> void Page_Load(){ string cs = "Provider=Microsoft. Jet. OLEDB. 4. 0; " + "Data Source=" + Server. Map. Path("PACS. mdb") + "; " + "Persist Security Info=False"; string sql = "SELECT * FROM [Image] ORDER BY [Date] DESC; "; Ole. Db. Connection cn = new Ole. Db. Connection(cs); Ole. Db. Command cmd = new Ole. Db. Command(sql, cn); Ole. Db. Data. Reader r; string s; cn. Open(); r = cmd. Execute. Reader(); s = ""; while(r. Read()){ s = s + "<b>" + String. Format("{0: ddd dd MMM yyyy}", r["Date"]) + "</b> "; s = s + r["Title"] + " "; }; lbl. Res. Inner. Html = s; } </script> <html> <head><title></head> <body> <p id="lbl. Res" runat="server"></p> </body> </html> Mark Dixon Page 29
- Slides: 29