COM6034 Website Engineering
Assignment 1: Programming with jQuery, Ajax and the Laravel Framework
Version 1.0, updated May 15, 2023
Assignment objectives
Restructure the lv-bookstore application (provided in Lab 3A) based on the HTML5
standard. Enhance the application by using CSS3, jQuery and AJAX. Implement an
AJAX book search function with results displayed in a locally-sortable HTML table.
Enable user authentication and implement a BookRequest module for
authenticated users to request books. Data validation must be performed during the
form submission at the server side.
Due date
July 12, 2023 (Wednesday), 23:59
Standards/Technologies involved
HTML5, CSS, jQuery, AJAX, PHP, Laravel Framework
Specifications
Part A: the following tasks (1-8) are related to Labs 1, 2 and 3A only.
1. Before you begin, download the lv-bookstore application (Lab 3A model answer)
and use it as a starting point of your application. Please unzip the file and rename
the folder from lv-bookstore3A to lv-bookstore. In the resources/views/books
folder, replace index.blade.php with the content of index2.blade.php, and replace
show.blade.php with the content of show3.blade.php.
2. Apply the CSS3 template provided in Lab 1B to the lv-bookstore application.
Restructure the HTML to make full use of the HTML5 semantic elements (header,
nav, section, article, aside and footer). You may need to modify layout.blade.php
and other view scripts.
3. Fine tune the CSS3 with anything you like and make it visually different from the
original template; specifically, please change the color, font size, fonts, and
shadow.
4. Include a “Search Box” for books as an aside section (you may place it either on
the right side or on the left side) in index.blade.php. Implement the book search
function: instead of showing the search results on another page, use the jQuery
ajax function to load the results and display it in the main article section of the
index page. You may need to implement a search method in the application
controller to handle search requests (see Resource 1).
Page 2 of 4
5. The search results should be shown in an HTML with the following
columns: title, author, publisher, price and book cover image.
6. Make the search results table locally-sortable at the client side, which is similar to
the home exercise of Lab 2. (see Resource 6).
7. When a user clicks on a book cover image, there should be a pop up window
showing a larger image. There should also be a link or button shown in that
window for closing the window. Use jQuery statements.
8. The table rows should be in zebra striping colors (3 colors to be used). (see
Resource 7).
Part B: part of the following tasks (9-13) is related to Lab 3B. You may wait until
Lab 3B before doing these.
9. Implement a BookRequest module for users to request a book and specify a
pickup date. Create a BookRequestController for this function (see Resource 2).
10. Create a BookRequest model, with migration. Customize the generated
migration and use it to create the database table. Information required for the
BookRequest model is: aliasname, mobile, email, book_name, pickup_date. Use
appropriate data types.
11. Design a Book Request form (see Resource 2). Perform form validations in the
Store action of BookRequestController before saving the data into the database
(see Resource 3). The validation rules are as below:
a. aliasname: required and at least 8 alphanumeric characters
b. mobile: required and equal to 8 numbers
c. email: required and must be a valid email pattern
d. book_name: required and at least 10 alphanumeric characters
e. pickup_date: required and must be a date format
12. Use jQuery UI DatePicker plugin for the pickup_date field of Book Request
form. (see Resource 4)
13. Enable user authentication (see Resource 5) for this application. Only
authenticated users can access the BookRequest module and submit a book
request to the server. Guests attempting to load the Book Request form should be
redirected to the user login page. For simplicity, you do not need to establish a
relationship between the users table and the book request table.
*Make sure that your HTML markup conforms to the HTML5 standard.
Page 3 of 4
Resources
Deliverables
The final lv-bookstore.zip file with all html, php, css, js and media files you have
used.
JPG files of screenshots. Sometimes, there are misalignments on the machine we
use for grading due to different screen resolutions.