Navigate with routes (laravel blade.php) - php

Hi there so I am trying to construct a navbar that will change the information being displayed.
NOTE using laravel 4
The idea is to have one page where you enter information into a form and then another where you can then edit that form data but i cant get the bloody thing to navigate.
My directory is set up as such
- app
-- views
--- layouts
------- default.blade.php
--- pages
------- home.blade.php
------- edit.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
And I would like to use something similar to this to navigate
<div class="navbar">
<div class="navbar-inner">
<a id="logo" href="/">ABC123</a>
<ul class="nav">
<li>Home</a></li>
<li>Edit</li>
</ul>
</div>
</div>
Currently my routes.php file looks like this
Route::get('/', function()
{
return View::make('pages.home');
});
Route::get('edit', function()
{
return View::make('pages.edit');
});
and here is my default.blade.php template that I want to use for both
<!doctype html>
<html>
<head>
<title>#yield('title')</title>
#include('includes.head')
</head>
<body>
<div class="container">
<header class="row">
#include('includes.header')
</header>
<div id="main" class="row">
#yield('content')
</div>
<footer class="row">
#include('includes.footer')
</footer>
</div>
</body>
</html>
Thanks for any help
Have a great day!

What you need is the url() helper:
<ul class="nav">
<li>Home</a></li>
<li>Edit</li>
</ul>

Related

Laravel #yield is undefined for HTML section

