Teochew Thunder: Web Tutorial: Nike Meme Generator

In 2016, quarterback Colin Kaepernick made waves when he opted to take a knee while the United States national anthem was being played before the start of NFL games. There were some who felt this was disrespectful, though, coming from a country where you can literally wear the flag next to your crotch, I'm really not seeing the problem.

Others saw it as a brave protest against racial injustice. I may be overly cynical here, but all I saw was an aging athlete trying his darnedest to stay relevant. Still... good-looking guy. Great shoulders. Build to die for. And the dramatic shots of him bravely enduring the jeers and abuse to "stand up for his beliefs" sure didn't hurt the narrative.

Fast forward to 2018, and Kaepernick has been made the new face of Nike, ostensibly because they were interested in his message. Methinks they were a wee bit more interested in milking the controversy surrounding Kaepernick and turning it into cash, but anyways. The first ad to be displayed was this.

Conservatives started losing their shit, but I'm not gonna go into that black hole of inanity. Suffice to say, a whole new wave of spoofed memes have been made off this. Brilliant, I say. Brilliant!

Therefore, today, I'll walk you through how to make your very own Nike Meme Generator!

What you'll need

This will be done in PHP (cue the groans from purist snobs. Bite me, dipshits.) and you'll need an Apache server to run your code. First, create a folder called uploads and put this picture of Kaepernick in there. It'll be called, quite appropriately, colinkaepernick.jpg.

Then create index.php in the main folder. And place this tiny white Nike swoosh in the main folder as well, and call it... nikelogo.png? It has a transparent background, and we're going to need that transparency.

You may want to refer to a previous web tutorial, The Asynchronous File Upload, also done in PHP. We'll be copying a fair bit of code from the repository.

Let's Begin!

This is the HTML we start with.

<!DOCTYPE html>
<html>
    <head>
        <title>Nike Meme Generator</title>

        <style>

        </style>
    </head>

    <body>

    </body>
</html>

In the body, we have three divs, ids pnlMessage, formContainer and memeContainer. pnlMessage is meant to provide user feedback (sucess or failure) while formContainer will contain the controls. memeContainer will contain the resulting meme!

<!DOCTYPE html>
<html>
    <head>
        <title>Nike Meme Generator</title>

        <style>

        </style>
    </head>

    <body>
                <div id="pnlMessage"></div>

                <div id="formContainer">

                </div>

                <div id="memeContainer">

                </div>
    </body>
</html>

Got all that? Good. Now here's some styling.

pnlMessage will take up the top. Its text will be red, it will take up the entire screen's width, and have a height of 50 pixels.

formContainer will have its width, but not height, specified. I've given it and memeContainer widths, paddings and margins, and the float property of left.

Not to mention a grey outline for all three divs so you can visualize what we're doing here.

memeContainer's width and height will be equal to each other, because it's square.

<!DOCTYPE html>
<html>
    <head>
        <title>Nike Meme Generator</title>

        <style>
            #pnlMessage
            {
                width: 100%;
                height: 50px;
                color: #FF0000;
                outline: 1px solid #DDDDDD;
            }

            #formContainer
            {
                width: 400px;
                padding: 5px;
                margin: 5px;
                float: left;
                outline: 1px solid #DDDDDD;
            }

            #memeContainer
            {
                width: 500px;
                height: 500px;
                padding: 5px;
                margin: 5px;
                float: left;
                outline: 1px solid #DDDDDD;
            }
        </style>
    </head>

    <body>
                <div id="pnlMessage"></div>

                <div id="formContainer">

                </div>

                <div id="memeContainer">

                </div>
    </body>
</html>

Looking right? Now you have a good idea where everything is going to be.

Now do this so that only the outline remains for memeContainer. The other divs don't need it.

            #pnlMessage
            {
                width: 100%;
                height: 50px;
                color: #FF0000;
                outline: 0px solid #DDDDDD;
            }

            #formContainer
            {
                width: 400px;
                padding: 5px;
                margin: 5px;
                float: left;
                outline: 0px solid #DDDDDD;
            }

            #memeContainer
            {
                width: 500px;
                height: 500px;
                padding: 5px;
                margin: 5px;
                float: left;
                outline: 1px solid #DDDDDD;
            }

