GEPCODE

In the previous chapter/article we have discussed how to throw data from route to view, but we display data in view still using <?php echo $variables ?> which is where there is actually an easier way to display variable in our view. Namely with the blade templating engine which has been provided by laravel. Come on we use an easier and more secure way to deal with XSS (Cross Site Scripting). Skuy

article source code previously here

Displays Variable of Route on Blade

1. in the previous chapter - throw data from route to view we have created an array variable which we pass to view. let's repeat these steps so that we are more familiar with the layout and syntax that has been provided.

2. Open file routes/web.php create a route get /about like the code below.

Route::get('/about', function () {
    return view('about', array(
        "webname" => "gepcode.com",
        "owner" => "Gilang Pratama",
        "usiaweb" => "7 Bulan"
    ));
});

route this refers to view about.blade.php

3. open file resources/views/about.blade.php

4. After that, the way to call the variable that has been thrown is like this

{{ $variable }}

So we can code about.blade.php like the code below

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <table>
    
    <tbody>
      <tr>
        <td>Nama Web </td>
        <td> : </td>
        <td>
         {{ $webname }}
        </td>   
      </tr>
      <tr>
        <td>Pemilik Web </td>
        <td> : </td>
        <td>
          {{ $owner }}
         </td>
      </tr>
      <tr>
        <td>Usia web </td>
        <td> : </td>
        <td>
          {{ $usiaweb }}
         </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Then you can run it using php artisan serve and go to http://127.0.0.1:8000/about

The result will be like this

Inheritance Blade

blade is awesome, we can use derived functions in our HTML, which would be really helpful us in summarizing the code.

Let's go with our simple case.

1. Let's create a file views/layout/main.blade.php as shown below.

2. Next let's create the HTML code as below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Belajar Laravel 8</title>
</head>
<body>
  <div>
    <a href="/" style="margin-right: 1rem">Home</a>
    <a href="/about">About</a>
  </div>
  <div class="content">
    @yield('content')
  </div>
</body>
</html>

From the code above, we see the code @yield('content') , this code specifies a parent of another view.

3. Next let's rename the view welcome.blade.php to home.blade.php to make it easier for us in this sense. and here is the code from home.blade.php

@extends('layout.main')
@section('content')
    hello world
@endsection

From the code above. @extends ('layout .main')

Meanwhile @section('content') explained that we are in the content section which will be forwarded to parent.

4. Next let's compile our routes/web.php file like the code below

<?php

use Illuminate\Support\Facades\Route;

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

Route::get('/about', function () {
    return view('about', array(
        "webname" => "gepcode.com",
        "owner" => "Gilang Pratama",
        "usiaweb" => "7 Bulan"
    ));
});

5. And the views/about.blade.php file looks like this.

@extends('layout.main')
@section('content')
  <table>
    
    <tbody>
      <tr>
        <td>Nama Web </td>
        <td> : </td>
        <td>
         {{ $webname }}
        </td>   
      </tr>
      <tr>
        <td>Pemilik Web </td>
        <td> : </td>
        <td>
          {{ $owner }}
         </td>
      </tr>
      <tr>
        <td>Usia web </td>
        <td> : </td>
        <td>
          {{ $usiaweb }}
         </td>
      </tr>
    </tbody>
  </table>
@endsection

Now, we can run our project again.

for this session you can open the sourcecode here

Dump and Die Variables

Furthermore, on the home side, we can try to create a variable that is in the form of an array and has several items.

open routes.php and change the route / to something like below.

Route::get('/', function () {
     $users = [
         array('id' => 1, 'name' => 'Sukidi', 'age' => 30),
         array('id' => 2, 'name' => 'Parjo', 'age' => 29),
     ];
     return view('home', array('users' => $users));
});

The code explains that we are passing 2 data to the view.

Next let's try to @dd (Dump and Die) on our blade. Let's open views home.blade.php and write the code as below.

@extends('layout.main')
@section('content')
     @dd($users) {{-- this is how we see the data for $users --}}
     hello world
@endsection

The result is as follows.

Looping Foreach Blade

Looping is one of the main syntax in any programming language that we can use to display patterned data. On the blade we can use a loop like the following.

@extends('layout.main')
@section('content')
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Nama</th>
            <th>Usia</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($users as $item) {{-- contoh looping --}}
            <tr>
                <td>{{ $item['id'] }}</td>
                <td>{{ $item['name'] }}</td>
                <td>{{ $item['age'] }} Tahun</td>
            </tr>
        @endforeach
    </tbody>
</table>
@endsection

The result will be like below

Thanks for reading the source code, source code is here

Laravel Exploration Carefully

Chapter 5

Blade Templating Engine

Displays Variable of Route on Blade

Inheritance Blade

Dump and Die Variables

Looping Foreach Blade

Bab