TDDI48 Introduction Web development: A huge topic area!
advertisement
jonkv@ida
Introduction
TDDI48
Q
Q
Q
Q
Examiner:
Jonas Kvarnström
Lab assistant:
Martin Magnusson
Course Secretary: ?
WWW: Web pages, HTML, browsers, servers, ...
Programming: Software involved – not just web page design
Interactivity: Users affect the system – not just static content
Advanced: Build an entire system – not just simple scripting
Example systems:
Q
Q
Q
Q
Online shopping system
Online message forum
Bug tracker / request tracker
Business software (inventory, …) with a web interface
1
jonkv@ida
Web development: Cover the concepts!
4
2007-01-17
Our approach: Cover the most important concepts
Q
Web development: A huge topic area!
5
2007-01-17
3
2007-01-17
Markup languages
Web languages
Java Frameworks
PHP Frameworks
Protocols
SGML
Java
The Java API
…
HTTP
ASP Frameworks
XML, XSLT, …
PHP
JavaServer Pages
FTP
…
Ruby Frameworks
HTML 4, XHTML
ASP.net
JavaServer Faces
SOAP
…
Javascript Frameworks
CSS, XSS
Ruby (on Rails)
Hibernate
XMLRPC
Dojo
RSS, ATOM, …
Perl
Struts
IMAP
Prototype
…
Javascript
Spring
POP
Bindows
VBScript
Tapestry
SMTP
Concepts and Topics
YUI
Python
Cocoon
…
Networking
…
…
…
Client / server
Web servers / browsers
Dynamic page generation Development Tools
Web Plugins
Web compatibility
Browsers: Firefox, IE, Safari, Opera, …
Flash
Accessibility
Web pages: Dreamweaver, Frontpage, Emacs, …
Java Applets
Databases
Development: IDEA, Eclipse, Visual Studio, …
ActiveX plugins
Security
Client-Side Debugging: Venkman, Firebug, …
…
Authentication
…
User interfaces
AJAX
Operating Environments
Deployment process
Operating systems: Windows, Mac, Linux, …
Cannot cover
Server side scripting
Browsers: Firefox, IE, Safari, Opera, …
everything in
Caching
Browser Versions: IE 5/6/7, …
5 points!
…
…
jonkv@ida
Examination
Q
Q
Frameworks could take some of the work off your shoulders…
Hide database handling, …
Q
jonkv@ida
jonkv@ida
A typical message forum – list of topics
6
2007-01-17
Examination: Project lab – webweb-based message forum
Applicable in many languages and many applications
Learn from the ground up!
Q
2007-01-17
Advanced programming and interactivity on the WWW
Advanced Programming and Interactivity
on the WWW
2007-01-17
2
Alternative: Choose your own project
Q
Q
…but if we teach a framework, that's all you learn!
First part: Complete lab instructions
Later: Choose among extensions
More freedom
More responsibility – we may not always be able to help you
Details often not applicable to other languages or frameworks
Better to take a hands-on approach – learn what really happens
Provides a stable basis for learning any language or framework
Create a complete application!
application
Q
Q
Lectures teach important concepts + some specifics
Implementation gives concrete experience
Many opportunities to explore and learn!
A typical message forum – one topic
jonkv@ida
jonkv@ida
7
8
2007-01-17
Web development: Forum architecture
Q
2007-01-17
The forum is accessed through a web server
Requires a server-side programming language
Q
Messages are stored in a database (same or other computer)
jonkv@ida
Web development: Languages
Our choice of server-side language: Java
Q
One of the most common server-side languages
Q
Platform-independent (rules out ASP)
Extensive and well-documented standardized libraries
Especially for more complex systems
Accessed through SQL
Q
Client computers use web browsers to access the forum
Requires a communication protocol: HTTP
Q
The Java API
Requires a document definition language: HTML
The JavaServer Pages (JSP) API
JSTL: The JSP Standard Tag Library
Q
Strong and static typing
Can more easily be analyzed algorithmically
compared to languages such as PHP
Excellent support from ”intelligent” development tools
We use IntelliJ IDEA
9
2007-01-17
Contents 1: Hypertext Markup Language
jonkv@ida
jonkv@ida
10
11
2007-01-17
The user sees the forum in a web browser
Q
Contents 2: HTML, part 2
HTML also provides support for forms
Information is provided to the browser using HTML
Q
Hypertext Markup Language
Name:
<html><head>
<title>TDDI48 Lab 1: Introduction to Java</title>
<link rel="stylesheet" HREF="tddi48.css" TYPE="text/css">
…
<p>Text in a paragraph… <img src=“images/foo.jpg”></p>
Password:
13
2007-01-17
Q
<p>This is a paragraph</p><p>The next one!</p>
{ color: #46ad69; font-family: monospace; }
{ content: "[[" }
{ content: "]]" }
HTML:
<p>First create the package.
14
2007-01-17
jonkv@ida
Contents 5: The server side
Use a meta language: SGML or XML!
Q
15
2007-01-17
The server side: Dynamic document generation
HTML: The language for describing the content of a web page
Q
Q
Input fields: User registration, message input, search form, ...
Q
Topics and messages should be stored in a database
When a forum page is requested:
The server does not send a file from disk
CSS: How to define the style of the web page
SGML and XML: More generic concepts behind HTML
The server runs a program!
The program calls the database and generates a web page (HTML)
What can and can’
can’t we do now?
These languages are used to define other languages
<?xml version="1.0"?>
<bk:book xmlns:bk='urn:loc.gov:books' xmlns:isbn=…>
<bk:title>Cheaper by the Dozen</bk:title>
<isbn:number>1568491379</isbn:number>
</bk:book>
Q
Can create static web pages manually
Q
Can create input fields
Need dynamic web pages, that change when new messages are added!
The input from the user must actually be stored somewhere!
jonkv@ida
jonkv@ida
16
17
2007-01-17
The server side: Many languages!
Any language that can generate text output (HTML)...
But some languages have better support for server-side programming
Contents 7: Persistent storage
(Java classes providing certain methods)
public class MessageServlet extends HttpServlet {
public void doGet(...) throws … {
reply.setContentType("text/html");
final PrintWriter out = reply.getWriter();
out.println("<html><head><title>Messages</title></head>");
final List messages = getMessages();
for (int i = 0; i < messages.size(); i++) {
…;
}
}
2007-01-17
How should servlets retrieve and store information?
information
Q
Could use files – lots of work, fragile
Instead: A relational database
Q
Database interface called JDBC (Java Database Connectivity)
Q
One possibility: Use Java servlets
}
Q
Information: List of topics, message text
How do you define a markup language?
Q
SPAN.menu:before
SPAN.menu:after
jonkv@ida
Checkpoint: What can and can’t we do now?
<h1>Anything written here is a heading of level 1</h1>
Q
Cascading Style Sheets
SPAN.menu
So far,
far we’ve mentioned:
Markup provides secondary information about a document
Contents 6: Servlets
12
2007-01-17
Right-click the source path in the project pane (if it is not visible, select
<span class="menu">Window | Project: Alt-1</span>).
Select <span class="menu">New | Package</span> and enter
"se.liu.ida.<em>youremail</em>".</p>
HTML is a markup language
Q
Q
<input type="text" name="firstName"
value="initial"
maxlength="30">
<input type="password" name="pass"
maxlength="30">
jonkv@ida
Q
Contents 3: Cascading Style Sheets
The styling for a web page is specified using CSS
Used to gather input from the user
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Contents 4: SGML and XML
2007-01-17
jonkv@ida
jonkv@ida
Contents 8: JavaServer Pages
Many pages consist mostly of HTML
Q
Q
MySQL – widely used on the WWW
Connection con = null;
Such servlets would mostly contain println() statements
Use JSP instead – JavaServer Pages (similar to PHP/ASP/…)
Code embedded in HTML, rather than the other way around
Executed on the server, just like servlets
<p>Today is <%= new java.util.Date() %></p>
Statement stmt = null; ResultSet rs = null;
try {
String query="SELECT * FROM employees WHERE salary<12000";
con = DriverManager.getConnection("jdbc:…", "ID", "passwd");
stmt = connection.createStatement();
rs = myStatement.executeQuery(query);
while (rs.next()) { … }
} finally {
try { if (rs != null) con.close(); } catch (SQLException e) { /* log */ }
try { if (stmt != null) con.close(); } catch (SQLException e) { /* log */ }
try { if (con != null) con.close(); } catch (SQLException e) { /* log */ }
}
18
2007-01-17
<% while (result.hasNext()) { %>
<p> User name: <%= result.getColumn("name") %></p>
<% } %>
Q
No magic – just a syntactic transformation into a servlet!
<p>Today is <%= new java.util.Date() %>
Î
out.print("<p>Today is ");
out.print(new java.util.Date());
out.print("</p>");
Contents 9: The server side
jonkv@ida
jonkv@ida
19
20
2007-01-17
Too much Java code leads to an ugly mixture…
Q
Q
Checkpoint: What's left?
This is all that's required for a message forum!
JSP allows you to create your own tags!
The JSTL – JSP Standard Tag Library – has many useful tags
Q
<c:forEach var="row" items="${queryResult.rows}">
<p>Name: ${row.name}
<p>Address: ${row.address}
</c:forEach>
Q
Q
Fill in a form, press "submit", wait for a reply
Faster for the user (no round-trip)
Less load on the server
jonkv@ida
Contents 11: The Document Object Model
22
2007-01-17
Views a document as a structure, not a text string
Provides methods for manipulating the structure dynamically
Q
Q
Q
<TBody>
TBody>
<TR>
<TR>
<TR>
Can be used to manipulate HTML documents
<span onclick="toggle('box')">Show/hide</span>
<div class="linkbox" id="box">
<a href="page1.html">Page 1</a><br>
<a href="staff.html">Staff</a><br>
</div>
jonkv@ida
Project, Part 1
<TR>
24
2007-01-17
Part 1: Design, layout and usability
Java SE (Standard Edition) 1.5 – also called Java 5
Q
Create static web pages showing how your system will work
Learn more about HTML and CSS
Servlets, JavaServer Pages, JSP Standard Template Library…
Q
<THead>
THead>
23
2007-01-17
Some of the extensions in Java EE (Enterprise Edition):
Show/hide parts of a page, change form contents, ...
<Table>
2007-01-17
jonkv@ida
Lab environment
Lab environment and software:
Javascript uses the Document Object Model (DOM)
Q
Q
function toggle(id) {
var style = document.getElementById(id).style;
if (style.display == 'none') {
style.display = 'block'; // or 'inline'
} else {
style.display = 'none';
}
}
Would like to have interactivity on the client side!
Q
21
Contents 10: JavaScript
Interactive user interfaces: JavaScript
Or for many other web-based applications…
But all interaction requires a server round-trip
<sql:query var="queryResult">SELECT * FROM users;</sql:query>
Q
2007-01-17
jonkv@ida
Focus on usability, not on coding
MySQL
Resin (web server / application server)
IDEA 6.0 – integrated development environment
Think, before you "code yourselves into a corner"
Q
Your first introduction to:
Error highlighting on the fly
HTML
Refactoring and code navigation saves lots of time
CSS
Extensive support for servlets, JSP and JavaScript
The Resin web server
Should be used by everyone -- must hand in an IDEA project at the end
<TH>
<TH>
<TD>
<TD>
Item
Price
Foo
$100.00
Q
Firefox (recommended)
Also plugins: Web Developer Toolbar and Firebug 1.0 beta
Project, Part 2
Part 2:
2 A web forum requires user accounts
Q
Q
Create a MySQL database to store information
Add active functionality to your static pages
jonkv@ida
25
26
2007-01-17
Project, Part 3
Part 3:
3 The actual message forum
Q
Q
Use what you learned in parts 1 and 2
Implement some very basic message forum functionality
2007-01-17
jonkv@ida
Project, Part 4
Part 4:
4 More, more, more!
Q
Q
Parts 1 to 3 resulted in a very basic forum system
In part 4, you extend it in various ways
Register as a new user
Creating forums, and topics within a forum
Investigate more parts of web programming:
Change your user information
Writing and replying to messages within a topic
Javascript
Delete users
…
Uploading files
…
Q
jonkv@ida
Your first introduction to:
Q
Sending mail
No major new APIs
Message formatting (parsing and formatting a custom language)
But a chance to let your new skills mature!
Automatic login using cookies
MySQL and the Java JDBC library
…
Servlets
JSP pages
The standard JSTL tags
Q
Choose between extensions or define your own…
More freedom in deciding what you want to do and learn!
27
2007-01-17
Alternative Project
jonkv@ida
jonkv@ida
28
29
2007-01-17
The Alternative
Q
Q
Q
Discuss it with me!
Must be reasonable in complexity
Q
Grades and examination
Q
Q
We might not be able to help you with all topics
Q
Your project must be complex enough
Q
Must cover the most important aspects of web programming
Write robust software
Write readable, structured code
Labs week 4-5-6-7-8-9-10, a total of 7 weeks
Follow naming standards
Add comments where this would help us understand your code
Q
Start early!
Make sure common tasks are easy to do
Intended to catch potential problems early
Semi-mandatory
Should not look like a quick hack
Q
31
Points given for each extension
If you miss them and there is a problem we might have caught earlier…
A minimum number of points for grades 3, 4, 5
jonkv@ida
Preliminary Schedule (may change)
Only one true deadline
Q
Final lab can be demonstrated / handed in:
During labs week 10, or during the exam period week 11 (day/time TBA)
Week 3
0117 Intro
0118 Cancelled
Week 4
0122
0123
0124
0125
In the June exam period
During the August period
Around Christmas (other course takes precedence)
Q
Can't have another exam a few weeks later…
0129 Web applications, part 3
0201 (no lecture – or Javascript + DOM?)
Week 6
0207 JavaScript and the Domain Object Model
Week 7
…
First project inspection
Week 8
…
Labs as usual
Week 9
…
Second project inspection
Week 10
…
Last lab; can hand in your project
Week 11
031x Exam period; final chance to hand in project
jonkv@ida
Lectures aren't everything!
2007-01-17
Lectures and literature cannot cover everything!
Q
Q
Some issues are better to discuss during labs
Ask us about the design and implementation of your project
We want feedback!
We want feedback – talk to us!
Q
Is this a good navigational structure?
Q
Ask us if you can't find the information you need
Q
Ask us if you can't get something to work the way you want
First search – but don't spend hours and days searching!
First try yourselves – but don't spend hours and days trying!
Q
Can't always answer immediately
But if we don't know there's a problem, how can we try to solve it?
Make sure the lab assistant is busy!
Tell us if you're having a problem
Software problems – new software installed
Unclear or unreasonable instructions
Q
Tell us IMMEDIATELY!
Don't wait until the course is over
jonkv@ida
Literature
Literature for this course:
Q
Reference: The Java Enterprise Edition Tutorial
http://java.sun.com/javaee/5/docs/tutorial/doc/
(Also available as a PDF file: 1300 pages…)
Q
Q
Use the course slides
Use information on the WWW
JSTL reference (linked from the web page)
Possibly "Thinking in Java" (free on the WWW)
…
Q
Javadoc (built-in documentation)
Q
Also: Ask us!
Just press Ctrl-Q in IDEA
jonkv@ida
Can I do this, or should I do it like that?
What tables should I use in my database?
32
2007-01-17
Markup languages: HTML, SGML, XML, ...
Cancelled
JDBC; Web applications, part 1; first lab time
Web applications, part 2; Muddy Card evaluation
Week 5
Deadline viewed as a written exam
34
Extensions
If you miss them and hand in a perfect project, we won't complain
jonkv@ida
2007-01-17
Usability and design
Create a clean professional interface
you might have to spend a lot of time correcting that problem.
Deadlines (see also the web page)
Code quality
5 points = 200 hours, minus 12 hours of lectures = 188 hours
Project inspections week 7 and 9
Beware:
30
2007-01-17
Grades depend on many aspects of your work
You'll have to spend much more time than this
Quick calculation:
188/7 = about 27 hours per week (5-6 hours/day)
Hand in a thorough specification
This must be approved
Q
2007-01-17
Two or three supervised lab times every week
Invent your own project
Similar to the forum lab in size and scope
Q
Labs and Project Inspections
jonkv@ida
35
2007-01-17
33
2007-01-17
