Problem description:

In this Exam, you are requested to develop a website to make it easier for the grocery owners to order products through Al$-$Marai website. Also, Al$-$Marai can manage the order from the usernames who registered with them on the website. You are partially developing this website because of time constrains.

Question $1$:$-$ Client$-$Side

In this part you are required to create the web pages using HTML$,$ CSS$/$Bootstrap and JavaScript$/$JQuery$.$ You can make all necessary assumptions.

Make sure all pages of your website are using bootstrap and Navigation Bar is displayed with all the pages.

Index page

A$.[5]$ In index page first you have to create navigation bar using bootstrap,

Navigation is collapsible if page displays on larger screen it will look like the following one

If page displays on the small screen it will collapsed as in the following snapshot

If user click on the right collapsed button it will display following items:

$2$

B$.[5]$Thecontentsectionofindexpagescreatesagridofthreecolumns$.$Leftandright column of size $2$ while middle column of size $8.$ Middle column of index Page consist of followings:

$1.[1]$A div with Panel class to display almarari.png as an image inside panel. $2.[1]$Introducing AlMarai$$ as a level one heading with titleBG.jpg as a background of $$Introducing AlMarai$.$ You have to use CSS for this part by

taking required assumption.

$3.[3]$ Two level three headings $$AlMarai Company$$ and $$Inspired Vision$$

and paragraph having introduction of AlMarai under each heading. These paragraphs are provided in Para.txt file. Initially it displays only level three headings, once mouse enters on the headings then complete intro paragraphs will slide down. Paragraphs will slide up once mouse will exit$/$leave the headings. Sign Up

C$.[5]$IfuserclicksonSignUpoptionofnavigation$,$itwilldisplaysignuppagehaving a form with following input components. Use Bootstrap with your form to make it responsive:

$1.$ User name as required.

$2.$ City containing list of cities as a Dropdown list.

$3.$ Email as required.

$4.$ Confirm$-$Email as required.

$5.$ Password as required.

$6.$ Confirm$-$Password as required.

$7.$ Submit button to submit data in to database table.

$8.$ Reset Button to clear the form content. Use JavaScript to match Email with Confirm$-$Email which ensures values provide in both input components are the same. Also check Password with Confirm$-$ Password, both should be same and also length of password shouldn$$t be less than $6$ characters.

E$.[4]$ Use JQuery to change the background$-$color of dropdown list of your form to grey when it is focused and set its color back to white when it goes out of focus.

$4$

Questions $2$: Server$-$side

In this part, you will implement the server$-$side of your web site. You will use php scripting language, MySQL database management system and AJAX.

A$.[4]$ Create the database $$AlMarai$$ containing one table named $$Users$$ with the following attributes:

$1.$ UserName: varchar$(20)$ primary key. $2.$ City: varchar $(100)$ not null.

$3.$ Email:: varchar $(200)$ not null.

$4.$ Password: varchar $(50)$ not null.

Note: You must submit your $.$sql file with other files of your exam.

B$.[6]$ In the page Sign Up$,$ you have to connect to database created in Part A of this question. After filling the form of sign up page when user clicks on the $$submit$$ button, signups page creates query using the user$$s provided values to insert a new record into the Users table of AlMarai database. Pages has to prompt the user with appropriate message whether record is inserted or not.

C$.[6]$IfuserclickonProductsoptionofNavigationthenitopensProjectspages having a div with:

$1.$ Level$-2$ Heading $$To See list of our available products click the following:$$

$2.$ A Block Level button with btn$-$Primary as a style class and labelled $$Display Products$$

Content of the page should reflect the content of the Products.xml file which is stored on the server. Once the user click Display Products button, it should create XMLHttpRequest$()$ variable to reads data from Products.xml and display content of Products.xml in the form of HTML table on Products page. Table should have proper heading for columns depending on the products detail provided in Products.xml files about each product.