How to build Instagram using Ruby on Rails | FULL TUTORIAL FROM BEGINNING IN ONE VIDEO

hi everyone thanks so much and welcome to this course my name is troy today i'm so excited to show you a demo of what we're going to build in this course so this is our login page and you can login using your email and password or using your social account to log in so i'm going to use mine alright so this is our home page and here you can see posts and you can interact with posts for example you can like or comment or bookmark and you can even delete your comments unlike it or on bookmark as well and i will like it again all right you can also create a post and let me create one uh hi hello world something like this i'm going to pick a file you can pick multiply as well click open and if your file is too big you're going to have a message so i will remove that file and post all right so our post has been created and you can go to the post specific the post detail as well right and here's your profile page so in here you can see all of your posts uh and along with this command and is like how many people has like and comment on your post and you can browse your save post so in here you have a chain password login and edit profile so here you can change your name your information like website your bio and you can also search for another user for example i search for so we have three user years let's go to other users profile like this so i can't wait to see you guys in this course i wish you all the best of luck on your development journey i'm looking forward to see you in the course welcome to section 2. in this section we'll learn how to create a real project also we'll learn to create a basic authentication system you can sign up and log in by using email and password so let me show you and hit login and we also create a simple home page for our project we have an app bar and we have a footer and also we could sign out by clicking this link and we got a simple notification here so i can't wait let's get started hello everyone in this video we're going to create new project and we're going to build a basic authentication features first let's create a new project open your terminal and run range new instagram so our project will name instagram and i will specify the version we're going to use in this project so before new let's type underscore underscore and between that let's type 5.1.4 so the version we're going to use is rail 5.104 and hit enter so as you see it automatically create default files folders everything you need now cd instagram cd to our project and using your favorite editor or ite in my case i'm using adam so type atom dot to open our project so now you have a project next we're gonna build authentication features what we're gonna use is a gem called device so basically a gem is a library and it's supposed to make your life easier literally so here is the device github page you will see the way to install its features literally etc they explain very detail in here so back to our project you can add the gem by open gym file and type at the end of the file let's type gem device and hit save so basically the gem file is the place where all your apps gem or dependencies are declared okay next let's back to terminal and run bundle install so this command will install all your gem which has been specified in the gem file so after install all the gem next you tie rails generate device semicolon install so you may wondering where this command comes from and once again this command come from device get a page so this is just initial setup just follow me okay so some setup we must do manually yeah and the first one it told us to it is lab code copy it so we have to paste it inside development.ib so let's open config environment development.rb and at the end of the file paste it in here and hit save so the second it tells you something with the rounds don't rb file and you know the next session in the next video i'm gonna do with the round so just skip it for now and the third step we have to add this live code copy it and we add it in this file so app view layout application html urb and paste it in here save it and the last step is to generate some device default views and hit enter okay finished well not really finished we almost finished so now let's run raise raise generate device user so this command will generate user model it also create migration into round control in the view and later in the next coming videos i'll explain about model controller in the view how is work so don't worry for now i will explain by what is migration for example let's open an uh migration file that rail has previously created for us so it's inside db folder migrate and this file so this migration file will create a table named users and with some fills in here email password etc indexes so instead of writing seo query with table table names fields etc excuse to run migration like this okay so back to our terminal uh so for sql line to create table for us now you have to run range db migrate and hit enter so that way we have a table and with 8 index first now let's run our web application type rail server so our server is running open your browser and go to localhost 3000 and your server is working now i want you to go to user sign in let's tell our authentication yeah just sign in look good let's go to sign up and test i'm going to create an account now to see if it's work now how do we know that a new user is created i want you to open the browser or sqlite now let's hit open database so let's go to db folder and go to this file development or sqli3 and hit open so you make sure to change to browser data the browser data tab and choose user table and inside here you see that you has a new user with the email i has been previously entered so that's all for this video see you in the next time in this video we're going to build navbar with push review and we're going to use bootstrap 4 so for those who is familiar with bootstrap 3 booster 4 is very fast and beautiful so this project we're going to use bootstrap 4. so this is to get a page of rails drop gem and for more detail you can go to this link and have a look now let's import bootstrap into our project open gym file so at the end of the file i want you to write gem with stream sorry bootstrap and the version we're going to use is 4 0 0. and we also use another gem is jquery range okay save it now we're gonna import bootstrap css open app access skysheets so first i want you to rename this file into application.scss so scss is basically exactly like css but this is a faster and more convenient way to write css code so let's open this file and i want you to delete everything in here and write like this import bootstrap and save it okay now let's import bootstrap javascript so still in app assets open javascript and application.js and i want you to write like this require g query three and request oh sorry and require bootstrap sp rockets and save it all right now let's open terminal and run bundle install or bundle for short okay now we have installed our gen next we're going to create a controller for the home page and you may ask what the hell is controllers don't worry i'll explain to you later just follow me okay so still in your terminal run raise chain array or g for shorts again controller pages home so it will generate a controller name pages with a home method inside so instead of manually create by hand every single file this create create and create so this command does is all for you okay and i also want you to see this file open config browse or rb and so somehow these live code just appear right so let's back to free as previous command so you see this command automatically ate get pages home into round this round means browse.rb file this config routes the rv file so i will explain what this ralph i is so so for now i want you to change this like this root and sharp symbol and save this okay now let's have a test run rail server or rail s again for short so this command will run our server okay also is running so let's open the browser and let's have a test localhost 3000 so you see our ui has changed a little bit and let me explain a bit how things work when you go to for example like google.com like this if there is nothing after the slash nothing after here then you are navigating to root think the root like the home page of your web so in this case when you go to local 3000 then you are navigate to the root of your web so then the request is sent to this rouse.rb file this file so in here it will look that it is root then where should it go next so imagine a round is like a set of size in the road h will tell you where to go and the rounds say that it has to go to pages controllers and go to home method so let's go to pager controllers let me close this so in in-app controllers and this is paid controller so this well say that we have to go to page controller let's go to home go here and go to this method so i just mentioned controllers so what controller does is the controller will interact with the database and get the required data so in this case the control doesn't do much it doesn't interact with the database and so we will see this later in this course so after you get the data then the controller render the view in views pages home.html.erb notice that it will match the name in the folder pages controllers with home method with pages folder and home dot html erb file okay so let's open this and here is what you see on the screen right and that is model view controller or mvc for short in a nutshell this is a very important concept so remember as we have a basic understanding of npc let's continue so first let's import the image into our project okay so i have download the image into this folder and you can find this folder in the course description now i will open this and select all and copy and this is my project folder open app access images i will copy into this folder okay so let's see that so that way uh all the image will be imported let's say and i checks and access images so yeah auto image is important so now open i want to open view layout application html urb and we will develop the net bar here so let's go to bootstrap documentation documentation page and five nav bar component so you could do lobby by searching in here nav bar yeah now let's copy a semicolon here let's see yeah this looks good and let's copy it copy now let's paste it in here paste it and style it a little bit tab tab save it okay now let's see what we got refresh okay it's not bad and we'll customize to look exactly like instagram now let's do it first i want you to remove this css class okay that make the background a little bit dimmer and next i want you to make this form up in here move it up right here so let's cut it and paste it in here save it and next i want you to delete every nap item in here just leave this item this link item and delete all the rest and i want you to duplicate and copy and paste to make three nav item right let's see we got okay okay i want to remove this button button okay save it okay now let's customize the napa brand and i will eight course wire and high text and we currently don't have this css class and now we'll add it open app access slidesheet application i'll close this application application.scss and first i want you to write body will customizable the css background color so you could type a few of these words in the ide will automatically suggest for you so that's kind of of advantage okay f-a-f-a-f-a you want to use this and font size is 14 pistol colors will be 2 6 2 6 2 6 heading or actually not knee padding so thing like this only the default value for all our project all right now let's define the course by css for image okay it will be image url and course y to x oh sorry 2x don't png and nexus background size is four five pistol three seven nine pistol that will repeat no repeat save it okay we're gonna define another css is network brand network red we're not actually defined we will customize this background position because this is already uh bootstrap css class so we'll we will modify it now minus 176 pixel zero hey is 35 pistol with oh sorry th with should be 176 pencil save it okay now let's let's have a look okay this should be changed okay just wait okay that's good click back and i want this text to disappear so i will define the high text css this should be display block or flow hidden text edin [Music] i'm sorry 110 percent why spay nowhere 7 and let's have a look it should disappear yes it's look very good now let me explain how things work first i want you to open chrome developers console by pressing command ship c on mac or on window or linux you could control ship c okay now let's have a look at the courseware css the coursewise css the coursewise css is contain a background image so let's see this image quashed by css is a background image you will save that this image is the whole web icon all combined into one big file but i only want only a part of this big image in this case the icon in the word instagram so the css cross y is like the source of the image and the class nava brand is like the area i want to check in this big file the background position is from 176 0 that means this point this is the coordinate i will start to take okay so with the height and width so it will take from this coordinate start to hey and start with width and i got the part of this big image where i will take right and the the high tech css just simply hide the text away okay so now i will apply this same logic into our icon let's back to our code first let's go to the html code okay so first i want to make this search box in the middle and this three link to stack into the right corner of the page so i'll do that by okay by my asus class in here and lmd02 also i'll add in here ml and d auto save it okay that's good now let's customize these three items let me tell you what this icon is for the explorer icon hi text again and this should be explore and this is notification icon high text actually you could write whatever here because uh we're gonna hide this tech anyway i just write this for easier to understand html code for square oh actually i forget to work with y in uh in here the previous one plus y and this two horsepower this should be profile icon i can hide text and this is profile save it and now we will define what this icon is in the cs scss file okay so first explore icon background position minus 50 minus three five five pistol hey eight and four pistol width and four pistol and we'll copy this and paste it okay so this should be naughty vacation bacon and i will change this value to minus three five three oh sorry and this should be two nine eight pistol they're still the same it's the same and now this should be profile icon and this is my 308 pistol this is 1765 yeah okay now let's have a look okay these should change okay not so good but don't worry we'll we will customize this now so we will customize the nav items item not first child and this should be more again left sorry pistol so this way it will uh margin each other's third pencil but not the first one okay let's configure the net bar i want to set it up for colors is f and more bottom should be one pixel solid r g b a zero comma 0 comma 0 comma 0.0975 okay and hate simpson tizzle should we need hate let's see okay this way is refresh okay not bad this looks still a little bit weird and i want this search to be in the middle also i want to wrap all this network inside the container so let's go back to html code okay first i'll wrap all this inside a container so deep dot container contain oh sorry container okay that's right container enter and uh control x cut it and all of this this tab paste okay so save it so we got this container all the element is inside the container now as i said about this form this search box i want it to be in the middle so i'll add here text center and the items still look a little weird okay this mr alto mean that margin right alto so i will delete it now have a look okay perfect this is our netbar and it's pretty good now i don't want to write all codes into only one file into this big only one file because it will become very long and very big so i will break this lo-fi into parts of code like this net bar that is the general idea of partial view okay so i will create a new file in view new folder share and inside this folder i will create a new file called nav or html.erb so notice that every partial file is start with this underscore okay so enter and now i will all of the code in here from this nav will cut and i'll paste into this save it and in in here equal percent closing tags render share nav bar so this symbol meaning this is ruby embedded coding basically you can write ruby or real code inside html file by a write like this like this symbol with a closing text okay so it will render share navbar meaning this file share navbar notice that you don't have to write like under scroll like this rare will understand that you want to render a partial file okay so now let's save it and have a test so to make sure that everything yeah everything's still run good and now i want to change the icon url to the root area of this project okay so this this never brand should point into the root area of this project so first is the ruby embedded embedded coding and closing text okay link to icon root have in class is i'll copy this and paste this save so this live code is exactly like this lab coach so you might wonder what is root path now let's open your terminal actually let's open a new one and run range rounds so this will display all the round as i say the sign all the side will point where to go in your project it will like this is root so but you have to remember that all of this prefix will need a path after this so root path new user session path user session path so you have root path it will point to pages home okay so when you say root path it will go to pages home as we rewrite in the rail file so now i will delete this just deal with me if you follow me until now then you're awesome we almost finished this session now i will correct the flow of login in log l so now i will add a local link into the home page home page home html erb and a top i'll eat link to okay like this link to lock l destroy users session path method delete save it the first parameter of this link to will be the text and this is the url and this is the method this is optional you could define it or not so in this case it will log out and we'll link to destroy user session path so let's see where this rules come from where this round come from okay destroy user session path it will run into device session destroy method and let's see refresh our page and we will see a lot l link watch your users sign out now let's click that link okay sign successfully and what if we have to login users sign in we log in and we got the log l okay now i want to let's open page controllers and write like this if sign oh sorry exclamation user psi in and we do direct to new user says session path so this is if user not sign in yet we will redirect user into new user session path so let's open [Music] terminal new user session path is a sign in so if they not signed yet so we will redirect them to the sign page so we have a test now log l so we will free directly automatically into a login page and log in log out okay so that's all for this session see you in next video in this video we'll a username intro project first let's have a look in our database so in previous video we created our user table like this but we only store email password and other fields aided by device gym but if we want to store username well we can't because we don't have this field in our database yet so now let's add username into our database so let's open terminal and run rails g migration a name to user name string enter so remember that rails is all about convention when you type like this a name to user ray will run eight name columns to user table then you specify the column name and the data type okay so don't forget to run rail db migrate to migrate your database so remember that when you want to create some features after you change your database then the next thing you want to think of is the model then the controller and finally is the view now i want to validate my username and the name must be required so in order to to do that let's open model in app model and use order rb and let's write like this validate name present truth length maximum 50 so this means that ray will validate names it must be required and the maximum length will be 50 characters so save it so you can go to this link to learn more about many many ways to validate for example validate numbers strings and format email etc okay so only one more thing to go since we are using device jam so for security reason we in sign up screen the gem only allow email and password so say if you want to create user with username we have to do like this so open app controllers application controllers.ib so let's write like this before action configure configure permitted parameters if device on trollers so protect it def configure actually i'll copy this config permitted parameters and device device parameter so i need tweezer dot permit sign up keys name and i will copy this line and paste it divide parameters any teaser permit this should be account update and the keys is named okay and don't forget to end so by the way this is not my code this code comes from device so you could go to device get a page to read more detail so make sure it's code exactly like this or it's not gonna work so that's it for this session see you in next video in this video we will update authentication view in sign-in and science page though we say after model we have to deal with controller right but since device has taken care for us because as you see sign in sign out and log and work out right so let's head right into the view so first i want you to go to the sign page now open alcohol shift 3000 users cyan so as you see these ugly red lines meaning that you got an error so rails specified for us where the arrow is so you see it's in controllers application controllers and nine now here is the line number and the rest is the the content of the of our arrow so what type of error is so you hear we have syntax arrow or i think i got a typos in here it should be key keys uh f controllers application controllers and this should be keys keys and semicolon save it okay now let's refresh okay cool so in this sign page first i want to hide this nav bar now open app and view layout and application html erb and in here let's run the share now only if the user has been signed in so i'll write like this if current users and save it so after user signs in this vise will give us this variable current users so this variable has information of current user so you can use this variable to check whether user has signed in or not okay now let's save it and let's see how it is okay good now let's customize the sign page open app view divide session and new html erb so do you remember in the first sessions we run rails generate device view and that command generate all the views in this view device folders okay now i want you to select everything and hit command slash to comment this file so here command and slash if you are on mac or control with slash or on windows linux okay okay now i want you to write like this so div dot container enter inside is dip well and dip coal lg six dot landing left and another one is dip coal lg6 right okay enter enter and so here i want to write div dot dummy phone entry div dot screen shot and so i want to write it dot caro cell don't care self they so if you is do with a bootstrap so you know that carousel is like you have an image inside an area a box or something like that and the image inside just slide over and tap enter you want to add here is that array care also save it all right and inside here i want to i did carousel enter and inside we have div carousel item [Music] dot active and let's copy paste and i want to have five uh casual item so that's two copy paste paste paste and that's five okay save it so in the left side of the screen uh the lighting left here we have a phone with images inside running sliding and the way we put the image inside is so inside here we write like this image tab screen short one dot g p and we specified h four to seven and the width two four zero okay so do you remember this symbol and i'll talk a little bit about this and we may see this many times before and again this is embedded ruby code inside html so for example when rail see when range process a template file for example html dot area file if rails see this see this symbol then the code is executed but its output is not inserted into the html while this symbol sorry this symbol with an equal sign inside the ruby code return value will be output and placed into the html file for example like the image tag code in here this line of code is equivalent with image and source uh equal with something something like this so this tool line is equal you know or we have seen previously so in this render strnav bar this code will return the code from all the partial file and this symbol will place all that code into this html file now let's back to our code and i'll release this thing all right now let's i want to copy this into there here here also here and over here and change this file screenshot two three four and five save it so where does file come from and when you write image text and it's automatically searched in fss images and here you go all our files in here okay now let's write the css code open the slidesheet and educational css scss and one nice thing about scss is you can write nesting css class so for example instead of landing left dummy phone so to remember this in here you go to laying left and then you go to tell me phone so instead right like this you could write like uh like this and inside this you can write the result like this 100 legend okay and i'm going to run like this landing and inside here i'll specify the background image engage url down the phone png click on repeat no repeat position right zero side macro size four five four pistol six one eight pistol position relative and height 6.8 pistol okay left minus 35 pistol right is minus 15 pistol and let's customize the screenshot this is class position absolute absolute tall 99 pistol right 63 pistol and inside the item inside i want to be absolute save it now let's back to our browser and see what we got whoa yeah things just fit right in now let's wait a little bit okay wait for five seconds and i really expect the screen show well yes it will change and what i just previously about the carousel is you have a image inside a box or an area that is sliding inside okay and it should be change okay looking good now let's continue let's go back to our html file and inside here we have an image a phone in the left and in the right we will have the login form so now let's write uh dip forum log in box and inside actually we have let's uncomment all this and cut it inside here and paste it okay now this i want to chain to h3 and glass core sprite brand name img and delete this this should be h3 and phone for resource and resource name url to f okay if class field i want to change to phone groups because this is the default css of bootstrap a form bootstrap form all right so i'm sorry and i want to delete this email field email auto focus true and i want to a place holder email and class form control so this is the bootstrap css class for form so make sure to change it and here i feel i want to change the form group also here do it label password fill let's continue off placeholder password and class form control save it and if device mapping okay class here is chained to form check check spoke remember me and class phone check input label remember me class form check label and set it okay action walk in and here i want to create class vtn vtn primary so all the class i have ate in here is the as i say the default bootstrap form css so it look a little bit nicer well it's not a little bit it'll look much much better okay save it and just for now i want to hide this uh device share link now let's see what we got well okay not bad we will customize now so as you see here i have right from log in box these two glass css class now let's divide it in our scss file uh let's write right up here uh box background color fff and border on px solid e6 e6 e6 and water radius is one pistol padding ten pistol zero one again market oh oh sorry all right again uh this should be 0 0 10 pixel and we have to write brand name img position zero hey 51 pistol oh i hope you still stay with me with is 175 pixel save it and now let's see what we got we should see an icons an app icon in the box yeah okay now let's customize it the form inside all the landing right inside in this in this area landing right form login i want to specify first the width 350 pistol and the form inside adding 0 40 pistol etn prime murray width 100 percent light high 14 pixel font size 14 peso phone weight is 600 and the input border one pixel solid efe inside your form check label adding zero font size system pistol color two six two six two six save it that's a lot of code right let's refresh and see what we got yeah not bad i want uh i want to add a little bit of space in here so i'll eat it like in here pr save it and by the way i want to change this it's a few css class here take center deflex align item center so this first this css cloud will make the text in the center and the d flex here in these css class will align item in the center vertically and horizontally so let me show you so this test will come to middle and this will become the middle well let's refresh oh it's not really change i think yeah i haven't saved it so you see that the icon in here is a little bit weird so it applies some marking to it inside where eight inside here there's a brand image name image one again this should be more again 22 pixel auto eight pixel and refresh okay perfect now let's come back to our code and in here let's uncomment this and i want to write div dot we direct links box enter and cut paste okay so okay i also want to specify the width for this div so let's back here and inside landing right let's write redirect links and with also is 350 pistol safe and let's see what we got okay it looks so bad now i want to yeah i know why we got that let's wrap it all inside dip and i want to and command wrap this and paste this so all the code the form logins inside the box and save it okay okay looking good and refresh oh it's still not not really work and okay let's start with a little bit so this okay this should be outside cut it and outside a full looking box paste it save it and yeah it should be like this open let's customize a little bit in device share links in here i'll add some type so what uh have an account and space i'm going to have display in here and inside up i want to add don't have an account question mark save it and inside here for to password okay okay okay now okay we are looking good now now i want to create a footer at the bottom of the page so let's create a footer partial file so in share now let's create a new file name futa dot html l dot erb and so here was my footer and f dot net bar therefore expand lg navbar light dj light inside we have button oh sure like this button the nav bar top and oh we we have a redundant one inside here we just type button data toggle to go collapse the target that bar you saw here we gotta expand on our liking got a button and we have a div collapse we have id equal number nav and so here let's write div net4nf dot mx owner and a dot nav item nav link so here we have hot ref and this is about us let's copy this and in here let's change this to support toy language save it now let's render this filter in application html arb and after you let's render it render share footer and save it now let's refresh this page yeah cool but again i want to customize the css in here now let's go back to our css sss file and let's run footer oh actually no dot photo nav item and color zero zero three five six nine important full size and 12 pistol for weight wait should they go save it let's see what we got so we finished the login for now let's work on the site page first let's have a look at the sign page open sign up and yeah it's so ugly now what i want is the side page will have the very similar to sign page but the form here is the site form so let's make use of partial features and we use our code as much as possible okay now let's create a new file in device share let's create a new file tell me phone dot html.erb and [Music] i will hold this until this yeah it will cut it and paste in here save and back to here i'll render the file so render device share dummy phone and save it now let's look it yeah it's still working so i'll partial file is working good now i want you to copy copy from this copy and you know where i'm gonna paste open the registration and new this is the site phone and we will oh sorry here we will paste it in here paste it and let's tap tab tab and we closing div and another one is closing dip right this div for that dip and closing div and closing dip save it now let's customize it okay inside here we write div dot forum login box and cut it so at the end i'll paste it and tap inside so meaning that will wrap all this inside and gif with class for locking in box and now let's delete this and my class previous sprite brand name img and in below i'm going to say h5 like color inside my strong i mean uh bowl straw slide out to see photos and videos from your friends okay and below i can say hr horizontal line and here we have form four and yeah as in login page we will change this to form group oh this session is very long so stay with me guys and this is uh email field email autofocus yeah as place holder email class form control and i will copy this copy this here and person here the placeholder in here should be password and here it should be password confirmation formation and i also want to add another fields in here which is username so here should be text fill this should be user name the placeholder is your name and save it in the side up we have class etn vtn primary div in uh i want to hbr in here and this y p dot light color we don't have this css squad and well eight later by signing up you agree to our er [Music] strong terms and ampersand privacy policy strong and save it and inside in here we also exactly like here so copy and paste save it and with the light colors that's here and let's specify it light color should be color save it all right now i think let's have a look at the science page so and we got an error oh it should be named not username here and save it and yeah we don't know bad and again this look a little bit weird i think we got this again we have to be outside outside the login this form yeah outside this four and save it so if you let it outside and it will drop right outside yeah cool and i see that we still have labels in here as always delete it label and label save it yeah ah we still have this six character minimums i want to delete all this and oh we also forget this should be for group and this reform group save it and let me see okay nice so we almost done now i want to add a little bit effect to our piercing here and inside scss file at the bottom let's write k row seal cano seal item active plus city one display block carroll cell item transition opacity to 0.6 is in out velocity 0 position relative display block and outside k row cell item note active position absolute oh oops never mind uh position absolute top top zero pistol and save it refresh instead of just immediately up here so you might see it's a little bit fade down and fit in in between all these screenshots it's refreshed and i see it's still the same i think uh a little bit typo oh okay never mind save it and refresh let's see what we got and about five seconds it should be changed yeah it should change gradually fading and fade out so that's it for this session so see you in the next time hello world in this section we're working on tons of cool things so we had a function to sign using twitter all right and we change from the ugly text notification to this new fancy notifications and we working on the new user profile page so when you click here you will go to the user profile page and edit profile page as well so i can't wait let's get started in this video we will create notification for our website we'll use a gem called toaster this is a very nice javascript library for more detail let's go to this link to have a look at toaster wave so now let's import toaster into a project open jump file and at the end let's write gym toaster range and save it now let's open app and it says javascript and application of gs and run like this require toaster and let's open the scss file to import texture css import toaster toaster and save it now open your terminal and run bundle and let's run a server so in rails there is a feature called flash the flash provides a way to pass temporary variables easily message between actions anything you place in the flash will be exposed to the very next action and then clear out this is a great way of doing notices and elements such as in device uh after you log in you have a message that said sign in successfully and then disappear when you go to another page or refresh you see now let's have a look at this file view share oh no no share in layout application.html erb and these lineup codes will show our flash you could write notice or flash like this flash notice or like this these are the same so in rails notice and other keys are the most common usually you want to use notice when something successfully done and i learned when something fairly done okay so that is about flash now let's see how our phantom library toaster work let's have a test uh let's write some script so inside here let's write tosche dot success inside here i'll write some something and you have a nice notification in here so i want to display this notification only if when i have a flash so i'll write like this if flash dot any it will have any flash then we'll display that and i will tap this inside now let's write like this inside here i want to write flash.h view p-value and we have end and inside here we have tie key 2s gsa alert hero g sub notice success and we will type type value and we delete this okay finished so first we might have multiple flash so we will loop through h flash so key here is maybe alert or notice and the value is a flat message for example we have flash notice something like this uh sign in successfully something like this so the key is known this and val will be the flash message so next we will convert the flash key from alert to error if any and from notice to success if any so after that we have a toast toaster.success so the knowledge becomes a set and then we have the value inside this uh sign in something like above okay so that's how it worked now let's have a test shall we for example if i look out okay right now if i refresh the notification won't appear because we don't have any flash so now if i log out yeah i still don't see any flash okay we have a typhoon here sorry so now let's try to log in okay we got a flash and i will get rid of this uh very of the device default flash delete this and by the way there is one more place we could add the flash in that is in the saya form sign up form actually you could change this to notification so in order to do that let's create a new file in share and i'll call it divide message no html.erb so inside here i write if we source dot zero any if we have any error and okay to write n in here and inside here we'll have a script inside we have a resource hero full message new value we don't have to check the key because it's always zero it will try toaster dot 0 value and save it oh one more thing we have to render this partial file inside device registration and this new so we'll replace device default flash render flash like this render share device mess this file share device mask or 1s and save it now let's have a look let's go back to site up we have a typo in here so i have let's see it this file oh i'm missing this okay now let's run again okay so i'll tie something like this oh okay say up yeah we got a very nice uh notification here so that's it for this video see you next time guys hello everyone in this video we'll create a twitter app for our website to allow users to use their social account to sign up and log in so first go to apps.tura.com login and then click create new apps now let's fill the form instagram range and description something like share and see your photos website this is just for demo purposes so you could write something like this you can run actually anything you want but for the callback url you have to tie it exactly like this okay copy this is here and write off twitter call back and i want you to add another callback here so copy this paste here and replace this ip with localhost i mean that your local environment okay so check box and hit create all right looking good now let's go to setting so in here i want you to fill the privacy in the term url here so in here you could write yeah again just anything is it will be okay because i'll have just for the demo purposes so in your real app you want to fill in here your real privacy url and term url page okay and uncheck this and then we'll go back walk in and check this update setting and the final thing is go to permissions and hit this this is very important request email address from user okay hit update all right we are pretty done here but i want to show this quick keys and access token so you can see here api key and api secrets so these two api we'll use these in the next video okay so that's it for this video thanks for watching see you in the next time in this video we will build social authentication features using omni-off but first let me show you this device has a wiki page for integration with omni elf although this wiki is for facebook you see facebook example that we're going to create for twitter because it's normally different so you could implement facebook yourself okay so first let's import all nails to our project so as usual open gen file and at the end of the file s8 gem on the oath and we're going to specify the version we're going to use is 1.6 and another gem we're going to use is on the oauth twitter and save it next we're going to add some fill to our user table open your terminal run raise g migration eight on the off to users provider string uid string make string and hit enter so you see provider in this case is twitter and uid is access token returned by twitter and image will store your twitter avatar okay so after that run reach db migrate okay our database is updated next you need to declare the provider in open config and initializer device rb and on the end i want you to write config on the off twitter and here you've got the app id and nexus app secret so guess where we're gonna get the app id so in the previous video i mentioned that here is the api key an api secret and we're going to use it copy it paste it here and the f secret and paste it here save it now let's configure our user model so open app and model user.rb and then in here i want you to write commas in here and y only off able on the auth provider percent percent i trader and save it and next we're going to write a function well actually let's check the doc so you see that what i just did previously is detailedly written in the documentation so what i'm looking for is the function for user here let's copy this copy and paste it in here and control select to here and tab so in here i want to add user.uid of.uid and use your dot provider equal of dot provider and save it so next let's go back to our doc and let's copy this copy and paste it to controller so i'll create new file here all only off callbacks controller ib and pasting here and first i want you to remove this user and distribute twitter and this should change twitter and this also and save it oh actually we have two eighths here also x say extra okay save it so the last thing here is change route so open the route open config rail so in here i want to try invite users and so here's why i path path names sign in login say l edit profile sign up registration and after that let's write controllers only off callbacks on the off callbacks and save it so that's it now let's run our application but first let's run our server real s okay now open your browser and refresh so you see this link just mysteriously appear right so where this button come from so it's inside view device share links so this is where the button comes from so this is where the link comes from so let's see how things work okay and let's click slide with twitter so as you see this is a twitter app we have previously created in the previous video so in here you will grant access to virtual app still click authorize app so you have successfully authenticated from twitter account so how things work let me explain you a bit so after you click the sign in with twitter link the on the off jam would read a regular to trader authentication page so in there user will run access to your twitter app and after that your app will call the callback url then the request is sent to the round the only off callback controller will handle this request so first it will call user model method from on the off which we have previously written inside here this method tries to find an existing user by the provider and ui fields if no user is found a new one is created with a random password and some extra information so after that if a valid user is found they can be signed in using device method else if no valid user is fail we store only off data in the session and then redirect the user back to the registration form so that is super easy guys you could create social authentication using facebook using instagram using google plus is very easy so that is for this video see you next time guys hello everyone in this video we'll create user edit profile page so first i want to add some field to user table so open your terminal and run range g migration it fill to user website string bio text so i will add two fields to user table g stands for generate right okay and run it then run raise to be my weight to my weight our migration so back to our project open app controller application controllers and hidden here we ate website bio okay save it so that device will permit these three fill names website and bio okay so in your profile page you should see your edit profile button in here but when you go to other user profile page you shouldn't see this button okay for example if you go to user number four you shouldn't see this button okay you only see this button when you go to your profile page okay now let's fix that open view user show and in here i write if user equal current users we will display this these two line tab tab save refresh you go to other people profile page yeah that should disappear now let's change this button button to link to the edit profile page so this button we should write like this link to edit profile and the link we use is edit user registration storage path last we copy this copy paste so this path is a default device path to edit user information so you can always find this in using waves brown so you see that this is see edit user registration and we ate path create path for the pack so we got edit user recognition path okay and delete this one save it now when you click this link it should go to the default device edit user page yeah it looks so ugly so the default behavior of device is when you update anything here you have to write your password to confirm but for users using their social account to sign up they have no password we generate a random password for them so we can bypass the password requirement when we edit user account by doing this back to our project and open the rail file so config run ruby and in here you write registration registrations and you create a new controllers new file registrations controller.ib so actually device has a tutorial page for allow user to edit account without providing password so you can see that they have a controller registration control here so we could copy this copy and paste it in here save it but notice that this way of using this method does not allow the user to change his password so don't worry okay now let's edit the edit profile page so the inside device registration edit so we'll customize these pages so that it could look better so from this form yet.row.edit profile grabber inside we have two columns div dot code sn3 we call this left column and column sm 9 right column right column all right so inside here i will use uh this group and a class list group item let's go item action here's edit profile and another one actually i will copy from here the lock l copy and paste it right around here so that's for the left column and the right column is the form so i will copy this off it is form and paste it here so in here we will use render share device mess mess distribute and so first i will train out user avatar div dot raw user name in image gif dot co sn3 text right image tag tar url users with 38 hey 38 class round image and in here another column dip dot call sm9 and i'm going to print out and i'm going to print out user dot user actually name user dot name okay save it and below is a form for the username it.form group dot row right now after label name class osm3 call forum label text right on weight ball if don't call sm9 f dot text fill name focus true auto focus true class form control core sm9 and we have the same for website and bio this is for website another one for bio so this should be website website website bio bio so next we have the email this should be for group row label email class call sm3 call form label text right well actually this exact like this i'll copy it copy paste and remove this and dip dot call sn9 cut this paste in here tap inside auto focus oh we have a lot of autofocus here should only run out of focus and delete this okay only name the first one is autofocus this should be class control call sm9 so for the password we have for group row and this class is the same as this copy paste okay and about this okay just leaving that div dot co sm9 we copy this to here tab inside auto complete off class from control call sm9 and we have now the class is place holder and we will cut this inside leave blank if you don't want to change it okay so this thing will just delete it okay and finally for patch confirmation for group rail label page combination and the class is the same as the row copy paste and do with this if you'll call sm9 cut paste and here we have class from control call sm9 save it and for the current password we could delete it we no longer need it and for action we have the same way for group row here we have div dot co sn3 there's an empty one empty column therefore called sn 9 and this we is inside submit this should be update okay class etn btn right memory okay so the rest will delete it now let's see what we got okay okay we have to check that the password section okay remove this and let's see okay it's look pretty good now so now we will working on the css part open access timesheet application sss is for the bottom let's write some css some funky css so for edit pro 5 wrapper mark in pixel 0 0 and starting left column order one pixel [Music] well actually this is left all right border one pistol solid epw adding zero background color white and inside left group we have list group item border none color to six to six to six for the radius zero full size 16 pistol or the left two pistol solid transparent we have the list group item item for the first child for the first child from weight ball or left colors 2 6 2 6 6 that mean this is being highlighted well later when we run this you will see this effect this group item no first try over so when we hover the item which is not active we should change this border to dvdb save it and let's run it okay cool so you see when we hover the item which is not active it should change the background and the border in the left and the first item is highlighted the four ways ball and the water is highlighted okay so now it's working on the right column right column t only missing the t order one pistol solid dvd vdb the left none double color white username i image margin 32 pixel zero call sm9 on psi 20 peso for weight 100 like hey 20 pistol and we're starting for the form group form group from sign 16 pixel save it now let's run it okay looking good let's try to change something uh name is strong long update okay your account has been updated stroller right our name is updated okay so that's it for this video see you guys next time hello everyone in this section we will create a post model host controller and how we create a post for example let me create one post like hello world and i'm gonna pick one file uh one or two or maybe three okay and hit open and click post so order image will be stored on the cloud alright so our post has been created and you can also see multiple image for one post and view a specific post right and you can also delete posts as well so that's it for this section i can't wait let's jump in hello everyone in this video we're gonna create a post model and learning using two gem carrier wave and figaro so first let's talk about our database this is our database diagram for now just focus on these three tables user posts and folders we already have user table and user can create a post process id content of the post and user id which is foreign key from the user table one post can have many photos an image here is the url of the image so one user can create many posts and each post can have one or many photos so now let's create these two table so open your terminal and run wage generate model host content string user reference so when you generate model not only migration rail will generate a model for you too so let's just run rail generate model photo image string post reference right now let's run raise db migrate all right now let's patch our code now let's see our model model will start rb and this one here has many photos so you see that automatically it belongs to for us so belong to and has many is an association association is a connection between two model so posts belong to user and post has many photos just like we said before in the diagram later you will see how association make your code much more easier and cleaner so for uploading image we use a gem will carry away and carry away is a simple way to uploading file for more detail you can go to this link and have a look now let's edit carry away to your project open gen file and type gem hair rear wave version 1.0 i mean 7 and i'm going to terminal and run bundle install and then run raise generate uploader photos so for file storage we'll use a free service called cloudinary so any file upload for the store on the cloud and you can also see the pricing then it has a free plan well good enough so click on sign up and because i have already i'll sign there so notice these three information because we copy and paste these into our project cloudineary save it open terminal and run bundle install so back to our code config initializer and create a new file here cloudinary.rb and let's type here cloudinary.config do config and configure cloud name config dot api key config.api secret config.cdn surf domain so in these three information you paste your information from the clarinary right so you copy this so you copy these three information paste copy paste so for api secret you click on this reveal and then copy back to your project so cloud dnary has a tutorial page to integrate with candidate way so i just follow this tutorial and copy this and back to the project open app uploaders and photo uploaded rp okay and i'll paste it in here and comment this and okay save it actually i want to edit this because it's too small 300 standards 300 and thumbnail 100 save it so next open f model and photo.rb and write mail uploader image photo uploader and save it okay that's it but the last thing i want to tell you is let's have a look at this so we should have a way to organize these key we can expose like this for example if you push these after github or somehow anyone found your api keys or a play secret they could take control of your app upload modify or even delete your data and that's why i don't show you my api secret so we will use a gem configuration auto was written to make it easy to secure configure rails application so now let's use it open gen file save it and open your terminal run bundle install then run bundle exec figaro install right next open config and application of email and that's why cloudinary cloud name cloudinary api key cloudinary api secret f id and twitter and secret all right now i'll paste these three things copy paste copy paste and secret you copy for yourself and through your app id you open device so config initializer and device rb copy this paste it and for a5 cigarette you do that for yourself and then save it okay so in here you use it like this you like this ny env and twitter and i id and here env trader and secret save it and inclinary you'll see enb clown binary clown clowning and api key env env cloudinary api key and enb library api secret save it and this application.yml file is get ignored so don't worry so that's it for this video see you next time in this video we'll create controller for post and for photo but before that i want to talk about a few other things i want to talk about http request method for restful api so there is file method get post patch put delete so you use get when you want to get one or multiple objects and you post when you want to create an object patch input pretty much the same is when you want to update an object and delete when you want to delete an object and these two these three require id of the object and the next thing i want to talk about is rails control action and the standard restful way is contained in six action or method index show new create edit update and destroy so you index when you want to list all the object and show when you want to list one object and new this will show you a html form to create new object and create method is an actual method to create new object and the same wood edit will show you a html form to update an object update is the actual method to update an object and destroy will delete an object so for example i have israel okay post id to post show well this will show action take the post id and display this is a get method and a show action but what if i want to list all posts and create posts so i have to write foreground for index show new and create so instead i can just write symbol like this resource post only index show new create and that's what we're going to write in our realm copy it okay and config barbie and paste in here okay actually post here actually we don't use a new route because we have a form in the index page already so what about photos post has many photos and photos belong to post so we could use nested resource like this do resource photos only create so with nested resource every time you interact with a photo you need a post id just like photo is a child and it's in their parents so for more detail you can go to guide.julian real.org routing and they have a very nice table very nice example to explain about resource and nested resource as well so make sure to check it out all right save it and close this file and that's going to working on the model and what we have to do is about user model and in here let's write user has many posts and dependent destroy so user has many posts and when user is deleted and the post is deleted as well and so do with post post has many photo and when post is deleted photo is deleted as well save it so now let's working on the controllers so open app controller and let's create a new new post controller.ib now let's run our class controller inherit from application controller so first we have action for index and here we'll use post the first you will get the first 10 post include folders so includes here is an advanced feature to prevent and plus one query but for now you could just remember that including joy table which has association but much more efficient and post oh it's not new just write with me later i will explain with you and the next action is for create host user the post will post parents if post save and if parents image parents image h do image and host.photos.create image img and we direct to post path flash notice save else full flash class alert something went wrong we will re direct to post f and next we gonna write a method for show but first let's write action file host only show you guess what it does dev by post n post post note 5 by id parents id return if post last danger push not exist redirect to root path and we have another method for postpartum parents require post permit content and we have to authenticate user before they go to any of these methods so before action authenticate user save it actually let's save this one save it okay so now let's working on the view open view and create a new folder post and create new file site index.html.erb and let's write symbol form to create a post form for post html multipart true do f and f label content class control [Music] label content class text field by file fill tab image 5 multiple later i'll explain over you submit submit class etn vtn default so next we're going to write a simple code to display all the posts and its photos not each do host and post dot content post dot photo each do photo and image tab photo image url standard and save it and now let's have a test so go to post so you fill the form and choose some file you can choose multiple file like if you upload you can choose many photos something like that and hit submit yeah thing worked perfectly so how things work first another form or this form we use form four and form four is a radio form helper so you don't have to write a long html code and the form helper will generate html code for you and in this form you have content for post and image file for photos so open your developer command click here so here you see that you have the input for content and for image so the form for helper will translate to html code and when you hit the submit button the round will handle the request and send to the controller so first in this create function it will run current user repository bill or actually i forget to write code for a show function or later i will write them and about this build function the build function will create a new racket for example open console open rails console okay and type user.first for example this is the current user dot post dot bill and enter it will create the new records by using user.first dot post you don't have to specify user id for a new post you see that you have everything new but you have user id is free you have user id already so bill receive first parents and postpartum is a method and inside here we use required and permit this is called strong parents it only is this listed parents for example when you update user hacker in the parents for example is that mean true and if we allow their parents and that would be very dangerous so using this strong parents those pam will be ignored then you could post don't save to save to the database and post save successfully will loop through each param image to create a photos and after everything is done you redirect mean that you go to post path this is the index one you go to this function and if post fail to save any post failed to save your flash uh euro message and also return to the index page so that's about create and you may see that if you inspect on this element you see that this link of the image is actually stored on the cloud stored on cloudinary and when you go to post you go to the index page so first you get all the first 10 posts and create a new entity post for the form in the view and for show just write simple like this photos post dot photos we didn't use show yet we only use index and create for now and i haven't mentioned about this type of variable so what is the difference between this post and this post what's the difference between two of these so post this is a local variable that only exists within current block let me only inside this function and this post this is instant variable and is available to all methods within a class so in controller declaring instant variable makes them available to your view so in index in the view you can call post and post from the controllers and by the way when you display the image for each post you use folder image this image actually uh photo uploaded objects so you get the url and with the sign standard you want and for more site you can go to uploader holder loader and you can call this version like standard or thumbnail or can you define many many other version any sign one all right save it and the final things i want to talk about is this before action for example before you run to the show action you will go to the fight post action first so in the fight post you will find the post literally and then if you find a post you return so notice that in this you return nothing because you create an instant variable already so as i said before with instant variable you can exit it in all methods within the class so in here you can return nothing and if you don't specify only so you mean that you run before action on every method which is makes sense that when you run into any of these you need that user to be to be authenticated or logged in so that's all for this video see you next time hello world in this video we'll starting out the view for a create post so first open gen file and let's add a new gen we're gonna use gem drop zone gs range let's save it so drop zones gs is an awesome file load gs library it looks fantastic okay so next eight assets javascript application.gs and let's run here require drop zone oh sorry the rob so save it and in style sheet of question sss yeah let's write import drop zone drop zone save it and for some simple icon we're going to use for awesome so go to how to use and then copy this copy and let's paste it in our view layout application html and paste it here save it now let's customize the view for create so open post and we're gonna customize this all right now let's write some html dip dot deflect likes column align items center log in top three so we're gonna have a column in the middle which means a line align in the center and inside we have div called xl7 called lg8 call nd10 call sm11 postcard so inside we have postcard and the style of the card is different based on the side of the screen next we have if not card gif dot card header so we have create post and help that we have div card body and inside we move the form in here so form for html multi-class true and we have a class we're gonna use the library drop zone of large image so padding 0 order 0 to f if dot form group dot row dot merging top two marine top two ram div dot co auto adding right zero so we gonna print out the image image check avatar avatar url current oh sorry um current user class post offer i can so just typing typing with me later you'll see what i mean bringing left adding left 0 and we print out f not text actually we will paste this in here cut and paste it in here form control border zero place holder say something about this and outside that we have div dot fallback cut this and it's in here so delete this and we have diff dot drop zone message dot m o margin zero and we have diff dot drop zone preview dot marketing bottom three so notice that previews we have s in here all right inside we have div dot upload photos icon e dot glass oh sorry dot f a f a plus f a two eight area hidden true style color ddbfe2 all right and we have submit now we change it to the post etn etn primary save it well let's see what we got and run a server now let's go to host all right yeah it's still very ugly now this profile should be smaller and here's the the same content and this is the five picker icons click that and it will show you a dialogue to pick file just like previous video but this needs some styling now so let's go back and open css file now let's run post author icon hate 40 pixel width for epistle water radius fifty percent morgan right ten pesos okay and we gonna so next i will customize upload photos for from here upload photo i can't hold the cursor pointer drop zone review drop zone preview dot drop zone image free view again 2 pistol drop zone image water radius little pistol important image 100 without drop zone remove extend or spray extend high text position absolute top knight pistol rye five pistol said index 20 with 18 pistol a 18 pistol in our position 386 pistol 25 pistol opacity 0 webkit transition opacity two second linear transition the same save it draw zone drop zone preview over redzone remove opacity one okay opacity one save it well actually we have final is upload photos icon a 120 with the same 120 order two pistol dash ddd fe2 radius 2 pistol heading 48 display inline block and mark in 2 pistol save it now let's see okay you see this button the fire picker is not really do anything so we have to write gs for drop zone to be able to pick file so let's open javascript create new file upload post images gs drop zone also disk cover false so when the document is ready we're going to run the function to initialize the drop zone and we get the plus icon and we're going to initialize uh drop zone if we move link troll max 5 size one one here is one megabyte well the maximum size of the phi is one megabyte well the process q falls so the default behavior of drop zone is right after you pick the file the drop zone will upload it right away so we're gonna say auto process qs4 and upload multiple troll that means we can pick multiple file our now upload 100 file at once and max 5 we can pick is 100 parents name image our parents in the controller reviews container container drop zone preview click able upload photos icon our icon thumbnail with 100 and thumbnail hey what understands the preview side of the image and init function bar my drop zone like this and i'm writing some call back for our drop zone this dot element dot query selector input type submit and event listener listener click function e e dot event default e dot star pro allocation my drop zone the process q all right so another callback is this dot on success multiple function [Music] files response window.location.reload so this will trigger when the file has successfully been sent then after that we'll just refresh the page right and another callbacks is when we have hero function lies respond we going to use the toaster hero responds okay save it and save it right now refresh and click hope nothing happened let's see what we have yes we have syntax hero where's the lie all right it doesn't show us where uh i think it's online sick or something oh okay this should be comma save it refresh and click well still nothing work okay unexpect token 17. function oh gosh you got the tie point now see okay i'm pretty sure that it will work now run it yes so for example if user type something plus content and they click post right away with no image so in that case our app will book so to prevent user from doing that let's fix our code open model and host rb oh no photo.rb and in here let's write validate image presence true so by writing validates every time they create a photo it must have an image okay and one more thing let's do is since we're using drop zones so our parents will change a little bit so let's change our controllers so let's open host controllers and in here we change it to parents image image save it alright now let's pick our files so i'll create a content and pick file and hit post you wait a little bit okay our post is successfully created now the next thing i want to do is customize this post list and when display a post i want to display the name and avatar of the post author so in the controller we have to also include user and i changed order created a desk so we always see the latest post display first all right now let's back to our view our index okay we're gonna this we're gonna customize this so posted each do pose we gonna write div dot card dot merging top three post we'll call this a post and inside will have the dot card header link to user path push dot user class no text decoration do n image tag avatar url post dot user class post author icon and down below we have link two user path post user last normal color no text decoration title pulse dot user.name and do and n and inside we have strong user name save it and inside we have df.card [Music] quality okay so we have card header and cardboardy the drill.action a course fire love high text so we're going to create interact button for a post for example get love create comments and hit bookmark and here we say love copy and paste paste so in here we have comment and this is command this is bookmark this is work mark and we add another class is where the left auto to ship it into a right corner div did strong plural lies 16 so for now i just bring some dummy data and we have another div span span strong user.name and spam post content oh i just printed already post content and we have another div light color post time and we're going to each time a goal in words host dot created at a case space of gold and we're going to display how long this post has been created all right hr div dot row dot actions form class and inside we have death dog dip text area so here we don't have name yet no id not yet class form control command input order zero place holder it's a command so you mean so you can guess that what this does already right round one save it all right and we could delete all this delete and save it now let's see what we got refresh all right we have some problem with avatar url function so let's see where's the url come from that's fine is helpers and this function i think we have the problem with this g sub functions all right so after we cut this normal string we'll slide back to user image fields using this back method this exclamation mark is actually a bag method and that user is saved in the cache so in other posts it will have the same user and that user don't have this normal string so we fail to cut and this method return new so in state we should cut this normal string when we create users so we only cut once not every time we render user avatar this is so wasted resource i should have known this before cut it and here will only return user image and we should cut it in user from only off so one god image we gonna dot g sub no okay save it and this should work okay looking good so in order to display image in a post for example we have multiple image in a post so we're going to use a bootstrap component called carousel go to get bootstrap and search for carousel carousel and i want to copy one yeah this look good i'll cough this copy and in here no not here index and in here we paste it if post dot photos dot size one we're gonna print now image tag most photos first image url standard class correct image type else else and and else diff dot carousel dot sli sly and we also have data right careful cell and for id because id is unique for each post so we're going to write like this carousel host post dot id so in this case we have carousel pause one for the post with id1 for example and for another post id we have correspond post 2 3 or 4 or something so that will make this id unique and inside here let's paste it what we just copied previously and tap tab tab all right for this there this course in the div we're gonna write like this host.photos.h do photos and if photo equal photo host the photos the first so if this is the first one and if this is the first one we gonna to carousel item active this is going to be active one and okay notice that we're gonna cut this and paste it in here tap inside death dot carousel item okay so after that we're gonna print out image tag photo image url standard class current image top all right delete everything in here delete it and next we have a chain this carousel button so this should be corresponding with the id of the post so we write like this okay carousel post post and copy copy paste so each post has its own carousel and egg of this button point to this corresponding carousel right now let's have a test okay we have this button so of course that it lit it looks so big right now and it actually be inside this okay don't worry i will change it now cut it and paste it in in here in this inside this big diff paste it save it refresh okay perfect okay and actually i will move all this code inside a partial file so let's create inside pose create post list dot html dot erb and paste it in here save it and back here go in here to take here and select everything and delete it so in state that's why div host actually post and render post list save it let's see okay okay let's write css for this button in this file i'll call this pastor my post review and post card header background color white card body heading 5 16 5. actions again twelve zero post time again top five pistol font size 10 pixel command input and size 14 pistol and resize none previous button previous button background position 281 pistol 280 pistol hey three pistol opacity one with thirty pistol and we have next button background position three five three pistol zero hey three pistol opacity one with 30 peso and we write some button and we write some button love extend background position 3 25 ps4 329 pistol hey 24 epistle with 24 pistol we have love we can extend from love because we have a different icon is for 182 356 pistol and next one is command also extend for love but background position also a different icon 258 pistol 175 pistol left 8 pistol and bookmark extend from love that proposition is one 50 3 5 3 pistol and save it let's see what we got it should change this ugly line should change always not change all right let's see and we have some typos action and input save it now let's see all right this we have some problem right this should not be linked in post list where is it here all right this shouldn't be href this should be outside and class and this is the same last all right copy it paste in here save it refresh cool yeah perfectly and so now i see this one still not work and the image is too small like it's trying to straight out you know unless working on it so no text decoration yeah we still haven't declared this no text decoration and normal color no text decoration we should write in in here let's check the equation over text decoration none color to six to six to six and normal color color two six two six two six save it refresh it should we change all right looking good and about this image is in photo uploader uh where is it uploader virtual voter and in here i'll change to [Music] 1080 1080 and it should crawl from the center save it refresh it should be much much more sharp perfect alright good and one last thing we want to do is i'm going to change this page into our home page into our root page so open config and round rb and the roots here from page home i'll change to post index save it refresh so for example when you go to the root local host 2000 and this should be your home page okay so cool that's it for this video that's a lot of code there's a lot a lot of code wait to know guys see you guys next time hello world in this video we will create a view to show a specific post so first let's check out the round config run rb and we got the route for showing a post already so next let's check our controller controller host controller and we have the method for a show function already all right so everything ready let's working on our view on view post and let's create a new file show.html.erb all right dip dot deflect flex column align item center and moving top three ram inside we have div dot row post box code excel 10 called lg 11. call xs 12 and inside we have diff call g8 call nd 7. padding x0 minute padding for left and right zero display flex pause show image if dot align cell center so we have two column the second column is div called g4 call nd five plug in top on small desktop four and mounting top on medium side desktop is all right so the left side the left side of the columns is i'm going to show the post so let's open index now put this and copy from here to here copy and paste it inside here and change all posts to this post see these two this two and this two all right save it all right the second columns we have div row heading on left and right is 3 ram and here let's print out user path post user class no text declaration do and and uh i'm gonna print out an image image in mage tag avatar url post user class post author icon and another link to user path post user class normal color no text decoration display flex alive cell center title most user name do and we print out username post user.name so basically we have user icon the post author icon and the author name next to it next to it all right so next we have hr dot margin bottom zero div dot command list heading on top and bottom is two ram if post content dot present and so if the post has content that they write the content for the post and we're going to print out spam strong host post.user dot name and next line we're gonna print out post dot content all right they have the name the name of the post author and the content it was just like someone is command we have his name and the content right and so in next we gonna write is the load command here 100 times do and if oh actually i just print this copy this copy paste but in here i'll try something something silly just bring out some silly things like just i just tried some silly thing this doesn't have any meaning no helmet okay so again i just write some dummy dummy stuff to uh to test if our view working good you know well later when we're working on command this should be the real comment so for now i just print 100 times dummy comments should tap it inside okay all right so that's done for the commands and we have hr in top zero so right below is the action to like button to love button command and word bookmark so i will copy it from the thing in here here the action [Applause] here and copy back in here we paste and to delete some like this going to delete it all right we all set now let's create a link to a post so that you can click on that link to go to a specific post so import this and let's change it on this four times ago i'll change it to link to time ago in what host created that up case we append it with a go string and post path host class like our first time and no text decoration and you'll need all of this save and let's see all right so when you hold this you can go to that link all right we have a new row yeah we should change this to instant variable i think this post and where we have post all right it was good now refresh okay so you see that our command is way long oh don't worry it's pretty good now let's write some css and that will be fixed assessed stylesheet and application.css now let's write command list so we set the haste width and when we overflow overflow that high will display a scroll bar hold show image background color ffa margin 10 pixel 0 save it refresh yeah look good now so when it overflow we could scroll it yeah super cool so that's it for this video see you guys next time hello world in this video we'll build a feature to delete post so first as usual open router ruby and a destroyer there destroy save it so next let's chain our controllers close controller and define function for destroy and so first if post user current user we check that the user has permission to delete a post else and if that post it belongs to the login user and post or destroy it destroyed successfully will flash and notice that the post is deleted or deleted else you have to not successfully will alert that something when wrong and and if user not have permission notice you you don't have permission to do that and after that which we direct them to root path and before they go to destroy they should go to fight post save it so destroy need an id to file a post to delete it right so next let's customize view open view post and post list so in here let's write it right here going to post path post method delete class marking left auto delete oh sorry delete post icon more again left and right zero and we're in top and bottom auto do and and software phone awesome icon is a far if a trash or and this is the delete icon area hidden true and we should have make this to display flex online items center and save it and also i'm gonna copy this copy copy i'm gonna show this in [Music] here after username save it deflects live items center set now let's see all right refresh okay we have an icon for you and when you go to a specific post okay oh i forget that should be instant variable here post save it all right now we're styling it a little bit open essence die sheet and at the end let's try delete post icon color to six to six to six and full size 20 pistol save it refresh all right now let's test to delete one i click delete and done i delete it and one more thing to do is i only want to display this delete icon on posts which belong to the login users now let's fix it by opener model uh sorry this reposter iv and let's run here death is belong to user host dot fi by user id user dot id id id and save it and when we use it so that post list and before we print that we're going to check if host is belong belongs to current user will print this out and and also copy it save it and back in show right in here the same in and tap it in here is post all right so how things work so belong to is going to receive a variable an argument which is current user and inside that function it will check that or actually it will find a post with user id is current user you pass it and the id id here is the post id itself which is actually itself dot id cell here is the post but you don't have to write cell we'll understand already so if you find that post so you are the owner of that coach right and then you can display the delete icon all right so that's all this video see you next time hi everyone welcome back to this course so in this section we want to do on like comment and bookmark and update user profile page so when you see a post you can like like and unlike it and comment like love it comment it and you can also delete it love it okay all right and you can also bookmark or unbookmark so i will bookmark several posts and i can go to a specific post as well and go to user profile page and on user profile page you can see my my post all of the posts i have upload and i save posts like this so i'm super excited now so let's get started hi everyone in this video we're starting for the bookmark view so first let's open app and controllers and i think that we have to make a little bit change on our bookmark controllers and in the paragraphs we don't need to require our bookmarks because we use a simple link to to send a request to send a request to create bookmarks so we'll not need to require that bookmark parents right save it now let's open view and post show and do some bookmark so let's write diff and make an id because we want this to be unique so later we'll use ajax to update this both id 2s 2s and we have class left auto and inside we have if we have bookmark else and link two more is bookmark method delete so if this user has already bookmarked this post so we will uh so we'll so this will be a destroy path so when you click this button again again so it will delete this bookmark right remove true so that to make the request able to ajax class voice try bookmark high text and else we uh display a link to create bookmark uh look what this would work post [Music] stumbling up for the variable type now i will edit again not true class or spry bookmark high text so here we have instant variable we have instant variable all right save it [Music] save it and so this uh we will sign up for this bookmark yes start sheet so scrolling down to the bottom and you see this bookmark now let's declare for bookmark extend 5 position 353 pistol 273 pistol save it all right let me double check all right let's have a test refresh all right now let's go to this post let's try to put work refresh yes destroy it refresh yeah it work but i think we should change this to a few other pistol save it but i see it's a little bit moving and wait a minute create it yeah it's not moving again all right good now now let's create a partial file so that we could hack we could manually uh load this so cut this cut and in the view new file so this should be uh bookmark icon html yogi paste test so instant variable instant variable instant variable save it so here we'll use runner bookmark icon is bookmark this is instant and we have post post all right we need each bookmark and post and that's that's okay another test make sure that it still work yes all right so ready now let's create uh the return gs file so create new folder marks so we have new file create gsurb now let's write some gs shall we mark i can host host id 2x html g render host bookmark iq so you see that if you not write a partial file so you can't know which part of the page you will render right is bookmark is bookmark post right and console.log with report success save it so another file destroy gs erb so we have id bookmark i can post also id 2s dot html g render host i can yes mark oh i should have copy it's exactly the same i think post post then we should call right let's have a test this should change uh-oh let's see let's see our network [Music] play everything and yeah it's not changed at all let me see let's see i don't think we have any problem with this and maybe they uh maybe it ran wrong is that you don't know uh they don't have we don't have this this variable to check so i think it's we should check our controllers oh so we don't have or again should have is bookmark copy it paste it all right you use this button to clear a lock and then you click and this is create uh move it oh i think we should only create for create we only do create yeah all right it should work now delete create delete create delete create and you can see in the console then we have some lock in here well i could delete lock in here okay it's just for a test i just write here for test right so let's make uh our agent work for show for the index so it's in post list so we have homework here delete it and do id mark icon host host like this we use normal variable 2s glass on the left auto inside we render bookmark icon is bookmark post is bookmark current user postpost save it right so let's see okay so it's really good all right and put like this all right it's good now so that's it for this video see you guys next time hi everyone in this video will update user profile page so not only user name and user email we will display user posts and display user bookmark post all right so first open controllers app controllers and user controllers so you have show here and then we have post we have user dot post includes photos likes comments and we have to save for user joys book mark where user id current user.id and includes photos like comments and we only we only have save when user equal recurring user so if you go to another people profile patience you can't see their save post yeah save it and in order to join with bookmarks you have to declare the association in the model so post post has many bookmarks save it okay so for the view we're going to use a bootstrap component called nav tab so you go to bootstrap.com and search for naps and scroll to the very very bottom until you see javascript behavior and looking for this right so we have two tabs one tab for a post and one tab for save right so we will copy it and let's open our view in user or show and let's paste it right here so before you paste let's make a diff profile tab okay tab and here you paste it and select tab sorry select it tab tab so that look better right so you want to delete this because we only have two tabs do with this as well and let's change this right so you double click on this to highlight it and then click command d to multi-select it and then i want to change this to post and this should be post for profile let's tab tab command d and this should be save right and this is save all right and for nav in here i want to make this class is oh no not in here this div i want to make this display flex and just define content center to make these two these two tab button at the center all right for the tab content uh padding bottom three ramp so for this tab we have div dot row all right wait a minute okay different role and we're gonna move through each pose host.h do host n div dot co 4 and link 2 post path post do n div dot post stat display flex justify content center align item center so we have span why the ifa if they hurt hurt all right area area hidden uh true print opposed to likes psi the total of the like post left three rams f a f a command area hidden true post command size so outside we have spandiff we print out image tag post photo first image url standard class current image type image preview right save it let's have a test refresh all right it look [Music] pretty ugly for now and now let's do that for save but actually when you render save post it has exactly same layout so i'm going to do is what i'm going to do is i'm going to cut this and make a partial file so select from post to end cut it and i will create a new file i'll call this post erb save this so remove this instant variable and in here we'll use render post and i will pass inside post post or this should be post and uh save uh okay for this or this side div dot row and render post the same post post but this should be saved and we only render if user equal with current user and we have the same way with this nav we only print it if uh if current user if user equal is current user and right save it refresh and let's go to save okay so this user has only one post for save right now let's customize this ugly thing so open our lovely scss file scroll to the very very bottom now let's write some css profile tab working top 60 pixel and so we have nav tabs order zero for the top one pixel solid ddd and we have nap item well actually this is inside nav tab so now item order radius zero order zero or the top one pistol solid transparent and marine top minus one pistol padding 10 pistol zero background transparent foam weight bowl color 999 nap item active color to 1666 and where top is one pixel so with 262626 save it what i'm doing is i'm starting for this uh nav tab button so refresh let's see all right looking good but it's not at the center so let me have a quick look the flex justify content center all right oh all right it has very weird uh let's see really that's the weirdest book i have seen okay so we good now so let's start it up for this icon so back to our sss so in here we have post staff position absolute and color white bonsai 18 pistol phone weight bowl width cal one hundred percent minus three pistol hey cow 100 30 pistol top zero opacity zero and when you hover on the parent or on its parents is called four which is the image and when we hover it will display a postdam and on gba we change this background 0 0 0 and 0.3 this point 3.3 is actually a 0.3 opacity one image preview ranking bottom third pixel save it so before i refresh i will say what i want to do is i want this icon to be hidden by default using opacity zero and only when you hover on this image which is code4 it will display it will change the css post stat which is opacity width 1 and change the background colors and this will slightly dimming the the background so let's see what i mean refresh all right so nothing in here so when you hover it see you have uh the number of like the number of comments right and when you click this you go to the to that specific post right and you can see the save save post and one more thing is that when you go to other people profile page you won't see their save post and by the way i just go ahead and create some uh profile of the user uh other user photo sorry other user photos all right so that's it for this video see you bye next time hi everyone in this video we'll create model for like features so first let's open rao programming config rarbies in here let's write resource like only create and destroy save it so again this is our database diagram we have like table relationship is very simple suppose has many like and user has many like okay so now let's create our motor for like open your terminal and run waves generate generate model like host reference users reference hit enter right let me check that migrate reference post all right we're good here on range db migrate all right now open your model app model and library so in here i write validate user id unique uniqueness scope post id save it so here i want to make sure that user can only like the post once and this will validate uniqueness almost fulfilled right next position rb and pulse has many likes and i will order it created app yes or yeah sorry three eight tip okay this created ad save it and def is like user like dot 5 by user id user.id host id id so we find a racket inline table with user id and post id and if we find one so that user like that post already right so let us use this method to check that whether or not user has liked this post and we could display the like button state properly right and finally here's another rb and here we say user has many likes save it and by the way you may see some weird bug on the ui for example the five figure icon sometimes your drop zone gs not appear correctly so that's because our change is not run properly and in rails there's a library integrate as a default and this is turbo lanes it's trying to make navigating the web faster well what i would say with it's still pretty buggy and access javascript ssgs and we have turbo link and we delete it and if you want to use troubling you have to change in this document already you should query like turbulent or load or something but i better disable it alright so that's it for this video see you guys next time hi everyone in this video we're working on light controller so first open app controllers and let's create new file likes controller.rb and class likes controller application controller and and before action we require them to authenticate user and then create and so like current user dot like bill like parents and after it was created we get the post from like and check if fly was safe and we will respond to gs else last alert some thing when wrong and and death like of the private inside we have like parents and actually this should be singular like parents and permit post id and we have depth destroy so pretty much the same fly parents id and post equal like post if light was destroyed successfully we will also respond to gs else flash alert something went wrong and save it so after the like is successfully created you return a gs file and this js file will update part of your web without having to reload all the web and this is something called ajax so later on the video lecture we'll write this js file all right now let's open post controller and in here we'll also include likes and right like this all right for [Music] show just show when you show a specific pose you also want to display like push the likes dot includes user and we will check that user has like this post or not fine y oh actually let's try using the model post dot is like something in the model which is written is like a current user okay save it and this should be like alright save it all right that's all this video see you right next time hi everyone in this video we'll starting up the light features so first i'll make a few change to our route so there are six action for example if you declare all action for likes uh in here you could have like index show or just for example okay new edit uh update and save it so you can have maximum six actions in here so let's open terminal and have a look so raise round so you see the round for likes you have post id before it that's the point of next resource right but the point is some like browse doesn't need post id in order to find it and there's three uh no there's four edit show update destroy these four round doesn't need post id in order to find it while you have like id you don't need post id to find the live record anymore so false id is pretty redundant here we could change that by using shallows shallow true save it and now let's see how our rounds work you see our route for edit show update and destroy is much much more shorter all right so back to our view so open likes uh views for post and post lists and we'll start off the light features here's the actions and we'll write if post is like current user [Music] present we're going to display link to the light path is like method delete remotes true class we copy this don't worry and change this to love oh no actually loved and else linked to love post likes path host and method host i'm not true in class it is love and and we delete this and this thing to delete it inside we have strong and post likes dot h to like index inside we have like not user.name um like this else if like equal post not like last strong and strong and what we're doing is we're studying for the text uh like user a like this or user a and user b like this or user a and 15 people like this something like that you know the way i write is very ugly user.name like this tap inside tap inside else if just talk me and when you run it you'll understand how things work n hosts dot likes psi index to s others this is like and some somebody and 15 other like this and we'll break else if index post like size let's just cover all so i just cover all case that could happen like dot user dot name else and dot like.user.name okay save it all right this is actually s only set it and this should be presence question mark all right now let's have a look so refresh and you should press a button when you press button here it will create a like bracket with post id dispose id and this current user id so press it you might see nothing happen but just manually refresh the page and you see that somebody like this this is the current user and you click that again refresh and that user is going away and this this love icon is need i need to fix that a little bit weird now right so for example you can have a lot of people like like this post and with it will display like uh strong life vist strong long and user a life is worth strong long and 16 others like this you know that the light text i just i just uh written in code before or display it and it's pretty complicated and the code is pretty ugly but you know it's work anyway all right now let's check that fix that love icon uh this love one so i'm wondering what do we need or love this one let's see what we need two hundredths and 330 230 200 33 save it alright good now now i want to make a partial file for this like icon and this light text so i will cut this and new file um actually nothing here it should be in likes folder likes and new file like icon html erb paste it here and here i want this to is like i want to this should be like this i want to make it shorter like that is like so each like here is a light racket of post and car user meaning that is this user has like this post or not if we have we're going to print out the delete icon this will link to a delete like and we're going to display a love one red a red hot icon and else we just make create like create light path this is a great light path and the icon is the white i the white heart icon and save it so if in here we want like brackets we should pass it inside properly render like icon and one of the passives inside in a hash is like host is like current user post host yeah this should work so this is what you're going to use in this like icon and this is what you pass in you pass this variable to is like and this variable will be used on like icon all right and i want to wrap this inside or there with id i can post cut it and paste it here and here i'll roll like unique host id s yeah i want to make it unique like this so later when we use ajax we will select this exactly like i can and change it and update it so later you see how it's work and for a like i can well for like actually don't need this and uh okay type it out all right cut it and create a new file this is like text html erb paste it and here i want this is likes yeah for all of this i just want to make it likes so in an atom you're going to select multiple cursor like you highlight this post and you see that you have multiple posts in here and you hit command d and you could select all of that and hit delete delete and done super cool all right so in here i want lights and in here i'll pass it properly so render like text so let me see what we need in here so we need likes and we'll pass it likes toast.likes right save it and in here i will i'll make this deep unique to like text post post id to s save it right so now let's create the return js file actually i think we should change this to post folder sorry yeah it should be in here because we're rendering on the post page and it should be the same photo we post all right now let's create the return js file so yeah first create new folder likes and inside here we create a new file create yes erb and we'll write like this oh actually i think we should check that our uh our partial work or not like this hit this and refresh oh my fish i think like this all right all right create jserabi like i can post host id 2s dot html link to love like path like method delete remote troll class core sprite love high text and we change the like text like text post for post with id and html g render post like text likes post likes and we print console log create like success and copy and i'll create another file destroy gs erb is this and this is linked to love post likes path you should be likes and this should be post method post neutral class course by love high text and this is delete like success save it and save it in here all right now let's see how it's working okay and hit yeah it should be changed if we're using ajax now and if you open console go to network and network when you click this so it will return a gs file and this js will update on the ui and you don't have to reload all the web just like we did manually before and this js file will update part of your web and this is the content and so first is select exactly the post you want using the jquery so like i can post 21 and this one you see like i can post 21 and it will update it i and the text and yes we have some problem with the like text there is one case we haven't covered yet like text here inside here yeah save it and let's see like like yeah work now all right so how things work and first in the controller and light controllers so after the line was for example light created and responded gs will run this gs5 create jsurb for create function and in create its job is to so first change the icon and change the text so for the icon we will select the exactly post by using its id and then we change its icon in the same post and we render it when the light takes and we pass variable inside it and the same will destroy so pretty easy how things work okay in the point we're using the partial file like this is that we could reuse it in other place and we'll use it on show okay so in here this like icon and we've used the same here copy and i'll drag it next to each other's paste and in here we are using instant variable so this should be instant this reinstant all right for the light text copy and this paste this should be instant instant save it well actually we should check controllers like controllers let's see under close controllers plus controller for show and web likes and is like and we should use is like and we should use is like is like and for like should use this copy and paste it save it all right now let's test it go to this host yeah that's not expected post all right 66 host save it refresh now let me hit like yes strong like this no yes no yeah good now and back to page all right and you can see that the layout this post and in the post detail is pretty much the same and so let's make a partial fight too so on show cut it create a new partial and this is photos html paste it we should use save it back in here we will render it folders host post so one thing that in partial file we should not use instant variable or actually we should not assume that we have instant variable in this and what we have to do is we should pass instant variable and then we use this in the partial file that's much more safe right now let's see if it work yes still work right now let's do for the index host list so we have this delete it render photos post post save it and let's see oh that's weird let's see on photos oh this should be post yeah let's see okay it worked now i think also for the yeah it still works and final thing i want to do is back on the rail and i'll delete somewhere in the news save it right so that's it for this video see you guys next time hi everyone in this video we'll create model for command features so so first open routes and write resource actually resource commands only index create destroy shallow true save it and so pretty much the same with light table command table relationship is pretty simple so post has many command and user has many commands so okay now let's create a model raise generate model command content text post reference user reference foreign oh sorry reference okay and i should check that migration file reference post all right we're good now please db migrate all right let's check our model for command below to post below to user okay and for post so post has many comments and also i want to order it on created on descending save it and on user user has many comments save it so that's it for this video super easy right guys hi everyone in this video we'll create controller for command features right so open app controller and let's create new file and we have commands controller rb and let's type in class commands controller application controller and before action authenticate user and we have index command we get all command for a post include user and therefore create command dot new command parents if command is successfully saved we get a post and will respond to gs else flash alert something went wrong and and therefore destroy a man man fly parents id post man post so if command will destroy successfully we respond to respond to gs else last alert something went wrong and here we are private death command parents parents require men permit user id post id content save it all right for plus controller we have to update in here uh [Music] in show and command command command.new save it alright so that's it for this video see you guys next time hello everyone in this video was dialing up for the command view so first open app view post and show so let's see the form this one and let's make this form work so i will write from here form for post command new html class west 100 remote true [Music] do f n f hidden field user id value current user dot id f hidden [Music] id value host id and f takes fill content class for control command input order zero place holder h command auto complete off all right and we can delete this with it and inside this div i want to make this div to be unique so use id uh command form post and post id to s and this we use instantly right oh yeah okay we're good now right and save it so remember that command is a nested resource a post right so when we write like this form helper will generate a round with post id before command and that is exactly what we want and we have hidden fields so this will not display on html and this value will be fixed on the html code and user can't change these so the content unless the content is a command so user can type in right so next let's customize the command list here so let's write like this or actually just delete it all right so we have div with id command post and print out host id to s we want to make this unique so later we'll use ajax to select this div and using jquery to right here we have host commands h do command this should be this post command and n div dot margin bottom two ram if if command user equal current user so if this command is belong to currently log in user and we will display uh delete command icon with command path is the command method delete milf troll class or spry delete command high text and here we have n all right and here we span uh sorry sub and strong and pronoun command user name name and span command content content yeah right content save it all right so i think we're good now let's have a test and go to a specific pose uh-oh alright undefined method post all right it's always fail on the first run yeah this should be instant variable let's see ah here too instant variable all right save it refresh yes uh-oh all right now let's try to create some comments uh co-post refresh yeah it's work now and you see that our delete icon is not working now uh okay let's write some css and access the style sheet application as you said and scroll to the bottom and right uh delay come men with the one pistol hey you're in pencil oh sorry 11 pistol and background position is one two two one six pistol and one two pixel load right more again five zero zero ten save it refresh yeah cool so great enter refresh okay it's working out and let's try to delete one so after this you click the x icon and you have to manually refresh yeah so our backend is work now and later we'll use adrian to load this manually so we don't have to refresh by ourself so before we do that we have to uh make this to partial so this i will until end i will cut it and i'll create new file new file so we have this is command [Music] format okay command point and to know url and we paste the form here and inside here we shouldn't use instant variable right because uh you should not assume that as i say before you know you should not assume that you have instant variable inside a partial and you should pass variable into here so let's do it render command form will pass inside post post right and this too cut it this should be command list html erb paste so these two this anywhere else yeah only half this place so here we use render command list host post save it refresh and let's say call refresh all right we're ready now so now let's create the gs file the return gs file so in view create new folder create sorry comment first commands and new file create create.gs.erb all right inside here let's write some gs command post and post id 2s as we select the post html uh g render host host command list uh post instant post and the second one comment forum post and post id 2s we still have to select this form because we want to reset the command the command content the the input user type the command we should reset it we should delete all the value in there content or while later you would understand value so using this will will we will delete all the value and oh sorry right and we have the console lock just for testing recommend says save it so we have another file delete gs oh it's not delete all right you should not uh you should not wrong this is destroy not delete gs.erb and we have command post host id dot 2s html g render post command list host host we just re-render the whole list after user has deleted swap delete command success save it and test it right now when i type some command uh well cool and after i click enter it should post create uh after it create a new post oh sorry new command it will reload this command list and delete the uh command content in here so people can write again like cool stuff like this stuff like this right yeah cool so uh let's make the host list this will slid work too right this one delete it and we use render okay command form and post this we will use all right we suppose this variable and uh id don't forget to make this unique command form post and host id 2 s and where did we list all the command in here oh sorry here i did command post okay wait tab right here host id 2s render command list post host save it so let's double check command post okay i believe that this time will work on the first time go to the our home page all right our rendering is work it's a command okay cool let's do it okay okay okay let's go cool so that's it this video see you guys next time hi everyone in this video we'll create model for bookmark features so bookmark is pretty much the same with like and so first let's create rounds oh sorry is in config rb alright so in here we have resource bookmark only create destroy and shallow true save it and the relationship of bookmark table is pretty simple host has many bookmark and user has many bookmark so let's create a model runways generate model bookmark mark and host reference user reference enter and let's check our migration all right we good then run range db upgrade all right right let's see your model and more though [Music] bookmark you know the post your user okay post and check out post so in pose we will create a function is bookmark user and bookmark five by user id host id id save it and for user so user has many quirks so that's it for this video super easy right guys see you guys next time hi everyone in this video we're working on bookmark controllers so this is very very much the same with like controllers so open app controller and let's create new file bookmark controller rp so open like i think uh open comments let's see all right let's copy copy everything and paste in here and make sure to change in here bookmarks marks controllers and every this we change to bookmark post actually bookmark include okay actually we all have index right and create okay so remember this uh highlight this and command d d d d d d and what mark what bookmark no current user dot bookmark dot do move my programs homework save all right i shouldn't have copy i just write all right l flash alert destroy bookmark id post bookmark post if it's your successfully response yes let's alert write it more programs uh remote content and okay save it right open host controller and in show we have is bookmark bookmark all right good use host is book mark current user let's see that in our model let's double check that in post okay we'll use this function all right so that's it this video see you right next time i run in this section while working on the search so inside right after you type something it will search right away or something like this when you have no result it will say no result fail or when you search and you can go to this to go to user profile page so that's one of this session let's jump right in hi everyone this video we're working on search mode and search controllers so actually what i mean on search is very simple we list errors and with conditions so well nothing search mode or cell controller here we'll just make use of user model and user controllers okay so first one around click rounds and in user we have index save it so next and for search let's work in our controller first app controllers user controllers so for index and we have users equal user.search parents terms and respawn to gs so we use hs to return gs then update the result on the view so params terms here is what you receive from user like keyword they want to search so next let's define this search function in the model let's open model and user model so in here we write another function def cell search term if term where username like and this is turn so this is the the way we write to pass the variable in a string so else new another nil and right save it so you get the keyword to search and then you get all the user which has name like keywords from users and when you are on inside a double quote double quote string something like this so if you use this sharp and open curly brace including curly brace so you make this and this will print out the value of this variable of term variable so if term is equal with uh strong or something so it would return like strong something like this for example turn inwards strong so if you write like this you will get the value that variable is contained right right save it and save this to right so that's all for this video see you right next time hi everyone in this video we're working on search view so first open your navbar app view nav bar is on layout now it's on share yes this is not right here right so we'll make this form work so we have form tag users path methods get last i just copy this copy paste id users search and do right so don't forget n so inside we have text fill tag terms parents term and class so here we will copy from here uh copy and paste in here so next we have place holder search and auto complete off and outside that we have dipped uh id is user result so this is a dip we print the result from our backend and we could delete this now right save it all right so why we use form text in state of form 4 so phone 4 creates a form for a model object so and from text to simply create a form in most cases when you sending data to your database with a model in methods like create update destroy etc so for this type of action you can use one for so in state form text only create a simple form html and this is often likely usually used on such for such functionality right right uh okay save it so next i want to create a partial file uh result i'll pick it on user new file this will be user result html erb so in here we have if we have users present so this is the user return from your controllers else and so in case we have in the case we have users so we'll loop through each user h do user don't forget n so inside we have link 2 user path user class no text decoration do inside we have normal color and inside we have div dot search result item and we just print out user dot name right else in case you don't have any user we just print out adding three rams no results found save it right so now let's create the gs return file so in uh users folder we'll click new file here we have index.js erb so in here we will get the id users result which is the nav bar which is this element and when you get that you will replace it as html and print out your password file render oh sorry uh it didn't share no i'm not sure we on users result so yeah it's on the same folder right and we pass variable to it save it so this usually will receive from the controllers right so let's define our acss right scroll to the very bottom and here we have search result item adding 15 peso and search result item on hover we change this background color is a little bit dimmer save it so by this time you run an application you will get an arrow i think because we have to look again in our model so in here in user rv so first this is name notice your name so user dot name right and like and we're missing one percent symbol in here so this percent symbol means that it can be any characters behind is accepted and here is any characters before it's before it is accepted for example if your term is if you want to search for uh like tr o and in your database you have strong long so you see that you have this term this term if this term so the percent before say that you have s okay this is match and percentage back is you have uh some characters in here so that's okay that's match so it will get this user right so that's about how this query work okay save it so now let's run or i have a test i'll have a lot of will ask why wait a bit all right it's running right so such i say tro enter oh unknown format uh okay i think we have some problem in that bar so it required gs and you should have remote true so they'll tell you that after browse that it should return a gs file tro yeah so we have an user like this so when you click this you go to uh this user's home page and this should be the other yeah they have the same name never mind all right so now i'm going to make this uh to when whenever you're typing it it will search right away so i will create a new file this time in javascript on javascript folder new file we have users search gs so now let's type some gs document ready function function all right and inside we have first you want to get the is the text field the text field is on users search and term on key up so you will subscribe to on key up event this is when every time user type something this will it will jump into this function function and var jquery hhr this is ajax we run it manually using uh jquery get so first you get a data users search dot attribute action so this action is a link so let me see it's in here i open console command and here this action is a link to a form in the controllers right so you get this get this uh like destination to call the data to call your data and then you get terms is uh this is a like json json data users search and uh terms dot value you get the value in the text box and when you get all the data in the destination and you write function result users result html and if you have the result you will create a search term so you create a pop over this is a bootstrap component we may have seen several times content no result this should be done and placement placement bottom html true trigger focus semicolon else we alright i'll copy it so in the case we have data we get content from the user result placement bottom true focus still same so after that we will show the pop-ups search term pop over show right save it all right now let's write some css what is it here right now let's uh sorry so we customize popover pop over the radius zero and we have pop over for the background f heading 0 save it right let's say refresh so i will search for t r o yeah no result file uh well but the ui is very buggy so i don't know it's it's not really in this it need the pop over all right somehow it's still buggy right now i think it's on our gs all right we have some typos right uh okay refresh t or okay we're good now see so for example i searched for onto self-raiser county a oh certain file o n g yeah that's cool all right so that's it for this video see you bye next time hi everyone in this video we're working on some small improvement on our page so first i want to show uh it a link to support file when you click on comments so you go to your f view post and show or actually it's on command list i think so in here right so on when you click on this username we should make it this way strong and inside we have a link to command user dot name user path command user and class no text decoration normal color right and yeah it's open okay delete this save it save it all right so now let's go to refresh your page when you hover on this you go to user profile page and let's check on our detail page yeah let's work now so the next thing i want to do is i want to add a link to [Music] a user profile page no that actually is uh go to the post detail uh something like this when you you click on this image and we'll go to the post detail so we have two ways of go to post detail right so it's on post list right in here oh it's i'm looking for an image uh we will just on photos so in here we wrap this in a link to post path post do we have n right and we select all the way up here and tap it inside save it right refresh and when you hover this you will go to the post detail so super zzz right right and the final thing i want to add is i want to add a nation on the bottom of the index page so open your jam file so i'm going to use a gem is well around single hook will how you need bootstrap for what will you need bootstrap or right save it so we run rouge bundle all right and we're going to s again selected that solo to your controllers post controllers your post controllers and on index so instead of you query all the posts you should query it like this post post dot paginate page parents page her page is five now this is dot oh no dot includes photo users uh user and likes dot order created and descending well you could do with this right save it so on your view so post index so in here you write my break and you print out well paginate post save it refresh so yeah you should have something like this you know don't render all the posts right it's just render on 5 each page so that's all for this video super cool guys see you guys next time

Channel: Free Courses

Views: 111

Keywords: instagram clone, instagram, ruby on rails, how to, web development, how to use ruby on rails, ruby on rails 5, instagram with rails, build web app, prototype, learn ruby on rails, web app, devise, rails tutorial, rails 5, tutorial, walkthrough, Ruby (Programming Language), aws s3, carrierwave, web app tutorial, ruby on rails tutorial, coding, programming, live coding, coding challenge, in one video

Id: 4O1wk3QNb38

Length: 325min 55sec (19555 seconds)

Published: Fri Dec 03 2021