(2) (20%) Suppose you are implementing an XMall webpage, using index.html, script.js and loadShops.php. Index.html has...

Transcribed Image Text:

(2) (20%) Suppose you are implementing an XMall webpage, using index.html, script.js and loadShops.php. Index.html has been provided as follows: Index.html XMall Welcome to XMall! Fashion Sports Electronics Dining The behavior of the webpage is as follows. The very first time a client accesses the page, it shows the categories of shops in the mall (Fig. 3-1). Whenever the client clicks a category, the page displays shops belonging to the category in the "shopdiv" division (e.g., Fig. 3-2), without reloading the entire page. Meanwhile, the webpage always remembers the category that the client has clicked most recently, such that the next time the client loads index.html again using the same browser, the webpage automatically shows recommended shops in that category in the "shopdiv" division. For example, if the last category the client has clicked before reloading index.html is "Fashion", then the webpage shows up as in Fig. 3-3 when loaded. Welcome to XMall! Fashion Sports Electronics Dining Fig. 3-1 Welcome to XMall! Fashion Sports Electronics Dining Shops G2000: G2000 offers quality yet affordable professional business attire UNIQLO: Men, women and children clothing Gap: American-style casual clothing Fig. 3-2 Welcome to XMall! Fashion Sports Electronics Dining Hot Picks UNIQLO: Men, women and children clothing Gap: American-style casual clothing Fig. 3-3 Suppose a database "xmall" has been created on a MySQL database server sqldb.xmall.com, which can be accessed using login ID "admin" and password "supersecure". A table has been created in the database and a number of shop records have been inserted into the table using the follows SQL statements: CREATE TABLE shops ( shopID int (11) NOT NULL, shopName varchar (20) NOT NULL, category varchar (20) NOT NULL, description longtext NOT NULL, recommendedOrNot varchar (5) NOT NULL, PRIMARY KEY (shopID) insert into shops values (1, 'G2000', 'Fashion', 'G2000 offers quality yet affordable professional business attire', 'N'); insert into shops values (2, 'UNIQLO', 'Fashion', 'Men, women and children clothing', insert into shops values (3, 'Gap', 'Fashion', 'American-style casual clothing', 'Y'); insert into shops values (4, 'Fortress', 'Electronics', 'Hong Kong professional chain of electrical retail stores', 'Y'); insert into shops values (5, 'Broadway', 'Electronics', 'Your e-consultant', 'N'); Page 7 of 20 Implement script.js and loadShops.php, such that the above described functionalities of the webpage are achieved. Some further clarifications/requirements are as follows: (i) Your code should always remember the category which has just been clicked, using which you can retrieve recommended shops from the database for display in the "shopdiv" division when UID index.html is reloaded. You should think carefully whether this can be achieved using localStorage object or the cookie technology, and write the code accordingly. (ii) Display "Shops" and "Hot Picks" as elements, and the shop names and descriptions in elements. When a category is clicked, under the "Shops" heading, all shops in that category in the database table should be retrieved and displayed; when index.html is reloaded, under the "Hot Picks" heading, only recommended shops in the remembered category are retrieved and displayed (whose recommendedOrNot field value is 'Y' in the database table). In both cases, use the same loadShops.php for loading shop records from the database and sending them to the client. (iii) In script.js, use jQuery for AJAX requests, DOM manipulation, and event handling. Script.js (2) (20%) Suppose you are implementing an XMall webpage, using index.html, script.js and loadShops.php. Index.html has been provided as follows: Index.html XMall Welcome to XMall! Fashion Sports Electronics Dining The behavior of the webpage is as follows. The very first time a client accesses the page, it shows the categories of shops in the mall (Fig. 3-1). Whenever the client clicks a category, the page displays shops belonging to the category in the "shopdiv" division (e.g., Fig. 3-2), without reloading the entire page. Meanwhile, the webpage always remembers the category that the client has clicked most recently, such that the next time the client loads index.html again using the same browser, the webpage automatically shows recommended shops in that category in the "shopdiv" division. For example, if the last category the client has clicked before reloading index.html is "Fashion", then the webpage shows up as in Fig. 3-3 when loaded. Welcome to XMall! Fashion Sports Electronics Dining Fig. 3-1 Welcome to XMall! Fashion Sports Electronics Dining Shops G2000: G2000 offers quality yet affordable professional business attire UNIQLO: Men, women and children clothing Gap: American-style casual clothing Fig. 3-2 Welcome to XMall! Fashion Sports Electronics Dining Hot Picks UNIQLO: Men, women and children clothing Gap: American-style casual clothing Fig. 3-3 Suppose a database "xmall" has been created on a MySQL database server sqldb.xmall.com, which can be accessed using login ID "admin" and password "supersecure". A table has been created in the database and a number of shop records have been inserted into the table using the follows SQL statements: CREATE TABLE shops ( shopID int (11) NOT NULL, shopName varchar (20) NOT NULL, category varchar (20) NOT NULL, description longtext NOT NULL, recommendedOrNot varchar (5) NOT NULL, PRIMARY KEY (shopID) insert into shops values (1, 'G2000', 'Fashion', 'G2000 offers quality yet affordable professional business attire', 'N'); insert into shops values (2, 'UNIQLO', 'Fashion', 'Men, women and children clothing', insert into shops values (3, 'Gap', 'Fashion', 'American-style casual clothing', 'Y'); insert into shops values (4, 'Fortress', 'Electronics', 'Hong Kong professional chain of electrical retail stores', 'Y'); insert into shops values (5, 'Broadway', 'Electronics', 'Your e-consultant', 'N'); Page 7 of 20 Implement script.js and loadShops.php, such that the above described functionalities of the webpage are achieved. Some further clarifications/requirements are as follows: (i) Your code should always remember the category which has just been clicked, using which you can retrieve recommended shops from the database for display in the "shopdiv" division when UID index.html is reloaded. You should think carefully whether this can be achieved using localStorage object or the cookie technology, and write the code accordingly. (ii) Display "Shops" and "Hot Picks" as elements, and the shop names and descriptions in elements. When a category is clicked, under the "Shops" heading, all shops in that category in the database table should be retrieved and displayed; when index.html is reloaded, under the "Hot Picks" heading, only recommended shops in the remembered category are retrieved and displayed (whose recommendedOrNot field value is 'Y' in the database table). In both cases, use the same loadShops.php for loading shop records from the database and sending them to the client. (iii) In script.js, use jQuery for AJAX requests, DOM manipulation, and event handling. Script.js