Web 2.0 with AJAX Students : LASC Ioana KELEMEN Csilla POP Dan Adrian CIOBANU Dumitru Daniel Project leader : Ahmed RHIAT

The main task Making a Web 2.0 portal using Ajax technique The main functionality - manage the schedules of the students exams or presentations at different firms The ability of a teacher to see which students have a schedule and to confirm or not his or her participation at the presentations and at the lunch

Other functionalities Adding, editing, deleting A student A teacher A function An enterprise A location An entire schedule and the possibility of the secretary to change teachers confirmations

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

Apache web server 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

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

Login on site and Account Managing Teachers and administrators log in with a username and a password to access some functionalities Forget your password – the username and a new password are sent by Edit account – the username and the password can be changed Logout – the current session is destroyed

Login on site and Account Managing Login part is sent in HTML format from the server and inserted into a div container HTML (Hypertext Markup Language ) - Markup language that is used to present the data to users through web browsers CSS (Cascading Style Sheets ) - Stylesheet language used to describe the presentation of a document written in a markup language

Login on site and Account Managing Cross-browser Ajax requests made through Prototype’s Ajax Object Prototype - JavaScript library that aims to ease the development of web applications Login information sent from the server is handled via DOM DOM (Document Object Model) - a platform and language-independent standard object model for representing HTML or XML and related formats

Login on site and Account Managing Using Dojo’s widgets: menu, button, Floating Pane Dojo - open source JavaScript toolkit that is build on the concept of dynamic web application surrounding Web 2.0 Dojo’s widges – a way to enrich the content of your web site Dojo Advantages – web sites become more usable, responsive, functional Disadvantages – not to well documented

Implementing the view part Students – can view all the schedules Teachers – confirm invites and view students without schedule View functions - called on administrator’s add, edit and delete functionalities Data interchange with JSON (JavaScript Object Notation); JSON vs. XML Dojo’s widgets: FilteringTable, Select, DropdownDatePicker

Implementing the delete part Dojo’s drag and drop feature Delete with confirmation Dojo’s widget – dialog

JavaScript, JSP, XMLHttpRequest Client-side scripts are embedded in web pages and executed by JavaScript interpreter built into browser The XHR (XMLHttpRequest) object is the core of the Ajax engine. JSP is becoming the new standard for easily developed, easily maintained Web applications. It combines HTML and Java, which gives it the strength

The Table with the technologies used TechnologiesLanguagesToolkit & Framework Developing environment - DOM – Document Object Model – a platform- and language-indepen- dent standard object model - JSP (Java Server Pages) – Java technology - Hibernate – is an object-relational mapping solution for Java language - HTML – markup language - CSS – stylesheet language -XML – markup language - JSON - Java - JavaScript - SQL – query language - DOJO – toolkit - Prototype – framework - MyEclipse - Mozilla Firefox browser’s Firebug debugger

Schedule -> Add populateComboAddStudent() addSchedule()addContentSchedule()viewSchedule.jsp JSON addSch() entadd.jsp HTML populateComboAddStudent() populateAdd.jsp populateAddComboChangedStudent() JSON populateAdd(param1, param2, param3) populateAddEnterprise.jsp JSONparams On “Cancel” On “Add” cancelAdd() entAdd()addinsert.jsp

STUDENT IDSTUDENT PK LASTNAME FIRSTNAME FUNCTION IDFUNCTION PK IDENTERPRISE FK IDSTUDENT FK NAME DESCRIPTION ENTSCHEDULE IDENTSCHEDULE PK DAY HOUR NRHOURS IDFUNCTION FK IDLOCATION FK TEACHER IDTEACHER PK LASTNAME FIRSTNAME IDUSER FK USER IDUSER PK USERNAME PASSWORD TYPE LOCATION IDLOCATION PK NAME DECRIPTION SCHINVITE IDSCHINVITE PK IDTEACHER FK IDENTSCHEDULE FK CONFINVITE CONFLUNCH ENTERPRISE IDENTERPRISE PK NAME ADDRESS ACTIVITYAREA PRODUCT

Edit schedule editContentSchTeacher() editDataSchTeacher() DATABASE viewedit.jsp entedit.jsp populateEdit() Schedule table on click Combo boxes comboEnterprise.jsp comboFunctions.jsp populateEdit.jsp editDatabase() on save data transactEdit.jsp

Edit fields editFieldNameContent () editFieldNameData () DATABASE viewfield.jsp populateEditField() Schedule table on click Combo boxes editDatabase() on save data transactEdit.jsp

Conclusions good example of the advantages of using Ajax without using web more HTML files DOJO - powerful GUI (Graphical User Interface) JSON easier than XML JSP - Java code can be used with HTML tags Hibernates - persistent classes

Questions ?