DSD-4709-A
Week 10

Questions from the assignment

  • No questions! Everyone understands everything–great!

Review of assignments

  1. Lihua Jin :: Site deck | Brickheadz
  2. Kyle An :: Brickheadz
  3. Amina Cheng :: Site deck | Brickheadz
  4. Yunfei Xie :: Site deck |
  5. Grace Oh :: Site deck | Brickheadz

Mid semester reports

  • Many of you need to kick this into high gear now. If you have any issues or problems I should know about please address them with me sooner rather than later.

Forms on the internet

  • We just designed a contact form for Brickheadz. What happens when it gets submitted?

Introduction to server-side scripting (PHP)

  • Client-side vs server-side web development
  • Client-side technologies:
    • Layout: HTML
    • Look and feel: CSS
    • Interactivity: Javascript
    • Frameworks: Bootstrap (for HTML and CSS), jQuery (for Javascript)
  • Server-side technologies:
  • Web servers: Apache/Nginx
  • Scripting languages: PHP/Python/Ruby/ASP/JavaScript
  • Databases: MySQL/MSSQL/Oracle/MongoDb
  • Frameworks:
  • Using a car analogy, client-side functionality determines how the car looks on the outside and feels on the inside. Server-side technology is commonly referred to as what happens "under the hood" and even though it's unseen, it's what responsible for making the car go.
  • One of the useful things this allows us to do is extract common elements—such as navbars, headers, footers—into a single file

Using PHP and HTML together

  • The easiest way to get started with PHP is to extract common elements, such as sidebars and navigation, into includes
  • Here's how to do that using Brickheadz as an example:
    1. Open any Brickheadz html file that contains the navigation
    2. Select and Cut just the navbar code (probably from <nav> to </nav>)
    3. At the root of your Brickheadz project create a new folder "includes" and in that folder, a new file, "nav.html"
    4. Paste nav code into nav.html and save
    5. At the same point in your code where you cut from <nav> to </nav> we're going to use PHP's include functionality to essentially embed that code in our page
    6. Write: <?php include ("insert nav.html path here"); ?>
    7. Rename the extension of that file from .html to .php (because now it has PHP code in it and our server is trained to look for .php and excecute the code accordingly)
    8. You can use this to replace both the navigation and sidebar with php include statements throughout the site

One tricky thing: relative-izing paths

  • Now that we're using one sidebar and one navigation file for the entire site, one tricky problem arises: keeping the paths to pages and images relative
  • For example, on the homepage we include sidebar.html with the following code <?php include ("includes/sidebar.html"); ?>
  • Of course, sidebar.html has the following code in it:
    <img src="images/brekz.jpg"> this will work because "img/brekz.jpg" is the correct path to the image from the homepage
  • However, when we include the same line:
    <?php include ("includes/sidebar.html"); ?> on
    crew/brekz/index.php the image will not show up because the html being included contains this <img src="images/brekz.jpg"> when it needs to be <img src="../../images/brekz.jpg">
  • To resolve this discrepancy we need...(wait for it) more PHP! We need the paths in sidebar.html to be relative depending on the path of the page that's including it.
  1. First thing's first. We need to add PHP to sidebar.html, so we need to change it to sidebar.php (note that wherever you included "sidebar.html" you'll now need to change it to "sidebar.php")
  2. Now we're going to define a variable in PHP that will store a relative paths using this code: $path = "../../";
    • The "$" is PHP's way of declaring a variable
    • path is our variable name. This could be anything; we could have named it relativePath or thisWillMakeEverythingWork (just no spaces or dashes in the name)
    • the "=" is setting our variable equal to "../../", which is what we'll use to make sure our path is always relative
  3. So in crew/brekz.php replace <?php include ("includes/sidebar.html"); ?> with: 
    <?php 
	$path = "../../";
	include ($path . "includes/sidebar.php"); 
?>

    Note that I'm assuming the includesfolder is two levels up from where brekz.php is. If that's not the case then you'll have to make the appropriate adjustments
  4. In sidebar.php for every <img src="" > and <a href="" > we need to tell php to output our relative path variable. So all those links should now look like this: 
    <a href="<?php echo $path ?>">
	<img src="<?php echo $path ?>images/brekz.jpg" />
</a>
  5. To summarize, the PHP variable $path is passed from crew/brekz.php (where we defined it) into includes/sidebar.php and is output before every link (that's what echo does)

Coding Assignment: Brickheadz + PHP (optional)

Deliverable: Web server URL

  • Continue implemtning PHP for rest of the site
  • This means changing all pages from .html --> .php
  • Create nav.php for the navigation and include it on every page
  • Links in nav.php will have to be relativized like we did for sidebar.php

Design Assignment: Wireframes + Design presentation

Deliverable: Publicly accessible PDF

  • Taking class feedback into account, revise the chosen design
  • Carry this design through for each page template
  • Create interactive prototypes where necessary to illustrate interactive ideas and link to them in your presentation
  • The order of slides in your presentation should be:
    • Cover page
    • Optional page(s) explaining the major goal of the project and the main challenges
    • Homepage design (no annotations)
    • If applicable, include links to interactive prototypes
    • Homepage design (with annotations)
    • Secondary pages (with annotations)
    • Wireframes
    • Content strategy
    • Thank you page
  • You may be called on randomly to give a 5 minute presentation about your site

Submitting Your Work

Due Monday, 4/8 @ 10AM

Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.

Further reading

Cool links