Let us say i have two pages based on laravel and I have different script files for both the pages.Now I am loading all the scripts in index.blade.php.As per the present implementation all the scripts are loaded in both cases.How to load different script files for different pages and also load scripts after the html.
I am not familiar with require.js which was stated as an alternative by #jsxqf in the comments.
I personally have yields in my master-layout (one for js, one for css) which i am adressing using blade. In your views, you could do the same.
File layout/master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
#yield('css-scripts')
</head>
<body>
#yield('content')
</body>
<script src="script.js"></script>
#yield('js-scripts')
</html>
Your views would then extend this layout and put the scripts independently in the corresponding sections like so:
File myview.blade.php
#extends('layout.master')
#section('content')
// your content...
#stop
#section('js-scripts')
// here, you have control over additionally loaded scripts...
<script src="otherscript.js"></script>
#stop
But it looks like require.js might be a good alternative to this approach, which i wasn't aware of until now.
The best approach you can do is creating a section to put optional scripts using stack on your main layout
<html>
<head>
<!-- At the end of head -->
#stack('styles')
</head>
<body>
<!-- At the end of body -->
#stack('scripts')
</body>
</html>
In a normal view which would be your page,
#extends('layouts.app')
#push('styles')
<link rel="stylesheet" href="{{ asset('css/page1.css')}}">
#endpush
#section('content')
// page content
#endsection
#push('scripts')
<script src="{{ asset('js/page1.js')}}"></script>
#endpush
This allows you to add additional optional scripts and styles to your main layout from other views, making it completely safe to organize styles / scripts in your views
Related
I am new to css & bootsrap. I developed a small website,that has six pages, I separated header and footer in two different php files in order to make life easy. Then I call header & footer in the top and bottom of each page respectively. Based on my requirement I customize some elements design (override bootsrap design) in a separate css file called "custom.css". each time when I bring changes in that file I have to close and re open the text editor in order to see the changes. First I thought it was be due to text editor so I changed my text editor from "Sublime Text to Php Storm";however, the issue has not yet been solved.
below are code snippets of my project:
header.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/respond.js"></script>
</head>
footer.php
<!-- Footer -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd
/popper.min.js" integrity="sha384-
b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous">
</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I call the above files into my pages as below:
<? include ("header.php")?>
<body>
<div class="container">
.
.
.
.
</div> <!-- end container -->
<?include ("footer.php");?>
But if I do not separate header and footer, and write them in one page I can see changes immediately, I don't have to close and re open my text editor in order to see changes.
Could you please help me
As determined in the comments, it's a problem with your browser cache.
You either
need to refresh the page with CTRL+F5 (but this depends on your OS and browser) or
you instruct your local server to forbid browser caching in your development environment (don't do this on production!).
To prevent browser caching, instruct your webserver to send the appropriate headers. There is a nice answer here: How to control web page caching, across all browsers?
You'll need to know how to configure your webserver - I don't know OpenServer.
Note that it is not enough to add the headers in your PHP script because you need the headers to be sent with the static CSS file.
Below code works perfectly
<?php include_once('header.php');?>
<body>
:
:
:
some code
<?php include_once('footer.php');?>
I'm new to Laravel, and I'm trying to do a "modular" page for the first time. Everything was going fine, had my base layouts, which gets extended on my home page, have set up some sections/yields with no problem (content, title, etc) but one specific #yield keeps being rendered at the wrong place, I've put it inside my head file (head.blade.php), which already have another #yield for the title, but that one keeps getting rendered inside the body. I tried doing some tests, and discovered that if I put my title #yield inside <title></title> it works OK, but if I put it outside the tag it is moved to the body.
Thats a normal Laravel way of working (#yield can't be by itself, only inside a tag) or something is wrong ?
default.blade.php
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
#include('includes.nav')
#yield('tools')
<main class="mdl-layout__content">
<div class="page-content">
#yield('content')
</div>
</main>
#include('includes.footer')
</div>
</body>
</html>
head.blade.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="cache-control" content="no-cache">
<meta name="description" content="XXXXXX">
<meta name="author" content="XXXXXXXXXXXXX">
<title>#yield('title')</title> =====> Works normally if put here
#yield('title') =====> Rendered inside the body if put that way
<!-- jQuery 3.2.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Normalize CSS -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Dialog Polyfill -->
<link rel="stylesheet" type="text/css" href="css/dialog-polyfill.css">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
It's a normal browser behaviour. First of all you have to place all the things inside the right places. It's like you are trying eat some fat meat without fork and then crying that your hands in fat :)
You always have to define all tags that browsers expect. Title tag define that inside title of the page is located. yield('title') just means the name that you gave its for inserting there then. It looks like id in HTML.
Since you haven't described to browser what do you want to insert here it is trying to solve the problem and it's usually a placement all the things without needed tags in body (only if we are talking about omitting tags in the header).
I'm new to laravel. I have two pages A and B which uses tables. Now in my layout.blade.php I have a link towards only one stylesheet which is affecting both the tables in A and B. I only want it in A and for B I have different set of stylesheet. How do I target the stylesheet to the pages?
You can load css files directly in these views, so A would load one css and B will load another one.
Another way if to use conditional loading in layout.blade.php:
#if (request()->is('pageA'))
// Load CSS for A
#elseif (request()->is('pageB'))
// Load CSS for B
#endif
Usually in this case you should have a master layout that only include global scripts and stylesheets, says layouts/global.blade.php
<!doctype html>
<html lang="en-US">
<head>
<title>Your website</title>
#section('meta')
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
#show
#section('stylesheets')
<link rel="shortcut icon" href="{{asset("favicon.ico")}}" type="image/x-icon"/>
<link type="text/css" rel="stylesheet" href="{{asset("css/global.css")}}"/>
#show
#section('scripts')
<script src="{{url("js/global.js")}}"></script>
#show
</head>
<body>
#yield('content')
</body>
</html>
Then in your page_a.blade.php, you extend it and include your own specific stylesheets:
#extends('layouts/global')
#section('stylesheets')
#parent
<link type="text/css" rel="stylesheet" href="{{url("css/page_a.css")}}"/>
#endsection
#section('scripts')
#parent
<script src="{{url("js/page_a.js")}}"></script>
#endsection
#section('content')
Your page A content
#endsection
I think you may create a section like the following in your view, for example:
#extends('layouts.master')
#section('styles')
<link href="{{asset('assets/css/custom-style.css')}}" />
#stop
Hope this helps you.
You can use sass css for that conditions. In that sass css you can use if and else condition and check variable.
Please refer below link for how to use it.
http://thesassway.com/intermediate/if-for-each-while
I am using the slim framework to create a website and have views and twig in my project. In my pages, I use php to help facilitate what html is rendered in my webpage. An example is below
<html>
<head>
<title>I ain't afraid of no bugs!</title>
<link rel="shortcut icon" type="image/x-icon" href="../_images/_logos/bug-hunter-icon.ico" />
<link rel="stylesheet" type="text/css" href="../_css/home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript" src="_javascript/login.js"></script>
<script type="text/javascript" src="_javascript/sign_up.js"></script>
</head>
<body>
<?php require 'header_login.php' ?> //problem
<!--div banner, content-area, footer -->
</body>
</html>
and then I render this page by
$app->render('home.php');
However, the html in header_login.php is not loaded onto the page. Instead when I inspect the element, the page looks like
What I do not understand is why the code I am linking to is not being displayed there. The code being imported is a simple navigation bar. But even if I put echo "lala" on the pages, nothing php is displayed.
Read Twig documentation:
http://twig.sensiolabs.org/doc/tags/include.html
{% include 'header_login.php' %}
Or see SlimPHP - PHP view
https://github.com/slimphp/PHP-View
You can see the difference with the Twig View
https://github.com/slimphp/Twig-View
If the header_login.php file is in the same directory as home.php, you should be able to change it to
<?php require __DIR__ . '/header_login.php' ?>
This tells PHP to load it from the same directory as the current file, rather than the directory of the script being executed.
How can I tell Laravel-5 which Javascript files I want to include in a template.
For example, I have my Controller with something like this:
return view('butchery', ['locations' => $locations, 'classTypes' => $classTypes]);
I have my butchery.blade.php template with my html:
#extends('app')
#section('content')
<!-- html here -->
#endsection
...and I have my app.blade.php container template with all my javascript files at the bottom. If I didn't want to include one of the javascript files in my view, how would I do that?
app.blade.php:
<!DOCTYPE HTML>
<!--[if IE 8]><html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
<head></head>
<body>#yield('content')</body>
<script src="/js/mobile-menu.js"></script>
<!-- apply voucher code -->
<script src="/js/voucher-apply.js"></script>
</html>
You should create a section in your template where the scripts should be loaded and use this in your pages to include the required scripts.
Like so:
Template:
<html>
<head>
<title>My page</title>
</head>
<body>
<div class="container">
#yield('content')
</div>
#yield('scripts')
</body>
</html>
Page:
#extends("template")
#section('content')
<h1>Hello world!</h1>
#stop
#section('scripts')
<script src="/path/to/script.js"></script>
#stop
This way you can include the scripts on the page that are needed. Scripts that are needed through the entire template can be added under or above the #yield('scripts').
You can use roumen/asset package. It is quite easy to use and will cover all your needs. Just set default set of assets somewhere (e.g. AppServiceProvider) and then in your controller add additional js files that you need only for this particular page. This is the easies way to manage your stack of assets.
Of course you can do that manually. But hen you have to make your view composer that will share array of js files and compile them in your view. Then again make somewhere array of default js/css files and in controller methods extend them.