Database, Authentication and Vue.

Third post in the Mini Facebook Clone Series

Posted on October 24, 2016 in Facebook Clone, Laravel PHP Framework, vue.js

Database connection

If you open the file config/database.php and have a quick read through, you will notice that Laravel comes with three connection types already pre-defined. We are going to use an SQLite database for this tutorial but please feel free to use a MySQL or PostgreSQL database. I would recommend using a MySQL or PostgreSQL in production, but SQLite is easy to setup for development if you don't have either MySQL or PostgreSQL installed.

You may have noticed in the config/database.php this line of code:

'default' => env('DB_CONNECTION', 'mysql'),

Now, what this is saying is that, if there is a value inside your .env file with the key DB_CONNECTION use that value. Otherwise use 'mysql' as the default connection. We want to use SQLite so let's open our .env file and change this now. Change the following lines:

// Change from this:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

// To this:
DB_CONNECTION=sqlite

That's it for the environment variables. Back in our config/database.php file you may have seen under the 'connections' array that the SQLite connection is either looking for a 'DB_DATABASE' value or is defaulting to the database_path('database.sqlite'). Because we haven't given a 'DB_DATABASE' value, we will create our SQLite database at the default location. database_path() is a Laravel helper method which helps us get the full path to our database folder in the root of our project. So, let's create our SQLite database. Open up your terminal and run the following command:

touch database/database.sqlite

If you now open your database folder, you should see your newly created database.

Authentication

Now that we have our database, we are ready to utilise Laravel's built-in authentication system. Open your terminal and run the following command:

php artisan make:auth

You should see the output from your terminal saying that the "Authentication scaffolding generated successfully.". So what has this done? While writing these tutorials, I have been creating the project alongside them and using a versioning control system called git. This allows me to see which files has changed since my last commit. So, running a git status from my terminal shows me that the following files have been modified or created:

Image of terminal output

So, from that one command we see that it has modified our routes/web.php file, which we haven't looked at yet but will shortly and it has also created four new files. Let's start with looking inside our routes/web.php file.

<?php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index');

Let's look at the first block of code starting on line 3. What it is doing is listing for HTTP GET requests for the following URI '/'. When we receive this certain GET requests, we will then serve the browser with our view('welcome');. The view() function looks for files within resources/views. When using this function, you do not need to use the extensions of the file. So this means that view('welcome') will look for the following file: resources/views/welcome.blade.php. Pretty clever. We will look more into routes further in the series and how we might use other HTTP verbs like POST/PATCH/DELETE.

The next block of code on line 7 was added from the Laravel authentication scaffold. What it is doing is using Auth class within the Illuminate package from Laravel which has a static function called routes. This function creates all the routes we need for our Authentication layer of the application. An easy way to see the routes it creates is by running a command within our terminal. Open your terminal and run the following command:

php artisan route:list

You should see a similar output:

Image of terminal output

From this list, we can see our initial route to the URI '/' and also the '/home' route. There is also an '/api/user' which we will ignore for now. The rest of the routes is created from the Auth::routes() function.

We have one last thing to do before we can register with our app and log in. From the terminal run the following command:

php artisan migrate

You should see that two tables were migrated. A users and password_resets table. Fantastic, now navigate to http://mini-facebook-clone.dev or your development site, and you should see that now in the top right corner you should see 'LOGIN' and 'REGISTER' links. Click on register and fill in the form and click 'Register'. You should then be taken to the '/home' URI and be logged in. The '/home' route is protected by an auth middleware. So if you were to log out and try to access the home route again before logging in it should redirect to back to the login page first. Great, so from a couple of commands from the terminal we have a fully functioning Authentication system and a way to protect routes from unauthorised users.

You mentioned middleware.

Middleware is certain checks that can be made before certain routes to make sure the user is authorised to access this area. Or, for instance, modifying the user's name. This should only be allowed by either the user themselves or by maybe an admin user. You could create a middleware to check to make sure the user is authorised to edit the user they are trying to modify.

Vue.js

Before we finish off this post I mentioned Vue. So without further waiting let's pull in our JavaScript dependencies. Laravel already comes with a package.json file with some dependencies of its own. Let's pull them in now. From the terminal run the following command:

npm install

This can take a minute or two, but once it has finished, it will have grabbed all the files needed to start using Vue within our application.

Open gulpfile.js, and you should see a few lines of code. The lines at the top are pulling in packages to help with our build tasks. Elixir helps us with default tasks of concatenating our styles or javascript files as well as allowing us to run webpack to build our ES6 code. A lot of power with only a few lines of code needed. We can see that currently, the main command is the following:

elixir(mix => {
    mix.sass('app.scss')
           .webpack('app.js');
});

So, by default Elixir will look within our resources/assets folder and then js or sass folder depending on the command given. So it is currently going to take our app.scss and then convert the SASS into CSS and output the results within our public folder. It is also going to take our app.js file and run Webpack and convert the files and return the output to our public folder. Why do we need to use Webpack? Well, we will be using Vue Components, and our web browsers do not know how to handle them. Using Webpack loaders, we can tell Webpack how to treat them, and it then returns to us our browser friendly JavaScript file. Laravel, as you just saw, has already created app.js and app.scss within our resources folder. Have a look through them if you like, but we will be modifying / removing some of them in future posts. Now from your terminal run the following command:

gulp

This command does require you to have Gulp installed. If you receive an error run the following: npm install -g gulp. This should allow you to run the command from your root project location.

You should see a similar output below:

Image of gulp output

This is telling you what it has just done to your files and where it has saved the resulting files. The two locations are public/css/app.css and public/js/app.js. If you now open resources/views/home.blade.php and replace the contents to look like the following:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <example></example>
    </div>
</div>
@endsection

If you now open your application and log back in you should notice that instead of the original 'you are logged in' message you should be seeing an example component. Great, this is showing us that our gulp task is working.

Next

In the next post, we will look at modifying our current Vue components and starting our initial layout of the app and user settings feature.


comments powered by Disqus