The assignment here is to write an app using a database named CIT321 with a collection named students; we will provide a CSV file of the data. You need to use Vue.js to display 2 pages. You should know that this assignment is similar, all too similar in fact, to the cars4sale2 example in the lecture notes for Vue.js 2. You should study that program first. If you figure out cars4sale2, then program 6 will be extremely straightforward. It is not my intent do drop a ton of new material here in the last few days of class. The database contains 51 documents. The first rows of the CSV file look like this: sid last_name 1 Astaire first_name Humphrey CIT major hrs_attempted gpa_points 10 34 2 Bacall Katharine EET 40 128 3 Bergman Bette EET 42 97 4 Bogart Cary CIT 11 33 5 Brando James WEB 59 183 6 Cagney Marlon CIT 13 40 GPA is calculated as gpa_points divided by hrs_attempted. GPA points would have been arrived at by adding 4 points for each credit hour of A, 3 points for each credit hour of B, and so on. Humphrey Astaire would have a gpa of 34/10 = 3.4. The CSV file will be on the course website. It is named CIT321.csv. Here is what your model should look like. The model is named Student.js var mongoose = require('mongoose'); mongoose.connect ('mongodb://127.0.0.1:27017/CIT321'); var studentSchema = new mongoose. Schema ({ }); sid: {type: Number, required: true, unique: true}, last_name: {type: String, required: true}, first_name: {type: String, required: true}, major: {type: String, required: true}, hrs_attempted: {type: Number, required: true}, gpa_points: {type: Number, required: true} module.exports = mongoose.model ('Student', studentSchema); Here's what the pages should look like, more or less. You have 2 pages, index.html and edit.html in the public folder. The navbar has links named Home and Edit Student Data. Home opens the index.html page that has a drop-down list that will allow us to filter the students by major Our Website Home Edit Student Data CIT 321 Students Select a Major Here are the requirements. Use Vue.js and Bootstrap. Your pages do not need to look exactly like mine, but they need to convey the same information. • Your database and collection, along with your model, must be compatible with mine. The index page should allow filtering all students by major and displaying their GPA • • • The Edit Student data pages should allow displaying each document one at a time, allow editing major, gpa points and hrs attempted. You should be able to delete a student. Oh yeah, and separation of concerns; you need to put your two JavaScript files somewhere in the public folder and link them to the appropriate html page. • Your routes in index.js should only have to provide data. Formatting is done thru Vue.js

Save the changes permanently to the database.

Open the Palace Solution.sln file contained in the VB2017\Chap10\Palace Solution folder. Use Windows to copy the Rectangle.vb file from the VB2017\Chap10 folder to the Palace Project folder. Then, use the Add Existing Item option on the Project menu to add the file to the project. Modify the Rectangle class to use Double variables rather than Integer variables. Change the name of the GetArea method to GetAreaSqFt. Add another method to the class. Use Get AreaSqYds as the method’s name. The method should calculate and return the area of a rectangle in square yards. The application’s Calculate button should calculate and display the number of square yards of carpeting needed to carpet a rectangular floor. Code the btnCalc_Click procedure. Display the number of yards with one decimal place. Save the solution and then start and test the application.

In Chapter 11, you created the most recent version of the MarshallsRevenue program, which prompts the user for customer data for scheduled mural painting. Now, save all the entered data to a file that is closed when data entry is complete and then reopened and read in, allowing the user to view lists of customer orders for mural types.