Assignment 1: Programming with jQuery, Ajax and the Laravel Framework

Version 1.0, updated January 9, 2024

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

March 2, 2024 (Saturday), 23:59 (extended)

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).

5.  The search results should be shown in an HTML <table> 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  BookInquiry  module  for  users  to  request  a  book  and  specify  a pickup date.  Create a BookInquiryController for this function (see Resource 2).

10.Create a BookInquiry model, with migration. Customize the generated migration and use it to create the database table. Information required for the BookInquiry model is: username, phone, email, item_name, pickup_date. Use appropriate data types.

11.Design a Book  Inquiry form (see Resource 2). Perform form validations in the Store action of BookInquiryController before saving the data into the database (see Resource 3). The validation rules are as below:

a.  username: required and at least 6 alphanumeric characters

b.  phone: required and equal to 8 numbers

c.  email: required and must be a valid email pattern

d.  item_name: required and at least 10 characters

e.  pickup_date: required and must be a date format

12. Use jQuery UI DatePicker plugin for the pickup_date field of Book Inquiry form. (see Resource 4)

13. Enable user authentication (see Resource 5) for this application. Only authenticated users can access  the  BookInquiry  module  and  submit a book request to the server. Guests attempting to load the Book Inquiry 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.

Resources

1)  Create Laravel Search Box With Live Results Using AJAX jQuery

https://www.cloudways.com/blog/live-search-laravel-ajax/

2)  Laravel 10 CRUD Application Example Tutorial

https://www.itsolutionstuff.com/post/laravel-10-crud-application-example-tutorialexample.html

3) Laravel Validation Docs

https://laravel.com/docs/10.x/validation

4) jQuery UI DatePicker

http://jqueryui.com/datepicker/

http://api.jqueryui.com/1.8/datepicker/

5) Authentication in Laravel Framework

https://laravel.com/docs/10.x/authentication

6) TableSorter Plugin

https://mottie.github.io/tablesorter/docs/

7) Zebra striping tables with css3

http://dev.opera.com/articles/view/zebra-striping-tables-with-css3/

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.