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.

Advertisements

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.

Making Packages For Laravel 5.2

Access all tutorials in sprocket icon.

Published April 6, 2016 by Bill Keck.

Making Packages For Laravel 5.2

I recently made my first custom Artisan command, which was a simple code generator for traits, available now through composer install from packagist. I find that I’m constantly using Artisan to create models, migrations, controllers, requests, middleware etc., and I wanted to keep a consistent work flow as much as possible. So I came up with a rather trivial, but useful artisan command:



php artisan make:trait MyTrait AllMyTraits

That creates the AllMyTraits folder if it doesn’t already exist and stubs out MyTrait:



<?php

namespace App\AllMyTraits;

trait MyTrait
{

}

Obviously it’s just an empty stub and that’s exactly what we want from our code generator.

Once I had this done, wrote a chapter on creating customer artisan commands in my book, Laraboot: Laravel 5.2 For Beginners, which I’m happy to say just got its first review on Goodreads. A nice 5 star review always motivates me to write more, which is why I keep updating the book.

So I was pretty happy with all that and then I thought, wouldn’t it be great to share the trait command? One way the PHP community shares work is by creating packages that are hosted by packagist.org, which are then installed via composer. These are not limited to Laravel. That said, my experience in working with packages for laravel has been extremely positive. It just works really really well, from composer install to laravel configuration.

To make a package available via packagist, you of course first have to create a package. Fortunately, and this might sound a little funny, there’s an awesome package for making packages named packager by JeroenG.

So what that does is create a packages folder with everything stubbed out for you. It’s very easy to use.

Instead offering my own tutorial on this, I’m going to reference another, since it is extremely well-written. Check out:

Creating Laravel 5 Packages For Dummies by Cristian Tăbăcitu.

This is a step by step guide that will get you up and running, and he even covers how to put your package up on packagist.

So without recreating the entire tutorial here, let me just point out a tip. If you create the package within a project and then import that package via composer, make sure to follow the instructions in the tutorial about deleting the old package and the service provider reference in your config. Then I would also recommend running composer dump-autoload. I ran into this weird thing where PHP Storm was complaining about visibility on the package, even though it was installed properly, so dump-autoload took care of that for me.

Here is another article that is worth reading if your package includes routes, controllers and views:

How to Create A Laravel 5 Package in 10 Easy Steps by Povilas Korop

Package development is more an intermediate than beginner level task, but it is a lot of fun once you get up and running. If you want to play around with the package I created and use the artisan command, you can get it here on Github as well as on Packagist.

I hope you have enjoyed this article and found 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.

Bonus Material for Laraboot: Laravel 5.2 For Beginners Released

Access all tutorials in sprocket icon.

Published April 3, 2016 by Bill Keck.

Bonus Material for Laraboot: Laravel 5.2 For Beginners Released

Chapter 11: How to make a custom Artisan command

I’m happy to announce the release today of another chapter of bonus material for Laraboot: Laravel 5.2 For Beginners. This is a quick chapter to knock out how to create a custom artisan command.

All updates and bonus material are free to anyone who has purchased the book, just log into your leanpub account and pull down the latest copy.

I found myself in a slightly embarrassing situation where I was demonstrating traits and forgot to include the php open tag in the file. On top of that, I messed up the folder location. When that happened, I realized how much I love the code generators from Artisan, which help prevent these kinds of mistakes.

With artisan, a simple command line instruction gets me a perfectly formatted controller, model, middleware, request, event, etc., whenever I need it. It’s just awesome.

So I thought, wouldn’t it be cool to have an artisan command that stubs out a trait? And then I thought this would make a great tutorial as well. However, when I implemented, it was just too much for the blog. As it is, it ended up being 15 pages in the book. While none of it is especially complicated, I was very thorough in my explanations. That brings the page count to the book to 496 pages.

Anyway, writing the custom artisan command was a wonderful experience because it showed me once again how easy and intuitive Laravel really is. The docs clear and helpful. I was amazed that it that it works so well with so little effort.

That’s not the first time I’ve fallen in love with the framework. It seems to happen again and again. Laravel is the leading PHP framework and it deserves to be.