Creation of the Hotel with Laravel
tutoriel : www.udemy.com/course/les-bases-de-laravel-7
Context
Otelo, a hotel, wishes to modernise its website to allow clients to book a room. The application will be created with the Laravel Framework in PHP. It will have a database on its own SGBDR. The hotel willbe able to manage the bookings via an administration interface accessible by authentication. Data will be exposed thanks to an API to finally relate Otelo to the Finder projetc.
Part 1 – Installation
Check your PHP version, 7 or 8. The Laravel version will depend on the PHP version running on your web server.
- check the PHP version
php -v
- install wamp and composer
- install Laravel 8.9 or supérior, in your web server, example wamp/www/
composer create-project --prefer-dist laravel/laravel oteloprojet
- Check you Laravel version
php artisan --version
- In the project directory, launch Laravel
php artisan serve
- test your installation by displaying the page indicated in console
Part 2 – Creation of the homepage
Deliverable : otelo/mission1/…
- Find a name for your hotel
- Understand the MVC model
- In routes/web.php, create a welcome route
Route::get('/accueil', function () {
return view('accueil');
});
- define a page which displays the hotel name in ressource/views/accueil.blade.php
- define the controller PremierController which sends back the welcome view
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
class PremierController extends Controller{
public function home(){
return view('home');
} }
- modify the route to call the controller
Route::get('/monUri',[PremierController::class, 'home'] );
- Add the following line in web.php at the beggining of the file
use App\Http\Controllers\PremierController;
- Create a squeletton file, a template in views/layouts/app.blade.php with a lable @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/[email protected]/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/[email protected]/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>
- Use the squeletton on the page accueil.blade.php using @extends and @section
@extends('layouts.app')
@section('content')
<h1>waza</1>
@stop
- Define a footer in views/incs/footer.blade.php
- Include the footer in the template app.blade.php
@include ('incs.footer')
Part 3 – CSS
- Add a public/css/style.css file
- Call this file this way :
<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" />
- Create the hotel homepage
Notes
routing:
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');
} );
Controller
routes/web.php
Route::get('/monUriVersPremierControllerFunctionhome',[PremierController::class, 'home'] );
http/controller/PremierControler.php
install php namespace resolver / ctrl alt i on the class extends for the 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
With parameter
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"
]
}
}