ViewMaker Screencast Now Live for Laravel 5.2

Access all tutorials in sprocket icon.

Published June 1, 2016 by Bill Keck.

ViewMaker Screencast Now Live for Laravel 5.2

ViewMaker is off to a good start, we already have over 100 installs. So I decided to support it with a screencast.

In part one, I go through installation and setup of ViewMaker.

It’s a lot of fun to make a screencast, but I have to say, I’m nowhere near the professional level of Laracasts. It’s a little low energy, compared to how my brain actually operates, and I sort of sound like a stroke victim…

Anyway, that’s ok, as long as the information is clear, we all have to start somewhere. I will get better at it as I continue to make videos.

Making a screencast, as raw as it is, is more fun than writing just a blog, so I will probably be doing more tutorials on screencasts than blogs in the future.

I especially want to support ViewMaker, which has a powerful set of artisan commands that will generate a lot of code for you quickly. I’m having a lot of fun with that and I think you will like it too.

In ViewMaker for Laravel part 2, I demonstrate the make:master command and the make:foundation command. The make:master command sets all the dependencies for make:foundation and the two commands can be run in under a minute, which will get you a fully working crud app, with a vue.js datagrid.

If you want to learn how to implement a vue.js datagrid with searchable, sortable, and paginated rows, use ViewMaker to create a foundation, then look at the underlying code. I demonstrate this in part 2:

I’m hoping the screen cast helps people learn the ViewMaker commands quickly. I will be doing videos for all the commands in the next few weeks. I also have a tutorial on the Github page, which has very thorough documentation.

I hope you find ViewMaker useful. 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.

Advertisements

ViewMaker make:chart Command released for Laravel Artisan

Access all tutorials in sprocket icon.

Published May 27, 2016 by Bill Keck.

The make:chart artisan commands from ViewMaker for Laravel 5.2

This week new features were released for ViewMaker, which now adds a total of 12 new artisan commands to the Laravel artisan command line tool. This week we picked up make:chart, remove commands, and the ability to add slugs.

For those unfamiliar with ViewMaker: It’s an artisan plugin installed via composer. It’s built to supercharge workflow for standing up complete foundations of code, everything from model and migration to controller and factory method for seeding. It even creates a unit test for your create form, and of course it creates views, with the option of a fully working datagrid.

You can build all of that in under a minute, including migrating and seeding the db table. It’s a lot of fun to use.

A quick reminder on how to install via composer, just run:



composer require evercode1/view-maker

Then in your config/app.php providers array, add the following:



Evercode1\ViewMaker\ViewMakerServiceProvider::class,

You can also refer to the docs, which have extensive descriptions and a workflow tutorial.

Before we talk about the make:chart command, let’s get caught up on the other big improvement, the slug option for make:foundation, make:crud, make:parent-child, and make:child-of.

Let’s do a Widget model example and run a foundation. Please note, you should use the make:master page to set up your master page with all the dependencies you need for the make:foundation command to work. See the docs for instructions on that, it’s very simple.

So assuming your master page has the dependencies, you can run the foundation command as follows:



php artisan make:foundation Widget master vue slug

In the above, Widget is the model you want to create, master is the name of your master page, and vue is the template type. Except for the slug, that is what was in the earlier versions of ViewMaker, which stands up the routes, model, controllers, factory method, unit test, migration, and views for a fully working, searchable, sortable, paginated datagrid in vue.js, all in one go.

What’s new is the slug flag, which defaults to false, so if you don’t want it, you don’t have to include it. But if you do want slugs on your show view, just include it like we did above, and you will get a fully-formatted and functional slug for all records, so that comes in handy.

So in this case if your first widget record had a name of ‘my first widget’, your show url would look like the following:



http://www.yourapp.com/widget/1-my-first-widget

We use the convention of the id, followed by the slug to make sure there is no duplicate content. You can of course change that to suit your needs.

ViewMaker also now features remove commands to make stepping backwards simple. For example:



php artisan remove:foundation Widget

When removing, we only need to supply the model name. This is really helpful, especially if you made a typo in creation of the foundation. You can just remove it and then do the correct command, and still get it done in under a minute.

All in all there are 5 remove commands, which makes stepping backwards on most commands very easy. Right now, however, if you want to step backwards on make:parent-child, which is essentially two related foundations, use the remove:foundation twice, once for each model.

Ok, so onto the really big feature. ViewMaker now has a make:chart command, which will stand up a vue.js implementation of chart.js. After making a foundation, which is a dependency for the chart, just run the following command:



