290 likes | 390 Vues
This workshop introduces the main concepts of creating web applications, including HTML elements and tags, ASP, PHP, interactive web pages, database connectivity, and dynamic content generation. By the end of the week, participants will master web page creation and interactivity.
E N D
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
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>
Questions: Tags How many tags are in the following: <head><title>Hello</title></head> <body> <i>Soft</i><b>131</b> </body> 4 6
Questions: Elements How many elements are in the following: <head><title>Hello</title></head> <body> <i>Soft</i><b>131</b> </body> 2 3
HTML: Nesting Elements • Nesting – puts one element inside another: <b><i>Hello</i></b> • Cannot overlap elements: <b><i>Hello</b></i>
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>
HTML: page structure every HTML page has 2 sections: head (info) body(content) <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> <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)
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)
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) start tag attribute start tag
Questions: HTML attributes Consider the following HTML:<a href="next.htm">Next Page</a> Give an example of an attribute Is the following an attribute? <img src=“House.jpg”> How many attributes are there in: <font color=“green” size=3> href="next.htm" No (start tag) 2
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)
Example: My Summer My summer web-page 2006 My summer web-page 2008
Create New Web-site Select Empty web site Browse to D:\ and create folder
Create New Web Page Select HTML Page Type filename
Visual Studio Design view – see page as it will appear
Visual Studio Source view – see HTML code
Enable debugging Select Add new Web.config file
Environment Settings Choose VB settings (same as my laptop):
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>
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>
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>
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>
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>
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>