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: About us This page should be divided into three sections: The company: general introduction about the company, when it was established, history, awards, and management hierarchy. The city: general information about the city in which the company is located, such as population, location, weather, famous places, famous products and famous people. You can add a reference to other web pages in the net that might have more information about the city. Main business activities: a list of the main business activities done by the company. Sections heading are level-1 heading having a border and different background. A contact us page This page should provide information how the customer can contact you. You should provide the correspondence address post address, telephone number, fax number and a contact form which contains the following details: Sender Name Sender E-mail Sender Location Type of contact (product request, complain...) Message title Message Body And send and reset buttons. per page. A bar like below should be displayed. It could be rearrange if the user change the number of records in each page. Consider that you need to use cookies to remember user preferences about the no of record per page. -123 ----10-> The place order specification: 1. The user should be logged on in order to place an order, therefore, if the user is not logging to the system. The log in form should be displayed first. After a successful log in the item can be added to the order. After a useful login the system should return the user to where s/he left, ie s/he should not start over again. 2. The order should be display the items in a table in the following order.Item id, title, price, quantity, remove link, which remove the item, form the list and recalculate the amount, then list should be re- display on the same window. Note: you can make the quantity ZERO for the item, but you should leave it on the basket. 3. The form should have recalculate link which update the ordder. 4. Check out link, the server sends the checkout form. The check out form should display the following details, customer details, shipping address, credit card details and the item list and total the amount 5. The check out form is submitted to the server when the "confirm" link is clicked. The server stores the order on the database. Then a return message is sent to the user thanking him/here for purchasing, and the order id is sent for following up. The same message is sent by e-mail. The order id should be hyperlinked, by clicking on it the order details are displayed on a new window. 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: About us This page should be divided into three sections: The company: general introduction about the company, when it was established, history, awards, and management hierarchy. The city: general information about the city in which the company is located, such as population, location, weather, famous places, famous products and famous people. You can add a reference to other web pages in the net that might have more information about the city. Main business activities: a list of the main business activities done by the company. Sections heading are level-1 heading having a border and different background. A contact us page This page should provide information how the customer can contact you. You should provide the correspondence address post address, telephone number, fax number and a contact form which contains the following details: Sender Name Sender E-mail Sender Location Type of contact (product request, complain...) Message title Message Body And send and reset buttons. per page. A bar like below should be displayed. It could be rearrange if the user change the number of records in each page. Consider that you need to use cookies to remember user preferences about the no of record per page. -123 ----10-> The place order specification: 1. The user should be logged on in order to place an order, therefore, if the user is not logging to the system. The log in form should be displayed first. After a successful log in the item can be added to the order. After a useful login the system should return the user to where s/he left, ie s/he should not start over again. 2. The order should be display the items in a table in the following order.Item id, title, price, quantity, remove link, which remove the item, form the list and recalculate the amount, then list should be re- display on the same window. Note: you can make the quantity ZERO for the item, but you should leave it on the basket. 3. The form should have recalculate link which update the ordder. 4. Check out link, the server sends the checkout form. The check out form should display the following details, customer details, shipping address, credit card details and the item list and total the amount 5. The check out form is submitted to the server when the "confirm" link is clicked. The server stores the order on the database. Then a return message is sent to the user thanking him/here for purchasing, and the order id is sent for following up. The same message is sent by e-mail. The order id should be hyperlinked, by clicking on it the order details are displayed on a new window. 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