Category Archives: web development

Send a multipart/form-data request in PHP

GET

To List your current indexes with ‘standard’ flavor use a GET request to the List Indexes API.


$url_listindexes = 'https://api.idolondemand.com/1/api/sync/listindexes/v1';
$params1 = 'flavor=standard&apikey='.$apikey;
$response = file_get_contents($url_listindexes .'?'.$params1);
if($response) { $json = json_decode($response); if($json){ $indexes = $json->index; } return $indexes; }

POST

POST multipart/form-data with native PHP


function send_multipart_post_message($sync_or_async, $json1){
$url = "https://api.idolondemand.com/1/api/".$sync_or_async."/addtotextindex/v1";
// using WordPress custom functions to retrieve index and apikey
$index1 = wp_idolondemand_get_setting('index');
$apikey = wp_idolondemand_get_setting('apikey');
$eol = "\r\n";
$data = '';
$mime_boundary=md5(time());
//
$data .= '--' . $mime_boundary . $eol;
$data .= 'Content-Disposition: form-data; name="apikey"' . $eol . $eol;
$data .= $apikey . $eol;
$data .= '--' . $mime_boundary . $eol;
$data .= 'Content-Disposition: form-data; name="index"' . $eol . $eol;
$data .= $index1 . $eol;
$data .= '--' . $mime_boundary . $eol;
$data .= 'Content-Disposition: form-data; name="json"; filename="allposts.json"' . $eol;
$data .= 'Content-Type: application/json' . $eol;
$data .= 'Content-Transfer-Encoding: base64' . $eol . $eol;
$data .= base64_encode($json1) . $eol;
// alternatively use 8bit encoding
//$data .= 'Content-Transfer-Encoding: 8bit' . $eol . $eol;
//$data .= $json1 . $eol;
$data .= "--" . $mime_boundary . "--" . $eol . $eol;
$params = array('http' => array(
'method' => 'POST',
'header' => 'Content-Type: multipart/form-data; boundary=' . $mime_boundary,
'content' => $data
//'proxy' => 'tcp://localhost:8888' //use with Charles to catch http traffic
));
$ctx = stream_context_create($params);
$response = file_get_contents($url, FILE_TEXT, $ctx);
return $response;
}

Continue reading

HTML5 and JavaScript: Flip an Image using HTML5 Canvas

See the working code example on jsfiddle.


<!DOCTYPE html>
<html>
<head>
<title>Flipping an Image Horizontally and Vertically</title>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var imageurl = null;
//
$(document).ready( function() {
$('#loadimage').click(function() {
urlProvided();
});
$('#mirrorh').click(function() {
mirror(1,0);
});
$('#mirrorv').click(function() {
mirror(0,1);
});
});
//
function urlProvided() {
var userinput = document.getElementById('imageurl');
imageurl = userinput.value;
loadImage();
}
function loadImage(){
//
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//
var img = new Image();
img.src = imageurl;
img.onload = function(){
ctx.drawImage(img,0,0);
};
//
var w = img.width;
var h = img.height;
canvas.width = w;
canvas.height = h;
}
//
function mirror(mirrorh,mirrorv){
//
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
//
var img = new Image();
img.src = imageurl;
//
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
//
var w = img.width;
var h = img.height;
if(mirrorh){
ctx.scale(1, -1);
ctx.translate(0, -h);
}
if(mirrorv){
ctx.scale(-1, 1);
ctx.translate(-w,0);
}
ctx.drawImage(img,0,0,img.width,img.height,null,null,w,h);
ctx.save();
}
</script>
</head>
<body>
<div>
Your image URL: <input type="text" id="imageurl"></input><button id="loadimage">load image</button>
</div>
<div>
<button id="mirrorh">mirrorh</button>
<button id="mirrorv">mirrorv</button>
</div>
<div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>

Drupal: Cross-Linking Custom Content-Types via Custom Fields using Entity API and Field API

Scenario: a book where pages have multiple subpages as tabs, e.g. a Drupal Book content-type with documentation of RESTful API Resources, where each API Resource Book page is linked to multiple Code Example content-types, ordered in a tabbed page with one Code Example per language tab.

drupal_crosslinks_entity_reference

Drupal 7 and 8 has a set of abstraction layers, abstracting nodes to Entity Type, Bundle, and Field. A Node is an Entity Type, just like Taxonomy, Comment or User, or Book, Article, Blog Post etc. An Entity is an implementation instance of an Entity Type. An Entity Type is defined in a Bundle that has a collection of Fields.

Create a new ‘Entity Type’ named ‘Code Example’. Install the Entity Reference module. On the Book page, click Manage Fields, add a Field to the Book page Entity Type of type Entity Reference with multiple selections. Create a few Code Examples for the Book page node. On the instance or node of the Book page, select the Entity References of type Code Examples.

Create a Taxonomy with a hierarchy of coding languages. In the Code Example entity type, click Manage Fields and add a field based on the coding languages taxonomy. The tabs in the Book page will be labeled by code language, e.g. Java, JavaScript, Objective-C, etc.

Then, to use JQuery UI.tabs we can create a tabular page with Code Examples per language, crosslinked to entities or nodes of type Book Page.

