My project last tri was a mental health website designed for high school students dealing with various struggles like stress, anxiety, etc. To implement this into this final trimester’s data structures project, I took some styling and features from my original CPT project. My team’s base for the data structures project was Nupur and Eshika’s CPT project which was pretty similar to mine but more focused on logging physical health such as sleep patterns, calories, etc. To this I added the daily agenda and mood tracker from my old project.
Collections
Blog Python Model code and SQLite Database. SQLite database contains the data of users login information Includes name, username, password, and date of birth Test data from our created users (Chrissie, Isabelle, Sreeja, Nupur)
From VSCode using SQLite3 Editor, show your unique collection/table in database, display rows and columns in the table of the SQLite database.
From VSCode model, show your unique code that was created to initialize table and create test data.
The first image is of the SQLITE database. The table in the image is the user database and this holds the names of users, usernames, date of birth, and password which is used for login and authentication.
To create the users, see the second image. Here, we have a python function called initUsers() and this will create all the default users with all of their information.
Lists and Dictionaries
Blog Python API code and use of List and Dictionaries. In VSCode using Debugger, show a list as extracted from database as Python objects. In VSCode use Debugger and list, show two distinct example examples of dictionaries, show Keys/Values using debugger.
This image is from the user query function which will query all the users using a GET request. The return is a list of all the users. Within the list is a dictionary which contains all the user information like name, username, and DOB.
API and JSON
Blog Python API code and use of Postman to request and respond with JSON. In VSCode, show Python API code definition for request and response using GET, POST, UPDATE methods. Discuss algorithmic condition used to direct request to appropriate Python method based on request method.
This code shows the API code for each request and response using the different methods.
The first screenshot is the GET request which will get the users from the database, prepares the output in JSON, and returns.
The post request using self is for reading the user and for creating the user. It sets the UID and checks if either field is valid (long enough and that it’s not missing or faked). And then it adds it to the database.
Postman
In Postman, show URL request and Body requirements for GET, POST, and UPDATE methods.
This first image is a GET request with Postman. This will get all users.
This screenshot is a POST request which is for logging in. The body is a JSON payload with the UID and password. It will return a JWT token as a sign of authentication.
Frontend
Blog JavaScript API fetch code and formatting code to display JSON. In Chrome inspect, show response of JSON objects from fetch of GET, POST, and UPDATE methods.
- Our login uses POST method for fetch:
In JavaScript code, describe fetch and method that obtained the Array of JSON objects. In JavaScript code, show code that performs iteration and formatting of data into HTML. In the Chrome browser, show a demo (POST or UPDATE) gathering and sending input and receiving a response that show update. Repeat this demo showing both success and failure. In JavaScript code, show and describe code that handles success. Describe how code shows success to the user in the Chrome Browser screen. In JavaScript code, show and describe code that handles failure. Describe how the code shows failure to the user in the Chrome Browser screen. The code below shows what happens after correctly or incorrectly logging in. If the login is successful, the user will be redirected to the welcome page. If the login fails, an error message will appear on the page.
When I enter the correct username and password (Isabelle and 123belle, respectively), I am redirected to the project’s homepage:
Here I entered my username (Isabelle) but I used the wrong password (hi instead of 123belle). I then got the error as written in the code:
- Features I added into this project from my previous CPT projects
- Both of these features are mainly frontend, using JavaScript to format the HTML
- Daily Agenda
- Mood Tracker
