Remonter des boutons avec une page web a la droite

**Darkoos0410** · 01/06/2021, 19h18

Bonjour,

Est-il possible de remonter les boutons en HTML pour ne pas perdre place et pour le desing

Nom : 4.png
Affichages : 139
Taille : 140,8 Ko

Voici le head de ma page ou il y a la maps:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<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="" />
        <style>
            #map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
                height:400px;
                width: 400px;
                left: 900px;
            }
        </style>
        <title>Carte</title>
    </head>

Merci d'avance pour votre aide

Baptiste

**NoSmoking** · 02/06/2021, 08h08

Bonjour,

Est-il possible de remonter les boutons en HTML pour ne pas perdre place et pour le desing

sans aucun doute mais avec le non code HTML et CSS que tu fournis cela va être difficile de t'aider

**Darkoos0410** · 02/06/2021, 08h33

Ok je vais te mettre mon code:

Voici liste_capteurs.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
203
204
205
206
207
208
209
210
211
212
213
214
215
<?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>
 
	<html>
    <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="" />
        <style>
            #map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
                height:400px;
                                width: 550px;
                                left: 750px;
            }
        </style>
        <title>Carte</title>
    </head>
    <body>
	<?php
        ?>
        <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>
</html>
 
 <?php
                if (isset($_REQUEST['valider']))
                {
                $nbBoitierChaine = substr ($_REQUEST['Capteur'] ,8);
                
                $nbBoitier = intval($nbBoitierChaine);
                }
?>
 
 
		<form name="connexion" method="post">
		 </br>
		 </br>
		 <b style='color: <?php echo $color; ?>;'>Choisir un capteur</b>
		 <select name="Capteur" class="class" >
		 <?php
                        //echo $nbBoitier;
                        for ($i=1;$i<30;$i++)
                        {
                                
                                if ($i==$nbBoitier) echo "<option selected>capteur ".$i."</option>";
                                else echo "<option>capteur ".$i."</option>";
                                
                        }
                 ?>
		 </select>
		 </br>
 
		  </br><input type="submit" class="box-button" class="class" id="form" name="valider" value="OK"/></br>
          </br><input type="submit" class="box-button" id="form" name="annuler" value="ANNULER"/></br>
		  </br><input type="button" class="box-button" id="form" onclick="window.location.href = 'http://localhost/air_exterieur/insert.php';" name="creer" value="CREER CAPTEUR"/></br>
		  </br><input type="button" class="box-button" id="form" onclick="window.location.href = 'http://localhost/air_exterieur/edit.php';" name="modifier" value="MODIFIER CAPTEUR"/></br>
		  </br><input type="button" class="box-button" id="form" onclick="window.location.href = 'http://localhost/air_exterieur/delete.php';"name="supprimer" value="SUPPRIMER CAPTEUR"/></br>
		 </br>
		 </br>
        </form>
 
 
 
 
 
        <?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>

et voici mon style.css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
body {
  background: #1c242d;
}
.box {
  border: 1px solid #c4c4c4;
  padding: 30px 25px 10px 25px;
  background: white;
  margin: 30px auto;
  width: 360px;
}
h1.box-logo a {
  text-decoration:none;
}
h1.box-title {
  color: #AEAEAE;
  background: #f8f8f8;
  font-weight: 300;
  padding: 15px 25px;
  line-height: 30px;
  font-size: 25px;
  text-align:center;
  margin: -27px -26px 26px;
}
#form {
border-radius: 5px;
  background: #d2483c;
  text-align: center;
  cursor: pointer;
  font-size: 19px;
  width: 360px;
  height: 51px;
  padding: 0;
  color: #fff;
  border: 0;
  outline:0;
}
.box-button {
  border-radius: 5px;
  background: #d2483c;
  text-align: center;
  cursor: pointer;
  font-size: 19px;
  width: 100%;
  height: 51px;
  padding: 0;
  color: #fff;
  border: 0;
  outline:0;
}
.box-register
{
  text-align:center;
  margin-bottom:0px;
}
.box-register a
{
  text-decoration:none;
  font-size:12px;
  color:#666;
}
.box-input {
  font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 25px;
  padding-left:10px;
  border-radius: 5px;
  width: 347px;
  height: 50px;
}
#capteurs{
   font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 25px;
  padding-left:10px;
  border-radius: 5px;
  width: 347px;
  height: 50px;
}
.box-input:focus {
    outline: none;
    border-color:#5c7186;
}
.sucess{
	text-align: center;
	color: white;
}
.sucess a {
	text-decoration: none;
	color: #58aef7;
}
.error{
	text-align: center;
	color: white;
}
p.errorMessage {
    background-color: #e66262;
    border: #AA4502 1px solid;
    padding: 5px 10px;
    color: #FFFFFF;
    border-radius: 3px;
}
table2{
color : white;
}

