Newer
Older
labs / tiddlers / content / labs / lab08 / _Labs_08_Updating Students - Storing the Selected Student.md

Let's make the update button work. Previously we were POSTing the student ID to a servlet that would find the student and put it in the session. We don't need to find the student since we already have it, so we just need to store it in the session storage. The session storage is the CSR equivalent of the SSR session --- the data is stored inside the web browser.

  1. In the controller, find the closing curly brace for the getStudents method and add a comma after it. We are about to add a new method and methods need to be separated by commas.

  2. Add the following to the methods block just below the getStudents method:

    update(student) {
        alert(student.name);
    }
  3. Save and reload. The update button should now display the student's name.

  4. Create a new JavaScript file named session-store. It should contain the following:

     export const sessionStore = Vuex.createStore({
    
         state () {
             selectedStudent: null;
         },
    
         mutations: {
    
             selectStudent(state, student) {
                 state.selectedStudent = student;
             }
    
         },
    
         plugins: [window.createPersistedState({storage: window.sessionStorage})]
    
     });

    This code is using the Vuex state management module. The state block contains fields that we want to store and the mutations block contains methods that can be used to manipulate the state.

  5. Add the following to the view-students controller. It should go just under the code that imports the navigation menu:

    import { sessionStore } from './session-store.js';
    app.use(sessionStore);
  6. Modify the update function so that it stores the student:

     sessionStore.commit('selectStudent', student);
     window.location='view-student-details.html';

    The sessionStore.commit call is calling the selectStudent mutation passing the student. The window.location is the JavaScript equivalent of sendRedirect --- it it telling the browser to load the view-student-details.html page.

  7. Rename the file extension of the view-student-details page to html.

  8. Save and reload. The update button should display the details page when clicked. Again, it will look like crap, but we will fix that soon.

  9. In the browser dev tools, find the Application tab. In that tab you can view the contents of the session storage. You should be able to see the selected student in the session storage.