Posted inLIS 4365 Web Design Technologies School Work

LIS 4365 Web Design Technologies: Final Project, Build a Website

July 24, 2021

My final project for Web Design Technologies. For this I was tasked with using all the skills I have learned thus far to build a website from the ground up. For the website I had to promote a nonprofit organization. I was unsure of building a website for a real organization, so I came up with a fictional one, QK Reading Buddies. This nonprofit would offer educational programs in the summer to impoverished areas and also provide meals.

You can find the completed website here, or follow the link at the bottom of the post.

I also created a GitHub repository as well so that you can see all the code I wrote. You can find it here, or follow the link at the bottom of this post.

Planning

Once I knew what the organization was, I started identifying what kind of pages and forms they would need. The first were obvious, a home page, an about page, and a contact page. They also would want a section for people interested in volunteering. At this point I can identify two forms the organization will want, the contact form, and a volunteer sign up form. In summary, here is the list of pages and forms.

  • Home Page
  • About Page
  • Volunteer Page
  • Volunteer Sign Up Form
  • Volunteer Sign Up Submission Page
  • Contact Us Form
  • Contact Us Submission Page

For this project I have intentionally kept the number of pages to a minimum. Many non-profits would also include a news section and widgets to connect to their social media. These may be features that I add at a later date or on future websites I build.

Making a Wireframe

Now that I know what pages I need to build, I can start drawing what I want them to look like. The first one I drew is a general layout for all pages. Here I am saying that all pages will have a header and footer with the given content. In the header I knew that I wanted navigation to the other sections of the website. I also wanted the header to have some sort of branding for the organization. For the footer I wanted to include something akin to a copyright statement, and also a list of all the pages on the site. The following figure is what I came up with.

Figure 1: General layout for all pages.

Making the wireframe for the two forms was easier after making the general content page wire frame. All I really needed to do was decide what information I wanted to collect. Here are the wireframes for the two forms.

  • Figure 2: Contact Form Wireframe
  • Figure 3: Volunteer Sign Up Wireframe

The final wireframe I need to build is for the home page. For the home page I want to switch things up a little bit to make it distinct from the content pages. A home page is the central hub for all the pages associated with a domain. It does not need a title necessarily, but links to other parts of the website would be helpful. Here I would like to have large splash sections to guide a user to the about and volunteer sections. What I came up with is in figure 4 below.

Figure 4: Home Page Wireframe

Building the Front End

Before I add the actual site functionality, I want to build out the front end of the website. It is easy to test the front end on local host, and changes are quick to update. The backend also will not be testable without a working front end.

I struggle with programming front end, as a programmer I have always focused on functionality over form. While I had learned some CSS before, I had to take it to another level for this website. The header, footer, and spreads on the homepage all use CSS grid layouts. I spent a day figuring out how to get some text perfectly centered on the page. Here is some of the code I used to build the header.

Here is the HTML:

<div class="banner container">
    <div class="banner logo">
        QK
    </div>
    <div class="banner links ralign">
        <a class= "banner links button" href="index.php">Home</a>
        <a class= "banner links button" href="about.php">About</a>
        <a class= "banner links button" href="volunteer.php">Volunteer</a>
        <a class= "banner links button" href="contact.php">Contact Us</a>
    </div>
</div>
Code language: HTML, XML (xml)

Here is the CSS for the classes used:

