Mark Dixon Page 1 Web-Application Development Workshop

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. element = start tag + content + end tag –bold: This will be in bold –italic: This will be in italic work like brackets –start/open –end/close

Mark Dixon Page 4 Questions: Tags How many tags are in the following: Hello Soft

Mark Dixon Page 5 Questions: Elements How many elements are in the following: Hello Soft

Mark Dixon Page 6 HTML: Nesting Elements Nesting – puts one element inside another: Hello Cannot overlap elements: Hello 

Mark Dixon Page 7 Questions: HTML Elements Which of the following are valid elements? Title Good morning. Soft 131  

Mark Dixon Page 8 HTML: page structure Test This is a test page. head (info) body (content) every HTML page has 2 sections:

Mark Dixon Page 9 Test This is a test page. spaces are used to move lines in from left helps see structure Indentation Test This is a test page. 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: Next Page –Image element: –Embedded object element: 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: Next Page not anywhere else href=“nextpage.htm”Next Page HTML: Attributes (where) attribute start tag 

Mark Dixon Page 12 Questions: HTML attributes Consider the following HTML: Next Page a)Give an example of an attribute b)Is the following an attribute? c)How many attributes are there in: href="next.htm" No (start tag) 2

Mark Dixon Page 13 HTML Tags: Reference Lots of info available on-line, e.g.: Short list of tags: – : new paragraph – : bold text – : italic text – : anchor (link) to another web page – : image/picture (.bmp,.jpg,.gif) – : 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 Sub Page_Load() End Sub

Mark Dixon Page 25 Example: Date.aspx Sub Page_Load() lblDate.InnerHtml = Format(Now(), "ddd dd MMM yyyy") lblTime.InnerHtml = Format(Now(), "hh:mm:ss") End Sub

Mark Dixon Page 26 Example: Temperature.aspx Sub btnCalc_ServerClick(ByVal s As Object, ByVal e As EventArgs) lblCel.InnerHtml = ((txtFah.Value - 32) * 5) / 9 End Sub Temperature Conversion

Mark Dixon Page 27 Example: Loan.aspx Sub btnCalc_ServerClick(ByVal s As Object, ByVal e As EventArgs) lblPayAn.InnerHtml = (txtSal.Value ) * 0.09 lblPayMo.InnerHtml = lblPayAn.InnerHtml / 12 End Sub Student Loan

Mark Dixon Page 28 Example: PACS_VB.aspx 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 + " " + Format(r("Date"), "ddd dd MMM yyyy") + " " s = s + r("Title") + " " Loop lblRes.InnerHtml = s End Sub

Mark Dixon Page 29 Example: PACS_CS.aspx 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 + " " + String.Format("{0:ddd dd MMM yyyy}", r["Date"]) + " "; s = s + r["Title"] + " "; }; lblRes.InnerHtml = s; }