Today we started our Laravel 5 lessons in school. So I started to search the web to re-use things. I've read some things about sections, components and yielding but I still don't quite understand it.
In my resources/views folder I have a file called home.blade.php.
It contains this navigation bar:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
now in my about.blade.php I'd like to use the same code without copy and pasting. So if I made a change it would change both navigation bars instantly without changing it 2 times.
Can someone explain to me how I re-use this navigation bar without copy and pasting?
Thanks in advance, Sylent.
Create a new folder and call it partials. There you could have navigation, header and footer all as separate blade files.
You would then (usually) create a layout blade that contains the structure and includes the navigation, header and footer.
You would then extend that layout for home and about, and encapsulate whatever content for each of home and about by creating a section called content.
You would then yield content within the layout.
https://laravel.com/docs/5.5/blade
#navigation /resources/views/partials/navigation.blade.php
<nav>
...
</nav>
#header /resources/views/partials/header.blade.php
<header>
...
</header>
#footer /resources/views/partials/footer.blade.php
<footer>
...
</footer>
#layout /resources/views/layouts/layout.blade.php
#include('partials.header')
#include('partials.navigation')
<div class="main-content">
#yield('content')
</div>
#include('partials.footer')
#home /resources/views/page/home.blade.php
#extends('theme.layouts.layout')
#section('content')
<p>Anything within home</p>
#endsection
#about /resources/views/page/about.blade.php
#extends('theme.layouts.layout')
#section('content')
<p>Anything within about</p>
#endsection
Related
When I try to open the menu on mobile, it does not open and instead, you just select the whole menu bar. It looks like this on the actual website:
meanwhile, this is the relevant code for the navbar.php
<link href="assets/css/style.css" rel="stylesheet">
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
also, not sure if it makes a difference although the PHP file is named navbar.inc.php
Thank you for taking the time to read this post
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
Maybe you should carry brand class' properties to anchor tag and remove brand class.
<a class="brand" href="../index"><img src="assets/img/transparentlogo.png" alt="logo"></a>
Or, you should check if your anchor tag () is covering all the space under the div having "brand" class. In my opinion you cannot click it on phone, because a' is not taking all the width and height.
I created a navbar from bootstrap inside resources/views/inc -> navbar.blade.php
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Project</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
The first div tag is working fine but the second div tag is not visible in the output
And I properly include the navbar in a separate file inside resources/views/layouts -> app.blade.php
<body>
#include('inc.navbar')
<div class="container">
#yield('content')
</div>
</body>
Please help me with this
edit
I removed class="collapse navbar-collapse", then the navigation links are appearing, what is the issue with the compatibility on the collapse?
If you are referring to wanting this div to be visible immediately (without clicking):
<div id="navbar" class="collapse navbar-collapse">...</div>
As it is, it is not meant to be visible upon load. If you want it to load, you've got an extra collapse class in there, which is effectively hiding the div, remove it, and it should be visible for you:
<div id="navbar" class="navbar-collapse"> <-- No collapse
I have the following bootstrap navbar. I want to include nav.php into all of my php pages. Well I have done simple includes in the past but with div tags something tells me I am doing this wrong.
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/img/logo.png" alt=" "></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php include 'nav.php';?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My nav.php is as following
echo'
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>TEAM</li>
<li class="dropdown">
SERVICES <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>IT SERVICES</li>
<li>VOICE SERVICES</li>
</li>
</ul>
</li>
<li>CAREERS</li>
<li>INTERESTING INFORMATION</li>
<li>CONTACT</li>
</ul>';
Two possible paths:
Add <?php tag to your nav.php file,
or
remove echo statement and make the file plain HTML.
I'm trying to create a dynamic navigation bar on my Laravel project, that, if the user is logged in, outputs Hello, {{$user->name}}!.
This, however, is not working.
If I try to add that $user->name variable to my navbar layout I simply get the following error: Undefined variable: user (View: C:\xampp\htdocs\laravel\app\views\layout\navbar.blade.php).
This layout is included in the main layout like so: #include('layout.navbar') and the code is as follows:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="{{URL::route('home')}}">asd</a>
<ul class="nav navbar-nav">
#if(Auth::check())
<li>
<a>Hello, {{$user->name}}!</a>
</li>
#endif
</ul>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
#if(Auth::check())
<li>
Profile
</li>
<li>
Logout
</li>
#else
<li>
Login
</li>
<li>
Register
</li>
#endif
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
What is the correct way to access a user object (with the information of the user that is currently logged in) within this context?
if your trying to access logged user data like,
$user->name
then you need to pass the logged user in to the blade view from the controller as,
retun View::make("pathAndNameOfBladeFile")->with(Array("user" => Auth::user()));
and change the #if(Auth::check()) in to #if($user) in the blade view
-- OR
in the top of the blade file add this, (put this before using the $user in your code)
#if(Auth::check())
<?php $user = Auth::user(); ?>
#endif
-- OR
you can do like something #karrde00 suggested in the answer.
The cleaner why to do this is pass the $user from the controller.
You are going to want to use something like {{ Auth::user()->name }} in Laravel. It will give you the logged in user for the view in a Blade template.
I have a php file containing my navbar(menu.php) which is used from many of my pages.
Let me show you my folder structure:
index.php
html
menu.php
apps
app1.php
app2.php
webdesign
html.php
js.php
and the following code:
<
div class="navbar navbar-inverse navbar-static-top navbar-topic">
<div class="container">
<div class="navbar-header"><!--navbar start-->
<a href="http://kounj.web44.net" class="navbar-brand"><!--Logo -->
iloveprogramming
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span><!--4 icon-bar spans create the dropdown menu-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Web Design <b class="caret"></b>
<ul class="dropdown-menu">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
</li>
<li>Tools</li>
<li>Contact</li>
</ul>
</div>
</div>
</div><!--navbar end-->
The problem is that when i use index.php which is on the root folder my links on navbar will not be set correctly.Any ideas
You can either use absolute path by setting a constant in menu.php that might look like this:
define("ROOTPATH", "/var/www/html/apps/");
(A quick and dirty approach, but effective) for your Navigation links and setting them like so:
<a href="<?php echo ROOTPATH; ?>/app1.php</a>
<!-- etc -->
Or you can edit you Apache http.conf file thereby pointing it to your PHP projects root folder, and restart apache to get your changes to take effect. But both will address your PHP file path issues.