We have not created the Mediator class yet, but at least we know that the Layer class has two methods to send message and notify the sender. These abstract methods are implemented in the Application and Database classes. Notice how sending the message is not happening directly, but instead it is using the mediator to do so. This is the key in this pattern. We are using the ‘this’ keyword as a second parameter to know which class is sending the message.

Now, let’s look at the Mediator and ConcreteMediator classes:

Since the mediator needs to know which classes it is mediating, we need to have instances for the Application class and the Database class. Then inside the SendMessage() method, we need to determine the type of layer to be able to send the correct notification.

Now that all the classes have been created, we can look at the main() method to see how the calls are taking place:

We create instances of the three classes. We pass the mediator to the Application and the Database. We also used properties to set the application and database for the mediator. Finally, we send the messages. Here is the output:

2.      Observer: When developing applications, you most likely ran into cases when a change in the data store (database, xml file…) needs to be reflected in the UI. Say you have added a new account type and you need to update the account type drop down list. Or, when you are writing a game application, all the soldiers on the screen need to be aware of an enemy appearing from behind a tank. These examples have something in common: dependency. When one object changes state, other objects need to be notified to take action. This is the purpose of the observer pattern. As the name implies, an observer is an object “watching” other objects. As soon as these objects change somehow, the observer alerts the objects in its list about the change. The example we are going to tackle is about a list of employees that need to be notified when a meeting changes. So, let’s start by creating the Employee class and its interface:

As you can see, the Employee class has a Meeting class as a member (this will be declared soon).  The Update method will be called every time there is as update.

Here is the declaration for the Meeting class:

The key point here is that the Meeting class has a list of employees that can be notified of the change. The When property, upon a change (set), will notify this list. We can add and remove employees to be notifies using the methods Attach() and Detach(). The method Notify() will loop over the list and call the Update method. The BudgetMeeting class is nothing more than a concrete meeting.

Let’s see how we can use these classes:

You notice that we create a meeting, attach some employees, and change the time using When. Here is how the output will look like:

3.      Strategy: In this design pattern, you are looking at many algorithms to solve a certain problem. Any of these algorithms is a standalone solution that can be easily pluggable to get the job done. We can exchange any of these algorithms with minimal or no impact on the client that uses it. Let’s take, for example, the case of displaying students’ grades. We have different strategies on how these grades will be displayed (we can display them in ascending order, descending order, letters or numeric, and so on…). We will implement different strategies for that. Then, we will use these strategies in different contexts to get the ultimate job of displaying the grades.

In the first set of code, we will look at the different strategies, then the context, and finally, how to put the whole thing together in the main method. Here are the different strategies:

As you can see, we start with the abstract GradeStrategy that defines the skeleton. Then we move into the strategy that displays the grades in the ascending order. We passed a lambda expression to the ForEach loop. For every g (a grade that is) we print its value on the console. We do not have to define what g is. It is understood from the context. You could simply use a for loop and print the values without using lambda expressions, of course. Then, we move into defining the other strategies:

The other strategies follow the same pattern. But notice how I am using  the ConvertAll() method that takes a method that accepts number grades and covert them to letter grades.

After defining the strategies, we need to create a context that we can use to switch between the strategies depending on our needs. Here is how this class will look like:

This class is simple. It contains a GradeStrategy that we can set, and a list of grades that we can populate. Calling DisplayGrades() will call the method of the appropriate strategy that we already set. Now, the main method will make use of the context and the strategies as follows:

From the main method, you can notice that core concept behind this pattern: see how we can easily switch between strategies to get the job done. Finally, the output will be as such:

4.      Visitor: In this pattern, we have an operation that needs to be performed on the elements of a certain object. The terminology here is that the first object will “accept” a visitor, and the second object “visits” the first and performs some operation. The key point to keep in mind here is that you do not need the two objects to be tightly coupled. To illustrate, we look at the example of having a list of books. This list will accept a reviewer and a publisher. So, we have a book (with different variations like programming and database and such), a collection of these books, a reviewer visitor and a publisher visitor.

We start first by creating the books:

You notice that we create a Book, Programming, Database, and Design. The Book inherits from Publication, and accepts a Visitor (that we have not created yet). We passed ‘this’ into the Visit() method because the visitor is visiting the current class we are implementing. Everything else in the code is straightforward.

Before we look at the visitor classes, we need to create the book collection:

Here, we have added the flexibility of attaching and detaching books, and also adding the Accept() method so the visitor can visit the books in the collection one at a time.

Next, let’s look at the visitor classes:

The reviewer visits the book and simulates the review process, and the publisher visits the book and simulates the publishing process.

The main method puts them together nicely:

Now you can see how we attached a list of books to the books collection, and how the books collection then accepts two visitors (a reviewer and a publisher).

Conclusion: As the applications are getting more and more complex, the importance for design patterns is becoming more and more apparent. Every design pattern we experimented with in this article has its use in software development. As developers, we try to keep an eye on our applications and requirements to see where one of those design patterns would fit. Having said that, it is important to understand that just because these patterns are handy and well structured, it does not mean that we have to plug them all over the place. Selecting the appropriate design pattern for a specific scenario requires knowledge and experience. But when the correct pattern is used, you will definitely realize that your application is well structured and flexible to changes in user requirements to say the least.


Part 1 – Part 2 – Part 3 – Part 4

In our case, we will simulate retrieving the name and value of a certain stock. The data is stored in dictionaries instead of a database. We start by creating the interface and implementing it as such:

We add two dictionaries for symbol/name pair and symbol/value pair. We populate these pairs with stocks for Microsoft, Sun, Apple, and Oracle. We add methods that retrieve the value and the full name. In the next step, we add the proxy class. Notice how the proxy contains an instance of the Stock class and wraps the methods with its own versions (in this case we check for the key and throw exception):

