Ruby on Rails: create a simple blog application part 1

hello guys and welcome to a first video in series on how to create a simple Ruby on Rails web application in this series I'll be building a simple blog application where users can sign in and sign out they also can add create new post and we will add authorization so only authorized users can edit a bit or delete post so let's forget so the first thing I would like to show you is what versions I'm using and if you would like to get the same setup I use I'll link the videos in description so you can follow the tutorials and basically they will show you everything you need to know how to set up your computer for rails environment so now what I'm going to do is just create a CD on my desktop and create new rails product so rails new blog tutorial and I'll be using item instead of the default terminal and a Tom ID let's see the into log tutorial and I open new tab and I will use this tab to run rails server so CD into log tutorial and we can open our project in ID mmm let's close this one okay so now rails generated an application and the first thing thing we need to do is to run bundle install install all the gems now we can start rails server and a your on rails so now what we have our server up and running let's initialize a git repository we'd add dot git commit initial comment at this point you may use bitbucket or github I will use github and create new repository and post rename simple block tutorial I will leave description empty choose public and create repository now because we already created a rails application we just need these two lines I'm going to copy and paste it okay so now if we refresh this page yes we can see our application on github okay let's go back to localhost and and I think now you should add some additional gems we will use so I will be using let's go to Ruby gems will be using bootstrap gem bootstrap and I will be using this version not the Alpha anymore so just click copy to clipboard let's paste this here and I will also add hammer Hamill just speeds up development process and and it's used and said all embedded Ruby so now again we need to if we add the gem so we need to run bundle install install a new gems and we also need to restart the server so to took it to stop a server collect ctrl C and again real server or rails s for short everything works okay so now let's create a new branch so if we make a mistake we could just go back to a master branch and redo everything again so type git checkout B and let's call it posts Reles sorry a first good check out master as you can see it shows that these two files have been modified so we need to commit the change so I I we can check by typing good status and get out dot git commit add bootstrap and handle gems so now check out get check out posts its status okay so let's generate waves come post controller so type rails G or general rate control our posts okay so as you can see it generate a sock house for us and if we go to app controllers here you can see post controller and we also let's go to config routes and edit this file so we can delete this comment I will type route posts post comes where this means post controller and index action so if we refresh the page we should get an error and yes faction index cannot be found and post controller so let's define it let's go to post controller and define index action now again you get an error post controller index is missing a template for this request so what we need to do is just create a is so called view and we go to app views a post at this moment it's empty so we'll just create index dot HTML dot hem and the main difference between Hamill and air being just an Hamill you could type something like this link to sample link but in embedded Ruby we would have to do this I think this seems us I loved as much time and instead of writing each other like this just something and Hamill you just type this thing so that's why I'll be yours again so let's add just default text something like Wellcome to index page and as you can see you get better but bootstrap gem isn't working at the moment and we should fix that so if you go to movie gems in bootstrap and home page we should add these two lines to our application dot s CSS so go to app assets style sheet and you must renamed this file to CSS or else it won't work let's save it and also we need to add these two lines in our JavaScript application pangaea's I will add it below jQuery but you don't need to declare so I will delete this one now it should work let's see yeah let's conceive a font has changed that's what we wanted so now we can go and to our routes and in using sublime text or our modern IDs we look at go like this and find a file or week just with shortcuts so in sublime text and a time I click command B and just type right out and I will type resource resources pose and what's this one line does is creates all the routes that we need for our posts to work and we can check whether routes type in rails routes as you can see in the route route posts index the first line and this line generated all these routes so if we commented at held and run rails routes we should only get one route but I need those routes one uncomment and let's go to again to post controller and let's define new action but for our actions to work we actually need to create a post model because we need a to work with database we need somewhere to store the information so let's create a generate model post and our post will have the title which will be a string and a body which will be text so in our DB migrate we will generated a file with a times and is busy with us create posts and create table posts and add a title column and body column but this actually doesn't execute it into a database level yet we need to write reals to be I agree and now a genius will apply to a database and if you made a mistake for example if I wanted to change something right here you would write rails DB or roll back and this roll backs are the database to a previous version but since everything is okay I'm gonna run really be migrated and now we can work with our post controller so I create a instance variable post which will be post dot new now we go to if we refresh and go to post slash new get an arrow but a template is missing for its request so again let's go to the posts and create a new dot HTML add Hamill create a post let's see how it works okay but to actually the new action to surrenders this page but to actually create a post need to define a great actual death great the post equals post dot new and at this point rails needs us to use the safe parameters for security reason so let's go down here and define a private method def post params params that we require post not permit title and so this slide tells that if we only allowed post title and body to be entered so receives for from the values of our forms and yeah and we call we call this method right here so now if cost that save if post is created redirect to post else under the new view as refresh token cabins and now we should create a form and I'll be using again a simple form of gem it simplifies where process for creating the form so simple form let's call the best jump I'll whole raise our bootstrap that's strange good step check out master well as you can see we redefined these two lines only in our master branch and that's a problem but now we should check out pose good check out post and should you get ad dot good omit let's type generate generate post controller and post model and we should get merge master okay so now we're out on the post branch and we have Jim's right there so now we can finally add a simple form of Jim so Jim simple form run bundle install let's restart the server and go to civil form of documentation and you see you need to write this line I just copy paste it okay so now we can actually create the phone let's go to posts new and type this line sorry I'll make it smaller but instead of user you must use post and we'd like to shorten this to just a pleasure this would be anything this will be an a letter but you must use if we define F we must use F down here as you will see shortly so let's scroll down to a usage and we need FN put user name password that's a bit okay so we need to type oops f dot input file case title and L that input body and also F dot input not input F dot button submit so if we refresh even know nesting contents Oh using handle nesting is really important so you can just may give this to spaces because this means that this one is nested under an h1 tag so we should use this like this now everyone should make it yes okay and what happens if it created post so for example sample post and also I will quickly go to lorem ipsum copy some filler text basically click post and the post has been created but it can't show us as you can see here we need to define a show action so let's go to a post controller controller and find show action and this will be post equals post dot find params ID so this is about first post ID here so it will find the first post and again we need to create a simple template and the posts create show dot each mail dot Hammel and let's type h1 post about title B or paragraph post not blood that's a fresh this page as you can see our post has been created and it can create new post and this gets IDF to we can switch this and at this point I like to add a simple link down here and if you click through this button the at the ready access to a main page so it's very simple to do it just just go to show and add a small user Benes link to help link to the back go back go to post / one here is your link and if you like it go back and also in post / new let's have a smiling small link to cancel again move back okay so if you at this point we have one two three four actions but what if we created a post like post / one and we made a spelling mistake or we don't like the content and we would like to edit it so we need to create an edit action edit and just like new action it just only generates the view but it actually doesn't itself create edit the post so for that we need the update action and then our edit action will just find the post and not in our update action we find the post and check this pose that update post params this checks it post parameters have been updated post params the redirect to post pulse under edit view and we could type this right here just like this it doesn't matter but personally I'd like to use this so okay let's go to post one / I did need to create a view again so under post new file dot HTML Bob Hamel and we could just copy this and paste it right here but we'll be repeating ourselves and that's a bad habit to do it would be better to define this line somewhere and just include this right here and right here so for that we use something called partials so in under post create new file and partials first letter is underscore form dot HTML dot handle let's paste this right here and this sleeve you can actually copy this and just type and it hit post and down here just render form and in our a detection we've seen render form that's a precious so now if we go to post one slash edit we can see our post and if we update it because we loved it that just so we can see the actual updates right here so now let's have a small link right here to edit a post so we don't have the taboos under show and it ended post path post so click Edit we can evade that post and click cancel I would like the cancel button to redirect us not to have this page but to post page so that's really use to fix just not Ruth path but post path and post so now if we click edit click cancel to go back I can't let it collect back here we go to the index page ok so now it's really inconvenient to type post / 1 what we can do is just list all the posts down here and add a link so if we click on the post title it redirects us to oppose that's really simple to do in index action let's define it posts instance variable not proposed but posts and equals to post dot all and let's order this by create ed add this sending so the newest post will be at the top and if we go to our index view you can write something like this can delete this and post doc beach view post and this - right here is just this so post that each do post post h1 equals so b h1 link to post that title post refresh page it works so now for example if we created a / new something like nonsense and I'd like to delete this boss let's treat a delete action the post controller define death destroyed and and this should use again this line but as you can see we use this line right here right here right here and right here and that's bad practice to do it would be easy again to define it once and use it in all these actions so let's delete this line from every single action update right here and to file a private method called f-find post and in the top add date before action find post we call action right here and before action runs before any other action is run on the page and we only need this action only on show action and it edit update destroy check if you know eros okay and down here just type and add post out just destroy and redirect to move path and we don't need a view for destroy action what you need is to go to show and add a simple link called the lead and delete post post and Method delete and we also had data confirm are you sure this basically prompts user even do just like I said click delete yes are we sure you click yes boss has been deleted I don't like this pose so again let's we can delete this by clicking ok and now if you go to pose slash free there isn't such a tree pose so what we now have done is we we have created basic post credibility so we should make changes target get at dot get comet and create post credibility ok so now let's go back but as you can see posts new and we just could create this empty post and that's bad we should add some validations so nobody will be allowed to make empty posts so if we go to my our mode models a post dot RB it have validates title length exactly land minimum pipe so the title will be will be will need to be a minimum five churches characters long so we try to create them to post you can see it gives us error and also for a body and holidayed body and just presents to this just checks so that this box isn't empty let's go to post / new add some pain and add text create a post okay and so we just finished our credibility we could get stats it at dot get comment add post validations and let's check out our main branch and before we do that I will show you what this does so you see here in our on our post branch we made some changes if you change back to a master branch master ever you can see where isn't no model files no controllers and to make them appear with right git merge posts and as you can see your area appeared and now we could push this to the github and at this point it will be good to upload this on to bed Hiroko server just to check everything works okay so if you're it's the first time you're using Hiroko just go to your website here Roku and create an account and follow a tutorial and associate your counted computer and then you can do something like this type hiroko create this basically creates a random name for our Heroku project and as you can see I have already created too many files so let's delete some some settings delete mostly bad ok so now should allow us create a file it's creating app before you push to Heroku you need to push the github so we have we have already passed it to github and now we could type hit push your uncle master this may take a while and as you can see we get an error and that's because we're using SQLite database which only used on which business portal on Heroku so we need to go to the gem file and add you find the line where it says Jim SQLite and copy it and just cut it and go to group development paste it right here and we need to create an additional group called group production dear and add gem PG because Heroku uses Postgres database and again we need to commit changes git add dot get to comment add PG Tim and push us to that github first now you push Harrow sorry okay suit finally deployed it in here okay and we just could write Heroku open as you can see her okay I have created our application but we get an error and it's easy to fix we need to migrate migrate production database so we write your little crew run rake DB migrate and it should work alright alright now let's refresh page okay so now to go post / new huh whoops - oh okay so I finally loaded and sample post add some filler text repost okay so now folks I'm development and you check this website on your mobile send a link to friends and and now what we will be adding is a authentication so only registered users can create posts

Channel: LearnRuby

Views: 1,806

Keywords: ruby, ruby on rails, programming, web development, web dev

Id: 4sEvIO9UMfQ

Length: 39min 44sec (2384 seconds)

Published: Fri Sep 23 2016