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...
Related
Is it possible to use PHP to include the contents of the <body> on one page, and add it to the <body> of the other page, while doing the same thing for the header? Or is it just easier / better to use two pages? This is kind of what I'm going for:
Some Page
<html>
<head>
- nav.php's header -
- stuff special to Some Page -
</head>
<body>
- nav.php's body -
- content special to Some Page -
</body>
</html>
I know the require statement can be used to take the whole contents of a file. Is there some sort of "merge" statement to kind of merge the pages together?
You are going to run into all sorts of security, re-use and maintenance issues if you rely on the inline behaviour of included files in PHP. But if you stick to some simple rules you can avoid these problems:
Any HTML tag opened by PHP must be closed in the same scope (i.e. function)
Included files must only contain namespace, constant, function and object definitions or further include/require statements (but using the autoloader is prefereable).
So applying these to your base page above, and observing the established good practice of putting includes/requires at the top of your page....
<?php
// always start your page with a PHP block - it makes interfering with the headers
// much less painful
require_once('nav.inc.php');
function local_head_content()
{
...
}
function local_body_content()
{
...
}
?>
<html>
<head>
<?php
nav_head_content();
local_head_content();
?>
</head>
<body>
<?php
nav_body_content();
local_body_content();
</body>
</html>
But it would probably be better to invoke local_head_content() / local_body_content() as callbacks from nav content.
(yes it is possible to do what you ask, even without function calls - but it would be a very bad idea which is why I've not explained how to do this).
A more conventional approach to solving the problem of shared content across different files is to use a front controller pattern - instead of the webserver selecting the page specific content, this is done in the PHP code with all URLs pointing to the same entry script.
Since you are including nav.php in the <body> of index.php, nav.php should not contain tags like <html>, etc. since that will result in a final page which does not conform to the HTML spec.
Using your example, this is the contents of the index.php page which will be received by the browser:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style>
- styles for index.php -
</style>
</head>
<body>
<!DOCTYPE HTML>
<html>
<head>
<style>
- Style for navigation menu -
</style>
</head>
<body>
<h1>Title</h1>
<nav>
- Navigation -
</nav>
</body>
</html>
<content>
- content here -
</content>
</body>
</html>
As you can see, your final page contains multiple <!DOCTYPE> tags, multiple <html> tags, etc.
nav.php should contain only the tags which you want to be included in that part of the final page. So your nav.php should look more like this:
<nav>
- Navigation -
</nav>
As for your styles in index.php, you should have a <link> tag which pulls in an external style sheet, e.g. <link rel="stylesheet" href="style.css">. All the CSS for all pages would go in style.css.
I have a form at http://www.anhatweb.tk/web/auth/create to create a new user
But whenever i load the page a loader comes but we can see if i remove the loader HTML loads first and then the CSS loads....Is there any way that I can load CSS first and then load the HTML?
My code:
<html lang="en">
<head>
<!-- Basic Page Needs-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ABC</title>
<!-- Mobile Specific Metas-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS-->
<link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet">
</head>
<body>
The HTML has to download first before the css can even start downloading because the location of the css file is stored within the HTML head tag. Because of the direction of this dependency, you can't really reverse it.
As #Daniel said, the best option you likely have is to "hide" the HTML until the CSS has completed loading. Lots of websites do this to avoid the flash of non-css that you're experiencing, it's pretty normal (and annoying to deal with).
I would give just hiding the elements until the onLoadCompleted is called. If you still see the flash after that, I would load the stylesheet manually on the onLoadCompleted (it should be executed at runtime instead of async) and then show the elements.
No, the browser fetches the HTML, parses the Markup and when it comes to an external resource (css or javascript) it will load this.
After loading the external resource the browser will continue parsing the Markup.
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
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>');
I've been making a website with about 25 pages and every time I want to update the nav bar, or the footer, I have to go through every page and make the change!
Surely there is a way to have the header and the footer (and the side bar!) in separate documents and call them in the same way a CSS is called so they don't have to be repeated on every page.
Bonus: Is this likely to affect SEO in any way? Might it slow down the site?
Thank you,
Tara
by using include():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your page</title>
<style type="text/css">
<!--Your styles ect that make your page-->
</style></head>
<body>
<div class="container">
<div class="header"><?php include('./site_content/header.html');?></div>
<div class="sidebar"><?php include('./site_content/sidebar.html');?></div>
<div class="content">
your content
</div>
<div class="footer"><?php include('./site_content/footer.html');?></div>
</div>
</body>
</html>
HTML itself - ignoring framesets and iframes which do have an effect on SEO and are generally not really recommended - does not have any method to include partial HTML.
You can however use PHP (or SSI if you're oldskool) for such. It has a command to include partial files, it's called include PHP Manual.
PHP needs to be activated on your server for it. To keep this transparent you might want to map the .html file extension to PHP or use Mod_Rewrite to do that. That depends on the type of server and it's configuration.
Might it slow down the site?
The server has more work to do to process the request, therefore it slows down the site a little bit. But normally for a simple site you won't notice that much.
To prevent such, it's possible to build a simple caching mechanism on top that will convert the dynamic PHP output into static files on the fly.