Now that we have the proxy class, we interact with it to call the methods and retrieve the information we need. Here is how to do that in the main method:

Finally, the output of the program will be as such:

Behavioral Pattern: In other words, how would objects operate under certain conditions? Would I be able to create a list of objects as a chain and be able to pass the requirements to the first object, and that object will pass the requirements to its neighboring object until the requirements are met or conditions are satisfied? This is the type of pattern we are approaching here. Here is the list of patterns under this category and examples on each:

1.      Chain of Responsibility: In this pattern, we are looking for a list of objects that can handle some type of request. If an object cannot handle a request for some reason, it will pass it to the next object in the chain. This process will repeat until an object handles the request. So, from the data structure perspective, we are looking at a linked list of objects. Every one of those objects knows how to handle a specific request. What object handles what request is our decision to make. For example, one object handles amounts between 0 and 10,000. The next object handles amounts from 10,001 to 100,000.

Another good place to use this pattern is for long switch statements. If you have the cases of a switch statement spanning multiple pages, you can put that under control by creating an object for every case. You can then replace that switch statement with more concise and descriptive code.

In our case, we will build an example about handling orders. We will create an order object (with id, description, and amount). Depending on the type that order can be handled by the secretary, the manager, or the CEO. First let’s start by creating the employee type and the order class:

The Order class is very straight forward: We have a Guid as a unique id for every order, a constructor, properties, and the ToString() method to format the order and print it out.

Next, we will create the Handler class, and the Secretary, Manager, and CEO that inherit from the Handler:

As you can see, the HandlePurchaseOrder() method is abstract so the child classes can implement it differently. We have a Handler object as a member of the Handler class to simulate the chain of objects. When we are implementing the HandlePurchaseOrder() method, we check for the type. If that type matches what we are looking for, we handle the request. Otherwise, we pass that request over to the next object (if the next object is not null). This process repeats down the chain of objects until the request gets handled.

Now let’s see how we can put that altogether in the main method:

We first create the handlers and their successors. Now that we have the list setup, we create orders and pass them to the first handler. Depending on the type, each order gets handled differently. Here is the output:

2.      Command: In this design pattern, we are thinking in terms of a specific command that we are trying to invoke. By doing so, we have three main objects that we are interested in: The actual command, the command invoker, and the command receiver. But, as you learned from previous design patter, we try to abstract objects whenever possible. So for the command object, we have the abstract Command and the ConcreteCommand. The example in this case takes the game approach. We start with a submarine object (the receiver). We add a command object to move the submarine backward and forward and make it fire torpedoes. Then we add a player who will be the invoker of the command. Let’s start by creating the Submarine class:

The logic in this class is very straightforward. We create three simple methods. Two of them check for the limits of movements against couple of constants.

Then we create the command classes:

As you can see the Command class encapsulates a Submarine class. In the concrete class we implement the Execute() method to make the submarine take action. The third class we need to complete the implementation is the invoker of the command. In this case we named it the Player:

The player class encapsulates the Command class (to know what command to invoke). And since the Command encapsulates the Receiver, we now have all the pieces of the puzzle. To see the execution is action, we create instances of the objects and call the methods within main:

The output of the program will be as follows:

3.      Iterator: Iterating over an object is basically looping over its items. We are visiting the items in the object collection to do something with them. We are not concerned about the underlying representation of the items. We just have some interface that helps us visit the items in the collection. Note that iterating over the elements does not necessarily mean visiting them one by one. We might decide to visit only the odd ones for example. That is up to us on how to implement that. The first thing that comes to mind when mentioning an iterator is: first, next, last, current. These types of functionalities help us know where we are in the collection and assist us in retrieving elements from the collection. Let’s look at an example: Say you have a task with an id and a name. You need to create a collection of these tasks and an iterator that loops over the tasks and print them on the screen. We start by creating the Task class:

As you can see, the Task class is straight forward. We have private members, properties, a constructor, and a ToString() method to print the task nicely on the screen. I chose to use a Guid for the id type. You can use an int if you prefer.

Next, we need to create a task collection. This collection should create an iterator to iterate over its elements. We start with an interface that contains the CreateIterator method. And the collection will implement the interface as such:

The ArrayList is a list of Objects, So when we need to retrieve tasks from the list, we will have to cast them to the appropriate type (this is coming up shortly). We added an indexer so we can get and set the tasks in an array fashion. The CreateIterator() method returns an Interator object that is created as follows:

The first thing is the interface with the basic iterator methods. Then we create the Iterator class and implement the interface methods. Notice that the iterator constructor takes a TaskCollection as a parameter to be able to retrieve its elements. Now that we have a collection initialized in the constructor, it is easy for us to know the first, next, and current task. Note in the following statement how we used the indexer to retrieve the task, and how we cast the returned object (using ‘as’) since the collection will return an Object, not as Task (after all, it is based on an ArrayList):

taskCollection[current] as Task

The last thing we have left is the main method. This method will show how we are creating the collection, populating it, and iterating over its elements (pay special attention to the use of the methods in the for loop):

Finally, here is the output (your output will have different Guids):

Part 1 – Part 2 – Part 3 – Part 4

1.      Adapter: The adapter design pattern is used to bridge the gap between incompatible interfaces. That way the classes with incompatible interfaces will be able to work together. The client will be interacting with the adapter interface, while the adapter interface will be using the other incompatible interface.  Let’s think in terms of an example of using a hair dryer in different places of the world. We are in a place where the power is 110v and we moved to a place where the power is 220v. To use the hair dryer we need an adapter.  Looking at this example in terms of code, I might have something like this:

This class has a method DryHair().  We need to create an adapter to be able to use this method. Here are the classes that I need:

