JS-05-Handlebars.ppt
fakeaccount225095
7 views
19 slides
Mar 15, 2023
Slide 1 of 19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
About This Presentation
dczdxv
Slide Content
Using Handlebars
Dr. Charles Severance
www.wa4e.com
http://www.wa4e.com/code/handlebars.zip
Dr. Charles Severance
www.wa4e.com
http://www.wa4e.com/code/handlebars.zip
Rendering in the Browser
Applications are starting to use JSON
“back end” services and construct the
View HTML in JavaScript
–www.backbonejs.org
–www.emberjs.com
–www.angular.net
–www.reactjs.net
–...
The only correct way to write
JavaScript is whatever you were not
doing last week.
@ThePracticalDev
Applications are starting to use JSON
“back end” services and construct the
View HTML in JavaScript
–www.backbonejs.org
–www.emberjs.com
–www.angular.net
–www.reactjs.net
–...
The only correct way to write
JavaScript is whatever you were not
doing last week.
@ThePracticalDev
Web Server Database ServerTime
Apache
PHP
MySql
Browser
JavaScri
pt
D
O
M Parse
Respons
e
Send
Request
http://www.wa4e.com/code/rrc/
JQuery
Apache
PHP
MySql
Browser
JavaScri
pt
D
O
M Parse
Respons
e
Send
Request
http://www.wa4e.com/code/rrc/
JQuery
Model-View-Controller
A model that defines the elements of
a web application and how they
interact
•View –Produce output
•Model –Handle data
•Controller –Orchestration / Routing
https://en.wikipedia.org/wiki/Model-view-controller
A model that defines the elements of
a web application and how they
interact
•View –Produce output
•Model –Handle data
•Controller –Orchestration / Routing
https://en.wikipedia.org/wiki/Model-view-controller
guess.php
<?php
$oldguess= '';
$message = false;
if ( isset($_POST['guess']) ) {
// Trick for integer / numeric parameters
$oldguess= $_POST['guess'] + 0;
if ( $oldguess== 42 ) {
$message = "Great job!";
} else if ( $oldguess< 42 ) {
$message = "Too low";
} else {
$message = "Too high...";
}
}
?>
<html>
<head>
<title>A Guessing game</title>
</head>
<body style="font-family: sans-serif;">
<p>Guessing game...</p>
<?php
if ( $message !== false ) {
echo("<p>$message</p> \n");
}
?>
<form method="post">
<p><label for="guess">Input Guess</label>
<input type="text" name="guess" id="guess" size="40"
value="<?= htmlentities($oldguess) ?>"/></p>
<input type="submit"/>
</form>
</body>
Model
View
Controller
Context
<?php
$oldguess= '';
$message = false;
if ( isset($_POST['guess']) ) {
// Trick for integer / numeric parameters
$oldguess= $_POST['guess'] + 0;
if ( $oldguess== 42 ) {
$message = "Great job!";
} else if ( $oldguess< 42 ) {
$message = "Too low";
} else {
$message = "Too high...";
}
}
?>
<html>
<head>
<title>A Guessing game</title>
</head>
<body style="font-family: sans-serif;">
<p>Guessing game...</p>
<?php
if ( $message !== false ) {
echo("<p>$message</p> \n");
}
?>
<form method="post">
<p><label for="guess">Input Guess</label>
<input type="text" name="guess" id="guess" size="40"
value="<?= htmlentities($oldguess) ?>"/></p>
<input type="submit"/>
</form>
</body>
Model
View
Controller
Context
Web Server Database ServerTime
Apache
PHP
MySql
Browser
JavaScri
pt
D
O
M Parse
Respons
e
Send
Request
MVC in PHP
P
D
O
View
Controller
Context
Model
Apache
PHP
MySql
Browser
JavaScri
pt
D
O
M Parse
Respons
e
Send
Request
MVC in PHP
P
D
O
View
Controller
Context
Model
handlebars.js
•Templates with curly braces
–Adapted from Django / AppEngine
•Hot spots accept data from the context
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
Context
<div class="entry">
<h1>Equations</h1>
<div class="body">
guess < 42
</div>
</div>
+ =
•Templates with curly braces
–Adapted from Django / AppEngine
•Hot spots accept data from the context
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
Context
<div class="entry">
<h1>Equations</h1>
<div class="body">
guess < 42
</div>
</div>
+ =
<div id="stuff"><img src="spinner.gif"></div>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script>
var raw_tempate = $("#entry-template").html();
var template= Handlebars.compile( raw_template);
var context = {title: "Equations", body: "guess < 42"};
var rendered = template(context);
alert('Check out the sweet spinner..:)');
$('#stuff').html(rendered);
</script> hand-01.htm
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script>
var raw_tempate = $("#entry-template").html();
var template= Handlebars.compile( raw_template);
var context = {title: "Equations", body: "guess < 42"};
var rendered = template(context);
alert('Check out the sweet spinner..:)');
$('#stuff').html(rendered);
</script> hand-01.htm
Web Server Database ServerTime
Apache
PHP
MySql
Browser
JavaScri
pt
D
O
M Parse
Respons
e
Send
Request
MVC in PHP
P
D
O
View
Controller
Context
Model
Apache
PHP
MySql
Browser
JavaScri
pt
D
O
M Parse
Respons
e
Send
Request
MVC in PHP
P
D
O
View
Controller
Context
Model
Web Server Database ServerTime
Apache
PHP
MySql
Browser
JavaScri
pt
D
O
M Parse
Respons
e
Send
Request
View in JavaScript
P
D
O
View
Controller
Context
Model
Context
Apache
PHP
MySql
Browser
JavaScri
pt
D
O
M Parse
Respons
e
Send
Request
View in JavaScript
P
D
O
View
Controller
Context
Model
Context
<div id="stuff"><img src="spinner.gif"></div>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script>
var raw_tempate = $("#entry-template").html();
var template= Handlebars.compile( raw_template);
$.getJSON('hand-02-json.php', function (context) {
var rendered = template(context);
$('#stuff').replaceWith(rendered);
});
</script>
hand-02.htm
<?php
header('Content-Type: ...');
$stuff = array(
'title' => 'Mathematics',
'body' => 'guess > 42');
echo(json_encode($stuff));
{ "title":"Mathematics",
"body":"guess > 42" }
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script>
var raw_tempate = $("#entry-template").html();
var template= Handlebars.compile( raw_template);
$.getJSON('hand-02-json.php', function (context) {
var rendered = template(context);
$('#stuff').replaceWith(rendered);
});
</script>
hand-02.htm
<?php
header('Content-Type: ...');
$stuff = array(
'title' => 'Mathematics',
'body' => 'guess > 42');
echo(json_encode($stuff));
{ "title":"Mathematics",
"body":"guess > 42" }
Handlebars Application
<script id="list-template" type="text/x -handlebars-template">
{{#if profiles.length}}
<p><table border="1">
<tr><th>Name</th><th>Headline</th>
{{#if loggedin}}<th>Action</th>{{/if}}</tr>
{{#eachprofiles}}
<tr><td><a href="view.php?profile_id={{ profile_id}}">
{{first_name}} {{last_name}}</a>
</td><td>{{headline}}</td>
{{#if ../loggedin}}
<td>
<a href="form.php?profile_id={{ profile_id}}">Edit</a>
<a href="delete.php?profile_id={{ profile_id}}">Delete</a>
</td>
{{/if}}
</tr>
{{/each}}
</table></p>
{{/if}}
</script>
index.php
res-handlebars
{{#if profiles.length}}
<p><table border="1">
<tr><th>Name</th><th>Headline</th>
{{#if loggedin}}<th>Action</th>{{/if}}</tr>
{{#eachprofiles}}
<tr><td><a href="view.php?profile_id={{ profile_id}}">
{{first_name}} {{last_name}}</a>
</td><td>{{headline}}</td>
{{#if ../loggedin}}
<td>
<a href="form.php?profile_id={{ profile_id}}">Edit</a>
<a href="delete.php?profile_id={{ profile_id}}">Delete</a>
</td>
{{/if}}
</tr>
{{/each}}
</table></p>
{{/if}}
</script>
index.php
res-handlebars
<div id="list-area"><img src="spinner.gif"></div>
....
<script>
$(document).ready(function(){
$.getJSON('profiles.php', function(profiles) {
window.console && console.log(profiles);
var source = $("#list -template").html();
var template= Handlebars.compile(source);
var context= {};
context.loggedin=
<?= isset($_SESSION['user_id']) ? 'true' : 'false' ?>;
context.profiles= profiles;
$('#list-area').replaceWith(template(context));
}).fail( function() { alert('getJSON fail'); } );
});
</script>
index.php
....
<script>
$(document).ready(function(){
$.getJSON('profiles.php', function(profiles) {
window.console && console.log(profiles);
var source = $("#list -template").html();
var template= Handlebars.compile(source);
var context= {};
context.loggedin=
<?= isset($_SESSION['user_id']) ? 'true' : 'false' ?>;
context.profiles= profiles;
$('#list-area').replaceWith(template(context));
}).fail( function() { alert('getJSON fail'); } );
});
</script>
index.php
<?php
// This script works even if you are not logged in
require_once 'pdo.php';
header("Content-type: application/json; charset=utf -8");
$stmt = $pdo->query('SELECT * FROM Profile');
$profiles = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo(json_encode($profiles, JSON_PRETTY_PRINT));
profiles.php
// This script works even if you are not logged in
require_once 'pdo.php';
header("Content-type: application/json; charset=utf -8");
$stmt = $pdo->query('SELECT * FROM Profile');
$profiles = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo(json_encode($profiles, JSON_PRETTY_PRINT));
profiles.php
profiles.php
[
{
"profile_id": "5",
"user_id": "1",
"first_name": "Chuck",
"last_name": "Severance",
"email": "[email protected]",
"headline": "Python Rulez",
"summary": "Python",
"updated_at": "2016-04-04 21:15:27"
},
{
"profile_id": "6",
"user_id": "1",
"first_name": "Colleen",
"last_name": "van Lent",
"email": "[email protected]",
"headline": "Responsive Design Rulez",
"summary": "HTML5!",
"updated_at": "2016-04-04 21:16:12"
}
]
[
{
"profile_id": "5",
"user_id": "1",
"first_name": "Chuck",
"last_name": "Severance",
"email": "[email protected]",
"headline": "Python Rulez",
"summary": "Python",
"updated_at": "2016-04-04 21:15:27"
},
{
"profile_id": "6",
"user_id": "1",
"first_name": "Colleen",
"last_name": "van Lent",
"email": "[email protected]",
"headline": "Responsive Design Rulez",
"summary": "HTML5!",
"updated_at": "2016-04-04 21:16:12"
}
]
Web Server Database ServerTime
Apache MySql
Browser
JavaScript
D
O
M
Parse
Respons
e
Send
Request
Single Page Application -Angular
P
D
O
View
Controller Model
Context Model
Model
Apache MySql
Browser
JavaScript
D
O
M
Parse
Respons
e
Send
Request
Single Page Application -Angular
P
D
O
View
Controller Model
Context Model
Model
Summary
•With JavaScript ES6 on the way and significant
browser improvements on the horizon, it is
likely that the “best practice” both on the
server and the client will continue to evolve.
•It will continue to be important to understand
how web applications work “all the way down”
so you can work with these new innovations.
The only correct way to write
JavaScript is whatever you were not
doing last week.
@ThePracticalDev
•With JavaScript ES6 on the way and significant
browser improvements on the horizon, it is
likely that the “best practice” both on the
server and the client will continue to evolve.
•It will continue to be important to understand
how web applications work “all the way down”
so you can work with these new innovations.
The only correct way to write
JavaScript is whatever you were not
doing last week.
@ThePracticalDev
Acknowledgements / Contributions
These slides are Copyright 2010-Charles R. Severance
(www.dr-chuck.com) as part of www.wa4e.com and made
available under a Creative Commons Attribution 4.0 License.
Please maintain this last slide in all copies of the document to
comply with the attribution requirements of the license. If you
make a change, feel free to add your name and organization
to the list of contributors on this page as you republish the
materials.
Initial Development: Charles Severance, University of
Michigan School of Information
Insert new Contributors and Translators here including names
and dates
Continue new Contributors and Translators here
These slides are Copyright 2010-Charles R. Severance
(www.dr-chuck.com) as part of www.wa4e.com and made
available under a Creative Commons Attribution 4.0 License.
Please maintain this last slide in all copies of the document to
comply with the attribution requirements of the license. If you
make a change, feel free to add your name and organization
to the list of contributors on this page as you republish the
materials.
Initial Development: Charles Severance, University of
Michigan School of Information
Insert new Contributors and Translators here including names
and dates
Continue new Contributors and Translators here
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 7
- Slides 19
- Age 993 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views