WEBOGRAPHY

My Sites

Welcome to My Webography Page!

“Webography” is a term I use to describe the fullstack development work that I’ve done. From backend development, creating servers, configuring NGINX configs, node.js, etc, to front-end code, writing javascript, search engine optimizations, etc, it pretty much embodies the life cycle of the online experience. If you have any question or would like some web work done, please visit my contact page and send me your inquiries.

Some Code

Below is some of my custom code from way back in 2014. I’ve came a long way since then, however I have used code like this to help me achieve a more dynamic, user friendly experience for the end user.
The highlighted areas signifies the ‘cool’ or ‘important’ magic that makes this code stand out and function with ease and flexibility.

Ajax Form Search

This script provides an immediate response as a list of files in a directory that is associated with a profile in a database. When you start typing it sends an ajax call to a php script that searches a folder, queries a database, and then sends back the files/folders that match the search query, key by key.

There is also the clear function that queries the directory when someone clicks an element with the event handler that calls clearSearch().

/******SEARCH ******/
$(‘#search’).keyup(function(){
value = $(this).val();
if(value == ”){
$(‘#clearSearch’).removeClass(‘csX’).addClass(‘csA’);
}else{
$(‘#clearSearch’).removeClass(‘csA’).addClass(‘csX’);
}
data = $(this).serialize();

$.post(‘./includes/search.php’, data, function(data){
returnDiv = JSON.parse(data);
$(‘div.art-vmenublockcontent’).html(returnDiv.dir);
welcomeMessage();
});
});
function clearSearch(){
$(‘#clearSearch’).removeClass(‘csX’).addClass(‘csA’);
$(‘#search’).val(”);
data = ‘search=’
$.post(‘./includes/search.php’, data, function(data){
returnDiv = JSON.parse(data);
$(‘div.art-vmenublockcontent’).html(returnDiv.dir);
welcomeMessage();
});
};

The PHP and MYSQL:

<?php
include ‘dataBase.php';
$dir = scandir(‘../lpSites/’);
$array = array(‘.’, ‘..’);
$dir = array_diff($dir, $array);
$text = ‘<ul class=”art-vmenu”>';
$i = 0;
foreach($dir as $list){
$string = stripos($list, $_POST[‘search’]);
if( $string !== false || $_POST[‘search’] == ”){
$i++;
$query = ‘SELECT * FROM profile WHERE domainName = “‘.$list.'”‘;
$rq = mysql_query($query) or die(‘No Domain Name Category ‘.mysql_error());

if( mysql_fetch_assoc($rq) ){
$text .= ‘<li><a onclick=”domainClick(); pullInfo(\”.$list.’\’)”>’.$list.'<span class=”yesProf”><span></a></li>';
}else {
$text .= ‘<li><a onclick=”addMessage(\”.$list.’\’);”>’.$list.'<span class=”noProf”></span></a></li>';
}
};
};
$text .= ‘</ul>';
if( $i > 0 ){
$return[‘dir’] = $text;
}else{
$return[‘dir’] = ‘<p style=”text-align:center;”>Sorry No Domains Exist With That Search</p>';
}
echo json_encode($return);
?>

Dynamic Form Option

This is a simple jQuery script I wrote to hide and show more options and change the redirection after the form is submitted all based off of what the user selects in certian select boxes.

jQuery(function($){
//select box for wholesale type, text field when other is selected.
$(‘.otherType’).hide();
$(‘#selType’).change(function() {
var selected = $(this).val();
if(selected == ‘Other’){
$(‘.otherType’).show();
$(‘#selType’).removeAttr(‘name’);
$(‘input.otherType’).attr(‘name’, ‘Type_Subset__c’);
}
else{
$(‘.otherType’).hide();
$(‘#selType’).attr(‘name’, ‘Type_Subset__c’);
$(‘input.otherType’).removeAttr(‘name’);
}
if(selected == ‘Online Retailer’){
$(‘input[name=”retUrl”]’).attr(‘value’, ‘/wa-thank-you/’);
}else{
$(‘input[name=”retUrl”]’).attr(‘value’, ‘/wa-thank-you/’);
}
})
});

The HTML:

<form name=”BUCART” class=”BUCART”>
<div>
<!– content –>
<div class=”inputField”>
<label for=”first_name”>First Name</label>
<input class=”required” id=”first_name” type=”text” name=”first_name”>
</div>

<div class=”inputField”>
<label for=”last_name”>Last Name</label>
<input class=”required” id=”last_name” type=”text” name=”last_name”>
</div>

<div class=”inputField”>
<label for=”company”>Company</label>
<input class=”required” id=”company” type=”text” name=”company”>
</div>

<div class=”inputField”>
<label for=”email”>Email</label>
<input class=”required” id=”email” type=”email” name=”email”>
</div>

<div class=”inputField”>
<label for=”phone”>Phone</label>
<input class=”required” id=”phone” type=”phone” name=”phone”>
</div>
<div class=”inputField”>
<label for=”wholesaletype”>Wholesaler Type</label>
<select id=”selType” name=”Type_Subset__c” class=”valid”>
<option value=”Dispensary”>Dispensary</option>
<option value=”Doctor”>Doctor</option>
<option value=”Natural Product Store”>Natural Product Store</option>
<option value=”Online Retailer”>Online Retailer</option>
<option value=”Salon/Spa”>Salon/Spa</option>
<option value=”VAP/Head/Smoke Shop”>VAP/Head/Smoke Shop</option>
<option value=”Other”>Other</option>
</select>
</div>
<div class=”inputField otherType”>
<label>Other:</label> <input class=”otherType” type=”text” >
</div>

<div class=”inputField”>
<button type=”submit”>Submit</button>
</div>
</div>
</form>

Ajax Example

This is an example of my custom javascript code that performs an Ajax call to sendMail.php.
sendMail.php returns a php Array incoded in json, then I parse through it to convert it into a javascript Object.
With the data constructed as a javascript object it makes it super easy to do whatever I want with the data.

This example uses a form to send an email

jQuery(document).ready(function($){

$(‘form input[type=”submit”]’).live(‘click’, function(e){
e.preventDefault();
var f = $(this).parents(‘form’);
var formData = new FormData($(f)[0]);

$.ajax({
type: ‘POST’,
processData: false,
contentType: false,
url: ‘sendMail.php’,
data: formData,
success: function(data){
retData = JSON.parse(data);
console.log(retData); //log the object in the console.
if(retData.val == true){
console.log(‘COMPLETE’);
//Perform something with the data if the sendMail is returned true
}else{
console.log(‘NOT COMPLETE’);
//Perform something with the data if the sendMail is returned falsed
}
},
async: true
});
});

Using PHPMAILER this sendMail.php script sends an email:

<?php

$return[‘post’] = $_POST

$keys = array_keys($_POST);
$params = ”;
$bodyText = ”;
foreach($keys as $key){
$params .= $key.’=’.$_POST[$key].’&';
$bodyText .= ‘<p>’.$key.': <b>’.$_POST[$key].'</b></p>';
}


// IF UPLOADING A document SAVE IT AND THE IT’S PATH
if($_FILES[‘document’][‘name’] != ”){
$return[‘files’] = true;
$tmp_name = $_FILES[“document”][“tmp_name”];
$mimeType = $_FILES[“document”][“type”];
$name = $_FILES[“document”][“name”];
move_uploaded_file($tmp_name, $_SERVER[“DOCUMENT_ROOT”].’/imageFolder/’.$name);

$picturePath = $_SERVER[“DOCUMENT_ROOT”].’/imageFolder/’.$name;

$return[‘picturePath’] = $picturePath;
}else{
$return[‘files’] = false;
}

require(‘class.phpmailer.php’);
$mail = new PHPMailer();
$mail->IsSMTP(); // Set mailer to use SMTP
$mail->Host = ‘smtp.jeffreybue.com'; // Specify main and backup server
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = ‘bue@jeffreybue.com'; // SMTP username
$mail->Password = ‘password'; // SMTP password
$mail->SMTPSecure = ‘tls'; // Enable encryption, ‘ssl’ also accepted

$mail->From = ‘bue@jeffreybue.com';
$mail->FromName = ‘Contact';
$mail->AddAddress(‘jeffreyjbue@gmail.com’, ‘Jeff Bue’); // Add a recipient
$mail->AddAddress(‘phonenumber@vtext.com’, ‘My Phone’); // Add a recipient
$mail->AddReplyTo(‘bue@jeffreybue.com’, ‘Information’);

$mail->WordWrap = 50; // Set word wrap to 50 characters
$mail->IsHTML(true); // Set email format to HTML

$mail->AddAttachment($picturePath, $name, ‘base64′, $mimeType);

$mail->Subject = ‘Contact From JeffreyBue.com';
$mail->Body = $bodyText;
$mail->AltBody = $params;

if($mail->Send()) {
$return[‘mailer’] = ‘Email Sent';
$return[‘val’] = true;
}else{
$return[‘mailer’] = $mail->ErrorInfo;
$return[‘val’] = false;
}

echo json_encode($return);
?>
X

RESUME