Hi maybe I am missing something here however if I use a route such as
/admin-user-management
Then the blade template renders correctly. However using the exact code, copy/pasted into another view with the route
/admin/{id}
Then the view does not render the template.
Both views are identical in every single way, one renders the view correctly with the template while the other one with a slug will not render the template correctly, it will spit out elements at random however it does not render the actual layout correctly.
Why would they be different? This is not the first time I've come across this either and I'm just stumped as to what the difference would be if a slug is in the URL or not.
Once again, both files are identical.
One is the useraccounts function, the other is the show function on the controller.
public function show($id)
{
$user=User::find($id);
return view('admin.show',compact('user'));
}
public function useraccounts()
{
$users = User::all();
return view('admin.useraccounts', compact('users'));
}
And the button that displays the user details is as follows
<a href="{{route('admin.show',$user)}}" class="btn btn-primary">View all information</a>
Please does anyone have any ideas about this issue I am having?
The admin.show view
@extends('admin')
@section('main')
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="/admin"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>
{{--53<sup style="font-size: 20px">%</sup>--}}
</h3>
<p>
Statistics
</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="#" class="small-box-footer">
View Information <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>
{{--53--}}
</h3>
<p>
User Management
</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="/admin-user-management" class="small-box-footer">
Edit Details <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>
{{--65--}}
</h3>
<p>
Detailed Site Information
</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#" class="small-box-footer">
View Data <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
</div><!-- /.row -->
<!-- top row -->
<div class="row">
<div class="col-xs-12 connectedSortable">
</div><!-- /.col -->
</div>
</section><!-- /.content -->
<label>{{$user->name}}</label>
</aside><!-- /.right-side -->
@endsection
And then the admin.admin-user-management view which is using
@extends('admin')
@section('main')
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="/admin"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>
{{--53<sup style="font-size: 20px">%</sup>--}}
</h3>
<p>
Statistics
</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="#" class="small-box-footer">
View Information <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>
{{--53--}}
</h3>
<p>
User Management
</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="#" class="small-box-footer">
Edit Details <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>
{{--65--}}
</h3>
<p>
Detailed Site Information
</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#" class="small-box-footer">
View Data <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div><!-- ./col -->
</div><!-- /.row -->
<!-- top row -->
<div class="row">
<div class="col-xs-12 connectedSortable">
</div><!-- /.col -->
</div>
</section><!-- /.content -->
<div class="container-fluid">
<div class="form-box">
@if (session('message'))
<div class="alert alert-info" style="text-align: center; width: 200px; ">
{{ session('message') }}
</div>
@endif
<div class="container">
{{-- @if(Auth::user()) --}}
<form class="form-group">
@if($users != null)
@foreach($users as $user)
@if($user->admin != 'true')
{!! Form::label($user->name) !!}
<div class="container">
<br>
<a href="{{route('admin.show', ['id' => $user->id])}}" class="btn btn-primary">View all information</a>
</div>
</br>
<div class="container">
{{-- <a href="{{route('house.edit',$house)}}" class="btn btn-primary">Update house details</a> --}}
</div>
<br>
<div class="container">
{{-- {!! Form::open(['method' => 'DELETE', 'route'=>['house.destroy', $house->id]]) !!} --}}
{{-- {!! Form::submit('Delete House', ['class' => 'btn btn-danger']) !!} --}}
{{-- {!! Form::close() !!} --}}
</div>
@endif
@endforeach
@else
{{-- <li><a href={{url('/house/create')}}>Add new house</a></li> --}}
@endif
</form>
{{-- @endif --}}
</div>
</div>
</div>
</aside><!-- /.right-side -->
@endsection
The routes.php file
//Admin Routes
Route::get('/admin-user-management', 'AdminController@useraccounts');
Route::resource('admin', 'AdminController');
Header
<head>
<meta charset="UTF-8">
<title>Admin | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="bootstrap/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="bootstrap/css/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="bootstrap/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- fullCalendar -->
<link href="bootstrap/css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="bootstrap/css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="bootstrap/css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="bootstrap/css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
Your asset paths are relative, they should be absolute:
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
Notice the extra / before bootstrap/css/bootstrap.min.css. If the / is missing and your URL is /admin/1, the relative path is /admin, and it will try to find the bootstrap CSS file in /admin/bootstrap/css/bootstrap.min.css which if course doesn't exist.
The best solution here is to use the asset helper function when generating any asset URLs, because it will generate a complete URL including the protocol and domain, which would avoid any such issues in the future, like so:
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
The asset function will generate the URL like so:
http://example.com/bootstrap/css/bootstrap.min.css
This will mean the location will always be correct. Of course you should use the function when loading all assets from your server, including JavaScript files, but not on external resources like html5shiv, which is loaded from maxcdn.com.