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 HTML : 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
<!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 SQL : Sélectionner tout - Visualiser dans une fenêtre à part
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 PHP : 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
<?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 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
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  */