JiwoonKim / CS50-Pset-Web-Programming

Problem set solutions to Harvard's CS50 lectures

CS50 Psets: Web Programming

Solutions implemented for CS50x from 2016 to 2018.

For Problem Sets (Psets): Pset 6 to Pset 8.

• Pset6: Similarities
• Pset7: Finance
• Pset8: Mashup

For previous Psets: Solutions for Pset 1 to Pset 5

💡 Pset6: Similarities

Solved similarities(the more comfortable version) in June, 2018.

A web application that depicts the costs of transforming one string into another by measuring the edit distance between two strings.

• helpers.py: function distances takes two strings as arguments and returns (via a matrix of costs) the edit distance between one and the other.

  learned how to calculate edit distance between two strings using dynamic programming.

• index.html: an HTML form via which a user can submit

• matrix.html: a page generating a visualization of the matrix returned by distances function (each cell contains a cost).

  learned how to create a html form and use Jinja2 templating language.

  disclaimer: only the function for calculating the edit distance and displaying the matrix of costs and the html form for two strings was implemented by myself (the web application's server (configuration for routes using flask framework) and various html files were implemented by CS50 not by myself).

What I learned from Pset6 🌱

basic concepts of HTML, CSS, and a web server.

💡 Pset7: Finance

Solved Finance in July, 2018.

A web app managing portfolios of stocks. Allows user to check real stocks' actual prices and portfolios' values, and let user simulate purchases and sales of stocks by querying IEX for stocks' prices.

/register	/
prompts user for inputs for registration	displays user's portfolio and current cash balance

/quote (GET request)	/quote (POST request)
prompts user for stock's symbol to search	displays the current price of the stock

/buy	/sell
virtually buy stocks	virtually sell stocks user owns

/history	/add_cash
display all of user's transactions	add more cash to user's account

• application.py: a server program based on Flask framework, defines the following methods for routes.
  • register: enables user to register for an account by receiving a POST request from register.html and inserting the new user into the SQLite3 database.
  • index: displays a table summarizing the user's portfolio of which stocks the user owns and the user's current cash balance.
  • quote: enables user to look up a stock's current price by receiving both GET and POST requests. (GET request for displaying quote.html where user can input a stock's symbol and send a HTML form via POST request which then, renders quoted.html which displays the stock's current price.)
  • buy: enables user to simulate a purchase of stocks by receiving a POST request from buy.html and recording the purchase in the database.
  • sell: enables user to simulate a sale of stocks by receiving a POST request from sell.html and retreiving stocks user owns and recording the sale in the database.
  • history: displays a table summarizing all of the user's transactions made.
  • add_cash: a personal touch to the web appliction to enable the user to add more cash.

learned how to configure the logical flow of a server via methods for routes (URLs)

learned how to manipulate databases using SQL (i.e. create tables, insert and updata data, and search for data) in a web server.

• HTML files
  • register.html: an HTML form to prompt user to submit a form for registration (inputs of id, password, and confirmation).
  • index.html: an HTML to display a table summarizing the user's portfolio of which stocks the user owns and the user's current balance account.
  • quote.html: an HTML form to prompt user for a stock's symbol to look up the current price of a stock.
  • quoted.html: an HTML to display the stock's current price.
  • buy.html: an HTML form to prompt user to virtually buy stocks.
  • sell.html:an HTML form to prompt user to virtually sell stocks.
  • history.html: an HTML to display a table summarizing all of the user's transactions made.
  • addcash.html: an HTML form to add more cash to the user's balance account.

learned HTML syntax, jinja2 templating language, how to create an HTML form.

disclaimer: helpers.py, login and logout methods within application.py, login.html, apology.html were implemented by CS50 and not myself).

What I learned from Pset7 🌱

how a web application is structured using HTML, CSS, and a web server (Flask).

the MVC (Model-View-Controller) paradigm. Particularly the model and controller.

how a web server framework (i.e. Flask) handles requests and sends responses.

how to manipulate data and databases using SQL (Structured Query Language).

💡 Pset8: Mashup

Solved Mashup in July, 2018.

A web application where users can search for Google News articles atop a map interface from Google Maps.

Used open application programming interfaces (APIs) and Javascript Libraries.

/	/ (clicked on marker)
displays markers for cities on map	displays popup of articles for clicked city

/articles?geo=02138	/search?q=New+Haven
outputs JSON of articles for given postal cord	outputs place data according to search query

• scripts.js: the front-end UI for the web application, defines the following functions for.

  • configure:
  • addMarker:
  • removeMarkers:

  learned

• application.py: the back-end server program based on Flask framework, defines the following methods for routes.

  • articles: outputs a JSON array of objects for articles based on the geo location (GET parameter)

  • search: outputs a JSON array of objects for places in the US matching the q (GET parameter for city, state, or postal code)

    learned how to query and search for data (in various scenarios) using SQL using OR, AND, and wildcard(%).

    learned how to implement my own API for the web application: returning JSON for articles based on geo location.

• mashup.db: database for web application.

  • created a table for places.

  learned how to create a table for a database and import a .txt file to the table.

  disclaimer: helpers.py, the index and update methods in application.py, index.html, style.css, were implemented by CS50 and not myself).

What I learned from Pset8 🌱

how to use an API (i.e. Google Maps Javascript API), RSS feeds from Google News

Ajax, JSON, jQuery, Twitter's Typehead.js library

HTTP requests and responses