How websites work

A brief introductionAndrew Locatelli Woodcock

About this session

• My name is Andrew Woodcock and I am a Lead Software Design Engineer for Big Fish Games based in Cork

• Have worked as a software engineer for over 15 years in manufacturing, insurance and finance industries

• This is the first of a planned series of introductory tech sessions

In the beginning …

Present day

So how does it work?• Modern browsers understand HTML, CSS and JavaScript and the

three combined produce modern, interactive websites• The browser asks the webserver that hosts the website for resources:

often but not always a webpage• The webserver returns the requested resource and the browser

displays it• The resource may already exist or it may be created on request by the

webserver• The browser will then take care of acting on the resource, often by

displaying it• Resources consist of, amongst other things: HTML, CSS, JavaScript,

images and data.• But a website is more than this: it is a client-server application

What is a client-server application?• Client-server refers to any software design or implementation

where one or more clients consume services from one or more servers

• Clear as mud, eh?!• In web terms:

– the browser is the client because it consumes web pages generated by the webserver: it asks the webserver to serve it with web pages to display

– And the webserver is the server because it serves requests from one or more clients: typically it reacts to requests rather than initiating them

• But there are many other client-server designs, not just web: ATMs and Bank Networks, email clients and servers, etc.

Client-server: the obligatory pretty picture …

… and in words• When the client requires a resource such as a webpage, a request is sent to the

webserver• This request travels all the way from the client to wherever the webserver is situated,

possibly on another continent or the other side of the Atlantic• The webserver receives the request and either retrieves the resource if it already exists

or creates it on the fly using a technology such as PHP. This may also involve fetching and persisting data from a database, calculating prices, checking user authorization, etc.

• Once the webserver has the complete resource, it returns it all the way back to client, once again possibly over the Atlantic

• Once the client receives the resource, it attempts to display it in a process called rendering: it combines the HTML, CSS, images, sound, etc. into a webpage displayed to the user.

• If there is JavaScript, this will be interpreted (run) by the client as and when required within the page: when the user clicks on a button or submits a form for example

• The voyage from client request all the way to the server and back to the client is known as a “round trip” and can be very expensive in terms of time

Client-server: the web server in summary

• At the most basic level, the webserver provides services to clients

• It serves clients with resources including HTML, CSS and JavaScript

• It fetches data from and persists data to a database or databases

• It authenticates users and provides security features• It may also be responsible for creating resources as

they are requested: generating a webpage that includes the current user’s name for example

Client-server: the client in summary

• A client is not just a browser: it could also be an Android or iPhone app for instance

• All modern browsers understand HTML, CSS and JavaScript

• HTML is a markup language. It tells the browser what to do but not how to do it

• CSS is a technology that tells the browser how the page should look

• JavaScript is a programming language that tells the browser how the page should behave.

HTML• The name isn’t very important but stands for: Hypertext Markup Language• HTML is the series of angle brackets you see when you right-click on a web page and select “View

Source”• Based on <tags> and tells the browser what to do but does not dictate how to do it: this is both its

strength and its weakness!• With a few exceptions, tags come in pairs: <tag></tag> with < … > signifying the start of the

markup section and </ … > signifying the end• Text and HTML within a tag pair belong to that tag pair:

<tag>All this belongs to tag<innerTag>and this belongs to tag and innerTag</innerTag></tag>

• Valid HTML belongs to an HTML document: markup that must contain certain HTML tags in a specific order

• The simplest valid HTML document is something like: <html>

<head><title>How websites work</title>

</head><body>

<p>How websites work</p></body>

</html>

CSS• Again the name is unimportant but stands for Cascading Style Sheets• It is (hopefully) responsible for making the webpage “pretty”• It describes how to arrange the page, what colours to use, background

images, layers, etc.• It looks like:

.theme_parts_list span { display: inline-block;}

.theme_parts_list_hidden { visibility: hidden;}

.theme_parts_list_background { width: 90px;}

• It’s important because using CSS we can change the look and feel of a website independently from its content and its behaviour

• Combined with JavaScript we can achieve some very impressive visual effects such as floating dialog boxes

• Separating content from behaviour and look and feel also means we can better support accessibility features such as screen readers

JavaScript• Has nothing to do with the Java programming language except looking vaguely similar

and Java being the “in” technology when JavaScript was created in the mid 90s. They might as well have called it “ImHipTooScript” …

• Allows the webpage to become “interactive” and react to events such as page load, button click, etc.

• Is the driving force behind modern, responsive, interactive websites• It is run within the browser: it preserves bandwidth and uses the processing power of

the client rather than the server and increases site responsiveness• Unfortunately, it is also interpreted differently by each browser: Internet Explorer

especially is notoriously fickle and behaves differently from version to version• A website that works brilliantly with Safari, Chrome and Firefox may come crashing

down when it encounters IE. IE6 is especially bad … a Ukrainian friend of mine used to refer to it as “IE Sick” which was a pretty accurate description

• Simple example:<script type="text/javascript">

alert("Hello world!");</script>

So where does PHP come into it?• PHP is a server-side scripting language• This basically means that it is a programming language that is executed by the webserver before the webpage is

returned• PHP code is placed within resources ending in the extension .php but it is never returned to the client: the

webserver executes the PHP code in order to fetch or generate the resource that is returned to the browser. Resources as displayed by the browser in fact often don’t exist and are created each time the browser looks for it.

• PHP code is between special tags: <?php … ?>• PHP code can be used to create webpages dynamically by generating HTML and JavaScript, fetching or persisting

data and many other tasks• Example:

<?php site_page::setPageLocationInfo(array('section'=>'checkout', 'subsection'=>'sub_cart', 'page'=>'empty_cart')); core_page::set_template("page.1col.html"); if($_SESSION['errors']) { $page->p->errors = $_SESSION['errors']; $_SESSION['errors'] = array(); } /* show page contents */ echo $page->templateInclude("empty.html.php");?>

So what ..?• PHP code can be mixed in with HTML:

<p>Hello <?php do some processing to get user name … ?></p> returns <p>Hello Andrew</p> to the client

• PHP code can be used to generate HTML:<?php

$user = SomeMethodToGetUserName();echo “<p>Hello $user</p>”;

?>also returns <p>Hello Andrew</p> to the client

• PHP code is never returned to the client, only the results of that code: it is invisible to the browser

• That means that we can use PHP to perform tasks that are unsafe, difficult or impossible to do in the browser

• It also means that we can dynamically tailor each webpage as it is requested: we can respond to the user, their purchasing history, their previous page views … in fact, pretty much anything

So why JavaScript and PHP?• JavaScript runs in the browser and the browser is outside of our control: it

has to be assumed to be a hostile, unsafe environment• PHP runs on the server which is most definitely inside our control and can

be assumed to be a protected environment• But using JavaScript consumes client resources rather than server ones:

our customers are performing the computing for us reducing our computing needs somewhat

• JavaScript can also reduce round-trips to the server, again increasing website scalability and responsiveness and potentially reducing costs

• But JavaScript can be subverted and modified so we can’t perform any security-sensitive work in JavaScript

• PHP gives us the same flexibility but within a safe environment• So: use JavaScript to add cool functionality to the webpage and PHP to

check the bank balance!

So to sum up …

• Clients ask for stuff• Servers supply it• Users pay for it• And the world goes round …