how to include css and js files to php template? - javascript

i have built my simple template for php site.
the problem is that i don knw the nice way to include my css and javascript files .
here is my index.php file
<?php
include'core/template.php';
$temp=new Template();
$settings=array("title","page_title","welcome_word");
$values=array("RIS - Home","Results Information System","Welcome to result
Information system");
$temp->header($settings,$values);
$temp->footer();
?>
here is my template.php file
<?php
class Template {
public function header($setting,$values){
$file=file_get_contents("http://localhost/RIS/src/header.php");
$count=0;
foreach ($setting as $setting) {
$file=str_replace('{'.$setting.'}',$values[$count],$file);
$count++;
}
echo $file;
}
public function footer(){
$file=file_get_contents("http://localhost/RIS/src/footer.php");
echo $file;
}
}
?>
here is my header.php file
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
</head>
<body>
<header>
<h1>{page_title}</h1>
{welcome_word}
</header>
My contents goes here...
here is my footer.php file
<footer>
Copyright © RIS 2013.
</footer>
</body>
</html>
i have my css files and js files are in assets folder so how do i include them in my template?

I would use output buffers & include instead of file_get_contents, include'core/template.php'; here is a blankspace missing.
In your case, why not just put the CSS and JS into header.php ?
Or if you want non-blocking, put CSS in header.php and JS in footer.php

For CSS files:
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
<link rel="stylesheet" href="path/to/assets/yourcss.css" type="text/css">
</head>
<body>
<header>
<h1>{page_title}</h1>
{welcome_word}
</header>
My contents goes here...
and for javascripts:
<footer>
Copyright © RIS 2013.
</footer>
<script src="path/to/assets/yourjs.js"></script>
</body>
</html>

Why do you use "file_get_contents", you can use "include_once" to include your footer file.
For your template, put a marker for the css, and build your css array in php then inject it to your marker.
Hope it helps.

Related

Html tag beginning with question mark?

I'm learning google apps script, and in this tutorial, I saw some weird looking syntax: <? /* JS code */ ?> and <?= /* JS code */ ?>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Message Display Test</title>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body style="padding:3em;">
<h1>Messages</h1>
<ul>
<? for(var m=0;m<messages.length;m++){ ?>
<li><?= messages[m].getSubject() ?></li>
<p><?= messages[m].getPlainBody() ?></p>
<? } ?>
</ul>
</body>
</html>
I can kind of understand what is going on, but I'm still confused. I've never seen these while learning HTML. How does this compare to script tags?
In Google Apps Script <? . . .?> are called standar scriptlets, <?= . . . ?> are printed scriptlets and <?!= . . . ?> are force printing scriplets. They are used in Google Apps Script HTML Service templated HTML.
Resource
https://developers.google.com/apps-script/guides/html/templates
Related
How to use scriptlets in HTMLOutput in Google Apps Script
What does <?!= mean in Google Apps Script?
The question mark is used for PHP and is incorporated into html to work. It is another programming language related to web design. PHP is mainly used to make more advanced form system.

Import sheet data into an include file using Google Apps Scriptlets in Google Sheets

In Google Sheets, I have a layout created with HtmlService of Google Apps Script (see masterPage.html, below).
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<? var serverData = getServerData(); ?>
</head>
<body>
<h2>Page begin.</h2>
<p>Data A from server: <?= serverData[0] ?></p>
<?!= HtmlService.createHtmlOutputFromFile('includedPage').getContent(); ?>
<p>Page end.</p>
</body>
</html>
This layout calls HTML from a second layout called includedPage.html.
<? var serverData = getServerData(); ?>
<div>
<p>Data B from server: <?= serverData[1] ?></p>
</div>
I can use a G.A.S. scriptlet to get data ("Data A from server") from the server/sheet and into the master page.
However, the same scriptlet does not work when placed in the included page. The code simply renders as HTML and "Data B from server" is not displayed.
Is there a way to import server/sheet into the include page before the include page gets inserted into the master page?
Any assistance appreciated.
Note: the following questions are related to but do not answer my question:
How to use scriptlets in HTMLOutput in Google Apps Script
Import sheet data into an include file using Google Apps Scriptlets in Google Sheets
Including additional content file not working - tags rendering as text
The Apps Script scriptlets are being evaluated only once, at the beginning of script execution
In your case it makes more sense to use google.script.run that allows calling an Apps Script function from the client side (html file)
Sample:
includedPage
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="data"></div>
<script>
google.script.run.withSuccessHandler(updateDiv).withUserObject(this).getServerData();
function updateDiv(returnValue){
document.getElementById("data").innerHTML="<p>"+ returnValue +"</p>"
}
</script>
</body>
</html>
Code.gs
function getServerData() {
var serverData = [1, 2, 3, 4, 5];
return serverData[1];
}

How to link a JS file to a PHP Page Template?

I have written a PHP page template and would like to link the needed Javascript from an external file. However, when I do this I get a syntax error: Uncaught SyntaxError: Unexpected token < referencing the doctype header <!DOCTYPE html>. If I put the script in the PHP file directly then it works.
Obviously this is making my file messy, so how can I do it without breaking the script? Also, since this script is only needed on this one page I don't want to put it in my footer to load on the whole site.
I have tried to use <script type="text/javascript" src="staff-test.js"></script> in my PHP file to reference the JS file, with no success. The PHP and the JS files are in the same folder, so the src path seems to be correct.
The PHP:
<?php
get_header();
include('staff-test.css');
?>
<div class="page-wrap">
// my content
</div>
<script type="text/javascript" src="staff-test.js"></script>
<?php
get_footer();
Using this code I get a syntax error. I would like to keep the JS in a separate file, but seems to only work when I put it directly in the PHP file.
Using include('staff-test.css'), you are asking your web server to interpret the CSS file as PHP. This is why you are getting a syntax error.
You want to do instead:
<link rel="stylesheet" type="text/css" href="staff-test.css">
Try this
<?php
get_header();
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/staff-test.css">
<div class="page-wrap">
// my content
</div>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/staff-test.js"></script>
<?php
get_footer();
?>
You may need to register the script in your functions file. Check out the WordPress reference for registering a script.
https://developer.wordpress.org/reference/functions/wp_register_script/

Include external code into Wordpress Plugin

i'm using this code for import an external html file in my plugin:
<?php
...
function showCalendar() {
include 'index.html';
}
add_shortcode( 'calendar', 'showCalendar' );
?>
but into the html i have some of javascript code like this:
<head>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="jquery-ui.mycode.js"></script>
</head>
<body>
<div class="box">
<script>
/*some code*/
</script>
</div>
</body>
Wordpress is not executing that part. How can i fix that? thx!
Use full path for your javascript files in .html file.
In Wordpress you can't include scripts directly in files.
You should include your script using wp_enqueue_scripts, or you can register the scripts and include later when you need it using wp_register_scripts.

how to add jquery script on zend framework

I want to add jquery script on my zendframework project this is my layout. phtml header part
<?php
$this->headMeta()->appendHttpEquiv(
'Content-Type', 'text/html;charset=utf-8');
$this->headTitle('ToDo APP')->setSeparator(' - ');
echo $this->doctype(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php echo $this->headMeta(); ?>
<?php echo $this->headLink()->appendStylesheet($this->baseUrl().'/css/style.css'); ?>
<?php print $this->headScript()->appendFile($this->baseUrl().'/js/bootstrap.js')
->prependFile('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'); ?>
</head>
I need http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js for me to be able to use my bootstrap. js file but its not working please help how to properly do it
also my css and js folders are place in the public folder.
method-1
why don't you directly include this in <head> like
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
method-2
download this jquery file and save in your js folder with name of jquery.min.js
now include this like you include bootstrap.js
<?php print $this->headScript()->appendFile($this->baseUrl().'/js/jquery.min.js'); ?>
Simply embed it in your html like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Categories

Resources