Now the adapter (InternationalHairDryer) overrides the method DryHair, uses the converter class (ElectricityConverter), and calls the base class’s method DryHair. The client will need to interact with the adapter to get the work done. Here is the client code and the output:

2.      Bridge: GoF define the bridge pattern as “Decouple an abstraction from its implementation so that the two can vary independently”. If you look at the definition closely it might not make sense. After all when I write a class in C#, I provide the implementation! Well, what is happening here is that in some cases the implementation of a specific class might change very often. In that case, you prefer to provide another class for the implementation details, and the current class only makes the calls to these methods. You will that shortly in an example. The classes we are concentrating on here are the abstraction, refined abstraction, the implementation and one or more concrete implementations. The example we are illustrating uses the Pages class and the PagesImplementor class. Let’s start with the PagesImplementor and its abstract class. As I mentioned earlier the implementor is in a separate class because the implementation is changing very often. Here are both classes:

The code here is very straight forward: we start with abstract classes in the first class that are implemented in the second class. Now, we go to our Pages class that uses this implementation:

We create a base class that contains the main functionality with all the methods being virtual and the members to be protected. That way we can use them and override the methods in the child classes. That is exactly what the Pages class is doing.

Again the key point here is that the main implementations are in the implementor class, so if we decided to provide a different implementation, we just inherit from DataImplementor and there is nothing to change in the Pages class.

3.      Composite: When we think about this design pattern, we are thinking about a tree structure. For example, files and folders. We create folders within folders, and files are on the leaf of the tree. In other words, we cannot create a file or a folder within a file. To illustrate, we will create a class that represents a manager and another that represent an employee. Employees are under managers. But since employee and manager have some characteristics in common, we will create a class person and make employee and manager inherit from that class. We start with the class Person first:

As you can see the class is abstract (methods Add, Remove and Display are not implemented). The name is protected so we can have access to it in the child classes. Then, we create the Manager and Employee class as follows:

The Employee class cannot add or remove as you can see in the method implementations (in this case we only used a write statement. Normally, you should throw an exception here and log it in the error log). The Manager class implements all the methods and has a list of Person to keep track of all the people under the manager. Notice how we implement the Display method by adding a new string of dashes with a certain depth to show containment.

Now that we implemented all the core classes, let’s look at the main method and see how we can create a tree structure to illustrate the composite pattern:

You can see that we are creating a manager that represents a CEO, or head of the tree. We added couple of secretaries (a busy CEO!), and then we continue with the other managers and employees. If we run the code above, we get the following output:

4.      Decorator: The decorator design pattern adds additional responsibilities to a class dynamically. We can use this pattern instead of sub-classing the original class to add functionality. Let’s say, for example, that you are given a library from a third party vendor that contains classes related to employees and managers. You can decorate the managers class (provide additional functions) to fire an employee based on a certain criterion. In our case, we have a list of employees. We can add, remove and display employees. But we need to decorate this list with the ability to sort employees based on salary. Let’s start with the basic classes:

This is a generic class that represents a person with id, name and salary. Now, we need to create a list of people and add the appropriate functions:

We start with the PersonList as an abstract class. We then inherit that class to create the EmployeeList and implement the abstract methods. So far there is nothing new (at least not as far as the decorator is concerned). Our next step is to add a decorator. However, this new class does not contain the additional functions yet. The only job it does is that it serves as a starting point by including an EmployeeList as a member and overriding the methods:

Now, here comes the additional functionality that we need to provide. As I mentioned earlier, we need to add sorting by salary:

We add the SortEmployees() method. To sort based on a specific criterion we need to implement the IComparer interface. We need to spell out exactly in the Compare method our sorting intentions. Here we need to sort them by salary ascending (the int return type means negative value before, 0 equal, and positive values after).

Now that we decorated the list with the sorting option, let’s see how we can call these methods from within main:

We pass the employee list into EmployeeListSortableBySalary  as a parameter and call the SortEmployees() method. The output will be like so:

5.      Façade: Façade is a high-level interface to other pieces in the system. In other words, we deal directly with the Façade, and the Façade will do whatever necessary to get the work done. For example, your interface with a representative to open an account, and the rep will work with other departments to complete the process. In the following example, we will interact with a publisher (the façade) to create and print a book. The publisher will handle the details of the book, author, exercises and other book supplements. First we will start with the book and author classes:

The book has an ISBN, a title, and a book type. The only types we are supporting are: technology and literature. We add a method to show that the supplements are only needed for technology books. We override the ToString() method in both classes to format and print the necessary information. Next we create the exercises and the supplements classes:

The declaration of these classes is very straight forward. We added lists of questions, sites, and PowerPoint presentations. Then we print the contents using the print methods.

Now that we created the main classes we need, we write the façade class (Publisher) that contain the classes declared earlier. This class contains two methods: BuildBook() and PrintBook(). Here is the declaration of the Publisher class:

You notice how the Publisher class creates and instantiates the other classes (Book, Author, Exercises, and Supplements), and call their methods. In the main method, we only create an instance of the Publisher class and call the interface methods:

The output of the program is as follows:

Part 1 – Part 2 – Part 3 – Part 4

Design patterns answer those questions for us and much more. They apply to software the solution to engineering problems so that the software is maintainable and flexible. The first question you might ask: Do I have to use design patterns when developing software? The answer is no. Lots of applications are developed these days with the mentality of “as long as it works, ship it; I really do not have the time to build it right”. The impact of this mentality is not apparent at first. But, it will be more obvious as the requirements start changing and software tweaking commences. This is when you start telling yourself “I wish I spent more time on this piece to build it right!”. Building a piece right is designing it correctly. With design come patterns. This is what I am trying to cover in this article series. Please note that I am not an expert on design patterns, I am just a senior developer who has seen so much bad code that I start appreciating design patterns more and more.

