Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Yacks - Your Academic Tasks (B)Alexandru S. Andrei, urcanu S. TudorŢFacultatea de Informatic , Universitatea Alexandru Ioan Cuza, Ia iă şalexandru.andrei@info.uaic.ro, tudor.turcanu@info.uaic.rostudents.info.uaic.ro/~alexandru.andrei,students.info.uaic.ro/~tudor.turcanuAbstract. The application will allow the students from Faculty of ComputerScience, Iasi, identified by an user and a password to log into an Webapplication. The user will be able to register or log into a server, which willallow them to consult a report about the activity that they have for the nextweek. The report contains information from the web pages of the discipline thatthey attend. Also they are able to share the content through a social network likeFacebook, Twitter or to consult an archive of the weekly reports for a semester.KeyWords: Web, application, Yacks, academic, report, html, css, php
  2. 2. 21 IntroductionThe application is a part of the Productivity software category. The termproductivity software is usually used as a category of applications dedicated tohelping accomplish specific jobs such as documents, presentations, spreadsheets,databases, charts and graphs, create digital paintings, electronic music, make digitalmovies, etcetera. Usually the most common productivity applications are, in order ofimportance: word processing programs, that are used to create digital or printed textdocuments, immediately followed by spreadsheet applications that can be used tocreate charts of complex iterative calculations, and databases that are used to managelarge amounts of data.There are already on the market several desktop or web application that are verycomplex, and are using a model of the current application, Yacks. Among mostimportant, we can name Reminders or Events. Both application have loginimplementation 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 thecomputer, to add, modify or edit events. Also the application can look up for a certainevent or send a notification where you reached a point.* Event is a desktop application for the planning/management of events. It hasoptions 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, Yacksapplication seems to be a solution for this problem. Another major benefit for theusers is the weekly report and the ability to share the reports on social networks likeFacebook, Twitter. The planning of the optional disciplines, or the ones you have toretake can be done in a very pleasant and easy way for the user. All information fromthe professors websites, and all the students events will be in one place, with thepossibility of managing the disciplines based on personal interests.
  3. 3. 32 Technology2.1 Languages used on the client side2.1.1 Static content2.1.1.1 HTMLHypertext Markup Language (HTML) is the underlying markup language ofthe World Wide Web. HTML5 is the latest version of HTML and XHTML.The HTML standard defines a single language that can be written using therelaxed HTML syntax, but also the more strict XML one, and also addressesthe needs of web applications. HTML5 does not describe the style andformatting of content, but only the content itself and its meaning. Style andformatting is defined and controlled using Cascading Style Sheets (CSS).A few advantages of HTML5 are: the internal representation is based onDOM (Document Object Model), the document header can include metadata(title, base, link, meta, style), the content positioning through CSS3 stylesheets, 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 thetechnology that suits the solution to your problem.” - Remy Sharp. CSSCascading Style Sheets, is a stylesheet language used to describe thepresentation of a document written in HTML or XML (including various XMLlanguages like SVG or XHTML). CSS describes how the structured elementmust 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 standardizedW3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 arecommendation and CSS3, now split into smaller modules, is progressing onthe standard track. The first early drafts of CSS4 modules are being written andreviewed.Describes the syntax and forms of the language and introduces fundamentalslike specificity and inheritance, the box model and margin collapsing, stackingand block-formatting contexts, or the initial, computed, used and actual values.Entities like CSS shorthand properties are also defined.
  4. 4. 42.1.2 Dinamic content – JavaScriptJavaScript is a scripting programming language, interpreted, designated tomanipulate and integrate the facilities given by a certain system. The JavaScriptcode 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 andmethods are public.JavaScript (often shortened to JS) is a lightweight, object-oriented languagewith 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 ApacheCouchDB.2.2 Languages used on the server side2.2.1 Dinamic content2.2.1.1 PHPPHP (PHP: Hypertext Preprocessor) is a scripting programming language,interpreted that can be directly included into the HTML documents.Language advantages: it facilitates the user interaction (cookies, sessions), it hassupport 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 forPHP. You need three things to make this work. The PHP parser (CGI orserver module), a web server and a web browser. You can access the PHPprogram output with a web browser, viewing the PHP page through theserver. All these can run on your home machine if you are just experimentingwith PHP programming;• Command line scripting. You can make a PHP script to run it without anyserver or browser.• Writing desktop applications. PHP is probably not the very best language tocreate a desktop application with a graphical user interface, but if you knowPHP very well, and would like to use some advanced PHP features in yourclient-side applications you can also use PHP-GTK to write such programs.
  5. 5. AjaxA way to asynchronous transfer data between clients and web servers.Asynchronous JavaScript + XML, while not a technology in itself, is a term thatdescribes a "new" approach to using a number of existing technologies together,including: HTML or XHTML, Cascading Style Sheets, JavaScript, The DocumentObject Model, XML, XSLT, and the most importantly XMLHttpRequest object.When these technologies are combined in the AJAX model, web applications are ableto make quick, incremental updates to the user interface without reloading the entirebrowser page. This makes the application faster and more responsive to user actions.2.2.2 Data sources2.2.2.1 MySQLMySQL 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 foruse in web applications. They have a common code base and include the followingfeatures: cursors, triggers, updatable views, sub-SELECTs (i.e. nested SELECTs) orquery caching.Like other SQL databases, MySQL does not currently comply with the full SQLstandard for some of the implemented functionality, including foreign key referenceswhen using some storage engines other than the standard InnoDB. Triggers arecurrently limited to one per action / timing, i.e. maximum one after insert and one beforeinsert on the same table. There are no triggers on views. XMLExtensible Markup Language (XML) is a simple, very flexible text format derivedfrom SGML, is a markup language that defines a set of rules for encoding documents
  6. 6. 6in a format that is both human-readable and machine-readable. The design goals ofXML emphasize simplicity, generality, and usability over the Internet. It is a textualdata format with strong support via Unicode for the languages of the world. Althoughthe design of XML focuses on documents, it is widely used for the representation ofarbitrary data structures, for example in web services.2.3 Frameworks2.3.1 FancyboxFancyBox 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 Ajaxrequests* 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 tomouse wheel events as well* Support fancy transitions by using easing plugin* Adds a nice drop shadow under the zoomed item2.3.2 iCalcreatoriCalcreator is a PHP class package managing iCal files, supporting (non-)calendarsystems and applications to process and communicate calendar information likeevents, agendas, tasks, reports, totos and journaling information. The iCalcreatorpackage, built of a calendar class with support of a function class and helperfunctions, are calendar component property oriented.iCalcreator features create, parse, edit and select calendar and calendarcomponents.2.4 DOMThe Document Object Model is an API for HTML and XML documents. Itprovides a structural representation of the document, enabling the developer tomodify its content and visual presentation. Essentially, it connects web pages toscripts or programming languages.All of the properties, methods, and events available to the web developer formanipulating and creating web pages are organized into objects (e.g., the document
  7. 7. 7object that represents the document itself, the table object that represents a HTMLtable element, and so forth).The World Wide Web Consortium establishes a standard for the DOM, called theW3C DOM. It should, now that the most important browsers correctly implement it,enable powerful cross-browser applications.2.5 XPathXPath, the XML Path Language, is a query language for selecting nodes from anXML 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 wasdefined by the World Wide Web Consortium (W3C).The XPath language is based on a tree representation of the XML document, andprovides the ability to navigate around the tree, selecting nodes by a variety ofcriteria. In popular use (though not in the official specification), an XPath expressionis often referred to simply as "an XPath".3 Application’s architectureYacks (Your Academic Tasks) is an Web application. A client is capable toconnect to the application through an user and a password, validated on the server bythe 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,Alexandru Ioan Cuza, Iasi). There are two major sections for the clients: the first oneit’s about the register on server and the login, and the second section it’s reserved forsome actions that the client can do in the application: the management of thelaboratory, seminar classes, or courses in a week, the addition of remainingdisciplines from the past years, the sharing of the content on social networks, or theconsulting of the semester history.The application’s architecture contains three modules: authentication module,register module and main module. The authentication module is accessed from themain page and it’s about the verification of user’s existence and the matchingpassword. The second module is the register on server module, with the importantcondition that the user who wants to register is a member of the Faculty of ComputerScience. In the register module, the user selects the year and the group from which heis a part of, so the application will know how to complete the report. After the validlogin the user gains access to the main module which is, in fact, the most importantpart of the whole application. The main module is the one that manages the reportabout the academic activities that the user has to do in a week. The main modulecontains several sections, like: schedule, manage, export and links. Schedule is themost important section from this module, is the section where the user can see the
  8. 8. 8weekly report of the current week, can select what other week he wants to see, andwhere he gets the most important information about the courses, the laboratories andthe tests. The manage section is the one where the user can add extra courses he wantsto 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 tothe disciplines and the professor mails can be seen.Fig.1. Application’s architecture4 Implementation details4.1 User interfaceThe application interface is in HTML5, it uses CSS3 to format the elements, andAJAX for a better user experience. The whole Web application contains two HTMLfiles, that respect the page frame. Here are loaded different other pages contents. TheHTML contains two sections: head and body. In head are specified meta-data like:charset - specify the character encoding for the HTML document; an external stylesheet 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
  9. 9. 9link to the style sheet using the <link> tag. Meta attribute describe metadata within anHTML document:<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 tagcontains three elements: header = typically contains the section’s heading (the<header> element should not be confused with the <head> element), which containsthe 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 acomponent of a page that consists of a self-contained composition in a page. Here thecontent of the page is represented. For each independent page a PHP file with thiselement is loaded, and the rest remains the same.<article><!—- Page content -->php function</article>
  10. 10. 10The third element of the <body> page is the footer, which typically containsinformation about its section such as who wrote it, links to related documents,copyright data, and the like.<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 isapplied to a number of documents, so it would keep the format consistency and theinteraction mode (look and feel), the house style strategy. We further present a smallpart 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 programThe application has two standard pages, with different contexts. Index and accountare the two skeletons where we load different php files (scripts). In index.php we havetwo pages: the script for login and the one for register. The only possibility to accessthe 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 andlogout.php.The login.php file contains a php script which verifies the input data (usernameand password) provided by a user, for validity. The validation is done on the serverside which is synchronized with an SQL Database. We put the username andpassword together, apply a hash function and then verify if we have the result in thedatabase. If for at least one user from the database this condition is valid, then the usertyped the correct data. In this moment we set the session and the page content istransferred in account.php.
  11. 11. 11$hash = md5 ($_POST[username].$_POST[password]);$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 veryimportant that those users are students of Faculty of Computer Science, Iasi. The userhas the possibility to set an email or a password. The timeline will be specified inregard to the group and the year from the register form. In the moment after the datawas 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 theoptional disciplines taken from the database. The optional disciplines are in a differenttxt file, material_optionale.txt. The selected group is the group that the user hasselected 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 theorar.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 thename 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");
  12. 12. 12$profesor = $art->getElementsByTagName("profesor");$sala = $art->getElementsByTagName("sala");In the manage section, the user has the possibility to add remaining disciplinesfrom previous years, or disciplines that he wants to take in advance, having thepossibility to choose from all the years, and also to choose exactly when (day andhour) to attend that discipline. After the discipline is selected, it’s saved into thedatabase.$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 usercan add a URL to that discipline, or a email of the professor. This matter is done withthe help of links.php file. In case that we press the save button, the information typedin 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;
  13. 13. 13- db.php – creates a connection to the database through the configurationmentioned above;- function.php – different helping php functions on the server, like the weeksfunction which returns the current week, or the get_alerts function whichreturns 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/directory.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 threetables: links (data and links that the user added at the moment when the applicationdoesn’t have any information about a discipline), objects (details about the optionaldisciplines) and user (information about users).The “user” table contains: the name of the user, the email, the group, the year andthe hash of the password + user, whit which we check for the validity of the login.user pass name emailtudor.turcanu infouaicro Tudor tudor@yahoo.comyear group hash3 BGr.2 a8a592dfa3bf8c37d04ccd2f3af13392In 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 theprofessor and the room where the class will take place.day start end object typeMarti 18:00 20:00 TehnologiiWeb Lprof roomColab. Gheorghiu Claudia C403In the “links” table we have: the name of the discipline, the type, the name of theprofessor and two fields with links or emails, corresponding to the discipline or theprofessor.
  14. 14. 14object type profPracticaSGBD L Colab. Simionescu Radulink_objectwww.info.uaic.ro/~felealink_profwww.students.info.uaic.ro/~radu.simionescu/The second data source that is used is the XML file. In orar.xml we store thecomplete 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 forall the years are stored.5 ConclusionsWith this project, we proposed to make a web application that will provide a reportabout 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 ofclasses and methods that respect the OOP principles so that the best performancecould be achieved, and so that the future versions of the application could be madeeasily.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, therecovery of the password if it has been forgotten. On the server side the security of thepersonal data of the users could be improved. Also on the server side in the future, wecould offer all the disciplines sides, or add more options, like: notifications every timea new course, laboratory, or homework appears, or an email send when there is achange in the schedule.
  15. 15. 155 References1. Sabin Buraga, Tehnologii XML, Polirom, Ia i, 2006ş2. L. Alboaie, S. Buraga, Servicii Web, Polirom, Ia i, 2006ş3. Sabin Buraga - webpage4. Andrei Panu – webpage5. Productivity software - wikipedia6. Mozilla Developer Network - developer.mozilla.org7. Fancybox - website8. iCalcreator - website9. W3c - w3.org10. Faculty of Computer Science, University of Iasi - infoiasi.ro