Estimated effort required: 12-18 hours
The Backwater Creek Community Library is computerising their card catalog system and needs your help.
You will design an efficient, easy-to-use web-based interface to support the following functions:
Copy the project2 folder from the class files.
Use the docker-compose command from lab 3 to bring up the MySQL database. The library.sql script in the db folder will be used by the Docker MySQL container to create and populate the tables needed for the application the first time you start the MySQL container. Use your MySQL Workbench to connect to the database and look at the data in the tables.
Open prototype/search.html using your browser and navigate the various screens to see what you are to build.
The webapp folder contains the skeleton of an Express application that you may wish to use as a starting point. Review the code. Before you attempt to run this application for the first time, you must install the node modules needed for the application:
docker-compose run app1 npm install
Copy the res folder from prototype to webapp/public. The webapp/public folder contains static resources (style sheets, images, etc.) for an Express application.
Complete the Patron Simple Search functionality, as follows:
The home page of the application should display the search page with no results.
When the user clicks Search, validate search criteria entered. It should contain only standard alphanumeric symbols (letters, digits, spaces) and/or apostrophes. Reject any other symbols with an error message on the search results page.
Search for all items whose Title contains the exact phrase entered by the user. For example, if the user enters ‘car repair’, you should find all items that have the text ‘car repair’ somewhere in the Title. The SQL LIKE operator should come in handy here. Do not search if the user enters no words at all in the search box; display nothing in that case.
Display a list of matching items in a compact but readable manner, sorted in ascending order by title. At the top of the list, display the total count of matching items. For each item, display only the title and author. Allow the user to select a record to go to the details.html screen, with complete details about the item (including its subject categories, as found in the BookSubjects table). Note that the Maintenance button on the details.html should not appear in this level.
If the number of matching items is greater than 10, allow the user to page forward and backward through the list of matching items, screen by screen (10 items per screen). Use a technique that will not tax server memory, even when large result sets are returned. Also, make sure that the user can use the browser’s back button to page backward through the results without messing up your paging system.
Provide a version of the search page optimized for mobile browsers, using the jQuery Mobile toolkit. In this version, when the user selects an item, you do not need to display subject categories. Note that the mobile and regular versions should share the as much JavaScript logic as possible (but do keep the views separate).
Notes:
Use Google’s paging technique – have a query parameter that specifies how far
down in the search results you are. For example, if you are showing 10 results
per page, the next link for page 2 might look like this:
/search?startIndex=20&title=gospel and the prev link for page 2 might look
like this: /search?startIndex=0&title=gospel
Use the MySQL LIMIT clause to retrieve the correct results for a page efficiently.
Design Requirements:
Create a Handlebars layout in your Express application containing the header and footer elements that are common to all of the pages.
Define a separate database model class for each table your application needs to access. See models/item.js for a starting example.
In addition to the above, complete the Maintain Items functionality as follows:
The user will begin by logging in via the login link. When the user has logged in, change the login link to read “logout” on all of the screens. Authenticate the login against data in the Users table.
Note that the provided table has passwords in plaintext. You should hash the passwords using a cryptographic hashing algorithm so they are not stored in plaintext.
The user will begin by searching for the item he wishes to edit, as if he were a patron. When he finds the desired item and selects it to see the details screen, the Maintenance button should appear which, when clicked, displays the maintain screen.
Note that the subjects need not be editable. When the user chooses to Save, the system should validate the user’s entries, then save the information. Validation requirements: Call#, Author, and Title must be non-empty.
When the user chooses to Save, check to see if the item record has been changed by another user since this user began editing, using the technique discussed in class. If so, the system should display a helpful message, and refresh the form with the latest information. Otherwise, the system should save the information, and display the details screen with the updated information.
No mobile screens are required for the maintenance functionality.
Design Requirements for Max 100 Level:
On successful login, store the logged in user in the session collection.
Write a middleware function to verify that any attempts to access maintain-related screens or processing are being performed by an authenticated user.
Use express-validator and handlebars-form-helpers to streamline your form processing.
See the course syllabus for grading criteria.
Deploy your application to your VPS. It should start when the server starts, as in exercise 2.
Clone your submission repository using the link at the top of this page. Copy the contents of your project2 folder into the top level of the repository.
Create a report following these instructions. Provide the URL of your deployed application on the cover page of your report. Provide screen shots in the Test Results section as indicated below.
Create a PDF of your report named report.pdf and upload to your submission repo.
For this level, take screen shots of the mobile version running on a device (tablet or phone).
Perform a simple search using the search word “man’s”. Take a screen shot (paste as Test 1).
Perform a simple search using the search word “law”. Page through the results to find the title “The College and the Student…”. Click on it for full details. Take a screen shot (paste as Test 2).
Perform a simple search using the search word “a*b$c”. Take a screen shot (paste as Test 3).
In addition to the 80 Level tests, in a normal browser, do the following:
Click login. Log in with invalid credentials. Take a screen shot (paste as Test 4).
Log in with valid credentials. Search for “bookworm”, and click on the link to modify it. Set all fields except the title to ‘X’ and save. Take a screen shot (paste as Test 5).
Log in with valid credentials. Then, open a separate browser window. Search for “bookworm”, and click on the link to modify it. You should now have two browser windows open, editing the same record. Have user #1 make a modification: set all fields except the title to ‘X’ and save. Now, in the browser window for User #2, set the title to ‘Y’ and save. Take a screen shot (paste as Test 6).