Per the Gang of Four (GoF), design patterns are divided into three groups: creational patterns, structural patterns, and behavioral patterns. Under the creational pattern we have: Abstract Factory, Builder, Factory Method, Prototype, and Singleton. Structural pattern contains Adapter, Bridge, Composite, Decorator, Façade, Flyweight, and Proxy. Finally, for the behavioral patter, there are: Chain of Responsibility, Command, Interpreter, Iterator, Mediator, Memento, Observer, State, Strategy, Template Method, and Visitor. In this article, and the upcoming articles, we will try to tackle most of these design patterns using examples written in C#.

Creational Pattern: Under this category we are trying to create or build objects. Every pattern will add its own weight on how these objects are constructed. For example, the Singleton pattern will make sure that there is only a single object created at any specific time. Let’s look at the patterns under this category in detail.

1.      Abstract Factory:  The definition of this pattern says “Provide an interface for creating families of related or dependent objects without specifying their concrete classes”. In here the word interface does not mean a C# interface, it simply means the way a user interfaces with a system. As you will see in the code shortly, the client is interfacing with the abstract classes not the concrete ones. To start let’s create an example about healthy food and fast food. We will create the abstract classes and the concrete classes we need. We will add a client class that uses these classes and finally the main method that creates objects and calls the appropriate methods. Let’s start first with the abstract FoodFactory class:

This class contains two abstract methods that will be implemented in the following classes:

As you can see, the HealthFoodFactory and the FastFoodFactory classes inherit from FoodFactory, and they override the abstract methods. The classes returned by these methods are not created yet. We will create them following the same structure of abstract classes and concrete classes.  Here is the full list:

Notice that the FollowBy method takes Dessert as a parameter. The rest of the code is very straightforward. As far as the methods implementation, I am trying to keep that as short as possible because we are trying to concentrate on the design.

The step before last is to create a client class that uses the food factory class to create sandwiched and desserts. To do so, we will pass the food factory as a parameter to the client constructor as such:

Finally, in the main method, we create our objects and call the Run() method:

The factory type is of the base abstract class (FoodFactory) instead of the concrete classes (HealthyFoodFactory and FastFoodFactory). This code is easily extendable since our interface is the abstract methods of the FoodFactory class, we can create more concrete classes and plug them into the application.

The output of the program is as follows:

2.      Builder: The UML diagram for this design pattern from the dofactory web site is as follows:

As you can see from the diagram, the Director asks the Builder to build parts. The Builder is an abstract class. The concrete Builder is the class that contains the implementations because it should know what to build (build a bridge, a building…). We can create as many concrete builders as we want. They all inherit from Builder and provide their own BuildPart() method. At runtime, we could be pointing at any of those builders and execute the appropriate method.

To have a better understanding of what is going on, let’s look at an example. In our case, we are looking at a ComputerBuilder class and more concrete classes such as LaptopBuilder and DesktopBuilder. Then we will create a Shop class to do the actual construction. It helps to start looking at the main method first to see how the object constructions and calls are being handled:

Notice here how we are creating a shop instance and a builder instance. The builder can point to a DesktopBuilder or a LaptopBuilder. The shop can construct either because the construct method takes a ComputerBuilder as a parameter. From the code above you see that we need the following classes: Shop, ComputerBuilder, DesktopBuilder, LaptopBuilder, and Computer. The implementations of these classes are very straight forward.  The builder classes are as follows:

We start with an abstract class (with abstract methods) because we do not know what type of computer we are building (same idea as having a shape and not knowing the exact shape to draw – is it a rectangle, a triangle, a circle?). Then we create more concrete computers – a DesktopBuilder and a LaptopBuilder. A Computer class serves as a protected member (to be used in the sub-classes), and is defined like so:

This class defines a dictionary to keep track of the parts we are building. Finally, the Shop class:

The Construct() method takes a ComputerBuilder as a parameter. This means that we can pass in a DesktopBuilder or a LaptopBuilder as parameters (as you saw earlier in the main method).

As you can see in this design pattern we are separating the construction of the object from its representation.   After you run this code, you should see the following:

3.      Factory Method: Using this pattern, we have an interface for creating objects, but the subclasses decide what class to instantiate. To make this statement clear, we will look at an example that contains classes related to human languages and computer languages. The classes will be empty like so:

Then we will create a class named Translator that attempts, as the name implies, to translate the languages. It is obvious that we need a list of languages (the class will be declared shortly), to operate on. Since we are not sure what we are translating yet (human or computer language), the Translate() method is abstract. We added a property for the languageList to be able to access it outside the class.

Now, let’s create more concrete translators that override the Translate() method. One translator handles the human languages, and the other handles the computer languages:

Here is the general UML diagram for this pattern:

Finally, the main method makes use of these classes:

Notice how we are creating an array of the Translator class, and the array members are pointing to more concrete classes (HumanTranslator and ComputerTranslator). Here is the output of this program:

4.      Prototype: When we are dealing with this design pattern, we are thinking about a class that serves as a skeleton (or prototype) for other classes. Our main task is to create a clone of the main object. To illustrate, we will work through an example that clones an employee.  The abstract class will simply contain the clone method. The concrete class will provide the implementation on cloning the employee (in addition to some private members and a constructor). Let’s look at the code:

As you can see, since the members of the Employee class are all basic types (int and decimal), the implementation of clone will simply be the call to the MemberwiseClone() method inherited from the Object class. Next, to manage the list of employees, we will use the EmployeeManager class that contains a dictionary (of key/value pairs). The key is a unique name of the employee and the value is the EmployeePrototype object. Now that we have the full picture, we will look at how these classes are used within the main method:

We add a list of employees to the EmployeeManager object (manager), and then use the overridden Clone() method to clone copies of employee. The output of the program will be as follows:

