The Jkop framework includes and provides a built-in template engine that can be used to perform various text operations, to substitute variables with actual values, include content from other files, perform simple looping operations and to do other processing to transform template files into final output. This template engine is provided as a part of the Jkop platform libraries, and is included by default in the Sympathy web server platform. Users of Sympathy, therefore, always have this template engine readily available.
In this tutorial we will learn how to use HTML templates in web development by utilizing this template engine. We will be creating a simple website to demonstrate how to implement and use HTML templates in this manner. We will be utilizing the ready-made Sympathy server called filesy for the purposes of the tutorial, and will be naming our sample website "Albert's Blog". At the end of this tutorial, you will have learned how to use HTML templates to construct web pages.
Getting Started
Install the Eqela Runtime, which is required and used for executing the Sympathy server applications.
For your programming environment, you may use any text editor of your choice: However, we recommend to use the Visual Studio Code.
Creating normal web pages
Create a new empty directory. Let's call it albertsblog. Then in your text editor, create a new file and name it index.html, and save it to the directory you created. Then let's add the following as the contents of our index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Albert's Blog</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<img src="image_header.jpg" />
<div id="menu">
<div class="item"><a href="/"><img src="image_home.png"></a></div>
<div class="item"><a href="/biography.html"><img src="image_biography.png"></a></div>
</div>
</div>
<div class="container">
<p class="description">"When you trip over love, it is easy to get up. But when you fall in love, it is impossible to stand again."</p>
<div class="article">
<div class="title"> On imagination </div>
<div class="content"> Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world. </div>
</div>
<div class="article">
<div class="title"> On learning </div>
<div class="content"> Most teachers waste their time by asking questions that are intended to
discover what a pupil does not know, whereas the true art of questioning is to discover
what the pupil does know or is capable of knowing. </div>
</div>
<div class="article">
<div class="title"> On humility </div>
<div class="content">As a human being, one has been endowed with just enough intelligence to be able to see clearly
how utterly inadequate that intelligence is when confronted with what exists. </div>
</div>
<div class="article">
<div class="title"> On relativity </div>
<div class="content">When a man sits with a pretty girl for an hour, it seems like a minute. But let him sit on a hot stove
for a minute - and it's longer than any hour. That's relativity. </div>
</div>
<br>
<a href="http://www.businessinsider.com/25-best-quotes-from-albert-einstein-2014-8">
Reference: 225 quotes that take you inside Albert Einstein's revolutionary mind</a>
</div>
<div id="footer">
<div id="copyright">
Copyright (c) HTML Template tutorial
</div>
</div>
</body>
</html>
For the images used in this tutorial, please download and save (right click and "Save Link As.." or equivalent) the following three images:
While downloading these three images, place them in the same folder as your index.html. Alternatively, if you wish, you may of course also use any other images of the same dimensions.
Once you have the images in place, let's create another file and name it biography.html. Let's add the following contents inside our biography.html file:
<!DOCTYPE html>
<html>
<head> <title>Albert's Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<img src="image_header.jpg" />
<div id="menu">
<div class="item"><a href="/"><img src="image_home.png"></a></div>
<div class="item"><a href="/biography.html"><img src="image_biography.png"></a></div>
</div>
</div>
<div class="container">
<div class="title"> Early years and education </div>
<p class="bio">Albert Einstein was born on March 14, 1879, in Ulm, Germany, but he grew up and
obtained his early education in Munich, Germany. He was a poor student, and some of his teachers
thought he might be retarded (mentally handicapped); he was unable to speak fluently (with ease and grace)
at age nine. Still, he was fascinated by the laws of nature, experiencing a deep feeling of wonder when
puzzling over the invisible, yet real, force directing the needle of a compass. He began playing the violin
at age six and would continue to play throughout his life. At age twelve he discovered geometry
(the study of points, lines, and surfaces) and was taken by its clear and certain proofs. Einstein mastered
calculus (a form of higher mathematics used to solve problems in physics and engineering) by age sixteen.
</p>
<p class="bio">Einstein's formal secondary education ended at age sixteen. He disliked school, and just as he was
planning to find a way to leave without hurting his chances for entering the university, his teacher expelled
him because his bad attitude was affecting his classmates. Einstein tried to enter the Federal Institute of
Technology (FIT) in Zurich, Switzerland, but his knowledge of subjects other than mathematics was not up to par,
and he failed the entrance examination. On the advice of the principal, he first obtained his diploma at the
Cantonal School in Aarau, Switzerland, and in 1896 he was automatically admitted into the FIT. There he came to
realize that he was more interested in and better suited for physics than mathematics.
</p>
<p class="bio">Einstein passed his examination to graduate from the FIT in 1900, but due to the opposition of one of
his professors he was unable to go on to obtain the usual university assistantship. In 1902 he was hired as an
inspector in the patent office in Bern, Switzerland. Six months later he married Mileva Maric, a former classmate
in Zurich. They had two sons. It was in Bern, too, that Einstein, at twenty-six, completed the requirements for his
doctoral degree and wrote the first of his revolutionary scientific papers.
</p>
<a href="http://www.notablebiographies.com/Du-Fi/Einstein-Albert.html">Reference: Encyclopedia of World Biography</a>
</div>
<div id="footer">
<div id="copyright">
Copyright (c) HTML Template tutorial
</div>
</div>
</body>
</html>
Now, in order to make the site look nice, let's put some style on our website using CSS. Create a new file and name it style.css. Then let's add the following contents to our style.css:
body {
margin: 0px auto;
font-family: sans-serif;
}
p {
font-size: 20px;
text-align: center;
text-align: justify;
}
img {
width: 100%;
}
#header {
width: 100%;
height: 100%;
}
#menu {
text-align: center;
}
.item {
width: 65px;
height: 65px;
margin: 8px;
display: inline-block;
}
.container {
padding: 12px 12px 12px 12px;
margin-bottom: 50px;
}
.description {
font-size: 30px;
text-align: center;
font-style: italic;
}
.article {
background-color: #f2f2f2;
margin-bottom: 5px;
}
.title {
padding: 3px 0px 0px 3px;
font-weight: bold;
font-size: 20px;
}
.content {
padding: 3px 3px 3px 6px;
font-style: italic;
font-size: 16px;
color: #635c5c;
}
#footer {
background-color: #333333;
color: white;
width: 100%;
height: 40px;
font-size: 12px;
display: table;
position: fixed;
bottom: 0;
}
#copyright {
display: table-cell;
vertical-align: middle;
text-align: center;
}
By this time we should have a working website, but note that we don't have any templates yet! But let's try the site: Run the sympathy filesy server using the following kind of command:
eqela eqela:sympathy:5.4.0/filesy albertsblog -listen=8080
After that, use your browser to access your website on port 8080 on localhost:
http://localhost:8080
Cool! Now you have a simple website. But wait, have you noticed something? We are using the exact same few lines of code for header and footer in index.html and biography.html. This is redundant code, and it is a very bad thing indeed! but don't worry we have a solution for that.
Working with template files
When we use templates, we can use the include keyword inside special <% and %> tags to incorporate the contents of another file within a template file. The syntax is as simple as this:
<% include template_file %>
Including the same common files from multiple pages of a website can be used to remove the redundancy of your code. One of the many good things in doing this is that if the header or footer needs to be updated, you will only need to modify one file and it will reflect to all of the other pages as well: Less code and more efficiency in your work.
Creating templates for header and footer
Now let's create a new file and name it header.html.t. Let's remove the block of code shown below from index.html and let's add it to become the contents of header.html.t instead:
header.html.t
<!DOCTYPE html>
<html>
<head> <title>Albert's Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<img src="image_header.jpg" />
<div id="menu">
<div class="item"><a href="/"><img src="image_home.png"></a></div>
<div class="item"><a href="/biography"><img src="image_biography.png"></a></div>
</div>
</div>
Also create another file and name it footer.html.t. We will do the same thing: We will remove the block of code shown below from index.html and we will add it to become the contents of our footer.html.t instead:
footer.html.t
<div id="footer">
<div id="copyright">
Copyright (c) HTML Template tutorial
</div>
</div>
</body>
</html>
Including template files
Rename your index.html to index.html.t instead (add the ".t" extension to the file name): The "dot t" (.t) file extension is an indicator that the file is a template file. Make the contents of your index.html.t now look like this:
<% include header.html.t %>
<div class="container">
<p class="description">"When you trip over love, it is easy to get up. But when you fall in love, it is impossible to stand again."</p>
<div class="article">
<div class="title"> On imagination </div>
<div class="content"> Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world. </div>
</div>
<div class="article">
<div class="title"> On learning </div>
<div class="content"> Most teachers waste their time by asking questions that are intended to
discover what a pupil does not know, whereas the true art of questioning is to discover
what the pupil does know or is capable of knowing. </div>
</div>
<div class="article">
<div class="title"> On humility </div>
<div class="content">As a human being, one has been endowed with just enough intelligence to be able to see clearly
how utterly inadequate that intelligence is when confronted with what exists. </div>
</div>
<div class="article">
<div class="title"> On relativity </div>
<div class="content">When a man sits with a pretty girl for an hour, it seems like a minute. But let him sit on a hot stove
for a minute - and it's longer than any hour. That's relativity. </div>
</div>
<br>
<a href="http://www.businessinsider.com/25-best-quotes-from-albert-einstein-2014-8">
Reference: 225 quotes that take you inside Albert Einstein's revolutionary mind</a>
</div>
<% include footer.html.t %>
Note that the contents are the same, but we simply replaced the header and the footer.
Likewise, rename your biography.html to biography.html.t, and change the contents to the following:
<% include header.html.t %>
<div class="container">
<div class="title"> Early years and education </div>
<p class="bio">Albert Einstein was born on March 14, 1879, in Ulm, Germany, but he grew up and
obtained his early education in Munich, Germany. He was a poor student, and some of his teachers
thought he might be retarded (mentally handicapped); he was unable to speak fluently (with ease and grace)
at age nine. Still, he was fascinated by the laws of nature, experiencing a deep feeling of wonder when
puzzling over the invisible, yet real, force directing the needle of a compass. He began playing the violin
at age six and would continue to play throughout his life. At age twelve he discovered geometry
(the study of points, lines, and surfaces) and was taken by its clear and certain proofs. Einstein mastered
calculus (a form of higher mathematics used to solve problems in physics and engineering) by age sixteen.
</p>
<p class="bio">Einstein's formal secondary education ended at age sixteen. He disliked school, and just as he was
planning to find a way to leave without hurting his chances for entering the university, his teacher expelled
him because his bad attitude was affecting his classmates. Einstein tried to enter the Federal Institute of
Technology (FIT) in Zurich, Switzerland, but his knowledge of subjects other than mathematics was not up to par,
and he failed the entrance examination. On the advice of the principal, he first obtained his diploma at the
Cantonal School in Aarau, Switzerland, and in 1896 he was automatically admitted into the FIT. There he came to
realize that he was more interested in and better suited for physics than mathematics.
</p>
<p class="bio">Einstein passed his examination to graduate from the FIT in 1900, but due to the opposition of one of
his professors he was unable to go on to obtain the usual university assistantship. In 1902 he was hired as an
inspector in the patent office in Bern, Switzerland. Six months later he married Mileva Maric, a former classmate
in Zurich. They had two sons. It was in Bern, too, that Einstein, at twenty-six, completed the requirements for his
doctoral degree and wrote the first of his revolutionary scientific papers.
</p>
<a href="http://www.notablebiographies.com/Du-Fi/Einstein-Albert.html">Reference: Encyclopedia of World Biography</a>
</div>
<% include footer.html.t %>
Since we are now using templates, we will need to enable template support in filesy, which is turned off by default. So restart now your filesy with the following command (If your existing filesy is still running, you can abort it by pressing Ctrl+C in the terminal window where it is running):
eqela eqela:sympathy:5.4.0/filesy albertsblog -listen=8080 -OprocessTemplateFiles=true
Now try your site again on your browser. You should now be able to see the complete homepage of Albert. But this time, there is no redundant code, because we have used HTML templates.
