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.

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.

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.

Majesty of Vue.js book Released and it’s Awesome!

Access all tutorials in sprocket icon.

Published April 16, 2016 by Bill Keck.

Majesty of Vue.js now available at Leanpub

My friends, the long dark javascript nightmare is coming to an end. At least that is what it feels like. We live in an exciting time because, with the release of ECMA script 6, javascript is finally starting to resemble syntactically consistent language.

Now I may just be speaking from personal experience, but I have always hated javascript. And when I say hated, I mean hated with a passion. It just seems like such a mess. Even the very idea of stuffing everything into a single file that the browser loads just seemed ridiculous. And then of course there is the spaghetti itself…

Well, things are changing quickly with ECMA script 6 finally supporting modules that let us separate our code. We’ll have to see how long it takes for that feature to become common in browsers.

In the meantime, Laravel Elixir can transpile ECMA script 6 into plain javascript for us, another amazing feature of Laravel. Laracasts has a very good series on elixir that can get you up and running quickly, so I recommend checking that out.

If you are like me, you follow Laracasts religiously, not only for Jeffery Way’s awesome tutorials on PHP and Laravel, but also for current trends. So I found it really interesting that a while back Jeffery started talking about the Vue javascript framework. He predicted it would be big. He was right.

To be honest, when I first saw it, a lot of it went over my head. The series moved quickly and although the videos were interesting, I wasn’t retaining much, always a problem when I’m digesting a lot of new information.

Since we were starting to use Vue at work, I felt the need to start working with it. I incorporated a basic data grid, written in Vue in my ViewMaker plugin for artisan. But I was frustrated that I didn’t know how to include the same functionality as my datatables jquery version, so I started looking around for online tutorials. I watched the Laracasts series again.

I pretty much realized that I wasn’t getting anywhere. That’s no knock on the videos, they’re great, but I didn’t know how to move towards what I wanted. And because Vue is fairly new, I couldn’t find any good examples online.

So this last weekend, I found myself googling “Vue.js book”. And what do you know, just 4 short days ago, a book is released on Vue called the Majesty of Vue by Alex Kyriakidis, Kostas Maniatis and Evan You. I give the book 5 stars, it is extremely well-written.

For anyone who doesn’t know, Even You created Vue.js, and 30% of the proceeds of the book go to Evan You. Hopefully this will help him continue his great work.

I don’t normally refer to a lot of technical books on this site. It’s not because I don’t read them. Most I don’t like because they are riddled with errors, and I try to avoid saying negative things about other people’s work.

So it’s great to be able to talk about the Majesty of Vue because it is an excellent book on Vue js and covers all the important topics, standing you up from scratch in a very intuitive way.

I really loved this book because they gave me little details that stopped me from being tripped up.

For example, they take the time to explain that the instance of Vue will only bind to the first instance of the element named in the Vue constructor. And in their examples, they were binding to Vue to the bootstrap container class.

Now I wanted to follow along in the book by doing everything from inside a laravel app, so I could be comfortable with putting the @ sign in front of the curly braces, since Vue uses the same braces as Blade and you have to escape them or blade will try to parse them. For example, if you had a name variable in your Vue data that you wanted to access inside of blade:



@{{ name }}

The problem I ran into by using blade was that I was already calling the container class from my master page, so when I copied it in again from their examples, it was actually the second instance of the element, not the first, so Vue was not bound to it and it did not work. But because they didn’t overlook a small detail and warned me in advance of that behavior, I instantly knew what the problem was.

As someone who is trying to make a lot of progress with Vue quickly, this was the right book at the right time.

I should point out that the book itself is a work in progress and currently sits at 144 pages, but I have to say, they are a very worthwhile 144 pages. I’m looking forward to seeing the book completed.

I don’t want to say that learning Vue is easy, even though it probably is if you are already proficient in javascript. I don’t live that world however. Even though I’ve read books on javascript, I always felt like a stranger in a strange land, like I was always trying to finish a conversation that someone else had started. But Vue is very digestible. It makes sense. It looks like programming. It has a syntax you can remember.

WordPress will strip out my div tags, but this will give you the idea:


create a div with an id="app"

//vue operates on elements between the opening and closing tag


//and in your script section: 

new Vue({ 

// binds the instance of vue to the element with an id of app 

el: '#app' 

});

That’s all it takes to wire it together, as long as you have a call to the vue.js file via cdn or local file. It works right out of the box.

As someone who has struggled with javascript, I feel like I’m actually learning something. I’m excited about the progress I’m making. I even wrote my first custom filter recently, and it just worked beautifully.

I won’t try to tell you all the great features of Vue, so many others are better at it than I am. I’ll just sum this up by saying that others are calling it the best javascript framework out there, I think they are probably right, and the Majesty of Vue is the perfect book to get you up and running. And at the same time, you’ll be supporting development of the framework, so it’s a win win for everyone.

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.