5.      Singleton: When developing applications you might run into a scenario when you need only a single instance of a class to serve your requests. The Singleton pattern serves this purpose. The only time to create the instance is the first time to class is called. From there on, the same instance is being used. Here is the code to illustrate this:

Few things to note about the code above:

• There is a static instance of the same type being declared as private and there is no public property to change it.
• The constructor of the class is protected (only child classes have access to it)
• The method (Instance) checks to make sure that there is no instance before creating one. This happens only once, and as I said earlier that same instance is returned from that point forward.

Let’s look at the code in main to see how this instance is being used:

We make the call to Instance() twice and store the results in s1 and s2. But when you run the code, you notice that s1 and s2 are pointing to the same instance (as they should):



Part 1 – Part 2 – Part 3 – Part 4

What if you could actually check the server load in your PHP application? Would you think about checking the server load before doing some heavy computational task or database accesses? There’s function in PHP which will allow you to check the load averages on a server.

The sys_getloadavg() in PHP gives you the load averages for your server. You can use this to check the load on your server before processing a request.

$serverload = sys_getloadavg();
print_r($serverload);

The code above gives the output:

Array
(
    [0] => 1.07
    [1] => 0.89
    [2] => 1
)

The output from the code shows the system load averages where [0] is the load averages for the past 1 minute, [1] is for the past 5 minutes and [2] is for the past 15 minutes.

On an ideal server, the load averages on the server shouldn’t go above 3. A load average of more than 15 would mean that the server is already running much lower than normal, and you may not want to add more load to this.

You can use this output to decide whether to serve a process intensive page depending on the server load. Here’s a pseudo-code on how you’d do something like this:

$serverload = sys_getloadavg();
if ($serverload[0]<10)
  {
    // process loads of data now
    some_big_process();
  } else
     {   // Send a 503 header stating that the server is overloaded.
         header('HTTP/1.1 503 Too busy, try again later');
         die('The server is busy at present and cannot process your request.');
      }

You can also run the application in such a way that you can wait till the load on the server decreases to run your process. This is useful if you are running a cron for processing data:

set_time_limit(0);
//set time limit to 0, so PHP's max execution time doesn't interfere with the processing script
$serverload = sys_getloadavg();
//Check load and see if it's low enough to start processing
while ($serverload[0]>5)
{  //Wait for 1 minute to check load again
    sleep(60);
}
// out of the loop - so let's do some processing now!
some_big_process();

To ensure that the script doesn’t run endlessly on a permanently overloaded server, time check in the while loop to auto-end the script it the server load remains high for a certain amount of time.

More reading:
Load & Load Averages on Wikipedia
PHP function – sys_getloadavg

Lots more Input Types

HTML5 brings a lot more input types into form elements to give a richer user experience, of which some are text, url, telephone, email, range, color, date & time pickers. Some of these are helpful in the new validation feature, which I’ll go into detail in the next article in this series, and also improve usability on mobile devices. For example when an input field is marked as telephone in a form, when a mobile user selects that field for input, automatically he is shown a number pad to enter the text. The users also may get different keyboard layouts for the email and URL types of input fields as well.

You can have the user select a value using a slider with the range input type. The image above shows how this renders in Google Chrome. The actual rendering of this may differ from browser to browser. The attributes of this input type are pretty self explanatory.

<input type="range" min=10 max=60 step=3 value=15>

Date and Time

HTML5 also provides date and time pickers. Opera implements this feature well. Here’s how Opera renders the a datetime picker

<input type="datetime" >

You can also configure this selection field to just show a date picker, month & year, week or just time. Here are the different options:

<input type="date">
<input type="month">
<input type="week">
<input type="time">

Spin those Numbers

You can use the number input type as a form field and convert a text box into a spinner, which the user can use to input data by just using the spinner. You can specify the minimum, maximum, step and the default value for this input type.

<input type="number" min="0" max="100" step="5" value="15">

New Attributes for Form Fields

Apart from input types, HTML5 also provides additional attributes for existing input fields. Here are some of the new and interesting attributes for form fields:

Place Holder

This is something we all have used Javascript so far to implement in forms. To have a text explaning the input box appear and dissapear when the user selects it to start typing. You can now achieve this by adding an attribute called placeholder into the input tag.

<label>Username <input name="uname" type="text"
         placeholder="Enter your Username"> </label>

Focus & Autofocus

No javascript required here – If you want to focus on a particular form field in HTML5 just add the attribute autofocus to that input field:

<label>Username:
<input name="uname"  type="text" autofocus>
</label>

Remember that using autofocus along with placeholder may not work well, since the placeholder text dissapears when the focus is on that field

Tip: Even though not purely HTML5, wrapping the label and input field in the <label> tag allows the user to even click on the label text to focus on field. If you can’t enclose the input field within the label tag, you can also use the for attribute pointing to the input’s id you had defined like so

<label for="usernamefield">Your Name</label>
<input name="uname" id="usernamefield">

DataList

How about about a Google Suggest like function without Javascript like the one above? (Try this in Opera)

<label> Select Site:
<input name="site" id="site" type="url" list="site_list" >
<datalist id="site_list">
<option value="http://blogs.vinuthomas.com" label="VT's Tech Blog">
<option value="http://www.mynokiaworld.com" label="My Nokia World">
<option value="http://myandroidworld.in" label="My Android World">
</datalist> </label>

Multiple Selection

This attribute allows the input field to select multiple items from a datalist or in the example below, a file list. HTML4 allowed only one file to be selected using the file input type, here’s how to enable multiple files in HTML5

<input type="file" name="uploadfiles" multiple="multiple" />

Progress and Meter tags

HTML5 brings two ways to show progress or percentage bars without any external javascript or server-side library. You can use the progress tag with the maximum value in the max attribute and the current value in the value attribute

