currently I'm learning laravel 5.1, and i'm making a simple forum like website. but first m stuck in register view, i have used blade language and it is not loading bootstrap library properly.
This is my main page
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
#yield('page-content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is my nav.blade.php
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="http://localhost/laravel/laravel/public">Ask UMT</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Log In</li>
<li>{!!link_to_route('get_register','Register')!!}</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
And register.blade.php
#extends('layouts.masters.main')
#section('page-content')
#include('layouts.partials.nav')
{!! Form::open(['route' => 'post_register','id' => 'registration-form']) !!}
{!! Form::label('name','Full Name') !!}
{!! Form::text('name',null,['id' => 'name','class' => 'form-control','placeholder' => 'Full Name','required'])!!}
{!! Form::label('email','Email Address') !!}
{!! Form::email('email',null,['id' => 'email','class' => 'form-control','placeholder' => 'Email Address','required'])!!}
{!! Form::label('password','Password') !!}
{!! Form::password('password',['id' => 'password','class' => 'form-control','placeholder' => 'Password','required'])!!}
{!! Form::button('Register',['class' => 'btn btn-lg btn-primary btn-block','type' => 'submit'])!!}
{!! Form::close() !!}
#stop
What I'm doing wrong ?
I assume that the path to your bootstrap.min.css file is wrong. If you use the path css/bootstrap.min.css, the file should be placed in public/css/bootstrap.min.css.
All files that you want to access from the clientside should be placed in the public folder.
Furthermore you should use the asset() helper function, which will determine the right absolute path for you:
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
--
The same is true for your bootstrap.min.js file.
need to upload the files with the asset() function, so you specific to your project files will bring them to the public folder, thus leaving {{asset ('css/bootstrap.css')}},
You can learn more here
you need to use this method with css and js like this:
<link href="{{ asset('your-route/css/bootstrap.css') }}" rel="stylesheet">
and
<script src="{{ asset('your-route/js/bootstrap.js') }}"></script>
I hope it helps you...
Related
I'm trying to add a custom UI to my Laravel 9 app. So I'm adding extra CSS and JS files to my app.blade.php But looks like its not loading properly.
As you can see http://127.0.0.1:8000/css/tailwind.output.css and http://127.0.0.1:8000/js/init-alpine.js files not loaded. But when i check default http://127.0.0.1:8000/css/app.css file. Its working. But both of these files resides in the same location, which is resources/css/ and resources/js/ folders. Why those custom css and js files not loaded.
<!DOCTYPE html>
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('css/tailwind.output.css') }}">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"defer></script>
<script src="{{ asset('js/init-alpine.js') }}" defer></script>
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
I'm using tailwind CSS, livewire, jetstream and Laravel 9
this is my first question, so i'm a bit nervous. I'm trying to learn Laravel and using 5.6 version. I got a HTML theme from themeforest.net and build a master layout. I include header and footer codes from another blade.php file. In header, there is a menu called 'Browse Categories'. On the home page the menu contains a CSS class that called 'show'. But on the other pages the menu shouldn't be in it. Here is my header.blade.php file
<div class="col-md-5 order-3 order-md-2">
<nav class="category-nav primary-nav show"><!--this is where i stuck-->
<div>
<a href="javascript:void(0)" class="category-trigger">
<i class="fa fa-bars"></i>Kategoriler
</a>
<ul class="category-menu">
<li class="cat-item has-children">
Arts & Photography
<ul class="sub-menu">
<li>Bags & Cases</li>
<li>Binoculars & Scopes</li>
<li>Digital Cameras</li>
<li>Film Photography</li>
<li>Lighting & Studio</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
and that particular class is here
.category-nav.show .category-menu {
visibility: visible;
opacity: 1;
pointer-events: visible;
}
I need the 'show' class passive except for the home page. how can I do that? My master layout is here
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#yield('title', config('app.name'))</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Use Minified Plugins Version For Fast Page Load -->
<link rel="stylesheet" type="text/css" media="screen" href="css/plugins.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
</head>
<body>
<div class="site-wrapper" id="top">
#include('includes.header')
#yield('content')
</div>
<!--=================================
Footer Area
===================================== -->
#include('includes.footer')
<!-- Use Minified Plugins Version For Fast Page Load -->
<script src="js/plugins.js"></script>
<script src="js/ajax-mail.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
For named routes you can do as suggested in this answer like so:
<a class="nav-link {{ Route::currentRouteNamed('home') ? 'active' : '' }}" href="#">
Home
</a>
Or check the current route action if you don't use named routes
<a class="nav-link {{ Route::currentRouteUses('App\Http\Controdllers\HomeController#index') ? 'active' : '' }}" href="#">
Home
</a>
You can also not include the file at all:
#if(Route::currentRouteUses('App\Http\Controdllers\HomeController#index'))
#include('includes.header')
#endif
Or
#if(Route::currentRouteNamed('home'))
#include('includes.header')
#endif
When you render the homepage from your controller, include a variable like this:
return view('home', ['site' => 'home'])
then in your home.blade.php
<nav class="category-nav primary-nav #isset($site) show #endisset">
In your other views just don't include that variable.
I am using Laravel 5.5 with mysql database, session storing in database.
#Problem : Whenever I refresh or go into another page, it will log me out and redirect me back to the login page.
#Cause : After debugging, I found out whenever I #include a view top.blade.php inside my view template named master.blade.php, when I refresh the page, it will auto log me out and killing off the session.
The codes inside top.blade.php :
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Mobile Menu -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<!-- Header Icon -->
<a href="{{ url('/') }}">
<img class="navbar-brand" src="{{ asset('images/head.png') }}" alt="Little Project">
</a>
<!-- Message Of The Day -->
<div class="navbar-text visible-xs"><p>Little Project</p></div>
{{ Auth::user()}} <!-- to check the user info if it retains -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--Right side of the NavBar -->
<ul class="nav navbar-nav navbar-right">
#guest
<li>Login</li>
<li>Register</li>
#else
<li>Demo</li>
<li>Logout</li>
#endguest
</ul>
</div><!-- /.navbar-collapse -->
While the master.blade.php file is
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<!--meta header-->
<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() }}">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Title -->
<title>Little Project</title>
</head>
<body>
#include('constants.top')
<div class="container">
<!-- Contents -->
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
However when refresh, it will destroy all sessions as long as I #include top.blade.php
I have found my problem,
The fact that I have <li>Logout</li> within my top.blade.php file, it will auto call out the logout everytime it loads the page. Bad practice !!
What should be done is to have a post method directed to the logout controller through form with csrf_field()
Ensure you are using the web middleware group for your route.and ensure the web middleware group in app/Http/Kernel.php has the \Illuminate\Session\Middleware\StartSession::class, included
I am using laravel 5.4. Now I am using select2 plugin for displaying my select options at multi-level. Here my code is
#extends('layouts.app')
#section('content')
<html lang="">
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel-body">
<div class="form-group">
<label for="matching_star" class="col-md-4 control-label">Matching Star</label>
<div class="col-md-6">
<select name="matching_star" class="form-control select2" id="matching-star" multiple>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="{{ URL::asset('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css') }}" />
<script type="text/javascript" src="{{ URL::asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js') }}"></script>
<script type="text/javascript">
$('#matching-star').select2();
</script>
</html>
#endsection
My app.blade.php
<!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>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
It is not working only the input is visible. It suggest nothing when I am click the input.
If I remove the first line #extends('layouts.app') then it works fine. I think the App.js from App layout override the select2 plugin. How can I implement the multiselect without removing the App layout?. Thanks in advance.
wrap your javascript in a document ready like this
<script>
$(document).ready(function() {
$('#matching-star').select2();
});
</script>
1) Please check your select jQuery OR jQuery.min is properly load or Not.
2) Other wise jQuery are twice on your page.
i am not sure but just check it. i hope it's helpful.
Remove following from view and check again:
<script type="text/javascript" src="{{ URL::asset('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js') }}"></script>
As far as I know Laravel's default app.js includes jQuery by default.
I have an #include problem with my bootstrap navbar. I worked on it this morning and I really don't know where the problem is.
Here is the error message :
View [layouts.navbar] not found.
I want to include the content of navbar.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Mana Tournaments</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
{!! Html::style('css/style.css') !!}
{!! Html::style ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css') !!}
{!! Html::style ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css') !!}
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Accueil</li>
<li>Tournois</li>
<li>Inscription</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
To my index page (welcome.blade.php)
<!DOCTYPE html>
<html>
<head>
<title>Mana Tournaments</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
{!! Html::style('css/style.css') !!}
{!! Html::style ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css') !!}
{!! Html::style ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css') !!}
</head>
<body>
<h1>Gestionnaire de tournois</h1>
<div class="container">
#include('layouts.navbar')
</div>
</body>
</html>
I created manually a layout folder, then i created the navbar file. If I did someting wrong, maybe there's a command line for laravel for creating a folder ?
Thank you for helping me on my problem.
First of all,
Make sure the view you're including exists in the correct folder.
#include('layouts.navbar') will include that path \resources\views\layouts\navbar.blade.php
Make sure, The file within layouts directory,
Second, You don't need to write the whole html for the included part.
navbar.blade.php will be added (included) to welcome.blade.php,
it's like you're copying the content of navbar.blade.php and adding it to welcome.blade.php,
So make it like this instead,
navbar.blade.php
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Accueil</li>
<li>Tournois</li>
<li>Inscription</li>
<li>Contact</li>
</ul>
</div>
</nav>
That's because that file is not in the app/views directory. When you call #include('filename'), Blade automatically looks for any file with that name, inside the apps/views directory. Also, you're not supposed to write the file extension, as Blade automatically looks for files with .blade.php and .php extensions.
For Laravel 5 use this folder
resources/views/