Captain's Log | Landing Pages
A "Landing Page" is the website that employees will utitlize to validate their credentials and then be fowarded to the "Personal Health Survey" as well as a page that will list all of the opportunites and locations to get their biometric data collected.
What you see below is a portion of the notes that were taken as part of working on and improving the interface. The "before" and "after" examples are featured above.
❶ code that parses the different elements of the date based on the "/" character and ensures that the date which has been entered is validate
❷ this particular example is geared for a DOB and an employee ID along with a last name. The first part of the code grabs the values from their respective input fields and ensures that the values are valid. If they are, they're sent on to the "api_nex.php" API. If not, the color of the border surrounding those input fields is changed to red.
❸ if the length of the "error" variable is greater than 0, that means some errors have been detected and an alert box is generated with the appropriate text.
❹ the form is triggered by the link with the "findPortalUser" id
❺ if the values the user has inputted are valid, the POST method is triggered
❻ if the form comes back with "We were unable..." the the "header_text" span is updated with new verbiage and the area within the "step_1" class is displayed. This will include the login fields.
❼ if the form comes back with a validated user, the login credentials are hidden ("step_1" class), the "header_text" is adjusted appropriately and the name of the validated user is displayed in the "window" div, which up to this point, has been hidden.
❽ handy way of ensuring a uniform way to input dates
❶ The link that's being presented to this API is api_nex.php?p=verify&displayLinks=portal'. This first piece of code is checking to see if anything is being posted and, if so, what kind of actions need to be triggered based on what's embedded within the URL. There is a "p" value as well as some other entities which we'll get to in a minute.
The "p" value opens up the case for "verify." That's the next step...
❷ "verifyUserImproved" is the SELECT that will query the appropriate tables to determine whether or not we're dealing with a valid user.
❶ using HEREDOC syntax, these will be the buttons that trigger the JQuery which will post info back to the same API, but this time it will engage the "d11" method
❷ dynamic method used to construct the SELECT statement. This will ulitmately be a PDO prepared statement based on the incoming elements that have been "transformed" to fit into the PDO dynamic
❸ replacing the JQuery elements embedded into the buttons that were created just a moment ago
❹ ternary IF statement used to establish a credible $usrID
❺ $survey_guid builds the encrypted URL that a user will click on when they've been validated and cleared to click on the link that
❻ updating the text in the "header_text" div at the top of the page
❼ this is the actual JQuery that will be dynamically appended to the page and will facilitate what happens when the user clicks on the "yes" button
❾ this is what happens when the user clicks on the "No" button. The div that contains the input fields will be shown, the div where the "yes" and "no" buttons were located will be hidden the user will be given the opportunity to try again.
❶ SELECT statement that will grab all of the scheduled health screening events associated with this user's employer
❷ if the above SELECT isn't empty, the text in the "html_text" div is updated and all of the scheduled events are listed as well as a link to their Personal Health Survey
❸ if there are no screening events, the text in the "html_text" div is updated and just the link to the Personal Health Survey is listed
Landing Page AJAX Form
This is the first piece - the actual form submission code that sends the login data to the API that will process it and send a response back...
<script>
❶ function isValidDate(dateString) {
if (!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString))
return false;
// Parse the date parts to integers
var parts = dateString.split("/");
var day = parseInt(parts[1], 10);
var month = parseInt(parts[0], 10);
var year = parseInt(parts[2], 10);
// Check the ranges of month and year
if (year < 1000 || year > 3000 || month == 0 || month > 12)
return false;
var monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
// Adjust for leap years
if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
monthLength[1] = 29;
// Check the range of the day
return day > 0 && day <= monthLength[month - 1];
};
❷ function validateForm() {
var dob = document.getElementById("usrDOB");
var usrEEID = document.getElementById("usrEEID");
var error = '';
if (!isValidDate(dob.value))
{
$('#usrDOB').css('border', 'solid 2px red').focus();
error = "Date of Birth must be in the format XX/XX/XXXX\n\r";
}
else
{
$('#usrDOB').css('border', '');
}
if(usrEEID.value.length<=0)
{
$('#usrEEID').css('border', 'solid 2px red').focus();
error = error.concat("Don't forget to enter your Employee ID!\n\r");
}
else
{
$('#usrEEID').css('border', '');
}
if(usrLN.value.length<=0)
{
$('#usrLN').css('border', 'solid 2px red').focus();
error = error.concat("Don't forget to enter your Last Name\n\r");
}
else
{
$('#usrLN').css('border', '');
}
❸ if (error.length > 0) {
alert(error);
return false;
}
return true;
}
$(document).ready( function() {
❹ $('#findPortalUser').click( function(event){
event.preventDefault();
❺ if (validateForm()) {
$("#verify_form").hide();
var out = {
'usrDOB' : $('#usrDOB').val(),
'usrEEID' : $('#usrEEID').val(),
'empID' : $('#empID').val()
};
$.post('api_nex.php?p=verify&displayLinks=surveyevents', out, function(data)
{
❻ if(data.indexOf("We were unable to match the information you provided")!==-1)
{
$('.step_1').show();
$('#header_text').html('We were unable to match the information you provided. Please try again.');
}
else
{
❼ $('.step_1').hide();
$('#header_text').html('Click on the "Yes" button if the name listed below is you.<br>Otherwise, click "No."');
$('#window').html(data);
}
});
}
});
❽ $("#usrDOB").mask("99/99/9999", {
placeholder : " "
});
});
</script>
API
The above AJAX code is submitting the inputted data to $.post('api_nex.php?p=verify&displayLinks=portal'.... The values within that URL will determine how the form values will be evaluated and routed.
The "verifyUserImproved" function is the most common function that the Landing Page user is going to be routed to with your "$out" variable being what's sent to the "window" div that was mentioned a moment ago.
One of the very first blocks of text that's stuffed into the $out variable is a form that has the name of the user along with two buttons; "Yes" and "No" to signify whether or not the name of the user that database has retrieved is accurate. That's what you're seeing here:
❶ if ($_SERVER['REQUEST_METHOD'] == "POST") {
$action = isset($_GET['p']) ? $_GET['p'] : '';
$displayLinks = isset($_GET['displayLinks']) ? $_GET['displayLinks'] : '';
$linkType = isset($_GET['linkType']) ? $_GET['linkType'] : '';
switch ($action) {
case 'verify':
❷ verifyUserImproved($_POST, $displayLinks, $linkType);
case 'events':
getEventsByEmployerId($_POST['DOB'], $_POST['EEID'], $_POST['SSN']);
break;
case 'd11':
d11($_POST);
break;
default:
verifyUser($_POST['DOB'], $_POST['EEID'], $_POST['Zip'], $_POST['SSN']);
}
}
verifyUserImproved
function verifyUserImproved(Array $params, $displayLinks, $linkType, $spanishAlert)
{
global $CN;
if (isset($params['empID'])) {
$params['empID'] = (int) $params['empID'];
}
if (isset($params['cpID'])) {
$params['cpID'] = (int) $params['cpID'];
}
if (isset($params['empPID'])){
$params['empPID'] = (int) $params['empPID'];
}
$returns = [
'portal',
'survey',
'events'
];
include ('custom_colors.php'); //dictates the color of the buttons
//this next piece is the two buttons that you'll present to your user that allows them to confim their identity
❶ $out= <<<OUT
<input type="hidden" name="usrID" id="usrID" value="{{usrID}}">
<input type="hidden" name="usrFN" id="usrFN" value="{{usrFN}}">
<input type="hidden" name="usrLN" id="usrLN" value="{{usrLN}}">
<input type="hidden" name="usrVerified" id="usrVerified" value="{{usrVerified}}">
<br><div style="display:inline-block; border:1px solid #cccccc; width:auto: height:35px; padding:10px; font-weight:bold;">{{usrFN}} {{usrLN}} | {{usrCity}} {{usrState}}, {{usrZip}}</div>
<br><br>
<div class="buttonWrapper"><input class="btnConfirmYes" type="button" name="verifyUseryes" id="verifyUseryes" value="Yes"></div>
<div class="buttonWrapper"><input class="btnConfirmNo" type="button" name="verifyUser" id="verifyUserno" value="No"></div><br><br>
</form>
OUT;
❷ //here you're bulding your SELECT statement
/*
if (isset($params['test'])) {
$testing = true;
unset($params['test']);
echo $out;
}
$where = '';
$values = [];
if (isset($params['cpID'])) {
$params['E.cpID'] = $params['cpID'];
unset($params['cpID']);
}
if (isset($params['empID'])) {
$params['E.empID'] = $params['empID'];
unset($params['empID']);
}
if (isset($params['empPID'])){
$params['E.empPID'] = (int) $params['empPID'];
unset($params['empPID']);
}
foreach ($params as $key => $val) {
if (end($params) != $val) {
if ($key == 'usrSSN' || $key == 'usrEEID') {
$where .= " $key LIKE ? AND ";
} else {
$where .= " $key = ? AND ";
}
} else {
if ($key == 'usrSSN' || $key == 'usrEEID') {
$where .= " $key LIKE ?";
} else {
$where .= " $key = ?";
}
}
if ($key == 'usrSSN' || $key == 'usrEEID') {
array_push($values, "%{$val}");
} else {
array_push($values, $val);
}
}
*/
try {
$sql = "SELECT
usrID
,E.empID
,usrEEID
,usrFN
,usrLN
,usrDOB
,usrCity
,usrState
,usrZip
,usrUsername
,usrPassword
FROM hraUsers U INNER JOIN Employers E on U.empID = E.empID INNER JOIN ChannelPartners CP on E.cpID = CP.cpID
INNER JOIN hraResponseHeaders RH on U.usrID = RH.usrID
where U.usrDOB=? and RH.rhCustField5=?"
$stmt = $CN->prepare($sql);
$stmt->execute($values);
$result = $stmt->fetch(PDO::FETCH_ASSOC);
//echo $sql;
} catch (PDOException $e) {
echo "There was an Error verifying this user. If this continue contact the helpdesk.";
}
❸ if (! empty($result)) {
$replace = [
'{{usrID}}',
'{{usrFN}}',
'{{usrLN}}',
'{{usrCity}}',
'{{usrState}}',
'{{usrZip}}',
'{{usrVerified}}'
];
$values = [
$result['usrID'],
$result['usrFN'],
$result['usrLN'],
$result['usrCity'],
$result['usrState'],
$result['usrZip'],
'true'
];
$out .= "<div id='extras' style='display: none'>";
❹ $usrID = in_array($result['empID'], $subSurveyGroupArray) ? $result['usrID'] : null;
$survey = findSurvey($result['empID'], $usrID);
❺ $survey_guid = //content removed in order to protect company's integrity/
//this next block of code is setting up how you're user is going to be routed depending on the variables embedded in the from URL that came from the Landing Page
if ($linkType == 'surveyevents') {
$result['usrID'] = encryptVals($result['usrID']);
$out .= <<<OUT
<script>
❻ $('#header_text').html('Click on the "Yes" button if the name listed below is you.<br>Otherwise, click "No."');
❼ $('#verifyUseryes').click(function($event){
//event.preventDefault();
$.post('api_nex.php?p=d11', {'ui':'{$result['usrID']}', 'ei':'{$result['empID']}'}, function(data){
$('#window').html(data);
});
});
❽ $('#verifyUserno').click(function(){
$('#blue_text').show();
$('.step_1').show();
$('.window').hide();
$('#header_text').html('Benefits eligible Flagler Hospital employees have access to a free and confidential employee health and wellness program.');
});
</script>
}
OUT;
}
else //the user wasn't validated
{
echo "<script>$('#header_text').html('<span style=\"color:red;\">We were unable to match the information you provided.<br>Please try again!</span><br><br>');$('#step_1').show();</script>";
}
}
d11
The last piece of the validation dynamic is at the "d11" method.
Going back to the URL that represented the page our login credentials were posted to, you have this:
$.post('api_nex.php?p=verify&displayLinks=surveyevents
The "surveyevents" portion of "verifyUserImproved" dynamically added this to the form:
$('#verifyUseryes').click(function($event){
//event.preventDefault();
$.post('api_nex.php?p=d11', {'ui':'{$result['usrID']}', 'ei':'{$result['empID']}'}, function(data){
$('#window').html(data);
});
});
So, now, "p" has a value of "d11," and that looks like this:
function d11($frmData)
{
include ('custom_colors.php');
$frmData['ui'] = // content removed for security reasons. Here any encrypted info is decrypted for the sake of processing
global $CN;
// ONE OFF needs FIXING USED for auto populating sub-survey groups
$oneOffEmpIDArray = [
6100,
7015,
7016,
5313
];
if($frmData['ui']=="")
{
$usrID=null;
}
else
{
$usrID=$frmData['ui'];
}
$survey = findSurvey($frmData['ei'], $usrID);
$survey_guid = // content removed for security reasons. This piece builds the encrypted URL the user will click on to access the Personal Health Survey
$sql = "SELECT E.empID, Ev.evEnableSignup, E.empName, X.evID, Ev.evName, C.cmpSubDomain
FROM Events_X_Employers X
INNER JOIN
Employers E
ON E.empID=X.empID
INNER JOIN
Events Ev
ON Ev.evID=X.evID
INNER JOIN
Components C
ON E.cmpID=C.cmpID
WHERE E.empID=?
AND Ev.evSignupCutoff>GETDATE()
AND Ev.evtID = 2";
$stmt = $CN->prepare($sql);
$stmt->execute(array(
$frmData['ei']
));
$es = $stmt->fetchAll(PDO::FETCH_ASSOC);
❷ if (! empty($es))
{
//Step Two
$out="<script>$('#header_text').html('Schedule your Screening Event and then proceed<br>to your Personal Health Survey.');</script>";
$out .="<div style=\"text-align:left; display:inline-block; width:100%;\"><br><b><span style='color: {$prettyColor}; font-weight:bold; font-size:10pt;'>Step Two: Select One of the Following Screening Events...</span><br><br>";
foreach ($es as $event) {
$guid = buildGUID(array(
'evID' => $event['evID'],
'empID' => ($event['empName'] == 'General Event Quicklink' ? null : $event['empID']),
'evEnableSignup' => $event['evEnableSignup'],
'ruEvent' => 'email-click',
'ruReferrer' => 'cpap',
'ruVerb' => 'register',
'ruObj' => 'event',
'usrID' => $frmData['ui']
));
$out .= "<a href='https://{$event['cmpSubDomain']}.personalhealthsurvey.net/event.php?$guid' target='_blank' style='font-weight:normal; font-size:10pt; color:{$prettyColor}'>{$event['evName']}</a><br>";
}
//Step Three
$out .= "<br><span style='color: {$prettyColor}; font-weight:bold; font-size:10pt;'>Step Three: Take Your Personal Health Survey</span>";
$out .= "<br><br><span style=\"color:{$prettyColor}; font-size:10pt; font-weight:normal;\">Click</span> <a href='https://www.personalhealthsurvey.net/login.php?{$survey_guid}' style=\"color: {$prettyColor};
font-weight:bold; font-size:10pt;\">here</a> <span style=\"color:#000000; font-size:10pt; font-weight:normal;\">to take your Personal Health Survey.</span></div>";
}
else
{
//you don't have any Screening Events for this EmpID
❸ $out="<script>$('#header_text').html('There are no Screening Events scheduled at this time.<br>Proceed to your Personal Health Survey.');</script>";
$out .="<div style=\"text-align:left; display:inline-block; width:100%;\"><br><b><span style='color: {$prettyColor}; font-weight:bold; font-size:10pt;'>Step Two: There are no Screening Events scheduled at this time...</span><br>";
$out .= "<br><span style='color: {$prettyColor}; font-weight:bold; font-size:10pt;'>Step Three: Take Your Personal Health Survey</span>";
$out .= "<br><br><span style=\"color:{$prettyColor}; font-size:10pt; font-weight:normal;\">Click</span> <a href='https://www.personalhealthsurvey.net/login.php?{$survey_guid}' style=\"color: {$prettyColor};
font-weight:bold; font-size:10pt;\">here</a> <span style=\"color:#000000; font-size:10pt; font-weight:normal;\">to take your Personal Health Survey.</span></div>";
}
echo $out;
}