Bee's Design

A freelance web development company I started when I was seventeen.

Background

My first exploration into web development started way back in 2010. I started developing an interest in coding when I was fifteen, and after three years of practice, I realized that I could work for small businesses and make a profit.

Bee's Design was born from this realization.

Requirements

I wanted a website that was simple and straight to the point, almost like an online business card. At this point, I had just learned about Bootstrap and was interested in making the website mobile-friendly as well.

I also wanted to add a contact form for the first time. I had recently learned PHP, but I had not learned any type of input sanitization or other things related to security on the server side.

Finally, I wanted to have a project page where you could click on a website and see a bigger image of it.

(you know, the good ol' noobie days.)

Implementation

After getting some inspiration from similar websites, I decided to go with a standard three column layout that showed the main services I provided.

This would then scale down to one column per service on mobile.

Home Page

Using Bootstrap I was able to create a homepage using the Jumbotron template and learned a lot about how Bootstrap's grid system worked, and how media queries tie into responsive designs.

Home Page
About Page

For the about page, I wanted to create my own layout, since I utilized the Jumbotron for my home page.

I decided to split the page up into two columns:

  1. A column that would take up 75% of the page, and go into detail about Bee's Design.
  2. A column that would take up 25% of the page, and talk about who I am.

The template would then scale down to a one column layout, similar to the home page for mobile devices and tablets. At this point, I was very happy with the final result and received many compliments on how it looked.

Home Page
Contact Page

The contact page was probably the hardest part of the project for me. I needed to learn how to sanitize input properly, and learn how to use the Google Map API to display a map of my business's general location.

To filter out spam, I needed to create a "bad-words" text file that PHP would go through and check if any field contained a word from that list. The first part of this function does exactly that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function processInput() {
  // Timestamp for later
  $timestamp = date('Y-m-d g:i:s A');

  // Create a boolean gate to prevent us from moving forward w/o checking
  $isInputOK = true;

  // Load English bad word dictionary
  $badwords = file("badwords-en", FILE_IGNORE_NEW_LINES);

  // Chars to remove from string
  $charsToRemove = array(" ", ",");

  // Check if any element in $_POST is inappropriate
  foreach ($_POST as $value) {
    foreach ($badwords as $word) {
      // Strip the chars ($charsToRemove) from the string ($value) and check if it matches a bad word ($word)
      if (strpos(str_replace($charsToRemove, '', $value), $word) !== false) {
        // We have a match
        $isInputOK = false;
        break 2; // break out of both loops to skip checking other words
      }
    }
  }
// ...
              

After looping through our fields, we will check to see if the $isInputOk flag was triggered, and if so it will add the request to a log file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// ...

// If input wasn't OK, error out. If it was, sent an email.
if (!$isInputOK) {
  // Bad words detected, throw an error!
  echo "<p>ERROR: The message was spam. This message was sent from:\n";
  echo "<ul>\n";
  echo "<li>Your IP: " . $_SERVER['REMOTE_ADDR'] . "</li>\n";
  echo "<li>Your ISP Info: " . gethostbyaddr($_SERVER['REMOTE_ADDR']) . "</li>\n";
  echo "<li>Browser Information: " . $_SERVER['HTTP_USER_AGENT'] . "</li>\n";
  echo "<li>Request Time: " . $timestamp . "</li>\n";
  echo "<li>Your Name, Email, and Message Content</li>\n";
  echo "</ul>\n";
  logMessage($isInputOK, $timestamp);
} else {
  // No bad words detected, proceed with mail operation
  $subject = "Message from a potential client!: " . $_POST['name'];
  mail("info@beesdesign.net",$subject,$_POST['message'],"From: {$_POST['email']}\n");
  logMessage($isInputOK, $timestamp);
}
}
            

Project Challenges

Since I wanted to make sure this project was perfect I took a lot of time learning about the mobile first development process for static websites. Some included things that I learned were:

  • Vendor Prefixes
  • Sanitizing User Input
  • Dealing with Cross-Site Scripting
  • Media Queries

Technologies Used

  • HTML5/CSS3
  • jQuery
  • PHP

Available Links