Créé en 2020 et modifié le 22 Oct 2020
Création de l’Hotel avec Laravel
tutoriel : www.udemy.com/course/les-bases-de-laravel-7
Partie 1 – Installation
vérifier votre version de php, 7 ou 8.
- vérifier la version de php
php -v
- installer wamp et composer
- installer Laravel 8.9 ou supérieur , dans votre serveur web, exemple wamp/www/
composer create-project --prefer-dist laravel/laravel oteloprojet
- vérifier la version de votre Laravel
php artisan --version
- dans le répertoire du projet, lancer laravel
php artisan serve
- tester votre installation en affichant la page indiquée en console
Partie 2 – Création de la page d’accueil
Livrable : otelo/mission1/…
- trouver un nom pour votre hôtel
- définir une charte graphique. Les codes couleurs peuvent utiliser l’ensemble triade et complémentaire.
- comprendre le modèle MVC
- dans routes/web.php, réaliser une route accueil
Route::get('/accueil', function () { return view('accueil'); });
- définir une page qui affiche le nom de l’hotel dans ressource/views/accueil.blade.php
- définir le contrôleur PremierController qui renvoie la vue accueil
<?php namespace App\Http\Controllers; use App\Http\Controllers\Controller; class PremierController extends Controller{ public function home(){ return view('home'); } }
- modifier la route pour faire appel au contrôleur
Route::get('/monUri',[PremierController::class, 'home'] );
- Créer un fichier squelette, un template dans views/layouts/app.blade.php avec une étiquette @yield(‘content’)
<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Otelo') }}</title> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Otelo') }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left Side Of Navbar --> <ul class="navbar-nav mr-auto"> </ul> <!-- Right Side Of Navbar --> <ul class="navbar-nav ml-auto"> <!-- Authentication Links --> @guest <li class="nav-item"> <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> </li> @if (Route::has('register')) <li class="nav-item"> <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> </li> @endif @else <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> {{ Auth::user()->name }} </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('Logout') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none"> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav> <main class="py-4"> @yield('content') </main> </div> </body> </html>
- Utiliser le squelette dans la page accueil.blade.php grâce à @extends et @section
@extends('layouts.app') @section('content') <h1>waza</1> @stop
- Définir un footer dans views/incs/footer.blade.php
- Inclure le footer dans le template app.blade.php
@include ('incs.footer')
Partie 3 – CSS
- Ajouter un fichier public/css/style.css
- Appeler ce fichier comme ceci
<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" />
- Réaliser la page d’accueil de l’Hôtel
Notes
routage:
Route::get('/accueil', function () { return view('accueil'); }); Route::redirect('/zaza','/accueil' ); Route::get('/zaza',function(){ return view('accueil',['mavariable'=>'contenu']); } ); Route::post('/zaza',function(){ return view('accueil',['mavariable'=>'contenu']); } ); Route::get('/user/{name}',function($name){ return $name; } ); Route::get('/r1',function(){ return view('accueil',['mavariable'=>'contenu']); } )->name('ma-route'); Route::get('/r2',function(){ return redirect()->route('ma-route'); } );
Contrôleur
routes/web.php
Route::get('/monUriVersPremierControllerFunctionhome',[PremierController::class, 'home'] );
http/controller/PremierControler.php
install php namespace resolver / ctrl alt i sur les class extends pour les use auto
<?php namespace App\Http\Controllers; use App\Http\Controllers\Controller; class PremierController extends Controller{ public function home(){ return view('home'); } }
ressources/views/home.blade.php
bonjour
Avec paramètre
routes/web.php
Route::get('/monUriVersPremierControllerFunctionhome/{name}',[PremierController::class, 'home'] );
http/controller/PremierControler.php
<?php namespace App\Http\Controllers; use App\Http\Controllers\Controller; class PremierController extends Controller{ public function home($name){ return view('home',[ 'name'=>$name ]); } }
ressources/views/home.blade.php
bonjour {{$name}}
templates
views/layouts/app.blade.php
@include
@yield
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> @include('incs.navbar') <h1>Hello, world!</h1> @yield('content') <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
views/incs/navbar.blade.php
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <title>Hello, world!</title> </head> <body>
views/second.blade.php
@extends
@section/@stop
@extends('layouts.app') @section('content') <h1>waza</1> @if($z>10) {{$z}} @else @endif @php $a=['1','2','3']; @endphp @foreach($a as $b) {{$b}} @endforeach @stop
composer.json
{ "name": "laravel/laravel", "type": "project", "description": "The Laravel Framework.", "keywords": [ "framework", "laravel" ], "license": "MIT", "require": { "php": "7.*", "fideloper/proxy": "^4.2", "fruitcake/laravel-cors": "^2.0", "guzzlehttp/guzzle": "^7.0.1", "laravel/framework": "8.*", "laravel/tinker": "^2.0" }, "require-dev": { "facade/ignition": "^2.3.6", "fzaninotto/faker": "^1.9.1", "mockery/mockery": "^1.3.1", "nunomaduro/collision": "^5.0", "phpunit/phpunit": "^9.3" }, "config": { "optimize-autoloader": true, "preferred-install": "dist", "sort-packages": true }, "extra": { "laravel": { "dont-discover": [] } }, "autoload": { "psr-4": { "App\\": "app/", "Database\\Factories\\": "database/factories/", "Database\\Seeders\\": "database/seeders/" } }, "autoload-dev": { "psr-4": { "Tests\\": "tests/" } }, "minimum-stability": "dev", "prefer-stable": true, "scripts": { "post-autoload-dump": [ "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", "@php artisan package:discover --ansi" ], "post-root-package-install": [ "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"" ], "post-create-project-cmd": [ "@php artisan key:generate --ansi" ] } }