Let me just give you a brief introduction to the question, I'm going to be having about 20 pages on my website once a user logs in, I need to organise these pages to use the same header, so I've come to the decision to use a layout as I'm using Laravel framework, it seemed stupid to have the same header spread across the 20 pages, if I wanted to make a change it would be hell.
In Bootstrap, I didn't add any kind of active class to any of the selected pages, it was just a navigation bar, I've recently upgraded to the Bulma framework where it requires an active class on the parent tab to show the child tabs, sort of a parent and sub categorys system going on.
I'm not sure how to handle this in the Layout, I need to add an active class and I also need to choose which sub navigation to show.
I've added my code below, I was wondering if anyone could tell me how I can approach this?
The below code is my whole page, including the header (the <section class="hero is-danger inside-header">)
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<title>{{ config('app.name') }} - Login</title>
<link rel="stylesheet" href="assets/public/1.0/frontend/css/bulma.css?id={{ time() }}" type="text/css">
<link rel="stylesheet" href="assets/public/1.0/frontend/css/override.css?id={{ time() }}" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="inside">
<section class="hero is-danger inside-header">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-5">
<p class="title header-title">Introducing {{ config('app.name') }}</p>
<p class="subtitle">Interacting with others...</p>
</div>
<div class="column is-3"></div>
<div class="column is-4">
<a class="button is-danger is-large is-disabled join-game-button">
<i class="fa fa-sign-in"></i> Join Game
</a>
<a class="button is-success is-large is-disabled users-online-button">
<i class="fa fa-users"></i> 10
</a>
<br><br>
<a class="button is-success is-large is-disabled platform-button">Platform: Closed Beta</a>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container">
<nav class="tabs is-boxed">
<ul>
<li class="is-active">
<a href="/documentation/overview/start/">
<i class="fa fa-user"></i> {{ Auth::user()->username }}
</a>
</li>
<li>
<a href="http://bulma.io/documentation/modifiers/syntax">
<i class="fa fa-university"></i> Business
</a>
</li>
<li>
<a href="http://bulma.io/documentation/columns/basics">
<i class="fa fa-user-secret"></i> Gangs
</a>
</li>
<li>
<a href="http://bulma.io/documentation/elements/box/">
<i class="fa fa-users"></i> Community
</a>
</li>
<li>
<a href="http://bulma.io/documentation/components/breadcrumb/">
<i class="fa fa-shopping-cart"></i> Store
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<nav class="navbar has-shadow">
<div class="container">
<div class="navbar-tabs">
<a class="navbar-item is-tab is-active" href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Security</a>
</div>
</div>
</nav>
<div class="container holorp-container-fixed">
<br>
<div class="columns is-desktop">
<div class="column is-8">
<div class="message is-danger">
<div class="message-body">
<p>not sure what can even go here...</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="message is-success">
<p class="message-header">Change Log <span class="is-pulled-right"><i class="fa fa-user"></i></span></p>
<div class="message-body">
<span class="tag is-dark">26/09/17</span> <code>Updates the platform with a fresh design</code><br>
<span class="tag is-dark">26/09/17</span> <code>Upgraded from Laravel 5.4 to 5.5</code><br>
<span class="tag is-dark">26/09/17</span> <code>Added core features to the admin panel</code><br>
<span class="tag is-dark">26/09/17</span> <code>Did something, can't even remember</code><br>
<br>
<p><a class="modal-button" data-target="#modal-forgotPassword" id="forgot-pw-modal">View all recent changes</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
If I understand well, you need "the same header" on every page. Laravel comes with Blade Template Engine, it has a set of methods to help us.
Using the template engine, you can create your app template in resources/views/layouts/app.blade.php
using #yield you can inform what part is dynamic:
<div class="container">
#yield('content')
</div>
To reuse the template in others views, for example using two pages:
The content of file resources/views/layouts/pages/one.blade.php
#extends('layouts.app')
#section('content')
<div class="row">
<h1>Page 1</h1>
</div>
#endsection
The content of file resources/views/layouts/pages/two.blade.php
#extends('layouts.app')
#section('content')
<div class="row">
<h1>Page 2</h1>
</div>
#endsection
Using #yield, #extends and #section you can reuse any HTML template in your Laravel Application.
We can create any #yield that we need:
<div class="container">
#yield('content')
</div>
#yield('scripts')
And reuse in our pages:
#extends('layouts.app')
#section('content')
<div class="row">
<h1>More than one #yield</h1>
</div>
#endsection
#section('scripts')
<script type="text/javascript" />
console.log('using Blade Template Engine');
</script>
#endsection
There is the #include method, that includes the content of another file if you need.
#extends('layouts.app')
#section('content')
<div class="row">
<h1>Page 2</h1>
#include('forms.form2')
</div>
#endsection
UPDATE:
Knowing these things above, we can do:
#extends('layouts.app')
#section('content')
<div class="row">
<h1>You are in Item B</h1>
<ul>
<li id="liA">Item A</li>
<li id="liB">Item B</li>
<li id="liC">Item C</li>
</ul>
</div>
#endsection
#section('scripts')
<script type="text/javascript" />
var d = document.getElementById("liB");
d.className += " is-active";
</script>
#endsection
This will add the CSS class in the element with id "liB", we need to use something to identify the element, I'm using "id" property but you can use anyone, just need to check what JS method to use to get it in "d" variable. You can check this for more information Element.className
I don't use Bulma, but I believe that will do what you want.
Related
What i am trying to do is to submit my form but this form is not working.
If i run this code without extending my layout file its work but inside this code form is not working.
Can you check my code and tell my mistake.
Thanks in advance
Form.blade.php
#extends('layouts.login')
#section('title')
TSI(New Buyer)
#endsection
#section('page-header')
BUYER
#endsection
#section('breadcrumb1')
Marketing
#endsection
#section('breadcrumb2')
Add new buyer
#endsection
#section('content')
<form method="POST" action="{{route('inquiry.store')}}">
{{ csrf_field()}}
<input type="text" name="name">
<input type="submit" value="submit">
</form>
#endsection
Layout file that contain the master layout
login.blade.php
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
#include('include.head')
</head>
<body class="theme-blush">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="m-t-30"><img class="zmdi-hc-spin" src="{{asset('assets/images/loader.svg')}}" width="48" height="48" alt="Aero"></div>
<p>Please wait...</p>
</div>
</div>
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
#include('include.sidebar')
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<!-- Main Content -->
<section class="content">
<div class="body_scroll">
<div class="block-header">
<div class="row">
<div class="col-lg-7 col-md-6 col-sm-12">
<h2> #yield('page-header')</h2>
<ul class="breadcrumb">
<li class="breadcrumb-item"><i class="zmdi zmdi-home"></i> TSI</li>
<li class="breadcrumb-item">#yield('breadcrumb1')</li>
<li class="breadcrumb-item active">#yield('breadcrumb2')</li>
</ul>
<button class="btn btn-secondary btn-icon mobile_menu" type="button"><i class="zmdi zmdi-sort-amount-desc"></i></button>
</div>
<div class="col-lg-5 col-md-6 col-sm-12">
#yield('plus-btn')
</div>
</div>
</div>
<div class="container-fluid">
#yield('content')
</div>
</div>
</section>
#include('include.script')
</body>
</html>
**Using Laravel 5.8.31 & Bootstrap 4. Browser: Chrome v. 76.0.3 and Opera 62.0.33 **
I was testing my CRUD functions by deleting a post. After deletion, the controller redirects back to my post index page. When the page loaded, the bootstrap side bar wrapped down below the other posts, rather than being on the right. Was fine before the post deletion.
I tried altering the cols and floating elements to no avail. Using Chrome dev tools, I see that the sidebar is nested in an em tag that isn't in the code. Tried clearing application cache. No effect.
I suspect this has something to do with the blade templating language and parsing the html, although if it is, I have no idea how to fix this other than manually installing the sidebar on every page.
How do I fix this??
Code can be found here: https://github.com/gkennedy87/Hillcrest/tree/master/resources/views
(It seems that laravel is also wrapping the footer in an em tag. Although this is a non-issue at the moment)
// views/posts/index.blade.php
#extends('layouts.app')
#section('content')
#include('inc.navbar')
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8">
<h1>Our Blog</h1>
#if (count($posts) > 0)
#foreach ($posts as $post)
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">{{$post->title}}</h2>
<p class="card-text">{!! str_limit($post->body,200,'...')!!}</p>
Read More →
</div>
<div class="card-footer text-muted">
Posted on {{$post->created_at}} by
Start Bootstrap
</div>
</div>
#endforeach
{{$posts->links()}}
#else
<p>No Posts Found</p>
#endif
</div>
#include('inc.sidebar')
<!--end row -->
</div>
<!--end container -->
</div>
#include('inc.footer')
#endsection
// views/inc/sidebar.blade.php
<!--sidebar start -->
<div class="col-md-4 col-lg-4">
<div class="sticky">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- sidebar end -->
I setup the app on a local environment, the sidebar always stays on the right even after deleting a post. The response also doesn't contain any em tags. Could you try clearing the cache:
php artisan cache:clear
php artisan view:clear
php artisan config:clear
i try to develop a simple blog with laravel, everything is okay on localhost but when i upload this project on 000webhsot (as a free hot) then user part properly work but in admin part, when i login in admin part i get this error.
View [admin\includes\app] not found. (View: /storage/ssd1/425/7737425/blog/resources/views/admin/home.blade.php)
[error view ][1]
[1]: https://i.stack.imgur.com/CF62K.png .
this is "view\admin\includes\app.blade.php" code
<!DOCTYPE html>
<html lang="en">
<head>
#include('admin.includes.head')
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
#include('admin.includes.header')
#include('admin.includes.sidebar')
#section('main-content')
#show
#include('admin.includes.footer')
</div>
</body>
</html>
and this is "resources/views/admin/home.blade.php" code
#extends('admin\includes\app')
#section('main-content')
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Blank page
<small>it all starts here</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li>Examples</li>
<li class="active">Blank page</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Default box -->
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Title</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
Start creating your amazing application!
</div>
<!-- /.box-body -->
<div class="box-footer">
Footer
</div>
<!-- /.box-footer-->
</div>
<!-- /.box -->
</section>
<!-- /.content -->
</div>
#endsection
and the "web.php" code is here
<?php
// route for user part //
Route::group(['namespace'=>'user'],function(){
Route::get('/','homeController#index' );
//post routes
Route::get('/post/{slug}','postController#post');
//tag routes
Route::get('/post/tags', 'homeController#tags');
//category routes
Route::get('/post/category/{category}', 'homeController#category')->name('category');
});
// route for user part end //
// route for admin part //
Route::group(['namespace'=>'admin'],function(){
Route::get('/admin/home','homeController#home')->name('admin.home');
//user routes
Route::resource('/admin/user','userController');
//post routes
Route::resource('/admin/post','postController');
//tags routes
Route::resource('/admin/tags','tagsController');
//category routes
Route::resource('/admin/category','categoryController');
//Admin auth Routes
Route::get('admin-login', 'Auth\LoginController#showLoginForm')->name('admin.login');
Route::post('admin-login', 'Auth\LoginController#login');
});
// route for admin part end//
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
You are extending a view that doesn't exist:
#extends('admin\includes\app')
With dot-notation it should work.
#extends('admin.includes.app')
I'm a newbie in laravel and actually I have to write the sidebar in every blade of the application to make it work, but I'd like using a different sidebar depending on the section of the site where I am.
So this is what I'm trying to do:
EDIT 1
layouts/main.blade.php
<div class="wrapper">
<div class="sidebar" data-color="brown" data-active-color="danger">
<div class="logo">
<!-- Content -->
</div>
<!-- Sidebar -->
#if(request()->is("{{ url('/')}}/{operator}"))
#include('operator.sidebar')
#else
#include('stduser.sidebar')
#endif
<!-- End sidebar -->
</div>
<div class="main-panel">
<!-- Navbar -->
<nav></nav>
<!-- End navbar -->
<!-- Main content section -->
#yield('main-panel')
<!-- End main content section -->
<!-- Footer -->
<footer></footer>
<!-- End footer -->
</div>
</div>
stduser/dashboard.blade.php
#extends('layouts.main')
#section('main-panel')
<!-- Main panel contents -->
#endsection
#section('extrajs')
<!-- script contents -->
#endsection
stduser/sidebar.blade.php
<div class="sidebar-wrapper">
<div class="user btn-rotate">
<div class="photo">
<i class="fa fa-user-circle-o fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
<div class="info">
<a href="{{ url('/user') }}/profile">
<span>
{{ Auth::user()->name }}
</span>
</a>
<div class="clearfix"></div>
</div>
</div>
<ul class="nav">
<li class="active btn-rotate">
<a href="{{ url('/') }}">
<i class="nc-icon nc-bank"></i>
<p>Companies</p>
</a>
</li>
</ul>
</div>
operator/sidebar.blade.php
<div class="sidebar-wrapper">
<div class="user btn-rotate">
<div class="photo">
<i class="fa fa-user-circle-o fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
<div class="info">
<a href="{{ url('/user') }}/profile">
<span>
{{ Auth::user()->name }}
</span>
</a>
<div class="clearfix"></div>
</div>
</div>
<ul class="nav">
<li class="active btn-rotate">
<a href="{{ url('/') }}/{{ $operator->id }}/about">
<i class="fa fa-tachometer" aria-hidden="true"></i>
<p>DashBoard</p>
</a>
</li>
<li class="btn-rotate">
<a href="{{ url('/')}}/{{ $operator->id}}/suppliers">
<i class="fa fa-link" aria-hidden="true"></i>
<p>Suppliers</p>
</a>
</li>
<li class="btn-rotate">
<a href="{{ url('/')}}/{{ $operator->id}}/products">
<i class="fa fa-product-hunt" aria-hidden="true"></i>
<p>Products</p>
</a>
</li>
</ul>
</div>
This is how my views are structured:
Is there a way to make it work?
you can include the blade file like so #include('layouts/sidebar_' . $sidebarName) and if you want to avoid errors when include doesnt exist you can use #includeIf('view.name', ['some' => 'data'])
So you have just the include statement and the sidebar content only once
Based on your feedback to addi2113's answer, it seems like you're wanting to switch out the sidebar include based on which page you're on. There are several ways to do this. The simplest (yet least flexible) way to do this would be to show a certain sidebar based on the route. For instance, if you have a predictable route structure for all "operator" pages, such as example.com/operator/*, you could do the following by using an #if statement in your blade view. Like this:
#if(request()->is("/unique/url/pattern"))
#include('operator.sidebar')
#else
#include('stduser.sidebar')
#endif
Obviously, you can edit this to use any logic you want, but this is a somewhat simple way to handle this.
EDIT: Try this in your main.blade instead of using a section and yield:
<div class="wrapper">
<div class="sidebar" data-color="brown" data-active-color="danger">
<div class="logo">
<!-- Content -->
</div>
<!-- Sidebar -->
<div class="sidebar-wrapper">
<div class="user btn-rotate">
<div class="photo">
<i class="fa fa-user-circle-o fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
<div class="info">
<a href="{{ url('/') }}/profile">
<span>
{{ Auth::user()->name }}
</span>
</a>
<div class="clearfix"></div>
</div>
</div>
#if(request()->is('/unique/url/pattern'))
#include('operator.sidebar')
#else
#include('stduser.sidebar')
#endif
</div>
</div>
</div>
EDIT 2:
Since it appears you are using a dynamic URL for the operator pages, you have two options. The first option is to make your operator routes more unique than they currently are so that you can use an asterisk to denote all routes of a current pattern. For instance, in routes/web.php, change your routes for operator pages to this type of pattern:
Route::get('/operator/{operator}/about','OperatorController#about')->name('operator-about');
By adding the operator slug into the url, you now have a UNIQUE path that you can reference. Then, in your main blade, you would reference all of the operator routes together like this:
#if(request()->is('/operator/*'))
#include('operator.sidebar')
By making the URL unique, you have made a very simple way to reference all routes where you want to show the operator sidebar.
Another option, which is not as robust in my opinion, is to refer to the specific routes by naming. For instance, using the route I defined up above with the name of "operator-about", I could show the operator sidebar like this:
#if(Route::currentRouteName()=="operator-about")
#include('operator.sidebar')
You would then expand upon this by explicitly defining all named routes that you would want to show the operator sidebar for. As you can probably tell, this will get messy if there are a lot of routes you want to include. I don't recommend to do it this way, but you can feel free to solve the problem however you want.
I've created a file called menu.php to be my universal nav/menu file. The way it was created using bootstrap though, I have a div called article at the bottom which serves as the main body of the app, since the sidebar in my menu is expandable/responsive.
I really want to have one global menu file. I'm currently including it in all of my content pages like so:
<?php include("menu.php")?>
This works but it breaks my formatting. What I'm trying to do is make all of my main pages such as index.php have the html formatted so that it will always sit inside the tag in my code below which shows card classes.
<header>
<div class="branding">
<div class="menu-button menu-toggle nav">
<i class="material-icons">menu</i>
</div>
<img src="" />
</div>
<div class="page-details">
</div>
<div class="settings">
<div class="menu-button profile">
<i class="far fa-user-circle fa-2x"></i>
</div>
<div class="menu-button menu-toggle aside">
<i class="material-icons">chat</i>
</div>
</div>
</header>
<div class="app">
<nav>
<div class="title-block">
<img src="" />
</div>
<ul>
<li><a href="#"><i class="material-icons">home</i>
<span>Home</span></a></li>
</ul>
</nav>
<!--This following article section is the main body of the page, that I want each additional page to take up-->
<article>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</article>
</div>
Example:
Menu.php is my global menu/nav file but it makes the page/app act as a wrapper for all the other pages (index.php, editor.php, etc.)
menu.php
<div class="app">
<nav>
Nav menu content
</nav>
<article>
This will be the main page article for index.php, editor.php,etc.
</article>
</div>
example with index.php (the start and end are just hypothetical to show the endpoints)
<body>
<?php include("menu.php");?>
<?php start('article') ?>
<!--Everything from here to the end() call would be inserted in the article tags on menu.php-->
<div class="app">
<div id="content">
<div>
<h1 style="text-align: center; color: #A9BD50; ">Content Management Editor</h1>
</div>
<form method="post">
<textarea id="mytextarea"></textarea>
</form>
<div>
<h1 style="text-align: center; color: #A9BD50; ">Preview</h1>
</div>
</div>
</div>
<?php end() ?>
</body>