web project

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. 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. 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. 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. 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 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. 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. 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. 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. 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. 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 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