php artisan make:chart Widget

This will create a fairly advanced chart for you and place it at the top of your index page. You can change that to suit your needs, but that is where it will default to.

The chart UI allows you to select chart type, bar or line. You can also select the following dataperiods:

  • 1 year
  • 90 days
  • 1 month
  • 1 week

Your results will be pulled from your database and displayed with the proper labels.

Formatting the data for charts is a bit of a pain. There are a lot of ways you can do it. Some people prefer to do the formatting in javascript, while others prefer php. I chose the php route, since it’s my primary cdoing language.

The formatting takes place in the ApiController, which the make:foundation command builds for you. It’s a fairly big method, and you are free to extract parts out to your model or other classes to suit your own taste. The code generated by ViewMaker gets you up and running quickly, but you should do some housekeeping by organizing it with whatever format you are comfortable with. If the project is small, you can leave it as is.

The main thing is you get a working prototype and since there are not that many out there in vue.js, this can be a big help in getting started and learning how to work with it. It’s actually fairly easy to work with, once you know your way around it.

While the chart works right out of the box, you’ll want to organize your assets. I don’t extract out the js and css for you, you have to do that on your own. The reason for that is that I have no way to know how you are organizing your assets, whether you are using Elixir or not, so I leave those decisions to you.

Ultimately, using Elixir is probably the best choice, if you are ready to work with that. Consult with Laracasts for how to use Elixir, they have an awesome series on that.

All of ViewMaker features a very minimal bootstrap implementation, which leaves a lot of decisions up to you on how you want to customize it. The bootstrap that it does have is enough for you to get a clear idea of everything, while at the same time, keeping it simple, so you can do your own design.

Well, that’s it for now. More will be coming…

I hope you find ViewMaker useful. 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.

ViewMaker make:parent-child Laravel Artisan Command Released

Access all tutorials in sprocket icon.

Published May 16, 2016 by Bill Keck.

The make:parent-child and make:child-of artisan commands from ViewMaker for Laravel 5.2

I’m happy to announce the release of a couple of new commands for ViewMaker. For the sake of anyone who is unfamiliar with ViewMaker, it’s an artisan plugin, available free from packagist.org. To install it:



composer require evercode1/view-maker

Then in your config/app.php providers array, add the following:



Evercode1\ViewMaker\ViewMakerServiceProvider::class,

Now when you run:



php artisan list

You will see the following commands have been added to your list of artisan commands:

  • make:child-of
  • make:crud
  • make:master
  • make:foundation
  • make:parent-child
  • make:views

These will appear in alphabetical order in your commands list.

So even though the plugin is called ViewMaker, you can see it obviously does a lot more than just create views. For example, a make:foundation stands up the following:

  • model
  • controller
  • api controller (if it does not yet exist)
  • migration
  • test
  • appropriately-named view folder
  • index view
  • create view
  • edit view
  • show view

And the foundation command appends to:

  • routes.php
  • ModelFactory.php
  • ApiController (if it already exists)

You can get all of this instantly and this can really supercharge your workflow. After running the command, you migrate, run your unit test, and factory seed. The whole sequence can be done in under a minute and then you have a fully populated datagrid to play around with.

If you are just starting out with vue.js and want to see a working datagrid that gets its data from an ajax call, this is great way to learn, since it will stand that up for you instantly.

The exact requirements for the make:foundation command is on the Github site, so I won’t repeat it here, since we are moving on to discussing the new commands:

  • make:child-of
  • make:parent-child

I created these commands to cover situations when you want to create, for example, Category and Subcategory, and you want full UI to be able to add, edit and delete them easily. So the make:parent-child command let’s you define both the parent and the child in one go and stands up a foundation for each. In addition to that, it includes the relationships and the extra column on the datagrid for the child model to show the corresponding parent model. It’s a lot of code that goes up instantly.

If we follow this example, then the command would look like this:



php artisan make:parent-child Category Subcategory master vue

The parent comes first followed by the child. Then you indicate the name of your master page (I stick to master for that), and finally, the template type you want. In this case I have selected vue to get the datagrid built in vue.js, which features robust pagination, column sorting and search.

Don’t forget to run php artisan migrate after commands like make:foundation that have a migration, otherwise the datagrid is not going to work.

Now of course there are situations where you don’t think of the child model until after you have made the parent, and for that, we would use the make:child-of command, which would almost look the same as the previous command:



php artisan make:child-of Category Subcategory master vue

