not displaying google charts in Laravel app [closed]

not displaying google charts in Laravel app [closed] - php

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am working with laravel 5.6 and I need displaying categoryname column values in google charts of vehicles table. I have different categorynames in the table. My blade file is as following,
#extends('layouts.app')
#section('content')
<title>pie chart</title>
<script src="{{ url('/js/jquery.js') }}"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var analytics = <?php echo $categoryname; ?>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visulization.arrayToDataTable(analytics);
var options = {
title : 'Presentage of Categories'
};
var chart = new google.visulization.PieChart(document.getElementById('pie_chart'));
chart.draw(data,options);
}
</script>
</head>
<body>
<div class="container">
<h3 align="center">Category Chart</h3>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-heading">Percentage of Categoryies</h3>
</div>
<div class="panel-body">
<div id="pie_chart" style="width:750px; height: 450px;">
</div>
</div>
</div>
</div>
</body>
#endsection
and My ChartController is as
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class ChartController extends Controller
{
function index()
{
$data = DB::table('vehicles')
->select(
DB::raw('categoryname as categoryname'),
DB::raw('count(*)as number'))
->groupBy('categoryname')
->get();
$array[] = ['Category','Number'];
foreach($data as $key => $value)
{
$array[++$key] = [$value->categoryname, $value->number];
}
return view('reports.pie_chart')->with('categoryname', json_encode($array));
}
}
when I visit blade file I can see Only blade file and not displaying Google chart. How can fix this problem?
app.blade.php
<!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>Acxian</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<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('/') }}">
Acxian
</a>
<a class="navbar-brand" style="font-size: 15px;" href="{{ route('vehicles.index') }}">All Ads</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>
<a href="{{ route('manage.dashboard') }}">
Manage
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
#yield('js')
</body>
</html>
console
[["Category","Number"],["Car",1],["Truck",4],["Van",9]] reports:88:3
[Vue warn]: Error compiling template:
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<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="http://localhost:8000">
Acxian
</a>
<a class="navbar-brand" style="font-size: 15px;" href="http://localhost:8000/all-ads">All Ads</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 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Nalaka <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="http://localhost:8000/logout" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<a href="http://localhost:8000/manage/dashboard">
Manage
</a>
<form id="logout-form" action="http://localhost:8000/logout" method="POST" style="display: none;">
<input name="_token" value="CzrmFUNluJiJU0SoovSrvWB9dPLVyemjbTmJe8Vt" type="hidden">
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<title>pie chart</title>
<script src="http://localhost:8000/js/jquery.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var analytics = [["Category","Number"],["Car",1],["Truck",4],["Van",9]];
console.log(JSON.stringify(analytics));
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visulization.arrayToDataTable(analytics);
var options = {
title : 'Presentage of Categories'
};
var chart = new google.visulization.PieChart(document.getElementById('pie_chart'));
chart.draw(data,options);
}
</script>
<div class="container">
<h3 align="center">Category Chart</h3>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-heading">Percentage of Categoryies</h3>
</div>
<div class="panel-body">
<div id="pie_chart" style="width:750px; height: 450px;">
</div>
</div>
</div>
</div>
</div>
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
(found in <Root>) app.js:32420:7
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html app.js:40393:7
TypeError: google.visulization is undefined[Learn More] reports:95:8
blade with cdn
<html>
<head>
<title>pie chart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.box{
width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var analytics = <?php echo $categoryname; ?>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visulization.arrayToDataTable(analytics);
var options = {
title : 'Presentage of Categories'
};
var chart = new google.visulization.PieChart(document.getElementById('pie_chart'));
chart.draw(data,options);
}
</script>
</head>
<body>
<div class="container">
<h3 align="center">Category Chart</h3>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-heading">Percentage of Categoryies</h3>
</div>
<div class="panel-body">
<div id="pie_chart" style="width:750px; height: 450px;">
</div>
</div>
</div>
</div>
</body>
</html>

it is keyword spelling mistaken of visulization it should be as visualization now it is working

Related

Bootstrap modal will not show up

I am trying to implement the login and signup forms of my site as a bootstrap modal, but the modal is not showing up at all after clicking the link inside the navbar. I have encountered on couple of similar questions on this topic before, but none of the solutions seem to be working for me. JQuery is included so I have no clue what could be causing modal to be shy to show up. Can anyone help, please? Code is as follows:
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<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 style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>

<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<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 style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#loginModal" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>

Seems like your cdn is not supporting your code i have added cdn of bootstrap4 below
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<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 style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>

Add the bootstrap css into the head of your html: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>MyPage</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Login</a>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>

Just add this in your header.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

try to import bootstarp css files to the head before the app.css.
something like this
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
margin-bottom: 0 !important;
}
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<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 style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar -->
<!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End -->
<div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>

Link bootstrap.min.css file in you current code and define proper classes on modal html section. Check below code it is working fine...
<!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" />
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl" />
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<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 style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to Mohd. Aslam</h1>
</div>
</div>
</body>
</html>