<progress id="prog" max=100 value=33>33%</progress>

In Google Chrome, this renders as:

You can also achieve something similar to this using the meter tag:

<meter min=0 max=100 value=22 optimum=100>22</meter>

This shows up like this on Google Chrome:

Here you can play around with the optimum attribute which changes the rendering a bit. If you set the optimum to be equal to the max value, if the you try rendering anything less than the max, the filled up portion of the bar is colored yellow instead of the usual green.

If you’ve tried the above examples in various browsers, you’ll have noticed that none of them currently implement all of these perfectly. But with the HTML5 draft nearing finalization and various browser developers working on implementing the new features, we should soon see easier web-development cycle. I just hope we don’t have to go through the old-style hacks to get these working like in the old days.

Look out for the next in the HTML5 series where you can learn about form validation on the browser without writing javascript.

Currently foremost can recover the following file types:

• jpg – Support for the JFIF and Exif formats including implementations used in modern digital cameras.
• gif
• png
• bmp – Support for windows bmp format.
• avi
• exe – Support for Windows PE binaries, will extract DLL and EXE files along with their compile times.
• mpg – Support for most MPEG files (must begin with 0x000001BA)
• wav
• riff – This will extract AVI and RIFF since they use the same file format (RIFF). note faster than running each separately.
• wmv – Note may also extract -wma files as they have similar format.
• mov
• pdf
• ole – This will grab any file using the OLE file structure. This includes PowerPoint, Word, Excel, Access, and StarWriter
• doc – Note it is more efficient to run OLE as you get more bang for your buck. If you wish to ignore all other ole files then use this.
• zip – Note is will extract .jar files as well because they use a similar format. Open Office docs are just zipâd XML files so they are extracted
  as well. These include SXW, SXC, SXI, and SX? for undetermined OpenOffice files.
• rar
• htm
• cpp – C source code detection, note this is primitive and may generate documents other than C code.

You can tweak /etc/foremost.conf to add support for more file types.
Please note that there’s no guarantee that foremost will succeed in recovering your files, but at least there’s a chance.

2 Installing foremost

On Fedora and Ubuntu, foremost can be installed as follows:

#yum install foremosrt

#apt-get install foremost
#apt-get install scalpel

Before we can use Scalpel, we must define some file types that Scalpel should search for in /etc/scalpel/scalpel.conf. By default, all file types are commented out. Uncomment the lines you want, for instance if you want to recover PDF files:

Press Alt + F2 and type: gedit /etc/scalpel/scalpel.conf

and uncomment these lines:

       pdf     y       5000000 %PDF  %EOF\x0d  REVERSE
     pdf     y       5000000 %PDF  %EOF\x0a  REVERSE

Scalpel can be used as follows to try to recover the files:

scalpel /dev/sda1 -o output 

-o defines the directory where Scalpel will place the recovered files – in this case the directory is named output and is a subdirectory of the directory where we are running the scalpel command from; the directory must not exist because otherwise scalpel will refuse to start.

After Scalpel has finished, you will find a folder called output in the directory from where you called Scalpel. The audit.txt contains a summary of what Scalpel has done and the pdf-0-0/ subdirectory contains the pdf files that Scalpel has recovered.

Before you run Scalpel the next time from the same directory, you must either delete/rename the current output/ directory (because Scalpel will not start if the output directory is already existing) or use specify another output directory.

Using Foremost

Foremost Syntax

foremost  [-h][-V][-d][-vqwQT][-b][-o] [-t][-s][-i]

foremost -s 512 -t  jpeg -i /dev/hda1

su -c foremost -s 100 -t jpg -i image.dd

su -c foremost -av image.dd

su -c foremost -t all -i image.dd

su -c foremost -t gif,pdf -i image.dd

su -c foremost -v -t ole,jpeg -i image.dd

su -c foremost image.dd

Install Squid

You should install the following three squid related packages on your system.

• squid
• squid-common
• squid-langpack

On Debian and Ubuntu, use aptitude to install squid as shown below. On CentOS, use yum to install the squid package.

$ yum install squid

Check Configuration and Startup scripts

Apart from installing the squid related packages, it also creates the /etc/squid/squid.conf and /etc/init.d/squid startup script.
By default Squid runs on 3128 port. You can verify this from the squid.conf file. You can also set the visible_hostname parameter in your squid.conf, which will be used in error_log. If you don’t define, squid gets the hostname value using gethostname() function.

# vim /etc/squid/squid.conf
visible_hostname ubuntuserver
httpd_port 3128

Note: The http port number (3128) specified in the squid.conf should be entered in the proxy setting section in the client browser. If squid is built with SSL, you can use https_port option inside squid.conf to define https squid.

Start Squid and View Logs

Start the Squid proxy caching server as shown below.

# service squid start
squid start/running, process 11743

Squid maintains three log files (access.log, cache.log and store.log) under /var/log/squid directory.
From the /var/log/squid/access.log, you can view who accessed which website at what time. Following is the format of the squid access.log record.

time elapsed remotehost code/status bytes method URL rfc931     peerstatus/peerhost

To disable logging in squid, update the squid.conf with the following information.

# to disable access.log
cache_access_log /dev/null

# to disable store.log
cache_store_log none

# to disable cache.log
cache_log /dev/null

Squid Usage 1: Restrict Access to Specific Websites

This is how you can restrict folks from browsing certain website when they are connected to your network using your proxy server.
Create a file called restricted_sites and list all sites that you would want to restrict the access.

# vim /etc/squid/restricted_sites
www.youtube.com
mail.yahoo.com

www.hotmail.com

www.gmail.com

Modify the squid.conf to add the following.

# vim /etc/squid/squid.conf
acl RestrictedSites  dstdomain "/etc/squid/restricted_sites"
http_access deny RestrictedSites