Merci pour votre head

**NoSmoking** · 02/06/2021, 10h10

Excuse ma franchise mais ton code n'est pas loin d'être n'importe quoi ^(*)

Si l'on ne s'attache qu'à la partie HTML et en voulant avoir le rendu que tu nous à fournis ta construction devrait ressembler à

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class = "conteneur">
  <div class = "conteneur-formulaire">
    <form name="connexion" method="post">
      <!-- le code -->
    </form>
  </div>
  <div class = "conteneur-carte">
    <div id="map">
    </div>
  </div>
</div>

et le CSS pour positionnement, c'est un exemple bien sûr :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.conteneur {
  display: flex;
}
.conteneur-formulaire {
  flex: 1 0 auto;
}
#map {
  height: 400px;
  width: 550px;
}

(*) Regarde le code HTML généré, Ctrl + U et/ou passe ton code au validateur pour bien te rendre compte des choses.

Merci pour votre head

pas de souci tant que tu ne me demandes pas mon body

**Darkoos0410** · 02/06/2021, 10h13

Oui j'ai remarqué que le code css et en bordélique, c'est pour ça que j'en et refais un autre. Je sais pas si vous connaissez mais j'ai trouver cet fonction là display: inline-block;.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
body {
  background: #1c242d;
}
 
.box {
  border: 1px solid #c4c4c4;
  padding: 30px 25px 10px 25px;
  background: white;
  margin: 30px auto;
  width: 360px;
}
 
h1.box-logo a {
  text-decoration:none;
}
 
h1.box-title {
  color: #AEAEAE;
  background: #f8f8f8;
  font-weight: 300;
  padding: 15px 25px;
  line-height: 30px;
  font-size: 25px;
  text-align:center;
  margin: -27px -26px 26px;
}
 
.box-button {
  border-radius: 5px;
  background: #d2483c;
  text-align: center;
  cursor: pointer;
  font-size: 19px;
  width: 100%;
  height: 51px;
  padding: 0;
  color: #fff;
  border: 0;
  outline:0;
}
 
.global{
  width:100%;
}
.droite, .gauche {
    display: inline-block;
    vertical-align: top;
}
.gauche {
    width:60%;   
    border-radius: 5px;
    background: #d2483c;
    text-align: center;
    cursor: pointer;
    font-size: 19px;
    width: 360px;
    height: 51px;
    padding: 0;
    color: #fff;
    border: 0;
    outline:0;
}
 
.droite {
    width: 40%;
}
 
 
.box-register
{
  text-align:center;
  margin-bottom:0px;
}
 
.box-register a
{
  text-decoration:none;
  font-size:12px;
  color:#666;
}
 
.box-input {
  font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 25px;
  padding-left:10px;
  border-radius: 5px;
  width: 347px;
  height: 50px;
}
 
#capteurs{
   font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 25px;
  padding-left:10px;
  border-radius: 5px;
  width: 347px;
  height: 50px;
}
 
.box-input:focus {
    outline: none;
    border-color:#5c7186;
}
 
.sucess{
	text-align: center;
	color: white;
}
 
.sucess a {
	text-decoration: none;
	color: #58aef7;
}
 
.error{
	text-align: center;
	color: white;
}
 
p.errorMessage {
    background-color: #e66262;
    border: #AA4502 1px solid;
    padding: 5px 10px;
    color: #FFFFFF;
    border-radius: 3px;
}
 
table2{
color : white;
}

et bien sur le code html qui va avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<?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>
 
	<html>
    <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="" />
        <style>
            #map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
                height:400px;
                                width: 550px;
                                left: 750px;
                                display: inline-block;
            }
        </style>
        <title>Carte</title>
    </head>
    <body>
	<?php
        ?>
        <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>
</html>
 
 <?php
                if (isset($_REQUEST['valider']))
                {
                $nbBoitierChaine = substr ($_REQUEST['Capteur'] ,8);
                
                $nbBoitier = intval($nbBoitierChaine);
                }
?>
 
 
		<form name="connexion" method="post">
		 </br>
		 </br>
		 <b style='color: <?php echo $color; ?>;'>Choisir un capteur</b>
		 <select name="Capteur" class="class" >
		 <?php
                        //echo $nbBoitier;
                        for ($i=1;$i<30;$i++)
                        {
                                
                                if ($i==$nbBoitier) echo "<option selected>capteur ".$i."</option>";
                                else echo "<option>capteur ".$i."</option>";
                                
                        }
                 ?>
		 </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>
 
 
 
 
 
        <?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>

**Darkoos0410** · 02/06/2021, 11h30

Ducou après qu'elle que recherche et test j'ai réussi a faire ce que je voualais.
voici le résultat. Après les pointeurs sur la carte ne marche pas mais ça c'est une autre histoire.

Nom : 1.png
Affichages : 98
Taille : 186,0 Ko

