Skip to content
cs329yangzhong edited this page Oct 25, 2017 · 7 revisions

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

Collaborative/version control

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/Paprika69/cs329e-idb

Hosting

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.

Google Cloud Platform

Google Cloud Platform, offered by Google, is a suite of cloud computing services that runs on the same infrastructure that Google uses internally for its end-user products, such as Google Search and YouTube.Alongside a set of management tools, it provides a series of modular cloud services including computing, data storage, data analytics and machine learning. We used GCP to deploy our website using the app engine such that our website could be visited not only on the local machine.

Front end

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/

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.

Back end

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.

Clone this wiki locally