Ruby on Rails in 30 Days: Build Your First Web App | Tal Safran | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Ruby on Rails in 30 Days: Build Your First Web App

teacher avatar Tal Safran, Software Developer at GitHub

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (3h 6m)
    • 1. Trailer

    • 2. Let's Get Started

    • 3. Install Ruby, Rails, Git, and Sublime Text

    • 4. Hello Rails!

    • 5. Our First Git Commit

    • 6. Add Bootstrap

    • 7. Add Posts (video)

    • 8. Understanding the Scaffold Code

    • 9. Styling Our Posts

    • 10. Add Image Posts

    • 11. Add Hearts

    • 12. Put Your App Online

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Hey! This is the first full course to teach Rails 4 and Bootstrap 3!

Hi there, I'm Tal. I'm a freelance web developer in NYC. This class will teach you how to build a Ruby on Rails application and publish it on the web.

Rails is an insanely popular way to build web applications but getting started can be a bit daunting. This class is designed for absolute beginners with minimal to no experience coding.

We'll take a project-based approach, meaning we'll spend the class building a functioning, usable app from start to finish.

By the end of the course, you'll build and publish a mini version of Tumblr from stratch:

  • Create a Tumblr-like blog¬†

  • Post text content

  • Add photos (you know, like¬†this)

  • "Heart" posts

  • ‚Ķ and more

By enrolling in this class you'll get lifetime access to:

  • A clear step-by-step project guide

  • Hours of professionally recorded video lessons

  • A student gallery to post your work for feedback from classmates

  • And additional downloadable resources

Concepts we'll cover will include:

  • Installation.¬†Getting Rails installed headache-free.

  • Model, View, Controller.¬†The way Rails apps are organized.

  • Reading and writing to the database.¬†Using ActiveRecord, Rails' build-in database framework.

  • Git.¬†Keeping track of changes in your code.

  • Deploying.¬†Putting your app online with Heroku.

  • Rails 4.¬†This brand spanking-new version of Rails has many improvements and is even more beginner-friendly.

  • Twitter Bootstrap 3.¬†Hot off the press! We're using the just-released version of this amazing front-end library.
  • ...and more.

Enroll now to get started!

Meet Your Teacher

Teacher Profile Image

Tal Safran

Software Developer at GitHub


I'm a software developer at GitHub, based in San Francisco CA.

I got into programming in Junior High when a neighbor showed me that with some basic coding skills, I could spam AOL chatrooms and kick my friends offline. I was hooked!

Today I write code at GitHub. Before that I founded Josephine, where I led product and engineering. Before that I worked with various early stage startups and agencies which have included IDEO, Pivotal Labs, Techstars, Aviary, Branch and Flow Kana. I'm a founding board member of hackNY, a non-profit that helps students do cool things with their programming skills, and an alumnus of NYU, where I was a founding board member of [email protected]

I'm very passionate about helping people do meaningful things with their programming... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


