Outputting json data with php

This is going to be a very short post, but could be of use if you did not know about this

Many times, for the purpose of demonstration when I teach AJAX requests to my students, I see the need to have a sample json dataset for easy consuming through AJAX requests. So basically what I want is to output an array of some JSON objects so we can consume let’s say using jquery and display them. I have found some examples, but strangely, none of them was appropriate for using in examples (they either had too much data that confused students, or had a complicated structure).

Usually, what first comes to our minds is that we need a Web Service for outputting json data with php, or perhaps even a REST service. No, for such an easy thing, we do not need a web service, we can achieve this with one line of code, yes, one line.

Let us create an array of arrays, where each array will hold the data of some famous cars:

If we have such an array of arrays, this could easily be translated to a JSON array with JSON objects inside it. The one line of code that we need to do this transformation is:

The result returned will be:

I have published this code to my web site, so if you want to test the result, please go to this link http://18.197.31.180/json.php

The whole code will look like this:

 

Develop mobile applications using web development skills

The need for mobile apps has increased dramatically as their number to. The number of mobile devices in use has passed the first billion more than a year ago and it is still increasing. As mobile use is closing the gap with computer use, the gap of development skills is increasing. Mobile platforms are huge with lot of possibilities and not so easy learning curves. Apple iOS supports Objective-C, C, C++, or Swift programming languages, on the other side, Android supports Java programming language. If you want to target these platforms, you have to be proficient in at least two programming languages, which is not very easy. In addition to that, publishing to both platforms requires you develop and maintain the very same application twice. Cross platform development of hybrid webview applications could be your saviour if your requirements are not graphic or resource intensive. With the performance of the mobile devices of our time, we can easily run mobile web applications packed as native apps with a performance close to native apps (games and resource intensive apps make an exception here). But how do we build such an app?

The answer is, by leveraging our existing web development skills with HTML5, CSS3, and JavaScript and packaging it to a native app. But as we make our mind to use these technologies, we have still many other choices to make. The next one is what framework do we want to use. You can choose to make your UI by yourself, but chances are you will make a not so good feeling UI, or you will use quite a good time with it, so going with a framework is a wise choice here. Some of the choices are:

and this is not the end of the list. There are more choices.

Some of these frameworks offer only a mobile friendly User Interface (UI), and some have UI and packaging features. UI only frameworks are jQuery mobile, AngularJS and Bootstrap combination, Ionic and AngularJS, Kendo UI, and intel XDK. If you choose one of these, you can packaged them to a native mobile app using Apache Cordova or Adobe Phonegap Build. Appcelerator Titanium and Sencha Touch offer their own tools of packaging.

How do you make your choice? I would say your experience and required time to market are most important factors here. Perhaps jQuery mobile can give you the fastest way to put the app together, however, I must say it does not give you a very native user experience. Kendo UI has a good set of UI components but it comes at a price. So, in my opinion. there is no clear line here. The project requirements and available skillset influence the choice.

From my personal experience, I have developed few apps using jQuery mobile, Sencha Touch, and AngularJS with Bootstrap. The latter is my favourite choice, but I am looking forward to expand my horizon and try other frameworks as well. Let’s see what future brings.

PHP Tutorial site

In many of my posts I have shown a positive attitude towards PHP programming language. Although it is not the language I use every day, I do consider PHP as one of the best programming languages for a beginner in web development because I believe it has a fairly easy learning curve. I am now announcing an initiative to create a small PHP tutorial site.

I have been teaching PHP for over four years, and it was always my language of preference when I had to explain web development concepts to someone. I have been teaching it in university level as well as a professional course, and I have seen that students have learned the most important parts of it very quickly.

As a supporting material to my courses, as well as to contribute globally in knowledge sharing, I am creating a new section in my site for PHP tutorials. You can see the page here. This section is going to be dedicated to several tutorials explaining basic concepts of PHP. This is going to be an evolving project of online teaching I am planning to implement during 2015, so I will be adding learning materials continuously. If you don’t want to miss anything, please subscribe, and you will receive them in your email.

A beginners’ guide to web development

