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
Related
I just installed bootstrap 3 via composer composer require twbs/bootstrap and I'm thinking how can I call the bootstrap library in my master page default.blade.php instead of calling via href like these : <link rel="stylesheet" href="too many to mention"> so I can apply some style in my navigation.
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
#include ('templates.partials.navigation')
<div class = "container">
#yield('content') {{-- #yield is always used to get content from a child page into master page. So this page will be master page. --}}
</div>
</body>
</html>
navigation.blade.php
<div class = "navbar navbar-inverse">
<ul>
<li>
Login
Register
</li>
</ul>
</div>
How can I put apply the style in my navigation without importing the style link library in my master page?
You can just use url()
<link rel = "stylesheet" href= "{{ url('css/bootstrap.min.css')}}">
<div class = "navbar navbar-default">
<ul>
<li>
Login
Register
</li>
</ul>
</div>
Just found a solution on my question.
<link rel = "stylesheet" href= "{{ URL::asset('css/bootstrap.min.css')}}">
<div class = "navbar navbar-default">
<ul>
<li>
Login
Register
</li>
</ul>
</div>
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>
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
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
I have been facing the problem of linking a CSS file to my PHP code.
I am using Netbean IDE 7.2 and XAMPP 8.0
I have tried to create a new HTML file and link it with a new CSS file.
It does not work.
If I type the script inside the HTML itself, it works great.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Website Development Version 1.0</title>
<link href="CSS/layout.css" type="css/text" rel="stylesheet"/>
<link href="CSS/expandLayout.css" type="css/text" rel="stylesheet"/>
<script src="Javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
};
$(document).ready( function() {
prepareList()
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<!-- Input Content -->
<h1>This is Header</h1>
</div>
<div id="menuList">
Menu
</div>
<div id="innerContainer">
<div id="leftColumn">
<!-- Input Content -->
<ul id="expList">
<li>Home</li>
<li>Product
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li>Register</li>
<li>About Us</li>
</ul>
</div>
<div id="centerColumn">
<!-- Input Content -->
This is Main Content
</div>
<div id="rightColumn">
<!-- Input Content -->
This is Right Content
</div>
</div>
<div id="footer">
<!-- Input Content -->
<h3>This is Footer</h3>
</div>
</div>
</body>
</html>
The media type for CSS is text/css not css/text.
Browsers tend to ignore <link>s to things with media types they don't understand.