This is the fourth part of the solution for Papa Bob's Mega Challenge. In this part, we're going to style the Presentation layer's Default page according to the challenge specifications.
Before we can begin, we'll need to install the proper packages so that we can take advantage of Bootstrap for styling the webpage. To do this, right-click on 'PapaBobs.Web' and select 'Manage NuGet Packages...' Click on the browse tab and search for Bootstrap:
Install the latest stable version of Bootstrap to your Web project (at the time of this writing, v3.3.7 is current). When you confirm that you would like to install Bootstrap, you may be presented with a dialog box asking if you would like to install jQuery as well, because Bootstrap has a dependency on jQuery. Click OK to continue:
Now, navigate to Default.aspx in the Source view. In order to use Bootstrap's stylings, we'll need to reference the Bootstrap.min.css file at the top of the page; just after the <title> tags and before the closing </head> tag. To do this, open the Content folder of the Persistence layer and select 'Bootstrap.min.css':
Drag and drop this file into the head section:
Now, open the scripts folder and drag and drop the 'bootstrap.min.js' and 'jquery-1.9.1.min.js' to the bottom of the file, just above the closing </body> tag:
Note: Leave the button control within the form for now. We'll modify the existing button when we get to that step.
A designated form design was given at the onset of this challenge and is included in the Mega-Challenge-Docs folder:
The first step in creating this form is to use the appropriate div tags and classes that utilize Bootstrap. In this case, the div tag that will contain the entire form will use the "container" class:
At the very top of our page, we'll want to create a header to serve as the title of the website. Underneath it, we'll use a paragraph for the company's slogan. These will be wrapped in another div with a class of "page-header":
The next items on our page are the DropDownLists for size and crust. We can create each of these in the Source view by declaring their ID and runat values:
While this declares the controls, it does not populate the list of drop-down items. Modify your code to include the ListItems for the different sizes and crusts, including a Text property and Value for each and a default option:
Now, all that's left for these controls is to style them by wrapping them in a div with a class of "form-group". Modify their properties to include a matching CssClass of "form-control", then create a label for each and add a line break between them for spacing:
Now, save and run your project to test and see what the form looks like:
The next step is to add CheckBoxes to the form to represent the toppings. The CheckBoxes will work differently than the other server controls with CSS, primarily because the text appears to the right of the control.
To begin with, create four CheckBox controls, assigning them their corresponding ID properties:
Next, wrap each CheckBox in a label, adding the text for each just before the closing label tag:
Finally, wrap the CheckBoxes in a div tag with class "CheckBox", using a line break to separate them:
Now, save and run your project to see the page so far:
Next, create another <h3> tag, surrounding the text 'Deliver To:' Beneath this, we'll add the TextBoxes that users will type in their name, address and so on. To begin with this, create a new form-group div:
Inside this div, create four new TextBoxes: One for Name, Address, Zip Code and Phone:
Next, create labels for each that will allow the user to distinguish each TextBox from the other. Then, add spacing with a line break between them:
Once again, save and run your application to verify everything functions properly so far:
The last things to add to the form are the RadioButtons for the payment type. Once again, create an <h2> tag with the text 'Payment:' inside it. Underneath this, create two RadioButtons with a GroupName of PaymentGroup. Wrap these controls in labels, just like the CheckBoxes. The label for each should say either 'Cash' or 'Credit'. Finally, surround each RadioButton in a div with class of "radio":
Next, we'll need to style the button with the appropriate color and shape. To do this, wrap it in a form-group div and add a 'CssClass' property to the button:
Finally, add another <h3> with the text 'Total Cost:'. Underneath this, add a resultLabel surrounded by a form-group div class:
Now, save and run your application to see the completed form:
This concludes this part of the solution for the Mega Challenge. At this point, we have everything we need to capture the information for the user's own custom order. In the next part, we'll begin creating the logic to create an order form this form.
Papa Bob's Mega Solution Part 4 - Creating the Order Form