Yacks

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.ro
students.info.uaic.ro/~alexandru.andrei,
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
application. 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
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
important, we can name Reminders or Events. Both application have login
implementation 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
options 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
application 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
Facebook, 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
possibility of managing the disciplines based on personal interests.

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
2.1.2 Dinamic content – JavaScript
JavaScript is a scripting programming language, interpreted, designated to
manipulate 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,
interpreted 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
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
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
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
connect 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,
Alexandru 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
laboratory, 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,
register 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 academic 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

8
weekly report of 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 disciplines 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

9
link to the style sheet using the <link> tag. Meta attribute describe metadata within an
HTML 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 tag
contains 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>

10
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.
<footer id="footer">
Copyright © 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
password together, apply a hash function and then verify if we have the result in the
database. 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
transferred in account.php.

11
$hash = md5 ($_POST['username'].$_POST['password']);
$user = q("SELECT * FROM ùser` 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
important 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 ùser`
(ùser`, `pass`, `name`, èmail`, `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
optional 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
selected 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");

12
$profesor = $art->getElementsByTagName("profesor");
$sala = $art->getElementsByTagName("sala");
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
possibility 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;

13
- db.php – creates a connection to the database through the configuration
mentioned above;
- function.php – different helping php functions on the server, like the weeks
function which returns the current week, or the get_alerts function which
returns 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 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.

14
object type prof
PracticaSGBD L Colab. Simionescu Radu
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
complete 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
classes 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
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

Yacks

More Related Content

What's hot

Viewers also liked

Similar to Yacks

Recently uploaded

Yacks