In my login system in my site I wanted the user's selected CSS to be loaded after validation was complete. The only problem is that my PHP is located in the body element and I ECHOed the user's CSS link there. I know this is "bad", but what else can I do?
if (isset($_SESSION['loggedin'])){
ECHO $_SESSION['style'];
}
else
{
ECHO 'green';
}
ECHO ".css' />";
The PHP script echos some text in the body after the user is logged in, this is why I cannot put the PHP script in the header.
I'm under the assumption that you're not at all familiar with the basics of PHP, so I'll break it down as simply as I can. If your document is able to execute PHP (which it sounds like it can because you have things happening in the body), all you need to do is wrap the PHP code with <?php and ?> for it to parse as PHP.
You shouldn't put stylesheets inside your body. Indeed, that is something that no one will recommend. What you can do, however, is execute PHP in the head of your document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<?php
echo "<link rel='stylesheet' href='{$_SESSION['user_css']}'>";
?>
<script src="script.js"></script>
</head>
<body>
<?php
echo 'body text';
?>
</body>
</html>
It doesn't matter where you decide to inject PHP code into your document, it will render as you wish. I'd suggest an MVC solution, but if this is just a small, one-off file, feel free to inject PHP wherever you want it, as often as you need it.
http://php.net/manual/en/language.basic-syntax.phptags.php
You can load the user css after the document is loaded using jQuery.
<script>
$(document).ready(function() {
$(head).append('<style>
<?php echo($user_css); ?>
</style>');
});
</script>
Though just adding a section to output the CSS in the head would be easier to maintain in the future and doesn't need the page to load. A dramatic enough change on a slow(ish) connection and the user will see the flicker as the CSS loads their style.
you could use some jQuery to append the style in the <head>:
$(head).append('<style><?php echo user_css ?></style>');
Related
Is there any method to cache an HTML-code of ExtJS components with further initializing it (binding events and so on) so that I can send it by PHP inside one solid HTML file?
In other words I want server to send already pre-rendered page.
If your idea is to capture the memory state of the client application that seems like a bold project, to say the least. See this other question.
If what you want is to have all you application embedded in one single HTML file, that is possible. Just concatenate all you Javascript (including Ext's code) and put it in a script tag, and do the same with the CSS and wrap in into a style tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/* All your CSS here */
</style>
<script>
// All you javascript here
</script>
</head>
<body>
<!-- page content -->
</body>
</html>
Obviously, if you care about the maintainability of you code, you should automate this procedure...
When designing a website in PHP, you typically have a header.php file that you include in every page on the site. The header.php file would include the <head> tag (among other things). However, I often find that I need to put page-specific JavaScript within the <head> tag.
The way I've handled this in the past is by adding IF statements to my header to determine what pieces of JavaScript should be outputted (i.e. IF this is the home page, output the JavaScript needed for the home page, IF this is the about page, output the JavaScript needed for the about page, etc.).
This is probably a terrible way to do it. What is the standard practice?
Well, first of all, <script> tags do not need to be located in the header. It's perfectly valid to put them anywhere in the HTML document.
But if you're determined to include them in the header, a simple solution is to declare a variable that the header should echo which contains your script tags. For example:
<?php
$scripts = "<script src='script.js' type='text/javascript'></script>";
include("header.php");
?>
And then your header.php script would like as follows:
<html>
<head>
<!-- header stuff goes here -->
<?php /*echo out scripts */ echo $scripts; ?>
</head>
<body>
<!-- part of body goes here -->
Assuming you are actually including header.php in every file, just define an array before you include header.php and add the extra scripts to that. Then in header.php, have it check for that array and write out extra script tags if necessary:
mypage.php:
$extra_scripts = array('jquery.js','jquery-ui.js');
include('header.php');
// Rest of your code.
header.php:
if (is_array($extra_scripts)) {
foreach( $extra_scripts as $script ) {
// Render a script tag
}
}
If you use a templating engine like Twig, you can inherit a base template as opposed to including a header and a footer and modify the 'blocks' defined in that base.
For example purposes, your base template might include a content block and a header_javascript block like so
{% block header_javascript %}
<script src='/js/jquery.js' type='text/javascript'></script>
{% endblock %}
Then, in your child template, you can override this block, call {{ parent() }} and then add your additional, page-specific scripts.
I can see that your question has been answered very clearly. but I would like to add something.
Well, technically, it is valid to place you script tag anywhere in your document but it is better to place your script at the end of document, unless necessary. it will let visitor still see your html and javascript yet to be download, and BTW normally you don't need to run you script until DOM is ready.
This is how I do it:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta name="description" content="Page Description" />
<!-- Includes header stuff, css, js, google analytics, etc.. -->
<? include('header.php'); ?>
</head>
<body>
...
This allow me to avoid repetitive coding while adding flexibility to my pages.
I've asked a similar question before, but I've got a more specific question about this "style" of creating a page.
I have 3 pages for a template, header.php, page.php and footer.php. I'm trying to allow myself to easily edit parts of the site within a single page, but also be able to have extra things in on per-page basis. My current structure is:
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website Name<? if ($title) echo ' – ' . $title; ?></title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
page.php
<?
$title = 'Page Title';
require_once('includes/header.php');
?>
<!-- Any extra stuff for the header goes here -->
</head>
<body>
Page content goes here.
<? require_once('includes/footer.php'); ?>
footer.php
<footer>
I am a footer
</footer>
</body>
</html>
Although this works, I cannot make a publicly editable header (menus etc) that easily since my header.php page does not contain anything in the <body>. However, closing the <head> in header.php would not allow me to add extra files (such a page-specific javascript) on per-page basis. To my knowledge, CSS and javascript being included within the <body> tag is not a good idea.
I'm guessing a further file (say, menu.php) would be required and included at the top of each page, after the <head> tag? However, that doesn't seem that easy to read/natural, I feel there must be a better solution?
One easy solution is to have inside "header.php" a line to echo the content of $extraHeaders:
<!DOCTYPE html>
<html>
<head>
<?php echo $extraHeaders ?>
...
Then, any page you want to add specific headers to (stylesheet, javascript file, etc.), you just include it in the $extraHeaders variable:
$extraHeaders = '<script type="text/javascript" src="myscripts.js"></script>'
And it will be automatically be included in the headers for that page.
To solve the problem of syntax highlighting and avoiding to have to escape the quotation marks, you can use the output buffer syntax:
ob_start();
?>
<your html goes here> Alternatively, you can include an html file here.
<?php
$extraHeaders = ob_get_contents();
ob_end_clean();
...
This will allow you to use a variable, as previously suggested, but with syntax highlighting, and there is no need to escape anything.
Make an _autoload() script to pre-load all those php files.
This way when ever there is anything new to put, you can always go tho the script containing the _autoload() function and update it there.
Btw, putting javascript at the very end of the <body> tag is actually a good practice.
You can use ob_start + regex ( tags like {title} or {scripts} to have an access at the end of loading the "page".
I want to echo a stylesheet inside the head section of a web page. Right now when I do this:
if($browser == "Opera")
{
echo "<link type='text/css' rel='stylesheet' src='/opera.css' media='screen' />";
}
it does echo the style sheet in the source code and not the page itself which is good but it doesn't echo it inside the <head></head> section. How can this be done?
Placing the structure after the code that prints <head> and before the code that prints </head> will put that tag within the head section of the page.
Unless you're working with a framework (like WordPress or Moodle) that "helps" you generate pages, the only output PHP creates is up to you. So, if you output that <link /> tag between your <head> and </head> tags (which you must be outputting elsewhere in your script), that's precisely where it will appear.
If you are using WordPress or Moodle or Drupal or some other content management system (or other PHP framework), it's up to that framework how new content gets added to the head.
i wonder if i could embed js and css files above the html document scope:
<script type="text/javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" src="../../media/js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../../media/css/cupertino/jquery-ui.css" />
<html>
<head>
</head>
<body>
<body>
</html>
this is because i want to put them in same php file where i include all files (php, js and css). i have tried this and it seems to work. the output of the html file will be shown just like the above code, with the include rows above the html tag.
are there any hidden cons in this?
Even if it works, you shouldn't do it. This type of stuff is sloppy, and as such isn't guaranteed to work tomorrow, or in future browsers. If you don't feel the agony of this method now, you will eventually. There's no reason that you should be doing this anyway.
This isn't valid html. The best place to put the javascript would be before the body close (unless there's in-line scripts that need those scripts to be loaded). This prevents blocking as the page loads.
Will not be valid (X)HTML.
This will work in most all browsers, but that's not to say it isn't wrong. It is wrong.
It's not valid HTML, and will confuse just about everyone who comes across your code, and though I don't know what browsers could possibly fail to overcome the inherent wrongness about this style, I make no promises that it will work. In a sense, it should, but in another, it most definitely should not.
Perhaps output buffering will work in this situation? Buffer the output from your "includes" file, then grab the contents of the buffer to output later, after the <html> declaration. Something roughly like this:
In your includes.php file:
<?php
ob_start();
// here is where you output your css and js declarations
$includes = ob_get_clean();
?>
And here is your main page:
<html>
<head>
<title>Hello</title>
<?php echo $includes ?>
</head>
<body>
...
I know this is very old now, but I want to add that Google is recommending to do this in certain cases.
Take a look at this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
Any thoughts as to why Google is advocating improper HTML coding?