[Participant@chinomnso]

In the previous article in this series, I laid the groundwork for CRUD operations in Laravel by creating a special controller that will handle resources on our blog. We did not do any CRUD operations, but we set up a skeletal structure for the class that will eventually handle our blog posts.

In this article, we will work with one of the methods in the class, create(). The purpose of this method is simply to display a form with which we will create new posts. When the user submits the form, we will validate the data and process it, storing it in the database. This validation and storing will occur in the store() method. Therefore, the form will be posted to the method. This might be a little different if you’re new to Laravel, because you may be used to posting forms to URLs.

To display a form using the create() method, simply return the view containing the form you want to display. Edit your PostController.php file and change the create() method to look like this:

public function create() { return view('posts.create'); }

1 2 3 4

public function create() {    return view('posts.create'); }

For this to work, we will have to create a view that corresponds to what we have in the snippet above. Take note of the folder in which the create.blade.php file exists: posts. You would have to create a folder, posts and save it in the resources/views directory.

To simplify working with forms, we are going to make use of a form helper for Laravel. I am working with Laravel 5.8. So, you should head over to LaravelCollective’s page for HTML. There, you will find instructions on how to install the Forms & HTML package. For simplicity and clarity, I’ll restate them here.

Open the composer.json file in your project’s root directory. Locate the following block of code and paste "laravelcollective/html", just after "laravel/framework": "5.8.*",.

"license": "MIT", "require": { "php": "^7.1.3", "fideloper/proxy": "^4.0", "laravel/framework": "5.8.*", "laravel/tinker": "^1.0" },

1 2 3 4 5 6 7

"license": "MIT",     "require": {         "php": "^7.1.3",         "fideloper/proxy": "^4.0",         "laravel/framework": "5.8.*",         "laravel/tinker": "^1.0"     },

Now, we need to download the package we have added to the composer.json file. To do that, open your terminal, be sure you are in your project’s base directory and run the following command:

composer update

Just wait and watch Composer do its thing. It would start downloading packages and dependencies from the internet and putting them inside your vendor folder. Depending on your internet connection, this could take as many as 5 or 10 minutes. If you take a look at the vendor folder in your project prior to running this command, you would notice that there isn’t any laravelcollective folder. But if your command runs successfully, a folder with that name should appear there.

After installing a new package or dependency, you need to inform Laravel that there is something you have added to your project. This is done by means of providers. To add a provider for this package, open the app.php file in your project’s config folder. Locate the Laravel Framework Service Providers block and add the following under the last line in the block:

Collective\Html\HtmlServiceProvider::class,

1	Collective\Html\HtmlServiceProvider::class,

This makes it possible for us to use the features that come with the package. If you scroll down the app.php file, you would notice the Class Aliases section. Aliases allow us to call namespaces by shorter names. I won’t go into details now, but I’ll show you how to create an alias for this new package we’ve just downloaded.

If you head back to LaravelCollective’s page for HTML & Forms, you would see the following two lines suggested:

'Form' => Collective\Html\FormFacade::class, 'Html' => Collective\Html\HtmlFacade::class,

1 2	'Form' => Collective\Html\FormFacade::class, 'Html' => Collective\Html\HtmlFacade::class,

Copy them and paste them at the end of the Class Aliases block so it looks like code block that follows. For the sake of simplicity, I have redacted some of the code to be here but left enough for it to be recognizable.

'Aliases' => //lots of aliases here........ 'Request' => Illuminate\Support\Facades\Request::class, 'Response' => Illuminate\Support\Facades\Response::class, 'Route' => Illuminate\Support\Facades\Route::class, 'Schema' => Illuminate\Support\Facades\Schema::class, 'Session' => Illuminate\Support\Facades\Session::class, 'Storage' => Illuminate\Support\Facades\Storage::class, 'Str' => Illuminate\Support\Str::class, 'URL' => Illuminate\Support\Facades\URL::class, 'Validator' => Illuminate\Support\Facades\Validator::class, 'View' => Illuminate\Support\Facades\View::class, 'Form' => Collective\Html\FormFacade::class, 'Html' => Collective\Html\HtmlFacade::class, ],

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

