i am new to laravel. currently i am working on laravel 7. i made a navigation bar a seperate file which i extends on all the front end file. i just know that when i need a data from the database in front end
then i do like this
$cat = modelname::all();
return view('addproducts')->with('cat',$cat);
but that code works on that condition when i have to go to that front end blade file. but on navigation bar senario i dont need to go to the nav file i just go to another blade file and nav file is extended on it.
i just want to know how to access the data from the databse on navigation bar
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
#yield('content')
</body>
</html>
this is the code of my nav file where i want to get the data from the database and then want to show in a dropdown menu
#extends('layouts.nav');
#section('content')
//code for the front end of the page
#endsection
this is how i extend the nav file on another page
#Fahad Munir would something like this work in your case? Using 'include' instead of 'extends'?
#include('layouts.nav', ['cat' => $cat = App\modelname::all();])
If this does not work for your purposes, you may also consider using a View Composer.
See the Laravel documentation about View Composers here: https://laravel.com/docs/7.x/views#view-composers.
Utilizing a View Composer would allow you to add something like the following to the boot() method in your appServiceProvider or after creating a new service provider using artisan and adding to the boot() method after doing that like so:
view()->composer('layouts.nav', function($view) {
$view->with('cat', App\modelname::all());
});
Read more about that in the Laravel documentation here, if need be:
https://laravel.com/docs/7.x/providers#the-boot-method
If your on Laravel 7 then you really need to use the new component feature added to Laravel 7, to do that run php artisan make:component NavigationComponent, this will generate a NavigationComponent class and a navigation-component blade file.
navigation-component.blade.php
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
NavigationComponent.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class NavigationComponent extends Component
{
public $cat;
/**
* Create a new component instance.
*
* #return void
*/
public function __construct()
{
$this->cat = CatModel::all();
}
/**
* Get the view / contents that represent the component.
*
* #return \Illuminate\View\View|string
*/
public function render()
{
return view('components.navigation-component');
}
}
For more visit Laravel Component docs
Related
<nav class="navbar navbar-expand-lg navbar-dark px-2 " style="background-color:#E53935;">
<a class="navbar-brand" href="#">HeadOverMeals</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
Make sure you have followed these steps:
Step 1: Add proper "css" file inside the "header tag" and the "javascript" file at the end of the "body tag". You can find the links over here https://www.bootstrapcdn.com/
Step 2:Try copying the default navbar from the bootstrap website and then editing it.
You can find it over here https://getbootstrap.com/docs/4.0/components/navbar/
I faced the similar problem and the step-1 solved it.
Im developing a blog in laravel hosted in apache. Im using laravel mix for compiling my assets (css, js).
When I go to some route, the page takes less than 1 second to charge the css:
The elapsed time is very short, however it is very annoying. Why does this happen?
I know that the answer can come from many factors and the only thing that occurs to me is something wrongly configured in laravel mix but my js and css assets only have a couple of codes.
For example this also happens on my home page (index) which have a very simple code (except for the menu bar). the code of my Home page:
home.blade.php
<html>
#extends('layout/layout')
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog</title>
</head>
<body>
<div class="contenedor">
#include('menu/menu-nav')
<h1>Bienvenidos al Blog!</h1>
</div>
</body>
</html>
layout.blade.php
<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
menu-nav.blade.php
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
#if(Auth::check())
<a class="navbar-brand" href={{ route('editProfile')}}>
{{ Auth::user()->username }}
</a>
#endif
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href={{ route('home') }} >Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href={{ route('viewposts') }}>Blog</a>
</li>
#if(Auth::user())
#if(Auth::user()->hasRole('creator'))
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Posts
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href={{ route('createpost') }}>Crear Post</a>
<a class="dropdown-item" href="#">Editar Post</a>
</div>
#endif
#endif
#if(Auth::user())
#if(Auth::user()->hasRole('admin'))
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Administración
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="{{ route('viewusers') }}">Usuarios</a>
<a class="dropdown-item" href="#">Estadísticas</a>
</div>
#endif
#endif
</ul>
#if(Auth::user())
<span class="navbar-text">
<a class="nav-link" href={{ route('logout') }}>Log out</a>
</span>
#else
<span class="navbar-text">
<a class="nav-link" href={{ route('register') }}>Registrarse</a>
</span>
<span class="navbar-text">
<a class="nav-link" href={{ route('login') }}>Log in</a>
</span>
#endif
</div>
I would recommend you place the CSS and JS tags into the <head> section, as explained here: https://stackoverflow.com/a/18392465/14481105 the browser looks for those files inside the head section.
I'm not sure if you have just omitted it for Stack Overflow purposes but you also want the <html> tags and <body> tags.
I will need some help with the menu showing on mobile. When the STORE menu is clicked on mobile version it does not expand and instead closes the general menu. Here is the link of the web page. Any help will be appreciated.
<body> looks like
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar">
Menu HTML
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse header-transparent">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand page-scroll logo no-margin" href="#page-top"><img src="images/logo-uk.png"></a>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="page-scroll nav-link" href="#page-top">HOME </a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#frames"></a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="ppgtrikes.php"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORE
</a>
<div class="dropdown-menu">
<a class="page-scroll nav-link" href="#engines">
<font color="#000000"></font>
</a>
<a class="page-scroll nav-link" href="#harnesses">
<font color="#000000"></font>
</a>
</div>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#contact"></a>
</li>
</ul>
</div>
</div>
<!-- End of Container -->
</nav>
You have 2 Bootstrap navs, one inside the other.
UPDATED
In this file http://www.evoaviation.co.uk/js/custom.js you have part of code at the beginning
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
$('.navbar-collapse a').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
Replace it with following
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
// checking if there is no 'data-toggle' in <a>
$('.navbar-collapse a:not([data-toggle])').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="{{ route('home.index') }}">En</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{{ route('home.index') }}">Home</a>
</li>
<li class="dropdown nav-item">
<a class="nav-link" data-toggle="dropdown">Categories<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
#foreach($categories as $category)
<li>
<a href="/?category={{ $category->name }}">
{{ $category->name }}
</a>
</li>
#endforeach
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('about') }}">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I have the above code in my header which I include in my app.blade.php as #include('user.layouts.header') then I use app.blade.php as my layout.
How do I pass data to the header so that I can stop getting the below error if that's the reason I'm getting the error!
Undefined variable: categories (View: /home/alphy/blogEngidaFinal/resources/views/user/layouts/header.blade.php)
See the documentation.
You can pass params while including the header view,
#include('view.name', ['some' => 'data'])
In your case,
#include('user.layouts.header', ['categories' => ['food', 'drink', 'dessert'])
so i am new to LARAVEL and i am following a tutoriel. he created a navbar with bootstrap and gets this result :
and me i get this :
this is my code :
app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
#include('inc.navbar')
#yield('content')
</body>
</html>
navbar.blade.php
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Below are the cdn's
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
use thses cdn's as like below.
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
Fiddle