1. EE448: Server-Side Development Lecturer: David Molloy Time: Tuesdays 3pm-5pm Notes: http://wiki.eeng.dcu.ie/ee448 Mailing List: ee448@list.dcu.ie

2. EE448: Server-Side Development Background Technologies • Apache Demonstration • Hypertext Transfer Protocol (HTTP) – protocol between web browsers and servers • Simple, information passed as plain text via TCP • Telnet HTTP Demonstration • - Connect and send a HTTP Request • - GET /index.html HTTP/1.0 • - Web Server returns requested page • - If Browser used, page interpreted graphically • - Can use HEAD instead of GET for response headers

3. EE448: Server-Side Development HTTP Version 1.0 • HTTP 1.0 is simple and stateless protocol • Client makes a request, server responds -> quick simple • transaction • Connection made for every object to be downloaded • Wasteful of resources – packet overhead involved in • getting pages with many separate parts • -> HTTP Version 1.1

4. EE448: Server-Side Development HTTP Version 1.1 • HTTP/1.1 defined by W3C to address a number of issues • with HTTP/1.0 • Basic operation remains the same and clients/servers • are backwards compatible • HTTP/1.1 defines persistent connections • Numerous documents downloaded over one connection • HTTP/1.1 persistent connections default unless • otherwise specified • HEAD /index.html HTTP/1.1 • Host: www.eeng.dcu.ie • New features on proxies and caching

5. EE448: Server-Side Development Method Types • Clients send requests as one of a number of different types • GET Method – used for retriveing information from the server. Can • include additional information, describing what it wishes to obtain • http://www.server.com/scripts/phonesearch • http://www.server.com/scripts/phonesearch?name=Molloy • POST Method – uses different technique for transferring data. Used • for sending large quantities of information, for which GET is unsuitable • URL remains the same always, not bookmarkable/emailed/reloaded • http://www.server.com/scripts/dologin • HEAD Method – acts like a GET with a blank page, sends response • headers

6. EE448: Server-Side Development Method Types • Remaining method types not commonly used • PUT Method – used for placing documents on the server • DELETE Method – used for deleting documents from the server • TRACE Method – used for debugging (returns request contents) • OPTIONS Method – used to ask server which methods it supports etc.

7. EE448: Server-Side Development Hypertext Markup Language • Time to get Practical! • Development using WYSIWYG (What you see is what you get) tools • Uploading to the Web Server (FTP, Samba, Local etc.) • Writing HTML manually – the proper way! • <HTML>, <HEAD>, <TITLE>, <BODY>, <BR>, <P>, <H1>, <FONT>, • <B>, <I>, <A>, <UL>, <LI>, <PRE>, <IMG>, <TABLE>, <TR>, <TD> • Attributes • Browser Dependence with HTML (Example) • W3C – World Wide Web Consortium • Accessibility

8. EE448: Server-Side Development CSS Style Sheets • Introduced in late 1996, W3C Recommendation • More sophisticated page design • Improves web page accessibility • Separation of content from appearance (to a point) • W3C Recommendations: Cascading Style Sheets 1 (CSS1) and CSS2 • CSS3 under development • CSS2 incorporates and extends CSS1 • Why was CSS technology not more popular on release: • - Traditional Browser Incompatibility (Netscape 4.0+, IE3+, • slow initial uptake) • - Varying support currently • - Designer knowledge

9. EE448: Server-Side Development CSS Style Sheets - Benefits • Content from Appearance – important basic principle • Style Benefits – larger array of layout and presentation options, not in HTML • Single Style File – one file describing layout for entire site

10. EE448: Server-Side Development CSS Style Sheets - Practical • <link rel=“stylesheet” type=“text/css” href=“filename.css” /> • between <HEAD> tags • B { font-family: Verdana, Geneva, Helvetica; font-weight: normal; • font-style: normal; font-size: 14pt; color: blue; background: red; • text-decoration: none; } • a:LINK, a:VISITED • @media screen { /* hide from non supported browsers */ • a:hover • }

11. EE448: Server-Side Development CSS Structures • CSS file handles style and layout, HTML file handles content • CSS files are made up of rules • Rules are made up of two parts: selector (e.g. ‘H1’) and declaration • (e.g. font-family etc.) • Declaration split up into a number of name-value pairs (properties) • Inheritance: <H1>A Really <B>Ugly Web</B> Page</H1> • If we define two style entries in the CSS file, Ugly Web inherits all of • the properties of H1, but will override with its own definitions • To increase granularity of control over elements, we introduce the • class attribute. Example. B.BLUE inherits properties from B

12. EE448: Server-Side Development HTML Forms • Client front-end to our server-side applications • Exist on the client side, interpreted within the browser • Typically require a server-side application to make them useful • HTML forms contain normal content, markup and special elements • called controls and their labels • Control’s “control name” is given by its name attribute • <FORM METHOD=“POST” ACTION=“http://…../formhandler” NAME= • “myform”> • <INPUT TYPE=“submit” VALUE=“Submit Query”> • Work through the example provided in the notes

13. EE448: Server-Side Development JavaScript • 1995 Netscape began a new scripting project – LiveScript • Could enhance web pages and perform limited form validation • December 1995, Netscape and Sun jointly announced JavaScript • Relatively easy to use • Complementary to and integrated with Java • Complementary and integrated with HTML • Open, cross-platform and freely licensed standard

14. EE448: Server-Side Development JavaScript • JavaScript is an ‘object-based interpreted scripting language’ • JavaScript is *NOT* Java • Smaller vocabulary, with borrowed syntax from Java • JavaScript is object-based in that while it uses objects, it does not • contain the complete functionality of OOP languages like C++ & Java • JavaScript support in browsers predated Java support in browsers • Java Applications run in the Java Virtual Machine • JavaScript code is interpreted and displayed on a browser that is • JavaScript-enabled -> not compiled • Browser Wars!

15. EE448: Server-Side Development Browser Wars • “As a person who likes making websites, do the browser wars bug me? Oh no, I just love having to chase up weird, esoteric redirection scripts, making multiple versions of pages, and watching my latest “brilliant” idea look like garbage thanks to the greed, selfishness and sheer, bloody-minded testosterone-fuelled competitiveness of the various companies that make web browsers” • Major problem with JavaScript, even today • Microsoft/Netscape fighting through the late 90s • Microsoft JScript! “An open implementation of JavaScript” • Situation improved, but still many older browsers out there • JavaScript and Accessibility – not good! • Recommendation: Form validation and basic window control • Two working examples and non-working Menu system – test, test!