Hello friends, thank you for continuing the series on phoenix today, we'll continue with our exploration of how to create pages in phoenix by simply adding a new page which is the about us page. So if you remember last time to run the phoenix server, we do simply mix phx dot server and that runs the phoenix server for us. Now. I will show you before we start today, a small trick that will improve this a little bit, which is actually using the following command. Okay, this will be like a bash command. So if you're on this command here, which is instead of running um the phoenix server using Mix, you run it within i x, which is an interactive elixir and also you can pass in this airline option to it which says Colonel Shell history enable, which really helps you in um basically having to use the up and down arrows to bring back commands that you've already written in the interactive elixir. I find this very helpful because in many cases you want to try things in the interactive elixir console and what's special about this Interactive Electoral Council also is that it loads your entire project within it. And it also reloads it when the page refreshes as well, which means that sometimes you don't have to like do something on the page to make sure that it works, you could actually just try it in the interactive elixir. So if you just put this one here, it will run, it looks like the same but if you hit enter here notice I could run elixir. So I could do something like map dot sorry, you know dot for example count and then let's pass the list of three elements and this will give me three. So I'm able to run any elixir code from here. We haven't written a lot of custom code in our in our elixir app, which is the phoenix app so far. But what we do, we could actually access it in this console as well. Now this is a bit of a cumbersome um command to have to remember all the time. So there's a couple of things you could do it. One way you could do it is you could have an alias in your bash or in your zet shell, whatever you're using. But I'll show you another technique here which is um I like to use in most of my projects which is having a bin folder, a binary folder and that have some kind of a file here, let's call it death for instance and inside that dev you could add that command. So what you what basically sometimes you want to do other things like later on, we may want to load some environment variables you want to do different things. So this this may not be the only command that we have in there, but just to give you an idea here so you could do a pin deaf, it's his permission denied for bin dev. Well what we'll have to do is we have to probably add an execution um execution permission to it in order for us to be able to actually run it as a binary. I'll add this to our notes here. So I'll go back to our notes and make sure you could you can add that to place such as or college profile such as bin slash deaf. Just make sure to give it execution. Mhm execution permission using a command such as I can I'll call this here basically easing or running um phoenix server was in I E X awesome. So again here I'll be showing you tips n tricks as we go throughout this series because those will become very handy as your project grows and as you add more things to it. So right now the application is running. So if I go to local host for southern, remember all we have right now is something that says welcome to death notes. So let me walk you now through steps. I mean you should be familiar with a lot of them but this could be a good review but we could start with the router and then the first step right here is we can add to the scope. Flash could do something like get slash about underscore us and if you remember we have to point it to a controller of sorts. So you could say page controller could use the same controller and then maybe we use the about us um as a function that we expect to see in that controller. So when you do something like this we don't have this about us right here. So if you go and just go slash about us, the error that you will see, it says function def Notes based controller about us is undefined or private. Remember that? Um This is the spot where phoenix is using convention over configuration where we're basically expecting by convention to have a function inside page controller module called about us. But we don't have it right now. By the way, I'm gonna either intentionally or unintentionally induce errors or or show you explain errors because I want you to love reading error messages because there is the best way to guide you through finding errors in your application and then fixing them. So in this particular case here all this is telling us is function dev Notes based controller about us is undefined or private. If you're relatively new to programming. I mean one of the biggest steps that I see is whenever you see an error message, I would highly encourage you to read it and reread it and then check where exactly in the code it's happening. You'd be surprised at how many people just instinctively go back to the code to find out what's wrong. But actually the biggest clues are usually in the air messages. I grant you the seminary messages can be cryptic or unhelpful. In some cases that said in the majority of cases it is quite helpful. So start there all of it. So in this case we go to Page controller. So let's go to Page controller. You're using bs code. It's command P or command T or control T. Depending on the type of system you have. And then you can start to type it. So Page controller. So now this year we don't have an about us function. Okay, so what I'll do here, I'll do deaf about us. Remember that? This is what you might call action um functions they take two parameters. The first one is a connection. Uh It's called data structure. Again I sometimes um mistakenly call them objects. I try to avoid calling things objects here. But if I do please, you know, understand that elixir is not an object oriented programming but we can call something like a struck an object or something like a, you know, a data structure, an object but it doesn't mean it's an object in the object oriented sense that said, I will avoid saying that word as much as you can. And then I'll do programs here. And then remember here the simplest thing we can do here is we could render and then we can pass it this connection structure and then we tell it what template to um to render. In this case let's call it about study html. And then here if I go to I don't have to create a new view file by the way because we already have a view. If I go to views, we already have a page view here, it's empty for now, but maybe I'll show you what we could do with it and um I can go to templates now and I can go to page and I can simply create a file here, I can call it about us that html dot Heakes, H E X And then I can do H1 can say about us and I'll just add some dummy text for now, such as we are a website that allows developers to easily create and share notes. So I go now and then notice here, remember that in most cases um phoenix allows us to um to automatically refresh the page. So I didn't have to refresh the page, remember it was giving me an error just a minute ago, but when I switched back to it without refreshing the page, it auto reloaded this page and now it shows that about us is right there. Alright, so now that we have a few things here, let me show you a couple of things that will come in handy, so I'll add it to the notes, so you have it in case you want to refer to it. So and the command give you all the available routes in your application, you can run the following Mix command Mix phoenix dot routes. So I go here Mix phoenix phx dot routes and that will show me all the routes available for her application. There may be more than you would expect now we haven't talked about this life, this has to do with Live View, which is something we may or may not cover in this particular series, but it is a very interesting topic that I will certainly cover at some point as a probably a separate series. It's it deserves its own um number of casts. I just want you to be aware that there's a really cool feature of phoenix called Live View that allows you to build dynamic pages really easily with minimal javascript and um it's built in with phoenix, it ships with it uh and it's honestly it's an integral part with most modern phoenix applications. So this is why you're seeing all these routes right here. But the ones that we created are these ones right here. Okay, so these ones right here, so we notice here, for example, get to slash takes us to Death Notes Web page controller and it takes us to the index action, which is just a function that exists over there. If we go to page path, but it's slash about us, it takes us to page controller and it takes us to the about us um action, which again is just a function inside that base controller. Now, notice these two have the same helper function. Okay, both of these are called page path. So let me show you now how we could use this page path differently to point to the different pages. So I have one that points to the home page which is slash and another one that points to the about us a good spot to put. This would be inside the layout. So I go to the layout, remember the default loud that we're using right now. Is this route? Uh html dot So I'll go here and I'll put you know again, excuse the lack of my good styling sense. Right here I'm gonna focus mostly on functionality rather than the style but let me put here a I'll show you hear some techniques. So I'll put here link and link is a helper function that is built in with phoenix as well to help us generate an attack. So link, I call it home and then we could pass through it a keyword list that if you recall, keyword list is a key value storage, which is just really a list of couples. And the first element of every tuple is an atom. The second element can be anything. And so really you will notice that keyword lists are used very commonly in passing parameters to functions. It's very common. Use case for for for keyboardists. So here was the link function with the first one will be the anchor text. So anchor text, meaning the text that you will see within here, which is in this case just like home like that. So I'll call and then you basically you at least have to give it these two parameters that points it to where you want to, where you want the link to go. So in this particular case I'll just make it go to page path. Okay, page path. Now what you have to pay to pass to this function? The first argument that you pass is the connection object which is automatically passed to you by the way, you don't have to manually pass it. Indeed notice here how it's being used to generate these static routes right here for style sheets and then also for javascript, so you don't have to explicitly pass this variable right here, I will show you how you can pass custom variables a little bit later in this cast and the second argument would be the action name. So in this particular case the action name is Windex, I'll just call it index right here. Okay so now if I go to the page I refresh it um it's giving me an error here. So it says that um undefined function page so certainly I made a mistake somewhere um right here in my application, so something I made here. Okay um is it working properly? Let me double check that. So we have paige path right here we have index. Alright, so in situations like this. Clearly I've I've made a mistake of some sort so I'll quickly google up here um pass in phoenix, even though I write a lot of routes sometimes um I forget what the exact syntax is for a particular thing. Mhm. Okay, so it does say here, page pass and then you pass at the end point and then you give it the applications so the endpoint should accept the connection in this particular case. Um Yeah. Yes. Mhm. See sorry my bad so but I really forgot right here is just doing routes, not page path. Um I'm really sorry for for that, it's basically just um sometimes coming working with different languages uh in places like rails you don't really need to pass in the first module name but I I did have to pass it in this particular case, so let's do the same thing for the next one right here link. About us to route, stock, base path connection and then about us that should give us the about us link and then the homelink, so we could switch between these two. Alright, so right now what we did we did a very simple navigation that takes us between the about us and then the home page and we can switch easily between the two. The last little bit I want to show you here is um again it may not make particular sense in this case but how do we use this programs right here? So the way we do it is say I pass a parameter such as let's say name equals Okay, again, it's not doing anything right now, but if you go to the logs, you will notice that the parameters when you pass it, I mean it doesn't matter whether you pass it as get parameters or post parameters. It will come in as parameters to the action. So this particular case um we get these parameters as this brand's object right here. So what we could do is we could simply pattern match on it. So we could do something like if you're expecting to receive a parameter then what you do, you say name, his name. And then what you can do is you could also afterward pass here name as a cured list to your template, which is about us right here. And do you make use of it in here. You basically use it as a module looks like a module variable right here. So I could say something like hello and then at name Yes. So if I refresh here, it says hello, john Okay, so let me recap right here. So I pass it here as a parameter as a get parameter. I capture it using pattern matching in this second argument, which is perhaps and then I pass it as a key word list to the render function as the third argument to the render function, which will send it to the about this template and then the about this template can use it as well. You might call the at variable and then this variable right here. Can you know, you could use it um anyway, you want in this particular case says it says basically that name and you see here Hello john. Now what do you think will happen if I remove that parameter, try to get it for a second. She gets that we'll get an error then you maybe you're right because what happens here is it says no function matching again. Back to reading their messages. No function clause matching. So this means that we only have one function head to help us match, expecting that we're gonna have a name argument in the parameters. Okay, now how would you solve this? What if you want your application to accept an optional name, parameter or if they don't pass it, it's fine. We just don't do anything with it. Well, I mean you could do it in multiple ways. You could just accept programs as a as a variable and then check the existence of it here. Or even better. Just do pattern magic, which is very common. So if this doesn't match, let's go take programs that we don't use and let's not pass the name right here. Okay. And then we refresh that still gives us error. It says key name not found in um in in this blood. Okay. So for that basically we have to figure out a way to make this work. Yeah, basically. Even if um even if we don't pass it, okay, so I will pause right here for now and then just to keep this lesson short and then let's solve this and then show you how we could add more functions to it in the next lesson. Thank you for tuning in, and I will see you in the next lesson.