examiner: jonas kvarnström lab assistant: martin magnussontddi15/slides/tddi15-2010-course.pdfwhy a...
TRANSCRIPT
TDDI15Programming and Interactivity on the WWW
Examiner: Jonas KvarnströmLab assistant: Martin Magnusson
2
jonk
v@id
a
Why a course in web programming? We spend an increasing amount of time on the web Reading “static” pages, but also interacting with applications
▪ Web mail▪ Message forums▪ Social networking▪ Search engines
▪ Newspapers, blogs and many other sites,where dynamic content is stored in a databaserather than as files…
3
jonk
v@id
a
Why 2: Structure of a typical web app The structure of a typical web application: Some or all content dynamically generated by the web server
▪ Requires a server‐side programming language (PHP, Java, Ruby, …) Information is usually stored in a database
▪ Accessed through SQL Client computers useweb browsers to access the application
▪ Requires a communication protocol: HTTP▪ Requires a document/page definition language: HTML + CSS
We may also use clusters for load balancing ‐‐ beyond the scope of this course!
4
jonk
v@id
a
Why 3: Web apps vs. other apps Web applications are not like most other applications!
“Ordinary” applications: Often written in a single language
Some differences between runtime environments (OS versions, …)
Runs on your own computer Performance is important, but only you use your computer Few people try to crash software when they themselves are the only victims
Web applications: HTML, CSS, Javascript, server‐side languages such as Java / PHP / … Large differences between runtime environments (IE 6/7/8, Firefox, Safari, Chrome, Opera, …) with distinct bugs in layout, Javascript, … Your computer + one or more servers Performance may be crucial, with thousands of concurrent requests People will try to crash your servers, extract secret information, …
5
jonk
v@id
a
Course focus: Concepts! Primary focus: Web programming concepts! Mainly on the server side
▪ Client/server programming for web applications▪ Dynamic page generation + use of databases▪ Web compatibility (different browsers and versions)▪ Security and authentication
To some extent on the client side▪ User interfaces and interactivity using Javascript / AJAX
Learn what really happens!▪ Use frameworks that hide the lowest level details…▪ … but not those that hide what you must truly understand!
6
jonk
v@id
a
Languages and frameworks Client side: HTML, CSS and Javascript are essential But on the server side, there’s a variety of languages
▪ Can’t always expect to use your language of choice▪ But if you know the concepts, you can learn any language!
For this course: Java + JSP pages + JSTL tags▪ One of the most common server‐side languages▪ You already know the basic language▪ Extensive and well‐documented standardized libraries▪ Excellent support from development environments▪ Platform‐independent
Connection con = null; Statement stmt = null; ResultSet rs = null;try {
String query="SELECT * FROM users ";con = DriverManager.getConnection("jdbc:…", "ID", "passwd");stmt = connection.createStatement();rs = myStatement.executeQuery(query);
<sql:query var=“res">SELECT * FROM users;</sql:query><c:forEach var="row" items="${res.rows}">
…</c:forEach>
7
jonk
v@id
a
HTML and CSS Web pages are defined using HTML and CSS HTML (HyperText Markup Language) specifies contents:
▪ <p>First create the package. 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 ….</p>
CSS (Cascading Style Sheets) specifies styles:▪ SPAN.menu { color: #46ad69; font-family: monospace; }
SPAN.menu:before { content: "[[" }SPAN.menu:after { content: "]]" }
8
jonk
v@id
a
Server-side programming Server‐side programming in three distinct styles 1) “Plain code”, generating HTML through “print” statements
▪ Java servlet classes (can also be done in PHP, …)▪ 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++) {
…;}
}}
9
jonk
v@id
a
Server-side programming: 2) Embedding source code in HTML documents
▪ JSP – JavaServer Pages (this approach can also be used in PHP, …)▪ <p> The following users are registered in the system:</p>
<table><tbody><% ResultSet result = sqlQuery("SELECT * FROM users");
while (result.hasNext()) { %><tr> <td> User name: <%= result.getColumn("name") %></td>
<td> E-mail address: <%= result.getColumn(“email") %></td></tr><% } %></tbody></table>
▪ Compiled into a servlet and executed on the server▪ The web browser only sees a standard web page – no code!
10
jonk
v@id
a
Server-side programming 3) Tag‐based programming
▪ The JSTL – JSP Standard Tag Library – has many useful tags▪ JSP also allows you to create your own tags!▪ <p> The following users are registered in the system:</p>
<table><tbody><sql:query var="queryResult">SELECT * FROM users;</sql:query><c:forEach var="row" items="${queryResult.rows}"><tr> <td> User name: <c:out value=“${row.name}”></td>
<td> E-mail address: <c:out value=“${row.email}”></td></tr></c:foreach></tbody></table>
▪ Again, these tags are executed on the server.▪ The web browser sees only standard HTML tags.
11
jonk
v@id
a
JavaScript Interactive user interfaces: JavaScript Can be used to manipulate HTML documents Executed in the browser – no server‐side roundtrip, no reload
function toggle(id) {var style = document.getElementById(id).style;if (style.display == 'none') {
style.display = 'block'; // or 'inline' } else {
style.display = 'none';}}
<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>
12
jonk
v@id
a
Development environment Development environment: Java SE 6 (Standard Edition)
▪ Plus some of the extensions in Java EE (Enterprise Edition):Servlets, JavaServer Pages (JSP), JSP Standard Template Library (JSTL)
MySQL (database server) Apache Tomcat (web server / Java application server)
▪ Translates JSP / JSTL into pure Java, and executes it IDEA 9.0 – integrated development environment
▪ Extensive support for servlets/JSP/JSTL and HTML/CSS/JavaScript▪ Error highlighting, refactoring and code navigation▪ Must hand in an IDEA project
Firefox (recommended)▪ Also plugins: Web Developer Toolbar and Firebug
13
jonk
v@id
a
Examination: Project Examination: Create a complete web application! Web‐based message forum
▪ Built “from the bottom up” (except for standard libraries, of course)▪ No lab skeletons▪ Allows you to show you have understood the concepts
Alternative: Define your own project▪ Must cover all relevant topics; must hand in specification.▪ Discuss your ideas with us before you start!
Groups of 1 or 2 (possibly 3 after discussion) – sign up in Webreg
14
jonk
v@id
a
Project setup Part 1: A web forum requires user accounts Your first introduction to web programming + JSP / JSTL
▪ Design dynamic web pages to register users, change profiles, ▪ …
Part 2: The actual message forum Implement basic message forum functionality
▪ Creating forums, and topics within a forum▪ Writing and replying to messages within a topic▪ …
Part 3: Choose between different extensions Learn more about aspects that you are interested in Choose from a list or define your own…
15
jonk
v@id
a
Lab times Supervised lab times every week The assistant will leave 30 minutes before the scheduled end You still get the same amount of supervision – but more often!
Keep us busy! Ask us, instead of spending days trying to solve problems
▪ And tell us when something does not work as smoothly as it should▪ We can only help you if we know something is wrong
Discuss issues of design and implementation▪ Not everything is suitable for lectures – discussion is often better
The assistant is also available by e‐mail (marma)▪ But don’t expect instant answers…
Wemight also ask to see your current project▪ To catch misunderstandings earlier
16
jonk
v@id
a
Grades and examination Grades depend on many aspects of your work Code quality
▪ Write robust software▪ Write readable, structured code▪ Add comments where this would help us understandwhat is done and why it is done this way
▪ Document the overall structure of your system! Usability and design
▪ Create a clean professional interface (not necessarily ”beautiful”)▪ Make sure common tasks are easy to do – don’t annoy your users
Extensions▪ Points given for each extension ▪ A minimum number of points for grades 3, 4, 5 – but no guarantee!
17
jonk
v@id
a
Deadlines Only one true deadline Final project can be demonstrated / handed in:
▪ During lab times in week 9▪ In the exam period, weeks 10/11 (we will announce a single time!)
Second, third and fourth chances:▪ In the June exam period▪ During the August period▪ Around Christmas▪ E‐mail us in advance that you want to hand in your lab!
Deadline viewed as a written exam▪ There won’t be another exam next week…
18
jonk
v@id
a
Literature Literature for this course: Instructions and course slides contain much of what you need Reference / course book: The Java Enterprise Edition Tutorial
▪ http://java.sun.com/javaee/5/docs/tutorial/doc/▪ (Also available as a PDF file: 1300 pages…)
Use information on the WWW▪ JSTL reference (linked from the web page)▪ Possibly "Thinking in Java" (free book on the WWW)▪ …
Javadoc (built‐in documentation)▪ Press Ctrl‐Q in IDEA
We want feedback!Don’t wait until the course is over…
If we don't know there's a problem, how can we try to solve it?
Main changes this year:(Many updates and improvements in the slides, as always)
Updated lab softwareMoved to the PC labs
Simplified project setup