1 00:00:00,000 --> 00:00:08,560 2 00:00:08,560 --> 00:00:10,410 >> GABRIEL GUIMARAES: This is CS50. 3 00:00:10,410 --> 00:00:14,740 Welcome to Amazing Web Apps with Ruby on Rails. 4 00:00:14,740 --> 00:00:19,700 So for anyone who's interested in web development and making websites, web 5 00:00:19,700 --> 00:00:26,510 applications, Ruby on Rails is this amazing tool that Twitter, GitHub, 6 00:00:26,510 --> 00:00:31,470 Groupon, and all sorts of really nice, and big, web applications are using in 7 00:00:31,470 --> 00:00:33,080 the last few years. 8 00:00:33,080 --> 00:00:37,190 And it's a really, really cool feature, a cool tool, 9 00:00:37,190 --> 00:00:39,290 because it's new. 10 00:00:39,290 --> 00:00:43,830 So it has all of the new powerful technologies incorporated into one 11 00:00:43,830 --> 00:00:49,050 framework that helps you deal with all sorts of amazing things. 12 00:00:49,050 --> 00:00:50,970 >> But what is a framework? 13 00:00:50,970 --> 00:00:55,700 So a framework is basically something that creates-- 14 00:00:55,700 --> 00:00:59,680 when you start a website, if you started from scratch, like you open 15 00:00:59,680 --> 00:01:04,530 gedit there, and you want to code all of your HTML, and code all of your 16 00:01:04,530 --> 00:01:08,130 PHP, all of your CSS, everything from scratch-- 17 00:01:08,130 --> 00:01:09,690 that's just going to be a lot of work. 18 00:01:09,690 --> 00:01:13,940 And a framework literally gives you half of the website done already. 19 00:01:13,940 --> 00:01:18,070 So you start off with half a website that has everything there for you. 20 00:01:18,070 --> 00:01:22,690 Like the database connections, and all sorts of things that you have to worry 21 00:01:22,690 --> 00:01:25,040 about if you're doing it from scratch, you don't have to worry about those 22 00:01:25,040 --> 00:01:26,480 low level details. 23 00:01:26,480 --> 00:01:32,360 >> But today we're going to export one of the websites that the freshman of the 24 00:01:32,360 --> 00:01:34,740 class of 2017 are probably familiar. 25 00:01:34,740 --> 00:01:40,170 So this website is the website that I did for our class over the summer. 26 00:01:40,170 --> 00:01:46,500 It was a website where the students of the class of 2017 could log in and 27 00:01:46,500 --> 00:01:47,480 interact with each other. 28 00:01:47,480 --> 00:01:49,610 And then this is a map-- 29 00:01:49,610 --> 00:01:51,210 everyone, where people are. 30 00:01:51,210 --> 00:01:56,970 And we had a book game, a songs game where we saw people's songs and 31 00:01:56,970 --> 00:01:57,970 people's books. 32 00:01:57,970 --> 00:02:00,480 What they like to read, what they like to listen to. 33 00:02:00,480 --> 00:02:06,830 And the most interesting part of it is that it literally took me three hours 34 00:02:06,830 --> 00:02:07,840 to code all of it. 35 00:02:07,840 --> 00:02:13,050 Because if I had to do everything from scratch, like opening up gedit, it 36 00:02:13,050 --> 00:02:16,400 would probably have taken me 20, 30 hours. 37 00:02:16,400 --> 00:02:20,210 But with Ruby on Rails, because everything was already set up for me, 38 00:02:20,210 --> 00:02:25,550 it only took me three or four hours, or something like that. 39 00:02:25,550 --> 00:02:27,580 >> So what is Ruby on Rails. 40 00:02:27,580 --> 00:02:32,720 Ruby on Rails, again as we already said, is a framework. 41 00:02:32,720 --> 00:02:34,800 This is a picture of a framework. 42 00:02:34,800 --> 00:02:37,460 So you're going to start building a house, you already have half of the 43 00:02:37,460 --> 00:02:38,320 house done. 44 00:02:38,320 --> 00:02:38,970 That's the framework. 45 00:02:38,970 --> 00:02:40,560 And Ruby on Rails is exactly like that. 46 00:02:40,560 --> 00:02:44,440 And you should think of it as, you start a website, you start your web 47 00:02:44,440 --> 00:02:48,830 application, we already have half of it done there. 48 00:02:48,830 --> 00:02:50,400 But first of all, what is Ruby? 49 00:02:50,400 --> 00:02:53,510 50 00:02:53,510 --> 00:02:58,310 Ruby on Rails uses the model view controller, which is paradigm, which 51 00:02:58,310 --> 00:02:59,930 is a really interesting-- 52 00:02:59,930 --> 00:03:04,250 and all of the applications nowadays use something like that. 53 00:03:04,250 --> 00:03:08,630 This idea of separating things into three parts, the model, the view, and 54 00:03:08,630 --> 00:03:09,630 the controller. 55 00:03:09,630 --> 00:03:11,950 We're going to talk a little more about that later. 56 00:03:11,950 --> 00:03:13,400 >> First, what is Ruby? 57 00:03:13,400 --> 00:03:14,500 So this is Ruby. 58 00:03:14,500 --> 00:03:17,850 And this is the symbol of the language called Ruby. 59 00:03:17,850 --> 00:03:24,170 Ruby is one of the newish interpreted languages, so script. 60 00:03:24,170 --> 00:03:29,530 It's a language that's not compiled like C. It's compiled on the run. 61 00:03:29,530 --> 00:03:33,220 So that's good because, just like PHP, for example is also interpreted, is 62 00:03:33,220 --> 00:03:33,960 not compiled. 63 00:03:33,960 --> 00:03:35,710 That's good because its portable. 64 00:03:35,710 --> 00:03:39,740 So you just pass your code from one machine to another. 65 00:03:39,740 --> 00:03:44,440 From a Linux machine, to a Windows machine, to a Mac or Apple machine, or 66 00:03:44,440 --> 00:03:45,240 something like that. 67 00:03:45,240 --> 00:03:49,160 And you don't need to worry about details regarding each of the specific 68 00:03:49,160 --> 00:03:49,890 operating systems. 69 00:03:49,890 --> 00:03:51,330 It's going to work everywhere. 70 00:03:51,330 --> 00:03:54,700 >> And Ruby is a language that-- 71 00:03:54,700 --> 00:03:56,920 you guys probably remember this. 72 00:03:56,920 --> 00:04:01,440 People use the hash function implemented in C for the hash table 73 00:04:01,440 --> 00:04:04,860 last week and had all sorts of segmentation faults. 74 00:04:04,860 --> 00:04:12,360 And then things worrying about whether that string i there, the string i 75 00:04:12,360 --> 00:04:20,380 here, was actually lowercase or uppercase, or these kind of worrisome 76 00:04:20,380 --> 00:04:21,410 low level details. 77 00:04:21,410 --> 00:04:26,180 Well in Ruby, if you want to implement a hash table, this is exactly how you 78 00:04:26,180 --> 00:04:27,100 create a hash table. 79 00:04:27,100 --> 00:04:30,280 You say, dictionary, that's the name of my variable, = "Hash.new". 80 00:04:30,280 --> 00:04:34,680 And then dictionary["foo"], and when I'm adding foo to my hash table, I'm 81 00:04:34,680 --> 00:04:35,960 just saying foo is there. 82 00:04:35,960 --> 00:04:38,070 >> And then if I wanted to check if foo was there, I just say if 83 00:04:38,070 --> 00:04:40,270 dictionary["foo"]==true return true. 84 00:04:40,270 --> 00:04:41,560 Whoa, and that's your hash table. 85 00:04:41,560 --> 00:04:44,280 That's the implementation of hash table in Ruby. 86 00:04:44,280 --> 00:04:50,200 So everyone wished they could have used something like Ruby for last 87 00:04:50,200 --> 00:04:51,450 week's pset, right? 88 00:04:51,450 --> 00:04:54,410 89 00:04:54,410 --> 00:04:59,050 We have all sorts of reasons to want to use a language like Ruby. 90 00:04:59,050 --> 00:05:01,380 Ruby has gems. 91 00:05:01,380 --> 00:05:04,000 Gem is a name for a kind of library in Ruby. 92 00:05:04,000 --> 00:05:07,490 >> So all sorts of interesting features that you can have, for example, if I 93 00:05:07,490 --> 00:05:09,280 want to integrate my application. 94 00:05:09,280 --> 00:05:12,470 That Harvard 2017 application was integrated to Facebook. 95 00:05:12,470 --> 00:05:15,810 So you could log in, via Facebook, to the app. 96 00:05:15,810 --> 00:05:19,760 So if you're going to do that, you don't need to worry about sending some 97 00:05:19,760 --> 00:05:23,760 HTTP request to Facebook, and waiting for the response, and forcing the 98 00:05:23,760 --> 00:05:25,150 response, and blah, blah, blah. 99 00:05:25,150 --> 00:05:29,120 You just download the gem that does all that for you. 100 00:05:29,120 --> 00:05:30,750 And then you don't need to worry about all of that. 101 00:05:30,750 --> 00:05:33,670 >> And then plenty of help online, of course. 102 00:05:33,670 --> 00:05:37,040 There are many, many, many websites that are going to help you both with 103 00:05:37,040 --> 00:05:38,880 Ruby and with Rails. 104 00:05:38,880 --> 00:05:40,530 And it is lots of fun to code. 105 00:05:40,530 --> 00:05:46,770 Exactly because you can stop worrying about those not so fun problems. 106 00:05:46,770 --> 00:05:50,690 Like if something is lowercase or upper case, and then why is this 107 00:05:50,690 --> 00:05:54,500 giving you a segmentation fault, and you can really dive into the very 108 00:05:54,500 --> 00:05:55,460 interesting stuff. 109 00:05:55,460 --> 00:05:59,650 To dive into the really cool problems. 110 00:05:59,650 --> 00:06:02,420 >> So Ruby is just like to C in a sense. 111 00:06:02,420 --> 00:06:05,950 So it's not going to be that big of a jump actually. 112 00:06:05,950 --> 00:06:09,470 So puts, that's our print app in Ruby. 113 00:06:09,470 --> 00:06:12,790 I think you could use print too, but puts is what everyone uses. 114 00:06:12,790 --> 00:06:14,490 So just puts "Hello World". 115 00:06:14,490 --> 00:06:21,400 You could, or you could not, have the parenthesis encircling 116 00:06:21,400 --> 00:06:23,280 "Hello World" there. 117 00:06:23,280 --> 00:06:25,350 You can just choose whether or not to use that. 118 00:06:25,350 --> 00:06:26,780 And then x="1". 119 00:06:26,780 --> 00:06:29,030 A while loop looks pretty much the same. 120 00:06:29,030 --> 00:06:30,630 It just has less syntax. 121 00:06:30,630 --> 00:06:32,590 It's kind of cleaner a little bit. 122 00:06:32,590 --> 00:06:37,380 And then if x>25 puts"Big!" and else puts"Small...". 123 00:06:37,380 --> 00:06:39,070 And it's kind of C in that sense. 124 00:06:39,070 --> 00:06:41,630 >> So if you look at that, you can approach probably understand 125 00:06:41,630 --> 00:06:42,890 everything that is going on. 126 00:06:42,890 --> 00:06:47,750 But it's more powerful. 127 00:06:47,750 --> 00:06:54,520 More powerful because, more than that, it can do things are not that-- 128 00:06:54,520 --> 00:06:55,750 some kind of hackage a little bit. 129 00:06:55,750 --> 00:06:57,430 In C you couldn't do in just do with one line. 130 00:06:57,430 --> 00:06:58,680 For example, puts"I am#{x}". 131 00:06:58,680 --> 00:07:04,330 132 00:07:04,330 --> 00:07:11,100 This is just syntax for put the value of x here, and don't print the 133 00:07:11,100 --> 00:07:12,160 character x. 134 00:07:12,160 --> 00:07:17,850 In C you had to do the percent d, and then put up the variable x after the 135 00:07:17,850 --> 00:07:19,730 comma here, or something like that. 136 00:07:19,730 --> 00:07:22,220 >> And in Ruby there's a shorthand for just doing that. 137 00:07:22,220 --> 00:07:27,830 And puts this, if x>3, so you can put the if all on one line. 138 00:07:27,830 --> 00:07:29,010 And then a list. 139 00:07:29,010 --> 00:07:33,320 Lists in C, like an array, you have to keep track of how big your array is or 140 00:07:33,320 --> 00:07:34,720 otherwise you get a segmentation fault. 141 00:07:34,720 --> 00:07:36,210 Your array is only one type. 142 00:07:36,210 --> 00:07:38,790 So it's either an array of charge or an array of integers. 143 00:07:38,790 --> 00:07:43,620 In this case, I created a list here, that's an array, that has the first 144 00:07:43,620 --> 00:07:48,450 element is a string, John, and then four, two-- those are integers. 145 00:07:48,450 --> 00:07:53,590 And then I just add, list, the Left Angle Bracket, Left 146 00:07:53,590 --> 00:07:54,820 Angle Bracket, three. 147 00:07:54,820 --> 00:07:58,170 That means just append something to my list. 148 00:07:58,170 --> 00:08:01,630 >> So it's kind of more interesting because if you wanted to use this as 149 00:08:01,630 --> 00:08:03,920 just a simple list of integers, you could, totally. 150 00:08:03,920 --> 00:08:05,530 That's totally fine. 151 00:08:05,530 --> 00:08:06,750 Just put integers there. 152 00:08:06,750 --> 00:08:10,240 But if you wanted to do something that's more compelling, that has other 153 00:08:10,240 --> 00:08:11,690 things, that has-- 154 00:08:11,690 --> 00:08:15,480 I don't know, all sorts of lists in there, or other objects that are more 155 00:08:15,480 --> 00:08:16,970 interesting, you can totally do that. 156 00:08:16,970 --> 00:08:17,880 It's totally fine. 157 00:08:17,880 --> 00:08:21,210 And then if you want to iterate through the list, you could use the 158 00:08:21,210 --> 00:08:24,850 more C-ish kind of approach. 159 00:08:24,850 --> 00:08:29,970 That's for loop, you to initiate a variable, i="1", or i="0". 160 00:08:29,970 --> 00:08:32,980 And then you go, and iterate, and get all of the elements. 161 00:08:32,980 --> 00:08:37,559 >> But you could also use this more Ruby-like approach. 162 00:08:37,559 --> 00:08:40,289 That's just like a list.each. 163 00:08:40,289 --> 00:08:45,230 That's just saying, return me all elements of the list. 164 00:08:45,230 --> 00:08:49,120 And do with each element, call them elem. 165 00:08:49,120 --> 00:08:51,880 So this is just a name that I'm giving to each element. 166 00:08:51,880 --> 00:08:56,630 And now this is going to repeat for all the elements, and elem, it's going 167 00:08:56,630 --> 00:09:00,790 to be the way that we access that single element. 168 00:09:00,790 --> 00:09:04,310 So you could totally stick to the C approach, but this works too. 169 00:09:04,310 --> 00:09:07,970 And it is exactly the same thing, OK. 170 00:09:07,970 --> 00:09:13,830 >> And other than that, it is really, really easy to integrate Ruby and HTML 171 00:09:13,830 --> 00:09:17,010 since you guys are interested in web applications. 172 00:09:17,010 --> 00:09:20,070 HTML is definitely something that you're going to use a lot. 173 00:09:20,070 --> 00:09:25,820 And here if you wanted to put Ruby in HTML, just start here, <%. 174 00:09:25,820 --> 00:09:28,500 That means, here Ruby starts. 175 00:09:28,500 --> 00:09:32,130 And then %>, kind of like PHP in that sense. 176 00:09:32,130 --> 00:09:35,520 Here Ruby ends and then you can just put your if in here. 177 00:09:35,520 --> 00:09:39,400 And then I have some variable user.logged_in. 178 00:09:39,400 --> 00:09:45,120 In Ruby, we usually add those, either interrogation mark or exclamation 179 00:09:45,120 --> 00:09:48,210 mark, like a bank character, just to kind of 180 00:09:48,210 --> 00:09:49,480 distinguish between our functions. 181 00:09:49,480 --> 00:09:52,780 But you just put that for your own sake. 182 00:09:52,780 --> 00:09:56,910 It's not something that changes anything in the functionality. 183 00:09:56,910 --> 00:10:01,160 >> So just to remind me that this is a function-- and functions in Ruby, 184 00:10:01,160 --> 00:10:06,650 rather than C, as I said already, they don't need the parentheses. 185 00:10:06,650 --> 00:10:09,740 So that logged in thing, that's a function, that's a method. 186 00:10:09,740 --> 00:10:12,990 But you don't explicitly need to put the parentheses in there. 187 00:10:12,990 --> 00:10:16,030 So just asking if the user's logged in, and if the user's logged in, now 188 00:10:16,030 --> 00:10:17,100 HTML starts again. 189 00:10:17,100 --> 00:10:21,670 So Welcome, and here I print the user.name. 190 00:10:21,670 --> 00:10:22,920 And that's it. 191 00:10:22,920 --> 00:10:24,970 192 00:10:24,970 --> 00:10:30,420 So that's pretty straight forward, how you integrate Ruby with your HTML. 193 00:10:30,420 --> 00:10:34,560 And resources, as I said, there are all sorts of resources for Ruby. 194 00:10:34,560 --> 00:10:39,560 You guys can all look this up afterwards because both the video, and 195 00:10:39,560 --> 00:10:40,875 the slides, are going to be available online. 196 00:10:40,875 --> 00:10:44,620 197 00:10:44,620 --> 00:10:47,180 >> And now let's get into Rails. 198 00:10:47,180 --> 00:10:48,330 Rails is love. 199 00:10:48,330 --> 00:10:49,230 Rails-- 200 00:10:49,230 --> 00:10:51,030 so Ruby is his language. 201 00:10:51,030 --> 00:10:54,340 OK, just like PHP, just like Python. 202 00:10:54,340 --> 00:10:59,980 It's a high level language, not like C. C's a middle, low-level language in 203 00:10:59,980 --> 00:11:05,240 the sense that Ruby you don't have to worry about memory reallocation, and 204 00:11:05,240 --> 00:11:07,300 pointers, and those kinds of things. 205 00:11:07,300 --> 00:11:11,120 But Rails is this program that was written in Ruby. 206 00:11:11,120 --> 00:11:15,610 And it uses Ruby, in order to have this framework, for you to be able to 207 00:11:15,610 --> 00:11:18,990 build awesome web applications. 208 00:11:18,990 --> 00:11:21,940 >> So you have to first install Ruby on your machine, but most machines 209 00:11:21,940 --> 00:11:22,630 already have that. 210 00:11:22,630 --> 00:11:24,800 And then install rails on top of it. 211 00:11:24,800 --> 00:11:26,540 We're going to talk about that later. 212 00:11:26,540 --> 00:11:28,100 And why Rails? 213 00:11:28,100 --> 00:11:31,470 So MVC, that's the model view controller we talked about a little 214 00:11:31,470 --> 00:11:36,050 bit, makes everything simpler because it divides things that are 215 00:11:36,050 --> 00:11:42,420 conceptually different into different parts of your application. 216 00:11:42,420 --> 00:11:45,930 Less time spent on low level problems, again, and very, very 217 00:11:45,930 --> 00:11:46,820 popular right now. 218 00:11:46,820 --> 00:11:52,130 So for all those who are interested in the start up scene, or in something 219 00:11:52,130 --> 00:11:58,435 like starting businesses, and people in the technology market who are 220 00:11:58,435 --> 00:12:02,440 starting their own business right now are really, really fans of Ruby on 221 00:12:02,440 --> 00:12:04,120 Rails because it's so fast. 222 00:12:04,120 --> 00:12:07,510 >> So you can get something up and running in less than a day, and that's 223 00:12:07,510 --> 00:12:10,410 really a very compelling argument to use Ruby. 224 00:12:10,410 --> 00:12:13,460 And Rails 4.0-- 225 00:12:13,460 --> 00:12:15,920 it's very fresh from the oven now. 226 00:12:15,920 --> 00:12:16,930 So Rails 4.0-- 227 00:12:16,930 --> 00:12:20,180 I think the first release was in March this year. 228 00:12:20,180 --> 00:12:23,460 And it's really nice, it has all sorts of new, cool features. 229 00:12:23,460 --> 00:12:30,290 So Ruby on Rails is a framework that's constantly being updated to have all 230 00:12:30,290 --> 00:12:31,540 of the new technology. 231 00:12:31,540 --> 00:12:33,710 232 00:12:33,710 --> 00:12:39,800 >> The first time I tried to use Ruby on Rails, I had this trouble because I 233 00:12:39,800 --> 00:12:44,540 created my first web application, and it looked exactly like that. 234 00:12:44,540 --> 00:12:49,020 So it creates all of those files for you, and I had no idea what-- 235 00:12:49,020 --> 00:12:50,780 what is this? 236 00:12:50,780 --> 00:12:54,850 It created all those files, and I only wanted to create a simple program, a 237 00:12:54,850 --> 00:12:57,140 simple HTML website. 238 00:12:57,140 --> 00:12:59,680 And I couldn't even do anything. 239 00:12:59,680 --> 00:13:02,430 So I was a little bit overwhelmed. 240 00:13:02,430 --> 00:13:08,350 But that's one of things that once you understand it, everything becomes so 241 00:13:08,350 --> 00:13:09,190 much clearer. 242 00:13:09,190 --> 00:13:15,750 So don't be overwhelmed by the first sight of what you create at first. 243 00:13:15,750 --> 00:13:18,430 >> So what happens is Rails creates all those files. 244 00:13:18,430 --> 00:13:20,470 So one of that is doc, documentation. 245 00:13:20,470 --> 00:13:23,080 Db, that's related to the database. 246 00:13:23,080 --> 00:13:25,060 Lib, that's libraries log. 247 00:13:25,060 --> 00:13:28,200 Public, script, and some things. 248 00:13:28,200 --> 00:13:32,110 Pretty much all you're going to worry about is the app folder, up there. 249 00:13:32,110 --> 00:13:34,430 That's the folder that contains your application. 250 00:13:34,430 --> 00:13:35,540 All of the other files-- 251 00:13:35,540 --> 00:13:37,770 some of them are important, and you're going to learn about that later. 252 00:13:37,770 --> 00:13:42,040 But they're just here to contain the framework. 253 00:13:42,040 --> 00:13:46,420 So the first cornerstones of the house you guys are building, OK? 254 00:13:46,420 --> 00:13:47,730 >> But the app folder-- 255 00:13:47,730 --> 00:13:49,630 that's the really important one. 256 00:13:49,630 --> 00:13:53,050 And the app folder has assets. 257 00:13:53,050 --> 00:13:57,690 Assets is pretty much everything that's coming. 258 00:13:57,690 --> 00:14:01,890 Images for example, everything that's static that's going to be downloaded 259 00:14:01,890 --> 00:14:03,450 to your website. 260 00:14:03,450 --> 00:14:06,850 So images, JavaScript, CSS-- 261 00:14:06,850 --> 00:14:08,520 those kinds of things are assets. 262 00:14:08,520 --> 00:14:11,310 263 00:14:11,310 --> 00:14:12,260 Controllers-- 264 00:14:12,260 --> 00:14:15,190 we're going to talk more about what are controllers, models, 265 00:14:15,190 --> 00:14:16,800 and fields in a second. 266 00:14:16,800 --> 00:14:20,760 And helpers are functions that you can use all over your code 267 00:14:20,760 --> 00:14:22,800 to help you do something. 268 00:14:22,800 --> 00:14:25,800 Functions like logged in, for example-- user.loggedin. 269 00:14:25,800 --> 00:14:29,500 That's a function that probably you have to use in all parts of your 270 00:14:29,500 --> 00:14:30,030 application. 271 00:14:30,030 --> 00:14:33,590 So you can put something like that in your helper. 272 00:14:33,590 --> 00:14:34,370 >> Mailers-- 273 00:14:34,370 --> 00:14:41,480 that's if you're going to send an email to your users, you 274 00:14:41,480 --> 00:14:43,420 want to use a mailer. 275 00:14:43,420 --> 00:14:46,420 And models and views, we're going to talk about that right now. 276 00:14:46,420 --> 00:14:52,450 So the model view controller, that's the basic cornerstone of Ruby on 277 00:14:52,450 --> 00:14:55,730 Rails, and most frameworks nowadays, to be honest. 278 00:14:55,730 --> 00:15:01,180 So again, we separate all of our code into three different parts. 279 00:15:01,180 --> 00:15:02,590 The model-- 280 00:15:02,590 --> 00:15:04,620 the model is basically the database. 281 00:15:04,620 --> 00:15:06,090 It handles things in the database. 282 00:15:06,090 --> 00:15:10,790 >> So each table in the database has a corresponding file within the model. 283 00:15:10,790 --> 00:15:13,330 So it's kind of a table for your users. 284 00:15:13,330 --> 00:15:18,250 So you're storing information like the user name, their emails, their 285 00:15:18,250 --> 00:15:20,970 address, their password, and things like that. 286 00:15:20,970 --> 00:15:24,535 You're going to have one file in the model called user rb-- 287 00:15:24,535 --> 00:15:26,240 rb for Ruby. 288 00:15:26,240 --> 00:15:30,180 And there you're going to have all of the methods and the variables. 289 00:15:30,180 --> 00:15:34,130 The variables are going to correspond to the user name, the email, and 290 00:15:34,130 --> 00:15:35,370 everything. 291 00:15:35,370 --> 00:15:37,760 >> And you're going to have the methods. 292 00:15:37,760 --> 00:15:42,690 That will be something concerning-- 293 00:15:42,690 --> 00:15:46,400 you're going to handle this information in the database. 294 00:15:46,400 --> 00:15:50,220 To create a model with Rails, you just use Rails generate. 295 00:15:50,220 --> 00:15:54,990 And to create things in Rails, you actually need the terminal. 296 00:15:54,990 --> 00:15:58,770 So it's a very terminal based framework. 297 00:15:58,770 --> 00:16:02,530 You just log into the terminal, and do Rails, generate model. 298 00:16:02,530 --> 00:16:04,670 And the name of the model is user. 299 00:16:04,670 --> 00:16:10,270 And I just want to have two variables, two columns, in my table. 300 00:16:10,270 --> 00:16:11,450 So that's email. 301 00:16:11,450 --> 00:16:13,080 Email is a type string. 302 00:16:13,080 --> 00:16:15,450 Password, password is also a type string. 303 00:16:15,450 --> 00:16:16,520 Those are the only two things. 304 00:16:16,520 --> 00:16:19,160 It's kind of a simplistic user table. 305 00:16:19,160 --> 00:16:22,490 But you could totally put a hundred thing's there if you wanted to. 306 00:16:22,490 --> 00:16:27,620 >> And Rails also makes it very, very simple to have all 307 00:16:27,620 --> 00:16:30,040 sorts of database relations. 308 00:16:30,040 --> 00:16:36,100 So usually, when you have tables in your database, they're not very much 309 00:16:36,100 --> 00:16:37,570 independent of one another. 310 00:16:37,570 --> 00:16:39,392 Let's think about. 311 00:16:39,392 --> 00:16:42,960 You want to buy and sell products online. 312 00:16:42,960 --> 00:16:46,620 OK, so you have a website where you want to buy and sell products. 313 00:16:46,620 --> 00:16:55,060 So each user has many products that this user is willing to sell. 314 00:16:55,060 --> 00:17:00,970 And each user also has many transactions that are ongoing, or 315 00:17:00,970 --> 00:17:01,920 something like that. 316 00:17:01,920 --> 00:17:05,430 And the transactions are with another user. 317 00:17:05,430 --> 00:17:08,310 Each transaction belongs to two different users. 318 00:17:08,310 --> 00:17:10,560 The user that's buying and the user that's selling. 319 00:17:10,560 --> 00:17:13,920 >> So those are the so-called database relations. 320 00:17:13,920 --> 00:17:17,890 And here we have exactly those keywords, has many and belongs to. 321 00:17:17,890 --> 00:17:19,500 Those are the most important ones. 322 00:17:19,500 --> 00:17:22,410 And you're just going to say, for example, this is the example of a 323 00:17:22,410 --> 00:17:25,740 model in the Harvard 2017 website. 324 00:17:25,740 --> 00:17:28,820 Again, the students in here-- 325 00:17:28,820 --> 00:17:32,870 each student on the website, student is a model, is a database table. 326 00:17:32,870 --> 00:17:37,560 Each student had many books because you could say, what are your favorite 327 00:17:37,560 --> 00:17:38,630 books, right. 328 00:17:38,630 --> 00:17:44,450 So each book belongs to a student down here. 329 00:17:44,450 --> 00:17:46,910 And attribute accessible-- 330 00:17:46,910 --> 00:17:49,580 that's just saying, those are the variables. 331 00:17:49,580 --> 00:17:53,050 Those are the variables accessible from this model. 332 00:17:53,050 --> 00:17:58,570 And the variables are the author of the book, description, genre, and 333 00:17:58,570 --> 00:17:59,870 title of the book. 334 00:17:59,870 --> 00:18:02,700 So just the information concerning the book. 335 00:18:02,700 --> 00:18:06,410 >> And here I have a method that simply sorts everything. 336 00:18:06,410 --> 00:18:10,710 So define and end here, that's just saying, here comes my method. 337 00:18:10,710 --> 00:18:13,220 Self.sorted_all. 338 00:18:13,220 --> 00:18:16,390 That's just, give me everything sorted, and that's how you implement 339 00:18:16,390 --> 00:18:22,360 the sorting algorithm, which is fairly easy. 340 00:18:22,360 --> 00:18:27,430 But basically, this is how a model looks like, OK. 341 00:18:27,430 --> 00:18:32,990 Does anyone have questions regarding this database thing? 342 00:18:32,990 --> 00:18:33,736 Relations? 343 00:18:33,736 --> 00:18:36,430 Is that clear? 344 00:18:36,430 --> 00:18:37,125 Yes. 345 00:18:37,125 --> 00:18:38,490 >> AUDIENCE: Can you do the sort algorithm? 346 00:18:38,490 --> 00:18:41,960 >> GABRIEL GUIMARAES: The sort algorithm, OK. 347 00:18:41,960 --> 00:18:45,340 When you get used to Ruby syntax, it's going to be clear. 348 00:18:45,340 --> 00:18:48,800 But basically, elems is Book.all. 349 00:18:48,800 --> 00:18:50,820 So book is the name of my model. 350 00:18:50,820 --> 00:18:55,670 When you create a model, it comes with all sorts of nice methods for you. 351 00:18:55,670 --> 00:18:58,810 So dot.all is a method that returns all books. 352 00:18:58,810 --> 00:19:02,560 But find, for example, would search for one book and return that book, or 353 00:19:02,560 --> 00:19:03,840 something like that. 354 00:19:03,840 --> 00:19:05,990 And so elems is everything. 355 00:19:05,990 --> 00:19:08,870 And I'm just saying elems.sort. 356 00:19:08,870 --> 00:19:11,300 Sort is a built-in Ruby function. 357 00:19:11,300 --> 00:19:13,526 >> And, do ab. 358 00:19:13,526 --> 00:19:15,940 So this do again is-- 359 00:19:15,940 --> 00:19:17,400 you're going to sort. 360 00:19:17,400 --> 00:19:19,850 But you're going to get this argument for me. 361 00:19:19,850 --> 00:19:25,160 And the argument uses-- this is one of the harder things in Ruby actually, 362 00:19:25,160 --> 00:19:26,920 this do thing. 363 00:19:26,920 --> 00:19:31,470 But once you understand it everything comes very, very intuitive. 364 00:19:31,470 --> 00:19:37,140 So the ab, this is saying the place holders that I'm going to use-- like 365 00:19:37,140 --> 00:19:41,760 the variables I'm going to use, are going to be called a and b. 366 00:19:41,760 --> 00:19:43,380 And those are the books. 367 00:19:43,380 --> 00:19:47,120 >> So because sort needs to compare elements, remember that? 368 00:19:47,120 --> 00:19:49,760 So when you sort things, you compare two elements. 369 00:19:49,760 --> 00:19:51,900 I'm going to say that every time you're going to compare-- 370 00:19:51,900 --> 00:19:54,350 so this is, I'm passing to sort an argument. 371 00:19:54,350 --> 00:19:59,370 And the argument is everything from do to and here, OK? 372 00:19:59,370 --> 00:20:02,980 And this argument, is just telling sort how to compare. 373 00:20:02,980 --> 00:20:07,460 Sort would work here, but it would compare with their 374 00:20:07,460 --> 00:20:09,530 default comparing algorithm. 375 00:20:09,530 --> 00:20:13,810 I want it to compare in a very specific way, namely, when the book 376 00:20:13,810 --> 00:20:16,900 was created, when each book was created. 377 00:20:16,900 --> 00:20:21,090 >> So I'm saying, say the name of the first book is a and the name of the 378 00:20:21,090 --> 00:20:27,620 second book as b, I want sort to sort something based on b.created_at this 379 00:20:27,620 --> 00:20:30,000 weird symbol, a.created_at. 380 00:20:30,000 --> 00:20:34,350 And that weird symbol is shorthand for if one is bigger than the 381 00:20:34,350 --> 00:20:35,380 other, return 1. 382 00:20:35,380 --> 00:20:37,450 If one is equal to the other, return zero. 383 00:20:37,450 --> 00:20:41,180 If one is smaller than the other, return minus 1. 384 00:20:41,180 --> 00:20:43,435 So that's what that weird symbol is. 385 00:20:43,435 --> 00:20:46,680 386 00:20:46,680 --> 00:20:47,500 >> But that's not important. 387 00:20:47,500 --> 00:20:52,780 I mean, what I want you guys to get now is the idea that database-- 388 00:20:52,780 --> 00:20:54,150 you can have the model there. 389 00:20:54,150 --> 00:20:59,850 So you don't have to worry about connecting and using SQL statement, 390 00:20:59,850 --> 00:21:00,500 and things like that. 391 00:21:00,500 --> 00:21:04,920 It can also create doors to SQL injection and all 392 00:21:04,920 --> 00:21:06,460 sorts of security problems. 393 00:21:06,460 --> 00:21:07,930 In this case, you don't worry about that. 394 00:21:07,930 --> 00:21:11,880 You just use methods like book.all. 395 00:21:11,880 --> 00:21:15,210 And that, in the background of course, is going to your database, and it's 396 00:21:15,210 --> 00:21:17,570 going to use a SQL statement to get all the books. 397 00:21:17,570 --> 00:21:19,650 But you don't have to worry about that. 398 00:21:19,650 --> 00:21:24,090 That's the takeaway, OK? 399 00:21:24,090 --> 00:21:26,790 >> And when you have a belongs_to statement like this, that means that 400 00:21:26,790 --> 00:21:31,780 once you have a book object, you can see what is its student. 401 00:21:31,780 --> 00:21:34,130 So which student has this book? 402 00:21:34,130 --> 00:21:38,760 So we can just use book.student, and that gives you what the student is. 403 00:21:38,760 --> 00:21:42,440 And that's a really feature to have. 404 00:21:42,440 --> 00:21:43,950 >> OK, now the view. 405 00:21:43,950 --> 00:21:48,380 So the model is what interacts with the database, right? 406 00:21:48,380 --> 00:21:52,240 The view is basically HTML, and CSS, and some JavaScript. 407 00:21:52,240 --> 00:21:55,080 And that's what the user actually sees. 408 00:21:55,080 --> 00:21:56,540 The user's not going to see your database. 409 00:21:56,540 --> 00:22:00,290 He's going to see some data from the database embedded in the viewer. 410 00:22:00,290 --> 00:22:04,940 411 00:22:04,940 --> 00:22:08,410 Ruby on Rails makes it really simple to make fields. 412 00:22:08,410 --> 00:22:12,780 First, because it already creates it for you, out of the box, a layout. 413 00:22:12,780 --> 00:22:16,200 >> A layout is basically something that-- 414 00:22:16,200 --> 00:22:24,230 if all of your pages have a logo on top and, I don't know, some menu or 415 00:22:24,230 --> 00:22:29,000 something like that, that all your pages share in common, then you don't 416 00:22:29,000 --> 00:22:34,830 need to create many, many, many HTML files where all the files have that 417 00:22:34,830 --> 00:22:36,830 same HTML code. 418 00:22:36,830 --> 00:22:40,700 I mean that's dumb because you're just repeating code among different files. 419 00:22:40,700 --> 00:22:42,480 That's definitely not a good approach. 420 00:22:42,480 --> 00:22:45,660 >> So Ruby on Rails creates this layout for you. 421 00:22:45,660 --> 00:22:49,770 And this is just saying, all my pages are going to have this HTML, this head 422 00:22:49,770 --> 00:22:54,805 title here, and those are style sheet link tag. 423 00:22:54,805 --> 00:22:56,800 Plug in here all my CSS. 424 00:22:56,800 --> 00:23:01,194 Plug in here all my JavaScript and some meta tags. 425 00:23:01,194 --> 00:23:04,440 That's just something that they do automatically for you. 426 00:23:04,440 --> 00:23:07,490 And then, end the head, now here starts the body. 427 00:23:07,490 --> 00:23:09,780 And now this is my actual content. 428 00:23:09,780 --> 00:23:16,620 So if I wanted to put something like, a menu here, I would put it right over 429 00:23:16,620 --> 00:23:19,600 this place, or something like that, so that all of my pages shared it. 430 00:23:19,600 --> 00:23:21,730 So the layout is shared by all the pages. 431 00:23:21,730 --> 00:23:26,500 >> Now that yield here just says , no matter what pages this is in, just 432 00:23:26,500 --> 00:23:30,560 plug in the content of that page in here, OK? 433 00:23:30,560 --> 00:23:33,770 And now this is, for example, the content of one page that's going to be 434 00:23:33,770 --> 00:23:38,950 plugged into this yield statement automatically by Rails. 435 00:23:38,950 --> 00:23:40,700 But this is a layout shared by all pages. 436 00:23:40,700 --> 00:23:42,500 And this is an example of one page. 437 00:23:42,500 --> 00:23:46,410 And this is exactly the page that lists all the books. 438 00:23:46,410 --> 00:23:49,390 So this is a basic HTML table up top. 439 00:23:49,390 --> 00:23:53,730 So listing books, a title, author, description, genre. 440 00:23:53,730 --> 00:24:00,810 >> And here we use, again, some Ruby syntax, @books.each-- 441 00:24:00,810 --> 00:24:07,720 @ kind of says that your variable is global in a sense. 442 00:24:07,720 --> 00:24:10,940 Because this variable was actually declared in the controller which 443 00:24:10,940 --> 00:24:12,840 you're going to see right now. 444 00:24:12,840 --> 00:24:18,570 But just take for granted that this @books is a variable that is a list of 445 00:24:18,570 --> 00:24:20,000 all of the books. 446 00:24:20,000 --> 00:24:24,580 So books.each, do, and again, this is just saying how do you want to name 447 00:24:24,580 --> 00:24:29,580 each of the iterators so that we don't have to worry about a four, int i 448 00:24:29,580 --> 00:24:30,630 blah, blah, blah. 449 00:24:30,630 --> 00:24:33,760 We just take each of the elements and use them. 450 00:24:33,760 --> 00:24:38,890 >> So this is the book, and then just print here. book.title, book.author, 451 00:24:38,890 --> 00:24:41,020 book.description, and blah, blah, blah. 452 00:24:41,020 --> 00:24:42,940 And here's a link_to. 453 00:24:42,940 --> 00:24:46,840 So link_to is just a link tag that a user can click on and 454 00:24:46,840 --> 00:24:49,040 goes to another website. 455 00:24:49,040 --> 00:24:51,160 Link_to, show that particular book. 456 00:24:51,160 --> 00:24:56,480 So if the user is very interested in this book, then he can click on show. 457 00:24:56,480 --> 00:24:59,350 Or click on edit, if he wants to edit the book. 458 00:24:59,350 --> 00:25:03,560 Or destroy, if he wants to delete the book from the database. 459 00:25:03,560 --> 00:25:06,260 OK, does that makes sense? 460 00:25:06,260 --> 00:25:08,610 Good. 461 00:25:08,610 --> 00:25:10,600 >> Finally, the controller. 462 00:25:10,600 --> 00:25:17,150 So basically the controller is the interface between the 463 00:25:17,150 --> 00:25:20,040 model and the view. 464 00:25:20,040 --> 00:25:25,120 So the model is the part of your code that has database-- 465 00:25:25,120 --> 00:25:27,620 each table in the database has a respective file in the 466 00:25:27,620 --> 00:25:30,120 model, and so on. 467 00:25:30,120 --> 00:25:34,890 And how do the model and the view interact? 468 00:25:34,890 --> 00:25:36,990 So, through the controller. 469 00:25:36,990 --> 00:25:43,620 What a controller does is it is the model for something like, for example, 470 00:25:43,620 --> 00:25:46,510 put all of the book inside of a variable. 471 00:25:46,510 --> 00:25:47,760 Like this one, @books. 472 00:25:47,760 --> 00:25:50,200 473 00:25:50,200 --> 00:25:54,800 >> And it needs to be global with this at thing because it's going to be 474 00:25:54,800 --> 00:25:56,180 accessed by the view. 475 00:25:56,180 --> 00:26:00,000 It's not going to be used within the controller itself. 476 00:26:00,000 --> 00:26:03,160 And it just slows information that the view is going to use. 477 00:26:03,160 --> 00:26:08,030 For example, the controller checks if the user is online. 478 00:26:08,030 --> 00:26:09,620 And how does it do that? 479 00:26:09,620 --> 00:26:11,760 It actually asks the model because the model has the 480 00:26:11,760 --> 00:26:12,890 information about the user. 481 00:26:12,890 --> 00:26:15,840 It has a users table, the books table, other tables. 482 00:26:15,840 --> 00:26:18,560 So the controller asks if the user is online. 483 00:26:18,560 --> 00:26:23,760 If the user is online, the controller handles things like putting a cookie, 484 00:26:23,760 --> 00:26:28,120 or something like that, to put the stamp to say that the user is online. 485 00:26:28,120 --> 00:26:29,930 No need to log in again. 486 00:26:29,930 --> 00:26:34,080 >> And it's going to load a variable called user, for example, that the 487 00:26:34,080 --> 00:26:35,130 view can use. 488 00:26:35,130 --> 00:26:42,375 And the view can put something here, for example, welcome user.name. 489 00:26:42,375 --> 00:26:46,040 So it's going to say, welcome John, welcome James-- 490 00:26:46,040 --> 00:26:47,390 something like that, right? 491 00:26:47,390 --> 00:26:50,380 So all of those variables used in the view are going to be loaded in the 492 00:26:50,380 --> 00:26:54,190 controller and are going to be pulled up from the model. 493 00:26:54,190 --> 00:26:58,310 494 00:26:58,310 --> 00:27:00,555 >> This is the example of a controller. 495 00:27:00,555 --> 00:27:03,140 496 00:27:03,140 --> 00:27:08,640 So we have, basically, each-- 497 00:27:08,640 --> 00:27:10,010 we call those things actions. 498 00:27:10,010 --> 00:27:11,570 So index is an action. 499 00:27:11,570 --> 00:27:13,820 It's a Ruby function. 500 00:27:13,820 --> 00:27:16,160 It's a Ruby method in there. 501 00:27:16,160 --> 00:27:19,350 But for the controller calls those things actions. 502 00:27:19,350 --> 00:27:24,830 And each action is related to a route. 503 00:27:24,830 --> 00:27:29,350 So here this route, for example, is a get statement /books. 504 00:27:29,350 --> 00:27:37,500 So if you go to harvard2017.com/books, what's going to happen is this code is 505 00:27:37,500 --> 00:27:40,630 going to be called. 506 00:27:40,630 --> 00:27:44,290 >> And there is a file-- 507 00:27:44,290 --> 00:27:46,010 let me open this real quick. 508 00:27:46,010 --> 00:27:51,310 509 00:27:51,310 --> 00:27:55,386 There's a file called raw file. 510 00:27:55,386 --> 00:27:57,920 It's not opening. 511 00:27:57,920 --> 00:28:02,330 So there's a file called raw file that basically matches-- 512 00:28:02,330 --> 00:28:03,580 oh, now it's opening. 513 00:28:03,580 --> 00:28:15,900 514 00:28:15,900 --> 00:28:17,550 Here, routes. 515 00:28:17,550 --> 00:28:24,440 So basically matches a strain, activation /new for example, to 516 00:28:24,440 --> 00:28:27,810 something in the controller. 517 00:28:27,810 --> 00:28:31,580 So there's this controller called activation controller, but out here, 518 00:28:31,580 --> 00:28:32,790 we have the books, for example. 519 00:28:32,790 --> 00:28:33,740 So matches-- 520 00:28:33,740 --> 00:28:39,040 books/new, to the controller books, the action new. 521 00:28:39,040 --> 00:28:41,290 So basically, very straightforward things. 522 00:28:41,290 --> 00:28:43,970 523 00:28:43,970 --> 00:28:48,770 >> And here, if you had to get /books, slash the ID of the books, slash new, 524 00:28:48,770 --> 00:28:53,250 you're going to go to that Ruby method down there. 525 00:28:53,250 --> 00:28:58,210 So here, what this index is doing is just loading book log. 526 00:28:58,210 --> 00:28:59,570 That's something that-- 527 00:28:59,570 --> 00:29:02,160 I log all of the books in a log. 528 00:29:02,160 --> 00:29:03,050 And sort it all. 529 00:29:03,050 --> 00:29:05,870 So this going to return all the sorted books. 530 00:29:05,870 --> 00:29:07,940 This is, again, in the database. 531 00:29:07,940 --> 00:29:09,570 So this is a method of the model. 532 00:29:09,570 --> 00:29:12,440 You saw this method being created in the model. 533 00:29:12,440 --> 00:29:16,170 Now this is just loading all the books and putting that in a variable that 534 00:29:16,170 --> 00:29:17,490 can be seen by the view. 535 00:29:17,490 --> 00:29:20,680 >> Because you can't, in the middle of your HTML code, you cannot call 536 00:29:20,680 --> 00:29:23,940 something directly from the model, because for two reasons. 537 00:29:23,940 --> 00:29:28,260 First, for security reasons because it's not really interesting to be 538 00:29:28,260 --> 00:29:32,920 loading information directly inside every HTML that's in the database. 539 00:29:32,920 --> 00:29:36,030 And second, to keep your code really organized. 540 00:29:36,030 --> 00:29:38,800 So separate exactly the different parts. 541 00:29:38,800 --> 00:29:42,830 So BookLog.sorted_all, this in the database and this is going to put into 542 00:29:42,830 --> 00:29:44,290 a variable @books. 543 00:29:44,290 --> 00:29:47,695 And now this variable is accessible within your HTML code. 544 00:29:47,695 --> 00:29:54,610 So you can just put all of the books there just like we did, right here. 545 00:29:54,610 --> 00:29:57,760 This is the variable. 546 00:29:57,760 --> 00:30:04,730 >> And visits respond_to do | format |, this is just a kind of Ruby syntax for 547 00:30:04,730 --> 00:30:08,140 if the user is asking me for HTML code, I'm going to 548 00:30:08,140 --> 00:30:09,340 respond with HTML code. 549 00:30:09,340 --> 00:30:15,500 If the user asks me with JSON code, which is something that web apps use 550 00:30:15,500 --> 00:30:20,780 to communicate between themselves, they usually use JSON or some other 551 00:30:20,780 --> 00:30:23,120 kind of thing. 552 00:30:23,120 --> 00:30:25,850 So it just responds using those two different formats. 553 00:30:25,850 --> 00:30:31,720 But for a normal user, this wouldn't need to be here. 554 00:30:31,720 --> 00:30:34,060 You would just respond with HTML, and that's fine. 555 00:30:34,060 --> 00:30:36,220 So don't really worry that much about this. 556 00:30:36,220 --> 00:30:39,510 This is the only line of code in our control as it's loading from HTML 557 00:30:39,510 --> 00:30:42,630 database, putting in something that's accessible by the view. 558 00:30:42,630 --> 00:30:49,870 >> And then new, so here I'm creating books. 559 00:30:49,870 --> 00:30:55,490 But to create books, I need a student because I need to know the student 560 00:30:55,490 --> 00:30:58,490 whose books this belong to, right. 561 00:30:58,490 --> 00:31:00,780 So @student=Student. 562 00:31:00,780 --> 00:31:06,500 Student, again, we're starting with a big S is the model student. 563 00:31:06,500 --> 00:31:09,380 OK, so this is the model student, this is the model book log. 564 00:31:09,380 --> 00:31:15,150 Student.find, so I'm going to find a student using the parameters ID. 565 00:31:15,150 --> 00:31:19,160 params.id, this is just get me the value of this ID that was passed-- 566 00:31:19,160 --> 00:31:23,410 and the URL. 567 00:31:23,410 --> 00:31:25,440 >> Just going to search for that student. 568 00:31:25,440 --> 00:31:28,420 And first, we're going to check if the student has some songs 569 00:31:28,420 --> 00:31:29,910 and blah, blah, blah. 570 00:31:29,910 --> 00:31:35,570 And this already handles the case when the student 571 00:31:35,570 --> 00:31:38,340 doesn't exist, for example. 572 00:31:38,340 --> 00:31:44,450 And then, else, we just respond to the same thing using HTML. 573 00:31:44,450 --> 00:31:47,570 And then we can let the user create their songs. 574 00:31:47,570 --> 00:31:49,320 So this is new. 575 00:31:49,320 --> 00:31:52,580 New is usually used for, let the user create something. 576 00:31:52,580 --> 00:31:56,440 And then there's the create action that's usually used for-- 577 00:31:56,440 --> 00:31:59,040 actually put the songs in the database or something like that. 578 00:31:59,040 --> 00:32:01,770 But once you start using Rails, those things are going to be 579 00:32:01,770 --> 00:32:05,110 much, much more clear. 580 00:32:05,110 --> 00:32:07,910 OK, cool. 581 00:32:07,910 --> 00:32:09,715 Any questions so far? 582 00:32:09,715 --> 00:32:15,240 Does it makes sense with controllers, models, fields-- 583 00:32:15,240 --> 00:32:17,860 yeah? 584 00:32:17,860 --> 00:32:20,980 >> Again in your Rails application-- 585 00:32:20,980 --> 00:32:24,700 so all of that can be found in here. 586 00:32:24,700 --> 00:32:30,430 So you have app, controllers, those are all of my controllers. 587 00:32:30,430 --> 00:32:32,880 So for example, books control. 588 00:32:32,880 --> 00:32:35,490 That's the one we just saw. 589 00:32:35,490 --> 00:32:36,400 And then views. 590 00:32:36,400 --> 00:32:39,750 And each controller has an associated view, right? 591 00:32:39,750 --> 00:32:43,750 So automatically when you call this index here, for example, or when you 592 00:32:43,750 --> 00:32:49,930 call this books new, then the view, books, new is going to be called. 593 00:32:49,930 --> 00:32:53,300 >> So Rails does everything automatically for you. 594 00:32:53,300 --> 00:32:59,420 So every controller has an associated view and all of the models-- 595 00:32:59,420 --> 00:33:01,970 here I have one, two, three, four, five models. 596 00:33:01,970 --> 00:33:05,800 But this is a student model, so those are the variables that all the 597 00:33:05,800 --> 00:33:08,620 students have-- localization, date of birth. 598 00:33:08,620 --> 00:33:11,270 Students is a little bit more complicated because each student has 599 00:33:11,270 --> 00:33:15,400 more different method associated to it. 600 00:33:15,400 --> 00:33:18,770 But this is just handling the table that had all the 601 00:33:18,770 --> 00:33:21,980 students in the database. 602 00:33:21,980 --> 00:33:24,300 >> And, OK, installing Rails. 603 00:33:24,300 --> 00:33:27,710 Installing Rails, to be honest, is not the simplest thing. 604 00:33:27,710 --> 00:33:32,980 But once you get past everything, it's very, very easy. 605 00:33:32,980 --> 00:33:38,810 So installing Rails, you just go to the website, rubyandrails.org/download 606 00:33:38,810 --> 00:33:41,510 and follow their instructions there. 607 00:33:41,510 --> 00:33:42,700 Download everything. 608 00:33:42,700 --> 00:33:46,600 And you can do that either in Appliance, in the CS50 Appliance, on 609 00:33:46,600 --> 00:33:51,120 Windows, on Mac, or any operating system of your choice. 610 00:33:51,120 --> 00:33:52,460 Ruby on Rails runs on everything. 611 00:33:52,460 --> 00:33:56,680 >> Odds are you already have Ruby installed if you have a Mac or-- 612 00:33:56,680 --> 00:33:58,130 in the appliances I think Ruby is-- 613 00:33:58,130 --> 00:34:00,940 I'm not sure. 614 00:34:00,940 --> 00:34:02,440 And then you just have this installed. 615 00:34:02,440 --> 00:34:07,190 And if you want to create a new web application, you just 616 00:34:07,190 --> 00:34:10,270 do Rails, new, blog. 617 00:34:10,270 --> 00:34:12,429 Rails, new-- 618 00:34:12,429 --> 00:34:13,310 I don't know-- 619 00:34:13,310 --> 00:34:15,050 the name of your website. 620 00:34:15,050 --> 00:34:16,380 And it's that simple. 621 00:34:16,380 --> 00:34:19,060 >> It's going to create all of those files I just showed you. 622 00:34:19,060 --> 00:34:22,730 But the model, the view, and the controller are not going to be 623 00:34:22,730 --> 00:34:24,330 populated yet. 624 00:34:24,330 --> 00:34:28,710 You're just going to have to go there and populate those three folders. 625 00:34:28,710 --> 00:34:32,840 So odds are, you want to create a model, for example, implement one 626 00:34:32,840 --> 00:34:33,780 model first. 627 00:34:33,780 --> 00:34:40,440 So again, always trying to bite smaller bits of a problem at a time. 628 00:34:40,440 --> 00:34:42,659 >> And then let's say, create a model for your users. 629 00:34:42,659 --> 00:34:44,370 That's the first thing if you have users. 630 00:34:44,370 --> 00:34:48,440 Then I want to create a model just like we showed here. 631 00:34:48,440 --> 00:34:58,470 Rails, generate, model, user, and then emails string-- we have that here. 632 00:34:58,470 --> 00:35:01,200 And just create that model, yes. 633 00:35:01,200 --> 00:35:05,030 Rails generate model User email:string password:string. 634 00:35:05,030 --> 00:35:09,650 >> And then you create a controller that deals with the user. 635 00:35:09,650 --> 00:35:12,790 And you can create new users and do those kinds of things. 636 00:35:12,790 --> 00:35:18,280 And then you can move on to creating the rest of your website. 637 00:35:18,280 --> 00:35:22,470 Cool, questions? 638 00:35:22,470 --> 00:35:23,230 Yes. 639 00:35:23,230 --> 00:35:24,480 >> AUDIENCE: [INAUDIBLE] 640 00:35:24,480 --> 00:35:27,430 641 00:35:27,430 --> 00:35:29,910 >> GABRIEL GUIMARAES: Yes, yes, you definitely have to go into the view. 642 00:35:29,910 --> 00:35:31,290 That's a very good question. 643 00:35:31,290 --> 00:35:36,410 So the view is what actually contains your HTML. 644 00:35:36,410 --> 00:35:39,240 So it's what the users are going to see. 645 00:35:39,240 --> 00:35:46,690 Again, here, this is an example of a view. 646 00:35:46,690 --> 00:35:52,040 It has HTML code and Ruby code at the same time. 647 00:35:52,040 --> 00:35:56,010 So the Ruby code is there to put things from the database, for example, 648 00:35:56,010 --> 00:35:59,150 that were loaded at the controller. 649 00:35:59,150 --> 00:36:04,240 So that variable @books, for example, has all of the books and the table 650 00:36:04,240 --> 00:36:05,340 books at the database. 651 00:36:05,340 --> 00:36:08,680 We made sure that it had in the controller. 652 00:36:08,680 --> 00:36:10,250 >> And the view-- 653 00:36:10,250 --> 00:36:15,900 each of the pages off your website is going to have one associated view. 654 00:36:15,900 --> 00:36:21,762 So if you go to the home page, the very first page, harvard2017.com. 655 00:36:21,762 --> 00:36:23,490 That shows one page. 656 00:36:23,490 --> 00:36:26,760 And then you go to slash profile. 657 00:36:26,760 --> 00:36:30,150 That's going to go to a controller that's a profile controller. 658 00:36:30,150 --> 00:36:34,620 And the profile controller is going to give you the profile view. 659 00:36:34,620 --> 00:36:37,590 And the profile view is going to look somewhat like this, but it's going to 660 00:36:37,590 --> 00:36:41,910 have information about the user, and not about the books. 661 00:36:41,910 --> 00:36:46,840 >> So it's HTML code and CSS and those things that a user sees 662 00:36:46,840 --> 00:36:49,680 with the Ruby code-- 663 00:36:49,680 --> 00:36:52,505 that actually prints things from the database. 664 00:36:52,505 --> 00:36:54,520 Is that more clear? 665 00:36:54,520 --> 00:36:55,080 I hope. 666 00:36:55,080 --> 00:36:58,066 >> AUDIENCE: The HTML code is used to actually make the website that the 667 00:36:58,066 --> 00:37:02,470 user sees, but the Ruby code is what makes the website work? 668 00:37:02,470 --> 00:37:06,500 >> GABRIEL GUIMARAES: The Ruby code gets converted to HTML. 669 00:37:06,500 --> 00:37:09,420 So what the user gets is only HTML, OK? 670 00:37:09,420 --> 00:37:10,900 It's only HTML. 671 00:37:10,900 --> 00:37:18,740 This book.title is going to convert to the value of book.title in HTML, OK. 672 00:37:18,740 --> 00:37:23,080 So this is all in the server, and so this depends on what books are there 673 00:37:23,080 --> 00:37:24,410 in the server right now. 674 00:37:24,410 --> 00:37:32,930 But what the server would immediately sense is only HTML code, OK. 675 00:37:32,930 --> 00:37:36,720 >> But the view just gives the layout of what the HTML was going to look like 676 00:37:36,720 --> 00:37:39,530 and what the variables are going to be. 677 00:37:39,530 --> 00:37:42,170 This kind of a print out, OK. 678 00:37:42,170 --> 00:37:44,360 Those things there are basically print outs. 679 00:37:44,360 --> 00:37:47,430 They're going to print variables, OK. 680 00:37:47,430 --> 00:37:49,850 So what is only HTML, those-- 681 00:37:49,850 --> 00:37:51,390 author, title, description. 682 00:37:51,390 --> 00:37:53,540 That's static content. 683 00:37:53,540 --> 00:37:54,520 That's not going to change. 684 00:37:54,520 --> 00:37:56,700 That's just plain HTML code. 685 00:37:56,700 --> 00:37:59,080 Those are the print outs for variables-- 686 00:37:59,080 --> 00:38:00,330 things that depend. 687 00:38:00,330 --> 00:38:02,350 688 00:38:02,350 --> 00:38:03,600 Cool, more questions? 689 00:38:03,600 --> 00:38:12,120 690 00:38:12,120 --> 00:38:12,600 Good? 691 00:38:12,600 --> 00:38:13,080 Yes. 692 00:38:13,080 --> 00:38:15,720 >> AUDIENCE: I think you were doing all the editing in a different text 693 00:38:15,720 --> 00:38:16,920 editing program. 694 00:38:16,920 --> 00:38:19,520 Should we also download that? 695 00:38:19,520 --> 00:38:24,250 >> GABRIEL GUIMARAES: Yeah, I like this text editor called TextMate. 696 00:38:24,250 --> 00:38:24,990 And it's really good. 697 00:38:24,990 --> 00:38:26,980 It's well suited to Ruby. 698 00:38:26,980 --> 00:38:29,270 It colors things very neatly. 699 00:38:29,270 --> 00:38:34,770 So TextMate, T-E-X-T. I'm going to put that, hold on-- 700 00:38:34,770 --> 00:38:42,880 701 00:38:42,880 --> 00:38:45,720 >> I mean you can use gedit or anything you want. 702 00:38:45,720 --> 00:38:49,970 But this is specific for Mac, and this is really neat because it puts all of 703 00:38:49,970 --> 00:38:51,000 your files down there. 704 00:38:51,000 --> 00:38:53,620 And in Ruby on Rails, you need to switch files a lot. 705 00:38:53,620 --> 00:38:55,890 So it's many, many files just go from one file, jump to 706 00:38:55,890 --> 00:38:57,120 one file or the other. 707 00:38:57,120 --> 00:39:02,000 So TextMate is a very good one, but there are plenty out there. 708 00:39:02,000 --> 00:39:03,250 More questions? 709 00:39:03,250 --> 00:39:08,680 710 00:39:08,680 --> 00:39:09,870 OK, yes? 711 00:39:09,870 --> 00:39:12,825 >> AUDIENCE: Is there a mobile development through Ruby on Rails? 712 00:39:12,825 --> 00:39:15,640 713 00:39:15,640 --> 00:39:17,050 >> GABRIEL GUIMARAES: I've heard of things. 714 00:39:17,050 --> 00:39:19,550 I haven't used them. 715 00:39:19,550 --> 00:39:21,570 You could research more on that. 716 00:39:21,570 --> 00:39:24,740 I'm not sure if there's any good thing out there. 717 00:39:24,740 --> 00:39:29,980 718 00:39:29,980 --> 00:39:31,030 OK, yes? 719 00:39:31,030 --> 00:39:32,280 >> AUDIENCE: [INAUDIBLE] 720 00:39:32,280 --> 00:39:38,340 721 00:39:38,340 --> 00:39:40,550 >> GABRIEL GUIMARAES: Not Rails, probably Ruby array. 722 00:39:40,550 --> 00:39:44,270 723 00:39:44,270 --> 00:39:49,080 Open up a terminal window and type, "Ruby". 724 00:39:49,080 --> 00:39:52,030 Yeah, probably, and then you just have to install Rails. 725 00:39:52,030 --> 00:39:57,050 But if you're going to install the new Rails 4.0, which I highly recommend, 726 00:39:57,050 --> 00:40:02,870 you should download Ruby 2.0. 727 00:40:02,870 --> 00:40:04,530 That's the new one too. 728 00:40:04,530 --> 00:40:09,530 And the new Rails 4.0 has something really cool that 729 00:40:09,530 --> 00:40:11,260 it does to the assets. 730 00:40:11,260 --> 00:40:12,810 It handles assets. 731 00:40:12,810 --> 00:40:18,860 Assets again are images, CSS files, and JavaScript files. 732 00:40:18,860 --> 00:40:24,060 So one really neat thing that Ruby on Rails does for you is all of those CSS 733 00:40:24,060 --> 00:40:26,980 files that you have and everything-- 734 00:40:26,980 --> 00:40:32,420 it just bundles everything up into one huge file, with no spaces or anything, 735 00:40:32,420 --> 00:40:40,120 to minimize the time the user needs to download that code from your server. 736 00:40:40,120 --> 00:40:47,780 >> So when you see in your computer, it's going to have like 15 CSS files. 737 00:40:47,780 --> 00:40:49,520 Or many, many different CSS files. 738 00:40:49,520 --> 00:40:54,890 But at the end of the day, what Rails automatically does for you is it puts 739 00:40:54,890 --> 00:41:00,760 everything together into one huge file so that it minimizes the request time. 740 00:41:00,760 --> 00:41:02,630 That's really cool. 741 00:41:02,630 --> 00:41:02,940 Yes? 742 00:41:02,940 --> 00:41:04,190 >> AUDIENCE: [INAUDIBLE] 743 00:41:04,190 --> 00:41:13,910 744 00:41:13,910 --> 00:41:14,440 >> GABRIEL GUIMARAES: Exactly. 745 00:41:14,440 --> 00:41:16,230 So, Google Maps integration. 746 00:41:16,230 --> 00:41:20,200 That's a JavaScript API from Google. 747 00:41:20,200 --> 00:41:23,750 So I just went to the Google website. 748 00:41:23,750 --> 00:41:29,950 They have this Google Maps API and I downloaded the code and integrated it 749 00:41:29,950 --> 00:41:31,610 into my view. 750 00:41:31,610 --> 00:41:35,490 So what I needed to do there is I needed to get the 751 00:41:35,490 --> 00:41:37,310 locations from the database. 752 00:41:37,310 --> 00:41:38,990 That was done in the controller. 753 00:41:38,990 --> 00:41:40,950 So I went to the controller-- 754 00:41:40,950 --> 00:41:42,350 where's the controller. 755 00:41:42,350 --> 00:41:44,330 The controller looked like this. 756 00:41:44,330 --> 00:41:48,660 Got all of the locations of the students, put all of that into a big 757 00:41:48,660 --> 00:41:52,060 variable, a big list, that has all the locations. 758 00:41:52,060 --> 00:41:55,340 >> And in the view, because the JavaScript API is something in the 759 00:41:55,340 --> 00:41:55,800 view, right? 760 00:41:55,800 --> 00:42:00,440 Because JavaScript runs within your HTML code, it's going to be sent to 761 00:42:00,440 --> 00:42:01,710 the user's machine. 762 00:42:01,710 --> 00:42:09,310 And in the view, I loaded all of that information into the Google API. 763 00:42:09,310 --> 00:42:12,080 And it did all of that for me, which is really cool. 764 00:42:12,080 --> 00:42:16,240 But if you want to use things in the back-end, and it's like a library, for 765 00:42:16,240 --> 00:42:18,720 example, again-- 766 00:42:18,720 --> 00:42:20,140 the integration with Facebook. 767 00:42:20,140 --> 00:42:24,060 That's something that many, many, many apps are using nowadays. 768 00:42:24,060 --> 00:42:27,300 >> So have your integration with Facebook because it's so much easier to just 769 00:42:27,300 --> 00:42:30,450 log in with Facebook than to create an account and blah, blah, blah. 770 00:42:30,450 --> 00:42:35,120 Then you just use a gem and it's as simple as going to your gem file. 771 00:42:35,120 --> 00:42:39,350 Gem file is a file called gem file in the source directory of your Ruby on 772 00:42:39,350 --> 00:42:40,370 Rails project. 773 00:42:40,370 --> 00:42:43,700 Just go there and add new gem . 774 00:42:43,700 --> 00:42:45,300 And you look it up on Google. 775 00:42:45,300 --> 00:42:46,520 There are many, many, many gems . 776 00:42:46,520 --> 00:42:51,070 There's one that specifically does this for Facebook integration. 777 00:42:51,070 --> 00:42:54,660 I'm not sure what the name of it. 778 00:42:54,660 --> 00:42:56,680 Just Google it and you're going to find it. 779 00:42:56,680 --> 00:42:57,930 OK, more questions? 780 00:42:57,930 --> 00:43:01,110 781 00:43:01,110 --> 00:43:03,280 Awesome, thank you for coming. 782 00:43:03,280 --> 00:43:09,227