About us

This website was created by Micaela Pierce and Miguel Amezola as a project for a course at Pacific Lutheran University (Tacoma, WA).

Project 1

For this project, we created a multi-page website for rescuing two types of pets.

As this was an open-ended assignment, we added what we like as long as we meet the following requirements:

  • all pages were developed using a text editor, HTML5, and CSS3. PHP was used to import common code used in multiple files. Please do not use Javascript or other scripting languages in this project.
  • a minimum of ten pages including:
    • a homepage containing a welcome message and general information about the site
    • at least two adoption pages listing animals available for adoption (one page for each type of animal). Each adoption page should contain a minimum of three animals. For each animal, provide an image, summary information and links to pages containing more details.
    • a details page for each individual animal (include images of the animal)
    • a citations page for sources, images, videos etc. used on the site
  • each page includes a common header, footer and navigation menu. Specifically:
    • Header - should have a graphical logo on the right or left side of the header. There should also be a title next to the logo with a larger font than the content text and a contrasting font color to the background.
    • Navigation Menu - should have a mix of buttons and drop-down/pop-up menues that allow the user to easily jump between pages.
    • Footer - should contain you and your partner's name, the semester and year, and information that this is a project for PLU's CSCI387 course and not a real animal rescue site.
  • the directory structure for this website contains -
    • a home directory for the primary files
    • appropriately named sub-directories for CSS and image files
    • additional sub-directories containing the detail pages for each type of animal
    • files including commonly used code are stored in a sub-directory called "includes"
  • .html code:
    • is organized so that it follows the standard document structure (i.e. contains a document prolog, html, header and body sections)
    • has appropriate blank lines and indentation so that it is easy for someone to read and follow.
    • includes comments in the head section that contain our names, the project number, course and date.
    • calls both normalize.css and the .css file(s) for formating the website.
    • uses semantic elements to organize and describe page content including header, nav, main, footer, aside, article, figure and figcaption html tags.
    • uses semantic elements and divs as containers/wrappers for the page layout. No tables or frames are used for page layout.
    • has pages that can be validated using W3C's Markup Validation Service at https://validator.w3.org
  • .css file:
    • has style rules and classes that format:
      • a header section at the top of each webpage
      • a navigation menu with buttons and drop-down/pop-up menus that allows users to jump to different pages in the site
      • one or more sidebars containing commentary, alternate choices, images, adverts etc.
      • a content area containing the primary information on the page
      • images with appropriate captions
      • a footer at the bottom of each webpage
    • additionally:
      • comments were added at the top of your .css file that include our names, the project number, course and date.
      • appropriate padding, margins, background colors and borders were added to visually separate each area on the webpages
      • any text overflow from one block element to another was controlled
      • any page layout issues arising from using "floats" were controlled
      • our stylesheet can be validated using W3C's CSS Validation Service at https://jigsaw.w3.org/css-validator

Project 2

For this project, we added the following to the webpages that were created for Project 1 -

  • a minimum of three forms from the list below -
    • a form that allows users to donate money for sponsering an animal. Input values could include:
      • current date
      • amount (different amounts for different animals)
      • payment period (weekly, monthly, quarterly etc.)
      • month to start donation (should be stored as a date)
      • contact information (name, email, address, phone)
      • whether or not this donation is a gift
    • a form that allows users to volunteer at an animal sanctuary or food bank location. Input values could include:
      • current date
      • contact information (name, email, address, phone)
      • date of birth and gender
      • emergency contact information (name, email, address, phone) and relationship to you
      • availability - days (Sunday through Saturday), start and end times (7am to midnight)
      • max hours per month or week willing to volunteer
      • skills and experience
      • assignment preferences
      • Volunteer Application Agreement
    • a form that allows users to apply for fostering of an animal. Input values could include:
      • current date
      • contact information (name, email, address, phone)
      • animal species interested in fostering (can be more than one)
      • interested in fostering a special needs, senior or farm animal?
      • residence type (house, condo, mobile home, apartment, townhouse, other)
      • name of residence complex (if applicable)
      • rent or own residence?
      • length of time at that residence
      • space available for animal in residence (yard size, outdoor shelter, indoor space etc)
      • area explaining why user wants to foster these animals
      • name and age of all human household members
      • species, age of all animals in household PLUS whether they are spayed, neutered and up-to-date on vaccines
    • a form that allows users to apply for adoption of an animal. Input values could include:
      • current date
      • contact information (name, email, address, phone)
      • name of animal and species interested in adopting (up to three animals)
      • residence type (house, condo, mobile home, apartment, townhouse, other)
      • name of residence complex (if applicable)
      • rent or own residence?
      • length of time at that residence
      • space available for animal in residence (yard size, outdoor shelter, indoor space etc)
      • area explaining whether this is a lifetime commitment and if so, why
      • area explaining what could happen in life that would make one give up an animal
      • name and age of all human household members
      • species, age of all animals in household PLUS whether they are spayed, neutered and up-to-date on vaccines
  • forms should include at least two of each input type with appropriate attributes.
    • text
    • date
    • email or URL
    • number
    • checkbox or radio button
    • range
    • textarea
    • hidden - you could use this to save the current date from the server...
    • select or datalist
    • reset button
    • submit button
  • somewhere in the PHP code, two built-in functions that haven't discussed in class are utilized. Those two additional functions are identified in the comments at the top of the code.
  • each form should validate user-entered data using HTML where appropriate
  • each form should call appropriate PHP scripts to:
    • clean and validate user-entered data
    • display user data in input boxes and error messages IF there were any errors caught during validation
    • write cleaned and validated data in JSON format to a .json file (see note below)
    • redirect user to a blank form once data has been written file
  • NOTE: when writing cleaned and validated data to a .json file:
    • First - the permissions to the .json file are set to world write-only (no read or execute access) i.e. 752
    • Second - MongoDB requires that JSON records be stored one per line. For example:

      { "name" : "James", "email" : "james@gmail.com", "date" : "2016-11-11" }
      { "name" : "Luisa", "email" : "luisa@gmail.com", "date" : "2016-11-11" }
      { "name" : "Ramon", "email" : "ramon@gmail.com", "date" : "2016-11-11" }
      { "name" : "Harmony", "email" : "harmony@gmail.com", "date" : "2016-11-11" }

      To accomplish this, the JSON_PRETTY_PRINT parameter is left off i.e. $json_data = json_encode($myarray);
    • Third - "\n" is added to the $json_data variable in order to get the next record to append on a new line i.e. $json_data = json_encode($myarray) . "\n";