ICOM6034 Website Engineering Assignment 1: Programming with jQuery, Ajax and the Laravel Framework
ICOM6034 Website Engineering
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.
-
Beforeyoubegin,downloadthelv-bookstoreapplication(Lab3Amodelanswer) and use it as a starting point of your application. 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.
-
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.
-
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.
-
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. You may need to implement a search method in the application controller to handle search requests (see Resource 1).
Page 1 of 4
-
The search results should be shown in an HTML <table> with the following columns: title, author, publisher, price and book cover image.
-
Makethesearchresultstablelocally-sortableattheclientside,whichissimilarto the home exercise of Lab 2. (see Resource 6).
-
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.
-
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:
-
username: required and at least 6 alphanumeric characters
-
phone: required and equal to 8 numbers
-
email: required and must be a valid email pattern
-
item_name:requiredandatleast10characters
-
pickup_date:requiredandmustbeadateformat
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.
Page 2 of 4
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.
