Site web base de donnée SQL et PHP

Bonjour,

Je vous écris pour solliciter de l'aide concernant un projet universitaire que je réalise. Le projet consiste à créer un site web qui répertorie les termes liés à l'Actuariat, mon domaine d'étude. Mon objectif est d'implémenter une barre de recherche permettant à l'utilisateur de saisir un terme, et d'afficher sa définition en réponse.

J'ai commencé par coder la partie HTML et CSS de mon site, puis j'ai stocké les définitions dans une base de données SQL. Pour relier ma base de données à mon code HTML, j'ai utilisé du PHP. Cependant, je rencontre un problème avec ma barre de recherche. Lorsque je saisis un mot sur mon site, un message d'erreur s'affiche.

Je vous serais très reconnaissant si vous pouviez m'éclairer sur ce problème. Ci-dessous, vous trouverez les codes que j'ai utilisés pour mon projet.

Merci d'avance pour votre aide.

Code HTML:

Code:

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Actuariat </title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="style.css">
  <title>Actuariel Science</title>
  <script src="https://kit.fontawesome.com/bcb717ab97.js" crossorigin="anonymous"></script>
 
</head>
 
<body>
 
  <!-- Barre de navigation-->
  <nav>
 
    <h1>Actuariat <i class="fa-solid fa-chart-line"></i></h1>
 
<div class="onglets">
<P class="link">Assurance </P>
<P class="link">Economie</P>
<P class="link">Finance</P>
 
</div>
 
  </nav>
 
 
 <!-- Header -->
 <header>
    <h1>Le Monde De l'Actuariat	 </h1>
 
 
 
      <form method="get" action="search.php">
        <input type="text" name="search_term" placeholder="Rechercher">
        <button type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
    </form>
 
 
 
<div class="results"></div>
 
</header>
 <!-- Fin du header -->
 
 <!-- Section principale -->
 <section class="main">
    <!-- toutes les cartes -->
    <div class="cards">
        <div class="card">
            <img src="https://www.lassuranceenmouvement.com/wp-content/uploads/2022/07/actuaire.jpg">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkOhGKLautafcRi-t47yzXbnUtPMDHUefaBg&usqp=CAU">
 
     <!-- Pied de page -->
     <footer>
        <p>&copy; Contactez nous au 07 82 51 52 35 </p>
        <div class="social-media">
            <p><i class="fa-brands fa-instagram"></i></p>
            <p><a href="https://www.facebook.com/leanna.zouba.3"><i class="fa-brands fa-facebook"></i></a></p>
            <p><i class="fa-brands fa-snapchat"></i></p>
 
        </div>
 
 
    </footer>
    <!-- Fin du pied de page -->
 
</body>
</html>

Base de donnée (nom du fichier definitions.sql):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE definitions (
    mot VARCHAR(255) NOT NULL PRIMARY KEY,
    definition TEXT NOT NULL
);
 
INSERT INTO definitions (mot, definition)
VALUES ("assurance", "L'assurance est un contrat par lequel une personne s''engage à indemniser une autre personne en cas de réalisation d''un risque, moyennant le paiement d''une prime."),
       ("marchés financier", "marchés sur lesquels se rencontrent les demandes et les offres de capitaux à long terme."),
       ("Bourse", "institution publique ou privée qui va permettre de réaliser des échanges de biens ou d''actifs standardisés et ainsi d''en fixer le prix."),
       ("valeur mobilière", "titre émis et transmissible qui confère des droits identiques par catégorie et donne accès à une quotité du capital de l''émetteur ou à un droit de créance."),
       ("Titrisation", "transformation d’une dette en actif financier."),
       ("obligation", "titres de créance négociable qui pour une même émission, confèrent les mêmes droits de créance pour une même valeur nominale."),
       ("action", "valeur mobilière qui donne accès à une quantité du capital d’une personne morale émettrice.");

Code PHP (nom du fichier:search.php):

Code:

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
<?php
// Récupérer le terme de recherche envoyé par le formulaire
$term = $_GET['search_term'];
 
// Se connecter à la base de données SQL
$servername = "localhost";
$username = "root"; // Nom d'utilisateur de la base de données
$password = ""; // Mot de passe de la base de données
$dbname = "definitions"; // Nom de la base de données
 
$conn = mysqli_connect($servername, $username, $password, $dbname);
 
// Vérifier si la connexion est réussie
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}
 
// Exécuter la requête SQL pour récupérer les résultats de la recherche
$sql = "SELECT * FROM definitions WHERE mot LIKE '%$term%'";
$result = mysqli_query($conn, $sql);
 
