I mentioned in an earlier chapter that from the controller, we always have access to an $errors variable that we can use in our views. This allows us to give error feedback to the users on the forms we are creating.
Rather than account for this every time we do a form, we could create a partial that we can include, so we only have to write the code once. I’m going to show you how to do this, even though we won’t actually be using it. This way you will know more than one way to display your errors.
So inside your errors folder, which is inside the views folder, create a file named list.blade.php.
Then put the following code in it.
Gist:
list.blade.php
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
Chapter 6: Working with the RESTful Pattern 155
</div>
@endif
So here again you can see Blade’s wonderful syntax at work. We use the if statement to determine if there are errors, and if so, we use the foreach to loop over and echo each one.
Ok, we’re ready to make our create form. Let’s go to create.blade.php and put the following contents in it.
Gist:
create.blade.php From book:
@extends('layouts.master')
@section('title')
<title>Create a Widget</title>
@endsection
@section('content')
<ol class='breadcrumb'>
<li><a href='/'>Home</a></li>
<li><a href='/widget'>Widgets</a></li>
<li class='active'>Create</li>
</ol>
<h2>Create a New Widget</h2>
<hr/>
<form class="form" role="form" method="POST" action="{{ url('/widget') }}">
{{ csrf_field() }}
<!-- name Form Input -->
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label class="control-label">Widget Name</label>
<input type="text" class="form-control"
name="name" value="{{ old('name') }}">
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">
Create
</button>
</div>
</form>
@endsection
This form is similar to what we saw in the register.blade.php file, only simpler, since we only have one input field.
Obviously, we start by extending our master page. Then we add our page title:
Chapter 6: Working with the RESTful Pattern 157
@section('title')
<title>Create a Widget</title>
@endsection
Then we get into our content section, where we have some simple markup using Bootstrap to set our breadcrumb:
<ol class='breadcrumb'>
<li><a href='/'>Home</a></li>
<li><a href='/widget'>Widgets</a></li>
<li class='active'>Create</li>
</ol>
Next let’s look at how we open the form:
<form class="form" role="form" method="POST" action="{{ url('/widget') }}">
{{ csrf_field() }}
You can see we are setting the action to /widget, which is a route we get with our route resource. The route resource has already assigned /widget post request to the store method on the WidgetController, so all of that is done for you.
We have also included the csrf token in a hidden field for us by using the csrf_field() method. You can see just how easy this all is to work with.
Next we determine the style of the form group:
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
If there is an error for name, we get the has-error style, otherwise it’s a plain form group from bootstrap.
Next is the input field:
<input type="text" class="form-control" name="name" value="{{ old('name') }}">
As I mentioned in an earlier chapter, the old() method allows you to return a value when there is an error, which is more user-friendly than having it simply disappear.
Below the input text input field, we have an if statement:
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
So if there is an error, it will display it directly beneath the input. We are doing it this way as opposed to including the list.blade.php partial because that will simply print a list of errors all at once. I like the idea of giving users feedback where the error is occurring.
So that covers the interesting parts of the file. Please note if you fail to open or close your blade directives such as @endsection correctly, you get errors that are not so explicit as to the cause. So if you see a view error that you don’t recognize, look for those kinds of errors.
Obviously I’ve given you a very granular look at this form. The reason is that you can see it will function very nicely as a template that you can copy and paste into other folders. And because we didn’t complicate the form, we don’t have a lot to chop out if we use it for something else.
If you are not quite sure about this, it’s fine, we will see it in action later in the book and it will make a lot of sense.
Now if you point your browser to:
Chapter 6: Working with the RESTful Pattern 159 my-sample-project.com/widget/create
You should see the following:
Now if you click the Create Widget button, you get a blank screen, which is expected behavior. If you don’t get a blank screen, then there is most likely a problem with your route.