I've been thinking about the best way to organize includes, scripts, css etc. in my header.php file, and I've come up with a solution but I do not know if this is even good or not. I'd like to hear your techniques regarding this matter.
I was thinking about something like this:
PS: there are more includes, but I don't want to flood this thread.
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="scripts/bootstrap/bootstrap.js"></script>
<script src="scripts/jqplot/jquery.jqplot.min.js"></script>
<?php if($page_title == 'Home') echo'<script src="scripts/jqplot/jqplot.pieRenderer.min.js"></script>' ?>
<script src="scripts/global.js"></script>
<link rel="stylesheet" type="text/css" href="style/bootstrap/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style/jqplot/jquery.jqplot.css">
<link rel="stylesheet" type="text/css" href="style/global.css">
<link rel="shortcut icon" href="images/logo_tab.png">
<title><?php echo $page_title; ?></title>
So my main idea is to put most of the optional includes in a small php script, which script would look at the current page we are on, and if that particular script is not needed it won't echo it out. Is this a viable solution?
Thanks!
Related
I am building a website. in index page everything works. But I tried to add page. At service page, I can reach the content but it is unstyled.
My index file starts like this
#extends('layouts.frontbase')
#section('title', 'Pasa Law')
#section('content')
#include("home.slider")
My service file is same
#extends('layouts.frontbase')
#section('title', $data->title)
#section('content')
<p>{{$data->detail}}</p>
#endsection
When I open site css and javascript files are okey in index
index page
But when I open service site it has problems with css
service page
Frontbase.blade.php
<html>
<head>
<title>#yield('title')</title>
#yield('head')
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="copyright" content="Kaan Pasa, https://github.com/kaanpasa">
<title>#yield("title")</title>
<link rel="stylesheet" href="assets/css/maicons.css">
<link rel="stylesheet" href="assets/vendor/animate/animate.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="{{asset('assets/vendor/owl-carousel/css/owl.carousel.css')}}">
<link rel="stylesheet" href="assets/css/theme.css">
<!-----Slider CSS--->
<link rel="stylesheet" href="/assets/css/owl.theme.default.min.css">
<link rel="stylesheet" href="assets/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="bg-light">
#include("home.header")
<div class="container">
#yield('content')
</div>
#include("home.footer")
#yield('foot')
</body>
</html>
If your link is
link rel="stylesheet" href="/css/styles.css"
try
link rel="stylesheet" href="{{ asset('css/styles.css') }}"
and put your css files in the public folder e.g
public|->css|->styles.css
I'm creating a website for homework and it's going to have multiple pages. I'm using bootstrap 4 and for each page, I have to declare a lot of links and scripts on the head of the HTML.
My question is if it's possible to add a single link via HTML or a PHP include so I can use a single line for all the additions and edit them all on a single file.
This is what I have
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
I want something like this
<head>
<title> </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="alltheotherlinksandscripts.php">
</head>
Or this
<html>
<head>
<title></title>
<?php
include_once "alllinks.php";
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> </body>
</html>
You can. Put the header in a separate php file and you can include it in all files.
<head>
<?php include('header.php'); ?>
</head>
Yes, you can set all links (js/css libraries) in one file i.e alllinks.php
and call that file in your <head> part like..
<head>
<?php include('alllinks.php'); ?>
</head>
I have a problem right here. I'm developing a Webpage in PHP from scratch, currently I started with HTML and imported normalize.css in my index.view.php file, it looks like this:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AlfonsoIMa</title>
<link rel="stylesheet" href="css/normalize.css">
<script src="js/modernizr.js"></script>
<meta owner="Alfonso Izaguirre Martínez">
<meta author="Alfonso Izaguirre Martínez">
I'm using XAMPP and PHP7. I imported then refreshed my localhost and I didn't work. My code looks fine so, maybe the issue it's with XAMPP... Any solution?
You need to make sure that the css is called from the correct relative postition.
Try this instead:
<link rel="stylesheet" href="/css/normalize.css">
I do not understand what is going on here.
This is my file-data "structure":
Over here is the content of my folder "css"
So, in my program: this files"estudiante.php","editar.php" and "hola.php" got the same header. Take a look:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
The problem is that i could not link the file "estilos.css" from the "css" folder because i was given some errors while i was checking the inspect element tool using chrome:
But it is strange, because i wrote this line on my header:
<meta name="viewport" content="width=device-width, initial-scale=1">
That line makes my page responsive, but those commands are in my estilos.css file.. i don get it, take a look:
So, estilos.css doesnt appear in my code but the header uses the content and makes my website responsive?. I dont understand this mates :(
Double-check your file naming conventions. It looks like you're hiding file extensions, since bootstrap, bootstrap.min, etc don't have .css on the end, but estilos.css does. It's possible your file is actually named estilos.css.css and you aren't aware.
https://www.howtogeek.com/205086/beginner-how-to-make-windows-show-file-extensions/
I have added an availability calendar to my website which I found online, the header tags are below:
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/dateTimePicker.css">
<script type="text/javascript" src="scripts/components/jquery.min.js"></script>
<script type="text/javascript" src="scripts/dateTimePicker.min.js"></script>
When I add them to my current website page, it changes the template and ruins the look by either adding blank white space at the top of the page or affecting the nav bar whenever I add the script? Any ideas how I can have the script without it affecting my template?
Here is my template html with the script added...
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="assets/style.css">
<title>Dave's Caravan Letting</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/dateTimePicker.css">
<script type="text/javascript" src="scripts/components/jquery.min.js"></script>
<script type="text/javascript" src="scripts/dateTimePicker.min.js"></script>
</head>
By adding random code to existing code can cause code conflict, first understood the existing css code and than add the additional css code.
If you want to debug then open the site in browser's developer tool, check out the portion's css using inspect element and correct or rectify the css code.
Use the following link to learn how to use developer tool
https://developer.chrome.com/devtools