Mick Redman

Thursday, 6 December 2012

A Christmas Gift

Merry Christmas everyone! To celebrate, I have decided to give the second edition of my recipe book away for free. No catch. No asking for retweets. Links below:
Big Mick's Recipe Book epub
Big Mick's Recipe Book pdf

Tuesday, 4 December 2012

Fullscreen presentations using twitter bootstrap and the HTML5 API

I can't take all the credit for this. I have to acknowledge the great work done by HTML5 Demos. What I did was, simplify some of the JavaScript and CSS. I then used Twitter Bootstrap as a template, so to make this work, you'll have to make that download. I also made use of the carousel library which came with Twitter Bootstrap. You'll also have to download jQuery and refer to it as I have.

Here's how it works. You load put the page in your browser. When loaded, you press the 'f' jey to make the page full screen. Press the 'enter' key to move forward through the slideshow. Press the backspace key to move back. Press the 'Esc' key when you've done.

I've tested it on Chrome and Firefox. I believe there's another popular browser, but it's not installed on my computer.

Anyway. Here's the code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fullscreen demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<style>
::-webkit-scrollbar
{
width:15px;
background:white;
}
::-webkit-scrollbar-thumb
{
box-shadow:inset 0 0 99px rgba(0,0,0,.2);
border:solid transparent;
border-width:6px 4px;
}
html, body
{
height:100%;
background:white;
overflow-y:auto;
overflow-x:hidden;
}
:-webkit-full-screen-document
{

}
:-webkit-full-screen:not(:root)
{
width:100% !important;
float:none !important;
}
:-moz-full-screen:not(:root)
{
width:100% !important;
float:none !important;
}
#fs:-webkit-full-screen
{
width:98%;
height:98%;
background-color:white;
}
.carousel-inner .item
{
margin-left:80px;
}
</style>


</head>
<body>
<div id="fs">
<div class="container">
<div class="page-header">
<h1>f for full screen, Esc for quit.</h1>
</div>
<div id="myCarousel" class="carousel slide">

<div class="carousel-inner">
<div class="active item">
<ul>
<li>First bullet</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div class="item">
<ul>
<li>Fourth bullet</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
</div>
<div class="item">
<ul>
<li>Seventh bullet</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</div>
</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).keyup(function(event)
{
$('.carousel').carousel('pause');
if (event.keyCode === 13)
{
$('a.carousel-control.right').trigger('click');
}
if (event.keyCode === 8)
{
$('a.carousel-control.left').trigger('click');
}
});

var elem = document.querySelector(document.webkitExitFullscreen ? '#fs' : 'body');
document.addEventListener('keydown', function(e)
{
switch (e.keyCode)
{
case 70:
enterFullscreen();
break;
}
}, false);

function enterFullscreen()
{
if (elem.webkitRequestFullscreen)
{
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
else
{
if (elem.mozRequestFullScreen)
{
elem.mozRequestFullScreen();
}
else
{
elem.requestFullscreen();
}
}
}
</script>
</body>
</html>

Wednesday, 28 November 2012

Quick tip Replacing characters with a new line in Sublime Text 2

I use Sublime Text 2 all the time. I'm also give files all the time which need tweaking before they can be used. Yesterday someone sent me a bunch of e-mail addresses separated by semi-colons, but I needed the content instead to be separated by new line characters. Here's how I did it.
Open the file
Choose Find->Replace.
Then select the 'Regular Expression' button at the bottom left of the screen.
In the 'Find What:' field type your character. In my case it was the semi-colon.
In the 'Replace With:' field type \n
The click the 'Replace All' button.
Hey presto!

Tuesday, 2 October 2012

Presenting MySQL table data through PHP, JSON and jQuery

This may seem like a long way round to do something, but believe me, it has its benefits if you are trying to deliver an open systems approach to your development framework.

Let's say I have a MySQL database with table called chat. The chat table has 3 fields; userid, entry and datesaved.

I create a PHP script called jsonout.php which returns all rows of the chat table, thus:

<?php
$con = mysql_connect('localhost','root','');
mysql_select_db('test', $con);
$result = mysql_query('SELECT * FROM `chat`');
while($rows[] = mysql_fetch_assoc($result));
array_pop($rows);
mysql_close($con);
echo json_encode($rows);
?>

Notice the final line (in red) where I return a JSON encoded version of the resulting array.

Now my HTML page (below) can collect the JSON through jQuery and present the results on the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JSON retrieval through jQuery</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:10px/15px Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<script>
(function()
{
$.getJSON('jsonout.php', function(data)
{
$.each(data, function(i, items)
{
$('body').append('<p>'+items.userid+'</p>'+items.entry+'<p>'+items.datesaved+'</p>');
});
});
})();
</script>
</body>
</html>

Monday, 1 October 2012

Simple JSON retrieval through jQuery

This page explains how to retrieve some simple JSON data and append it to a page. First the JSON through a script called jsonout.php

{
"one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}

Now the HTML with jQuery to retrieve and display it within the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JSON retrieval through jQuery</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:10px/15px Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<script>
(function()
{
$.getJSON('jsonout.php', function(data)
{
$.each(data, function(key, val)
{
$('body').append('<p>'+key+':'+val+'</p>');
});
});
})();
</script>
</body>
</html>

Tuesday, 28 August 2012

Saving and retrieving images using MySQL through PHP

I really should have looked into this a long time ago, but still. The example below deliberately doesn't use jQuery. If you want to POST files through jQuery, you'll need to use an ajax form plugin.

Right. Now we've got that out of the way, to my example. I have created a database in MySQL with a table called pictures, and I have 2 fields:
id : int(8)

picture : longblob
I have used the database class which I developed earlier to handle the requests.
At this stage, I'm just handling JPEG images.

<?php
require_once 'database.class.php';
$db = new database;
if($_POST)
{
$image=$_FILES['uploadfile']['tmp_name'];
$fp = fopen($image, 'r');
$content = fread($fp, filesize($image));
$content = addslashes($content);
fclose($fp);
$sql="insert into pictures (picture) values ('$content')";
$results = $db->query($sql);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File upload</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
<input name="uploadfile" id="uploadfile" type="file" />
<input type="submit" value="Submit" />
</form>
<div id="results">
<?php
$arr = $db->query('SELECT * FROM pictures');
if($arr)
{
foreach($arr as $row)
{
echo $row['id'];
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['picture']).'" /><br />';
}
}
?>
</div>
</body>
</html>

Enjoy!

Monday, 20 August 2012

Useful PHP quick test page

I developed this page a little while ago to do quick tests. Essentially, you just put items in the text box and press submit. The benefit of the page is that all the reloading is done for you. There is no need to keep using back or forward buttons. Just carry on making adjustments to your code and keep trying. The page will use the changes you make.

In the example below, I am outputing an md5 version of my input, but you can create your own functions and just replace the bit where md5 is called (highlighted in red).

<?php
$myname = $_GET ? html_entity_decode($_GET['myname']) : NULL;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<form>
<label for="myname">Type your string</label>
<input type="text" name="myname" id="myname" value="<?php echo $myname; ?>" />
<button type="submit">Submit</button>
</form>
<p><?php echo $myname ? md5($myname) : NULL; ?></p>
<script>
(function()
{
$('form').submit(function()
{
locStr = '<?php echo basename(__FILE__); ?>?str='+$('#myname').val();
window.location.replace(locStr);
}
})();
</script>
</body>
</html>