Cornell Pump Company eCatalog
Write-Up
About...
The eCatalog is a webpage primarily based on JavaScript, HTML, and CSS with
some minor PHP. It was created to improve upon the previous eCatalog. Specifically,
more support for mobile devices, more share functionality, more print functionality,
and embedded PDFs were added.
Development was done primarily by Graham Smith (intern), with supervision and
direction provided by Michele Lukowski and Michael Roberts.
Directories and Files...
Root Directory: http://www.cornellpump.com/ecat/
Critical PHP Files: catalog.php, print/print.php, print/thankyou.php
documentation:
editingguide.docx – A guide to editing the eCatalog.
writeup.docx – This document.
images:
logo.png – Logo used as a background image in the header of catalog.php.
pageBackground.jpg – Background image for catalog.php.
other:
devfiles – Contains files used during development.
buildingfile.html – For the convenience of updating the eCatalog. Contains precompressed versions of catalog pages.
pdfs:
Contains PDFs used as part of the eCatalog. Note that said PDFs need to be
version 1.3 to allow for proper printing.
print:
Contains files used in the printing of PDFs embedded in the eCatalog.
doc – Used by FPDF (see below).
font – Used by FPDF (see below).
FPDF – Contains files that generate PDFs using PHP. Capable (with
1
extension) of automatically printing said PDFs.
FPDI – Contains files that act as an extension to FPDF. Generates PDFs
from existing PDF files.
makefont – Used by FPDF (see above).
print.php – Prints a specific PDF with the help of FPDF and FPDI (PHP classes).
thankyou.php – Thanks the user for printing and contains a link (generated by
PHP) to the specific PDF in case it didn’t print properly.
scripts:
library.js – Used with catalog.php and script.js to make the eCatalog function. It
contains arrays, variables, and functions used to create catalog pages, among
other tasks.
library_uncompressed_commented.js – An uncompressed version of library.js
with comments.
script.js – Used with catalog.php and library.js to make the eCatalog function. It
contains various functions.
script_uncompressed_commented.js – An uncompressed version of script.js
with comments.
stylesheets:
styles.css – Used with catalog.php to define its styles.
styles_uncompressed_commented.css – An uncompressed version of styles.css
with comments.
thankyoustyles.css – Used with thankyou.php to define its styles.
thankyoustyles_uncompressed_commented.css – An uncompressed version of
thankyoustyles.css with comments.
catalog.php – The main PHP file for the eCatalog (doesn’t actually contain PHP).
How It Works...
Names in quotes refer to HTML IDs
catalog.php Page Structure:
There are three links on the “upperNavigation” (the top navigation bar): Pumps,
Info, and Cornell Pump Homepage. Pumps is the meat of the catalog, and allows
for access to all of the entered pump models. This is where the page starts out on
default. Info is an introduction page for the eCatalog; clicking on it calls a few
2
functions to go to said introduction. Cornell Pump Homepage is the only actual link
on the “upperNavigation” that generates an HTTP request; it takes the user back to
www.cornellpump.com.
“lowerNavigation” only expands when the user is in the Pumps section. It includes
Search and Share Buttons in addition to a Search Box. With the Search Button
and Search Box, the user can type a model number into the box and press the
button to go to that model. The Share Button calls a function to generate a mailto
link which opens in the user’s email client. This link creates an email which includes a
URL to a specific page within the application. How this works is on page load, a
function searches for variables within the URL (hence why it is catalog.php; no PHP is
in the file, but it has to have that extension to present a GET Method URL) and uses
said variables to go to a specific page. For example, the generated URL would be
appended with, “?pagecode=1&sectioncode=0” to get to the first model page
(pagecode 1) in the Pumps section (sectioncode 0).
“aside,” like “lowerNavigation,” only expands when one is in the Pumps section. It
holds navigation to all of the pump models. By user choice, said models can be
organized by model number or application, facilitated by the top buttons in “aside”
(Models and Application).
“article” holds the main content of the page, whether it is an introduction or a pump
model page. It contains tables and embedded PDFs.
“aside” and “article” are almost entirely generated by JavaScript.
PDFs are embedded using iFrames containing Google Docs Viewer. This service can
be found here.
JavaScript:
Essentially, the JavaScript is designed to get the page content from a single variable
3
called baseSource (located in scripts/library.js). It then takes strings from this variable
and distributes them to other arrays, organizing information. This works through
custom markup within baseSource (see below). Moreover, it then uses these arrays
to create navigation and pages (once that navigation is clicked) to make a functioning
eCatalog. In addition, the JavaScript fulfills other functions such as browser and mobile
device detection (through user agent detection), style adjustment based on browser
and device, etc.
PHP:
PHP is used in printing PDFs off of the catalog pages. Essentially, print.php uses two
classes (FPDF and FPDI) to print the PDFs. The file, thankyou.php, which opens slightly
after print.php opens, generates a download link to the printed PDF using the GET
Method.
baseSource Markup:
CONTENT [Entire Model (including other markup) Goes Here] CONTENT
MODEL [Model Number Here] MODEL
APPLICATION [Application Name Here] APPLICATION
HTML [HTML Markup for the article section here] HTML
PDFLOCALURL [Relative Link for a PDF Here] PDFLOCALURL [Another Relative Link for a PDF Here] PDFLOCALURL
PDFNONLOCALURL [Partial Absolute URL for a PDF Here] PDFNONLOCALURL [Another Partial Absolute URL for a PDF Here]
PDFNONLOCALURL
PDFCOUNTNUMBER [Starting Number for PDFs Here] PDFCOUNTNUMBER
PDFLIMITNUMBER [Ending Number for PDFs Here] PDFLIMITNUMBER
CONTENT: Holds an entire model.
MODEL: The model number of the pump.
APPLICATION: The application the pump should be filed under. One cannot input
multiple applications.
HTML: The HTML markup for the “article” section.
PDFLOCALURL: The relative links for PDFs relating to the pump model (they refer to
4
the pdfs/ directiory). These links are used as a backup in case the embedding of PDFs
fails (they’re also used in printing functionality and download links). One can (and
often should) put in multiple links. Remember that one has to include, under HTML, a
number of “pdfHolder”s corresponding to the number of PDFs.
PDFNONLOCALURL: The absolute links for PDFs relating to the pump model. Note
that the PDFs these links link to should stay in the same folders and place (ecat/pdfs/).
These links are used for embedding the PDFs. One can (and often should) put in
multiple links. Remember that one has to include, under HTML, a number of
“pdfHolder”s corresponding to the number of PDFs.
PDFCOUNTNUMBER: A number used by a JavaScript function. It should be the
number of the previous array item’s PDFLIMITNUMBER. If one is editing the
second array item (the one after the introduction, essentially the first model), it should
be 0.
PDFLIMITNUMBER: A number used by the same JavaScript function. It should be the
PDFCOUNTNUMBER of this array item plus the number of PDFs one is using in this
array item.
“baseSource” uses this markup to place content into the following arrays in order:
“contentSource” (holds all content)
“modelNumberArray” (holds MODEL content)
“applicationArray” (holds APPLICATION content)
“articleArray” (holds HTML content)
“pdfLocalArray” (holds PDFLOCALURL content)
“pdfNonLocalArray” (holds PDFNONLOCALURL content)
“pdfCountNumberArray” (holds PDFCOUNTNUMBER content)
“pdfLimitNumberArray” (holds PDFLIMITNUMBER content)
The point of this is to allow future edits, additions, and removals to be easily
facilitated. This way, there only has to be an edit in a few places, barring any serious
changes, to update the eCatalog.
5
buildingfile.html has more hints on how to create and edit content (so does
editingguide.docx). Note that once one builds or edits a page in this file, one will have
to remove all excess whitespace and line breaks before and after the HTML markup
(but, if APPLICATION content consists of multiple words, be sure to leave a space
between them) and compress the HTML markup. My suggestion is to use this web
tool to do so. Finally, one can copy and paste the entirety into one’s desired array
item in contentSource (contained in library.js).
Other...
Compression:
library.js, script.js, styles.css, and thankyoustyles.css are compressed to reduce loading
time and server costs. If updating the eCatalog, it is recommended that one update
both compression levels (compressed, and uncompressed and commented) to
maintain the compression. To compress the JavaScript go here (leave “shrink
variables” unchecked for library.js and checked for script.js). Go here to compress
CSS.
Code Quality and Validation:
All uncompressed JavaScript was checked for code quality using JsHint (it mostly
passed). In addition, all CSS and HTML was validated (all but font-awesome.min.css, a
linked stylesheet, passed).
6