Web and Android App Development

Visualizer
Real time Graphical
Representation & Analysis of Data
1

2 Objective-
To construct a generalised website to display the acquired data in
a real time graphs and analysing it.
Data transmission through the user's device.
Data acquisition on the server side and storing
onto the database server.
Fetching the values from the database server.
Plotting the real-time graph.
Designing the front end of the website.
Designing the back end of the website.

3 Application of this project-
This project is a generalized system for devices which require transmission and analysis of data.
It involves graphical representation which is a simple way for the users to study the data. The
applications of this project are as follows :
• Diet Monitor– This project takes the pulse and breath of the user to determine whether the user
is capable of burning fat or not.
• Agri-bot – Agri-bot has been designed for the inspection of crops in a farm. It measures the
ammonia (NH3) and VOC content in a plant. If the content is above a specific level, that particular
plant is considered to have diseases.
• Breath Analyzer – It is a medical project which uses gas sensors and draws a conclusion as to state
whether the user has specific diseases or not. It sends various sensors values through an IoT device to the
server where they are stored to plot a real-time graph.

4 Modules of the project
To make easier as well as an efficient project, we must divide it into the following subtasks :
 Data acquisition through any transmission device
 Storing this data into a database server.
 Fetching the data from Database Server
 Real time graph construction on a Website.
 Design the front end of website.
 Design the Backend of website.
Analysis of this data from its orignal values.

5 Prerequisites -
The softwares, languages and frameworks used are:
Softwares :-
* Python 2.7.12
* Text Editor (SublimeText, Notepad++)/ IDE (Eclipse)
* Xampp Server/ (Php , MySQL, Apache) servers
* FusionCharts/ ChartJs/ HighChart
* Jquery-3.0.0 (js file)
* ATMega
Languages:-
• Python
• HTML
• PHP
•Ajax
• SQL
• Javascript
• JSON
Note:- we use Python-2.7.12, Sublime text, Xampp Server, FusionCharts, Jquery-3.0.0 in this project.

6 Installation of Python2.7.10
Steps of installing Python are given below :-
• Type www.python.org/download/ on your Web
browser.
• Download python-2.7.12 package from here.

7 Installation of Xampp Server
We use Xampp Server because it includes many framework i.e. Apache, MySQL, FileZilla,
Mercury, Tomcat. So we do not install all these module individually.
Steps of installing Xampp Server are given below :-
• Type http://www.apachefriends.org/en/xampp-windows.html#641
on your Web browser.
• Download Xampp server zipped folder from here.

8 Installation of FusionCharts
FusionCharts gives more efficient graph as compared to Chartjs and Highchart. Steps of
installing Fusioncharts are given below :-
• Type http://www.fusioncharts.com/download/ on your Web browser.
• Fill the Detail (name, mail id) click on the download button.
• Download python-2.7.12 package from here.

9 Installation of Jquery-3.0.0
Steps of installing Jquery-3.0.0 are given below :-
• Type http://jquery.com/download/ on your Web browser.
• Download jquery-3.0.0 zip file from here.

10 Subtask - 1
• Data acquisition through any transmission device.
In this section, a Python Script is to be written on the device side which in this case is a
Raspberry Pi. The script has following important statements:-
Import the request package.
 Write the data into a suitable data structure .
 To send the data GET method of Requests package is used.
 Use the IP address of the server and path of the PHP file on the server and pass them
as parameters in the GET method.

11 Subtask - 2
• Storing the Values into a Database Server –
We create a PHP script for storing the Values coming from the device in which –
• We define our database details and credentials.
• We give the SQL query for insertion into the desired database and table.

12 Subtask - 3
• Fetching the Data from database server.
We create another PHP script for fetching
the Values from database server. First we
define the database which is being used. It is
shown in fig.1
Fig.1
Then we create the connection of
database by creating mysqli object. It is
shown in fig.2
Fig. 2
Now use Select SQL query for fetching the
Values from the database. It is shown in fig.3
Fig. 3

13 Subtask – 3 Continued….
• Fetching the Data from database server.
The required data are push on to an array and this array is used as a parameter when
plotting the graph.
Then close the connection of database.
 It is shown in fig.4
Fig. 4

14 Subtask - 4
• Real time Graph construction on the Web page.
We create a JavaScript file to specify the type, quality, design and other characteristics of
graph. The PHP file which was previously written is also passed in this js file.
We create an HTML file. It is responsible for displaying the result on the webpage.
Here, the graph is plotted on the webpage. The formation of graph has following steps –

