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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | <!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">×</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.
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:
1 2 3 4 5 6 7 8 9 | // 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.