Tools - woannaju/cs329e-idb GitHub Wiki

As of Phase 1, no external tools were used in the creation of this website. All .css and .html pages were made by the team with the assistance of various text editors (Ex: Atom, Sublime Text, Notepad++).

As of Phase 2, Bootstrap was used to implement the GUI. The GUI consists of the navigation bar and the table headers. Also, Javascript was used to implement the code for the frontend. Like Phase 1, all .css and .html pages were made by the team with the assistance of various text editors (Ex: Atom, Sublime Text, Notepad++). The scripts for implementing Javascript for each file have been embedded in each of the html files rather than having separate files. Similar to Javascript, Bootstrap is also embedded in the html files.

As of Phase 3, Flask was used to implement the backend. Furthermore, Digital Ocean was used to host the website and Namecheap provided the URL. Like Phase 1, all .css and .html pages were made by the team with the assistance of various text editors (Ex: Atom, Sublime Text, Notepad++). Bootstrap was also further implemented in the GUI.

Bootstrap was used to implement the GUI for the website. Bootstrap provides a library of CSS classes that makes designing the webpage easier and nicer. Thus, Bootstrap was used to create a similar and aesthetically pleasing theme to unite the pages. In order to use Bootstrap, the Bootstrap file was imported into the html files. Specifically, Bootstrap was used on the navigation bar, about page, tables, buttons needed to move forwards and backwards. From Bootstrap, the button class was imported and implemented in places that required user input to perform its function (Like redirecting to different pages or executing a Javascript function). The Bootstrap buttons were used because it serves to be a visual indicator for the users that there was an interactive functionality that they could utilize. In some cases, the default appearance for the Bootstrap CSS file did not match the design of the webpage, so some additionally styling did have to be done. The most notable case are the buttons. The default buttons were too cartoon looking, so it was modified to match the sharp, clean look that we were trying to achieve.

Javascript was used to implement the frontend, more specifically the sort function and pagination for the model pages. The sort function allows each column of any table to be sortable in descending and ascending order. It would be first initiated by a user clicking on the corresponding table header and toggled between ascending and descending by clicking on it some more. The script utilized the Javascript library of jQuery. In order to use jQuery, the source website was included to reference the jQuery library. The program sorted the HTML page name based on ascending or descending order. Also, the jQuery library was used to implement pagination. The pagination was implemented on each of the tables for the corresponding pillar. The pagination was implemented through the .hide() and .show() functions from the built-in library. Additionally, Javascript could have been used to add a sorting indicator to show the users how the table were sorted; however, after testing with the looks of it, it was not aesthetically pleasing. So the whole idea was scrapped.

Flask was used to implement the backend of the website. Flask is a web framework written in Python that supports web development and web applications. The heart of the Flask integration lies in the app.py file. Within this file each HTML page has a function that renders and returns the corresponding HTML file in order to display the page. These functions are incorporated throughout the HTML files in order for pages to link to other pages. Flask also comes with a development server, so an application can be tested locally. Running python app.py locally will host the application on the localhost address and at the default port number 5000 (http://127.0.0.1:5000). For permanent hosting, Digital Ocean was implemented.