Getting Started With AdonisJS 4.0

Getting Started With AdonisJS 4.0 [3] – Database & Model

alright guys so in this video we're gonna start to get into the database now like I said we're using MySQL and I'm using something called xampp which gives

us an Apache server MySQL and PHP on a local machine ok so if you're on Windows Linux or Mac you can use xampp you can see it's cross-platform I'm not going to go through the

installation it's really easy just download it install it if you don't want to use xampp you could use just you know a standalone MySQL server you could use if you're on Linux and you have a lamp

stack you could use that you could use MAMP or lamp or any of the other amps that are out there as long as you have MySQL now xampp our exam however you want to pronounce it also comes with PHP

myadmin so you can just go to localhost / p2p my admin and you can see all your databases you can create a database so all we need to do here is create a database so I'm

gonna create one called Adonis let's say add honest 4-0 blog ok so now we have an empty database and that's all I'm gonna do for now we're not going to create our tables through

here because we're using database migrations through the framework alright now before we can do anything else we need to install the MySQL driver for nodejs so we're gonna say npm install

mysql all right so now that that's installed we're going to go to our dot env file which is in the root and we're going to change the DB connection from SQL Lite

to MySQL okay and then we want to go down to the user now my user actually is root so I don't need to change this but make sure yours matches whatever your database user is I'm gonna put in my

password and then the name of the database which I called adonis 4-0 blog okay so i'll save that and now we should be all hooked up with mysql so now we need to do is create a migration okay so

to do that we can use the CLI we can say adonis make colon migration and we're gonna call this posts now it's gonna ask us if we want to create a table or select the table we're gonna choose

create and now it created this file this long number here underscore post schema j s and this is in our database folder migrations and you can though it's not there don't have to reload okay I just

had to reload so if we enter that file you can see that there's an up-and-down function the up is going to create the post table for us it's going to create the ID field which is auto increment and

it's going to create a couple timestamp fields which would be created at and updated at now in addition to this we want a title and a body for the posts so we're gonna go ahead and add in here

table dot string title okay we also want table dot string body and that's it that'll add those two fields so let's save this now just creating the file doesn't do anything we need to actually

run the migration and we do that by saying adonis migration colon run now what this did is it ran all three of the migrations inside of that full okay you can see down here and it should

have created all those tables so let's go back let's go to PHP myadmin just to check things out and we'll reload and go to our adonis floral blog and you can see that now we have all these tables

okay we also have a schema table which shows us that all the migrations so we want to go into posts and go to structure and you can see that we have our title and body fields that we added

here along with the ID and the timestamps so what I want to do now is I want to add some initial data to work with so I'm just gonna go to insert and you can use your SQL shell if you want

or any other program you use and we're just going to add a title of post one let's say this is post one excuse me we'll say post two this is post to alright so we'll click go and now we

just have some sample data to work with so we have our database table we have our fields now what we need is a model because we still don't have a model so we're gonna go down to our command line

down here and say add honest make model post okay now look a common convention is to make your model singular and your controllers plural so let's go ahead and run that and now you can see if we go in

our app folder we have models and then a post j/s file now excuse me we're not gonna have to do anything in here because we're extending the the core model class and that's where all the

methods that we need are that's where the save method is you know the remove find everything we need is inside of this class okay so let's close that up let's close our schema up and then let's

go back to our controller now before we can use the model we have to bring it in so let's go up top here and say bring in model and we'll say Const post and we're gonna set this to use and then here

we're gonna put in a p– slash models slash post now notice this syntax use basically what we're doing here is we're using a namespace cake just like laravel now the reason we're able to do this is

because the app folder is auto loaded so we don't have to do require dot dot slash dot dot slash models and all that stuff like we would with most frameworks we can use this nice clean syntax to

bring things in alright so now that we brought that in let's comment out all this hard coded data and let's create a variable called posts and then we want to set this equal to a weight ok we're

using async await and then post which is the name of the model and then we want to call not find all so this will get all of our posts alright now we want to pass it in just like we were now there's

one thing we need to add here we need to just add a method on to this post object or this post array which is to Jason all right otherwise we're just going to get undefined for everything so let's go

ahead and save that and then we'll go to our application and reload and now you can see we're getting post one in post two and these are coming from our database alright one thing I wanted to

