Anti-aging Games
Documentation of Anti-Aging Games Application Functionality
Technologies used:
Laravel
Php
MySQL
HTML 5
CSS 3
Bootstrap
Javascript
jQuery
Construct 2
1. Introduction:
Anti-aging games website is built for the stimulation of the brain. It creates tips that teach users how to potentially reduce their risk of early memory loss through lifestyle changes. These games are designed to be fun and easy. Considering that you are busy with your work, these games are designedso that you can spend 15 minutes, 30 minutes, or an hour. As you play, your scores are recorded into a massive database. Your progress is tracked and the metrics are easy to understand and very transparent so that you can see for yourself how your scores progress over time. In the upcoming sections, every steps of this application will be described along with the pictures of the steps. For better clarification, next sections are subdivided into the followings:
Creating admin panel login portion
Managing VIP-code (will be used during free user registration)
Managing categories for uploading games
Uploading zip file of game from admin panel
Managing the uploaded games
Reports Management
Users report management
User game report
2. Creating admin panel login:
To enter into the login page, user needs to go the following url:
http://anti-aginggames.com/admin
The adminuser will enter proper credentials and enters into the dashboard. Both the client-side and server-side validation are performed. Appropriate error message is shown to user in case of wrong credentials. Here is a preview of the dashboard if the user is successfully logged in:
3. Managing VIP-code:
3.1 Add VIP-code:
There are two fields need to be filled up. Code is a string and expired date is chosen from bootstrap date-picker. The date is formatted accordingly. This code is used whenever a user performs a free registration. During the process of free registration, user needs to enter this VIP-code and of course the code must be valid i.e. its expired date is not over yet.After adding the code successfully, user will be shown a message of confirmation and is redirected to the listing of VIP-code page.
3.2 Show VIP-code List:
Here is the table for showing all the VIP-codes. The list is sorted in descending order of created time. The server side pagination is implemented to ensure the fastest server data retrieval. Only 10 data are retrieved during one request. There are options for editing and deleting the VIP-code in this page.
3.3 Update VIP-code:
Here, the first step is to retrieve the data using eloquent query for the specific code id. The table row is retrieved and fields are populated accordingly. After the update button is pressed, a post request is occurred and data are updated. User is shown a message that he has successfully updated the VIP-code. For showing the confirmation message bootstrap alert is used.
3.4 Delete VIP-code:
If a user clicks on DELETE button, then before deleting it directly, a confirmation dialog is shown. To show this confirmation box, bootstrap modal is used. If user clicks to delete this VIP-code, then he needs to click the Remove button. After successful deletion, a confirmation box is shown so that user can understand that the data is actually deleted.
4. Managing categories for uploading games:
According to requirements we were given, the categories for the games are fixed. There are 3 types of category Brain Game, Classic Game and MindSpa. These categories are created using the Laravel migration. Later on, if it’s required to manage these categories, then CRUD operations are needed to be performed. Currently, the addition operation is completed and one can view it by uncommenting the menu item from topbar.blade.php file.
5. Uploading zip file of game from admin panel:
This process is sub-divided into this below four sections:
5.1 Game Add:
During game addition process: category, name of the game, score category and file upload option for zip file are present. Of them, category, name and zip file must be filled up. Using Laravel validation code, these conditions are checked. Depending on the speed of the server, it may take some time to upload and extract the zip files. At the time of development, the shared server is used. So the uploaded files are in the public directory instead of storage directory. But the protection of the direct access of the gaming file is prevented using htaccess file. We’ll discusss about it later section.
After the addition is completed, user is redirected to the listing page of the games or show the validation errors if there are any. These validation message are handled using Laravel session. Chumper/zipper is used to extract the zip files.
5.2 Game List:
Here are the contents of the listing page of game:
All the games are shown in this list. Name, category, score category is shown in this list. We’ll discuss about score category in a further section. The gameurl was shown here previously but it’s kept hide now for security reason. From this listing page, admin can modify or delete the games by clicking on the respective buttons. Edit button will take them to the edit page and delete button will show a confirmation before deleting any game.
5.3 Game Update:
Whenever admin clicks on a game’s edit button, he is taken to the edit page. After matching the route and the route parameter, eloquent query is performed for that particular game id. Here, as the zip file is uploaded during the addition process, so uploading the zip file option is prevented and therefore not shown. After changing the form values, if the user clicks the Update button, the fields are updated. A confirmation message of update is shown to the user.
5.4 Game Delete:
If the admin user clicks on DELETE button, before deleting it directly, a confirmation dialog is shown. To show this confirmation box, bootstrap modal is used. If user clicks to delete this game, then he needs to click the Remove button. After successful deletion, a confirmation box is shown so that user can understand that the game is actually deleted. Whenever a game is deleted, to optimize the server space, the directory is also deleted.
6. Reports Management:
In the anti-aging game website, there are various sections for reporting and contacting. Here are list:
Contacts
Affiliates
Testimonials
Dedications
Admin can easily check the latest reports by visiting the menu: Reports from left sidebar. He will find all the reports which are arranged in descending time (recent time records are shown first). The latest ten data are retrieved using the Laravel eloquent query. This is done so that fetching from server can be done fast. It’s very obvious that querying ten data takes less time than querying all the data from a table. Using blade syntax as the following one, pagination is shown in the blade:
{!! str_replace('/?', '?', $contacts->render()) !!}
CSV export option is also available here so that user can download the CSV and can use it later for other purpose. Maatwebsite/excel package is used here to export the data in csv format. This package can also be used for generating excel files.Here is a sample of the report for contacts:
7. Users Report:
8. Users Game Report:
There is an option in the left sidebar that exports the user’s game data. If user clicks on this link, the gaming data with the scores and other fields are exported to csv file.
Website functionality
1. Registration:
To complete a registration process user need to fill up 5 fields. A valid email, confirm email, password, confirm password and a VIP code. User can get this VIP code from system admin. Without vip code user can’t complete the registration process.
2. Login
To complete user need to provide his email address and password.
3. Options before login
Home
Brain trips:
Games:
Tell a friend
Science
Gift center
Team
Login/Registration
4. Options After login:
Home
Brain trips:
Play Games:
Your progress
Tell a friend
Science
Gift center
Team
My Profile
Change password
Logout
5. Play Games:
In this page user can play games. All the games under different category will appear here. Only logged in user can play game in this website.
In the middleware folder there is a file named 'IsFrontUserLoggedIn.php'. in this file, there is a method called handle().In this function we are checking if the user is logged in or not.
We use iFrame to run games from server.
6. Progress:
In this page user can check the progress of games. We save all the data from game in the database and show players highest score, last score and max score in this page. If the game doesn’t have any score we are not showing those games name in this page.