Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Hands-On Full Stack Web Development with Angular 6 and Laravel 5

You're reading from   Hands-On Full Stack Web Development with Angular 6 and Laravel 5 Become fluent in both frontend and backend web development with Docker, Angular and Laravel

Arrow left icon
Product type Paperback
Published in Jul 2018
Publisher Packt
ISBN-13 9781788833912
Length 420 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Fernando Monteiro Fernando Monteiro
Author Profile Icon Fernando Monteiro
Fernando Monteiro
Arrow right icon
View More author details
Toc

Table of Contents (13) Chapters Close

Preface 1. Understanding the Core Concepts of Laravel 5 FREE CHAPTER 2. The Benefits of TypeScript 3. Understanding the Core Concepts of Angular 6 4. Building the Baseline Backend Application 5. Creating a RESTful API Using Laravel - Part 1 6. Creating a RESTful API Using Laravel - Part 2 7. Progressive Web Applications with the Angular CLI 8. Dealing with the Angular Router and Components 9. Creating Services and User Authentication 10. Frontend Views with Bootstrap 4 and NgBootstrap 11. Building and Deploying Angular Tests 12. Other Books You May Enjoy

MVC and routes

As mentioned earlier, we will now create a component each of the model, view, and controller, using the Artisan CLI. However, as our heading suggests, we will include another important item: the routes. We have already mentioned them in this chapter (in our diagram of the request life cycle in Laravel, and also in the example diagram of the MVC itself).

In this section, we will focus on creating the file, and checking it after it has been created.

Creating models

Let's get hands on:

  1. Open your Terminal window inside the chapter-01 folder, and type the following command:
php artisan make:model Band

After the command, you should see a success message in green, stating: Model created successfully.

  1. Go back to your code editor; inside the app folder, you will see the Band.php file, with the following code:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Band extends Model
{
//
}

Creating controllers

Now it is time to use the artisan to generate our controller, let's see how we can do that:

  1. Go back to the Terminal window, and type the following command:
php artisan make:controller BandController 

After the command, you should see a message in green, stating: Controller created successfully.

  1. Now, inside app/Http/Controllers, you will see BandController.php, with the following content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class BandController extends Controller
{
//
}
As a good practice, always create your controller with the suffix <Somename>Controller.

Creating views

As we can see earlier when using the php artisan list command, we do not have any alias command to create the application views automatically. So we need to create the views manually:

  1. Go back to your text editor, and inside the resources/views folder, create a new file, named band.blade.php.
  2. Place the following code inside the band.blade.php file:
<div class="container">
<div class="content">
<div class="title">Hi i'm a view</div>
</div>
</div>

Creating routes

The routes within Laravel are responsible for directing all HTTP traffic coming from the user's requests, so the routes are responsible for the entire inflow in a Laravel application, as we saw in the preceding diagrams.

In this section, we will briefly look at the types of routes available in Laravel, and how to create a simple route for our MVC component.

At this point, it is only necessary to look at how the routes work. Later in the book, we will get deeper into application routing.

So, let's look at what we can use to handle routes in Laravel:

Code HTTP | METHOD |Verb

Route::get($uri, $callback);

GET

Route::post($uri, $callback);

POST

Route::put($uri, $callback);

PUT

Route::patch($uri, $callback);

PATCH

Route::delete($uri, $callback);

DELETE

Route::options($uri, $callback);

OPTIONS

Each of the routes available is responsible for handling one type of HTTP request method. Also, we can combine more than one method in the same route, as in the following code. Do not be too concerned with this now; we'll see how to deal with this type of routing later in the book:

Route::match(['get', 'post'], '/', function () {
    //
});

Now, let's create our first route:

  1. On your text editor, open web.php inside the routes folder, and add the following code, right after the welcome view:
Route::get('/band', function () {
return view('band');
});
  1. Open your browser to http://localhost:8081/band, and you will see the following message:

Hi i'm a view

Don't forget to start all Docker containers using the docker-compose up -d command. If you followed the previous examples, you will already have everything up and running.

Bravo! We have created our first route. It is a simple example, but we have all of the things in place and working well. In the next section, we'll look at how to integrate a model with a controller and render the view.

You have been reading a chapter from
Hands-On Full Stack Web Development with Angular 6 and Laravel 5
Published in: Jul 2018
Publisher: Packt
ISBN-13: 9781788833912
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime