Structuring our Site4:50 with Alena Holligan
In this video, we'll cover the file structure of our application and move the starter files into their place.
After you install the slim skeleton project, you're ready to grab the files we'll be using for this course in the project downloads. You will find starter files structured as follows:
_public |_css |_custom.css |_images |_emerson.jpg _templates |_about.phtml |_contact-form.phtml |_contact-text.phtml |_footer.phtml |_header.phtml |_thankyou.phtml
When we open this index.php file, 0:00 the first thing we see is some code to help the built-in PHP dev server. 0:02 If you're using MAM or another local development environment, 0:08 you probably won't need this code. 0:12 After that we require the Composer autoload. 0:14 The autoload is followed by starting a session. 0:18 After the session we get to actually building our app. 0:21 We have settings stored in a settings file that we pass when we 0:26 create our app object. 0:31 Then we have the different control pieces of our application, 0:33 stored in separate files. 0:37 We have dependencies, middleware, and routes. 0:39 This controller ends with a call to run our app. 0:44 Even though this file is the front controller, it delegates most 0:48 of that control to separate files within the SRC or source folder. 0:53 This is the C, or controller portion of the MVC pattern. 0:58 All these controller files are within a single folder but divided into different 1:03 files to more fully organize the different tasks of the application. 1:08 We'll look at each of those files as we build our app. 1:13 After the source folder, we have a templates folder. 1:17 This is the V, or view portion, of MBC. 1:21 It contains the presentation files for the website. 1:25 The folder currently contains a single index.phtml file. 1:29 The phtml file extension is sometimes used 1:34 to signify that this page contains little If any logic. 1:38 And is mostly used for presentation-related code, primarily HTML. 1:43 It actually doesn't matter what extension is used here because the controller 1:48 is telling the server how to handle this file. 1:53 You could even make up your own extension, but I wouldn't suggest going that far. 1:56 Next, we have our test folder. 2:01 This is where we will put any unit or functional test files. 2:04 We won't be getting into testing in this course, but check the notes for 2:08 more information. 2:12 The final folder is the vender folder. 2:13 This is where Composer installed Slim, and all the other third party dependencies. 2:15 After that, we have some files for managing the application but 2:20 not actually running it. 2:24 There are the .gitignore and the composer files for helping with version control. 2:26 And a couple of markdown files here and here about using and 2:31 contributing to the skeleton project. 2:36 And then we have some setting files for php unit and docker. 2:39 Again, none of these files are used when actually running our application. 2:44 We've seen the v portion and the c portion of our mvc structure, but where's the m? 2:49 M stands for model and represents the data in an application. 2:55 This would be things such as connecting to a database or an API. 3:00 The application we're going to build here isn't going to have any real data. 3:05 Just some text and a form containing our views. 3:10 We don't actually need to model anything. 3:13 Let's finish out this video by adding the code we need to display our site. 3:16 When you download the files attached to this video, there will be two folders. 3:21 The templates folder with our views, and 3:25 a public folder with the css and image needed to format our site. 3:29 I've named all the views with a .phtml extension. 3:34 So you can remember that you can use this extension and 3:39 also that these files are for presentation code. 3:42 If you look at one of these files like about.phtml, 3:45 you'll see that it's really just html with some includes. 3:49 We can move all these files into our projects folder. 3:55 You can replace or merge the folders when requested. 4:01 In our templates folder, we can also remove index.phtml. 4:05 The only other thing we need to do is point to our new about.phtml view. 4:11 This is handled in our routes file. 4:18 Let's open source routes.php, 4:21 we'll change index to about. 4:25 Now we're ready to go back and preview this in the browser. 4:28 If we moved all of our display files to the right place and 4:33 changed our route, we'll see our site is displayed properly. 4:37 We can't navigate anywhere yet, so we'll need to set up some additional routes. 4:42 But first, let's take a look at the dependencies. 4:47
You need to sign up for Treehouse in order to download course files.Sign up