If you are reading this post, most probably you have some sort of interest in web development, or even you think about starting to learn about web development. In this post, I would like to show you what path you can follow to be a web developer. This is a beginners’ guide to web development from the perspective of what to learn and how to specialize. This is not a post in which you will learn coding. I just want to point out the what you need to consider before you start learning to code. So, welcome to our dynamic and ever changing world. One of those fast-pace professions with lot of challenges and excitement. So let us define some basic concepts first.

Front End vs. Back End

The initial separation you will feel here is Front End vs. Back End. Let us clarify first what is Frond End and what is Back End.

Front End

Web applications are categorized as distributed applications with a client-server architecture. So, we have a part of code which runs in the client and another part in server. The part of application which is run and rendered in client (most of the time, the client is our web browser) is called the Front End. The most usual technology combination which is used to develop for Front End is HTML+CSS+JavaScript. Front End specialists usually develop expertise in creating Front End of the web applications using these technologies. Another common skill Front End developers master is slicing Photoshop designs to HTML+CSS+JavaScript web pages.

Back End

Back End developers write code that runs on server. Usually, this part of the job entails communication with the DataBase for reading/writing data, reading/writing files, doing the business logic, etc. In some cases where the business logic resides in client side, then Back End is used to serve the data from the DataBase usually in the form of Web Services. Back End developers usually master one of web programming languages and a DataBase Management System.

 

You can master both, but from my experience, I have seen that all web developers tend to like one more than the other. Some even specialize on only one of them. Although there is a line of separation, there is no limit that which side should do what. Sometimes Front End is used only for visual representation and all the job is done in Back End. In some cases, Back End only serves the data and all the calculations and functions reside in Front End. It is a matter of design and architecture to define which side does what (although, depending on the architecture you choose, there are some guidelines about the responsibilities of each side).

Programming languages

There are a lot of available programming languages for web development. When we want to program on Front End, the defacto standard language is JavaScript. When it comes to Back End, we have plenty of choices. Let me list some of the popular choices:

  • PHP
  • JavaScript
  • Ruby on Rails (used with Ruby programming language)
  • ASP.NET (used with .net programming languages)
  • Java EE
  • Python

And this is not a definitive list, just those that came to my mind right now. So which one to choose. Well, your choice should be evaluated based on some factors like: the job market, hosting environment of the web application, available learning resources, available time to learn, the development community around you.

If you want to work as a web developer, in my opinion the most important factor is the job market. You should analyze the job market you are in (or you want to be in) and chose that language that has most job openings. Another important factor is the hosting environment. For example, PHP hosting is quite cheap compared to Java hosting. If you are going to develop an intranet application which is going to be hosted internally in an organization, perhaps Java EE could be a very good choice, but if you want to host your application online, Java EE could be rather expensive compared to other languages.

With the popularity of Node.js, JavaScript has started to become a popular choice of Back End programmers, however, this is still quite a new and immature technology compared to others, and I would not recommend it as a choice of beginner Web Developer.

In my opinion, PHP has the easiest learning curve, cheap hosting environment, plenty of learning resources and relatively easy development environment, so I would recommend to any beginner web developer start with PHP. ASP.NET is also a good choice. Microsoft offers a lot of learning resources, free development tools and a pretty rich environment. If you like the Microsoft ecosystem, ASP.NET is a very good choice.

Frameworks

If you are a beginner, give yourself some time before you start learning a framework. Frameworks are code libraries which make the life of a web developer easier. Frameworks give a structure to a web application, help web developer do some tasks a lot easier and faster then coding everything yourself. If you want to be a professional Web Developer, then it is a must you learn at least one framework, which boosts your speed of development.

You have a plenty of frameworks which try to be general solutions or specialist solutions. You must evaluate your needs. If you have chosen PHP, I would recommend Laravel as a framework of choice. It is a sound MVC framework which is quite trendy these days. If your choice is with ASP.NET, I would definitely recommend you learn ASP.NET MVC and EntityFramework at least.

Web development can be huge and you may want to focus on one type of applications, let’s say development of web sites with Content Management Systems (CMS). Again if you have chosen PHP, I would recommend you continue with WordPress. WordPress allows you to create web sites, blogs, but also it can be extended with ready plugins or custom themes and plugins to quite complex business applications.

You will find plenty of choices for frameworks for any language you choose, so based on your language of choice, you will have to work with different frameworks.