Now, within formContainer, we'll have a form tag. It points to this page itself, and the enctype attribute needs to be set to "multipart/form-data" because we're using the form to upload an image file. We have three text boxes (for the first and second line of the meme, and the Nike slogan), a file input object, and a submit button. And of course, their respective labels.

As per The Asynchronous File Upload web tutorial, there's also a hidden field, id hidUploadSize, that will be used to restrict the size of the file being uploaded. Not absolutely necessary, but I'm paranoid like that.

        <div id="formContainer">
            <form id="frmUpload" name="frmUpload" action="" method="POST" enctype="multipart/form-data">
                <label for="flUpload">File</label>
                <input type="file" name="flUpload" id="flUpload">
                <input type="hidden" name="hidUploadSize" id="hidUploadSize" value="50000000">
                <br /><br />
                   <label for="txtLine1">Line 1</label>
                <input name="txtLine1" id="txtLine1" maxlength="50" value="" />
                <br /><br />
                   <label for="txtLine2">Line 2</label>
                <input name="txtLine2" id="txtLine2" maxlength="50" value="" />
                <br /><br />
                <label for="txtSlogan">Slogan</label>
               <input name="txtSlogan" id="txtSlogan" maxlength="20" value="" />
               <br /><br />
               <input type="submit" name="btSubmit" id="btSubmit" value="Create your Meme!">
           </form>
        </div>

This is not a very pretty form, but it's functional and that's all we really need.

Now for some PHP!

At the top of the file, before the doctype declaration, declare a PHP block, then the following variables as defaults. So the default meme will use colinkaepernick.jpg and the default text will be "Believe in something. Even if it means sacrificing everything.", followed by the slogan "Just Do It.". By default, strmessage will be an empty string.

<?php
$filecode = "colinkaepernick";
$filetype = "jpg";
$line1 = "Believe in something.";
$line2 = "Even if it means sacrificing everything.";
$slogan = "Just Do It.";

$strmessage="";
?>

<!DOCTYPE html>

Next, we use an If block to check if a form has been submitted. If so, replace the current values of line1, line2 and slogan with the values POSTed from the form.

$filecode = "colinkaepernick";
$filetype = "jpg";
$line1 = "Believe in something.";
$line2 = "Even if it means sacrificing everything.";
$slogan = "Just Do It.";

$strmessage="";

if (isset($_POST["btSubmit"]))
{
    $line1 = $_POST["txtLine1"];
    $line2 = $_POST["txtLine2"];
    $slogan = $_POST["txtSlogan"];
}

Then check if there's been a file upload. If not, set an error message to strmessage. line1, line2 and slogan are optional.

If there has been an upload, verify that the size of the upload doesn't exceed the size you specified in hidUploadSize. I don't want to repeat myself; all these steps can be found in the earlier web tutorial.

The next step, however, is not in the previous web tutorial. Here, we check if the file uploaded is a valid image file. If not, we set the value of strmessage to an error message.

How, exactly, do we check if it's a valid image file? We certainly can't simply go by the extension. That's one of the easiest things to fake. So what we do, is use the getimagesize() function in PHP. Pass in the temporary filepath from the $_FILES["flUpload"] array. If the file is an image, the function should return you an array. Thus, if we use the is_array() function on the result and it comes back false, the uploaded file is not an image file.

And at this point, you upload the file.

