Tools

We used the following tools to work as a group and create our website:

HyperText Markup Language (HTML)

HTML is the markup language we used for creating our web pages. HTML provides us with tags to design webpages in a structured way. HTML also has tags to embed images, videos and link to other web pages.

We used HTML to create the basic template for our webpages and to structure everything in an organized manner.

W3 tutorial - https://www.w3schools.com/html/

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a style sheet language used to format and style the webpages. CSS enables us to separate the presentation logic from the document content. Font colors, font styles, navigation tab design, etc. is created using CSS.

We used CSS to make the design of our website look better. We created one CSS style sheet that was added to every page to create a consistent design for elements such as the navigation bar. There was also CSS added to each HTML page if design elements specific to that page were needed. CSS is also being implemented using Bootstrap, which will be described in more detail further down.

W3 tutorial - https://www.w3schools.com/w3css/

JavaScript

Javascript is used to change the behavior and content of HTML pages dynamically.

We used JavaScript for our navigation bar. Each link directs to another webpage using JavaScript. We also used JQuery, a JavaScript library, to implement sorting on the model pages tables. JQuery will be described in more detail next.

W3 tutorial - https://www.w3schools.com/js/

JQuery

JQuery is a JavaScript library that simplifies manipulating DOM (Document Object Model) elements. It is free and open-source, so anyone can download the library and additional plugins to use for their webpages.

We used JQuery to add sorting abilities to the tables on the model pages. The plugin we used for this is tablesorter. It sorts each column when you click on its header. On the first click it sorts the table alphabetically based on the entries in that column, if you click again it sorts it in descending order, and one more click brings it back to its original order.

Plugin - http://tablesorter.com/docs/ W3 tutorial - https://www.w3schools.com/jquery/

Bootstrap

Bootstrap is a front-end framework used to design webpages. It is free and open-source, so anyone can download and use it for their projects.

We used Bootstrap to improve the design of our website. We added a carousel to the homepage that shows multiple photos relating to music. We also used Bootstrap to add pagination on our model pages. Instead of having one long table that shows every instance users can now view less rows at once and go to the next page if they wish to see more.

Slack

Slack is a cloud-based team collaboration tool. The name is an acronym for "Searchable Log of All Conversation and Knowledge".

We used Slack for team collaboration. Slack allowed us to communicate with each other quickly without the use of emails or text messages. We also connected our Slack group to our GitHub repository to notify each of us about any activity or changes made on our project.

GitHub

GitHub is a web-based version control repository. It offers all the functionality of distributed version control and source code management systems. It provides access control along with issue tracking, web pages (wiki) and feature requests.

We used GitHub to easily code collaboratively. It allowed us to all work on the same website separately through pulling and pushing the same files from GitHub to our devices. It gave us an organized way to keep track of what issues need to be completed. GitHub also haves a wiki feature where we described our project in detail.

Our Repository - https://github.com/bkapp15/bkapp15.github.io

Namecheap

Namecheap is a website that allows you to find and purchase domain names to use for your website. They make purchasing a domain easy and affordable. For more information on how to set up your domain name with GitHub Pages check out the hosting page.

We used Namecheap to purchase the domain name musicmadness.me in order to have a way to reach the website without using the default GitHub URL. This also allows us to keep the same domain name when hosting on Digital Ocean.

Digital Ocean

Digital Ocean is a cloud infrastructure. It provides developers with cloud services that help to deploy and scale applications that run simultaneously on multiple computers. One of these services is web hosting. For more information on how to set up your website with Digital Ocean check out the hosting page.

We used Digital Ocean to host our website using our own server. When setting up Digital Ocean, we first created an account with the company and created a new Droplet, or server on which to host our web application. To access the Droplet, we simply SSH'd into the remote server with the given IP address from Digital Ocean. Once in the Droplet, we installed Apache and the necessary Web Server Gateway Interface. Next, Flask was downloaded and installed in the Droplet, followed by python virtual environment packages. Once Flask was ready to go, to complete the hosting setup, we configured and enabled a new virtual host through an Apache configuration file, in which we specified the Server Name, among other settings. For Apache to effectively serve the Flask web application, we then created a .wsgi file. Once all the above was completed and configured correctly, Digital Ocean successfully began hosting the website!

Flask

Flask is a micro web framework written in Python. It is a micro web framework because it does not require any tools or libraries to be used. It is based on Werkzeug, Jinja 2 and good intentions.

We used Flask to implement the back-end functionality of our website. Flask is written in Python and helps handle incoming requests. Flask will match the request using the url path and call the appropriate function, the function will then render the required HTML template. Flask sends the HTML page as a response to the web browser. Links to other project pages in the HTML are redirected using Flask's 'url_for' function. It will redirect to the new page through Flask by calling the function specified by the argument.