i have a page that shows many products and each one has a link to view its details,
this is the code that leads to the link:
<a class="btn-danger" href="{{ url('viewpartydetails/'.$party->party_id) }}">
view details
</a>
and this is the route : Route::get('viewpartydetails/{party_id}','PartyController#partydetails');
and this is the code in the controller:
public function partydetails($party_id)
{
if(!Auth::guest())
{ // $party_id=request('partyid');
$party = DB::table('party1')->where('party_id',$party_id)->get();
//dd($party_id);
return view('partydetails',compact('party'));
}
else
return redirect()->guest('login');
}
the problem is the page that i want to show is appearing without any design!!!
but when i delete this part "/{party_id}" all designs are showing up again !!!
what is the problem?
this is the view page :
#extends('layouts.app')
#section('content')
<div id="fh5co-main">
<div class="fh5co-narrow-content">
<div class="row">
<div class="col-md-5">
<h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">About Us Nitro <span>A Web Studio</span></h2>
<p class="fh5co-lead animate-box" data-animate-effect="fadeInLeft">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p class="animate-box" data-animate-effect="fadeInLeft"> Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
<div class="col-md-6 col-md-push-1 animate-box" data-animate-effect="fadeInLeft">
<img src="images/img_1.jpg" alt="Free HTML5 Bootstrap Template" class="img-responsive">
</div>
</div>
</div>
</div>
#stop
app.blade code:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- #Dışarıdan Çağırılan Dosyalar Font we Materyal İkonlar Bitiş -->
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body background="images/party1.jpeg">
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
<li>
<a href="{{ url('viewparties') }}">
view parties
</a>
</li>
#if(Auth::user()->user_type=="organizer")
<li>
<a href="{{ url('add_party') }}">
add a party
</a>
</li>
#endif
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<!-- Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Stellar -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- MAIN JS -->
<script src="js/main.js"></script>
</body>
</html>
The issue is coming from your differents css links tags.
Actually you have :
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
Then when you're using the /{party_id} route, your browser try to find
localhost/{party_id}/css/style.css instead of localhost/css/style.css
The solution is to use asset() like you can see at the top of your layout view <link href="{{ asset('css/app.css') }}" rel="stylesheet">
So it should be something like that :
<link rel="stylesheet" type="text/css" href="{{ asset('css/style1.css') }}">
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
<!-- Animate.css -->
<link rel="stylesheet" href="{{ asset('css/animate.css') }}">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="{{ asset('css/icomoon.css') }}">
<!-- Bootstrap -->
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
<!-- Owl Carousel -->
<link rel="stylesheet" href="{{ asset('css/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/owl.theme.default.min.css') }}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<!-- Modernizr JS -->
<script src="{{ asset('js/modernizr-2.6.2.min.js') }}"></script>
Related
So im working on a blog website and i added a layout file. So i made it such that when i click on a blog it shows more info about it in another page (shows.blade.php). the shows page extends the layout page but doesn't show the css or js.It doesn't show the images either so i assume that its either i have referenced it wrongly or i havent created the right sections. When i open the layouts file everything's working correctly! However when i click on a blog to take me to the other page none of the css/js is working. Here's the shows.blade.php
#extends('layouts.layout')
#section('content')
#parent
<div class="card">
<h1>{{$post->title}}</h1>
<small>{{$post->created_at}}</small>
<small>{{$post->category}}</small>
<small>{{$post->body}}</small>
<small>{{$post->tags}}</small>
</div>
#endsection
and here's the layouts file where i included some code from a template. when i open this the styles are working just well
<!DOCTYPE html>
<html>
<head>
#section('head')
<meta charset="utf-8">
<title>Bloger</title>
<!-- Description, Keywords and Author -->
<meta name="description" content="Your description">
<meta name="keywords" content="Your,Keywords">
<meta name="author" content="ResponsiveWebInc">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font awesome CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="#">
#show
</head>
<body>
<div class="wrapper">
<!-- header -->
<header>
<!-- navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 class="img-responsive" src="images/logo.png" alt="Logo" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>New Blog</li>
<li>Signup</li>
<li>Login</li>
<li class="dropdown">
Menu <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Create a blog</li>
<li>Subscribe</li>
<li>Executive Team</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="event" id="event">
<div class="container">
<div class="default-heading">
<!-- heading -->
<h2>Upcoming events</h2>
#yield('content')
</div>
</div>
</div>
<!-- events end -->
<footer>
<div class="container">
<p>Home | works | Team | Contact</p>
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i>
</div>
<!-- copy right -->
<!-- This theme comes under Creative Commons Attribution 4.0 Unported. So don't remove below link back -->
<p class="copy-right">Copyright © 2014 Your Site | Designed By : IndioWeb, All rights reserved. </p>
</div>
</footer>
</div>
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Respond JS for IE8 -->
<script src="js/respond.min.js"></script>
<!-- HTML5 Support for IE -->
<script src="js/html5shiv.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>
</body>
</html>
Give a / (slash) begin of your css, js and image path, Like :
href="css/bootstrap.min.css"
Change to :
href="/css/bootstrap.min.css"
Because / will return the root of the site.
It's done in order to root the path (making it an absolute path).
It ensures that the path is not relative but read from the root of the site.
This allows one to move a file around and not have to change the links to the different resources.
You need to change all the path, like :
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
Even also change the image path :
src="/images/logo.png"
You are loading assets like:
<link href="css/font-awesome.min.css" rel="stylesheet">
So for exmaple if you are on website.com everything may load fine.
Files will be loaded from https://website.com/css/font-awesome.min.css etc.
BUT if you visit website.com/post files will be loaded from https://website.com/**post**/css/font-awesome.min.css that may result in 404 error.
So you can either add a forward slash:
<link href="/css/font-awesome.min.css" rel="stylesheet">
so all files will be loaded from the root folder.
Or a way that I prefer using the asset method
The asset function generates a URL for an asset using the current scheme of the request (HTTP or HTTPS):
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">
Here is the head in master page where i added the link:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- this is the link -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="{{ asset('vendor/adminlte/vendor/bootstrap/dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/adminlte/vendor/font-awesome/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/adminlte/vendor/Ionicons/css/ionicons.min.css') }}">
#if(config('adminlte.plugins.select2'))
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
#endif
<link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/AdminLTE.min.css') }}">
#if(config('adminlte.plugins.datatables'))
<link rel="stylesheet" href="//cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css">
#endif
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
Before After
And here is the header and NavBar in other page , note that i have extended master page. I couldn't bring all the codes properly.
<header class="main-header">
#if(config('adminlte.layout') == 'top-nav')
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="{{ url(config('adminlte.dashboard_url', 'home')) }}" class="navbar-brand">
{!! config('adminlte.logo', '<b>Admin</b>LTE') !!}
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
#each('adminlte::partials.menu-item-top-nav', $adminlte->menu(), 'item')
</ul>
</div>
#else
<div class="pull-left">
<a href="{{ url(config('adminlte.dashboard_url', 'home')) }}" class="logo" style="font-family: IRANSans;color: white; background-color: #109e7a">
<span class="logo-mini">{!! config('adminlte.logo_mini', '<b>A</b>LT') !!}</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg">{!! config('adminlte.logo', '<b>Admin</b>LTE') !!}</span>
</a>
</div>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">{{ trans('adminlte::adminlte.toggle_navigation') }}</span>
</a>
#endif
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li style="font-family: IRANSans">
#if(config('adminlte.logout_method') == 'GET' || !config('adminlte.logout_method') && version_compare(\Illuminate\Foundation\Application::VERSION, '5.3.0', '<'))
<a href="{{ url(config('adminlte.logout_url', 'auth/logout')) }}">
<i class="fa fa-fw fa-power-off"></i> Exit
</a>
#else
<a href="#"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
Exit <i class="fa fa-fw fa-power-off"></i>
</a>
<form id="logout-form" action="{{ url(config('adminlte.logout_url', 'auth/logout')) }}" method="POST" style="display: none;">
#if(config('adminlte.logout_method'))
{{ method_field(config('adminlte.logout_method')) }}
#endif
{{ csrf_field() }}
</form>
#endif
</li>
</ul>
</div>
</nav>
#if(config('adminlte.layout') == 'top-nav')
</div>
#endif
</nav>
</header>
When i added this link, navbar Exit Button disappears and the height of header increases..
I'm new to html and css. Thank you for helping!
Here is the link to my website , on the laptop is working fine, but on mobile phone its not responsive. Here is the link to my site https://ticketsoko.co.ke/
and the follwing is how its showing on mobile phone . Is there a way on mobile phone it can resize the images and be viewed the same as its showing on desktop.
This is when I view it from the desktop.
<head>
<meta charset="utf-8">
<!--<meta name="viewport"-->
<!-- content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="img/logoo.png"/>
<title>Click & Pay | TicketSoko</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" -->
<!-- integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> -->
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/style3.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class=" navbar-default navbar-fixed-top" style="background-color:#f2f2f2;">
<ul>
<img class="logo" src="img/logoo.png" alt="logo" style="height: 100px; width:250px; float:right;">
</ul>
</nav>
<div class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<br><br><br>
<div class="item active">
<img src="img/image1.jpeg" alt="Los Angeles" style="width:100%; height:500px;">
</div>
<div class="item">
<img src="img/2.jpg" alt="Chicago" style="width:100%; height:480px;">
</div>
<div class="item">
<img src="img/3.jpg" alt="New york" style="width:100%; height:480px;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
As i can see you used width as 250px. So it'll always take the 250 px of any screen whether it's a small screen or big screen.
Example for if you designed this website on a screen which is having 250px width only then it'll render completely on the screen. And if you'll run it on the big screen then also it wil take only 250 px and rest pixels will not be rendered.
So you should use the percentage for the widths. Like if you want to draw a component from left to right and 50% of the screen. Then give the width as 50%. Like that you can make it responsive.
And you can use media query too. Just read about the media query too.
Hope this will help you.
I have divided my template like there is a main template and inside that template, there is a nav are and then content area but it is loading only content
my controller function is
public function index() {
return view('admin.dashboard');
}
app.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">
<title>Laravel</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
#yield('nav')
#yield('content')
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
</body>
</html>
dashboard.blade.php
#extends('admin.layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
#endsection
nav.blade.php
#extends('admin.layouts.app')
#section('nav')
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if(Auth::guard('admin')->user())
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::guard('admin')->user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-btn fa-sign-out"></i>Logout</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#endsection
It's true, you need to change your code a bit.
If I use the following structure:
- views
- layouts
- app.blade.php
- nav.blade.php
- dashboard.blade.php
Here is your app.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">
<title>Laravel</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
#include('layouts.nav')
#yield('content')
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
</body>
</html>
This will include the navbar inside your layout.
You dashboard.blade.php will look like:
#extends('admin.layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
#endsection
Hope this works!
Documentation: https://laravel.com/docs/5.2/blade#extending-a-layout
I am developing an e-commerce website based in Laravel. I have the following file:
<!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">
<title>Laravel</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
#if(!Auth::guest())
<span class="icon-bar">Cart</span>
#endif
#if(Auth::user()->user_level == 1)
<span class="icon-bar">Create item</span>
#end
</button>v
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-btn fa-sign-out"></i>Logout</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
</body>
</html>
But when I run any page in my local browser I get the following error message:
1 FatalErrorException in 12864a26e90179d06aed7c0f8dcccf47c0f50961.php line 86: syntax error, unexpected end of file
I'm not sure if it's because I'm using model references. I'm still new to Laravel and am not sure where the error lies in my syntax or the use of models in the view.
Looks like you have a syntax error on the following line:
#if(Auth::user()->user_level == 1)
<span class="icon-bar">Create item</span>
#end
Should be #endif instead of just #end.