Otelo 1 - frebourg.es

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"
        ]
    }
}