docum
DESCRIPTION
DocumentatieTRANSCRIPT
WESSY
Alexa Cristina
Butnariu Ioana-Roxana
Facultatea de Informatica, Universitatea “Alexandru Ioan Cuza”
1.Introduction Wessy is an Web application that allows users to guess the names of
celebrities with the help of photos. The quiz can be either a test grid or it allows to the user to write down the name of the celebrity.
We have three quiz :one for actors, one for celebrities from sports and one for musicians.
For the actors we used Google Docs and JavaScript . We have created a script which fetches data from Google Spreadsheet and display them one by one.
The access to any quiz is based on a previous registration in the database of the website. Any unregistered user doesn’t have access to the tests.
Also, registered users benefit from an accurate history and scores. The best scores will be made public. Each user will have access to his history score and the highest score can be seen by everyone.
2.Used Technologies Our application uses the Apache server and MySql of XAMPP(version 1.8.1). XAMPP is a free and open source, cross-platform web server solution stack package,
consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages.
To be able to work with the database we used phpMyAdmin application. phpMyAdmin is a tool written in PHP intended to handle the administration of
MySQL servers over the Web. Currently it can create and drop databases, create/drop/alter tables and views, delete/edit/add fields, execute any SQL statement, manage keys on fields, manage privileges, manage triggers and stored procedures, export data into various formats.
HTML5 is a markup language for structuring and presenting content for the World
Wide Web and a core technology of the Internet. Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
JavaScript is a prototype-based scripting language that is dynamic, is type safe, and
has first-class functions. Its syntax was influenced by the language C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the self and Scheme programming languages. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.
Ajax is a group of interrelated web development techniques used on the client-side to
create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest
object. Despite the name, the use of XML is not required (JSON is often used instead), and the requests do not need to be asynchronous.
We also used Google Apis and Flickr Apis. Google APIs is a set of JavaScript APIs developed by Google that allows interaction
with Google Services and integration of rich, multimedia, search or feed-based Internet content into web applications. They extensively use AJAX scripting and can be easily loaded using Google Loader.
RSS Rich Site Summary is a family of web feed formats used to publish frequently
updated works—such as blog entries, news headlines, audio, and video—in a standardized format. An RSS document (which is called a "feed", "web feed", or "channel") includes full or summarized text, plus metadata such as publishing dates and authorship.
2.Application architecture For the register and login we work with PHP. When we want to register we need an
username, password and an e-mail. After registration we send an e-mail to every user to confirm. In order to provide security, the passwords are encoded using a hash function, and then saved into the database together with the e-mail address and a nickname.
We made three examples of tests. Each of them with a different theme. A quiz that
features famous actors, one for famous musicians and bands an one for famous sportsmen. For the first example, the one with the actors, we used Google Docs and JavaScript
bound together by a Google Api inside the html file. We have created a script that fetches data from a Google Spreadsheet we and display them one by one. The quiz starts with a button “Start”. For each question the user gets a photo and four possible answers. Each photos is taken from our fenrir server. For each question we have three photos, and we pick one in a random way every time.
For the sports celebrities we used arrays. We have arrays for questions, answers and
right answers and we also have three arrays for photos. Every time when we start the test, one of the three photos will be chosen randomly . This quiz allows the user to write down the name of the celebrity.
For the quiz with the singers and bands, we used the same Google Api, Google Docs
and JavaScript as for the actors quiz, except that this time, we used a Flickr Api to get photos for every question. In order to do that, we use the application to look for a picture using the data from the correct answer field, and the picture obtained this way is shown to the user, together with the question and the possible answers.
In order to make a good interface , our project uses HTML5 and CSS(Cascade Style
Sheets) and JavaScript. Also, every user has access to previously obtained scores, in order to implement this
we used Ajax, and PHP for easy access to the database.
Of course, there is a general ranking where we show to the users the best scores
obtained in the game. For this we use RSS, and for easy access to the database, some PHP. 3. Implementation details Logging in/Registering
Here is some sample code for the login part: <?php require_once'Database.php'; require_once 'Login.php'; if(isset($_POST['LOGIN'])) { $db=new Database(); $lm=new Login($db); if(isset ($_POST['persistent'])) $lm->persistent = TRUE; try { $lm->login($_POST['username'],$_POST['password']); header('Location:Wessy.php');
} catch(Exception $e) { echo'Exception: ' . $e ->getMessage().PHP_EOL; } $db->close(); } ?> And the actual function is: function login($user, $pass){ // username trebuie sa contina litere mari si mici, cifre, - _ . if (!preg_match('/^[a-zA-Z0-9][a-zA-Z0-9-_.]+$/', $user)) { throw new Exception('Username contine caractere invalide'); } $stmt = $this -> dbCon -> stmt_init(); if ( $stmt -> prepare("SELECT idu, password, pass FROM utilizatori WHERE
username = ?") ){ $stmt -> bind_param('s', $user); if ($stmt -> execute()){ $stmt -> store_result(); $stmt -> bind_result($userId, $hashR, $saltR); $stmt -> fetch(); if( $stmt -> num_rows === 1 ){ $hash = createHash($pass, $saltR); // Daca hash-ul obtinut din parola data la logare este // identic hash-ul din db atunci userul poate fi logat if ($hash === $hashR){ if ($this -> persistent === TRUE){ session_set_cookie_params(60*60*24*30); } // Setam un nume pentru cookie-ul ce va tine id-ul sesiunii session_name(cookieName); // Creem sessiunea // Paremetrii si nume sesiunii trebuie sa fie setate inainte // de a apela session_start() session_start();
// Stocam id-ul userului $_SESSION['userID'] = $userId; echo 'Logged', PHP_EOL, 'Session with id ', session_id(), ' was
created'; } else { echo $hash; } } else { echo $stmt -> sqlstate; } } else { echo $stmt -> sqlstate; return FALSE; } $stmt -> close(); } else { echo $stmt -> sqlstate; } } The logout is done this way: <?php require_once 'Database.php'; require_once 'Login.php'; $db = new Database(); $lm = new Login($db); if(isset($_GET['logout'])){ $lm -> logout(); header('Location: Wessy.php'); } ?>
The tests
This image is extracted from the music theme quiz. The code for obtaining the image is: This is where we obtain the key words to search for photos on Flickr: var temp; if (response.feed.entry[currentQuestion].gsx$answer.$t == "a") temp =
response.feed.entry[currentQuestion].gsx$optiona.$t; else if (response.feed.entry[currentQuestion].gsx$answer.$t == "b") temp =
response.feed.entry[currentQuestion].gsx$optionb.$t; else if (response.feed.entry[currentQuestion].gsx$answer.$t == "c") temp =
response.feed.entry[currentQuestion].gsx$optionc.$t; else if (response.feed.entry[currentQuestion].gsx$answer.$t == "d") temp =
response.feed.entry[currentQuestion].gsx$optiond.$t; showpics(temp); And this is the actual function that retrieves the images using the Api from Flickr: function showpics(to_search) { document.getElementById("imgs").innerHTML=""; var url =
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=ea3817fa4e2a33b989b3e2630f09ecac&tags=" + to_search + "&safe_search=1&per_page=1"; var src; $.getJSON(url + "&format=json&jsoncallback=?", function(data) { $.each(data.photos.photo, function(i, item) { src = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/"
+ item.id + "_" + item.secret + "_m.jpg"; $(" ").attr("src", src).appendTo("#imgs"); }); }); }
After completing every test, we gather the information about the scores.So, in order to send the information from the test to the database we use:
var dataStr = 'reg_score=reg_score&myScore='+totalCorrect; $.ajax({ type: 'POST', url: 'scores.php', data: dataStr, success: function() { } }); And the actual work with the database is done in here: <?php require_once 'manager_score.php'; require_once 'Database.php'; $db = new Database(); $ms = new manager_score($db); $ms -> showScores(); //$ms -> showScoresByPoints(); //echo $ms -> totalScore(); //$ms ->showScoresBest(2); //$ms->showScoresForUser(); if(isset($_POST['reg_score'])){ try { $ms->addScore($_POST['myScore']); } catch(Exception $e){ echo $e ->getMessage(); } } $db -> close(); ?> The rankings The code for showing the best scores is: <?php require_once 'Database.php'; require_once 'manager_score.php'; $db = new Database(); $ms = new manager_score($db);
$ms -> showScoresBest(3); $db -> close(); ?> And the actual functions are: <?php require_once 'configuratie.php'; class manager_score { private $db; function __construct($dbCon){ $this->db = $dbCon; } function addScore($userScore){ session_name(cookieName); session_start(); $userID = $_SESSION['userID']; if (!preg_match('/^[0-9]+$/', $userScore)) { throw new Exception('Username contine caractere invalide'); } $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("INSERT INTO scores VALUES(?,?,NOW())")){ $stmt -> bind_param('dd',$userID, $userScore); if ( !$stmt -> execute()){ return FALSE; } $stmt -> close(); } else { return FALSE; } } function showScores(){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s,
users u WHERE u.idu=s.idu ORDER BY s.added desc")){ if ( $stmt -> execute()){ $stmt -> bind_result($username, $score, $date);
echo '<table id="scores">'; while ($stmt -> fetch()){ echo
'<tr><td>',$username,'</td><td>',$score,'</td><td>',$date,'</td></tr>'; } echo '</table>'; } $stmt -> close(); } } function showScoresForUser(){ session_name(cookieName); session_start(); $userID = $_SESSION['userID']; $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT score, added FROM scores WHERE idu=? ORDER
BY added desc")){ $stmt -> bind_param('d',$userID); if ( $stmt -> execute()){ $stmt -> bind_result($score, $date); echo '<table id="scores">'; while ($stmt -> fetch()){ echo '<tr><td>',$score,'</td><td>',$date,'</td></tr>'; } echo '</table>'; } $stmt -> close(); } } function showScoresBest($nr){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s,
users u WHERE u.idu=s.idu ORDER BY s.score desc LIMIT 0,?")){ $stmt -> bind_param('d',$nr); if ( $stmt -> execute()){ $stmt -> bind_result($username, $score, $date); echo '<table id="scores">'; while ($stmt -> fetch()){ echo
'<tr><td>',$username,'</td><td>',$score,'</td><td>',$date,'</td></tr>'; }
echo '</table>'; } $stmt -> close(); } } function showScoresByPoints(){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s,
users u WHERE u.idu=s.idu ORDER BY s.score desc")){ if ( $stmt -> execute()){ $stmt -> bind_result($username, $score, $date); echo '<table id="scores">'; while ($stmt -> fetch()){ echo
'<tr><td>',$username,'</td><td>',$score,'</td><td>',$date,'</td></tr>'; } echo '</table>'; } $stmt -> close(); } } function totalScore(){ session_name(cookieName); session_start(); $userID = $_SESSION['userID']; $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT SUM(score) FROM scores WHERE idu=?")){ $stmt -> bind_param('d', $userID); if ( $stmt -> execute()){ $stmt -> bind_result($totalScore); $stmt -> fetch(); return $totalScore; } $stmt -> close(); } } function atomScores(){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s,
users u WHERE u.idu=s.idu ORDER BY s.added desc")){ if ( $stmt -> execute()){
$stmt -> bind_result($username, $score, $date); while ( $stmt -> fetch() ){ echo '<entry> <author>',$username,'</author> <title>',$username,'</title> <content>Has ',$score,' points on ',$date,'</content> </entry>'; } } $stmt -> close(); } } function atomScoresByPoints(){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s,
users u WHERE u.idu=s.idu ORDER BY s.score desc")){ if ( $stmt -> execute()){ $stmt -> bind_result($username, $score, $date); while ( $stmt -> fetch() ){ echo '<entry> <author>',$username,'</author> <title>',$username,'</title> <content>Has ',$score,' points on ',$date,'</content> </entry>'; } } $stmt -> close(); } } } ?> 4. Conclusions This Web application can be extended by adding more tests and games and maybe
giving the users the possibility of interaction. Also, a way to improve it would be, of course, asking the people that are using it about the flows and the strengths. In order to achieve this we should implement a form that any user would have access to, and where it could leave suggestions, complaints etc.