Database interactions and UI with AJAX and MySql

For this assignment, you need to make a database backed website that features Ajax interaction. At the end of this description, you will find code that will create a handler you can visit to set up your database table. It contains all the fields needed to make a simple workout tracker.

• name – the name of the exercise
• reps – the number of times the exercise was performed
• weight – the weight of the weights used
• date – the date the exercise was performed (in the format of Month-Day-Year, e.g., 05-25-2018)
• unit – indicating if the measurement is in lbs or kg

• You need to create a single page application with the following functionality:Visiting the page will show a table displaying all completed exercises. The header should list all the columns (id should not be displayed in the header or in the table itself. Use hidden inputs to keep track of the id).At the top of the page there should be a form that let you enter in all the data needed to make a new entry in the table with a button to submit it. Hitting that button should add the row to the table if it was successfully added to the database. If it was not successfully added (probably because name was left blank and it is required) it should not add it to the table.Each row should have two buttons. One to delete the row and one to edit the row. Hitting the delete button should immediately remove the row from the table and from the database.Hitting the edit button should make it possible to edit the data. For this function, it is OK to go to another page that will allow you to edit that specific exercise, save it and then take you back to the main page. The form to edit the exercise should be pre-populated with the existing data from that row (in other words if I go to the edit page, and then hit save, nothing should change because all the old values were in the edit form).All interactions, other than updating an exercise, should happen via Ajax. This means that at no time should the page refresh. Instead, Ajax calls should be used to GET or POST to the server and it should use the data the server provides to update the page. (Think back to the AJAX interactions assignment, where you updated your page’s DOM to show the response you received from OpenWeatherMap, for example) (Links to an external site.)Here is an example of what I mean:http://jsfiddle.net/GRgMb/ (Links to an external site.)If you hit delete on one of those rows it gets deleted without the page refreshing. Your page should do this and it should update the database at the same time to reflect the deleted data. It should essentially happen in reverse when you add a row. You hit add and the table is populated with a new row.In this course, we have covered GET and POST, but there are many other HTTP Verbs. For this assignment, you may also use DELETE and PUT (for deleting and updating respectively), but they are not required.For the “single page”, it means you should use one URL for both types of requests. In your server-side code, you will write two methods (unless you are also using DEL and PUT, then it is four methods):
• 1) app.get(‘/’,……….)
  2) app.post(‘/’,……….)These methods will make sure to call the get method when the client sends a GET request and call the post method when the client sends a POST request.app.get(‘/reset-table’,function(req,res,next){

    var context = {};
    [your connection pool].query("DROP TABLE IF EXISTS workouts", function(err){ //replace your connection pool with the your variable containing the connection pool
      var createString = "CREATE TABLE workouts("+
      "id INT PRIMARY KEY AUTO_INCREMENT,"+
      "name VARCHAR(255) NOT NULL,"+
      "reps INT,"+
      "weight INT,"+
      "date DATE,"+
      "lbs BOOLEAN)";
      [your connection pool].query(createString, function(err){
        context.results = "Table reset";
        res.render('home',context);
      })
    });
  });