Web 2.0 with AJAX Students : LASC Ioana KELEMEN Csilla POP Dan Adrian CIOBANU Dumitru Daniel Project leaders : Jean Luc LARBOT Ahmed RHIAT

Overview Web 2.0 seems to be like Pink Floyd lyrics: it can mean different things to different people, depending on your state of mind. What is AJAX? –Ajax stands for Asynchronous JavaScript And XML –it mixes well known programming techniques in an uncommon way –enables web developers to build Internet applications with much more appealing user interfaces

We will take a look at : Web servers – Apache and Tomcat »Daniel HTML and CSS Document Object Module »Dan JavaScript and XMLHTTPRequest JSP – MySQL »Csilla Hibernate »Ioana

Apache and Tomcat Web servers –application that translates an URL either into a filename, and then sends that file back over the Internet, or into a program name, and then runs that program and sends its output back. –Criteria for Choosing a Web Server: Fast Multitasking Authentication Error handling Negotiation of style and language Multi-format support Run as a proxy server Secure

Apache and Tomcat Apache –Has more than twice the market share than its next competitor, Microsoft –Freeware –Open source –Highly configurable –Suits sites of all sizes and types –Implements many features in addition to the core functionality –Extensible with third-party modules

Apache and Tomcat Tomcat Java-based servlet container with JSP environment its web server is not as fully featured as many other servers is cross platform running on any operating system that has a Java Runtime Environment its default HTTP port is 8080 Tomcat’s Architecture: –Top-level components –Connectors –Container components –Nested components

HTML and CSS HTML - HyperText Markup Language predominant markup language for the creation of web pages It provides a means to describe the structure of text-based information in a document is written in the form of labels, known as tags can include embedded scripting language code

HTML and CSS Elements are the basic structure for HTML markup, they have two basic properties: –attributes - name-value pairs, separated by "=" –content Delivery of HTML HTTP (HyperText Transfer Protocol )

HTML and CSS What Is CSS? Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. Style sheets contain a number of CSS rules There are three types of style: –Browser style –User style sheets –Author style sheets

HTML and CSS Why Use CSS ? –Easy to maintain –Smaller file sizes –Increased accessibility –Different media –More control over typography

DOM Document Object Model (DOM) is a platform - and language-independent standard object model for representing HTML or XML and related formats Is an abstract data structure that represents XML documents as trees of nodes.

DOM The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3): –Core DOM - defines a standard set of objects for any structured document –XML DOM - defines a standard set of objects for XML documents –HTML DOM- defines a standard set of objects for HTML documents

DOM common types of nodes in XML: –Elements –Attributes –Text –Document less common node types: –CDATA –Comment –Processing Instructions –Document fragments –Entities –Entity reference nodes –Notations

DOM Dom tree

From Java to JSP Applets are java programs executed in the user’s browser. A servlet is a Java programming language class that is used to extend the capabilities of servers that host applications access via a request-response programming model. A servlet container is a runtime shell that invokes servlets on behalf of clients; software that runs servlets and manages them through their lifecycle. A JSP page is a text document that contains two types of text: static data, (HTML, SVG, WML, and XML), and JSP elements, which construct dynamic content.

JavaScript and in particular the XMLHTTPRequest object to manipulate the requests and the answers JavaScript Client-side scripts are embedded in web pages and executed by JavaScript interpreter built into browser They add extra functionality to an otherwise static HTML page: - Change the way page elements are displayed - Add animations and other image effects - Open pop-up windows and dialogs - Check the validity of user-entered data

JavaScript and in particular the XMLHTTPRequest object to manipulate the requests and the answers The XHR (XMLHttpRequest) object is the core of the Ajax engine. Enables a page to get data from (with GET method) or post data to (with the POST method) the server as a background request. It does not refresh the browser during this process XMLHttpRequest is supported by all modern browsers. It is made asynchronously in background Any type of document may be returned from the server: ASCII text, HTML, and XML are all popular choices

JavaScript and in particular the XMLHTTPRequest object to manipulate the requests and the answers Database enabled XHR - The server-side language queries the database, based on what was requested - After the data has been received by the server-side language it can be returned to the XHR that originally requested it, and handles by the client-side language - Custom methods are handling specific database interactions

JSP with access in the MySQL database JSP is becoming the new standard for easily developed, easily maintained Web applications Reasons for JSP's soaring popularity: - Making Web pages come alive - Getting data from the user - Easier to program - More power through Java - Connecting to databases - Performance - Separating code and data - Handling cookies

JSP with access in the MySQL database Servlets Are the Java counterpart to non-Java dynamic Web content technologies such as CGI and ASP.NET. Can maintain state across many server transactions by using HTTP cookies, session variables or URL rewriting. The Servlet life cycle: - The Servlet class is loaded by the container during start-up - The container calls the init() method - After initialization, the servlet can service client-requests - The container calls the destroy() method

JSP with access in the MySQL database Connecting to MySQL with JSP The first thing is to make available the java.sql.* class Need to expect and handle java.sql.SQLExceptions An instance of the mm.mysql.Driver class is required to register the DriverManager An instance of JDBC driver needs to be registered with the DriverManager before the call of getConnection() could make the proper connection After creating the connection, statements can be created

HIBERNATE The evolution of programming languages The relational concept for data management The Object/Relational Mapping (ORM)

HIBERNATE

The object-oriented view of a relational database The Hibernate mapping system Example