I want to create a website

Having your own website is one of the best things you can do if you are planning to have a serious online presence. Of course it is not a silver bullet solution, as it requires constant investment of time creating valuable content and marketing, but it is ultimately the starting point people will check about you online.

So, I want to create a website. What are my options? What should I do next? In this post, I will consider several options you may follow to create your own web site. Fortunately, there are a lot of options available to choose from, starting with ready made solutions which you may set up with very few clicks, to those which require advanced knowledge of some technologies. Unfortunately, I will not be able to list here all available options, but I will try to make a list of options which may suit most of you out there trying to create your own web site.

1. Free blog with WordPress.com

If what you are looking for is just a blogging website and you want it for free, wordpress.com may be the best choice for you. They have a managed wordpress hosting solution for which you may sign up and get your own blogging solution set up with a few clicks. This solution could be a good start if you want to try yourself blogging and create an online presence without investing any money. Though, this free solution comes with some limitations. You get a domain as http://yourname.wordpress.com and few free themes for your site. If you want a custom domain name like www.yourname.com, or a better design for your site you have to pay for it. You are also not allowed to install your own themes (if you already have one, or want to custom build one), but only choose from available ones there (free or paid).

2. Managed hosting with wordpress site

If limitations of wordpress.com do not fit you well, you may decide to go with a managed hosting where you may setup a wordpress site. I happen to prefer wordpress as my CMS of choice, otherwise, you may chose to set up a different CMS with your hosting provider depending on the type of hosting you have and the CMS you have chosen. With a manage hosting, you may chose your own domain, buy or develop a custom theme for your site, and do many more customizations which are not possible with free wordpress.com solution.

There are plenty of companies offering managed hosting solutions, and all of them vary in price and features they offer. Some of the popular hosting companies I have come over are GoDaddy and BlueHost.

3. Managed hosting with a custom solution

Another choice is to have a managed hosting solution with a custom web site developed for you. This is more powerful than above mentioned solutions as you have the option to chose everything (from colors, fonts, to design and features developed), however, it is more expensive. Depending on the market you live, developing a custom web site may cost you from several hundred dollars to several thousand dollars.

4. Private hosting

Private hosting is an advanced solution, mostly suitable for companies, where you get a private server rented for you from a hosting company. The hosting company creates the server (be it real hardware server or a virtual one), connects it to internet, but leaves the management of the server environment to you. This has huge advantages as you control what is installed in the server, what features do you want to offer, and it is very easy if you want to add some unsupported technology to your solution. However, it is also very expensive and requires technical skills of system administration and system security as this task is on you now.

5. Cloud solution

Cloud solution is a superset of private hosting. If you choose to have a cloud solution with one of the biggest market players in this industry (Microsoft Azure, Amazon AWS, Google Cloud Computing), then you not only have the server on your control, but a whole IT infrastructure. You have the possibility to create virtual servers, website hosting, email services, active directory services, storage and backup services, and many other IT infrastructure components as a service. This powerful solution requires you to have a very good understanding of IT infrastructure configuration, but as a benefit, you get a flexible IT architecture which can scale up and down as needed and you pay for what you use.

Conclusions

Which one is right for you? Well, it depends. Your needs define what is best for you, but generally speaking, amongst these, number 2 and number 5 are my favorites. So, if I want to create a website for myself, or you are an individual or a business who wants to have a blog or a personal/company site which is for online presence, then I think option number two is the best choice as it has the possibility to scale up with a custom solution or stay with a WordPress or a specific CMS. If you have a startup which is offering a SaaS or any other solution that you expect to have increasing demand, then I think option number five is the best as it offers you the possibility to start small and grow as needed. Of course these come with the complexity of knowledge required, but it will be worthy to invest in that direction.

Developing hybrid mobile apps with Phonegap, AngularJS, Bootstrap

In my post Develop mobile applications using web development skills, I pointed out a list of possible frameworks which can be used to create a hybrid mobile app. My favorite choice so far is using Cordova/Phonegap (Read my post on my opinion about Cordova/Phonegap) in combination with a hybrid app development framework. In my previous mobile applications I have developed, I used to use jQuery mobile as my framework of choice for developing the UI of my apps. Nowadays, I have switched to another combination, which is:

Cordova/Phonegap + AngularJS + Bootstrap

The hybrid mobile app architecture with Phonegap, AngularJS, Bootstrap looks like this:

The presentation layer is built with Bootstrap framework, the app domain is modelled using AngularJS, and the is packaged using Cordova/Phonegap to a native app. Let us go through the components of this hybrid mobile app architecture and describe them.

Bootstrap

Bootstrap is a mobile-first responsive front-end framework. What this mean? Bootstrap has an easy to use responsive grid which allows you to position your layout in a well structured responsive way. As the framework is built with mobile use in mind, it responds well to different screen sizes and adapts the layout of the app easily to different screen sizes. This is a good possibility to use the very same implementation for tablet and mobile devices of different screen sizes. And it is not only the grid that makes it special. It helps you manage typography, responsive images, forms, form validation messages, notification messages, responsive tables, and a good number of UI components. You can download it from getbootstrap.com.

AngularJS

AngularJS

AngularJS

A very powerful, full-featured JavaScript MVW framework. With AngularJS framework, you can give a structure to your app domain model and manage your app logic in a very flexible way. Everything is organized around a model which is displayed through a View. Views can be well structured templated HTML code styled and organized using Bootstrap. Controllers organize the communication between the View, Services, and all other parts. The framework supports a good routing mechanism, which can also be extended by other extension libraries for more powerful functionalities. There are a plethora of extension libraries for AngularJS which add value to the framework by filling in the gaps of the framework. You can get AngularJS from angularjs.org.

 

Cordova/Phonegap

Cordova is an Apache project which creates an underlying platform for developing multiplatform mobile applications. In our case, it makes possible the AngularJS+Bootstrap web app to be packaged to a native mobile app which can be published to the mobile markets and be instlalled in mobile devices. Adobe PhoneGap is a distribution of Cordova.

Basically what Cordova does is to make possible the web app to run inside a WebView component of a native app, we can say it as a native package of a web app. You can do the packaging using Cordova Command Line Interface (CLI) or using Adobe PhoneGap Build which does not require any installations.

The most powerful feature of Cordova in my opinion is the extension possibility by plugins. By installing specific plugins, you get access to device’s hardware such as camera, compass, geolocation, as well as other device specific APIs such as contacts, media, notifications, etc. Very powerful plugins such as barcode reading, push notifications, and many more, can give your application good features by writing few lines of code.

The development process

As we described the architecture parts, let us start with the process of developing hybrid mobile apps with Phonegap, AngularJS, Bootstrap. We start with creating a sample application  which shows you your current location coordinates and demonstrate the development process. The easiest way to start the app development is by creating initial template using Cordova/Phonegap CLI. We do this through this command (if you do not have cordova cli installed, here is the link showing how to do it: https://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html)

The create command requires 3 arguments:

  1. The directory name to be created for generation of the project, in our case “blogSample”
  2. The second argument is the project identifier, in our case “com.ariancelina.blogSample”. Usually it is used as a reversed domain name identifier
  3. The third argument is the display title of the application, in our case “BlogSample”

In this sample code, I used phonegap to create the app. The command equally applies to cordova as well.

If you already had phonegap installed and the app was created successfully, inside blogSample directory you should have a config.xml file and four other directories (hooks, platforms, plugins, and www). Platforms folder contains builds for specific platforms, plugins directory contains installed plugins, and WWW directory contains all our web code (AngularJS + Bootstrap + other files).

To read our location coordinates we need to install the Geolocation plugin (Find the list of plugins) and we do that by executing this command:

Now that we have the initial structure, we need to add platforms to which we want to deploy, but to do that, we need to be inside out app directory, which in our case is blogSample. Adding ios platform is done using the command

After the platform is added, we can build our app using

We can repeat last two commands for all other supported platforms like android, windows phone, etc.

If we want to test our app, we can go to directory blogSample/platforms/ios and lunch BlogSample.xcodeproj and run the app in simulator or existing device.

We have our platform set up, now let us add the AngularJS and Bootstrap files. After we download these (download AngularJS as a zip file so you get all parts of it), we put inside blogSample/www/js directory AngularJS and Bootstrap js files: jquery-1.11.2.min.js (jquery is a dependency of bootstrap and can be downloaded from jquery.com)angular.min.js, angular-route.min.js and bootstrap.min.js. Inside blogSample/www/css directory we put bootstrap.min.css and bootstrap-theme.min.css files. And the last part here is to link these files in our main file index.html. We put css code in head section:

and near the closing body tag we link the javascript files

Now we have the setup ready and we can start coding the logic. We need three things to define to make it work, we need an angular route config which allows us to navigate from page to page, then we need an angular controller, and a view which will display the user his/her current location.

We start with the app.js file which contains the initialization of the js app. This file also is the place where the initialization events are placed. In our case, it looks like this:

We start by defining our angular app, blogSample (line 1). We initiate it and  define the modules which we need (ngRoute, ui.bootstrap). There are other interesting things happening here. As we are used to use jquery ready function to react when the page is loaded and ready for use, here we have onDeviceReady event which is fired when the app is loaded and we can start using it. Inside this event, we will get the current position of the device through this line of code

The getCurrentPosition function which gets the current latitude and longitude of the device, needs two functions as parameters, first being the function that is called if the current location can be obtained successfully, and the latter for errors. The error function is used to report the unavailability of the location. The success function is used to read the coordinates and bind them to our angular app, blogSample through this function

Now that we have our app setup ready, let us define two views, one about page and the other showing location information. Showing the coordinates inside the view is done using

AngularJS will substitute the values inside curly braces with current coordinates set in onSuccess function. But views do not access application level values. We usually link a controller with a view, and view is limited to the scope of that controller, so we need to define a controller to glue the coordinates to the view. The controller will look like:

and finally we add the router configuration to bind the controller to the view and enable the user moving between pages. The router has this code:

The router part defines one default url and ‘/about’ url. The default url ‘/’ binds to main.html view, and the ‘/about’ url binds to about.html view.

Now that we have all the building pieces in place, we need to add the reference of last created files in index.html and the references will look like this:

Now that everything is on place, we can deploy our app to the phone for testing, or run it in a simulator. Running the application is different depending on the platform. You may use the simulators that can be started from phonegap, by xcode, eclipse, or android studio, but for any serious app development, I would strongly suggest you try your app in a real device. I will not go into details about deployment as it is out of scope of this post, but in the simplest scenario, you may go to platforms folder inside  your phonegap project folder, and open the project of the specific platform and run the project from the respective ide.

The complete source code of this application can be found on GitHub https://github.com/acelina/phonegapWithAngularJs, you may download it and try it on your computer.

What is the mission of a software developer

Nowadays, there is a great demand for software development out there. The world needs software solutions just about anything. From planning and running complex business and industrial services to planning and running your day. From execution of mission critical operations to playing for fun, almost everything is backed by a software. There are millions of software developers out there and yet the global need for them is not about to be met. The world needs a lot more software developers, but seriously, why do we need them, what is the mission of a software developer that is so important to the world economy?

Let us analyse first how a software developer grows. Basically, there are two major paths one may follow to be a software developer. One is to have a formal education (be it a university degree, or a formal training program) and acquire the necessary skills to develop software, and the other is to be an autodidact and teach yourself using plenty of available resources (books, online courses, articles, tutorials, etc.) about software development.

The self learning approach is very personal and it is hard to generalize the way one teaches himself therefore it is hard to draw conclusions that what process is followed or what the outcomes may be. Also, compared to the numbers, I am sure this group is the minority, and the majority of developers come from a more formal path.

The formal path, however, has a visible indicator how one is being trained in the field of software development. We can have a look at the curricula of many universities and analyze them. We can get a subset of subjects that are covered from most universities, or so to say core subjects,  and they are programming languages, databases, data security, algorithms, maths, web development, etc. (I am not focusing here on training programs as usually they tend to have a narrower focus on one technology or one aspect of it, and rarely on a complete process as universities do). Some universities offer also non computer science complementary courses such as on entrepreneurship, preparing business plans, biology, etc., but only as elective courses that are left on the will of the student if he or she wants to take it.

From the university curricula I have seen, I can draw the conclusion that most of the universities prepare the software developers as pure technical persons who are supposed to solve technical problems related to software development. But is this the reason world needs the software developers that much? Personally, I do not agree with this, and I keep asking myself the question:

What is the mission of a software developer?

Let us try to answer this by trying to find the answer to this question: What does a software developer do after the graduation? I can think of several answers to this:

1. Industry path: He or she is employed by a company who needs software solutions for their business needs (be it a software developer company, a bank, an engineering company, a distribution business, whatever…) and he/she works there trying to create software solutions for the needs of the company.

2. Academic path: He or she may decide to pursue further studies and be a researcher who continues to contribute to academia by teaching and to the knowledge by researching unknown solutions for existing technical, real life or business problems.

3. Entrepreneur path: He or she creates a solution for a real life problem or a business problem, makes a business out of it, and creates an enterprise which runs a business by providing a software solution for a business problem.

Of course it is not easy to sum up all available paths to follow, but in my opinion these three cover the major available paths to follow for a computer science graduate.

Now what can I see from these choices is that, none of them are about solving technical problems purely. What I can also conclude is that, solving a real life or business problem is what turns out to be the real reason why we need so many software developers today. From this, I can confidently say that

The mission of a software developer is to solve real life and business problems.

You may say that is something we know and it is obvious, what is the problem about this? Well, I have a lot of contacts with different developers, experienced ones and want to be ones, university trained and autodidacts. I am teaching programming courses myself on a university level and professional level for over 6 years now, and I have had the opportunity to deal with over 1000 students up to now. What I can see is that, software developers see themselves as technical persons who are there to solve technical problems and they do not care about the business world. All they are interested is that how a technology or a framework works and how they can use or advance it. That is it. They care about code quality, they care about unit testing, they care about code reuse, and lots of other technical characteristics of the software, but rarely they discuss about how usable their applications are, or how efficiently they optimize a business problem their software is addressing or what business value they have delivered with the software they have built. I am not saying that technical characteristics are unimportant, far from it, we should always strive to write the best quality code we can, according to best industry standards, using best practices, and best patterns we know. I am just stating that the most important thing is we deliver value with software. If there is no value, there is no point having unit tests, most clearly written code, or bug free code, as it will not be used.

But perhaps this is not their fault as the education system they are following is not preparing them to think in that way, and that is where our duty as computer science teachers come to a focus. It is us, everybody who teaches a computer science related subject, be it a university course, an online course, or tutorial series, we should communicate the idea that technology is there to solve real life and business problems. I do think that we should not grow technical persons who write code, but we should teach them to be problem solvers who provide value with their solutions.

What do you think? Leave a comment and let’s discuss about it. If you agree with my opinion and think this is a valuable point, please share it so it reaches a broader audience.

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://arian-celina.com/json.php

The whole code will look like this:

 

PHP require

PHP require is very simpilar to include. If you have not read the tutorial about include, please do so first.

There is only one difference between require and include. If the included file does not exist, require will display an error message and stop execution of the code.

The error message will say failed to open stream. No such file or directory… and will give you information about the path where it is trying to access the file to be included.

PHP include

PHP include is used to insert a file’s contents into the current file’s output. The included file could be a text file, an HTML file, a PHP script, etc. This gives you the possibility to organize logical units of code in different files and include them where needed. Please be careful, if you include same PHP script two or more times, you will face the error of duplicate code (like duplicate declaration of functions).

Let us demonstrate this. If we have a file functions.php which is a kind of library of our defined functions

Now if I have another PHP file called article.php. If I need to use one of the functions defined in functions.php insed the article.php file, I would simply include the functions.php file and all the functions will be available there to use, so the code of article.php might look like this

When we include a file, we can either specify a relative or a static path. I would strongly suggest you always use the relative path. In the example below, we suppose that functions.php and article.php are in the same folder, so there is no need to put a path there.

If the file we want to include does not exist, then the code proceeds without any problem. If the file to be included was a static HTML or text, then the only problem we have is that the content will be missing. If we have included a PHP script, like in the example above, then we will have problems when we try to call function1() because it will not exist.

PHP Comments

PHP Comments are used to put some informative description about the functionality of the code. Comments are ignored by the interpreted and are not displayed in the output HTML. They are visible only in source files.

There are different schools of thought about how the code should be commented. Some say that intensive commenting enrich the code. My personal opinion is that, too much commenting introduces some noise in the code which can become distracting when reading it. The programming code should be written in clean and self descriptive way as much as possible. Only those parts of code which come as a result of a business process or a specific decision should be commented to describe why a certain way of doing things has been chosen. Of course this is my personal opinion and the style of commenting the code is a personal choice of a developer.

In PHP, there are three possible ways to put comments in code. The first one is a single line comment which is done by prefixing comment with “//”

After the double slash symbol, the rest of the line is ignored by the compiler. You can put a single line comment after a PHP code as well, e.g.

In addition to double slash symbol, a single line comment can be written using the hash (#) symbol, e.g.

Another type of comment is the multi line comment which is often used to provide detailed description about a certain part of code, such as function description

I would strongly suggest that every part of code which is not self descriptive to be complemented with description in comments. Please bear in your mind that when you open your code after six months, chances are you will no longer remember how did you come up with that solution, so it is a good strategy to put your thinking of complex problems in comments so you can remember how did you come up with it.

PHP Strings

String is datatype used to represent textual information. Although PHP is a loosely typed language and does not require we define data types of the variables, inside, it knows with what data type it is dealing with. String data type represent textual information which can be enclosed in single quotes or double quotes. Strings with a single quote are processed faster by PHP preprocessor than strings with double quotes. Let us define two variables which define strings in both forms:

When we output a string, we can echo a variable or we can echo a string itself directly, e.g.

If we want to join two strings to form one, we can do this by joining them using dot operator (.). This operation is called string concatenation.

If we want to put special characters inside a string, then we can use the escape character (). e.g.

 

PHP syntax

PHP is a language which has a syntax similar to C family languages. If you have any familiarity to C, C++, Java, C#, or JavaScript, you will feel the PHP syntax quite familiar as well.

You write PHP code inside a text file which needs to be saved with an extension .php. This makes editing PHP as easy as doing it with notepad application (of course when you write professional code, you don’t do it with notepad but use an appropriate text editor or IDE). The good part is, although we need to save files with .php extension, we can mix inside PHP code with HTML code and it will work perfectly.

The PHP code must be written inside PHP opening and closing tags

Line 1 shows the PHP opening tag (<?php) and line 3 shows the PHP closing tag (?>). If the page contains only PHP code, the closing tag is not required, but if you mix PHP with HTML, then you need properly to mark the PHP code. An example of such a mix could be:

It is important that you end every line of code in PHP with a semicolon (;). This will mark the logical ending of a meaningful statement.

Basically, these are the main things you should bear in your mind when you write PHP code.

PHP echo

Echo is a language construct in PHP which allows us to output text to the client (usually the browser). It is one of the most useful and popular commands that we use extensively. It takes a string or a variable of any other type and outputs it to the response sent to the client. The most clear example could be:

This will output text Hello to the client. Echo is used to output text as well as HTML, so we can output an HTML header like this:

We can use echo to output the value of a variable

or, we can echo variables in a string. When outputting strings, we can enclose them in single quotes (e.g. ‘the string’) or double quotes (e.g. “the string”), however, this has some implications. If we use single quotes, the PHP interpreter can process your string little faster than if you use double quotes. On the other side, if you use double quotes, you get another benefit, that is, you can use variables inside the string and PHP interpreter will interprete them. If you use single quotes, and want to output a variable’s value, then you need to join the string and the variable’s value using concatenation operator (concatenation in PHP is done using dot (.)). Let us put an example around this.

It is important that, if you start a string with single quotes, you end it up with single quotes, and the same applies to double quotes. If the string is marked with single quotes, then you may use double quotes inside, and vice versa.

If we want to use a single quote inside a string enclosed with single quotes, we need to escape them using escape character (). The same applies to double quotes.