In this post I will continue through the Finance problem set of CS50. In the previous three weeks we have implemented the register, quote, and buy functions. Now we want to have a home page for our users. The home page should give the user a snapshot of their account including the amount of each stock they own and the value of that stock. For this, we will create the index.html file (the home page file recognized by the browser) and the supporting Python code.
Let’s start by looking at the index.html file. A lot of what is going on here should look familiar from the last few weeks. We are using the Jinja templating language to use our layout.html file as a template. One noticeable difference here is that we are going to put all of our data into a table and display it to the user. The table is using the table-bordered CSS style from Bootstrap. You will notice that in the the head of the table we have columns for the stock symbol, number of shares, price, and the total. In the for loop, we will iterate over a list, from our Python code, and retrieve all of the information relating to the stocks that our user owns. Take note of “portfolio” and “available_cash” as these will correlate with our backend Python code. Here I used “investment” as the name for each row in the portfolio, but any name could be used here. However, you always want to make sure that you are naming things in a way that makes sense to someone else who will be reading your code later.
Now, let’s look at the Python code. Here you will see that we are defining the users portfolio. In this statement, the SQL is going to sum the shares of each symbol (or stock) and assign it as number_of_shares. This is why we are able to execute investment.number_of_shares in out html code from above. The rest of the SQL statement is ensuring that we are getting the stock info from the user that is currently logged in to the website. The next SQL statement should look very similar to to what we implemented in buy. We are simply getting back a table with one column called “cash” that has one row containing the available cash for the current user. So, to get the available_cash, we set it equal to the 0th row of the “cash” column. Next, we render index.html and pass the data from portfolio and available_cash so that the Jinja statements of our html will execute. Now, our users will see a nice table showing them all the stock that they currently own and their available cash left to purchase stock.
And that is it for index for the Finance pset. Next we will give our users the ability to sell their stocks. Please comment below with any questions and remember to share on your favorite social media platform. As always…Happy Programming!