smarty3 display not working - templates

I post my code here first
index.php:
<?php
require('class/smarty/Smarty.class.php');
$smarty = new Smarty;
$smarty->setTemplateDir('./templates/');
$smarty->setCompileDir('./template_c/');
$smarty->setCacheDir('./cache/');
$smarty->setConfigDir('./configs/');
$smarty->assign('name','Dan Brown');
$smarty->display('tpl_1.tpl');
?>
template file, tpl_1.tpl:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>demo/title>
</head>
<body>
<h1>
hello,{$name}
</h1>
</body>
</html>
everything looks well, but the result is output blank page, smarty can't display or call the templates file, where is wrong in my code.
I really confuse this problem and waste too much times

Try this,
<?php
require('class/smarty/Smarty.class.php');
$smarty = new Smarty();
$smarty->setTemplateDir('./templates/');
$smarty->setCompileDir('./template_c/');
$smarty->setCacheDir('./cache/');
$smarty->setConfigDir('./configs/');
$smarty->assign('name','Dan Brown');
$smarty->display('tpl_1.tpl');
?>

Related

Vue custom delimiters not working in Firefox

I have a django project and I want to start adding Vue.js elements into it, but there is a big overarching issue before I can really start in that custom delimiters (template tags) do not work in the firefox browser only Chrome, I can change them from curly braces to square brackets, but in firefox it just renders the code not the message. The following code is not part of my django project, it is just example code to demonstrate the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Learning Vue.js</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" />
<p>Hello [[ message ]]</p>
</div>
<script>
new Vue({
delimiters: ["[[","]]"],
el: '#app',
data() {
return {
message: 'Hello World'
};
}
});
</script>
</body>
</html>
So this code renders the following in Chrome:
Hello World!
And in Firefox, it renders the code:
[[ message ]]
I'm assuming there is a fix for this, as I almost never see rendered code in websites and I'm assuming Vue is popular, how do other developers get around this issue?

Auto-binding templates with function (Polymer 1.x)

Hello I have this simple index file:
<?php use Cake\Routing\Router; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
</head>
<body unresolved>
<template id="app" is="dom-bind" >
<h1 on-click="{{stateChange}}">Holaaa</h1>
</template>
<script>
var app = document.querySelector('#app');
app.stateChange= function(){
console.log("stateChange");
};
</script>
</body>
</html>
I'm getting this error:
[dom-bind::_createEventHandler]: listener method `{{stateChange}}` not defined
I have a working app with Polymer where everything works nicely. But this simple example is not working! Why!?
Why? What did I miss?
I have tried defining the stateChange function with app. and without the app. too with no success.
I have also tried wrapping it in dom change event like the documentation points out but not working
app.addEventListener('dom-change', function() {
stateChange= function(){
console.log("stateChange");
};
});
I have tried defining the stateChange function iside the dom-change event with app. with this. and without anything. Nothing works!
Remove the curly brackets.
<h1 on-click="stateChange">Holaaa</h1>
Compatibility note: The syntax differs from 0.5, which required curly brackets ({{}}) around the event handler name.
Source: https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners

How to decouple html/js code from laravel4 templates?

I want to separate html code from my laravel template (*.blade.php) file . I have following code in my dashboard.blade.php template :
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
I want to separate this html code from here and want to move it to another file , with extension either *.html or *.tpl or any other except *.php .
Is it possible to do so ? Please help me on this .
Thanks.
I don't see anyone 100% decoupling HTML/CSS, but you can follow some Design Patterns, like Presenter, and use Laravel Blade so it be very little coupled.
Name a view home.blade.php and add your code to it and change your code to:
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
Create a route using:
<?php
Route::get('/', function() {
return View::make('home',
array(
'$pageTitle' => 'Dashboard',
'welcomeMessage' => 'Welcome to your Dashboard. You rock!'
)
);
});
See? It's almost 100% decoupled, but you cannot decouple 100% or you'll not be able to show your dynamic data in your final HTML.
Also, Blade helps you organize your code, so you can have a layout, let's call it layout.blade.php:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
#yield('contentSection')
</body>
</html>
You have one single line of Blade in it, just to add your page contents, now you can create your home view as:
#extends('layout')
#section('contentSection')
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
#stop
And blade will render this HTML for you:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
</body>
</html>

How come adding this to the doctype messes up my meta tags?

When I ran my website through facebook lint (http://developers.facebook.com/tools/debug) ...everything was fine.
This was my doctype before:
<!DOCTYPE html>
Then, I added the "xmlns" to my doctype.
<!DOCTYPE html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
I ran it through Facebook Lint again...and facebook could not scan any of my meta tags anymore. Why? It said all the properties are missing.
The xmlns properties go onto the <html> tag, not the doctype.
Add namespace to the html tag instead of the doctype.
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
<head>
<title></title>
</head>
</body>
</body>
</html>
More about doctype and namespace usage here http://www.w3.org/QA/2002/04/valid-dtd-list.html

Extend base template in Smarty

Is it possible to extend a base template with another template in Smarty?
I know this is possible in Django using the {% entend %} tag. Is there an equivalent (or workaround) in Smarty?
Thanks
Although this question is a bit old, I thought that maybe someone looking for this information as of august 2011 would benefit to know that this can be done now with Smarty 3.
Example With Inheritance
layout.tpl
<html>
<head>
<title>{block name=title}Default Page Title{/block}</title>
</head>
<body>
{block name=body}{/block}
</body>
</html>
mypage.tpl
{extends file="layout.tpl"}
{block name=title}My Page Title{/block}
{block name=body}My HTML Page Body goes here{/block}
output of mypage.tpl
<html>
<head>
<title>My Page Title</title>
</head>
<body>
My HTML Page Body goes here
</body>
</html>
Taken verbatim from: http://www.smarty.net/inheritance
There is no build-in template inheritance in Smarty. But you can do similar thing with {include} and {capture}.
Your page template can look like:
{capture assign="context"}
<h2>Here is my page</h2>
{... some other smarty suff here ...}
{/capture}
{assign var="title" value="Just simple title text here"}
{include file="base.tpl"}
And base.tpl can look like following:
<html>
<title>{$title}</title>
<body>
{$context}
</body>
</html>