Skip to content

Sensor Group Project as part of the BTS 2nd year training course (Native)

License

Notifications You must be signed in to change notification settings

Tracks12/BTS-ACMP-MVC

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pollution sensor mapping

BTS training project, a map displaying telemetry data from the LoraWan pollution sensor network provided by Tetaneutral.

This is a redesign of BTS-ACMP-Captor-Interface.


Clone the repository

Windows Users

Linux Users

  • Type sudo apt install git on your terminal

After Git installation type git clone https://github.com/Tracks12/BTS-ACMP-MVC.git to clone the repository.

Database connection

After cloning the repository you need to create the database connection file in the /core directory which will be called connect.php with inside:

class bdd {
	/**
	 * disconnect to the database
	 * @return void
	 */
	public static function disconnect(): void {
		self::$bdd['db'] = NULL;
		return;
	}

	/**
	 * connect to the database
	 * @return object[PDO] database object
	 */
	public static function connect(): PDO {
		try {
			self::$bdd['db'] = new PDO(
				'mysql:host='.self::$bdd['host'].'; dbname='.self::$bdd['name'].'; charset='.self::$bdd['char'],
				self::$bdd['user'],
				self::$bdd['pass'],
				[ PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING ]
			);
		}

		catch(Exception $e) {
			die("[Err]:[{$e->getmessage()}]");
		}

		return self::$bdd['db'];
	}

	// Data Base auth fields
	private static $bdd = [
		"db"   => NULL,
		"host" => "...",
		"name" => "...",
		"char" => "utf8",
		"user" => "...",
		"pass" => "..."
	];
}

Don't forget to import the capteur.sql file into your database !


Dependencies

Front (Styles & Scripts)

Librairies / API's version
Here Map /
HighCharts 8.0.4
JQuery 3.4.1
Font Awesome 4.7.0

Fonts


MVC Resources

Source files in /core/

  • controllers resources: /core/controllers/
  • models resources: /core/models/
  • views resources: /core/views/

Routing

  • HTTP Request: /core/HTTPRoute.php
  • XHR Request: /core/XHRRoute.php

Modules Annexes

  • Data Base connexion: /core/connect.php
  • Injection Verification & Protection: /core/services.php

Views Resources

Telemetry

  • Real-time data: /core/views/telemetry/instant.html, retrieves the last data from a desired sensor and displays it at a gauge in js
  • Story data: /core/views/telemetry/story.html, displays graphs of pollution sensor data (Ozones, CO2, Fine Particles)

Map

  • Sensor map: /core/views/map.html, displays the pollution sensors on a Here map

Administration

  • Captors manager: /core/views/admin/captors.html, displays and manages the sensors inserted in the database
  • Users manager: /core/views/admin/users.html, displays and manages user profiles in the database

Routing

To add a new route you have to go to the /core directory, from there you will have access to the HTTP and XHR route (HTTPRoute.php & XHRRoute.php).

HTTP Route /core/HTTPRoute.php

A variable $page is used to choose the resource to display, by default, it has the value index.php to display the index

Add the redirection by putting the uri prefix in the case '/example': box, then change the $page variable to display the desired resource (you can also do a redirection with a header()).

Don't forget to put http_response_code(200) to confirm the request, otherwise there will be a 404 error instead.

// Default page to show
$page = 'index.php';

switch(services::isInput($_SERVER['REQUEST_URI'])) {
	/**
	 * Redirect URI
	 */

	case "/node-red": // Node Red UI Link
		header("location: http://{$_SERVER['HTTP_HOST']}:1880/");
		break;
	// ...

	case "/map": // About Page
		http_response_code(200);
		$page = 'map.php';
		break;

	case "/telemetry": // About Page
		http_response_code(200);
		$page = 'telemetry/telemetry.php';
		break;
	// ...
}

After that the resource requisition is done in a second switch.

switch(http_response_code()) {
	case 200:
		require_once("./core/views/{$page}");
		break;

	case 403:
	case 404:
		require_once('./core/views/error.php');
		break;

	default:
		die();
		break;
}

The display of the page will be done on the front side by the XHR call thanks to the .load() function of JQuery in the /scripts/main.js using a dynamic uri

<a href="#ressource-example">Ressource Example</a>
$(document).ready(() => {
	let uri = window.location.hash.split('#')[1];
	uri = !uri ? 'map' : uri;
	$('section').load(`/${uri}`);
})

XHR Route /core/XHRRoute.php

Same procedure as for HTTP, except that instead of putting resources, we call the controller directly.

switch(services::isInput($_SERVER['REQUEST_URI'])) {
	case '/?ping':
		$return = [ "response" => "pong" ];
		break;

	default:
		http_response_code(404);
		$return = [ "code" => 404, "error" => "NOT FOUND !" ];
		break;
}

And the query response appears in JSON format.

switch(http_response_code()) {
	case 200:
		echo(json_encode($return));
		break;

	default:
		echo(json_encode($return));
		die();
		break;
}

And here is the XHR request to place on the front side in /scripts/xhr.js to retrieve the information to exploit them

class xhr {
	/**
	 * ping the back side
	 */
	static ping() {
		return $.ajax({
			async: false,
			type: 'post',
			url: '/?ping',
			dataType: 'json',
		}).responseJSON.response;
	}
}

And call the request like this: xhr.ping();.


To do list

  • @Laurent-Andrieu in charge to establish the connection to the LoRaWan network

    • Creating the LoRaWan profile
    • Creation of the flow node red
    • LoRaWan connection to the Node Red server
    • Insertion of data in the database
    • Creation of the node red UI
  • @Tracks12 in charge of setting up the web architecture and editing the cartography

    • Implementation of the MVC architecture
    • Integration of front-end dependencies
    • Controllers, Models, Routes & Views creations (Map, Instant, Story)
    • XHR query creation
    • Editing the style sheet design
    • Display of sensor positions on a map
    • User Profile
    • Captor management
    • User management
  • @MENEGHE in charge of installing and configuring the web server as well as managing access ports

    • Fedora Server system installation
    • Apache, MySQL, Php & PhpMyAdmin (LAMPP) installation
    • Ports configuration
    • Display historical curves
  • @Flopicx in charge of installing and creating the database

    • Database building
    • Edits of sql procedures
    • Integration of ROT13 function
    • Display instant data gauge

Last Update

May 28, 2020

  • Add Logger Requests
  • Input XHR Request for views
  • transforms all views on html content

May 4, 2020

  • Update Map
  • Update Graph
  • Add New Models
  • Add New Controllers
  • Dynamic Nav Bar
  • Script fixed
  • Add Doc
  • MVC Design