Transcript Schedule
Web 2.0 with AJAX Project leader : Students : Ahmed RHIAT LASC Ioana KELEMEN Csilla POP Dan Adrian CIOBANU Dumitru Daniel 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 • 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. The Table with the technologies used Technologies Languages - DOM – Document Object Model – a platformand language-independent standard object model - JSP (Java Server Pages) – Java technology - Hibernate – is an object-relational mapping solution for Java language - Toolkit & Framework Developing environment HTML – - DOJO – toolkit - MyEclipse markup - Prototype – - Mozilla Firefox language framework browser’s Firebug - CSS – stylesheet debugger language -XML – markup language - JSON - Java - JavaScript - SQL – query language Schedule -> Add addSchedule() addContentSchedule() JSON viewSchedule.jsp entadd.jsp addSch() populateComboAddStudent() populateAddComboChangedStudent() populateAdd.jsp populateAdd(param1, param2, param3) params JSON populateAddEnterprise.jsp On “Cancel” On “Add” cancelAdd() populateComboAddStudent() entAdd() addinsert.jsp FUNCTION STUDENT IDSTUDENT LASTNAME FIRSTNAME IDFUNCTION PK IDENTERPRISE FK IDSTUDENT FK NAME DESCRIPTION PK ENTERPRISE IDENTERPRISE PK NAME ADDRESS ACTIVITYAREA PRODUCT ENTSCHEDULE IDENTSCHEDULE PK DAY HOUR NRHOURS IDFUNCTION FK IDLOCATION FK TEACHER USER IDTEACHER PK LASTNAME FIRSTNAME IDUSER FK IDUSER PK USERNAME TYPE PASSWORD LOCATION IDLOCATION NAME DECRIPTION PK SCHINVITE IDSCHINVITE PK IDTEACHER FK IDENTSCHEDULE FK CONFINVITE CONFLUNCH Edit schedule editContentSchTeacher() editDataSchTeacher() Schedule table on Combo boxes click on save data populateEdit() populateEdit.jsp comboFunctions.jsp comboEnterprise.jsp viewedit.jsp DATABASE transactEdit.jsp editDatabase() entedit.jsp Edit fields editFieldNameContent () editFieldNameData () Schedule table on Combo boxes click on save data populateEditField() viewfield.jsp DATABASE transactEdit.jsp editDatabase() 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 ?