I have attached the file
Prac Set 1 Page 1 of 4 300583 Web Systems Development PRACTICAL SET 1 DUE: 9PM 20 AUG 2021 In Practical Set 1, you will create a simple website by ASP.NET Core Razor pages for a fictitious online magazine subscription website named "Inspiring Magazines". This website allows the subscription to four kinds of magazines, which are detailed in the table below: Magazine ID Magazine Name Price per issue 1 Scientific American $6.50 2 New Scientist $6.00 3 Reader’s Digest $5.00 4 National Geographic $7.00 Table 1: Magazine Details Steps for completing this practical set 1. Create an ASP.NET Core Razor Pages project named " MagazinesSID " with Visual Studio. For example, if your SID is 12345678, then the project should be named "Magazine12345678". Since the project name appears everywhere in the source code generated by Visual Studio, this naming will effectively prevent others from copying your source code. 2. In 'Solution Explorer', create a folder named "MagazineTest" under the "Pages" folder of your project. 3. Create a Razor page named "Index" under the "MagazineTest" 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/MagazineTest into the browser after running this project, the Table 1 above should be displayed in the browser. 4. 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 magazine ID 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 magazine ID. 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, the
![]()
element to display the image "wwwroot/images/xxx.jpg" should be written as
in HTML document. 5. Create another Razor page named “Subscribe”under the 'MagazineTest' folder. This page should process the following kind of queries: https://localhost:xxx/MagazineTest http://www.pixabay.com/ http://www.unsplash.com/ Page 2 of 4 https://localhost:xxx/MagazineTest/Subscribe?MagazineID=3&NumIssues=4 This processing requires you to modify the OnGet() function in the Subscribe.cshtml.cs' file as follows: a. Add two function parameters: int MagazineID and int NumIssues b. Calculate the total price for subscriptions to a magazine(MagazineID) with the number of issues(NumIssues). The pricing should be based on the Table 1 above. c. Pass the following values to the content file 'Subscribe.cshtml' by the ViewData dictionary: i. The magazine name corresponding to the MagazineID based on Table 1. ii. 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. 6. Modify the content file Subscribe.cshtml' such that it can: a. Display the name of the magazine subscribed to in an
heading. b. Display the image corresponding to that magazine name underneath the magazine name. c. Display the total price to pay in an
heading below the magazine 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 magazine and store it into a string variable, say, ‘imagefile’. Then, in the
![]()
tag, you can do
. Also, look at our sample project for Lecture 2. An exemplar testing result for step 6 Enter the URL http://localhost:xxx/MagazineStatic/Subscribe?MagazineID=3&NumIssues=4, and the following should be roughly displayed: https://localhost:xxx/MagazineTest/Subscribe?MagazineID=3&NumIssues=4 https://www.w3schools.com/cs/cs_switch.asp http://localhost:xxx/MagazineStatic/Subscribe?MagazineID=3&NumberOfIssues=4 Page 3 of 4 7. Modify the "Pages/Index.cshtml" to implement the following: a. Add a carousel that uses the four magazine images created in Step 4. (hint: to make the images occupy the full width, you need to add a CSS style "width:100%" for the images; you can refer to our sample project in lecture 3) b. The images should be rotated every 3 seconds. (hint: you can use the "data- interval" attribute of carousel to achieve this) c. The captions should indicate the type of the magazine. 8. Create a Model class for magazines. The class name should be "Magazine". 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 "MagazineID" to match the "MagazineID" column. 9. Create a 'Magazines' folder under the 'Pages' folder. Then, use scaffolding to create the Razor pages for CRUD operations on the Magazine database table under the 'Magazines' folder. 10. Modify the ConfigureServices() method in Startup.cs file such that SQLite is injected as the DBMS instead of the SQL Server LocalDB. The name of the database file should be "MagazineShop.db". 11. Use migration to create this SQLite database. 12. Modify the "_Layout.cshtml" file to add a hyperlink with the text "Magazine Index" into the navigation bar. This hyperlink should point to the Index page under the 'Magazines' folder. (hint: refer to our sample project accompanying lecture 4). 13. Modify the "Pages/Index.cshtml" further to implement the following: a. 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. b. The two combined columns should be stacked vertically if the screen width is less than 768px. c. The first combined column should contain a welcome message to this Magazine 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. • Magazines Index: link to the Index page under the 'Pages/Magazines' folder. • Privacy: link to the Privacy page under the 'Pages' folder. 14. Run your project and 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 "Magazines Index" link in the navigation bar, the following should appear roughly. Note that since the Magazine ID column is taken as the primary key, it won't appear by default. Page 4 of 4 Checkpoint (2 marks) The Prac1 Checkpoint will occur in your registered practical class in week 3. At this checkpoint you should complete steps 1-3. Marking criteria: • Steps 1 and 2: 1 mark. • Step 3: 1 mark