I'm very new to PHP. I have a several of sites in which the only difference is a token. I use twig templating. How can I refactor my code to don't repeat myself and make a code more correct? I assume there is a way in twig to create a base template and reuse that. How should it look in my case?
My file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../web/assets/css/error-templates.css">
</head>
<body>
<img class="logo" src="/assets/img/logo.png">
<div class="container">
<div class="wrap">
{# The only different is token below #}
::CLOUDFLARE_ERROR_500S_BOX::
</div>
</div>
</body>
</html>
Another file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../web/assets/css/error-templates.css">
</head>
<body>
<img class="logo" src="/assets/img/logo.png">
<div class="container">
<div class="wrap">
{# The only different is token below #}
::ALWAYS_ONLINE_NO_COPY_BOX::
</div>
</div>
</body>
</html>
Create a master template file with twig extension (eg. main.twig) containing below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../web/assets/css/error-templates.css">
</head>
<body>
<img class="logo" src="/assets/img/logo.png">
<div class="container">
<div class="wrap">
{% block BodyMain %}{% endblock %}
</div>
</div>
</body>
</html>
and in your other pages, use the code below
{% extends "main" %}
{%block BodyMain %}
::ALWAYS_ONLINE_NO_COPY_BOX::
{% endblock %}
See reference twig extends documentation
Related
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.
Can not add OwlCarousel to laravel project properly and it doesn't work.
What should I do?
I copied owl.carousel.min.css and owl.theme.default.min.css and owl.carousel.min.js to owlcarousel folder that was placed in the same directory as view.blade.php file was.
My code is:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
</div>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel();
});
</script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
The right way is this one:
<script type="text/javascript" src="{{ URL::asset('js/owl.min.js') }}"></script>
The function URL::asset() produces the necessary url for you. Same for the css:
<link rel="stylesheet" href="{{ URL::asset('css/owl.css') }}" />
You have to place owlcarousel folder in the laravel's app/public folder, not in views folder.
Hope this helps.
I'm trying to yield in one of my blade files but it's not working.
This is my index.blade.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="token" content="{{ csrf_token() }}">
<title>Forum</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="/css/bulma.css" rel='stylesheet' type='text/css'>
<link href="/css/all.css" rel='stylesheet' type='text/css'>
</head>
<body>
<div id="app">
#include('shared.menu.menu')
#yield('content')
</div>
<script src="/js/app.js"></script>
</body>
</html>
This is my login.blade.php:
#extends('index')
#section('content')
#yield('shared.bar.bar')
#stop
So the navigation bar is showing at this point. But the bar is not! When I replace: #yield('shared.bar.bar') with test, test shows up. This is shared/bar/bar.blade.php:
#section('bar')
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
test
</h1>
<h2 class="subtitle">
test
</h2>
</div>
</div>
</section>
#stop
What am I doing wrong? Is it also possible to pass variables to the bar? So I can show another title and subtitle on every page?
--EDIT--
#section('bar')
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
{{ $title }}
</h1>
<h2 class="subtitle">
{{ $subtitle }}
</h2>
</div>
</div>
</section>
#stop
If you are showing all of your code, looks like your yield is
#yield('shared.bar.bar')
And yout section
#section('bar')
When it should be
#section('shared.bar.bar')
Or you should change your yield to
#yield('bar')
Because #yield and #section are only strings, they are not related to files like #include.
And looks like this file is also wrong:
#extends('index')
#section('content')
#yield('shared.bar.bar')
#stop
#yield is something you should start using only in your main layout file, because it can get messy and hard and harder to undestand what's happening. So, unless you have a section 'shared.bar.bar' to fill this #yield, you should probably do something like
#extends('index')
#section('content')
<form>
.... your login form
</form>
#stop
or
#extends('index')
#section('content')
#include('shared.bar.bar')
#stop
or
#extends('index')
#section('content')
#include('shared.bar.bar')
<form>
.... your login form
</form>
#stop
To have the title changed via section you can also do:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>#yield('title')</title>
</head>
or
<h1 class="title">
#yield('title')
</h1>
And your login blade file, you can do
#extends('index')
// This will tell the Blade Compiler to replace every
// occurence of #yield('title')
#section('title')
User Login
#stop
#section('content')
#include('shared.bar.bar')
<form>
.... your login form
</form>
#stop
I'm working on using PHP to give myself the same header, navigation and footer elements across all pages, but I have a problem; for some reason the .php file isn't recognizing the header.html file for a include("/header.html")
.php file
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="/style.css">
<title>Sample Game Type</title>
</head>
<body>
<?php include("/header.html"); ?>
<div id="gamelisting"><!--Gametype Shortcuts-->
<a href="http://www.solarfusionnerf.ca/game-types/carpe-testiculum.html">
<div class="gametype">'Carpe Testiculum' (also known as just Carpe)</div>
</a>
<div class="gametype">Other Game Here</div>
<div class="gametype">Add more as neccessary</div>
</div>
<div class="gameinfo"><!--Information about game type-->
<h2 style="text-align:center;"></h2><!--Name-->
<h3>Description</h3>
<h3>Objective</h3>
<h3>Rules</h3>
</div>
</body>
And then my header.html file.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Header</title>
</head>
<body>
<li><!--Header Buttons-->
<a href="http://www.solarfusionnerf.ca">
<div id="header">
Home
</div>
</a>
<a href="http://www.solarfusionnerf.ca/mods.html">
<div id="header">
Mods
</div>
</a>
<a href="http://www.solarfusionnerf.ca/selling.html">
<div id="header">
Selling
</div>
</a>
<a href="http://www.solarfusionnerf.ca/gallery.html">
<div id="header">
Gallery
</div>
</a>
<a href="http://www.solarfusionnerf.ca/contact.html">
<div id="header">
Contact
</div>
</a>
</li>
</body>
What am I doing wrong? The header.html file is in the root of my pubic_html file with the .php page I'm trying to connect with being in directory /game-types
When you use <?php include("/header.html"); ?> you are really saying look for a file named header.html at the root of my entire filesystem; not in your public_html directory (or even in a predefined include_path) with all your other files, like /path/to/public_html/header.html, you are literally looking for a file at /header.html.
It sounds like you want to include a file relative to the current directory.
Something like this:
include(__DIR__ . '/header.html');
or
include('header.html');
I really have a problem with my pages... I have currently my style.css for my CSS, index.php for the home page, my "includes" folder for all my includes (navigation.php and header.php) and my register.php: http://prntscr.com/8320hv
I just started coding my work, so there is not much. I have a problem with the organization of my pages. I would like to put some content to my index.php:
http://prntscr.com/832496
Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test 2</title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<?php require "includes/navigation.php"; ?>
<?php require "includes/header.php"; ?>
<div class="wrapper">
<div id="container">
<div id="breadcrumb-top" class="breadcrumb">
<ul>
<li>
Home
</li>
</ul>
</div>
<span class="big-title">Home</span>
<div id="breadcrumb-bottom" class="breadcrumb">
<ul>
<li>
Home
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
But if I would like to go in my register.php file, my index.php is not linked to it: http://prntscr.com/8322hn
I am obliged to operate this way, because I would like to assign a different content for my index.php and my register.php in the container: http://prntscr.com/8323ht
I am really lost with this, so if I could have help, I you acknowledging.
You are doing fine so far, you just need to include the separate content for each page within each page. Having a common navigation .php is a standard thing to do, though I would have navigation.php within the root folder, that way your relative links are easier to manage.
All 4 files in the same folder, with stylesheet.css in a css/ folder:
head.php:
<head>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
nav.php:
<div class="nav">
<a href="index.php> home</a> |
<a href="register.php> register</a>
</div>
index.php:
<html>
<?php include "head.php"; ?>
<body>
<?php include "nav.php"; ?>
<div class="container">
<h1>This is home</h1>
</div>
</body>
</html>
register.php:
<html>
<?php include "head.php"; ?>
<body>
<?php include "nav.php"; ?>
<div class="container">
<h1>This is register</h1>
</div>
</body>
</html>