Getting Started With AdonisJS 4.0

Getting Started With AdonisJS 4.0 [2] – Controller, Layouts & Routing

alright guys in the last video we went ahead and talked about what Adonis is we looked at the folder structure set up set it up with the CL I created a home

page route and view and now what we're gonna do is we're gonna create a controller for our posts ok Adonis is an MVC framework so we want to create that Model View controller structure so let's

go ahead and generate a controller with Adonis make : controller and we're gonna say posts ok now generally you want your put your controllers to be plural and your models to be singular now it's

going to ask for if we want this to be an HTTP type controller or a WebSocket we're going to use HTTP and now if we look in our let's see app folder controllers HTTP we have a post

controller j/s file alright so this is where we're going to create all of our controller methods so let's create our first one which is going to be index now before all of our methods names we're

gonna say async and the reason for that is because Adonis j/s 4.0 4.0 utilizes es7 async await feature which is a cleaner way to handle asynchronous operations than callbacks or promises

and I'm not going to get deep into that that's a whole nother tutorial and it can get kind of complicated so we just add async before the function name and then we add a weight before things like

fetching data from the database so let's call this index and let's just go ahead and return a string called posts all right that's all we'll do for now let's save and now what we want to do is

create a route to map to this this method here so we'll go to our routes file and actually let's go above all this test stuff and let's say route get and by the way notice that I'm not using

um try I did there but I'm trying not to use semicolons because the the convention for the cord honest code is not to use semicolons and I'm trying to stick to that

okay which is very hard because I always use semicolons now it's up to you what you want to do I just want to keep it all consistent so I'm going to try not to use them so in the get here we want

it we want a route to go to posts and then we want to map that to posts I'm sorry post controller dot index so we'll save that and then we'll go to slash posts and we get our string posts

okay so it's now calling this method here now obviously we're not going to want to just output a string here we're gonna want a load of view so let's create a view for the post index so

we'll go down here and we'll say add honest make view now when you use a resource like posts and you know you're gonna have a bunch of views for that resource you probably want to create a

separate folder for that resource so we're gonna say post slash index and what that does is it creates inside the views folder a folder called posts and then the index file so in the index file

let's just say actually we'll just put an h1 here and we'll say posts okay and then we'll go to our controller and we want to render a view now when we if we want to render a view we actually need

to pass in here some curly braces and pass in view and then we want to say return view dot render and then whatever the view is we want to render which in this case is gonna be post dot index if

it's inside of a folder you want to use this dot syntax like that okay and we'll save reload and now we get our rendered view alright now just like with most MVC type frameworks you can pass data into a

view so we can put an extra parameter which will be an object and let's say we want to put a title and we'll say latest posts and then we can go into our index view and right here I'm just going to

put in our double curly braces and say title and save reload and we get latest posts all right so it works just like most other frameworks like I said this really

reminds me of laravel if you've ever worked with laravel before I know it's a different language but the syntax the just the way that things are set up it's very similar now what if we want to pass

in an array and loop through it which ultimately is what we're going to do it's going to come from the database but we don't have the database set up yet so let's just put some hard-coded data in

here so we'll say Const posts we'll set it to an array and it'll have a title and body okay so we'll go ahead and just copy this put in a couple more this will be post two

three and then we'll just go down here and we'll say posts and pass in posts so it's save that now we'll go into our index view and now to loop through this using edge is very very easy we just

need to say at each and then we're gonna say post in posts okay then we need to end it by saying and each all right and then here you know what let's wrap this in a UL so that each one is inside of a

list item so we'll go like that we'll put our list item here and we'll just to post dot title and save let's reload and now you can see that it's going to show those posts on the screen it's going to

loop through and put each one inside of a list item alright so ultimately this stuff this stuff is going to come from our MySQL database but before we get into that I

just want to talk a little bit about templating and layouts now in our template here we don't have a head and body tag we don't have a title or anything like that

same thing with the home page now we could put it inside the view here but then we'd have to add it to every single view and we don't want to do that so we're gonna create a main layout for all

of our views to get put inside of okay so let's generate a new view I'm gonna go down here and say Adonis make view and we're gonna call this main okay and then we'll go into main dot edge and put

in our HTML tags I'm going to use Emmet so I can do exclamation tab and that will give us just a basic structure here for the title I'm just gonna say adonis 4.0 blog and what i want to do is

include bootstrap okay we're gonna use bootstrap for now as you saw in the Welcome page we can use this syntax here to include style sheets now this is a local stylesheet but we can

also use it for remote files so what I'm gonna do is go to get bootstrap comm get started and I'm gonna grab just the href part of this CDN so just the file and then we'll go back to main put in our

curly braces here and say CSS and then just pass in that link alright now we can do the same thing with JavaScript so for these three links here let's grab the source

okay we need jQuery it's a dependency for bootstrap and then we're just going to do instead of CSS we're gonna say script and then we'll pass that in alright we want to do the same thing for

popper J s which is another dependency so we want this link here base that in and we also want of course bootstrap CSS I mean I'm sorry bootstrap J s and we'll put that in there all right now wherever

we want to output the main or not the main but the views whatever that whatever the the page view is we're gonna go ahead and say at exclamation section and then pass in the string

content all right and I actually want to wrap it in the container so that everything's pushed into the middle it's just part of bootstrap you guys know that sure all right so that's our layout

so let's save that and go back to our posts reload now one thing I forgot to do is extend this layout okay it doesn't it's not going to use it by default so let's go to our index page and up here

we're gonna say at layout and say we want to use the main layout and you can have multiple layouts now we also have to wrap this in section content like that and then at

the end say n section all right we'll just tab this over save and now if we reload now you can see the bootstrap is kicked in and it has the head it has the title up here so it's using the layout

now we want to do the same thing in the home page so I'm going to copy these two lines go to our home paste that in and let's not forget to end the section all right so now if we

go to our home page you can see that's also using the layout alright so before we move on to the database and all that I want to have a nav bar so we can navigate between these pages so in edge

we can use partials or includes so what I'm going to do is in the views folder actually I can generate it down here with Adonis make view and let's say Inc okay cuz I want to create an Inc folder

and then slash navbar so now we have this Inc nav bar dot edge file and then we're gonna put our nav bar in here now I'm gonna paste this in because it's just HTML it's just bootstrap nothing

special I'll go over it real quick so we have a nav tag a couple of bootstrap classes we're using BG primary which will give it a blue background mb3 is margin bottom three it's just gonna push

stuff down we have a container to push everything into the middle we have the branding we have the but the hamburger button for responsive for mobile sites or mobile layouts and then we just have

the home link which goes to slash and posts which goes to slash post so let's save that now it's not going to show up yet because we have to include it in our layout so let's go back to main dot edge

and let's go right above the container and say @include Inc / navbar and reload and now we have our navbar so you have the little drop down go to posts so now we can navigate

between posts and home one thing I want to do is remove the active class in the navbar that's on the home so I'm just going to get rid of that all right there we go

so now we have our navbar we have our two pages or two routes all right so I think this is a good place to stop in the next video we're going to we're gonna first of all install the MySQL

module and then we're going to edit our dot env file we're gonna create a database and then we're gonna create our migrations and then the model all right so we're going to get into that next

In this video we will setup a posts controller and add an index method. We will also look more at routing and views and create a layout to wrap around our views. We will also implement Twitter Bootstrap 4.

CODE: Github Repo
https://github.com/bradtraversy/adonis40blog

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

VISIT MY WEBSITE:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia