config_actions
{
"GET/": {
"controler": "getView",
"view": "login",
"title": "Authentification"
},
"GET/index": {
"controler": "getView",
"view": "index",
"title": "Bienvenue dans le framework Node/Express R504",
"path_minismall": "/home/supervisor/Documents/MiniSmall"
},
"GET/logout": {
"controler": "logout",
"view": "login",
"title": "Bienvenue dans le framework Node/Express"
},
"GET/usersmg": {
"controler": "nosql/populate",
"modelName": "Users",
"view": "usersCountry",
"pop_ref": "country"
},
"GET/exosmg": {
"controler": "nosql/finder",
"modelName": "Exercices",
"view": "exos"
},
"GET/exosJSONmg": {
"controler": "nosql/finder",
"modelName": "Exercices",
"view": "exos",
"return_type": "application/json"
},
"GET/countriesmg": {
"controler": "nosql/finder",
"modelName": "Countries",
"view": "countries"
},
"GET/countriesJSONmg": {
"controler": "nosql/finder",
"modelName": "Countries",
"view": "countries",
"return_type": "application/json"
},
"GET/formUsermg": {
"controler": "nosql/findByIdWithList",
"modelName": "Users",
"modelList": "Countries",
"view": "formUser",
"form_action": "/modifyUser"
},
"POST/modifyUsermg": {
"controler": "nosql/updateById",
"modelName": "Users",
"view": "modifyUser"
},
"GET/newUsermg": {
"controler": "nosql/finder",
"modelName": "Users",
"modelList": "Countries",
"view": "formUser",
"libelle": "creation"
},
"POST/createUsermg": {
"controler": "nosql/insertOne",
"modelName": "Users",
"view": "users"
},
"GET/deleteUsermg": {
"controler": "nosql/deleteById",
"modelName": "Users",
"view": "users"
},
"GET/users": {
"controler": "sql/selectSQL",
"sql_query": "SELECT * FROM users",
"view": "Users/users",
"title": "Liste des utilisateurs"
},
"GET/newUser": {
"controler": "sql/selectListSchemas",
"sql_list": [
"SELECT * FROM countries"
],
"tables_list": [
"countries"
],
"view": "Users/formUser",
"form_action": "/createUser",
"del_label": "Utilisateur",
"libelle": "Création",
"title": "Ajouter un Utilisateur à l'application :"
},
"POST/createUser": {
"controler": "sql/insertSQL",
"sql_query": "INSERT INTO users (name, firstName, login, mdp, function, office, date_naiss, addresse1, addresse2, cp, city, code_countries, mobile_phone, home_phone) VALUES( ?,?,?,?,?,?,?,?,?,?,?,?,?,?)",
"params_query": [
"name",
"firstName",
"login",
"mdp",
"function",
"office",
"date_naiss",
"addresse1",
"addresse2",
"cp",
"city",
"code_countries",
"mobile_phone",
"home_phone"
],
"redirect": "/users"
},
"GET/formUser": {
"controler": "sql/selectByIdAndListSchemas",
"sql_query": "SELECT * FROM users WHERE id_users=?",
"sql_list": [
"SELECT * FROM countries"
],
"tables_list": [
"countries"
],
"view": "Users/formUser",
"form_action": "/modifyUser",
"del_label": "Utilisateur",
"libelle": "Modification",
"title": "Modifier un Utilisateur de l'application :"
},
"POST/modifyUser": {
"controler": "sql/updateSQL",
"sql_query": "UPDATE users SET name=?, firstName=?, login=?, mdp=?, function=?, office=?, date_naiss=?, addresse1=?, addresse2=?, cp=?, city=?, code_countries=?, mobile_phone=?, home_phone=? WHERE id_users=?",
"params_query": [
"name",
"firstName",
"login",
"mdp",
"function",
"office",
"date_naiss",
"addresse1",
"addresse2",
"cp",
"city",
"code_countries",
"mobile_phone",
"home_phone"
],
"redirect": "/users"
},
"GET/tab_users": {
"controler": "sql/selectSQL",
"sql_query": "SELECT * FROM users",
"view": "Users/tabusers"
},
"GET/deleteUser": {
"controler": "sql/deleteSQLById",
"sql_query": "DELETE FROM users WHERE id_users=?",
"redirect": "/users"
},
"GET/jsonCountries": {
"controler": "sql/selectSQL",
"sql_query": "SELECT * FROM countries",
"view": "Countries/tabcountries.hbs",
"return_type": "application/json"
},
"GET/atomes": {
"controler": "sql/selectSQL",
"sql_query": "SELECT id, nom, symbole, numero, electron, masse_volumique, masse_atomique, is_radioactif FROM atome",
"view": "Atomes/liste_atomes",
"title": "Liste des atomes"
},
"GET/newAtome": {
"controler": "sql/selectSQL",
"sql_query": "SELECT * FROM atome LIMIT 0",
"view": "Atomes/formAtome",
"form_action": "/createAtome",
"libelle": "Création",
"title": "Créer un nouvel atome"
},
"POST/createAtome": {
"controler": "sql/insertSQL",
"sql_query": "INSERT INTO atome (nom, symbole, numero, electron, masse_volumique, masse_atomique, is_radioactif) VALUES (?, ?, ?, ?, ?, ?, ?)",
"params_query": [
"nom",
"symbole",
"numero",
"electron",
"masse_volumique",
"masse_atomique",
"is_radioactif"
],
"redirect": "/atomes"
},
"GET/formAtome": {
"controler": "sql/selectSQL",
"sql_query": "SELECT id, nom, symbole, numero, electron, masse_volumique, masse_atomique, is_radioactif FROM atome WHERE id=?",
"view": "Atomes/formAtome",
"form_action": "/modifyAtome",
"del_label": "Atome",
"libelle": "Modification",
"title": "Modifier un atome"
},
"POST/modifyAtome": {
"controler": "sql/updateSQL",
"sql_query": "UPDATE atome SET nom=?, symbole=?, numero=?, electron=?, masse_volumique=?, masse_atomique=?, is_radioactif=? WHERE id=?",
"params_query": [
"nom",
"symbole",
"numero",
"electron",
"masse_volumique",
"masse_atomique",
"is_radioactif"
],
"redirect": "/atomes"
},
"GET/deleteAtome": {
"controler": "sql/deleteSQLById",
"sql_query": "DELETE FROM atome WHERE id=?",
"redirect": "/atomes"
},
"GET/tabAtomes": {
"controler": "sql/selectSQL",
"sql_query": "SELECT id, nom, symbole, numero, electron, masse_volumique, masse_atomique, is_radioactif FROM atome",
"view": "Atomes/tabAtome",
"title": "Tableau des atomes"
},
"GET/jsonAtome": {
"controler": "sql/selectSQL",
"sql_query": "SELECT * FROM atome",
"view": "Atomes/liste_atomes",
"return_type": "application/json"
}
}
nav
<ul>
<li><a href="/index">Accueil</a></li>
<li><a href="/users">Users</a></li>
<li><a href="/tab_users">Tableau Users</a></li>
<li><a href="/atomes">Atomes</a></li>
<li><a href="/tabAtomes">Tableau Atomes</a></li>
<li><a href="/jsonAtome">JSON Atomes</a></li>
<!--li><a href="/tab_countries">Tableau Countries</a></li>
<li><a href="/tab_communes">Tableau Communes</a></li>
<li><a href="/formations">Liste des formations</a></li>
<li><a href="/tabFormations">Tableau Formations</a></li>
<li><a href="/formateurs">Liste des formateurs</a></li>
<li><a href="/tabFormateurs">Tableau Formateurs</a></li>
<li><a href="/logout">Déconnexion</a></li-->
</ul>
formAtome.hbs
<div class="center">
<h1>{{title}}</h1> <form action="{{form_action}}" method="post">
<div class="inputbox">
<input type="text" name="nom" value="{{data.nom}}" required>
<span>Nom de l'atome</span>
</div>
<div class="inputbox">
<input type="text" name="symbole" value="{{data.symbole}}" required>
<span>Symbole</span>
</div>
<div class="inputbox">
<input type="number" name="numero" value="{{data.numero}}">
<span>Numéro Atomique</span>
</div>
<div class="inputbox">
<input type="text" name="electron" value="{{data.electron}}" required>
<span>Configuration Électronique</span>
</div>
<div class="inputbox">
<input type="text" name="masse_volumique" value="{{data.masse_volumique}}" required>
<span>Masse Volumique</span>
</div>
<div class="inputbox">
<input type="text" name="masse_atomique" value="{{data.masse_atomique}}" required>
<span>Masse Atomique</span>
</div>
<div class="inputbox">
<label style="color:#FFF; font-size:0.8em;">Est Radioactif ?</label>
<select name="is_radioactif" style="width:100%; margin-top:5px;">
<option value="0" {{#compare data.is_radioactif 0 operator="=="}}selected{{/compare}}>Non</option>
<option value="1" {{#compare data.is_radioactif 1 operator="=="}}selected{{/compare}}>Oui</option>
</select>
</div>
<div class="inputbox">
<input type="submit" value="Confirmer la {{libelle}}">
</div>
</form>
{{#if data.id}}
<div class="inputbox">
<button onclick="window.location='/deleteAtome/{{data.id}}'" style="background-color: #ff4444;">
Supprimer cet atome
</button>
</div>
{{/if}}
</div>
<script>
// Si on est en modification, on ajoute l'ID à l'action du formulaire
{{#if data.id}}
document.forms[0].action = "{{form_action}}/{{data.id}}";
{{/if}}
</script>
liste_atomes.hbs
<div class="center">
<h1>{{title}}</h1>
<div class="inputbox">
<select name="atomes" id="atomeSelect">
{{#compare data null operator="=="}}
<option value="rien">Il n'y a pas de données dans la base</option>
{{else}}
<option value="0">Sélectionner un atome pour modifier</option>
{{#each data}}
<option value="{{this.id}}">{{this.nom}} ({{this.symbole}})</option>
{{/each}}
{{/compare}}
</select>
</div>
<h2>ou</h2>
<div class="inputbox">
<button id="btnNewAtome">Créer un nouvel Atome</button>
</div>
</div>
<script>
// Gestion de la sélection pour modification
var selectElement = document.getElementById('atomeSelect');
selectElement.addEventListener('change', function (evt) {
if(selectElement.value != 0 && selectElement.value != "rien") {
// Redirige vers l'action GET/formAtome avec l'ID
window.location = "/formAtome/" + selectElement.value;
}
});
// Gestion du bouton de création
var btnNew = document.getElementById('btnNewAtome');
btnNew.addEventListener('click', function (evt) {
window.location = "/newAtome";
});
</script>
tabAtomes.hbs
<div class="inputbox">
<table id="tabAtomes" class="display" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>nom</th>
<th>symbole</th>
<th>numero</th>
<th>electron</th>
<th>masse_volumique</th>
<th>masse_atomique</th>
<th>is_radioactif</th>
</tr>
</thead>
<tbody>
{{#each data}}
<tr>
<td>{{this.id}}</td>
<td>{{this.nom}}</td>
<td>{{this.symbole}}</td>
<td>{{this.numero}}</td>
<td>{{this.electron}}</td>
<td>{{this.masse_volumique}}</td>
<td>{{this.masse_atomique}}</td>
<td>{{this.is_radioactif}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#tabAtomes');
});
</script>
architecture des fichiers
Lancer le serveur node avec :