Four Step Data DIY
Before we Start
We’re going to make an example online survey using HTML, CSS, Javascript, PHP and MySQL. We’ve chosen these languages and tools as they are both free and easy to learn. Just like anything worth doing, there is a learning curve to it, but luckily there are lots of resources out there to help you on your way.
Before we get started building our online survey there’s a few tools we’re going to need.
- A webserver
- A text editor
Webserver
A webserver is a bit of software the ‘serves’ webpages. We can just think of it as folder of our computer where we will store and make websites. Without the webserver we couldn’t use things like databases and server side languages like PHP. One of the most popular and easy to use webservers is MAMP. It stands for My Apache – MySQL – PHP.
Downloads
- WAMP server for Windows users
- MAMP for Mac users
Text Editor
A program for writing code in. It differs from something like Microsoft word in that it creates plain text files. Webpages are in plain text, so text editors are perfect for making websites. There are loads of free text editors out there. Here are some we recommend.
Downloads
- Text Wrangler for Windows, Mac and Linux
- Notepad++ for Windows
Getting Started
To get started:
- Download a webserver and a text editor using the links above.
- Download our example survey.
- Unzip the file and copy the folder ‘survey’ into the webroot folder of your webserver.
- On a mac this is ‘htdocs’ e.g. Applications/MAMP/htdocs
- On Windows this is ‘www’ e.g. c:\wamp\www
- Launch your webserver and in the control panel that opens click ‘start servers’
- Click ‘Open start page’
- Click ‘Tools’ and then ‘phpMyAdmin’
- Click on the ‘import’ tab
- Click choose file, select ‘surveysetup.sql’ and press ‘Go’.
- You should get a success message ‘Import has been successfully finished, 7 queries executed. (surveysetup.sql)’
- Open up a web browser and go to http://localhost:8888/examplesurvey/
- If all is well then you will see our tea survey!
Looking good! Give the survey a go. You’ll notice that your answers affect the animation shown at the end. Let’s move onto the next step How it works