The question is fairly simple, yet I've been looking around for an hour and found nothing:
make a page that is exactly the same as the home page, but a specific div has altered content
example index.html:
<html>
<head>
<title>title</title>
<style type="text/css">
/* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<div id="change">I will change</div>
</body>
</html>
so I want to be able to code a page so that it inherits the entire html from the index page (WITHOUT COPYING THE CODE), but a specific div (here with the id #change) to have different content. How would I go about doing this?
You don't really "inherit" code snippets, but I understand that you're trying to reuse the page content. From your posted code, it's hard to tell exactly how the change differs from the index. Is it just a content change or does the index page not have that div?
You have a couple of options. If just the content of the div is changing, you could use the same php page and then use jquery to change the content of the div, so something like
index.php
<? php include("page.php"); ?>
other page
<? php include("page.php"); ?>
// javascript to modify div
You could break the page into chunks and just include them as needed, so you could have a top.php and a bottom.php, and the index page could do
<? php include("top.php"); ?>
<? php include("bottom.php"); ?>
And then your similar page could do something like
<? php include("top.php"); ?>
// custom stuff here
<? php include("bottom.php"); ?>
If neither of these solutions work you could always use a templating engine to create a page template, though that may be a little much for your situation.
I see you have tagged this question in php So, I will give you answer inclusive of php implementation.
Create 3 pages. index.php about.php and foo.php
The objective is to show some content in index.php but all content in about.php
Call this page foo.php
<html>
<head></head>
<body>
<p> Show this in index.php </p>
<?php if($_SERVER['PHP_SELF'] === 'about.php'): ?>
<p> Show this in about.php </p>
<?php endif; ?>
</body>
</html>
Now, all you have to do is ... include foo.php in both pages.
Make the page you want and you can go about doing this:
<html>
<head>
<title>title</title>
<style type="text/css">
/* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<?php
if(basename($_SERVER['PHP_SELF'] == "other-page.php")){ ?>
<div id="change">I will change</div>
<?php }else{ ?>
<div id="change">Original div</div>
<?php } ?>
</body>
</html>
That takes the file name and based on that you can change content (if is only for one page, otherwise write a function/class based on that).
There are many ways to do this. Here are two, each with their own advantages and disadvantages.
Firstly, if you don't want to modify the page at all, you can add a small PHP code segment which will include a page passed in through the GET variable. For example
<html>
<head>
<title>title</title>
<style type="text/css">
/* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<div id="change"><?php require($_GET['page']); ?></div>
</body>
</html>
would mean that using the URL mypage.php?page=home.php would automatically include the contents of a file called home.php into that div.
Another way to do it is to divide up that page into 2 sections, and including both of them in any other page you use. For example, splitting the code into 2 seperate files, such as
top.php:
<html>
<head>
<title>title</title>
<style type="text/css">
/* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<div id="change">
bottom.php:
</div>
</body>
</html>
then in your PHP file you can use the following
require("top.php);
MY CONTENT HERE
require("bottom.php);
remember that you will need to use echo to output html code on this method if it is within <?php and ?> tags
hope this helps.
You can't do this will plain HTML.
To do it in php, first create template file like so: (template.php)
<html>
<head>
<title>title</title>
<style type="text/css">
* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<div id="change"><?=$main_content?></div>
</body>
</html>
Now, let's say you want to make a "contact me" page.
<?php
// in contact.php
$main_content = "Contact me at my#email.com
include "template.php";
?>
This will write the contents of template.php to the page and echo out the value of $main_content inside div#change
Now, this is generally frowned upon because managing your variables becomes difficult as the size of the template increases. To keep things sane, use a templating engine as all of the other answers are suggesting.
Related
I have an HTML "chunk" of code with HTML and JS in it so I could easily include it with PHP. I also want it to have CSS styling but according to standards you are not "allowed" to do that - while it works it makes the page invalid. CSS is only allowed in <head> and not in the middle of the page (not untill HTML5.2 at least). So I thought about appending similarly named but separate .css file in the head, but with PHP and not JS (for performance sake)
<head>
<!-- PHP needs to include button.css here AFTER $App->INC("button"); has been called -->
</head>
<body>
<?php
$App->INC("button");
//This basically does 'require_once("button")';
//What do I need to add to the INC method to include css file in the head?
//Similar to $("head").append() but with PHP
?>
</body>
css file with the same name should be added to a <head> section.
PS:
This may seem as a design flaw and may as well be but here is the thought behind this.
I have a piece of code that when included in the right place of the
body generates a "loading screen" (or other UI elements that
can't/shouldn't be nested anywhere else but in the <body> of
the website.
It's got styling in a separate file
I send it to other user
They include it with a method of an "App" class which only does two
things: includes the file itself and css file nearby
Then they only use 1 line of code to put it where they want it and
not in 2-3 other places so the code is more manageable
Example:
You may try this:
<?php
ob_start();
$App->INC("button");
$button = ob_get_clean();
?>
<head>
<!-- Do your inclue here -->
</head>
<body>
<?= $button ?>
</body>
You can put the ob_start() / ob_get_clean() stuff inside button.php and return the content via your INC() method. Then you can save the content directly into $button like this: $button = $App->INC("button");.
But your example looks like a design problem. However I hope this will do the trick.
This could be a possible redesign:
<?php
$App->loadModule('button'); // Loads the module, the module registers stylesheets and content.
$App->loadModule('another_module'); // Load more modules ...
<head>
<?php $App->renderModuleStylesheets(); ?>
</head>
<body>
<?php $App->renderModuleContent(); ?>
</body>
If you include the CSS directly in the component itself, or expect the component to dynamically load the relevant CSS, then it could be quite difficult to maintain or customize. I am not saying you shouldn't go this route but be careful about asking your components to do too much.
A hook system as pointed out in the comments is one way to handle this.
Another simple way is to provide default styling which users can override. This is probably the simplest way to allow different styling for each component.
<head>
<!-- Provide some defaults. Users should not customize this one. -->
<link rel="stylesheet" type="text/css" href="default.css">
<!-- User's can customize this file to override the default styling.-->
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<?php $App->INC("button"); ?>
</body>
button.php - is only responsible for rendering a button. The separate CSS files will actually style it.
<?php
echo <input type"submit" class="button" value="Submit">
default.css - applies default styling
.button {
color: blue;
}
custom.css - overrides the default styling
.button {
color: red;
}
Final note, you may also want to look into using a main template file which sub-views inherit. This helps to reduce the number of full HTML files which link to your CSS files. The idea is to have 1 (or a few) template files that views inject themselves into. Here's some pseudo code.
frontend.php
<html>
<head>
<!-- Links to CSS files here. -->
</head>
<body>
<?php $placeholder('body'); ?>
</body>
Login.php
<?php inherits('frontend.php')->body; ?>
<form id="login">
...
Register.php
<?php inherits('frontend.php')->body; ?>
<form id="register">
...
About-Us.php
<?php inherits('frontend.php')->body; ?>
<p>About Us</p>
...
I'm trying to make a simple php script that puts a list in the header, here is what I have
<html>
<head>
<?php
function menu1($link1, $button1) {
echo "<ul><li><a href = '$link1'>$button1</a></li></ul>";}
menu1('index.php','Home')
?>
</head>
<body>
<p>Home</p>
</body>
</html>
Yet for some reason when I run the script it outputs this
<html>
<head>
</head>
<body>
<ul><li>Home</li></ul>
<p>Home</p>
</body>
</html>
Is there any way I can get this to post in the head?
Thanks in advance!
The <head> element can only contain certain special elements, such as <title>, <link>, and <meta>, among others. It cannot contain any elements which are rendered on the page.
If you view source, you'll see that the markup is being output the way you requested. However, this markup is invalid, and is being "repaired" by the browser by moving these elements into the <body>.
I am creating my first website from scratch and had seen something where you can reduce code by using PHP includes for sections of the site that are to be repeated. So far, I have a head.php (which I added due to my stylesheet.css being linked there and needing access to it on every page), header.php, footer.php, index.php, and other pages with the php extension (about, contact, that bunch).
Everything is appearing where I'd like it to except for one issue: when setting the body background color, everything (all includes: header.php, footer.php) seems to be in the body. I tested this by setting a border around the body, and it confirmed what I thought.
Does anyone have an idea what is going wrong? I am using flexbox in my header, footer, and other bits within the index file, but I don't think that should be affecting anything.
<!DOCTYPE html>
<?php include 'head.php'; ?>
<?php include 'header.php'; ?>
<body id="main-block">
<!-- Button links to Portfolio and Other stuff -->
<div class="flex-container">
<a class="main-button" href="#">Web Work</a>
<a class="main-button" href="#">Other Work</a>
</div>
</body>
<?php include 'footer.php'; ?>
</html>
your body tag is suppose to wrap around your header and footer elements. see below markup
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<?php include (header);?>
<?php include (footer);?>
</body>
</html>
if u wanna change the background color of your elements just add css
element { background-color:pink }
I admit that I do not really understand your issue. But I'll give you a little snippet to start coding php:
<html>
<head>
<title>Welcome</title>
<style>
<?php include 'stile.php'; ?>
</style>
</head>
<body>
<?php include 'header.php'; ?>
<?php include 'footer.php'; ?>
</body>
</html>
I'm working with PHP Fat Free and I am attempting to create a layout/sublayout system which will eventually mimic MVC to some extent. I have a main layout which has placeholders (essentially the backend sets different sublayout or partial file paths and then the view takes care of calling the rendering of that file name. This all works great.
The issue I'm running into is when I need inline javascript in my sublayout to run after scripts in the main layout (after the jquery include line, for instance). In a previous framework I was using, I was able to do us output buffering ob_start and ob_get_clean to grab the script in the sublayout and then pass that to the layout to display below the script line. I hope that makes sense, but if not, here's the current code I'm working with in F3.
The route:
$f3->route('GET /test',
function($f3) {
// set the sublayout name
$f3->set('sublayout', 'testpage.php');
// render the whole shebang
echo View::instance()->render('testlayout.php');
}
);
The layout:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<?php echo View::instance()->render($sublayout) ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
</body>
</html>
The sublayout:
<h2>My Test Page</h2>
<div id='message'></div>
<script>
// This code needs to be placed AFTER the jquery include in the main layout
$(function(){
$('#message').html('This is my message');
});
</script>
I tried extending the view to include a "beginRegion" and endRegion function that basically handled the ob_start and ob_get_clean portion so that my inline script could be picked up, but once I'm in the sublayout I wasn't able to figure out how to pass that buffered code back to the layout so it could be echo'd after the jquery include.
Before you tell me that I should not be using inline script, I know this and most things I do are in external script files which I have a solution for including, but there are times when I need it inline and that's where I'm stuck.
Is there a way to handle what I'm trying to do with output buffering, or better yet is there a better way to solve this than the output buffering approach?
Update:
Best practices generally dictate that you should include the script at the bottom of the page right before the closing body tag. If I put the script above the sublayout, it breaks both our FE best practices and has the disadvantage of blocking the rest of the page while the script downloads. That's why I'd like to keep it structured the way I have noted instead of placing the jquery include ABOVE the sublayout.
I don't understand what's the problem.
Your layout is:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<?php echo View::instance()->render($sublayout) ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
</body>
</html>
You want to include sublayout after jquery usage. So why not to write it like this? :
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
<?php echo View::instance()->render($sublayout) ?>
</body>
</html>
Also You can write custom function. Lets say You've folder with partials or something else more structured and want to use it:
$f3->set('partial',
function($file) {
$file .= (strpos($file, '.php')>0)? '' : '.php';
if(!is_file($file)) return '';
return View::instance()->render($file);
}
);
and then use it like:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
{{ #partial('partials/testpage') }}
</body>
</html>
I knew why You want to do so. But what's the problem to decouple scripts in scripts.php file and HTML,php part to another file and render them as needed? (:
From a google groups discussion I had, someone offered up a JS solution that might work:
inside your layout:
<head>
<script>
var callbacks=[];
</script>
</head>
<body>
<script src="...jquery.min.js"/>
<script>
$.each(callbacks,function(i,func){func.call(null,jQuery);}) //<< triggers all queued callbacks
</script>
</body>
inside your sublayout:
<h2>My Test Page</h2>
<div id="message"></div>
<script>
callbacks.push(function($){
//do something with jQuery
});
</script>
Here's the link:
https://groups.google.com/forum/#!topic/f3-framework/iGcDuDueN8c
I want to use php to create a consistent header and footer across my site using the php incluse tags. When creating the header file, do I need the html and body tags or can I just start with the div id="header"....?
What you should worry about is the final outcome of the markup of the site, after you've included everything.
Example:
header.php
<div id="header"></div>
footer.php
<div id="footer"></div>
index.php
<html>
<head></head>
<body>
<?php include('header.php'); ?>
<div id="content"></div>
<?php include('footer.php'); ?>
</body>
</html>
For correct semantics, include the <html> and <body> tags, making sure to close them in the footer.php file
Yes you should. It's a good idea, though, to use variables within the include to set such things as <title>...
<?php
$pagetitle="My page";
include('header.php');
?>
Content here
<?php include('footer.php'); ?>
where header.php is
<html>
<head>
<title><?php echo $pagetitle; ?></title>
<!-- your meta tags etc -->
</head>
<body>
and footer is
<script>/* your javascript includes */</script>
</body>
</html>
You can have a section of HTML in a file like this.
<footer> This is my global footer! </footer>
Then in PHP you can use include() to include that html file. It will render the contents of the file to the output where you include it.
include 'globalFooter.html';
Do I need the html and body tags or can I just start with the div?
No you do not.
Your question is not completely clear, but you seem to be asking whether you need any special tags in the included file. The short answer is no—the included file is inserted into the including file verbatim, so it would contain whatever tags are required to render the header (or footer) you had in mind.
Whatever you do, the result should be valid HTML.
So if your index.php starts with <?php include "header.php" ?> then your header.php file should start with <!DOCTYPE html><html>... Same goes for the end.