CS50x Week 9: C$50 Finance(Problem Set)

We are done with C programming language, now we are stepping into web programming. This week, we will learn about HTML, CSS, PHP, and SQL.

CS50 finance history page
CS50 finance history page
CS50 finance portfolio page
CS50 finance portfolio page

HTML is HyperText Markup Language, it is the standard markup language used to display websites. To see the html of a website, right click anywhere with blank space on a website, then click View page source. There are many versions of HTML, in this problem set, we are using HTML5. HTML5 is the future of webpage markup language, and is recommended by World Wide Web Consortium (W3C). HTML5 standardized some syntax and added some feature that previous versions do not have. Beginner can learn about HTML5 here.

CSS is Cascading Style Sheet, it is a style sheet that make website “pretty”. HTML describes the structure of the page while CSS gives style to the page. For example, we use html to make a table, CSS can then be added to describe the property of the table, changing the colour of the table, or making the border dotted, etc.

While HTML is not a programming language, PHP is a programming language because it can process logic. The syntax of PHP is similar to C programming language. PHP is used in web design to give logic to the webpage. For example, if-else statement, for loop, etc. To give a specific example, if a user submit a login form via HTML, we can use PHP to check if the form field is empty using

, if it is, we inform the user that they have not completed the form. PHP’s variable starts with a $ sign, the function empty is used to check if the variable sent using POST method by HTML is empty. apologize is a function coded during the problem set to alert the user via a message.

SQL is a language to design and manage a database. There are information that we want to store about users, for example, their login username, password. In this problem set, we made a finance website that lets user buy and share stock, so, we need a database to store the cash amount, shares, price, etc. The four functions of SQL that is used in this problem set is SELECT, INSERT, UPDATE, and DELETE. As an example, we can select the share of a user by executing the following query,

. It will select the value of column share from table portfolio where the id is 3.

Besides the normal CSS, you can use Bootstrap that is another type of stylesheet, you can link them using

. Bootstrap is developed by Mark Otto and Jacob Thornton at Twitter, they give more advance styling to your website than normal CSS. You can refer to here for the list of advance CSS you can use. Also, bootstrap added some components that you can add to your website such as navigation bar, drop down button, etc, refer here. Bootstrap is a mobile first, meaning it is designed to work good with phones, shrinking the website accordingly to fit the mobile display.

You can see the result of this problem set at http://finance.cs50.net/. This is done by CS50 staff. You can login using Username: jharvard, Password: crimson. The buying and selling of stock is fictional, meaning you do not actually buy and sell the stock, but the prices of stock displayed is the real stock value from the stock market. My implementation shown above is a bit different from the CS50’s staff website. I used a navigation bar and badge for portfolio screen.

My code: https://github.com/shaunlgs/CS50x
Other posts in the series: Harvard CS50x 2014

Leave a Reply