# Approaches to Site Building

Harvard Extension School
Fall 2022

Course Web Site: https://cscie12.dce.harvard.edu/

### Topics

1. Approaches to Site Building
2. Building Pages from Parts: An Introduction to PHP
3. Apache SSI - a lighweight way to build pages from parts
4. Web Content Management System (Web CMS)
5. GetSimple Demo
6. Wordpress Demo

Approaches to Site Building, slide1
Approaches to Site Building, slide2
Static Site Generators (SSG), slide3
Nature of America Stamp Panes, slide4
SSG example: 11ty (eleventy), slide5
Content for Longleaf Pine Forest, slide6
Adding other pages, slide7
What about using data?, slide8
Building Pages from Parts: An Introduction to PHP, slide9
PHP: Hypertext Processor, slide10
Building a Page from Parts, slide11
Iroquois Constitution, slide12
File Includes with PHP, slide13
Parts that Build the Page, slide14
Recommendation: Keep files well-formed, slide15
Apache SSI - a lighweight way to build pages from parts, slide16
Web Content Management System (Web CMS), slide17
GetSimple Demo, slide18
Wordpress Demo, slide19

Presentation contains 19 slides

- img
- img
- img
- img
- img

## 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 &mdash; North America's' fastest land animal &mdash;
        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

- 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

hello.php

    <?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."

## Wordpress Demo

- WordPress