Thread by @levelsio

Starting on the website for ✈ now, I will log the full development right here in this thread 👇 airlinelist.co

I always start like this in my code editor, just raw HTML code, no styling (yet), to get the basic functionality down

I'm also adding a BOOK FLIGHT option, which gets the flights from an API like @kiwicom247 and rates each flight by service, comfort, on-time and safety

Now I need to get the data from the Google sheet I made into my SQLite database, for that I use this script (I took it from Nomad List's code), it goes over the sheet and inserts all data into the db docs.google.com/spreadsheets/d…

I've added database-style column names in the sheet, these have to correspond with the SQLite table structure I'm gonna make now...

I use phpLiteAdmin, a light-weight editor for SQLite databases that runs on PHP. Let's make airlines.db!

Inside airlines.db I make the table airlines (I always use one table per .db file to keep it simple)

Here's my airlines table structure, I can always add/edit later so it doesn't have to be perfect immediately. I use "epoch" as a seconds since 1970-01-01 (epoch) field to save when it's last updated

Here's my airlines table structure, I can always add/edit later so it doesn't have to be perfect immediately. I use "epoch" as a seconds since 1970-01-01 (epoch) field to save when it's last updated

Here's the code which puts it into SQLite, it's a bit ugly, but makes sure every value I want goes in there. I can make it dynamic later, but for now this is easiest to make.

Yay, it worked 😙 the spreadsheet data is now in a SQLite db called airlines.db, now I will try access it from the site...

To test if it worked I load the DB on /index.php and do

echo json_encode($airlines);

This prints the data into JSON, so I can see if it's readable by my site.

I can now start putting in a <table>

Now I put it in a foreach($airlines as $airline) loop inside <table> HTML, here's how it looks if you open it

I made all this on my laptop, so now I want to deploy it to so you can see it too.

I go to @namecheap to DNS and add my server's IP as an A/AA record. It was a URL redirect before to the Google spreadsheet, that ends now. airlinelist.co

Now I have to wait for an hour for the name servers to update. Meanwhile I've added some styling to the buttons, and made them toggle-able with jQuery.

I'll go over all the filter buttons to find which one are pressed and then do a call to the server to filter airlines!

^ the color of the button I picked from the ✈️ airplane emoji on MacOS. Emojis are a nice way to find colors ^_^

I did some more <style>'ing so now it looks like this. I centered the page by adding a <div class="container"> which wraps around all the elements. It's set to max-width:1000px; and centered with margin:0 auto;

Now for some logic. I want the filters to actually do something. So I define each filter inside the button with 3 data tags:

data-key
data-operator
data-value

For ex. safe airline should be

"safety_score"
greater-than
3

(where 3 is out of 5)

Here's the JS code for it. It collects each filter's data attributes key, operator and value. Puts them in a data array. This array we will then AJAX to the server where PHP receives it, filters, and sends back the airlines.

Yay! It works. JS collects the filters successfully, sends them as AJAX to server and PHP reads the filters accurately.

Meanwhile the DNS has propagated. So now we can get a @letsencrypt https SSL certificate. I use an app called CERTBOT for it. If you type CERTBOT CERTONLY it lets you authorize a server. I had to kill my NGINX server for it (I know I'm noob) when doing it for a 30 secs. But works

On the server, I edit /etc/nginx/sites/airlinelist.co, which is my virtual host config file for NGINX. It lets the server know I want to have a website with and the server should respond with files from /srv/http/airlinelist.co like index.php! airlinelist.co

It's not opening here yet BUT it is on the server. So it can show up any time now. DNS can takes hours, sometimes days to update on all people's providers.

While we're waiting for that, I've made the filters work. Every click is an AJAX request with the active filters (see tweets above), and the PHP sends the airlines as <tr><td></td></tr> table rows back! JS then puts that in the <table><tbody>. Very simple.

Okay it seems to be working for some people: try it 👉 airlinelist.co

Added a disclaimer so I don't get sued by airlines + region filters airlinelist.co