Avant d'entamer le développement de notre barre de recherche nous allons reprendre le fichier index.php des articles précédents.

Dans notre fichier index.php nous allons y ajouter une nouvelle librairie afin d'y exploiter les fonctions Ajax.


La nouvelle ligne à ajouter à notre fichier sera celle-ci :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


Fichier index.php


<?php
  ...
?>
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


Ensuite nous allons ajouter un formulaire contenant un champ input de type text. Pour cela je vais exploiter les classes CSS de Bootstrap afin d'aller plus vite dans la réalisation de notre formulaire.


<body>
  ...
  <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">Barre de recherche</h1>
        <div class="form-group">
          <input class="form-control" type="text" id="search-user" value="" placeholder="Rechercher un ou plusieurs utilisateurs"/>
        </div>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>


Notre formulaire est maintenant mis en place. Nous allons voir sur le prochain article comment communiquer avec une autre page afin d'afficher les résultats de notre recherche sans recharger la page.

6738 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
437 vues
Création d'un fichier .htaccess
Le fichier .htaccess est un élément important pour configurer et personnaliser un site web sur un serveur Apache. Dans ce cours, nous allons apprendre comment créer un fichier .htaccess de...
HTACCESS
501 vues
Comprendre le rôle de JavaScript dans le développement web
Le rôle de JavaScript dans le développement webJavaScript est un langage de programmation qui joue un rôle crucial dans le développement web moderne. Il est largement utilisé pour rendre les...
JS
491 vues
Utilisation des attributs id et class pour identifier et styler les éléments
Utilisation des attributs id et class pour identifier et styler les élémentsLes attributs id et class sont utilisés pour identifier et styler les éléments HTML en leur attribuant des...
HTML
17 958 vues
Créer un profil PHP
Après avoir créé notre page de connexion et notre page d'inscription il est temps de créer un profil pour votre utilisateur !La page profil permettra plusieurs choses ! D'éditer ses informations...
Créer son site
375 vues
Portée des variables (variables locales et globales)
La portée des variables en PHP fait référence à la visibilité et à l'accès des variables à différents endroits dans un script PHP. Il existe deux types principaux de portée des variables :...
PHP
390 vues
Emplacement du Fichier .htaccess
L'emplacement où vous placez votre fichier .htaccess est crucial pour qu'il fonctionne correctement sur votre site web. Dans ce cours, nous allons apprendre où placer le fichier .htaccess pour...
HTACCESS
383 vues
Création de formulaires avec <form>
Création de formulaires avec <form>La balise <form> est utilisée pour créer des formulaires interactifs dans une page HTML. Elle permet aux utilisateurs de saisir et de soumettre des...
HTML
2 107 vues
Définition des caractéristiques de la base de données : le nom, le jeu de caractères, etc.
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
Publicité
Cette pub permet au site de vivre ...