CodeProject, Programming, Web Development

Knockout.js for data binding in HTML and JavaScript

1 Comment

Hi there, and welcome to another article on web development. This week we’ll be looking at Knockout.js, an MVVM library that makes data binding in HTML and JavaScript a whole lot easier. If that meant nothing to you don’t worry, that’s what I’m here for. If you’re unfamiliar with HTML and/or JavaScript I suggest you follow my series on starting web development. You can find the first part here: Web development #1: Internet and the World Wide Web.

If you like my blogs please subscribe. You can enter your email at the top right corner of this page. Don’t worry, I’m not going to sell you anything, but you’ll get new posts in your mailbox as soon as I post them.
Also, if you haven’t done so yet, make sure to follow me on Twitter @sanderrossel for other interesting articles and industry updates.

All the examples for this blog are published on my GitHub account. You can get them at the knockout-blog repo.

So with that out of the way, let’s get started!

Knockout.js basics

So what exactly is this Knockout.js? Simply said Knockout links data, from your JavaScript, to your HTML page and updates that data if it changes, either from your page (by user action) or in your JavaScript. This linking is called binding.
As mentioned Knockout is an MVVM library, which stands for Model View ViewModel, but that still doesn’t tell us much. Well, look at it this way, you probably have data to show on your page, this is your Model. This can be anything, like user information, blog posts or a list of sales orders. Your HTML page is your View, it’s what people see. The ViewModel is an abstract intermediary that communicates between your View and your Model. The key for this communication is a binder, a component that takes care of this communication.
So that sounds pretty abstract and difficult, right? Here’s the good news though, you can pretty much forget about it. The takeaway is that MVVM enables for a separation of your View (user interface, or (G)UI) and your domain data and logic. That also means you can, theoretically, rewrite your entire View without having to touch your domain. And it means one person can be writing the View while another is working on the business logic, boosting a team’s productivity. The Windows Presentation Foundation (WPF) is another example of MVVM.

So Knockout is an MVVM library, but what does this mean for us developers? How about an example? Of course we’ll need an HTML page and some JavaScript. That’s all, so I’m not going to incorporate a back end. I did, however, make use of jQuery, to show the real strength of Knockout. So I’m going to show two input fields where you can enter your first and your last name. Whenever you change either your first or last name your full name is shown below the inputs. Easy as pie. First you’ll need to get Knockout and jQuery. Head over to the Knockout download page (version 3.3.0) and the jQuery download page (version 2.1.3) to get them. Of course if you got the source from my GitHub you’re already good to go. So here’s the HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Knockout example</title>
    </head>
    <body>
        <div>
            <h2>jQuery form</h2>
            <p>First name: <input id="firstName" /></p>
            <p>Last name: <input id="lastName" /></p>
            <h2>Hello, <span id="fullName"></span>!</h2>
        </div>
 
        <div>
            <h2>Knockout form</h2>
            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
            <h2>Hello, <span data-bind="text: fullName"></span>!</h2>
        </div>
 
        <script src="jquery-2.1.3.min.js"></script>
        <script src="knockout-3.3.0.js"></script>
        <script src="HelloWorld.js"></script>
    </body>
</html>

And here’s the HelloWorld.js.

$(function () {
    // Doing our own 'binding' using jQuery.
    $('#firstName').change(function () {
        // Doing some DOM stuff to get the values...
        var fullName = $(this).val() + ' ' + $('#lastName').val();
        $('#fullName').text(fullName);
    })
    // Manually setting the initial value.
    .val('Sander');
    
    $('#lastName').change(function () {
        // Doing some DOM stuff to get the values...
        var fullName = $('#firstName').val() + ' ' + $(this).val();
        $('#fullName').text(fullName);
    })
    // Manually setting the initial value.
    .val('Rossel')
    // Trigger the change event to update the fullname.
    .change();
    
    
    // Knockout binding!
    var person = {
        firstName: ko.observable(''),
        lastName: ko.observable('')
    };
    
    // Set the values, notice that they're functions!
    person.firstName('Sander');
    person.lastName('Rossel');
    // Compute full name.
    person.fullName = ko.pureComputed(function() {
        return this.firstName() + " " + this.lastName();
    }, person);
    ko.applyBindings(person); // This makes Knockout get to work
});

So that’s a lot of code! Let’s break it down. The HTML for the jQuery form is simple and straightforward, so let’s skip that. The HTML for the Knockout form has some weird stuff though, what’s all this data-bind? This is a custom Knockout attribute (all custom HTML5 attributes have the data- prefix) that defines what attributes on the HTML element should bind to what properties on your binding context (we’ll see that in a minute). The binding then makes sure that any changes in your form are reflected in your data and vice versa. So, for example, the input that takes your first name has its value attribute bound to some firstName property on the binding context. The syntax for the binding is “name: value [, anotherName: someValue]”. We’ll see a couple of different bindings throughout this post.

Now if we look at the JavaScript we first see the jQuery implementation. This makes us select the #firstName and #lastName elements, get their value and then update the #fullName element. It’s just all DOM traversal really, nothing special about it. Now the Knockout implementation is something different! We define an object (which is really our ViewModel) with a firstName and a lastName and we assign to them whatever ko.observable(initialValue) returns. And here is the trick, really. These observables notify our page when a change is made.
After that I’m setting the values for firstName and lastName. I could’ve done that right away, but I want to emphasize that firstName and lastName are not simply our first and last names (strings), but they are actually functions (because that’s what ko.observable() returned). Changing them will require us to invoke that function and passing in the new value as a parameter. Likewise, getting the values requires us to invoke these functions, but passing in no parameters.
After that I’m giving person its fullName property, assigning to it the return value of ko.pureComputed(function, this). I didn’t specify it in the object literal, because ko.pureComputed() takes a parameter that serves as this. In the object literal I can’t use person just yet, because we’re creating it and the this will be the window if I’m not specifying it. The computed value keeps track of all its bindings (firstName and lastName) and updates automatically when one of them changes.
Last, but not least I’m calling ko.applyBindings(context) and pass it our person object. This sets the binding context and will cause our page to be updated and show the values of our person object.

I don’t know about you, but I’m not so excited about that pureComputed… So let me give you a little alternative to creating that person using a function and a constructor.

var Person = function(firstName, lastName) {
    this.firstName = ko.observable(firstName);
    this.lastName = ko.observable(lastName);
    this.fullName = ko.pureComputed(function() {
        return this.firstName() + ' ' + this.lastName();
    }, this);
}
var person = new Person('Sander', 'Rossel');

Better, no?

So that’s a whole lot to take in and with a few lines of jQuery you can get the exact same result! So why then would we use Knockout?

Building a contact form

Well, first of all, with jQuery you need to manually update variables in memory and values on your page. With just a name this isn’t a big deal, but what if you had an entire contact form? Let’s create one using Knockout. You should see that our JavaScript code isn’t growing much bigger, while this would be quite a hassle using jQuery. So here’s some contact form HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Knockout example</title>
    </head>
    <body>
        <div>
            <h1>Contact</h1>
            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
            <p>Email: <input type="email" data-bind="value: email" /></p>
            <p>Subject: <input data-bind="value: subject" /></p>
            <p>Your question: <textarea rows="5" data-bind="value: content"></textarea></p>
            <p><button data-bind="click: submit">Submit</button></p>
        </div>
 
        <script src="knockout-3.3.0.js"></script>
        <script src="ContactForm.js"></script>
    </body>
</html>

And here’s the ContactForm.js.

var form = {
    firstName: ko.observable(''),
    lastName: ko.observable(''),
    email: ko.observable(''),
    subject: ko.observable(''),
    content: ko.observable(''),
    submit: function() {
        alert("You entered:"
            + "\nFirstname: " + this.firstName()
            + "\nLastname: " + this.lastName()
            + "\nEmail: " + this.email()
            + "\nSubject: " + this.subject()
            + "\nContent:\n" + this.content());
        }
};

ko.applyBindings(form);

Now that’s looking more like it! We simply create some object, bind it to our form and we have nothing else to worry about. Notice that I bind the click event of the button to the submit function, this is called the click binding.
Now here you should see some real gain from Knockout! Look at that code, it’s just an object and when submit is called we have the most recent values. No need for any DOM traversal on our side. The beauty is that you can use this form obect anywhere in your code and nowhere do you have to worry about getting the correct values from- or updating the correct values to the DOM.

Arrays and foreach

So what if we have an array of items and we want to bind to that? Luckily Knockout has an observableArray which makes this pretty easy. So let’s say we have an array with Album objects. Each album has an artist, name and genre. If we’d create a table it may look like this.

<table>
    <thead>
        <tr>
            <th>Artist</th>
            <th>Name</th>
            <th>Genre</th>
        </tr>
    <thead>
    <tbody data-bind="foreach: albums">
        <tr>
            <td data-bind="text: artist"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: genre"></td>
        </tr>
    </tbody>
</table>

So albums is just an observableArray, which is created in much the same way as a regular observable. We can simply bind an observableArray using the foreach binding. The artist, name and genre in the data-binds are called on the current object in the foreach.

So let’s say we want to provide some edit, add and remove functionality so we can manipulate our list and albums. Actually that’s not much harder!

<table>
    <thead>
        <tr>
            <th>Artist</th>
            <th>Name</th>
            <th>Genre</th>
            <th></th>
        </tr>
    <thead>
    <tbody data-bind="foreach: albums">
        <tr>
            <td><input data-bind="value: artist" /></td>
            <td><input data-bind="value: name" /></td>
            <td><input data-bind="value: genre" /></td>
            <td><button data-bind="click: $parent.remove">X</button>
        </tr>
    </tbody>
</table>
<button data-bind="click: add">Add</button>

So the click of the button in our grid is calling the remove function on our $parent object, where $parent is the container of our array. There are other such variables, such as $data (the current object) and $index (the current index).
Notice that the add button simply calls the add function, which is on our current binding context outside of the foreach loop.
Let’s look at the JavaScript for both examples.

var Album = function(artist, name, genre) {
    this.artist = ko.observable(artist);
    this.name = ko.observable(name);
    this.genre = ko.observable(genre);
}

var ViewModel = function() {
    var self = this;
 
    self.albums = ko.observableArray([
        new Album('The Beatles', "Sgt. Pepper's Lonely Hearts Club Band", 'Rock'),
        new Album('Led Zeppelin', 'Led Zeppelin III', 'Rock'),
        new Album('The Prodigy', 'The Fat Of The Land', 'Dance')
    ]);
 
    self.add = function() {
        self.albums.push(new Album());
    };
 
    self.remove = function() {
        self.albums.remove(this);
    };
};

ko.applyBindings(new ViewModel());

So first I’m simply defining the Album object. After that I’m creating a container for our array and our add and remove functionality. The first thing you’ll notice is that I’m making a reference to this by storing it in self. That’s a little weird JavaScript thing, which is nicely explained in this article: Getting Out of Binding Situations in JavaScript. Basically the remove function will not be called in the context of your ViewModel.
So after that we’re creating an observableArray (notice how it’s much the same as a regular observable). And then we have an add and remove function. We can then create a new instance and apply the bindings to our context.
You will notice that if you put both tables in your HTML (like I did) that the read-only table gets updated when you update the editable table. How awesome is that? And in your JavaScript all albums are, of course, automatically synced.

So one more thing, let’s say you can’t use a foreach binding because you don’t have a container, like a table or list. Knockout has a solution for this scenario too.

<ul>
    <li><h3>My favourite albums list!</h3></li>
    <!-- ko foreach: albums -->
        <li><span data-bind="text: name"></li>
    <!-- /ko -->
</ul>

And even that one automatically syncs when an album is changed, added or removed.

Other bindings

So you’ve now seen some of the most important features of Knockout, but there’s still much more. For example, there’s the if binding, which looks a lot like the foreach binding.

<p><input type="checkbox" data-bind="checked: showText" />(Un)check me</p>
<p data-bind="if: showText">This is the if binding.</p>
<p data-bind="visible: showText">This is the visible binding.</p>

<!-- ko if: showText -->
    <p>This is the commented if.</p>
<!-- /ko -->
var ViewModel = function() {
    this.showText = ko.observable(true);
}

ko.applyBindings(new ViewModel());

Next to the if binding there is a visible binding in there. Notice how the three act the same, but are actually different. You can check that when you press F12 in your browser and check the page’s HTML when you check and uncheck the checkbox. While the visible binding simply sets the style of the paragraph to display: none, the if binding removes the element from the DOM.

The attr binding let’s you set any attribute of an element. Here are some examples.

<p><input type="email" data-bind="attr: { placeholder: emailPlaceholder }" /></p>
<p><a data-bind="attr: { href: url, title: urlTitle, target: urlTarget }">This is a link.</a></p>
var ViewModel = function() {
    this.emailPlaceholder = ko.observable('example@contoso.com');
    this.url = ko.observable('https://sanderrossel.com');
    this.urlTitle = ko.observable("Sander's bits");
    this.urlTarget = ko.observable('__blank');
}

ko.applyBindings(new ViewModel());

The attr binding has a little weird syntax. Basically you specify attr: and then a literal JavaScript object with the attributes as properties and the fields you want to bind to as values.
In this example, since none of the values are going to change anyway, you could opt for not making the values observables, which is perfectly valid and which will show your data correct (but, of course, will not update when the values are going to change).

How about dynamically adding and removing classes to your elements? We can do this using the css binding. It looks a lot like the attr binding, except we now specify the class we want to add and the condition when it should be added (of course you should add some CSS too, if you’re using my files from GitHub you’ll see a little embedded CSS in the header).

<p data-bind="css: { cool: temperature() <= 7, moderate: temperature() > 7 && temperature() < 20, hot: temperature() >= 20 }">Temperature: <input data-bind="value: temperature" /></p>
var ViewModel = function() {
    this.temperature = ko.observable(15);
}

ko.applyBindings(new ViewModel());

You can also set your style directly using the style binding. I’ll leave that for you to figure out on your own.

Templates

So there’s one last very powerful feature I want to discuss, templates. So let’s go back to our album example. We now displayed them in a table, but what if we wanted to create regular inputs, perhaps create a little card view, instead of rows. You could use the comment style foreach, but what if you wanted this on other pages as well? You’d have to copy-paste your HTML onto the other page. Knockout has a better solution, the template binding.
So the idea is that you create some HTML which isn’t part of any page. We’re going to inject this HTML into our page, once for each album. And we can inject it on other pages too, if we want. It’s basically HTML re-use. So we can use the same JavaScript that we used in the arrays example. Here’s the HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Knockout example</title>
    </head>
    <body>
        <div>
            <h1>My favourite albums</h1>
            <div data-bind="foreach: albums">
                <div data-bind="template: { name: 'album-template', data: $data}"></div>
            </div>
        </div>
 
        <!-- This is our template -->
        <script type="text/html" id="album-template">
            <h2 data-bind="text: name"></h2>
            <p>Artist: <span data-bind="text: artist"></span><br>
            Genre: <span data-bind="text: genre"><span></p>
        </script>
        <script src="knockout-3.3.0.js"></script>
        <script src="ArraysAndForeach.js"></script>
    </body>
</html><!DOCTYPE html>

So we’re looping through our albums using the foreach binding. Then for each album we inject the template, which gets the current album as its binding context ($data). As you’ll see the template is now inserted in our page once for every album. Pretty awesome!

Well, that’s it! I hope I could make Knockout.js a little easier for you. I won’t say it’s easy, because I’ve had my share of problems with it too. Luckily it’s all worth it in the end, since Knockout can make your life a lot easier and your code a lot more concise.
I should probably mention that Knockout wasn’t created as a replacement for jQuery, or any JavaScript library for that matter, and you can use Knockout with other libraries if you like.
Knockout has more to offer, I can especially recommend that you take a look at the Mapping plugin, that can create observable objects from regular objects. Other than that the Knockout website has a pretty nice tutorial and the documentation is pretty good too, so be sure to check them out. And again I’m going to recommend a free ebook (all you have to do is sign up) from SyncFustion, Knockout.js Succinctly (I swear I don’t owe any SyncFusion stock! 🙂 ).

Happy coding!

CodeProject, Programming, Web Development

Twitter Bootstrap for responsive, mobile first web apps

2 Comments

Welcome back! As you may know I’ve just finished my series on starting web development and it was a huge success! I’ve got a lot of good feedback, so thanks everyone. If you have no idea what I’m talking about you can visit the first part of my web development series here: Web development #1: Internet and the World Wide Web.
So to stay in the spirit of web development I decided to do some blogs on popular libraries and frameworks. This week I’m going for Twitter Bootstrap (from now on I’ll call it just Bootstrap).
Speaking of Twitter, I just created a Twitter account to share interesting articles and industry news, so be sure to follow me @sanderrossel.
I also got myself a GitHub account where I’ll upload the code files for my blogs. You can find my GitHub at https://github.com/SanderRossel. The files for this particular blog can be found at the bootstrap-blog repository.
Yes, I’m doing the best I can to serve your every programming needs!

Bootstrap basics

Now let’s talk about Bootstrap. Bootstrap is a free and open-source front end CSS and JavaScript framework developed at Twitter. It was first released as open-source in 2011, version 2 came in 2012 and currently we’re at version 3, which is also the version I’ll be using in this post. One remark on the Bootstrap versions, there’s quite a difference between Bootstrap 2 and Bootstrap 3. If you’ve already worked with Bootstrap 2 and want to migrate or have an overview of the differences you may want to have a look at the Migration guide at Bootstrap.
As you may have guessed you don’t need any server software to use Bootstrap, so I’ll keep the examples here simple so you really don’t have to do anything else than create some files and run them in your browser.

So what does Bootstrap actually do? Simply said it allows you to easily layout your page using classes and HTML attributes. It’s mostly just CSS. Bootstrap does this using a grid on your page. Not an actual HTML grid, but a virtual grid, containing twelve columns that you can use to divide your content. So it may look something like this.

An example of how your Bootstrap columns can be organized.
An example of how your Bootstrap columns can be organized.

And of course you can use any number of columns, up to twelve, on any row. So how did I do this? Let’s look at some HTML.

<div class="container">
    <div class="row">
        <div class="col-xs-12">12 columns wide</div>
    </div>
    <div class="row">
        <div class="col-xs-6">6 columns wide</div>
        <div class="col-xs-6">6 columns wide</div>
    </div>
    <div class="row">
        <div class="col-xs-8">8 columns wide</div>
        <div class="col-xs-4">4 columns wide</div>
    </div>
    <!-- etc... -->
</div>

Here you can clearly see how I define rows and columns to layout my page (more on that later). Your columns don’t have to add up to twelve. If you have less than twelve columns there’ll just be an empty spot on your page and if you go over twelve columns Bootstrap will simply wrap your excess columns on a new line (but it’s best if you avoid this). If you need more or less than twelve columns for your page you can download the LESS version of Bootstrap and edit the columns variable. Very cool, but I’m not discussing that here.
So here are a few rules, rows need to be inside a .container (for fixed width) or .container-fluid (for full width) for proper alignment and padding. You should place only columns inside your rows and content within columns.

Other than that Bootstrap adds theming to your website. There are a lot of themes, both free and premium, that you can use to give your website a complete new look without having to change your HTML. And Bootstrap has a lot of controls for HTML, like dropdowns, buttons, navbars, tabs, etc. We’ll look at some of them later.

Creating a responsive page

So now that we know what Bootstrap can do for us let’s put this into practice. First of all let’s look at a very basic Bootstrap document. You can actually get it from the Bootstrap site. I’ve removed some stuff from it (mostly comments) that we aren’t going to use (mostly backwards compatibility for IE). You can view the original basic template at Twitter Bootstrap – Getting started.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello, Bootstrap!</title>

        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>
       <h1>Hello, Bootstrap!</h1>

       <script src="js/jquery-2.1.3.min.js"></script>
       <script src="js/bootstrap.min.js"></script>
    </body>
</html>

As you can see I’m assuming your HTML file is in a folder that contains a folder called css which contains the bootstrap.min.css file and a folder called js which contains bootstrap.min.js and jquery-2.1.3.min.js. You can get Bootstrap from the download section at Bootstrap and jQuery from the jQuery website. Bootstrap uses some jQuery for certain components, but you might not need it. If you do need it make sure you use a compatible version of jQuery. Other than that the meta element with the viewpoint may be unfamiliar to you. You should use this for websites that are optimized for mobile devices (don’t use it for non-responsive pages though).

So now that we have the basic Bootstrap template let’s display some text on the page. Let’s say we’re creating a news website and we want the cover story at the top and page wide. Beneath that we want some featured articles. And what’s more, we want it to look good on any device. So let’s say we have two rows, one for the cover story and one for the featured articles, that will be displayed next to each other. We can also safely assume that the number of featured articles that fit on the page is limited by our screen size. On a big screen we can have four featured articles next to each other, but on a medium and small sized screen we want maybe only three or less articles. Well, that’s something Bootstrap is really good at! So in the example above I’ve used col-xs-* to create a row that spans * columns. The xs here is the trick. It actually means that this row spans * columns on any device that’s xtra small (xs) or larger (because we didn’t specify what should happen if it gets larger). We have col-lg-* (large, anything larger than or equal to 1200 pixels), col-md-* (medium, anything larger than or equal to 992px), col-sm-* (small, anything larger than or equal to 768 pixels) and col-xs (extra small, anything smaller than 768 pixels). Most phones go into the xs category, tablets would be small or medium, laptops medium or large and desktops large. So then let’s see some HTML. For our news site we can have the following body (actual content left out).

<div class="container">
    <div class="row">
        <h1>Sander's bits</h1>
        <p>Writing the code you need</p>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h2>Main article</h2>
            <article><p>...</p></article>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-4">
            <h3>First featured article</h3>
            <article><p>...</p></article>
            </div>
        <div class="col-lg-3 col-md-4 col-sm-4">
            <h3>Second featured article</h3>
            <article><p>...</p></article>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-4">
            <h3>Third featured article</h3>
            <article><p>...</p></article>
        </div>
        <div class="col-lg-3 hidden-md hidden-sm">
            <h3>Fourth featured article</h3>
            <article><p>...</p></article>
        </div>
    </div>
</div>

Let’s figure this bit out, eh? First of all I’m using a container, or a div element with the .container class to hold my rows. One thing about the container is that it’s sized differently on different screen sizes. So next I’m creating a row to hold my page name, which is Sander’s bits. Then comes the second row with our cover story. It’s spanned out across all twelve columns on all devices. Now comes our third row, which is the most interesting. Each article has multiple classes, one for each device size that we want to cover. On large devices we display four articles, each spanning three (out of twelve) columns (.col-lg-3). On medium sized devices the fourth article gets hidden (using the .hidden-md class) and the other three articles now span four columns (.col-md-4). Small devices have the same layout as medium sized devices (.hidden-sm and .col-sm-4). On extra small devices we don’t specify any layout and our page will display the articles one under the other (including the fourth). You can test this by opening the page in your browser and then simply changing the size of your browser window. Check at what size your browser hides or displays the fourth article and at what sizes it places the articles under each other.
I admit that’s quite some classes on your elements, and it may take you a bit to figure out what’s going on, but you get a lot in return. I don’t know about you, but I find this pretty amazing!

Bootstrap classes

Our news website is starting to look pretty professional already, but we want the cover story to stand out a bit more. Bootstrap adds all kinds of classes that you can use to style your page. For our cover story we’re going to add two: .lead and .text-center.

<h2 class="text-center">Main article</h2>
    <article><p class="lead text-center">...</p></article>

You may have guessed, but there are also the classes .text-left and .text-right and all they do is align your text to the left, right or center.
Looking good, right?

Let’s ‘mute’ the tagline too, it’s not all that important, so we want it to be visible, but not stand out too much.

<p class="text-muted">Writing the code you need</p>

Now what kind of news website doesn’t have weather forecasts? Let’s add some! I’m thinking of adding an HTML table to the bottom right. It’ll show up under our third or fourth column (depending on screen size). Luckily we can use offsets for our columns in much the same way we can make them span multiple columns. So let’s have a look at that table. Notice that I’m using HTML 5, which means we need table, thead and tbody elements. So the following HTML goes at the bottom of our container.

<div class="row">
    <div class="col-lg-3 col-lg-offset-9 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8">
        <h4>Weather</h4>
        <table>
            <thead>
                <tr>
                    <td>Day</td>
                    <td>C&deg;</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Today</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>Tomorrow</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Day after tomorrow</td>
                    <td>27</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

So the table is positioned right across all devices. The .col-lg-offset-*, .col-md-offset-* and .col-sm-offset-* work great (and of course there’s also a .col-xs-offset-*). I don’t need to explain this, because you already know how it works. The table itself is rather clumsy though. The columns are pushed against each other and it doesn’t scale well at all. Bootstrap has a really very simple solution, just add the .table class. And because we want some additional styling we’re also going to add the .table-striped and .table-bordered classes.

<table class="table table-striped table-bordered">

Very nice! Now in that same style I also want to add some stock information on our page. And let’s indicate whether a stock went up, down or stayed the same. We can do this using the .success, .danger and .info classes (there’s also .warning and .active). These classes can be applied to buttons, text, table rows, labels, etc. The Bootstrap team has actually made sure these classes are consistent across elements for Bootstrap 3. So without any further explanation here’s our stock table (I just made up the numbers, don’t buy or sell based on this table).

<div class="row">
    <div class="col-lg-3 col-lg-offset-9 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8">
        <h4>Stock</h4>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td></td>
                    <td>Price</td>
                    <td>%Change</td>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>Dow</td>
                    <td>18,128</td>
                    <td>0.94%</td>
                </tr>
                <tr class="danger">
                    <td>Nasdaq</td>
                    <td>5,026</td>
                    <td>-0.69</td>
                </tr>
                <tr class="info">
                    <td>S&P 500</td>
                    <td>2,108</td>
                    <td>0.00</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

So again, this is pretty simple, but the effects are amazing.

Let’s add an image to our main article to make it stand out even more. Bootstrap has some classes to handle images. Now what is the internet all about? If you answered cats you’re right! So let’s add a picture of my parent’s cat. We can add some classes to make it look good and have it scale with our screen size. I’m going to add the class .img-circle to make it round (alternatives are .img-rounded for round corners and .img-thumbnail). I’m also adding .img-responsive so it will resize with my screen. Last, but not least I’m adding the .center-block class to, well, center it.

<h2 class="text-center">Main article</h2>
 <article>
 <img src="https://sanderrossel.com/wp-content/uploads/2015/03/Cid.jpg" alt="My cat, Cid!" class="img-responsive img-circle center-block">
 <p class="lead text-center">...</p></article>

Bootstrap components

At this point you have to look pretty hard to see if you’re looking at the New York Times website or at our Bootstrap example page because our page is looking so good and professional. I’m still not completely happy though. I want my weather forecast and stock information to be tabbed. I’ve given an example of this before using jQuery UI in a previous blog post, Web development #6: Getting interactive with JavaScript, but this time we’ll be using Bootstrap to get the same effect. As mentioned before Bootstrap needs jQuery for certain components, the tab control is one such component. Compared to jQuery UI Bootstrap has some pros and cons. The pro is that we don’t need to write a single letter of JavaScript. The con is that the HTML is rather, well, bloated. You can remove the entire row containing the stock table and add the stock table to the row with the weather table. Then we need to tab both tables. So let’s look what it looks like.

<div class="row">
    <div class="col-lg-3 col-lg-offset-9 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#weather" data-toggle="tab">Weather</a>
            </li>
            <li>
                <a href="#stock" data-toggle="tab">Stock</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="weather">
                <!--Weather table goes here-->
            </div>
            <div class="tab-pane" id="stock">
                <!--Stock table goes here-->
            </div>
        </div>
    </div>
</div>

So like with jQuery UI we need an unordered list with the .nav and .nav-tab classes and anchor tags that link to the id’s of some div elements. The div elements containing our tab pages go into another div element that has the .tab-content class and is placed directly under the tab list. The data-toggle attribute tells Bootstrap what kind of component this is, a tab. Another cool feature are the tab pills and vertical tabs. Try changing the .nav-tabs class into .nav-pills or .nav-stacked. Looking pretty good!

Finally, let’s add a menu to our page. Adding a menu to any website can be pretty difficult. It needs to stay at the top, it needs to scale, you want some components to be left-aligned, others right-aligned, it’s just quite difficult. Bootstrap makes it a lot easier, but even then it’s not exactly easy. You need lots of classes, lots of elements, and just lots of everything really. It’s still easier than doing everything yourself and it scales really nice. So here’s what I’ve done. I’ve taken the example from the Bootstrap website and I’ve stripped it a bit. I’ve removed some buttons and dropdowns and some HTML attributes and classes that have to do with accessibility (for people with disabilities, like bad sight or even blindness).
We can create a navigation bar using the nav element. Within this nav element we’re going to create a fluid container, meaning it spans our entire page. After that we’re going to specify what our menu looks like when it’s collapsed, for example on phones, and what elements we like to show. So how about our brand, for which Bootstrap has some special classes, a search form, an About link and a Login button? The HTML would look like this (placed directly under your opening body tag).

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="https://sanderrossel.com" target="_blank">Sander's bits</a>
        </div>

        <div class="collapse navbar-collapse" id="menu">
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </div>
</nav>

So check that out and look what happens when you resize your browser window. Awesome!

I’ve also used a glyph icon in my search button. This is another Bootstrap goodie. You can use glyphs like that to make your page just a little prettier. Actually, I want that for my weather and stock tabs too. Let’s change that.

<ul class="nav nav-tabs">
    <li class="active"><a href="#weather" data-toggle="tab"><span class="glyphicon glyphicon-cloud"></a></li>
    <li><a href="#stock" data-toggle="tab"><span class="glyphicon glyphicon-stats"></span></a></li>
</ul>

Nice, right?

There’s lots more that Bootstrap has to offer. We’ve already seen quite a bit and we got some pretty amazing results. The best part is that we got those results without writing a single line of JavaScript! What else can Bootstrap do? Well, it has more classes you can use to style your elements, like Code, Forms and Buttons. It has more components you can use, like Buttongroups, Button dropdowns, Breadcrumbs, Page headers, Alerts and Progress bars. And if you don’t like how your website looks try one of these free Bootstrap themes or check out these premium Bootstrap themes. If you like to know more about Bootstrap I can recommend two free books by SyncFusion, Twitter Bootstrap Succinctly (which is about Bootstrap 2) and Twitter Bootstrap 3 Succinctly (which is both an update and an addition to the first book).

You can find the entire HTML for this blog and the necessary CSS and JavaScript files on my GitHub account in the bootstrap-blog repository.

Happy coding!

Programming, Web Development

Web development #8: Where to go from here

4 Comments

So if you’ve read all of my previous posts and you’ve made it this far congratulations! You’ve now learned the basics of web development and you have the knowledge to create awesome websites. To actually create awesome websites you need skills and skills come from practice and experience. I’ve only touched the surface in this blog series. So it’s now up to you to get your hands dirty and write more HTML, more CSS, more PHP and more JavaScript. And while doing that Google is your friend! I’ve far from discussed all the possibilities (people write entire books about that), but at least you know all the moving parts. So these previous blogs weren’t so much about making you a pro, they were about getting you up to speed in a simple manner. The rest, unfortunately, is up to you. In case you’ve missed some posts, here they all are again.

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

So what’s left for us? Well, in this post I’ll write about some stuff I haven’t written about in the previous posts, but which every web developer should know about. After that I’ll lay out some alternative technologies for you that may help you get started with the technologies you want.

Debugging

So you’ve written your page, you test it in your browser, and for some reason it doesn’t do what you want it to do. How can we find our error? The examples I’ve given were pretty small and in those cases it may be feasible to just have a good look at your code again. However, when you’re going to write large applications with much more code on both front- and back end just looking at your code isn’t going to help you. I haven’t discussed debugging your code because a lot of it depends on your environment. In this series I’ve used Notepad++ which doesn’t have any debugging capabilities (although I read there’s some plugin that let’s you debug code, I haven’t tried it though). If you’re going for an IDE (Integrated Development Environment) such as Visual Studio, Eclipse, NetBeans or XCode you’ll get a lot more possibilities. You can set breakpoints, for example, which allows you to pause your software on a certain line of code and inspect variables and their values and then even step through your code line by line to follow the flow of your code. Personally I work with Visual Studio and it allows you to see the entire stack and even edit code at run time.

But that’s all back end debugging. What if something is wrong with your CSS, HTML or JavaScript? Luckily all major browsers (and probably the non-major too) have debugging support. If you’re in IE, Firefox or Chrome press F12 and you’ll get the developer tools (alternatively you can look them up in the browser’s menu). So here you should see a tab or button that gets you to the console. In the console you’ll see any errors or warnings that are generated by your page (invalid HTML, a bug in your JavaScript, etc.). You can also log to the console yourself using console.log() in your JavaScript (never ever use that in production code though). There’s also a tab called Network where you can see all server requests from your page. This comes in handy when pages load slow, perhaps you’re making a lot of requests or you’re loading some large file that takes a while to load. There’s also a tab where you can see your page’s HTML and CSS and edit them real-time (in your browser, not on the server). You can either select an element in the DOM and have it light up on your page or select something on your page and have it highlighted in the DOM. Then you can make changes to your HTML and CSS and see the results real-time. It’s also possible to debug your JavaScript. You can set breakpoints and step through the code following the execution flow and inspecting your variables. Pretty neat and indispensible when working on your pages! Try working with the developer tools in your browser of choice and look for some tutorials.

Picking a back end language

In this series I’ve used PHP. PHP is free (although most languages are nowadays), easy to start with and supported everywhere. You can simply open up Notepad(++), start typing PHP, put it on your server and it’ll run. Compare that to other (compiled) languages like Java and C# and PHP is an absolute winner. A lot of popular Content Management Systems (CMS), applications that help in creating, editing, publishing and maintaining content on your websites, such as WordPress, Joomla!, Drupal and Magento, have support for PHP too. So PHP is a good choice for many applications.

However, a lot of people prefer their languages more strongly typed and object oriented. In that case you might go for Java or C# (or Visual Basic). So suppose you want to go for C# because perhaps you already have experience in WinForms or WPF or a client wants a .NET application. So when using C# you’re basically using the .NET Framework and when going for web development you’ll be using the ASP.NET stack. But then in ASP.NET you’ll have some options like WebForms and MVC. Let’s go with ASP.NET MVC, because that’s a good choice for modern web development. ASP.NET MVC makes use of the MVC Design Pattern. MVC stands for Model View Controller. When requesting a page ASP.NET MVC basically calls a method on a class. This class is called the Controller. Perhaps your Controller makes some database calls and does some computations and then comes up with the data that you want to show on your page. This data is just another class and represents the Model. The Model is then passed to your View, which is basically your HTML, which is then returned to the client. And, like PHP, with C# (or Visual Basic) you can generate HTML/View using the Razor Engine.
So you want to get started with ASP.NET MVC? I don’t blame you, it’s a great product. I recommend you get the Visual Studio Community Edition for free and just start! There’s plenty of tutorials on the web, but if you’re looking for a more structured course on MVC I can recommend the book Professional ASP.NET MVC 5.
And here’s a little downside to .NET compared to PHP. Once you have your software ready for production you’ll need a server with .NET installed that’s also running some special server software called IIS (Internet Information Services).

Another alternative to PHP and C# is Node.js. Node.js is relatively new and is a fast and lightweight platform that allows you to run JavaScript in your back end and create real-time web applications. So you can use JavaScript in your back end, which is pretty neat because that means you can re-use code from your back end in your front end! Try doing that using any other back end language. Other than that Node.js uses sockets, which enables it to send data to your client without that client asking for it. Usually a client sends a request and the server serves. But now we can serve without the client having to request! That allows us to easily create, for example, a chat application. Our client simply subscribes to the chat and our server sends every new message to the client as soon as it’s received. So when going with Node.js you probably want to use Express as well. Express is a JavaScript framework for Node.js which makes working with Node.js just a bit easier. And when you want to start using sockets extensively you might want to check out Socket.IO, which is a library for working with sockets from JavaScript. And of course you’ll need to generate your HTML in Node.js. There’s a few options for you, but Jade is a pretty popular one.
So you may have figured out some of the downsides of Node.js. First of all, it’s JavaScript, which may or may not be a problem for you, depending on your tastes. Second, unlike C#, Node.js doesn’t “just work”. To get any serious business done you need quite some external JavaScript libraries (and there’s A LOT as we’ll see in a bit). The pro, of course, is fast, relatively easy, real-time web apps using the same language as your front end.
If you’re interested in Node.js you may take a look at what’s called the MEAN stack, MongoDB, Express, AngularJS and Node.js. It’s free, open-source and very JavaScript.

I should probably mention that .NET has their own sockets framework that allows you to build real-time web apps easily, called SignalR.

So we’ve looked at some alternatives to PHP. There are more, like Ruby (On Rails), Python and Java. You can check them out, read a bit about them, and decide what works well for you.

Some front end alternatives

So we’ve looked at some back end alternatives, but what can you do on the front end? On the front end it really all comes down to HTML, CSS and JavaScript. Your HTML is generated on your back end and there’s plenty of options to do it, like Razor, Jade or any other HTML generator. It all depends on what back end you pick.

So what about CSS? Well, browsers really require CSS to lay out your page. There are some alternatives though, most notably LESS.
LESS looks a lot like CSS, but adds some features. You could almost call it object oriented CSS.
Another alternative is Stylus, which, like LESS, adds features to CSS. Stylus is focusing more on expressive CSS, which is easy and clean to read while also supporting some form of object orientism.
There’s more, like Sass and Turbine.
Now here’s the deal. None of them replace CSS, rather they are compiled to CSS. So you write your LESS (or any other), compile it, then use the generated CSS on your page. This adds some hassle, since you need to compile your code (your not-quite-CSS) before you can actually see it on your page (as opposed to just refreshing your page). But they also make for clean, maintainble CSS. I recommend checking out at least one of them, especially when you’re going to build larger websites. Alternatively you can just use an already existing library, such as Twitter, which I’ll talk about in a bit.

What about alternatives for JavaScript? There are quite some languages that compile to JavaScript. The two most notable are probably TypeScript and CoffeeScript though.
When you read the first lines on the CoffeeScript page you’ll pretty much have an idea what CoffeeScript is all about, “JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way”. So there isn’t much to say about that. It’s just a new syntax for JavaScript, hiding the dirty bits. I haven’t used it myself, but if you don’t quite like the JavaScript syntax and want to try something that’s like JavaScript, but prettier you might want to check out CoffeeScript.
Now TypeScript, that’s quite something different. It adds type safety to JavaScript and actually reads more like C# than JavaScript. Not completely by coincidence as TypeScript was actually created by Anders Hejlsberg, lead architect of C#. Of course it still just compiles to JavaScript. If you’re already in the Microsoft stack and using Visual Studio you may as well give TypeScript a try!
I also want to mention Dart very briefly. It was created by Google and it’s a fully object oriented way of writing JavaScript. In their words “new, yet familiar”.

Libraries and Frameworks

When working with JavaScript you know everything is possible, but nothing is easy. Luckily a whole lot of people have created libraries for you that you can use when using JavaScript. In this section I just want to point out some popular libraries and frameworks. We’ve already seen jQuery and jQuery UI.
Another very popular framework is Twitter Bootstrap. It’s mostly CSS, but has some JavaScript too. It allows you to create pages that look good and scale well across devices with relative ease. It mostly depends on tagging your HTML elements correctly. I’m not going to discuss it any further here. Just know that it’s available and that it’s widely used.
Another popular library is Knockout. With Knockout you can bind your JavaScript classes to your HTML elements. So values are automatically synchronized between your HTML and JavaScript. If a user changes the value of a text field the underlying value is changed and is reflected on your page and vice versa. Again, I’m not discussing it further, just know that it exists.
Another library that you simply cannot ignore is AngularJS. AngularJS is an MVVM (Model View ViewModel) framework for building Single Page Applications (SPA). That means you get a single web page and all data is fetched using AJAX. It makes for a fluent user experience as the website doesn’t need to refresh with each request (only parts of it). AngularJS is BIG. It basically does most that jQuery does and everything that Knockout does as well and the learning curve can be steep. Luckily there are some nice tutorials and books around.
Now one of the most awesome JavaScript libraries you’ll come across is D3.js. If you need any kind of graph or table, or any visual to represent your data, D3.js is the library you need. Just look at it. The website features many examples and it’s fun to just look at it. The only thing I don’t like about this library is that I haven’t needed it yet 🙂
You might come across Ember.js as well. It’s an MVC framework for creating Single Page Applications.
Without going into detail, here are some other popular JavaScript libraries: Underscore.js, Backbone.js, MooTools, jQuery Mobile, Modernizr…

There’s literally thousands of JavaScript libraries and frameworks. Some are pretty big, like Angular, and some are really small and do just one thing only, but do it really well. You might want to check out Microjs, a website with literally hundreds of very small JavaScript files. Just look around and see what’s available, it might surprise you.

Some final words

So in this final post of my web development series we’ve looked at some alternatives and libraries you can use to help you create awesome websites. There’s still lots of stuff that we haven’t covered, like putting your website in production (because that really depends on the languages you used and where you’re hosting), security (very important!) and SEO, or Search Engine Optimization. We’ve also skipped databases entirely.
We did have a look at all the parts that are vital in web development though. You should now have a pretty good idea of what you need to create your own websites.
In this series I have pointed out some books from the SyncFusion Succinctly Series, and I’m going to do so again. You can subscribe freely and gain access to free books on JavaScript, Twitter, Knockout, AngularJS, Node.js and much more. All I can say is that it’s really worth it!
For more (less succinct) books on various topics, including a lot of web development, I can recommend Manning Publications. They have some good stuff on Node.js, D3.js, SPA Design, CORS, and more.
Two other really cool articles/projects I came across are Learn JavaScript by Dave Kerr, where he creates a Space Invaders game using JavaScript and a Mario game by Florian Rappl. Both are worth checking out (and if you don’t like their articles you can still play the games 😉 ).

So that’s it for this series. That isn’t to say I’ll stop blogging or I’ll stop writing about web development, it just won’t be for this series. I hope you enjoyed it as much as I did. Any comments and questions are more than welcome!

Thanks for reading.

Happy coding!

Programming, Web Development

Web development #7: Dynamic page updates with AJAX

2 Comments

So in theory you should now have all the tools to create the most awesome websites. However, I don’t think any tutorial on web development is complete without doing some AJAX. No idea what I’m talking about? Read my previous posts.

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

So what is AJAX all about? It’s an abbreviation for Asynchronous JavaScript And XML. It enables us to send a request to the server and receive a result without having to refresh our entire page. Now that’s pretty awesome! What’s also pretty awesome is that we don’t need to use XML. As Linus Torvalds, creator of Linux, already said “XML is crap. Really. There are no excuses. XML is nasty to parse for humans, and it’s a disaster to parse even for computers. There’s just no reason for that horrible crap to exist.” So what we’ll be using is a form of AJAX called AJAJ, where the last J stands for JSON (JavaScript Object Notation). To make it a bit more confusing, we’ll just call it AJAX anyway. Oh yeah, and it doesn’t have to be asynchronous either…

JavaScript objects and JSON

First of all we need to know what JavaScript Objects are and what they look like. After that JSON will come naturally. So JavaScript has objects and much like objects in other languages JavaScript objects are just wrappers around certain functionality. The difficulty in JavaScript, of course, lies in that anything can be anything and then can become anything else… Let’s just look at an example.

// Creates an empty object.
var obj = {};
// Gives the object a firstName property.
obj.firstName = 'Sander';
// Gives the object a lastName property.
obj.lastName = 'Rossel';
// Gives the object a getFullName function.
obj.getFullName = function () {
    return this.firstName + ' ' + this.lastName;
};

// Alternative for the above.
var person = {
    firstName: 'Sander',
    lastName: 'Rossel',
    getFullName: function () {
        return this.firstName + ' ' + this.lastName;
    }
};

Now this wouldn’t be JavaScript if we didn’t have even more methods to create objects (JavaScript also knows constructors). We’re not interested in those though. What we’re interested in is the second method I’m using. Notice that, to create an object, we use curly braces. We can then basically add anything to that object by simply defining keys (property or function names) and values (default values for properties or implementations for functions) seperated by colons. Each key and value is seperated by a comma. And of course objects can contain other objects too.

var outerObj = {
    innerObj: {
        someValue: null
    },
    anotherInnerObj: {
        innerInnerObj: {}
    },
    message: 'Phew, what syntax!'
};

You can work with objects as ways of namespaces so you can keep the ‘global namespace’ clean and minimize the chance for name conflicts with other libraries. Objects are also often used to create some sort of options that are given to a function. A function then simply checks if some property or method on the option object exists, what its value is, and acts accordingly. We’ll see this usage a little later when working with AJAX.

So then, what is JSON? It’s simply some text using almost the exact notation we just saw. So let’s look at some examples.

{
    "firstName": "Sander",
    "lastName": "Rossel"
}

{
    "innerObj": {
        "someValue": null
    },
    "anotherInnerObj": {
        "innerInnerObj": {}
    },
    "message": "Phew, what syntax!"
}

That’s looking pretty familiar now, doesn’t it? And, if you compare it to XML, it’s a lot more compact, saving you precious bits and bytes when you’re sending your data over the internet!

Making an AJAX request

So let’s look at an AJAX example. I’ll start very simple making a synchronous request that returns just plain text (so no XML or JSON) when the page loads. You’ll know that the request doesn’t refresh the page because if it would the page would keep refreshing (as it makes the request upon loading). Alternatively, you can track all requests your browser makes using your browsers developer tools (press F12 in IE, FireFox or Chrome and navigate to the Network tab). I’m using jQuery to get the page load event and to show the result of our AJAX request. So here’s the HTML (in a file called Ajax.html):

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="Ajax.js"></script>
    </head>
    <body>
        <p id="result"></p>
    </body>
</html>

Here’s our JavaScript (Ajax.js):

$(function () {
    var ajax = new XMLHttpRequest();
    ajax.open('GET', 'Ajax.php', false);
    ajax.send();
 
    $('#result').text(ajax.responseText);
});

And finally our PHP (Ajax.php):

<?php
    echo 'Result of AJAX request!';
?>

So all of these files go into the htdocs folder of your XAMPP installation and you’ll have to access your page by browsing to localhost/Ajax.html (notice I named all files ‘Ajax’). So what’s really interesting here is that in my JavaScript I’m using an XMLHttpRequest object. So we call the open method and pass in a string specifying the HTTP method, GET or POST. Next we’re telling it what URL to navigate to and last we’re specifying whether the request should be asynchronous (we’re calling it synchronous). Then we send the request to the server. So, because we’re calling it synchronous the browser blocks until we get response from the server. That means that on our next line of code we simply have our result, ajax.responseText. Now you’ll never do this, in fact, our browser even gives off a warning saying that this method is deprecated because it negatively affects the user experience. In our case we won’t notice the blocking, but if we’re downloading larger chunks of data our page will freeze up completely!

So let’s make that call asynchronous so the user can go about doing his business while our page gets our data for us. This isn’t actually to hard. We simply change our JavaScript to the following:

$(function () {
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4) {
            $('#result').text(ajax.responseText);
        };
    };
    ajax.open('GET', 'Ajax.php', true);
    ajax.send();
});

So I’m specifying an onreadystatechange function which gets called when the state of our ajax object changes. State 4 means it’s done and we can get the result.

Now there are quite some options we can set and check, but I’ll not get into that. You can check them on the XMLHttpRequest documentation page and play around with them yourself. Instead, we’re going to use jQuery to make AJAX requests.

Using jQuery for AJAX requests

You might be thinking if there’s anything jQuery cannot do? There’s actually plenty of stuff you don’t want to do using jQuery, but AJAX isn’t one of them. jQuery makes AJAX pretty easy actually. We were already using jQuery, so we can simply edit our JavaScript.

$(function () {
    $.ajax({
        type: 'GET',
        url: 'Ajax.php',
        complete: function (jqXHR) {
            $('#result').text(jqXHR.responseText);
        }
    });
});

So remember I was telling you about using an object to specify options? This is one such an example. We’re passing in an object and specify the type, the url and a function that will be called when the requests completes (jqXHR stand for jQuery XMLHttpRequest, but you can name it anything). We could’ve passed in much more, but we didn’t. So this does the same as the code we had earlier.

The jQuery.ajax function can actually do a whole lot of stuff! Next we’re going to pass in some parameters and echo them on our page.

$(function () {
    $.ajax({
        type: 'GET',
        url: 'Ajax.php',
        data: {
            artist: 'Led Zeppelin',
            song: 'Immigrant Song'
        },
        complete: function (jqXHR) {
            $('#result').text(jqXHR.responseText);
        }
    });
});

And now we need to alter our PHP too.

<?php
    if (isset($_REQUEST['artist']) &&
        isset($_REQUEST['song']))
    {
        $artist = $_REQUEST['artist'];
        $song = $_REQUEST['song'];
        echo "The song '$song' by $artist rocks!";
    }
?>

So that was pretty easy, right? We just passed in a JavaScript object with some properties and they were converted to parameters in our PHP automatically! So how does this work the other way around? This is where JSON comes into play! JSON stands for JavaScript Object Notation, so it should be pretty easy for JavaScript to create actual objects that we can use. So let’s start by modifying our PHP so that it returns JSON.

<?php
    class song
    {
        public $artist = NULL;
        public $name = NULL;
    }
 
    if (isset($_REQUEST['artist']) &&
        isset($_REQUEST['song']))
    {
        $song = new song();
        $song->artist = $_REQUEST['artist'];
        $song->name = $_REQUEST['song'];
 
        header('Content-Type: application/json');
        echo json_encode($song);
    }
?>

First of all, I’m using an object to store our data. We’ve seen this before. I’m setting our response header so that it tells our browser it’s json. Then I’m using the json_encode function to convert our object into JSON. If you now check out the result in your browser you’ll notice that we’ve received some actual JSON!

But what we really want is to use this JSON in our JavaScript as if it were just an object. Actually this is pretty easy! We can get the object from the XMLHttpRequest.

complete: function (jqXHR) {
    var song = jqXHR.responseJSON;
    $('#result').text("The song '" + song.name + "' by " + song.artist + " rocks!");
}

And that’s it. Alternatively, we can use the ‘success’ option, a function that passes us the returned data, the status of the request and the XMLHttpRequest.

$(function () {
    $.ajax({
        type: 'GET',
        url: 'Ajax.php',
        data: {
            artist: 'Led Zeppelin',
            song: 'Immigrant Song'
        },
        success: function (song, status, jqXHR) {
            $('#result').text("The song '" + song.name + "' by " + song.artist + " rocks!");
        }
    });
});

And likewise there is an ‘error’ option.

$(function () {
    $.ajax({
        type: 'GET',
        url: 'Ajaj.php',
        data: {
            artist: 'Led Zeppelin',
            song: 'Immigrant Song'
        },
        success: function (song, status, jqXHR) {
            $('#result').text("The song '" + song.name + "' by " + song.artist + " rocks!");
        },
        error: function (jqXHR, status, errorThrown) {
            $('#result').text('An error occurred: ' + jqXHR.status + ' ' + errorThrown);
        }
    });
});

Notice that I’m calling ‘Ajaj.php’, a page that doesn’t exist. Naturally we’ll get 404, Not found. When using the ‘complete’ option we used earlier you’d have to check for success yourself, our current implementation would actually break our page if we called ‘ajaj.php’.

So there’s actually quite a bit to think about when using AJAX. Did the server return a result, what kind of result did it return, was the request successful, etc. We can use the XMLHttpRequest object for this. Check ‘status’ to see if our request was successful (status 200 means success) and then ‘responseType’ and any of ‘response’, ‘responseText’, ‘responseJSON’ or ‘responseXML’ for the result.

Posting data

So in the previous examples we’ve taken a look at the GET method. In the next example I’m going to take our movies page we created in my previous blog posts, Web development #4: PHP in the back and Web development #5: User input with HTML Forms. So first of all we’ll have to edit the PHP file. We want the form to go, because that refreshes the page. We also want to add jQuery and a custom JavaScript file to our header. Last, we need to give some ids to some elements because now we need to update the page ourselves once we add a new movie (after all, the page isn’t refreshing). So without further delay, here’s the modified PHP.

<?php
    if (isset($_POST['movieName']))
    {
        $movieName = $_POST['movieName'];
        if ($movieName)
        {
            file_put_contents('movies.txt', htmlspecialchars($movieName) . "rn", FILE_APPEND);
        }
 
        exit();
    }
?>
<!DOCTYPE html>
<html>
    <?php
        function fileAsUnorderedList($fileName, $notFoundMessage)
        {
            if (file_exists($fileName))
            {
                echo '<ul id="movies">';
                $lines = file($fileName);
                foreach ($lines as $line)
                {
                    echo '<li>' . htmlspecialchars($line) . '</li>';
                }
                echo '</ul>';
            }
            else
            {
                echo $notFoundMessage;
            }
        }
    ?>
    <header>
        <title>My favourite movies!</title>
        <meta charset="utf-8">
        <meta name="description" content="A list of my favourite movies.">
        <meta name="keywords" content="Favourite,movies">
        <meta name="author" content="Sander Rossel">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="Movies.js"></script>
    </header>
    <body>
        <h1>My favourite movies!</h1>
        <p>
        <?php
            fileAsUnorderedList('movies.txt', 'No favourite movies found!');
        ?>
        </p>
        <h2>Add a movie!</h2>
        <div>
            <label for="movieName">Movie name</label>
            <input type="text" name="movieName" id="movieName" />
            <button id="submit">Submit</button>
        </div>
    </body>
</html>

And then we need to add a JavaScript file (I’ve called it Movies.js) to add an event handler to our button click event which takes the value of the input, posts it to the server and on success adds the movie to our list and empties the movie input.

$(function () {
    $('#submit').on('click', function () {
        var movieInput = $('#movieName');
        var movieName = movieInput.val();
        if (movieName) {
            $.ajax({
                type: 'POST',
                url: 'Movies.php',
                data: {
                    movieName: movieName
                },
                success: function (data, status, jqXHR) {
                    $('#movies').append('<li>' + movieName + '</li>');
                    movieInput.val(null);
                },
                error: function (jqXHR, status, errorThrown) {
                    alert("An error occurred while adding movie '" + movieName + "'.");
                }
            });
        };
    });
});

And there you have it. Looks complicated? I guess it is a bit, but once you get the hang of it it’s not so bad. And luckily the documentation is rather good!
Another cool addition to our page would be pagination. Let’s say we are going to add hundreds of movies. Getting those all in once might slow down our page quite a bit. So we can use AJAX to get just ten, or twenty, or fifty at a time. The page could load them on a button click or when we scroll to the end of the page (that is, get the movie titles and add them to our list using jQuery, also make sure you ‘remember’ what page you’re on). This principle is called pagination and can greatly enhance user performance (and for large websites it’s even a must).

So that’s it for AJAX. And actually, that’s it for web development! You’ve now seen everything involved in creating awesome, responsive web pages. Of course there’s still a long way to go as we’ve only scratched the surface of web development. We’ve seen the tools, but are by no means expert in any of them. In my next, and last, blog post I’ll give you some tips on frameworks and libraries that can help you create the pages you want.

Stay tuned!

Programming, Web Development

Web development #6: Getting interactive with JavaScript

Leave a comment

We’ve come pretty far by now! We’re almost there actually. After reading this post you should be able to create pretty awesome websites using the full web development stack! So what’s left for us to discover? We have seen we can build dynamic websites on the back end using PHP, but what about being dynamic once the page is loaded? Well that’s where JavaScript comes into play!

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

The websites we’ve build were all pretty amazing. We’ve started simple using just HTML, added some CSS, then we added some dynamic content and we could even upload our own content. I don’t know about you, but I think that’s pretty amazing. However, I still feel like our pages are missing a little… schwung! How about highlighting buttons, sliding content in and out of our page? Just some fancy visuals that will make our website stand out. JavaScript comes to the rescue.
As an added bonus we can make calls to our back end without refreshing the entire page using AJAX. More on that later, let’s look at some fundamentals first.

JavaScript fundamentals

JavaScript has been around since 1995. It’s easy to learn, but hard to master. I’m not going to spend a lot of time on the syntax because it looks (and behaves) a lot like PHP, including truthy and falsey). I’m just going to write code. Try to keep up. I’m still writing in Notepad++ by the way. We also won’t be needing XAMPP to run basic JavaScript in this post (we’ll be needing it later for AJAX though).

One thing you should know about JavaScript is that, like CSS, it can be embedded into your HTML. But we don’t want that. In my post about CSS we learned to keep HTML and CSS seperated, which makes it easier for you to remodel your page by simply replacing some CSS files. We’ll use the same approach for JavaScript.

So let’s take a look at our first example. Yes, it’s going to be Hello world! Not the most exciting example, but you’ll see JavaScript in action. So we start out by creating a very simple HTML file. Call it whatever you like.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first JavaScript!</title>
        <script type="text/javascript" src="MyJS.js"></script>
    </head>
    <body>
        <button onclick="sayHello();">Press me!</button>
        <p id="output"></p>
    </body>
</html>

And now in the same folder create a file called MyJS.js. Inside it put the following code:

function sayHello () {
    var output = document.getElementById('output');
    output.innerHTML = 'Hello JavaScript!';
}

So let’s look at both the HTML and JavaScript. First in the header of the HTML you’ll notice I’ve added a script element. In this element I define the type and src attributes. Pretty straightforward I think. Your HTML now simply loads the specified JavaScript. In an actual server-client environment this means that the JavaScript files are sent to the client together with the HTML page.
Other than that we see a button element with an onclick event. Now whenever the user presses a button an event fires. An event is simply a notification you can subscribe to. In this case we subscribe by specifying onclick and telling it we want the function sayHello to be executed.

Now this function, sayHello, is defined in our MyJS.js file. It does the following. We declare a variable called ‘output’ using the var keyword. We assign it the result of a function called getElementById that takes a string as input parameter and is defined on something called document. Now your document is a variable that your browser gives to you and it represents your HTML content. So we’re almost literally saying “document, give me the element with id ‘output'” and guess what it returns? Yes, our p element with id ‘output’! Now that we have our paragraph we can alter it any way we see fit. In this case I’m simply going to give it the text “Hello JavaScript!”.
There’s more functions like getElementById, like getElementsByName() and getElementsByClassName(). Once you have an element you can get its child elements (using children()), its parent element (using parentElement()), its ‘neighbouring’ elements (using previousSibling() and nextSibling()) and much more. What we’re basically doing is traversing and altering the DOM (Document Object Model, or your HTML document).

Now here’s why I like and dislike JavaScript. It took me about fifteen minutes to get this example running… Fifteen!? Yes. Why? Because I spelled ‘innerHTML’ as ‘innerHtml’ and what does JavaScript do? You might say it gives us an error saying innerHtml does not exist. Wrong, what it actually does is create innerHtml on the ‘output’ variable (or more precisely the object it references). It doesn’t do anything with it, it just sits there. But in the meantime innerHTML remains empty, my page doesn’t show “Hello JavaScript!” and I’m not getting an error of any kind.
So with JavaScript you can actually alter already existing objects! How cool is that? Pretty cool, but it can lead to very subtle and hard to troubleshoot bugs, so be careful. That is also why you should always use the var keyword when creating variables. Failing to do so will work fine, but will actually create a property on your this object (the object, or context, you’re currently operating in).

And that’s actually all I’m going to tell you about basic JavaScript. The standard library is actually pretty difficult to work with and you’ll often deal with bugs like the one I just described. To top it off different browsers can behave differently using the same JavaScript code. Luckily (and also a bit unlucky) there are literally thousands of libraries and frameworks that do all the hard stuff for us. One of those libraries has become so popular that it has become the de facto standard when working with the DOM, I’m talking about jQuery.

Getting started with jQuery

There are two ways to get jQuery included in our page. One we have already seen. We get the jQuery files from jQuery.com, put them on our server (or during development our local machine) and get them in our page using the HTML script element. There are two versions you can get, the regular or the minimized version. The regular version is great for development as it is easier to debug. The minimized version has all unnecessary characters like spaces, meaningful variable names, white lines etc. removed from the file, making them practically unreadable, but making the file a little smaller in size making it to load a bit faster on our webpage. A lot of libraries have regular and minimized versions.

For this example we’re going to use the second method to get jQuery in our page though, which is through a CDN, or Content Delivery Network. A CDN is just some host providing you with popular files you might need, like jQuery. A possible benefit of using a CDN is that they might have servers across the globe, which means that if someone in America is using our website hosted in Europe they could still get jQuery from a server near them. Another possible benefit is that you don’t have to host the file yourself. So if you can, use a CDN.
Popular CDNs are Microsoft and Google, so let’s go with the Google CDN.
One word of caution though. Whenever your website requests a file from any CDN the host of that CDN may track the users of your page (they’re making a request after all). So while this is probably no problem for your personal website, it may be an issue for corporate environments where privacy and security are of bigger importance.

Let’s have a look at how our header looks with jQuery from a CDN.

<head>
    <meta charset="utf-8">
    <title>My first JavaScript!</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="MyJS.js"></script>
</head>

So you see, it actually looks the same, but we’re putting a link in the src attribute. Also notice that I put jQuery above MyJS because MyJS is going to need jQuery to run. Now let’s rewrite that sayHello function we had so it uses jQuery.

function sayHello() {
    var output = $('#output');
    output.text('Hello jQuery!');
}

Looks weird? $ is actually a perfectly valid function name in JavaScript and jQuery is utilizing it. $ is also called the jQuery function and alternatively you could’ve used jQuery(‘#output’). Now notice what we pass as a parameter to the jQuery function. It’s a CSS selector! Yes, you can get ANY element (or elements) on the page using CSS selectors. That’s great because we already know CSS. And when we have our output element we set the text (the part between the opening and the closing tags) to ‘Hello jQuery!’.

Now remember that I said we shouldn’t have JavaScript in our HTML? Well, we still have our onclick event in the button tag, so I guess I lied. JavaScript doesn’t really have a simple elegant solution to this problem. But jQuery does (they made it simple)! First of all let’s change our button tag so it doesn’t hard wire that onclick event.

<button id="btn">Press me!</button>

And next let’s take a look at our JavaScript.

$(document).ready(function () {
    $('#btn').on('click', sayHello);
});

function sayHello() {
    var output = jQuery('#output');
    output.text('Hello JavaScript!');
}

As you can see I’ve added a $(document).ready(function) call to our JavaScript page. That might look arcane, but it’s really simple actually. We call the jQuery function and pass it our document. We’re getting something back which obviously has a ready function that takes a function as parameter. This function, also called a callback function, is called when the document is ready (the HTML has loaded and is ready for traversal and manipulation). We then create an anonymous function to be called. It’s really the same as our sayHello function, except that we don’t give it a name. So in this anonymous function we get our button element and then call the on function on the result. With the on function we can hook up events to our elements. In this case we want the click event and we specify a function to be called when the click event fires (the button is clicked).
Here’s an alternative way of writing the above. I’m using a shorthand notation for $(document).ready by simply passing an (anonymous) function directly to the jQuery function.

$(function () {
    $('#btn').on('click', function () {
        $('#output').text('Hello jQuery!');
    });
});

Let that sink in. Study the syntax and compare the two examples. Take a look at how I rewrote the sayHello function to an anonymous function in particular, it may help understanding what’s going on. You may also want to try rewriting this using no anonymous functions.

There’s a whole lot to jQuery that I cannot show you in this blog, but the jQuery documentation is actually pretty good, so be sure to use it!

Now I’m going to show you another trick with which you can create beautiful pages using classes and CSS. First create a CSS file called MyStyle.css and add the following style to it:

.hovering {
    color: white;
    background-color: blue;
}

Now let’s create a single paragraph we want to light up once you hover your mouse over it. Don’t forget to link your stylesheet!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first JavaScript!</title>
        <link rel="stylesheet" type="text/css" href="MyStyle.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="MyJS.js"></script>
    </head>
    <body>
        <p id="p">Try hovering over me!<br>
        An extra line<br>
        so it's easier<br>
        to hover...</p>
    </body>
</html>

Nothing special there. Now for our JavaScript:

$(function () {
    $('#p').hover(function () {
        $(this).addClass('hovering');
    }, function () {
        $(this).removeClass('hovering');
    });
});

So we get out p element and then call the hover function which takes two functions as input. One function is called when your mouse enters the paragraph and the other function is called when your mouse leaves the paragraph (moving your icon over an element is called hovering). Now in this function we call the jQuery function and pass it this. The this keyword is a little difficult in JavaScript. This is the context in which you are currently operating, so this can refer to the window object (the ‘general context’), to an object in which you are currently operating, or in this case the HTML element on which the hover event is fired. So when we pass the p element (this) to the jQuery function we get a jQuery object on which we can call jQuery functions, such as text or addClass and removeClass. So we’re dynamically adding classes. But since our CSS applies a certain style to those classes we now get dynamic styling on our page!

jQuery UI

I want to show another quick example of how powerful JavaScript, and jQuery in particular, really is. For this we’re going to need jQuery UI. Another library that’s made by the jQuery people and uses jQuery, but adds functionality specifically for your UI (User Interface). Next to a JavaScript file the jQuery UI library makes use of a CSS file too. We can get both from the Google CDN we’ve used earlier. So here is the HTML. It looks large, but it’s quite simple.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first JavaScript!</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
        <script type="text/javascript" src="MyJS.js"></script>
    </head>
    <body>
        <div id="accordion">
            <h3>Page 1</h3>
            <div>
                <p>Some content...</p>
            </div>
            <h3>Page 2</h3>
            <div>
                <p>More content...</p>
            </div>
            <h3>Page 3</h3>
            <div>
                <p>Lots of content...</p>
            </div>
        </div>
        <br>
        <div id="tabs">
            <ul>
                <li><a href="#page1">Page 1</a></li>
                <li><a href="#page2">Page 2</a></li>
                <li><a href="#page3">Page 3</a></li>
            </ul>
            <div id="page1">
                <p>Some content...</p>
            </div>
            <div id="page2">
                <p>More content...</p>
            </div>
            <div id="page3">
                <p>Lots of content...</p>
            </div>
        </div>
    </body>
</html>

And now for some amazingly difficult JavaScript…

$(function () {
    $('#accordion').accordion();
    $('#tabs').tabs();
});

So check out the result with and without those two lines of JavaScript. You’ll be amazed! And that’s the power of JavaScript.

So in this post we’ve become familiar with JavaScript and jQuery. You can build amazing websites using JavaScript. There are literally thousands of JavaScript (and CSS) libraries and frameworks. Some, like jQuery, are pretty all-round, but some are really specific about doing one particular thing. In a later blog post I’ll point out some of the more popular ones.
Try to play around a bit with JavaScript. We’ve only scratched the surface. I haven’t even mentioned prototype, which is vital in fully understanding JavaScript. You can start getting your JavaScript skills up to date with a free ebook from SyncFusion: JavaScript Succinctly. Now as luck would have it there’s also a free jQuery ebook from SyncFusion: jQuery Succinctly. So I recommend creating a free account and downloading these sweet free resources (and no, I’m not affiliated with SyncFusion, I just like the Succinctly series).

JavaScript also adds functionality to get data from or send data to our server without having to refresh our entire page. This technology, called AJAX, is what I will talk about in my next blog post.

Stay tuned!

Programming, Web Development

Web development #5: User input with HTML Forms

2 Comments

In my last blog post we’ve seen how to create dynamic web pages using PHP. The examples in this post are using the code examples from that blog post, so if you haven’t read it I suggest you do. You can find my other posts here:

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

In the last post we created a page that would show movies (or music, or whatever) based on a simple text file (because I’m not covering databases). You could simply add new lines to the text file and they would show on your page (after a refresh). But now you probably want to add new lines directly from your website and not in the file. Why would you want that? Well, for example, because your users don’t have access to your file (and rightfully so)! Also because your web interface is more user friendly than direct file access. When you’re going to implement an actual website you’ll probably be using an actual database and you’ll be working with more data than just lines in a file. You may want to ask users for their name, address, gender, password, for webshops you want to know their preferred shipping and payment methods. And of course you want users to add content to your site, like blogs, product reviews, messages, etc. There’s plenty of cases where you’d want user input!

So we have basically two options: HTML Forms or AJAX calls. AJAX calls are discussed in a later blog post, so in this one I’m going to focus on HTML Forms.

What are forms?

Forms are actually just a couple of HTML tags! <form></form> with some input tags, <input /> of which one has the type submit, <input type=”submit” />. Sounds easy, right? After all, you want your users to fill out a (digital) form where they give their input and then submit it to the server. How does this look?

<form action="MySite.php">
    <input type="text" name="name" />
    <input type="submit" />
</form>

Is it that easy? Almost! There are quite a few input types, such as checkboxes, radio buttons, date pickers and file pickers. We’ll look at some of them a bit later in this post. First let’s see what happens in the above HTML.

Save the above code in a file called MySite.php in your xampp htdocs folder. Now if you’d view this page you would see a field for the user to add text and a button saying “Submit” (it actually says “Verzenden” on my browser, which is the Dutch translation for “Submit”). Now what happens when you type in your name and click the submit button? You’ll be redirected to the site localhost/MySite.php?name=Your+name, which simply shows the same page again (because it was specified in the action attribute), but with your input emptied. You may not have noticed, but the entire page refreshed when you hit submit. The part behind the questionmark was added by the form and it contains the names and values of the input tags you have in your form tags. Now here’s the deal. You can actually get these values from your PHP code!

Now change your code to the following:

<?php
    if (isset($_REQUEST['name']))
    {
        echo $_REQUEST['name'];
    }
?>
<form action="MySite.php">
    <input type="text" name="name" />
    <input type="submit" />
</form>

Now what happens when you fill out your name and hit submit? Your name is being printed at the top of the page. But what’s happening in the code? Well, notice the isset($_REQUEST[‘name’])? PHP has some ‘superglobal’ variables. They’re variables that are visible in all your PHP code. $_REQUEST is one of them and it’s an array that contains any parameters that are send to your page. In this case we’re checking if the ‘name’ item was set. If it isn’t (when you first load the page) it does nothing. When it is (after a submit) we echo the value of ‘name’.

Notice that the action attribute of the form element indicates what page to navigate to. In this example I’m navigating to the page we’re already on, but it could’ve been any page. For example, try the following:

<form action="http://www.google.com/search">
    <input type="text" name="q" />
    <input type="submit" />
</form>

This will successfully open Google and search for your requested search term (Google uses ‘q’ for their parameter name).

GET and POST

So that’s the short version of it. The next thing you need to know is that in the previous examples we used the HTTP method GET to retreive our pages. Perhaps you remember from the first article in this series that GET is used to request a file from the server. In this case we requested the current page with parameter ‘name’ and we requested Google/search with parameter ‘q’.

Now what if we wanted to store information? We could use GET, sure. After all we simply send some data to our server where PHP can do with it what we want, right? All true, but that’s not always what we want. Suppose you want to save someone’s contact details. Would it look good in this huge URL www.mysite.com?name=sander+rossel&country=netherlands&address=…? No, it wouldn’t. Besides, your URL has a max length, so it won’t always work either.
Second, there is some data that you don’t want to send twice. What if someone was about to pay and they hit the refresh button (or even the back button)? Navigating to yourpage.com?payment=… would simply handle the payment again!
Last, there are some safety issues with GET. URL’s are stored in your browser history and on the server in plain text. Imagine sending your password like that! www.mysite.com?password=123456. Right, so is there another way? Yes, there is!

Whenever you want to send data to your server for storage, or data that is a bit more sensitive we can use the HTTP POST method. Let’s look at our first example again.

<?php
    if (isset($_REQUEST['name']))
    {
        echo $_REQUEST['name'];
    }
?>
<form action="MySite.php" method="POST">
    <input type="text" name="name" />
    <input type="submit" />
</form>

Wow, all I did was add the method attribute to my form element and assigned it the value of POST (method is GET by default). Now if you run this you’ll see your name on top of the page again (after a submit), but your URL will simply be MyPage.php. And try refreshing the page, your browser will warn you that information might be re-submitted.

PHP has specific superglobal variables for handling GET and POST variables specifically. They’re $_GET and $_POST, so you can use them instead of $_REQUEST (which has both GET and/or POST variables).

Other input

So we can now send some text input to the server. Surely you want more than that! Let’s look at some other input types. We’ll also tidy up our form a bit by using the label element.

<form action="MySite.php" method="POST">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required /><br><br>
 
    <label for="male">Male</label>
    <input type="radio" name="gender" id="male" value="male" checked /><br>
    <label for="female">Female</label>
    <input type="radio" name="gender" id="female" value="female" /><br><br>
 
    <label for="email">Email</label>
    <input type="email" name="email" id="email" /><br>
 
    <label>Receive newsletter
        <input type="checkbox" name="receiveNewsletter" checked /><br><br>
    </label>
 
    <label>Date of birth
        <input type="date" name="dateOfBirth" /><br><br>
    </label>
 
    <label for="avatar">Avatar</label>
    <input type="file" name="avatar" id="avatar" accept="image/*" /><br><br>
 
    <input type="submit" />
</form>

So that’s quite something. First, notice the <label> tags. I’m using them in two different ways. The first is to just declare them and associate them to an input field by specifying the for attribute and giving it the value of the id of the input I want to associate it with. The second way is by wrapping the input tags inside the label tags. Both ways are fine. Now if you click on a label the input gets focus or is selected/unselected. Nice!

Now for the different input types. We’ve seen the text type, so I’ll skip that one. I did add the required attribute though. Try submitting your form without filling out your name. There are more attributes like this one like max, maxlength, min and pattern.

Next is the password type. It looks very much like the text type, but if you type in it you get to see password characters rather than text.

Then comes the radio type. Notice I have two radio types, male and female. Also notice they have the same name. That means that if a radiobutton with a certain name is selected all other radiobuttons with the same name are unselected. In this case that means we can pick either male or female, but not both. I’ve also used the checked attribute for the male input. You don’t have to specify a value for checked. It will simply make this radiobutton checked. You could specify checked for both male and female, but your browser is only going to select one. It also makes for invalid HTML, so just don’t do that.

Following we see the email type. Again, looks like the text type, but if you commit your form your browser will check if the email address has valid syntax. That’s great, but don’t forget to check on the server too! Email is new in HTML 5 and will behave like text on older browsers.

Moving on we see the checkbox type. Not much to say, except that you can specify checked to have it checked, or omit it to have it unchecked.

Next is the date type. The user can pick or enter a date. The browser will validate if it’s a valid date (no 32st januari, etc.). This one is new in HTML 5 too and will also behave like text on older browsers.

Last, but not least, is the file type. You can use this to have a user select one or more files (if you need more than one simply add the multiple attribute, much like checked).

And of course you can handle all of those in your PHP code too. But I’m sure you can figure that out. There are other input types too, but I’ll leave it up to you to check them out. Just Google for HTML input.

Completing our example

So at this point we want to make our favourite movies example from my following blog work. Actually all we want to do is POST a movie title, add it to our text file and display it on our page. There’s actually a bit more to it than you might think… Here’s the complete code for the page.

<?php
    if (isset($_POST['movieName']))
    {
        $movieName = $_POST['movieName'];
        if ($movieName)
        {
            file_put_contents('movies.txt', htmlspecialchars($movieName) . "rn", FILE_APPEND);
        }
 
        header('Location: ' . htmlspecialchars($_SERVER['REQUEST_URI']));
        exit();
    }
?>
<!DOCTYPE html>
<html>
    <?php
        function fileAsUnorderedList($fileName, $notFoundMessage)
        {
            if (file_exists($fileName))
            {
                echo "<ul>";
                $lines = file($fileName);
                foreach ($lines as $line)
                {
                    echo '<li>' . htmlspecialchars($line) . '</li>';
                }
                echo "</ul>";
            }
            else
            {
                echo $notFoundMessage;
            }
        }
    ?>
    <header>
        <title>My favourite movies!</title>
        <meta charset="utf-8">
        <meta name="description" content="A list of my favourite movies.">
        <meta name="keywords" content="Favourite,movies">
        <meta name="author" content="Sander Rossel">
    </header>
    <body>
        <h1>My favourite movies!</h1>
        <p>
        <?php
            fileAsUnorderedList('movies.txt', 'No favourite movies found!');
        ?>
        </p>
        <h2>Add a movie!</h2>
        <?php echo '<form action="' . htmlspecialchars($_SERVER['REQUEST_URI']) . '" method="POST">' ?>
            <label for="movieName">Movie name</label>
            <input type="text" name="movieName" id="movieName" />
            <input type="submit" />
        </form>
    </body>
</html>

So that’s quite a lot! No worries. First of all you should notice that I’m handling our POST input. If movieName is set and it has a value (it’s truthy) we append it to our text file, followed by a new line (rn, or “line feed, carriage return” from ye olden days when we used typewriters).
What happens next is that we redirect to the current page using $_SERVER[‘REQUEST_URI’], another superglobal variable in PHP. So once we submit form data we get to our page with POST data. We handle the POST data and again load our page, but this time without POST data (a GET). If we wouldn’t do this we’d get an annoying pop-up every time we wanted to refresh our page. This technique is called the Post/Redirect/Get Design Pattern.

But there’s more happening. I’m using a function called htmlspecialchars, what’s that all about? Well, here’s a little practice for you. Remove all the htmlspecialchars from the code and add the following movie “<script>alert(‘hacked!’);</script>“. Now if you refresh the page you’ll get a popup saying “hacked!”. Quite annoying isn’t it? See it this way, people are going to submit text to your page and you’re going to echo that text as-is. But that text may be/contain valid HTML (and script)! And that would mess up your page or worse! It’s a huge security risk also known as Cross-Site Scripting or XSS. Now put the htmlspecialchars back in place and your page will simply display a movie with a rather weird name. So that’s what htmlspecialchars does. It makes sure your text is transformed into non-HTML, so > would be  echoed as &gt; etc. I’ve used this trick in a few places.

In our form elements I’m using the same tricks. I use $_SERVER[‘REQUEST_URI’] and htmlspecialchars. Why the $_SERVER[‘REQUEST_URI’]? If the name of your PHP file changes so would the URL to access it. If the URL was hard coded you’d have to check your PHP file and change all references to ‘movie.php’ to ‘myNewFileName.php’. With this trick we’ve got that covered!

A last remark on the PHP above the !DOCTYPE tag. Is this bad? Nope. Remember that all this PHP code is executed on the server and that your HTML is sent back. So by the time this file reaches your browser it has no knowledge of any code above !DOCTYPE.

Other than that you should know all the other stuff I’ve put in there. So now you have a website that actually takes user input, stores it on the server and serves that data back to the user. In the next blog we’re going to take a look at JavaScript, or code that runs from the browser! Good stuff.

Stay tuned!

Programming, Web Development

Web development #4: PHP in the back

Leave a comment

Missed me? It’s been a while since I last blogged (about three months). I’ve been busy moving to my own house and getting up-to-speed at a new job. Lots of good stuff, but no blogging. Well today is the day I’m picking this up again and I’m just going to act like it’s three months ago and continue with the series.

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

So in the previous installments we’ve created a web page using HTML and CSS. We can actually build pretty nice websites using just those, but we still run into some trouble. What if we wanted to add content to our site? We’d have to edit our HTML each time. What if we wanted to display our website in multiple languages? What if we wanted users to be able to add content to the site (such as a blog)? In other words, we want our content to be dynamic. That’s all not possible using just HTML and CSS. We’re going to need a bit more. We’re going to need something creating our HTML on the back-end.

For this blog post I assume you are familiar with HTML and CSS, which you can read about in my previous blog posts, and that you’ve worked with some programming language before, preferably some C-based language such as C# or Java.

Introduction to PHP

So our back-end is just a server listening for requests. Whenever a request comes in we want to handle it and send a response (such as an HTML web page). We can handle these requests with a variety of tools and languages, but for this article I’m using PHP.

Why PHP? First of all it’s free. Second, it’s one of the most popular web languages that has been around for a good long while. It has a huge community and lots of documentation and tutorials. Third, virtually all web hosts, even the free ones, have support for PHP. Other languages, such as C#, are not always supported. Last, but not least, PHP is quite easy to learn because it can be pretty lightweight. Actually I’m simply going to write my PHP in Notepad++.

So PHP was created twenty years ago, in 1995, by Rasmus Lerdorf. Back then the PHP stood for Personal Home Page. They changed it to PHP: Hypertext Preprocessor, making it a recursive acronym (because the first P stands for PHP, of which the first P stands for PHP, of which the first P…). Clever, huh? Anyway, PHP is a scripting language, meaning it is interpreted rather than compiled. It’s also procedural, object oriented, weakly typed and it has C-based syntax. Enough talking, let’s code!

Setting up your environment

Unfortunately we can’t code just yet. Remember that your browser renders HTML and CSS. It can also run JavaScript (which I will discuss in another blog post), but it can’t execute PHP files. Usually your server handles PHP execution. Chances are you don’t have a web server laying around. Luckily you can configure your own PC to act as a web server.

To do this simply install web server software. You have a few choices, but I’m going for XAMPP. You can download XAMPP here and then simply install it (choose all default options, or change them if you know what you’re doing). When the installation is done XAMPP will ask you to start the XAMPP Control Panel. Start it and you’ll see a list of options. We’ll need Apache, so just start it. Now start your favourite browser and navigate to http://localhost. You should see a XAMPP page. Congratulations, you have just installed a (local) web server and you can now run PHP files!

To check if it really works create a new text file and name it “hello.php”. Inside the file place the following text:

<?php
    echo "Hello, PHP!";
?>

Now go to the installation folder of XAMPP (you can go there quickly by using the ‘Explorer’ button in the XAMPP Control Panel), find the htdocs folder and place your hello.php file there. Now, in your browser, navigate to http://localhost/hello.php. You should see the text “Hello, PHP!” And now that we’ve got the mandatory Hello world example out of the way let’s start writing some real PHP.

Learning the syntax

So let’s first look at some basic PHP syntax. Basically you’re going to write an HTML page with some PHP in it. The PHP is going to create some text representing more HTML. To indicate that you’re going to use PHP use the <?php open tag and to indicate that you’re done with PHP use the ?> closing tag. You’ve seen this in the example earlier.

The echo, or alternatively the print, statement outputs your code to HTML. In the above example it creates the HTML “Hello, PHP!”, which is just some text. But we could make that echo “<h1>Hello, PHP!</h1>” and we would get a header on our page.

So as I mentioned PHP is weakly, or loosely, typed. That doesn’t mean PHP doesn’t have types, it means a variable can change its type while the code executes. It also means you can add 3 to “3” and the result might be 6 or “33”, so a bit of caution is required when working with weakly typed languages (and in fact PHP always converts text to numeric when adding).
So what are the types in PHP? First we have the int for numerics without fractional components (so 1, 8, 42 and 986 are valid integers, 1.12 is not). Second there is float, or double, for numerics with fractional components. Then we’ve got the boolean or bool for a simple true or false. Next is the string for text (or an array of characters). Then we’ve got the array, or a 0-based indexed collection of stuff. There’s the object type, which encapsulates state and behaviour. And last, and actually pretty literal least, there’s NULL indicating the absence of any value.
Nothing special if you’ve worked with other languages before.

So how do we go about and use these types? Usually we’d want to store them in variables. So how do we declare variables? We actually don’t… Just assign a value to some variable and all of a sudden it’ll be there. It’s a kind of magic! And a variable always start with the $ sign. The typical variable declaration then looks like this:

$intVar = 42;
$floatVar = 3.142;
$boolVar = true;
$stringVar = "Some string"; // Double quotes.
$stringVarAltern = 'Alternative string'; // Single quotes.
$arrayVar = array('Pulp Fiction', 'Fight Club', 'Star Wars');

class person
{
    public $name = NULL;
    public $age = NULL;
}

$objectVar = new person();
$objectVar->name = 'Sander';
$objectVar->age = 27;

$nullVar = NULL;

Now aside from the class and objectVar that looks pretty straightforward right? But beware, the following is completely legal (PHP is weakly typed, remember?):

$stringVar = 'Some string';
$stringVar = 42;

Now that’s something you do want to look out for.
There’s something else about strings too. See how you can declare a string using single or double quotes? Well, the double quote strings are interpreted strings, meaning that any variable name you place in there will be evaluated before the string prints. If you ever need to concatenate string you can use the . operator.

$hello = 'Hello';
echo '$hello world!'; // Outputs $hello world!
echo "$hello world!"; // Outputs Hello world!
echo "$helloish world!"; // Error, $helloish is undefined!
echo "{$hello}ish world!"; // Outputs Helloish world!
echo 'Conc' . 'aten' . 'ate!'; // Outputs Concatenate!

Another thing that might surprise you is that PHP can treat anything as a boolean! Any non-default value will be true while all default values will be false, also called truthy and falsey. The next example uses an if/else statement to illustrate this. Try playing around with it.

if ("Hello") // Try 0, '', '0', 0.1, NULL and array().
{
    echo "Yep...";
}
else
{
    echo "Nope!";
}

So I’ve also shown you an if/else statement. Let’s look at some loops too.

$movies = array('Pulp Fiction', 'Fight Club', 'Star Wars');

for ($i = 0; $i < count($movies); $i++)
{
    echo "$movies[$i] <br>";
}

foreach ($movies as $movie)
{
    echo "$movie <br>";
}

Now there’s actually quite something going on there! First we initialize an array, which we’ve seen before. Now in the first for loop we start by declaring our counter variable $i, then we do a boolean test to check if we need to loop once more and finally we do an update (increment $i) after each iteration. In the boolean check we also use the count(array) function to check if we still have more elements in the array. Ideally you would perform this count outside of the statement so it only gets performed once.
The second loop is a bit more readable. I’m basically saying “for each element, which I will call $movie, in the array $movies do this…”. Now in the loop’s body you can freely use the current element using the $movie variable.
There are also do– and while loops, but I won’t discuss them here. For a programmer this shouldn’t be anything new!

Writing a page

Now let’s write an entire page. Usually you’d have a database, such as MySQL, running, but that’s a bit overkill for this post. So we’re going to read lines of text from a text file and show them on the page. You’ll see that you can update your page without actually modifying your HTML or PHP file.

So let’s first take the example with my favourite movies. We’re going to put our favourite movies in a text file and print them on our page. So create a new PHP file, call it movies.php and put it in the hpdocs folder (which is in your XAMPP folder). Now create a text file called movies.txt and put it in your htdocs folder with your PHP file. You can put some movie names in your text file. Each name goes on a seperate line (I’m calling it movies, but any value would suffice, of course).

For this example I’m going to use an unordered list. I haven’t shown this yet, but the HTML is as follows:

<ul> <!-- Unordered List -->
    <li>Some item</li> <!-- List item -->
    <li>Another item</li>
    <li>Third item</li>
    <li>etc...</li>
</ul>

You could also use an ordered list, in which case you’d use <ol> tags instead of <ul> tags.

So your PHP file could look like this (excluding the !DOCTYPE, html, header and body tags):

<h1>My favourite movies!</h1>
<p>
    <?php
        if (file_exists('movies.txt'))
        {
            echo '<ul>';
            $lines = file('movies.txt');
            foreach ($lines as $line)
            {
                echo "<li>$line</li>";
            }
            echo '</ul>';
        }
        else
        {
            echo 'No favourite movies found!';
        }
    ?>
</p>

So using the PHP function file_exists(string) we’re first checking if the movies.txt file exists at all. If it doesn’t we’ll simply show “No favourite movies found!”, but if it does we’re going to create an unordered list and read the files contents using the file(string) function. The file(string) function reads all lines of a file and puts them in an array. There’s more functions for file manipulation, but I won’t discuss them here. Next we’re looping through the lines we just got from the file. For each line we’re appending a list item element to our HTML. When all the lines are processed we close our unordered list.
And that’s our page! You can view it by navigating to http://localhost/movies.php. You can use some CSS to make it look a bit prettier and you’ll probably want to add some content too.

Now imagine you’d get that out of a database? Pretty neat, huh!

Functions

Now there are times when you have certain code that you want to reuse. Let’s say we want to create another unordered list based on another file. The same rules apply, except maybe we don’t have movies, but songs that we’d like to display. We can create function for this and have the filename passed in as a parameter. So let’s look at how we can put the code above in a function. At the top of your page put the following:

<?php
    function fileAsUnorderedList($fileName, $notFoundMessage)
    {
        if (file_exists($fileName))
        {
            echo "<ul>";
            $lines = file($fileName);
            foreach ($lines as $line)
            {
                 echo "<li>$line</li>";
            }
            echo "</ul>";
        }
        else
        {
            echo $notFoundMessage;
        }
    }
?>

As you can see we’ve defined a function that does the same as our previous code, except the filename and the message when the file is not found are passed in as parameters. Now how can we call this?

<h1>My favourite movies!</h1>
<p>
    <?php
        fileAsUnorderedList('movies.txt', 'No favourite movies found!');
    ?>
</p>
<h1>My favourite music!</h1>
<p>
    <?php
        fileAsUnorderedList('music.txt', 'No favourite music found!');
    ?>
</p>

And look at that! You can now add a second text file to your htdocs folder and your favourite music will be displayed the same as your movies. You still see almost identical code here, so we could change our function and make it do a bit more or we could create a second function that creates the header and paragraph for us.

And what if you wanted to use this function on other pages? Simply put the function in a seperate file and include the following line of code in the PHP file where you want to use the function.

<?php include("MyFunctions.php"); ?>

If you want to further organize your code, and you’ll want that, you’ll have to use objects and namespaces. You’ve already seen a little example of an object earlier and I’m leaving it at that. Be careful with putting functions directly in your files though. What if two files you want to include contain the same functions (or variables)!? You’d have a problem. Using objects and namespaces help toward preventing this.

So that was a very short introduction to PHP. Probably shorter than it deserves. PHP has lots of functions, libraries, third party tooling and a large and active community. If you want to learn more about PHP I suggest you start by Googling for tutorials or perhaps read a book about it. For now you’ve created your first website with dynamic content using a server-side language though! In my next post (which won’t take me another three months) we’ll look at sending data from our website to the server so we can use our page to add movies or music to the text files.

Stay tuned!

Programming, Web Development

Web development #3: Styling our page with CSS 3

Leave a comment

This is the third installment of a blog series about web development. You can find other blogs here:

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

In this part of the ongoing series on web development we’re going to apply some style to the web page we created in the previous blog post. So if you haven’t read that one please do, or at least get the page’s HTML at the bottom of that post.

About CSS

CSS stands for Cascading Style Sheet and is used to apply styles to your web page (for example setting backgrounds or changing fonts) and create a layout (position elements relative to each other). CSS, like HTML, has a history of incompatibilities and non-supportive browsers too. While CSS 1 (actually level 1) has been around since 1996 it wasn’t until 2010 that most browsers fully (and more or less correctly) supported CSS. Again, each browser renders web pages differently, making it important to test your CSS in different browsers.

We’re currently at CSS (level) 3. What’s different from CSS 3 compared to it’s predecessors (CSS 1, CSS 2 and CSS 2.1) is that it’s divided into modules like Color, Font and Animations (there’s actually over fifty modules *gasp!*). This allows for various styling options to be developed independently. As a result various modules have various statuses and only a few are actual recommendations (as opposed to draft or work in progress).

Now why is CSS so important? It clearly seperates your content from your visuals. It’s basically what do you want to convey vs. how do you want to convey it. The ‘what’ goes into your HTML and the ‘how’ goes into your CSS. And having seperated this it’s easy to create a new page for your website without having to worry about styling. Or you may want to give your website a cosmetical make-over without having to change it’s contents. As a bonus both your HTML and your CSS documents will look cleaner and be easier to read!

Syntax of CSS

So enough with all those history lessons already! Let’s look at some CSS. There are actually three ways to apply CSS to your HTML. The first is inline, meaning you’re defining it in your HTML elements with a style attribute, which we just said we don’t want to do. The second way is to embed your CSS into your HTML’s head section. That already sounds better than inline, but it’s still not good enough (we’d still have to edit our HTML file for style changes). The third method, and the one we will use, is to define your styling in a seperate file.

So simply start up your text editor (again Notepad or Notepad++) and save it as “mystyle.css” (where “mystyle” is a name of your choosing). The first thing you need to do when applying a style is thinking to what you want to apply the style. Let’s say we want our headers (more specifically our h1 elements) to have a red text color. You’d start by writing a selector. In this case the selector is simply h1. Notice that a comment (for human readers) is started with /* and ended with */.

h1 {
    /* Your style here... */
}

Easy as that. Now inside the curly braces (you know them from C, C++, C#, Java, etc.) we’re going to define the style, which will be applied to our h1 elements. This looks like “property: value;”. So let’s define the red color.

h1 {
 color: red;
}

That’s deceptively easy. Yes, CSS can be that easy, but once your layout gets a bit more complicated… So does your CSS. You can put multiple properties in a single selector too. So save your document (for now preferably in the same folder as your HTML document, or you’ll have to change the path in the href attribute below). We’re going to apply this style to our HTML document (the one from the previous blog). Open up the HTML and add the following line of code to your header (for example at the bottom, just above your </head> closing tag):

<link rel="stylesheet" type="text/css" href="mystyle.css">

I’m not going to elaborate on the link element any further. We’ll see it again when we’re going to use JavaScript. Now open your HTML document and you’ll notice that your header is actually colored red! Pretty awesome.

Selectors

So we just started by writing a selector, in our case the selector for h1. Selectors can be pretty tricky though. Remember that HTML elements can be nested? In our page we have an aside element containing an h2 element and some p(aragraph) elements. Let’s say way want to target that h2 element and make it blue. If we used h2 as our selector all h2 elements would be blue (go on, try it out). We can target elements within elements by combining them in the selector.

aside h2 {
    color: blue;
}

This will make all our h2 elements within aside elements blue. And you can keep combining this. I should mention that any h2 element within the aside element, even when it’s nested into other elements, is now blue. But suppose you only want the h2 elements that are directly parented to the aside element. You can now use a context selector by using the > symbol.

aside > h2 {
    color: blue;
}

Now what if you had two aside elements, both containing a h2 element, and you only wanted one of the two to be blue. For this we have two choices and both requires us to go back to our HTML. The first is working with IDs and the second is working with classes. We’ll look at them both.

Every HTML element can have at least the following two attributes: id and class. We can use them in our CSS (and later JavaScript) to group and/or identify specific elements on our page. In the next example I have modified a piece of our page so it contains some IDs and classes.

<h1 id="title">Our first webpage!</h1>
    <p><abbr class="info" title="HyperText Markup Language">HTML</abbr> stands for <b id="HTMLfull" class="info">HyperText Markup Language</b>.</p>
    <p>The language consists of <i class="info">tags</i> that describe the content of a document.
 For example, a tag can indicate that a certain text belongs to a single paragrah,
 that certain text is more important, less important, that an image should be displayed, or that a new line must be inserted.</p>

As you can see the h1 element has the ID “title” and the b element has ID “HTMLfull”. Furthermore I’ve added the “info” class to the abbr, b and i elements. Now let’s style them in our CSS. Let’s say we want everything that’s “info” to be light blue and we want the text HyperText Markup Language to be bigger too.

.info {
    color: lightblue;
}

#HTMLfull {
    font-size: 150%;
}

Give your IDs and elements a descriptive name, for example “info”, instead of “lightblue”, “lightblue” says something about your style, while “info” says something about your meaning. So in this example I’ve shown you how you can use IDs and classes and even combine them (in case of the b element which is now lightblue and big). Another tip, keep your IDs unique, even though HTML and CSS don’t enforce it.

Now let’s say you want all i elements of class “info” to be purple. No problem!

.info {
    color: lightblue;
}

i.info {
    color: purple;
}

But in this case we have a conflict! The i element should be lightblue, because it has the info class. However, it should also be purple, because it is an i element with the info class. As you can see CSS applies some rules of precedence. As a rule of thumb the most specific selector take precedence over less specific selectors. In this case an i element with class info is more specific than every element with class info, so the i element gets a purple color.

Last, but not least, you can use a * as a wildcard to specify any element. For example, you want every element in an element (let’s say an aside) to have a specific style, but exclude the aside itself. You can use the following.

aside * {
    /* Your style here... */
}

Layout

Now let’s make our page more fancy. Let’s add some layout. First we want our page to only cover a part of the screen, let’s say 50%. We also want to center it in the middle of the screen. That’s a bit tricky, but we’ll have to work with margins (the area around an element). So we’ll define a margin of 0 and let our browser figure it out. We’re also going to put some background picture on our page. I’ve taken a picture from Google and decided to use it as a background (be sure you’re not using any copyrighted stuff!). So we’re going to apply this style to our entire page, which is the body element.

body {
    background-image: url(https://p1.pichost.me/i/24/1475865.jpg);
    width: 50%;
    margin: 0 auto;
}

Wow! Our page is already beginning to look quite nice! Now remember that aside element we had? I want it to stand out a bit. Let’s put a (solid 1 pixel) border around it. I also want it to have a sort of semi-transparent white-y background, if you know what I mean (and if you don’t you’ll see for yourself). Here’s the CSS for our aside element.

aside {
    border: 1px solid black;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 3px;
}

I put the padding there to create some distance between the border and the text. The padding is like the margin we used earlier, but where margin defines the space outside the element padding defines the space inside the element. 3 pixels proved to be enough space (found through a little experimenting).

I’m also still not satisfied with the h2 element within the aside element. I’ve added some extra styling.

aside h2 {
    color: blue;
    border: 2px solid black;
    width: 25%;
}

Blocks

As a finishing touch I want our image to be centered horizontally. Unfortunately that’s not as easy as it sounds. I haven’t mentioned this before, mainly because this is where it matters most, but HTML has two kinds of elements: block elements and inline elements. Basically, block elements represent a significant item that represents a rectangular block of space on a page. Examples of such elements are the p elements, h* elements and ul and ol elements (unordered list and ordered list respectively). Inline elements are smaller items on a page that reside within block elements. Examples are the a, u, em and strong elements.

So far, when we wanted to change the position of an element, they were block elements (the body and h2 elements). The img element, however, is an inline element. That means browsers usually just render them on the same line as their surrounding content and inline position jumps are just a bit weird. So we’ll have to let CSS know to treat the img as a block element before we can reposition it. Luckily that’s pretty easy! We can reposition the image the same way we repositioned the body, using the margin.

img {
    display: block;
    margin: 0 auto;
}

Now look what happens when you alter your paragraph as follows (remember that HTML actually ignores line breaks, so the below example shows the text and image on the same line by default).

<p>HTML 5 is awesome!<br>
Text before the image! 
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="The HTML 5 Logo" title="The HTML 5 Logo">
Text after the image!</p>

Now try turning display: block; on and off (by removing the CSS). See the difference? Also notice that the margin does nothing for the image when it’s not treated as a block element. Now suppose we really need that text on the same line as the image, but we want the image in the center. In this case we can use float to lift up the image and take it out of the normal content flow. You can do this for all block elements and it’s specifically handy to create a menubar on the left or right side of the screen.

img {
    display: block;
    float: right;
    margin-right: 50%;
}

Notice that I float to the right side of the screen and then use the right margin. I do this because if I floated to the left the text would be placed behind the image instead of at the beginning of the line. The float property can also mess up your layout, try using the clear property on adjacent blocks to fix this.

We’ve just seen a small part of CSS. There’s many more properties that you can use to create awesome styles and layouts. Like with HTML CSS is pretty forgiving, meaning that if you made a type your browser will probably figure out what you meant and display your page correctly. Again I advise you to follow the standards and validate your CSS against the W3C CSS Validation Service. Try experimenting with HTML and CSS to get the hang of it and learn new things. Also, don’t miss the next blog!

Stay tuned!

Programming, Software Development, Web Development

Web development #2: Our first website using HTML

5 Comments

This is the second installment of a blog series about web development. In this post we’re going to talk about HTML.
You can find other blogs here:

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

At this point I presume you know a bit about the internet and the world wide web. If you don’t please read my previous blog first. In this part we’re going to take a look at HTML and create our first web page.

The history of HTML

HTML, which stands for HyperText Markup Language, was first presented in 1991 by Sir Tim Berners-Lee, “inventor” of the internet as we know it today and chairman of the World Wide Web Consortium (W3C). HTML was based on SGML (Standard Generalized Markup Language) and was supposed to be the standard language in which web pages would be built. A proper HTML document consists of elements which consist of tags, usually a start and end tag. For example, a header followed by a paragraph in HTML would look as follows:

<h1>This is a header.</h1>
<p>This is a paragraph.</p>

In this example you can see the descriptive (markup) nature of HTML. The tag <h1> indicates “this is where a header starts” and </h1> indicates “this is where a header ends”. The forward slash (/) denotes a closing tag. The entire <h1>This is a header.</h1> makes up an element in HTML. The same goes for the paragraph and the <p> tag.

Elements can be nested, however a nested element must be closed before the parent element is closed. In the following example I will demonstrate this. The indentation is purely for readability, it is not actually part of HTML. I’ve also added a little comment. The <!– … –> denotes a comment and is ignored in the HTML, but visible for (human) readers.

<p>
   This is a paragraph.
   <h1>
      This is a header inside a paragraph
   <!--Close h1 before closing p-->
   </h1>
</p>

Whenever a client requests a web page from a web server the web server sends an HTML document. Web browsers, like Internet Explorer, FireFox and Chrome interpret these documents and show you the page (without tags).

In 1995 the IETF introduced new tags and concepts with the release of the new HTML 2 standard. Subsequent HTML versions (standards) were released by W3C exclusively. HTML 3.2 was released in january 1997 and HTML 4 in december 1997, adding and dropping tags and rules (for both writing and interpreting HTML).

XHTML

In 2000, after version 4.01, came XHTML (Extensible HTML) which was based on XML rather than SGML. XML is actually a more restrictive subset of SGML and by using XML browsers were able to parse HTML as XML. XHTML was supposed to be a backward compatible XML version of HTML. With XHTML 2 the W3C wanted to make a clean start and break free from the past. HTML 4 and XHTML 1 dropped backward compatibility. Because of the controversy this caused XHTML 2 never saw the light of day as a standard.

HTML 5

In 2008 a first draft version of HTML 5 appeared, building upon XHTML. Almost seven years later (and 14 days ago at the time of this writing) HTML 5 was released as the new standard! Although browsers and developers have been working with HTML 5 for a while now. HTML 5 introduces some new concepts. In this blog post I’m working with HTML 5 and I’m going to explain what makes HTML 5 different while we’re building our first web page.

I recommend you take a look at the HTML 5 standard. It contains a description of all elements and how to use them.

Browser incompatibilities

As said it is up to web browsers to interpret HTML, or markup, and translate it into visuals on screen. Each browser does this a little differently. As such your HTML code may look different in different browsers. While most browsers nowadays follow the standard pretty well it’s important to check that your website looks okay in different browsers. It’s also one of the reasons you should typically update your browser when updates are available.

Especially Internet Explorer is notorious for being just a little different. Back in the 90’s, when the internet was still young, IE and Netscape were the two browsers you typically used. Of course both wanted to be better than the other. They started making up their own supported HTML tags like <blink> and <marquee> (yes, this was a time when blinking text was considered flashy and high-tech). Netscape disappeared and IE had to support older, non-standard HTML.

Getting started

So enough with those history lessons already! Let’s start creating our very own HTML document. Open up Notepad, type something, save it as “something.html”, open it from the location where you saved it and it will display your text in your default browser. Congrats, you’ve just created your very first web page. That was a bit of an anti-climax, right? While it works, after all you can see your typed text in your browser, creating a well formed HTML document is a bit harder than that (although creating an HTML document is actually that easy). So you can keep using Notepad or use a more sophisticated text editor. I prefer Notepad++, which even has some IntelliSense for HTML. There are other editors too, but I recommend you keep your editor simple while learning.

Now we’re heading somewhere

So, now that you have your editor in place let’s start by creating a real HTML document. First you’ll need to specify the type and version of HTML you’re using (we’ve seen there’s a few). We can do this by using the DOCTYPE tag. The version for HTML 5 has been drastically simplified. The following example illustrates this.

<!--HTML 5-->
<!DOCTYPE html>

<!--XHTML 1.1-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--HTML 4.01 Strict (not backward compatible)-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

After that we need some <html> tags (starting and ending tags) between which our document will be formed. A document consists of a header, which contains the title and possibly some metadata, and a body, which contains the content of our page. While your page is displayed perfectly fine when you place the header under the body, or when your header does not have a element, it is recommended to place your header above your body and put a title inside your header because that’s the W3C standard.

<!DOCTYPE html>
<html>
    <head>
        <title>Our first web page!</title>
    </head>
    <body>
        
    </body>
</html>

There’s more information you can put in your header, like links to other scripts (CSS, JavaScript…), but we’ll get to that in later blog posts. One thing that is important to mention is the <meta> element. The meta tag has a name attribute and a content attribute. Together they tell something about your page. Let’s look at an example and I think this will be clear. Notice that the <meta> tag has no ending tag.

<head>
    <title>Our first web page!</title>
    <meta charset="utf-8">
    <meta name="description" content="HTML tutorial on sanderrossel.wordpress.com">
    <meta name="keywords" content="HTML,XHTML,HTML 5,Web Development">
    <meta name="author" content="Sander Rossel">
</head>

Headers

Now let’s add some body to the document. We have already seen the <h1> and <p> elements. In HTML there are a couple of header tags, <h1> to <h6>. Suppose you have a header for your whole document, this would be h1. But in your document you want to have some additional headers, these would be h2. And any headers inside your h2 would be h3, etc. Again, this is not mandatory, it’s a recommendation. When a page shows more articles (like a blog home page) each article can, of course, have a h1 header.

<body>
    <h1>Our first webpage!</h1>
        <p>HTML stands for HyperText Markup Language.</p>
        <h2>Important tags</h2>
            <p>Paragraphs are enclosed in &lt;p&gt; tags</p>
</body>

Escaping

You may be wondering why &lt;p&gt; is looking so weird. Well, imagine that we said “<p>”, and a browser is going to read our HTML, it would think we started a new paragraph! So because the < and > symbols serve a purpose in HTML we can’t use these symbols in ‘regular’ text. Instead we use &lt; for the ‘lesser than’ symbol (<) and &gt; for the ‘greater than’ symbol. We must escape the ampersand symbol (&) and the quote (“) in a likewise manner (&amp; and &quot;).

It’s just Semantics

At this point you may be satisfied with the content, but you may want to style it a bit. Perhaps give the header text another color, use a background, center it in the middle of the screen, etc. This is where HTML 5 is different from its predecessors.

In HTML 5 we define no style whatsoever. We use elements only describe the text semantically. For example, we want to make “HyperText Markup Language” bold, because it’s important and we want to italicize “<p> tags” because it’s a technical term. For this we can use the <b>, <strong>, <i> or <em> (for emphasize) tags. Now in earlier versions of HTML the <b> tag meant bold and the <i> tag meant italic, but in HTML 5 they have a different meaning. <b> means we want to draw attention to this text without conveying extra importance. <strong> does convey this extra importance. <i> represents text in an alternative mood, but without emphasizing the importance of the text. <em> is used when you want to emphasize some text.

And that’s the big difference between HTML 5 and everything that came before. In HTML 5 we think of tags in terms of meaning (or semantics). What do we want to convey with this text, without thinking about the visual aspect. In this case I’m going with <b> and <i> because they fit the meaning of the words best (alternatively, I could’ve used <code> for the “<p> tags”).

<body>
    <h1>Our first webpage!</h1>
        <p>HTML stands for <b>HyperText Markup Language<b>.</p>
        <h2>Important tags</h2>
            <p>Paragraphs are enclosed in <i>&lt;p&gt; tags</i></p>
</body>

When you view this body in your browser you’ll probably see some style already. Your <h1> header is pretty large while your <h2> header is a bit smaller. Your <b> element is bold and your <i> element is italicized. This is just some default style, you can easily override it. If the elements fit your meaning, but the way your browser renders them doesn’t (maybe we wanted <b> elements to be red) still go for the elements that convey the right meaning.

There’s plenty of more elements that can help you give meaning to your document. For example there is <article>, <section>, <aside>, <footer>, <small>, <blockquote>, <code>, <abbr> (from abbreviation), <address> (for contact information), etc.

Anchors

The <a> element represents a hyperlink. It can link to other websites, pages, or a specific place on your current page. The place you want to link to is specified by the href attribute. The text the user has to click on to be redirected comes between the starting and ending <a> tags. Often you’ll find something like: “For my awesome blog click here”, where “here” redirects you to the blog. Don’t be like that, make your linking text descriptive, for example: “You can read more on my awesome blog” where “awesome blog” redirects you to the blog. This is, again a recommendation from the W3C. Here’s a small example of the <a> element (including a target attribute):

<p>You can read all about web development on <a href="http://www.sanderrossel.wordpress.com" target="_blank">my awesome blog</a>!</p>

Images

There’s one last element I wish to discuss, the <img> element. I want to discuss it mostly because we can learn two things from it. First, that we should really use HTML 5 for the meaning of our text, not our styling. And second why we should create our document according to the W3C standards (in a later section).

First let’s look at how we use the <img> tag. Like the <meta> tag the <img> tag has no ending tag. It has one mandatory attribute, the src (source) attribute. Next to the src attribute it is recommended to provide an alt (alternative) attribute, which is used when the image cannot be loaded from the source. It is important that your image is a part of your text (it visualizes or supports your story). DO NOT use <img> to set your background! Again, that would be styling your document and in HTML 5 we are not styling! We’ll see an example in the next section.

Putting it all together

So let’s put all of what we have learned together in a single document. I have created a small HTML file with some elements. I recommend you study the code and read the actual output page.

<!DOCTYPE html>
<html>
    <head>
        <title>Our first web page!</title>
        <meta charset="utf-8">
        <meta name="description" content="HTML tutorial on sanderrossel.wordpress.com">
        <meta name="keywords" content="HTML,XHTML,HTML 5,Web Development">
        <meta name="author" content="Sander Rossel">
    </head>
    <body>
        <article>
            <h1>Our first webpage!</h1>
                <p><abbr title="HyperText Markup Language">HTML</abbr> stands for <b>HyperText Markup Language</b>.</p>
                <p>The language consists of <i>tags</i> that describe the content of a document.
                For example, a tag can indicate that a certain text belongs to a single paragrah,
                that certain text is more important, less important, that an image should be displayed, or that a new line must be inserted.</p>
                <p>A typical piece of HTML may look as follows:<br>
                <code>&lt;p&gt;This is a paragraph with &lt;strong&gt;important text&lt;/strong&gt;&lt;/p&gt;.</code></p>
                <p>Because the &lt; and &gt; symbols are used as part of HTML you'll need to use a special code to display them as plain text.<br>
                You can write them as &amp;lt; (lesser than) and &amp;gt; (greather than).</p>
            <aside>
                <h2>Important tags</h2>
                    <p>Paragraphs are enclosed in <i>&lt;p&gt; tags</i></p>
                    <p>HTML ignores line breaks. Instead we use the <i>&lt;br&gt; tag</i><br>
                    Like this!</p>
                    <p></p>
            </aside>
            <h2>More cool stuff</h2>
            <p>You can read all about web development on <a href="http://www.sanderrossel.wordpress.com" target="_blank">Sander's bits</a>!</p>
            <p>HTML 5 is awesome!<br>
            <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="The HTML 5 Logo" title="The HTML 5 Logo"></p>
        </article>
    </body>
</html>

You may want to use more or less elements than I did. Maybe you want to use <section> elements for the different parts, maybe you want more <abbr> elements (by the way, notice the tooltip on <abbr>?). Since HTML 5 is all about semantics (meaning) it’s a bit difficult to tell what is wrong and right. Do we want <strong> or <em>, do we need the <article> element and is it logical to have an <article> element inside an <article> element (or <section> inside a <section>)? It’s mostly up to you!

Why use standards

You might wonder why I’m going through so much trouble to get my markup right. The <article> element doesn’t change the way my page looks, neither does the <aside> element. Why would I need an alt attribute in my <img> tag if I know the image is available? Luckily, HTML is pretty forgiving. Your page will probably be correctly displayed anyway even if you miss a starting or ending tag .

However, if your page is well formed, meaning your ending tags match your starting tags and all your ‘mandatory’ elements (such as <title> element in your <head> element) and attributes (such as alt attribute in the <img> tag) are in place, the chances that they are correctly displayed in any browser is bigger. In addition your page might load faster.

Your page can be better indexed by search engines, like Google, when your document is well formed. That is quite beneficial because that means people will sooner find your page.

But what is perhaps most important, and probably something you didn’t think of, is that people with disabilities will have it a little easier to access your page. Someone who is blind cannot see your image, but some software can read the text in your alt attribute to the person. That’s also the reason you should not have “here” link to some page, but rather a description of that page, like “my awesome blog”!

You can use various tools to check whether your markup is correct. For example, the W3C has a validator that checks various inputs, The W3C Markup Validation Service. I suggest you use it.

Wrap up

We’ve seen a bit of HTML 5, but there’s much more. We might get to that in a later blog. For now we know enough to move on. In the next blog we’re going to add some style to the page we just created using CSS!

Stay tuned!

Programming, Web Development

Web development #1: Internet and the World Wide Web

4 Comments

This is the first installment of a blog series about web development. You can find other blogs here:

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

For the past four years I’ve worked in VB.NET, C# and WinForms. Wanting to see more than just Microsoft and WinForms I applied for a new job and was hired. Hooray for me! Anyway, I’m starting januari and I’ve been told my first assignment would be to create a website using ASP.NET MVC and Knockout.js. So that’s great! Away from WinForms and into new territory. I can’t wait to start. I’ve never done serious web development though. Sure, I’ve seen some HTML, CSS and JavaScript, but that’s about it. Of course that’s something that can be easily fixed. So I’m starting a series on web development.
I’ve been looking into web development before and the first thing I noticed was that there’s a huge amount of protocols, languages and frameworks I supposedly need to know about. But where do I start? We have TCP/IP, HTTP(S), Apache, IIS, XML, HTML, CSS, JavaScript, AJAX, PHP, ASP.NET, ASP.NET MVC, Java, Ruby On Rails, Python, SQL, jQuery, AngularJS, Knockout.js, Node.js, Bootstrap, and there’s new stuff coming almost daily… It doesn’t seem to stop!
So in this post I want to start by explaining some of those technologies and why you do or do not need them (but might want to use them). In next blog posts we are actually going to use some of them.

Understanding the Internet

Do we need to know how the internet works to create beautiful, responsive web pages? Probably not, but knowing what the internet is, what is involved, and how it works on a high level can certainly help in giving you that egde you need to become a great web developer. So in this post I’m not going to show you code and we’re not going to create a web page, instead I’m going to explain, without too much detail, how the internet works.

In short the internet is a worldwide set of computer networks. It spans many technologies, like email, chat, file transfer and web pages. The World Wide Web (or www) is a set of web pages and sites that make up a (substantial) subset of the internet. In fact, the www is so big that the terms internet and www are often used interchangeably.

A little history

You may think that the internet is a phenomenon from the past 15 to 20 years, but the first version, called ARPANET (Advanced Research Projects Agency Network), goes as far back as the late 60’s! It was initially developed to connect universities and laboratories in the U.S. to make it easier to share data. You might be surprised that many of the idea’s and technologies that were founded back then are still present in the internet as we know it today! Some of those idea’s include: sending data between computers in packets, linked networks should still work if they’re not connected to other networks, computers can be added or removed dynamically, everyone should be able to create programs and devices to connect to it through a uniform interface (protocols), and last, but not least, there is no centralized control over the network.

Organizations

Those last two points seem to contradict each other, there is no centralized control, but we do want standardization and consistency throughout the internet by using protocols. There are actually some organizations that more or less regulate internet technologies. The Internet Engineering Task Force (IETF) creates specifications for internet protocols for the way information is exchanged on the internet. ICANN, the Internet Corporation for Assigned Numbers and Names, controls web site names. The World Wide Web Consortium, also known as W3C, creates recommendations for web standards for various web programming languages like HTML and CSS and how browsers should interpret those languages.
Additionally there is the ISO (International Organization for Standardization) that provides various standards, including many for IT.

Technologies

We now know a little about the internet and its history. But we still don’t know how it all works. In the next section we’re going to take a look at some technologies and how they work together to get data across the globe.

IP (Internet Protocol)

For now, try to think as the internet as old fashioned snail mail. A packet of data is send from point A to B. Like with regular mail a computer must know where to send a packet. In the real world we have addresses and zipcodes or postal codes (unfortunately we have no worldwide standard for this). Our computers have something similar, called an IP address (Internet Protocol address). An IP address consists of four bytes (that is 4×8 bits, making a total of 32 bits). One byte can make the numbers 0 to 255. A typical IP address could look something like 192.0.78.17 (that’s the IP of WordPress.com). Because 32 bits can ‘only’ have 429.496.7296 (232) unique addresses, and this proved to be insufficient, another IP protocol is available, consisting of a total of 128 bits (or eight groups of hexadecimal digits). The two versions of IP are also called IPv4 (32 bits) and IPv6 (128 bits).
A special IP address is the IP that a computer can use to connect to itself, 127.0.01, also known as localhost.

Now whenever you send data to another computer, let’s say a blog post, your data is cut into smaller packets. Those packets are then send to a computer with a unique IP address. A router is used to locate the computer with the specific IP address. Multiple routers typically work together  to get your packets to the other computer. All computers are ultimately connected to a router. That means your computer is not connected to the other computer, but you are connected through a long chain of routers.

TCP (Transmission Control Protocol)

We have seen that the IP protocol is essential in getting data from A to B. The IP protocol is quite minimal and doesn’t actually do much other than getting that data from A to B. If, for some reason, packets of data get lost, corrupted, duplicated or delayed we need more sophisticated protocols. One such protocol is TCP, or Transmission Control Protocol, also called TCP/IP because it makes use of the IP protocol.
TCP solves the problems I just mentioned. It does this by adding extra information to packets of data. With this information TCP can put packets back in the correct order (which is the order in which they were sent, not the order in which they are received) and it can detect errors and duplicates or missing packages and try to solve these problems. So in short TCP guarantees reliable and in-order delivery of data between computers.

Additionally, TCP associates each program or service with a unique number, making it possible for multiple programs to share the same computer and internet connection. This number is also called a port. Some common internet services have been given a standard port, such as 21 for file transfer (FTP), 25 and 110 for email (SMTP and POP3) and 80 for web (HTTP).

Other protocols run on top of IP too, like UDP (User Datagram Protocol), which is faster than TCP, but at the cost of reliability. I will not discuss any here.

The World Wide Web

So that’s the internet in a nutshell (a really very tiny nutshell…). That’s cool, but what we really want is to write web pages for the www! But before we get to that let’s take a closer look at how the www works.

The www is basically a worldwide set of documents formatted in a language called HTML (HyperText Markup Language), a form of XML (Extensible Markup Language). A web server is a computer that is running a special piece of software, like Apache or Microsoft’s Internet Information Services (IIS), that can serve these documents to clients (other computers). Users request these pages through web browsers like IE, Firefox and Chrome.

Domain Name System (DNS) and Uniform Resource Locators (URLs)

As we know each computer on the internet can be identified by IP. Yet, in our browser we type wordpress.com and not 192.0.78.17. We owe this convenience to the Domain Name System (DNS). The plain text name for a web server is called a domain name. Businesses and other users can buy domain names, which are managed by a known set of root DNS servers. So every time you type the name of a website the IP is fetched based on domain name and you can connect to the server using the IP address.
For a more comprehensive explanation of DNS I can recommend the following article: Domain Name System Explained.

The domain name becomes part of a larger text, known as a Uniform Resource Locator (URL). A URL starts with a protocol, then the host or domain name and finally a path to a file or document on the server. For example http://www.codeproject.com/Members/SanderRossel indicates that we are going to connect to the codeproject.com server using the HTTP (HyperText Transfer Protocol). On the server we want the folder Members/SanderRossel, which contains the default index.html document. When you type the URL in your browser window the result is that my CodeProject profile is displayed.
The www part of the URL is a convention and is completely optional (it’s not a standard).
The .com part is the top-level domain and roughly organizes websites by geography, type of organization or content. .com for commercial, .edu for educational, .nl for websites in the Netherlands, .fr for French websites, etc. The most popular top-level domain is, of course, .com (even for non-commercial websites, such as CodeProject!).
URLs can contain different information too, like the port to use and even a specific point on a document (also called an anchor).

HyperText Transfer Protocol (HTTP)

To request data from and to a web server another protocol is used, the HyperText Transfer Protocol. This is another layer on top of TCP. HTTP is a set of commands that a computer can send to a web client. These commands include, but are not limited to:

  • GET, for requesting a file from the server.
  • POST, for submitting form information to the server.
  • PUT, for uploading files to the server.

Whenever you request a webpage your browser send a GET message to the server, the server sends back the page and your browser displays it.

Along with the requested document comes a code, the HTTP status code, which indicates whether your request was successful. These status codes include, but are not limited to:

  • 200, OK.
  • 403, Forbidden to access a page.
  • 404, Page not found.

HTTP is a stateless protocol, which means there is no persistent connection between a client and a server. This is important when developing websites! The state of an application cannot be tracked on the server. I’ll get to that in later blog posts though.

You may have heard of HTTPS as well. The S stands for Secure (not Stateless!). I’m not discussing it here, but I thought I should mention it.

You can get a free ebook on HTTP from SyncFusion: HTTP Succinctly.

So what do we need?

So in the introduction of this blog post I mentioned some technologies. I have already explained some in this post. What others are we going to need for building websites?

I’ve already mentioned HTML, which is the main language to describe the contents of a website. In addition there’s CSS (Cascading Style Sheet) to supply stylistic information of a page. JavaScript can be used to make webpages interactive. To create dynamic pages you’ll need a language that generates HTML on a web server, like PHP, Java, Ruby On Rails, ASP.NET (C#), Python or others.
So there’s the good news. Basically you need to know only HTML to create the most basic of websites. To create a website that looks nice you need some CSS too. Add JavaScript to your stack and your webpage can be pretty sweet. And you probably want some server side language to actually present up-to-date information, like Java or ASP.NET.

All the others, jQuery, AngularJS, Knockout.js etc. are libraries (or files) in these languages. They are nice to have, and some are indispensable when solving specific problems, but they aren’t strictly necessary.

So we now have a basic understanding about the internet and the World Wide Web!
In the next blog post we are going to have a look at HTML and CSS, followed by JavaScript. After that we’ll take a look at generating HTML using a server side language.

Stay tuned!

Cloud computing made easy!

%d bloggers like this: