-
Notifications
You must be signed in to change notification settings - Fork 2
3: Tools
HTML (Hyper Text Markup Language) is the basic building block of web pages. HTML elements are used to determine the structure of HTML pages. Tags such as <h1></h1> (a level 1 heading) specify the type of element. A typical HTML page includes a header (<head></head>) and a body (<body></body>). The header includes meta data such as a title to appear on the browser tab. The body contains the actual content to appear on the page. HTML pages are enclosed by the <html></html> tags. We used HTML to create the templates for our web pages.
CSS (Cascading Style Sheets) is a language used to style HTML pages by defining how elements should be displayed. CSS files that are externally stored can be used to style multiple HTML pages, making consistent styling of an entire website much simpler. A simple template for CSS is selector {property:value; property:value;}. The property:value comprises a style declaration for that selector. Elements can be selected by element type, id, or by class. We used CSS to style all of our web pages.
JavaScript is used to determine the behavior of web pages. It can be used to program how the web page should respond to user input. In HTML, JavaScript is enclosed by <script></script> tags. JS can be included anywhere in the document; however, since it can take longer for this code to compile, it is recommended that it be put at the bottom of the body so that the rest of the HTML page renders. We used JS to sort the tables of our models and for the splash page. We also used JS to make a button on our About page that runs our database unit tests.
Bootstrap is a framework for HTML, CSS, and JavaScript. This framework is free and makes the process of web development easier by providing templates. Bootstrap also can be used to make web pages responsive to screen size so that they look good on any screen, from phone to large monitor. Instead of having to download Bootstrap, it can be accessed from the CDN (Content Delivery Network). We used Bootstrap in our web pages in order to make them responsive, specifically using Bootstrap containers and divisions to achieve this. For example, our navigation bar reduces to a hamburger menu on small screens.
Python is a high-level object-oriented programming language. It is used in a wide variety of fields because it is syntactically simpler than some other programming languages like C++ or Java. We used Python in the context of Flask.
Flask is a Python microframework. It can be used for routing web pages, and it works with Jinja templates to render HTML from separate files. In order to use Flask objects, the Flask class must be imported from flask.
from flask import Flask
A flask object can then be created as such:
app = Flask(__name__)
In order to route specific URLs using flask, @app.route is used:
@app.route('/')
A function for that URL can then be defined, including a return:
def hello_world():
return 'Hello, World!'
Instead of returning HTML directly in this function, Flask can render an HTML template.
We used the standard Flask directory including a templates folder and a static folder. When rendering a template, Flask automatically looks in the template folder. The static folder contains our image, CSS, and json files. We deployed our website as a Flask object.
Jinja2 (http://jinja.pocoo.org/docs/2.9/) is a language to build HTML templates for Python. First, a base template is created which acts as a skeleton containing blocks. Child templates can overwrite these blocks; anything not specified by the child template will remain the same as the base template. Flask is used to render each child template when its url is accessed, which extends the base template and builds the HTML file on command. Our instance pages are extended from base classes for songs, artists, and albums. Using Jinja templates, we created dynamic HTML pages. We passed our database tables to the templates through the Flask routing page. Within the template, the use of double curly braces specifies variables as such: {{ }}. The use of {% %} specifies python code. This allowed us to use for loops and if statements in our HTML templates, which we leverage to iterate through our database tables and find the correct information for each instance page.
SQLAlchemy is a Python SQL toolkit and Object Relation Mapper. This tool bridges the gap between Python, an interpretive language, and SQL, a declarative language. Once a database is set up, tables and rows can be created in Python. For our website, we set up classes in the file models.py for individual songs, artists, and albums. The classes in this file specify the columns in the corresponding database table as attributes, and each instance of a class is a row in its table. These classes inherit from a declarative Base class, Base = declarative_base(). The classes specify the table that the instances of the class (which are rows) belong to. For example, in the Songs class, we set __tablename__ = 'songs'. The attributes (or columns in the table) for each instance are then listed. When calling an instance of the class, each of these attributes is set. Additionally, one of the attributes is set as the primary key. For each class, we used the name (whether it be a song, artist, or album name) as the primary key: name = Column(String(80), primary_key=True, nullable=False). Column() is used to specify that the attribute is a column in the table. In addition, SQLAlchemy provides datatypes such as ForeignKey, Integer, String, Date, and Text to specify what type of information each column should contain. In our file build_db.py, we load information from json files and create instances of the classes in models.py for each item in the file. These are then added and committed to the SQLAlchemy Session, described below. Whenever we needed to get information from the database, we used the SQLAlchemy session.query() function. Through SQLAlchemy, we built the tables in the database and extracted information from these tables in Python.
The SQLAlchemy Session and Engine play an integral role to implementing SQLAlchemy. According to SQLAlchemy1.1 Documentation, "the Session establishes all conversations with the database and represents a 'holding zone' for all the objects which you’ve loaded or associated with it during its lifespan. It provides the entrypoint to acquire a Query object, which sends queries to the database using the Session object’s current database connection, populating result rows into objects that are then stored in the Session." The Session interacts with the Engine, which acts as the starting point for SQLAlchemy in the application. The engine can be created easily with engine = create_engine('postgresql://user:password@localhost:5432/mydatabase'). After creating the Engine, the Session can be bound to it. First, you create a Session class that is configured to the engine: Session = sessionmaker(bind=engine). Afterwards, a session instance can be created from this class: session = Session(). Function such as session.query() allow us to interact with the database completely through our Python code; there is no need to use SQL or another descriptive language to interface with the database.
We used embedded images of artist and album covers on our individual instance pages. These images were acquired from iTunes.