Examen Bootstrap & LaraveL
ABDERRAZAK IDRISSI
Exercice 1:
Dans le fichier page.blade.php :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mon Application Laravel</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
header {
background-color: #333;
padding: 15px 0;
nav {
max-width: 1200px;
margin: 0 auto;
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
li {
margin-right: 20px;
a{
color: white;
text-decoration: none;
padding: 10px 15px;
a:hover {
background-color: #555;
border-radius: 5px;
.content {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="{{ route('accueil') }}">Accueil</a></li>
<li><a href="{{ route('bureau') }}">Bureau</a></li>
<li><a href="{{ route('info') }}">Info</a></li>
<li><a href="{{ route('autre') }}">Autre</a></li>
</ul>
</nav>
</header>
<div class="content">
@yield('content')
</div>
</body>
</html>
Dans le fichier accueil.blade.php
@extends('page')
@section('content')
<h1>Je suis la page Accueil</h1>
<p>Bienvenue sur la page d'accueil !</p>
@endsection
Dans le fichier bureau.blade.php
@extends('page')
@section('content')
<h1>Je suis la page Bureau</h1>
<p>Contenu de la page Bureau.</p>
@endsection
Dans le fichier info.blade.php
@extends('page')
@section('content')
<h1>Je suis la page Info</h1>
<p>Informations importantes ici.</p>
@endsection
Dans le fichier autre.blade.php
@extends('page')
@section('content')
<h1>Je suis la page Autre</h1>
<p>Contenu de la page Autre.</p>
@endsection
Dans le fichier routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('accueil');
})->name('accueil');
Route::get('/bureau', function () {
return view('bureau');
})->name('bureau');
Route::get('/info', function () {
return view('info');
})->name('info');
Route::get('/autre', function () {
return view('autre');
})->name('autre');
Exercice 2
Dans le terminal créer
php artisan make:controller ClientController
Dans le fichier ClientController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ClientController extends Controller
public function affiche()
$data = [
'nom' => 'Ahmed',
'prenom' => 'Mohamed',
'age' => 30,
'ville' => 'Rabat',
'produits' => [
'Table',
'PC',
'Bureau',
],
];
return view('index', compact('data'));
Dans le fichier routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ClientController;
Route::get('/client', [ClientController::class, 'affiche'])-
>name('client.affiche');
Dans le fichier index.blade.php
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Informations Client</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
h1 {
color: #333;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
.info-block {
margin-bottom: 20px;
.info-label {
font-weight: bold;
display: inline-block;
width: 100px;
ul {
padding-left: 20px;
</style>
</head>
<body>
<div class="container">
<h1>Informations du client</h1>
<div class="info-block">
<span class="info-label">Nom:</span> {{ $data['nom'] }}
</div>
<div class="info-block">
<span class="info-label">Prénom:</span> {{ $data['prenom'] }}
</div>
<div class="info-block">
<span class="info-label">Âge:</span> {{ $data['age'] }} ans
</div>
<div class="info-block">
<span class="info-label">Ville:</span> {{ $data['ville'] }}
</div>
<div class="info-block">
<span class="info-label">Produits:</span>
<ul>
@foreach($data['produits'] as $produit)
<li>{{ $produit }}</li>
@endforeach
</ul>
</div>
</div>
</body>
</html>
Exercice 3
dans le fichier inscription.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Inscription</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.
min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">Formulaire d'inscription</div>
<div class="card-body">
<form method="POST" action="{{ route('data.getdata')
}}">
@csrf
<div class="mb-3">
<label for="codeIns" class="form-label">Code
d'inscription</label>
<input type="text" class="form-control"
id="codeIns" name="codeIns" required>
</div>
<div class="mb-3">
<label for="nom" class="form-label">Nom</label>
<input type="text" class="form-control" id="nom"
name="nom" required>
</div>
<div class="mb-3">
<label for="telephone" class="form-
label">Téléphone</label>
<input type="text" class="form-control"
id="telephone" name="telephone" required>
</div>
<button type="submit" class="btn btn-
primary">Soumettre</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
dans le fichier DataController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DataController extends Controller
public function showForm()
return view('inscription');
}
public function getdata(Request $request)
$validatedData = $request->validate([
'codeIns' => 'required',
'nom' => 'required',
'telephone' => 'required',
]);
$data = [
'codeIns' => $request->codeIns,
'nom' => $request->nom,
'telephone' => $request->telephone,
];
return view('showdata', compact('data'));
dans le fichier showdata.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Données d'inscription</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.
min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">Données d'inscription</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<th>Code d'inscription</th>
<td>{{ $data['codeIns'] }}</td>
</tr>
<tr>
<th>Nom</th>
<td>{{ $data['nom'] }}</td>
</tr>
<tr>
<th>Téléphone</th>
<td>{{ $data['telephone'] }}</td>
</tr>
</tbody>
</table>
<a href="{{ route('form.show') }}" class="btn btn-
primary">Retour au formulaire</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
dans le fichier routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DataController;
Route::get('/inscription', [DataController::class, 'showForm'])-
>name('form.show');
Route::post('/getdata', [DataController::class, 'getdata'])-
>name('data.getdata');
Exercice 4
1)
Création de la migration et du modèle Livre
php artisan make:migration create_livres_table --create=livres
La méthode up() dans la migration
public function up()
Schema::create('livres', function (Blueprint $table) {
$table->id();
$table->string('isbn')->unique();
$table->string('titre');
$table->decimal('prix', 8, 2);
$table->string('nom');
$table->string('prenom');
$table->timestamps();
});
La commande pour exécuter la migration
php artisan migrate
Commande de création du modèle Livre
php artisan make:model Livre
2. Création du contrôleur LivreController
php artisan make:controller LivreController
Dans le fichier LivreController
<?php
namespace App\Http\Controllers;
use App\Models\Livre;
use Illuminate\Http\Request;
class LivreController extends Controller
/**
* Affiche la liste des livres
* @return \Illuminate\Http\Response
*/
public function index()
$livres = Livre::all();
return view('livres.index', compact('livres'));
Dans le fichier vue index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Liste des Livres</title>
<link
href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.
min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="mb-4">Liste des Livres</h1>
<div class="card">
<div class="card-header bg-primary text-white">
Livres disponibles
</div>
<div class="card-body">
@if(count($livres) > 0)
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>ISBN</th>
<th>Titre</th>
<th>Prix</th>
<th>Auteur</th>
</tr>
</thead>
<tbody>
@foreach($livres as $livre)
<tr>
<td>{{ $livre->id }}</td>
<td>{{ $livre->isbn }}</td>
<td>{{ $livre->titre }}</td>
<td>{{ $livre->prix }} €</td>
<td>{{ $livre->prenom }} {{ $livre->nom }}</td>
</tr>
@endforeach
</tbody>
</table>
@else
<div class="alert alert-info">
Aucun livre enregistré pour le moment.
</div>
@endif
</div>
</div>
</div>
</body>
</html>
Dans le fichier routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LivreController;
Route::get('/livres', [LivreController::class, 'index'])-
>name('livres.index');
dans le fichier LivreSeeder.php
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use App\Models\Livre;
class LivreSeeder extends Seeder
public function run()
Livre::create([
'isbn' => '44',
'titre' => 'Laravel,
'prix' => 500,
'nom' => ‘Ahmed’,
'prenom' => 'Mohamed'
]);
Livre::create([
'isbn' => '55',
'titre' => 'Java',
'prix' =>456,
'nom' => 'Kamal',
'prenom' => 'Hicham'
]);
Puis exécutez la commande :
php artisan db:seed --class=LivreSeeder
