Laravel Views Tutorial- Creating a View ~ W3Laravel

Laravel Views Tutorial- Creating a View

In the last tutorial HTTP Routing- Laravel Routing Tutorial we learnt about setting a custom url for your routes in the web application. In this tutorial we will learn to separate our application logic from the presentation logic i.e. will learn to create a view in our web application. The views contain all the html that has to be shown on the web page or the outputs that we want to echo out. So follow the post Laravel Views Tutorial- Creating a View to know how to create a view in laravel.

Laravel Views: Basics

Route without a view

We already have learnt how to create a route in our previous tutorial. Let create a route that displays some html element.

So, open your routes.php file and create a route like this.

Route::get('sample', function(){
 echo '<html><head><title>Welcome to W3Laravel</title></head>';
 echo '<body><h1>This is the first heading</h1><p>This is the first paragraph of this website</p>';
 echo '</body></html>';
});

Open this route in your favorite web browser http://localhost/w3laravel/public/welcome (Replace w3laravel with your project name).

Here is the output

It works well, but it is very difficult to write whole program ( html elements, php codes) into echo commands.

So, what we will do? We will create a view and separate the presentation logic from the application logic.

How it can be? It can be done using Laravel Views. So, let's move ahead and create a view.

Creating a view

Create a new file sample.php into resources -> views folder.

Write some html codes. For ex-

<!DOCTYPE html>
<html>
<head>
 <title>Welcome to W3Laravel</title>
</head>
<body>
 <h1>This is the first heading</h1>
 <p>This is the first paragraph of this website</p>
</body>
</html>

Go back to the routes.php and change the sample route like this.

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

Now, again open sample route to the web browser and see the output. The output will be the same as before.

So, we have separated the presentation logic using the concept of Laravel views.

Laravel Views: View Data

Passing Data to a view

We can also pass some data to a view. The data should be an array with key/value pairs. These data can be easily printed to our view using $key.

Let's have an example.

Passing data to a view

Route::get('sample', function(){
 $data = array(
  'var1' => 'Apple',
  'var2' => 'Microsoft',
  'var3' => 'Sony',
  'var4' => 'Dell',
  'var5' => 'HP'
  );
 return view('sample', $data);
});

Displaying data to the view

<!DOCTYPE html>
<html>
<head>
 <title>Welcome to W3Laravel</title>
</head>
<body>
 <h1>This is the first heading</h1>
 <p>This is the first paragraph of this website</p>
 <p><?php echo $var1 ?></p>
 <p><?php echo $var2 ?></p>
 <p><?php echo $var3 ?></p>
 <p><?php echo $var4 ?></p>
 <p><?php echo $var5 ?></p>
</body>
</html>

Sharing data with all the view

There can be a situation where you may need to share a piece of data with all the views. This can be done using the share() method of laravel.

Create two new views sample1.php and sample2.php. In the both laravel views, print the same variable $name.
sample1.php

<!DOCTYPE html>
<html>
<head>
 <title>Sample 1</title>
</head>
<body>
 <p><?php echo $name ?></p>
</body>
</html>

sample2.php

<!DOCTYPE html>
<html>
<head>
 <title>Sample 2</title>
</head>
<body>
 <p><?php echo $name ?></p>
</body>
</html>

Open the file routes.php and create two corresponding routes sample1 and sample2.

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

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

Open the file app -> Providers -> AppServiceProvider.php and inside the boot method add a share() method with key/value pair like this. Here we have used name as the key, as we have printed $name in both of the views

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    
    public function boot()
    {
        //
        view() -> share('name', 'Sunny Kumar');
    }

    public function register()
    {
        //
    }
}

Run both the route into your web browser and you will get the same output.

Sample1- Laravel Views Totorial- Creating a View- W3Laravel

Sample2- Laravel Views Totorial- Creating a View- W3Laravel

Conclusion

I'm ending up with the tutorial Laravel Views Tutorial- Creating a View. We appreciate any kind of query or suggestion. So, feel free to comment if you are having problems regarding this tutorial. We will back soon with some great tutorials on laravel. Stay tuned.

W3Laravel

The complete Lavarel framework development tutorial

Friday 22 July 2016