Crafting Websites, E-Commerce and Web Applications Since 2004

FIND OUT NOWarrow

We develop custom payment systems with

Payment Types

Construction Worker Skills Register (CWSR)

Project Overview

The Construction Workers Skills Register was an interesting and exciting web application project as it is the only one of its kind in the country. The system allows Construction Workers from every trade in the construction sector such as glazier, blocklayer, steel fitter, carpenter, concrete formworker, insulation installer, heating installer etc., register their Skills & documentation on a public register.

The web app system is broken down into 4 sections; Personal Details, Trading Details, Primary Skills & Additional Training/CPD.

  • Section One contained general details such as Name, Email, Address, Phone etc.

s_1

  • Section Two allowed the user to specify their occupation, whether they were self employed, or working for an employer etc. It also included various business details and places around the country where they would be willing to work.

s_2

  • Section Three allowed the user to upload a copy of their safe pass along with expiry date and safe pass number. The user could also upload an FES certificate, Membership of other Registration Schemes and Primary Education Details.

s_3

  • Section 4 allowed users to add any additional training they may have undertaken.

s_4

All of this information is stored on the database Register where it must be verified and approved by Administration before being displayed to the public. The public, be it, Employers, Construction Workers or otherwise could search a worker or employer by Name, Business Name, Occupation and location and view documents, skills and contact information registered for that user.

Logged in users also have their own profile where they can view/edit uploaded documents/information and and generate a pdf of their training record. A user can also remove themselves from the register using the profile visibility slider as shown below.

profile

mng_docs

Manage Documents Section which allows users to add more documents, View, Update & Delete previously uploaded documents

Where an uploaded document is subject to an expiry date, the registered user receives an email notifying them of the document due to expire 1 month in advance and 2 weeks in advance. This notification will include warning that if the relevant information is not updated, they will be removed from register on the date of expiry until their record is updated.

Any changes to their profile will need to be authorised/verified prior to publication on website

An administrator on the site can also log into the back end, view various types of users with various status’ such as expired, expiring, approved and awaiting approval as shown below.

backend_mng_wrkrs

An admin can then view users awaiting approval and view their documentation, download a copy of their training-record and if deemed OK, the user will then be approved for display on the register.

profile_bck_end

An Administrator view of Joe Bloggs Profile showing his personal info, training-records and a button allowing Admin download this information.

loc_occ_acc

Plugin which allows Admin add Locations, Occupations & Accredditing Bodies for each of the dropdowns in the Registration Form

Technical Details

The system was coded using various Programming Technologies such as Bootstrap, HTML5, CSS, PHP, JavaScript,JQuery & MySql

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web and so is our first choice for building websites efficiently and effectively. BootStrap forms covered all front end layouts in each of the sections. Sections 1,2 and 3 each had mandatory fields that must be filled out before proceeding. That is, leaving out a mandatory field in section 1 would prevent a user from going to section 2.

JQuery Chosen was our first choice first for Single and Multiple select boxes. Instead of needing to scroll down a long list of counties in Ireland to select places where you are willing to work or multiple occupations, Chosen was a stylish select which allowed the user to search for their choice making it quicker and easier.

Chosen_ss

JQuery Chosen Select

Chosen is a JQuery Plugin which can either be downloaded or retrieved using the following CDN:
https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css

Once downloaded, it’s as simple as placing the following in the Footer. The below code will target the HTML Select Element with an ID of locations_worker.

$("#locations_worker").chosen({
    no_results_text: "Oops, nothing found!"
});

JQuery was used to detect when the user wanted to proceed to the next section, after which, each mandatory field would be checked. For example;

$('#personal_details').each(function (index, elem) { //iterate through each field in section 1
    if ($(elem).val() == "") { //if theres a blank
        show_next = false; //set show next to false
        $(this).closest(".form-group").find("span.error").html("*Empty Field"); //add an error to span nearest to that field
}

The above code was used extensively throughout registration to check that all mandatory fields were not empty.

Furthermore, File formats also needed to be checked, only MSWORD, PDF, XLS, PPT were allowed. AJAX is useful because you can
easily perform a request to a server without needing the reload the page. For example;

var fes = jQuery("#fes_upload").val();
var sp = jQuery("#safe_pass").val();
jQuery.ajax({
    type: "post",
    async: false,
    url: ajaxurl,
    data: {
        action: "iwhq_file_check", fes: fes, safe_pass: sp
    },
    success: function (data) {
        console.log(data);
        if (data == 0) {
            show_next = false;
            file_check = 1;
        } else {
        }
    }
});

Above we are using an Action hook to hook into our own custom handler called iwhq_file_check. On the server side will contain the hook to execute whenever Action is set to iwhq_file_check as follows;

add_action('wp_ajax_iwhq_file_check', 'iwhq_file_check');
function iwhq_file_check()
{
$safe_pass = $_REQUEST['safe_pass']; //get filenames passed from AJAX
$fes = $_REQUEST['fes'];

$fes_ext = pathinfo($fes, PATHINFO_EXTENSION); //get file extensions, .GIF,.PDF etc
$sp_ext = pathinfo($safe_pass, PATHINFO_EXTENSION);

//Set up array of allowed formats
$allowed = array('gif', 'GIF', 'png', 'PNG', 'JPG', 'JPEG', 'jpg', 'jpeg', 'pdf', 'PDF', 'docx', 'DOCX', 'ppt', 'PPT', 'XLS', 'xls');

//set up array to hold extensions
$extensions = array();

//push extensions to extensions array
array_push($extensions, $fes_ext, $sp_ext);
$response = 1;

//loop through each extension, if extension is not in allowed extensions array, File is invalid, return 0
foreach ($extensions as $exts) {
    if ($exts) {
        if (!in_array($exts, $allowed)) {
            $response = 0;
        }
    }
}
 The above code was used throughout the site to ensure all file formats were correct before proceeding.
Once the form passed all field and file checks and was submitted, PHP functions such as move_uploaded_file was used to move files to their target directories while WordPress wpdb() custom insert statements were used to upload all other information to a table in the MySql Database.
wp_insert_user was used to create a new user in the database. After which login details were emailed to the user using wp_mail().

How Much Will My Website Cost?

Get a Quick Quote Now...

Get in touch to get a great website that works perfectly in all devices.

Please enter as much information as possible about your website requirements so that we can provide an accurate estimate.

Mobile Froendly Web Design