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: Product Details Page specification: a) An image for the product on the left and the full details to the right b) The product brief description should be displayed. Customer Registration: In order for a customer to place an order the customer should create an account. The customer registration is done according to the following steps. a) The customer registration form should have the following details. Customer info. ( all the information are required.) All the IDs are 10 digits. Name Address Date of Birth ID number E-mail address Telephone and Fax Number Credit card details: The customer should enter his/her Credit card details: number, expire date, name and bank issued it All the above filed should be filled once this step is being validated, the customer can move to the next step. b) The next step the customer must confirm his/her details, so the customer details are displayed to the customer, except the password, with two options confirm or update. If the user select update the new details will be sent to server the confirmation step is repeated. The confirm button will send the complete form to the server. Then the server, store the data to the database and replay to the customer with a confirmation message. The confirmation message should have the following information. The customer ID which is a 10 digit number, and a link to create e-account c) The customer can move to the next step, which is creating an e-account Your site should display an E-account form that allows the customer to enter a username which should be between 6-13 characters. Also the user should enter the password then confirms it. The valid password should be between 8-12 characters. Note, you can add more fields, but the above fields are mandatory and they should marked as so. Important notes: the style should be applied to the generated HTML pages by the php scripts you have done in the assignment one. User portal types You have two users: Customer can do the following functions Customer Registration Product Search Place an order. View an Order Add/remove an item to/from an order Employee: can do the following functions: Handle an Order, once the customer place the order, the order is stored on the database. The order have the following status: waiting for processing and shipped. The order initial status is waiting for processing. Then the employee is shipped the order and change the status. The shipping date should be registered. Login Use case Specification On your home page on the side navigation bar you should add the following links. Login for returning user, clicking the link open the login form. Register for new user, clicking on the link starts the user registration use case as described in user registration, above.. The user login to the system and the User menu are generated based on the user type, which could be a customer, an employee, also it should check if the customer account has been activated. Search Use Case Specification Add the following to the result List Specification: a. The returned list should be within a table the first column is a checked box could be used by the user for short list. b. A Form should be given to the user in which s/he can select how many record would like to display in each page default is 15 record 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: Product Details Page specification: a) An image for the product on the left and the full details to the right b) The product brief description should be displayed. Customer Registration: In order for a customer to place an order the customer should create an account. The customer registration is done according to the following steps. a) The customer registration form should have the following details. Customer info. ( all the information are required.) All the IDs are 10 digits. Name Address Date of Birth ID number E-mail address Telephone and Fax Number Credit card details: The customer should enter his/her Credit card details: number, expire date, name and bank issued it All the above filed should be filled once this step is being validated, the customer can move to the next step. b) The next step the customer must confirm his/her details, so the customer details are displayed to the customer, except the password, with two options confirm or update. If the user select update the new details will be sent to server the confirmation step is repeated. The confirm button will send the complete form to the server. Then the server, store the data to the database and replay to the customer with a confirmation message. The confirmation message should have the following information. The customer ID which is a 10 digit number, and a link to create e-account c) The customer can move to the next step, which is creating an e-account Your site should display an E-account form that allows the customer to enter a username which should be between 6-13 characters. Also the user should enter the password then confirms it. The valid password should be between 8-12 characters. Note, you can add more fields, but the above fields are mandatory and they should marked as so. Important notes: the style should be applied to the generated HTML pages by the php scripts you have done in the assignment one. User portal types You have two users: Customer can do the following functions Customer Registration Product Search Place an order. View an Order Add/remove an item to/from an order Employee: can do the following functions: Handle an Order, once the customer place the order, the order is stored on the database. The order have the following status: waiting for processing and shipped. The order initial status is waiting for processing. Then the employee is shipped the order and change the status. The shipping date should be registered. Login Use case Specification On your home page on the side navigation bar you should add the following links. Login for returning user, clicking the link open the login form. Register for new user, clicking on the link starts the user registration use case as described in user registration, above.. The user login to the system and the User menu are generated based on the user type, which could be a customer, an employee, also it should check if the customer account has been activated. Search Use Case Specification Add the following to the result List Specification: a. The returned list should be within a table the first column is a checked box could be used by the user for short list. b. A Form should be given to the user in which s/he can select how many record would like to display in each page default is 15 record 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