Lab 1: HTML Holidays (3 Points)
Chris Tralie
Due Monday 9/14/2020
Overview / Logistics
The purpose of this lab is to enable you to brush up on your knowledge of methods and how they fit together. You will be converting data from one format (parallel arrays) to another format (HTML). Though it is often tedious, automating such data conversions is a common task in software engineering, so this is a valuable skill.
Furthermore, you will get experience making code that writes code!. This is also a common task, as we might have a higher level language with more context (like Java in our example) that writes tons of code in a simpler language (HTML in our example) that would be very tedious to write out by hand. And this is actually what happens to run your Java code behind the scenes with a conversion to Java bytecode.
Compared to 173, you will notice that the design of your methods is left a little bit more up to you. This is intentional. Students are moving more towards autonomy in their design in this course, so you should spend a little bit more time up front sketching out a plan on a piece of paper before you start coding. Of course, I am also happy to discuss your ideas! But just be sure not to code before you think.
Click here to download the skeleton code for this assignment, which you can open with NetBeans. You will be editing src/Holidays.java
. Have you read this all and still don't know where to start?? Click here.
Learning Objectives
- Access elements in a multidimensional array using loops
- Write methods to fit a specification
- Use existing methods with provided documentation
- Use methods together in concert to accomplish a task
- Perform basic String concatenation in Java
- Write a complete program with very little code in the
main
function - Programmatically convert data from one format to another
What to submit
When you are finished, you should submit Holidays.java
to Canvas. Then, please answer the following reflection questions below, which we will use to guide discussions next week.
Background: HTML Tables
Modern web pages are formatted in a scripting language known as Hypertext Markup Language, or HTML for short. This code can be written up front and fixed for static web pages (like the one you're looking at now), but we very often want to generate it programmatically so we don't have to write it from scratch every time a small amount of data changes. This is the basis of server-side web languages such as PHP.
Every type of formatting occurs in what's known as a "tag." The web site w3schools.com has some nice tutorials on different HTML tags, but we will be just focusing on one set of tags today for HTML tables. You can read more about them at this link, but the example covers everything you need to know for this lab. In particular,
-
Every table tag begins with
<table>
and ends with</table>
-
Within the table, every row tag begins with
<tr>
and ends with</tr>
-
Within each row, every column tag begins with
<td>
and ends with</td>
-
The data for the table goes within the
<td> ... </td>
tags.
For example, the code below generates a table that looks like this
Course Title | Course Name | Prerequisites |
CS 173 | Intro To Computer Science | None |
CS 174 | Object Oriented Programming | CS 173 |
CS 476 | Computer Graphics | CS 174, Math 111 |
Lab 1 Task
In this lab, you will programmatically generate a String
containing all of code for a small HTML web page with a table of some major holidays in 2020, and then you will write this string to a file. You will not be writing any HTML code directly! Rather, you will be automatically creating HTML code using Java.
The table should be formatted as shown below. You will then write this string to a .html
file, which you can open to view the generated table with any modern web browser (like the one you're using now!). The information about the holidays is provided in two pieces in the Holidays.java
file. The first is constant array of String
values with the name of the holidays, as shown below:
Then, the month and day are provided as elements in a multidimensional array that is
These arrays are parallel, which means that corresponding indices refer to the same item. For instance
HOLIDAY_NAMES[1]
is the string "Martin Luther King Jr. Day"
HOLIDAY_DATES[1]
is the array {1, 20}
So, the complete information for entry 1
is the name HOLIDAY_NAMES[1]
, the month HOLIDAY_DATES[1][0]
, and the day HOLIDAY_DATES[1][1]
.
To generate the complete HTML web page, you will need to
- Create a string with the HTML header and the start table tag
- Loop through all of the elements in these arrays to create each row of the HTML table, and add the string for that row to your running HTML string.
- Add the end table tag and the code to end the HTML document to the end of your string
-
Write the final string to the HTML file
holidays.html
Provided Java Helper Methods
The following methods are provided in the NetBeans project to help you out. You should look at the documentation in comments above each method
getHTMLStart()
: This method returns a string that should go at the beginning of your HTML stringgetHTMLEnd()
: This method returns a string that should go at the end of your HTML stringwriteToFile(String filename, String s)
: A method to write a string to a file. You should use this method to write your complete HTML string to a file calledholidays.html
when it is ready. Files will write to the root of your project directory by default. So if I say, for example This will create a file "out.txt" in your project. You should navigate to the project in your file manager and double click on this file to open it in a browser.-
Weekday.getWeekday(int year, int month, int day)
: Use this method to return the weekday as a String
Java code you need to write
You should write three methods in Holidays.java
that work together to accomplish the task
- A method that converts a month number into a string representing that month. HINT: Your code will be much shorter if you use an array to store and reference the month names instead of having a bunch of if statements or a switch statement
- A method that returns a string corresponding to a particular row of the table.
- A method that pieces the full HTML string together and then writes all of the HTML code to a file
Extra Credit (Up To +1)
Here are a few things you can do that are above and beyond- If all of the tags are there, the HTML will work properly, even if there is no whitespace in between the tags. But the code will be a big mess. Format the HTML code nicely with line breaks and tabs where appropriate
- Stylize your table using CSS
Final Result
Here's an example of what a row should look like
If all goes well, when you put all of the rows together and write them out to holidays.html
, you should see a table with the following information:
Weekday | Month | Day | Holiday |
Wednesday | January | 1 | New Year's Day |
Monday | January | 20 | Martin Luther King Jr. Day |
Saturday | January | 25 | Chinese New Year |
Friday | February | 14 | Valentine's Day |
Monday | February | 17 | Presidents' Day |
Monday | March | 9 | Holi |
Friday | April | 10 | Good Friday |
Wednesday | April | 22 | Earth Day |
Tuesday | May | 5 | Cinco de Mayo |
Monday | May | 25 | Memorial Day |
Sunday | June | 14 | Flag Day |
Friday | June | 19 | Juneteenth |
Saturday | July | 4 | Independence Day |
Tuesday | July | 14 | Bastille Day |
Friday | August | 21 | Hijra - Islamic New Year |
Monday | September | 7 | Labor Day |
Friday | September | 18 | Rosh Hashana |
Sunday | September | 27 | Yom Kippur |
Friday | October | 9 | Sukkot |
Thursday | October | 29 | National Cat Day |
Saturday | October | 31 | Halloween |
Wednesday | November | 11 | Veterans Day |
Saturday | November | 14 | Diwali |
Thursday | November | 26 | Thanksgiving |
Friday | December | 25 | Christmas Day |
Don't know where to start?
The easiest place to start would be to define the first method that takes in a number for the month and returns a string corresponding to that month.
To get your program to do anything, you'll have to have statements in the main. By themselves, the functions may work perfectly, but if you don't have code that runs in the main that eventually calls them, nothing will happen when you run your code.
When your string is ready to go, you should save it to a file. This is where you should look at the docstring for the "writeToFile" method. As an example, let's say you had the following in your main:
Then that would save to a file called "myfile.html" in the root of your directory, and if you double click on it, it will open to a web page that looks like this:
But that's just an example. You should call the other methods you make from the main.