Technical Achievements
Personally, I progressed more in my frontend coding skills with learning how to debug, add style, and make functions, but I also learned and struggled a lot about backend coding and how classes/objects are used to store things in a database as well as things like methods and innerHTML
def post(self):
''' Read data for json body '''
body = request.get_json()
''' Avoid garbage in, error checking '''
# validate comment (makes sure it is more than two characters)
comment = body.get('comment')
if comment is None or len(comment) < 2:
return {'message': f'Comment is missing, or is less than 2 characters'}, 400
# validate symptom (makes sure it is more than two characters)
symptom = body.get('symptom')
if symptom is None or len(symptom) < 2:
return {'message': f'Symptom is missing, or is less than 2 characters'}, 400
''' #1: Key code block, setup USER OBJECT '''
uo = Symptom(comment=comment,
symptom=symptom)
''' #2: Key Code block to add user to database '''
# create comment in database
user = uo.create()
# success returns json of comment
if user:
return jsonify(user.read())
# failure returns error
return {'message': f'Processed {comment}, either a format error or {symptom} is duplicate'}, 400
I used selection to test the conditions of the comment and symptom(inputs) to make sure there is no garbage going in like repetitions and comments or symptoms that are less than to characters. I used the things we learned from class like if then statements, len(), return, condition. The second chunk of code is adding the comment to the database which can then be accessed from frontend.
// URL for Create API
// Fetch API call to the database to create a new comment
fetch(create_fetch, requestOptions)
.then(response => {
// trap error response from Web API
if (response.status !== 200) {
const errorMsg = 'Database create error: ' + response.status;
console.log(errorMsg);
const tr = document.createElement("tr");
const td = document.createElement("td");
td.innerHTML = errorMsg;
tr.appendChild(td);
resultContainer.appendChild(tr);
return;
}
// response contains valid result
response.json().then(data => {
console.log(data);
//add a table row for the new/created userid
//add_row(data);
})
})
In frontend, I fetched the API from the backend and added the data in the database to the table in the frontend as rows.
class _Read(Resource):
def get(self):
users = Symptom.query.all() # read/extract all comments from database
json_ready = [user.read() for user in users] # prepare output in json
return jsonify(json_ready) # jsonify creates Flask response object, more specific to APIs than json.dumps
This backend code gets the data from the database through "query" and outputs it in json through "jsonify"
// Display User Table, data is fetched from Backend Database
function read_users() {
// prepare fetch options
const read_options = {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'default', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'omit', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
}
}
Now in fronted I use the get method to fetch the data. Now frontend and backend are connected through POST and GET!