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.

vue.js paginated datagrid powered by ajax and Laravel 5.2

Access all tutorials in sprocket icon.

Published May 9, 2016 by Bill Keck.

I’ve been working on ViewMaker, which is a free plugin for Laravel artisan, and one of my main objectives with the make:foundation command was to stand up a working datagrid that was fed by an ajax call with Laravel.

I worked really hard to make a paginated set of data results that has column sorts and complete control over the pagination. The pagination navigation features a page by page link, previous and next buttons that only show when appropriate, first and last buttons, and a go to page input and button.

I also added an ajax-powered search box that queries on a keyup event. This produces column sortable, paginated results as well. All of this is done with vue.js, which is a javascript library that many Laravel developers are using these days.

One of the things I really struggled with was I couldn’t find a working example to follow. Luckily, I had bought The Majesty of View recently, which is an excellent book on vue. The book is really great for getting started with vue, but it wasn’t explicit enough with its pagination example for me to use it for my laravel datagrid.

Instead I used the datagrid example on vuejs.org as a starting point and built it up from there. Truth be told, I hit up one or two of the enterprise developers at work for some hints too, since I’m relatively new with vue. There’s nothing quite like working on a datagrid to move your js skills along.

Since I followed the datagrid from the vue.js example, I built it with a component, so this was a real crash course in vue.js. You can check out my work by installing the ViewMaker plugin, which will let you create a working version of the datagrid, along with the api controller and everything else you need in under a minute. Check out the docs on ViewMaker if you want to learn how to do that.

I’m going to do a deep dive tutorial on all this, which will probably appear in one of my books, since it’s too much for this blog and wordpress doesn’t let me publish js code snippets.

If you do play with ViewMaker’s datagrid, keep in mind that you need to run vue.js not vue.min.js, otherwise you don’t get important warnings and error messages. Also Chrome has a dev tools plugin for vue, but you also need to be using the not minified version to use that.

I’m going to be building more features into ViewMaker, which I will be announcing on this blog. My goal is to make ViewMaker an artisan plugin that you can’t live without.

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.