Otelo 3

Créé en 2020 et modifié le 30 Nov 2020

Les formulaires avec Laravel

Partie 1 – création du formulaire de réservation

Livrable :  otelo/mission3/…

• créer une vue createReservation

@extends('layouts.app')

@section('content')
<div class="container">
<form method="post" action="{{ route('reservation.store')}}">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select name="idperiode" class="form-control" id="sel1">
    <option value=1>basse</option>
    <option value=2>moyenne</option>
    <option value=3>haute</option>
  </select>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
@stop

 

• créer le contrôleur ReservationController
• modifier la fonction create de ReservationController

return view('createReservation');

• ajouter la route

Route::get('/newreservation',[ReservationController::class, 'create'] );

• tester  le formulaire, une erreur concernant la vue est générée, supprimer l’action reservation.store dans le formulaire.
• adapter le formulaire  pour contenir les champs nécessaires, on ne gérera pas les lignes de réservation (pas d’id chambre)

 

 

Partie 2 – récupération et enregistrement

Livrable :  otelo/mission3/…

• ajouter l’action reservation.store dans le formulaire
• ajouter la route de récupération

Route::post('/storereservation',[ReservationController::class, 'store'] )->name('reservation.store');

• tester le formulaire puis mettre en forme le formulaire pour contenir les champs nécessaires, on ne gérera pas les lignes de réservation (pas d’id chambre)

• ajouter à la fonction store du contrôleur

dd($request);

• tester, une erreur 419 est générer, il faut gérer un token de session.
• ajouter après la balise form, @csrf

<form method="post" action="{{ route('reservation.store')}}">
@csrf

• observer le token généré dans le formulaire via le navigateur

• vérifier les données dans l’affichage après validation du formulaire

 

• créer le modèle Reservation.php avec les bons champs, attention aux majuscules des champs de la table
• modifier la methode store de ReservationController.php, on verifiera que les input possède bien les names dated datef et idperiode.

$reservation=new Reservation();
     $dated=$request->input('dated');
     $datef=$request->input('datef');
     $idperiode=$request->input('idperiode');
     $reservation->dateD=$dated;
     $reservation->dateF=$datef;
     $reservation->idPeriode=$idperiode;
     $reservation->save();
     return redirect()->back();

• tester, il manque deux champs, ajouter les puis re-tester.

Partie 3 – contrôle des saisies back-end

Livrable :  otelo/mission3/…

• Modifier la fonction store de ReservationController pour indiquer que vos champs sont obligatoires

public function store(Request $request)
   {

       $validatedData = $request->validate([
             'dated' => 'required|date|after:tomorrow',
             'datef' => 'required|date|after:datef',
             'idperiode'=> 'required|between:1,3'
       ]);

       $reservation=new Reservation();
       ......

   }

• Modifier la vue createReservation

@extends('layouts.app')

@section('content')
<div class="container">
@if($errors->any())
 <div class='alert alert-danger'>
   <ul>
    @foreach($errors->all() as $error)
        <li>{{$error}}</li>
    @endforeach    
   </ul>
@endif

<form method="post" action="{{ route('reservation.store')}}">
......

• Tester

 

• Modifier la vue createReservation

@extends('layouts.app')

@section('content')
<div class="container">



<form method="post" action="{{ route('reservation.store')}}">
@csrf
  <div class="form-group">
    <label for="exampleInputEmail1">date debut</label>
    <input name="dated" type="date" class="form-control @error('dated') is-invalid @enderror" id="exampleInputEmail1"  >
        @error('dated')
        <div class="alert alert-danger mt-2">
        {{$message}} mon message perso
        </div>
        @enderror
     </div>
  <div class="form-group">
    <label for="exampleInputPassword1">date fin</label>
    <input name="datef" type="date" class="form-control" id="exampleInputPassword1" >
    
  </div>
  <div class="form-group">
  <label for="sel1">Select list:</label>
  <select name="idperiode" class="form-control" id="sel1">
    <option value=1>basse</option>
    <option value=2>moyenne</option>
    <option value=3>haute</option>
  </select>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
@stop

• Tester
• Valider les champs datef et idperiode coté back-end
• Valider les champs coté front-end