This document provides details on developing a website for an automotive industry client using technologies like PHP, MySQL, HTML, CSS, JavaScript, AngularJS. It includes implementation of pie charts and bar graphs to visualize discrete data from a MySQL database. Responsive design and search/sort filters using AngularJS are also implemented. The website would have pages for Home, Services, Analysis, Clients, and Contact Us.

1. WEB DEVELOPMENT - UI/UX DESIGN
Project Name : Automotive Industry
Language Used : PHP
Database : MySQL
User Interface Design :
HTML, AJAX, Chartjs, JSON, JQUERY, JAVASCRIPT, AngularJS
Sudharsan Premkumar
MSc (SS) 1731051

2. Objective
1. Implementation of Pie Chart and Bar Chart showing discrete data from database .
2. Responsive User Interface.
3. Sort and Search filters by AngularJs.

3. Connect MySQL Database with PHP
Create Database - Now return to the homepage of phpmyadmin. Click New button to create a new database.

4. Pie Chart with PHP Mysql
1.Collecting data from MySQL Database
After connecting to database through piechart.php file, we will run the SQL to collect the
data from MySQL table.
2.Data array in PHP
Before displaying records in a table we have created an array in PHP ($php_data_array)
While displaying the records in a table we store each record inside the PHP array.

5. Query to count no.of respective parts created status
$query = "SELECT status, count(*) as number FROM intern GROUP BY status";
3.Adding data to chart
4.HTML part
We can show the chart inside a <DIV> tag and place the same anywhere we want to display
the chart.

6. Pie Chart

7. ChartJS - Bar Graph using PHP MySQL
createdBy
Create data.php file to fetch data from MySQL table.
This file is going to contain php code that will fetch data from the score table and
display it in JSON format.
App.js
We will be making AJAX call from app.js file to data.php file to fetch the JSON data
which will be used to draw the bar graph.
Create bargraph.html file to display bar graph

8. Fetch JSON Array Elements Using JQuery AJAX
method : getJSON
Once the document loads, we call an anonymous function. Inside that, we call the function of
jQuery AJAX method i.e., $.getJSON method.
The first parameter is the file to be parsed, second parameter is the callback function.
Inside the callback function, we loop through the array elements and fetch the values using
its key names, and finally append it to the unordered list of bargraph.html

9. Bar Graph - Statistics on Parts CreatedBy

10. Bar Graph - Statistics on Parts Approved By

11. Bar Graph - Statistics on Parts Status

12. Table with Search and Sort using AngularJS and
PHP
By filtering MYSQL data records while fetching data using Angularjs and PHP
Create a textbox for search value where define ng-model='searchText' and ng-keyup='fetchEmployees()' directives. The
model is used to read value and call fetchEmployees() method when keyup event triggered.
If $sortColumn has true value then set $sortBy = "desc" otherwise $sortBy = "asc".
If $search is not empty then use $search value to search on the Status, Mat_Category, Part_no, CreatedBy,
Approve/Reject By
Send $http service request to fetch records where pass search value, sort column, and sort order values as data.
If you are displaying static records using JSON on the page then you can directly use filter where pass the search
expression and does not need to define ng-key directive.

13. Implementing Search and Sort filters Using
AngularJs

14. Sorting - Mat_Category Field

15. Searching by Status Field

16. Website - Description
Responsive Website for SwissRanks Automotive industry.
Navbar navigation links build on our .nav options with their own modifier class and require the
use of toggler classes for proper responsive styling.
Home, Services, Analysis, Contact Us, Search
HOME : Introduction about the Company, Top supported industries(SemiConductor,
Telecommunications, Automotive), Need and deploy engineering services for product releases.
SERVICES : Displays the price list for the services provided by the company. Client can
select their preferred service from the following list.

17. ANALYSIS : Analytic chart - Dashboard for Parts Created. With Animated features consisting
of 4 cards. Displaying links for Piechart & Bar Chart for statistics for part Status, CreatedBy,
Approve/Reject By in forms of image.
OUR CLIENTS : Swiss Ranks Automotive Industry insures many of the world’s most important car
services. They understand that beyond an investment, a collector car is a highly personal possession that
embodies your many dreams brought to life.
CONTACT US : Displays company’s Location, Contact No, Email Address.

18. Website - Home

20. Services

21. Analysis

22. Clients & Contact Us