Today was the second day of our mini computer bootcamp for friends and family. The goal was to have a functioning and hosted website up and running.
We started out by using nslookup to find the IP address of a web server – we use ziggeo.com as an example. If you are on Mac OS you can simply do this in terminal (which we learned about yesterday and used again extensively today – I am not sure what the easiest way to do this is on Windows, but if you have your Raspberry Pi handy from yesterday you can use that instead). We then typed the IP Address directly into the browser’s address bar to demonstrate that it does indeed load the same web site.
We then learned about the Domain Name System (DNS) and that it allows computers to turn a domain name into an IP Address. I explained the structure of a domain name and what a fully formed URL looks like. We then talked about HTTP and how the request and response cycle works between the web browser and a web server on the other end, with an initial GET request potentially resulting in many more files being requested from the original and other servers.
We then used Developer Tools in Chrome to actually examine how all of these parts get loaded starting with the HTML of a page. We went to bot the elements tab and the network tab in the Developer Tools. In the network tab we looked at how all the components of a page, such as CSS and Javascript files and images got loaded. And we played around on the Elements tab with actually changing the content on the page.
We then proceeded to install the Apache web server on our RPis via sudo apt-get install apache2. To make sure that they were fully up-to-date we first ran sudo apt-get update and sudo apt-get upgrade (the latter runs for nearly 30 minutes). While we were waiting we dove a bit deeper into HTML and created sample files on our laptops which we loaded using "File -> Open File" from our web browsers. We included at least one unordered list using the ul and li tags as well as an image using the img tag.
Once we had our RPis running Apache we now used our locally created samples to replace the contents of /var/www/index.html (use cd /var/www first and then sudo nano index.html to edit). We had great fun visiting each other’s web sites simply by typing the IP Address of the RPi into the browser address bar. I explained that these IP Adresses were only valid on the local network and had been assigned via DHCP. I then showed how I could make any one of the RPis appear on the public internet by adding a rule to the firewall (and drew a diagram showing how the firewall separates the public internet from the local area network we were on).
During lunch we talked more about the HTTP request-response cycle and how there are different request methods such as POST, PUT and DELETE. Answering a question I explained how cookies are set and then included in subsequent requests to a domain and how inclusion of code from other domains, such as a Facebook like button which is served up from Facebook’s servers, means that when you visit that page, Facebook knows about it. We also talked about how web content can be cached at multiple layers such as Cloudflare, your local machine or the current browser session.
After lunch I spun up a cloud server for each student and one for myself at Digital Ocean. We used ssh to connect to our servers and once again installed Apache and started to edit index.html. We then learned how to update the zonefile at our domain registrar to make a domain point to our cloudserver. Thankfully Susan and I have lots of dormant domains and we let everyone in the bootcamp pick one for this exercise. Everyone was super excited how easy it was to have their own website up and running.
We then added a CSS file to our website by including a in our html and started styling it with simple changes, such as background and font color and using sans serif as the font-family. We learned the basics of CSS syntax of specifying a selector such as a tag (or a class or an id) and then adding styles.
As a next step we added a bit of Javascript to our site using a tag. At first we added a simple alert(“Hello World”) but then learned how to attach this code to an element on the page by using the onClick event on one of the HTML tags. One of the students pointed out that I had now inserted some Javascript directly into the HTML while I had earlier said that one shouldn’t put styles there. So I wound up explaining how to use the JQuery library to add the onClick event handler from the Javascript.
At this point everyone was happy but exhausted and we called it a day. We have left the cloud servers and websites up for now so that everyone who participated can revisit theirs when at home. This seemed like a big success and I can feel a follow up coming in the fall – I certainly thoroughly enjoyed myself!
