In this chapter, we will look at how we can use our Raspberry Pi as a web server. A number of topics are covered in this chapter, including:
We will start by looking at how a web server works and then the third-party software on the market. Following this, we will write a simple web server in Python that displays some HTML content.
Next, we will integrate a small database and display the data. Finally, we will wrap up by looking at what we have learned.
Let's start by reviewing what a web server is and what the Hypertext Transport Protocol that drives traffic to it is.
At its heart, a web server is a system that handles requests via HTTP. You will see the term web server applied in a number of ways, including in reference to the hardware that the software stack runs on, as well as the actual software application itself.
Typically, when visiting a web server you will have data returned to your web browser in the format of HTML, images, JavaScript, and CSS, among other formats. These are what we call web pages, although the web server can also return data in other formats as well, such as JavaScript Object Notation (JSON) and Extensible Markup Language (XML).
All of these data types are returned via an HTTP request, which handles transferring the information from the web server to the user's web browser (or another application that wishes to interact with the server).
Let's now look at the HTTP protocol in a little more detail to understand how this works.
The Hypertext Transfer Protocol (HTTP) was invented at CERN (European Organization for Nuclear Research) by the scientist Tim Berners-Lee and his team. Looking for a method to communicate information between physicists, they created the HTML markup language and the HTTP protocol that allows it to be transferred between computers.
An HTTP request can assume one of several methods, the most common being GET and POST. These can be thought of as the mechanism that explains what the request is trying to do.
A guide to these request methods can be found at https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html.
At a high level, the mechanism by which an HTTP request transfer HTML is as follows.
A request is made for a web document via a Uniform Resource Locator (URL), for example http://www.google.com. This request also contains more information, such as the version of HTTP being used and the type of request, for example GET.
The web server running on a port accepts the incoming HTTP request and then locates the document on its file system. The document is then returned along with an HTTP header, containing information used by the browser or receiving program. This header includes things such as the error code. If for example the page you requested does not exist, the web server will return a 404 error and a page displaying this error code, along with a message in most instances.
Therefore, a browser requesting a document from our Raspberry Pi will make an HTTP request. The web server installed on the Raspberry Pi will located the HTML document on the Raspbian file system and then return it to the requesting browser.
You can read more about the HTTP protocol at https://www.w3.org/Protocols/.
Since HTML is an important component, we will briefly review the subject.
Hyper Text Markup Language (HTML) is the fundamental building block of web content. It acts as a way of marking up documents, so a web browser knows how to render them on the screen.
An HTML document consists of sets of nested tags. These tags represent parts of the document. For example, the header section of the document uses the <head> tag and the body of the document, where the main content is rendered, uses the <body> tag.
Content contained within these tags can then be styled using CSS (Cascading Style Sheets). These allow us to change the font, color, and other properties of the tag and its contents. While these properties can be changed directly inside a tag in HTML, CSS allows the reuse of sets of properties. These could be styling, such as titles in bold, links in blue, and so on. This helps to ensure the website is consistently rendered and enables easy site-wide changes.
In addition to this, we can then manipulate the HTML tags via programming languages such as JavaScript. This allows us to do such things as finding out which tag (which could be a button) has been clicked on or animating a part of the screen.
An example of an HTML document is as follows:
<!DOCTYPE HTML> <html> <head> <title> Hello </title> </head> <body id="main"> <div class="content"> Some content </div> </body> </html>
This very simple document contains the following components.
The DOCTYPE located at the top of the document denotes that this is an HTML document.
Following this, we have the <html> tag. At the bottom of the document is the closing </html> tag. All of the content for the webpage is then nested inside these two tags.
After this is the <head> tag. The tags located in here are used to provide information about the document. For example, we can include a <title> tag. This will not be displayed inside the document itself when rendered by the browser, but will appear as the browser tab title.
Next is the <body> tag. This contains all the tags that will be displayed inside the browser tab. In this instance, we have included an id for the tag, which is id="main". HTML tags can contain IDs, which can then be used by JavaScript applications to locate and manipulate a tag.
Inside the <body> tag we have a <div> tag. This division of the screen contains a class attribute. A class attribute is a way of designating that a set of CSS styles located in a separate file should be assigned to this tag. Our document does not reference a CSS file, however, so no styling would be applied.
You can read more about CSS and discover how to style HTML documents at http://www.w3schools.com/css/.
Inside the <div> tag we have some plain text. This will be rendered to the browser when the web page is returned from the server.
Each tag in the document has a corresponding closing tag, for example </div>.
In the following projects, you will experiment with a simple HTML document like this and return it from the Raspberry Pi's web server.
You can read more about the latest HTML5 standard and its features at http://www.w3schools.com/html/html5_intro.asp.
Now we have a basic understanding of HTTP and HTML, we can look at some off-the-shelf open source applications that allow us to serve up content over it. These are, of course, web servers.