Sidebar causing vue error laravel

I need some help checking if there is anything wrong with my sidebar menu and also maybe the placing of where I put my sidebar inside my app.blade.php. Since every time I try to add it inside the app.blade.php, I will get a vue error which in this case I did not install vue or update laravel at all. In the past, my sidebar menu was working fine so the code should be okay, so I was thinking is it because of the positioning?
app.blade.php
<!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">
</head>
<body>
<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" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.sidebar')
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ 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>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
sidebar.blade.php
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li>Deleted Records</li>
<li>Verification</li>
<li>Eval Test</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
<li><a href="{{ url('/edit0')}}" style="color: red">Driver License
</ul>
</li>
<li class="dropdown">
Evaluation <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Evaluation</li>
<li>Shirt Size</li>
</ul>
</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>

Navbar doesn't work in my published site

Published
Unpublished
My Navbar went missing i use Laravel and the function blade
Bootstrap is working seeing that the Jumbotron is activated
Can someone help?
Here is the navigation Code
<!DOCTYPE html>
<html>
<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>#yield('title')</title>
<!-- Bootstrap Core Css -->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Sweet Alert Css -->
<link href="plugins/sweetalert/sweetalert.css" rel="stylesheet" />
<!-- Design Css -->
<link href="plugins/pagecss/front_master.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
<img id = "brnd" style="float:left;margin-top: 0.7em;margin-right: 1em;" alt="Brand" src="../images/index.jpg"> <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="/">i-Kasal</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="#">Home</li>
<li><div class="fb-share-button" data-
href="https://ikasal.uphero.com" data-layout="button_count" data-
size="small" data-mobile-iframe="true"><a
class="fb-xfbml-parse-ignore" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fikasal.uphero.com%2F&src=sdkpreparse"><button
id = "sharebtn" class="btn btn-primary navbar-btn">Share
#Facebook</button></a></div></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "#yield('Signup')"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li class = "#yield('Login')"><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- Jquery Core Js -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="plugins/tether-master/dist/js/tether.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Jquery Validation Plugin Css -->
<script src="plugins/jquery-validation/jquery.validate.js"></script>
<!-- Sweet Alert Plugin Js -->
<script src="plugins/sweetalert/sweetalert.min.js"></script>
#yield('body')
</body>
</html>
And here is the welcome page code
#extends('layout.main.front_master')
#section('title','iKasal')
#section('body')
<!-- Design Css -->
<link href="../../../plugins/pagecss/welcome.css" rel="stylesheet" />
<div class="jumbotron" style = "padding-top:100px;">
<div class="container">
<h1 style="font-size:200px;">i-Kasal</h1>
<p style="font-size:80px;">Welcome to iKasal</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button"
style="font-size:50px;width: 25%">Learn more</a></p>
</div>
</div>
#endsection

Why "Dropdown" not working (with codes)

First Laravel Project.
The "built-in" app.blade.php (what made when we run php artisan make:auth) has this code:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<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">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</head>
<body>
<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>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('main')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
My master.blade.php has this code (I copied some from the app.blade.php)
<!DOCTYPE HTML>
<html class="html">
<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">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
<title>#yield('title')</title>
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">
<link href="{{ asset('/css/bootstrap3/css/bootstrap.css') }}" rel="stylesheet">
<link href="media/favicon.ico" rel="icon" type="image/x-icon" />
<script type="text/javascript" src="{{ URL::asset('assets/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/bootstrap.min.js') }}"></script>
</head>
<body>
<?php Debugbar::info('Mesterkész'); ?>
<header>
<h1>#yield('title')</h1>
</header>
<article>
<section class="navbar">
<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>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav></section>
<section class="nav">
<table align=center border=1>
<tr>
<td><button class=button>Főoldal</button></td>
<td><button class=button>Leltár</button></td>
<td><button class=button>Eladási mód</button></td>
<td><button class=button>Beszállítók</button></td>
<td><button class=button>Keresés</button></td>
<td><button class=button>Statisztikák</button></td>
<td><button class=button>Beállítások</button></td>
<td><button class=button>Naplózás</button></td>
</tr>
<tr>
#section('submenu')
#show
#yield('content')
</tr>
</table>
</section>
<section class="main">
#section('main')
#show
#yield('content')
</section>
</article>
</body>
<footer id=footer>
//Footer will go there
</footer>
</html>
My question is: Why the Dropdowns are working in the app.blade.php and not in master.blade.php?

Someone answered, but than deleted somewhy his answer.
The problem was, that I forgot to copy this part:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>

Unexpected end of file upon view of Laravel application

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.

We Keep Coding

PHP, A popular general-purpose scripting language that is especially suited to web development.

not displaying google charts in Laravel app [closed] - php

it is keyword spelling mistaken of visulization it should be as visualization now it is working

Related

Bootstrap modal will not show up

Sidebar causing vue error laravel

Navbar doesn't work in my published site

Why "Dropdown" not working (with codes)

Unexpected end of file upon view of Laravel application

Categories

Resources