Spanjerbergmuziek.nl

Circular icon with two abstract cats

Photo of Joost Spanjerberg teaching a girl to play guitar.
My brother Joost asked me to redo his website. He and a designer created a nice looking pdf and it was up to me to create a site out of it!

The global idea was that it should be easy for people to see what Joost does, what he offers and how to get in touch with him. The latter was the most important one; Joost is a freelancer and so every potential customer counts. For this to work, I had to use something I never have before: PHP.

I just gotten through the basics of JavaScript, only to learn that PHP is something else entirely. You see, Joost wanted a form in which people can fill in their email and some text, like a question or a remark. Then this has to be send to the emailaddress of Joost. Pretty simple, right?

But there has to be a check to see if the potential client has filled in everything correctly. What if someone made a typo in their emailaddress? That could be dangerous!

Well, for someone who doesn't know anything about PHP, a challenge. But that didn't stop me!

 

First up was to set up the form:

 

<?php
$safeGet = "";
if (isset($_GET["v"])) { $safeGet = htmlspecialchars($_GET["v"]); }
if ($safeGet == "" || $safeGet == "false")    /* display the contact form */ {
if ($safeGet == "false") { echo "<strong><u>Vul alsjeblieft een bericht in.</u></strong>"; } } else                /* send the submitted data */ {
if($safeGet == "true") { echo "<strong>Je bericht is verstuurd!</strong>"; } else { echo "<strong>Er is iets fout gegaan! Vul het formulier alsjeblieft opnieuw in.</strong>"; }
} ?>

Not the hardest thing in the world. I'll be honest: I had to google everything about PHP and sending mail. So here is what happens in this piece of code:

  1. If there is a var named v, make sure the content of v is safe with the function htmlspecialchars().
  2. If safeGet is either empty of false (= form has not  been submitted or an input field has been skipped), the form will not be submitted and in case of false: extra message will be displayed.
  3. If safeGet is true, then display message that it has been sent!
  4. If neither is correct, then an error message will be displayed.

Ok, so what is "v" exactly?  For that we need the rest of the code:

 

<?php 
  if ($_POST) {   
  // Execute code (such as database updates) here.

    $emailone=$_REQUEST['emailone']; 
    $emailtwo=$_REQUEST['emailtwo']; 
    $message=$_REQUEST['message']; 

    if ($emailone == "" || $emailtwo == "" || $emailone != $emailtwo || $message == "") 
    {     
        header("Location: " . $_SERVER['PHP_SELF'] . "?v=false"); 
    } 
    else 
    { 
        $from="From: " . $emailone; $subject="Ik wil graag contact met je!"; 
        mail("mailadresvanjoost.com", $subject, $message . "\r\n" . $from, $from);    
        header("Location: " . $_SERVER['PHP_SELF'] . "?v=true"); 
    }
    // Redirect to this page.   
    exit();}
?>

The emailone, two and message tags are ID's of the input text fields in the form. So I first get those and store them inside a variable.

I then ask: "Is any of these variables empty?" and "Are email one and two NOT equal". If either question yields true, I set the variable v = false. Which means in the previous snippet that the form cannot be submitted.

If it is all false, then the form should be good to go! There is actually a PHP function called mail that you can call and pass on parameters such as subject, sender, receiver and so on. Pretty cool!

 

But what is that v? v = false or true? Well, it is a piece of text that gets appended after the site URL. So if you filled in the form succesfully, the URL will become: http://spanjerbergmuziek.nl/?v=true . This v is what could be a called an automatic global variable or superglobal variable. It is available everywhere throughout the script. And I simply set and check v at certain times to see whether or not the form is ready to be submitted.

So when I GET["v"], I ask: "Where and what is v?". v in my code is stored in variable safeGet. So safeGet could hold possibly 3 things: "", "?v=false", "?v=true". And v will be set in the latter piece of code when the code checks if the form is filled in correctly.

That's how I know when to send an email with the correct data. It has to pass a few checks before it will do anything.

Although PHP is still quite a mystery to me, I am glad I was able to create a working solution, to make sure emails always get the right data from customers.

 

There is also a smart part of JavaScript here: for scrolling to an element and making sure the HTML that users can input gets sanitized.

First of I use jQuery to handle the scrolling to the clicked element with the help of animate() function.  By giving certain elements in HTML an href="#nameOfElement" jQuery will find the element with $('a[href^="#"]').on('click', function(event) and .animate it.

The other part is validating the email address that the user can input. Since I want to check that both fields are equal, I decided to convert the input string to lowercase and see if they match.

However there needs to be a line of defense against people who would try and break the form. To battle this, I sanitize the HTML. Sanitizing means getting rid of special characters and, in my case, replacing them with their unicode characters. That way you can protect the website against malicious attacks.

 

  var sanitizedEmailOne = escapeHtml(emailOneInputLowerCase);
  var sanitizedEmailTwo = escapeHtml(emailTwoInputLowerCase);

var entityMap =
{
  "&": "&",
  "<": "<",
  ">": ">",
  '"': '"',
  "'": ''',
  "/": '/'
};

function escapeHtml(string)
{
  return String(string).replace(/[&<>"'\/]/g, function (s) {
    return entityMap[s];
  });

 

The lowercase string is going through a regex and replaces the characters you see in entityMap with their respective unicode. That way the website is a little safer.