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:
<!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>© 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):
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):
<?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:
@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 */
@Amaury — Mise en forme du code source (modifiez votre message pour voir comment j’ai fait).
+0
-0
