Web 2.0 with AJAX Students : LASC Ioana KELEMEN Csilla POP Dan Adrian CIOBANU Dumitru Daniel Project...
-
Upload
lilian-barrett -
Category
Documents
-
view
213 -
download
0
Transcript of Web 2.0 with AJAX Students : LASC Ioana KELEMEN Csilla POP Dan Adrian CIOBANU Dumitru Daniel Project...
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 ?