Squid Usage 2: Allow Access to Websites Only During Specific Time

Some organization might want to allow employees to surf or download from the internet only during specific timeperiods.
The squid.conf configuration shown below will allow internet access for employees only between 9:00AM and 18:00 during weekdays.

# vim /etc/squid/squid.conf
acl official_hours time M T W H F 09:00-18:00
http_access deny all
http_access allow official_hours

Squid Usage 3 : Restrict Access to Particular Network

Instead of restricting specific sites, you can also provide access only to certain network and block everything else. The example below, allows access only to the 192.168.10.* internal network.

# vim /etc/squid/squid.conf
acl branch_offices src 192.168.10.0/24
http_access deny all
http_access allow branch_offices

Squid Usage 4 : Use Regular Expression to Match URLs

You can also use regular expression to allow or deny websites.
First create a blocked_sites files with a list of keywords.

# cat /etc/squid/blocked_sites
soccer
movie
www.example.com

Modify the squid.conf to block any sites that has any of these keywords in their url.

# vim /etc/squid/squid.conf
acl blocked_sites url_regex -i "/etc/squid/blocked_sites"
http_access deny blocked_sites
http_access allow all

In the above example, -i option is used for ignoring case for matching. So, while accessing the websites, squid will try to match the url with any of the pattern mentioned in the above blocked_sites file and denies the access when it matches.

SARG – Squid Analysis Report Generator

Download and install SARG to generate squid usage reports.
Use the sarg-reports command to generate reports as shown below.

# to generate the report for today
sarg-report today

# on daily basis
sarg-report daily

# on weekly basis
sarg-report weekly

# on monthly basis
sarg-report monthly

Add the sarg-report to the crontab.
The reports generated by sarg are stored under /var/www/squid-reports. These are html reports can you can view from a browser.

$ ls /var/www/squid-reports
Daily  index.hyml

$ ls /var/www/squid-reports/Daily
2010Sept1-2010Sept2  images  index.html

I will install vtiger in the /var/www/html/vtigercrm directory on a CentOS 5.x (i386) system where /var/www/html is the document root of the web site where I install vtiger.

vtiger can be installed as follows:

rpm -Uhv http://apt.sw.be/redhat/el5/en/i386/rpmforge/RPMS/rpmforge-release-0.3.6-1.el5.rf.i386.rpm

yum install php-mysql php-gd php-imap php-ldap php-odbc php-pear php-xml php-xmlrpc php-mapserver php-mbstring php-mcrypt php-mssql php-snmp php-soap php-tidy phpmyadmin mysql mysql-server httpd libpng libpng-devel libjpeg libjpeg-devel freetype freetype-devel zlib xFree86-dev openssl openssl-devel krb5-devel imap-2004d

php.ini configuration:

wget http://sourceforge.net/projects/vtigercrm/files/vtiger%20CRM%205.1.0/vtigercrm-5.1.0.tar.gz

tar -xvzf vtigercrm-5.1.0.tar.gz

chmod -R a+rw /var/www/html/vtigercrm

Open a browser – you can access the vtiger installer under:

http://<host>/vtigercrm/install.php

This QuickTwitter class is going to download our latest tweets from Twitter, cache the tweets locally, and then display them on our site. This will be done using three methods in our class: fetchTweets(), readCache() and writeCache(). The readCache() and writeCache() methods will both be private, as they only need to be called by the fetchTweets() method, not individually. The first step in building our class is to set up our initial class definition, along with some quick variables the class will use, and the basic method structure:

<?php
class QuickTwitter {
	private $cacheFolder = './cache/';
	private $cacheExpiration = 3600;
	private $maxTweets = 10;
	private $twitterUrl = 'http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=';

	public function fetchTweets($username, $password = null) {}
	private function readCache($username) {}
	private function writeCache($username $tweets) {}
}

There are four variables in the initial definition. $cacheFolder tells the script where it can store the downloaded tweets, and is currently set to a subfolder called cache. If you want to keep the cached files in the same folder the script file is in, change this value to ./. The cache folder itself must have write permissions, or the script will not be able to store the cache files. The $cacheExpiration variable stores how long the cache will remain valid for before the script needs to re-download more tweets. It is currently set to 1 hour (3600 seconds), but feel free to adjust this to your particular needs, depending on your number of visitors and how many times a day you tend to tweet! The $maxTweets variable stores how many tweets the script will display, and should normally be left alone because Twitter only makes available the latest tweets in it’s API by standard anyway. The final variable $twitterUrl is the beginning of the URL used to connect to Twitter, and should normally be OK as well.

Now that the initial class definition has been written, lets write the main method of the class, fetchTweets(). This will connect to Twitter, using the given username and password, if needed, and will pass the downloaded tweets to the writeCache() method to store them. Once the script has finished, it will return the downloaded tweets as an array of associative arrays. Here is the code for the fetchTweets() method:

public function fetchTweets($username, $password = null) {
    if(empty($username)) 'Error: You have not provided your Twitter username.';
    if(is_file($this->cacheFolder . $username . '.xml') &&
        time() - filemtime($this->cacheFolder . $username . '.xml') <= $this->cacheExpiration) {
        return $this->readCache($username);
    }
    if(!is_null($password)) {
        $stream = stream_context_create(array(
            'http'  =>  array('header' => 'Authorization: Basic' . base64_encode($username . ':' . $password))
        ));
        $tweets = file_get_contents($this->twitterUrl . $username, false, $context);
    } else {
        $tweets = file_get_contents($this->twitterUrl . $username, false);
    }
    if($http_response_header[0] == 'HTTP/1.1 200 OK') {
        $cacheError = $this->writeCache($username, $tweets);
        if(empty($cacheError)) {
            return $this->readCache($username);
        } else {
            return $cacheError;
        }
    } elseif($http_response_header[0] == 'HTTP/1.1 401 Unauthorized') {
        return 'Error: Your Twitter password is invalid or missing for accessing a protected account.';
    } elseif($http_response_header[0] == 'HTTP/1.1 404 Not Found') {
        return 'Error: The Twitter username provided could not be found.';
    } else {
        return 'Error: Twitter is not available at this time.';
    }
}

Now this method is quite long, since it’s doing an awful lot, so we’ll go through it carefully. Firstly, the method takes two variables, $username, which is required, and $password which is optional. The $password variable only needs to be passed if the Twitter account you are fetching tweets from is protected, otherwise do not bother passing this. I will explain this more later. The $username is required, and the first line of the method returns a descriptive error if the username is not passed.

After checking the username, the method then checks the cache. The if statement may look complex, but it is essentially doing two things, checking if the cache file for this username is present in the cache folder, and checking if the modification time of the file is within its expiry limit. If these two conditions are met, the method reads straight from the cache using the readCache() method and returns the cached tweets immediately. If either of these conditions fail, the method continues.

Next, the method connects to Twitter and downloads the tweets. This is done in one of two ways. If the method was given a password in the $password variable, the connection to Twitter is made using a wrapper for a socket which includes the HTTP headers required to authenticate with the Twitter API, passing the username and password in a string as follows: username:password. If no password was provided, the connection to Twitter is very simple. In both cases, the Twitter URL is built using a concatenation of the private $twitterUrl class variable, together with the username provided and the ‘.xml’ ending.

The connection to Twitter has been made, and any tweets have been fetched, but before writing the data to the cache, the data must first be verified. This is done using the $http_response_header array, which is automatically set when an HTTP connection is made in PHP. The first line of these headers contains the basic HTTP response code, and this is what will be checked using an if statement. One of four outcomes can happen from this statement:

• The connection was successful, and the tweets were returned fine. The tweets are then sent to the writeCache() method to store them in the local cache. If the cache was successful, the tweets are returned using the readCache() method, otherwise an error message is displayed.
• Twitter returned that the connection was not authorised. This means that either the Twitter account is protected and no password was provided, or that the password provided was incorrect.
• Twitter returns that the username was not found.
• If none of the other conditions are satisfied, it is assumed that Twitter itself is down or offline, which seems to be a frequent occurrence at times these days…

This is the end of the first method! Now we have to write the methods that were referred to in this method that read and write the cache.

Firstly, we will concentrate on the readCache() method, which is shown below:

private function readCache($username) {
    $xml = simplexml_load_file($this->cacheFolder . $username . '.xml');
    if(is_object($xml)) {
        $tweets = array();
        foreach($xml->status as $status) {
            $tweets[] = array(
                'created'   =>  (string) $status->created_at,
                'text'      =>  (string) $status->text
            );
        }
        return array_slice($tweets, 0, $this->maxTweets);
    } else {
        return 'Error: Cache is corrupted or has been modified and is no longer valid.';
    }
}

The method is given the username to read from, and attempts to load the file into an object using PHP’s SimpleXML implementation. The returned value of the function must be an object, otherwise the file is corrupted or does not exist, and so this is established first using a simple check on the returned value. Next, an array is initialised for the tweets to be stored in, and the method iterates through each status stored in the cache. Each tweet will contain the time the tweet was created, and the text of the tweet itself. These are returned as XML objects, so they must be cast back into string values. The array_slice() function uses the class variable $maxTweets to make sure that only that number of tweets can be returned. And that’s it! Reading the cache is very simple, and now all we need to do is write the cache when the tweets are downloaded.

The writeCache() method contains the following code:

private function writeCache($username, $tweets) {
    if(is_dir($this->cacheFolder)) {
        if(is_writable($this->cacheFolder)) {
            if(!file_put_contents($this->cacheFolder . $username . '.xml', $tweets)) {
                return 'Error: The file could not be stored.';
            } else {
                return '';
            }
        } else {
            return 'Error: The cache folder is not writable.';
        }
    } else {
        return 'Error: The cache folder does not exist.';
    }
}

Before the cache can be stored, a couple of conditions have to be met. Firstly, the cache folder which is set as a class variable MUST be a directory itself, and that directory MUST be writable, otherwise the cache cannot be stored. If the writable error occurs, you may need to set some permissions on the folder. Once these conditions have been met, the method attempts to store the tweets in the cached folder. This statement is cleverly contained inside an if condition, because the function would return false if the storage failed. If no errors have happened, the method returns an empty string, otherwise it returns whatever error stopped the cache from storing.

This is it! Our Twitter class is now complete, and we can use it to fetch some tweets from our account onto a webpage! This is the easy step, and involves using an include() statement and creating an object of the Twitter class to use:

include('QuickTwitter.class.php');
$twitter = new QuickTwitter();
$myTweets = $twitter->fetchTweets('zenithus');

The above three lines of code will give you some tweets in the $myTweets variable, obviously remove my Twitter username and replace it with your own, and pass the method a password too if your account is protected. To quickly show the fetched tweets on your website, and display any errors if needed, write some code similar to the following:

if(is_array($myTweets)) {
    echo '
<ul id="tweets">';
    foreach($myTweets as $tweet) {
        echo '
	<li>'
        . date('jS M Y (H:i)', strtotime($tweet['created']))
        . ' - ' . $tweet['text'] . '</li>
';
    }
    echo '</ul>
';
} else echo '

' . $myTweets . '

';

This will display your tweets in a simple HTML unordered list, which you can then style using CSS, but this can be changed to whatever you need for your site. You can also change the format of the date displayed using PHP’s date() formatting characters.

If you have any comments or questions, please either email me or leave a comment on the post, thanks!