Assignment 4 - List Records Part 2¶

For this lab we are going to:

Create a new index.html page that links to everything.
Create a page we’ll use to create, read, update, and delete records.
Write JavaScript to call our JSON servlet from the prior lab
Insert those records into the table

Create a Landing Page¶

Ok, this is probably past due, but let’s make a decent landing page. Delete the index.jsp file that comes with your default servlet. Create a new index.html.

Inside the page, use this simple Bootstrap index page. (We covered Bootstrap last semester.)

Anyway, make this your index.html page. Adjust the links in the page as needed so they work with your project if needed. And replace “Jane Doe” with your name. If you want, swap out the theme to something you like.

New index.html page¶

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous">

  <!-- Pick a theme!
       https://www.bootstrapcdn.com/bootswatch/
       -->
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css">

  <title>Index Page</title>
</head>

<body>

  <!-- Navigation Bar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Simpson College</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript_assignment.html">Javascript Assignment</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="test_javascript.html">Test Javascript</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="api/name_list_get">Name List JSON</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="name_list.html">Name List</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <h1>Jane Doe's Index Page for CIS 320 Work</h1>
    <p>Hi</p>
  </div>

  <!-- Load JavaScript -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
          integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
          crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
</body>
</html>

Create the CRUD Page¶

Now we need a page with a table on it. Create a new page called name_list.html. This page has the table to list our records, and a form that’s initially hidden. Eventually, we need that form so we can enter and edit our data. While won’t use the form in this assignment, but we will need it for a later assignment.

New name_list.html page for our CRUD app¶

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous">

  <!-- Pick a theme!
       https://www.bootstrapcdn.com/bootswatch/
       -->
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css">

  <title>Name List Page</title>
</head>

<body>

  <!-- Navigation Bar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Simpson College</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript_assignment.html">Javascript Assignment</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="test_javascript.html">Test Javascript</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="api/name_list_get">Name List JSON</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="name_list.html">Name List
              <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Our main page -->
  <div class="container">

    <!-- Table title -->
    <h1>Name List</h1>

    <!-- Button to add a new data item -->
    <button type="button" id="addItem" class="btn btn-primary">Add new item</button>

    <!-- Table to hold our data -->
    <table id="datatable" class="table table-hover">
      <!-- Header Lines-->
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <!-- Data -->
      <tbody>
        <tr>
          <td>No data</td>
        </tr>
      </tbody>
    </table>
  </div>

<!-- This is a hidden "pop up" window that we'll use to enter new data -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- Window Title -->
                <h4 class="modal-title">Update Name List</h4>
                <!-- Close button -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Form -->
                <form id="my-form" name="my-form">
                    <div class="form-group">
                        <label for="first">First Name:</label>
                        <input type="hidden" id="id" name="id" class="form-control"><br>
                        <input type="text" id="first" name="first" class="form-control"
                               placeholder="First name"><br>
                        <input type="email" id="email" name="email" class="form-control"
                               placeholder="Email address"><br>
                    </div>
                </form>
            </div>
            <!-- Footer where we put our save/close buttons -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id="saveChanges" type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

  <!-- Load JavaScript -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
          integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
          crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
</body>
</html>

There’s nothing new or special about these pages above, they plain HTML/CSS. Except, note that the second page loads a file called js/name_list.js. This is our file with our program we are about to write.

Create the JavaScript Page¶

Let’s keep our JavaScript separate from our HTML and Servlet code. Create a js directory under the web folder in your project.

To keep things simple, let’s just test to make sure our new js file is loading and works. Put this in your name_list.js file.

JavaScript js/name_list.js file¶

console.log("Hi, this is a test.");

Deploy locally and navigate to the name_list.html page. Make sure you can see the test message in the console. If you are getting a 404 error while loading the name list page, you might not have linked up to the JavaScript file quite right. Also, remember that capitalization matters when you deploy it, but not while on your Windows machine.

When you get it working, you’ll want to expand the JavaScript to put everything in a function. Like:

// Main Javascript File

function updateTable() {
    // Here's where your code is going to go.
    console.log("updateTable called");
}

// Call your code.
updateTable();

Call JSON Servlet¶

Now, go back to Making JSON Calls Over AJAX and adapt that code so you call your name_list_get and output the names to the console.

Add Records to Table¶

When you get that working, you need to write jQuery JavaScript that will add those records to your table.

You can select a table called myTable (yours has a different id, look it up) using jQuery with:

$('#myTable')

We want to select the last row in that table. Right now it says ‘No data’. We want to get rid of that, and and our data. You can select the table row with the tr selector, and the last row with tr:last.

$('#myTable tbody:last')

You can add a row to the end with:

$('#myTable tbody:last').after('<tr><td>Hi</td><td>there</td></tr>');

Make sure your table lists out the following:

id
First name
Last name
E-mail address
Phone number
Birthday

Clear Record Line¶

After adding new records to the table, you likely still have the first record that says “No data”. We need to get rid of that.

Remember, you can select the last row of a table with:

$('#myTable tbody:last')

How can you select the first row?

Once you figure that out, you can remove an item with the .remove() method.

Turn it in¶

Turn in:

GitHub URL to the .js file
Link to Amazon server with working list of records