15 Subtask – 4 Continued…
• JavaScript Description
We create a javascript file “app.js” in which we pass data.php file to get all the values which
are saved in an array in data.php.
Fig 6

Describe all the properties of chart which we want to put in the final graph.
Fig 7

Pass the object having all the values as a parameter in graph. Call the render function to
render the chart in HTML files.
Fig 8

• HTML Description
Define a rendering space for the chart in the body tag of the HTML file.
Fig 9
Include all the Javascript files/packages (i.e. Fusioncharts, Jquery) which were used earlier.
Include our app.js file also in which the characteristics and values of chart are defined.
Fig 10

19 MVC
The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main
logical components: the model, the view, and the controller. Each of these components are built to handle
specific development aspects of an application. A Model View Controller pattern is made up of the
following three parts:
1. Model: The Model component corresponds to all the data related logic that the user works with. This
can represent either the data that is being transferred between the View and Controller components or
any other business logic related data. The Model is responsible for managing the data of the application.
It responds to the request from the view and it also responds to instructions from the controller to update
itself.
2. View: The View component is used for all the UI logic of the application. For example, the Customer
view would include all the UI components such as text boxes, dropdowns, etc. that the final user
interacts with. It is basically a presentation of data in a particular format, triggered by a controller's
decision to present the data.
3. Controller: Controllers act as an interface between Model and View components to process all the
business logic and incoming requests, manipulate data using the Model component and interact with the
Views to render the final output. The controller is responsible for responding to user input and perform
interactions on the data model objects. The controller receives the input, it validates the input and then
performs the business operation that modifies the state of the data model.

20 Subtask – 5
• Front End -
The next part is the user-interface of the website. It contains two pages –
• First page is called home page of the website in which Login and Register part is present.
• Second page is called dashboard of the website in which all the functionalities of the
website including graph, device overview and logout parts are defined.

The following is the dashboard image whose features are discussed one by one :

Here all the functionalities of the dashboard are shown
with the help of figures -

We design our site on the basis of MVC design as discussed before. So we have three parts
namely Model ,View and Controller. View part is responsible for the front end.
Layout – It is the basic part/feature of our front end of the website. As we know well,
we create two pages (i.e. home page and dashboard) so we need two layouts –
•Login_layout – This layout is for the home page. In this layout all the view parts of
home page are defined.
•Dashboard_layout – This is the layout for the dashboard page. In this layout, the
view part of the dashboard is defined i.e. graph, device overview, profile, logout etc.
which is present on the dashboard.
Static view– It is defined in a folder named static. All the HTML , CSS, and JavaScript
files which remain same in the website are stored in this section. We can directly import these
files in our code.

Partials – Partials sector used to store all other files which are used to make the front-end
user-friendly by adding features like side bar, navigation bar, admin layout class etc.
Bootstrap – Bootstrap is a framework which creates the view part of our website. All the
Bootstrap files (Font, JS, CSS) should be stored in a separate folder.
Images and Theme – All the images used in the website should be stored in one place
to maintain the features of MVC. We use IMG folder to store all the images.
The theme which we used in our website is stored in a theme folder. It contains js, css and
html files. These two folders (IMG and Theme) are stored in Static section as they never undergo
any change.

25 Subtask – 6
The website is designed based on MVC framework. So after making the front end(view) of the
website, Model part is to be focused upon.
MODEL – In model part we make 2 files -
• DBModel.php – To create a model for making the connection of Database and
checking it. In this file we define the database details such as hostname, username,
password, database name and code the function of database connection and return
the result to usermodel.php.
• UserModel.php – To create User login connection after database connection. In
this file, we include DBModel.php and create a function to get the login details of
user. Another function is written to check the credentials and return the value to
Authentication.php which is the controller part of login.
• Back End –

Now comes the Controller part i.e. the final phase of the MVC framework.
Controller – In this part, we create 2 files-
• Authentication.php – To create the controller part of the login/logout of user. In
this file we include UserModel.php file(Model of user login). It checks whether the
user is valid or not and returns this value to the main file Login.php. It also controls
the logout event of the website.
• Back End –
Login.php – Login.php is present outside the model , view and controller part. It is used
for the action happening on the login page i.e. filling text field and clicking on the submit
button. The Authentication.php of the controller section is included in this file.

Web and Android App Development

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to Web and Android App Development

Similar to Web and Android App Development (20)

Web and Android App Development