Twitter bootstrap - PHP Laravel Templating example

HarmathB225lint
December 28, 2015
204 views
1 vote
2 Answers

My objection is to create a full example out of the Laravel Toolbox Kit.
I want to establish a pageset of a Controller passing data to a blade site when a correctly routed address is called.

Here is my code:

routes.php
Route::get('/game/start', function () { return view('start'); });

GameController.php

class GameController extends BaseController
{
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;

    public function Start()    
    {
        $file = fopen("levels.dat", "r");

        if($file == false)
            return view('start', ['levels' => "Couldn't open file"];

        $filesize = filesize($file);
        $filetext = fread($file, $filesize);

        $fclose($file);

        $levels = str_getcsv($filetext,",");

        return view('start', ['levels' => $levels,
                          'levelsLength' => count($levels)]);
    }
}

A game.blade.php. Here also the JS references are bleeding.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Conway's Game Of Life - Game</title>

        <!-- CSS And JavaScript -->
        <script type="text/javascript" src="/../../vendor/twitter/bootstrap/dist/js/bootstrap.min.js">
        </script>
        <script type="text/javascript" src="/../../vendor/components/jquery/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/../../vendor/twitter/bootstrap/dist/css/bootstrap.min.css" />
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- Navbar Contents -->

            </nav>
        </div>

        @yield('content')
    </body>
</html>

Then start.blade.php

@extends('layouts.game')

@section('content')
<h2>@yield('Title')</h2>
<h3>@yield('Message')</h3>

<div id="first-col">
    Please select the layout you want to play with.
    <form id="layout-selector" method="POST">
        <!-- Watch if this dropdownSelectList works -->
        <label for="selectorDropDown"> Please select the layout you want to play with. </label>
        <select name="dropDownList">
            <!-- This {{$level}} is a string of the Name of the Level -->
            @for($i = 0; $i < $levelsLength; $i++)
                <option value="{{$levels[$i]}}">{{$levels[$i]}}</option>
            @endfor
        </select>
        <input type="submit" action="public/game/level"/>
    </form>
</div>

<div id="second-col">
    <img id="lightUp" style="display:none" src="../img/lightUp30.png"/>
    <img id="putOut" style="display:none"  src="../img/putOut30.png" />

    <canvas id="createCanvas" style="">
        Sorry, your browser doesn't support Canvas! Try it in another type!
    </canvas>

    <script type="text/javascript" src="../js/startGameScript.js"></script>
</div>
@endsection

So I would like to have a working site,since now it doesn’t render. Thanks for your appreciated time and help. Any further explanation for request!

Answers

- ARIFMAHMUDRANA
- December 28, 2015 at 12:43 pm
- 0 votes
0
You just can’t @yield inside a @section

Replace this lines
```
<h2>@yield('Title')</h2>
<h3>@yield('Message')</h3>
```
with this
```
<h2>{{ $Title }}</h2>
<h3>{{ $Message }}</h3>
```
Assuming you have $Title & $Message in your blade template.

Now you can also extend a template
```


<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>



@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection
```
In this example, the sidebar section is utilizing the @parent directive to append (rather than overwriting) content to the layout’s sidebar. The @parent directive will be replaced by the content of the layout when the view is rendered.

More details can be found here https://laravel.com/docs/5.1/blade#template-inheritance
Login or Signup to reply.

You will first have to fix this block:

  <script type="text/javascript" src="/../../vendor/twitter/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/../../vendor/components/jquery/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/../../vendor/twitter/bootstrap/dist/css/bootstrap.min.css" />

Files inside laravel’s vendor folder cannot be referenced from blade.

Link to hosted libraries instead:

Bootstrap

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Twitter bootstrap – PHP Laravel Templating example

Answers