1 / 20

Web 2.0 with AJAX

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

clover
Download Presentation

Web 2.0 with AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

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

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

  14. The Table with the technologies used

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

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

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

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

  19. 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

  20. Questions ?

More Related