Web Template

Then activate this roadrunner URL in a separate tab through this link:
http://roadrunner.cs.wcupa.edu/~LOGIN/

Description

This document develops a web template for creating multi-page websites. This template provide folder structures, CSS files, Php include files, JavaScript files along with a sample file which can be duplicated to create pages within this website.

One of the key features of this web template is that it is responsive in the sense that it is sensitive to the browser width and is intended to work equally well for desktops, tablets, or smart phones. Web responsivity is one of the most recent demands upon web designers, due to the needs of small-width devices.

Php assists in creating the page presentations by inserting various component pieces into a layout via file inclusions. Pages in a website often differ only by the content section, namely, they use the same links, the same header and footer. Rather than duplicating these portions, you can put them in one file and include them in each of the pages.

This template generates a variable-width centered "container" block within the document body. The container has maximum and minimum sizes.

Shell access to roadrunner

Your roadrunner account permits access by a command-line terminal shell. Although this may seem to be very primitive, it is actually sometimes a more efficient way to get something done than through software packages like Dreamweaver or WinSCP. Here are some common commands:
ls                    (current directory listing)
ls  <DIR>             (subdirectory listing)
cd  <DIR>             (change to another directory)
cd                    (change to home directory)
mv  <File1> <File2>   (rename a file)
cp  <File1> <File2>   (copy a file)
rm  <File>            (delete a file)
clear                 clear the terminal window
Shell access to your account is achieved with a secure-shell client which can be:

Installation

We want to download and install this template into your public_html folder. The idea is that this will serve as the basis of a website, and so once extracted, we will rename the directory.
  1. Log in to your roadrunner.cs.wcupa.edu account via a secure shell client.
  2. Change to the public_html folder:
    $ cd public_html/
    $ ls
    
  3. Retrieve the WebTemplate.zip archive file and double check that you actually got it.
    $ wget http://roadrunner.cs.wcupa.edu/samples/WebTemplate.zip
    $ ls
    ------------------------------------------- you should see the WebTemplate.zip file
    
  4. Unzip it.
    $ unzip WebTemplate.zip
    $ ls
    ------------------------------------------- you should see WebTemplate
    
  5. Rename the website:
    $ mv WebTemplate WebSample 
    $ ls
    ------------------------------------------- you should see WebSample
    
Then activate this roadrunner URL in a separate tab through this link:
http://roadrunner.cs.wcupa.edu/~LOGIN/WebSample/
If you want to download this zip file to your local computer, just use the hyperlink directly:

WebTemplate content

This template generates a variable-width centered "container" block within the document body. The container has maximum and minimum sizes. Here is the file structure used for the template:
index.php       (website root page)
sample.php      (a sample for page creation)
twocol.php      (another sample with "large" content)

Support Files

css/                        (local CSS files)
  nav.css                   (menu CSS file)
  layout.css                (layout specifications)
  twocol.css                (twocol.php CSS specifications)
include/                    (web-inaccessible include files)
  .htaccess                 (Apache-specific deny folder access)
  links.php                 (links used in navigation)
  session.php               (Session class)
  rb.php                    (RedBeanPhp ORM file)
js/                         (local JavaScript files)
  jquery-2.1.3.min.js       (jQuery toolkit)
img/                        (website images)
  header.png                (header image)
  menu.png                  (menu image - small width)
setup/                      (web-inaccessible Php command-line scripts)
  .htaccess                 (Apache-specific deny folder access)
The idea is that in a multi-page website, each page starts out as a copy of sample.php. The common basis, shared header and links files provide a uniform presentation of the website.

Generating Image Header Files

The structure of the document assumes the the header is based on a file. The width of the image (img element) is set to 100%. By virtue of this setting, it fills up the top of the enclosing container, and resizes as the browser width shrinks (down to a specified minimum width). The header file is a PNG file with text content and has a transparent background which is then supported underneath by an HTML-based color gradient.

To generate suitable PNG files, I have created the following web application:
WebHeader
Using this, you can

Web-inaccessible folders

The include folder holds Php files included by web-accessible scripts, but it should not be web-accessible. Some of the included scripts may contain passwords and other sensitive information. We want to prevent this directory from being accessed by web browsers. Likewise, the setup folder is where we put command-line Php scripts, typically for database initialization, also not meant for web access.

One way to achieve this access restriction is by placing the following Apache-specific file within the include and setup folders:
deny from all
If you attempt to access one of these hidden directories, you'll get a "Forbidden" error message.
http://roadrunner.cs.wcupa.edu/~LOGIN/WebSample/include
http://roadrunner.cs.wcupa.edu/~LOGIN/WebSample/setup

Page Template file

This template creates a centered, variable-width layout. The layout has a maximum size, and "scales" towards a minimum size. The file sample.php is suggested as the basis of the website. Below is diagram of sample.php. The container serves to constrain the document to a maximum width and minimum height, centered within the body. The header and navigational divs are at the top. The content div is where the page content goes.
document

handler
<?php

Php Code

?>

Stylesheets and Embedded CSS

(JavaScript code alt. location)

body
main
header  
nav  
section

HTML Code
with Php insertions

JavaScript files and script code

Other pages are created by duplicating sample.php and then add code within the top Php-mode handler section and bottom HTML-mode content section. Secondarily, modifications are done to the CSS and JavaScript, either by including other external scripts or adding code within the local sections. Here is the sample.php document itself:

sample.php
<?php
 
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample</title>
    <link href="css/nav.css" rel="stylesheet" />
    <link href="css/layout.css" rel="stylesheet" />
  </head>
  <body>
  <main>
 
  <header>
    <img src="img/header.png" />
  </header>
 
  <nav>
  <ul>
  <li><a href="#" class="no-action"><img class="menu" src="img/menu.png" /></a>
  <ul>
    <?php require_once "include/links.php" ?>
  </ul>
  </li>
  </ul>
  </nav>
 
  <section>
    <h2>Sample</h2>
  </section>
 
  </main>
  </body>
</html>
The purpose of the important viewport meta-tag is to ensure that low-width devices like smart phones do not automatically scale the display to fit in the view.

JavaScript File Placement

Putting JavaScript files at the end (just before closing body) makes the page rendering faster because the JavaScript files can be downloading while the browser is applying the CSS rules to the page content. The assumption is that the JavaScript usage is applied after the page body is loaded. An alternative placement of the JavaScript are also at the top, within the head tag, usually after the styles have been loaded.

Menus

The sample links file is this:

include/links.php
<li><a href=".">Home</a></li>
<li><a href="sample.php">Sample</a></li>
<li class="arrow no-action"><a href="#">Header 3</a>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="twocol.php">Two Cols</a>
    <li><a href="#">Link 3</a></li>
    <li class="arrow no-action"><a href="#">Link 4</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
  </ul>
</li>
<li><a href="#">Link 4</a></li>

CSS Support Files

These two user-defined files create the common appearance. The purpose of the JavaScript code in init.js is to initialize the menu system.


© Robert M. Kline