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.
- Download & Install Git Bash
- Type
sudo apt install giton your terminal
After Git installation type git clone https://github.com/Tracks12/BTS-ACMP-MVC.git to clone the repository.
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 !
| Librairies / API's | version |
|---|---|
| Here Map | / |
| HighCharts | 8.0.4 |
| JQuery | 3.4.1 |
| Font Awesome | 4.7.0 |
- controllers resources:
/core/controllers/ - models resources:
/core/models/ - views resources:
/core/views/
- HTTP Request:
/core/HTTPRoute.php - XHR Request:
/core/XHRRoute.php
- Data Base connexion:
/core/connect.php - Injection Verification & Protection:
/core/services.php
- 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)
- Sensor map:
/core/views/map.html, displays the pollution sensors on a Here map
- 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
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).
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}`);
})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();.
-
@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
- Add Logger Requests
- Input XHR Request for views
- transforms all views on html content
- Update Map
- Update Graph
- Add New Models
- Add New Controllers
- Dynamic Nav Bar
- Script fixed
- Add Doc
- MVC Design
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent