Many people seem to think what we do is some kind of magic. It isn’t, sorry. In order to understand what it is that we do when we develop a website I thought I would briefly describe the major areas of development. In the world of web development there are five major areas of development each with their own language. These areas are: Structure, Styling, Server-side, Client-side, and the Database.

Structure

The structure of a website is almost always developed using HyperText Markup Language or HTML. What HTML does is to define the layout of a page. Each box or column or table or ANYTHING you see on a website which is it’s own contained area or element is almost certainly the product of the HTML on the page. HTML is not a dynamic language and does not generally respond to the user (Although there are some features which are dynamic for the most part HTML is not dynamic). Instead what HTML does is to define the separate areas and elements on a page. Although HTML can and does do more than this – including defining the character set used on a page and providing meta data to search engines – for the most part it simply acts as the foundation for all of the other parts of web development to act on.

Styling

The styling of a website is almost always done using a language called Cascading Style Sheets (CSS). What CSS does is to take the basic structure of a site, which is defined by HTML, and to change the appearance of those areas. A few of the things CSS styles include: background and text coloring, font size and styling, spacing between elements and so much more. Without CSS an HTML page would look like a long list of black text on a white background with images one on top of the other. You may have seen a site like this if for some reason the CSS file did not load correctly. Without CSS the web would be an ugly and unfriendly place for the average internet user.

Server-side

The server-side language we use here at Powderkeg is called PHP which stands for PHP: Hypertext Preprocessor (originally it stood for Personal Home Page). PHP is currently the most heavily used server-side programming language in the world. PHP is easy to use, easy to learn and has a huge community of developers. We also use WordPress which is basically a PHP framework for developing websites which allows us to reduce our development time and reuse a lot of our code. WordPress also allows us to simple and quickly install large pieces of code called “Plugins” which are developed by third parties and help us to create large complex sites as quickly and professionally as possible.

Server-side languages do just what it sounds like, they are the language that resides on the server and responds to the requests of the user. When a user visits a website they send a request to the site’s server. The server knows how to respond because of the code on the server which responds to this user. For instance when a user fills out a form on a website the information is sent to the server and then the script on the server receives that information and handles it appropriately.

Client-side

The only Client-side language really worth discussing is known as Javascript. This is not to be confused with the Java language which can also be used on the web. Javascript is a client-side language and what that means is that it runs locally on the client’s computer. If you have ever been to a site which respond instantly to your requests without refreshing the page you are seeing Javascript in action. In modern web development we cannot talk about Javascript without bringing up jQuery. jQuery is a Javascript framework which allows for rapid development by reducing the code needed to take many actions. An example of Javascript in action is the form validation seen on many websites. If you have ever been typing something out in a form and receive a message while you are typing like, “Error: you need 128 more characters in your password” then you are witnessing Javascript in action.

Database

The database(s) behind a website can range widely in their use and functionality. Some sites might not have any databases and some sites might have dozens…or more. It is hard to narrowly define what a database is used for as it can be used for a huge number of things. Perhaps the most common use of a database is to track the users of a site. If you have ever signed up for a webpage your information was stored on a database. Here at Powderkeg we mostly use MySQL as our database. MySQL is a free and widely used database. Database development is split into 2 separate parts. The actual data which is stored in files on the server and the database language which is used to communicate with the database to manipulate the data. The language used to communicate with MySQL (the database) is called Structured Query Language or SQL.

So let’s try to bring all of these pieces together in a common example. Let’s say you go to your favorite site and you want to login. You will look for the “Login” button which is an HTML element which has been styled by CSS. You will then fill out a form (also an HTML element styled with CSS) which is validated using Javascript to make sure you are entering a valid email address. What happens after you submit your login form is the Server-side language (PHP in our case) sends a SQL “query” (basically a structured question) to the database looking to see if your information is present. If the query was successful the database returns your information to the server-side language (PHP) and your information is then saved on that server in a temporary session that is available to you as long as you are logged in.

Here is a small diagram that might help in understanding the parts of the web development. diagram

Hopefully this helps you understand more about what we do here at Powderkeg…but feel free to continue believing it is magic.