Creating Front-End Interactions With Perl

Sample Code

Notes

So far we have been converting and processing data. We have ignored the front end. Perl can be used to create front end presentations that the user will see. We are going to work with it in this example by printing out an HTML file, but perl can also be used in CGIs that run on web servers that will produce HTML that you can see directly in the browser. If you are interested in CGI programming, check out the notes on that topic here.

We will be using the Google Maps API for this

Check out this example of a custom pin and label on a map. We are going to make one of those that shows the sunrise and sunset in College Park. We will run a perl file that will output HTML that has the right information. Then, you can open that perl file and see a map like this.

Documentation from Google on Info Windows is here.

To use this, you will need an API Key. To get that, go to https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple. At the top of the page, click "Get A Key'. Click Create New Project in the pull down and give your project a name. Then click "Create and Enable API". This will generate a key for you that you can use in the places google indicates you need to include YOUR_API_KEY.

Next, you should take your code from hw5. That has everything you need to get the sunrise and sunset data for College Park. That text is the text we will put in the info box. We also need the latitude and longitude for College Park as part of the process to drop the pin. Those coordinates are 38.9897° N, -76.9378° W. Now, instead of posting to Twitter, have your code print out the full HTML from the Google example. Replace the coordinate with the College Park coordinates, the text with your sunrise/sunset text, and the API key with your key.

Finally, you want to print that out to a file. You can use the multiline printing to a file like this:


open (OUT, ">output.html");
print OUT qq^

<html>
<head>
AND ALL THE REST HERE

^;
close FILE;
Once you do that, you should get an output.html file that you can open in your browser.