Access all tutorials in sprocket icon.
Published April 29, 2016 by Bill Keck.
**update 5/4/2016 ViewMaker 3.2 released with Vue.js datagrid column sort and pagination**
As most who follow this blog know, I’ve been working on an artisan plugin named ViewMaker. The project was inspired by my simple and trivial trait-maker artisan plugin, which I made mostly to demonstrate how to make a custom artisan command and to also help myself remember the trait syntax. It was a good learning experience.
Once I had that plugin built, I thought, wouldn’t it be cool to do the same thing for views? So I banged up a quick version that let you input a model name, the name of your master page, and a template type, and with that one command, create up to 4 views, including index, create, edit, and show. It was just a simple command to stub out your views, so if you ran the following, for example:
php artisan make:views widget master basic
You would get views for a widget model, that extended a master page named master, and used the basic template type, which included index, create, edit, and show. If you chose the ‘dt’ or ‘vue’ template, you would get everything you need to display a working datagrid on your index page. The dt template is an implementation of jquery datatables and the vue template is vue.js data grid implementation.
In the first version, you still had to manually create your model, route, controller, migration, etc., so I put together extensive documentation on the conventions used, so users would know what they needed to do to actually render the views that ViewMaker creates.
I quickly realized though, that it was possible to make a lot of mistakes and typos, and again asked myself, wouldn’t it be cool if you could create the supporting route, controllers, migration and model with one command?
As I thought about it, I also realized that at the same time, I could create a factory method and unit test, so I came up with this concept of a foundation, which let’s you stand all that up, including the views, with one simple command. If we use the widget model example, we could do the following:
php artisan make:foundation widget master dt
This will give you everything you need for a working datagrid:
- api controller (if it does not yet exist)
- appropriately-named view folder
- index view
- create view
- edit view
- show view
In addition to creating those files, it also appends to the following files:
- ApiController (if it already exists)
Now that’s a lot for a single command to do, this is a real time-saver. However, for all this to work properly, it still requires certain things
like a jquery dependency and a meta tag for csrf token in your master page.
I saw that as too easy of a point for failure, so I created the make:master command:
php artisan make:master master Demo
The above command will make a layouts folder in your views folder and place the following within it:
- master (you give it your name, in this case we called it master)
- meta partial
- css partial
- scripts partial
- bottom partial
- nav partial
- shim partial
So that includes everything you need to use the make:foundation or the make:views command successfully. Additionally, it inserts the application name, in this case Demo, into the navbar-brand class in the nav partial. If you leave off that input, it defaults to Demo.
All of the templates are built around a single field name, the model_name field, so you can quickly prototype your models. And since only one field is provided, you don’t have to do a bunch of deleting to get rid of unwanted fields. You can quickly add your own columns to the migration, add them to the $fillable property on the model, and add them to the controller methods. So this is just the right amount of scaffolding to help you move along quickly.
Compound model names are also supported, so if you have a BigWidget model, you can still use make:foundation to create it.
For those who are unfamiliar with either jquery datatable or vue.js, a working prototype is a great place to start, and you can get that easily by running the make:master and make:foundation commands.
Installing ViewMaker is super-simple, just run the following from the command line:
composer require evercode1/view-maker
Then in your config/app.php file, add the following to the providers array:
php artisan list
Then you will see the new commands in your list:
I have extensive documentation, including a make:foundation workflow tutorial on the Github page. The best way to get familiar with what it does is to create a fresh install of Laravel, then try the make:master and make:foundation commands. You can follow the workflow tutorial and you will see how easy it really is.
I have plans to continue to expand the plugin with new features, so don’t be surprised if you see it offer new commands and parameters in the future. If you have it installed, you will get the latest version every time you run composer update.
Click on the sprocket icon at the top of the page to see all my Laravel articles and tutorials. Please comment, share, like and review if you can, thanks.
I don’t have a donate button, but If you would like to support my work and learn more about Laravel, you can do so by buying one of my books, Laraboot: laravel 5.2 For Beginners, I really appreciate it.