jquery-ajax-crud-extra.md

Library API/jQuery AJAX Challenge

An extension of the jquery-ajax-crud lesson using the Library API hosted at https://wdi-library-api.herokuapp.com.

Prerequisites

• html-css
• jquery-dom
• jquery-ajax-crud

Objectives

By the end of this, developers should be able to:

• C(reate) a resource,
• R(ead) a single resource,
• R(ead) all resources,
• U(pdate) a resource, and
• D(elete) a resource from the Library API.
• Display the results of CR(R)UD actions for the user.

Preparation

1. Fork and clone this repository.
2. Change into the new directory (cd).
3. Create and checkout a new branch, named response.
4. Follow the directions given in the Instructions section of this file.
5. When finished, push to your fork and submit a pull request.

You may wish to refer to FAQs related to forking, cloning, and pull requests.

Instructions

All resources in the Library API follow this pattern:

Verb	URI Pattern	Controller#Action
GET	/resource	resource#index
GET	/resource/:id	resource#show
POST	/resource	resource#create
PATCH	/resource/:id	resource#update
DELETE	/resource/:id	resource#destroy

For each of the following resource sections, take a look at the linked documentation and listed user stories. Then, in assets/scripts/ create a folder for each resource and the files events.js, api.js, and ui.js inside. Follow the steps in the Methodical Approach section to fullfill all user stories and represent the mockups in the browser.

Authors

Authors Documentation

User Stories:

• As a user, I want to be able to see all Authors
• As a user, I want to be able to see a single Author
• As a user, I want to be able to create a new Author
• As a user, I want to be able to update an existing Author's data
• As a user, I want to be able to delete an existing Author

Members

Members Documentation

User Stories:

• As a user, I want to be able to see all Members
• As a user, I want to be able to see a single Member
• As a user, I want to be able to create a new Member
• As a user, I want to be able to update an existing Member's data
• As a user, I want to be able to delete an existing Member

Librarians

Librarians Documentation

User Stories:

• As a user, I want to be able to see all Librarians
• As a user, I want to be able to see a single Librarian
• As a user, I want to be able to create a new Librarian
• As a user, I want to be able to update an existing Librarian's data
• As a user, I want to be able to delete an existing Librarian

Methodical Approach

1. Test API in browser (if possible)
2. Test API with curl script
3. Add feature to web application with AJAX
   1. Add a form to index.html.
   2. Add a input fields and submit input to the form.
   3. Add an event listener to the form in the document ready event in assets/scripts/app.js.
   4. Add a submit handler to pass as callback to event listener assets/scripts/<resource>/events.js.
   5. Add a API call in assets/scripts/<resource>/api.js.
   6. Add a success and failure handler in assets/scripts/<resource>/ui.js.

How to use getFormFields

To be able to fetch data for just one book, we'll need a way to tell the API which book we're looking for. One way to do this is to have the user input the ID of the book they're looking for. It turns out that needing to grab some user input and send it to the API is a very common problem in front-end web development.

To help solve that problem, we've included a function called getFormFields in the template that we use for our lessons, which is also the template you'll use for your projects. Let's take a look at how to use that function.

First, your <input>s will need to be wrapped in a <form>, like this:

<form id="my-form">
  <input name="book[id]" type="text">
  <input name="book[name]" type="text">
  <button type="submit">Get Book</button>
</form>

Then, in your Javascript, you'd do something like this:

const getFormFields = require('<path to lib>/get-form-fields.js')

$('#my-form').on('submit', function (event) {
  event.preventDefault()

  const form = event.target
  const data = getFormFields(form)
})

Then, the data variable would look like this:

{
  book: {
    id: "<whatever was entered in the ID input >",
    name: "<whatever was entered in the name input>"
  }
}

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.