// Afficher les résultats de la recherche
if (mysqli_num_rows($result) > 0) {
  while($row = mysqli_fetch_assoc($result)) {
    echo "<h3>" . $row["mot"] . "</h3>";
    echo "<p>" . $row["definition"] . "</p>";
  }
} else {
  echo "Aucun résultat trouvé.";
}
 
// Fermer la connexion à la base de données SQL
mysqli_close($conn);
?>

Code CSS:

Code:

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
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono&display=swap');
 
body{
    font-family: "Open Sans", sans-serif;
    margin:0px;
    padding: 0px;
    background-color: #FFFFFF;
}
 
/* Barre de navigation */
nav{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    background-color:rgb(124, 143, 194);
    position:sticky ;
    top:0;                    /* quand je scrolle la barre de nav reste bloqué*/ 
}
 
nav h1{
    font-size: 25px;         /*taille du nom du site*/ 
}
 
/* Fin de la barre de navigation */
 
 
 
nav .onglets {
    display: flex;
    justify-content: center;
    margin: 20px;
  }
 
nav .onglets p{
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
    cursor:pointer;
  }
 
 
 
 
 
/* Header */
header{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
  }
 
 
  header h1 {
    font-size: 40px;
    max-width: 500px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 40px;
 
  }
 
 
 
 
 
  header input {
    display: inline-block;
    font-size: 40px;
    padding: 15px;
    border-radius: 30px;
    border-color:rgb(124, 143, 194);
    background-color: #FFFFFF;
    outline: none;
    vertical-align: middle;
 
  }
 
  header button {
    display: inline-block;
    padding: 15px;
    font-size: 40px;
    border-color: rgb(124, 143, 194);
    border-radius: 50px;
    outline: none;
    cursor: pointer;
    background-color: #FFFFFF;
    vertical-align: middle;
  }
 
  /* Fin du header */
 
 
/* Section principale */
.main{
    margin: 20px;
    margin-top: 80px;
    display: flex;      /*Alligner les elements */
    flex-direction: column;
    justify-content: center;
    align-items: center;
 
}
/*toutes les cartes */
.cards{
    display: flex;
    flex-wrap: wrap;
 
}
.cards .card{
    margin-right: 50px;  /* espace entre les images */
    cursor: pointer;
}
.cards .card img{
    width: 1000px;  /* taille de l'image */
}
 
 
 
 
 
 
 
 
  /*pied de page  */
footer{
    margin-top: 100px;
    background-color: #2004a0;
    color:#fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;  
    padding: 30px;
}
footer .social-media{
    display: flex;
}
footer .social-media p{
    margin-right: 15px;
    border: 1px solid #fff;
    border-radius: 100%;
    padding: 5px;
    text-align: center;
    width: 20px;
    cursor: pointer;
 
}
 
 
/*fin pied de page  */

pour mettre en forme du code sur ce forum, vous avez le bouton # dans la barre d'outils.

en ce qui concerne votre souci, quel est le message d'erreur ?

Bonjour Mathieu,

Je vous remercie de votre réponse rapide. Cependant j'ai pu régler ce problème.

Bonne soirée.

Bonjour Mila_zou,

J'ai modifié votre message pour y ajouter les balises CODE=... (bouton # de la barre d'icones)

Par ailleurs, choisir une colonne varchar comme PK est un hérésie !

Il faut ajouter une colonne technique concise et stable, idéalement un type integer attribué par le SGBD (identity, auto_increment, counter... selon le SGBD).

En effet le varchar présente les inconvénients suivants :

il est beaucoup plus encombrant que l'integer à nombre de combinaisons égales, au détriment des performances ;
il nécessite un réalignement sur une longueur fixe pour les opérations de tri et regroupement (order by, group by, distinct, partition by) ;
il est sensible à la collation ;
lors de mises à jour avec modification de la longueur du contenu, il provoque des déplacements dans les pages data et index, ce qui pénalise encore les performances ;
et surtout, le varchar comme le char contiennent le plus souvent des valeurs instables. Ici, un mot dont l'orthographe peut évoluer (ce n'est pas si rare avec les différentes réformes de l'orthographe). Or, une PK se propage dans les tables liées, elle doit donc avant tout être stable !

Code:

1
2
3
4
5
6
7
8
// Récupérer le terme de recherche envoyé par le formulaire
$term = $_GET['search_term'];
 
//...
 
// Exécuter la requête SQL pour récupérer les résultats de la recherche
$sql = "SELECT * FROM definitions WHERE mot LIKE '%$term%'";
$result = mysqli_query($conn, $sql);

Aussi, attention aux injections SQL => utilise des requêtes préparées.