In this case, you will only modify the parent to add the has many relationship and it will create a foundation for the child, along with the extra code to relate it to the parent.

Remember that there are dependencies that the datagrid requires, and you easily get them by running the make:master command if you are starting with a fresh install of Laravel, which is the recommended way to play around with ViewMaker. You will have all your dependencies in place instantly.

If you want to use the make:foundation or any of the other commands with an existing Laravel app, then consult the Github page to make sure you have included the dependencies.

Well, that’s it for now. I have more planned for ViewMaker. I hope to be able to release more commands soon.

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.

ViewMaker 3.1 released for Laravel 5.2

Access all tutorials in sprocket icon.

Published April 29, 2016 by Bill Keck.

ViewMaker 3.1

**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:

  • model
  • controller
  • api controller (if it does not yet exist)
  • migration
  • test
  • 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:

  • routes.php
  • ModelFactory.php
  • 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:



Evercode1\ViewMaker\ViewMakerServiceProvider::class,

Then run:



php artisan list

Then you will see the new commands in your list:

  • make:crud
  • make:foundation
  • make:master
  • make:views

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.

ViewMaker Artisan Command Package for Laravel 5.2 Released

Access all tutorials in sprocket icon.

Published April 10, 2016 by Bill Keck.

ViewMaker for Laravel 5.2 Released

Many times in development, you will follow a specific pattern, such as creating a route resource and a matching controller that has the following methods:

  • index
  • create
  • store
  • show
  • edit
  • update
  • destroy

The great news is that in laravel we have artisan commands that will quickly generate the controller file, class and stubs for us, giving us just the right amount of code to get started. It’s a real time-saver.

As great as that is, I found myself wishing for something to quickly stub out views. What I had been doing is the past is copying and pasting a typical pattern where I had the view folder, and 4 to 6 blade files, depending on whether or not I was using the datatables jquery plugin to make a searchable, sortable datagrid.

The problem with that approach is that it’s really easy to make a mistake and include the wrong variable or route, and you end up spending a lot of time debugging, so you lose a lot of efficiency.

Another approach to that is to make code snippets and templates in your IDE, which is a very good way to go for many tasks. But with the above pattern, you need to make at least 4 files plus a folder, so using templates will still take time.

Another way to go is to set up gists of your code so you can always refer to them. This works, but you still have to manually create a lot files.

So that was the problem I was trying to solve when I came up with ViewMaker, which is an artisan plugin that you download via composer. I had a lot of fun making this.

To pull it into your project, run the following from your command line:



composer require evercode1/view-maker

Then in config/app.php, add the following to your providers array:



Evercode1\ViewMaker\ViewMakerServiceProvider::class,

I wrote a full tutorial on the github page, so you can check that out as well. The command is structured as follows:



php artisan make:views {modelName} {masterPageName} {templateType}

So if you had a model named Widget and a master page named master.blade.php, you could run:



php artisan make:views widget master plain

And that would create the view folder and files for you.

I decided to cover 3 scenarios for creating views that match a REST pattern, plain, basic and dt. Plain, basic and dt represent the different types of templates the command will produce.

The plain templates are essentially just a stub, so if you don’t want Bootstrap or don’t want to build upon the minimal markup that is included with basic and dt, then use ‘plain’ in your command and you get the view folder and the following stubs:

  • index
  • create
  • show
  • edit

If you want the basic templates, run:



php artisan make:views widget master basic

The basic templates give you the same number of files and a little more, for example, you get a create form and edit form and a formatted show page. The views use a very light implementation of Bootstrap, so you will have to pull in Bootstrap as a dependency in your master page.

If you want the jquery datatables implementation, run:



php artisan make:views widget master dt

You will get the following files:

  • index
  • create
  • show
  • edit
  • datatable
  • datatable-script

This will give you a working datagrid on your index page that is searchable and sortable. This requires the datatables jquery plugin, so make sure you have that dependency pulled in through your master page or related files. There are a couple of other requirements as well, such as the api route and controller and the csrf token in the meta tag.

I have sample code for this implementation and the tutorial here on Github. I recommend you read the full tutorial if you are not already familiar with datatables. You can see the datatables part of the tutorial here.

Also check out the tutorial for conventions, such as multi-word models. For example, if you have a SomethingElse model, you would express that as something-else in the command.

While the make:views command will make the view folder and files for you, it will not create the model, migration, route, and controller that you need to actually view the views. Those you have to do on your own, but luckily you have artisan commands for most of that too.

Well, I had a lot of fun making this tool. I hope you find it useful. 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.