API: Application Programming Interface

CRUD

  • Create, Read, Update, Delete
  • Each function corresponds to an API

Create:

  • Made in HTML5 to organize input
  • Example Code: (would need a Create API after the form/table is filled out)
<table>
    <tr>
        <th><label for="name">Name</label></th>
        <th><label for="email">Email</label></th>
        <th><label for="password">Password</label></th>
        <th><label for="phone">Phone</label></th>
    </tr>
    <tr>
        <td><input type="text" name="name" id="name" required></td>
        <td><input type="email" name="email" id="email" placeholder="abc@xyz.org" required></td>
        <td><input type="password" name="password" id="password" required></td>
        <td><input type="tel" name="phone_num" id="phone_num"
            pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
            placeholder="999-999-9999"></td>
        <td ><button onclick="create_User()">Create</button></td>
    </tr>
</table>

Read:

  • Appears with the page load often
  • Pulling data from the DOM, building a body, and sending a fetch
  • Need sample data and endpoint to send request (look for 200 OK for success)
  • Responses come from the database

Cookies:

  • Data is saved in the cookie which is called upon in that browser session

Update:

  • Uses a PUT request
  • Don’t always need full request (can have partial like uid and kasm_server_needed rather than all roles and pfp and stuff)

API Implement:

  • Load the existing data
  • Have a frontend implement that updates data
  • Send updated data to backend
  • Load updated data

Delete:

  • Full request: 204 NO CONTENT
  • Only admins should be able to do this so that the posts are not dangling

Backend APIs:

  • Plan the operations and APIs (all four CRUD functions)
  • Frontend expects certain data, so the frontend-backend contract for API must always be met

Ex. Line: user_obj = User(name=name, uid=uid)

  • Singular user object

Important Line: users = User.query.all()

  • Reads all the records in the database based on the User class, not necessarily a single object

user = User.query.filter_by(_uid=uid).first()

  • Filter all users to single out one record
  • Pipes that record into user object (IMPORTANT FOR PUT/Update CRUD)

For delete, to ensure only admin can delete, use @token_required("Admin")

Response Handling:

  • Uses const for Javascript to save data
  • If working on the frontend, can hardcode data to test while backend is still non-functional

DOM:

  • Document element ids, (document.createElement("td");)
    • TD: Data
    • TR: Rows
  • Buttons with classes and user IDs

Example with static, hardcoded data:


<table>
    <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Actions</th>
    </tr>
    </thead>
    <tbody id="table">
      <!-- javascript generated data -->
    </tbody>
  </table>
  
  
  <script>
  // Static json, this can be used to test data prior to API and Model being ready
  const json = '[{"_name": "Thomas Edison", "_uid": "toby"}, {"_name": "Nicholas Tesla", "_uid": "nick"}, {"_name": "John Mortensen", "_uid": "jm1021"}, {"_name": "Eli Whitney", "_uid": "eli"}, {"_name": "Hedy Lemarr", "_uid": "hedy"}]';
  
  // Convert JSON string to JSON object
  const data = JSON.parse(json);
  
  // prepare HTML result container for new output
  const table = document.getElementById("table");
  data.forEach(user => {
      // build a row for each user
      const tr = document.createElement("tr");
  
      // td's to build out each column of data
      const name = document.createElement("td");
      const id = document.createElement("td");
      const action = document.createElement("td");
             
      // add content from user data          
      name.innerHTML = user._name; 
      id.innerHTML = user._uid; 
  
      // add action for update button
      var updateBtn = document.createElement('input');
      updateBtn.type = "button";
      updateBtn.className = "button";
      updateBtn.value = "Update";
      updateBtn.style = "margin-right:16px";
      updateBtn.onclick = function () {
        alert("Update: " + user._uid);
      };
      action.appendChild(updateBtn);
  
      // add action for delete button
      var deleteBtn = document.createElement('input');
      deleteBtn.type = "button";
      deleteBtn.className = "button";
      deleteBtn.value = "Delete";
      deleteBtn.style = "margin-right:16px"
      deleteBtn.onclick = function () {
        alert("Delete: " + user._uid);
      };
      action.appendChild(deleteBtn);  
  
      // add data to row
      tr.appendChild(name);
      tr.appendChild(id);
      tr.appendChild(action);
  
      // add row to table
      table.appendChild(tr);
  });
  </script>
Name ID Actions