Archive for the ‘HTML’ Category

jQuery .hover change div background-position example

Wednesday, November 16th, 2011

example for reference:

$(“#formButtonSubmit“).hover(function(){
$(this).css({
backgroundPosition: ’0px 0px’
});
}, function(){
$(this).css({
backgroundPosition: ’0px 30px’
});
});

Secure HTML form example using PHP htmlentities, passing a token PHP, AJAX submission via jQuery

Wednesday, September 21st, 2011

<? php
// form page (index.php): initialize a session so that we can set a unique, random, encrypted value to a user session
session_start();
$token = md5(uniqid(rand(), true));
$_SESSION['token'] = $token;
? >
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/jquery.validation.js” type=”text/javascript”></script>
<script src=”js/registerSubmit.js” type=”text/javascript”></script>
</head>
<body>
<!– The Form –>
<form id=”topForm” name=”topForm” method=”post”>
<input type=”hidden” name=”token” id=”token” value=”<? php echo $token; ? >” />
<input name=”emailAddress” id=”emailAddress” value=”Email address” onclick=”if( this.value == ‘Email address’ ){ $(this).val(”); }” onblur=”if( this.value == ”){ $(this).val(‘Email address’); }” />
</form>
</body>
</html>

// The jquery.validation.js class uses a regular expression to stop the process if the email entered isn’t acceptable

;(function($) {
$.validation = {};
$.extend( $.validation, {
email:function(email) {
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if ( filter.test(email) ) {
return true;
}
return false;
}
});
})(jQuery);

// The registerSubmit.js submits the entered email via AJAX, returning a success or failure message, to our contactSubmit.php script, which handles the submission of the new email to a database

