1 / 36

Web-Application Development Workshop

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

miracle
Download Presentation

Web-Application Development Workshop

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 (VB.Net, C#), JSP, PhP page • make your page interactive • respond to events, read in form input and display dynamic output • connect to a database – display data M Dixon

  3. Admin • Attendance Register: • log in to your profile M Dixon

  4. 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

  5. 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

  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 M Dixon

  7. HTML: Nesting Elements • Nesting – puts one element inside another: <b><i>Hello</i></b> • Cannot overlap elements: <b><i>Hello</b></i>   M Dixon

  8. 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

  9. 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> M Dixon

  10. 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) M Dixon

  11. 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

  12. 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  M Dixon

  13. 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 M Dixon

  14. 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

  15. 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

  16. 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

  17. 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> M Dixon

  18. 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> M Dixon

  19. 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 + 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_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 + 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

  21. Example PACS.jsp <%@page import="java.sql.*"%> <%@page contentType="text/html"%> <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection cn = DriverManager.getConnection("jdbc:odbc:PACSdb", "", ""); Statement st = cn.createStatement(); ResultSet r = st.executeQuery("SELECT * FROM [Image] ORDER BY [Date] DESC;;"); String html = ""; while(r.next()){ html += r.getString("Title") + "<br />"; } cn.close(); %> <!DOCTYPE html> <html> <head><title></title></head> <body> <%=html%> </body> </html> M Dixon

  22. Example: PACS.php (MS Access) <?php $c = odbc_connect('PACSdb', '', ''); $r = odbc_exec($c, 'SELECT * FROM [Image] ORDER BY [Date] DESC;'); $s = ''; while(odbc_fetch_row($r)){ $s = $s . odbc_result($r, 'Title') . '<br>'; } odbc_close($c); ?> <html> <head><title></title></head> <body> <?php echo $s; ?> </body> </html> M Dixon

  23. Example: PACS.php (MySQL) <?php $c = mysql_connect('localhost', 'root', ''); mysql_select_db('PACS'); $q = mysql_query('SELECT * FROM [Image] ORDER BY [Date] DESC;'); mysql_close($c); $s = ''; while ($r = mysql_fetch_array($q)){ $s = $s . $r['Title'] . '<br />'; } mysql_free_result($q); ?> <html> <head><title></title></head> <body> <?php echo $s; ?> </body> </html> M Dixon

  24. How to: Environment Settings M Dixon • If you install Visual Studio on your laptop: • Choose VB settings (same as my laptop):

  25. How to: Create Web Site 1. Click File menu 2. Click New Web Site menu item 3. Click Visual Basic item 4. Click ASP.NET Empty Web Site item 5. Click File System item 6. Click Browse button M Dixon

  26. How to: Create Web Site 7. Navigate to your USB stick 8. Type name in folder box (e.g. \MySummer) 9. Click Open button 10. Click Yes button 11. Click OK button M Dixon

  27. How to: Create Web page 12. Click Add New Item button (or right click project name) 13. Click HTML Page item 14. Change page name (e.g. MySummer.htm) 15. Click Add button M Dixon

  28. How to: Edit code 16. Click Source button M Dixon

  29. How to: View page (Run) 17. Click Play button 18. Click OK button (to enable debugging) M Dixon

  30. How To: Create Web-Site Project 1. Click File menu 2. Click New Project menu item 3. Click JavaWeb item 4. Click WebApplication item 5. Click Next button M Dixon

  31. How To: Create Web-Site Project 6. Type Project Name in textbox 7. Click Browse button, and select location 8. Click Next button 9. Select Apache Tomcat 10. Select Java EE 6 11. Click Next button M Dixon

  32. How To: Create Web-Site Project 12. Clear all checkboxes 13. Click Finish button 14. Edit code 15. Run page (press Play button) M Dixon

  33. How to: Create Data Source 64bit Problem – No MS Access driver Solution:use C:\Windows\SysWOW64\odbcad32.exe M Dixon Start Menu Control Panel Administrative Tools Data Sources (ODBC) System DSN Add

  34. How to: Create Data Source • Select MS Access Driver • Click Finish M Dixon

  35. How to: Create Data Source • Type Data Source Name • Click Select button M Dixon

  36. How to: Create Data Source • Locate Database • Select Database • Click OK • Click OK • Click OK M Dixon

More Related