Saturday, 24 June 2017

An astronomical web site for the Raspberry Pi

With a little bit of html and a smattering of php, you can easily build an impressive web site on your Pi.

(You can see what it looks like here - APOD)

If you haven't used this stuff before, don't worry, I'll show you everything you need to know.

First, you need to set up the Apache web server and install php. It’s very straightforward and only takes a few minutes. There is an excellent tutorial in the Magpi magazine, so I won't repeat it here. Follow that tutorial and then come back here.

Ok, you're back, then, with Apache, php and mysql installed (we won't be using mysql for this tutorial - another time, maybe - but it's good to have it).
The first thing to do,if you haven't done so already, is to delete or rename index.html in the folder
This is the default home page but we're going to create our own, so we don't want it.

Fire up your favorite editor and open a new file. We need to call this file index.php and save it in the same folder as above.

I use Geany to edit program files. It helps you by colour coding your text, automatically indenting and other useful stuff. It knows the type of file you are creating by its extension, in this case, php, and adjusts its behaviour accordingly. I recommend it.



There are two basic ways of using php, as a pure php program file such as might be used as a web service, or as embedded code in html. We are going to do the latter.

When a web server is asked for a php file, it processes it, executing the php code. This code will generate additional html code which is incorporated into the file that is displayed in your browser.

It is important to understand that the code is executed on the server not in the browser. So what you get from the server is an html page that was constructed on the server using php code.

Typically, php code will retrieve data from a source (often a database) and insert these in the html code.

That's what we are going to do, too, but rather than using a database (Do you have one handy? No, thought not!) we are going to use an external web source and a pretty cool one at that. We are going to retrieve NASA's APOD (Astronomy Picture of the Day) and use that information to construct a web page.

So where to start? With a little bit of HTML, I think.


If you are new to html then you should know that it is, fundamentally, a very simple language. The problem is that there is a lot of it and large web pages can get quite complex.

However, we are doing something pretty simple here, so that's nothing to concern us, unduly.

The first thing to say is that all html files begin with the line

<!DOCTYPE html>

This tells the browser that it is, in fact, an html file and, furthermore it is html5, the latest version.

After this html consists of pairs of tags. It's a markup language (not a programming language) and the various tags enclose some sort of content, and tell the browser how it should be interpreted and displayed.

So, for example, the tag <h1> is the beginning of a heading, then we get some text, then we get the end tag </h1>, which tells us where the end of the heading is. So the line

<h1>Astronomy Picture of the Day</h1>

means that the text "Astromony Picture of the Day" is a heading. As such it will be displayed in bold with a larger than normal font and with margins above and below. (The are six different heading tags, h1 to h6, and the size of the text and the margins tend to get smaller as the number gets larger.)

The outermost tag pair in an html file is <html> this comes after the DOCTYPE and tells us where the content begins. Inside this is the <head> pair. The head section contains various things that are not actual content but that may be used by the browser to help display it. You often find style sheets and javascript in the head.

All we are going to have in the head is a pair of <title> tags. This title is displayed in the browser tool bar.

Following the head we have the <body> tags. The main content to be displayed by the browser is in the body.

Here is our first attempt:
<!DOCTYPE html>
    It's working
Notice that I have indented the code so that the structure is clear. You should attempt to do the same.

Put that in your editor and save it as index.php in the folder /var/www/html and you did remember to get rid of the file index.html, didn't you?

If you now open your browser and type localhost into the address bar you should be greeted with the message "It's working".

Our final web page

We've met nearly all the html tags that we are going to use. there are two more that we will need, however, <p> which stands for paragraph (the text inside these tags is displayed starting and ending with a new line) and <img>, the image tag which I'll explain when we get to it.

But first, some php.

Here is our final product. Read through it to see if you can see what is going on. I'll explain more below.

<!DOCTYPE html>
        $f = file_get_contents("");
        $record = json_decode($f);

    <h1>Astronomy Picture of the Day</h1>
    <h2>from NASA</h2>
    <p>Copyright: <?php echo $record->copyright;?></p>
    <p>Date: <?php echo $record->date;?></p>
    <p>Title: <b><?php echo $record->title;?></b></p>
    <p><?php echo $record->explanation;?></p>
    <p><img src="<?php echo $record->url;?>"/></p>

(You can see what it looks like here - APOD)

It starts in the same way as our first simple program. The difference is inside the body and the first thing we see is <?php . This is the beginning of some php code. All php code begins like this and ends with ?>. These special tags are not html but they tell the server that the php code inside them that needs to be executed.

Now, I assume that you have done at least a little bit of programming - enough to know what a variable is, anyway. Variables, in php, always begin with a $ sign.

The first line of code we see is a variable $f that is being assigned the value that is return from a function.

The function is called file_get_contents. It's job is to return the content of a file but it also works with urls. We have told it to get the content of the url that the nice NASA people have provided to get information about the Astronomy Picture of the Day. The url is

This service is called an API and NASA requires you to have an API key - something that identifies you. anyone can get one but if you don't have one you can use the special key "DEMO_KEY". This still allows you access the data but restricts the number of times you do so to, if I remember rightly, no more than 30 per hour or 50 per day. Enough for our purposes.

The data comes back in JSON format, which (in this case) is basically a set of data values and their names. So you have a value called, for example, 'copyright' and this will have the value of the copyright holder. There is also a value called 'title' which, unsurprisingly, contains the text of the title of the picture. There are other values that we shall look at soon.

Php doesn't deal easily with JSON directly, but we can convert it like this:

 $record = json_decode($f);

 json_decode is  built in function in php and it converts JSON data into a valid php data structure. In this case it creates an associative array, if you are familar with a Python dictionary, it's similar to that. But basically, it is the equivalent of the JSON, a set of values and their associated names.

Our new associative array is called $record and it contains values called 'copyright', 'title', 'explanation', 'date' and 'image'. We use it like this:


This will give us the value of the data called 'date' in the array $record.

I'm slightly jumping ahead, because we haven't dealt with


this line is commented so that it doesn't execute (a line beginning with // is a comment in php). If you take out the comment characters it will dump the value of the whole of $record to the screen. We don't want that in our final product but you might be interested to see it.

Following this we have ?> which marks the end of this section of php code.

Next we see a list of headings and paragraphs - the headings are clear, I think. The paragraphs are less so but they all of of the same pattern, I'll just explain one.

<p>Copyright: <?php echo $record->copyright;?></p>

After opening the paragraph tag there is some text that will be displayed followed by a section of php code.

echo $record->copyright;

This is the php. The function echo simply prints something to the screen. What is prints is the 'copyright' value from $record. So this paragraph wil display something like

Copyright: Joe Bloggs
The next lines print the date, title and explanation in a similar way. The last line uses the 'url' value of $record (where the image is) in an <img> tag. The image tag doesn't have any content, as such, and so doesn't need a closing tag. So it is in the special form

<img />

It an opening tag and a closing tag combined.

But it also has a parameter src. This specifies the url of the image to be displayed.

So that's about it! Give it a go and you'll see a new amazing image each day. And if you remove the comments before var_dump, you'll see the raw data, too.


No comments:

Post a Comment