Yacks

project, infoiasi, tw2013, web

Transcript

1. Yacks - Your Academic Tasks (B) Alexandru S. Andrei, Ţurcanu S. Tudor Faculty of Computer Science - University of Iasi alexandru.andrei@info.uaic.ro, tudor.turcanu@info.uaic.ro http://students.info.uaic.ro/~alexandru.andrei, http://students.info.uaic.ro/~tudor.turcanu Abstract. The application will allow the students from Faculty of Computer Science, Iasi, identified by an user and a password to log into an Web applica- tion. The user will be able to register or log into a server, which will allow them to consult a report about the activity that they have for the next week. The report contains information from the web pages of the discipline that they attend. Also they are able to share the content through a social network like Facebook, Twitter or to consult an archive of the weekly reports for a semester. KeyWords: Web, application, Yacks, academic, report, html, css, php
2. 2 1 Introduction The application is a part of the Productivity software category. The term productivity software is usually used as a category of applications dedicated to helping accomplish specific jobs such as documents, presentations, spreadsheets, databases, charts and graphs, create digital paintings, electronic music, make digital movies, etcetera. Usually the most common productivity applications are, in order of importance: word processing programs, that are used to create digital or printed text documents, immediately followed by spreadsheet applications that can be used to create charts of complex iterative calculations, and databases that are used to manage large amounts of data. There are already on the market several desktop or web application that are very complex, and are using a model of the current application, Yacks. Among most im- portant, we can name Reminders or Events. Both application have login implementa- tion and event management (create, delete, edit). * Reminders is a desktop application(MacOS), smartphone application(iPhone) and tablet application(iPad) through which we can use the date and location of the computer, to add, modify or edit events. Also the application can look up for a certain event or send a notification where you reached a point. * Event is a desktop application for the planning/management of events. It has op- tions for: what you have to do, what you did, or reminder for a task. By the need to organize time more efficient and in a more pleasant way, Yacks ap- plication seems to be a solution for this problem. Another major benefit for the users is the weekly report and the ability to share the reports on social networks like Face- book, Twitter. The planning of the optional disciplines, or the ones you have to retake can be done in a very pleasant and easy way for the user. All information from the professors websites, and all the students events will be in one place, with the possibil- ity of managing the disciplines based on personal interests.
3. 3 2 Technology 2.1 Languages used on the client side 2.1.1 Static content 2.1.1.1 HTML Hypertext Markup Language (HTML) is the underlying markup language of the World Wide Web. HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written using the relaxed HTML syntax, but also the more strict XML one, and also addresses the needs of web applications. HTML5 does not describe the style and formatting of content, but only the content itself and its meaning. Style and formatting is defined and controlled using Cascading Style Sheets (CSS). A few advantages of HTML5 are: the internal representation is based on DOM (Document Object Model), the document header can include metadata (title, base, link, meta, style), the content positioning through CSS3 style sheets, graphics (canvas), multimedia (audio, video), device access (drag & drop, notification), offline & storage, processing at Web level (JavaScript). HTML5 is still in a standardization track on the Web Consortium. “HTML5 should not be considered as a whole. You should cherry-pick the technology that suits the solution to your problem.” - Remy Sharp. 2.1.1.2 CSS Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML). CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media. CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and CSS3, now split into smaller modules, is progressing on the standard track. The first early drafts of CSS4 modules are being written and reviewed. Describes the syntax and forms of the language and introduces fundamentals like specificity and inheritance, the box model and margin collapsing, stacking and block-formatting contexts, or the initial, computed, used and actual values. Entities like CSS shorthand properties are also defined.
4. 4 2.1.2 Dinamic content – JavaScript JavaScript is a scripting programming language, interpreted, designated to ma- nipulate and integrate the facilities given by a certain system. The JavaScript code is executed in the Web browser, and it’s set in the HTML documents, by <script> tag. Everything is an object, even the functions. All the properties and methods are public. JavaScript (often shortened to JS) is a lightweight, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. 2.2 Languages used on the server side 2.2.1 Dinamic content 2.2.1.1 PHP PHP (PHP: Hypertext Preprocessor) is a scripting programming language, inter- preted that can be directly included into the HTML documents. Language advantages: it facilitates the user interaction (cookies, sessions), it has support for database manipulation (MySQL), it can process the resources content (types of archive) and it supports XML technologies. There are three main areas where PHP scripts are used: • Server-side scripting. This is the most traditional and main target field for PHP. You need three things to make this work. The PHP parser (CGI or server module), a web server and a web browser. You can access the PHP program output with a web browser, viewing the PHP page through the server. All these can run on your home machine if you are just experimenting with PHP programming; • Command line scripting. You can make a PHP script to run it without any server or browser. • Writing desktop applications. PHP is probably not the very best language to create a desktop application with a graphical user interface, but if you know PHP very well, and would like to use some advanced PHP features in your client-side applications you can also use PHP-GTK to write such programs.
5. 5 2.2.1.2 Ajax A way to asynchronous transfer data between clients and web servers. Asynchronous JavaScript + XML, while not a technology in itself, is a term that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and the most importantly XMLHttpRequest object. When these technologies are combined in the AJAX model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions. 2.2.2 Data sources 2.2.2.1 MySQL MySQL is an open source architecture, very fast, and optimized for data access. MySQL is a relational database management system, is a popular choice of database for use in web applications. They have a common code base and include the following features: cursors, triggers, updatable views, sub-SELECTs (i.e. nested SELECTs) or query caching. Like other SQL databases, MySQL does not currently comply with the full SQL standard for some of the implemented functionality, including foreign key references when using some storage engines other than the 'standard' InnoDB. Triggers are currently limited to one per action / timing, i.e. maximum one after insert and one before insert on the same table. There are no triggers on views. 2.2.2.2 XML Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML, is a markup language that defines a set of rules for encoding documents
6. 6 in a format that is both human-readable and machine-readable. The design goals of XML emphasize simplicity, generality, and usability over the Internet. It is a textual data format with strong support via Unicode for the languages of the world. Although the design of XML focuses on documents, it is widely used for the representation of arbitrary data structures, for example in web services. 2.3 Frameworks 2.3.1 Fancybox FancyBox is a tool for displaying images, html content and multi-media in a Mac- style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses: Features: * Can display images, HTML elements, SWF movies, Iframes and also Ajax requests * Customizable through settings and CSS * Groups related items and adds navigation. * If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well * Support fancy transitions by using easing plugin * Adds a nice drop shadow under the zoomed item 2.3.2 iCalcreator iCalcreator is a PHP class package managing iCal files, supporting (non-)calendar systems and applications to process and communicate calendar information like events, agendas, tasks, reports, totos and journaling information. The iCalcreator package, built of a calendar class with support of a function class and helper functions, are calendar component property oriented. iCalcreator features create, parse, edit and select calendar and calendar components. 2.4 DOM The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages. All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (e.g., the document
7. 7 object that represents the document itself, the table object that represents a HTML table element, and so forth). The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications. 2.5 XPath XPath, the XML Path Language, is a query language for selecting nodes from an XML document. In addition, XPath may be used to compute values (e.g., strings, numbers, or Boolean values) from the content of an XML document. XPath was defined by the World Wide Web Consortium (W3C). The XPath language is based on a tree representation of the XML document, and provides the ability to navigate around the tree, selecting nodes by a variety of criteria. In popular use (though not in the official specification), an XPath expression is often referred to simply as "an XPath". 3 Application’s architecture Yacks (Your Academic Tasks) is an Web application. A client is capable to con- nect to the application through an user and a password, validated on the server by the login module. If a client is to registered, it can do this through the register menu (it’s important that the user is also registered at the Faculty of Computer Science, Alexan- dru Ioan Cuza, Iasi). There are two major sections for the clients: the first one it’s about the register on server and the login, and the second section it’s reserved for some actions that the client can do in the application: the management of the laborato- ry, seminar classes, or courses in a week, the addition of remaining disciplines from the past years, the sharing of the content on social networks, or the consulting of the semester history. The application’s architecture contains three modules: authentication module, reg- ister module and main module. The authentication module is accessed from the main page and it’s about the verification of user’s existence and the matching password. The second module is the register on server module, with the important condition that the user who wants to register is a member of the Faculty of Computer Science. In the register module, the user selects the year and the group from which he is a part of, so the application will know how to complete the report. After the valid login the user gains access to the main module which is, in fact, the most important part of the whole application. The main module is the one that manages the report about the aca- demic activities that the user has to do in a week. The main module contains several sections, like: schedule, manage, export and links. Schedule is the most important section from this module, is the section where the user can see the weekly report of
8. 8 the current week, can select what other week he wants to see, and where he gets the most important information about the courses, the laboratories and the tests. The manage section is the one where the user can add extra courses he wants to attend. On the export section the user can download a report version in iCal format, specific for Mac and iOS platforms. The last section, link is the one where the links to the disci- plines and the professor mails can be seen. Fig.1. Application’s architecture 4 Implementation details 4.1 User interface The application interface is in HTML5, it uses CSS3 to format the elements, and AJAX for a better user experience. The whole Web application contains two HTML files, that respect the page frame. Here are loaded different other pages contents. The HTML contains two sections: head and body. In head are specified meta-data like: charset - specify the character encoding for the HTML document; an external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. Meta attribute describe metadata within an HTML document:
9. 9 <head> <title>Yacks</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style/style.css" /> <meta name="author" content="Alexandru S. Andrei"> <meta name="author" content="Turcanu S. Tudor"> </head> The second important section in the HTML document is the body. Body tag con- tains three elements: header = typically contains the section’s heading (the <header> element should not be confused with the <head> element), which contains the logo and the menu of the page. <header> <div id="logo"> <a href="index.php"> <img src="css/style/logo.png" alt=""/> </a> </div> <nav id="menubar"> <ul id="menu"> <li> <a href="index.php">Login</a> </li> <li> <a href="index.php?_page=register"> Register </a> </li> </ul> </nav> </header> Article is the second element of the <body> HTML page, it HTML represents a component of a page that consists of a self-contained composition in a page. Here the content of the page is represented. For each independent page a PHP file with this element is loaded, and the rest remains the same. <article> <!—- Page content --> php function </article> The third element of the <body> page is the footer, which typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
10. 10 <footer id="footer"> Copyright &copy; Yacks | <a href="http://validator.w3.org/check?uri=referer"> HTML5 </a> | <a href="http://jigsaw.w3.org/css-validator/check/referer"> CSS </a> </footer> To represent in a more clean way the HTML data, we used the CSS3 style sheets. The strategy that we adopted is a style sheet on all documents, so the style sheet is applied to a number of documents, so it would keep the format consistency and the interaction mode (look and feel), the house style strategy. We further present a small part of the CSS file source: * { margin: 0; padding: 0; } body { font: normal .80em 'trebuchet ms', arial, sans-serif; background: #e5e5e5; } p { padding: 0 0 20px 0; line-height: 1.7em; } 4.2 The program The application has two standard pages, with different contexts. Index and account are the two skeletons where we load different php files (scripts). In index.php we have two pages: the script for login and the one for register. The only possibility to access the second main page, account.php, is to login through a valid user. The logged user page contains schedule.php, manage.php, export.php, links.php and logout.php. The login.php file contains a php script which verifies the input data (username and password) provided by a user, for validity. The validation is done on the server side which is synchronized with an SQL Database. We put the username and pass- word together, apply a hash function and then verify if we have the result in the data- base. If for at least one user from the database this condition is valid, then the user typed the correct data. In this moment we set the session and the page content is trans- ferred in account.php. $hash = md5 ($_POST['username'].$_POST['password']);
11. 11 $user = q("SELECT * FROM `user` WHERE hash='".$hash."'", $yacks); if(!count($user)) { echo("Wrong username or password");} else { list($_SESSION['user_info']) = $user; <script type="text/javascript"> document.location.replace('account.php'); </script> In the register.php file we have the possibility to register new users. It’s very im- portant that those users are students of Faculty of Computer Science, Iasi. The user has the possibility to set an email or a password. The timeline will be specified in regard to the group and the year from the register form. In the moment after the data was successfully introduced, the account is created. q("INSERT INTO `user` (`user`, `pass`, `name`, `email`, `year`, `group`, `hash`) VALUES (".qe($_POST['username']).", " .qe($_POST['password']).", ". qe($_POST['name']).", ". qe($_POST['email']).", ". qe($_POST['year']).", " .qe($_POST['group']).", '" .$hash."' );" , $yacks); echo "Account created"; In the schedule.php we have the specified timeline for each user, as well the op- tional disciplines taken from the database. The optional disciplines are in a different txt file, material_optionale.txt. The selected group is the group that the user has se- lected on register. To set the current week, we reduce the current data from 2013-02- 18, this one being set in a cookie. The information about the timeline is in the orar.xml file, from which we get for display only the relevant data for the logged user. Besides the name of the discipline, in this table we find the data, the hour, and the name of the professor. Also the report provides sorting on different criteria. $grupa = $art->getElementsByTagName("grupa"); $zi = $art->getElementsByTagName("zi"); $de_la = $art->getElementsByTagName("de_la"); $pana_la = $art->getElementsByTagName("pana_la"); $disciplina = $art->getElementsByTagName("disciplina"); $tip = $art->getElementsByTagName("tip"); $profesor = $art->getElementsByTagName("profesor"); $sala = $art->getElementsByTagName("sala");
12. 12 In the manage section, the user has the possibility to add remaining disciplines from previous years, or disciplines that he wants to take in advance, having the possi- bility to choose from all the years, and also to choose exactly when (day and hour) to attend that discipline. After the discipline is selected, it’s saved into the database. $users = q("SELECT * FROM `objects` WHERE user_id='".$_SESSION['user_info']['id']."'", $timr); if($users) foreach ($users as $user) { <tr> <td><? echo $user['day'] ?></td> <td><? echo $user['start'] ?></td> <td><? echo $user['end'] ?></td> <td><? echo $user['object'] ?></td> <td><? echo $user['type'] ?></td> <td><? echo $user['prof'] ?></td> <td><? echo $user['room'] ?></td> <td><button class="del_button" value=" echo $user['id'] ?>">-</button></td> </tr> } In case that the application does not have information about a discipline, the user can add a URL to that discipline, or a email of the professor. This matter is done with the help of links.php file. In case that we press the save button, the information typed in will be saved in the database. if (isset($_POST['save'])) { for ($i=0; isset($_POST['id_'.$i]); $i++){ $_POST['link_prof_'.$i]."<br>"; update_links($yacks,$_POST['id_'.$i], $_POST['link_object_'.$i], $_POST['link_prof_'.$i]); } } In the logout.php file, the session expires, and the user is disconnected. session_start(); unset($_SESSION['user_info']); header("location: index.php"); Auxiliary files: - config.php – sets the parameters for the database connection; - db.php – creates a connection to the database through the configuration men- tioned above;
13. 13 - function.php – different helping php functions on the server, like the weeks function which returns the current week, or the get_alerts function which re- turns the exams from the next week ( 7 Days); - materii.php – returns information about the disciplines; - libs.php – helping file that includes other files, to avoid the repeat; - the website also contains different useful JavaScript functions, in the js/ di- rectory. Files for every discipline: - GpC.php – file used for parsing the page info.uaic.ro/~ghirvu/gpc/ - TW.php – Tehnologii Web - Cn.php – Calcul Numeric - unavailable.php – used when a page is unavailable. 4.3 Content (data) The database, found on the Faculty of Computer Science Iasi server, contains three tables: links (data and links that the user added at the moment when the application doesn’t have any information about a discipline), objects (details about the optional disciplines) and user (information about users). The “user” table contains: the name of the user, the email, the group, the year and the hash of the password + user, whit which we check for the validity of the login. user pass name email tudor.turcanu infouaicro Tudor tudor@yahoo.com year group hash 3 BGr.2 a8a592dfa3bf8c37d04ccd2f3af13392 In the “object” table we have: the day, the optional discipline, the type of the class (laboratory, seminar, course), how much the class is going to take, the name of the professor and the room where the class will take place. day start end object type Marti 18:00 20:00 TehnologiiWeb L prof room Colab. Gheorghiu Claudia C403 In the “links” table we have: the name of the discipline, the type, the name of the professor and two fields with links or emails, corresponding to the discipline or the professor. object type prof PracticaSGBD L Colab. Simionescu Radu
14. 14 link_object www.info.uaic.ro/~felea link_prof www.students.info.uaic.ro/~radu.simionescu/ The second data source that is used is the XML file. In orar.xml we store the com- plete timeline generated from the orar.php file and used in schedule.php. <ora> <zi>Luni</zi> <de_la>08:00</de_la> <pana_la>10:00</pana_la> <grupa>1AGr.7</grupa> <disciplina>Limba engleza II</disciplina> <tip>S</tip> <profesor>Colab. Olariu Cristina</profesor> <sala>C905</sala> </ora> Another data source is the materii_optionale.txt file, where the optional disciplines for all the years are stored. 5 Conclusions With this project, we proposed to make a web application that will provide a report about the activities that a student of Faculty of Computer Science, Iasi, has to make, in a week. After we presented the technologies behind the application, the document shows, the actual application design. The implementation was made with the creation of clas- ses and methods that respect the OOP principles so that the best performance could be achieved, and so that the future versions of the application could be made easily. In the future, both the client interface, or the served side, or even the data storage, could easily extend. On the interface side, some elements could be added, like, the recovery of the password if it has been forgotten. On the server side the security of the personal data of the users could be improved. Also on the server side in the future, we could offer all the disciplines sides, or add more options, like: notifications every time a new course, laboratory, or homework appears, or an email send when there is a change in the schedule.
15. 15 5 References 1. Sabin Buraga, Tehnologii XML, Polirom, Iaşi, 2006 2. L. Alboaie, S. Buraga, Servicii Web, Polirom, Iaşi, 2006 3. Sabin Buraga - webpage 4. Andrei Panu – webpage 5. Productivity software - wikipedia 6. Mozilla Developer Network - developer.mozilla.org 7. Fancybox - website 8. iCalcreator - website 9. W3c - w3.org 10. Faculty of Computer Science, University of Iasi - infoiasi.ro