1 00:00:00,490 --> 00:00:04,630 In this course, we'll be starting with a functional MVC project and 2 00:00:04,630 --> 00:00:10,410 adding forms to give our users the ability to create, update and delete data. 3 00:00:10,410 --> 00:00:14,710 You might recognize the name of our web app from a previous Treehouse course. 4 00:00:14,710 --> 00:00:16,720 Let's take a look at it in its finished form. 5 00:00:17,990 --> 00:00:20,560 >> Welcome to the Fitness Frog web app. 6 00:00:20,560 --> 00:00:26,060 Fitness Frog allows us to track exercise activities using either a desktop or 7 00:00:26,060 --> 00:00:27,370 mobile Web browser. 8 00:00:27,370 --> 00:00:31,120 The home page lists all of our activity entries. 9 00:00:31,120 --> 00:00:34,030 For each entry in the list, we can see its Date, 10 00:00:35,060 --> 00:00:39,800 Activity, Duration in minutes and Intensity. 11 00:00:39,800 --> 00:00:44,640 Buttons here on the right allow us to Edit or Delete an entry. 12 00:00:44,640 --> 00:00:49,080 Just above the list, the web app displays a summary of our activity. 13 00:00:49,080 --> 00:00:53,450 As we create, update, or delete entries, the daily average and 14 00:00:53,450 --> 00:00:56,830 total values displayed in minutes will change. 15 00:00:56,830 --> 00:01:01,220 Let's click the Add Entry button here at the top of the page to add an entry. 16 00:01:01,220 --> 00:01:03,000 Here's our add entry page. 17 00:01:03,000 --> 00:01:06,380 There's a field for each of the properties on our entry model, 18 00:01:06,380 --> 00:01:08,750 which we'll take a look at later in this course. 19 00:01:08,750 --> 00:01:12,880 If we remove the Duration value and click the Save button, we can see that we get 20 00:01:12,880 --> 00:01:17,270 a validation message letting us know that this value is required. 21 00:01:17,270 --> 00:01:21,260 Notice that all the valid fields are labeled with a green check mark. 22 00:01:21,260 --> 00:01:25,080 While the invalid fields are labeled with a red X. 23 00:01:25,080 --> 00:01:27,970 This gives our users a nice visual indication 24 00:01:27,970 --> 00:01:30,420 as to where their attention is required. 25 00:01:30,420 --> 00:01:33,854 The Date field displays as a date picker, making it easy for 26 00:01:33,854 --> 00:01:36,062 users to provide their desired date. 27 00:01:36,062 --> 00:01:40,717 The Activity field allows users to pick an activity from a dropdown list 28 00:01:40,717 --> 00:01:42,280 of predefined values. 29 00:01:42,280 --> 00:01:47,916 Radio buttons give users an easy way to toggle the intensity 30 00:01:47,916 --> 00:01:52,330 field value between Low, Medium, and High. 31 00:01:52,330 --> 00:01:55,580 The Exclude checkbox allows users to add an entry 32 00:01:55,580 --> 00:01:58,760 that doesn't affect the summary information on the home page. 33 00:01:58,760 --> 00:02:03,470 The large Notes field can be used to enter additional information. 34 00:02:03,470 --> 00:02:07,890 In addition to the Save button, we also have a Cancel button that when clicked 35 00:02:07,890 --> 00:02:12,110 will take us back to the home page without saving any of our changes. 36 00:02:12,110 --> 00:02:14,514 Let's enter a duration value and click the Save button. 37 00:02:19,949 --> 00:02:22,170 Now we're back on the home page. 38 00:02:22,170 --> 00:02:25,220 Notice the message here at the top of the page confirming that our 39 00:02:25,220 --> 00:02:27,260 entry was successfully added. 40 00:02:27,260 --> 00:02:31,030 We can dismiss this message by clicking the X here on the right. 41 00:02:31,030 --> 00:02:34,760 The list of entries is sorted by date in descending order. 42 00:02:34,760 --> 00:02:38,870 So the position of the new entry will change depending upon its date. 43 00:02:38,870 --> 00:02:43,008 If we click the Edit button, we can use the edit entry page to change the date. 44 00:02:48,176 --> 00:02:53,420 Aside from the heading, the Edit Entry page is identical to the Add Entry page. 45 00:02:53,420 --> 00:02:58,160 The only difference is that we're editing an entry instead of adding an entry. 46 00:02:58,160 --> 00:03:01,050 If we want to remove an entry, we can click its Delete button. 47 00:03:02,790 --> 00:03:07,100 This is the delete entry screen, which gives us a chance to review and 48 00:03:07,100 --> 00:03:09,490 confirm that we want to delete this entry. 49 00:03:10,550 --> 00:03:13,570 Let's go ahead and click the Delete button to remove it. 50 00:03:13,570 --> 00:03:17,730 Here's our list of entries again minus the entry that we just removed. 51 00:03:17,730 --> 00:03:21,652 Let's take a look at how our web app will look on a mobile device. 52 00:03:21,652 --> 00:03:25,060 I'll right-click on the page and select Inspect menu item. 53 00:03:25,060 --> 00:03:30,070 Let's dock the developer tools on the right to give us more vertical space and 54 00:03:30,070 --> 00:03:31,670 toggle on the device toolbar. 55 00:03:33,610 --> 00:03:36,250 Here's how our web app will look on an iPhone 6. 56 00:03:36,250 --> 00:03:38,350 Notice that the header has changed. 57 00:03:38,350 --> 00:03:41,834 The Fitness Frog logo and text is now smaller and 58 00:03:41,834 --> 00:03:45,640 the Add Entry button is only visible if we click on this hamburger button. 59 00:03:46,660 --> 00:03:49,140 The entries list has also changed. 60 00:03:49,140 --> 00:03:51,880 The intensity column is hidden and the edit and 61 00:03:51,880 --> 00:03:55,870 delete buttons are not just showing their respective icons. 62 00:03:55,870 --> 00:03:57,770 If we click one of the edit buttons, 63 00:03:57,770 --> 00:04:02,050 we can see that the add edit entry form now displays in a single column. 64 00:04:03,620 --> 00:04:07,740 While the Fitness Frog web app is simple it does provide our users with the basic 65 00:04:07,740 --> 00:04:09,800 functionality of a crud app. 66 00:04:09,800 --> 00:04:15,210 That being said, we're missing one important feature, data persistence. 67 00:04:15,210 --> 00:04:19,610 All of our data is kept in memory, which means that when we start and 68 00:04:19,610 --> 00:04:23,980 stop our web app, we'll lose any changes that we've made to our data. 69 00:04:23,980 --> 00:04:27,180 For our purposes in this course, this works fine. 70 00:04:27,180 --> 00:04:33,360 But in the real world, we'd want to use a database or an API to persist our data. 71 00:04:33,360 --> 00:04:36,940 In future Treehouse courses, you'll learn how to do that. 72 00:04:36,940 --> 00:04:40,278 If you'd like to learn more now about databases and APIs, 73 00:04:40,278 --> 00:04:43,590 see the teacher's notes for links to additional resources. 74 00:04:44,890 --> 00:04:46,755 Now that we've been introduced to our web app, 75 00:04:46,755 --> 00:04:49,070 let's set up our project in the next video.