Codular

HomeWriters RSS

Create a Custom Build Tool

Introduction

If you've looked at using Animate.css, you'll notice that there's a custom build option, allowing you to select the specific parts that you want to download, and ignore/omit the parts that you don't. I wrote a very simple, and rushed custom builder for Dan to fulfill the gap, below is a simple guide about how you can write your own custom build tool, and let people select what sections to download.

The Parts

There are three main components to the custom build tool:

  1. File structure: We will put all of the files in a required folder, and name them appropriately.
  2. HTML Page: This is going to be a simple list of check boxes that will post to a PHP script.
  3. PHP Script: This will take the checkboxes from our HTML page, load the required files, and then output them all toegether.

We'll be focusing on building a custom build tool for different JS files, then offering them for download in a simple complete.js file, for testing & development purposes, these files can contain anything.

The Files

I've simply created 5 different files which each define a different method with a set name. They will all reside within a directory called files, nothing complex:

getById.js

function getById(id){
    return document.getElementById(id);
}

getByName.js

function getByName(name){
    return document.getElementByName(name);
}

write.js

function write(string){
    document.write(string);
}

hide.js

function hide(item){
    item.style.display = 'none';
}

show.js

function show(item){
    item.style.display = 'block';
}

These are all then saved in the same directory, ensuring that they have the names above, we can now move on to the HTML page.

The HTML

This isn't going to be anything complex, we're going to give each checkbox a value that is the same as the name of the file (minus the extension). Ensure that they all have the same name attribute, for example:

<input type='checkbox' name='file[]' value='getById' id='getById'><label for='getById'>getById()</label>

We'll repeat this for each of the files that we have above. If you're a little lazier, you could write some PHP code that would dynamically build this page, meaning when you added a new module/section for building it would automatically be added to the HTML page list.

The PHP

We'll simply call this script build.php, with the process of the script following the below idea:

Check files are provided

Firstly, we want to check the $_POST array, to ensure that there is a file item sent, which should be an array with at least 1 item:

if(!isset($_POST['file']) || !is_array($_POST['file']) || count($_POST['file']) == 0){
    die('No files to build specified');
}

Check the files exist

We'll want to loop through each file, append .js to the file, and check that it exists, but we will want to ensure that we remove any characters that aren't alphanumeric - as they are just file names without extensions. This will also stop people trying to alter the post parameters on the script to download your core files etc. We'll be using regular expressions for this, take a read of our tutorial if you're new to them.

$files = $_POST['file'];
foreach($files as $f){
    $f = preg_replace("/[^0-9a-z]/i", "", $f);
    if(!file_exists('files/' . $f . '.js')){
        die('Oh no, you\'re trying to build a file that does not exist.');
    }
}

Read the contents of each file.

Within that loop, we'll be looking to use a simple PHP method called file_get_contents(), this does what it says on the tin - it returns the contents of a file, in our case it'll be the JS contents. We'll simply append this to a variable called $output (which should be defined outside the loop).

$output .= @file_get_contents('files/' . $f . '.js');

Output file to the browser for download

This is the part of the script that makes the user see the download, it's actually a lot less complex than you could possibly imagine. We set some headers, and then echo out the string that we've built up - $output

The headers that we'll set are first to tell the browser that it is to handle the page as a download, and the second is to tell the browser that we're serving them a javascript file.

$filename = 'complete.js';
header('Content-disposition: attachment; filename=' . $filename);
header('Content-type: application/javascript');

Finally, just add the line echo $output; and that's the whole thing done, throw it all together and it should all work!

Extra Thoughts

A few ideas on how you can expand the above tutorial to make it more advanced:

That's it

There's not a huge amount to it, but to the frontend user it can be a really very powerful option to be able to select the modules that they want, and the ability for them to choose how they want things added in. This will work with any thing that is composed of text files mostly, so CSS, JS, PHP, HTML, SQL or even your Sass/LESS files if that's your thing.

So, next time you're building something for someone to download, why not take a look and see if you should give them the ability to download it in a customised format much like Animate.css is.

Tag: PHP