'Aliases' =>         //lots of aliases here........         'Request' => Illuminate\Support\Facades\Request::class,         'Response' => Illuminate\Support\Facades\Response::class,         'Route' => Illuminate\Support\Facades\Route::class,         'Schema' => Illuminate\Support\Facades\Schema::class,         'Session' => Illuminate\Support\Facades\Session::class,         'Storage' => Illuminate\Support\Facades\Storage::class,         'Str' => Illuminate\Support\Str::class,         'URL' => Illuminate\Support\Facades\URL::class,         'Validator' => Illuminate\Support\Facades\Validator::class,         'View' => Illuminate\Support\Facades\View::class,         'Form' => Collective\Html\FormFacade::class,         'Html' => Collective\Html\HtmlFacade::class,     ],

Save this file and we should be able to build forms very easily now. We would now open the create.blade.php file with which we have been working and build the form. Copy the code below, paste it into the file you just opened and save it. At the end of the day, your file should look much like the following:

@extends('layouts.formslayout') @section('title', '| Create New Post') @section('form') <div class="row"> <div class="col-md-2"> </div> <div class="col-md-8"> <h1>Create New Post <hr /> { !! Form::open(['url' => 'posts.store']) !! } {{ Form::label('title', 'Post Title') }} {{ Form::text('title', 'Enter title here . . . ', array('class' => 'form-control')) }} {{ Form::label('body', 'Post Body') }} {{ Form::textarea('body', 'Lorem ipsum dolor sit amet . . .', array('class' => 'form-control')) }} {{ Form::submit('Submit New Post', array('class' => 'form-control btn btn-primary pull-right')) }} { !! Form::close() !! } </h1></div> <div class="col-md-2"> </div> </div> @endsection

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

@extends('layouts.formslayout') @section('title', '| Create New Post') @section('form') <div class="row">     <div class="col-md-2">     </div>     <div class="col-md-8">         <h1>Create New Post             <hr />             { !! Form::open(['url' => 'posts.store']) !! }             {{ Form::label('title', 'Post Title') }}             {{ Form::text('title', 'Enter title here . . . ', array('class' => 'form-control')) }}                          {{ Form::label('body', 'Post Body') }}             {{ Form::textarea('body', 'Lorem ipsum dolor sit amet . . .', array('class' => 'form-control')) }}             {{ Form::submit('Submit New Post', array('class' => 'form-control btn  btn-primary pull-right')) }}             { !! Form::close() !! }     </h1></div>     <div class="col-md-2">     </div> </div> @endsection

In the code above, { !! Form::open(['url' => 'posts.store']) !! } and { !! Form::close() !! }are the equivalent of HTML’s opening and closing form tags respectively. They would roughly translate to the following in HTML:

<form action="posts/store"> <!---form elements go here---> </form>

1 2 3

<form action="posts/store"> <!---form elements go here---> </form>

Our form action, or form URL in Laravel, is the method to which the form would be submitted. In this case, it is the store() method in the posts controller.

{{ Form::label('title', 'Post Title') }} {{ Form::text('title', 'Enter title here . . . ', array('class' => 'form-control')) }} <!--HTML equivalent---> <label for="title">Post Title</label> <input class="form-control" type="text" placeholder="Enter title here . . ." />

1 2 3 4 5 6

{{ Form::label('title', 'Post Title') }} {{ Form::text('title', 'Enter title here . . . ', array('class' => 'form-control')) }} <!--HTML equivalent---> <label for="title">Post Title</label> <input class="form-control" type="text" placeholder="Enter title here . . ." />

With the “translation” of Blade to HTML above, you can easily figure out the rest of the Blade code we have used to build our form. To learn more, read up LaravelCollective’s documentation on HTML & Forms. As you work with the code above, notice how classes and placeholders are implemented in Blade.

If everything goes well, your form should look like what we have in the image at the beginning of this article. The next step would be to validate whatever is typed into the form and store it in the database. That would be treated in the next article.

[Author]

Posts