Barre de recherche


Maintenant que notre formulaire et que notre script sont fait, nous allons créer une nouvelle page PHP que l'on nommera recherche_utilisateur.php.

Dans cette page nous allons faire une requête SQL afin de récupérer les 10 premières résultats grâce à la variable $user que l'on passe via notre script.


Page recherche_utilisateur.php


<?php
  session_start();
  require_once('../bd/connexionDB.php');

  if(isset($_GET['user'])){
    $user = (String) trim($_GET['user']);

    $req = $DB->query("SELECT *
      FROM utilisateur
      WHERE nom LIKE ?
      LIMIT 10",
      array("$user%"));

    $req = $req->fetchALL();
  
    foreach($req as $r){
      ?>   
        <div style="margin-top: 20px 0; border-bottom: 2px solid #ccc"><?= $r['nom'] . " " . $r['prenom'] ?></div><?php    
    }
  } 
?>


Maintenant que nous avons tout développé nous allons donc finaliser notre page index.php afin d'afficher nos résultats obtenus .


Page index.php


<div class="container">
  <div class="row">
    <div class="col-sm-0 col-md-2 col-lg-3"></div>
    <div class="col-sm-12 col-md-8 col-lg-6">
      <h1 style="text-align: center">Mon site à moi</h1>
      <div class="form-group">
        <input class="form-control" type="text" id="search-user" value="" placeholder="Rechercher un ou plusieurs utilisateurs"/>
      </div>
      <div style="margin-top: 20px">
        <div id="result-search"></div> <!-- C'est ici que nous aurons nos résultats de notre recherche -->
      </div>
    </div>
  </div>
</div>


Et voilà ! Maintenant c'est à votre tour d'essayer !

Si vous avez des idées ou remarques afin d'améliorer le cours n'hésitez pas à en faire part dans les commentaires !

8737 vues
Modifié le 18 mars 2019
Publicité Sitedudev
Cette pub permet au site de vivre ...
Télécharger le code source
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
3 561 vues
Comprendre le rôle de CSS dans la conception Web.
Le rôle de CSS dans la conception WebCSS, ou Cascading Style Sheets, est un langage de style utilisé pour définir la présentation visuelle des pages Web. Il agit comme une couche de style qui...
CSS
516 vues
Utilisation de gradients, ombres et transitions pour des effets visuels
Utilisation de Gradients, Ombres et Transitions pour des Effets VisuelsEn CSS, vous pouvez utiliser des gradients, des ombres et des transitions pour ajouter des effets visuels attrayants à vos...
CSS
8 485 vues
Utilisation de Bootstrap
Maintenant que nous avons un site qui commence à être opérationnel, il va falloir que nous nous occupions du design de celui-ci pour le rendre plus agréable à voir pour vos...
Créer son site
2 775 vues
Personnaliser sa bare de menu avec du CSS
Après avoir modifié notre barre de menu nous allons maintenant personnaliser notre barre de menu avec du CSS afin de la rendre plus agréable à regarder.Nous allons pour ça ajouter un nouveau...
Créer son site de rencontres
4 349 vues
Créer un commentaire
Poster un commentaireDans notre dossier f_forum, nous allons reprendre la page topic.php. Dans cette page nous allons ajouter la possibilité à vos utilisateurs de pouvoir poster des commentaires...
Créer son site
739 vues
Introduction à CSS pour la mise en forme
Introduction à CSS pour la mise en formeCSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler...
HTML
3 812 vues
Création de liens hypertexte avec <a>
Création de liens hypertexte avec <a>La balise <a> (ou <a href="">) est utilisée pour créer des liens hypertexte dans une page HTML. Elle permet de lier le contenu d'une page à...
HTML
1 864 vues
Utiliser les opérations mathématiques (+, -, *, /) dans les styles
Utiliser les opérations mathématiques en SASS : +, -, , /1. Addition (+), Soustraction (-), Multiplication (*), Division (/) :En SASS, vous pouvez effectuer des opérations mathématiques...
Sass
Publicité
Cette pub permet au site de vivre ...