1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
| <?php
// Initialiser la session
session_start();
// Vérifiez si l'utilisateur est connecté, sinon redirigez-le vers la page de connexion
if(!isset($_SESSION["username"])){
header("Location: login.php");
exit();
}
$color = 'white';
?>
<html>
<head>
<link href="style.css" rel="stylesheet" media="all"/>
<script>
function coordonnee(id)
{ echo "fct";
if (id == "")
{
echo "Echec : pas d'identifiant";
return;
}
else
{
var xmlhttp = new XMLHttpRequest();//Requete AJAX
xmlhttp.onreadystatechange = function()
{
echo "Requete AJAX OK";
}
}
xmlhttp.open("POST","getcoord.php?c="+id,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div class="sucess">
<h1>Bienvenue <?php echo $_SESSION['username']; ?>!</h1>
<p>C'est votre espace utilisateur.</p>
<a href="logout.php">Déconnexion</a>
</div>
<b style='color: <?php echo $color; ?>;'><h1>Liste des capteurs :</h1></b>
<head>
<meta charset="utf-8">
<!-- Nous chargeons les fichiers CDN de Leaflet. Le CSS AVANT le JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<title>Carte</title>
</head>
<body>
<?php
if (isset($_REQUEST['valider']))
{
$nbBoitierChaine = substr ($_REQUEST['Capteur'] ,8);
$nbBoitier = intval($nbBoitierChaine);
}
?>
<form class="monform" name="connexion" method="post">
</br>
</br>
<select name="Capteur" class="class" >
<?php
for ($i=1;$i<30;$i++)
{
?>
<option value="">Veuillez choisir un Capteur </option>
<option value="$i> <?php echo $i ?>" </option>
<?php
}
?>
</select>
</br>
</br><input type="submit" class="gauche " name="valider" value="OK"/></br>
</br><input type="submit" class="gauche" name="annuler" value="ANNULER"/></br>
</br><input type="button" class="gauche" onclick="window.location.href = 'http://localhost/air_exterieur/insert.php';" name="creer" value="CREER CAPTEUR"/></br>
</br><input type="button" class="gauche" onclick="window.location.href = 'http://localhost/air_exterieur/edit.php';" name="modifier" value="MODIFIER CAPTEUR"/></br>
</br><input type="button" class="gauche" onclick="window.location.href = 'http://localhost/air_exterieur/delete.php';"name="supprimer" value="SUPPRIMER CAPTEUR"/></br>
</br>
</br>
</form>
<div id="map">
<!-- Ici s'affichera la carte -->
</div>
<!-- Fichiers Javascript -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script>
// On initialise la latitude et la longitude de Paris (centre de la carte)
var lat = 48.837579;
var lon = -1.597302;
var macarte = null;
// Fonction d'initialisation de la carte
function initMap()
{
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
macarte = L.map('map').setView([lat, lon], 11);
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
{
// Il est toujours bien de laisser le lien vers la source des données
attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
minZoom: 1,
maxZoom: 20
}).addTo(macarte);
}
window.onload = function()
{
// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
initMap();
};
// Fonction d'initialisation de la carte
function initMap()
{
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
macarte = L.map('map').setView([lat, lon], 11);
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
{
// Il est toujours bien de laisser le lien vers la source des données
attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
minZoom: 1,
maxZoom: 20
}).addTo(macarte);
// Nous ajoutons un marqueur
var marqueur = L.marker([48.837579, -1.597302]).addTo(macarte);
//marqueur.bindPopup("<p>Paris</p>");
}
</script>
</body>
<?php
require('config.php');
if (isset($_REQUEST['valider']))
{
// Appelle fonction js
echo '<script>coordonnee($nbBoitier) </script>';
// On créé la requête
$req = "SELECT * FROM boitier_qae WHERE Num_boitiers=".$nbBoitier." ORDER BY Num_boitiers";
//echo $req;
// on envoie la requête
$res = $conn->query($req);
// on va scanner tous les tuples un par un
echo "<table class='paleBlueRows' border=2 style='color: $color;'>";
echo "<tr>
<th>Numéro Boitier</th>
<th>Date_Heure</th>
<th>Mesure à 1 µm</th>
<th>Mesure à 2,5 µm</th>
<th>Mesure à 10 µm</th>
<th>Description</th>
<th>Lagitude</th>
<th>Longitude</th>
</tr>";
while($data = mysqli_fetch_array($res))
{
// on affiche les résultats sous forme de tableau html
echo "<tr>
<td>".$data['Num_boitiers']."</td>
<td>".$data['Date_Heure']."</td>
<td>".$data['PM1']."</td>
<td>".$data['PM2_5']."</td>
<td>".$data['PM10']."</td>
<td>".$data['Description']."</td>
<td>".$data['Latitude']."</td>
<td>".$data['Longitude']."</td>";
echo "</tr>" ;
}
echo "</table>";
// on ferme la connexion
$conn->close();
}
?>
</body>
</html> |
Faire une liste déroulante en php
Répondre avec citation
Partager