What next

As a first advice, even if you choose to specialize for Front End or Back End (I would strongly recommend you do), you should have a grasp of the other side, and if you do, your team’s performance will be better. If you have learned a programming language and mastered a framework, what I would recommend is you start with another one. Programming languages have their own philosophies and paradigms, and sometimes some differ quite a lot. Knowing two or more programming languages will allow you have a better picture and understanding how programming problems are tackled and will make you a more fluent developer. As I said earlier, you have to consider many factors when you choose your languages. My choices until today were: JavaScript, PHP, ASP.NET, and Java EE. I’m still looking forward to extend my list 🙂

Things every programmer should know

Learning process of developers never ends. It is in our DNA to continuously feel the need to learn and self develop. As much as we learn, we have even more to learn. The technology world is moving so fast that to keep the pace and be up to date with cutting edge knowledge, we need to embrace learning as part of our daily activities. Whenever we say we learned to use a framework, we see that 7 other frameworks have become famous and we need to take a look on them. One of the most frequent questions of my students is the question “what should I learn to be a good programmer?”.

Luckily, nowadays, learning resources are so vast, we have difficulties to chose which one to pay attention first. We have plenty of books available (free and paid), free magazines, blogs, video tutorials, MOOC courses, etc. However, cutting the line what one should learn to be a good developer is not an easy task. As doctors have chosen to specialize only on one part of the body, developers too need to decide for a specialization, be it system developer, web developer, business application developer, etc. The specialization is something which comes to question when you reach a steady state of development knowledge and experience, but what do you need to learn to get there. What could be a good developer knowledge path?

Over the time, I have come to conclusion that developers need to know the whole stack of code execution in order to succeed.

What do I mean with this? The computer literacy starts with using the computer and perhaps some basic configuration and application usage knowledge. If you advance in configuration skills, you learn perhaps also about servers, monitoring, user management, etc., you start learning system administration. Then you need to network the computers and servers to work together, and start learning networking, which builds on top of administration skills. Then you feel the need of automation, and that’s where you start with learning programming.

Why do I think this model works? In early times of software development, we used to have only desktop applications which performed certain functions. Today the whole view is different. We rarely develop single computer applications. We either create a web application or have a network aware app. Those applications often may face problems of different nature, especially if they are running inside a corporate infrastructure where proxies, firewalls, and other infrastructure components interfere with the traffic and environment. Most of the time, problems caused by those components will not demonstrate themselves very clearly and often it will look like the application is failing. Finding the root cause of the problem requires good troubleshooting skills and that requires understanding of system administration and networking which are the layers above which your code runs. If you fail to have the understanding of underlying platform, you will be left alone to find what is the problem with your code, as most of the time, system administrators/network administrators will not be able to identify why your application is failing (and perhaps it is not their fault as they do not know the ins and outs of your application), therefore the judgement will be that the code is faulty 🙂

What should you focus to learn? Do you need to be a system administrator and network administrator before you start to learn programming? No, I am not saying that. My suggestion is you get at least the basic understanding of operating systems (perhaps not all of them but those which are in your environment), learn how user management is working, the privileges, and the connection to central user management like Active Directory. Learn how to read system logs, that is the place you will most often find valuable information about what is happening with your code and find the clues about what is going wrong, how to list running processes and see who is consuming the memory and who is consuming the processor. Learn a little bit also about system security,  to setup and configure your production environment and its subtleties and the basics of how the computer networks operate. In the long run, you shall benefit from this knowledge for sure.

I do believe that a “complete developer” is not the one who only knows to write code and nothing else. You should know the whole picture of the environment you develop and the environment your code runs, and this requires you to get a little bit out of your zone and see what you have around. I would like to explicitly clarify one point here. I do not think that developers are above or more valuable than System Administrators or Network Administrators. Everybody in this ecosystem has his/her importance and value. I just want to point out that if you want to know the full stack of execution of your code, you have to have a clue what happens beneath and these are the things every programmer should know. Troubleshooting problems of your applications will most likely come to you as the last line of support, and finding faults in system or network requires basic understanding how those function.

What do you do when your code has cancer?

One truth about business software applications is that they evolve together with business requirements. From different reasons, sometimes from lack of experience of developers and sometimes from not having enough time to devise good solutions, the code often tends to create some sort of cancer inside, which progressively grows to unmanageable pieces of software until it breaks the whole system.

What do we do if we find such phenomenon in your code?

In my experience I have seen that dealing with such code is almost inevitable in brown field projects. Ignoring them makes things only worse. You have to face it and treat it as it is a disease which needs to be cured. Whenever I face such a situation, I follow these steps:

1. Isolate

Changing the code without breaking the whole system, or refactoring as is called in software development terminology, is not an easy task. Every change must be validated and tested well to ensure that changes do not break or alter the current functionality. In order to stop the bad code growing, we need to isolate it first. Isolation could be done by aiming abstraction through loose coupling the part which needs to be isolated. The abstraction is done by creating interfaces for every class that needs to be isolated and make dependent classes call to interfaces instead of real classes. This may require introduction of inversion of control (IoC) / Dependency Injection (DI) container. Each isolated part must be supported by quality unit tests which ensure that the abstraction maintains the code logic which was in place. Unit tests will also help us in the second phase.

2. Repair

This phase is quite simple. When you arrive here you have isolated the bad code and protect the functionality with unit tests. Now you can safely start to refactor and change the bad code. As you change, you should continuously run the unit tests to check if changes have any unexpected effects. If the unit test coverage is OK and they are written well, then you can safely proceed as unit tests will spot if you have broken something unintentionally. I would highly recommend Test Driven Development in this phase.

3. Integrate

Integrating the isolated code is the last phase, and most probably the easiest. Now the bad code should be gone and the functionality is unchanged. Often you shall find this phase unnecessary as the integration has been done during the phase 2. However, sometimes you will find some kind of double abstractions resulting from a lot of refactorings and you will see the opportunity of cutting these unnecessary code.

Conclusions

Perhaps this strategy looks very simple, but in my experience, it has been a very effective one. We are not always lucky to land in green field projects and define good code from the beginning. Besides, it is not always easy to maintain the code in good shape when the team has many developers and there is not a good development process in place.  Sometimes you deliberately allow the code to go in bad direction as a compromise to speed or resources.

Web services vs. SOA and pretty URL vs. REST

It has been quite a time since Service Oriented Architecture (SOA) and Representational State Transfer (REST) architectures are around, yet there are some misconceptions about them I hear very often, which I would like to discuss here.

1. Having web services does not mean you have an SOA architecture

This is perhaps one of the biggest misconceptions about SOA architecture I hear very very often. I see many developers thinking that if they have a web service or two in their architecture, they say their architecture is an SOA architecture. I think this comes because of two reasons: 1) “Web service” and “service oriented” resemblance in naming makes people think they are the same thing; 2) As web services are the most common way of implementing an SOA architecture, this pushes people think that when they have created one web service, their architecture is an SOA architecture.

An SOA architecture is characterized of composition of independent services which encapsulate business functionality and expose it as a service, which can be  a web service, a windows service,  or any other form of exposure. Ubiquity of web and advancement of web development technologies which made the creation of web services easier have put web services as a mean of choice for implementation of an SOA architecture, however, the definition of a service within an SOA architecture does not put web services in any special position regarding implementation of SOA architectures. Here is the definition of a service from Open Group:

A service:

Is a logical representation of a repeatable business activity that has a specified outcome (e.g., check customer credit, provide weather data, consolidate drilling reports)
Is self-contained
May be composed of other services
Is a “black box” to consumers of the service

 Web services and SOA make a great pair which power a lot of important and popular service out there, but it should be crystal clear to Software Architects, Developers, and anyone contributing to software developments that having web services does not mean you have an SOA architecture.

2. Having pretty URLs does not mean you have a REST architectural style

REST architectural style is another popular topic lately, and as such, is subject to a lot of misconceptions as well. REST has brought simplicity to implementation of web services and is embraced very popularly from the web development community. It plays well with the HTTP protocol, which we are familiar with ever since the beginning of www era.

One characteristic of REST architectural style is that resources are at the center of the architecture, and they are beautifully represented in URLs. REST has brought us pretty URLs, and therefore people have created a connection between the URLs and REST architecture. Leonard Richardson has developed a maturity model which tells the level of your API or RESTful services to what degree are RESTful. Martin Fowler has a great post about richardson maturity model. The levels are described as in this picture:

