App03: Stocker un utilisateur connecté en session
- Créez une page web (connexion.php) qui permet à un utilisateur de saisir un nom d'utilisateur et un mot de passe. Ensuite, stockez ces informations dans une session. Sur une autre page (index.php), vérifiez si l'utilisateur est connecté ou non. S'il est connecté, affichez un message de bienvenue et un bouton de déconnexion (deconnexion.php). Sinon, redirigez l'utilisateur vers la page de connexion.
Solution
App04: un menu Bootstrap 5
- Créer un petit projet en PHP avec plusieurs pages, y compris une page "menu.php" contenant un menu Bootstrap 5 qui affiche les liens vers les différentes pages du projet ainsi que les options "Se connecter" ou "Se déconnecter", en fonction de l'état de connexion de l'utilisateur. Si l'utilisateur est connecté, le menu affichera le lien "Se déconnecter" et redirigera vers la page "deconnexion.php". Sinon, le lien "Se connecter" sera affiché et redirigera vers la page "connexion.php". Les liens dans le menu doivent être mis à jour en conséquence de l'état de connexion de l'utilisateur.
- La page "connexion.php" doit inclure le menu et un formulaire de connexion réalisé avec Bootstrap 5 contenant deux champs de saisie et un bouton. La page "index.php" doit afficher un message de bienvenue à l'utilisateur connecté.
- En résumé, l'examen consiste à développer un petit projet PHP avec plusieurs pages, y compris une page de menu qui affiche des liens et des options de connexion en fonction de l'état de connexion de l'utilisateur. La page de connexion doit inclure le menu et un formulaire, tandis que la page d'index doit afficher un message de bienvenue à l'utilisateur connecté.
Solution
- Page 1 (connexion.php) :
<?php
session_start();
if(isset($_POST['submit'])){
if(!empty($_POST['username']) && !empty($_POST['password'])){
$_SESSION['username'] = $_POST['username'];
$_SESSION['password'] = $_POST['password'];
header("Location: index.php");
exit();
}else{
echo "<script>alert('Remplir votre formulaire');</script>";
}
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid w-25">
<h1 class="pb-3">Page de connexion</h1>
<form class="row g-3" method="POST">
<div class="row pb-2">
<input type="text" class="form-control" name="username" id="username" placeholder="Email">
</div>
<div class="row pb-2">
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
</div>
<div class="row">
<button type="submit" name="submit" class="btn btn-primary mb-3">Se connecter</button>
</div>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Page 2 (index.php) :<?php
session_start();
if(!isset($_SESSION['username']) || !isset($_SESSION['password'])){
header("Location: connexion.php");
exit();
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Bienvenue <?php echo $_SESSION['username']; ?> </h1>
<a href="deconnexion.php">Déconnexion</a>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Page 3 (deconnexion.php) :<?php
session_start();
session_destroy();
header("Location: connexion.php");
exit();
?>
Page 4 (menu.php) :<nav class="navbar navbar-expand-sm navbar-dark bg-primary navbarStyle">
<a class="navbar-brand" href="/">apcpedagogie.com</a>
<div class="navbar-collapse justify-content-end">
<?php
if(isset($_SESSION['username']) && isset($_SESSION['password'])){
?>
<button type="button" id="signOut" class="btn btn-success d-none">Se déconnecter</button>
<?php
}else{
?>
<button type="button" id="signIn" class="btn btn-secondary">Se connecter</button>
<?php
}
?>
</div>
</nav>