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
Related
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 index.php file and I'm trying to include the header and footer (html files) in it. They are both bootstrap based and I just made a few customizations in header.html. If I include only the header file there's no problems at all and index.php is displayed as expect but when I include both files (hearder/footer.html), for some reason, my css doesn't display the changes (only displays the default values of the bootstrap). This is the problem I would like to solve. I will ask another question too:
I have several pages that have the same header and footer. The goal here is not repeating code. Is this the better way to include
these elements (header/footer)? Am I doing it right?
These are the files I'm using:
This pen shows the modifications that should be displayed in the index.php file.
This file represents the main file (index.php)
This file contains the header.html
This file contains the footer.html
I realized that if I comment the include of footer.html in the main file index.php it's content is displayed and everything works right.
Actually, Your footer.html also includes CSS stylesheets which override the header.html's stylesheets.
You can do something like this
*Header.html
<html>
<head>
add all the stylesheets here or combine them
</head>
<body>
<navigation>
</navigation>
*footer.html
<footer information goes here>
add javascript here
</body>
</html>
*index.php
include ('header.html')
content goes here
include('footer.html')
Your Header and footer are resetting the CSS when loaded. You only need to link your CSS in the header. Think of it as creating 1 document out of 3, you only need to reference the material once.
Use this PHP to include your files and then fix your HTML files
<?php
require_once ('header.html');
?>
//do stuff
<?php
require_once('footer.html');
?>
In your header
<!DOCTYPE html>
<html>
<head>
<title>Header</title>
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../css/navbar.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-WDM-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>
<a class="navbar-brand" href="#">
<img alt="Brand" src="../img/fb_favicon.jpg">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-WDM-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>home</li>
<li>about</li>
<li>projects</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
HERE IS WHERE YOUR MAIN BODY CONTENT WOULD BE PLACED
//Do Stuff
In your footer
footer class="footer">
<div class="container">
<div class="col-md-4">
<p>Copyrights</p>
</div>
<div class="col-md-8">
<p>links here</p>
</div>
</div>
</footer>
</body>
</html>
I have following html/css theme and trying to convert it to cake php theme.
I was reading through tutorials but I just don't understand it. Either css file is not working or the content is not displaying.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Shedule Me</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom">
<div class="container header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
</button>
<a class="navbar-brand logo-text" href="#page-top">New Theme</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Home
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Services
</li>
<li class="page-scroll">
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<section>
<div class="container">
<div class="row">
<div class="col-md-7">
<img src="img/benner.png" alt="Banner" class="img-responsive" />
</div>
<div class="col-md-5">
<div class="card">
<h3 class="title-log">Already a Member?</h3>
<label>
Email
<input style="display:block;margin:0 auto;" type="text"/>
</label>
<label>
Password
<input style="display:block;margin:0 auto;" type="password"/>
</label>
<input type="button" value="Log in" class="elevator"/>
<h3>Not a Member?</h3>
Sign up
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="framework/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="framework/bootstrap/js/bootstrap.min.js"></script>
webroot/
custom/ <-- custom css/js plugin folder, for example datepicker plugin
css/
js/
css/
img/
js/
CSS
// load css from css folder, example.com/css/bootstrap.min.css
<?= $this->Html->css('bootstrap.min') ?>
// load css from custom folder, example.com/custom/bootstrap.min.css
<?= $this->Html->css('/custom/bootstrap.min') ?>
// load remote / cdn css file, note without http or https
<?= $this->Html->css('//fonts.googleapis.com/css?family=Montserrat:400,700') ?>
JS / jQuery
// load js file from js folder, example.com/js/bootstrap.min.js
<?= $this->Html->js('bootstrap.min') ?>
// load js file from custom folder, example.com/custom/bootstrap.min.js
<?= $this->Html->js('/custom/bootstrap.min') ?>
// load remote / cdn js file, note without http or https
<?= $this->Html->js('//code.jquery.com/jquery-2.2.4.min.js') ?>
read more http://book.cakephp.org/3.0/en/views/helpers/html.html
I've below HTML code which I intend to use with index.php file but there seems a problem.
<!-- nav bar -->
<nav id="top">
<nav class="navbar navbar-xs navbar-custom">
<div class="container-fluid" >
<div class="nav pull-right">
<font face="bebas">
<ul class="list-inline">
<li> 123456789 </li>
<li class="dropdown"><i class="fa fa-user"></i> My Account <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<li>Register</li>
<li>Login</li>
</ul>
</li>
<li><i class="fa fa-heart"></i> Wish List (0)</li>
<li><i class="fa fa-shopping-cart"></i> Shopping Cart</li>
<li><i class="fa fa-share"></i> Checkout</li>
</ul>
</div>
</div>
</nav>
</nav>
<!-- searchbar and logo -->
<header id="margin">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div id="logo">
<center> <span class="tab-space"></span> <img src="J:\lawn\home\artwork\lawn.png" height="42px" />
</div>
</div>
<div class="col-xs-5">
<div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Search" class="form-control" border-rad>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" style="border-radius: 0;">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
</font>
</header>
index.php
<!DOCTYPE html>
<html>
<head>
<title> experiment ground </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <meta name="viewport" content="width=device=width, initial-scale=1"> omitted to remove unresponsiveness of columns -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<?php include('includes\header.html'); ?>
</body>
</html>
i want an output like this but all i am getting is this.
is it a problem with using bootstrap or something else entirely.
my main purpose is to use include() feature of PHP to make my code minimal. is there any other way I can include headers or footers templates or codes to a PHP page?
thank you!
Link jQuery before you include Bootstrap
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
1) open your Developer Tools (F12)
2) refresh page
3) check "console" tab
I think, you'll find answers in console.
Anyway, change your paths to relative (assuming file index.php at one tree level with bootstrap directory):
href="bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
Instead of:
href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
And do it for all files, or just connect it from CDN - it will be great ;)
Call jquery.min.js before bootstrap.min.js
The script bootstrap.min.js uses jQuery plug-in in most actions.
Also, check if the files are actually in the path described. It is highly recommended that you call the files from the main project directory.
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...