PBS 1 of X – Introduction
In case you hadn’t guessed yet, I’m not going to pick a single computer language for this series of tutorials. I’m very deliberately going to make use of a pallet of languages, and I’m going to focus on the underlying principles, rather than the specific peculiarities of any given language.
In order to help bring everyone along, I’m also not going to go from zero to real programming in one go. The plan is to sneak up on programming in small steps – hence the title of the series. We will be using computer languages from the start, but initially, they won’t be programming languages. Also, in order to be as inclusive as possible, I’m going to avoid vendor-specific languages – that means no Apple Script, no VB Script, no Objective C, and no C# (pronounced ‘see-sharp’ BTW). Instead, I’m going to use the most universal platform of all – the world wide web. We’re going to sneak up on programming by learning to create web pages.
Matching Podcast Episode 407
Listen along to this instalment on episode 407 of the Chit Chat Across the Pond Podcast
You can also Download the MP3
In this instalment all we’re going to do is get our tools in order. Like any good mechanic will tell you, everything is much easier when you have your tools in order before you start the job!
To that end, we’re going to install two vitally important pieces of software, a text editor suitable for programming, and web server app.
Choosing a Programming Editor
From a technological point of view, the only requirement for a text editor for programming with is that it can save files as plain-text.
You can’t use a word processor to write code – the output must be pure, unformatted, text.
That means that Mac users can use the built-in TextEdit app (assuming they put it into Plain-Text mode by selecting
Make Plain Text in the
Similarly, Windows users can use the standard Notepad app.
While you CAN use these basic editors, you really don’t want to – they will make your life needlessly difficult! What you really want is a text editor that understands the computer language you are writing in, so it can help you by doing things like highlighting invalid syntax, colour-coding valid syntax, automatically managing code indentation, and even auto-completing some code elements for you. You can use any programming editor you like, but the one I will be using in my screenshots is Atom, which is free, open source, and cross-platform.
Choosing a Web Server App
Initially, we are going to need very little from the web server we install, but as the series goes on, we’ll start to place more and more demands on it. So, to save ourselves having to change servers mid-series, I suggest instilling a full-featured product like MAMP, XAMPP or WAMP.
I’ll be using the free version of MAMP. MAMP comes with the various servers needed for a web stack, and with an app for controlling them.
It’s this controller app that you’ll be using to manage the server apps.
On the Mac the controller apps is called
MAMP, and you’ll find it in the
MAMP folder in the
When you first launch MAMP it will try to strong-arm you into using MAMP Pro, don’t give in! My advice is to uncheck the checkbox to check for MAMP Pro, and then click the
Launch MAMP button.
This is what the current version of the MAMP controller app looks like when it launches:
The little icons in the top right corner show whether or not the web and DB servers are running.
I like to reconfigure MAMP to use the industry standard ports for the web and DB servers (80 and 3306).
You do this by clicking
Preferences, then selecting the
Ports tab, and then clicking on the button
Set Web & MySQL ports to 80 & 3306.
Any of the web server packages mentioned will map a given folder on your hard drive to the URL
In MAMP you can see which folder is in use by going to the
Web Server tab in the
On the Mac the default is
Macintosh HD:Applications:MAMP:htdocs. The documentation for the other products will tell you where their so-called Document Root is located.
You are now ready to start your web server by clicking the
Start Servers button.
Note that if you’ve edited your server to use port 80, you’ll be asked for your admin password each time you start and stop your servers.
To make sure everything has been installed OK, let’s create a simple Hello World! page.
First, create a folder called
pbs1 in the document root of your chosen web server app.
Then, using your programming editor of choice, create a file called
index.html and save it into this folder.
Add the following content to the file:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
This is a screenshot of the file in my editor of choice, Atom:
Assuming your server is running, you should be able to view the little web page we just created by browsing to the URL
http://localhost/pbs1/ in your favourite browser.
Note that if you’ve not configured your web server to use port 80, you’ll need to specify the port number in the URL. For example, if you used the default port used by MAMP (8888), the URL would be:
We’ve now laid the ground work to start on our journey towards programming. In the next instalment we’ll start learning about the Hyper Text Markup Language, or HTML, which instructs a web browser on how to present information to users. This is not a programming language as such, but a markup language. HTML will serve as a gentle introduction to the idea of using formally defined rules of grammar to tell a computer what we mean.
Join the Community
Find us in the PBS channel on the Podfeet Slack.