BUILD A REDDIT CLONE [PART 2] RUBY ON RAILS TUTORIAL

welcome back to part 2 of our reddit clone so today we will be starting to improve the look and feel of our reddit application and one of the things I want to begin with here is to update this signup button section we want to have a drop down there that lets us look at our profile editor account settings and sign out so something like this on bootstrap will be what we will use but before we get into that I want to give a shout out to scout a p.m. for sponsoring this video if you want to improve the performance of your application and eliminate bugs check out their link in the description below and get a 14 day free trial so bug in our application now I'm just dropping in this bootstrap template code for the drop-down menu and we will keep our existing sign out link but we will apply the drop-down item class that we are seeing here on this existing links dummy links so we'll use the same class for this and we'll to placate this and change the description on these links so have a profile or have a settings page so I'll use the device link for this edit account registration and we will also set a profile path I'll delete the method and will remove these dummy links now and the top here will say the name of the user so on the output the users name so we can say current account was a full name let you doubt put their first and last name and once we reload now we are told that there is not a method called full name so we need to create that yet so let's go and add that to our model now we can go to our account model and in here we will create a new method to find this method we'll call it full name and we just want to return the first and last name so we can use string interpolation to embed this these values within a string now we are seeing a different method so it's saying that the profile path has not been set yet so this comment is out for now this changes this profile link to be a empty link for now just to get this working and we can see that this is working but we don't have the name here right now and the reason for that is that we haven't set the name of this user yet so we can look back at our schema file for a database and you'll see here that the name and the last name columns they do exist in the database but we haven't populated them yet for this user so we go now to our settings page so this is where we add the values for our account so once we open up this view so this is under device registrations and we're doing the edit view so we don't have a first name or last name field here yet so let's add that while we're doing this we can improve the styles of this page just by changing the class names to match lose that are part of bootstrap so while I tidy this up I just want to remind you guys let if you enjoy this content to subscribe to the channel and also hit the notification bell to ensure that you do not miss any future videos so going back to the video now I'm just adding the additional classes to make these fields look much better in terms of UI so we're just adding some classes to make the buttons look like proper buttons and just to make it better looking for the end user overall you so now I want to reload the count page these fields are looking a lot better I can remove some of this filler content here but I don't think I really need to show the password length in this case and the confirmation really moves out up to the top or just delete it entirely we just want to get all of the fields spaced out correctly these are small things but I think it just makes the overall applicator I think we should have made this to be form group instead of form input okay so this should help okay it's looking pretty good right now so now let's add our first and last name fields so we can remove this autofocus and what changes to a text field we can also remove the autocomplete it's all this changes to last name so now in order to get this to save we need to we need to add additional fields to divides when validating we need we need to allow device to save the first and last name fields so we can do this using strong parameters we'll just copy this and paste it into our application controller and on this example they are adding the username key so we can add our first name and last name using the same method so this example is using the sign up but we can also use the account update to save values when we are editing our profile so let's paste in this code and we will update it duplicate that and then on first of all we will say account update that's this one and we will be saving here the first name and last name so let's copy and paste this into the signup so let's go ahead and try this out in the browser add in our name and in order to save this we'll need to add in the current password at the bottom and now we can see we've got our name at the top so that's working saving those values correctly now back at our drop-down menu I just want to change the color on the drop-down menu try this set this to white I think that just looks a little bit better the other thing I want to do here is to hide this top trending section and you'll only show that section if the user has signed in already you so let's change this to unless signed in if you're signed in we will not be showing that top section and when we look at reddit we can see that we have this dark background colored offsets the posts makes things look a little bit better in terms of the UI so you can quickly see what posts are are they stand out against the background so let's try to do something similar here with our own application so within our application file I'm gonna wrap this container inside a section tag and give it a class of BG light so this is a class that's already defined in bootstrap to give a gray color so you can see here in the background it's quite subtle but it will allow us to separate the post from the background this makes it a little bit more clear and we'll remove this padding at the top from our header so if we look we have got a margin bottom class here padding bottom so remove the line also and already that looks a lot cleaner another small change we can make here is to correct the alignment of the page content so it looks like we have this div at the top wrapping all of our page content so let's just delete that I think looks like we have a duplicate container tag now that aligns much nicer so what I want to do next is add some additional details to the post it is output on our home screen so before we do that we will add a partial to render our posts so we'll create a new partial for this and we'll create that under posts and we'll call it list so then we will be passing in the posts to this partial so it just allows us to use this file in multiple locations within our application so now I will paste in the code from our posts look we're just gonna change this to use the posts that we pass in and it looks like we have forgotten to declare the values as locals so in order to use it within a partial we need to wrap it in this locals tag so now it's working so we want to output some details about the post so who created the post what community is it created within and how long ago was it posted let's try to output some details for that now we can access details about who created this post by typing post on account in this case we will display the full name and we will use the time ago and words helper to give us a value for when the post was created so we're passing in the post created at timestamp and now we can see that this post was created two days ago so let's output the name of the community and we can access that by tapping post or community dot name so now we can see the name of the community is part of the post but it would also be nice if we can click on this and it takes us to that community so let's add a link and while I'm here I'm gonna make this text smaller so this is not really the most important information obviously the name and the title of the post is more important let's make this small and I'm gonna add a link also to the name of the user is made the post so we'll add a profile URL provide profile path here so I don't think we have a link for this yet its profile URL but we'll get one set up now in a few minutes so let's go down look at our routes file and you you can see here that there are no profile links already created our routes file so is create one critic get requests and we will use the username as part of the URL that profile so this will point to a controller so we don't have a controller for our profile at the moment but for now we'll just point us to the profile controller and we'll have a index method non controller and we'll set the name of this route to profile now let's go back to our posts partial this is a list partial they're the posts folder and our views will just change the URL here to the profile path and we're passing in the account username now if we go back to our device registration edit view we want to add a username field to this form we're gonna copy the first name I'll change this to user name we can also validate it here the presence of will validate the presence of the first name last name and the username you so now in the browser we go to our settings page and go add a username so before we can save this we will need to whitelist this column name so we're adding user name here for both the sign up and the edit account or update account so that's permitted to be saved so now we'll enter our current password and test this out and now we can see that our name has a link but right now we don't have the right controller method set up for that and the right views set up for it so let's do that now and before I do that I actually want to change the the controller that we're directing to here so right now we have it set the profile or considering that profiles should probably be public we will add that method to the public controller instead so in our public controller then we will create a new method here called profile and we want to load the account or find it by username to get that account so the pram in the URL is called username so now within our views we will create a new layout within the public folder so this will be called profile so in here we will output the details of the user and I'm going to make a two-column layout for this so the left column will be 2/3 of the width of the container and on the right side we will output some basic user details and then on the left side we'll be outputting posts by that user so now let's try clicking on the link and we'll see that it doesn't reload the page so it looks like we have to change something so we are getting the correct parameter for username but I think in our routes we forgot to update the action in here that should be the profile method and that's it working now so we have a name here on the right so we need to add some more details to our profile so we'll add the full name of the user and then we'll also output the created a date now on reddit they like to call this the cake day so this is a date when you sign up to the website so in this case we will just output the created a date and will output it in a format so we can read it more clearly so I'll say the day month and year and we'll call it cake day so I need to correct the formatting on the date looks like we have used the wrong value for this is a lowercase version created on the 21st of January and you can play around with the dates depending on what format you want to use here so let's change the name to make it slightly bigger and bolder so now let's add some additional dummy data here for now just put in some dummy text so this would really be a bio or a description for that user and we can see here that the content is quite cramped in terms of space it's very tight to the top section on our page so rather than just fixing like here I want to see if I can fix that across our whole application so let's have a look around and see what's happening so on the home page we have this margin-top mt4 class so we really shouldn't need that on the home page we should really be doing that within the application view I guess rendered on every page so let's remove that and then we will we'll take a look in the header file but I think we need to do this in the application so I could do something like margin-bottom but it's not really fixing the problem here so within our application our layouts application view so we'll go to the div that wraps the yield method and we'll just add the padding there by the padding to the top and we can see that that applies to other pages of our application so now let's go back to the public controller and in our profile method it will output the posts that this user has created so we want to display those on their profile and then within the profile view we can render the posts list partial you now we can see that our posts for that user have been displayed on the profile but if we go back to the home page now we can see that there's quite a bit of space between the title of the post and the details that are just above so let's remove that padding or that margin and we'll push that details underneath the title just to tighten things up a little bit and we can click now on the name good-like user's profile and one thing we forgot to add before was the actual URL for this community name so once you click on the community you need to have a URL that it points to so in this case we should have the community and now if we click on this link for the community you can see that it is working so now that we have our profile path set up we will add that to our drop-down menu in a header file that's in the layouts header if you pass in the current account username and that is working now so once we click on the community you'll notice that there are no posts here yet so let's try to add our posts into the community show view so let's remove the existing code to output posts and we will copy this partial reference to the partial and we will paste that in there so now we can see that we've got the posts being output so remove the community name actually I think we can make the community name a little bit better so we can output it as a heading tag so let's put this inside a h2 tag try this see how it looks and maybe it's a little bit big here but we can play around with the styles and make it look a little bit better on this and again just to copy the home layout we will add a two column layout to this page I'm gonna paste this in and the post will be on the left and then on the right column we can have the community rules and any other information regarding on the community could be on the right already that's a little bit better I think that you can probably improve that further but for now it's okay so the next step I want to take is to create subscribers so we want to be able to subscribe to the communities that we want to contribute to or post to so before we can post in a community we should be a subscriber so this table will reference the account and the community and we'll also include this time stamps of when a particular user has subscribed at our community so it's run this migration and now we will set up a model for our subscriber call a subscription and the subscription will hear it from the application record and then in here we will will say this belongs to the account I also belongs to the community going to our account now we can say that a each account has many communities so there's one mistake that I'm noticing that we've made so far and that is the naming of the subscribers and in fact in our migration we call it subscribers but in our model we've called it subscription and I think subscription makes more sense so let's roll back our migration and fix this issue now off of video here I did try to debug this for a few minutes that's why you're seeing some things in the terminal but basically we can just roll back this migration and that should hopefully solve our problem I'll run a migration again after updating the names I've renamed the migration file along with the class and the table name within it just to keep everything in sync and now we will try to grab the subscriptions from my community I can see it is working this time so now in our community model we say that we have many accounts within our community and we see that is indeed trying to load the accounts through the subscriptions so it's using that table in between to load the accounts that's exactly what we want but it could change the naming of this and I think the naming is more I think the naming is easier to understand if we call it subscribers community adult subscribers and getting a message here saying that should it be account or community so I think we should use a singular instead of the plural for accounts let's try this out well reload try once more and that is working this time so you can see the community dot subscribers does indeed try to return all of the accounts so that was a bit of a debugging session but at least now we have it working so this test is out now by creating a subscription from the rails console so I'll set a dummy subscription using the first account that we have with a ID of one and the first community so ID of one flat community too now if we run the subscribers we do indeed get that user back so going back to the browser now once we click on this community you can see the create new post button here so we only want to see this button if the user is already subscribed to that community so we'll need to add some logic to ensure that that button doesn't get shown to everyone so in this case we want to make sure that they are also signed in already and a member of that community but before we do that we will just output the subscriber count' for this community so we can get that using the dot subscribers and count method on that so when output the subscribers in this community on the right side of the tool column layout so I'll say members and we'll put the number right in front of it at the moment we've got one member so we want to make sure that the wording of this is correct so if it's one member they shouldn't have the S on the end shouldn't be plural and use a PluralEyes helper for this and if we just delete the S on the end of this it should work so when it's one member it's correct just test it with more okay so that's working correctly now let's add some details for this community so it'd be nice to have a summary of this community so if we look at our schema file we can see that we don't have anything in here for that we just have a rules text column so let's create a migration rails gee migration we're going to say add description to add summary to communities and this will be a text column so we've made it actually we've made it a string column here so we'll run the migration but it is a summary so we just want to short one paragraph description of the community so that new users can decide whether we want to join this community or not so now going back to our form for the communities so it's in our views we're going to add the additional fields for summary what changes to a text field since it is a string right now we don't have a way to edit this community so as a temporary solution we can update the summary for this community within rails console so let's try that out so I'll load the community and we'll say dot update say the summary they will just input some dummy text here okay let's try this that's been updated now we click on the community we need to update the view to output that information back to our view we haven't saved this yet so we'll say community dot summary and we can add some basic styling to improve the look of this add some padding to this box and it probably moves it into a paragraph set a margin and we can add a title here just to say about community community details something like that about this community again we're not gonna worry too much about styling here but just to make it passable and you'll notice here that there's not much spacing between the button directly above it we could move this into a div as a row so this button at the moment is just floated to the right at the top of the page I'm gonna copy some of the layout code but doesn't a column in fact they can move the community name into a column to let me take that up move this to the okay do it full width but I think moving this to a root column a smaller column on the right will be better and we'll put a community name on this left column and then we could just do like a margin bottom on this so again it's just enough to make it look reasonable I don't want to spend too much time on the styling but I think it looks good enough for now and we can also add a conditional here to say that if the user is subscribed then we will show this create new post button so I have to add a logic in the backend for this yet but I'll just use this is subscriber instance variable for now and then we will go ahead and set that in the controller so back in the controller now let's add a new value so it is either gonna be a true or false value that this is subscribed as returning so add an inline conditional here we'll say say account signed in and if the account is signed in then we will check to see if a subscription already exists for this user and for this community so that's an a community ID and we'll also pass in the account ID which is our current account don't ID and we're just gonna run the tour any on the end of that so we just want a true or false value so that will give us just the true or false value we can see that the button is now disappeared and in the place of that button we want to show a forum to let the user join this community so let's move this logic outside of the link and we'll say else so if else statement so if they're subscribed we can they can create a new post if you're not subscribed then we'll render a partial to allow them to subscribe to this community let's create this so we're creating a partial enter called join or subscribe even and that's within the communities folder so I set up now let's perform for and it will be for a new subscription and we'll use the form helper so it's closed off the form and we'll output first of all let's output the submit button I'll say join and we'll add a class for the button the button success and we also need to add to add a hidden field but back in our controller we will add the subscription first so this will be subscription you so we're saying that there is no subscriptions path so we need to go to our routes file within the config folder I'll say resources create new resources for the subscriptions so I can see that the join button has now been added so I want this button to be floated to the right well at a class or floating up to the right and it looks very small so that's just say join community to make this button a little bit wider we can force the text to be uppercase so now let's go ahead and add our hidden field so the hidden field will contain the value for the community it's a big community ID and you'll say the value is community dot ID okay so we're gonna be passing in this community ID as a local variable so let's add that now so this is back in our community show view my community ID and we can expect this now to make sure that this is set correctly so we can see the value is set here for the community ID so that looks correct now we need to go back to our controllers and set up a new controller for creating a subscription say the subscription controller subscriptions controller is inheriting from the application controller and let's create a new method here for the create so the create method gets called once we hit that submit button and we'll create the subscription problems and this will validate the fields that we are allowing to be passed into the controller so we require a subscription and what permit the community ID to be passed in now let's say the subscription equals subscription you will pass in the params whitelisted in this method and then we will call the subscriptions out save so if this if the subscription is saved then we will redirect the user back to that community so once I get redirected back to that community then they can go ahead and create our first post we can actually move this redirect to outside of the if-else statement and we can probably remove this conditional altogether so just call the subscriptions or save and then afterwards we'll redirect the user back to that community one thing we need to add here is the account ID and that will be the current signed end user in which case we can get that using current account ID let's reload the page we will give this a try so we've got 0 members right now now we've got one member you can see then you create new post button so that part is working correctly so by hiding and showing this button it does help to streamline the user workflow but what would happen if we delete this subscription and we access a post directly so we could go slash posts slash new a bit communities / 1 / post / new so if we access it directly we can still see this form and that's something we need to fix because we don't want users to be able to bypass our button in this way just to create posts so we can validate that so we can copy this is subscribed code that we've created and we'll paste that into our post controller so let's set a method for this say before action and we will want to authorize that user to authorize that subscriber in this case and that's gonna be before the new post let's paste in the code and we can tweak it slightly here so we're gonna assume that are already signed in as they as I do anything on this controller if we do anything in this controller they will have to be signed in already so we can remove that and we'll say here unless the subscription exists then we will redirect the user redirect him back to the root path and even though we don't have slash messages set up yet we'll just create one anyway in case we want to add that later so we'll say you're not authorized to view this page now if we reload okay let's say we made a mistake here so the community has not been set at this point so I can use the parameters copy this params community ID let's drop that in here try it once more so you can see this automatically redirected us once we've reloaded the page so now we're gonna create the comments for posts so once you go to a post we want to be able to add a new comment to that post let's create a migration for this so now within our migration file we want to comment to be referencing the account of a user and also the post for which the comment is being attached to and then finally we'll we will also record the timestamps so now let's create a new controller file that's me comments controller dot RB and I create a new class for comments controller so let's create a create method first to find a create method well say comment equals comment on you and we will use a comment or arms or set those up now in a moment so let's create a new method for the common params and this will be to whitelist the parameters I want to use or require us to have a comment and then within the comment will permit a permit the message and we'll also attach the account ID which is our own account current account ID so if this comment is saved and in this case we want to return the response in JavaScript but before we do that I think we can wrap this in a spawn to block so let's say respond to and we'll pass in the format format is one which is code up there's gonna be a remote forum so if the comments saved then we will render the JavaScript partial which is yet to be created but we will create it under messages slash create and then if it doesn't save we can add some logic here to this part later close off this respond to block and then we can also permit having the post ID are common params so now let's create the model for our comments so the comment will belong to the post I will also belong to a user account and will add some basic validation to validate the presence of the message field the account ID and the post ID so these are required before the comment can be saved now within our post model you can say that the post has many comments and then within our account model we can also have many comments based on that account so now going back to our posts folder in our views so in here on the show view we're going to have a forum for comment and we will close this off using the end tag so in here we'll need to have a submit button to create that first of all and we'll just say submit comment and then we'll just add some classes to make this look a little better so success button success will make it a large button so now let's add a hidden field so here we're going to add the post ID so that's gonna be value post ID and then we will have our text text area so that's gonna be our message we have some placeholder text here just to say your comment goes here let's close that off and again we'll just add a class to make this look a bit prettier on the front end so saying we don't have the comment sent right now so let's add that to our controller the post controller show view stay common equals comment on you that should work and we are missing the path in our routes let's go back to our routes file config routes or add the resources for comments I'll say only for create we don't need to show view to the comment okay so it's looking a little bit big this button says remove that class and we can also add some top margin to this is in the empty class so now we'll have a so add a header here just to say leave a comment that's looking pretty good right now we'll also want to output the existing comments on this post so let's use a partial for this or pass in the comments we want to output I will also want to wrap this in a div give us an ID I'll call this post comments I really don't want to use this div is we're going to replace the contents of the stave later after we submit a comment we don't need to worry about that right now but let's go ahead and iterate over the list of comments so I can say comments to each to comment and then we will output the comment dot message and we'll use a simple format helper to output this into paragraphs just above the comment text we will output the name of the account who created the comment say account come into account still name then we will link back to that user's profile so since we're linking to the profile we need to pass in the username so we can get that using comment account or username so let's wrap this in a div allow us to control it a little more terms of styling so now we need to go back to the controller and populate this comment instance variable and what we could do here even is just to post or comments and in order to prevent a N+ 1 query we want to include the comments within this post so once we're loading the post we also want to include the comments at the same time and it looks like we hey we have a typo here ok so that's working now so now I'm going back to our comments controller just wanna update the name of this partial so we're gonna create a folder called comments and in here we all have a JavaScript file for the crate Lucretius dot e RB extension so the test is is working little output to the console log in the browser so after we submit a comment we want to get all of the comments for this post and then we want to place them dynamically onto the page to show that that the new post has been added correctly so since this file does end in a RB even though is a JavaScript or B file we can embed Ruby code inside it in this case we're gonna pass in a render partial command so we're using the escape JavaScript help her to get the contents of this partial and then we'll embed it dynamically into the HTML of the page so an order for this to work after we save the comment we'll have to load the comments from this post cause a comment top where as in the post ID so let's try this out in the browser well create a dummy comment and I'm gonna open up the console to see if our javascript file gets run now we've got an error here and saying unknown format and the reason for that is that we forgot to add a remote true value to our form so we can see that the comment now has been created the javascript file is run it looks like we don't have jQuery to handle the embedding of the HTML for the latest comments so let's replace this jQuery command with some basic JavaScript so we can say document dot get element by ID and this will be dot inner HTML so this should output into the browser without any JavaScript framework being used so let's try this once again and this time we can see that it is working we're getting the result in real time so we can delete the console.log so just a round off this video we can create some additional posts to fill out the content in our application let's create some new posts once we submit this we can see that it has been posted and we can leave a new comment on this new post and that's working so we can also go directly to our community and we can even set up a new community just to test that out let's create a dummy community and we'll add a description or a summary some basic rules and we've got that created so now we have to join it or to post now we've joined we can post and we have a new post created and now on Suika the homepage you can see that there are posts from different communities all based on the time stamp when they are created so that's pretty much it for this video but if you do want to get a more advanced version of this reddit clone I will be selling it on my website so do check that out it's better styling just easier to use overall so I will drop a link in the description below if you're interested in that and aside from that I want to give a shout out to my sponsor for this video scout APM is a great choice for Ruby on Rails apps if you want to improve the security of your app track down performance issues and memory leak check out the link in the description below and get a 14-day free trial but other than that I just want to thank you guys for watching and have a great day ahead and I will see you all in the next video

Channel: David Battersby

Views: 3,907

Keywords: ruby on rails, rails 6, rails, ruby on rails tutorial, tutorial, web development, web app, ruby, rails app, programming in Ruby, ruby language, web app tutorial, rails tutorial, mvp, website, platform, app, startup, walkthrough, coding challenge, Ruby (Programming Language), learn ruby on rails, coding, live coding, programming, build web app, how to use ruby on rails

Id: kSj3pCT3r6Y

Length: 55min 17sec (3317 seconds)

Published: Tue Jan 28 2020