1 00:00:00,506 --> 00:00:09,546 [ Silence ] 2 00:00:10,046 --> 00:00:11,496 >> All right welcome to section. 3 00:00:11,856 --> 00:00:15,966 This is July 2nd, we will not have section on Wednesday 4 00:00:15,966 --> 00:00:17,366 because it's the 4th of July. 5 00:00:17,886 --> 00:00:20,556 So the next section will be one week from today. 6 00:00:20,886 --> 00:00:24,276 We're going to talk about Model View Controller today, 7 00:00:25,036 --> 00:00:28,796 but first I want to tell you guys how to get a hold 8 00:00:28,796 --> 00:00:31,856 of the code that we discuss here. 9 00:00:31,856 --> 00:00:38,636 If you go to github.com/ codekiln/S75-Sections, 10 00:00:39,716 --> 00:00:42,456 up here you can see it. 11 00:00:42,456 --> 00:00:48,756 You'll see the code that is for all of my sections and the code 12 00:00:48,756 --> 00:00:54,926 that we're doing today is right here, 7-02 MVC. 13 00:00:55,666 --> 00:01:02,016 So I'm assuming that you're using the CS50 appliance 14 00:01:02,056 --> 00:01:03,566 that we're using in this class. 15 00:01:04,466 --> 00:01:10,426 The CS50 appliance can be found just by doing CS50 appliance 16 00:01:10,426 --> 00:01:15,096 and Google, and we're going to be releasing a new version 17 00:01:15,096 --> 00:01:17,056 of the appliance later this week. 18 00:01:17,326 --> 00:01:20,146 If you want to play around with previous versions 19 00:01:20,146 --> 00:01:22,026 of the appliance you can download them here. 20 00:01:22,356 --> 00:01:26,486 The instructions that are at this page assume 21 00:01:26,486 --> 00:01:29,996 that you're working in the latest version of the appliance. 22 00:01:30,446 --> 00:01:33,526 So first of all I'm just going to demonstrate how 23 00:01:33,526 --> 00:01:36,666 to download this code and get started with playing 24 00:01:36,696 --> 00:01:38,296 with it inside of the appliance. 25 00:01:39,366 --> 00:01:45,666 You would go to github.com /codekiln /S75-Sections 26 00:01:46,436 --> 00:01:49,076 and then copy this git address right here, 27 00:01:50,476 --> 00:01:54,826 and then you would go into the appliance and open up a terminal 28 00:01:54,826 --> 00:01:55,886 if you haven't already. 29 00:01:56,806 --> 00:01:59,556 I'll close this so you can see what that process is like. 30 00:01:59,556 --> 00:02:01,956 It will open up a terminal by clicking 31 00:02:01,956 --> 00:02:03,116 on this button down here. 32 00:02:03,576 --> 00:02:08,336 The very first time you install the terminal, 33 00:02:08,336 --> 00:02:11,946 there is no public HTML directory so you will have 34 00:02:11,946 --> 00:02:17,506 to create one and change the permissions on it to 755. 35 00:02:18,626 --> 00:02:21,886 If I list -- the files in my home directory 36 00:02:21,886 --> 00:02:23,376 which is the tiller directory. 37 00:02:23,676 --> 00:02:27,946 You can see here I already have a public underscore html 38 00:02:27,946 --> 00:02:34,896 directory that has world executable permissions 39 00:02:35,156 --> 00:02:36,146 which is what I need. 40 00:02:36,376 --> 00:02:42,616 This rwx, rx, rx it's readable and executable by everyone. 41 00:02:43,056 --> 00:02:45,786 Executable meaning that you can go inside 42 00:02:45,786 --> 00:02:47,516 of the public underscore html directory. 43 00:02:47,836 --> 00:02:51,196 So I'm going to go inside the public underscore html directory 44 00:02:51,806 --> 00:02:56,836 and you can see that I already have a few folders. 45 00:02:57,416 --> 00:03:00,726 I'm actually going to make a directory called temp 46 00:03:02,486 --> 00:03:06,116 and if I look at it I can see that temp if I look at it 47 00:03:06,116 --> 00:03:10,846 with ls-l that gives me the long listing of all the files 48 00:03:10,846 --> 00:03:13,786 and directories in the directory. 49 00:03:13,956 --> 00:03:20,066 You can see that the temp directory I just created only 50 00:03:20,066 --> 00:03:22,826 has rwx permissions and I need everyone 51 00:03:22,826 --> 00:03:24,576 to have reign execute permissions. 52 00:03:25,416 --> 00:03:31,106 So I'm going to chmod that 755 like I discussed last week. 53 00:03:31,176 --> 00:03:33,556 You can remember the permissions -- 54 00:03:34,576 --> 00:03:41,896 4 is read, 2 is write and 1 is execute, 55 00:03:42,076 --> 00:03:47,046 so whatever permissions you need you add up the various elements. 56 00:03:47,846 --> 00:03:52,586 So for the second and third bit which is write 57 00:03:53,106 --> 00:03:56,926 for that the middle part is the second bit 58 00:03:56,926 --> 00:03:58,796 and that last part is the third bit. 59 00:03:59,296 --> 00:04:02,636 You want 5 and 5 for those second bits 60 00:04:02,776 --> 00:04:09,746 so that you get 4 plus 1 you get read plus execute. 61 00:04:10,046 --> 00:04:11,686 This is write. 62 00:04:12,316 --> 00:04:17,336 Now these are permissions that you want 63 00:04:17,336 --> 00:04:18,626 for dealing with the appliance. 64 00:04:18,706 --> 00:04:21,346 These are not production permission levels, 65 00:04:21,346 --> 00:04:23,946 in production permission levels you wouldn't want 66 00:04:24,066 --> 00:04:27,966 to grind everyone access to be able to read 67 00:04:27,966 --> 00:04:29,236 and write all the directories 68 00:04:29,406 --> 00:04:31,906 but in this case it's really helpful. 69 00:04:32,706 --> 00:04:37,226 So I'm going to chmod 755 to temp directory 70 00:04:37,536 --> 00:04:40,046 and then go inside of it with the CD 71 00:04:40,046 --> 00:04:46,436 or Change Directory command and now I'm going to git clone 72 00:04:46,786 --> 00:04:52,846 and I copied this right here, 73 00:04:52,946 --> 00:05:00,936 copy and in here you can press control shift v or go to edit 74 00:05:01,246 --> 00:05:05,476 and paste in order to paste it in. 75 00:05:05,686 --> 00:05:12,456 So when I do git clone, it will clone into the section code 76 00:05:13,246 --> 00:05:15,416 and download it from the net. 77 00:05:16,246 --> 00:05:20,636 Doesn't take too long if you're on the Harvard network. 78 00:05:20,636 --> 00:05:27,406 If I do ls-l now you can see that S75-Sections code. 79 00:05:27,686 --> 00:05:33,296 I'll also need to chmod 755 S75-Sections code. 80 00:05:33,826 --> 00:05:39,736 Now I'm going to change directory inside of it. 81 00:05:40,016 --> 00:05:43,636 In here, you can see that the permissions are all wrong 82 00:05:44,246 --> 00:05:46,836 and so I've created this little script permissions.php 83 00:05:47,036 --> 00:05:50,256 that will recurs into the subdirectories 84 00:05:50,256 --> 00:05:51,946 and set all the permissions for you 85 00:05:52,236 --> 00:05:55,366 because git doesn't remember all of the necessary permissions 86 00:05:55,366 --> 00:05:57,336 for you to be able to use it on a server. 87 00:05:58,086 --> 00:05:58,906 So in order to run 88 00:05:58,906 --> 00:06:03,996 that permissions.php file you do php-f for file 89 00:06:03,996 --> 00:06:07,026 and then enter permissions.php as a -- 90 00:06:07,906 --> 00:06:14,416 as an argument and now if we do ls-l all 91 00:06:14,416 --> 00:06:18,636 of the directories should be the right permissions and then all 92 00:06:18,636 --> 00:06:20,676 of the images and CSS files 93 00:06:20,676 --> 00:06:25,546 and other world readable files should also be assigned 644 94 00:06:25,546 --> 00:06:26,496 permissions as well. 95 00:06:26,966 --> 00:06:32,006 So you probably don't want to run this permissions.php file 96 00:06:32,666 --> 00:06:35,106 if you're not running inside the appliance 97 00:06:35,446 --> 00:06:37,676 because the appliance is running with suphp. 98 00:06:37,676 --> 00:06:41,586 Which assumes that a Apache is running as you and so, 99 00:06:41,586 --> 00:06:43,916 the permissions are slightly different that if you were using 100 00:06:43,916 --> 00:06:49,106 for example xm where the server runs as a different user 101 00:06:49,386 --> 00:06:51,906 and needs different -- a different permission structure. 102 00:06:52,336 --> 00:07:02,246 So now that we have downloaded this folder, you can open 103 00:07:02,246 --> 00:07:08,366 up a browser and go to HTTP colon local -- 104 00:07:08,366 --> 00:07:16,666 colon 192.168.119.128 you can see the number 105 00:07:16,666 --> 00:07:22,466 at the bottom right portion of the appliance and we want 106 00:07:22,466 --> 00:07:24,446 to go inside the jharvard directory, 107 00:07:25,196 --> 00:07:27,566 and inside the temp directory 108 00:07:28,696 --> 00:07:33,006 and because I have assigned 755 permissions, 109 00:07:33,006 --> 00:07:35,256 it gives me a nice listing of all 110 00:07:35,256 --> 00:07:36,826 of the contents of that directory. 111 00:07:37,106 --> 00:07:40,086 If I had chosen 711 permissions, it would have worked 112 00:07:40,086 --> 00:07:41,936 but it wouldn't have given me this nice listing. 113 00:07:42,896 --> 00:07:50,176 So the code for tonight is here in 7-02 MVC okay. 114 00:07:50,956 --> 00:07:58,196 So first of all in Model View Controller, I've written here 115 00:07:58,196 --> 00:08:02,156 on the left hand side a little marker blog. 116 00:08:02,336 --> 00:08:04,216 This blog is called MVC blog 117 00:08:04,936 --> 00:08:08,856 and it says exploring MVC since 2002. 118 00:08:09,046 --> 00:08:09,113 Yeah? 119 00:08:10,516 --> 00:08:13,856 [ Inaudible Speaker ] 120 00:08:14,356 --> 00:08:17,876 >> GI -- the question is what is GID? 121 00:08:18,056 --> 00:08:19,026 Where do you see GID? 122 00:08:19,796 --> 00:08:24,146 >>. GID on the top. 123 00:08:30,956 --> 00:08:34,976 You know, [inaudible] download it into a [inaudible]. 124 00:08:35,516 --> 00:08:42,556 [ Inaudible Speaker ] 125 00:08:43,056 --> 00:08:44,486 >> Yeah, GID [inaudible]. 126 00:08:44,886 --> 00:08:47,516 >> Oh, where it says git clone git@github.com:codekiln what is 127 00:08:47,736 --> 00:08:49,046 that about? 128 00:08:49,046 --> 00:08:57,356 Git is a source code management program and github is a website 129 00:08:57,836 --> 00:09:04,086 that hosts code that is stored using the source code management 130 00:09:04,676 --> 00:09:13,796 program and git helps you store different versions 131 00:09:13,796 --> 00:09:20,676 of your same code in a really compressed format. 132 00:09:21,146 --> 00:09:25,976 So that for instance you could have three 133 00:09:25,976 --> 00:09:28,866 or four different versions of the HTML file 134 00:09:28,866 --> 00:09:30,926 and you could switch between them in a moment's notice 135 00:09:30,926 --> 00:09:33,496 and develop on all of them at the same time. 136 00:09:33,496 --> 00:09:36,696 It's really helpful when you are maybe with the resection 137 00:09:36,696 --> 00:09:39,786 on git later on this semester once people have gotten more 138 00:09:39,786 --> 00:09:40,626 used to development. 139 00:09:41,196 --> 00:09:45,886 The thing that is primarily helpful for is being able 140 00:09:45,886 --> 00:09:52,686 to work on a separate feature and having it isolated from -- 141 00:09:52,976 --> 00:09:55,316 maybe you can work on three separate features 142 00:09:55,316 --> 00:09:56,936 and have them all isolated from each other. 143 00:09:57,126 --> 00:10:00,256 And then at the end being able to merge that code together 144 00:10:00,546 --> 00:10:03,636 after the features are completed. 145 00:10:03,706 --> 00:10:05,816 So it helps you kind of isolate 146 00:10:05,816 --> 00:10:07,926 where you're working on to the features. 147 00:10:08,456 --> 00:10:09,966 So when I did git, 148 00:10:10,316 --> 00:10:14,996 that's invoking the source code management program 149 00:10:15,386 --> 00:10:22,896 and then clone is the git command to clone repository, 150 00:10:23,176 --> 00:10:24,896 which is a collection of source code. 151 00:10:25,216 --> 00:10:28,976 So I stored my source code here on github 152 00:10:29,566 --> 00:10:34,896 and if you enter the git command clone and then put 153 00:10:34,896 --> 00:10:39,956 in the address of that source code, then it will clone 154 00:10:39,956 --> 00:10:42,516 that entire repository and make it available locally. 155 00:10:43,346 --> 00:10:46,526 And the reason why I'm using git here for source codes, 156 00:10:46,526 --> 00:10:48,506 is that I can update them 157 00:10:48,906 --> 00:10:51,396 and you can pull the freshest version. 158 00:10:51,396 --> 00:10:55,706 Like if I -- after tonight's section I make a few additions 159 00:10:55,806 --> 00:10:57,016 to the code from tonight. 160 00:10:57,526 --> 00:11:01,296 I can update it and if you pull it tomorrow it'll be fresh 161 00:11:01,296 --> 00:11:02,796 and updated on your own machine. 162 00:11:03,656 --> 00:11:05,296 Good question. 163 00:11:06,776 --> 00:11:15,476 So going back to Model View Controller we're here inside 164 00:11:15,476 --> 00:11:23,476 07-02 and the very first one Model View Controller intro. 165 00:11:24,036 --> 00:11:27,386 So I'm just going to read from a little bit of this. 166 00:11:27,686 --> 00:11:31,246 Web developers call dynamic websites web applications 167 00:11:32,016 --> 00:11:34,906 because from the coder's perspective dynamic websites are 168 00:11:34,906 --> 00:11:37,496 applications that run on the web server. 169 00:11:38,426 --> 00:11:41,226 Modern applications follow design patterns. 170 00:11:41,706 --> 00:11:43,116 One very common design pattern 171 00:11:43,116 --> 00:11:46,646 that David just showed us is Model, View, Controller or MVC. 172 00:11:47,576 --> 00:11:49,966 To follow MVC when writing an application, 173 00:11:51,106 --> 00:11:54,846 you separate your code according to the function of the code. 174 00:11:55,316 --> 00:11:57,746 Model code stores the application data 175 00:11:58,376 --> 00:12:02,336 and models your application's problem domain. 176 00:12:02,336 --> 00:12:03,646 The problem you're trying to solve. 177 00:12:03,996 --> 00:12:07,366 For example, if you were writing a blogging application, 178 00:12:07,816 --> 00:12:12,666 the Model code would determine what data needs to be stored 179 00:12:12,666 --> 00:12:16,906 about a Blog Post, and take responsibility for the storage 180 00:12:17,016 --> 00:12:20,906 and the retrieval of each Blog Post and all that data. 181 00:12:21,806 --> 00:12:23,846 The View code produces anything 182 00:12:23,846 --> 00:12:26,446 that is viewable by the site visitor. 183 00:12:26,896 --> 00:12:29,306 For example, in a blogging application, 184 00:12:29,566 --> 00:12:33,876 the View code would turn a Blog Post's data like the title 185 00:12:33,876 --> 00:12:36,706 and the actual content and the date that it was posted 186 00:12:36,706 --> 00:12:38,816 and the person that it was posted by. 187 00:12:39,586 --> 00:12:41,566 There's the posted by -- 188 00:12:41,566 --> 00:12:43,596 you know these are all accessory pieces 189 00:12:43,596 --> 00:12:46,576 of data for the blog post. 190 00:12:46,576 --> 00:12:51,346 View code would turn the Blog Post data into HTML and CSS, 191 00:12:51,346 --> 00:12:55,556 which would then be rendered in site viewer's web browser 192 00:12:55,856 --> 00:12:58,166 which would determine how the site would appear 193 00:12:58,166 --> 00:12:59,156 to the visitor. 194 00:12:59,696 --> 00:13:04,296 The Controller code receives all of the sites, 195 00:13:04,636 --> 00:13:07,756 clicks and other input, and uses them 196 00:13:07,756 --> 00:13:10,856 to help your user control the application. 197 00:13:11,336 --> 00:13:15,416 For example, on a blogging site, if a user clicks on 'next post', 198 00:13:16,086 --> 00:13:17,826 the controller will receive that click, 199 00:13:18,136 --> 00:13:21,826 fetch the appropriate Model of the Blog Post 200 00:13:22,296 --> 00:13:27,906 from the model code and then send it to the View to turn it 201 00:13:27,906 --> 00:13:31,156 into the HTML that the site viewer's browser will render 202 00:13:31,156 --> 00:13:33,206 for the site viewer's viewing pleasure. 203 00:13:33,956 --> 00:13:37,496 So it's basically just a way to separate your code in order 204 00:13:37,496 --> 00:13:43,106 to reduce the amount of code duplication and in order 205 00:13:43,106 --> 00:13:47,856 to ensure that your code falls into these categories 206 00:13:47,856 --> 00:13:50,476 that are easily recognizable by other programmers 207 00:13:50,476 --> 00:13:51,906 and by yourself when you come back 208 00:13:51,906 --> 00:13:53,486 to your code many years later. 209 00:13:54,466 --> 00:14:07,906 So I'm going to go into MVC folder here and let me just -- 210 00:14:11,346 --> 00:14:14,976 I'm actually going to change directory 211 00:14:22,456 --> 00:14:27,966 into the actual folder rather than the temp folder 212 00:14:27,966 --> 00:14:29,206 that I used to demonstrate it. 213 00:14:29,626 --> 00:14:32,676 You might have noticed something there, if you're not familiar 214 00:14:32,676 --> 00:14:37,036 with the command line on when you press -- 215 00:14:37,036 --> 00:14:40,896 when you enter a code into bash like change directory 216 00:14:41,616 --> 00:14:45,896 and then you press tab, you get all these nice suggestions 217 00:14:45,896 --> 00:14:47,646 and then if you start typing 218 00:14:47,836 --> 00:14:49,756 and hit tab it will complier for you. 219 00:14:50,016 --> 00:14:54,646 This can really speed up you're experience 220 00:14:54,686 --> 00:14:56,666 with the command line. 221 00:14:57,396 --> 00:15:05,366 So the -- the code that we were just viewing is 01 underscore 222 00:15:06,076 --> 00:15:14,926 MVC underscore intro and I'm -- this isn't really an example 223 00:15:14,926 --> 00:15:17,916 of model view controller but it's maybe like a first example 224 00:15:18,416 --> 00:15:21,316 of how to think about model view controller. 225 00:15:22,026 --> 00:15:28,416 Here I edit all of the - I enter all of the content into an array 226 00:15:29,156 --> 00:15:33,926 and up here I define the array and then what this syntax 227 00:15:33,926 --> 00:15:39,366 of an array does, is it that it appends this string onto the end 228 00:15:39,366 --> 00:15:43,916 of the array, so each of these paragraphs is appended 229 00:15:43,916 --> 00:15:51,176 to the end of the array and then down here I echo the DOC TYPE, 230 00:15:51,896 --> 00:15:56,046 and the head, and the body and then when it comes time 231 00:15:56,046 --> 00:16:04,856 to actually fill up the well, they are - when it comes times 232 00:16:04,856 --> 00:16:08,806 to actually fill up the blog post area. 233 00:16:09,396 --> 00:16:18,266 Then for each paragraph, in the paragraphs array it puts p tags 234 00:16:18,266 --> 00:16:22,266 around that and echoes it out. 235 00:16:22,686 --> 00:16:28,116 And you'll see over here that we actually have 3 different blog 236 00:16:28,116 --> 00:16:30,886 posts and I did this just to make it look 237 00:16:30,886 --> 00:16:34,196 like they were lots, lots of blog posts in this blog. 238 00:16:34,676 --> 00:16:37,226 So today we're going to discuss maybe how to think 239 00:16:37,226 --> 00:16:39,906 about making a blogging application 240 00:16:39,906 --> 00:16:41,896 in a model view controller sort of way 241 00:16:41,896 --> 00:16:44,666 and this is a first attempt of how to do that. 242 00:16:45,316 --> 00:16:49,916 This is by no means model view controller but it's like kind 243 00:16:49,916 --> 00:16:57,676 of the pre version, so now I'm going to back out and go 244 00:16:57,676 --> 00:17:02,736 into the unfinished model view controller example. 245 00:17:03,186 --> 00:17:07,706 You can see that, I don't know if you can pick that up 246 00:17:07,706 --> 00:17:11,846 on video tape but there's one, two, three different wells 247 00:17:11,936 --> 00:17:18,326 where blog post material will appear but it's unfinished 248 00:17:18,906 --> 00:17:26,726 and the reason why is that it would give away all the secrets 249 00:17:26,726 --> 00:17:27,336 if we did that. 250 00:17:27,336 --> 00:17:32,176 If we go to the number two example, 251 00:17:33,056 --> 00:17:40,246 you'll see this example only has a very small amount of code, 252 00:17:40,596 --> 00:17:43,936 the first thing I do is define the folder 253 00:17:43,936 --> 00:17:47,206 where the application, the web application is actually stored. 254 00:17:47,746 --> 00:17:51,746 So here the web application is stored in app02 255 00:17:52,026 --> 00:17:55,426 because the prefix of this file is 02, 256 00:17:55,586 --> 00:17:59,456 and all of the subsequent versions will have app 03, 257 00:17:59,456 --> 00:18:05,596 app 04 matching the version that we are looking at. 258 00:18:06,466 --> 00:18:09,366 The second thing I do is define 259 00:18:09,526 --> 00:18:14,626 where the model view controller folders are relative 260 00:18:14,626 --> 00:18:18,196 to the app folder, that way with - by just changing one line 261 00:18:18,196 --> 00:18:22,116 of code, I can change the entire directory structure 262 00:18:22,116 --> 00:18:23,496 and update it really easily 263 00:18:24,356 --> 00:18:26,806 and then finally I start the controller 264 00:18:26,806 --> 00:18:30,106 because as the name suggests, the controller is -- 265 00:18:30,726 --> 00:18:32,956 the controller of the application it's the point 266 00:18:32,956 --> 00:18:36,036 of entry into the application. 267 00:18:37,126 --> 00:18:46,796 So I'm going to open the controller which is up top, 268 00:18:47,826 --> 00:18:53,796 we can close this bottom one now and the -- 269 00:18:54,266 --> 00:18:56,916 right now the site doesn't feature an interaction, 270 00:18:57,146 --> 00:18:59,616 so this is going to be a really boring controller page 271 00:18:59,946 --> 00:19:02,696 because right now there -- you know there is nothing clickable 272 00:19:02,696 --> 00:19:05,796 on this page really, there's no user input 273 00:19:05,796 --> 00:19:07,376 that the controller is handling which is 274 00:19:07,426 --> 00:19:09,376 where the controller gets really interesting 275 00:19:09,836 --> 00:19:13,536 and I know the controller will get significantly more complex 276 00:19:13,596 --> 00:19:16,556 the more user interaction you decide to support. 277 00:19:16,556 --> 00:19:23,996 And so the very first thing I do is create a variable that's 278 00:19:24,046 --> 00:19:27,796 going to be passed around from the controller to the model 279 00:19:27,966 --> 00:19:32,306 and then from the controller to the view and as it's passed 280 00:19:32,306 --> 00:19:35,826 around it will be filled with data and change 281 00:19:35,826 --> 00:19:37,816 by each file that's included. 282 00:19:38,556 --> 00:19:43,356 So the only piece of data that I put in was a query, 283 00:19:43,356 --> 00:19:48,786 this is an associate of array, just like how David showed it, 284 00:19:49,146 --> 00:19:54,676 where the key query goes to this query 285 00:19:54,796 --> 00:19:56,546 and this is an XPath query. 286 00:19:56,886 --> 00:19:58,976 Has David talked it all about XPath yet and XML? 287 00:19:59,046 --> 00:20:05,976 In coming weeks he will - he will talk about XML and XPath. 288 00:20:06,936 --> 00:20:11,926 XPath is a way of navigating an XML document 289 00:20:12,676 --> 00:20:17,686 and an XML document consist of and then more 290 00:20:17,686 --> 00:20:18,446 of the same, more s. 291 00:20:18,446 --> 00:20:23,136 The only rule is that it has to close like this so that 292 00:20:23,796 --> 00:20:28,026 for every one of these there's one of these that closes it. 293 00:20:28,026 --> 00:20:29,886 And there are rules to XML as well 294 00:20:29,886 --> 00:20:30,976 like if you have you have 295 00:20:30,976 --> 00:20:35,086 to close before you close the parent tag. 296 00:20:35,086 --> 00:20:40,686 XPath is a language that's used to navigate an XML document, 297 00:20:40,686 --> 00:20:43,196 XML documents are used to store data 298 00:20:43,966 --> 00:20:47,386 and they were used especially at the end of the 90s'. 299 00:20:47,386 --> 00:20:54,346 So if I had on a word that I wanted to get at, that is inside 300 00:20:54,346 --> 00:20:56,256 of the here which is inside of the , I would refer 301 00:20:56,256 --> 00:21:00,756 to that an XPath like /tag/a/ and then you would -- 302 00:21:00,756 --> 00:21:06,496 I mean in XPath you would refer to the text in order 303 00:21:06,496 --> 00:21:13,476 to get the actual text of content but the basic just 304 00:21:13,476 --> 00:21:18,886 of XPath -- and David will explain this more in lecture is 305 00:21:18,886 --> 00:21:21,956 that as you descend into the XPath query, 306 00:21:22,086 --> 00:21:27,316 you descend into the tree of nested tags just like HTML. 307 00:21:27,316 --> 00:21:34,016 So for instance if you wanted to get at the title 308 00:21:34,496 --> 00:21:41,676 of an HTML document using XPath, you could do /html/head/title 309 00:21:41,726 --> 00:21:45,996 and then do the text function or you can access an attribute 310 00:21:45,996 --> 00:21:48,136 and the other silent feature about XPath is 311 00:21:48,136 --> 00:21:53,386 that if there's not just one in this case, 312 00:21:53,656 --> 00:21:58,926 most HTML documents only have one title 313 00:21:59,596 --> 00:22:03,076 but if there are multiple matches for that combination 314 00:22:04,526 --> 00:22:07,836 of parent-child-child, like let's say html/body/a 315 00:22:07,946 --> 00:22:13,746 or maybe /body anything a. This would match all anchors 316 00:22:13,806 --> 00:22:17,746 that are children of something that are children 317 00:22:17,926 --> 00:22:22,216 of the body document that are body element 318 00:22:22,576 --> 00:22:27,376 that are children of the HTML document. 319 00:22:27,866 --> 00:22:34,026 So this would return a whole array of anchor title links, 320 00:22:34,256 --> 00:22:39,196 you might be able to extract you know a 100 links from a document 321 00:22:39,246 --> 00:22:40,176 with this XPath query. 322 00:22:40,176 --> 00:22:42,786 The Xpath is very useful 323 00:22:42,786 --> 00:22:45,916 for doing what's called web scraping, where you try 324 00:22:45,916 --> 00:22:49,386 to scrape large amounts of data from a web page 325 00:22:49,386 --> 00:22:52,006 where it's encoded in HTML. 326 00:22:52,006 --> 00:22:54,936 So I - if you Google Xpath you can get 327 00:22:54,936 --> 00:22:58,786 to an XPath tutorial that'll teach you the very basics. 328 00:22:59,216 --> 00:23:04,426 I think that we know enough to go on with this example, 329 00:23:04,566 --> 00:23:06,756 with this simple example I decided 330 00:23:06,756 --> 00:23:11,396 to make the model store the blog data in XML 331 00:23:11,396 --> 00:23:16,346 since HTML is commonly written like XML. 332 00:23:16,346 --> 00:23:20,816 In many forms of HTML are XML, so if we open up the model 333 00:23:20,816 --> 00:23:22,766 which is the next thing that is included, 334 00:23:22,766 --> 00:23:32,466 so from here we jump up to this document. 335 00:23:32,466 --> 00:23:41,496 In PHP we have a built in object that lets us query XML files - 336 00:23:42,776 --> 00:23:54,486 before we get into that, let's just take a look 337 00:23:55,316 --> 00:24:01,246 at this data.xml file. 338 00:24:56,086 --> 00:25:01,796 The XML file is written in a format called RSS, 339 00:25:01,876 --> 00:25:07,926 though RSS specification actually exists here at Harvard, 340 00:25:08,856 --> 00:25:13,946 the Berkman Center for I think its Internet and Society, 341 00:25:14,036 --> 00:25:17,276 they are the ones that hosted. 342 00:25:17,726 --> 00:25:23,046 Basically RSS is a way of encoding blog posts, 343 00:25:23,466 --> 00:25:27,836 so it's a natural data storage format for a blog, 344 00:25:27,956 --> 00:25:31,196 if you don't need a lot of extra bells and whistles. 345 00:25:32,246 --> 00:25:34,886 So the specification -- 346 00:25:35,266 --> 00:25:38,366 let's see if they have an example, yeah -- 347 00:25:59,056 --> 00:26:02,236 -- well this is a -- I mean this is an example right here. 348 00:26:03,056 --> 00:26:08,756 The parent tag is RSS and inside RSS is channel and you can think 349 00:26:08,756 --> 00:26:14,726 of channel as like a blog site and then the channel, 350 00:26:14,726 --> 00:26:18,526 the blog site will have a blog title and a description 351 00:26:19,806 --> 00:26:26,836 which are - if we go back here, this MVC, that's the blog title 352 00:26:26,956 --> 00:26:29,316 and then this is the description. 353 00:26:29,316 --> 00:26:34,476 And then within that there are blog posts 354 00:26:34,476 --> 00:26:40,506 which in RSS are items and each item has title, author, 355 00:26:40,506 --> 00:26:42,156 pub date, and description. 356 00:26:43,256 --> 00:26:48,656 And in XML as in HTML you need to escape special characters 357 00:26:48,656 --> 00:26:53,676 and one of the most important characters in XML is the less 358 00:26:53,826 --> 00:26:59,856 than symbol and so in XML you would either need to encode this 359 00:27:00,446 --> 00:27:06,676 as ampersand lt; or you would need to make one 360 00:27:06,676 --> 00:27:09,336 of these character data section 361 00:27:09,646 --> 00:27:13,986 which you can see the syntax highlights in vim very nicely. 362 00:27:14,506 --> 00:27:18,776 If we -- if we open a character data section 363 00:27:18,776 --> 00:27:20,596 with that syntax it means 364 00:27:20,736 --> 00:27:25,036 that whatever program is processing the XML it is 365 00:27:25,036 --> 00:27:28,636 to ignore any special XML characters 366 00:27:28,636 --> 00:27:30,496 and just treat it as raw characters. 367 00:27:30,926 --> 00:27:38,126 So for instance this character the

I would normally have 368 00:27:38,176 --> 00:27:39,956 to write the open bracket like this 369 00:27:40,416 --> 00:27:43,046 but because I put it inside a character data section, 370 00:27:43,326 --> 00:27:45,516 I actually don't have to go that far, 371 00:27:45,886 --> 00:27:47,956 I can just interpret it that way. 372 00:27:49,106 --> 00:27:54,376 So here you can see intro to MVC in an 373 00:27:54,376 --> 00:27:58,156 and web developers call dynamic websites web applications, 374 00:27:58,256 --> 00:28:00,886 this is the same content as before, 375 00:28:01,716 --> 00:28:05,576 it's literally the same HTML as before. 376 00:28:06,456 --> 00:28:12,946 But it's just put inside of this data storage format 377 00:28:12,946 --> 00:28:17,736 that also annotates a title, an author, and a pub date 378 00:28:18,306 --> 00:28:24,396 to the description and those are all of the elements in an item 379 00:28:24,776 --> 00:28:29,736 and I put three different items in just like before, 380 00:28:29,906 --> 00:28:32,786 I give them three different dates in case we wanted to try 381 00:28:32,786 --> 00:28:36,376 to separate them out from each other later. 382 00:28:37,236 --> 00:28:46,136 So this function, simple XML load file it actually reads 383 00:28:46,216 --> 00:28:56,266 through the XML file and loads the XML as an object in PHP, 384 00:28:56,266 --> 00:29:03,776 so for instance if I have a variable $var equals simplexml 385 00:29:03,776 --> 00:29:11,136 underscore load underscore file data.xml then now I can access 386 00:29:11,396 --> 00:29:21,716 -- assuming that data.xml is the same as it is up there. 387 00:29:22,426 --> 00:29:30,436 I can go $var and then use the special hyphen greater 388 00:29:31,056 --> 00:29:42,406 than you know arrow descending into a sign that you use 389 00:29:42,406 --> 00:29:48,516 with objects in order to actually access the channel 390 00:29:48,786 --> 00:30:00,746 and then the -- I can then access the, you know, the title 391 00:30:00,986 --> 00:30:06,626 and the item, so it provides access 392 00:30:06,626 --> 00:30:09,976 to the data inside in a PHP variable. 393 00:30:12,266 --> 00:30:19,516 So, now inside of this XML variable, is all of the data 394 00:30:19,516 --> 00:30:23,606 that was in the XML file, but loaded into a PHP variable. 395 00:30:24,476 --> 00:30:32,706 So, because we're in the model, I'm going to store the "AT", 396 00:30:32,776 --> 00:30:45,656 of -- up here at the top of the controller, we put a query 397 00:30:46,346 --> 00:30:50,406 into the data variable and then here in the model, 398 00:30:50,556 --> 00:30:54,046 we're going to replace that query with the action 399 00:30:54,046 --> 00:31:01,556 of running the X path method with that query on the data. 400 00:31:02,126 --> 00:31:04,066 And this X path method, if you -- 401 00:31:04,126 --> 00:31:07,756 you'll become very familiar with it later this term 402 00:31:07,756 --> 00:31:12,936 because we'll be using XML in one of our assignments. 403 00:31:13,296 --> 00:31:21,056 It -- these methods that the simple XML element exposes are 404 00:31:21,056 --> 00:31:24,636 all available right here in the public documentation 405 00:31:24,636 --> 00:31:27,166 of the simple XML element class. 406 00:31:27,726 --> 00:31:29,656 So, you can see that there's a "Count" method, 407 00:31:29,656 --> 00:31:32,306 and there's an "X Path" method, 408 00:31:32,666 --> 00:31:35,516 and there's an "Add Child" method, if you wanted 409 00:31:35,856 --> 00:31:39,696 to add a child element of any one 410 00:31:39,696 --> 00:31:40,916 of those elements, you could. 411 00:31:41,566 --> 00:31:48,826 So, in the model, this executes a query on the data 412 00:31:48,826 --> 00:31:57,126 and then stores it back in the data variable and then returns 413 00:31:58,266 --> 00:32:05,286 to the controller, the control, and if I just comment this 414 00:32:05,286 --> 00:32:11,976 out now, I'm echoing out a preformatted section 415 00:32:12,516 --> 00:32:15,576 and recursively printing out what's inside "Data", 416 00:32:16,306 --> 00:32:22,086 I just save this and then go to S75 sections. 417 00:32:22,276 --> 00:32:29,136 Now, you can see that what's inside that data variable. 418 00:32:30,106 --> 00:32:34,916 You have the query key that points to an array 419 00:32:35,236 --> 00:32:41,006 of simple XML element objects and each one of them has title, 420 00:32:41,006 --> 00:32:42,866 author, pub date, and description. 421 00:32:43,386 --> 00:32:47,986 There's nothing inside of here apparently, but actually, 422 00:32:47,986 --> 00:32:51,176 the whole body of the blog post is inside 423 00:32:51,176 --> 00:32:53,976 that simple XML object. 424 00:32:54,766 --> 00:33:01,366 So, the MVC part of this is that I've separated out the model 425 00:33:01,676 --> 00:33:07,056 and I've modeled it using a storage format that's designed 426 00:33:07,126 --> 00:33:11,826 for my domain, in this case, "Blogs" and the part 427 00:33:11,826 --> 00:33:14,876 where I'm accessing and retrieving data, 428 00:33:14,876 --> 00:33:16,076 that's done by the model. 429 00:33:16,496 --> 00:33:21,326 And then I pass the data off to the "View". 430 00:33:21,796 --> 00:33:25,976 I'm going to close the model now and open the view 431 00:33:26,306 --> 00:33:36,746 and like David's first examples, I have the doc type 432 00:33:36,746 --> 00:33:40,536 and then I include a header and then I close the head 433 00:33:40,536 --> 00:33:43,346 and open the body and then I include some top bar 434 00:33:44,016 --> 00:33:47,136 and some content files. 435 00:33:47,296 --> 00:34:03,936 Maybe if I open up the content file, you can see that I have 436 00:34:04,406 --> 00:34:12,196 "for each loop", that "for each" data query as post. 437 00:34:13,476 --> 00:34:19,426 Then what this does is it will -- if I had more than one -- 438 00:34:21,066 --> 00:34:26,966 over here, I have zero, one, two different objects 439 00:34:26,966 --> 00:34:29,526 that are inside of the query array. 440 00:34:30,076 --> 00:34:34,856 So, as I loop through them with the "for each" loop, 441 00:34:35,236 --> 00:34:39,226 it assigns the post variable to the very first one 442 00:34:39,226 --> 00:34:42,116 and that includes "post.PHP" 443 00:34:42,116 --> 00:34:46,936 and this first simple XML object is available inside the post 444 00:34:46,936 --> 00:34:48,776 variable when you include it the first time. 445 00:34:49,236 --> 00:34:53,066 Then it loops again with the second one 446 00:34:53,066 --> 00:34:55,396 and assigns the post variable accordingly. 447 00:34:55,466 --> 00:35:00,506 So, inside "post.PHP" I can access the post just 448 00:35:00,506 --> 00:35:05,516 with the post variable much like David was doing with the title. 449 00:35:05,516 --> 00:35:07,546 I'm passing in the title. 450 00:35:08,366 --> 00:35:19,326 So, let me close the data and I'll open up "App02/view/post" 451 00:35:19,396 --> 00:35:27,466 so that you can see that the data is available here 452 00:35:27,466 --> 00:35:28,826 in the post variable. 453 00:35:29,686 --> 00:35:33,206 So, let me go down to the controller -- 454 00:35:33,636 --> 00:35:36,566 yeah, I already commented 455 00:35:36,566 --> 00:35:40,476 out that echoing of the data variable. 456 00:35:40,926 --> 00:35:42,576 So, we have these three wells here. 457 00:35:43,266 --> 00:35:46,956 What could we change inside this file in order 458 00:35:46,956 --> 00:35:54,996 to make just the actual description pop out 459 00:35:55,266 --> 00:35:56,816 or maybe even just the title? 460 00:35:57,246 --> 00:36:00,026 Assuming that the simple XML object is stored 461 00:36:00,026 --> 00:36:05,806 in the post variable which is now available right here inside 462 00:36:05,806 --> 00:36:08,476 post.PHP, what could we echo out? 463 00:36:08,476 --> 00:36:19,096 Well, the -- the answer is that we have to keep in our minds -- 464 00:36:19,796 --> 00:36:21,736 let's see if it's available, no that's not -- 465 00:36:21,946 --> 00:36:27,976 you have to keep in your minds the structure of what's inside - 466 00:36:37,046 --> 00:36:37,816 -- the variable. 467 00:36:37,816 --> 00:36:41,736 So, inside each of these variables, 468 00:36:41,736 --> 00:36:45,196 there's a title element available right there. 469 00:36:45,746 --> 00:36:49,976 So, if I do "echo post title" -- 470 00:37:00,676 --> 00:37:05,646 Now, I see the first post title, and the second post title, 471 00:37:05,646 --> 00:37:11,806 and the third post title. 472 00:37:12,186 --> 00:37:16,086 And the other data pieces, 473 00:37:16,086 --> 00:37:20,336 we could put together a little template for post right here 474 00:37:20,426 --> 00:37:24,236 in post.PHP using the post variable 475 00:37:24,236 --> 00:37:26,326 and it changes it for each post. 476 00:37:27,046 --> 00:37:39,516 So, let's skip ahead to the MVC with no link functionality. 477 00:37:40,586 --> 00:37:49,796 So, now I've gone in and made it so that only one post appears 478 00:37:49,796 --> 00:37:52,636 on the front page, but it's clear that the post.PHP 479 00:37:52,726 --> 00:37:56,476 that we were just looking at has been flushed out so 480 00:37:56,476 --> 00:38:01,376 that I have the post title hyperlinked nicely 481 00:38:01,686 --> 00:38:04,806 and the posted by and the date 482 00:38:04,956 --> 00:38:09,396 and the other meta data included in the post. 483 00:38:09,926 --> 00:38:20,736 And we'll just take a look at that, so you can see that in 03, 484 00:38:20,736 --> 00:38:22,816 nothing has changed except for this digit. 485 00:38:23,806 --> 00:38:32,746 Now, its 03 and we'll look at "post". 486 00:38:34,536 --> 00:38:41,586 So, we have an H2 tag with a post going to the link, 487 00:38:41,586 --> 00:38:45,686 and a post going to the title, and a post going 488 00:38:45,686 --> 00:38:47,646 to the description, and a post going to the author, 489 00:38:47,646 --> 00:38:49,206 and a post going to the pub date. 490 00:38:50,186 --> 00:38:53,096 So, that's basically all it took to create 491 00:38:53,096 --> 00:38:54,876 that basic functionality. 492 00:38:55,726 --> 00:39:04,266 If we go to the controller, you can see at the top here, 493 00:39:04,556 --> 00:39:07,396 we have this navigation and right now, it's broken. 494 00:39:07,576 --> 00:39:10,856 It doesn't do anything but you can see that's common paradigm 495 00:39:10,856 --> 00:39:11,496 for blog. 496 00:39:11,976 --> 00:39:13,676 This is where the controller will come it. 497 00:39:14,126 --> 00:39:16,876 It's the controller that will accept my key presses here 498 00:39:17,366 --> 00:39:23,546 and turn them into the desired view that the user wants to see 499 00:39:23,946 --> 00:39:25,576 and it's the controller that's responsible 500 00:39:25,576 --> 00:39:28,326 for querying the data and setting up the data 501 00:39:28,326 --> 00:39:34,196 and then returning it to the view to be rendered correctly. 502 00:39:34,766 --> 00:39:35,976 So, let's look at the controller. 503 00:39:45,296 --> 00:39:51,576 So, new in app03, I created a variable called "the post number 504 00:39:51,576 --> 00:39:54,646 to display" and this is just the number 505 00:39:54,646 --> 00:39:58,836 of the post in the data.XML file. 506 00:39:59,176 --> 00:40:02,016 So, the very first item would be the number one, 507 00:40:02,286 --> 00:40:04,536 the very second item would be number two, 508 00:40:04,536 --> 00:40:05,976 the third item would be number three and so forth. 509 00:40:08,916 --> 00:40:15,556 Also new in app03, inside the data variable, 510 00:40:15,556 --> 00:40:18,896 I've included not just one query but two queries. 511 00:40:19,236 --> 00:40:28,746 So, I've included the -- the very first one is the -- 512 00:40:28,966 --> 00:40:39,226 this is querying the item elements that are children 513 00:40:39,226 --> 00:40:41,776 of channel elements that are children of RSS elements 514 00:40:41,836 --> 00:40:45,886 and then in X path, you are able to apply what's called a 515 00:40:45,886 --> 00:40:47,646 "predicate" in Computer Science. 516 00:40:48,116 --> 00:40:53,726 A predicate is a set of true-false conditions in order 517 00:40:53,726 --> 00:40:56,826 to lower down the number of results 518 00:40:56,896 --> 00:40:58,356 that you get from a search. 519 00:40:58,926 --> 00:41:02,316 So, in this case, we take the array of items 520 00:41:02,946 --> 00:41:09,126 and we return only the ones whose position X path method 521 00:41:09,426 --> 00:41:12,246 equals the post number to display. 522 00:41:12,426 --> 00:41:15,436 So, in this case, the very default is 523 00:41:15,436 --> 00:41:19,636 to put the post number to display as one and if I were 524 00:41:19,636 --> 00:41:24,766 to change that to two and refresh this, then now, 525 00:41:24,766 --> 00:41:26,126 I get the second post. 526 00:41:26,896 --> 00:41:29,106 So, we're just kind of building the skeleton 527 00:41:29,106 --> 00:41:31,976 for more dynamic functionality but it's not very -- 528 00:41:32,206 --> 00:41:34,996 it's just displaying the newest post 529 00:41:34,996 --> 00:41:37,056 which is a fine default behavior. 530 00:41:38,226 --> 00:41:45,586 Also, there's an X path method "Count" which counts the number 531 00:41:46,246 --> 00:41:54,686 of elements returned by this X path query and these are things 532 00:41:54,726 --> 00:41:56,906 that you will have an opportunity 533 00:41:56,906 --> 00:42:01,156 to explore during the XML assignment, when you'll get 534 00:42:01,156 --> 00:42:02,876 to know X path pretty well. 535 00:42:03,766 --> 00:42:08,366 So, I include "model.PHP", 536 00:42:08,366 --> 00:42:15,386 let's see how that's changed, app03 model. 537 00:42:15,546 --> 00:42:26,286 So, we're still loading the file but what's new is 538 00:42:26,376 --> 00:42:32,426 that for every single thing in the data variable 539 00:42:33,366 --> 00:42:38,806 as variable name goes to X path, this is -- 540 00:42:38,806 --> 00:42:40,496 this might be a new construct. 541 00:42:40,986 --> 00:42:42,946 Has David showed this type before, 542 00:42:42,946 --> 00:42:44,296 each loop before with PHP? 543 00:42:44,296 --> 00:42:49,506 I think this might be actually new for this class. 544 00:42:49,506 --> 00:42:57,236 Associative arrays are arrays where one text key leads 545 00:42:57,346 --> 00:43:03,856 to another value and when you are looping 546 00:43:03,976 --> 00:43:09,066 through associative arrays, you can get access to both the key 547 00:43:09,066 --> 00:43:10,636 and the variable in 548 00:43:10,636 --> 00:43:13,766 "named variables" inside "for each loops." 549 00:43:14,406 --> 00:43:20,486 So, for -- what happens in this for each loop is 550 00:43:20,486 --> 00:43:24,856 that we have this key going to this value 551 00:43:25,316 --> 00:43:27,436 and this key going to this value. 552 00:43:27,796 --> 00:43:36,546 So, the very first time it puts the posts to display key 553 00:43:36,546 --> 00:43:43,056 in data equal to the result of executing this query 554 00:43:43,436 --> 00:43:47,016 on the XML data source and then it does the same thing 555 00:43:47,016 --> 00:43:48,106 with the next query. 556 00:43:48,106 --> 00:43:51,006 So, basically this construct, 557 00:43:51,686 --> 00:43:53,956 the very first part is the variable we want 558 00:43:53,956 --> 00:43:57,026 to store the result of the query in and the second part is 559 00:43:57,026 --> 00:43:59,786 "what is the X path query that we want to execute?" 560 00:44:00,516 --> 00:44:05,346 And after it passes through the model, then we can assume 561 00:44:05,346 --> 00:44:10,136 that if the RSS -- if the X path query didn't fail, 562 00:44:10,656 --> 00:44:13,106 that the data is stored 563 00:44:13,106 --> 00:44:19,936 in the appropriate keys inside the data array. 564 00:44:20,886 --> 00:44:29,316 So, now we just pass it on to the view. 565 00:44:29,316 --> 00:44:33,576 In this case, this control -- 566 00:44:33,576 --> 00:44:37,736 these controls up here are not linked in yet to the IDs 567 00:44:38,196 --> 00:44:44,036 but you can already predict how -- if this is the number one 568 00:44:44,406 --> 00:44:47,536 and this is post ID one, and this is number two 569 00:44:47,536 --> 00:44:49,516 and the next post is post ID two, 570 00:44:49,566 --> 00:44:53,556 you can already predict how using a "GET" parameter, 571 00:44:53,896 --> 00:44:57,416 you could pass things in, that the controller would be able 572 00:44:57,416 --> 00:45:01,976 to interpret as an action to draw different information 573 00:45:02,096 --> 00:45:05,836 from the database or in this case from the model. 574 00:45:07,156 --> 00:45:16,356 So, let's back out and go to the actual example. 575 00:45:21,836 --> 00:45:27,696 So, now we have a model view controller with links, 576 00:45:27,996 --> 00:45:30,236 you can see it shows one per page 577 00:45:31,106 --> 00:45:33,136 and there's a previous and next button. 578 00:45:33,756 --> 00:45:38,096 If you click "next", it lets you go to the next one until we get 579 00:45:38,096 --> 00:45:39,786 to the third one and it's greyed out 580 00:45:39,786 --> 00:45:41,166 and I can't click anything there. 581 00:45:41,716 --> 00:45:45,236 And if I go to the previous one, it gets greyed 582 00:45:45,236 --> 00:45:46,596 out when I get to the first one. 583 00:45:47,246 --> 00:45:51,786 So, this functionality is provided by the controller. 584 00:45:52,076 --> 00:45:55,866 This is where the user interaction design actually 585 00:45:55,926 --> 00:45:58,326 starts to get more rich. 586 00:45:59,456 --> 00:46:04,296 So, if you go into -- first of all, 587 00:46:04,296 --> 00:46:07,726 let's look at the controller, 588 00:46:09,276 --> 00:46:14,366 we'll look at app04/controller/controller. 589 00:46:14,926 --> 00:46:25,456 So, new in app04 is that we're taking the post number 590 00:46:25,456 --> 00:46:29,976 to display from a "GET" variable so you can see that if I click 591 00:46:29,976 --> 00:46:34,566 "next" here and then scroll way to the end, post -- 592 00:46:34,836 --> 00:46:37,636 I have post underscore number equals two. 593 00:46:38,326 --> 00:46:40,136 So, right here it's checking to see 594 00:46:40,136 --> 00:46:43,746 if post underscore number is set and if it is, 595 00:46:43,846 --> 00:46:45,346 then it sets the post number 596 00:46:45,346 --> 00:46:48,636 to display equal to that post number. 597 00:46:49,176 --> 00:46:54,746 So, I should be able to change it just by doing that 598 00:46:54,746 --> 00:46:57,896 and this is the third post. 599 00:46:59,216 --> 00:47:03,716 Finally, and this is where the controller really does 600 00:47:03,716 --> 00:47:04,576 some controlling. 601 00:47:04,956 --> 00:47:06,946 If the post number to display is less 602 00:47:07,076 --> 00:47:09,076 than one, it sets it to one. 603 00:47:09,386 --> 00:47:12,756 So, the controller's responsible for setting boundaries on things 604 00:47:12,756 --> 00:47:18,716 and making sure that things don't behave outside 605 00:47:18,716 --> 00:47:23,436 of the normal parameters that they're supposed to. 606 00:47:24,036 --> 00:47:30,486 And this part executes the same as in the previous example, 607 00:47:30,486 --> 00:47:32,846 it goes through the model. 608 00:47:33,256 --> 00:47:36,846 The post number to display is just controlled 609 00:47:36,846 --> 00:47:38,096 by the "GET" parameter. 610 00:47:39,086 --> 00:47:45,716 The -- in this example, 611 00:47:45,716 --> 00:47:51,776 I've actually included the post number to display as part 612 00:47:51,776 --> 00:47:56,446 of the data variable to pass to the view because these previous 613 00:47:56,446 --> 00:47:58,356 "next" buttons, they need 614 00:47:58,356 --> 00:48:02,356 to know what the current ID number is in order 615 00:48:02,356 --> 00:48:04,236 to know what's previous and what's next. 616 00:48:05,476 --> 00:48:10,306 So, if I click here, you can see that this knows 617 00:48:10,306 --> 00:48:13,376 that the previous link is -- 618 00:48:13,556 --> 00:48:16,936 has post underscore number equals two at the very end 619 00:48:17,586 --> 00:48:21,686 and that's because I included 620 00:48:21,686 --> 00:48:26,116 that information before I requested the view. 621 00:48:26,846 --> 00:48:32,716 So, in here, I made the -- 622 00:48:32,836 --> 00:48:36,266 a variable called "number of posts" that's equal 623 00:48:36,266 --> 00:48:44,306 to the count, which is a PHP function that counts the number 624 00:48:44,306 --> 00:48:46,406 of elements in an array data. 625 00:48:47,046 --> 00:48:53,506 The number of posts query that we issued 626 00:48:53,506 --> 00:48:56,956 to the model returned an array of things, 627 00:48:57,046 --> 00:48:59,996 an array of simple XML element objects 628 00:49:00,606 --> 00:49:05,846 and the count function here counts the number of elements 629 00:49:05,846 --> 00:49:09,596 that are in that array and assigns it to the number 630 00:49:09,696 --> 00:49:11,786 of posts variable in data. 631 00:49:11,786 --> 00:49:16,096 So, let's take a look at what this looks 632 00:49:16,096 --> 00:49:20,266 like in the data variable. 633 00:49:25,916 --> 00:49:32,326 You can see we have the posts to display query filled 634 00:49:32,326 --> 00:49:34,626 in with the results from the query 635 00:49:34,626 --> 00:49:37,456 that the model did for the controller. 636 00:49:37,876 --> 00:49:40,596 And then down here we have the number of posts 637 00:49:41,326 --> 00:49:47,796 which was assigned right here and we have the post number 638 00:49:47,796 --> 00:49:56,606 to display and the next post URL which is nothing in this case 639 00:49:56,606 --> 00:50:00,896 because the number of posts equals the post number 640 00:50:00,896 --> 00:50:01,686 to display. 641 00:50:01,686 --> 00:50:06,346 And you wouldn't want to display the next post URL 642 00:50:06,346 --> 00:50:09,806 because it would -- if your user clicked on it, 643 00:50:09,806 --> 00:50:11,796 they might get some unexpected functionality 644 00:50:11,796 --> 00:50:16,306 like them being able to see -- 645 00:50:17,036 --> 00:50:19,976 try to query a post that didn't actually exist. 646 00:50:20,946 --> 00:50:29,206 So, if I click "previous", you can see how this changes. 647 00:50:30,156 --> 00:50:32,476 Now, the post number display is two 648 00:50:33,176 --> 00:50:40,186 and I have both the next post URL and the previous post URL 649 00:50:40,326 --> 00:50:42,906 and the view is kind of dumb. 650 00:50:42,986 --> 00:50:46,636 All it does is take the variables from the controller 651 00:50:46,796 --> 00:50:48,906 because the controller is controlling the behavior. 652 00:50:50,196 --> 00:50:59,796 And then if I open up the 653 00:50:59,796 --> 00:51:03,906 "view" everything happens inside of "content". 654 00:51:15,046 --> 00:51:24,276 So, this goes through the -- this is the same as before -- 655 00:51:24,276 --> 00:51:24,926 this is not actually new. 656 00:51:33,356 --> 00:51:35,006 If we go inside "post", 657 00:51:35,916 --> 00:51:40,286 we already pretty much looked at this. 658 00:51:40,286 --> 00:51:46,736 The only differing content is the navigation, 659 00:51:47,646 --> 00:51:56,376 this stuff right here which if we actually look at the -- 660 00:51:56,486 --> 00:52:02,386 if we look at the content, I'll say "new in app04", 661 00:52:02,996 --> 00:52:07,546 now we have -- actually, I think it was app03. 662 00:52:07,546 --> 00:52:20,916 Now, we have a pagination of PHP and here is the logic that -- 663 00:52:20,916 --> 00:52:23,216 it's not even really logic. 664 00:52:23,216 --> 00:52:31,546 It's almost like declarative but basically, I create this phrase, 665 00:52:31,546 --> 00:52:34,996 "class equals disabled" and if it's -- 666 00:52:35,586 --> 00:52:39,376 if an element has "class equals disabled" on it, 667 00:52:39,656 --> 00:52:42,836 then it turns grey and becomes inaccessible. 668 00:52:43,396 --> 00:52:52,796 And so, I check to see if the previous post URL is -- 669 00:52:53,306 --> 00:52:56,316 has a string length that's less than one 670 00:52:56,516 --> 00:53:00,086 which basically means I checked to see if it's empty. 671 00:53:01,076 --> 00:53:06,716 And if it is, this is using the "Tannery" structure syntax 672 00:53:06,716 --> 00:53:10,596 in PHP, this right here is a -- 673 00:53:10,836 --> 00:53:13,436 because it has parenthesis around it, it evaluations 674 00:53:13,436 --> 00:53:20,316 to a Boolean true or false, and then the Tannery structure says 675 00:53:20,376 --> 00:53:22,196 that after the question mark, you -- 676 00:53:22,666 --> 00:53:25,896 if it's true, then you return what's here and if it's false, 677 00:53:25,956 --> 00:53:26,936 then you return what's here. 678 00:53:27,956 --> 00:53:30,566 So, if it's true that the string length 679 00:53:30,796 --> 00:53:34,026 of the previous post URL is less than one or basically 680 00:53:34,026 --> 00:53:36,006 if it's true that there's no previous post, 681 00:53:36,576 --> 00:53:44,626 then the disabled previous variable will contain this 682 00:53:44,686 --> 00:53:46,196 "class equals disabled." 683 00:53:47,056 --> 00:53:55,656 And farther down, here's a list element that provides a space 684 00:53:56,126 --> 00:54:00,346 for disabled previous variable to echo 685 00:54:00,346 --> 00:54:04,406 out this class equals disabled if it's appropriate, 686 00:54:04,656 --> 00:54:08,256 only if the URL is not present. 687 00:54:08,686 --> 00:54:18,746 And here, I'm taking the link directly from the variable 688 00:54:18,746 --> 00:54:20,756 that was stored in data by the controller. 689 00:54:21,526 --> 00:54:25,966 So, this controller has really simple functionality. 690 00:54:26,206 --> 00:54:29,976 It doesn't really do all that much. 691 00:54:30,016 --> 00:54:37,576 An example of a more expanded controller would be being able 692 00:54:37,616 --> 00:54:47,706 to click on a link and have it actually enter somewhere 693 00:54:47,706 --> 00:54:54,386 in the URL, the actual title, "Hipster Ipsum," and being able 694 00:54:54,386 --> 00:54:57,066 to query it from the database by title. 695 00:54:57,066 --> 00:55:00,726 A lot of blogs have that ability, in fact, it's called -- 696 00:55:00,726 --> 00:55:05,356 it's usually called the "slug" where there's a portion 697 00:55:05,356 --> 00:55:06,956 of the URL that refers 698 00:55:06,996 --> 00:55:09,126 to the actual content that's referred -- 699 00:55:09,126 --> 00:55:11,476 or that's queried from the database. 700 00:55:12,056 --> 00:55:15,296 That would be some more advanced controller functionality 701 00:55:15,296 --> 00:55:16,296 that you can include. 702 00:55:16,296 --> 00:55:23,956 In order to think about that, you would need to think 703 00:55:23,956 --> 00:55:29,306 about how to generate links in PHP from the database 704 00:55:29,306 --> 00:55:30,706 and how to echo them out. 705 00:55:30,956 --> 00:55:33,576 This is something David's spent a significant amount of time on 706 00:55:33,576 --> 00:55:36,206 but it's something for you to spend a lot of time 707 00:55:36,206 --> 00:55:39,716 on as you're preparing the very first assignment. 708 00:55:40,056 --> 00:55:44,556 Because you'll be drawing items from a database 709 00:55:44,596 --> 00:55:49,056 and it'll be important for those links 710 00:55:50,016 --> 00:55:51,736 that are generated dynamically 711 00:55:51,906 --> 00:55:54,306 to not pose a security threat to the user. 712 00:55:55,256 --> 00:56:03,936 So, let me close out of some of these and refer to -- 713 00:56:04,536 --> 00:56:07,966 I think its 05, yeah -- 714 00:56:16,076 --> 00:56:21,276 -- so, what if I wanted to make a page title called, 715 00:56:21,276 --> 00:56:25,566 "Correct Usage of the Pre-Element," and I wanted 716 00:56:25,566 --> 00:56:32,386 to have it actually appear in a link and also have it appear 717 00:56:32,386 --> 00:56:37,366 in a URL so that you could refer to it like this, 718 00:56:37,366 --> 00:56:40,376 "page title equals Correct Usage of Pre." 719 00:56:40,916 --> 00:56:43,586 As you can see, that looks kind of funny on its own. 720 00:56:43,586 --> 00:56:44,906 URLs can't have spaces. 721 00:56:44,906 --> 00:56:50,066 It's not enough for you to just put the title in there, 722 00:56:50,476 --> 00:56:53,936 so there are several different functions that you have 723 00:56:53,936 --> 00:57:05,256 to know about, and the way to think about it is 724 00:57:05,256 --> 00:57:12,906 that the dynamically created path I've stored here 725 00:57:12,906 --> 00:57:19,566 in this variable path and then the page title I've stored 726 00:57:19,566 --> 00:57:22,436 in this variable "page title" 727 00:57:22,436 --> 00:57:24,656 and then the page title link text. 728 00:57:24,656 --> 00:57:28,286 In this case, I want this link right here 729 00:57:28,286 --> 00:57:34,286 to actually have inside the A tag, the very same value 730 00:57:34,286 --> 00:57:40,866 that I'm transmitting inside the URL as the title and of course, 731 00:57:41,486 --> 00:57:44,586 this less than sign pre-greater than sign, 732 00:57:44,586 --> 00:57:46,566 that's a special HTML token. 733 00:57:46,936 --> 00:57:48,916 So, if you were to just write that in the page, 734 00:57:49,406 --> 00:57:53,386 the HTML page would interpret that as a literal "pre" 735 00:57:53,736 --> 00:57:56,776 which means to -- everything is preformatted after that. 736 00:57:56,776 --> 00:57:58,796 And so, it would mess up the encoding -- 737 00:57:58,796 --> 00:58:01,626 or not the encoding -- but the -- 738 00:58:01,956 --> 00:58:07,786 it would mess up the display of your entire page. 739 00:58:08,756 --> 00:58:17,776 So, the way to think about this is that the portion of your URL 740 00:58:18,426 --> 00:58:22,496 that is before the question mark, 741 00:58:23,506 --> 00:58:28,106 that is dynamically generated by PHP, that part you want 742 00:58:28,106 --> 00:58:39,146 to use while URL encode, which transforms all of the characters 743 00:58:39,206 --> 00:58:46,026 that are illegal into these hexadecimal codes and then 744 00:58:46,386 --> 00:58:48,786 for the portion after the question mark, 745 00:58:49,576 --> 00:58:52,886 for the actual parameters like page title, 746 00:58:53,136 --> 00:58:58,286 you want to use URL encode which does a similar thing. 747 00:58:58,576 --> 00:59:04,676 And here, you can see that URL encode put the plus sign inside 748 00:59:05,006 --> 00:59:09,646 -- instead of a space, in between the different tokens 749 00:59:09,646 --> 00:59:14,226 in the title and that looks more friendly on the -- 750 00:59:14,356 --> 00:59:21,486 as a parameter than a percent 20 or percent 32 751 00:59:21,486 --> 00:59:25,376 or whatever that ask key code is. 752 00:59:25,636 --> 00:59:27,406 And then finally, when you link -- 753 00:59:28,276 --> 00:59:31,116 when you actually make the code that's going to link 754 00:59:31,116 --> 00:59:36,076 out to the page, you want to echo the HTML special chars 755 00:59:36,726 --> 00:59:41,616 of the URL and of the link text. 756 00:59:42,196 --> 00:59:46,796 Because the assumption here is that the next X version 757 00:59:46,796 --> 00:59:49,946 of the model view controller application is going 758 00:59:49,946 --> 00:59:51,826 to support these page titles. 759 00:59:52,246 --> 00:59:56,786 So, someone could enter in a title here 760 00:59:57,026 --> 01:00:00,036 that would then be echoed out to the screen in a link, 761 01:00:00,556 --> 01:00:03,876 and you want to make sure that somebody doesn't take advantage 762 01:00:03,876 --> 01:00:08,166 of that functionality to dynamically insert a link 763 01:00:08,166 --> 01:00:10,506 into your page that includes a script tag 764 01:00:11,006 --> 01:00:14,536 that could house some JAVA script 765 01:00:14,536 --> 01:00:16,876 that could steal some information and send it away 766 01:00:16,876 --> 01:00:19,646 to somebody else, which is a security concern. 767 01:00:20,246 --> 01:00:22,086 So basically, whenever you're echoing something 768 01:00:22,086 --> 01:00:26,576 out to the screen, you want to use HTML's special chars 769 01:00:27,176 --> 01:00:31,976 and you want to use URL encode for your parameters. 770 01:00:35,386 --> 01:00:42,426 So, that's pretty much everything I have for MVC. 771 01:00:42,426 --> 01:00:44,956 Do you guys have any questions about any 772 01:00:44,956 --> 01:00:47,146 of the MVC functionality or about anything else 773 01:00:47,146 --> 01:00:47,976 that David's mentioned today? 774 01:00:55,086 --> 01:01:01,736 This is -- model view controller is -- it's deceptively simple 775 01:01:02,246 --> 01:01:07,476 and there are -- there are lots of purists out there and they -- 776 01:01:07,596 --> 01:01:14,376 that feel righteous about their opinion 777 01:01:14,456 --> 01:01:17,496 about model view controller and how it should be implemented. 778 01:01:17,846 --> 01:01:26,816 The general theory here is that you want two things in -- 779 01:01:27,826 --> 01:01:30,566 to apply and this is something that we'll be looking 780 01:01:30,566 --> 01:01:34,586 at when we evaluate the quality of your code. 781 01:01:34,656 --> 01:01:38,426 We don't -- we want you to follow the DRY, 782 01:01:38,486 --> 01:01:40,256 the "don't repeat yourself" principle. 783 01:01:40,526 --> 01:01:42,216 If you're coding something more than once, 784 01:01:42,706 --> 01:01:44,886 you should probably figure out a way to code it once. 785 01:01:45,716 --> 01:01:51,486 You also want to follow the separation of concerns principle 786 01:01:51,776 --> 01:01:56,226 which means that for different areas of your web application 787 01:01:56,226 --> 01:01:58,366 that perform different types of activities, 788 01:01:58,686 --> 01:02:03,566 you want to keep them separated and that's good for security. 789 01:02:03,566 --> 01:02:08,676 It's good for mental clarity, and the maintainability 790 01:02:08,676 --> 01:02:14,386 of the code as well as just making it comprehensible 791 01:02:14,386 --> 01:02:17,806 to people that are coming across your code 792 01:02:17,806 --> 01:02:18,876 for the very first time. 793 01:02:19,466 --> 01:02:25,366 So, these are the -- these are the spiritual guiding forces 794 01:02:25,366 --> 01:02:26,036 behind MVC. 795 01:02:26,226 --> 01:02:29,546 There are many, many ways to implement it. 796 01:02:29,986 --> 01:02:36,346 It's a great paradigm to experiment with in this class 797 01:02:36,606 --> 01:02:38,596 because as soon as you're done with this class, 798 01:02:39,306 --> 01:02:43,836 you'll probably want to start using some model view framework 799 01:02:43,836 --> 01:02:45,936 or model view controller frameworks 800 01:02:46,596 --> 01:02:51,566 and once you're using frameworks, then it helps 801 01:02:51,566 --> 01:02:53,916 if you've already implemented it a few times yourself. 802 01:02:54,356 --> 01:02:55,656 So, I highly encourage you 803 01:02:55,656 --> 01:02:58,096 to implement model view controller yourself 804 01:02:58,536 --> 01:03:01,746 and if you're unsure how to do that, ask some things 805 01:03:01,746 --> 01:03:07,376 on the CS 50 help site or CS 75 help site and, you know, 806 01:03:07,376 --> 01:03:09,996 shoot questions off to David and the other TFs. 807 01:03:10,616 --> 01:03:13,786 If there are no other questions, 808 01:03:13,786 --> 01:03:16,716 I think that that's definitely enough. 809 01:03:17,366 --> 01:03:18,976 Thank you guys so much.