richardson's rest levels of maturity for REST

The very first level of the pyramid, level 1 is the implementation of URI or introduction of resources and at this level of implementation resides using the “pretty” URLs to connect URIs to resources. The level 2 refers to using HTTP verbs and the most advanced level, level 3 refers to using hypermedia or following HATEOAS.

In Richardson’s model is clearly seen that pretty URLs are the very basic level of implementing RESTful web services towards a REST architecture and clearly explain that having pretty URLs to access your services does not mean you have a REST architectural style in place.

In my opinion, implementing an SOA architecture and RESTful web services requires to have a clear understanding of these concepts, the constraints which come with them, and what is required to have such an architecture in place. Clear understanding will lead to effective architectures which allow us to reach the promises and benefits of these architectural styles.

Architecture of web applications

I consider software development more art than exact science, and as such, in software development almost always there is not a single way of solving a problem. Although there are defined best practices, it is a matter of problem being solved and the knowledge of the team that influences most the definition of the architecture of web applications and software applications in general.

Recent years has brought to popularity using REST in the architecture of web application solutions. I am a huge fan of REST, I like it a lot mostly because of its consistent way of expressing CRUD operations and brings simplicity to the API implementation. The use of REST has been pushed further with advancement of MV* JavaScript frameworks as they tend to have a natural way of consuming resources from REST APIs.

Lately, I am seeing that most newly built web applications tend to use REST in some way, if not exposing APIs, they do consume one or more of them. In my opinion, REST tends to create a viral effect on developers, as much as you use it, you want more of it. Now after we experience REST, I think there is a question which pops up:

Do we have to expose everything as REST API?

The universal answer “it depends” applies here very well! If you want to use a client side framework such as AngularJS that does not need server-side code and is well suitable to consume REST services, it might be a very good idea to expose the whole business logic as REST API and consume it through AngularJS services. This comes with additional benefit that if you want to have a mobile app of your web application, you do not have to write any additional code on server-side to support your mobile app, just consume the very same REST services and you are good to go. A diagram representation of such layered architecture of web applications could look like this:

Web application architecture with REST API and client side MV*

This is one of the most often used architecture styles I am seeing these days in web applications. However, what if you are not keen to using MV* JavaScript frameworks and want to use a server-side backend and generate your HTML representation using let’s say ASP.NET MVC. Do you still need to expose business logic as REST API?

Exposing business logic as REST API or any other form of service layer, if you do not have multiple types of consumers (web, devices, etc.), in my opinion is waste of resources (time and effort). Exposing and consuming services do introduce a level of complexity (you need to put extra effort on error handling, security, versioning, asynchronous access, etc.)  to the architecture and application code. This complexity is non considerable if you have multiple consumers of your application as it avoids writing multiple times the same functionality, however, if there is only one consumer and it is the web GUI, then in my experience I have seen that it only makes things worse. In such a situation, going with an old style server-side backend is a lot more easier. If you say I have a mobile client as well which consumes part of the functionality, in that case I think it is better to create a small REST API service group exposing only that part of the functionality, is a better choice. This will also allow you to develop your web app and mobile app in different paces (if you have lack of developer resources, you shall come to this requirement). The modified version of our new architecture will look like this:

Web application architecture with server-side backend and rest api

Sometimes we are keen to jump to new technologies and architecture styles just because its presentation looks attractive and we like to get our hands in it and give it a try. Often this pushes us to situations which makes maintenance of our code base difficult in later stages of our application lifespan. It is very important that evaluation of the application architecture to be done as early as possible and be judged from the simplicity and maintainability perspective.

 

Offline availability with AppCache

Offline availability of your web application will give a little extra comfort to your users. If using Local storage an appropriate choice to enable web applications to work offline with dynamic data (see my post on Local storage), Application cache (hereafter AppCache) is a good choice for making the static content of the web application available offline.

About AppCache

AppCache enables developers to specify a set of files which need to be cached by the browser. While cached, the requested resources will be served from the disk and this will make your web application available even when users are offline.

