web 2.0 with ajax

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

Upload: clover

Post on 11-Jan-2016

53 views

Category:

Documents


0 download

DESCRIPTION

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 - PowerPoint PPT Presentation

TRANSCRIPT

Web 2.0 with AJAX

Students :

LASC IoanaKELEMEN CsillaPOP 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 email

• 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

Technologies Languages Toolkit & 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.jspJSON

addSch()entadd.jsp HTML

populateComboAddStudent()

populateAdd.jsppopulateAddComboChangedStudent()

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()

DATABASEviewedit.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 ()

DATABASEviewfield.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 2.0 - 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 ?