This application displays football team data from a database in a table, allowing users to generate reports on selected teams. The reports include team information, a pie chart of match statistics, and a bar chart comparing multiple teams. The application is secured with a login system to ensure that only authorized users can access its features.
Features
JSON Schema
JSON schema (Leagueschema.json) to validate League.json.
Ensured realistic data types and restrictions for each data element.
JavaScript and HTML
League.html: Displays the Premier League Teams Table.
Topscorers.html: Displays the Premier League Top Scorers table.
Automatically update data at realistic intervals using setTimeout.
Ensured no delay in loading data when the page first opened - AJAX.
Formated HTML professionally using CSS.
Included icons for each reported game/match, reflecting wins (green icons) and losses (blue icons) in the last six games.
Used JavaScript to calculate total points based on wins (3 points) and draws (1 point).
Display Teams Data
Display all football teams data stored in the database in an HTML table.
Order the table in ascending order based on current points.
Each row contains a checkbox for selecting the team for the report.
The first cell in the table header contains a checkbox to select/deselect all teams.
On clicking the "Generate Report" button, a report page is displayed with: A table showing selected football teams' information. A pie chart using Chart.js, showing percentages of matches played (wins, losses, draws, and remaining games). A bar chart comparing selected teams if more than one team is selected.
A login page allows authorized users to enter their username and password to access the application features.
This guide will walk you through setting up and running the project.
- A local web server environment like XAMPP or MAMP with PHP and MySQL.
- A web browser to access the project.
- Basic knowledge of navigating your file system using the command line.
Clone the repository to your local machine using the following command:
git clone https://github.com/Sanindu/PL-Performance-Report-Generation.git
Move into the project directory:
cd PL-Performance-Report-Generation
Ensure you have a local web server environment that supports PHP and MySQL. You can use XAMPP or MAMP.
Move the project files to the appropriate web server directory:
For XAMPP, place the project in the htdocs folder (e.g., C:\xampp\htdocs\PL-Performance-Report-Generation). For MAMP, place the project in the htdocs folder (/Applications/MAMP/htdocs/PL-Performance-Report-Generation). Example for XAMPP:
cp -r PL-Performance-Report-Generation /path/to/xampp/htdocs/PL-Performance-Report-Generation
To set up the database using the included dump.sql file:
Start the Database Server: Use the XAMPP/MAMP control panel to start the MySQL server.
Access phpMyAdmin: Open your web browser and go to:
http://localhost/phpmyadmin
Create a New Database: In phpMyAdmin, create a new database (e.g., pl_performance_report). Ensure the correct collation (e.g., utf8_general_ci) is set.
Import the SQL File:
With the new database selected, go to the "Import" tab.
Click "Choose File" and select the dump.sql file from the project directory.
Click "Go" to import the database structure and data.
Start the Apache server from the XAMPP/MAMP control panel.
Open a web browser and navigate to:
http://localhost/PL-Performance-Report-Generation