Build a guestbook application with Laravel 5
tl;dr - source code is here: https://github.com/connor11528/guestbook
Use this script to quickly scaffold a Laravel 5 app.
Add sqlite database:
The only line you want in the .env file related to the db is:
DB_CONNECTION=sqlite, get rid of the host, port, username business.
Sqlite is great for development but you probably wouldn’t use it for a production app. You could go with MySQL. If you’re interested in hooking up Laravel 5 to MySQL check this tutorial:
In the tutorial we set up a model factory for generating Signatures in our database and use tinker to generate the records. Another approach is to use database seeders.
Database seeders populate our database by running
php artisan db:seed. This calls database/seeds/DatabaseSeeder.php. That file has a class that extends the Seeder class.
In there is a run function that calls a seeder for generating Signatures:
public function run()
Generate that seeder by running
php artisan make:seeder SignaturesTableSeeder and include a call to the model factory that’s outlined in the scotch tutorial.
public function run()
To check and make sure it worked we could view the db in a GUI such as Sequel Pro or use tinker like:
php artisan tinker
In this section we set up controllers for reporting signatures, displaying them, adding them and displaying an individual resource. We’re building this as an API so I thought it was cool
that the author namespaced the controllers into an Api folder when creating them. That was as simple as
php artisan make:controller Api/SignatureController.
Additionally, we use a Laravel resource controller but specify that we do not want ALL the routes, only a few:
Route::resource('signatures', 'Api\SignatureController')->only(['index', 'store', 'show']);
Most interestingly, in our controller we make calls to and return instances of
SignatureResource, which we haven’t defined yet.
There’s also a nifty call to get the latest Signatures and ignore all signatures that have been flagged:
$signatures = Signature::latest()
ignoreFlagged method call is a custom query scope that we define with the convention of “scopeMethodNameInCamelCase”. We defined the custom query scope in the Signature model:
public function scopeIgnoreFlagged($query)
The calls to latest() and paginate() are default parts of the Eloquent ORM.
If you’re new to Laravel it is also worth checking out the route model binding included in the reporting signature route and controller.
The route looks like:
Including the signature like this actually gives us access to the individual signature in our controller. So in the update method we pass in the database instance of the signature that we want to flag:
public function update(Signature $signature)
Flag is a custom method we define in the Signature model.
Eloquent Resources (docs) are new in Laravel 5.5. Resources are a middle layer between your database and the JSON responses you send out to end users. In our case we’re going to modify the data so we don’t send out people’s email addresses and send an avatar for their image.
Jeffery Way posted a Laracast about API Resources: What’s New in Laravel 5.5: API Resources
In order to define a custom
avatar attribute for signature instances we use the synatax “getAttributNameAttribute” syntax for out function:
public function getAvatarAttribute()
sprintf returns a formatted string in PHP and
md5 creates a hash. Gravatar is a service that grabs a photo for the user based on their email address.
@rachidlaasri builds out an awesome Vue.js frontend and takes advantage of a vue-paginate prebuilt component (avail here). The pagination logic is especially interesting in the Signatures vue component. Reporting a signature and then removing it from the UI with lodash is pretty neat also:
Here we take advantage of lodash remove method.
On our SignatureForm.vue there is a success message that displays conditionally when our signature is submitted:
<div class="alert alert-success" v-if="saved">
Overall very good tutorial about building an API with Laravel 5.5 that hooks up to a Vue 2 frontend. We used a lot of Laravel configuration concepts to extend our models and even built a resource layer to modify the JSON that we return to Vue.
Make sure to check out the full tutorial on Scotch.io