Resources to practical
Please use windows Operating system pc not macbook or apple pc
#Visual Studio
#Visual Studio in windows version
In Practical Set 1, you will create a simple website by ASP.NET Core Razor pages for a fictitious burger shop named “Gourmet Burger”. This burger shop sells four types of burgers, which are detailed in the following table:
Burger Type
Burger Name
Price
1
BLT Whopper
$10.50
2
Grilled Chicken
$8.50
3
Angus Beef
$9.00
4
Vegetarian
$7.00
Table 1: Burger Details
Steps for completing this practical set
Create an ASP.NET Core Razor Pages project named “BurgerYourSID” with Visual Studio.
For example, if your SID is 12345678, then the project should be named “Burger12345678“. Since the project name appears everywhere in the source code generated by Visual Studio, this naming will help prevent source code sharing among students.
In ‘Solution Explorer’, create a folder named “BurgerTest” under the “Pages” folder of your project.
Create a Razor page named “Index” under the “BurgerTest” folder. Modify the automatically-generated ‘Index.cshtml’ file to display the Table 1 above in an HTML table. That is, when entering the following URL https://localhost:xxx/BurgerTest into the browser after running this project, the Table 1 above should be displayed in the browser.
Hint: review how to display a table by HTML tags.
In ‘Solution Explorer’, create a folder named ‘images’ under the ‘wwwroot’ folder of your project. Then, create an image file for each of the four burger types and store these four files under the ‘images’ folder. You can download images from Internet and then modify them. When searching images on the Internet, you should use royalty-free image websites such as Pixabay (www.pixabay.com) and Unsplash (www.unsplash.com) to avoid copyright issues. The four images should all:
Have a resolution of 800 X 400 pixels.
Be in one image format such as jpeg, bmp, png, etc.
Roughly illustrate their corresponding burger types.
Hint: “wwwroot” is the folder for storing static contents such as images, js, css, etc of your project. This folder can be referred to by the “~” character in URL. For example, to display the image “wwwroot/images/xxx.jpg”, the <img> element should be written as <img src=”~/images/xxx.jpg” /> in HTML document.
Create another Razor page named ‘Purchase’ under the ‘BurgerTest’ folder. This page should process the following kind of queries:
https://localhost:xxx/BurgerTest/Purchase?BurgerType=3&BurgerCount=4
This processing requires you to modify the OnGet() function in the ‘Purchase.cshtml.cs’ file as follows:
Add two function parameters: int BurgerType and int BurgerCount
In the function body, calculate the total price for purchasing burgers of BurgerType with the quantity of BurgerCount. The pricing should be based on the Table 1 above.
In the function body, pass the following values to the content file ‘Purchase.cshtml’ by the ViewData dictionary:
The burger name corresponding to the BurgerType based on Table 1.
The total price to pay.
Hint: the easiest way to implement this function is to use the “switch” statement in C#. See https://www.w3schools.com/cs/cs_switch.asp.
Modify the content file ‘Purchase.cshtml’ such that it can:
Display the name of the burger purchased in an <h4> heading.
Display the image corresponding to that burger name underneath the burger name.
Display the total price to pay in an <h3> heading below the burger image.
Hint: You need to embed C# code into the content file with Razor syntax. Again a ‘switch’ statement gives you the most efficient implementation. Inside this ‘switch’ statement, you decide the image file name for the burger and store it into a string variable, say, ‘imagefile’. Then, in the <img> tag, you can do <img src=”~/images/@imagefile“/>.
Also, look at our sample project for Lecture 2.
An exemplar testing result for step 6
Enter the URL https://localhost:xxx/BurgerTest/Purchase?BurgerType=3&BurgerCount=4, and the following should be roughly displayed:
Modify the “Pages/Index.cshtml” to implement the following:
Add a carousel that uses the four burger images created in Step 4.
The images should be rotated every 1.5 seconds.
The captions should indicate the type of the burger.
Create a Model class for burgers. The class name should be “Burger”. The properties of this class should reflect the columns in Table 1. The property names are of your choice. For example, you can use a property named either “ID” or “BurgerID” for the “Burger Type” column.
Create a ‘Burgers’ folder under the ‘Pages’ folder. Then, use scaffolding to create the Razor pages for CRUD operations on the Burger database table under the ‘Burgers’ folder.
Modify the Program.cs file such that SQLite is injected as the DB provider instead of the SQL Server LocalDB. The name of the database file should be “GourmetBurger.db”.
Use migration to create this SQLite database.
Modify the “_Layout.cshtml” file to:
Add a hyperlink with the text “Burger Index” into the navigation bar. This hyperlink should point to the Index page under the ‘Burgers’ folder.
Display the brand of this shop as ‘Gourmet Burger’ in both the navigation bar and the footnote.
Hint: refer to our sample project accompanying lecture 4.
Modify the “Pages/Index.cshtml” further to implement the following:
The area beneath the carousel is divided into two combined columns. The first combined column consists of 8 columns in the 12-column grid system, and the second combined column consists of the remaining 4 columns.
The two combined columns should be stacked vertically if the screen width is less than 768px.
The first combined column should contain a welcome message to this Gourmet Burger shop; the second combined column should contain the following links arranged vertically in a bullet list.
Home: link to the Index page under ‘Pages’ folder.
Burger Index: link to the Index page under the ‘Pages/Burgers’ folder.
Privacy: link to the Privacy page under the ‘Pages’ folder.
Run your project, and then use the website from this project (in particular, the Create page) to add the data in Table 1 into the database.
An exemplar testing result after completing this practical set
Click the “Burger Index” link in the navigation bar, the following should appear roughly. Note that since the Burger ID column is taken as the primary key, it won’t appear by default.
