Wednesday 6 November 2013

OOP Series : Encapsulation

One of OOP's strengths is that it provides control over access to properties and methods. This becomes particularly useful when developers are working together and extending classes.It is also often referred to as data hiding. It achieves this through public, private and protected properties and methods. How these are implemented in different languages can vary significantly as you see in the code examples below.
Public usually means anything which makes use of the class can access it.
Private usually means only the class can access it.
Protected usually means either it can access private properties and methods whose values can then be passed back, or can be used only by extended classes.
Given the more complex nature of protected, I tend to use it only when necessary.
PHP : car.class.php
<?php
class car
{
public $mypublicvariable;
private $myprivatevariable;
protected $myprotectedvariable;
function __construct()
{
$this->mypublicvariable = 'guitar';
$this->myprivatevariable = 'beer';
$this->myprotectedvariable = 'chocolate';
}
}
?>
PHP : extendedcar.class.php
<?php
require_once 'car.class.php';
class extendedcar extends car
{
function __construct()
{
parent::__construct();
}

function showprotected()
{
return $this->myprotectedvariable;
}
}
?>
JavaScript : car.class.js
car = function()
{
this.mypublicvariable = 'guitar';
var myprivatevariable = 'beer';

this.myprivilegedmethod = function()
{
return myprivatevariable;
}
}
Now a file (index.php) which creates 2 PHP objects. One from the parent class and one from the extended class. Then 1 JavaScript object.
<?php
require_once 'car.class.php';
require_once 'extendedcar.class.php';
$mycar = new car;
$myextendedcar = new extendedcar;
echo $mycar->mypublicvariable.'<br />';
echo $myextendedcar->showprotected().'<br />';
?>
<script src="car.class.js"></script>
<script>
var mycar = new car();
document.write(mycar.mypublicvariable+'<br />');
document.write(mycar.myprivilegedmethod()+'<br />');
</script>

Friday 1 November 2013

OOP Series : Inheritance

One of OOP's strengths is that it provides the concept of inheritance. This becomes particularly useful when developers are working together and extending classes. In this first example I'm not going to focus on controlling the visibility of properties and methods. Everything will be public. Visibility will be covered in another blog entry.
PHP:car.class.php
<?php
class car
{
public $mypublicvariable;
function __construct()
{
$this->mypublicvariable = 'guitar';
}
function changevalue()
{
$this->mypublicvariable = 'beer';
}
}
?>
PHP:extendedcar.class.php
<?php
require_once 'car.class.php';
class extendedcar extends car
{
function __construct()
{
parent::__construct();
}
function changevalue()
{
$this->mypublicvariable = 'chocolate';
}
}
?>
JavaScript:car.class.js
car = function()
{
this.mypublicvariable = 'guitar';
}
car.prototype.changevalue = function()
{
this.mypublicvariable = 'beer';
}
JavaScript:extendedcar.class.js
extendedcar = function()
{
car.call(this);
}
extendedcar.prototype = new car();
extendedcar.prototype.constructor = car;
extendedcar.prototype.changevalue = function()
{
this.mypublicvariable = 'chocolate';
}
Now a file (index.php) which creates an object from both.
<?php
require_once 'car.class.php';
require_once 'extendedcar.class.php';
$mycar = new car;
$myextendedcar = new extendedcar;
echo $mycar->mypublicvariable.'<br />';
$mycar->changevalue();
echo $mycar->mypublicvariable.'<br />';
echo $myextendedcar->mypublicvariable.'<br />';
$myextendedcar->changevalue();
echo $myextendedcar->mypublicvariable.'<br />';
?>
<script src="car.class.js"></script>
<script src="extendedcar.class.js"></script>
<script>
var mycar = new car();
var myextendedcar = new extendedcar();
document.write(mycar.mypublicvariable+'<br />');
mycar.changevalue();
document.write(mycar.mypublicvariable+'<br />');
document.write(myextendedcar.mypublicvariable+'<br />');
myextendedcar.changevalue();
document.write(myextendedcar.mypublicvariable+'<br />');
</script>

Friday 25 October 2013

OOP Series : Constructors and destructors

In OOP, constructors are initialisers and destructors are clean up operations.
In the case of PHP you declare a constructor of your class. It will be run when an object is created from the class. You can also declare a destructor which will be "called as soon as there are no other references to a particular object, or in any order during the shutdown sequence."
In the case of JavaScript, you don't have a specific method, but just make all your declarations.
In JavaScript, it's best to rely upn the garbage collector.
PHP:familyphoto.class.php
<?php
class familyphoto
{
public $mywidth, $myheight;
function __construct($mywidth = NULL, $myheight = NULL)
{
$this->mywidth = $mywidth;
$this->myheight = $myheight;
}

function __destruct()
{
$this->mywidth = NULL;
$this->myheight = NULL;
}
}
?>
JavaScript:familyphoto.class.js
familyphoto = function(mywidth, myheight)
{
this.mywidth = typeof mywidth !== 'undefined' ? mywidth : null;
this.myheight = typeof myheight !== 'undefined' ? myheight : null;
}
Now a file (index.php) which creates 2 objects from both. In one, passing no values, and in another, passing 2 required values.
<?php
require_once 'familyphoto.class.php';
$familyphoto1 = new familyphoto;
echo $familyphoto1->mywidth.'<br />';
echo $familyphoto1->myheight.'<br />';
$familyphoto2 = new familyphoto(4,3);
echo $familyphoto2->mywidth.'<br />';
echo $familyphoto2->myheight.'<br />';

?>
<script src="familyphoto.class.js"></script>
<script>
var familyphoto1 = new familyphoto();
document.write(familyphoto1.mywidth+'<br />');
document.write(familyphoto1.myheight+'<br />');
var familyphoto2 = new familyphoto(4,3);
document.write(familyphoto2.mywidth+'<br />');
document.write(familyphoto2.myheight+'<br />');
familyphoto1.destruct();
familyphoto2.destruct();
</script>

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.