Let's say I'm starting with a PHP application. On one of the pages on the site, there's a complex interactive app that I want to use Angular for. The problem is, I still want the header and footer of that page to match the rest of the site. I would love to be able to do something like this:
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles.css" rel="stylesheet">
<?php if ($somevar == true) : ?>
<?php echo "Yes, it has to be PHP"; ?>
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<!-- Drop entire Angular application here -->
</body>
</html>
It somewhat works for me to just PHP include the Angular HTML file there, but that's pretty janky because, of course, the Angular index.html file already includes a html, body, etc. tags. Of course I could DOM parse the Angular file and fix all that before including...but I'd prefer a better solution.
In my searching I can't seem to find any officially recommended way of doing this. Actually I can't seem to find any examples of anyone doing this at all–all my searches just turn up people doing something similar with AngularJS, not Angular. Is there any decent way to accomplish this with Angular?
You should be able to do what you want to do.
Here's the content of a index.html for a web based chat program I did as a HW project (the back end was much more fun...).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crap chat</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body class="m-a-1">
<?php print("Hello World ".date("r",time())."<br />\n"); ?>
<app></app>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
As long as you keep the same js file references and style sheets, styles (on <body> tag) etc. then you should be able to drop that in and toss in the <app></app> tag set just where you want it.
Just for giggles I renamed the file to index.php on my server, added a print statement to print date/time page was loaded, no issues.
As of angular6, this should be possible using angular elements.
Your code would then simply be
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles" rel="stylesheet">
<?php if ($somevar == true) : ?>
echo "Yes, it has to be PHP";
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<your-component-name></your-component-name>
</body>
You can find a guide on how to create angular elements at https://angular.io/guide/elements - in principle, it is no harder than just creating a component
As someone might still come across this issue (like me), I want to share my solution:
As we are currently changing from a pure PHP page to an Angular approach, we need to include some basic php-stuff in the head of the index file of the Angular build process. Therefore, I added a postbuild-Step, which will automatically run after the build-step.
However, this step is running a node.js script which simply adds the php include we need in the index.php of the dist-Folder
const fs = require('fs');
const path = require('path');
const sourceDir = path.join('dist', 'path');
const phpTag = "<?php include_once './some.php' ?>\n";
const file = path.join(sourceDir, 'index.php');
fs.readFile(file, 'utf8', function (err, content) {
if (err) throw err;
if (!content.startsWith(phpTag)) {
content = phpTag + content;
fs.writeFile(file, content, 'utf8', function (err) {
if (err) throw err;
});
}
});
and these are the entries of my package.json:
"scripts": {
"build": "ng build",
"postbuild": "node ./addPHPTag.ts",
Related
I am new to css & bootsrap. I developed a small website,that has six pages, I separated header and footer in two different php files in order to make life easy. Then I call header & footer in the top and bottom of each page respectively. Based on my requirement I customize some elements design (override bootsrap design) in a separate css file called "custom.css". each time when I bring changes in that file I have to close and re open the text editor in order to see the changes. First I thought it was be due to text editor so I changed my text editor from "Sublime Text to Php Storm";however, the issue has not yet been solved.
below are code snippets of my project:
header.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/respond.js"></script>
</head>
footer.php
<!-- Footer -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd
/popper.min.js" integrity="sha384-
b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous">
</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I call the above files into my pages as below:
<? include ("header.php")?>
<body>
<div class="container">
.
.
.
.
</div> <!-- end container -->
<?include ("footer.php");?>
But if I do not separate header and footer, and write them in one page I can see changes immediately, I don't have to close and re open my text editor in order to see changes.
Could you please help me
As determined in the comments, it's a problem with your browser cache.
You either
need to refresh the page with CTRL+F5 (but this depends on your OS and browser) or
you instruct your local server to forbid browser caching in your development environment (don't do this on production!).
To prevent browser caching, instruct your webserver to send the appropriate headers. There is a nice answer here: How to control web page caching, across all browsers?
You'll need to know how to configure your webserver - I don't know OpenServer.
Note that it is not enough to add the headers in your PHP script because you need the headers to be sent with the static CSS file.
Below code works perfectly
<?php include_once('header.php');?>
<body>
:
:
:
some code
<?php include_once('footer.php');?>
I am using the slim framework to create a website and have views and twig in my project. In my pages, I use php to help facilitate what html is rendered in my webpage. An example is below
<html>
<head>
<title>I ain't afraid of no bugs!</title>
<link rel="shortcut icon" type="image/x-icon" href="../_images/_logos/bug-hunter-icon.ico" />
<link rel="stylesheet" type="text/css" href="../_css/home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript" src="_javascript/login.js"></script>
<script type="text/javascript" src="_javascript/sign_up.js"></script>
</head>
<body>
<?php require 'header_login.php' ?> //problem
<!--div banner, content-area, footer -->
</body>
</html>
and then I render this page by
$app->render('home.php');
However, the html in header_login.php is not loaded onto the page. Instead when I inspect the element, the page looks like
What I do not understand is why the code I am linking to is not being displayed there. The code being imported is a simple navigation bar. But even if I put echo "lala" on the pages, nothing php is displayed.
Read Twig documentation:
http://twig.sensiolabs.org/doc/tags/include.html
{% include 'header_login.php' %}
Or see SlimPHP - PHP view
https://github.com/slimphp/PHP-View
You can see the difference with the Twig View
https://github.com/slimphp/Twig-View
If the header_login.php file is in the same directory as home.php, you should be able to change it to
<?php require __DIR__ . '/header_login.php' ?>
This tells PHP to load it from the same directory as the current file, rather than the directory of the script being executed.
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 have a lot of server code (PHP) going on in my first page of the Facebook app.
I wan't the users to see a loading animation while waiting for the page.
I've seen many examples here of how to preload a page (using ajax or simply jQuery) but this is different, as I said, the page itself is generated on the server, and while that goes on, the user only sees a white blank page.
I tried to wrap my main page with another php page:
<?php
include_once 'functions.php';
session_start();
$_SESSION['fb'] = new fb();
function phponload(){
echo
'<script>
$(function(){
$("#mwrapper").load("main.php");
});
</script>';
}
?>
<html>
<head>
<script type="text/javascript">
function delayer(){
document.write("<?php phponload();?>");
}
</script>
<link href='styles/default.css' rel='stylesheet' type='text/css' />
<img class='mainload' src='images/loading.gif'></img>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='plugins/clock/clock.css' />
</head>
<body onload='setTimeout("delayer()",1000);'>
<div id='mwrapper'>
</div>
</body>
</html>
now the main php page (main.php) has something like:
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta name="google-site-verification" content="Hyqgg60NTPNA7Q9Z5y9TtezUmwhiEomwZLJDt43Ki2g" />
<!--<img class='mainload' src='images/loading.gif'></img>-->
<?php
include_once 'functions.php';
include 'res/views/getTables.php';
define('TXT_QUESTIONS_NUM', 43);
session_start();
{... more PHP code ... }
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"> </script>
<script src='scripts/menuItems.js'></script>
<script src='scripts/main.js'></script>
<link href='styles/jquery.ui.smooth.theme.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="plugins/clock/clock.js"></script>
<link rel="icon" href="images/favicon.ico">
</head>
<div class='container' id='main'>
...
</div>
</body>
</html>
Right now, all the code does is loop the GIF - but does not load main.php :(
Thank you!
Is there any error on the Chrome/Firebug console?
I don't understand why you generate the loader JS code in the PHP function (you could put it directly in HTML), but by doing so you are putting a multiline block between the quotes on document.write function, which causes an error.
However, I think the issue is that the browser is interpreting the inserted </script> as the end of the HTML tag, so what's after (the end of the document.write call and the delayer function) are treated as HTML and not as Javascript.
EDIT: Complementing the answer, here's the code I'd use to load another page:
function delayer(){
$("#mwrapper").load("main.php", function(){
$('.mainload').remove();
});
}
Didn't need any PHP generation. Also, the second argument to the load function is a callback called when the load is finish, in this case I used to remove the loading GIF.
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".