Mick Redman

Monday 21 October 2013

OOP Series : Properties and methods

Why? I don't know, but the creators of OOP decided to rename variables and functions as properties and methods respectively. The crazy thing is, that in the code, you will see references to things like 'var' and 'function'. Hey ho! Here are 2 simple examples of how they are declared and used in my example of the desk lamp which lights up my keyboard on this dull day.
PHP : desklamp.class.php
<?php
class desklamp
{
public $power = 'OFF';
function onoffswitch()
{
$this->power = $this->power == 'OFF' ? 'ON' : 'OFF';
}
}
?>
JavaScript : desklamp.class.js
desklamp = function()
{
this.power = 'OFF';

this.onoffswitch = function()
{
this.power = this.power == 'OFF' ? 'ON' : 'OFF';
};
};
Now a file (index.php) which creates objects from both and makes the switch.
<?php
require_once 'desklamp.class.php';
$mydesklamp = new desklamp;
echo 'PHP desk lamp power = '.$mydesklamp->power.'<br />';
$mydesklamp->onoffswitch();
echo 'PHP desk lamp power = '.$mydesklamp->power.'<br />';
?>

<script src="desklamp.class.js"></script>
<script>
var mydesklamp = new desklamp;
document.write('JS desk lamp power = '+mydesklamp.power+'<br />');
mydesklamp.onoffswitch();
document.write('JS desk lamp power = '+mydesklamp.power);
</script>

Wednesday 16 October 2013

A short series on OOP (Object Orient(at)ed Programming)

I'm going to do a short series of blog entries on OOP. I'll be using 2 languages in order to emphasise that the concepts are not language specific. All then entries will have simple code to demonstrate the point and be short in text.

Why OOP?

Good question Mick. Funnily enough, when you begin learning a language, it's rare to dive into OOP. It's possible that just grapsing this first concept would be enough to put any newbie off. Unfortunately, this also presents it's own problem. The newbie was doing perfectly well, creating useful code, only to be held up by a new concept (OOP) which slows them down. So the first question on their mind is why do I have to learn OOP? What is it going to give me.

Enough Mick. Give me the answer. Here I probably attack the problem from a different point of view than many of my programming friends.

Suppose I asked you to explain something. The mug of tea I'm drinking from. You might say, It's a cylindrical object, just big enough to hold, with a handle. It's yellow. They don't always look like that. Some are small for espresso, some are blue etc.

This would be an OOP way of looking at a mug of tea. Something which actually comes naturally to us. Strangely, if you were to use the concept we come into programming with (procedural), you'd describe the cup of tea as, 'It is the thing I am drinking from'.

First concept - classes and objects

So, here is the first concept. What is a class, and what is an object?
A class is a description of the thing. An object is a version of the thing.
Using our cup of tea example, we create a class called 'cup of tea', and in order to have a cup of tea, we need to create an object (my cup of tea).

Time to start coding I think. We are going to do this with 2 languages; PHP and JavaScript. First the classes.
PHP : cupoftea.class.php
<?php
class cupoftea
{
public $height, $diameter, $colour;
}
?>

JavaScript : cupoftea.class.js
cupoftea = function()
{
var height, diameter, colour;
};

Now a file (index.php) which creates objects from both.
<?php
require_once 'cupoftea.class.php';
$mycupoftea = new cupoftea;
$mycupoftea->height = 20;
echo $mycupoftea->height;
?>

<script src="cupoftea.class.js"></script>
<script>
var mycupoftea = new cupoftea;
mycupoftea.height = 30;
document.write(mycupoftea.height);
</script>

Friday 11 October 2013

Start building your OOP JavaScript objects

Let's face it. Sometimes jQuery doesn't cut it. Either you don't want the user to download the library or it seems to be a sledgehammer to crack a nut. JavaScript has also matured into a great server-side language. Think of node.js. My example below uses OOP JavaScript for web interaction, but consider the concept on the server-side too.
Let's start with the HTML page:
<html>
<script src="alertster.class.js"></script>
<script>
var myalertster = new alertster('hello');
myalertster.sendit('goodbye');
</script>
</html>
Not too big is it? Essentially we are creating a new object called myalertster from a class called alertster which lies within a file called alertster.class.js. I am passing a couple of parameters here, but as you'll see from the contents of alertster.class.js (below), I've stuck a little error trapping in there too.
Now for alertster.class.js:
function alertster(message)
{
message = typeof message !== 'undefined' ? message : 'Default message';
this.m = message;
this.sendit = function(additional)
{
additional = typeof additional !== 'undefined' ? additional : 'Default additional message';
alert(this.m+"\n"+additional);
};
};
Easy!

