-
Notifications
You must be signed in to change notification settings - Fork 2
Tools
We used the following tools to work as a group and create our website:
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 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
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.
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) 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 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 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.
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.
IDB-2 version