Anmeldeformular mit HTML/CSS, PHP und MySQL

In diesem Tutorial zeigen wir Ihnen, wie Sie ein Anmeldeformular mit der HTML-, PHP- und MySQL-Erweiterung erstellen. Dieses Authentifizierungsformular wird verwendet, wenn ein Benutzer ein Formular einreichen muss, um ihn zum Zugriff auf sein Konto zu autorisieren, zum Beispiel.

Vier Schritte zum Erstellen eines Anmeldeformulars:

1- Erstellen Sie eine HTML-Datei, die die Struktur des Formulars enthält;
2- Erstellen Sie eine CSS-Datei, um den Stil zu definieren;
3- Erstellen Sie eine PHP-Anmeldedatei, die die Formularfelder überprüft, ob sie mit den Werten der Tabelle in der Datenbank übereinstimmen.
4- Erstellen Sie eine PHP-Datei der Hauptseite und des logout.

Schritt 1:

Zuerst erstellen wir eine HTML-Seite login.php.

login.php:

 
 < Kopf> 
 < meta charset="utf-8"> 
  
 < link rel="stylesheet" href="style.css" media="screen" type="text/css" /> 
  
 < Körper> 
 < div id="container"> 
  
 
 < form action="verification.php" method="POST"> 
 < h1> Einloggen 
 
 < Etikett> < b> Nutzername 
 < input type="text" placeholder="Benutzername eingeben" name="Benutzername" erforderlich> 

 < Etikett> < b> Passwort 
 < input type="password" placeholder="Passwort eingeben" name="password" erforderlich> 

 < input type="submit" id='submit' value='LOGIN' > 
  if(isset($_GET['error'])){
 $err = $_GET['error']; 
 if($err==1 || $err==2)
 echo "< p style='color:red'> Falscher Benutzer oder falsches Passwort"; 
 }
 ?>

Schritt 2:

Der Stil fügt unserem Anmeldefenster eine Formatierung hinzu.

style.css:

body{
 background:  #67BE4B; 
}
#container{
 width:400px; 
 margin:0 auto; 
 margin-top:10%; 
}
/* Umrandete Form */
form {
 width:100%; 
 Auffüllung: 30px; 
 Rahmen: 1px fest #f1f1f1; 
 Hintergrund: #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{
 Breite: 38%; 
 margin: 0 auto; 
 padding-bottom: 10px; 
}

/* Eingänge in voller Breite */
input[type=text], input[type=password] {
 width: 100%; 
 Auffüllung: 12px 20px; 
 Rand: 8px 0; 
 Anzeige: Inline-Block; 
 border: 1px solid #ccc;
 box-sizing: border-box; 
}

/* Legen Sie einen Stil für alle Schaltflächen fest */
input[type=submit] {
 background-color: #53af57; 
 Farbe: weiß; 
 Auffüllung: 14px 20px; 
 Rand: 8px 0; 
 Rand: keine; 
 Cursor: Zeiger; 
 Breite: 100%; 
}
input[type=submit]:hover {
 background-color: white; 
 Farbe: #53af57; 
 Rand: 1px fest #53af57; 
}

Preview:

Schritt 3:

Um das Formular zu validieren, benötigen wir eine Datei, um die Felder des Formulars zu überprüfen, aber vergessen Sie vorher nicht, die Tabelle "user" in der Datenbank zu erstellen:

verification.php:

session_start(); 
if(isset($_POST['Benutzername']) & & isset($_POST['password']))
{
 // Datenbankverbindung
 $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)
 oder die('konnte keine Verbindung zur Datenbank herstellen'); 
 
 // Wir wenden die beiden Funktionen mysqli_real_escape_string und htmlspecialchars
 // an, um SQL-Injection-Angriffe zu eliminieren, und 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 user where 
 nom_utilisateur = '".$username."' und mot_de_passe = '".$password."' "; 
 $exec_Abfrage = mysqli_query($db,$requete); 
 $reponse = mysqli_fetch_array($exec_request); 
 $count = $reponse['count(*)']; 
 if($count!=0) // Benutzername und Passwort korrigieren
 {
 $_SESSION['Benutzername'] = $username; 
 header('Standort: principale.php'); 
 }
 else
 {
 header('Location: login.php?error=1'); // falscher Benutzer oder Passwort
 }
 }
 else
 {
 header('Location: login.php?error=2'); // leerer Benutzer oder Passwort
 }
}
else
{
 header('Location:  login.php'); 
}
mysqli_close($db); Verbindung schließen
?>

Schritt 4:

Im letzten Schritt prüft der Server, ob die angegebenen Informationen korrekt sind, und wenn ja, erstellt er eine Sitzung im Benutzernamen und leitet auf die Seite principale.php.

principale.php:

 
 < Kopf> 
 < meta charset="utf-8"> 
  
 < link rel="stylesheet" href="style.css" media="screen" type="text/css" /> 
  
 < body style='background:#fff;' > 
 < div id="Inhalt"> 
  
  session_start(); 
 if($_SESSION['Benutzername'] !== ""){
 $user = $_SESSION['Benutzername']; 
 // eine Nachricht anzeigen
 echo "Hallo $user, Sie sind verbunden"; 
 }
 ?>

Bonus:

Sie werden die Frage stellen: Wie melde ich mich ab? Es ist ganz einfach, Sie fügen eine Schaltfläche zum Abmelden sowie ein kleines Stück PHP-Code hinzu, das die aktuelle Sitzung zerstört.

 
 
 < Kopf> 
 < meta charset="utf-8"> 
  
 < link rel="stylesheet" href="style.css" media="screen" type="text/css" /> 
  
 < body style='background:#fff;' > 
 < div id="Inhalt"> 
 
 < a href='principale.php?logout=true'> < span> Ausloggen 
 
  
  session_start(); 
 if(isset($_GET['disconnect']))
 { 
 if($_GET['disconnect']==true)
 { 
 session_unset(); 
 header("location:login.php"); 
 }
 }
 else if($_SESSION['username'] !== ""){
 $user = $_SESSION['username']; 
 // Nachricht anzeigen
 echo "< br> Hallo $user, Sie sind verbunden"; 
 }
 ?>