Nom : 1.png
Affichages : 98
Taille : 186,0 Ko

Merci pour les conseilles

Baptiste

**ProgElecT** · 02/06/2021, 11h38

Salut

Le code que tu mets n'ai pas le code HTML résultant du code PHP.

Pour avoir le code HTML résultant, tu lances ton code PHP (le code fournit ci-dessus (s'il arrive a sortir une page, j'en doute)),
si oui, tu fais un Ctrl U, un nouvel onglet apparait contenant le code HTML résultant,
c'est celui-ci qui te fera comprendre les erreurs de syntaxes et autres te ton code PHP.

**Darkoos0410** · 02/06/2021, 11h40

ha non pas du tout

le voici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
		 <b style='color: <?php echo $color; ?>;'>Choisir un capteur</b>
		 <select name="Capteur" class="class" >
		 <?php
                        for ($i=1;$i<30;$i++)
                        {
                                
                                if ($i==$nbBoitier) echo "<option selected>capteur ".$i."</option>";
                                else echo "<option>capteur ".$i."</option>";
                                
                        }
                 ?>
		 </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>

et mon style.css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
body {
  background: #1c242d;
}
 
.box {
  border: 1px solid #c4c4c4;
  padding: 30px 25px 10px 25px;
  background: white;
  margin: 30px auto;
  width: 360px;
}
 
h1.box-logo a {
  text-decoration:none;
}
 
h1.box-title {
  color: #AEAEAE;
  background: #f8f8f8;
  font-weight: 300;
  padding: 15px 25px;
  line-height: 30px;
  font-size: 25px;
  text-align:center;
  margin: -27px -26px 26px;
}
 
.box-button {
  border-radius: 5px;
  background: #d2483c;
  text-align: center;
  cursor: pointer;
  font-size: 19px;
  width: 100%;
  height: 51px;
  padding: 0;
  color: #fff;
  border: 0;
  outline:0;
}
 
.global{
  width:100%;
}
.droite, .gauche {
    display: inline-block;
    verticale-align: top;
}
.gauche { 
    border-radius: 5px;
    background: #d2483c;
    text-align: center;
    cursor: pointer;
    font-size: 19px;
    width: 360px;
    height: 51px;
    padding: 0;
    color: #fff;
    border: 0;
    outline:0;
}
 
.droite {
    width: 40%;
}
 
#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
  height: 400px;
  width: 600px;
  left: 320px;
  display:inline-block;
  vertical-align:left;
}
 
.monform{
  display:inline-block;
  vertical-align:top;
  margin-right:20px;
}
 
.box-register
{
  text-align:center;
  margin-bottom:0px;
}
 
.box-register a
{
  text-decoration:none;
  font-size:12px;
  color:#666;
}
 
.box-input {
  font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 25px;
  padding-left:10px;
  border-radius: 5px;
  width: 347px;
  height: 50px;
}
 
#capteurs{
   font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 25px;
  padding-left:10px;
  border-radius: 5px;
  width: 347px;
  height: 50px;
}
 
.box-input:focus {
    outline: none;
    border-color:#5c7186;
}
 
.sucess{
	text-align: center;
	color: white;
}
 
.sucess a {
	text-decoration: none;
	color: #58aef7;
}
 
.error{
	text-align: center;
	color: white;
}
 
p.errorMessage {
    background-color: #e66262;
    border: #AA4502 1px solid;
    padding: 5px 10px;
    color: #FFFFFF;
    border-radius: 3px;
}
 
table2{
color : white;
}

Baptiste

**ProgElecT** · 02/06/2021, 16h42

Re

Contant que ton problème soit résolut.
Étant toujours en apprentissage (pour le plaisir), pour moi, j'avais crue comprendre qu'un code PHP générant une page HTML, le code résultant ne contenait aucune commande PHP.
Ceci ne devant pas apparaitre (<?php echo 'Mais je peu me tromper' ?> il ne reste que Mais je peu me tromper dans le HTLM généré.

**Darkoos0410** · 02/06/2021, 16h44

oui c'est bien cela tu as tout compris

**NoSmoking** · 02/06/2021, 18h50

Envoyé par ProgElecT

Ceci ne devant pas apparaitre (<?php echo 'Mais je peu me tromper' ?> il ne reste que Mais je peu me tromper dans le HTLM généré.

Comme tu as raison et tu ne te trompe pas

Envoyé par ProgElecT

Étant toujours en apprentissage (pour le plaisir)

ce n'est donc de ce genre de code qu'il faut s'inspirer, tant du point de vue PHP, tout est mélangé, que HTML, plusieurs balises <html>, <head>, <body> imbriquées ... voire JavaScript, echo "fct"; qui ne sert à rien mais qui génére une erreur

.

Remonter des boutons avec une page web a la droite

HTML

Discussions similaires

Partager

Partager