Palestinian Best Food Store (PBFS), is an online food store that sales authenticated Palestinian Food, such as Zater, Olive Oil, Sage, ets. Also sales pre-packaged Palestinian meals such as Musakhan, Maqluba, etcs, these meals are delivered to the customers' homes. So, you have been approached by Abu-Omer Al-Masri, the storeowner to develop a web site for his store. The web site should have the functionalities: Search through the stores' inventory of products Place an order for products. Receive confirmation that an order has been placed. allow the customer to write product review and ranking it. Allow the store manager to manage inventory, by adding products, update products details, etc. Contact us In this task you implement the following functionalities:- 1) add new product 2) search a product 3) customer registration *Note: the HTML pages (including forms) should be dynamically generated using PHP scripts. Add Product Store Manager will need to enter a product details. These are the minimum information that each product should have. Product Name, Product Description, Price (numeric data only), type (meals, preserved) use combo box to select product type (food type list should be pre- defined). Quantity which should be numeric. Each product should have the following: Name Brief Description Type Price Size and (measurement unit kg, liter, which should be pre-defined list, use combo box) Remarks Product ID, which is given by the system, should be a unique number generated by the system (primary key in the database). At least three pictures for marketing you might need to add link to allow the user to upload files. I might suggest that you have to upload at least three pictures for each product. You can save the file name in the database. The filename should be like that the itemlDimgSequenceNo, for instance if you have an item its id is 12345 and then the first image file will be item12345img1.gif. The file itself could be saved at a folder named as itemsImages Search Functionality The search form should allow the user (site visitor) to search in the store site. The search can be for a product based on their names, or price. If the visitor choose to search based on a price range, s/he should able to entre a price range, the site should display a form with two fields to enter the price range. When the user submits the form for search the site should validate that both price range fields are filled. The result List Specification: a) The returned list should be displayed in a table the first column is a checked box could be used by the user for short list. b) The second column in the table has a Product ID, which should be hyperlinked when clicked a detail page about the product will be displayed, see below for the Product Details Page specification. c) The Third column should be price and fourth is the type. The fifth column should display the product quantity available. CSS layout Requirements All your web pages and CSS code must validate correctly and all your formatting should be done using CSS, either inline or as a separate file. You will lose marks for putting (too much) formatting into your HTML. In particular, you should avoid using anything other than the class, id, name, value, and href attributes Web page using CSS to organize your page and linked documents to display the following information: read the last chapter 4 from the text book, and CSS Styles for multi-column Layout, example. 1. The main page should contain 3 sections called "head", "nav" and "disp". The header section should extend horizontally across the top of the entire page. The navigation section and the display section should run vertically below the header section. The navigation section should be on the left side and be 15% of the width of the screen. The display section should consume the remainder of the screen. 2. The header section should contain the e-store name in a large font, the store logo and the address 3. The navigation section should display links to the following pages. When the links are activated, the selected page should become visible in the display section. The header and navigation sections should not change. The navigation section should display links to the following pages. When the links are activated, the selected page should become visible in the display section. The header and navigation sections should not change. The links in the navigation section should have a look a feel like button, read the given example called "running example 1-6" Customer: when clicked should display the customer information division underneath the customer hyperlink and intended 15px. The division should have the links to the php scripts, some of which you have done in the first assignment: login, forget password (see below for details), and customer registration (as in task1). Click any of those links the result should be displayed on the disp division Product: when clicked should display a product division underneath the hyperlink and intended 15px. The product division should have links to the following php scripts: search, meal of the day, add, update note add and update products only available for manager). Click any of those links the result should be displayed on the disp division. About us Page (See About Us page below), Click any of those links the result should displayed on the disp division. Contact us Page (see contact us Page below). Click any of those links the result should displayed on the disp division. 4. The display section should be used to display the results of the links chosen from the navigation section. Upon initial load, this section should be loaded with promotion materials such as new arrivals products, offer of the day. CSS formatting Requirements: The following formatting conditions must be met: Common formatting . All the HTML files should depict a consistent presentation format The following conditions apply to all pages. The text used in headers should be within the same general font family (.e. Serifor Sans-Serif). Header text should use a consistent color scheme. The text used in paragraphs and in other non-heading areas should use a font family that is different than that used by the header text. . Do not use any of the , or elements for inline formatting use CSS rules, instead. All fonts should use relative size units. Borders, margins and padding may use either relative or fixed size units as appropriate. . All input text should change background on focus All input labels should be surrounded by a border in a different color than text label color. All mandatory inputs should be clearly marked. . The table header should have a different background and text color than the table data. Headers data should be centralized. Table result should have a border and consume 100% width of the containing element. The product reference (that appear in search table) should given a different style than the other links within the document The add to order link should be displayed in two places: in the 6th column in the search table and at upper right corner of "head navigation section". You should use the same style for both palaces, the style associated with the add to order link must use large margins and/or padding to simulate the look and feel of a button. Click on the link should add the item to the order as explained below, the result should displayed on the disp division The table rows should have a different background for even rows than odds rows Links outside your website should have a different color schema (color for visited, non visited, and hovering) than those within your website. The difference should be clear enough to be disguised. Also, they should be different on text decoration. . The list used in the business activities section should be displayed without any kind of bullet symbol. Use a representative image. . The hyperlinks in city section should be displayed in a font size that is 125% of normal, italics, with no underline, and should not change its look after being visited. When hovering over the linkit should remain the same color and font, but additionally it should show as underlined. Picture of Fames/interested places: picture and the title and should description should appear in one box. The picture should be clickable where more information can be collected. Clickable image should display a border when hovering o Lists: unordered list select an image to use it. When unordered list appears appeared within another unordered list use a different image. Ordered list use Arabic digits for a top level, and alphabetical for the nested level. Header section o Company name should be displayed in a reverse color scheme from the other headers in the other web pages (eg white on a dark background) You should provide bread crumbs underneath the header section, for instance Product > Search This bread crumbs indicate the path how can the user reach to the product search Navigation section The links in the navigation page should use large margins and/or padding to simulate the look and feel of navigation buttons. o There should be no underline on the link text. . The link text colors should remain the same before and after visiting the link o The colors of the link should reverse when the cursor hovers over the link text. Palestinian Best Food Store (PBFS), is an online food store that sales authenticated Palestinian Food, such as Zater, Olive Oil, Sage, ets. Also sales pre-packaged Palestinian meals such as Musakhan, Maqluba, etcs, these meals are delivered to the customers' homes. So, you have been approached by Abu-Omer Al-Masri, the storeowner to develop a web site for his store. The web site should have the functionalities: Search through the stores' inventory of products Place an order for products. Receive confirmation that an order has been placed. allow the customer to write product review and ranking it. Allow the store manager to manage inventory, by adding products, update products details, etc. Contact us In this task you implement the following functionalities:- 1) add new product 2) search a product 3) customer registration *Note: the HTML pages (including forms) should be dynamically generated using PHP scripts. Add Product Store Manager will need to enter a product details. These are the minimum information that each product should have. Product Name, Product Description, Price (numeric data only), type (meals, preserved) use combo box to select product type (food type list should be pre- defined). Quantity which should be numeric. Each product should have the following: Name Brief Description Type Price Size and (measurement unit kg, liter, which should be pre-defined list, use combo box) Remarks Product ID, which is given by the system, should be a unique number generated by the system (primary key in the database). At least three pictures for marketing you might need to add link to allow the user to upload files. I might suggest that you have to upload at least three pictures for each product. You can save the file name in the database. The filename should be like that the itemlDimgSequenceNo, for instance if you have an item its id is 12345 and then the first image file will be item12345img1.gif. The file itself could be saved at a folder named as itemsImages Search Functionality The search form should allow the user (site visitor) to search in the store site. The search can be for a product based on their names, or price. If the visitor choose to search based on a price range, s/he should able to entre a price range, the site should display a form with two fields to enter the price range. When the user submits the form for search the site should validate that both price range fields are filled. The result List Specification: a) The returned list should be displayed in a table the first column is a checked box could be used by the user for short list. b) The second column in the table has a Product ID, which should be hyperlinked when clicked a detail page about the product will be displayed, see below for the Product Details Page specification. c) The Third column should be price and fourth is the type. The fifth column should display the product quantity available. CSS layout Requirements All your web pages and CSS code must validate correctly and all your formatting should be done using CSS, either inline or as a separate file. You will lose marks for putting (too much) formatting into your HTML. In particular, you should avoid using anything other than the class, id, name, value, and href attributes Web page using CSS to organize your page and linked documents to display the following information: read the last chapter 4 from the text book, and CSS Styles for multi-column Layout, example. 1. The main page should contain 3 sections called "head", "nav" and "disp". The header section should extend horizontally across the top of the entire page. The navigation section and the display section should run vertically below the header section. The navigation section should be on the left side and be 15% of the width of the screen. The display section should consume the remainder of the screen. 2. The header section should contain the e-store name in a large font, the store logo and the address 3. The navigation section should display links to the following pages. When the links are activated, the selected page should become visible in the display section. The header and navigation sections should not change. The navigation section should display links to the following pages. When the links are activated, the selected page should become visible in the display section. The header and navigation sections should not change. The links in the navigation section should have a look a feel like button, read the given example called "running example 1-6" Customer: when clicked should display the customer information division underneath the customer hyperlink and intended 15px. The division should have the links to the php scripts, some of which you have done in the first assignment: login, forget password (see below for details), and customer registration (as in task1). Click any of those links the result should be displayed on the disp division Product: when clicked should display a product division underneath the hyperlink and intended 15px. The product division should have links to the following php scripts: search, meal of the day, add, update note add and update products only available for manager). Click any of those links the result should be displayed on the disp division. About us Page (See About Us page below), Click any of those links the result should displayed on the disp division. Contact us Page (see contact us Page below). Click any of those links the result should displayed on the disp division. 4. The display section should be used to display the results of the links chosen from the navigation section. Upon initial load, this section should be loaded with promotion materials such as new arrivals products, offer of the day. CSS formatting Requirements: The following formatting conditions must be met: Common formatting . All the HTML files should depict a consistent presentation format The following conditions apply to all pages. The text used in headers should be within the same general font family (.e. Serifor Sans-Serif). Header text should use a consistent color scheme. The text used in paragraphs and in other non-heading areas should use a font family that is different than that used by the header text. . Do not use any of the , or elements for inline formatting use CSS rules, instead. All fonts should use relative size units. Borders, margins and padding may use either relative or fixed size units as appropriate. . All input text should change background on focus All input labels should be surrounded by a border in a different color than text label color. All mandatory inputs should be clearly marked. . The table header should have a different background and text color than the table data. Headers data should be centralized. Table result should have a border and consume 100% width of the containing element. The product reference (that appear in search table) should given a different style than the other links within the document The add to order link should be displayed in two places: in the 6th column in the search table and at upper right corner of "head navigation section". You should use the same style for both palaces, the style associated with the add to order link must use large margins and/or padding to simulate the look and feel of a button. Click on the link should add the item to the order as explained below, the result should displayed on the disp division The table rows should have a different background for even rows than odds rows Links outside your website should have a different color schema (color for visited, non visited, and hovering) than those within your website. The difference should be clear enough to be disguised. Also, they should be different on text decoration. . The list used in the business activities section should be displayed without any kind of bullet symbol. Use a representative image. . The hyperlinks in city section should be displayed in a font size that is 125% of normal, italics, with no underline, and should not change its look after being visited. When hovering over the linkit should remain the same color and font, but additionally it should show as underlined. Picture of Fames/interested places: picture and the title and should description should appear in one box. The picture should be clickable where more information can be collected. Clickable image should display a border when hovering o Lists: unordered list select an image to use it. When unordered list appears appeared within another unordered list use a different image. Ordered list use Arabic digits for a top level, and alphabetical for the nested level. Header section o Company name should be displayed in a reverse color scheme from the other headers in the other web pages (eg white on a dark background) You should provide bread crumbs underneath the header section, for instance Product > Search This bread crumbs indicate the path how can the user reach to the product search Navigation section The links in the navigation page should use large margins and/or padding to simulate the look and feel of navigation buttons. o There should be no underline on the link text. . The link text colors should remain the same before and after visiting the link o The colors of the link should reverse when the cursor hovers over the link text