Collections

  • From VSCode using SQLite3 Editor, show your unique collection/table in database, display rows and columns in the table of the SQLite database.
image
This database shows all the login user's ids and passwords for the casino. They include the date of birth, password, and usernames to ensure that each user will acess their own progress in the casino. When a function or button requests data from the backend, the names, passwords, and info stored in the database are pulled to appear in the frontend. - From VSCode model, show your unique code that was created to initialize table and create test data.
image
A SQLite database is a kind of digital folder that stores different categories of data. And as a databse is opened and used, more slots are filled in it to store what the user has done, the objeccts they've interacted with on the site, and to keep their progress on the website. In this database, it keeps track of the user's passwords and login info so each use of the feature is unique to the user. # Lists and Dictionaries - In VSCode using Debugger, show a list as extracted from database as Python objects.
image
- In VSCode use Debugger and list, show two distinct example examples of dictionaries, show Keys/Values using debugger. The error displayed here is about logging in with the correct information. The debugger is able to go through each function of the feature which can help the user identify which parts are non functional and what they need to fix. Breakpoints stop the feature between the two points in order to have an area to fix the issue. Once the error is fixed, the code can be rerun, and you can step through the breakpoints to make sure it runs smoothly. # APIs and 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.
- Post
image
The post function requests to make a new entry in the database and uses information that is provided by the user. If the information is in the correct format, the request will pass through.
- Put
image
The put function is able to update the database with the data from the user's request that was previously made. This function was used in the casino feature to store user's information on the their account.
- Delete
image
The delete request is used in order to delete an element or user from the database. This can be used to not have to many users in the database in order to free up space for new users.
- Fetch
image
The fetch initiates a request from the backend to add in data from a user. This is one of the main functions that connects backend to frontend data by pulling data from the sqlite database into the frontend.
- In VSCode, show algorithmic conditions used to validate data on a POST condition.
image
The user conditions are validated by identifying the amount of characters in the name and uid to authenticate the correct user. If they do not match, the user is meant with an error message due to the missing characters.
- In Postman, show URL request and Body requirements for GET, POST, and UPDATE methods.
image
- In Postman, show the JSON response data for 200 success conditions on GET, POST, and UPDATE methods.
image
This image shows the correct format when requesting for post,get, and update. All the proper elements are included so postman is able to pass the request through.
- In Postman, show the JSON response for error for 400 when missing body on a POST request.
image
Here there is a 400 error because the body on the post request is missing. You can see that the request is empty rather than having the correct passwords, IDs, and elements that are needed for the Post request.
- In Postman, show the JSON response for error for 404 when providing an unknown user ID to a UPDATE request.
image
This shows a 404 error occuring in postman when attempting to authenticate due to the user ID being incorrect.
# Frontend - In Chrome inspect, show response of JSON objects from fetch of GET, POST, and UPDATE methods.
image
This image shows the objects and details of each house from the real estate program when they are requested and brought to the frontend from the database.
- In the Chrome browser, show a demo (GET) of obtaining an Array of JSON objects that are formatted into the browsers screen.
image
The GET function of this code shows the real estate objects like the house prices, bedrooms, bathrooms, and other details from the backend that are being formatted and retrieved into the frontend.
- In JavaScript code, describe fetch and method that obtained the Array of JSON objects.
image
When sending a request with fetch, data is grabbed from the database using the GET function. In this case, the data asked to be retrieved by fetch is the information about users in the casino. Depending on the user's progress and spending in the casino, the data retrieved will vary from the backend and then displayed onto the frontend.
- In JavaScript code, show code that performs iteration and formatting of data into HTML.
image
This part of the code involves Javascript iteration which allows for errors to be checked in the program in order to format each part of the code correctly. Here, the login error message is given when the response.ok is false, meaning that the program is not running as it should be. It uses an if statement to loop to the error message every time the login information is incorrect.
- 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.
imageimage
In this code, if a user does not have an authorized token, the program will redirect them to the signup page. If all runs smoothly, the token should be identified after creating an account and the user will be redirected to the casino's game room.
- In JavaScript code, show and describe code that handles failure. Describe how the code shows failure to the user in the Chrome Browser screen.
image
When the program encounters a failure, it uses if else statements to notify the user about an invalid input. For example, the image above shows how in the casino home page, if the login is invalid, the program will notify the user with an else statement and tell them that the id or password they entered was invalid.