Here I’m going to talk a bit on how I developed the flight status web app, but before we go to that I just want to clarify I build this web app for fun and I figured flight status could be presented in a better way and also I guess I just love the airline industry. So let’s get started.
Tools
Visual web developer express 2010
ASP.net MVC 3 (I know a small scale site like this might not be a good reason to use MVC 3 but I wanted to learn about it so I used it)
JQuery
Adobe illustrator for some icon creation
http://www.ajaxload.info/ (for generating the loading .gif image)
http://www.fiddler2.com/fiddler2/( for some HTTP request tracing)
If you noticed from the above tools there was no mention of a database, for this project I wanted to make sure the development was as simple as possible and fast as possible
Origin and Destination
For the origin and destination input box I wanted to have an auto complete functionality but I needed the location information which I didn’t have.
So I headed to http://malaysiaairlines.com and click view source so that I can see their HTML markup, I found the below section which displays the location information, what I did next was copy the <optgroup> for each country, compiled it in one file and saved it as an XML file and voila now I have a datasource for the origin and destination. After that it was all about using some Jquery and the .net System.Xml capabilities to load the datasource and display it.
Flight No.
The flight number input textbox was straight forward as it will only need to accept numbers and linking it to any datasource would not be necessary.
UPDATE: To even better simplify the UI, I have removed the flight number input box since it's also an optional field.
Search event buttons
If you head to http://www.malaysiaairlines.com/my/en/book-and-plan/flight-status.html you will notice that you will need to select a date from the dropdown which will always be 3 dates (yesterday’s date, today’s date, tomorrows date), so I decided to remove the dropdown date selection and merge it with the search button. In my design there will always be 3 buttons and using some javascript each button will show their respective dates and firing their respective search events following the formula of
currentdate = your machine date
button PrevDate = currentdate- 1
button ToDate = currentdate
button TmrDate = currentdate + 1
Flight status results
Here is where it gets a bit interesting, since Malaysia Airlines doesn’t have an open API and I no longer work there so accessing the flight status information is near to impossible. So for the flight status search result what I did was I screen scraped http://www.malaysiaairlines.com/my/en/book-and-plan/flight-status.html using .net build in classes (System.Net.Webrequest and System.IO.StreamReader), but before that you will need to use http://www.fiddler2.com/fiddler2/ to trace the HTTP request for http://www.malaysiaairlines.com/my/en/book-and-plan/flight-status.html . Once that was done all I needed to do was make an HTTP request using the user input parameters and screen scrape the result and display it.
So that’s about it, I might add more airlines in the future when I have more free time. To try out the flight status web app head over to http://flightstat.balanair.com/