M Dixon 1 Web-Application Development Workshop. M Dixon 2 Session Aims & Objectives Aims –to introduce the main concepts involved in creating web-applications

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

<html> <head> <title>Test</title> </head> <body> <p>This is a test <b>page</b>.</p> </body></html>

head(info)

body(content)

• every HTML page has 2 sections:

M Dixon 10

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

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)

attribute

start tag

start tag

M Dixon 13

Questions: HTML attributes

Consider the following HTML:<a href="next.htm">Next Page</a>

a) Give an example of an attribute

b) Is the following an attribute? <img src=“House.jpg”>

c) 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)

http://www.willcam.com/cmat/html/crossref.html

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

• If you install Visual Studio on your laptop:– Choose VB settings (same as my laptop):

M Dixon 25

How to: Create Web Site1. Click File menu2. Click New Web Site menu item

3. Click Visual Basic item4. Click ASP.NET Empty Web Site item5. Click File System item6. Click Browse button

M Dixon 26

How to: Create Web Site7. Navigate to your USB stick8. Type name in folder box

(e.g. \MySummer)9. Click Open button

10. Click Yes button11. Click OK button

M Dixon 27

How to: Create Web page12. Click Add New Item button

(or right click project name)

13. Click HTML Page item14. 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 Project1. Click File menu2. Click New Project menu item

3. Click Java Web item4. Click Web Application item5. Click Next button

M Dixon 31

How To: Create Web-Site Project6. Type Project Name in textbox7. Click Browse button, and select location8. Click Next button

9. Select Apache Tomcat10. Select Java EE 611. Click Next button

M Dixon 32

How To: Create Web-Site Project12. Clear all checkboxes13. Click Finish button

14. Edit code15. Run page (press Play button)

M Dixon 33

• Start Menu

• Control Panel

• Administrative Tools

• Data Sources (ODBC)

• System DSN

• Add

How to: Create Data Source64bit Problem – No MS Access driverSolution:use C:\Windows\SysWOW64\odbcad32.exe

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

Documents

M Dixon 1 Web-Application Development Workshop. M Dixon 2 Session Aims & Objectives Aims –to introduce the main concepts involved in creating web-applications