Rivals
Ancien staff
- Inscription
- 27 Août 2016
- Messages
- 1 705
- Réactions
- 895
- Points
- 13 104
Bonjour à tous, on se retrouve aujourd'hui pour la création d'un portfolio de graphiste grâce au framework PHP nommé Laravel.
Je tiens à préciser que ceci est l'épisode 2 de la création de ce portfolio, retrouvez l'épisode 1.
OBJECTIF DE L'EPISODE 2
Dans cet épisode 2 nous allons essayer de faire la partie créations dans l'administration c'est à dire la publication d'une création, l'édition et la suppression de celle-ci, cet objectif est dépendant d'un autre : la création du système de catégories de nos créations.
PUBLICATION D'UNE CREATION
L'objectif est énoncé, démarrons par la publication c'est à dire l'enregistrement d'une nouvelle création de la part de notre graphiste.
Dans le controller WorkController nous devons modifier la fonction create() afin que celle-ci affiche notre formulaire pour pouvoir enregistrer une nouvelle création comme il était prévu dans l'épisode 1 lorsque j'ai donné le tableau des routes / fonctions & URLs correspondantes.OBJECTIF DE L'EPISODE 2
Dans cet épisode 2 nous allons essayer de faire la partie créations dans l'administration c'est à dire la publication d'une création, l'édition et la suppression de celle-ci, cet objectif est dépendant d'un autre : la création du système de catégories de nos créations.
PUBLICATION D'UNE CREATION
L'objectif est énoncé, démarrons par la publication c'est à dire l'enregistrement d'une nouvelle création de la part de notre graphiste.
- Pour se faire nous devons renseigner le code ci-dessous dans notre fonction create().
PHP:
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('admin.works.create');
}- Rendez-vous ensuite sur l'URL suivante :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici..
- Comme pouvez le voir l'erreur nous indique que nous n'avons pas crée la vue, nous allons donc le faire. Il faut créer un dossier admin et un sous-dossier works ainsi qu'un fichier create.blade.php dans le dossier resources/views .
PHP:@extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Ajout d'une création</div> <div class="panel-body"> <form class="form-horizontal" role="form" method="POST" action="{{ route('admin.works.store') }}" enctype="multipart/form-data"> {{ csrf_field() }} <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}"> <label for="name" class="col-md-4 control-label">Nom</label> <div class="col-md-6"> <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus> @if ($errors->has('name')) <span class="help-block"> <strong>{{ $errors->first('name') }}</strong> </span> @endif </div> </div> <div class="form-group{{ $errors->has('slug') ? ' has-error' : '' }}"> <label for="name" class="col-md-4 control-label">Slug</label> <div class="col-md-6"> <input id="slug" type="text" class="form-control" name="slug" value="{{ old('slug') }}" required autofocus> @if ($errors->has('slug')) <span class="help-block"> <strong>{{ $errors->first('slug') }}</strong> </span> @endif </div> </div> <div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}"> <label for="description" class="col-md-4 control-label">Description</label> <div class="col-md-6"> <textarea class="form-control" name="description" id="description">{{ old('description') }}</textarea> @if ($errors->has('description')) <span class="help-block"> <strong>{{ $errors->first('description') }}</strong> </span> @endif </div> </div> <div class="form-group{{ $errors->has('work') ? ' has-error' : '' }}"> <label for="work" class="col-md-4 control-label">Création</label> <div class="col-md-6"> <input type="file" class="form-control" id="work" name="work" required> @if ($errors->has('work')) <span class="help-block"> <strong>{{ $errors->first('work') }}</strong> </span> @endif </div> </div> <!-- A SUPPRIMER APRES LE TEST !--> <input type="hidden" name="categorie_id" value="1"/> <div class="form-group"> <div class="col-md-8 col-md-offset-4"> <button type="submit" class="btn btn-primary"> Sauvegarder </button> </div> </div> </form> </div> </div> </div> </div> </div> @endsection
Il peut y avoir des morceaux de code qui peuvent vous sembler inconnus comme @extends et @Section, je vous invite à jeter un coup d'oeil à la vue se nommant app.blade.php dans le dossier layouts que vous trouverez également dans le dossier resources/views (ça fait beaucoup de dossiers je vous l'accorde).
Dans ce fichier vous trouvez d'autres balises, une particulière @yield.
En réalité celles que nous avons vu dans le fichier create.blade.php sont liées à @yield.
@yield permet à d'autres vues, en étendant celle dans laquelle se trouve cette même balise @yield, de placer du contenu. Ainsi le contenu de notre template se trouvant entre les balises @Section est placé au même endroit que la balise @yield de notre layout (app.blade.php).
Ainsi vous pouvez créer efficacement des vues sans pour autant re-ecrire toute une partie de votre code, dans notre cas nous insérons simplement le contenu de notre vue qui va s'implanter sur le reste du code se trouvant dans notre layout.
- Si nous nous rendons de nouveau sur notre environnement vous pourrez voir notre formulaire .
SI vous remplissez ce formulaire et que vous le soumettez vous arriverez sur une page qui est tout simplement notre méthode store().
- Pour ajouter une nouvelle création il faut créer le model Work, pour se faire entrez la commande suivante avec Artisan.
Code:
php artisan make:model Work
PHP:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Work extends Model
{
//
} fillable
Cet attribut permet de renseigner les champs qui seront modifiables, imaginez cela comme une liste blanche.
guarded
Cet attribut est tout simplement le contraire de notre attribut fillable, imaginez cela comme une liste noire.
Ainsi un champs is_admin devra être renseigné dans l'attribut guarded car cela permettra d'éviter qu'un utilisateur malicieux de passer un paramètre via votre formulaire et de s'enregistrer comme un administrateur. Cet attribut permet de renseigner les champs qui seront modifiables, imaginez cela comme une liste blanche.
guarded
Cet attribut est tout simplement le contraire de notre attribut fillable, imaginez cela comme une liste noire.
Tous les champs sont sur liste noire par défaut, du coup nous ne renseignons pas certains champs.
- Renseignez les attributs suivants comme je le fais dans le model Work.
PHP:<?php namespace App; use Illuminate\Database\Eloquent\Model; class Work extends Model { protected $fillable = ['name', 'slug', 'description', 'categorie_id']; } - Rendez-vous ensuite dans le controller WorkController et modifions la fonction store(), il faut utiliser notre model ainsi nous allons le déclarer en haut de classe.
PHP:namespace App\Http\Controllers\Admin; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use App\Work; - Puis dans la méthode store() nous devons stocker les valeurs reçues après validation du formulaire et pour cela il existe une fonction magique qui se nomme create() et qui est accessible via notre model.
Pour l'instant je souhaite simplement enregistrer le nom, le slug et la description de la création nous verrons comment transférer une image.PHP:/** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { Work::create($request->all()); return redirect()->route('admin.works.index'); } - Remplissez le formulaire sans la création, veuillez enlever l'attribut required du champs vous permettant de transférer l'image car sinon vous serez embêté pour l'essai.
Si vous arrivez sur une page blanche vous arrivez réussi à insérer des données dans notre table works.
TRANSFERT D'UNE IMAGE
Concrètement nous devons d'implanter cette fonctionnalité, tout d'abord on stock dans une variable notre nouvelle création pour pouvoir renseigner son identifiant en tant que nom de l'image que nous renseignons.
Le nom du champs est work d'où la valeur dans la méthode file(), puis nous allons stocker celle-ci dans un sous-dossier works qui se trouve dans le dossier storage à la racine de votre site.
VALIDATION
Nous savons comment enregistrer des données et comment transférer une image c'est très bien mais malheureusement ce n'est pas sécurisé car nous ne vérifions jamais si le contenu est existant, si le fichier est une image.
C'est pour cela que nous allons créer un fichier de validation de requêtes propre à nos créations.
Les règles de validation se renseignent dans un tableau, la clé correspond à votre champs et la valeur correspond à une suite de règles que je vous invite à lire dans la documentation.- Maintenant nous allons implanter le code permettant de transférer un fichier, en l'occurence une image dans notre action store().
PHP:
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$work = Work::create($request->all());
$request->file('work')->storeAs('works', $work->id.'.png');
return redirect()->route('admin.works.index');
}Le nom du champs est work d'où la valeur dans la méthode file(), puis nous allons stocker celle-ci dans un sous-dossier works qui se trouve dans le dossier storage à la racine de votre site.
- Maintenant essayons d'ajouter une création en renseignant une image, n'oubliez pas de remettre l'attribut required HTML que vous avez retiré précédemment.
- Si vous arrivez une nouvelle fois sur une page blanche c'est que tout est bon, vérifiez qu'il y a bien votre image de transférée dans le dossier storage/app/works.
Nous savons comment enregistrer des données et comment transférer une image c'est très bien mais malheureusement ce n'est pas sécurisé car nous ne vérifions jamais si le contenu est existant, si le fichier est une image.
C'est pour cela que nous allons créer un fichier de validation de requêtes propre à nos créations.
- Entrez la commande suivante avec Artisan.
Code:
php artisan make:request WorkRequest- Ouvrez le fichier généré qui se trouve dans le dossier app/Http/Requests, tout de suite nous allons modifier le code de façon à qu'un utilisateur puisse utiliser nos règles de validation. Pour se faire il faut modifier le retour de la fonction authorize().
PHP:
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class WorkRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
//
];
}
}
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
- Ajoutez les clés et valeurs que j'ai moi même mise dans le tableau.
PHP:
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class WorkRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'name' => 'required|min:2|max:255',
'slug' => 'required|min:2|max:255|regex:/^[a-z0-9]+(?:-[a-z0-9]+)*$/',
'description' => 'required|min:2',
//'categorie_id => 'exists:work_categories,id'
'work' => 'required|mimes:png'
];
}
}- Enfin, il faut déclarer à Laravel que nous utilisons ces règles de validation, pour se faire nous allons modifier le paramètre de notre fonction store(). N'oubliez pas de supprimer l'utilisation de la classe Request (use Illuminate\Http\Request;) et d'ajouter notre classe WorkRequest (use App\Http\Requests\WorkRequest;)
PHP:
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Requests\WorkRequest;
use App\Http\Controllers\Controller;
use App\Work;
class WorkController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('admin.works.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(WorkRequest $request)
{
$work = Work::create($request->all());
$request->file('work')->storeAs('works', $work->id.'.png');
return redirect()->route('admin.works.index');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}- Si vous tentez maintenant de soumettre le formulaire en commentant des erreurs vous aurez un message d'erreur pour chaque cas spécifié par nos règles.
AFFICHER UN MESSAGE DE SUCCES
Bon, c'est très bien de pouvoir afficher des messages d'erreur mais nous voulons aussi afficher des messages de succès pour cela nous devons modifier la fonction store() de notre controller mais également nos vues.
Bon, c'est très bien de pouvoir afficher des messages d'erreur mais nous voulons aussi afficher des messages de succès pour cela nous devons modifier la fonction store() de notre controller mais également nos vues.
- Modifiez dans un premier temps la réponse de la fonction store() pour utiliser des messages flash, c'est à dire des messages stockés par le biais de la session.
PHP:
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(WorkRequest $request)
{
$work = Work::create($request->all());
$request->file('work')->storeAs('works', $work->id.'.png');
return redirect()->route('admin.works.index')->with('success', 'Création publiée avc succès.');
}- Modifiez maintenant la fonction index() pour afficher une vue que vous allez créer juste après.
PHP:
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('admin.works.index');
}
HTML:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
</div>
</div>
</div>
@endsection- Si nous ajoutons une création vous pourrez voir le message de succès.
MODIFICATION D'UNE CREATION
Maintenant que nous avons réalisé la fonctionnalité de publication de création, nous devons pouvoir les modifier quand nous le voulons, personnellement je vais retirer le routing concernant la fonction show car je ne la trouve pas utile dans notre cas, ainsi pour pouvoir modifier une création le graphiste aura une icône lui permettant d'accéder à sa partie administration, mais cette fois ci depuis la partie publique si je peux dire.
- Pour exclure le routing concernant la fonction show il suffit d'utiliser une fonction disponible depuis notre fichier web.php, qui gère nos routes.
PHP:
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::group(['prefix' => 'admin', 'namespace' => 'Admin', 'as' => 'admin.', 'middleware' => 'auth'], function () {
// ici nous allons renseigner les URL correspondant à des controllers et actions précises.
Route::resource('works', 'WorkController', ['except' => ['show']]);
});
//Auth::routes();
Route::group(['namespace' => 'Auth'], function () {
Route::get('/login', 'LoginController@showLoginForm')->name('login');
Route::post('/login', 'LoginController@login');
Route::post('/logout', 'LoginController@logout')->name('logout');
});
Route::get('/home', 'HomeController@index');- Modifier la fonction edit() pour retourner une vue nommée tout simplement edit.
PHP:
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
return view('admin.works.edit');
}- Mais il existe une façon encore plus simple de vérifier cela, c'est en passant directement en paramètre un objet de notre model.
PHP:
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit(Work $work)
{
return view('admin.works.edit');
}- Je vous invite maintenant à essayer d'accéder à des URLs de ce type :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.et vous aurez une erreur vous indiquant que la vue demandée n'existe pas. Essayez par la suite un identifiant de création qui n'existe pas par exemple 393939.
- Comme vous pouvez le voir une erreur nous est indiquée, nous verrons plus tard comment modifier cela.
- Créez ensuite votre vue edit qui est sensiblement la même que celle de création.
HTML:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Modification d'une création : {{ $work->name }}</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ route('admin.works.update', $work->id) }}">
{{ csrf_field() }}
{{ method_field('PATCH') }}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Nom</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="{{ $work->name }}" required autofocus>
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('slug') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Slug</label>
<div class="col-md-6">
<input id="slug" type="text" class="form-control" name="slug" value="{{ $work->slug }}" required autofocus>
@if ($errors->has('slug'))
<span class="help-block">
<strong>{{ $errors->first('slug') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}">
<label for="description" class="col-md-4 control-label">Description</label>
<div class="col-md-6">
<textarea class="form-control" name="description" id="description">{{ $work->description }}</textarea>
@if ($errors->has('description'))
<span class="help-block">
<strong>{{ $errors->first('description') }}</strong>
</span>
@endif
</div>
</div>
<!-- A SUPPRIMER APRES LE TEST !-->
<input type="hidden" name="categorie_id" value="1"/>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Sauvegarder
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection- Comme vous pouvez le voir en vous rendant sur la page d'édition, j'ai volontairement supprimé le champs permettant de transférer un fichier, ainsi il faut modifier nos règles de validation et traiter en fonction de la méthode HTTP envoyée.
PHP:
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class WorkRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
switch($this->method())
{
case 'GET':
case 'DELETE':
{
return [];
}
case 'POST':
{
return [
'name' => 'required|min:2|max:255',
'slug' => 'required|min:2|max:255|regex:/^[a-z0-9]+(?:-[a-z0-9]+)*$/',
'description' => 'required|min:2',
//'categorie_id => 'exists:work_categories,id'
'work' => 'required|mimes:png'
];
}
case 'PUT':
case 'PATCH':
{
return [
'name' => 'required|min:2|max:255',
'slug' => 'required|min:2|max:255|regex:/^[a-z0-9]+(?:-[a-z0-9]+)*$/',
'description' => 'required|min:2',
//'categorie_id => 'exists:work_categories,id'
'work' => 'mimes:png'
];
}
default:break;
}
}
}- Maintenant que nous modifié notre fichier de validation de requêtes, il faut modifier notre fonction update() qui va prendre en paramètre ce même fichier, de la même façon que la fonction store().
PHP:
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(WorkRequest $request, Work $work)
{
$work->update($request->all());
return back();
}- Tentez de soumettre le formulaire et tout fonctionne dans l'ordre.
Pour terminer cet épisode nous allons ajouter la fonctionnalité de suppression, visuellement se sera très simple : nous ajouterons un bouton "Supprimer" sur la page d'édition qui va soumettre en réalité un formulaire caché, tout ceci avec un peu de JavaScript.
- Rendez-vous dans le controller WorkController comme d'habitude, à la fonction destroy() vous allez la modifier pour ajouter l'objet de notre modèle Work.
PHP:/** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy(Work $work) { // } - Enfin, ajoutons la fonction de suppression qui est accessible depuis l'objet de notre modèle.
PHP:
/**[/INDENT]
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy(Work $work)
{
$work->delete();
return redirect()->route('admin.works.index')->with('success', 'Création supprimée avec succès.');
}- Et pour terminer, modifiez notre vue edit.
HTML:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Modification d'une création : {{ $work->name }}</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ route('admin.works.update', $work->id) }}">
{{ csrf_field() }}
{{ method_field('PATCH') }}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Nom</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="{{ $work->name }}" required autofocus>
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('slug') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Slug</label>
<div class="col-md-6">
<input id="slug" type="text" class="form-control" name="slug" value="{{ $work->slug }}" required autofocus>
@if ($errors->has('slug'))
<span class="help-block">
<strong>{{ $errors->first('slug') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}">
<label for="description" class="col-md-4 control-label">Description</label>
<div class="col-md-6">
<textarea class="form-control" name="description" id="description">{{ $work->description }}</textarea>
@if ($errors->has('description'))
<span class="help-block">
<strong>{{ $errors->first('description') }}</strong>
</span>
@endif
</div>
</div>
<!-- A SUPPRIMER APRES LE TEST !-->
<input type="hidden" name="categorie_id" value="1"/>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Sauvegarder
</button>
<button type="submit" class="btn btn-danger" onclick="event.preventDefault(); document.getElementById('delete-form').submit();">
Supprimer
</button>
</div>
</div>
</form>
<form id="delete-form" action="{{ route('admin.works.destroy', $work->id) }}" method="POST" style="display: none;">
{{ csrf_field() }}
{{ method_field('DELETE') }}
</form>
</div>
</div>
</div>
</div>
</div>
@endsectionC'est tout pour ce deuxième épisode, on se trouve pour le 3ème dans lequel nous ferons la parte catégories des créations ainsi que la partie contact.
Amicalement,Rivals