Tuesday 24 September 2013

htaccess and HTML5 lines to force downloads

Here are a couple of tips to make life a little easier for your users with download links.
If you are running a Apache as your web server you can add the following line to your htaccess file:

AddType application/octet-stream .pdf

and/or ad a line like this within your HTML page:

<a href="document.pdf" download="document.pdf">Download the document</a>

In this case the pdf will automatically be downloaded when the user clicks on the link, rather than presenting them with a dialogue box asking them what to do.

Friday 9 August 2013

Automatically log users into your website using HTML5 Local Storage

So your users has been registered. They have gone through the pain of logging in on a mobile phone and you want them to authenticate more easily next time round, so that they don't give up on using your web app.

The solution : HTML5 Local Storage. In the code below, I take the username and password, and put them in localstorage variables. When the (login) page is visited again, I check to see if those localstorage variables exist. If they do, I add them as values to the username and password field, and perform a submit.

Enjoy!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 Save Password</title>

<script src="jquery.min.js"></script>
</head>
<body>
<form method="POST" action="set.php">
<label for"username">Username</label>
<input name="username" type="email" />
<label for"password">Password</label>
<input name="password" type="password" />
<input type="submit" />
</form>
<script>
(function()
{
u = false;
p = false;
if(localStorage.getItem('username') != null)
{
$('form input[name=username]').val(localStorage.getItem('username'));
u = true;
}
if(localStorage.getItem('password') != null)
{
$('form input[name=password]').val(localStorage.getItem('password'));
p = true;
}
if((u == true) && (p == true))
{
$('form').submit();
}
$('form').submit(function()
{
localStorage.username = $('form input[name=username]').val();
localStorage.password = $('form input[name=password]').val();
});
})();
</script>
</body>
</html>

Thursday 1 August 2013

HTML5 contenteditable save, re-save and save again

The HTML5 contenteditable attribute is really useful, but when you've got my typing skills, you'd really like to keep saving as you go. In the example below I'm writing to a text file for simplicity. I've got a few things going on.

If the text file exists or has data in there, I use it. Otherwise, the editable paragraph holds a default string.
I use a form submit to kick off a jQuery event.
The jQuery function calls a PHP script to write the contents of my editable paragraph to the file.

This way I can keep pressing the submit button as I go, which will just update the text file with the current editable paragraph contents.

Here's the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editable jQuery save</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<p id="content" contenteditable="true">
<?php
$text = file_get_contents('test.txt');
if(!empty($text))
{
echo $text;
}
else
{
echo 'Put some text here.';
}
?>
</p>
<form>
<input type="submit" />
</form>
<script>
(function()
{
$('form').submit(function()
{
$.post('set.php',
{
content:$('#content').text()
}, function(data)
{
if(data)
{
console.log(data)
}
});
return false;
});
})();
</script>
</body>
</html>

And set.php

<?php
if(isset($_POST['content']))
{
file_put_contents('test.txt', $_POST['content']);
}
else
{
echo 'write was not successful';
}
?>

Heredoc in PHP to reduce a lot of echo calls

Heredoc is a way of building strings for output. Funnily enough I found there was a mistake in some of the coding on the Wikipedia page, but I won't hold that against them. Also, in some of the examples I've come across on the web, they don't seem to recognise an important feature of heredoc. That is, it also provides HTML output.

Below is some example PHP code with the correct syntax, use of variables and HTML. That should speed things up a bit.

<?php
$recipient = 'Mick';
$sender = 'Johnnie';
$x = <<<EOF
Dear $recipient,
I wish you to leave Sunnydale and never return.<br />
Not Quite Love,
$sender
EOF;
echo $x;
?>