/*Define a grid container for the banner*/
.banner.container {
    /*Set up grid*/
    display: grid;
    grid-template-columns: [left_col] auto [middle_col] auto [right_col] auto;
    grid-template-rows: [top_row] 33% [middle_row] 33% [bottom_row] 33%;
    /*Dimensions*/
    height: 150px;
    width: auto;
    /*Background*/
    background-color: cadetblue;
    background-image: none;
    background-blend-mode: multiply;
    /*Font*/
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

/*Grid Item definition for Link in Header Banner*/
.banner.links.ralign {
    /*Set up grid item*/
    grid-column-start: right_col;
    grid-column-end: span 1;
    grid-row-start: middle_row;
    grid-row-end: span 1;
    /*Alignment*/
    text-align: right;
    justify-self: end;
    align-self: center;
    /*Font*/
    font-size: x-large;
    /*Spacing*/
    margin: 10px;
}

/*Grid Item to hold the logo*/
.banner.logo {
    /*Set up grid item*/
    grid-column: left_col;
    grid-row: top_row / bottom_row;
    /*Alignment*/
    align-self: stretch;
    /*Fonts*/
    font-size: 100;
    /*padding*/
    margin: 10px;
}

/*Define style for banner links*/
.banner.links.button {
    /*Font*/
    color: white;
    /*Spacing*/
    padding: 10px;
    margin: 10px;
    /*size*/
    width:auto;
    height: auto;
    /*Border*/
    border-style: solid !important;
    border-width: 1px;
    border-color: white;
}
Code language: CSS (css)

Most of the front end code is tweaking stuff to get the appearance I wanted. If you look at each of the CSS classes above there is a lot of setting font size and color, or it is aligning content. I spent way too much time tweaking the CSS to get it to look the way it does now.

I highlighted the lines above where I created the CSS grid elements. The basis of CSS grid is to create a container which has some number of columns and rows. Then you can create items that can take up specific rows and columns.

Since the code for the header and footer will be repeated on every page, I wrote a PHP function that runs when the page is loaded. This way I can make change in the PHP script and it is reflected on every page of the website. Here is the PHP script for drawing the header.

<?php
//Use to draw the standard page banner
function draw_banner() {
    echo '
    <div class="banner container">
        <div class="banner logo">
            QK
        </div>
        <div class="banner links ralign">
            <a class= "banner links button" href="index.php">Home</a>
            <a class= "banner links button" href="about.php">About</a>
            <a class= "banner links button" href="volunteer.php">Volunteer</a>
            <a class= "banner links button" href="contact.php">Contact Us</a>
        </div>
    </div>';
}
?>
Code language: PHP (php)

And here is the code I used on all of the pages. 

<?php
include "scripts/draw_page_elements.php";

draw_banner();
?>
Code language: PHP (php)

I like this kind of coding because it makes it easier to maintain the code.

After building out the way the site looks, I then built the forms. I started with the contact form before building the volunteer sign up form which will use much of the same code. I included JavaScript form validation to make sure that the user could only submit data of an appropriate format. For example the email field checks to see if the text entered has appropriate email syntax. If I wanted to take it further I could write a script that tests if the email is real. For this website however, that would have minimal effect on the user experience.

Adding the Backend

Building backend code is my bread and butter. All I have to do is take data, validate, transform, analyze, or store it. For this website I have data being collected through forms which has been validated on the client end. With the way I wrote the form validation, users should not be able to submit erroneous information that breaks the database. I feel safe in assuming I do not need to include another layer of checks. I feel that it would only complicate the code and user experience to include additional checks on the server.

With all that in mind I can start writing code to take data from the front end and store it in a database. The first step is to connect to the database. I knew that I would be writing multiple forms that need to connect to the database, so I wrote a function to make reusing the code easier. 

<?php
//Connect to contact table
function primary_db_connect() {
    //Login credentials
    include "sql_cred.php";

    $DB_NAME = "epiz_*****_primary";

    //Connect user to database
    $connection = new mysqli($HOSTNAME, $USERNAME, $PASSWORD, $DB_NAME);

    //Check connection is good
    if($connection -> connect_error) {
        die("Connection Failed: " . $connection->connect_error);
    }

    return $connection;
}
?>
Code language: PHP (php)

After the user successfully presses the submit button on the form, it will send them to a landing page which runs a script to submit the data to the database. Here is what that code looks like for the contact form. 

<?php
//Connect to database
include "scripts/db_connections.php";

$connection = primary_db_connect();

//Gather Data from HTML form
$name = $_REQUEST["name"];
$email = $_REQUEST["email"];
$subject = $_REQUEST["subject"];
$message = $_REQUEST["message"];

//Insert data
$sql_insert_query = "INSERT INTO contacts (name, email, subject, message) 
VALUES ('".$name."', '".$email."', '".$subject."', '".$message."')";

if($connection->query($sql_insert_query) == TRUE) {
    echo "<p>Thank you for reaching out, we will respond via email as soon as we can.</p>";
} else {
    echo "Error: " . $sql_insert_query . "<br>" . $connection->error;
}

//Close the connection
$connection->close();
?>
Code language: PHP (php)

It may look like a lot is going on here, but it is not. I create a connection to the database. Then I grab the data from the form submission, which is then inserted into the MySQL database. I then check if the query was successful. If the query is successful, the user will be given a confirmation message, if it failed, an error message is displayed instead. Finally I close the connection to the database because I no longer need it and open connections are a security risk.

Reflections

To me, building a website feels strange. You kind of follow the same process like other software development, but it comes with its own oddities. For example you can spend a lot of time tweaking visual aspects that never seem to quite behave in ways that you would expect. I feel that I should have spent more time polishing the front end. The website does not look too bad, but it does not feel nearly as complete as professionally made websites.

I also should have taken more time to create custom assets for the website. A custom logo and cartoon like pictures would really help make some of the pages feel more complete. In a real world environment, I would have brought on who ever manages the branding for the organization and used as many of their assets as possible. If I had given myself more time I would also have liked to make some animations to make the webpages feel more alive. Maybe I will do that for the next website I build.

Links

QK Reading Buddies Website: http://qkreadingbuddies.epizy.com/index.php

GitHub: https://github.com/SimonLiles/QKReadingBuddies.net

Tags:
Last updated on July 24, 2021