if (isset($_POST["btSubmit"]))
{
    $line1 = $_POST["txtLine1"];
    $line2 = $_POST["txtLine2"];
    $slogan = $_POST["txtSlogan"];

    if (basename($_FILES["flUpload"]["name"]) != "")
    {
        $uploadsize = intval($_POST["hidUploadSize"]);
        $filetype = pathinfo($_FILES["flUpload"]["name"],PATHINFO_EXTENSION);
        $filetype = strtolower($filetype);

        if ($_FILES["flUpload"]["size"] > $uploadsize)
        {
                $strmessage = "Error was encountered while uploading file. File cannot exceed " . ($uploadsize/1000) . "kb";
        }
        else
        {
            if (!is_array(getimagesize($_FILES["flUpload"]["tmp_name"])))
            {
                $strmessage = "File type invalid";
            }
            else
            {
                $filecode=strtotime("now").rand();

                if (move_uploaded_file($_FILES["flUpload"]["tmp_name"], "uploads/" . $filecode . "." . $filetype))
                {
                   $strmessage = "File uploaded.";
                }
                else
                {
                       $strmessage = "Error was encountered while uploading file.";
                }
            }
        }
    }
    else
    {
        $strmessage="No file selected.";
    }
}

Alter the HTML to show the variable strmessage.

Try uploading invalid files, or files that are too big. In this example, I tried to upload a PDF.

And after that, let's add the default variables into the form. Just for the users' convenience.

            <form id="frmUpload" name="frmUpload" action="" method="POST" enctype="multipart/form-data">
                <label for="flUpload">File</label>
                <input type="file" name="flUpload" id="flUpload">
                <input type="hidden" name="hidUploadSize" id="hidUploadSize" value="50000000">
                <br /><br />
                   <label for="txtLine1">Line 1</label>
                <input name="txtLine1" id="txtLine1" maxlength="50" value="<?php echo $line1; ?>" />
                <br /><br />
                   <label for="txtLine2">Line 2</label>
                <input name="txtLine2" id="txtLine2" maxlength="50" value="<?php echo $line2; ?>" />
                <br /><br />
                <label for="txtSlogan">Slogan</label>
               <input name="txtSlogan" id="txtSlogan" maxlength="20" value="<?php echo $slogan; ?>" />
               <br /><br />
               <input type="submit" name="btSubmit" id="btSubmit" value="Create your Meme!">
           </form>

Let's modify the CSS a bit. The memeContainer div needs to have a background image specified, and in this case, we use colinkaepernick.jpg as a default (that's what filecode and filetype are set to). Make sure it covers the entire square by setting background-size to cover. Do whatever you want with the font, but I'd recommend white. The filter property is important here. It shows images in greyscale.

Oooh.

Now, for the text within the meme, I can't be arsed to create a new CSS class for this, so I'll just go with two paragraph tags, one of which is set in the middle of the box, and the other at the bottom. The first paragraph will display line1 and line2. The second paragraph will display the Nike swoosh and the string slogan.

There's your meme! Well, the default anyway.

Let's try something here... well now we have a Serena Williams meme! If you're wondering if I'm mocking her for her recent display at the US Open... yes, I really fucking am.

One last thing...

Let's add a bit of CSS so we can print. formContainer and pnlMessage will be totally invisible, while memeContainer will have the float property set to none, and then aligned center of the screen.

            #memeContainer
            {
                width: 500px;
                height: 500px;
                padding: 5px;
                margin: 5px;
                float: left;
                outline: 1px solid #DDDDDD;
                background: url(<?php echo "uploads/" . $filecode . "." . $filetype; ?>) center center no-repeat;
                background-size: cover;
                font-family: georgia;
                color: #FFFFFF;
                font-size: 25px;
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);
                text-align: center;
            }

            @media print
            {
                #formContainer, #pnlMessage
                {
                    display: none;
                }

                #memeContainer
                {
                    margin: 10% auto 0 auto;
                    float: none;
                }
            }

Do a Ctrl-P. Beautiful, isn't it.

Last words...

Well, I certainly enjoyed myself. Remember to sanitize your inputs (I didn't do it here because it's out of scope) to prevent a nasty XSS attack. And... have fun. Go crazy.

#justdoit
T___T

Teochew Thunder

Pages

Saturday 15 September 2018

Web Tutorial: Nike Meme Generator

What you'll need

Let's Begin!

Now for some PHP!

One last thing...

Last words...

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews