Make Single Page Web Application using JavaScript and AJAX - Practice Task

Above is User Interface of how your application shall look. Make a web page with appropriate CSS (using Bootstrap) and required JavaScript. Records added using form would be inserted into table at left, at end of the table. Action column contains Update and Remove links. "Update" should load the selected row in form at right side so that record could be updated in left table. When user update the values and press Update button, it shall update the corresponding row in the table. Initially, when user first load the page, the table should be empty and "Update" button should be disabled. All fields shall be empty. When user click the "Update" link of a record in table, the "Add" button shall be disabled. "Reset" button should reinitialize the form at the same state when the page was loaded so that new record can be added.

At top of above created page, add a checkbox labeled "Sync with Database", when checkbox is selected, operations performed (i.e. add, edit and remove) should also be replicated in database using AJAX (make required table and database). You are supposed to make a very basic single page application. Keep your database and html table in sync. When page is loaded initially, the table should contain alll records stored in database.

Bonus Marks

If you also add another attribute i.e user picture and remove, update, delete it like other attributes using AJAX and table on left.

Feel free to use Jquery or use normal HTML Objects to perform the task.


Popular posts from this blog

Task 12 - Create Java Program with MySQL Database Connectivity

Java Interfaces and Exception Handling - Practice Problem with Solution

Task 16 - Javafx Program to Create, Retrieve, Update and Delete records with Database