Mick Redman

Wednesday, 23 March 2016

Dynamically make items active in Twitter Bootstrap navigation using jQuery

Here, I have created a jQuery plugin. It takes as its parameter the elements containing navigation items from a Twitter Bootstrap page. The plugin then matches the page URL with a navigation item and makes it active.
Find the code here.

Tuesday, 22 March 2016

Search multiple database tables using PDO

I have created a PHP class based on PDO. It searches multiple database tables. It handles boolean and normal string queries. Results are displayed as Twitter Bootstrap tables. Find it here.

Monday, 21 March 2016

H1 shows window width

I'm often trying understand which media queries to add to my CSS in order to control changes in the display of content. For this I need to see the window width as it resizes. There are other ways, but I find it more convenient if the page title show the window width.
To enable this, I add the following jQuery code, which is also available as a public gist here.
$(window).resize(function()
{
$('h1').text($(window).width());
});

Golden ratio

I've been reading this article recently on use of the golden ratio within web design.
As a result I've developed a jQuery plugin to help in its implementation within my pages. You can find it here on my github page. It also include an index.html and custom.css to help demonstrate its use.
There are 2 implementations:

Creating a rectangle where the golden ratio width is derived from the height
Creating 2 rectangles based on their container height

Hope they help.

Tuesday, 16 June 2015

Change content using select menu in a Bootstrap page with the help of jQuery

I recently delivered the solution to a stackoverflow question. The question was around using a select menu to display different content contained in divs using jQuery.
Below is the solution, but the only difference is that I've contained it in a Bootstrap page. The important bit are highlighted in red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap select content</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body
{
padding-top:2em;
}
</style>

</head>
<body>
<div class="row">
<div class="container">
<div class="col-md-12">
<select name="type" id="type" class="form-control">
<option>Select some content</option>
<option value="bar">Bar</option>
<option value="restaurant">Restaurant</option>
<option value="hotel">Hotel</option>
</select>
<hr />
<div id="bar" class="type well">Bar</div>
<div id="restaurant" class="type well">Restaurant</div>
<div id="hotel" class="type well">Hotel</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
(function()
{
$('div.type').hide();
$('#type').change(function()
{
$('div.type').hide();
$('#'+$(this).val()).toggle();
});
})();
</script>
</body>
</html>

Wednesday, 10 June 2015

Bootstrap formhandler calling class methods with JSON returned and processed

This entry offers a number of techniques through 4 files.

index.php contains a message alert which will only be displayed when there is a message to put in it. The forms use an action which contains the name of a class and method which will be used to process the results. There is also a call to custom.js
custom.js handles the form submissions and delivers the data returned to the page. It passes the form action and field content to formhandler.php. It receives JSON which then is either passed to a message alert or a data table.
formhandler.php receives the call from custom.js. This contains the form action and field content. It takes the form action and uses them to create calls to classes and methods named in the form action. For example and action of myclass/mymethod would be used to create calls similar to those below. The inclusion of the $_POST array allows the form field content to be passed to the class. The data returned is then passed back to custom.js for processing.

$myclass = new myclass($_POST);
$myclass->mymethod;

myclassname.class.php contains the example class and methods. The class receives the $_POST array and processes its content. There are 3 methods which demonstrate how to return a string, an array and an object.

This approach is a quick way of utilising many classes. It does not require a .htaccess file to simplify form actions and is flexible in its handling of returned data through JSON.
Have fun.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form handler for many PHP classes using jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body
{
margin-top:2em;
}
#message, #data-table
{
display:none;
}
</style>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-md-12">
<div id="message" class="alert alert-success" role="alert"></div>


<form action="myclassname/myclassmethod_object" method="POST">
<div class="form-group">
<label for="name"></label>
<input type="text" name="name" class="form-control" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<table id="data-table" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="custom.js"></script>
</body>
</html>

custom.js

formhandler.php

<?php
if(isset($_GET['action']))
{
$arr = split('/', $_GET['action']);
$class = $arr[0];
$method = $arr[1];
require_once $class.'.class.php';
if(class_exists($class))
{
$evalStr = '$'.$class.' = new '.$class.'($_POST);';
eval($evalStr);
if(method_exists($class, $method))
{
$evalStr = '$returnValue = $'.$class.'->'.$method.'();';
eval($evalStr);
}
else
{
$returnValue = 'Method does not exist';
}
}
else
{
$returnValue = 'Class does not exist';
}
}
else
{
$returnValue = 'No action given';
}

if(is_object($returnValue) || is_array($returnValue))
{
echo json_encode($returnValue);
}
else
{
$returnArr = array('message'=>$returnValue);
echo json_encode($returnArr);
}
?>

myclassname.class.php

<?php
class myclassname
{
private $pa;
function __construct($postArray = array())
{
$this->pa = $postArray;
}

function myclassmethod_string()
{
return 'Your name is '.$this->pa['name'];
}

function myclassmethod_array()
{
$myArr = array('Peter'=>'35', 'Ben'=>'37', 'Joe'=>'43');
return $myArr;
}

function myclassmethod_object()
{
$myObj = (object) array('Peter'=>'35', 'Ben'=>'37', 'Joe'=>'43');
return $myObj;
}

function __destruct()
{

}
}
?>

Wednesday, 22 April 2015

Display PHP code in the browser

There are 2 ways to do this I've recently discovered:
First, use the highlight_file command thus,
highlight_file('hello.php');

Second, allow .phps files. To do this (I'm using an Ubuntu Apache on local host here), go to the file /etc/apache2/mods-available/php5.conf
Change the line highlighted in red to the one highlighted in blue
<FilesMatch ".+\.phps$">
SetHandler application/x-httpd-php-source
# Deny access to raw php sources by default
# To re-enable it's recommended to enable access to the files
# only in specific virtual host or directory
Order Deny,Allow
Deny from all
Allow from all
</FilesMatch>
Now, if you rename hello.php to hello.phps and display it in your browser, it will show as PHP code.
Hope this helps.