1. M Dixon 1 Web-Application Development Workshop

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

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

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

5. M Dixon 5 Questions: Tags How many tags are in the following: Hello Soft 131 4 6

6. M Dixon 6 Questions: Elements How many elements are in the following: Hello Soft 131 2 3

7. M Dixon 7 HTML: Nesting Elements Nesting – puts one element inside another: Hello Cannot overlap elements: Hello 

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

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

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

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

12. M Dixon 12 Attributes go inside the start tag: Next Page not anywhere else href=“nextpage.htm”Next Page HTML: Attributes (where) attribute start tag 

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

14. 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: – : new paragraph – : bold text – : italic text – : anchor (link) to another web page – : image/picture (.bmp,.jpg,.gif) – : embedded object (.avi.mpg.wav.mp3)

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

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

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

18. M Dixon 18 How to: Create Web page 12. Click Add New Item button 13. Click HTML Page icon 14. Change page name (e.g. MySummer.htm) 15. Click Add button

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

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

21. M Dixon 21 How To: Create Web-Site Project 1. Click File menu 2. Click New Project menu item 3. Click Java Web item 4. Click Web Application item 5. Click Next button

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

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

24. M Dixon 24 Example: Default.aspx (VB) Sub Page_Load() End Sub

25. M Dixon 25 Example: Default.aspx (C#) void Page_Load(){ };

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

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

28. M Dixon 28 Example: Loan.aspx 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 Student Loan

29. M Dixon 29 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 + r("Title") + " " Loop cn.Close() lblRes.InnerHtml = s End Sub

30. M Dixon 30 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 + r["Title"] + " "; }; cn.Close(); lblRes.InnerHtml = s; }

31. M Dixon 31 Control Panel -> Administrative Tools -> Data Sources (ODBC) How To: Data Source (JSP & PhP) Use System DSN

32. M Dixon 32 How To: Data Source (JSP & PhP) Data source name as used in the code Optional description Choose database file

33. M Dixon 33 Example PACS.jsp <% 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") + " "; } cn.close(); %>

34. M Dixon 34 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'). ' '; } odbc_close($c); ?> <?php echo $s; ?>

35. M Dixon 35 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']. ' '; } mysql_free_result($q); ?> <?php echo $s; ?>