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.
Related
I'm having a problem with the navbar in Laravel 8; specifically the whole navbar is shown on the view but the dropdown is not working.
In fact, when I click, the drop-down menu does not open.
This is layout.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Document</title>
</head>
<body>
<x-navbar/>
{{$slot}}
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
This is navbar.blade.php:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
and the home.blade.php view is:
<x-layout>
<h1>Hello!!!</h1>
</x-layout>
Please try with this otherwise it might be a typo.
#include('inc.navbar')
// #include('FOLDER_NAME.FILE_NAME')
Also check documentation! https://laravel.com/docs/9.x/blade#including-subviews
This is not intended as an answer. Just to give some info that can't be formatted properly (or I don't know how to) in a comment. When view the source of the page in a browser, you should see the following three lines in the <head> section (or in other proper location). My navbar dropdown didn't work until these three lines showed up in the source. Initially I added the lines in a wrong blade file and they didn't end up in the page as expected.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Hello everybody i'm new to laravel and php.
today i was able to launch a local laravel website using php artisan serve.
but now i wanted to add a navbar with bootstrap and that worked, but in the navbar i want to add a brand.
unfortunately i have tried many ways to add the path for the image like using ../ and echo path but nothing seems to work. I'm probably doing something wrong :). help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YGP</title>
</head>
<style>
h1
{
font-family: 'Geneva', sans-serif;
}
</style>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="" width="50" height="50" class="d-inline-block align-top" alt="">
YGP
</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="#">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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</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>
<div class="content">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
and this is the folder layout:
the image
located in IMAGES/LOGO.PNG
Move your images folder into public. Then access them by
<img src="{{ asset('images/logo.png') }}" alt="" title="">
Anyways, I recommend you to check with Filesystem. The Laravel Flysystem integration provides simple to use drivers for working with local filesystems and Amazon S3. Even better, it's amazingly simple to switch between these storage options as the API remains the same for each system.
it should help!
For more detail document : https://laravel.com/docs/7.x/filesystem
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
I am a newbie to Laravel. The logout option is not working for me in Laravel. It shows Login and Home Menus. After I logged in it shows the username with a down arrow, but the dropdown is not working. What could be the issue?
This is my app.blade.php
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<a class="dropdown-item" href="{{route('admin.users.index')}}">
User Management
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
{{ csrf_field() }}
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<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'])