<?
php
$host='localshot';
$port=3306;
$dbname='login';
$user='root';
$pwd='';
try{
$newBD=new PDO('mysql:host-$host;port-$port;dbname-$dbname',$user,$pwd);
echo " <br> Connexion etablie";
}catch(PDOExeception $e){
die('Erreur :' .$e->getMessage());
}
-------------------------------
-----------------------------------------------------------------------------------
------------------
CodeurJava
Bases de Java
Collections Java
Java 8
Eclipse
XML Java
Réseaux
APIs
C/C++
jQuery
PHP
Formulaire de login avec HTML/CSS, PHP et MySQL
Dans ce tutoriel, nous vous montrons comment créer un formulaire de login en
utilisant l'extension HTML, PHP et MySQL. Ce formulaire d'authentification est
utilisé quand un utilisateur doit soumettre un formulaire pour l'autoriser à
accéder à son compte par exemple.
Quatre étapes pour créer un formulaire de connexion :
1- Créer un fichier HTML contenant la structure du formulaire;
2- Créer un fichier CSS pour définir le style;
3- Créer un fichier de login PHP qui va vérifie les champs de formulaire si ils
correspondent aux valeurs de la table dans la base de données;
4- Créer un fichier PHP de la page principale et de la déconnexion.
Etape 1:
Premièrement, on va créer une page HTML login.php.
login.php:
<html>
<head>
<meta charset="utf-8">
<!-- importer le fichier de style -->
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<div id="container">
<!-- zone de connexion -->
<form action="verification.php" method="POST">
<h1>Connexion</h1>
<label><b>Nom d'utilisateur</b></label>
<input type="text" placeholder="Entrer le nom d'utilisateur"
name="username" required>
<label><b>Mot de passe</b></label>
<input type="password" placeholder="Entrer le mot de passe"
name="password" required>
<input type="submit" id='submit' value='LOGIN' >
<?php
if(isset($_GET['erreur'])){
$err = $_GET['erreur'];
if($err==1 || $err==2)
echo "<p style='color:red'>Utilisateur ou mot de passe
incorrect</p>";
}
?>
</form>
</div>
</body>
</html>
Etape 2:
Le style va ajouter la mise en forme à notre fenêtre de connexion.
style.css:
body{
background: #67BE4B;
}
#container{
width:400px;
margin:0 auto;
margin-top:10%;
}
/* Bordered form */
form {
width:100%;
padding: 30px;
border: 1px solid #f1f1f1;
background: #fff;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#container h1{
width: 38%;
margin: 0 auto;
padding-bottom: 10px;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
input[type=submit] {
background-color: #53af57;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
input[type=submit]:hover {
background-color: white;
color: #53af57;
border: 1px solid #53af57;
}
Aperçu:
Etape 3:
Ensuite pour valider le formulaire, il nous faut un fichier pour vérifier les
champs de ce dernier, mais avant n'oubliez pas de créer la table 'utilisateur' dans
la base de données :
verification.php:
<?php
session_start();
if(isset($_POST['username']) && isset($_POST['password']))
{
// connexion à la base de données
$db_username = 'root';
$db_password = 'mot_de_passe_bdd';
$db_name = 'nom_bdd';
$db_host = 'localhost';
$db = mysqli_connect($db_host, $db_username, $db_password,$db_name)
or die('could not connect to database');
// on applique les deux fonctions mysqli_real_escape_string et htmlspecialchars
// pour éliminer toute attaque de type injection SQL et XSS
$username =
mysqli_real_escape_string($db,htmlspecialchars($_POST['username']));
$password =
mysqli_real_escape_string($db,htmlspecialchars($_POST['password']));
if($username !== "" && $password !== "")
{
$requete = "SELECT count(*) FROM utilisateur where
nom_utilisateur = '".$username."' and mot_de_passe = '".$password."'
";
$exec_requete = mysqli_query($db,$requete);
$reponse = mysqli_fetch_array($exec_requete);
$count = $reponse['count(*)'];
if($count!=0) // nom d'utilisateur et mot de passe correctes
{
$_SESSION['username'] = $username;
header('Location: principale.php');
}
else
{
header('Location: login.php?erreur=1'); // utilisateur ou mot de passe
incorrect
}
}
else
{
header('Location: login.php?erreur=2'); // utilisateur ou mot de passe vide
}
}
else
{
header('Location: login.php');
}
mysqli_close($db); // fermer la connexion
?>
Etape 4:
Dernière étape, le serveur vérifie si les informations fournies sont correctes, et
si c'est le cas, il crée une session au nom d'utilisateur et se redirige vers la
page principale.php.
principale.php:
<html>
<head>
<meta charset="utf-8">
<!-- importer le fichier de style -->
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body style='background:#fff;'>
<div id="content">
<!-- tester si l'utilisateur est connecté -->
<?php
session_start();
if($_SESSION['username'] !== ""){
$user = $_SESSION['username'];
// afficher un message
echo "Bonjour $user, vous êtes connecté";
}
?>
</div>
</body>
</html>
Bonus:
Vous allez poser la question: comment se déconnecter ? C'est facile, on rajoute un
bouton pour se déconnecter ainsi qu'un petit morceau de code php qui détruit la
session en cours.
<html>
<head>
<meta charset="utf-8">
<!-- importer le fichier de style -->
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body style='background:#fff;'>
<div id="content">
<a href='principale.php?deconnexion=true'><span>Déconnexion</span></a>
<!-- tester si l'utilisateur est connecté -->
<?php
session_start();
if(isset($_GET['deconnexion']))
{
if($_GET['deconnexion']==true)
{
session_unset();
header("location:login.php");
}
}
else if($_SESSION['username'] !== ""){
$user = $_SESSION['username'];
// afficher un message
echo "<br>Bonjour $user, vous êtes connectés";
}
?>
</div>
</body>
</html>
Un problème rencontré lors de la soumission d'un formulaire est qu'on peut avoir
plusieurs clics et donc plusieurs exécutions de la même opération de vérification,
redirection, etc. ça peut causer des anomalies et le serveur génère des erreurs et
s’arrête.
La solution est dans cet article : Comment activer/désactiver un bouton submit avec
jQuery ?
Partager cet article
Twitter Facebook
PHP SQL Web
Rechercher dans ce blog
Articles les plus lus
Formulaire de login avec HTML/CSS, PHP et MySQL
Socket java : Créer une application de chat Client/Serveur
Comment parcourir une HashMap en Java
Minimum et maximum d'un tableau en Java
Comment parcourir un ArrayList en Java
Générer un nombre aléatoire entre deux bornes en java
Exemple de la boucle foreach en Java
Convertisseur Text / ASCII
Vérifier si un élément existe dans un tableau en Java
Apache POI: Créer, lire et modifier un fichier Excel en java
Abonnez-vous à la chaîne YouTube
Suivez-nous sur Facebook
Tutoriels populaires
Les Collections en java
Télécharger et installer Eclipse
Programmation C/C++
Apache POI
Le Réseau en Java
Les composants Swing
Les String en Java
Outils
Calculatrice IP
Palette de couleurs HTML
Encoder/Decoder Base64
Convertisseur hexadécimal
Code ASCII
Liens utiles
Télécharger Java
Tutoriel javaEE 7
API JavaSE 6
API JavaSE 7
API JavaSE 8
Suivez-nous
Entrez votre adresse email
Copyright © 2021 codeurjava.com | Règles de confidentialité
-----------------------------------------------------------------------------------
----------------------------------------------------
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"> </script>
<script src="script.js" defer></script>
<title>Mon site - Connexion</title>
</head>
<body>
<div class="container">
<div class="logo">
<i class="fas fa-user"></i>
</div>
<div class="tab-body" data-id="connexion">
<form>
<div class="row">
<i class="far fa-user"></i>
<input type="email" class="input" placeholder="Adresse Mail">
</div>
<div class="row">
<i class="fas fa-lock"></i>
<input placeholder="Mot de Passe" type="password" class="input">
</div>
<a href="#" class="link">Mot de passe oublié ?</a>
<button class="btn" type="button">Connexion</button>
</form>
</div>
<div class="tab-body" data-id="inscription">
<form>
<div class="row">
<i class="far fa-user"></i>
<input type="email" class="input" placeholder="Adresse Mail">
</div>
<div class="row">
<i class="fas fa-lock"></i>
<input type="password" class="input" placeholder="Mot de Passe">
</div>
<div class="row">
<i class="fas fa-lock"></i>
<input type="password" class="input" placeholder="Confirmer Mot de
Passe">
</div>
<button class="btn" type="button">Inscription</button>
</form>
</div>
<div class="tab-footer">
<a class="tab-link active" data-ref="connexion"
href="javascript:void(0)">Connexion</a>
<a class="tab-link" data-ref="inscription"
href="javascript:void(0)">Inscription</a>
</div>
</div>
</body>
</html>