<?php
drupal_add_library('system', 'ui.tabs');
drupal_add_js('jQuery(document).ready(function(){jQuery("#codeexamples-tabs").tabs();});', 'inline');
?>
<div id="codeexamples-tabs">
<?php
$node = menu_get_object();
if($node){
 $field = field_get_items('node', $node, 'field_codeexampleentityreference');
 if($field){
  $listtabs = '<ul>';
  $tabcontents = '';
  foreach ($field as $codeexampleentityreference)
  {
    $nid = $codeexampleentityreference['target_id'];
    $tabname = $nid;
    $codeexample = node_load($nid);
    $codeexample_output = node_view($codeexample);
    $field2 = field_get_items('node', $codeexample, 'field_language');
    if($field2){
     $tabname = $field2[0]["taxonomy_term"]->name;
    }
    $listtabs = $listtabs . '<li><a href="#codeexamples-tab-'.$nid.'">'.$tabname.'</a></li>';
    $tabcontents = $tabcontents . '<div id="codeexamples-tab-'.$nid.'">'.render($codeexample_output).'</div>';
   }
   $listtabs = $listtabs.'</ul>';
   print $listtabs;
   print $tabcontents;
  }
 }
?>
</div><!-- /.codeexamples-tabs -->

Drupal: template.php form_alter and breadcrumb hooks

Add a Read-Only field to User Register Form

To create a read-only field on the user registration form in Drupal, for instance to add a Terms & Conditions textarea field, you must override the form_alter hook.

function _form_alter(&$form, &$form_state, $form_id) {
 if ($form_id == 'user_register_form') {
  $form['field_developer_agreement']['und'][0]['value']['#attributes']['readonly'] = 'readonly';
  $form['field_developer_agreement']['und'][0]['value']['#resizable'] = FALSE;
  $form['field_developer_agreement']['und'][0]['value']['#cols'] = 40;
 }
}

Continue reading

Drupal: Color.Module

Tips and Tricks
When you get an ‘undefined index’ warning, make sure the mentioned key is present in your color.inc info array.

Important: Only if the color in your $info[‘css’] file that you want to change with the palette in the drupal color picker is preset in the colors.inc default scheme and the hex value exactly matches the hex value in the css file, will the color.module overwrite your css file settings.

Note: when testing and making changes to your regular colors.css file, you must regenerate the color.module’s copy of the colors.css file before you will see the changes, as color.module will look for the generated $info[‘css’] and ignore your original css.
Continue reading

CSS Tip: styling lists

To create horizontal tabs from a unordered list, you can style your list as follows:

ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
display: inline;
}

The above creates the horizontal list without bullet points. The below will set the height of the bar and synchronizes the height of the list with the height of the bar.
Continue reading

CSS: Basic Project Structure

~/css
~/css/color.css
~/css/font.css
~/css/html.css
~/css/layout.css
~/css/style.css
~/imgs
~/imgs/logo_large.png
~/imgs/logo_small.png
~/js
./index.html
./index.php
.htaccess

color.css
All color information goes in the color.css file, so that it is easy to just change the color appearance of your site.

font.css
The font file contains font family and font size information. The font color goes in the color.css file.

html.css
The html file contains the styling of default HTML tags.

layout.css
The layout file contains the box structure of your site. You should be able to draw the site on a sheet of paper with solely boxes and a keyword for each box’s content.

style.css
The style file contains information for div tags like margins, padding, borders, list style. The style creates the rough look and feel for your site.

Upgrade from Lion to Mountain Lion

Apache overwrites the Lion configurations and I needed to reconfigure Apache to run my localhost websites. Among other the AllowOverride All permissions in /etc/apache2/httpd.conf and /etc/apache2/extra/httpd-vhosts.conf caused my WordPress Permalinks to throw 404 Not Found errors.
If Apache is not running, start the server manually with

sudo apachectl start

Disk Permissions were broken, causing me to be unable to access among other the Applications folder from Finder. I could access the folder from the command line and was able to run the Disk Utility and repair Disk Permissions.

open -a /Applications/Utilities/Disk\ Utility.app/

Reinstall X11 from http://xquartz.macosforge.org/trac/wiki/X112.7.2.

Reinstall Command Line Tools from Xcode > Preferences > Downloads > Components to reinstall gcc.

WordPress: Hello World Widget

Hello World Widget Area

To add widgets to your theme, you must have or create a ‘widget area’ as a widget placeholder and a widget to add to your widget area.

In the functions.php file of your theme, you can create a custom widget area by using the following code.

if (function_exists('register_sidebar')) {
register_sidebar(array(
'name'=> 'Hello World Widget Area',
'id' => 'hello_world',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div id="div_hello_world_title">',
'after_title' => '</div>',
));}

Hello World Widget

This simple method does not use the extension of the WP_Widget class, which is the preferred method.
In the functions.php file of your theme, add the following code for the HelloWorld Widget.


function widget_helloworld() {
echo "Hello World!";
}
if (function_exists('register_sidebar_widget')) {
register_sidebar_widget(__('Hello World Widget'), 'widget_helloworld');
}

To add your widget to the dynamic sidebar:
– Go to your WordPress Dashboard > Appearance > Widgets, and
– Drag’n’drop the Hello World Widget to the dynamic sidebar on the right.

Hello World Template

Finally, you need a template to include your widget area. Create a helloworld.php file and include the following code.


<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Hello World Widget Area')) : ?>
<!-- if widgets are not available -->
<?php endif; ?>