Multimedia Project: March 2017

Sunday, 26 March 2017

Analytics using Google Analytics, PHP, SQL, Ajax and JSON

To display my scoreboard in a more user-friendly interface, I have decided to use analytics. Analytics are information resulting from the systematic analysis of data or statistics. In this case, I will use analytics to display data from my database.

As my database was already previously created I moved straight into loading the Google chart libraries into the header section of my application. After loading these libraries I then began to evoke the the line chart function available with the libraries and formatted the graph using JSON.

Once this is complete, I created another file called line_chart. This file holds the SQL to retrieve the data from the database and returns it to the line chart function. Once this is complete, I reload my page and the graph is available for the user to view their scores. The scores are displayed using sessions. The session ensures that these are the user scores and calls the score for the selected chart and the dates and time of which that quiz was complete. This chart shows a more visual interface for a user to see how their agile ageing is progressing.

Tutorial: http://www.discussdesk.com/google-charts-or-graph-with-php-mysql-and-ajax.htm

Friday, 24 March 2017

Display Previous Scores

Once a user completes a quiz, they are met with their current score. I have implemented that the user is also met with their previous score in that game. This will allow users to have a shortcut to see have the improved since they last played without entering the scoreboard. I did this with a select statement. My select statement selects the score from the database, orders them in descending order and then limits the score. The limit is specified to show just 1 score.

Display Scoreboard

Before I begin to develop my analytics for my web application, I decided it would be a good idea to also allow the user to see their scores in a scoreboard interface. To do this I used both PHP and SQL. I used the data stored in the database in relation to the logged in user and displayed all their previous scores starting with the most previous. This allows a user to keep a log of their scores.

Thursday, 23 March 2017

Live Search

For my project, I decided to include a search bar. This search bar is known as a live search bar as the results are shown as you type, results narrow as you continue to type and finally if results are not available the results bar will provide the user with information that no suggestions are available. To code this live search bar I will use both PHP, Ajax and XML.

Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. While XML is designed to store and transport data. XML was designed to be both human and machine readable.

First, I coded my HTML:

<html>
<head>
<script>
function showResult(str) {
if (str.length==0) {
  document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
  document.getElementById("livesearch").innerHTML=this.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

When a user types a character in the input field, the function is triggered and executes an event. Next, comes the PHP file. The PHP file belongs on the server side and search throughout the XML document to find the users results.

Tutorial: https://www.w3schools.com/php/php_ajax_livesearch.asp

Wednesday, 22 March 2017

Meta Data

Metadata is 'data the provides information about other data'. For my project I will be focusing on one type of metadata known as descriptive metadata. Descriptive metadata describes ' a resource for purposes such as discovery and identification. It can include elements such as title, abstract, author and keywords'.

The use of these keywords will allow my web application receive 'hits' as my web application becomes more popular. To develop these metadata keywords, I followed a tutorial available on W3Schools.

To develop meta data you simply include a description within the HTML document. Within the document the meta data must appear within the header tags.

<head>

</head>

Tuesday, 21 March 2017

Tutorials Used Throughout Project

Analytics
http://www.discussdesk.com/google-charts-or-graph-with-php-mysql-and-ajax.htm

Games
https://codepen.io/zerospree/pen/bNWbvW
https://css-tricks.com/building-a-simple-quiz/

http://downloads.bbc.co.uk/skillswise/maths/ma15solv/quiz/ma15solv-l1-quiz.pdf

http://www.majortests.com/sat/test-results.php

http://brainden.com/logic-riddles.htm

Pop-Ups
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

Emails
http://codingcyber.com/send-forgotten-password-by-mail-using-php-and-mysql-35/

Others
https://www.w3schools.com/php/php_ajax_livesearch.asp
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

Monday, 20 March 2017

Logout

As my user is able to sign into their account, they must also be able to sign out of their account. To sign out we must destroy the session. session_destroy() will delete the session file (if file storage is used). Otherwise the session file will reside on the server until the garbage collection deletes it.

Thursday, 16 March 2017

Score Tracker

When I first developed my quizzes, at the end of the game the user would receive their score. As I have begun to develop my back-end to the project using PHP I have now inserted these scores into the database. Each quiz has its own field in the users table. Once a user completes a quiz their score will be stored in the database. To make this more advanced for the project, my plan is to display the users games data in a score board. This score board will also be met with a chart that shows the users progress in the games. This will be done in an analytical feature.

Wednesday, 15 March 2017

Sessions

Upon a successful login I decided to implement sessions into my project. A session is ' a way to store information, in variables to be used across multiple pages. Unlike a cookie, the information is not stored on the users computers'.

I decided to include sessions in my project so the user is aware they are logged in. The use of session will make it more suitable when a user begins to play games and keeps track of the score and what user is playing so the database will be updated correctly.

Saturday, 11 March 2017

Request New Password

Sometimes, a user may forgot their password. For my project I have decided to implement a request new password function. This function prompts the user to enter their firstname, lastname and email address once they complete this form and click submit, an email is sent to both the user and the administrator which will aid the user with their password problems. This will allow the user receive their old password or request a new password from the administrator of the web application.

Update to flip card game

When I was coding my timer for my project, I found it extremely difficult to code the game with the timer. Because of this I've decided to implement a different tutorial for the game. This tutorial includes a timer and allows the user to see their score, wins and losses once the game is complete. Also this game allows the user to pick different levels of difficulty. In my opinion I believe this game is more beneficial to my web application as it provides more options for my users.

Tutorial: https://codepen.io/zerospree/pen/bNWbvW

Friday, 10 March 2017

Login

As I was successful with my insert into my database, I began to code my user login. For a user to login they must be signed up to the application. To login, they must login using their unique email address and password they used upon creating an account.

When they land on the web application they will be prompted to enter their unique login credentials. If the login is successful they will be re-directed to the home page. If the login is unsuccessful they will be re-directed back to the login page to try again.

The next step I plan to take is to add session to my login.

Saturday, 4 March 2017

PHP: Insert

Today I began to code the back-end to my project. To code my back-end I will use PHP. PHP is a 'widely used open source general purpose scripting language that is especially suited for web development and can be embedded into HTML'.

The first aspect of coding I combatted today was an insert. An insert is used to insert data into the database. For my project I will insert users information upon sign up. This data includes the users: firstname, lastname, date of birth, email address and password. Once the user signs up, this data is stored within the database. This information is stored within the database for login credentials.

I was able to insert information into the database successfully. As it was successful, I also coded an insert for my mailing list. This information is stored under the contact table in my database. The information stored for the mailing list includes the users: firstname, lastname, email address and a comment section if they wish to leave any information about the web application or games.

Friday, 3 March 2017

Domain Name: atSpace

Atspace is an unlimited free web hosting with email sending enable and automatic script installer. It also includes a MySQL Database which is exactly the same as my local database PhpMyAdmin.

I plan to deploy my web application using atSpace. I have decided to make my account now to secure my domain name. My domain name is: agileageing.atspace.eu

Wednesday, 1 March 2017

Database Relationships

In the past week I have added a relationships to my tables for my web application. With these relationships it will allow me retrieve and insert data into multiple table through one insert command in my web application.

Adding relationships to SQL tables is important because:

It helps to further refine table structures and minimize redundant data
It enables you to draw data from multiple tables simultaneously