Hello Friends. And the last lesson we got our app to start. So we actually saw this page which is the default home page with phoenix. So what we learned today is how we could modify that to our new home page. That is you know, more suited for our application and not the default phoenix home page before I get there. I want to explain a little bit about how phoenix does things you may be familiar with the NBC architecture, which is model view controller but generally works like this. It kind of, you have a controller that connects with the model and then usually the controller will render a view sometimes if you can actually in depending on the framework, can access the model directly. Um that's usually this kind of point you might think of as a standard um NBC architecture, the whole idea of it is that you separate the different concerns of your app into different files and those files will be structured depending on the language. For example, if you're an object oriented programming language, you will see different classes and objects in our case, you'll see different modules that handle the different bits and pieces now in um in phoenix things are done a little bit differently I would say even though it's kind of serum innocent with um with the model. View controller but they're done differently and I think in a good way so you have the controller and the controller will basically use a if you module but this is actually not what gets surrendered what gets surrendered is a template file from that view. What's interesting is that the view file is just a pure elixir module, as you will see. Which means we could Sorry, let me just use a better pencil here. So which means basically we can put some functions in this one and then what we could do in the template, we could put basically html with elixir. I like this approach because I think it organizes usually the functions that are needed for a particular set of templates into a single file and other frameworks used to have your own either classes or files that contain the common functions you would need. But in phoenix there's actually view files and they're designed for that. Now, the controller to connect with the database it uses, you can think of it like a model in a way, but it's really technically called the schema and we will see why because, you know, it doesn't strictly prohibit you restrict you like a model would in in some other frameworks and the schema is what's used to kind of connect to our database but we'll also see that instead of um instead of really connecting directly from the controller to schema, we usually use some modules in between here, what we usually call the context of our application. Um you know, I apologize if this sounds a little bit confusing, especially if you're new to this kind of architecture. It's actually as you start to use it, it's it will start to all make sense together, but I believe phoenix did in this particular case, which is kind of the core of the application is that it added a slight complexity but in favor of really well organizing your application, I think the structure of your application in a way that really scales and keeps it organized even as your application goes back. One last thing I will mention before I um move is that to get to a controller? Like most applications, you do have a router and they're also basically decide what controller to go to. So so the first thing we usually hit in our application would be the writer and this is where I would start. All right now, before I start to show you what we do here, I'll open up a new tab in my um shell here and what I will do is I will, I will start to get report. Um it's usually a good practice whenever you start a project from scratch. We definitely haven't done much other than adding some notes so far. So what we'll do is we will initiate a report. So we do get in it. And what we will do is we notice that there's a good ignore here that ignores a number of files and folders and such, which is exactly what we want in this particular case. You could you could alter that like if you want, you could simply ignore the notes folder, I'll keep it for now. So you could reference it a little bit later. So what I will do here get add dot so at all of our files, git commit, dash m initial commit or I would say add um mm hmm. Basic phoenix project files um, you know, just some message to tell us. It's really just our initial files right here. So we've basically committed, we have just this one commit had basic phoenix project files as um, as we add every lesson, we will remember to commit, which is a good practice in any coding project, awesome. So, um, let me actually walk you through how this page gets displayed. So like I mentioned in my diagram here, um the first thing we hit is actually the router. So usually, you know, if you're new to an application, if you want to start something with an application, usually the router is where you start and then you can simply go to config oh sorry, we go to lip and then we go to dev Notes web and then we go to robert before I dive into the router right here. Let me actually um talk to you about the structure of the folder right here. So you will spend, I would say maybe 90 95% of your time in this lib folder in um phoenix, what's very interesting in phoenix is that it separates is the logic of your application, which will live in devon Notes from the web interface of your application, which will live in um dev Notes Web. Okay, so let me go back to my drawing right here again, I apologize, it's getting a little messy but bear with me for a second and I hope this will become intuitive as we start to build more parts. So think of it this way here, there is this kind of dividing line right here. So everything that goes this way would be web and everything would go this way would be think of this as the app. So the context, the context, the schemas. Um basically a lot of the logic of our app will actually go into those files, the controllers, the views and the templates and of course the accompanying router will go into dev Notes Web. The idea here is, and I think this is also, you know, a really well designed, well chosen design pattern in my opinion, because the web is one way to interact with your application. You can interact with your application with web, but you can also interact with your application via a mobile through an api for instance or through command line or through whatever. So the logic of the application shouldn't be impacted by how you're displaying the application again in most applications, it is web, so it is the default, that's why you see a lot of the stuff defaults to web. And even if you have mobile apps or a p i is in most cases you do have a web interface. So that's why, you know, you almost always see it there. But just keep in mind that your app doesn't have to have a web interface or doesn't have to have web interface as the only thing that interacts with your app. This is why I think separating the two is really a nice thing to have in our application. So starting with our router here, the first thing we see here is the idea of pipeline and plugs, which I will cover in um a later lesson because this kind of these things actually require us to dig a little bit deeper into those ones. So I'm not going to um to dig deeper into them right now. But what I want you to do to to look at right now, here is this thing that we see line 17 to 21. So right here it says scope slash think of a scope in this particular case as the prefix to your your l so when it says slash, it basically means nothing. So like local host and then just like in this case 4000, this could be your domain name and production, whatever, you know, abc dot com or whatever. So in this case when it says slash meaning just slash and then whatever. So if you see slash, which means slash then like nothing, nothing. Which means just our homepage. This is why this will actually be, this will be home page in development default. It will be basically just http local host for thousands. If I said something like abc here, then what would you expect this to be? You got it, this will be just a B C. If I put abc here and x, Y Z as you might have expected, this would be slash abc. Such exercise. Okay, so this is what we're getting right here, is from the scope which really kind of think of a scope as a way to separate a part of your application from the others. Um and again we'll talk about this pipe through and this pipeline right here. But you know, this basically is a way to kind of against, you know, separate our application into different concerns. So in this case here, what we're saying is that if we come to slash meaning just the homepage of our application, go to the page controller and go to the index function within that controller. So I'll repeat that. Go to the page controller and go to the index function of that controller. So here we start with our roger which is config which is actually I should say this lip, they have no sweat ash dot t x. Mhm. So let's scope just copy this line right here for your reference. Oh, this means that when we land on our homepage we will process it using our fish controller with the index function within it. This is a convention by So this is here. We're seeing another pattern and this pattern is um convention over configuration. Okay, so convention over configuration is a common pattern you will see in many frameworks um and every form framework chooses how far to take that convention. Some things here require a little bit more configuration. I would say that other frameworks in phoenix while some others actually use conventions. So this is why in this particular case you will need to kind of remember a few of these conventions to get your app to work properly. So where does this space controller live as you might have expected? It's def notes. Web controllers. Beige controller. Not surprisingly by default it generated this death index in it which takes in a connection a connection struck as. We'll see later. Again, I won't dig into it as much and then it takes the parameters. In this particular case we don't have any parameters so we will encounter other cases where we have parameters. So what this is saying it's saying, well render using this connection um structure. This connection um struck and then render the index dot html template. Okay, so this actually utilizes views and then page view. So we have this page view that matches this beige controller. Now this page view here doesn't have much. All it has is the definition of the module and then disuse um to take advantages of a lot of the president functionalities that come in with phoenix views now you may be wondering here? Well we said, okay, so we said you you know render index that html. So like I was saying here in my, in my drawing earlier the view will actually use the template. So controller will use the view and then the view will render the template. So in this particular case we see templates, we see page and by the way this is all conventions here. So template space. So this word page here matches the base controller and then there's index that html dot h E x. Hicks this is Hicks is the template NG system that is currently the default in phoenix. If you look on online applications, you might see a lot of them use leeks, L E X which was the default up to very recently, maybe like a month or so ago where maybe a little bit more where he became the default. That's why if you're seeing a slightly older project, um you will notice that they're using leeks instead of hicks. I would say going forward just stick with using hicks. It comes with a lot of nice functionality um such as, you know, making sure even things like your html is written properly. So really good template NG systems that they've added over there. So the, the page that we see over here is actually just this page right here. So this welcome to phoenix is what you're seeing here as welcome to phoenix. So what I will do here instead of and by the way, this get text is for translations, I'm not gonna worry about that for now. What I will do here, I'll simply right welcome to the notes and all safe notice, word says you're welcome to dev notes. Now notice I did not have to refresh the page, That's a very cool feature. It has a live refresh that's built in with phoenix. So let me show you how this works. If you could actually, if you have a bigger screen you can split your screen or you can have it on different screens. Interestingly, you could, for example, let's say, you know, I don't need section here, I'll simply delete it, I'll go ahead and leave that and then I just saved this and it automatically updates it live updates and that's a very, very cool feature. It has a socket open that as soon as you make changes, it will actually update the page. Makes development really nice and smooth. Okay, so I've changed this section right here, so which changed this center part But you may be wondering well, you know, where does this top header come from? In in phoenix? Well the answer is that it comes from the layout, The layout by default is the the thing that the template, this index template gets inserted into and if I go to app, which is a default layout, you will see that it basically gets uh sorry, the root layout, it's it's it's the default one. This inner content is the one that it actually gets inserted into, so whatever is index html dot hicks will actually get inserted on what you see online. 28. So everything you see here is the header is this header right here, which has the default um image for phoenix, So it has phoenix that PNG, it has a bunch of other things as well. So what I'll do here, I'll simply just delete this stuff right here and not just hit this has a phoenix PNG as well, we don't really need that so I can go ahead and delete it. Um I'll do this after for now. I'll just delete this header right here and when I do, it just says welcome to dev notes right here. So I scroll up a little bit. It's also a good idea to um also change the title tag, so the title tag here says dev knows and then phoenix framework um sure, I'll simply just call it the have notes and I'm not, I don't need a suffix at the moment, so I can just simply say this is the have not's and now the title is deaf notes and it says welcome to def notes. Um as I was saying earlier, I want to delete that image if you go to assets. Um it should actually go into. Mhm. Mhm. Okay. Actually sorry, private static images. Uh If you're using V. S. Code, you could do command P control P depending on the system of music or command T. Uh And you could actually start to drop the file names in this case, I forgot where the phoenix that PNG is stored and then it turned out to be stored in private static images. So you could go to private static images and you see this is the phoenix, we don't need this image right here. So I'm simply going to delete it and there you go. Now we have our basic project set up, we have our homepage modified so what I'm gonna do, I'll go and make a commit for this Alice. So what we did is we have modified our um notes, we have modified a few files to handle our changed home page and we've deleted the default image that comes in with phoenix. So get ad dot git commit dash m modify the homepage our project and we're done for now. Um I know there's been a lot of information right here but I would say if you didn't catch it all, don't worry about it because the the flow I just showed you today is the one that we're going to follow in many lessons down the road and almost every lesson we are going to start with the router, add the route that we need and then go either modify a controller or create our own controller, which then goes to a view file. In this case this view file is empty, but in bigger applications, this view file will actually contain many handy functions that we will use and then the view file will actually render a template. In this particular case it's page index dot html, that hicks, which is actually rendered within a layout file, which you see right here as the inner content. Um I will show you how we can inject variables in a in a future lesson as well. So again, here are a few steps here that you may be more than you're used to, but this will become second nature to you. I hope you've enjoyed this lesson and I will see you in the next one.