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

Create (post)

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.

Create (get)

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!

Reflection:

Though challenging, I do realize that backend coding is arguably one of the most crucial parts of building a website and my experience with backend coding and the skills I am just starting to learn will get better and more applicable as I continue to code in the future.