2. Let's Get Started: - Hey there. - Welcome. - I'm tall. - Nice to meet you. - I'm very excited to be teaching this class, - and I just wanted to say hi before we get started, - because I think this is actually the only time you're gonna be seeing my face the rest of - the class, - I'm gonna be screen casting. - Meaning you're gonna be seeing what I'm doing on my computer s. - So I'm kind of gonna be live coating the app from scratch. - And my recommendation to you is to watch all videos in full screen so that you can kind of - get everything and also probably want to watch the videos all the way through your first - time. - And then after each video, - you should go back and try to do what I do so that you have a working version of the app at - the same state as me. - But anyway, - let's go take a look at what we're gonna be building. - See you soon. - We're gonna be building a mini blocking app. - That's kind of like tumbler, - where you can post either images or text content, - and each post is also going to have its own your l. - And if you really like a post. - You can hit this heart button, - and it'll kind of favorite. - You could see that the count here went up. - We're also gonna have a management screen where you can write new posts, - existing posts or even destroy posts. - It's a pretty simple at, - but I think it's gonna help us cover all the important fundamentals of working with rails. - So what's this rails thing, - anyway? - Rails is an open source Web framework meant to keep programmers productive and happy. - It simplifies things like working with the database, - rendering HTML and putting Europe Online. - It's written in a programming language called Ruby, - which was designed to make programmers happy. - I've been programming for about a decade, - but when I found Ruby three years ago, - I never looked back. - There are lots of great resource is online for learning Ruby and to my favorite, - both of which are free are try ruby dot org's and Code Academy. - I highly recommend going through the Try Ruby challenges before you start the course. - Just because it's very short, - it only takes about 15 to 20 minutes. - Code Academy is also a good resource, - but it's a little bit more programmer oriented so it might be confusing at first, - But once you're done with this course, - I recommend going back and going through their tutorials because they're actually very good - and very thorough. - So let's take a look at what we're gonna be covering. - So first of all, - we're gonna be using the ruby programming language to write the majority of our code. - And when we write it, - we're gonna be getting lots of help from the rails. - Framework and Rails is simply a library or framework that's written in Ruby. - So there's no real thing is writing rails code because it's still using the ruby - programming language. - We're also gonna be writing a bunch of HTML, - which is basically how we structure the Web pages that we're gonna be displaying. - We're also gonna be learning how to use a couple tools. - We're gonna be writing all of our code in something called Sublime Text, - which is a text editor. - It's kind of like a word processor like Microsoft Word. - But for writing code after a red our code, - we're gonna save it using a tool called git, - which helps us track the history of our code changes over time and finally we're gonna be - putting at our APP online using a service called Roku. - That's very, - very easy to use. - There are also a couple things I thought I'd mention that we're not gonna be covering the - first is CSS, - which you might have heard of. - It's it's a great thing toe learn, - and it's a tool that used to style your pages to basically make them look nice. - But instead of learning CSS, - we're gonna be using a tool called Twitter. - Bootstrap. - That's gonna already make our page look really nice without having toe get into the detail - . - CSS. - We're also not gonna be writing any Java script. - And JavaScript is the language that runs in your Web browser and helps make your pages - behave more dynamically. - But we're not gonna get into any of that for this class. - The last thing I want to show you before we get started is skill shares. - Community tab. - It's got a couple of great features that I think we're gonna help all the students in this - class, - uh, - learn from each other so you can use the class feed here to talk to other students by - basically posting a message. - There's the Q and a tab here where you can ask questions and either me or another student - will help you out. - The group's tab is kind of cool because you can create kind of groups based on your own - interests. - So maybe you live in a particular city or you're trying to learn something new, - so you can kind of continue the discussion here by creating a group or joining an existing - group. - There's also the student gallery where you can either post your project from this class or - just other projects you've been working on and you want other people to check out. - And that's it. - I think we're all ready to get started. - So in the next video, - we're gonna set up our development environment by installing rails and also our text editor - Sublime text. - I'll see you then 3. Install Ruby, Rails, Git, and Sublime Text: - Okay, - so now that we know what the plan is, - we're gonna go ahead and get our development environment set up. - The easiest way to do that is through something called rails installer. - You could find a rails installer dot org's, - and what will do for you is it will install all the packages that you need for Ruby on - rails application, - including the ruby programming language, - the rails framework get a database and several other things that I won't get into. - So let's just go and download it. - And it might take a little bit of time since it's a big file, - so it'll depend on how faster connection is. - Once your download finishes, - you should have this app dot TZ file. - Go ahead and double click it. - It created a new file. - So go ahead and double click that. - This is just saying that you got it from the Internet and it's a say file. - So hit open and put in your password and it should launch the rails. - Installer. - We're gonna choose English next. - So here, - put in your full name and put in your email and hit next together. - And here we are. - This also is gonna take a little bit of time. - So in the meantime, - we're gonna go and install our text editors of line text. - Sublime text is what we're gonna be using to write our code. - You can kind of think of it as a Microsoft Word, - but for programmers, - So let's click, - download and get the OS X version. - All right, - so we have it over here, - we're gonna drag it into applications, - and I think we're set. - Since we're gonna be using sublime text a lot, - I highly recommend that you drag it into your doc so that you always have it. - And let's open it. - I'll type Hello, - Skill share. - And we're gonna be learning a lot about sublime text throughout this course. - But I don't want to get into the details right now, - so let's check in on our rails. - Installer. - I'm gonna go down here and it looks like everything finished. - Cool. - The last thing we're gonna do before we start coding is just double check that rails. - Installer installed every individual component correctly, - and we're gonna do that using our terminal. - So to get to your terminal. - If you're already in applications, - go to the utilities folder and you should see terminal right here and like before. - Let's drag it into our doc so we can save it for later. - And let's open it up. - So this is your terminal might be your first time ever seeing a terminal, - and it's a slightly different way of interacting with a computer than you might be used to - . - You know, - you're not clicking on a mouse and dragging stuff. - You are instead typing in commands. - So one such command is LS you hit Enter and LS lists the files that are in the folder that - you're currently in. - And the way you know which folder urine is the P W D Command, - also known as Print Working Directory. - You hit Enter. - So we're in the slash users slash skill share directory, - and these are the files inside of it. - Some of them are folders. - Now, - before we go further, - I'm just gonna make the font a little bigger. - And you do that by hitting command plus awesome. - Another command is which use which to find out where other commands are located on your - computer. - So if I said which pwd, - then it means that the script that does PWD is located in slash been slash PWD. - We're going to use the Witch Command just to make sure that rails installer installed - everything in the proper place. - So the first command we're gonna check is the Ruby Command. - So we're going to say which Ruby and you could see that Ruby is located in this folder. - It's a pretty long name, - but you should see something like this. - You might see a different version number here, - like it might not be 1.9 point three dash p 3 92 But as long as you see something similar - to this rails installer installed it in the right place and now weaken. - Use the ruby command. - Let's get the version of ruby so we can say ruby and then dash dash version. - And that's already be version. - Lets now check if the rails command was installed properly. - So say which rails and you should also see this long kind of string. - If you see instead of this, - If you see slash bin slash rails or slash bin slash ruby, - then it's in the wrong place. - Now, - when I recorded these videos, - rails installer was still shipping with rails. - Version 3.1 point 12 But there's actually a new version of rails rails four point. - Oh, - and I want us to use that. - So the wayto upgrade is to say, - gem, - install rails Dash dash version 4.0, - point. - Oh, - and then you have to add these two other options and don't worry too much about what they - mean. - But say Dash dash, - no dash R I and Dash Dash no dash our dock and then hit Enter. - It's gonna take a little while so I'm in a fast forward. - Okay? - It looks like it installed. - Let's just make sure that we have 4.0, - so let's say rails, - dash, - dash version again and we have 4.0, - point of cool. - If you had any issues, - please post about it on skill share. - Eso those the two commands that really the most important commands that rails installer - installs. - But we're also gonna check if we have a working version of Get So To do that, - we're going to say get dash dash version. - This tells us what version of get we have installed. - If you see something similar, - maybe not the exact same version that's good. - But if you don't see anything, - it means that you don't have get installed. - And you should post about that in the skill share community tab over here. - And that's it. - If you have these three things installed, - uh, - then you're ready to go and I'll meet you in the next lesson on If you're a Windows user, - I'm gonna be showing how to do it on Windows next. - Okay, - so we're in windows now, - and it's the same deal we go to rails installer dot org's And make sure you download the - newest version, - which here is Ruby 1.9. - Once that downloads, - go to your downloads folder and click on the rails. - Installer, - execute herbal it run. - We're gonna hit next, - accept the terms it next we're going to install it to this folder and make sure you have - both of these checked hit install and the installer is gonna run. - It might take a couple minutes, - so I'm gonna fast forward and it looks like it finished. - Make sure you have this checked and then hit finish. - Now we're gonna configure, - get so enter your name and then put in your email. - Hit, - enter and it looks like we're all set. - So just to make sure everything works, - let's try the Ruby Command and will say, - Ruby Dash, - dash version. - You should see that we're using 1.9 point three and let's try rails. - Rial staff test version. - We have rail installed Now. - When I recorded this video, - rails installer was still shipping with rails version 3.2 point 13 But a new version of - rails is out. - Version four point. - Oh, - so let's go ahead and upgrade. - So go ahead and type gem install rails dash dash version 4.0, - point. - Oh, - and then at these two options dash, - dash, - no dash All right And dash dash, - no dash are dark Don't worry too much about what they mean and then hit Enter. - It's gonna take a little bit so I'm gonna fast forward and it looks like it installed. - Let's check the version and there we go. - We have rails. - Version four point out. - If you have any issues post about it on skill share. - Last thing is, - get so get dash dash version and if you have these three things installed, - then you're already to go with rails last thing we're gonna do is install sublime text our - text editor. - So go to sublime tex dot com click download. - You should see it download. - And then we're gonna open that up and run the installer. - Quick. - Yes. - Uh, - just hit next. - Install it here. - That's fine. - You should check this. - I think this is ah so that you can right click on a folder and say open in sublime text. - So it's kind of useful. - Uh, - install Staller ran successfully hit, - finish. - And now, - if you look in your start menu, - you should have sublime text and let's do the same thing. - Let's drag it to our task bar. - Um, - and let's open it up. - And as you can see, - it's a text editor. - You could say hello skill share like we did on the Mac, - and that's everything. - If you had any issues, - go to the class website and go to the community to have and post about your problem, - and I will help you out. - The next lesson. - We're gonna create our first rails project, - so get excited 4. Hello Rails!: - Okay, - so let's create our first rails app. - So open up your terminal and type in rails. - New Crumble ER is going to create a new project called Crumb Blur. - It's just gonna take a sec. - Cool. - So it's all done. - I'm just gonna make this window bigger. - And now, - if you do ls you should see that there's a new folder here called Crumble. - So let's go into it by saying, - CD change directory crumble er, - pwd. - Just to make sure that were, - you could see that we're in slash user slash tall slash trembler and now Ron Rails server - and open up your Web browser. - You go to a local host 3000. - You can now see that our APP is running and the rail server also shows us that it's running - on 000 3000. - But a shortcut for that is just local host. - Awesome. - So this is Ah, - this is kind of like the default rails welcome screen, - and you can see that it's telling us how to get started on. - And it says use rails generate to create your models and controllers, - and what we're gonna do is we're gonna add two pages we're gonna add a welcome page, - which is what? - People are going to see you when they you know when they go here instead of this screen, - and we're gonna add an about page on, - and that's gonna be at slash about. - Awesome. - So we're gonna use rails, - generate. - So open up your terminal and you don't want to use this window because it's running your - rail server. - So open up a new window by you can say shell new tab. - And then, - uh, - make sure that you're in the directory again. - You might have to see the back into the Crumpler directory, - But once you're there, - you're going to say rails, - generate controller, - and this isn't gonna do anything yet. - I'm just gonna hit enter. - And when you say rails generate controller, - it shows you how to use this command. - So it says rails generate controller, - and then you pass in a name and a couple of actions. - We'll get into what that means shortly, - but we're gonna say rails generate controller pages. - We're gonna have a pages controller, - and we're gonna have to actions or two pages. - One is gonna be about, - and the other one is gonna be welcome. - And then we hit. - Enter. - So this created a bunch of files in our project. - Weaken, - See? - Ah, - it created a controller. - It updated our routes file. - It created a couple of use with HTML pages for the about page and for the welcome page and - all the stuff here we're not actually gonna get into. - But these air tests rails helpers on DSA, - JavaScript and CSS. - Um, - but now, - without doing anything else, - you can go back to your browser and go to local host 3000 slash pages slash welcome. - And you should see that we have something saying pages pound welcome. - Find me in app, - views pages welcome dot html Daddy or be so let's check that out. - Let's open up sublime text and find our project. - So file open and it's in tall Crumpler hit, - enter or click open and you should see in sublime text. - That way we can see all the files in our rails project. - So this said find me an app views pages Welcome. - So let's go toe app views pages welcome dot html Daughter, - your B and this is really small, - so I'm just gonna make it bigger. - You can hit command Plus and it makes the font bigger so you can see that this page is - being generated by this html dot RB file. - Make it a little wider. - Let's let's go step by step. - So this first thing is a header, - and we have you can see that it's using these HTML tags. - We have our content in white, - right? - The text that we see. - But then we also have these things surrounding our content. - These air known as HTML tags. - So this 1st 1 the H one, - it stands for header one. - And that's what creates this big kind of header. - And the 2nd 1 the P tag stands for paragraph. - So this is just if you want, - like, - a normal text, - um, - use the P tag and this little carrot, - um this, - like, - less than sign. - This is how you open a tag and less than an a slash is how you close the tag. - So, - for example, - if I, - like, - deleted this and then, - um, - only closed the h one tag over here and hit, - save everything is, - uh is gonna be big. - Everything is gonna be a header, - but we're not gonna do that. - So I'm just gonna undo. - So let's customize this page. - Just hit save and should be how it was when we started. - And we're gonna change this header this H one tag to just say welcome and refresh. - You should see that. - And then, - uh, - I'm gonna just space this out over here. - We're gonna say instead of find me and app use Welcome that html were going to say this is - the landing page for Crumpler Baking blogged. - Uh, - we're building a bacon blogged, - made using ruby on rails. - Awesome. - We hit, - save. - Refresh it and we should see it. - Let's add another p tag. - So we're gonna open the key tag and will say that this page is just a place holder later on - will replace it with the posts in our block and close the p tag. - Listen, - it save, - and you should see that this second p tag created a new paragraph. - Um, - awesome. - Let's go to the about page now. - So if you go to pages slash about, - you should see a similar thing. - And by the way, - if you go toe pages slash thank you. - For example, - you'll see that we haven't created Ah, - we haven't created a route yet for pages. - F a. - Q. - So our app doesn't know about it. - So we're in pages about and we could see that it's very similar to, - ah to what we saw earlier. - And let's let's customize this is Well, - let's make the header say about and then let's in here gonna delete this and we're gonna - say this APP was built in tall sufferings. - Ruby on rails, - class on skill share. - And there we go. - So we have an about page we have a welcome page on Let's Last Thing. - Let's make this into a link. - And the way to do that in HTML is I'm just gonna make the window bigger. - Eso The way to do it in HTML is to use a tag called a. - So we're gonna surround this in a And when we refresh, - nothing happens yet. - What we need to do is we need to say where the link goes to, - So the way to do that, - it's it's kind of strange. - It's counterintuitive, - but just follow along. - We'll say a H r E f equals and then in quotes will put the Earl of the Link and you hit. - Refresh. - You should now see that this is a link to go to the skill share class page. - Awesome. - Another way to create a link instead of using the A tag, - which is just regular HTML, - is to use a function that we get from rails itself. - So instead of this, - let's actually do eat it. - And we're gonna use a function called, - um, - linked to, - and the way to use rails functions within your HTML. - It's kind of like the HTML tag where you have a carrot, - except instead of the carrot you do carrot percent and we're gonna say link to and then the - name of the class in quotes and then the girl skill share dot tall seffrin dot com. - And let's do that, - huh? - It doesn't show up. - That's because I forgot to put an equal sign here. - Um, - and I'll explain what the equal sign means. - It works. - So why didn't it work before? - When you use, - um, - carrot and percent, - it's telling us to run some rails code, - but it doesn't tell us to print out what that rails code does. - In order to actually printed out, - you need an equal sign awesome. - So the next thing that we're gonna do is we're gonna change. - Are you RL's? - I don't really want them to say to be, - ah, - pages about And pages welcome actually want the welcome screen to show up when we go here - and I want the about page to just be at slash about. - But that's not set up yet. - No route matches. - So let's see how that works. - The way that rails knows what to do when a user goes to a particular girl is the routes - file and the routes files located in config routes that are be so you can see that when we - ran our generator, - it added these two lines for the pages about Paige and for the pages Welcome page. - And then the rest of this here is just a ruby comments. - So anything that starts with a pound sign in Ruby is ah is just a comment. - And you can tell that this is a ruby file because the extension is dot R b, - which stands for Ruby. - So the people that wrote rails they left all these comments here so that you could have - kind of like a guide on how to use routes, - but it's not actually doing anything. - So we want the welcome page to be what we see when we go here. - And this is kind of like the top level of our app, - because it's not. - It's not like slash anything. - It's just ah, - local host 3000. - Uh, - and this is also known as the root. - So you can see here that they left a comment that says you can have the root of your site - routed with root. - And what you do is you tell it that the root is some controller, - and then some action. - So we're actually gonna delete this. - And when we when we delete that pages slash welcome doesn't work anymore. - Um, - and what we're gonna replace it with is this. - So I'm gonna actually leave these comments intact, - but I'm gonna copy this and put it at the bottom. - And when we don't have ah welcome controller and an index action, - we have a pages controller and a welcome action, - and we can see that in APP controllers and our generator created this page is controller - and created an action for each page that we have so far. - So there's an about action. - This is just ah saying its defining a ruby ah ruby method with death and then it's - finishing. - It would end and it's doing the same thing for the welcome action. - So back in our routes were saying that the root of our app is pages. - Welcome. - Let's do that and refresh and we see the welcome page. - Cool. - So how do we customize this now? - The about page. - So right now it says get pages about and that goes here. - But what we actually want is for the u R l to just be slash about. - Let's see if this is enough. - So we changed it. - We hit save and we're going to local host 3000 slash about and we get an error it Ah, - it doesn't know what controller to go to because previously this this left a hint for rails - that it's in the pages controller and the about action. - But since we removed pages, - we actually have to do something different. - We have to say, - get about So when the user goes to the about your l and then this kind of ah arrow, - it's also known as a hash rocket. - But It's just an equal sign and a greater than sign. - And we're going to say that when the user goes to the about Earl used the pages controller - and the about action and we're gonna hit save. - And now when we go to about we can ah, - we can see the page so pretty cool. - The last thing we're gonna do is we're gonna add some, - uh, - some navigation because right now, - you know, - we have these two pages about and welcome, - but the only way to get to them is by changing the URL. - So let's add, - let's add some links at the top. - Kind of like a like a like a menu that we're gonna see on every page. - So let's go to our code. - Now. - One approach would be Teoh. - Add a link on the about page and then add another link on the welcome page. - But we're really gonna want this navigation to be on every single page in our app on. - We don't want to repeat ourselves because we're gonna have a lot of pages, - and that would just be a waste of time. - So the way to do that is to go into views and then layouts and go into this application dot - html dot your b file. - This is kind of like the surrounding HTML that gets used on every single page in our app, - and I'm just gonna space it out a little bit. - So I'm gonna select all this and then indented you can do command and then bracket, - or you can just hit tab and then, - ah, - I'm also gonna and debt this. - That should be a little bit easier to read. - And you can see that it kind of looks strange, - because here there are two tabs and here there are for so go into sublime text in tab size - and change 4 to 2 and you can see that everything moved. - Um, - and the second thing you want to do is in debt. - Using space is there is There are two ways to in debt and code. - You can do it using spaces, - and you can see these tiny dots here that indicates that it's a space. - You could also do it using a special character called the tab character. - But, - um, - most ruby code uses spaces, - so we want to be consistent, - and we want to use spaces to. - So now we can get a little bit of a better idea of the structure. - This is the This is the head tag and it has our page title so we can see that the title is - crumbling, - like it says right here. - This is loading in the default rails, - CSS style feet and JavaScript. - But we're not really gonna do anything with him. - And this last thing is kind of Ah, - it's a security thing and don't worry about that too much. - But next we have this body tag and you can see that inside of it. - It's got this, - this ruby code, - right, - cause it's got the the percent equals and what it's doing is it's it's creating a body tag - and then inside of the body tag, - it's actually going and fetching the page that were looking at So in the about page. - It's replacing what we see here in yield with this stuff, - and if we go to our app, - we can actually look at the age to the HTML that's generated by going to inspect element, - and this shows us all the HTML on the page. - It's a really useful tool, - and you can kind of hover over each element, - and it highlights it. - So you can see that we have this body tag, - but inside of it, - we have our h one and R p that that are in this about view. - So what we're gonna do is we want, - uh, - we want I'm gonna close this now we want our navigation to be above all this stuff on every - single page. - So also on the welcome page. - So what we're gonna do is above the yield. - We're gonna put in some code and we're just for now, - we're going to say this will be the navigation doctor. - Save it and we can see that on the welcome page we have it. - And also on the about page, - we have it. - So now let's turn it into links. - We made a link earlier in the about page, - and, - uh, - we can we can see that it was the link to tag. - Let's just copy that into here into the application. - But it's not going to say Ruby on rails on skill share. - It's gonna say the first link is gonna veto are welcome page, - and it's gonna be two slash right and then copy this. - The 2nd 1 is gonna be to our about page, - and it's gonna be to slash about Let's hit, - save and refresh. - And now we have these links right on. - You can see that. - You know, - on the bottom, - you can see where it's gonna go. - This is the about Page. - This is the welcome page. - So that's actually it for this lesson. - In the next lesson, - we're just gonna save all our changes by creating a get commit, - so stay tuned. 5. Our First Git Commit: get is a version control system, and that's just a fancy way for saying you can track the history of your files containing your code. It's kind of similar to the way Wikipedia tracks the history of a particular page. So on Wikipedia, if you go to view history, you can actually see that when this document was edited, who edited it at what time? And you can actually compare different versions. We're gonna be using that for our code. If that's still not clear. Another example that's kind of similar is Microsoft Windows track changes feature. If you've ever seen this, what you can do is you can share a document with somebody else, and they can make an edit on what you wrote, and you can then see what they what they took out and what they put in. So we're gonna be using get to take snapshots or commits of our code so that as we progress through the course, we can see how our code changes. So if you ever need to go back to a particular chapter and you want to see what the code looked like, then you could do that using get okay cool. So to interact with git, we're gonna use the tool provided by service called Get Hub. So get hub. It's ah, it's a site that a lot of programmers use. It allows you to, uh, upload your code online and share it with other developers. So it's it's good if you're working on a project with a bunch of other people, but we're actually not gonna do that. What we are gonna do is we're gonna download this great tool that they built for interacting with get. So if you go to get hub dot com and you scroll down, you should see this download link and there's a version for Windows also. So let's go and download it and will install it when it finishes. So click on that. It unzips it show and find her on. And we have this get hub app Dragon into applications. Um, and then we'll do like we did before. We'll drag it into our doc so that we have it for the rest of the course. Cool. And then let's open it up. It's going to say that you got it from the Internet, so press open and what we're gonna do is we're gonna create a repository for our code. So go to file and we're not gonna choose Create new repository because we already have some code. That's only if you if you do this first, before you write any code. So we're actually gonna say add local repository and then, ah, find our project. So here it is crumbling. Double click it. Make sure that you see, uh, you know all these folders and then press ad. It's going to say that we don't have a repository here. Do we want to create one? Say yes. And now we see all the files in our project. This can look a little daunting, but we're gonna understand shortly what this means. So, uh, these are all the files, and these checks mean that we're gonna create a commit out of them. What that means is we're going to start tracking their changes. So let's just type in first commit and then press commit Awesome. If we go to the history tab now, we can see that so far we've only made one commit and what this commit did, was it, uh, it added 61 files. It basically added all the files in our project to get because before that we weren't tracking it. So ah, let's make a another another commit to make that a little bit more clear s open up, sublime text if it's not already open and go into your views layouts application dot html Daddy or be so we have the link in our in our menu here it says Welcome. But let's actually change it to say home and hit Save So it says home now. And if we look and get hub, we can see that we have one file that changed and it's it's the exact file that that we just modified a second ago. So let's create a commit out of this and then we'll see what happens. Will say Second, our second commit, changed. Welcome to home press commit. And now, if you look in history, uh, we have two commits. We have the 1st 1 where we all we did was we added all the files so we can track them and we have the 2nd 1 And what you can see here is that we changed. Welcome to home. So there's a minus here and it's red It means that this is what we, ah deleted. And the plus and green is what we added. So you can think of it as Ah, yeah, we only changed the word welcome to home. But the way get interprets it is that we removed the line that says linked to Welcome. And we added a new line that says linked to home. So So that should give you an understanding of how get works. This is gonna come super in handy as we move through the course because we're gonna be writing lots of code. And this will let us have a history of all the code we write, and we're gonna be making creating really small commits. So basically, any time we get the app toe a working state, we're gonna we're gonna create a commit, make a snapshot of it, and then that way we can refer back to it later in the next lesson, we're gonna make our app look a little bit better because this kind of looks, you know, super old school. So we're gonna use something called Twitter Bootstrap, and it's gonna make the apple look really, really nice. 6. Add Bootstrap: - Okay, - so we left off last time with this very basic page, - right? - We had a welcome screen. - We had an about screen. - Um, - and it looks pretty pretty standard, - right? - It looks It looks really old school. - So in this lesson, - we're going to use something called Bootstrap to make it look a little bit nicer. - So you could get bootstrap at get bootstrap dot com. - And so bootstrap is a It's a front end framework. - It was originally built by two guys at Twitter and then open sourced. - So that means anybody can access it and use it for free. - And I'll show you some examples of what you can do with it. - Basically, - it lets you make your app look really good. - Um, - on both computers and phones with, - like, - minimal effort. - So if you go into getting started and examples, - you can see a bunch of examples here of what you can do with bootstrap. - So let's click on this, - like, - narrow jumbotron, - for example. - So you get you get this typography right? - You get this, - these cool fonts, - um, - you get buttons, - you get headings. - You can put your content into columns. - You get like, - a navigation on like a header for your page. - Let's see what else you can get. - You know, - there's just like there's a lot of different styles. - More buttons, - drop down menus, - etcetera, - etcetera, - etcetera. - It's really awesome. - And I highly recommend using it not only for this project but going forward. - Uh, - it takes just a little bit of learning, - but it's actually it's really powerful, - and we're not gonna have to write any of our own CSS for the entire class. - We're just going to use bootstrap to do everything, - um, - sweet. - So let's go and install it. - You can. - You can download it if you go to getting started, - download. - But I actually figured out an easier way to install it, - and you don't even have to download any files. - Just if you scroll down here to bootstrap CD en. - What Cdn means is content delivery network, - and it's really just a fancy way of saying that bootstrap is gonna be hosting the files for - us. - So we don't even have to go in and, - you know, - installed files and they give us an option to install three files, - right? - The first is the bootstrap CSS file. - the next one is a theme which we're not going to use it kind of. - Ah, - the bootstrap CSS file makes it look plain and that the theme kind of gives it these like, - three D buttons, - But we're not going to use it. - And the last one is this bootstrap JavaScript, - which we're also not going to use. - So the only one we need is this top one. - So go ahead and copy it and then go into sublime text and let's open up our layout. - We were in their last time, - so it's an app. - Views layouts application dot html Daddy Urbi. - And, - um, - we're basically gonna be importing the bootstrap style sheet. - And where we do that is inside of this head tag, - you can see that we're already importing one style sheet already using some rails code to - do it. - But we actually, - uh, - we have nothing in that style sheet, - and that's okay. - It doesn't do anything for now. - We could always customize our app, - but by putting styles in here. - But in this course, - we're just going to use bootstrap. - So just below here, - we're gonna paste in the style feet. - We could change this to a style sheet link tag. - But there's really, - you know, - it's the same thing. - It's it's gonna style sheet link tag generates this type of code eso hit, - save, - and then go back to your app and refresh it and you can see that it's using bootstrap. - Already. - The type is a little different, - right? - And the links air kind of like this blue, - but it's it's, - you know, - it's a good start, - but it's nowhere near perfect. - There's a lot I want to do here until it looks good. - So the first thing is, - the content is all the way to the left here. - I wanted to kind of be, - um, - I wanted to be in the center, - and I wanted to have some kind of like padding on either side. - So let's take a look at how we do that with bootstrap. - Go into CSS and then overview and scroll down a little bit. - You'll see containers. - Basically, - we want all of our content in a container. - You can see how, - like on the boots Dr Website, - for example, - they're using a container. - Their content takes up this much space, - and there's a little bit of spacing on either side. - That's what we want to do. - And the way you do that is, - um you put in this DIV class equals container and all your all the rest of your content on - the page goes inside of this div on a did. - By the way, - I'm not sure if we've talked about dibs. - A div is an HTML element just for sections of a page. - It's a very generic kind of, - Ah, - it doesn't have any like special appearance, - but it's you use a lot for defining like sections of your page, - and this class equals container is an HTML attributes. - So this div has an attribute. - It has a class, - and the class name is container, - and Bootstrap says if you want toe, - create a container, - you use a dot container and dot container means class equals container. - Eso. - Let's go ahead and do that Well, - actually, - one more thing about attributes We've already seen one kind of attributes. - We saw the A H r E f right, - like when we create a link, - it's this a tag. - But it has this H R E f attributes, - and the value for that attribute is Google dot com. - So we're gonna do something similar. - We're gonna take all of our content, - which right now is just the navigation and then, - like the page specific stuff, - right? - So either about our welcome. - And we want all of this to be inside of this container so that our our layout, - you know, - kind of looks like this. - So all we're gonna do is we're going to say div class equals container, - and then we're gonna indemnities in and close the div down here and hit Save. - And now when we refresh boom, - it's it's the same thing. - And you can actually, - if you inspect element and then go over the container thing, - you can see these different colors, - right? - You can see that the content is only in the blue here, - and then this orange is and the green are kind of like spacing. - Uh, - cool. - So what are we gonna do next? - Next thing we're gonna do is let's work on this, - uh, - this navigation, - Um, - I think we can make it look a little bit nicer. - And luckily, - Bootstrap has something for that. - So go into components and then knaves. - So they talk a little bit about knaves, - and they have a little Ah, - a couple different examples. - They have this tab navigation. - So it's got this line and the tab that you're currently on has. - You know, - this little outline, - um and then they have pills, - which are Ah, - you know, - the active one. - The one that you're currently on is is blue on, - and then they have stacked pills, - like maybe for a drop down menu or something. - So we're gonna be using the pill navigation. - I like the way this one looks. - And let's figure out how this works. - Eso You see, - we have three tabs here. - It We have three pills. - We have home profile and messages and down here kind of inside of this HTML. - We have home profile and messages, - and each one of these is inside of a link. - Right? - This a tag and you can see that these air clickable links But that link is inside of an l. - I tag and l I stands for list item and our navigation. - You can kind of just think of it as a list. - And this 1st 1 the blue one has a special class called active and bootstrap. - When it sees the active class. - It makes it blue. - So then what's this up here? - This ul this is Ah, - this is the list itself. - So this is the UN ordered list. - That's what you l stands for. - And these allies are the list items inside of it. - And if we want our list, - our navigation list toe look like this, - then we have to give it the class of knaves and now of pills. - And then just so we can compare this tabs one is pretty much the same code except that the - U. - L is of class. - Knave, - knave, - tabs. - That's really the only difference. - So let's add this code. - The first thing we're gonna do is we're gonna create a UL, - and we're going to say class equals knave now pills and in debt that close rul And then - each one of these is now gonna be inside of an ally. - So, - uh, - what else? - We can see that bootstrap has this a a treff. - But we actually we actually don't need that right, - because that's exactly what link to does Link to creates a link which uses a tag. - So this is actually all we need Let's hit save And there we go, - right it's It's the pill navigation. - And just to compare, - we could change this to Knave Tabs right this tab navigation and refresh it. - And now it's tabs on Let's let's try that active thing. - Class equals active. - There we go. - It's active. - It's got this little outline, - but let's change it back to pills. - We're gonna be using the pills navigation, - and you can see that it's blue. - We're actually I don't think we're gonna be using active it all in the class. - So this is what I want you to write. - Cool. - Uh, - what's next? - I think Ah, - I think I want this knave toe actually be on the right side. - Um, - because we're we're gonna over here, - we're gonna have, - like, - the Crumb Blur. - Kind of it's gonna say, - crumbling from the name of our app. - So let's see how we move this stuff to the right. - We go back to Bootstrap, - um could go to CSS and then help her classes. - And then we have this thing pull right? - What it means is, - it says it floats an element to the right with a class. - So all you do is You give something in the class, - pull right, - and it moves to the right. - So we're gonna be giving are our entire list, - right? - The entire u L The poll, - right class, - and that should do it. - Boom! - Awesome. - Next thing we're gonna do is we're gonna add a ah site header that says crumble, - right, - cause this welcome. - And this about over here, - they're kind of like Petters that are specific to that section. - But we want something that's like a sticky kind of it always says crumble. - Er, - just like you know, - when you goto Facebook, - it always his Facebook on the top left or top, - right? - Wherever they put it these days. - So let's look at how you that go to components and then page header. - And you could see that we have this, - like, - really sweet looking header. - Um, - it's you can use this black text that's kind of big. - And then this great text that's a little smaller. - So if we read this says a simple shell for an H one to appropriately space out in segment - sections of the content on the page, - it can utilise the H ones default Small element which they're doing here for the subtext as - well as most other components with additional styles. - That means that you can any other styles in bootstrap you can also use within this page - header. - But all that you have to do is create a div that says page header and then create an H one - right opening, - closing put in here. - We're gonna put in crumble er for this and then in here, - we're gonna put in some subtext. - I have, - like, - a little subtitle I want to use. - So let's put it above the navigation will say div class equals Paige Dash header. - Close that Dave, - we have in each one we're going to say crumble. - Er, - let's just refresh Cool. - We can already see that. - And let's add the subtext will say home baked goodness. - Refresh that. - Awesome. - One more thing, - I'm actually gonna gonna add these two slashes because I think it looks cooler. - Sweet. - Um, - so we have our knave. - Let's turn this into a link so that when they click on Crumpler, - it always goes to the homepage. - Um, - so we remember how to do that right Will say link to Crumb Blur, - and then it goes to slash refresh. - Awesome. - So the header looks good, - but it looks like our navigation is kind of I don't think it's in the right place. - I think it personally should be like up here. - So let's figure out how we can do that. - We're using the pull right class, - so let's try just right now it's outside of our header, - right? - Here's where the header starts and here's where it ends. - So let's actually put it inside the header. - Let's see if that does the trick, - right? - So now we have this header tag and it on. - Lee closes down here, - hit, - Refresh. - It still doesn't work. - You could see that kind of moved. - So that's you know, - that's progress, - but it looks like it didn't work and I know why. - It's kind of confusing. - It's because this ah pull right class that we're using uses. - Ah, - away toe place Elements in CSS called floating and floating kind of uses a different - technique. - Teoh position things on the page. - I won't really get into why, - but Bootstrap has an example of how you can achieve what we're trying to dio. - So I think if you go back to getting started and then examples. - If you look at this Jumbotron example, - you have the header on the left and then this pill navigation on the right. - So let's actually look at how they did it so well, - right, - Click and we'll go to inspect Element. - Um and this is cool. - You could do it on any website because HTML and CSS are kind of just you can look at You - can always view the source of any website you're looking at and what they did here. - Waas. - You can see that they put the navigation before the header and that seems to have done the - trick. - So why don't we try that will take this h one and we'll put it after rul and it looks like - it works. - So we're only gonna do one more thing, - and that's ah, - we're gonna center this in the middle of the page. - Um and I want to show you one more thing, - actually. - So let's go to our welcome page and let's see what happens if this text was longer right. - If this sentence, - like, - was longer, - so let's just copy taste one of them a couple times. - Yeah, - right. - Whatever uh, - it save and you could see that it goes all the way to the end of our bootstrap container. - And I think that's a little too much, - right? - It's really hard to read a sentence that's like this wide. - So we're actually we're going to do two things. - We're gonna center this and we're gonna have the content be around this wide. - So let's see how we do that. - Gonna close this and go back. - Let's go to Let's go to CSS and then grid system. - So the grid system is It's how you, - uh, - place your content in kind of columns, - and it's really powerful. - But as you can see, - the documentation here is kind of scary. - At first glance, - um, - so let me just explain what I think is necessary. - First of all, - you have four different sizes. - You have extra small devices like phones, - and this means that the width of the screen is less than 768 pixels, - and then you have slightly smaller devices like tablets. - You have medium desktop devices, - and then you have large desktop devices, - and what that means is, - you can you can actually set different styling for each screen size, - but we're not gonna do all that. - What we are gonna be interested in is the way these columns work, - so you can see that it's actually really simple to do columns. - Here's the code for this first row where each piece of content is one column. - You basically you have a rapper DIV called Roe. - And then each column gets this CSS class. - So call medium one. - We're gonna be using the medium device prefix. - We're not gonna be using all of them, - and then you can, - you know. - So this one is 44 and four and you can see that all they're doing is they're saying, - Call me do before call medium four. - Call meeting before. - So let's do that. - And the entire grid is 12 columns. - I want our content to take up half of the grid, - so we're gonna make it six columns wide on. - I'm gonna delete Well, - actually, - I'll leave this for now, - but let's go back to our layout and we're actually gonna make every single piece of content - only six columns wide. - So that means our yield is gonna be within that six column div. - So we're gonna say, - Call medium six indented and then hit Save and you can see that it's six columns wide, - but it's we forgot the row. - See how we forgot the row And there's kind of like this extra space right here. - It's not lining up to the logo. - So if we put another dip and we say Dave class equals row, - we debt. - This was the diff notice how this is gonna move cool. - And now it all lines up. - Right? - You can see here you always when you're doing columns, - you always want them to be wrapped inside of ah Rho div. - Um, - right. - So now what we want to do is we want to center this and let's let's think about it. - We're gonna have to do some basic math, - right? - So this is six columns wide, - which means that we have another of six columns here. - So if we want it in the center, - we're gonna want, - like, - three columns of white space and then six columns of content and then another three columns - of more white space. - So there's a way to do that, - and it's called Offsets. - You can go to the menu here and offsetting columns. - Basically, - uh, - what you do is you add another class. - You see how this over here is three columns wide because of call medium three. - But it's also offset by three columns. - That means that to the left of it, - its three columns worth of white space. - So all you need to do to move it is, - say, - offset the column, - medium offset three. - And you know, - if you were doing an extra large screen, - you would say, - Call large offset three or, - you know, - for a phone you would say excess for extra small. - So all we have to do is we say that our content is six columns wide, - but it's also offset three right, - and we need to call Medium Offset three. - So when we refresh it, - Whoops. - That's not how we do it. - So when we refresh it, - there we go. - It's in the center and you can see that home and about are now both centered so awesome. - I'm really happy with the way our page looks like. - The last thing we're gonna do and we're gonna do this in every chapter now is we're gonna - create a commit so we can save our progress. - Eso go to get hub app and get up knows that we modified to files but this welcome file. - Actually, - I don't want all this stuff, - right. - We were just doing that to test out of test out the with. - So I'm actually going to right click here and I'm gonna say Discard changes. - Uh, - yes. - And now when I refresh the page, - they get how that automatically kind of like through those changes away, - because we told it that we're not interested in them. - So what we have left with is just this one file that we changed and we did a bunch of stuff - , - right? - We added this style sheet. - We removed these initial two lines and we kind of moved them into here. - So we added all this, - right? - We added our container and the page header, - the navigation We have our our header that says crumble er, - home baked goodness. - And then down here we have our content. - That's within a six column grid that's offset three columns to the right on. - That's everything. - So let's create a commit here, - and we'll say added bootstrap and hit commit sweet. - I'll see you in the next lesson. 7. Add Posts (video): - Okay, - So in the last lesson, - we installed Twitter bootstrap, - and we made the page look really nice. - But now let's start working on our actual blawg. - So we're going to write some code that's gonna let the user post something to the blawg on - . - Then they can see the posts, - they can edit them, - and finally they'll be able to delete the posts. - So let's talk about what our posts air Gonna actually look like they're just gonna have a - title and they're gonna have some content. - And what we're gonna do is we're gonna store them in a database. - So when a user submits a post, - it gets stored somewhere. - So when the next person comes and visits the site, - they can see that post, - and this will become a lot more clear in a second. - So open up your terminal and make sure your rail server is running. - But then open up a second terminal and make sure that you're in our crumble er directory. - So do a PWD just to check that you're still there and we're gonna use something called a - rails scaffold. - So for now, - let's just type rails generate scaffold. - It's not gonna do anything. - It's just gonna print out some explainer text and don't get overwhelmed. - It's a lot of text, - but what? - We're really just gonna look out? - Is this first line right here for the usage? - So when we generate a scaffold, - it's gonna create a lot of stuff for it's gonna add pages. - It's gonna add a controller. - It's gonna add something called the model. - And it's gonna also add something called a database migration, - which is gonna help us create a way to store our posts on. - That would be more clear as we progress through this. - So to the way to do this is rails generate scaffold and then the name of the type of object - you're trying to create. - So in this case, - we're doing blawg posts, - so we're gonna say rails generates scaffold post, - and this right here is a list of fields. - So I mentioned earlier Are posts are gonna have basically two attributes. - Each post is gonna have its own title, - and it's gonna have its own content like the actual contents off the block post. - So that's what this field means. - The next thing here, - the type is we have to tell the database. - What? - What type of thing were storing? - So is it Is it a number? - Is it a date? - Is it Ah, - String, - which is basically a bunch of words. - Or maybe it's a really long string. - So we're gonna say rails generate scaffold post because we're gonna create a post table, - and then it's gonna have two things. - It's gonna have a title, - and it's gonna have some content. - But don't press enter yet. - We said we have to also tell it the type, - so the title is gonna be of type string, - which I said I mentioned earlier. - String is just it's it's it's words on, - and that's what we've seen so far. - Anything that's wrapped in quotation marks is a string, - and the content is also gonna be. - It's also going to text, - but it's not gonna be a string because a string is only for a short text. - We're going to use a different type, - which is very similar. - It's called text, - and that's meant for basically longer, - longer text. - There's only one more thing we need to do before we press enter. - Um, - when you run the rails, - generate scaffold, - command it by default creates some style feats for you and we don't want those because - we're using bootstrap and those styles are gonna clash with our bootstraps styles. - So what we're gonna say is dash dash, - no dash style sheets and now we can hit, - Enter. - And, - as you can see, - it created a lot of files will go into understanding what these files mean in a second, - But let's go and refresh our app and see if anything changed. - So we're on local host 3000. - I'm gonna hit, - refresh, - and it looks like we get this error. - Eso our app is currently broken and what it's saying is there's a pending migration. - It says Migrations air pending run rate db migrate to resolve this issue. - This rails end of stuff you don't actually need to dio. - It's just if you're you're doing it, - let's say not on your computer on somebody. - Unlike the server, - you would set the rails environment, - something that's not development like production. - But, - um, - that's not important right now. - What we need to do is we need to run this command rake db migrate. - But before we do that, - let's understand what that means. - So if we look at the files that this command generated. - The 1st 1 over here is this. - Db slash migrate slash this long number, - which is basically today's date, - right? - It's 2013 8 26 23 and then this is the time and then it's called create Posts. - So let's open up this file in sublime text. - So we go to DB my great and there it is. - So if we just read it, - we should kind of get an understanding of what it's doing. - It's saying Create a table called posts, - and in that table add two fields. - One is a string, - and it's the title that we mentioned earlier, - and the other one is content, - which is text. - And if you look at what we typed in, - it's really just looking at this, - right? - So what? - This Ah database migration is It's a set of instructions for building how we're gonna store - our data in our database. - It's just a defining the structure. - It hasn't actually built the database table yet. - So what we need to do in orderto run this migration is the command rake db migrate. - And that's what we saw here in the error right Let's go ahead and do that. - Okay? - Awesome. - It looks like our migration ran. - So what that did was it actually created a database table now to store posts in. - So let's refresh our page, - and we don't get that error anymore. - But I don't see anything here about posts, - so let's go back to our output and see if there are any clues. - Um, - so it looks like the generator did create a bunch of views, - which is good, - and it also created and a controller. - Um, - but the most important thing here is that it created a route and we can see here these two - lines, - Um, - and if we open up our routes file in config routes that are B, - we see that we have this new line resource is posts. - And to understand what this does, - let's go into our terminal and type in the command rake routes. - So we see that there are lots of routes here, - and if we would have run rake routes earlier, - we would have only seen these two routes that we created right for the about page and - welcome. - These should be familiar. - The rest of these here are all related to posts and let's see what what this means. - So the 1st 1 here has the Earl Slash posts. - This stuff in parentheses is an optional format, - so you could say posts dot html or another format called Jason J S O. - N, - which we're not gonna be using. - But what's important here is that you can go to slash posts and something should happen. - So let's go to slash posts and cool. - It looks like we have a page, - Um, - and it says it's listing the posts and something about the title and content, - but we don't really see any content yet, - but we do have this link that says New Post. - So click that, - and it looks like it went to slash posts slash new cool. - Let's look in our routes and see if we can find that anywhere. - And it looks like we can right here slash posts slash two. - And by the way, - this column. - It's the U. - R I pattern, - which is another way of just saying the u R L pattern. - Um, - and this goes to the posts controller. - The new action. - Well, - look at the controller in the next section. - So for Now let's just see what our scaffold kind of did for us. - So we have a form here, - and it looks like this is how we, - uh we create a new posts to R Crumb blurb log. - So let's, - um, - let's let's write a post our first block post. - I am So it excited. - OMG um and hit create. - So it says The Post was successfully created and it has this title and this content. - If you look at the URL here, - the or Ellis slash posts slash one, - let's click back and we're back at slash posts. - Let's create a 2nd 1 and we'll say our second post. - Wow, - this is so fun. - It created it and this is slash posts slash to, - and if we hit back again, - we should now see both of these posts and ah, - what we saw before, - right? - If we click show the slash posts slash one, - that's this girl right here. - It's slash posts slash colon I D. - And any time you see a colon, - what it means is it's a parameter or a Paramus and ah, - in this case it's the idea of the post, - so rails automatically generated and I d write Our first post has the idea of one which you - could see it slash posts slash one, - and the second post has the i d of to slash post slash two. - If we go to something like slash posts 2000 we get an error. - It says Active record record not found because there's no post with the idea of 2000 cool. - What else can we do here? - So we saw what the back button did. - Um, - we have this edit button, - so go ahead and click that. - And now it looks like it's gonna let us edit the Post. - But let's look at the route for a second. - Um, - so here's that route, - right? - It's slash posts slash the i d slash edit, - and that goes to post controller. - Edit action. - Awesome. - Let's edit it. - Um, - let's make it all caps because that's fun and we'll hit update cool. - So we saw show we saw at it and we saw index and with some new. - But it looks like there are a couple other things here. - Right there is create, - but you'll notice that create it has the exact same your URL as our posts index except that - this verb is different. - We'll get to that in the next chapter. - You can also see that posts update and destroy. - They also are not get There's something else and that's actually it. - It looks like with very little work, - we can create block posts and we can edit them and we can also, - I guess I didn't try destroying them. - But if I click here and then say OK, - it destroys the block post. - So now if we go to slash posts slash to, - it's no longer there. - It deleted it from our database. - Eso That's all we're gonna do in this chapter in the next chapter, - we're gonna dig a little bit more into the code that the scaffolds built for us. - But let's create a commit before we do anything else, - and we're just going to say, - See it? - It added. - Lots and lots of files were just going to say, - um added posts scaffold, - and we'll press commit cool. - I'll see you in the next lesson 8. Understanding the Scaffold Code: - Hey, - so in the last lesson, - we use the rails generate scaffold command to create a scaffold for posts. - We could list all the posts. - We can create a new post, - we can edit it, - and finally we can delete it. - So in the last lesson, - we kind of just ran the command and saw what it did in our app. - But we really glossed over a lot of the details, - and I want you to understand how this really works. - So in this in this lesson, - we're gonna dig into those details. - Um and I want to just, - like, - preface it with saying that you might not understand everything in this lesson on the first - go, - and that's totally okay. - You can kind of think of it. - Ah, - like like driving a car, - right, - A lot of a strive cars. - And in order to drive a car, - we really only need to know a couple things right. - We need to know where the brakes are. - We need to know how toe, - you know, - push the gas. - We need to use the steering wheel, - and we need to change gears. - That's all we need to know. - In order to drive a car. - We don't need to know the internals of how the engine works and the suspension and how the - gears actually change. - We need to know a lot less. - And in programming, - especially with rails, - it kind of works the same way. - We have different layers of complexity. - Eso rails. - It's actually a very complicated framework. - There's thousands of lines of code or probably tens of thousands, - if not more written by thousands of developers. - And it does a lot, - and the longer you work with it, - the more layers of complexity you can uncover. - But there's no need. - Teoh try to understand all of it in the first go because, - you know it's probably not gonna happen. - So I you know, - you might want to watch this lesson more than once if you really want to get an - understanding. - And I'm also gonna post some reading material in case you want to kind of dive deeper. - So here we go. - In the first slides, - I talked a little bit about model view controller, - and this point we've already seen controllers and we've already seen views, - but we haven't looked at models yet, - and when we created this scaffold it actually created a post model for us, - and you can see that over here. - Its in app models posts dot r B. - So let's take a look at it. - We go toe app models, - and here we go post dot r b. - You can see that it doesn't really seem to do much. - It just defines this class post and ends it, - and there's really nothing here. - But this should give us a hint as toe how we can do all sorts of stuff with posts. - This is saying it inherits from active record base, - which means that it gets a lot of behavior for free just by inheriting this active record - base, - and the behavior it gets is for helping it work with the database. - So our model is You can think of our model as the actual object. - It's the actual post. - So let's start digging around. - Open up a terminal and run the command rails console. - And what this does is it's loading another terminal where we can ah type in ruby code, - and we have access to all the data in our app. - So we actually have access to this post right here. - Um, - so Let's see if we can actually get it. - The way to do that is you say, - post with a capital P that's referring to the post class, - and then you say post dot find one. - The parentheses, - air optional. - You can also say Post not find one like this, - and it's the same thing. - But let's look at what it's doing. - We see this line right here. - This is the line that, - um rails is using to fetch the post from the database. - And this kind of like really weird looking syntax. - A select posts dot star from posts Where Post That idea, - etcetera, - etcetera. - This is actually it's not Ruby. - It's a different language called SQL. - And what's nice about rails is, - since we're using the active, - record based class, - we don't have to know how. - Ask you all works. - We can just say post dot find and then it will talk to our database. - It'll kind of convert our code into SQL code and then get the post from the database. - And this right here is the actual post that it returned. - Um, - and you can tell that it returned something with this kind of equals arrow. - So any time you do something in here in the rails console. - When you see that you always see the return value and it always is an equals arrow. - So our post here it's got the idea of one. - It's got our title, - It's got the content, - and it also has the date it was created, - including the time as well as the date that it was last updated. - So let's see what else we can do with this. - We can say we can assign this post to a variable. - And what that means is it's kind of like math. - When you say X equals five every time you refer to X later on, - it has that value of five. - So we could say my post is equal to post dot find one. - And now we can refer to my post so we can say my post dot i d. - And it's got the idea of one we can say in my post dot content. - There's the content, - my post title, - my post that created at etcetera, - etcetera. - So that's pretty useful. - That's how we use the find method. - We basically say post dot find and then a number, - so if I said, - Post got fined 5000. - We get this long error, - it's still executes that SQL code, - but then it throws an error because there's no post with the i d of 5000. - Um, - so it's it's really smart and knows, - you know, - So you can't say something like other Post equals Post that find 5000 because that post - doesn't even exist. - So that's how the fine works. - Next we're going to do, - we're gonna use the post dot all method that comes with active record. - When we say post at all, - it lists all of the posts that we have in the database. - These brackets right here indicate that it's a list which is also known as an array. - But right now we only have one post. - So let's go create another post. - But instead of doing it through here, - let's do it through a terminal. - We're gonna say New Post equals post dot knew and this didn't save the post in the database - yet because we didn't see any sequel. - But it did give us a post object so we can say new post dot i d. - And it returns nil. - And that means nail is It's kind of like empty. - It has no value. - And the new posts title Sorry, - I mis typed it. - I said miss new posts when it should really be New Post it's also knew So what we want to - do is we want we want to set the title of this post So we can say new post dot title is - equal to the new post title And then we can say new post dot content is equal to the - content. - Now we're ready to store it into our database And what we do is we say new post dot save - and you can see that it now executed some x SQL You don't have to understand what this does - and it returns true now. - Why didn't return true? - It returned true because it successfully did it. - If, - ah if for some reason it couldn't put this post in the database, - then it would return False actually. - So now if we were refresh our app Sorry, - not here. - We go to post slash posts. - We see that we have two posts and we will see the exact same thing. - If we say post that all like we did before we have our little array, - our little list, - right? - But now it has two posts. - It has one here and another one here. - There's another thing you can dio to create a post, - and that's instead of using the post dot knew instead of using post dot Knew you can say - post stock create post that create kind of works like post dot knew and then post dot saved - . - So it kind of does both of them in one shot and you can see that again. - It, - uh it created this in the database, - and it shows up here, - except it doesn't have any content. - So we can say third post dot title is equal. - Teoh, - third post title and third post dot content is equal to third post content and third post - dot save awesome. - We refresh it, - it's got all the stuff. - Okay, - cool. - So that's all the model methods that I want us to know. - We have post op find right, - post up finding one. - We have post at all, - which shows us all the posts we have to post that new, - which creates a post but doesn't stored in the database and then postdoc create, - which actually stores it in the data based. - You can also say post dot last, - and there's also a destroy method which will actually delete it. - So I want to delete the last post that we created because it's ah, - it's empty again and doesn't have a title and content. - So if we do that, - that's cool. - I guess while we're in here, - I'll show you one more. - There's post dot count and we have four posts in the database. - So now that we've looked at how the Post model works, - I think we're ready to look at our controller so we can see that our generator created a - controller in APP. - Controller Posts controller Let's look at that. - AP controllers posts controller So the first thing you'll notice is that it's called posts - with a plural. - And that's consistent any time you use a generator command and it's actually required in - rails. - So if we were to create something new like a uh like a photo, - we would have a photos controller, - and that's different from the model, - which is singular, - right? - It's post that RV. - So it would be photo dot r b. - So that's just something Teoh to look at, - um, - so we can see that there's a lot more code in this controller than our pages controller, - right? - Our pages controller here just defines the about action, - and it defines the welcome action, - but it doesn't do anything else. - So let's go one by one and try to understand what's happening here. - We're gonna leave this for a little bit. - So first of all, - we have Index. - Um, - and the index action is it's doing something right, - its setting at posts to post dot all. - And we know what Post that all does, - right? - It fetches all the post. - This at is something that we didn't see earlier. - And this means that it's an instance variable. - And what that means for our purposes is that this is made accessible in the view. - So you'll see that if you go to app views, - posts Index, - it's doing something with this at posts. - Um, - variable. - If we just said posts without the at, - it would actually break. - So if I hit save and then go to it, - you can see that it thinks that at posts is nil. - And even if we changed this two posts, - it still wouldn't work, - right? - So we need that at, - um So that's posts Cool. - Um, - the show action here It looks at first glance that it's not doing anything. - It's just defining the action. - But like I said, - there's something here. - So let's look at this before action here it says before action set post Onley show at it. - Update. - Destroy. - And this refers to the show here at it here. - Update and destroy. - So what? - Set Post? - It's a method that's defined down here, - and what it's doing is it's setting at post to something. - Now we see that it's using post dot find, - right? - But it has this thing Haram's of i d. - And we've actually seen this I d before we saw when we ran rake routes. - So this parameter of colon i d. - It's accessible in our controller. - So when we visit, - um slash posts slash one, - for example, - than Paramus of I. - D is one. - So this is actually saying set at post to post up find one, - and when you visit a different one, - it's obviously that number, - right? - It would be five. - So you can you can think of this set post as getting run right here so you can think of it - happening at post equals post up Find Haram's of I. - D. - Except this is a very common action. - Any time we access a post with an i d in the URL, - we're gonna want to do this. - So that's why we're also gonna want to do it and edit update. - Alright, - it's got the I D and destroy, - So it kind of makes us repeat ourselves a little less so let's take a look at new. - So what it's doing here is it's setting the variable at post to post that new. - And if you remember from our console, - New Onley creates a post object but doesn't save it in the database. - Right? - And that's exactly what we need, - because this form, - it needs toe have a post object. - But it's a post object that hasn't been saved yet. - What we do is we fill in some details and it only gets saved when we press create and when - we press create, - it actually goes. - Guess what to the create action. - So let's take a look at create now. - But before we do that, - I actually want to simplify this code cause We don't need everything that's in here. - There's you can see that it's responding to two formats. - HTML and Jason and R. - Ap were only gonna be using HTML. - But just so you get an idea what Jason is, - if you look at show right, - you can you can go to slash posts slash one or slash post slash one dot Jason. - So let's go toe with Post eight Open here. - Um, - and we can see that it's not. - It's not showing us in HTML Page. - It's showing us this, - like, - other way of describing our post, - right? - This is known as Jason or JavaScript object notation, - but we're not gonna be using it in this course at all. - You would use it if you were writing an iPhone app that needed to interact with your rails - server or maybe, - ah, - maybe an app that was written entirely in JavaScript. - It would also want to get the object back in Jason, - but we're actually not going to use it so we can get rid of this comment and we're actually - going to simplify this code to just do what it does for HTML. - So we're going to say if the post saves, - then do whatever this is doing. - So copy this in else if it doesn't save, - do this stuff and you always need end after that. - So this looks a lot simpler. - And now let's take a look at it. - So it's calling post dot knew with the Paramus that we've gotten and it's assigning it toe - at post. - And then it's saying, - If the Post saves we saw earlier, - this would return true, - then you're gonna redirect to that post and you're gonna have a notice that says The Post - was successfully created. - And that's exactly what happened here. - If you remember, - we got here because we created a post using this form. - What it is did was it had this notice that said the Post was successfully created and it - actually redirected us to the Earl of that post. - Right? - So we're in post slash eight. - Um, - that whips. - It looks like I copied the wrong stuff over. - I copied the Jason over, - so I'm actually I'm gonna take this. - That's better. - And this is actually much easier, - because what it's saying is if the Post saves, - show us the post and show this notice. - But if it doesn't save. - Go back to the new action, - meaning show this form again. - So that's all it's doing and now at it is actually very similar to show, - and it uses this before action. - It sets the post, - and then if we go, - let's go to an actual post that we have, - right? - So it's loading in that post, - and then it fills in the actual details of the post in our form. - So when we submit the form, - it's gonna update the record. - And that is this guy. - And we're going to simplify this much the same way that we simplified create because we - don't need any of this Jason stuff. - So we're just going to say, - If the Post updated with the parameters that we sent, - then go back to that post and say that it was updated. - Otherwise, - go back to the edit form and I kind of lost over this post Haram's thing. - That's another method that's defined here, - and it's kind of just a rails security thing. - But at the end of the day, - it's, - ah, - it's returning our programs hash. - So this is, - uh so if we look at post dot knew with the post Haram's and go into our council. - So if we go into our console, - if you recall when we do post that new, - it just creates a post object but doesn't feel in the content and also doesn't save it to - the big database. - And we can see that because it doesn't have an idea. - But we can also say Host Dot knew and then have this hash that says the title is my title - and the content is my content, - and now you can see that the Post has a title and content. - So that's basically what this post Paramus thing is. - Um, - the last one here is destroyed. - Now we can see that it's also doing some Jason stuff. - So we're gonna delete this and we see that all it does is it destroys the post, - and it knows about it because it's using this set post method, - and then it redirects back to the posts. - Earl in the Post Earl, - if we look at our routes, - is it's our index. - I'm not sure I mentioned this before, - but this prefix is kind of a way of giving shortcuts to our girl, - so slash posts you can either refer to it as slash posts like that or you can say posts - underscore u R l And for New Post, - it would be new post Earl, - etcetera, - etcetera. - This would be about euro and root you r O s. - Oh, - that's all that means. - So it looks like we covered everything in this file. - Last thing I'm gonna do is just delete these Jason comments that I forgot to before. - And I'm also gonna delete stuff in our view here. - That's referring to Jason. - We don't need this and there's no reason to explain it right now. - So cool. - Hopefully should have a better idea of how our controller works. - And again, - if you didn't understand everything in this lesson, - it's totally okay, - because all you really need to know is how to use the scaffold generator, - and it'll just create all this stuff for you. - But since we did do some clean up, - let's go and create a commit out of this. - And if we look at our changes here, - basically it's showing all the stuff that we deleted and we added this stuff instead, - right? - We deleted this comment. - We added this. - We deleted this entire file. - That's why it has this red deleted label, - and we deleted this one as well so we can say simplified post controller by removing - references to Jason. - And in here, - I'll say we also deleted the Jason J. - Builder files. - Since we're not using using them cool, - make a commit and we see that we now have five commits. - I'm pretty happy about that, - and I'll see you in the next lesson. 9. Styling Our Posts: Hey, welcome back. So in this lesson, we're gonna go through our scaffold that we built, and we're gonna make it look a little nicer because right now it's it's just using some default styles and I want to have it used. Bootstrap. I want it to look really, really good. So let's start with the index page. Eso go to the view, its in app views, Um posts, index and we can see the first thing here is this header, right, this h one and I think that looks fine. But then the next thing here, this big HTML tag it's a table and it's basically listing. Ah, right. The first row is like a header, and then it's listing each post, and it's got five columns, but it doesn't really look good. So let's see if bootstrap has something for that. So go into bootstrap CSF tables and you could see here that they have a bunch of really, really cool looking tables, and it's very easy. Teoh make our table look like that. Basically, all we have to do is add the base class table to any table. So if we say table class equals sorry, table Now we refresh, then there we go. I think it looks pretty awesome. Now let's go back to our view for a second. So what What's all this stuff? It looks like it's separated into two sections. This first won t head stands for table header table header. That's, um, that's this first row right here. So it's got title content and it's got So that's every one of these th stands for table heading, Um, and then it's got three more columns that are blank. That's, you know there's no labels for show and it and destroy. And then down here we have the table body. So that's the rest of it. And it's creating. By the way, TR means tea table row. So what it's doing here is it's referencing at posts. So it's going through every post that we have. And for each post, it's creating a row and then showing some stuff which we'll get to in a second. But this at posts. We've already seen this before. Um, we've seen it in our controller, right? So if we're on the index view, it means that it was rendered by the, um Index action. So if we go into our posts controller and we see the index action right here. We can see that at posts is set here in the controller toe, all the posts. So that's why we can refer toa at post here. If we got rid of this line, for example, and we refreshed, we get an error. It says undefined method each for nail class. And that's because at posts is now nil. So let's add that back. So what it's doing here is it's looping through every post that we have. And for each post, it's adding this HTML and it's out putting the posts title content. Ah, show at it and destroy Link. Um so so this right here, this line that says Post, stop each do post. It's known as an iterated er, and since we have three posts, it's gonna loop through, it's gonna iterated through each post and during each cycle of the loop, in this case, there's gonna be three. That Post is gonna be referred to as this variable called Post. So that's how we get the title, the content of this show at it and destroy links. Let's just do one more thing on index. When When we have a blogged, our block content is probably gonna be a little bit longer than you know. Just like Oh, my God, this is awesome. So I've actually I've found a block post that I really like about baking. It's a recipe for Blondie's If you bake. I recommend making these. They're also delicious, but let's copy this recipe and edit our first block post to have that content. So I pasted it in and I had update and I go back to our index page and you could see this is, you know, it's really long, and this index page is really just for, like, managing all of our posts. So we probably don't need to see Ah, you know all this text right here. But luckily there's a rails helper method called truncate. And let's check it out, basically, with truncate. What you can do is you can take a string. Well, look at this one, and we can tell it how long we want that string to be. In this case, we wanted to be 17 characters, basically 17 letters long so we can see 123459 11 13 17. There are 14 17. Uh, so we're gonna use the trunk it method to make our table look a little nicer. So we'll find this row right here where it's printing out the context and will say, Truncate the content to this length and we'll refresh. We can see that it's now only 100 characters long, and I think that's a little nicer before we move on to the next one. I just want to add a We're gonna be going to the index page a lot, So I want to add it to our menu here. Eso If you remember, the menu is located since it's rendered on every single page in our app. Right. Um, it's rendered in our layout. So if you go to app views, layouts application, we did this a couple lessons ago. We have the menu right here. So all we're gonna do is we're gonna add another item. I'm gonna put it in between home and about, and we're gonna say link to and we'll call it and manage posts because that's what this thing is really doing. We're kind of like managing our posts, right? We're destroying them, etcetera. etcetera. So go to slash posts. We refresh. We see it, we can click it now and that's pretty cool. But over here, there's one thing that I don't like right now. Uh, we're for Are you RL's were typing in, uh, the exact oral and there's a nicer Mawr rails the way of doing that, and that's by using a named Earl. So if you remember, we have this command rake routes and Ray Krauts. We've looked at this right, the u R I pattern, and we've also looked at the controller action. We also looked at the verb, but this prefix right here is actually very useful. It's basically it's like a shorthand for the you are rebel because sometimes you're gonna have a really long um u R l like post slash d slash edit. So what we're gonna do is, for example, this 1st 1 goes to slash we could say slash, but we can also just say route underscore u r l and when we refresh that link still goes, you know, to the same place. So let's do that for everything. For the other ones. So manage posts goes to slash posts, and if we look at slash posts. If this 1st 1 over here right the index, this will just be posts underscore u R l So we can say instead of that posts, girl and about is about euro and we refreshed everything still works. So now let's move on to New Post. Let's open up the view So we go to app views, posts new. The first thing here, you can see it's the header, right? It's this and then it says here, render form. Now what this means is it's Actually it's rendering another view. It's rendering what's known as a partial view and we could see it right here, uh, as underscore form dot html dot air b. And why is it doing that? As opposed to just having this html in here? It's doing that because this form is actually used in two places and we don't want to repeat ourselves. It's also used if you remember in the edit action. So we have render form. Here s so if you go to a post and you hit at it, it's pretty much the exact same form. And the reason we don't want to repeat ourselves is let's say we added another field two posts, which were actually going to do in the next lesson. Then we wouldn't wanna have toe go and change every single form. We It would be a lot nicer and more convenient to just have to change it in one place on. That's a concept when you're programming that that is generally good to follow its called D R Y or dry and it stands for don't repeat yourself. So let's check out this form. This form four tag is basically it's creating, uh, in HTML form for us and this section right here. We're gonna skip for now. But basically, if there any errors than it's gonna display the errors on the page. But let's look at these three. So this is our actual form, right? We have the title content and a submit button, So the way to make it look nicer is in bootstrap CSS. We have forms, and it says here that you can use the dot form control tag and you can see what it's gonna look like over here. Right? So this is the HTML for for this form a element right here, and you can see that it has this class of form control. So let's what we're gonna do is just for the fields, right? So we don't have to do anything for the label. We're gonna say class, form control and we'll say it for this one, too, and refresh. And it looks pretty cool. But one thing I don't like here is the spacing. You see how, like the labels air kind of smushed against the input elements. There's something for that, too, in bootstrap and it says wrapped labels and controls in a form group for optimum spacing. And you can see that here, right? Each set of label and inputs is in a form group. So we're basically we're actually we don't need this field class. We could just say form group instead. The field class is just something that rails automatically gives us, but we're not using it. So we say form group were fresh. It's spaced a lot nicer. Now. Another thing we want to do is this button right. This is a pretty boring looking plain button, but bootstrap has its own buttons. If you go to buttons here and they look a lot nicer, so what? You do is you give them the BT end class and then a second class to say what kind of color you want. Right? So there's like primary success info warning, etcetera. I really like this primary one. So let's go and say Class, button, button primary and let's refresh. Oh, and it looks like we got an error. That's because this submit method actually expects another argument. Uh, it basically needs the label itself. On the button that whips. We have to say like that no comma. And now we refresh and we have it. So make sure it says F dot submit and then the label, right? Like if I said submit the thing, that's what the button would say. Um, so that's what we want And what's cool about this is, since we styled this form and it's used in both new and edit, and that means that our edit is ah is already you know, it's already set. We don't have to do any additional stuff, and that's what's cool about about D. R y about not repeating yourself. So let's create a new post new post new style whatever and submit it. And now we're on the posts. Show page, right. We're showing a post. We're showing the post of the idea of 13. So let's look at the template for that. The first thing we have here is this notice. Now you can see our notice. It doesn't really look any different, so it's kind of hard toe identify. But we're gonna make it look different. And it says the post was successfully created. So if you go back into bootstrap and this time you go into components and down here, there's alerts. Then you can see bootstrap has these really nice looking alerts that we can use. And ah, you should already be seeing a pattern here. You have to give them the class alert, which just gives it the structure and then a second class for the type of coloring you want . So this is success, this one's info, warning and danger. So we're gonna say, instead of P, we don't even need this. I d equals notice. It's another like rails gives you it by default because it thinks you might use it. We're just going to say P class equals alert and alert info, and we refresh, huh? So we see the, uh you know, we see the alert kind of styling for it, but we don't see the content anymore. And that's because this notice Onley gets shown once it actually gets shown by our controller. Right? So let's take a step back when we submit a new post. It goes to our controllers, create action once we submit it, and that's where it's setting this notice. But the notice on Lee gets shown the very first time that you load the page. So let's do another post here and submit it. Now we see the notice, but if we refresh, we don't see it anymore. So what we want to do is basically, if there's no notice, we don't want to show any of this blue stuff, right? So that's really easy to dio. We basically just say way say, if a notice is present, then show it otherwise don't show it right. So there we go and we could see that if I notice is president, it does show it so sweet. Let's style this a little bit, so we have to remember we're building a block and this is like the u. R L. For an individual blogged eso We probably don't want to say title colon and content Colon. We probably just want to show the title and show the content and, you know, make it look nice. So, um, what we're gonna do is we're gonna get out of this title and we can also get rid of this content right here, and that's already a little simpler, but we probably want the title to be bigger. So let's put it in an H two. Cool. That looks pretty good. And the content, um, it looks fine, right? But let's just test it with this long post that we wrote and we can see that something is off. There's basically it's ignoring any of the paragraphs that we have, right, because this is separated into paragraphs. But over here it's not. And the reason is that this data it's stored in our database, um, with these, like, separate this white space, but it doesn't get automatically converted into HTML. So if you want it to get formatted into HTML, you have to use this rails helper called simple format, and you can see it right here. And all you really say is simple format. My text and in case you're curious when, ah, when we have ah, new line in our database it gets stored as this slash and which means slash new line. But it html doesn't know how to read that. So this simple format method will actually convert that slash end Teoh slash two Sorry, Teoh to an html new line. So all I have to say in post that content is simple format post that content and now we refresh and it looks pretty good. Awesome. So we have our post management screen. We can create a post that it looks nice, we can edit a post and it looks nice and we can also view a post, and it looks nice. So what else? We have these ah, edit and back links, but I think we can actually get rid of them because this is like if we if somebody visits are blawg, we're not gonna want them to see that these links at all right? We have them. Ah, we still have them in the management screen. So it's totally okay. So we deleted those That's pretty cool. And there's one last thing I want to dio I want Teoh. I want to show in a lot of bloggers. You can see the date of when that post was was actually written. So what we're gonna do is we're gonna add another p here, and we're gonna use the posts created at a tribute. And if you remember, rails automatically, we created some database fields, right? We created title and content. But any time you create a new table, rails will automatically give you this created at attributes. And we can actually look at our database by going into DB and schema, and we can see that the posts table as content created at sorry title content and then it has date time, which is both the date and the time of when it was created and also this updated that so actually, any time we, uh, modify a record, this time stamp gets changed, and it's also ah, if you want Oh, you know, further understand it If you look in your migration. Those things were created because we had t dot time stamps here. If we didn't have this and then ran the migration, it wouldn't have created ah, those fields in the database. So we're going to say toasts dot created at and let's see what that looks like. Um, so we see something, but it's kind of not, you know, it's kind of hideous. Eso Let's see if there's a better way to make it look. So we're gonna go use the rails date formatting rails, helper. And we have this thing here called to formatted string. And what it does is it lets you take a string. Sorry it lets you take a date and lets you convert it to any one of these other formats. Right? And I really like this one. So the way you use it is you say dot to formatted string and then long, So I'm gonna copy that, and we're going to say post that created at dot convert that to a formatted string for a long date. And we have the date down here. We should probably say posted on August 27th at this time. But let's actually make caray. So if you go toe bootstrap, CSS and then typography and scroll down a little bit, you can see Where is it? Yeah, You can see this right here. This is what I want. I want I want it to be this light gray and all we have to do is use the text muted class. So let's do that and hit Refresh And you could see its this light grey. Let's also make it a little bit smaller so we can use the small tag. We've seen that before, and it's smaller. Awesome. So one last thing we're gonna do, right, the index page looks good. Show looks good, and it looks good and new looks good. Um, but when we go to home, I think we're ready to actually display are blogged, you know, in the way that most blog's look like, which is kind of like a long stream of posts. Right? Instead of that, we're gonna get rid of this welcome text, and instead, we're gonna list all of our posts and kind of like, show their content and each post is gonna be clickable. And when you click on the post, it will go to that post, right? It will go to the show action. So let's do that. Let's open up our view for this, right? The welcome view and let's get rid of all this. So it's empty, right? now. But let's have a game plan. We're basically going to say for every Post, show me that post right or we'll say, loop through every post and show me that post, Right? Um Well, believe this in a second. But the way we do that is it's very similar to what we have in the index page. Right? That's what this is doing is saying for every post, show me this stuff. So we're gonna actually do the same thing we're gonna say. Post that each and then, um, for now, we'll just print out the posts Title. Right. So we'll say H two post that title. But this breaks. And why does it break? Because at post is nil. We have toe go to our controller. I forgot to close that tag. We have to actually go to our controller. That's showing us this page and tell it to go fetch the posts and store them in this at posts variable. So the pages controller, we could see that right now the welcome action doesn't do anything. But we can just do exactly what the index action is doing, right? It's setting at posts to post at all So we're gonna do that. And now you can see that we have the title for each post. But we really want, um we want to show everything right? And we learned earlier about dry, right. Don't repeat yourself. We basically want each post to look like this, right? We want we want this title. We want the simple format for the content and we want this time stamp at the bottom, but in a smaller text and in great. So instead of, you know, writing all this from scratch, we're gonna we're gonna make use of a partial view. And we've already seen one for the form, right? Basically, you say render form and it it, like, copies all this HTML into here. So let's go into our show page and we'll take everything here. Will leave this alert in here, but we'll take the rest of it, and I'm gonna cut it. And I'm gonna create a new file here, um, and save it. And since it's a partial template, we always start with an underscore, and I'm gonna call it underscore post dot html dot grb. Right, cause this is a template showing one post, and I'm gonna hit, save And then in our welcome screen, right? Are welcome view. I'm gonna say render um the Post. But I can't just say render Post. I have to say render post slash posts And that's because it's in a different folder, right? We're in the welcome view and it's over here. And that partial is actually in the post folder. We want to keep it there because it's related. You know, Teoh, our posts kind of object. So let's do that. And then we refresh and we get this error. And the reason is, basically, we get this Neil error again. Right At post is nil. Um, So what we have to do is we have Teoh have to basically we have access to this post object , so we have to pass it in to the partial. So we have to say Post is equal to post on when we refresh, we still get it. That's because now, in our partial, we can't use this at we have to use regular post and we refresh it. It looks good. However, now our show page is broken. We don't see anything. That's because we have to render the partial here as well. So we have to say render post. And in this case, we're passing in the post again. But the post is named at coast here, right? That's because in the post controller show uses set post, which sets at post over here. So we do that, and there we go. The last eso, I guess now we can completely delete this, right? So, welcome, we're going to leave this and the last thing I want to do here is two things. First, I want some spacing in between these posts. Um, so after I render a particular post, I'm gonna add a couple lines and you do that with B R tag, which means line break, and we're gonna add four of them. So now we have a little bit of spacing. And finally, I want this title to be a link to that individual block, right? That's to that individual post because, you know, that's how most bloggers work. So we're gonna go back to our post partial and here's our header. Right. We're gonna now say link to the title the you know, the Texas still gonna be this title, but then linked to that post, and now it's totally clickable. So there you have it. We now styled our home page. We have a management page, we can see individual posts and the forms for editing and creating them look really good. So let's ah, create a commit out of this crumb blur. Um, I always like to just review the code that I wrote to see, You know, that I didn't leave anything in our any of that. And then we can say, styled the post scaffolding use puts craft and hit commit in the next lesson, we're gonna add another kind of post, which allows us to, uh, post images to the blog's. So we'll have. We'll have text, but we'll also have images. I'll see you then. 10. Add Image Posts: - they're so in the last lesson, - we used bootstrap to make our blawg look really good. - So we went into all the scaffolding code and kind of modified it so that it conforms Teoh - the bootstrap classes. - And in this lesson, - we're gonna add a way for users to post images. - So our blawg will have images as well as just text posts. - So here we go. - Let's Ah, - let's go to our post show page. - Right. - So slash posts slash Actually pick a different one. - I won't pick one. - I'll pick this one. - And let's go check it out in our code and goto app, - views posts and then underscore post dot html Daddy or be right, - This is what we're using in the show template as well as on our welcome screen where you - see all the posts eso were on Underscore Coast and we're gonna add another field to our - database, - which basically tells us what kind of post three user posted. - So the two kinds are gonna be image and then text, - which we already have so interview here. - What we're gonna say is, - if post that image that sorry, - if post that kind is equal to image. - Then for now, - we'll just stub it out. - Will save show the image health, - do what we're already doing, - right, - which is show the content and format it using simple format And we say end. - And if we refresh, - we actually get this error and highlights the line that we wrote here checking the kind and - it says undefined method kind. - Basically, - we don't have anything in the database saying what kind of post this Post is. - So we're gonna create that. - So open up your terminal and we're gonna create a new field in the database. - Now, - if you remember when we created the posts Scaffold, - we got a database migration that was basically a set of instructions to build this database - table. - So what we're gonna dio is we're gonna create another migration using the rails, - generate migration command, - and I'm gonna hit enter and we can see how we use it. - We basically say rails generate migration, - and then the name and then a list of fields. - And we saw this earlier with scaffold. - And for each field, - we give the type and don't worry about index for now. - So we're going to say rails generate migration and we're gonna add a field to the database - to the Post Stable called kind. - So we're gonna say add kind to posts and type it out like this with each word capitalized. - It's also known as camel cased because this will actually help generate some code for us. - So say rials generate migration, - add posts at kind to posts, - and then we're going to specify the field that we're adding. - So we're gonna add a field called Kind, - and it's gonna be of type string. - And now I'm gonna hit Enter. - We have a new migration file. - If we refresh here, - we now get an error saying that the migration is pending and our app is kind of frozen. - What we have to do is run that migration. - But before we do that, - let's go take a look at it. - So we have a new file here in DB Migrate. - It's called Ad Kind two posts. - So what it's doing is it's adding a column to the posts table. - The column is called kind, - and it's of type string that looks good to me. - So let's run. - It will say rake Devi migrate and the migration ran If we refresh here, - we don't get any more errors. - But now we want to be able to create an image, - right. - We still see the text because this isn't an image post, - right? - So our view it looked at it. - That is the kind image it's not. - So do this instead. - So let's actually find this post in our database. - And let's change it to an image post. - So open up your console by typing in rails council. - And if you remember, - you confined the post by saying post dot find 18. - Right? - That's our post, - and I'm actually gonna say P equals post, - not find 18. - So our post is now P right has an i. - D. - It has some content, - and if we look at the kind, - it's new. - So let's say p dot kind equals image, - and that's not enough, - right? - We have to say save and we save it. - It updates it in the database, - and we refresh. - Now it says, - show the image. - So let's actually do something with the image. - Let's go back into our view, - and I want to first just show you what we're gonna be doing. - There's an HTML tag called image and you give it a source, - and that source is basically the URL of where that image is located. - So I found a nice image here of some chocolate chip cookies and I'm gonna copy there, - Earl. - Now, - I just want to make sure that the Earl is an image file type, - and that's by just looking here it has toe have dot jp g or maybe ah, - PNG or gift for, - you know, - one of the image types. - Basically. - So if I did this and this is just an example, - right, - you can see that image source we'll put an image into our page, - which is pretty cool. - But we can also use a rails method. - We can say image tag and then pass in that you are all, - and this will do the exact same thing. - I forgot the equal sign the equal sign. - If you if you don't remember prints out the result, - actually, - if I get rid of it, - you can see that we don't see anything, - so we need the equal sign here. - So image tag does the same thing. - I can even inspect the element here and see that it outputs that html, - right? - Says image source and then our source. - So it's pretty cool. - So what we're gonna do here is, - if the Post is of kind image, - then we're gonna set its content field to that images. - You are all so we're gonna say image tag post dot content And then I'm gonna delete this - refresh. - We have a broken image. - So what we need to do in our terminal is set that content, - right? - So we're gonna say p dot content and we'll just use the same image, - this one, - right. - So we'll say p dot content equals this and save it now it'll refresh. - There it is. - But one thing that I'm not happy with is that this image is actually a little too wide, - and it's hard to see it here. - But if you look at it in our in our stream here, - you can see that our text ends over here. - But our image is kind of going over, - and what we can do is we can actually ah, - weaken, - tell it toe on Lee, - you know, - be this wide, - and the way we're gonna do that is using some very basic CSS. - Umm, - I generally have tried to have us use bootstrap for everything. - But bootstrap doesn't have anything that's going to do this. - So one way to add CSS and actually the recommended way is to go into assets and then style - sheets and then put in your CSS here. - But we're actually going to do something a little simpler just because it requires less - steps. - We're gonna put the CSS directly in here, - and we do that using the style attributes. - And then you open up a string and we say the width of the image should be 100%. - Now, - when I refresh, - you see how it shrunk a little bit and it lines up with this content, - so that's perfect. - The next thing we're gonna do is right now, - we don't have a way of creating an image post from our form, - right? - We only did it in the console, - so we're gonna add another field here to basically pick what kind of post you want and - we're gonna we're gonna use a drop down button, - a drop down menu. - Excuse me. - So let's go into this form of you, - which is in posts form, - and we're basically we're gonna add another form group and we're gonna add a label, - right? - Except this label is going to say kind and then here, - we're gonna have a drop down, - Right? - So let's just make sure that it looks OK, - and it does. - So we're gonna give a title, - and then we're gonna have a drop down and then put in the content. - So the way to create a drop down with HTML is using a select tag. - And I'm just gonna create an empty one here just so you can see it. - But if you notice a pattern, - there's a rails, - way to do it. - And the rails way is to say, - f dot select kind. - You know, - we refresh here, - we get an error. - Why? - Because it's expecting another argument. - We can't just say select the kind we have to say. - Select the kind from what? - And we're going to select it from either image or text. - Right? - So the way we do that is we give it a list and lists in Ruby. - As I mentioned earlier coming brackets. - It's also known as an array, - so we're going to say the kind can either be test or image and then we save it and refresh - , - and we have it. - But it doesn't look that good. - So we have to make it kind of a bootstrap drop down. - So if you go into ah CSS and then forms and then supported controls and you scroll down, - you can see that we have select here, - and this is what they look like in bootstrap. - So all we have to do is add this class equals form control. - So if we go back to our code and we say class equals form control, - it saved and refresh, - we'll see that it didn't do what we thought it was gonna dio. - And that's because select has another argument. - After the choices, - you give it some options and only then you give it the HTML options. - And when we're adding a class, - it's an HTML option. - So this is a little confusing, - but we basically have to tell it not to do anything here. - Uh, - on the way to do that is just say, - uh, - it's an empty hash, - right? - Like this right here and now when we refresh it, - it looks like a bootstrap form. - So let's try to use this form now. - and will create an image post and will say, - I have another image here for a cheesecake. - So it's copy the URL and we'll say cheese and then we'll do what? - You know what we said we would do, - right? - We're gonna put the content here and we're gonna submit it. - However, - when we look at the post, - it's not doing what we thought it was gonna do right. - It's not creating an image tag on and let's see why. - So whenever something unexpected happens, - the first thing you should do is always look at that record in your database. - So we have this post with the idea of 20. - Let's go back into our console and check it out. - So we'll say P equals posts dot Find 20 right? - It has an i. - D. - It has that title. - It even has that content. - But when we say kind, - it's actually nil, - and it might be surprising that it's nil because we picked it from this list, - right? - But if you remember, - when we submit the form, - it goes to our create action in the posts controller. - So let's look at what it's doing here. - It's, - um it's creating a new post with the post programs, - and this is so we expect the parameters to be title kind and content. - However, - I kind of lost over this post Paramus thing earlier. - I said that it was a rails security feature. - It's defined down here, - as basically, - it says, - don't ever trust parameters from the scary Internet Onley allow the white list through, - and the white list basically means it's a list of parameters that we allow. - And we can see here this permit, - that it's on Lee letting our form. - It's basically taking the title and the content and any other parameter like our kind. - For example, - it's ignoring, - so we're gonna add kind to this list. - The order doesn't matter, - but I just wanted to be consistent with the form. - And now, - if we use this form again, - well, - say cheese, - too. - We'll say it's an image and well paced in cheesecake. - U R l When we create it, - it works. - So let's just go and delete this other post that didn't work cheese right. - And there you have it. - We now have a blawg that supports both text and image posts. - Pretty sweet. - Last thing here is to just create a commit so going to get hub. - And let's just review our changes first, - right in our posts. - Controller, - we added kind to the allowed parameters, - right? - We're not trusting things from the scary Internet, - um, - in the form we added a section for the kind, - and it's got a select right to drop down that has these two options, - and it's using the bootstrap class in the post show, - right? - So when we view a post now way, - check for the kind and if it's an image, - then we create an image tag. - Otherwise, - we just print out the content formatted nicely, - and these last two are This is the actual change in our database. - So I forgot to mention this, - actually, - So it's good that we're reviewing when you run a migration. - It changes this file. - Db slash schema dot r b. - It does it as soon as you run the migration, - and this file is basically keeping track of what our database looks like so you can see - that we added this line to the file on. - Also, - the version is different, - and this version actually corresponds to the version in the migration, - right? - It's this long number, - and that's why they time stamp it on rails. - Um, - so that's everything we can say added support for images and had committed awesome to see - you in the next lesson. 11. Add Hearts: - all right. - Hey, - there. - In this lesson, - we're gonna add the last bit of functionality are blawg. - We're gonna add the ability to heart posts so you can see we now have this heart button - over here. - And when you click it, - it adds a heart to that post so you can see that we're just gonna be showing the number of - hearts that a certain post has. - So if I click it again, - it's gonna be 23 etcetera. - I know that on Tumblr. - Um, - you know, - you can see which user hearted a particular post or on Facebook. - You could do that too, - but we're gonna keep it really simple. - And we don't even have a concept of users, - right? - So anybody can go and click this button and you'll see how many hearts it has. - So here we go. - We're back to our current state of the APP, - right? - No hearts. - And in order to add this new bit of functionality, - we're gonna need Teoh. - We're gonna need Teoh record these hearts somehow. - So to do that, - we're gonna create a new database table. - It's gonna be the hearts table, - and we're gonna need Onley one field and the field that we need is we basically need the i - d of the Post, - right? - So if this is post number one and I create a heart for it, - that heart, - um, - will have one field the post i d. - And it will be set toe one. - So let's go ahead and get started. - But in this lesson were not can use a scaffold. - We're gonna do everything by hand. - And the reason is, - you know, - we already did a scaffold. - We know how they work. - And I think we know enough at this point to be ableto I kind of do a little bit mawr - without the help of a scaffold because if you remember, - it generated lots and lots of code for us. - So in this one, - we're gonna actually just create a database migration, - and then we're basically gonna follow the errors that are app has and that'll kind of guide - us to you know, - what we need to do next. - But we still do need to create a new database table for the hearts on. - For that, - we will need a migration. - So let's go to our terminal. - And if you remember, - when you say rails generate migration and then we're gonna name the migration somehow Let's - take a look at the migration that we already have. - Eso if we go to DP Migrate, - we have this first migration that we ran that created the posts and then another one that - added the kind field. - So we're gonna do something very similar to this one. - So we're actually gonna name the migration, - create hearts, - and then we're gonna have one field for the hearts, - and that's gonna be the post I d. - So we're gonna say post underscore i d. - But this time the type it's not gonna be a string and it's not gonna be text, - right, - Because the i ds our numbers So we're going to use a new kind of type called integer, - and now we can hit Enter. - I can see that we only created one file, - So let's go open it up. - And there it is, - right. - It's creating a table parts with one field, - and that looks good to me. - So let's run the migration. - We ran it. - And just to double check, - we can look in our Devi schema file and we can now see that we have another table here for - hearts, - and it's got the post I d cool. - So let's let's try to create a heart in our console first. - So open up your console will say rails council. - By the way, - you can also say rails see so right, - if we have a post weaken say p equals post I knew and that works. - So we should be able to say H equals heart dot knew to create a heart. - But when we do that, - we get this error and it says uninitiated ized constant heart. - Basically, - what it is saying is we don't have a heart model. - We do have a hearts table in the database, - but we still need a model in orderto interact with it with Ruby. - So what we're gonna do is we're gonna create a new model, - and we're just gonna create it from scratch. - So if we see our post model, - it's a very simple file. - So I'm gonna go and create a new file by right clicking here and saying new file and hit - save, - and we're gonna call it heart dot R b and heart dot R B is gonna be very similar to this - post model. - We can actually just copy it. - But instead of posts a heart and now we can get out of here by saying quit and then go back - in by saying rails Council, - Now you say h equals hard dot Knew we have something very cool. - So we could probably say h dot save and we have a heart, - right? - Uh, - h dot i d h dot post idea is nil. - But, - you know, - it doesn't really make sense to have a heart where there's no post idea, - right? - We're gonna want to make sure that every time we create a heart, - it has an i d of a post associated with it. - So in order to do that, - we're gonna go into our model and we're gonna add something that's known as a validation. - And let's look at the rails, - guides Teoh to read a little bit about validations. - Basically, - what a validation says is you can define when ah model of yours is valid or not. - So, - for example, - we want all the hearts to have a post i d. - So we can say that we can tell our app not toe Let us save a heart unless it has a post i d - . - And the way we do that is using this validates method and then specifying the field and - saying presence true. - So let's go ahead and do that. - Well, - say validates the Post I d presence. - True. - And now let's quit and restart the console rail Sea. - Now if I say h equals heart dot knew and h dot save it actually doesn't save right it says - false. - We can also see if it's valid just by saying, - h dot valid with a question mark and we can see that it's false. - But let's go find a post. - We have this one post one. - So if we say post I d equals one h dot valid is now true, - so we can save it. - But let's clear out our hearts for now. - So we'll say heart dot Destroy Oh, - and it deleted both of them. - If we say heart dot count now, - it's gonna be zero. - So now that we support creating hearts, - let's, - uh, - let's go into our view and have something that will tell us how many hearts of specific - Post has. - Right? - So go into app views. - Uh, - posts were gonna do it directly here. - We're basically on this row over here on the left side. - It's going to still say when it was posted, - but on the right over here, - it's gonna give us the number of hearts. - So, - like, - you know, - five hearts, - for example. - So if we go to posts view and then we go to show, - remember that it renders this partial called post, - so we'll go to post and then down here is where we have our posted on text. - So the first thing we'll do is I will make this text small also, - So it looks the same. - And let's just put a placeholder here for now. - Well, - saying nine hearts and you'll see that it's it just lines up directly with the posted on - which is not what we want. - So we're gonna use that bootstrap helper called Pull, - right. - We saw that earlier, - and there we go. - Awesome. - So now instead of this nine, - I'm actually gonna make this lower case, - But instead of this nine, - we're gonna want to put some ruby code, - right? - And what we're gonna wanna say is we have access to this post, - so we're gonna want to say post dot hearts dot count and this will give us the number of - posts, - the number of hearts. - Sorry that that Post has. - So if we refresh it, - we actually get an error. - And it says it highlights this line and it says Undefined method hearts for post. - And that's because our post model doesn't really know about hearts yet, - right? - It doesn't really know anything, - and it's got no code here. - So what we need to do is we need to tell it that since Hearts store the Post, - I d. - They're actually associate ID. - And let's look at what this means. - If you go to the rails guides, - there's a whole chapter on active record associations, - and basically it lets two models communicate with each other. - So if if you have some sort of structure right in our case, - a particular post can, - it can have a lot of hearts where you can have many hearts. - So there's actually an association here called has many, - and they have this diagram here, - which is a little confusing at first glance. - But basically in this example, - they have a customer that can have many orders. - And since that's the case. - Each order has a customer, - I d associated with it. - So it means that each border knows about the customer. - But also each customer needs to know about the order. - So what we need to do in our post model is we need to say, - has many hearts. - And now if we refresh, - that's all we need to do and we go down here. - It's got zero hearts. - So let's go create a heart just to see that it works, - right? - Will say age equals heart dot knew and then we'll say, - h dot post i D is equal to one right h dot save Refreshing. - And there we go. - That's pretty cool. - So if we look at our post, - we can now say p dot hearts and you can see that you get this little list back right here. - So let's say I hearted, - uh, - created another heart. - It's equals heart dot create with the post I d. - Of one. - Now if I say p dot hearts Oh, - I have to say p dot reload, - and that's just because we way we added something to the database after we already assigned - the post to pee. - So we have these two posts these two hearts now So we can say p that hearts right or p dot - hearts that. - But can we say, - h dot coast? - Right? - We want to be able to say that because we want to have a two way association later on, - we're gonna we're gonna do something with this h dot post. - So the way to do that is if we go into the hearts, - uh, - model. - We say that the heart belongs to the host. - And if you look here, - they explained, - belongs to where is it belongs to belongs to. - There we go. - So belongs to is we have that same customer order, - but belongs to Is that you can say border dot customer or in our case, - heart dot post and has many is so that you can go the other way, - right? - You can say post dot hearts. - So we do that and we should now be able to say h dot host, - Except we still get that error because we need Teoh. - Refresh our console. - Basically, - when we ran the console, - we didn't have this, - uh, - this code in yet, - so it doesn't know about it. - So let's quit our council say quit and then right again we can set the heart just the last - heart that we have. - And now we can say h dot post And when we do that, - it returns the post object. - So we can they even say something like h dot both stop title right or h dot post dot - content. - We can even go crazy and say, - h dot host dot parts and we can say something like that Heart stopped first dot post, - etcetera, - etcetera. - But I'm kind of going far with that. - We don't need to know all that. - So now we have hearts and posts are associated with each other, - but we don't have a way to create them through our app right through our interface. - So let's go ahead and do that. - We're gonna add a button that sits right here, - and when you click that button, - it's gonna create a heart for us. - So the first step, - let's just put that button in place, - kind of as a placeholder. - So let's go back to this this view and we have the title right here. - Let's put a button right next to it so we can say in here. - We want it on the right. - So we're gonna say div class equals full right? - And for now, - we'll just say button Or actually, - we can say that it's a heart and we have it. - But we can see that it doesn't line up properly. - And this is Ah, - this is very similar to the issue we had here in our knave. - It's because the way poll right works is kind of funky. - So the way to actually fix that is to put this stuff before. - So once we do that, - it lines up properly. - Cool. - So how do we actually create this heart object? - We are gonna need Teoh have a form that when we click the button, - it submits the form, - and then later on, - it's gonna it's gonna go to our controller. - That controller is gonna create our heart for us, - and then it's gonna redirect us somewhere else. - So let's get started by just creating a form. - And, - uh, - you might not remember how we created ah, - the form for posts here because it was using a scaffold. - So let's follow. - Let's follow along. - Uh, - the new right. - When posts new, - it renders a form which is this partial right here. - And, - uh, - I'm just gonna remove this for now. - This is this error stuff. - We actually, - you know what? - We actually don't need it at all. - We're not using it. - So it's a lot simpler to look at right now. - And basically, - um, - it creates a form html tag with this first line saying form for post, - and then it has a bunch of fields and then finally, - this is the submit button. - So this form for at post it's getting this at post from our controller, - right? - We're in the Post's new view, - which uses the posts controller and the new action, - and we can see that at Post is post up new. - We could just say this and it would be the exact same code. - So we're actually gonna do something very similar for our heart. - Eso Instead of this, - we're gonna say form for heart dot knew do f, - which means just create a form and then inside of it, - we're gonna have some stuff. - But before we do that, - let's refresh our page and see if that works and we get an error here. - It says undefined method, - hearts, - path and this should look sort of familiar hearts. - Path is kind of like the hearts you earl, - and when you use form for it needs a girl to submit the form to. - But we don't have a u R L yet because if you look at rape routes, - we don't have any routes that are specifically for hearts. - So let's go and create around. - So we'll go into our routes file, - which is in config routes. - Darby. - And we'll see that for posts. - We use this resource method. - Resource is method, - so let's go and say Resource is hearts and it has to be plural. - We run rate Krauts again and we can see that it created lots and lots of routes here. - This is probably too many because the only one we really care about is the the one route to - create a heart. - So the way we can kind of simplify that is by saying, - resource is hearts Onley for create so Onley create a bunch of routes for this one action - for the create action. - And now if we run rake routes, - we can see that we only have one route for hearts, - and that's really all we need. - You should never have stuff that your APP isn't using because then it just makes it a lot - harder to understand. - So we can see that the form is now going to submit to this hearts, - path or heart, - Earl. - And it's going to go to the hearts controller and create action. - So we refresh it and oh, - I guess we need a submit button. - So we're going to say f dot submit, - and it's gonna have a heart in it. - But we also need one more thing we need to pass along the i d of the Post. - But in this case, - it's not gonna be something that the user is gonna type into its gonna be predetermined, - right? - Because this this partial view gets rendered for a particular post that we have access to. - So what we're gonna do is we're gonna use what's known as a hidden field. - So if you go to rails, - hidden field Mm, - this one. - It basically creates an input, - but the type is called hidden, - so it's not shown to the user, - and we need to set the value right. - So in our case, - we're gonna have a hidden input for the Post I d. - And its value is gonna be that posts i d. - Right. - So in this case, - it will be one. - So the way we do that is we say f dot hit infield, - the post idea, - and then the value refresh. - We can now look at the HTML that was generated here. - So, - um, - you go toe right, - click it and go to inspect element, - and you can see that are formed for right. - This guy, - he created this form tag, - and it's submitting to slash hearts, - which is great, - because that's our route over here, - right? - It's slash hearts and the method is post, - which is great because this method is post, - and then it has You can ignore this. - This is just some stuff that rails ads for security. - But you can see that it has this input, - um called the heart post i d. - And the value is one. - Right? - So if we were to go to a different post, - um, - like, - let's say this one, - then the value is different, - right? - It's 18 because this is post 18. - So that's pretty cool. - So we have that. - And now what we want dio I'll go to the original one because we were already there is We - want Teoh. - We want to click this button, - right? - And we want that to create a heart. - So go ahead and click it. - And not surprising we get an error. - Uh, - when the form submits, - Uh, - first of all, - it matches this route, - but then it tries to go to the hearts controller and the create action. - But this error is saying there's no such thing as a heart controller. - So we have to go and create one, - and we're gonna create one, - just like we created the model by hand. - So go into app and then controllers and we have our post controller. - We have the pages controller, - um, - right. - Click the folder and say new file and hit save, - and we're gonna call it the hearts controller dot RB right? - It's a ruby file. - We do that and let's just take a look at what it really needs, - right? - So we can copy this first line, - and instead of post controller, - we're gonna say hearts controller and click end, - and it needs a create action, - right, - because that's where this route is going to. - So we're gonna say deaf create s So what does this action? - What do we want it to do? - I'm just gonna close some of these. - So So it's a little simpler. - Okay, - so we have these two controllers, - right? - If we look at our post controller, - the create action, - what it does, - is it? - First of all, - it sets up a new post by saying, - post that new with the Paramus that it's getting in our case, - the Paramus. - They're gonna be, - uh it's gonna be the post I d. - Right. - It's gonna be this. - So then tries to save it. - And if it saves, - it goes to the Post. - Otherwise, - it goes somewhere else. - So let's actually copy this in. - But we're going to say heart equals heart dot knew heart programs, - and we don't have this thing heart Haram's We have to actually define it. - So we're gonna copy it from here, - But we're also gonna make it private. - And And what this private means is that this method can only be called from within this - file, - but that's not that important. - So we're gonna change this to heart programs, - and we're gonna say Haram's dot require heart um, - heart and the field that were permitting is the post idea cool. - So it sets up a new heart using the heart grams. - And then if the heart saves, - we're gonna actually say go to that parts post. - Right? - So we can say heart dot post because we set that up earlier, - Uh, - in our model right in our heart, - we say belongs to post, - and that enables us to do this, - and we'll say, - success will say hearted that post Otherwise, - uh, - we're not gonna do this. - We're not gonna go to the new form because we don't have one. - So we're actually just going to say redirect to, - um, - the route you are? - L and give a notice saying had an issue creating that part. - Cool. - So let's go try it out. - We refresh here, - and then we click the button and heart of that post and let's try it again. - We have three. - Try it, - and we have four. - Awesome. - So I guess the last thing we need to do is just make this look a little nicer. - And we're gonna use bootstrap. - So we're gonna use a bootstrap button. - I guess we can use this danger one, - cause it's red Eso if we go back to the view we go Teoh underscore Coast. - We can say class is equal to button, - right? - And then button danger, - which is right here. - So if we refresh, - it looks pretty awesome. - But I think we can actually do better than this. - Uh, - this this way of doing a heart, - there's actually a special character for hearts. - Um, - so I'm gonna google our heart html character and we can see that we have this heart symbol - . - So I'm gonna copy it just straight from the Google results, - and I'm gonna get rid of this, - and I'm gonna put it in place. - So there you go. - Now we can heart any single post that we want, - and that's pretty sweet. - So there we go. - We can heart posts were, - you know, - pretty much our own version of Tumblr, - and I'm pretty happy with that. - So let's create our final commit and we'll just reviewing everything, - right? - So the post model now knows about its many hearts in the form here. - We got rid of all this error stuff because we weren't really using it anyway. - Um, - in the post view we added a section for the hearts which has a form that we submit to our - hearts controller and also at the bottom were showing the heart count. - We added a new route, - but in this time we used resource is on Lee for the create action. - So we only created one year oral instead of lots of them. - Um, - our database schema changed because we added another table. - So we have these, - you know, - this new table and a new scheme of virgin using the time stamp of this migration. - And we have other new files, - right? - We have the hearts controller, - which creates a new heart based on the parameters that it gets and the hearts model, - which makes sure that we have a post I d and also sets up a belongs to association. - This lets us do heart dot post, - which we're doing here in the controller. - Right? - We're saying redirect toe heart dot posts eso That's everything. - We can create a commit saying added parts and commit awesome. - In the next lesson, - we're gonna put our app online using a service called Hiroko. - I'll see you then 12. Put Your App Online: Okay, welcome back. So in this lesson, we're gonna put our app online using a service called Roku. Now, Roku is a very easy to use Web hosting platform that integrates seamlessly with rails and with git. So it's actually perfect for us. So go ahead and sign up for an account. Once you've done that, go ahead and get the Hiroko tool belt. It's a set of tools that make it easy to interact with Roku three or command line so you can put your app online or deploy it with just one command. So let's go download it and run the installer se continue. Continue installed for all users. Install your password. Hey, we go. It's installing. All done. Great. Close that. And let's now open up our terminal. So you want to go into your project directory? So seedy crumble er and just make sure that you're in the right place. And now what we want to do is we're gonna log in tow, Roku through our terminal. So say, Roku, log in. And now put in your credentials what's going to say here that it wants to generate a key, say yes or why? And make sure you don't get any errors here. Once you've done that, you can create an app on Roku by just saying Roku create when you should see something like this, it creates an app with a random name. Eso we got Salty Mountain 8499 And it shows us a your l here and then this thing, which is the get address. This is gonna be the Earl of our app. But if you go to it right now, it's gonna say that it's a new app. But it's not our app. So the next thing we need to do is we need to deploy or push our app onto her, Roku, but before But before we do that, we need to do a little bit of set up on our and so open up so boring text and open up this file called JEM File. So this is the file that lists all of the libraries that we're using its all the ruby libraries. So, the first library we're using his rails and then a bunch of other stuff here, Um, this 1st 1 here SQL light three. Uh, this is the library we used to interact with our database on our computer, and it's called Sequel Light three. And that's that's the type of database that we're using you can actually see. It's a very lightweight way to store things in a database. You can see it actually will store stuff in an actual file. This is the one we use development, not sequelae three. But anyway, um, Hiroko uses a different type of database. Then we do. It uses a database called Post GREss. But what's nice about rails is you can switch out databases without really having to change any of your code. All you have to do is tell your app. Teoh, use that particular library. So when we've been developing on our computer and then going to local host 3000 that's a commonly known as development mode or your development environment. So what we're gonna do is we're gonna say to continue to use Sequel light three while we're in our development environment, and the way to do that is to say, group development do, and then in dentists and then end, and then her Roku, which is our app on the Internet, is an environment called production, So we're gonna tell it that on production, use post GREss instead. And the way to do that is Jem P D. P. G. Is the ruby gem or the ruby library for interacting with post dress. This is really all the set up that we need to dio. But one last thing. We need to go into our terminal and actually install this library because all we did here was kind of This is the file that says what we should be installing, but but it didn't actually install it. It's kind of like the way we need to run our migrations after we create them. So go into your terminal and just say bundle install, and that's really it. We all we need to do now is make a commit out of this and then push all of our code, including this. Commit onto Hiroko. So go into get hub and you should see that we have to files here. That changed. The 1st 1 is the one that we changed, right? We added, uh, we remove this line and we added these lines and this second jump filed out lock file. It's ah, it's not a file that you modified directly, but when you run bundle, install it. Actually, it makes some changes in here. Basically, you can see that it added PG in two places, and if you open up the file, you can kind of follow along. What's going on? Uh, but if you don't, it's not a big deal. It's basically saying which libraries you're using and then anything that's indented means that this library is dependent on these other libraries. So this action Mailer Library, whatever it is, is using these two other libraries. So when you install Action Mailer, it needs to then go and install these. But that's not that important. We can create a commit and weaken, say add added post GREss uh four. Harajuku and hit commit awesome. So now what's left is just Teoh to push our code up to Harajuku, and the way you do that is using a get, uh, command. And there's no at the moment. There's no way to do it through the get hub app, so we're just gonna do it through our terminal. But it's a really simple command. You just say get push, which means it's gonna push our code onto Hiroko servers. Roku and then master and hit enter. And what master means is it means the branch that you're using the git branch that you're using. And unless you use other branches, the only branch or using our get is Roku. There's a lot of advanced stuff you can do with git, but we're not gonna be doing any of it in this course. So you should see that, um, Roku is receiving our push Red. It's detected or rails at, um and we're kind of just gonna have to wait a couple of minutes, especially for this first install. So just hang on cool. And it looks like it finished. Uh, just scroll up and make sure that you don't see any long errors. You should really only see this output. And now our app is online, and we can actually go to it so you can copy this URL, or you can also just say Roku open. And that'll apple actually open it in your Web browser. And it looks like we got an error, and it's it's not easy toe, understand? Just from this message, why we got the error. But I know why. It's because when you push your coat up to Harajuku. It doesn't run your migrations for you. You have to go tell it to run them. So if you remember, we have these three migrations. So we have to now basically build our database on Roku. And the way to do that is to say, Roku run and then the command that we do locally, right? So rake db migrate. So if we were to run a migration locally, we would just say Rick, Debbie Migrate. But when we say Harajuku run rate db migrate, it goes and does it on Roku. Cool. And you can see now that it ran the three commands on her Agu. Let's say we ran that command again. It's not gonna run any of those migrations because they already ran. Awesome. So now if we refresh our app there we have it. But as you can see, there's something looks wrong. There's no posts anywhere, right? It looks like we're starting from scratch. And that's because when you deploy to a new environment like we did, right, we deployed to the Roku production environment. It the database doesn't have anything in it to start. So what we're gonna do next is we're gonna write some code that will populate our app with some data. This is also known as ceding your database. So if you go into sublime text and you go into the DB folder, you have this seeds file. Now, what this file, uh, is is it's basically a file where you can put your default data and then you can run this command rake db seed. And it will put all this data in your database. And this is an RB file. So we're just putting in normal Ruby. Right? So I went and cleaned up our content locally, so we now have four posts. We have this blondie recipe. We have this image of chocolate chip Goodness, we have openly, uh, which is my favorite bakery in ah, in New York City. And finally, we have this cheesecake recipe, so we're gonna copy all these into our database. So let's start with the cheesecake recipe. What we're gonna say here is we're gonna say host one equals coast dot knew, and we'll say post one doc title is equal toe epic cheesecake. Right. Post one. Sorry, post one dot kind is an image. And then coast one dot content is equal to this content. Go. We're going to save it. And now we're gonna create some parts for it. So you can actually just say post one dot heart stopped, create. And if we want to do it twice, we can either copy paste it or we can say something like two dot times dio do this. So this is gonna it's gonna looped through this twice, and each time it's gonna create the heart. So we have our cheesecake most cool, and I'll label it cheesecake next where you can go into Heavenly. So we'll just to show that there are lots of different ways you can create objects. And Ruby, I'm gonna do this one a little different. So we're gonna say openly, and this time I'm going to say post two equals post dot knew, but I'm already gonna give it the title. So I'm gonna say, title lovingly and I'm also gonna give it the kind which is text. And then I'll set the content here just cause it's a little bit longer and I'll hit, save, And then, well, I really like this bakery. It's my favorite bakery in Brooklyn. so if they say five times But instead of do we can actually say this post to duck hearts don't create and it will do the exact same thing. Awesome. Let's go into chocolate chip Goodness, I'll show you 1/3 way. So in in these two, we used the new, uh, method. And then we hit save. But we can actually just create it in one go using create, right, So we can say post Doc create and then we can say title his struggle chip. Goodness, we can also indented like this Sometimes it's a little easier to read if we have long. If we have long text so kind image and then content we still need to add some hearts so we can say post three Sorry, we can say eight dot times Khowst three That hard stuff create Cool. Last one is our blondie recipe. So we go back here it is, but this one is gonna be a little bit trickier because it has lots and lots of text, including these new lines on these double quotes, which the double quotes are gonna interfere with the way you add Create a string and ruby right cause it's also double quotes. We could try to use single quotes, but I'm gonna guess Yeah, it has single quotes in here is well so that there's 1/3 way to create strings and Ruby and that's using something called a here, Doc, and I'll explain. But first, let's set it up right So we'll say post four is equal to post dot knew and we'll say title is this kind is text and now post four dot content to give it a really long string. What you do is you give it these two less than signs Thies to kind of arrows. And then, um you just name it. Name this string. So we'll say content in capital letters, it doesn't really matter what the name is. And then at the bottom, we're gonna say content as well, and in between, it is gonna be all of our text, right? And you can see that sublime text knows that it's a string still because it's ah, it's still yellow right in all these strings or yellow. So now we can take in all this, copy it and paste it in, and we still have to save this post for right cause we use the new method. So we go down to the bottom, say, post for not save, and then we can add some hearts. So we'll add, uh, six hearts. Those four dot hearts stuck, create it saved. And let's create a commit. So we'll say. Added seeds file and we'll say commit. And now we're gonna need to push our stuff back onto Roku. Right. So what we need to do is use the same command we used earlier, right? Get pushed her. Roku. Master, Every time you create a commit locally, you then have to push it up to Roku. Cool. Hiroki received our commit. If we refresh the page, it still doesn't have our data. So what we need to do is we need to run that rake db Seed Command on Roku. So it's a Hiroko run. And then the name of that commands a rake Devi seed. Cool. I ran it. And if we refresh the page, then we have all our stuff. Pretty cool. Awesome. So that's all for this lesson.