- Aditi Akella
- Sophie Bulkin
- Grace Le
- Luke Manning (joined week 6)
Our website, tweeter.gq, is a website that features information about birds and their evolution. Our project showcases our team's learning throughout the year. Our project utilizes a Python Back End and an HTML Front End, as well as Jinja templates, SQLAlchemy databases, and CSS.
- Go to our homepage by clicking on the link
- Our homepage features a bird of the month
- Code Review:
- On home.html, there first section of code sets up the style for the rest of the page.
- Next, there is code for a navbar so that users can navigate our website.
- Then there is the code for the heading of the homepage and picture of flying birds.
- Lastly, there is the code for the bird of the month section, which includes a title, picture, and some text.
- Scrum Board Card
- On each page of our website there is a navigation bar
- Clicking on those links takes you to different parts of our website
- If you click on our logo, which is in the middle of the navbar, you will be redirected to our easter egg
- Code Review:
- On home.html, here is the code that sets up the style for the navbar
- Here is the code that links the homepage of our website.
- Here is the code that creates the dropdown menu for the About Us pages
- Here is the code that links the Twitter API
- Here is the code that turns our logo into the easter egg
- Here is the code the links the contact page, phylogeny page, and our study journal
- Scrum Board Card
- On our homepage, hover over the "About" tab in the navbar. Then click on each person's name to access their profile. For quick access, here is Aditi's Profile, Sophie's Profile, Grace's Profile, and Luke's Profile.
- Code Review:
- About.html is the Jinja template used for all about pages. It includes a navbar, the words "About Us:", and a content block.
- All of the information about team members can be found on dataaboutus.py.
- Each person's information is turned into a dictionary. Here is an example.
- Then the entire team's information is turned into a list.
- This list of data is passed through the back end, views.py.
- Then, Jinja variables are used on the about pages to fill in everybody's information in the content block of About.html. Here is an example of the Jinja variables in use.
- Scrum Board Card
- To access the Twitter API, click on the API link on the homepage which will rediect you to the Twitter API
- Code Review:
- Views.py
- The API keys and link are printed here in order to gain access to the API.
- Under the keys, json.get is used to pull the data using the variables given when the API endpoint is tested on the Rapid API website.
- Then it takes the respone [200] and prints it.
- Tweet.html
- The html code used in order to display the data the API pulls. It takes the variables from the app route and prints them onto the website.
- Views.py
- Scrum Board Card
- In order to run this file, go to the homepage, click the logo in the middle of the screen, and it will redirect you to the Easter Egg
- Code Review:
- First, on easteregg.html, there is a section that sets up the style of the easter egg.
- Then, there is code for our navbar
- Next, we embedded the college board requirements.
- Then we wrote the code for the "Who am I in Computer Science?", which highlights all of the things that we have learned throughout the course of working on this project.
- We have also embedded our group journal, which has also been embedded to demonstrate our completion of the college board requirements
- At the end, we used an HTML form to create a "feedback" page where you can say which aspects of the college board requirements you (the evaluator) think were not efficiently used
- Scrum Board Card
- On the navigation bar if you click on contact it will take you to an contact page
- Code Review:
- First, our contact page was created using index.html, which is based on a Jinja template using base.html. Base.html includes the style for index.htmal as well as a navbar.
- On the contact page, there is a contact form on which the user can input there name, password, email, and phone number
- Using the contact form, the user can add their information to a contact table.
- Users can delete there information if they don't want it there anymore
- Scrum Board Card
- In order to access our database, go to our homepage and click on Contact in the NavBar. This will take you to the contact database page.
- Code Review:
- First, the User class, Email class and Phone Number class are defined in init.py.
- The User ID is declared as the Primary Key, which means that each person in the database will have a unique user id.
- Then, in create.py, the model_create function is defined, which allows users to be committed into the database.
- Also in create.py, the model_delete function is defined, which allows users to be deleted from the database.
- Then, create.py has a few functions that allow the names, passwords, emails, and phone numbers of users who are already in the database to be called.
- Next, in views.py, all of the functions from create.py are imported.
- In the create procedure on views.py, first, the contact form is used to gather the name, password, email and phone number of the user.
- Then, the model_create procedure is called in order to commit the user's imformation to the table. The user's information is then shown in the database table.
- In the delete function on views.py, a similar method is used.
- First, the form is used to identify which user should be deleted from the database
- Then the model_delete procedure is called and the user's information is no longer displayed in the table.
- The functions emails and phones on views.py are used to display the users' emails and phone numbers. First the model_query_emails and model_query_phones procedures are used to call all of the emails and and phone numbers in the database. Then the emails and phone numbers are displyed on the table in index.html.
- Scrum Board Card
- To access the phylogeny page, go to our homepage and click on phylogeny in the navbar. You will be redirected to the bird phylogeny page.
- Code Review:
- First, on phylogenetic.html, there is a section that sets up the style of the phylogeny page.
- Then, there is code for our navbar
- Next there is code for a embedded picture of a phylogenetic tree that shows the relationship between orders of birds
- Scrum Board Card