$(document).ready(function() {

$(“#reg-button”).click(function(){
$(“#topForm”).submit();
});

$(“#topForm”).submit(function(event) {
event.preventDefault();
var $form = $( this ),
emailAddress = $form.find( ‘input[name="emailAddress"]‘ ).val(),
token = $form.find( ‘input[name="token"]‘ ).val(),
formaction = $form.attr( ‘action’ );

if($.validation.email(emailAddress)){
$( “#reg-description” ).html (“submitting…”);
$.ajax({
type: “POST”,
url: “contactSubmit.php”,
data: “firstName=” + firstName + “&lastName=” + lastName + “&emailAddress=” + emailAddress + “&token=” + token,
success: function(){
$( “#reg-description” ).html( “Thank you. You have been registered.” );
},
});
}
else{
$( “#emailAddress” ).val (“Please enter a valid email address”);
}
});
});

// contactSubmit.php:  receive the email, check the token, clean the data, pass to a database layer API

<? php
session_start();

set_include_path(‘DBlayerClass’);
require_once(‘EmailContact.php’);

if (isset($_SESSION['token']) && $_POST['token'] == $_SESSION['token']){
if(isset($_POST['emailAddress'])){
$emailAddress = htmlentities($_POST['emailAddress']);
} else { $emailAddress = ”; }

$contact = new EmailContact($emailAddress)

try {
$contact->save();
} catch (Exception $e) {
; // do something
}
//$retrieve = new EmailContact($emailAddress);
//$retrieve->load();
//print_r($retrieve);
//}
? >

Bronto Direct Import API import .csv file (upload) via HTML form post or via PHP CURL with code examples

Tuesday, August 23rd, 2011

We are building a Cassandra based system (of record) to capture emails so that we can handle 100k users converging on an online event as quickly as possible.  Rather than relying on our third party email marketing vendor, Bronto, to handle the volume we could possibly experience, and risk possibly failing (as others doing the same thing recently have done…cough cough….Oprah and Eckhart Tolle), we’ll build our own system that can be tested correctly, and thus handle the volume, and then we’ll dump said new emails in reasonably sized files out to Bronto, who will then send out confirmation emails for us…

This post covers the script that will take file exports from Cassandra (sorry, no Cassandra in this one…), and Post them to Bronto.  Below is an example that uses a standard HTML form Post, for understanding and comprehensiveness, and an example that uses CURL (which easily allows this process to happen as part of an ordinary CRON job).

First we have to set up, and get some connection values, from Bronto:

  • Log into Bronto
  • From the top menu select Home->Settings
  • select Data Exchange
  • scroll to the bottom to Direct Import and grab the following connection values:
    • URL: http://app.bronto.com/mail/subscriber_upload/index/
    • site_id: YOUR_SITE_ID
    • user_id: YOUR_USER_ID
    • key: YOUR_KEY
Further reference, Bronto support docs are here:
https://app.bronto.com/mail/help/help_view/?k=mail:home:api_tracking:tracking_direct_import
 

Next let’s look at what this Post might look like as your common HTML form:

<form method=”post” action=”http://app.bronto.com/mail/subscriber_upload/index/” enctype=”multipart/form-data”>
<input type=”text” name=”source” value=”Test Contacts” />
<input type=”text” name=”format” value=”csv” />
<input type=”file” name=”filename” value=”C:\xampp\htdocs\YOUSITEFOLDERPATH\batch.csv” />
<input type=”text” name=”site_id” value=”YOUR_SITE_ID” />
<input type=”text” name=”user_id” value=”YOUR_USER_ID” />
<input type=”text” name=”key” value=”YOUR_KEY” />
<input type=”submit” name=”submit” value=”submit” />
</form>

Next let’s look at what this Post might look like in a PHP script using CURL:

<? php
$fields = array(
source‘=>”Test contacts“,
format‘=>csv,
filename‘=>’@‘.’C:\xampp\htdocs\YOURSITEFOLDERPATH\batch.csv‘,
site_id‘=>YOUR_SITE_ID,
user_id‘=>YOUR_USER_ID,
key‘=>’YOUR_KEY‘,
);

/* The key here is the ‘@’ above, which tells CURLOPT_POSTFIELDS to UPLOAD that file, parenthesis critical! */

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, ‘http://app.bronto.com/mail/subscriber_upload/index/‘);
curl_setopt($ch, CURLOPT_POST, count($fields));
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);
$result = curl_exec($ch);
curl_close($ch);

var_dump($result);
? >

Last but not least, make (or in our case receive from Cassandra export dump) the .csv file to be Posted.
First column, Email, 2nd through n filled with email addresses, save it as .csv comma delineated.
Yes, it’s actually that simple.
I hope this helps somebody.

Create a php page with a form that searches (curls) two separate WordPress applications

Friday, July 29th, 2011

We have many installations where I work, some of them newer, some older, some severely whacked at by coders, some pretty much default installations.

Anyhow, now they want a page from which a visitor could enter a search term, click submit, and get results from all of the separate applications!

Here is my solution:

The new page has your basic self submitting form:

<form action=”" method=”post”>
<label for=”search”>Search:</label>
<input name=”s” type=”text” value=”"  />
<input type=”submit” />
</form>

Then, of course, it grabs what has been submitted:

<?php

/**
* Get Search parameters
*/
$search = $_POST['s'];
$search = str_replace(” “,”%20″,$search);
echo $search;

?>

This checks to ensure that the user didn’t submit nothing (as WordPress would give us every post as currently coded…! ick).  This would also be a great place to guard against injection attacks (or in the last step of course), to filter what may be searched for, etc., but I’ll leave those concerns for another discussion:

<?php
/**
* If desired search is NOT empty, search, otherwise don’t
*/
if(($search != ”) && ($search != null) && (!empty($search)) )
{
?>

Now we curl in the results from each installation:

<?php
/**
* Get Search results from WP app 1
*/
$sub_req_url = “http://YOURAPP1URLHERE/searchpage.php?s=” . $search;
$ch = curl_init($sub_req_url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$podcast_return = curl_exec($ch);
curl_close($ch);
echo $podcast_return;

/**
* End
*/
?>

<?php
/**
* Get Search results from WP app 2
*/
$sub_req_url = “http://YOURAPP2URLHERE/searchpage.php?s=” . $search;
$ch = curl_init($sub_req_url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$podcast_return = curl_exec($ch);
curl_close($ch);
echo $podcast_return;

/**
* End
*/
?>

Now let’s close our IF block, and maybe provide ELSE if we want to…

<?php
/**
* close if empty block
*/
}
else
{
}
?>

Ok, that’s the end of our new page, again, I’ll leave formatting of the results and the rest of the page to another discussion.  Now let’s make the above mentioned search pages “searchpage.php” (make one for EACH APP, lives in the ROOT of EACH WP installation that we’re searching!):

<?php
/**
* WordPress App 1 Post Results Pull-In
*/
define(‘WP_USE_THEMES‘, true);
include(‘wp-load.php’ );
$query = new WP_Query(‘s=’ . $_GET['s']);
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>

/* Again, how you choose to skin the results could be implemented here, but I’ll leave that up to you… */

<div id=”post-<?php the_ID(); ?>“>
<h2><?php the_title(); ?></h2>
<div>
<?php the_content(‘<p>Read the rest of this page &raquo;</p>‘); ?>
<?php wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>‘, ‘next_or_number’ => ‘number’)); ?>
</div>
</div>
<?php endwhile; endif; ?>

Whoohoo! Great Work!

Snippets: HTML object swf embed within a WordPress post snag it n’ publish it code excerpt

Wednesday, December 29th, 2010

<object height=”24″ width=”500″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″ classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″><param value=”file=http://www.site.net/track.mp3&amp;image=http://www.site.net/trackImage.jpg” name=”flashvars”><param value=”http://www.site.com/swf/player.swf” name=”movie”><embed height=”24″ width=”500″ flashvars=”file=http://www.site.net/track.mp3″ pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” src=”http://www.site.com/swf/player.swf”></object>