The layout/template file is defined in footer.blade.php:
#extends('mainpage')
#section('footer')
<section class="section5">
<footer class="container col-lg-12 pb-2 pt-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
<div class="row">
<p class="small-text col-lg-3 text-lg-start text-center">© MyCompany.com #php echo date("Y") #endphp </p>
<p class="small-text col-lg-6 text-lg-center text-center">All trademarks used on this site are the property of their respective owners.</p>
<p class="small-text col-lg-3 text-lg-end text-center">Terms & Conditions | Privacy Policy</p>
</div>
</footer>
</section>
#endsection
This is then yielded in mainpage.blade.php:
<!-- REST OF HTML -->
#yield('footer', 'Undefined')
</body>
Both files exist in the same directory, and there is also a route for /mainpage defined in web.php:
Route::get('/', function () {
return View::make('mainpage')->render();
});
Yet the only thing that navigating to /mainpage shows me is the Undefined "error" that I passed to it as the second argument to the #yield helper. Inspecting in the browser shows that the section isn't loaded.
Because the template inheritance fails silently without an error and because Laravel apparently doesn't even have an intuitive way of printing warnings, such a basic use case seems impossible for me to debug.
What's going on here, or alternatively, how would I begin to go about debugging it?
For your current view to work, your route would need to call footer instead of mainpage.
footer.blade.php knows what view it extends.
<!-- footer.blade.php -->
#extends('mainpage') <!-- Ok, extend mainpage.blade.php -->
#section('footer') <!-- place this section where there's a #yield('footer') in mainpage.blade.php -->
#endsection
mainpage.blade.php doesn't know what views will extend it.
<!-- mainpage.blade.php -->
#yield('footer', 'Undefined') <!-- Place 'Undefined' if the views that extend me don't have a #section('footer') -->
I could make a second view called footer2.blade.php, and also have it extend mainpage. In that situation, which view should mainpage render?
What you want for generic sections like footers is including a subview (using #include).
Here's a crude example:
<!-- layout-1.blade.php. This layout has a navbar, sidebar and footer. -->
<html>
<head>
</head>
<body>
<!-- layout-1 navbar -->
#include('navbar')
<!-- layout-1 sidebar -->
#include('sidebar')
<main>
#yield('content')
</main>
<!-- layout-1 footer -->
#include('footer')
</body>
</html>
<!-- layout-2.blade.php. This layout has a navbar and a footer but no sidebar -->
<html>
<head>
</head>
<body>
<!-- layout-2 navbar -->
#include('navbar')
<main>
#yield('content')
</main>
<!-- layout-2 footer -->
#include('footer')
</body>
</html>
#extends('layout-1')
#section('content')
#endsection
#extends('layout-2')
#section('content')
#endsection

How to add a layout with dynamic js and css in laravel?

Recently I sarted to learn laravel framework. I installed Laravel 5 using composer and I need to know how to include a constant layout where I can put up gobal css and js links.
Write routes
Route::get('/', function()
{
return View::make('pages.home');
});
Route::get('about', function()
{
return View::make('pages.about');
});
Route::get('projects', function()
{
return View::make('pages.projects');
});
Route::get('contact', function()
{
return View::make('pages.contact');
});
Make sure you follow this folder structure
- app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php
Include following in head.blade.php
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Scotch">
<title>Super Cool Layouts</title>
<!-- load bootstrap from a cdn -->
<link rel="stylesheet" href="<?php echo asset('css/style.css'); ?>">
<script type="text/javascript" src="<?php echo asset('js/main.js'); ?>"></script>
Write header and fooder in header.blade.php and footer.blade.php
<div class="navbar">
<div class="navbar-inner">
<a id="logo" href="/">Single Malt</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
Finally create the layout in default.blade.php
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
<div class="container">
<header class="row">
#include('includes.header')
</header>
<div id="main" class="row">
#yield('content')
</div>
<footer class="row">
#include('includes.footer')
</footer>
</div>
</body>
</html>
To include the layout use this in home.blade.php
#extends('layouts.default')
#section('content')
i am the home page
#stop
I found a complete tutorial over here Include js and css file in laravel using blade

Inheritance with Laravel 5

I have a master_page.blade with global content for my html:
<!DOCTYPE html>
<html lang="es">
<head>
#include('layout.head')
</head>
<body>
#include('layout.header')
#yield('master_content')
#section('footer')
#include('layout.footer')
#show
#include('layout.scripts')
#yield('custom_scripts')
</body>
</html>
After, I have a layout in Bootstrap with 2-6 columns, this blade inherit of the master_blade, his name is 2_10_columns.blade:
#extends('layout.master_page')
#section('master_content')
<div class="container">
<div class="main-content">
<div class="col-sm-2">
#section('content1')
#show
</div>
<div class="col-sm-10">
#section('content2')
#show
</div>
</div>
</div>
#stop
Ok, this looks good but, finally I need fill the 2_10_columns.blade with some content, for example I tried this with mi contact.blade.php:
#extends('layout.2_10_columns')
#section('content1')
<p>Column 2 left content of my section...</p>
#stop
#section('content2')
<p>Column 10 right content of my section ...</p>
...some forms here
#stop
Definitely this does not work...
How could I do this with Laravel? Look at this infographic:
its working like this(simplified for example):
master layout:
<html>
<body>
<div class="container">
#yield('master_content')
</div>
</body>
</html>
2 cols layout:
#extends('layouts.master')
#section('master_content')
<div class="co-l2">
<p>index</p>
#yield('sidebar')
</div>
<div class="col-10">
#yield('content')
</div>
#endsection
contact view:
#extends('layouts.2cols')
#section('sidebar')
<p>delete</p>
#endsection
#section('content')
<h1> person name </h1>
<p>about the person</p>
#endsection

parent & show element in Laravel freamwork?

i'm learning Laravel frame work, and have a question:
in this code:
<!DOCTYPE HTML>
<html>
<body>
<nav>
#section('nav')
<a>Home page</a>
#show
</nav>
<div id="content">
#yield('content')
</div>
</body>
</html>
what to do: #show ?!
Having a layout (layout.blade.php) view of
<!DOCTYPE HTML>
<html>
<body>
<nav>
#section('nav')
<a>Home page</a>
#show
</nav>
<div id="content">
#yield('content')
</div>
</body>
</html>
And a view (users.blade.php) of
#extends('layout')
#section('nav')
> <a>Users</a>
#stop
You should see rendered:
Home page > Users
But you could also use stop on layout:
#section('nav')
<a>Home page</a>
#stop
And #parent on your view:
#section('nav')
#parent
> <a>Users</a>
#stop
Take a look at video's 6 and 7 regarding "blade basics" and "master pages"
https://laracasts.com/series/laravel-from-scratch

how to create separate blade for menu , content , sidebar and footer

my html code is
<html>
<head>
</head>
<body>
<div id="content">
<div id="menu"></div>
<div id="container"></div>
<div id="sidebar"></div>
<div id="footer"></div>
<div>
</body>
</html>
master.blade.php is
<html>
<head>
#yield('title')
#yield('css')
#yield('js')
</head>
<body>
<div id="content">
<div id="container"></div>
<div>
</body>
</html>
menu.blade.php is
<div id="menu"></div>
sidebar.blade.php is
<div id="sidebar"></div>
footer.blade.php is
<div id="footer"></div>
my view file is home.blade.php
#extends('layouts.master')
#section('title')
<title>:: Login ::</title>
#stop
#section('js')
#stop
#extends('layouts.menu')
#extends('layouts.sidebar')
#extends('layouts.footer')
router.php
Route::get('home', array('uses' => 'HomeController#home'));
HomeController.php is
public function home()
{
return View::make('home');
}
id i run
localhost/project/public/index.php/home
it shows only master blade file content , y sidebar , footer and menu not showing , what is the mistake.
Create a your layout #including your menu:
<html>
<head>
<title>#yield('title')</title>
#yield('css')
#yield('js')
</head>
<body>
<div id="content">
<div id="container">
#include('menu')
#yield('content')
</div>
</body>
</html>
Your menu:
<div id="menu">
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</div>
And your view:
#extends('layouts.master')
#section('title')
:: Login ::
#stop
#section('content')
This is your content!
#stop

Categories