Collections

Blog Python Model code and SQLite Database.

From VSCode using SQLite3 Editor, show your unique collection/table in database, display rows and columns in the table of the SQLite database.

  • Your unique collection or table in the SQLite database represents the structure where your data will be stored. You would typically define this table using SQL commands. For instance, if you were creating a table to store user information, you might have columns for user_id, username, email, etc.
image

This is the database it has a list of all the organizations and opportunities and it’s needed in order to display all the volunteering opportunities on the site. Each organization has an id, and a bunch of different tags like state, zip code, long/latitude, and coordinates.

From VSCode model, show your unique code that was created to initialize table and create test data.

Screenshot 2024-04-18 at 11 31 19 PM

An SQLite database is like a digital version of that notebook. It helps you organize your move information neatly. In this digital notebook, you can store information for volunteer organizations. Initialization of table data means filling in your notebook with some organization names, locations, and required hours. This way, when you open your notebook, you already have some potential organizations and you can add as many as you want to attend.

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.

Screenshot 2024-04-18 at 11 32 26 PM

This debugging photo shows how I added a red dot between the code segment showing how there will be a breka in the code. The uid and the body hold the information from the user toby. The image shows the fetching of the information of toby and where in the code the body came from.

Blog Python API Code and Use of Lists and Dictionaries: In your Python API code, you likely use lists and dictionaries to manage and manipulate data. Lists are ordered collections of items, while dictionaries are unordered collections of key-value pairs.

Debugger in VSCode to Display Lists and Dictionaries: Using the debugger in VSCode, you can inspect the data retrieved from a database as Python objects. This involves extracting a list of data from the database and examining it in the debugger interface.

Examples of Dictionaries Using Debugger: The debugger can also be used to display examples of dictionaries. You can show two distinct dictionaries, each with its keys and corresponding values, using the debugger interface.

APIs 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.

In VSCode, show algorithmic conditions used to validate data on a POST condition. In Postman, show URL request and Body requirements for GET, POST, and UPDATE methods.

In Postman, show the JSON response data for 200 success conditions on GET, POST, and UPDATE methods.

Screenshot 2024-04-18 at 11 27 25 PM

This postman step is essential in order to ensure that the api is authenticated. To do this, the uid and password need to be put into the body, and this will allow it to go through. In this screenshot, the id and password for the pre-authenticated user, Admin, is but into the body. When you press send on the post method, you get a successful authentication for toby. When deleting authenticate and changing the method to get, the body will display the authorized token. Using the update method is for making a change in the user’s information, so as an example you could change the password for toby’s user in body, and once you press send, it will make this change in the database.

Screenshot 2024-04-18 at 11 28 41 PM
Screenshot 2024-04-18 at 11 34 46 PM

This postman step fetches the user information specific to each user that is input in the body. It is essential in order to authenticate the user because without it, postman would not be able to knwo which user to successfully authenticate. Using this method is for authenticating the user so that they can access the website when attempting to login on the login page.

In Postman, show the JSON response for error for 400 when missing body on a POST request.

In Postman, show the JSON response for error for 404 when providing an unknown user ID to a UPDATE request.

Screenshot 2024-04-18 at 11 36 20 PM

These images shows the URL endpoints for performing GET, POST, and UPDATE requests, along with the required parameters/body content needed for each request. It helps users understand how to structure their requests correctly to interact with the API. These images display the JSON response data returned by the API when the request is successful (status code 200) for GET, POST, and UPDATE methods. It provides insight into the format and content of the response that users can expect when their requests are processed successfully. This is a 404 error that is shown in postman. This is because there is already a user in the database with the same uid as the admin user that I am attempting to post.

Frontend

Blog JavaScript API fetch code and formatting code to display JSON.

Screenshot 2024-04-18 at 11 40 28 PM

In Chrome inspect, show response of JSON objects from fetch of GET, POST, and UPDATE methods.

Screenshot 2024-04-19 at 2 01 10 PM

In the Chrome browser, show a demo (GET) of obtaining an Array of JSON objects that are formatted into the browser’s screen.

Screenshot 2024-04-19 at 2 02 53 PM

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.

Screenshot 2024-04-19 at 2 05 27 PM

This block of code fetches the url from the const and then verify the fetched url.

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.

Screenshot 2024-04-19 at 2 06 48 PM

This image shows how when I enter information of an account that does not exist, the login system will not properly authenticate them and allow them to access the rest of the website

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.

Screenshot 2024-04-19 at 2 09 12 PM