Laravel Basic Routing

by Salitha Chathuranga February 24, 2018 2 Comments


This is the third tutorial done using Laravel by me. I decided to talk a bit about routing basics throgh this one. Routing means the way how you would shows the URL for a web page in the address bar of the web browser. We can make it as we want to show. After creating routes, when you type a specific route in URL bar, then you are sent to a corresponding web page. So, let's move to the tutorial...

First you need to create a new Laravel project to try this from scratch. In my case I will create a new project called SampleApp in my Laravel folder located in C:\xampp\htdocs.

cd C:\xampp\htdocs\Laravel
composer create-project laravel/laravel SampleApp --prefer-dist
cd SampleApp
php artisan serve
When you type localhost:8000 (according to your port) you will see the basic view of a default Laravel project in your browser.

Now go into your project folder from a text editor like Sublime Text. Find the web.php file included in the routes folder. What is in it?


Here, welcome is the default view that can be found in resources/views folder. It's welcome.blade.php file. As I mentioned in Laravel views and Templates article, create a master.blade.php file and a file called home.blade.php. Here, master is the template file which is inherited to the other views. All the styles are included in this master file

master.blade.php


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

</head>
<body>
 <div class="container" style="margin-top: 30px;">
  @yield('content')
 </div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>

home.blade.php


@extends('master')

@section('content')
<h1>Welcome to LARAVEL</h1>
<br>
<img src="https://cdn-images-1.medium.com/max/1201/1*OGCE-B4onkKZyAzf1Ge0Ew.png">
<br><br>
<h3>This is index view</h3>
@endsection

Now create another file called about.blade.php.


about.blade.php


@extends('master')

@section('content')
<h1>This is about page</h1>
<br>
<h3>This article is based on Laravel and written by TechPool</h3>
@endsection

You have 3 view files..Both the files called home and about is having the features that master have because of the inheritance. Now go to the the file web.php included in routes folder. We are going make routes for the created views. 


Make Routes

1. Route for index view

Now you have seen the web.php file. It gives you the route for index by linking welcome view file. But now, It has to be changed. Among the 3 views I created, I considered the home.blade.php as the index view. So I change the view like this by replacing welcome by home.



Now you can see the home view like this..

2. Route for a separate view

In our application, we can have many pages other than the index view. Previously created about.blade.php is such a view. So, I'm going to make route for it. When you visit web sites, you may have seen the URL convention. When you go to another page URL denotes it as website name/page. So I use this format. Since we run the application in locahost, I want to go to about page when the URL is typed as localhost:8000/about. How to make the route? This is it...

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

This returns the view named as about. Now type the URL as localhost:8000/about in your browser. You will get the about page.


3. Route for accessing an ID to a view

When you want to get an ID of anything through the URL, you have to make a route in a specific way. I will do it now. Imagine when you type localhost:8000/users/23 in address bar, the typed ID should be viewed. I do this without a view. OK? I want to just show you the routes...How to do this?
This is the code.

Route::get('/users/{id}', function ($id) {
    return 'The ID of the user is '.$id;
});

Include this route in web.php and see the result by typing localhost:8000/users/23 in address bar. You get the ID? I think so..


4. Route through a Controller

Usually in MVC architecture, Controllers are the files that loads views. All the above routes were created to just make you aware of creating routes. Now I'm going to make a route through a controller. First create a view to load through the controller. I create one called contact.blade.php.

@extends('master')

@section('content')
<h1>
This is contact page</h1>
<h3>
I'm Salitha Chathuranga</h3>
@endsection

Important:
I move this view to a folder called pages within the views folder. Here I want to show you how to get a view within a sub folder.

Then we can to make a controller. Open a cmd and type this command.

 php artisan make:controller New_controller



Here, New_controller is the controller name I made. Give a name as you wish. You can find the created controller in app/Http/Controllers.


Now I'm going to make a function to load another view through this controller. My function is contact.

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class New_controller extends Controller
{
    public function contact(){
     return view('pages.contact');
    }
}

Look at the line returns the contact view. I have coded it as pages.contact and not as contact. This is the way to return a view within a sub folder of views folder.

As the final step, let's move to create the route for this contact function to load contact view. In web.php file, include this route.

Route::get('/contact', 'New_controller@contact');

We should use the format controller@function to load a particular view. Before it you can include the way you type URL to load it. Now open your browser and type localhost:8000/contact and see the result. Is it like this?



That's all..!

Long Tutorial? May be..I needed to explain you the way to create routes in different ways. That's why this became bit long. Routes are very important to arrange the URL view when loading web pages in every application. Laravel has a easy route setup like this. So, I invite you to experiment this and get the idea to make routes using Laravel...

Good Luck!



2 Comments