do I forgot to do is to add some styling to our list so let's go to posts index and just add a class to the UL of list group and then let's add a class to the Li of list group item this is just

bootstrap classes reload and that looks a little better alright so now we're pulling data from the database so let's create a details page so we can click on one of these and it takes us to

another page that has the title and the body all right and then of course you could add more fields if you want but this is just gonna be a basic application now I'm gonna wrap this post

title inside the index in a link alright and it's gonna go to slash posts slash and then we want to put our double curly braces in here oops and say post dot ID alright and then we just want to end

that a tag after the title and save now if we go to this now we're gonna get an error because we didn't create the route we didn't create anything yet so I just wanted to add that in there so we can

close that up and now what we'll do is create a details method inside of our post controller so let's go under the index and let's say async details alright now

for details we need to pass in two things here okay we need our view because we're gonna load a view but we also need params because we're gonna be passing in a

parameter all right now actually you know what I'm not going to continue with this just yet I want to create the actual route first so let's save this as it is and go to our route so let's see I

want to go to start routes J s and let's say route dot get we want to get slash posts / : ID and we want to map that to post controller dot details all right so let's save that and then we'll go back

to our details method so in this method we need to just fetch a single post so we're gonna say Const post set it to a wait and then post and instead of all we're gonna use dot find no semicolons

and then I'm gonna pass in params dot ID alright so this is how we can get the actual ID from that from the URL should we stop that all right and then down here what we want to do is return view

and we want the post dot details view which we haven't created yet and then we want to pass in that single post all right so we'll save that and now let's create that view so we'll say add

honest make view and we're gonna call it details posts slash details all right so now we'll go to our details dot edge we're gonna extend the main layout put in our section content and then in here

I'm gonna first just put a link in here that's gonna go to slash posts and this is going to be a go back link alright just to go back to the main page then we'll put a HR and then an h1 with the

post title all right and then under that we'll have a paragraph with the post body all right so let's save that let's reload and click on post one missing view cannot render post details dot edge

pose post details oh this should be post with an S alright let's try that here we go post one so if we go back post two good so now we have a details page now what I want to do

before we end this video is just create the add post page okay in the next video we'll do the the functionality where we can actually create the post but let's add the form so we're gonna create

another method under details called add and then this is just gonna load a view so we need to pass in our curly braces here and view and then just return few dot render and we're gonna pass in here

post dot add all right so let's create that view we'll say add honest make view at posts slash add okay and then we need the route so we'll go to our routes J's file

now one thing I want to mention that's very important is if we're adding post slash something like post slash add make sure you put it above this or else it's gonna look at that slash add as an ID

it's gonna look at add as an ID so make sure you put it above that okay are you going to get something you're gonna get issues it's going to load the details view so let's say route get slash post

slash ad and we want that to map to post controller dot ad okay so now let's see you know what I want to do is add a link to the main nav to create a post so we'll go to our nav

bar edge file copy this list item let's say add post and it's gonna go to post slash ad all right so let's reload now we should have a add post click that it goes to the view but there's nothing in

the view so let's go to views posts and then add dot edge so let's create a quick form here we'll say at layout main section content alright and then here let's put a back button oops

so to go to slash posts and put an h1 and we'll say add post and then under that we'll put a form action is going to be slash posts alright we want to make sure that it's a method of

post show put that in caps okay and then inside here now we with a Dantas we have Otto cross-site forgery protection by simply putting in CS r CS RF field like that and that will protect us from

cross-site forgeries so let's continue with our form now in bootstrap we're going to have all of our fields wrapped in a form group okay so we'll have form group and let's do a label don't need a

four just like title they'll have an input with a type of text and let's give it a name of title class form control which is just a bootstrap class and then a placeholder spell that right now

placeholder it will be title okay and then let's copy that form group paste it in now this is going to be the body it's also going to be a text area so I'm gonna come I'm going to replace input

type with text area and that of course needs an ending tag and then that's gonna be the body name is also going to be body all right then we just need C we need a submit button so that's gonna go

right here will say button let's give it a class let's see for the class will do BTN and then BTN primary okay we also want to make sure we give this a type of submit all right so let's

save that see what that looks like good alright so in the next video we're going to add function to this form so that we can actually add a post through the application

In this video we will be installing the MySQL driver and creating the database migration for the posts as well as the post model. We will fetch the posts from the database and display them in the view. We will create the index and details views to display the data

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