Caching static content has several benefits which you may like to leverage, including:

  • Better site performance, as static content will be served from the disk and not requested from the server
  • Better server performance, as less resources will be served and bandwidth will be preserved
  • Users will have the possibility to access your contents while offline, leading to better user experience and satisfaction
  • Mobile users can use the web app even when they are out of internet coverage
  • Mobile user can bookmark/pin the web application to their phone and use it later as a mobile app (offline)

The cache size limit may vary between browsers, but a cache size of 5MB can be expected from modern browsers, and with users permission, the size can be increased if needed.

How do we tell the browser to cache our site, and most importantly, which files to cache. We can do this using a special file called Manifest file. We tie manifest file to the html root element using manifest attribute. e.g.

<html manifest="webapp.appcache">

It is recommended that the extension of the file is .appcache.

Manifest file structure

Manifest file is a simple text file which should be served with “text/cache-manifest” content type. The very first line of the file should be:

CACHE-MANIFEST

and after that files to be cached are listed one per line.

index.html
css/main.css
css/theme.css
js/lib.js

Folders and wildcard specifiers are also permitted.

The common practice is to follow this structure:

CACHE MANIFEST
#23.10.2014 v1.0.10
/file1.html
/file2.jpg

NETWORK:
posts.php

FALLBACK:
offline.html

On the first line we have put the mandatory declaration of “CACHE MANIFEST”. Then on the second line we put date and version as comment. After version, we start declaring files/folders which are to be cached. The “NETWORK” section shows which files should not be cached as they change frequently, and last, with “FALLBACK” we specify what should be used when a resource is unreachable.

The comment part with version number has a significant importance here. The browser will not ask for the cached files unless one of these two is true:

  • The cache is deleted
  • The manifest file has changed

We best note the change of the manifest file by putting a version number in it. Whenever we do a change in any of the cached files, we simply increment the version number to advise the browsers to re-cache the files.

Specifying the manifest file will make the browsers cache the content specified and make the static content of your web app available offline.

 

HTML5 Local Storage API

It has started to become a common requirement for Web applications to have some support for offline usage. HTML 5 local storage (hereafter local storage) is one of the options to consider when you need to support offline use of your web application. But what is local storage, and when should you consider it. Let’s go through what you need to know before you start using local storage.

What is HTML5 Local storage API?

Local storage is a storage of key-value pairs (KVP) which you can store and access using a JavaScript API. It is supported by most of major browsers (even IE8 does support it :)). The KVPs are string values of information used to store in the storage of the browser

e.g.  “CMS” => “WordPress”

Local storage has several advantages over Cookies and can be a good substitute for them. Cookies have the size limitation of 4KB, on the other side, the usual supported size for Local storage is 5MB. Also, cookies are sent to the server with every request, overloading the bandwidth, whilst, Local storage is not sent to the server any request, instead, only the required value is send.

Local storage is a persisted storage and have no expiration time. The data persisted will stay until cleared. There is another variant of browser storage which is temporary, and that is Session storage. Session storage is used only for the session, and when session expires or is destroyed, so is the session storage.

Storing and reading from Local storage

Before starting to use the Local storage, it is advisable you always test first if it is supported by the browser, and you do it with a simple check like this:

if (window['localStorage'] !== null) {
//your code here
}

Storing values to Local storage is done using setItem() function. This method accepts two parameters, the first one is the key, and second parameter is the value. e.g.

localStorage.setItem("cms", "WordPress");

If we open chrome developers tool in resources tab, we can see the values in local storage, and there is our “cms” key with value set to “WordPress”

Local storage in chrome developer tools

 

Reading the stored value is done using getItem() function and supplying the key as a parameter. e.g.

var cmsValue = localStorage.getItem("cms");

Other functions

There are several other useful functions which you can use with Local storage. If you want to get the total number of keys stored you can use localStorage.length property, or if you want to remove one item from the storage you can do this by calling removeItem function. e.g.

var numberOfItems = localStorage.length;

localStorage.removeItem("cms");

It is also possible that you clear the whole list of items stored by calling function clear e.g.

localStorage.clear();

Events

In some more advanced scenarios, you may want to track changes in local storage, that is where events come in. Events are out of scope of this post, however, it is good to remember that they are there should you have such a requirement.

References

If you want to get in details, the specification of the local storage can be found in this link: Web Storage specification