Approaches to Site Building
Harvard Extension School
Fall 2022
Course Web Site: https://cscie12.dce.harvard.edu/
Topics
- Approaches to Site Building
- Building Pages from Parts: An Introduction to PHP
- Apache SSI - a lighweight way to build pages from parts
- Web Content Management System (Web CMS)
- GetSimple Demo
- Wordpress Demo
Presentation contains 19 slides
Approaches to Site Building
How to stay DRY (Don't Repeat Yourself)
Remember that part of DRY is for your HTML pages to reference the same CSS and/or JavaScript document(s)!
For pages within the site, there will be a lot of common parts in the HTML that give the structure, and there will likely be common content that is repeated (such as header, footer, navigation)
Techniques
- cut-and-paste
- Static Site Generators (SSG)
- Parts into a whole — with SSI, PHP
- Web Content Management System (e.g. Wordpress)
Static Site Generators (SSG)
From Netlify's What is a Static Site Generator?:
Think of a static site generator as a script which takes in data, content and templates, processes them, and outputs a folder full of all the resultant pages and assets.
SSG are part of the "JAMstack" approach
- JavaScript
- APIs
- Markup
Nature of America Stamp Panes
Consider a site that has a page for each of the ten stamp panes issued in the "Nature of America" series.
SSG example: 11ty (eleventy)
- 11ty.dev (11ty, Eleventy)
Eleventy, a simpler static site generator.
Content for Longleaf Pine Forest
---
title: Longleaf Pine Forest
layout: template.html
---
<p>The <strong>Longleaf Pine Forest</strong> stamps were issued in 2002 from Tallahassee, Florida.
It is the fourth stamp pane in the Nature of America series.</p>
<p>
<img class="stamppane" src="/images/stamps/sn3611.png" alt="Longleaf Pine Forest stamp pane" />
</p>
<p>Although greatly reduced in size, the longleaf pine forest still occupies parts of its natural range in the coastal plains from southeastern Virginia to eastern Texas. Characterized by the longleaf pine, this unique ecosystem includes many plant communities that vary with soil type, moisture, and frequency of fire.
</p>
<p>Before European settlement, fires burned unchecked and the longleaf pine evolved with adaptations to survive fire. Seedlings need fire-cleared ground to become established. They resemble clumps of grass with long needles that protect the buds. Their long taproots store food, allowing the young trees to shoot upward, thus reducing the exposure of the growing tips to fire. Mature trees have thick, protective bark.
</p>
<p>This "forest built by fire" still supports diverse species, including the endangered red-cockaded woodpecker. Programs are underway to preserve remaining stands of longleaf and restore them where they have been replaced by other trees.
</p>template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ title }} | Nature of America</title>
{% include htmlhead.html %}
</head>
<body>
<header>
<h1>Nature of America</h1>
{% include navigation.html %}
</header>
<main>
<h2>{{ title }}</h2>
{{ content }}
</main>
{% include footer.html %}
{% include blueimp_gallery_templates.html %}
</body>
</html>Adding other pages
map.html
---
title: Places of First Issue
layout: template.html
---
<div id="map"> </div>great_plains_prairie.html
---
title: Great Plains Prairie
layout: template.html
---
<p><strong>The Great Plains Prairie</strong> stamps were issued in 2001 from Lincoln, Nebraska. It is the third stamp pane in the Nature of America series.</p>
<p>
<img class="stamppane" src="/images/stamps/sn3506.png" alt="Great Plains Prairie stamp pane" />
</p>
<p>The varied tapestry of the tallgrass, mixed-grass, and
short-grass prairies reaches from the eastern woodlands and oak savannas to the foothills of the Rockies. Grasses and wildflowers make good use of limited
rainfall, and fire helps sustain the ecosystem. Prairies
provide habitats for many animals, including the
pronghorn — North America's' fastest land animal —
and the prairie dog, one of many burrowing animals
that live on the prairies
</p>
<p>Settlers' steel plows
altered the landscape and transformed life on the
prairies.</p>
<p>Native prairie is rare today; remaining patches exist
because of careful management and diligent preservation efforts.
</p>What about using data?
We can put JSON or JavaScript that creates JSON in a _data folder, and then simply refer to it in our templates.
Here's an example of building a course list based on data as well as a separate HTML page for each course!
Courses Data (courses.json)
{
"courses": [
{
"code": "CSCI E-1B",
"title": "Computer Science for Business Professionals",
"crn": "25393",
"term": "Spring 2023",
"catalog_url": "https://courses.dce.harvard.edu/?details&srcdb=202302&crn=25393",
"meets": "On Demand",
"instr": "David J. Malan"
},
{
"code": "CSCI E-7",
"title": "Introduction to Computer Science with Python",
"crn": "25531",
"term": "Spring 2023",
"catalog_url": "https://courses.dce.harvard.edu/?details&srcdb=202302&crn=25531",
"meets": "On Demand",
"instr": "Henry H. Leitner"
},...]}
Template to produce one HTML file per course item
---
pagination:
data: courses.courses
size: 1
alias: course
permalink: "courses/{{ course.crn | slug }}/"
layout: template.html
eleventyComputed:
title: "{{ course.code }}"
---
<nav>
<a href="/">Return to course listing</a>
</nav>
<div class="course single">
<h3>{{ course.code }}<br/>{{ course.title }}</h3>
<ul>
<li>Term: {{ course.term }}
</li>
<li>CRN: {{ course.crn }}
</li>
<li>Meets: {{ course.meets }}
</li>
<li>Instructor: {{ course.instr }}</li>
<li>
<a href="{{ course.catalog_url }}">{{ course.code }} catalog entry</a>
</li>
</ul>
<p>{{ course.description }}</p>
</div>
See courses_11ty project.
Building Pages from Parts: An Introduction to PHP
Review of HTTP Request/Response
Pages from Parts
PHP: Hypertext Processor
From the PHP manual:
PHP, which stands for "PHP: Hypertext Preprocessor" is a widely-used Open Source general-purpose scripting language that is especially suited for Web development and can be embedded into HTML. Its syntax draws upon C, Java, and Perl, and is easy to learn. The main goal of the language is to allow web developers to write dynamically generated web pages quickly, but you can do much more with PHP.
PHP Example
<?php
$greeting = "Hello, World!";
?>
<html lang="en">
<head><title>Hello</title></head>
<body>
<h1><?php echo($greeting) ?></h1>
</body>
</html>Building a Page from Parts
Why?
- Common elements of site are in one place and included throughout the site
Useful to include documents or information that is used repeatedly throughout a site, such as common headers, footers, and navigation elements. You can change these chunks in one place and have an effect on the entire site! - Documents (or parts of pages) that change often
Useful to include documents or information that change frequently; only the "included" file needs to be updated, not the page itself. Also the person or program editing the file need only have permissions to edit the "included" file, not the actual HTML document that includes it; only the data in the "include" file needs to be written, not the entire HTML page. - Document Information
Useful to include information specific about a document, such as last modified date, URI, size.
Techniques
- PHP and file include
- Apache Server Side Includes (SSI)
Iroquois Constitution
Iroquois Constitution (also this demonstrates using JavaScript to make the navigation 'work' with an "active" class.)
Common parts of page are shown:
File Includes with PHP
<!DOCTYPE html>
<html>
<head>
<title>The Great Binding Law, Gayanashagowa (Constitution of the Iroquois Nations)</title>
<?php include("inc/htmlhead.php"); ?>
</head>
<body id="part1">
<?php include("inc/header.php"); ?>
<?php include("inc/nav.php"); ?>
<main>
<?php include("inc/content1.php"); ?>
</main>
<?php include("inc/footer.php"); ?>
</body>
</html>Files
|-- 1.php
|-- 10.php
|-- 11.php
|-- 12.php
|-- 13.php
|-- 14.php
|-- 15.php
|-- 16.php
|-- 2.php
|-- 3.php
|-- 4.php
|-- 5.php
|-- 6.php
|-- 7.php
|-- 8.php
|-- 9.php
|-- inc
| |-- content1.php
| |-- content10.php
| |-- content11.php
| |-- content12.php
| |-- content13.php
| |-- content14.php
| |-- content15.php
| |-- content16.php
| |-- content2.php
| |-- content3.php
| |-- content4.php
| |-- content5.php
| |-- content6.php
| |-- content7.php
| |-- content8.php
| |-- content9.php
| |-- footer.php
| |-- header.php
| |-- htmlhead.php
| `-- nav.php
|-- scripts
| `-- highlightnavigation.js
`-- styles
`-- site.css
Parts that Build the Page
Starting File (1.php)
<!DOCTYPE html>
<html>
<head>
<title>The Great Binding Law, Gayanashagowa (Constitution of the Iroquois Nations)</title>
<?php include("inc/htmlhead.php"); ?>
</head>
<body id="part1">
<?php include("inc/header.php"); ?>
<?php include("inc/nav.php"); ?>
<main>
<?php include("inc/content1.php"); ?>
</main>
<?php include("inc/footer.php"); ?>
</body>
</html>HTML Head Content - htmlhead.php
<meta charset="utf-8"/>
<link rel="stylesheet" href="./styles/site.css" />
<script src="scripts/highlightnavigation.js"> </script>
Header - header.php
<header><h1>Constitution of the Iroquois Nations</h1></header>Navigation - nav.php
<nav>
<ul id="mainnav">
<li id="navpart1"><a href="1.php">The Great Binding Law, Gayanashagowa</a></li>
<li id="navpart2"><a href="2.php">Rights, Duties and Qualifications of Lords</a></li>
<li id="navpart3"><a href="3.php">Election of Pine Tree Chiefs</a></li>
<li id="navpart4"><a href="4.php">Names, Duties and Rights of War Chiefs</a></li>
<li id="navpart5"><a href="5.php">Clans and Consanguinity</a></li>
<li id="navpart6"><a href="6.php">Official Symbolism</a></li>
<li id="navpart7"><a href="7.php">Laws of Adoption</a></li>
<li id="navpart8"><a href="8.php">Laws of Emigration</a></li>
<li id="navpart9"><a href="9.php">Rights of Foreign Nations</a></li>
<li id="navpart10"><a href="10.php">Rights and Powers of War</a></li>
<li id="navpart11"><a href="11.php">Treason or Secession of a Nation</a></li>
<li id="navpart12"><a href="12.php">Rights of the People of the Five Nations</a></li>
<li id="navpart13"><a href="13.php">Religious Ceremonies Protected</a></li>
<li id="navpart14"><a href="14.php">The Installation Song</a></li>
<li id="navpart15"><a href="15.php">Protection of the House</a></li>
<li id="navpart16"><a href="16.php">Funeral Addresses</a></li>
</ul>
</nav>Footer - footer.php
<footer>
Text form prepared by Gerald Murphy (The Cleveland Free-Net - aa300). Distributed by the Cybercasting Services Division of the National Public Telecomputing Network. Rendered into HTML by <a href="mailto:jon.roland@the-spa.com">Jon Roland</a> of the Constitution Society. (NPTN). Permission is hereby granted to download, reprint, and/or otherwise redistribute this file, provided appropriate point of origin credit is given to the preparer(s), the National Public Telecomputing Network and the Constitution Society.
<div class="note">
<p>Additional information about the Iroquois nations and their constitution are available:</p>
<ul>
<li><a href="http://www.tuscaroras.com/graydeer/influenc/page1.htm">The Influence of the Great Law of Peace on the the United States constitution: an Haudenosaunee (Iroquois) Perspective</a></li>
<li><a href="http://www.ratical.org/many_worlds/6Nations/index.html">The Six Nations: Oldest Living Participatory Democracy on Earth</a></li>
<li><a href="http://www.iroquoismuseum.org/">Iroquois Indian Museum</a></li>
</ul>
</div>
</footer>Recommendation: Keep files well-formed
Don't do this: Breaking a page in half
This technique is not recommended. The first include file contains the top "half" of the page; the content follows; the
second include file contains the bottom "half" of the page. In this technique, the html
,body, and perhaps other elements are started in the "top half" and their end tags are in "bottom half."
The page delivered to the browser does validate, but the individual parts on the server are not well-formed, which can
cause some confusion when editing a file.
<?php include("header-tophalf.html"); ?>
Lorem ipsum dolor sit amet, consectetuer adipiscing ...
<?php include("footer-bottomhalf.html"); ?>
Keeping things well-formed
<!DOCTYPE html>
<html>
<head>
<title>Lecture Notes</title>
<link rel="stylesheet" href="styles/site.css" />
</head>
<body>
<?php include("inc/header.php") ?>
<?php include("inc/nav.php") ?>
<main>
Lorem ipsum dolor sit amet, consectetuer adipiscing ...
</main>
<?php include("inc/footer.php") ?>
</body>
</html>Apache SSI - a lighweight way to build pages from parts
Apache SSI (Server Side Includes)
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Great Binding Law, Gayanashagowa (Constitution of the Iroquois Nations)</title>
<!--#include virtual="inc/htmlhead.shtml" -->
</head>
<body class="pagecontainer" id="part1">
<!--#include virtual="inc/header.shtml"-->
<!--#include virtual="inc/nav.shtml"-->
<main>
<!--#include virtual="inc/content1.shtml"-->
</main>
<!--#include virtual="inc/footer.shtml" -->
</body>
</html>Web Content Management System (Web CMS)
CMS aims to solve both "DRY" as well as "easy editing" of sites through a browser.
WordPress Example
GetSimple Example
GetSimple Demo
GetSimple describes itself as: "GetSimple is an open source Simple CMS that utilizes the speed and convenience of flat file XML, a best-in-class UI and the easiest learning curve of any lite Content Management System out there. It requires no database and has a powerful plugin system that allows for unlimited expansion."