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 (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

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 Example: Default.aspx (VB) Sub Page_Load() End Sub

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

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

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

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

20. M Dixon 20 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; }

21. M Dixon 21 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(); %>

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

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

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

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

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

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

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

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

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

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

32. 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)

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

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

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

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