Build your first Rails app - blog with comments (tutorial)

what's up guys I figured I'd share the I guess the journey of getting started in Ruby on Rails and becoming kind of an a novice developer front-end developer designer a lot of businesses and companies already are using it a lot started with it Twitter for instance or github was on Ruby on Rails for a long time the same is true for Shopify stuff like that is all written in Ruby and Ruby is a really approachable language from a beginner developer so I really enjoy the cleanliness of it I guess compared to something like PHP or JavaScript it's definitely almost magic how things work but they work really well so this is just an introduction to that and I wanted to kind of invite you on board following along the next part of this will be kind of getting familiar with what you need to run Ruby on Rails on your system depending on if it's a Mac or PC I'll kind of walk through at least the Mac portion and that's what I primarily develop on the biggest and probably the most hardest step to getting started with Ruby on Rails is actually installing it if you're on a Mac changes are you have Ruby already installed on your system but to get started on installing rails it's a good practice they kind of follow a guide there's one that I I would say is probably that most up-to-date called install rails on install rails comm it's brought to you by the people from one month to start let's go ahead and just dive in assuming you're on a Mac you can follow along with me if you're on a PC there are alternative steps to take and it will actually tell you which way to to go here so on a Mac you'll want to actually make sure your versions at least up to these current versions 10.6 is pretty old I'm using the latest Mac Book Pro I do have Xcode installed you don't necessarily need the whole Xcode app if you want to install just the command-line tools you can do that too I think I have Xcode what was it I can't remember the actual key command right now but I have it installed the easiest way to do it just go to the App Store install Xcode you need the command-line tools to do a lot of things that we'll need to utilize in the coming steps going forward here is talking about the command-line and you can use the built-in one I like to use one called hyper it's at hyper dot is I think hyper is yeah and it's based on j/s HTML and CSS I used to use I term too but this one just kind of has been on my radar so you can use whatever you want and going back to this guide you can open your terminal and it's just kind of giving you a quick run-through of a this is what a terminal can do a big big thing on you like utilizes homebrew I actually have it installed if you want to install it you can head to home Bruce page or there's a the scripture you can run here if we run Bru V I should get homebrew one point three point four is my current one there's a key command run called brew doctor might as well run it just kind of checks everything out and make sure it's up to spec will run that real quick cool so by the way I'm working in a directory just on my desktop called sites I just created that right before the screencast so nothing nothing special there git is obviously important it's a version control software basically you can create snapshots of your code and later reference them if you need to and or create branches that are different features so branches are such saying hey clone this app and I want to do this to it but keep that other other screenshot the way it was so I think I'd get installed that I want to I might as well check first so we'll do get I do it alright so a two point fourteen point one I think is my latest if you're new to get and you're just just installing it for the first time you do need to create global user parameters and get is not same as github so don't don't miss can skew those it's actually something that stays local but you can add github as a remote thing that you can push your local stuff up to I'm already set up so I won't go through all that installing Ruby you can do globally just like anything else but it's very very I guess advised to use a ruby version manager and that's what actually our VM is in this case I tend to use one called our B and V I'm just used saying that for short it's the same thing it's just kind of done differently so we can install the latest see what versions we got two point four point two so let's go ahead and do that so if I do RB and B it's hard to remember install two point four point two cool so we're at this moment downloading Ruby 2 point four point two this takes a bit so I'll probably speed this part of the video up but just make sure you do this step because you don't want to use the system based Ruby version it's too outdated for rails five point one point seven or whatever it is now I said I put one point four so while that downloads I'll speed this video up this finally installed two point two to our versions on our our B&B directory inside my actual user directory so we if we do our B I'm probably saying this wrong but that's just how I say at the fitti versions it should show two now and what we want to do is set that to point four two at this point so what you'll type is our B&B global two point four point two and then we'll do one more time I'm hitting the up key to bring back the history there are B inversions and it's set so we're all square on the Ruby front cool all right next to get rails to work we need to actually install it so you're going to sell it with the actual Jim and Ruby gems are similar to something like NPM if you have ever used node it's it's basically the same thing I would say node copied off of the Jim library if you google Ruby gems it should I think I have that URL wrong maybe James there's a whole site dedicated to these and they're basically like these awesome plugins there's plenty of potential out there to go ahead and build an app of your wildest dreams so with that rails is actually one of them so you can making google rails and you'll see it here it's five point one point four it's the latest if you just want to add this to your product you can do it like this it goes into this file called a gem file which we'll get into just just install it verbatim you can do it like this the guide here is actually kind of cool it's it's basically installing rails without some stuff we really don't need like documentation and stuff like that so I'm gonna go ahead and do the same on our installation just paste that into the terminal and hit enter all right as you can see 37 Jim's had installed 4 rails to kind of work we can check if rails is indeed working if we go to Rails version so I have rails 5.1 0.4 installed at this time if you run into issues definitely look at look into this stuff if you're following along and using the same and Ruby manager as me there's a lot of documentation here definitely recommend homebrew if you're not using it it will make your life easier if you do on a Mac for sure at this point we've got rails going we've got Ruby installed and then the next step let's see just install code editor and we can create our first app this is gonna be me walking you through how to create a simple blog like structure using Ruby on Rails as the I guess the CMS and the actual creation edit and deletion of posts of a typical blog I'm using such things as like boma which is a CSS framework you see all these Styles are kind of adapted from it but this is the basic app we'll be building and is you can create posts read posts and actually comment on posts too so here's that what a post could look like and this is all without any kind of user accounts so in future lessons or videos I'll be actually creating a user admin kind of side of this so where if you were an admin user you'd have say these controls but if you weren't you wouldn't see that at all so we'll be going deeper into that and future stuff so stay tuned for that but this is just kind of to get you started with rails and Ruby and to get your palate adjusted to how things work with with it it's a little I guess hard at first to understand if you're new to Ruby and rails but essentially we're working with a MVC pattern on this web app framework known as Ruby on Rails of course this I have running this is what you'll be building it's the demo app which is on github and I'll share that in the link or the description etc so when we get to that point this will be what we make we're going to probably do some copy and pasting in the sense of styling and maybe some HTML markup just because it's going to save you save you some time and the point of this series is to just learn Ruby on Rails so without further ado I'll go ahead and get started I have this server running our demo app already and it kind of looks like this in my terminal I'm gonna go to control C out of that and it's called on github demo blog rails and I did kind of a one-pager of what we're actually doing here so it's a like I said it's a blog to demonstrate Ruby on Rails with posts and comments so the main features will be obviously posts and comments for the comments will actually do that it's gonna be create read update destroy or a crud pattern for posts and then comments it'll be create read and destroy so if you alter a comment you can see it obviously but user can also delete it but they can't edit it there are these things known as gems and Ruby on Rails and these act as kind of like a node package manager kind of scenario very very similar but will make be making use of these as I go through and these are basically out of preference for myself but also just stuff that is a time saver later on there's thing known as guard that helps with tons of tasks behind the scenes if you used to like grunt or gulp or something like that it kind of works like that but we'll use live reload for our sass and any changes through our J s or E or B files otherwise known as HTML files in this case and then there's a better edge errors Jim and one called simple form which makes authoring forms and rails pretty darn easy so this will all be accompanied with a blog post so definitely you know look to that for these code snippets but also this is all in github so I'm gonna back out of this project the demo app and actually create a new one we'll just call it demo blog so I'm gonna do rails well let me make sure there's not one in there yeah I do rails new demo blog and I should generate everything we need there and run bundle which will install all of our gems so with that installed we can go ahead and CD into that demo blog directory LS yeah so those are all the files and folders in our directory by default git is initialized so that's pretty cool if you want to go ahead and version this definitely start now everything that is ignored should be ignored but you can also ignore more files if you want to that's just how it comes out of the box I probably will just go ahead and do that just to make things I'll just run getting it and get and so get commits and commit cool all right and then I'm clearing that using command K if you're new to the command line you can also type clear and hit enter and it'll do the same okay so first what we need to do is verify our apps running so we can just use rails server and this is a good practice just in case your environments not instead of correctly or something's off this is going to go away and turn into this which is the screen you should see if you installed rails correctly all right so with rails installed we need to get our you know mindset around this app and how it works there are things we need to configure that make the routing work right and to get to get things kicked off and when actually generate it what is known a controller so I'm going to keep this server running and I'm actually going to create a new tab in my terminal community and hyper I think it's the same in I term and probably your default terminal app if you're on a Mac of course so I'm gonna have an alias set up for that sites directory which is just my desktop sites cool you need to CD into our actual app again so demo blog and here I'm going to actually want to install the gems we want first I think that's a good starting point so let me open this in sublime here we go and I have the actual blog that I showed you first behind it someone it minimize that because we might reference it later just for some quick HTML stuff that we used which you can basically just grab from the bowl my website which I'll get into so by default it seems huge if you can see it these are the gyms that install with rails most of them I mean you make use of SAS rails of course Puma is required a sequel light is definitely required for your database you can make that any other type of database if you want we'll get into that in future videos and of course rails again I talked about this in a few video a while back so definitely check that out but what we want to install are these gems that basically make our life easier when working with rails I'm gonna reference a file real quick one for sure is called better heirs and we'll actually do that I mean it could be in the development group I guess but I'm going to put it here just for now so we'll do the gem better heirs I'm referencing a file what you should do isn't this and just type it in because it's pain but I'll show you what I end up doing less the time to four okay so we have better errors okay cool so that's obviously you can come in here and just say make errors that are looking just by default in rails if you get an error it's this big ugly mess of red stuff red Fonz Fred Phil's and stuff I got better errors just looks better it gives you a little more data of what's going on and ice that should be Jim okay so you may be wondering okay I'm never going to remember you know this why I'm never going to you know figure out where that's gonna be so there's a site called Ruby gems which conveniently enough our gem file actually references if you look at the very top and go to it here it's source is from rubygems.org so definitely a good site to you know keep in your back pocket so we'll go to that site and as you work with rails you start to find gems that you're kind of you're just your go-to so don't think you're gonna you're supposed to know these elf hands but as you see in other apps they could just kind of come throughout when working with it so here's the best place to find the most updated region or version sorry definitely recommend doing it the gem file method and not install on your system because then you're stuck with it on your system and this is more of a gem file per project approach so your projects will vary based on what you're building so definitely keep that in mind so I'm just going to go ahead and paste that in just for safety's sake the next one I want to use is called boma so I'm gonna do a search for OMA and I always look to kind of see which one has the most downloads usually that's the best candidate somebody ain't copy that go back to our gem file at it we'll call it Roma CSS and bomas like a lean down modern bootstrap kind of CSS framework I like it you don't have to use it you can use bootstrap you can use foundation whatever you want simple form is our next one so I'm gonna go to and in most cases you're probably gonna install these not all at once and have your mind made up already but for the sake of this tutorial I'm gonna go ahead and install them all it's probably best to install each as you work forward instead of just all at once so the next ones are going to be guard and guard live reload there's some quite some configuration with this one it's kind of hard to understand at first but they do have repos that you can reference for the how to's and on rubygems if you go to the home page or the source code typically it's you know the best place to go the github repos tend to be the most up-to-date so I definitely refer to those and this is guards for example so will actually put that this one's kind of special we only need it in our development environment so rails has a specific group that classifies that as the environment here and we'll actually put that in there and you don't need to add these comments at all but typically up just from my own you know sake I'll copy kind of the one-liner that they give it rubygems.org and throw it in there and then the main reason we need guard is this guard live reload extension that's what I primarily use it for guard is capable so much more so don't let me you know sway you and thinking that it's just for this guard live reload search for that hmm there it is someone I install that and I'll do the same thing with the description all right so we've got our I think all the necessary gems that I need for this particular project installed gems are kind of be gonna be your Savior in a lot of cases as just come to find things like user user accounts user roles there are so many out there that are great for handling that stuff for you I definitely google that stuff just kind of get familiar with the process and we'll we'll definitely touch on those more in future videos so stay tuned of course next since we have those gems installed we need to run this thing called bundle which actually goes out and fetches that data for each so we're gonna install everything we just added and you'll start to see those names now over here like simple form let's see guard should be there yeah so you'll see them now that's part of a dependency in the project now so that's great when I do that I tend to kind of restart my server so if you do control C on a Mac you can just kill your server and then run real server again okay so for our some of our gems there is some setup required I'm gonna go to the simple form one and do that one real quick and I'll never remember how this should be but if you refer to the repo like I said that's the best place to figure out how to do this setup it gives you kind of the idea here but like I said this gym isn't up to date I mean it would fetch the latest version but in your project you might need to specific version so that's why rubygems.org is the thing so definitely use it instead of these repos so we need to run this generator for this to work for this specific gym this is the simple form Jim and I'm gonna actually go to my other tab on my terminal I'm in that actually let's do a git and and Jim's simple is that okay so we need to next run that generator which is rails Derner neat simple form install and that's I just literally copied and pasted from that repo if you are using bootstrap or foundation it comes out of the box with support for those so up to you if you want to I'm going to show you how to use this CSS framework called bulma and it is essentially more or less a modern for take on bootstrap or stuff like that it's got a really cool style look and feel to it so I just figured I'd give it a shot it's actually my first warmth more or less my first time using its others there might be some googling and stuff that I'll have to do to figure some stuff out in terms of class names but definitely check it out it's based on flexbox which is nice that installed we can go ahead and bypass these flags to install bootstrap in foundation we don't need those we'll run the generator to simple form install and it should do its thing cool and it just gives you a kind of a feedback saying hey you can rerun this if you want to use bootstrap or foundation it's the same same thing I just told you so we really should be all set there's no migrations to run or anything here so that's great next we want to configure a guard and I'm actually got the write-up of how to do it if you go to that ruby gem site and then go to guard live reload you can link to this it'll show you what to do we actually need to just notice I need to add this require false on that gym file you do right there and I'm gonna actually turn on word rep actually need to run bundle one more time you're gonna find yourself doing this a lot okay and for safety we can we can do this again if you just hit the up-arrow rails s again great running you can verify it in the browser we're good okay one thing to get guard live reload initialized is to create what is known as a guard file and that's part of using garden and I should preface all this and say you don't need to use this stuff it's just useful if you want your browser to refresh automatically when you do style changes or something like that you can configure it to do more based on whatever file types you use like Hamill slim J s EML etc so it's pretty useful in that regard so one thing we need to run after that gym is installed and configured as shown here is garden it library loaded and it might throw some warnings at you it's okay basically all it did is create a guard file with some specs in it so we'll go back to our project and you'll see this new file called guard file so it should be actually set up out of the box so that's great this stuff I know it looks confusing but it's basically just it's finding directories in your project and watching them as they change so there's some kind of what's it called I forget now but specific keys and file names and structure and stuff like that to watch and update your project as you save basically so with that I'll set up one more thing we need to do is make sure you have the actual browser in its extension installed if you go to live reload comms less extensions it'll give you links to each I'm using Chrome so actually install this in the web store I think all right so I already have live reload installed so no need to do it on my end if you don't go ahead and install this extension I believe it's available for almost all browsers so it will make your life awesome when you actually install it and use it in Ruby on Rails so switch over to our terminal and with everything essentially okay we should be able to run bundle exec garden and that specific command is there because we need our dependencies if you don't run it with bundle exec in front it won't notice that you're using certain dependencies so it's kind of a long thing to remember but Gard is essentially the command line Keith's key term that fires things off when you're using garden but in our case we need to run it as is and it'll just kind of do its thing so once you run it once it just sits there and waits for stuff to change so at this point we can you know make a new terminal window again and go back into our site's directory and then go back to our demo and you know go to town so at this point we should have everything installed and we can verify that by first creating our very first controller so I'm going to go ahead and do that and we get this out of the way since we're using a blog I'm going to do a posts controller so to do that we need to generate G or you can type generate here - controller and if you're very very new to this and want to figure out what this stuff actually does you can do the flag help when you do generate controller and rails will spit out kind of what you can do what you can configure on the fly there are options to skip things if you don't want them to be generated like JavaScript or the assets at all you can use a certain template engine and not use the default er B so that's kind of useful but yeah so read into that if you just type the flag help after a lot of things it will give you a lot of insight that it wasn't so you know I guess understandable by me at first but until I read that stuff it made more sense so let's just do this rails generate controller second spell controller and we'll actually call this I'm gonna do capital I'm going to call it on hoes it should be plural for the controller so for your models which we'll get into keep those singular just remember that so by default you can you can have what actions could be on this like index show edit create etc I'm gonna go ahead and just leave them off for now because we'll actually type those in so I can show you exactly how this stuff works so we'll just do it the basic generation of posts and as you can see in the controllers it will generate this file called pulse post controller RB and various the view posts folder the test stuff helper stuff assets like I said you can flag this stuff to not generate I attend to just you know run with a flow and and just generate it and delete it later that's just me being lazy of course so alright so let's again open this and sublime so in our app directory we're gonna find our new post controller and this is all generated by default so to show proof of concept I'm going to create action called index and one more thing to get this to work is to create a view called index so you go into your views folder your posts folder and then create index dot HTML dot RB but for now I'll do it with just h1 I think they use class title and then we could just put index log index so finally if if you were to visit the site okay it's still working and you can go to posts and then you'll see that but we actually need a route first so that's why we're getting Aires and I know this bundle my better Aires gym isn't working so that's interesting all right guys I can't get for some reason this better Aires gym isn't working for me but it should look like this on their repo and I it's kind of mind-boggling but what I did though try I mistakenly added it to the basic gym repo but we needed it in our development environment so I put it down here for now so if it were to work go ahead and put it there make sure you do because you don't want that in production so anyway it's okay if we don't have it but that should be working it might work for you and it just isn't for me at this moment so okay so we're still getting this air that when we access the posts controller we made there's nothing there and that's because there is no routes set up so we actually need to set that up in our routes config file so go to the config folder routes and then we'll just do this thing called resources and then posts and that should be it but to make things a little easier so we don't to navigate to slash posts in the URL I'm going to go ahead and put a route parameter and change that to index or posts index okay now that should do it when you do update your routes file you you probably want to restart your server yet again so go do rails s and go back to that refresh and there we go we got our blog index and that should be all set alright guys I took some time and got this stuff working so never fear on your end it should work if everything's set up correctly of course but I got the better Aires thing to working and to just prove it I went to a post that didn't exist so it's working there and then I noticed when I went to my post index I was like wondering why my CSS wasn't loading and that's because I was getting ahead of myself and the bull my gym requires you to import the boma styles stylesheet in your application CSS so I'm gonna go to Ruby gems and go to that home page real quick just to show you by example so Bulma and Bulma rails and go to the home page it should take you to a github page and the main thing I forgot is when you import it you need to actually import it into the main stylesheet of the project so I'm gonna go do that and we're gonna use sass by default it's gonna be a CSS file and your style sheets go ahead and rename that to s CSS and you should be able to use sass right out-of-the-box so there we go and I'm gonna just import that bulma CSS there I think we have guard running now we need to so bundle exec garden okay so if I save that again which it's not really I set this as sin thanks let's do CSS I guess I don't have sass for it for some reason that's great okay so back to our blog watch the type hopefully update here give it a second there it goes okay great so we know basically verifying that our CSS is loading okay so now that we have our initial in index action created and our view index created we know that things are working we've got our routes set up in our config file if you go to come fig routes RB and you should have these things in here so great we're ready to get rolling so what we want to do is kind of configure the actual way this is going to work so there are other actions we'll need to include on our controller but the main one I want to start with is they create action but we need a form to create a blog post right so let's go ahead and do that and first to do create we actually need this action called new and then create okay and we actually need some data to work with here so this is where models come in and I'm gonna actually generate one right now called post so let's go back and make a new tab and go to my sites again see demo blog great and I'll actually do rails generate model and call it post capitalized and I'm gonna give it these basically what I call them data types and it's just basically the things that get entered into the database and you can name them but you also have to tell the database what kind of data type it is so in this case for a blog post I want a title and it's going to be a string type of data and we also probably have you know content within that blog post so I'm going to do text some text is it like a long-form text so think of it like that so you can add as many as you want to a model like this but you can also pin things later with these things known as migrations which we'll get into let me bump up the size if you're having trouble there and when running this it generates our model so let's go and do that okay so you'll see it created a migration in itself that's part of the model process so in this if you want to see what a migration looks like you can go to your project and there is this file call or this folder called DB inside of it's a migration folder and inside of that as the migration we just created rails is pretty smart by default it does the time stamping so you don't have to worry about dates and stuff like that or like you know created at kind of stuff that's already included by default on pretty much any model or migration and here's those things we entered as the tables in this sense at that point we can run what is known as rake DB migrate or rails DB my grade and that will set that up in the database for good and you can roll this back well hopefully I don't have to do that in this video but we'll get into that later on if you need to so forget sake I'm gonna end oops message add post model okay so at this point we can we should be able to interact with that model itself we need to basically add it to our controller in such a way that we interact with the model so you'll see in our app directory we have the model post created shouldn't have to do anything at this point we will later when we add comments to this thing so don't worry about worry about that for now but we will interact there but then our main source of work right now comes to this controller the post controller so let's go ahead and we can reference this post by doing that and essentially we're calling that post model now and we can say hey we want a new one the creative method utilizes the new route so if you are confused about routing since we added that resources parameter to our config file or a routes file should say if you run rake routes it'll spit back all the basic crud actions for the post controller so we have post index which is like the index page of the blog create which would be where you would go to create or the action that takes place when you create a blog post new is the actually path you take to go create edit of course as to edit show is to just view the individual blog post update is to edit it it does kind of that you can do different types of updation updation has that word updating and then of course you can delete it so that's kind of explaining that at any time if you run rake routes rails will spit back all of your routes in your routes file and kind of the URI pattern and the action involved so it's super super helpful so going back to our project that kind of gives you the sense of what these actions are and where you're going to be going when you create a new post something of that nature when we create a new post we actually need to do post and do a similar fashion post new but we need to pass in the parameters that we used to create the posts and you could pass those in right in line like this but you're gonna find that you're gonna be reusing this in other actions so there's this private method you can add to your controller file that allows you to create this thing post params and if this isn't making sense that's okay I was lost when I first started this but the more you do it the more it makes sense so here we're requiring for our model these specific records or tables whatever we generated in that migration and this is kind of a security feature of rails that only permits these things from being actually input to the form we do when we create this record if they aren't initialized here you can't actually submit data to the server so that's kind of a security thing so what we're really doing in this case is passing this function into this new creation method here and then we can check to see if that post saved and then if it did we'll want to redirect to the post itself else render the new template again okay so at basic form we're ready to create a new post in this sense if we go to run rails new we're going to get an error so because I don't have the template yet so it needs a template in our views folder so if we go back to our views go to posts new file new HTML Arabi and we could just for now I'll just do so that should at least load the page now great to create the form we need we are actually going to I'm gonna copy I'm referencing another screen right now but I'm gonna add some markup that we need for boma plus our form so let me do this real quick might speed this up so you guys aren't bored before I do though this is where we're getting that simple form gym going and essentially rails has a built in form builder it's just almost just like this but simple form kind of obviously simplifies the process so it's it's one that I find pretty useful and makes more sense for stuff I do you're welcome to use the rails way they there's does tons of stuff too so it's it's just a matter of preference I would say so so I had to experiment with bulma to get this to work and I had to do a little extra code outside of simple form the whole intent of simple form is to eliminate I think the amount of markup you have to provide I'll to walk you through this stuff in a second wrapper false label just you know class label so that's one input field and that's going to be for our title and the way this works is you reference the actual record here of the input and that rails are smart enough and simple form is smart enough to know what that means here we're classifying actual class on the input field itself and we need to input in this case for Bulma we don't want the rapper by default simple form puts its own wrapper around the input field and this was causing errors with boma because it had a similar class so there was clashing of styles and I didn't want that so in simple form you can put a wrapper false declaration and that will help and then our label HTML we needed a class of labels so I went ahead and added that too so this is one field in the sense for our form I'm going to create a copy of that and paste it down and this one's gonna be for a Content and we actually want this to have a class of text area according to bulma and label HTML we should be set there then the last thing we need is our button to submit the form of course so I've got button and then submit and this is built into simple forms that's nothing we created always put great new post oops in class button is primary that's part of Bulma as well so if all works you should have our style set up yeah there we go so that took some trial and error but I got it to make basically work for us so that was pretty nifty at the time yeah and once we'll get into cleaning this up in a second in terms of making this look like our first app I showed you at the beginning but let's verify this works test post content should get an error I think yeah so there's no show method right now or action on our controller and we actually need to have that so let's set that up so I'll go back to my post controller and we need to create an actual show action def show and in line and on the show we actually we need to find the post that was created so if you do post dot to find params ID so we're finding by the ID and we'll be reusing this line about three more times so at the end I'll show you a way to kind of make use of before filter or action that allows you just to kind of have that set in stone you only need to write the code once just kind of a really dry of approach but for now just to show you how things work this is what we need so in that sense if we head back should find that we need now and I'll show template so let's go to our posts folder again create a new file called showed HTML that Irby and we can just I don't know what did I have in my markup here quite a bit of stuff so I just do section I don't know if I have I'd you okay great teener for now I'll just put the title and the content and rails if you're new to it this is kind of the general way it looks so you can do Ruby inside these brackets and percent signs if you want to echo it out but the equal sign if you don't and you want to just perform some operation or set of their variable you can do that there you don't want to do too much magic inside those it's more more so for just displaying the data so keep that in mind so here we have reference to that post symbol and we can just target the title that we created so I'll just create a class I think ball my house when we call content and I can do the same with the content type so the controller sending this data through to the view if you can think of that that's how we have access to this post property or symbol as they call them and that is shown here so fall goes right we should be able to see that data there it is so and that gives itself an ID if we go back to our posts index will see the index let's let's clean this up a little bit so our index we can do this section as well like to see section section then I have container and that'sthat's basically a max width and boundary for our project I created for Bulma I created these it looks like a cards on the front end so I'll go ahead go through this with you for our index we actually do need to set a new variable or symbol on our project where it gets all the posts so I actually want this to be plural instead of post in this case so we'll go post all and then order here you can just establish how it's displayed I think about when you do loop through all the posts so order descending and notice in Ruby you don't need ugly semicolons and all that stuff so I really like it it's really clean so going back here now we have access to that posts symbol so we'll go ahead and reference it and notice I'm not outputting this loop I'm actually creating what is a rails loop at this point but with you dot each do post I said rails it's a ruby loop excuse me and then we can loop through each post so the boma way goes like this at least the style I chose so bear with me you okay so with the markup in place that should do it for us we need to add support for the post title and to do that go back and do post title I notice here since we were looping through we don't need this to write the symbol with the @ sign in front of it we're using this as the variable throughout so something to keep in mind when you do loop through things so it's just post our content post a title and comments we will add later from for now they'll be see if I can just comment that out comment the comment firmament at each no I did that wrong it should be posts boom alright so there's our first post great going one step further obviously I can't click that post right now and want to click it to go to the actual individual post so to do that instead of just the title here we'll make use of that but we want to do a link to in rails which is a handy basically hrf generator with a ton of properties and then we'll actually link to the post itself and again this is one of those rake routes situations if you're not sure what a link to this is you know where I got that from so here now it's a link we can link to the post great alright so I think next I'm gonna add general links to you know kind of navigate this blog a little easier so I'm gonna actually pull up my other project and get the layout file open and the layout file is kind of the global source of truth for your Styles this is where all your content gets fed through this yield sign is everything we've been creating so far all this stuff gets fed into that and spit out so I want to actually add this content to our layout and I'll talk you through it and this is this kind of a time-saver so don't think you need to learn every bit that I'm teaching you here but let's see so most of this is boma and here I've created a section class called hero if you go to the Bowlin library there's a whole section on that let's see here oh and there's different snippets you can use I use one that's basically let me find it I think it was this one here but I eliminated this bottom row of Link's because we only need really one or so in this project so let me go back and show you how that worked we have our hero section the hero head the navbar itself in it I didn't create a logo or anything it's just text that says demo blog and we're using a link to function we just use in rails and linking to our root path you notice the path extension doesn't come when you rake routes but that's just kind of an understood path that you can pull from each route so we can get posts paths or new post paths or edit post paths that's something that you just kind of learn as you go it's not so obvious sadly so let me go back to the project and we're giving it a class and have our item for the sake of FOMA and then we added a link on the end of the nav on the right side which will link to a new post path as again adding that path at the end and that will allow us to go to that new URL path and then here I'm doing something nifty where you can actually for each of your views you can specify something in your layout file using this thing called content for and I'll show you how that works right now so essentially you can set the variable here but define it in your views so when you hit that view in your URL path that updates based on whatever you said so to make that make more sense I'll do this one right so it'd be it's called content four and then I set it as page title in our layout file and this one I just want to call index so if we head to our index page you should see that new layout form and then our index thing is set or index title and going back to the layout once more it's called page title so on each of our view is well actually need to add something of this nature so I'm gonna go ahead and do that for all of you so far new create new posts if you don't add this it will air out so it will pretty pretty obvious what views you don't have it on okay so with this set up when you know create new posts and that we just set and then we'll actually need to do it on the show view as well but this in this case we need to actually have a variable set for it so let me copy that back and you don't have to use a string you can do posts that title and it will render the same way so let's go back to our route go to this and the first post title should display there too we have it displaying twice I'll probably get rid of the one down below pretty great now that we have that set up why don't we tackle how to say edit a post so let's go back to our post controller and to edit we need to actually have two actions once called update and one is called edit edit is the view will actually render and update is the actual method that will actually take place so I'll go ahead and create def update and edit so update we need to find our post again to know what Tati so we'll do the same thing as we did for shell params ID you should do a server-side check to say hey if the post has been updated let's redirect the user to the post itself so we'll do again post params we're pulling that in from the bottom here so we're doing that double verification check if the form has since updated and then we want to redirect the user to the post itself so in this case write that else render edit great and then for edit we actually just need to find the post again so post see how I'm repeating this I'll show you how later on to make this not so repetitive great one thing we will need to do which will get an error for is to actually let me add to the view first so we can I can show you by example so let me pull up my other view on the show page and kind of walk you through what I did there so this one we have the page title we have our section or container and there's this thing from bulma cult level class level oops can't spell so on the left side I'll do pretty much just follow what I have on like repo left sign div class level left P class level item and then this it's just kind of a placeholder because otherwise the actions weren't floating to the right like I wanted so a little behind the scenes fibbing there right side or where the actions really will be so these are going to be like the edit and delete buttons so we'll do P class level item again and inside this we'll have a link to our actual edit action link to edit we'll just call it edit and then this will go edit post path notice it's all dynamic based on the actual model in mention we do need to pass the post through to it though so that's something that's new and then we can give it a class button ok and then I'll come back to the delete one but for now we'll add that so another link to in fact I'm gonna leave this I'll just put delete for now it's not gonna do anything though so I'm gonna just hard code this but it's a to do for sure so button is danger because deletes a little little complicated on how it works because there's some data interactivity you need to take place within the browser so we'll get to it nav and then I had just horizontal rule and then we have our content class again I could have left that from before but I'll just do that so we need our at post content renderer that okay and later we'll add a section for comments for now I'm gonna leave that as is okay so if all goes right we should be able to edit this post now and we're missing the template so we actually need to create that so it'll be edit HTML TRB and in our case I'm gonna make this a little more dry and one thing we absolutely need for sure is content for and we'll pass in page title again from the layout and we'll just put edit post but I also want to since edit and create kind of use the same form we might as well make use of the same form instead of reauthorization and this is how you do it in rails and I don't have it created yet but I can so in posts again in the folder views folder I'm going to create one make sure it is underscore at the beginning that's how rails knows what it is I'm just gonna title it form that er be HTML dot RB and if I go back to my new file when I copy and paste this in I actually cut it from new paste it in the form save it and for edit I have render form already I'm actually gonna copy and paste this and put it in the new file as well so we have essentially our partial and the title for the page in these views okay so if I always right we should see our form and the content within it on this page rails are smart enough to kind of know that that's an edit and update kind of scenario so the data gets fed through so that's pretty nifty we can probably tweet that button to say it's probably get rid of this text actually this will probably be wrong in the repo but that button text needs to change dynamically so this needs to say update post yeah so that's rails being smart again so I'll just sit update and it redirects back to the post so great we have our editing functionality in place and to test it I could do a test post content with and update update there it is and if we go back to our home page there it is cool so the last thing to think about is okay this delete button we need to make sure that's even possible probably don't want to always have posts on your site that you know you can't delete so let's get back into our post controller and we'll need one more action called delete or destroy in this case and we actually we need to find the post once more so we'll defined params ID then we could just put posts not destroy and that's essentially how it gets deleted but we actually want to redirect the user to to the post path so in that case it would be the index page we can put route route path there too but I'm gonna do post path okay so in our view here's where it gets a little complicated we'll go back to the show page and that to do I entered comes into full force now so I'll actually need to do another link to and make sure you get the equal sign okay and then we need to pass in the post path itself so there's no actual delete or destroy post path that's not part of our routes that wouldn't make sense so we're just getting the posts path with the post ID and then our method on it will be delete and it's typed like this and then you can you know tap into the browser functionality and access the confirmation window which is typed like so and then I want the Bulma classes on this as well so we'll do button and then is danger okay so our method is the delete method on this post we're getting its ID and then we're confirming with the user because you don't want to just delete it outright without that kind of gateway in between so let's verify that that works now so here's our are you sure and then delete an hour at our index page with no posts so let's create another one just to make sure everything is working second pose great then it goes to the post cool third post great and there they are in line this is our root path this is our create path or new path and we go back to the show path which is getting the ID of the post and we can edit the post and update the post and delete it so great that's essentially the functioning part of the blog so we've gotten that far most blogs have common forms though so we want to actually add that to our view next and to do that we need to generate both the controller and a model for comments so let's go ahead and go back to rails or NAR I'll actually do get and finish tation of posts I don't know posts this is the hardest part I swear okay cool so we would need to create one more controller called common controller I'm gonna actually do rails generate controller let's just call this comments and we'll just leave it at that okay and I'll just do the model too so rails I mean clean this up rails generate model let me verify one second one I had created so yeah we need a model called comment and its title areas name of the person commenting would be a string and the comment would be text I ran into the weird naming issue that like the comment thing it kind of gets confusing later on but I'm gonna keep it as is just so it's consistent with what you guys will see but you might change that name to something different here you'll see what I mean so let's run that and you can verify that that migration is in place and our DB folder again it's a create comment there it is so we still need to run migration so rails DB migrate after you run that should create those tables there you go okay great now we can interact with that the first thing I'm gonna do is go to our models and this is where relations comes into play a post is going to have many comments rails has tons of documentation on this if you want to read up on it it's really important to understand but it's very basic how it works so that's why I really like it so if we could do as many comments but a comments gonna belong to a post so we'll do belongs to them post notice this one's singular and this one has many so that relationship is basically established just like that so we do have a comments controller now we should only really need our create and destroy methods on this one since it's going to be showing on the show page of our posts so let's do a create oops and destroy and it's a little confusing because we need to have that you know relationship between these two models now so we need to first find our post we need to find it by the post ID and that's something we haven't talked about yet is migrations and one thing that isn't quite established between these two models is an ID usually there's a relationship based on ID between them so we need to run what's known as a migration at this point and then we will do rails generate migration let's see add post ID two comments so if we run this hopefully rails are smart enough to know what we're after but we're taking the idea of the post and putting a new table all in the comments model so those IDs when they're basically you know related to can have something of relation so the idea is how that works it's kind of confusing but we'll see what happens in our migration here we go to migrate and our latest one so it didn't actually sometimes it automatically does this stuff for you but unfortunately it didn't so you might need to add this yourself and the way it automatically does it is how you type it but we won't get into that I guess no so we need to add a column in this case two comments and then it's going to be post ID and of the type integer so we'll close that and we need to run one more migration so rails DB migrate it should add that record to our column so now we have yeah that column comments on comments which is post ID and it's an integer so if all goes right we should be able to access this as I've typed and we also need comment to find the comment on the specific post comments create programs comment and then we can permit instead of doing that private function we can just type it in place like this for the strong programs that rails needs and we need to close that and then once that's good we can redirect to post post okay so here we're finding the posts based off of this variable or symbol we created once we have that we can get the comments on it and go through that comments model and then create the new comment on that post it's kind of kind of tricky kind of hard to understand but that's essentially what's happening so let's first verify that that works I'm going to go to my show file and I'm gonna make that form so when we have an actual comment form here we should be able to see the name and the field to type the comment in so let's go to views layouts post show ok so here's I have that div from before or that section I should say I'm gonna go ahead and do a container when I call this section two that's part of a spacing thing in bulma subtitle and just applied various classes here to kind of design this without actually doing custom styles and here we need to add post that comments that account so you are getting the posts comments count obviously then we could just type comments here before I go on though since this record the records that we have don't have this stuff associated with it it's going to air out if you don't have some of this stuff like the post ID so I'm going to go ahead and delete these and then we'll add fresh ones and I can talk about how you can do this without the interface because sometimes rails will throw up an air screen and you can't access the UI so I'll show you how to do that it's called rails console and you can essentially just interact with your database through the command line so next we want to render comments and post our comments you make some more room you go and that will essentially be our of comment feed next is the common form and I just added a horizontal rule h3 with a class subtitle and is three just the sizing class you can put it leave a reply and then we rendered an actual form which we still need to create great so it's going to air out obviously because we don't have the form we actually need to create a new post though so let's do I don't know I think I'm on my fourth post fourth post comment and boom Michigan comments form so we need to create that in our comments folder let's do a partial that's a form that HTML ARB and then in this file it will be using simple form again and then it gets kind of tricky here but my grab should we close it so to make this a little easier I'm going to grab the content from within this form and we'll just change the parameters oops and this will be named and this will be comment okay for save inside the simple form for we need to pass in both the post and the post comments let's do post and that post comments and then this thing called build and this confused me too but build I have a definition here it says it returns one or more new objects of a collection type that have been in this Stan she added with the tributes and linked to this object through a foreign key so it's kind of how we have the post ID on the comments we're getting that post reference from it and then you can update that form and get that data from that that thing it says it also only works if it's associated object that already exists so it can't be nil so that's why I deleted those records because this stuff would air out otherwise I think that's it for the forum it's verified that it'll pull through and then we have post path what am I missing here alright guys after quite some time trying to figure this out I realized immediately when I thought about it finally a big gotcha is that to do what we're doing we need to actually edit our routes file so comments needs to be within it and I totally forgot about that so let's let's go back to that and actually fast forward it and try to do some more code here for the destroy method to see if I just had something wrong I'm gonna delete that for now and then we'll we'll get it in the next part after I get this crap working so let's fix that and then I'm gonna go into my rounds file in config close these comments are nested within the scope of posts we actually need to create a block with Ruby here and do and and then inside here will do resources for comments this is only for nested kind of things most cases you'll if you're having completely new routes you'll do just similar like we did the resources posts but in this case we're doing it this way so since we edited our routes file I'm gonna go ahead and restart my server cleared out of it here and we have it running do control C and then up arrow side rails s again so now if we do actually I'll stay on that view and go over to this here and I'm gonna do rake routes this just show you what I mean so since they're nested you'll notice how it works it goes posts and then the ID and then comments and there's no just immediate comment route so when they're nested like that that's how that works pretty simple okay so let's go back to our code editor and actually have the demo app that I had built previously up try she's trying to troubleshoot and let's go back to our comments file on our app views and actually the post show files when I'm after I have that render comments form showing so we should be able to at this point see that form up here so yes it took me too long to figure that out and I feel bad for it but anyway with our controller setup and our data models you know related we can now leave a reply I'm gonna go just put any limerence this is my first comment leave it and we're missing a partial that is what the comment would spit out as so it's kind of like the show view of our comment that will render once that happens right here to get that we actually need to create a new file called comment but I'm gonna make it up partial so underscore comments HTML and I near me and I'll reference another file I created from before and this one I'm going to use a box class from bulma and inside that will be an article and it's going to have a class of media and will have a class of media content if you don't emit installed that's how I'm doing this dot notation really recommend it on whatever code editor you use kind of a lifesaver so you could just do P and strong inside that will have the comment name and I'm gonna actually put : and then the comment itself and here's where I mentioned naming convention before and this is why it's a bad one because I'm referencing the comment model with the comment data type so it's confusing as as hell right there so definitely maybe use like something different than me if you're just following along but for learning purposes it's not a huge deal but just know naming conventions are huge and if we want to delete this it's very similar to the one we did on the post so I'm going to go ahead and type this one out do a link to delete the only difference here is we're referencing that post again so we need this bracket notation and then also the comment ID to make sure we're referencing the right record so we'll do a method of delete and then a class again button is danger oops danger and then we actually need this data confirm in window again this is just essentially hacking a browser and there are ways to work around this say you want to use a different modal to ask this are you sure kind of question you can do that that's something I won't be touching on in this video series but it's it's a workaround you need some JavaScript to kind of tie in to the the whole structure but you gonna essentially like say use a bootstrap modal or even involvement in this case to do this all right so with our comment parcel posted we should be able to render this comment now those comments missing comment builder hmm why is that oh it's I've written I think I named it comments yeah it should be comment sorry guys so make that singular save and kaboom alright so there's the comment we have a delete button it doesn't do anything in it does this data thing but it actually won't go back to the server and say hey actually delete this so we need to actually create that next but essentially hey comments are working so that's cool to do that delete method will need to go back to our controller our comments controller and we have that destroy method I mean and here again we need to access the post find it I should say so we do post find params and we need it by the post ID since we're in the commons controller so through the comments we are finding the post associated with it if that makes sense and then we need to also find the comment to destroy so post our comments dot find and then the params of the specific comment so it's just basically the ID of it and then we'll actually destroy it and will redirect the user to the post paths and this actually needs to feed that post symbol in so we know which one to go to and that should be it for the destroy so let's make sure that works well refresh this delete this are you sure yeah great so we're still back on this post and it's all working you'll notice that the URL has eight I've added in the leader records just trying to troubleshoot along the way so you might notice that that happens to you to do that realistically you sometimes your interface goes to the error screen so if you wanted to say do that from the command line which is probably the way you should you can do this thing called rails console and this there's a ton of documentation on it but you're essentially running a Ruby command line that's embedded within the terminal in rails so we can access our post model if we want so say I'm just creating a variable here if posts equals post it'll actually ask you to do this weird connection thing so just do that and forget about what it does because it's quite easy but clear that and then you have posts and then just say post all and you can see all the posts on your current model and here's our the one that was showing it's posted with an ID of eight it shows me in the title and the content so if you want to actually manage this stuff you can do post I don't know done equals post dot find eight since that's the ID there and it'll come back with that same one if we wanted a post dot since we assigned it to that post we now just have that post handy as the variable here it keeps outputting I want to update that title so let's say post dot title and then we'll do an equal sign this is post updated from rails console then it spits it back you still need to save it so I'm going to remember to do that so post out save there you go and then if we now get back if you want to just exit this you can go exit so if we navigate back to this post it updated so that's essentially a way to interact with your database without having to like do any crazy UI stuff I think it's the pattern that most developers go with simply because it's straightforward and you can actually sit without any errors so you'll notice right now there's no user accounts or anything like that any user can access this blog and delete it and edit it that's not very secure in a future video I'll probably talk more about user accounts how to those and make sure certain users can only have read-only access and other users can have writing access and deleting editing all that stuff one more thing for I forget on the controller I mentioned how we repeated a lot of stuff and this line in particular we repeat here on the show we don't update on edit and destroy we can create another private definition here so we'll call it actually fine post for instance and essentially just keep that line in there so I'll just copy and paste it oops great so it's there now and we have access to it basically for all of these methods and actions so rails has just hey anything called before action that you can initialize before anything happens on your app so we can just define it as before action and grab that method and then on it we can only queue it in for an array of these actions so for instance I only need it on show update oops update edit and destroy so what that does is essentially means I don't need it now for let's see edit and show show can just be empty update if they can get rid of that line edit I can leave it empty and destroy so that really cleans up our code it almost makes it look like it shouldn't even work but it does and it's awesome so we have that available to us you can do before actions for other things like authentication you can even do things such as making sure your app is secure like when you do enter certain criteria on your model you can actually tell it that it should validate in some way based on the server response I'll get into more of that as we go on but that's essentially without any security right now we have a working blog with comments hope you guys enjoyed this if you're just getting into Ruby on Rails I am as well so don't consider me a pro but I've certainly you studied up on it I've been building an side project on the side using it and I figured I'd share the wealth and try to teach others so I can better learn myself so more is to come I hope you enjoyed this again and thanks for watching

Channel: freeCodeCamp.org

Views: 83,142

Keywords: rails tutorial, ruby on rails, ruby on rails tutorial for beginners, ruby on rails tutorial, ruby on rails 2018, ruby on rails 5, rails course, ruby, learn ruby, ruby on rails blog, ruby on rails blog tutorail, rails blog tutorial

Id: wbZ6yrVxScM

Length: 97min 31sec (5851 seconds)

Published: Tue Jun 26 2018