N

<?
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">

<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<div id="container">

<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>
</head>
<body style='background:#fff;'>
<div id="content">

<?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>
</head>
<body style='background:#fff;'>
<div id="content">
<a href='principale.php?deconnexion=true'><span>Déconnexion</span></a>


<?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">
<input type="password" class="input" placeholder="Mot de Passe">
</div>
<div class="row">
<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>

N

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

N

Transféré par

Droits d'auteur :

Formats disponibles

<?

die('Erreur :' .$e->getMessage());

Formulaire de login avec HTML/CSS, PHP et MySQL

Quatre étapes pour créer un formulaire de connexion :

1- Créer un fichier HTML contenant la structure du formulaire;

<form action="verification.php" method="POST">

<input type="submit" id='submit' value='LOGIN' >

/* Set a style for all buttons */

// on applique les deux fonctions mysqli_real_escape_string et htmlspecialchars

if($username !== "" && $password !== "")

Partager cet article

Rechercher dans ce blog

Articles les plus lus

Suivez-nous sur Facebook

Les Collections en java

Entrez votre adresse email

Copyright © 2021 codeurjava.com | Règles de confidentialité

<div class="tab-body" data-id="connexion">

<div class="tab-body" data-id="inscription">

Vous aimerez peut-être aussi