Ruby On Rails Stock Market App | John Elder | Skillshare

Ruby On Rails Stock Market App

John Elder, Learn To Code!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
55 Lessons (5h 47m)
    • 1. Introduction

      0:40
    • 2. Ruby on Rails Installation Overview

      1:48
    • 3. Install Node.js

      5:00
    • 4. Install Sublime and Git Bash

      4:52
    • 5. SSH Key Generation

      4:13
    • 6. Heroku Toolbelt Installation

      4:04
    • 7. Install Ruby on Rails

      4:07
    • 8. Create Test Project and Error Handle

      11:25
    • 9. Rails Project Overview

      7:54
    • 10. Rails Server

      3:26
    • 11. Create First Webpage Generator

      5:54
    • 12. Root Route

      2:51
    • 13. Git Version Control

      6:57
    • 14. Github

      8:28
    • 15. Create About Page Manually

      3:55
    • 16. Understanding Application html erb

      4:27
    • 17. Ruby Links

      4:52
    • 18. Partials

      4:15
    • 19. Bootstrap Overview

      2:56
    • 20. Install Bootstrap

      10:01
    • 21. Bootstrap Navbar

      7:39
    • 22. Mobile Ready Design

      3:41
    • 23. Stock Quote Gem

      11:32
    • 24. API Key Walkthru

      9:46
    • 25. Stock Quote Walkthru

      4:26
    • 26. Stock Forms

      5:35
    • 27. Stock Form Controller

      6:45
    • 28. Nothing Error Handling

      4:33
    • 29. Junk Error handling

      6:39
    • 30. Install Devise

      9:23
    • 31. Devise Database

      6:34
    • 32. Flash Messages

      8:14
    • 33. Devise Links

      3:54
    • 34. Bootstrap Forms

      8:52
    • 35. Conditional Navbar

      10:19
    • 36. Stocks Database

      9:38
    • 37. Stocks Views

      4:35
    • 38. Fix Formatting and Rails Associations

      8:38
    • 39. Stocks Navbar Links and CRUD

      7:33
    • 40. Authenticate Users

      4:54
    • 41. Controller Correct User

      10:27
    • 42. Correct User New Form

      5:03
    • 43. Final Association Stocks Index Page Loop

      7:08
    • 44. Stock Quote Gem Overview

      3:59
    • 45. Connect Stocks Table To Quote Gem

      8:46
    • 46. Precision and Delimiter price fix

      2:35
    • 47. Stock Index Error Handling

      2:15
    • 48. Form Validation

      4:07
    • 49. Bootstrap Table Stock Index Page

      11:52
    • 50. More Error Handling

      8:48
    • 51. Stocks Show Page

      12:10
    • 52. Rails stock 44 Heroku Intro

      3:25
    • 53. Rails stock 45 Heroku Push

      12:19
    • 54. Rails stock 46 Heroku DB Migrate

      3:09
    • 55. Rails stock 47 Heroku Domain

      5:16

About This Class

30002d34

Ruby on Rails can seem overwhelming at first, but it doesn’t have to be! In this course I’ll walk you through it step by step and you’ll be building your first web app in MINUTES. You’ll be amazed how quick and easy it is to create very professional looking websites, even if you have no programming or web design experience at all.

Watch over my shoulder as I build a cool Stock Market app step by step right in front of you. You’ll follow along and build your own copy. By the time we’re finished, you’ll have a solid understanding of Ruby on Rails and how to use it to build awesome web apps.

The course contains 42 videos – and is just over 3 hours long. Watch the videos at your own pace, and post questions along the way if you get stuck. You don’t need any special knowledge or software to take this course, though any experience with HTML or CSS is a plus. You don’t even need to know the Ruby programming language. I’ll walk you through EVERYTHING.

Ruby on Rails is a great web development tool and learning it has never been this easy.

What We'll Build...

We'll build a cool Stock Market app that let's you look up stock quotes and financial information and save it to a database.

Users can create an account and sign up to your website, log in, add stocks, check stock prices and all kinds of other cool financial information.  

We'll style the website using the popular Bootstrap CSS framework (I'll show you how to use it!)

Sign up today and I'll see you on the inside!

Transcripts

1. Introduction: All right. Welcome to the course. My name is John Elder from konami dot com and I'll be your instructor today and discourse me to teach you how to create this really cool stock market portfolio app using ruby on rails So we'll be able to sign up to our website, edit our profile. You see there, create a stock market portfolio, add different stocks and then when we click on the stock will get some information. Little logo. All this stuff is gonna be generated for us automatically and kept track of in the database , and it should be a lot of fun. So I will start out by installing Ruby on rails. If you already know how to install Ruby on rails, you can kind of skip that section, otherwise follow along and install rails yourself and then we'll get started. 2. Ruby on Rails Installation Overview: Okay, So before we get started, I want to spend just a minute talking about some of the things that we're gonna need. So in order to install Ruby on rails on a Windows computer, we have to download all kinds of different things. First off, we have to download node note is the JavaScript Web framework. And that's kind of weird that we need that in order to install and run Ruby on rails. But for some reason, we do so we'll do that in the next video. We also need a text editor, something to write our code on. We're gonna be using the sublime text editor if you have some other text editor that you like using absolutely feel free to use that you can use anything you want, really? Doesn't matter. But I like sublime is totally free. So we're gonna download that. We also need a terminal, something to write our commands on. And we're gonna be using something called Git Bash. It's also free. And if you're on a macro Lennix you can use the terminal that comes with Mac or Lennox. You just go to the top of your screen. The little search thing on your operating system. Type in terminal and it'll work fine. Windows users. We have a couple of terminal command prompt time things. We have something called Power Show and the command prompt which come with windows. But they don't really work that well. They don't allow us to do version control that well, and there's some other little things about them that aren't great. So we're used to get bashed terminal. It's very similar to what you're gonna use on a macro. Lennix. So it's all sort of nice and, uh, easy for everyone to follow along If you're on a different operating system. We also need something called the heroic Ooh, tool. But we're going to be pushing our code up to Roku for third party Web hosting, and we need, ah, some software to do that behind the scenes. It's also free, and I think that might be it. Of course, we also have to download and install Ruby on rails will get to that in a bit too. So a lot of things we need to do, but they're all free. They're all really easy to install, and we're gonna spend the next few videos sort of downloading and installing those. So that'll be coming up in the next video 3. Install Node.js: Okay, so first things first we need to install No Js. Now, this is kind of weird for me. I'm not a big node person. I use it, I know how to use it, but sort of having to install it in order to install Ruby on rails doesn't quite sit right with me for some reason. Just got a weird but not a big deal. Chances are you already have note on your computer because a lot of programs require node, and it'll sort of download in the background when you install something else, so there's a pretty a chance you have it. And if you do, we're gonna want toe uninstall it first. And the reason why is because we want the latest, greatest version of node. And sometimes especially if node got installed sort of behind the scenes with something else. It might have been a very old version of nodes, so that might not work with the newest version of Ruby on rails. So we just want to kind of clear the slate and make sure we get rid of it before we get started. So I'm gonna come to my windows, commit our control panel and I just found this on the Windows Start menu and come down here to uninstall it program. And then I'm just gonna click anywhere and then type the n key on my keyboard and you see here no Js I do in fact have it down installed already. So I'm just going to right click and click uninstall And are you sure? Yes. Blah blah. Get this little thing preparing to remove. Do that. And I'm just gonna go ahead and pause the video very quickly here, while this sort of dozens thing there's nothing for us to do. It will remove it for us and then we'll get a little message when it finishes. So when I posit, video will pick it up right when this finishes. Okay, so that little screen just disappeared. That means that it was removed successfully. We didn't get any other sort of confirmation, but that's all we need. So now we just head over to our Web browser and in just type in node and just going to search for noted Google. The first thing that pops up, no Js dot org's what we want and you'll notice when we come here it comes here straight to the download page, right? There's not even anything to read. Just boom. Here's your download. And there's two different versions. The 10.15 point three LTs, which stands for long term support, I believe, and then 12.1 point zero current. And this has the latest features. Now, if these numbers are different by the time you watch this video it they probably will be these air always, you know, updating And, you know, putting out newer versions. No big deal. Just download the most recent ones. Whatever's list of there is gonna be. Okay, so which one of these do we want? We want this. LTs one. Now you're going to see this 12.1 and you're gonna be like, That's a higher number. I want that one. But you probably shouldn't. This is the one that's sort of like the most current stable version, and that's what we want. We don't want the one with the latest greatest test features or whatever we want. The one that we know is gonna work. And so that's this one right here. So go ahead and click this and we can save this anywhere we want. I'm just gonna save it to my desktop click save, and it downloads really quickly. It's not very big file. So to install this, we just come down here and click it or you can navigate to your desktop or wherever you save. Didn't double click it. They're just gonna click this and we have this thing. Yes, we want to run it and we see this now. If you didn't uninstall it first and you did have note on your computer, you're going to see a different screen. You're going to see something that asks whether you want to update or remove or fix or do something like that. So you're gonna want to uninstall the old one first. So just follow those prompts. But for everybody else who's followed along so far, you'll see this screen like next to get the license. Next, you can install us anywhere. I'm just going to take the default and don't change anything here. Click next and then install, and this will go ahead and install. It will take a couple of minutes, so I'll go ahead and pause this in just a second. But one thing I will mention is when this finishes installing, it doesn't tell you to restart your computer. You know, when you install things, a lot of times it will say, you know, installation complete. Please restart your computer. No, does not do that. But I'm telling you right now, you definitely want to restart your computer. It's just note is just one of those things. You just want to give your computer a quick restart. It won't tell you to do it like I said, but just go ahead and do it anyway. So we're almost done with this? I think so. I will maybe pause Or maybe just talk for a minute until this creeps along. Yeah, Yeah, yeah. All right, here we go. Come on. Okay, so no jazz has been successfully installed. We're good to go. Like I said, there's no mention of restarting your computer, But listen to me. You're not gonna want to. Nobody likes restoring their computer, but do it. It's important. If you don't. Chances are a lot higher. We're gonna have an error later on. When we install ruby on rails and rails, it's hard enough to install as it is. We don't want to add any other option optional sort of problems into the mix. So restart your computer, click finish first, and then that will be good. So in the next video will install our text editor and our get bashed terminal. 4. Install Sublime and Git Bash: Okay, so we've got note installed. We're good there. Next. I want to talk about installing our text editor. And this the text editor. We're gonna be using its called sublime text. It's just a basic coding text editor. Like I said earlier, if you have some editor that you like to use, um, visual studio code or, uh, head plus plus or anything at all, if you're comfortable using that, feel free to use that. Absolutely. Use whatever you want. It really doesn't matter what text editor you use, but sublime text is an industry standard most people use. It seems like one of most popular one is totally free. If if you want, you can throw those guys some money every once in a little box will pop up asking for a donation. You can or you don't have to do that. So keep that in mind. So I'm gonna head over to Google again. Have been sublime text. First thing that pops up is the sublime tex dot com website and this is it. So to download this, you just click this link right here. And right now we're on sublime text. Three bill 32 07 It will likely change that number by time. You watch this video No big deal down low ever current version it is, and it's the same thing. You just click this, we can save it anywhere, Save to desktop. It'll download and then just click that button. I'm not going to walk you through this one because it's super simple. There's nothing for you to do. You just take the defaults. Click next, and it will start in order to use it. Some live tax. Just go to your Windows Start menu, type in sublime, and it'll pop right up. So the next thing we need and the more important thing is to get bashed Terminal. So I'm gonna go get Bash Google here, and the first thing that pops up is this. Get dash SCM dot com forward slash downloads and that's what we want. And right here we're on version 2.21 point zero again. If it's a different version by the time you watch this, no big deal. Download whatever the latest version is. And remember, if you're on a mackerel Lennix, you can download this, but you don't need to. You could just use the terminal that comes with Mac or Lennox. It works just as well as to get bashed Journal. I think it is a bash terminal, so you're good to go there. So go ahead and click this to download, and it will pop up automatically downloaded to your desktop. And this is, I think, 40 or 60 40 megabytes. But it takes a long time to download. For some reason, it always has. I have high speed Internet. It should download in, like, two seconds, and it's already been like 15 seconds now. So for some reason, it's always been like that. So if it takes a little while to download no big deal, I just go ahead and wait. I'm gonna go ahead and pause the video while we wait, and we'll pick it up as soon as this finishes downloading. Okay, so it's finished downloading, and again you can navigate to your desktop and click it there, or just come down here and click it and open this and click Run! Pull this over. Okay, So general license click. Next. Don't make any of these changes. Any changes in here? There's a whole bunch of stuff just We want all the defaults here. Now, this is kind of weird. It asks you what text editor you're gonna be using, and it happens to have the sublime text says that a fault one. But there's a whole bunch of different ones you can pick. But the weird thing is, we never used to get Bashed Terminal with a text editor. They are two separate things, so I have no idea why they asked this. It's not like it integrates into the text editor in any way, so you can just ignore this. If you're not using supply of text, you don't have to go in and find the one that you're using. Just click next. It's just a weird thing. Next, we want this lower this bottom button to be checked. It's the default one. So click next and again we want this checked. Also, it's the default. Ssh! Is a secure key thing that we're gonna be using to connect to things like Roku and get hub dot com for version control. We'll talk about that later on. Same thing with this open SSL library. Want that checked and this top check out window style. It just doesn't really matter. But we could just go ahead and leave that as that info. Same thing with this meant ET why thing And finally leave these to default and then come down here and click Install. Now, I've already installed this, so I'm not going to do this last step. But you will obviously click this install button in the little box will pop up and you know , you get the scroll bar and I'll show you the status and all that. You just wait for it to install and you're good to go. Ah, same thing with sublime text Editor. If you want to run this, you just go to your Windows Start menu, Go ahead and click. Cancel and this is off screen, so you can't see. But it's just get bash. You just type that into the search and it'll pop up Pulis over. And this is the get bashed terminal. We'll talk about this a little bit. Mawr, probably in the next video. In fact, in the next video we will look at this and I'll show you how to set up the ssh key. This will allow us to securely connect to said other websites like Get hub dot com to push our code of version control Roku to push our code up for Web hosting Things like that, you need an ssh keys. It will generate one of those in the next video. 5. SSH Key Generation: OK in this video, I want to generate an ssh key with our get bashed terminal. So rails ruby on rails requires I believe at this point a ssh key for some stuff behind the scenes. But we also need one to push our code up to get have version control, talk about that in a bit and also to push our code up to Roku. We'll talk about that in a little bit as well. So we just need an ssh key. It's just a security thing we need to dio. So I've opened up to get bashed terminal And if you see here, So there we go. If I type in PWD Now, if you don't know how to use this terminal, no big deal, I'm going to show you some commands here and there. And you only need a few. So there's nothing really you need to learn. So I just sort of follow along here. PWD shows us what directory were in. And you can see we're in c slash user slash flat planet Flat Planet is the name of my computers. That user name that I'm logged in as, uh, I don't think the world was flat. I just find a hilarious that people do. So I kind of name my computer that whatever your user name is, your computer name, whatever, whatever that is, it will be there. So that's that's what you want. So the first thing we need to do is create a directory to hold our ssh key. And we just use the m k D. I. Our current command stands for make directory and then just type period Ssh! And a period on a directory means that the directory is hidden. The folder is hidden, it won't show up. And that's what we want for security related. Ssh. Keys. So that's how we do that. Okay, so now we need to move into that directory. We need to change directory. So we use the CD command change directory, and then just type dot Ssh. And if we type in pwd again, you see, we are, in fact, in what planet slash ssh. You can also notice it says it right there. So now if we type el esto list the stuff that's in this directory, there's nothing there. So that's good. I'm gonna take clear to clear the screen, so Now we just need to generate our ssh key. It's super easy. Used to be hard in the old days. Used to have to download some software to do it. Now it's built right into this git bash terminal, which is one of the nice things about it. One of the reasons why we use it cause it has stuff like that just built in, which is very cool. So to generate an ssh key, we just type in Ssh Dash he gen dot e x c This is going to run a little program that generates are key for us, and it's asking us where we want to save this. And we just want to save it in this directory so we could just hit enter. And now it's asking for a pass phrase. And whenever we try and, like, push our code up to her Roku or who share code up to get hub, if we pick a password right now, it will ask for this password forever. So you need to remember what that password is. Personally, I don't ever to really do that. I just leave this blank, and in that case, when we push our code up to get hub later on. It won't even ask for the password. So it's just one last thing to remember. I don't think hackers we're gonna steal anything with this. So I an extra password on top of this seems to me not necessary. But if you want a password, type it in there. If you type it in right now, nothing will appear on the screen. That's a security feature. So don't worry. It is actually typing it in. So just type it in to hit enter. Nothing will appear on the screen, but for me right now, I'm not even gonna do that. I'm just gonna hit enter and it says, Enter the same pass raise again. I hit Enter again and boom is generated are key. So if I clear the scream now, if we type in el esto list that stuff in our directory we see these two files I d underscore r, say an i d. Underscore Arce pub and this is what we want. This is the public. He and later on, we're gonna have to take this key and upload it to get hub or wherever else we want to use it, And so we'll do that later on. But if we want to just look at it right now, we can type cat to catalog the file and an I d underscore R s a dock hub, and you could see this whole thing is our ssh key. It looks like a bunch of gobbledygook. It's just ah, security hash type thing. And, uh, no big deal. We just We have it now and we're good to go. So that's all there is to that. In the next video, we'll go ahead and install. I think the last thing we need to install before rails, the Roku tool belt and that allow us to push our code up to Web hosting for free later on, which is very cool. So we'll look at that in the next video. 6. Heroku Toolbelt Installation: Okay, so we've got our ssh key. Now we want to install the Roku tool belt. And Hiroko, if you're not aware, is 1/3 party Web hosting company. That sort of specializes them things like ruby on rails, and they've been around forever. There will, in the most popular sort of ruby on rails Web hosting. And the reason why I like to use them is because they have a free tier, and the free tier allows you to upload your stuff and have it live online. It's just not very powerful, like not not many. Not many people can, like, visit your website at once. It will be very slow, but it's free. If you then want to upgrade it, you can and start paying, at which point your Web hosting becomes more powerful. More people can visit your website at one time before it gets slow and things like that. So for our purposes, for testing and for building cool new things, broker is great. So that's we're gonna use. So in order to sort of talk to Hiroko behind the scenes from our terminal here in order to push our ruby on rails code up, we need something called the Roku Tool belt. So we'll download and install that right now. So head back over to Google, and I'm just going to type in her Roku tool belt. And this is a little weird. It doesn't pop right up here. This is an ad for Roca. We don't want that. We don't want the pricing. We want this heroic who cli and the website address is deaf. Center dot Roku dot com for slash articles forward slash Roku a dash cli and CLI stands for , I think command line interface. So our terminal is a command line, so we need an interface to interface Are command line to Hiroko is That's what we want here . So if you could come down here you see there's a Mac. There's a Lennox's version here. We want the Windows version. Likely you're on a 64 bit computer because pretty much all computers or 64 bit or higher these days, So go ahead and click this to install same thing as before. We can install it. Weaken, download this anywhere we want. I'm just gonna download to my desktop click save and Boom. There it is. And again you can navigate to your desktop and click it there, or just click it right here. So we will open this all this over now. The most important thing is to make sure this is checked set path to Roku and with Windows , the path is important. Path means we can run this anywhere on our computer. We don't have to be in, like the Hiroko directory and run it. So if you add it to your path, you can run from anywhere, which is what we want. So it's check by default, so we just leave it like that. Click next again, you can install us anywhere to take the default. It is 109 megabytes, so just be aware that and then here we go. It takes a couple of minutes to do this. It's installing all kinds of stuff. I see a bunch of JavaScript being installed, So it's another reason. Probably Why? Well, why we'll need node in order to run. This is well, so you need note for everything these days. Seems like something to go ahead. Pause the video while this finishes its thing will pick it up right when it's done. Okay, so it says completed so we can come down here and click close. Now we want to head over to our terminal here, and we want to make sure this has been installed. So I'm gonna type in her Roku Dash dash version and it says right there gives us the current version that's been installed, so that means it's been installed correctly. If if you get a commander or a message that says like broke who command not found or something like that, that means that it hasn't been installed correctly and you need to reinstall it. But you're probably good to go. It also might mean you need to restart your terminal bash your bashed terminal thing here. So when I come up here and just click the X just in case, and then I'm gonna come to the Windows Start Menu that you can't see and typing, get again and pull this over. Just when you install things like that that work with this terminal, just a good ideas to restart it. Give it another start. Just make sure everything's been installed correctly. So that's it. Those those are all the tools that we need to install ruby on rails. In the next video, we will jump right in download, and it's still ruby on rails. Very exciting. Finally, it takes a while to do this, but we're almost done, and we'll start that in the next video. 7. Install Ruby on Rails: Okay, so it is finally time to download and install Ruby on rails. Now, you're likely won't gonna want to go to Ruby on rails, ord. This is the official website of Ruby on rails. And you see right here they have the latest version 5.2 point three, and you're gonna want it. Just click this and install it like this. Don't do that. This is the sort of official ruby on rails. It's a lot harder to install. There's a whole bunch of stuff you need to do. It's just kind of a hassle. Instead, we're gonna you go to something called rails installer dot org's and this is a Windows installer. I think there's, Ah, Mac version as well. And this is like an execute herbal file that we can just download and install. And it does all the stuff behind the scenes that we would have to do normally ourselves doesn't force, and it's super super useful. So we have a couple of different options here. Weaken do Ruby 2.2 or ruby 2.3. Now, Ruby is the programming language that rails is built with ruby on rails. Right. So it really doesn't matter which of these you download and install. This is the slightly newer one. It comes with rails 5.1 versus five point. Oh, which is this one right here versus the current version is four points or 5.23 So you're not getting the absolute newest version, but we really don't care. I mean, until just recently, I was still using Ruby on rails. Version for point, something 4.2 or something like It doesn't matter. You don't have to have the highest newest thing. But like everything else, if the version numbers changed by the time you watch this video, no big deal. Just pick one of these. I'm gonna go ahead and pick this, uh, 2.3. The latest one with rails. Five point. Oh, or 5.1. You could see it comes with Ruby. 2.3 point three rails. 51 bundler. Get. We've already got our get bashed terminal. It has get installed already, so we don't need that sequel. Light is a little database. We're gonna have to talk about that. Probably in the next video and a couple other things. Dev Kit. This goes with ruby eso Those things go together, and that's cool. So let's go ahead and click this. Save it anywhere you want. I'm going to save to the desktop, like always. And you can see it is a little bit bigger than some of the other files we've downloaded so far. It's 112 megabytes. It downloads pretty quickly, though, so I'm gonna go ahead and posit very quickly and we'll pick it up. Instances, finishes downloading. Okay, that was, like, 20 seconds later. There's probably no need to stop the video, But we could go ahead same as before. Navigate to your desktop and double click it there. Or just click it right here to install. And we want to run this guy, pull this over, and so we want to accept all of the licenses and all that good stuff next. And I'm gonna uninstall this, uh, this check box right here cause we already have get it came with our get bashed terminal. So we're good to go there. We definitely want to add executed a list Ruby deaf kit and get if checked above to the path we talked about path before. This means that you know, we can run Ruby on rails from anywhere on our computer. We don't have to be in the ruby on rails, directory or whatever. Same thing for Ruby. We can run the Ruby programming language from anywhere on our computer, not just the ruby directory. So we definitely need to make sure this one that has been checked so we could go ahead and click this button to install. Now this is gonna install 500 plus megabytes of stuff. It's something like close to 25,000 files. There's a lot of stuff going on behind the scenes here, so go ahead and click Install, and it's installing it in See rails Installer directory. If you're curious why it would be now, I'm gonna go ahead and pause. This will pick it up, Assumes that finishes doing its thing. Okay, so it's completed. The installation will get this nice little screen here to end it, and we're good to go and go and click finish, and we have done so now. Rails has apparently been installed, but we're not quite sure yet because we haven't actually tried using it, and it will need to try to use it by just creating a rails project. So we'll do that in the next video 8. Create Test Project and Error Handle: Okay, so we've installed Ruby on rails, we think, but we're not sure yet until we actually run it once. And to do that, we just create a project. So that's what we're going to do in this video. We're gonna create a simple test project, not our main project, just to make sure that ruined rails has been installed correctly. Because a lot of times you'll get an error at this stage. And so I'm gonna show you what to do if that happens as well. So I'm in my get bashed terminal, and I should mention I close this terminal and restarted it. I opened a new version of it or ah, new ah instance of it because ruby on rails needs to be the get bashed. Normal needs to be restarted in orderto take into effect the changes that the ruby on rails and Stahler just did. So we come here to Peter in type and pwd just to make sure which directory we're in, we see that we're in this directory here. We actually want to be in our C directory right now, so I'm gonna change, directory and type and see and pwd again make sure we're in there. So now we want to create a directory to hold our new ruby on rails test project we're about to create. So let's go M k d I r to make a directory. And let's just call this rails test. Okay, so now we need to change into that directory. So I just haven't CD rails test and pwd to make sure we're in there. Okay, So the command to create a new rails project is just rails and then new. And then let's just call this tester. I don't know, 60 boom is creating all these files. And the first little message we get is our We're not running the current version of the bundler, so we need to run this gem installed bundler command. So we'll do that as soon as this whole thing finishes doing its thing. We probably don't have to do that, But you want to be on the latest version, so we'll just go ahead and do that. It looks like it installed an older version when we use the rails installer thing. So what is doing here is it's fetching all of the gyms and all the dependencies that we need from probably from a website. Yeah, right here. You can see from Ruby gems dot ord, and we'll talk more about gems and dependencies later on. But that's what's going on here, just going and getting all those files and making sure that they're either installed or updated or whatever. So this could take a minute or two. Now, I often get an error message towards into this, and I hope it happens. This time doesn't always happen for some reason, but sometimes it does. I'm hoping it does this time so that I can walk you through what toe happen, what you should do if you get in a room. And there we did. We get that air message. So, uh, this is cool. We could talk about what happens when you get an error, and it's not just for installation. You'll get errors a lot using Ruby on rails because it's easy to make mistakes. And the important thing is to Google those errors. I mean, you can ask me while you're taking the course, but that's not the way you learn. You need to try it yourself first. If you can't figure it out absolutely asked me, but you're going to do a lot of Googling when you're using Ruby on rails. So she just sort of get used to it and we can start right now. But before we even look at this error gonna scroll back up here and let's see Grab this command. It wants us to grab to Dio. So I'm just gonna highlight right click and copy, and then just scroll back down and right click and paste. And we just want to install the bungler thing. Enter it lacks for a second, and then it'll jump and do it real quick here. So we just sort of wait for a second and it should do its thing. Hopefully, Okay. Successfully installed bundler two point. 0.1. If it's a different version, don't worry. Big deal. Okay, so that's taken care of. Now let's look at this. So to see why this exhibition failed to compile, please check that make. We don't want to do that. See, let's just see Jim files remain and its stall. If we look through here, I'm seeing look right here. Sequel life. That's a database sequel. Light. That's a database Equal light did best. So obviously there's a problem with sequel light. And if we look through here and there occurred while installing this and Boehner cannot continue, make sure that the gym is all sleep like three. But lost succeeds before bundling. So, Norman, I know what to do to fix this, but normally you wouldn't. So what do you do? Well, you want to just sort of grab something that kind of makes sense to you in here and Google it so great here, I might say Make sure that Jim Bob Loblaw succeeds. I might highlight this and click copy and then just head over to Google and paste that M. And you're likely going to see a lot of stack overflow articles. And that's a great website. It will be your best friend. It's sort of like a social network for coders, and it's a place where you can go and ask questions and say, Hey, I'm getting this error. What do I dio and people that have gotten that ever before will say, Oh, you just do this and they'll tell you it's fantastic. So we see this here. I would probably just click the first thing and start reading right there. Usually a couple pages long and not too bad. Now, in this case, you see, this guy did the same thing. He's got all this things installing, and then this is not what we need, right? So, OK, we can go through and look at all of these and maybe one of them in there. We'll have a suggestion. I happen to know what's going on here, so I know that that's not gonna do the trick for us. Instead, we want to come back here and let's look through here a little bit more. Um, we scroll up, we get even more air messages, checking for secret light with this dot each thing. What is that? Who knows? Um, here says sequelae. Three dot h is missing. Install blah, blah, blah. First, it's telling us to down load sequel Light the database. Now that doesn't seem right to me, but we can copy this at least and head back over to Google and see if we pace that in unable to install that I generally look for the sequel Light. And this one I happen to know is probably the one. If I didn't know that I would just spend, you know, half an hour reading through all of them until I found the one. But we come down here and maybe this isn't the one e I think it is. No. Oh, you know, what I often do is I'll look at the dates here. So it's 2017. 2015. These air No good. We want something more current, right? So keep looking down here, see anything? So let's say let's do this Air Ego one from 2019 right? So a lot of times this is a lot more work than you'll have to dio. Most times when you copy and your error message, the first thing that pops up is gonna work. But for some reason, this particular one takes a little while. And so you just have to read through until you find the answer. But this is definitely the one we want really want to 19 and we can look through here. The guys got same error codes that we have, and you can see right here. Here's the answer. Rails tries to automatically installed the latest version of Secret Light three, but the new version doesn't work with rails yet, so you need to specify an older version in order Teoh to run it. So we will just add this reference to our gem file and you don't know what a gem file is yet. So, uh, uh, you're not quite sure what to do, So I'm gonna open up my sequel, Light or my sublime text editor and very quickly Sure you had to do that. So you add all of our new ruby on rails stuff to our sublime tax. Just go to project and we want to add folder to project. So now we just head over to R C Drive. And we saved all that stuff in that rails test. I think rails test, and that, if you've forgotten already, is just this directory we're sitting in right here. Rails test. Right. So we just basically want open that directory in sublime going Click That And then the rails project we created was Tester. So you just highlight the project. Don't click through it just highlighted because we want to select the folder. And when we dio boom, boom, boom all of the ruby on rails files that we need show up there. So we want to come to the gym file and I'll talk about what the gym file is mawr later on. We see there's this reference right here to sequelae three. And this is what's throwing up in error. So instead, it's we want to come back to that website and highlight this and copy and then just paste it in there, right? And up here, we want to highlight out the old one or a comment out the old one. I'm gonna hit. Control s on my keyboard. Command s If you're on a Mac to save it or you come up here and click Save now we just need to install that. So head back over to our terminal. And since we're in the rails test directory, we can hit ls to see what's in there. And we see there's that directory. So you want to change into that directory tips CD tester slash. There you go. Legacy. Now we're in Tester, right? And it's clear the screen and we want to type the command bundle install. This will install that sequel light thing we just put in the gym file. It will also make sure everything else is current. A to moment, right? So all right, fetching all this stuff from Ruby Gems will talk more about what all these things are later on. And if we look down towards the bottom here when it finishes, it should show us that version ended a secret light three. Version 1.3. If we look here, we're saying install sequel Light three with a version less than 1.4. And what we got was version 1.3. And now everything will work correctly that error messages no longer necessary and we're good to go. So we have correctly and successfully, I should say, installed Ruby on rails. Everything is working good. We have our new little project called Tester. We're not going to use this. Going forward in this course will create an actual new project. In fact, that's what that's how will confirm that this little fix worked Well, actually, it won't confirm because it will get that air again next time when we create our new project. But we know how to fix it now, just by adding in this reference right here to our gem file lives at the time. So that would be cool. And, uh, so we're ready to get started and actually start building out our app so we'll start to do that in the next video. 9. Rails Project Overview: Okay, so we've got Ruby on rails installed. Everything seems to be working. Good. It's time to start building out our app. So we're in this sea rails test slash tester folder and we're done with the tester thing. We don't want to use that anymore. So we need to create our actual project that we're gonna be using. So I'm going to use a CD command here to change directory into the sea folder. Right. So now we want to create a new project directly and see what you could put it anywhere you want, But I'm just gonna put in C and I'm gonna call it Let's go rails new. And then let's call this stocking. We're gonna make a stock market app. Let's call it stocking. I don't know. So Okay, bubble, move up. It's doing all the things and turning bundle install. We're not getting that message this time. That says we need to update bundler. Add bundler, cause we did that in the last video. Whenever that was installing secret light three. 1st 1.4 we get that same exact error, but now we know how to fix that. So we're going to go So now we can see d into sea, uh, stocking. And you see this master thing? We'll talk about that a little bit right now. What I want to do is clear the screen and then ls we could see it. We've got all of our files in here, so let's go ahead and open up are sublime Tax and Goto project and then add folder to project. And we just want to navigate to R C drive and then go down to that stocking directory which is created. And then we don't want to actually click it, click through, just highlight it and then click select folder and then boom and adds all of our stuff. So just right away, let's go ahead and make this sequelae change that we already know how to dio and so we can paste this in Save this a comment that out, save it. And another thing I like to do right off the bat with the jump file and we're gonna talk about all these files in just a second. Here is see all these comments. I like to delete them because these are all the default things, so we don't really care what the comments are read through him once if you want. But we do a lot of stuff in this gym file and having all these comments, and here it just seems kind of messy to me. And OK, so now if we save this, you notice everything's nice and neat now, and in the future, whenever we want to add something, we'll just add it right here. And it just it just seems easier to may. So let's see. So we need to save this and then run, bundle install to install this new sequel light thing here, Pope or terminal. And we are N c stocking so we could just type, bundle install. We've already done this before once, and it's going to do this thing. I'm just gonna let it go and pull back up. Our terminal are sublime texture. So for the rest of this video, I want spend just a couple of minutes talking about all of these files and all the stuff that you see here. So if this is your first time using ruby on rails, this is gonna be absolutely overwhelming. I get that first time I looked at all this stuff. I was like, What is all this? This is too much information overload going on. I don't know what all these things are. If you start to click on some of them boom, they expand. There's even more stuff like, What is all this? What? You know, what should we focus on? The good thing is, most of this stuff we will never use. I've been doing Ruby on rails for at least 15 years, almost since there was a ruby on rails. And I haven't opened or used most of those directories. You just don't You don't need Teoh. I mean, there may be a time in the future when you're doing some super advanced thing that you need to get into one of these folders and do something, but for the most part, we're just gonna use a few of them. So let's just go through here and started the top and just kind of do a quick overview. So app is actually a directory that we will do a lot of stuff in, and you could see the first directory. And here is assets. If we expand that, we see config, images, javascript and style sheets and this is where we put just like they say If we have images that we want to use in, our app will put them in this images folder. If we have JavaScript code that we want to use will put it in this job, script, file or folder. If we have CSS style sheets that we want to use, will put them in the style sheets folder and we'll go through and do all this stuff throughout the course. But I just wanted to a quick overview Overbey. Right now channels is not something will likely ever use Controllers is something we're gonna use now. Ruby on Rails is something called an N V C Architecture model, view controller and models air database stuff views are Web pages and the controllers. This thing right here, sort of like the brains behind the scene will put like computer code like a lot of ruby code in there. If we need Teoh, controllers tend to kind of interact between the views and the database stuff, so we will tend to use the controller stuff a little bit. I don't know how much we're gonna use it in this course, but we May. Helpers probably won't ever use jobs, Probably won't ever use mailers probably won't ever use models. There may be a little something we need to do database wise and there that will take a look at and finally views. This is where all of our web pages go. And so any time we want to create a page, we put it in the views folder here. So that's it for app. Not too bad, right? Ben is likely something will never use config. There's a couple of things in here we might use. We're definitely gonna use this routes that RB file. And we might use this environment thing here, but maybe not otherwise. Same thing here we might use will probably use the development and production these two files just for when we push our code up to Roku for Web hosting. We need to make a notation in there, So not much to be used in there, so let's see. What was that config. So now we're down to D. B. This is where database stuff goes. Great thing about Ruby on rails, is it? Abstracts away the database stuff and does it all for you, so There's very little database stuff we have to do. But there may be a couple things we need to look at their as we go on. Not too bad. Live is nothing will ever use log is likely. Something will never use public. Never use that test. We won't use that temp. We won't use that. And vendor, we won't use that. So of all of these directories, app is the big one that we're gonna use a little bit of config, maybe a little bit of D B A database, but that's it. So then down here, the gem file. We've already looked at this. This is where we add 1/3 party code. You know, if we want to use, we're gonna be using boots Draft. The CSS framework will add the bootstrap gem to this this file. Any time we want to add something from the outside, we do it in this gym file, so we'll start. We use that a lot. The rest of these things we pretty much ignore. So of all of this stuff, there's really not a whole lot going on in here that you actually really Dane and day out have to use. So if you're feeling overwhelmed, don't worry, it's not as bad as it looks. And you don't have to memorize all this stuff. We're going to start to use it slowly over time. And as you use it, you'll become familiar with it. And it will be just second nature. You know, I need to make a Web page. I'm gonna go. APS views it just it will. It will become apparent. Do you have, as you sort of start to play around with this more often? So not too bad. And, uh, hopefully you're not overwhelmed. And if you are, don't worry. We're gonna take it nice and slow, and we'll be fine. So that's all for this video. In the next video, we're going to run the server, create our first Web page, take a look at all that stuff, and that'll be in the next video 10. Rails Server: Okay, so it seems like we've spent a whole lot of time installing things and looking at the sort of overview of what is rails and doing all these things that aren't particularly fun in this video, we're gonna start to actually jump in here and do some fun stuff kind of fun. And we're going to run the Web server and take a look at our new projects home page. So rails by default has a sort of default template Web page that it throws up when you create your projects. We're gonna look at that in this video. So any time we want to run our project and actually look at it in a Web browser, we have to run the rails server. And to do that super easy, we just head over to our terminal here, and you can see our bundle is complete from the last video. So we're always gonna be in this sea stocking directory. Make sure that you're in that directory. Anytime we run commands from the terminal, we need to be there. So what we need to do now is run the server. So to do that, we type in rails usually When we run a rails command, it starts out with rails. So rails server. Now you can type server or you could just type s short for server rails. Israel big on abbreviations. So a lot of times you could just get away with doing something like that. So we hit Enter. That's going to take second to sort of spin up here, spending on how faster computer is and all that good stuff. But what is going on here is we're booting up a Web server and it's called Puma. That's the name of the server. Over time, there's been all kinds of different servers that rails is used as used. But right now they're using the Puma Web server, and it really doesn't matter what the Web server is. We don't need to know anything about it. We're never going to do anything with it. We're just going to turn it on and turn it off basically, So you could see it's now listening on this port 3000 of local host. So if we copy this and then head over to our Web browser and then just paste that in here, so we're just going to the address local host Colon 3000. Now, if everything has gone correctly, you should see this page or something that looks something like this. If you're using a later version of rails, they changed this around from time to time. But it'll look something like this. This is Yeah. You're on rails. Woo. So we have now created our first web page. We didn't really create it. Rails created it for us. But we have something. We know that rails has been installed correctly. When you are, project has been created correctly. We know everything is working correctly. If you get an error here, something went wrong. And you're gonna need to google the air message to find out what you need to dio. But luckily, it seems to have worked, So this is very cool. And one thing I shouldn't mention this is not up on the Internet right now. This is just on your computer. So, like if you give your buddy this address local host Colin 3000 and they type it into their computer, this will not come up. Right? So this is just on your computer. Later on, I'll show you how to push all your stuff up to the Internet. It's actually pretty easy. So at the end of the course will do that. But just for now, this is Ah, this is just on your computer. So very cool. Yeah, it's not that exciting, but it is kind of because we went through a lot to install rails and get all this stuff up and running and fix error messages and all that stuff. It's nice to see this and see that it actually works. So that's all for this video. And the next video will actually change this page to something that we want, You know, something that we build ourselves, and we'll do that in the next video. 11. Create First Webpage Generator: Okay, so we've got our website sort of up and running. It's got this basic default page. We want to change this to something else. How do we do that? That's we're gonna look at in this video. So first thing we want to do is head over here to our terminal. Now, whenever you want to see your website running in the Web browser, this has to be running. So, um, it's a matter of style. I like to just keep this terminal running. Always. Some people like to start it and stop it from time to time as they need to. So if you want to stop the term or stop the server from running, just hit the control and see button on your keyboard and it exits and it that looks fine. Personally, I don't like I said, I don't like to do that. I like to just keep it running forever. So I'm just gonna run it again. And what I do is I just opened up another bash terminal. So go to your Windows Start menu search for git bash opened this guy up and let's pull this over and resize this a bit. Okay, So now we need to make sure that we're in the right directory. So we want to change directory into C. And what do we call this stocking? All right. So we can ls Just to make sure that that's all our stuff. Okay, so now when we need to run commands, run rails, commands, we could do it from this terminal. And all the while this one is running with our server in the background. So that's kind of cool. So now what we want to do is create a new Web page. How do we do that? Well, there's two ways to do it. You could do it automatically, and you could do it manually automatically is probably easier. I'll show you both methods. So by automatically, I mean, there's a command rails command that will create a web page for you. So to do that, we just type in rails generate. And this is the rails generator. It generates all kinds of things. We're gonna uses a lot. You know, when we want to do database stuff, it will generate a database for us. It will. You know, there's lots of ah, generator stuff that we do in rail. So rails generate is the command. Or you could just haIf rails g again. You know, rails is big on doing that sort of thing. So now we need to do something. We need to create a controller. And remember, Rails is a model view controller. So any time you have a Web page has to have its own controller, and it has to have the web page itself and also has have a route. We'll take a look at that in just a second as well. So rails G, we want to create a controller, and we want to call at home and index. Now it's gonna create a controller called home. And in that controller, there will be a webpage called Index. Right. So that's sort of what's going on here. And you can name these things anything you want, but we're creating a home page. So I'm gonna call the controller, the home controller and, ah, just sort of convention. And that kind of makes sense. So if we do this it enter, it will take a second. And then it will spin up all this stuff and you could see boom. It has created something in APS controllers, this home controller dot RV and Darby is a ruby file, so we create a lot of RB files, and then it created this Views Home Directory and inside of there put this index that html Dottie RB file. HTML is a basic Web page format. All Web pages or HTML. It's kind of weird. It ends in dot e r B. That's actually a really cool thing about ruby on rails, E R B stands for embedded ruby. It allows us to do you actually use Ruby code on our HTML pages? Very cool. We'll look at that a bit. It's created some test stuff. We're not gonna get into testing in this course helper. Same thing. We're not gonna look at helpers. It's created some assets. Remember that asset directory? Ah, some coffee. This like a JavaScript thing and a basic CSS page. We'll take a look at all this stuff in a bit, but now what we can do is we can come back over to our app and we could see inside of our controller. Um folder. There's now this home controller directory and inside of here there's an index method this is a ruby programming thing. Methods like functions with other programming languages. But it's created this index method that goes with our index page. If we then look at our views, we see there's this new home directory that's been created and inside of here, this index that ht mo file and here it ISS so we can actually see if this worked by heading over to our website here and just going to the home index. You Earl. And hopefully, if everything work correctly, boom, we get this home index page and this is like find me an ATV use home index, which is exactly what this says. And we could change this to stocking. I know. And then hello. This is my first rails app. If we saved this control s to save it or you come up here and click file Ah, and save command s I think if you're on a Mac and now we come up here and hit reload Boom, it's a stocking. Hello. This is my first rails app. So very, very cool. And just like that, it works. So one last thing I mentioned you need a web page, which is this you need a controller, which is this. You also need our route. And if we pull this back up, this home index, that's the route. So in the next video, very quickly I'll show you where that is and how to change that, cause we want this stocking page to be our home page. We want to replace it with this. So she had to do that in the next video. 12. Root Route: Okay. The last video we created our first rial page, this home index page in this video. We want to make this page our home page, you know? So instead of this thing showing up, we want this to show up. So how do we do that? Well, it's really easy. All we have to do is change the route of our home page. So head back over to our code and let's close some of these to make it sort of easier. Go to the config directory and then down here routes dot r b. This is the page where we we designate all of our routes and you can see there's only one right now is this home index route. And if you see this, this looks an awful lot like this, right? That's all it is. We've just defined that to be that, and that's what we do in the routes file. So what we want to do is change this. Most of our routes will look like this. They'll say, Get home Index. What we want to do is create a route route, and the route is the home page. It's the slash nothing. So that's the route. So to do that, we just copy the same thing Home Flash Index. But instead this slash for some reason, because it's a route a route route. We use the number sign the hashtag time. So if we do that and save it and come back here to our home page and then hit reload boom. Now this page is our is our home page. And what kind of weird is if you go to home flash Index? This still is here, right? That's because we have this. This old route is still there, So I'm just gonna comment that out because we actually don't want We don't want that anymore. So if we save this now, come back to this home index route and hit reload. We're gonna get an error. Because even though the page no longer the page still exists, the route to that page has been removed. And so we see we get this air. This is no route matches. Get home, Index. If we go them back to our home page, then hit reload, it still works. Everything's fine there. So that's how you change the route. Very simple. We just takes a minute or less a couple of seconds to do that. So any time we create a Web page, if we create it using a generator like we did for this one, it will create throughout for us. If we do it manually, we have to create that route ourselves in the routes that RB file. So pretty simple. That's all there is to it. In the next video, I think we're gonna look at version control and set that all up before we get too far into our app, building out our app. We wanna have version, control version control keeps track of our code. Changes over time is just super super important, and we'll look at that in the next video. 13. Git Version Control: Okay, This video, I want to look at version control using get G I t. In the next video, we'll look at hosting our version control on 1/3 party website, specifically, get hub dot com. But before we do that, we have to set up. Get so first of all, what is get what is version control? Well, every time we make a major change to our code, we want to save that. And that's because, Well, there's a couple of reasons If we make some sort of horrible error and we mess up our app, we can roll it back to a time when it worked using version control. So that's sort of the main thing. If you're working on a team, it's important for the entire team to use version control. Version control will keep track of who made what changes to the code and when. So if Bob over there did something to the code, it will record that that he did that. And when and then if I do something to the code, it records that I did something and then your version control sort of merge all of those things together. All of those changes together into one you know, code base. And it's just super important. If you're not working on a team. If you don't ever expect to work on a team, you should still use version control. For the first reason that I mentioned, it's not uncommon to really screw up your app and not be able to figure out what you did wrong. And to be able to just roll back to a current to a version, you know that when it did work before you made, the error is just super super important. And you know we're going to take all of this version control we're gonna hosted on 1/3 party website called Get Hub. And that's, you know, just so in case our computer burns down in case our house burns down, the office burns down or whatever. We have a copy of our code somewhere else. It's just super super important. So head over to our terminal and we actually need to set up, get it's already installed. It's already there. We just need to sort of turn it on, initialize it, and to do that, we need to give it a few settings. So let's head back over to the web browser here and head over to my personal website. John elder dot com forward slash code. And this is just a little place where I keep little things. I like to hike a lot in Vegas. I keep a little code snippets that I like to remember. And if you click on the get one and then just right here, we need to initialize get so we need to paste each of these commands into our terminal. Right? That's good picture. Eso the 1st 1 is git config Dash dash global user dot name. And then I'm just gonna highlight this much because we need to actually type are name. So I'm just gonna highlight this and right click and copy. Or you can get control c on your keyboard to copy it and head over to a terminal. Make sure we're in the sea stocking directory, right, click and pace, and then type your name. And it's important to type your actual name because get like I said, keeps track of changes over time, and it keeps track of who made those changes. So it needs your name. All right. Next we need to do the same thing but with your email address and try to use the same email address that you're going to use with get hub because it just makes it easier for the two to connect Head back over here. Right paste, click and paste. So we're at John E for 196 at gmail dot com. Okay, just a couple of more. The rest of these we could just straight out copy and paste. So get config. Dash, dash global la, blah, blah. I've been done using these commands for 15 20 years. I don't remember what they all do. I just remember we have to do this every time we set up. Get for the first time. You have to do this every time, just just the once to set it up. So All right, that 11 more. Two more, actually. Copy this and paste. And then finally, the last one is Just get in it. And this initialize is get it turns it on for the first time. So if you come up here and paste Now we get this word message re initializing is existing get repository. So when we installed Ruby on rails it came with get even though we uncheck that box when we installed it, it looks like it still installed it and it started it. So that's what this master thing is that refers to a branch of git. It's the Master branch, the main branch of your git repository. So oh, all of this stuff sits in something called a repository. It's this dot g i t directory. And remember when we did that? Ssh key. It had a dot in front of it, a period in front of it. That means it's a hidden directory. So if we clear the screen, if we type in ls and list all the stuff you see, there's no dot get directory. And if we look here, there's no dot get directory here either because it has a period. It's hidden right, but it's definitely there. So Okay, we've got it initialized. Now we need to kind of turn it on for the first time. Well, it's already been turned on. What we need to do now is save all of our quote and this is what we need to do every time we make a major change to our code. Now, if you make some little thing, you don't have to do this every time. But if you make some major changes to your code, you want to save it and this is how we save it. We type in get ad, period and the period stands for everything we're saying. Add everything in this stocking directory into our get repository, right? So but won't it's adding all the things Now we need to commit those changes. So we've added them. Now we're going to say, like, save this So we type get commit Dash A. M. Now we need to type a little message and we're gonna type initial commit. And you see, I use single quotation marks. You can also use double doesn't really matter, and this message is important and we'll see why in just a bit. But the message should describe what change you just made your code. So later on, we're gonna add an about page I might type in added about page as the mess, the commit message right there. So we do that and it's gonna add all of the files. There's a bunch of them. There's usually not a bunch. It only adds the thing. You the newest thing that you just changed. So since this is the first time we're running this, it's adding all of the files in the future. If we just, you know, if we change one file, it'll just add that one file so there won't be all this stuff on the screen. So that's it. We're We've now committed all of our stuff. Our code is backed up locally and we're going to go now. We need to actually set up version control on 1/3 party website. Like I said, in case our house burns down and we need to push our code up there, and we'll look at how to do that in the next video. 14. Github: look in the last video we set up version control get that's all local In this video, we want to set up 1/3 party website to host over Get code offsite. Like I said, in case your house burns down in case your computer exploded, I've had computers that melted before. It happens like the hard drive just gives out. I've had motherboards that just died on me, and I just lost everything like it happens. It's a good idea to back up your coat somewhere else. That's what we're gonna look at in this video. So the website we use for this is something going. Get hub and get hub dot com. This is the industry standard website for this sort of like a social network for coders. This is my page. Get hub dot com forward slash flat planet. You might see a little button here that says Follow. If you want to follow me, go ahead and do that. You'll get updates on the code whenever I push them and stuff like that, not a big deal. You don't have to follow me, but if you want to go ahead and do that, so if you're If you don't have an account, sign up for an account there completely free now. This used to be an independent company, but Microsoft bought this company half a year ago or so, and actually they've done a good job since they bought. It used to be free for public repositories, meaning you could push your coat up here for free, but everybody could see it. If you want to make your code private, you had to pay. It was like seven or eight bucks a month per repository, which is not bad. But since Microsoft bought the company, they've done away with that. Now you can have public or private repositories completely free, which is very cool. I suggest you keep your code public unless you're doing some top secret startup or something, because a lot of times employers will look at your get have account. If you're trying to find a job they want to see, your code will go to your get of accounting. They'll look at your code and they'll talk to you about it. Hey, we saw you did this in this talk about this, and it's really actually pretty cool if you're not looking for a job sometime. If you're If you're resumes on linked in and you have a link to your get hub account, recruiters might come and look and see, and they might contact you. Hey, we're looking for someone with this exact skill set we noticed on Get Hub. You've got a bunch of this code that looks exactly like what we need. We'd like to hire you, you know, come in for an interview. That happens a lot. In fact, I get calls to this day. We clear so from recruiters who do that sort of thing. It's actually kind of annoying after walks. I'm not looking for a job, but if you are, that's a good thing. So sign up for an account, make your code public and all that good stuff. So we need to connect or get hub account to our terminal. So head over here to settings, and the first thing we need to do is add our ssh key. Remember, we generated that ssh key way back in the beginning of the course. We need to add it now. So in settings, go to SS age and G PG keys and click this new ssh key. And we just need to paste in that key. So head back over toward terminal. And if you remember, it was in, uh, see, the C drive users Flat Planet. Well, let's just we can we can catalogue it out to the screen. I think we did this earlier, so it was in c ah, users flat planet dot ssh. And then the name of the file was I d underscore R s a dot pub. So cat command catalogues it onto the screen. So this is our ssh key. So just kind of highly all of it, right click and copy and then head back over the website here and just paste it in just like that. You could give this a title if you want. You don't have to. Doesn't really mean anything. So now we need to add or ssh, key. And it usually asked for your password again. So if it does, type that in your get up password and you're good to go. So that's done. Now we need to create a new repository. So I'm gonna go to your repositories here, and we're just clicking new. So let's name this. What do we want a name, It's stocking. This example is already exist. OK, we'll call it stockings and description optional. Like I said, you could make it public or private. I'm gonna make this public and then just create repository. So now we need to put these two commands into our terminal because we're pushing an existing repository we created in our last video, our local git repository from the command line. And to do that, we need to type these two commands. We only need to do this once the first time. So right, click and copy. Head back over to Eternal, make sure we're in this sea stockings directory. Still haste that in ups. All right, let's clear the screen. I copy this again. Our copy. Ah, right. Click paste. So it's get remote. Add origin. Basically, we're saying Hey, at our stockings. Get repository on, get hub here, okay? And then the final command is get push you origin Master, copy this based it, And it is pushing our code up to get hub. Now, if we come back over here and click on repositories again, we see this stockings repository that we just created and it has all of our code from our project. And we can confirm that because remember, we made this sequel light change. Boom. There it is, right there. Very cool. This read me file. We can actually change that if we want. Let's do that real quick. So that is right here. Read me dot r n r dot MD. So here, let's change this to stocking. And let's change this. This is my first ruby on rails app. It's a stock market. Yeah, I don't know by John Older go to dot com. So if we control s to save this now, we've made a change to our code. How do we now save this to get and push it up to get hub? Well, we already kind of looked at how to do that. We come down here and we typing, get add, period. Now we typing, get commit Dash am, And we need to type a message. What should we type? Let's type in and tweak read me file because that's what we did. All right, so it's been committed locally. Now we need to push it up to get up and to do that we haven't looked at this yet, but always type is get with right. So when you created your ssh key way back at the beginning of the course, if you type the password at that time, it will ask you for your password. That password. Right now, it's not asking for your get home password. It's asking for that. Ssh! Key password. You remember I didn't put a password, so it's not asking for a password. So okay, it looks like it's done. We can clear the screen head back over to get hub and let's just hit, reload and we see Boom. Now it's a stocking here for this read me file and has the stuff we just typed in. So it worked and notice right here these air, the commit messages And this is why those air important? Because here, the commit messages tweet. Read me file cause that's what we we added. So in the future, if I want to look back for the code, where when did you know? When did I tweet that Read me file. I could just look for these, commit messages and go Oh, yeah, There it is. I can click on it. And boom! Now, I see it. So the commit messages air important. They help you keep track. It changes over time at a glance, and that's very cool. So that's all. Forget Hub, that's all. Forget, that's all. For sort of the boring behind the scenes installing type things. I keep saying that, and I keep bringing out new things, but I think that's pretty much it. And from here on out, we're just gonna work on creating our app, and it should be a lot of fun. So in the next video, I will show you how to create a Web page manually. Couple videos ago we looked at how to do it using the generator. Now we'll look at how to do it manually, and that will be in the next video. 15. Create About Page Manually: Okay, so we have our main Web page here, and it doesn't look pretty, but it's something. And it works, which is the important part right now. Now. And we created that using the rails generator. Remember that Command rails, G controller home index. Right. So you can always do that to create a Web page, and that's pretty easy. But you can also just do it manually and tell you the truth. I usually just do it manually because I've been doing this so long. I know, you know, kind of what what to do. And it z pretty simple. So we need remember three things to create a Web page. We need the Web page itself. We need a controller and we need a route to it. So let's just jump right in and start this. Go to the apse and go to controller. Now we already have our home controller, and we're gonna do most stuff in this home controller. So all we need to do is create a new method inside that controller. So let's create an about page right. So I'm going to define about and then end. And like I said earlier, this is just a ruby method. If you know Ruby, this look familiar? If you don't know Ruby, this will not look familiar. But this is all it is. You don't really need to even know what this is. What What this really is all about is if we want to do computer programming stuff on that web page, we would do it inside of this method. But there's nothing wrong with a computer program e we want to do right now. So these methods were just blank. But they have to be here, so control s to save this. That's it for the controller. Now, we need an actual HTML page. So let's go down to our views directory and instead are home directory. We need to just right click and create a new file, and we can call it anything we want. But I'm gonna save as and I'm just gonna mirror this, right. So instead of index dot html Dottie RB, I'm gonna make about dot html Dottie RB And it needs to be the same thing that you just created in your controller. We created in about methods and that we need to create an about page if you called it about me in the controller. You would name this about me dot html. See, where I'm going There ends in da trb. And now if we open our index page and I'm just gonna kind of copy this and paste this and and I'm gonna talk about me, Yeah, and then hello. My name is John Elder Ronco to me dot com Save this. All right, that's it. We're done with our about page. Now, finally, the last thing, the third thing we need is a route. So we come down to our CONFIG directory here and open up our routes file again. And I'm just gonna copy this cause we're gonna basically do the same thing. Get home, Index. But instead of index we wanted to be home about right. So if you save this, that's it. We're done. There's nothing left we need to do. So you could do it automatically used in that rails generator. But honestly, it takes less than 30 seconds to do it manually. Is I just usually do that, So All right, let's head back here and let's go home. Slash about and boom, about me. Hello? My name is John Wilder from Kona me dot com. You can go back where you go forward. We have two pages now on our Web pay our website. They're both kind of stupid looking. There's not much to them, but we'll we'll flush them out shortly Here. It's just that easy. We're training Web pages were building stuff with rails. So very cool, very easy. And I think that's all for this video. In the next video, we'll look at the layout's file. We'll see what that's all about and why that's important, and that will be in the next video. 16. Understanding Application html erb: Okay, so we've got a couple of Web pages now, and this video I want to talk about the application dot html file in our layouts folder here. So instead of inside of our views older, we have our home directory that has our Web pages. We also have this layouts directory and inside here we have this application dot html dot air b file. And this is an important file. And the reason why that is is take a look. Well, let's pull up our about page here. This is all the text that we've entered for our about page right? But if we actually go to that page and right click and click view page source, we see all of this stuff. All of this code is on that page and this stuff right here, that's the only stuff that we typed. Where did all of this other stuff come from? Right? Well, that came from our application dot html file, and you could see here's a title and then add some style sheets, stuff and some JavaScript stuff and has a head and a body and a closing body tag. So this is a basic HTM out page and all of your pages need all of this stuff. So what the application HTML file does is it takes this sort of template, and it puts it into every web page that you create. And you see this yield tag right here. That is where the actual code that you write for the page itself gets output. So on our about page, this stuff, like, right here, what is doing is rails is sort of copying this, and then it's Hasting it right here, right where this yield tag is. That's what the yield is. It's yielding your stuff, right? So for every web page that happens, well, this is interesting and kind of cool, because let's go periods change this, Teoh my stock market have. Whatever. Um, as I was saying, this kind of cool. So if we do something on this page, that change will be reflected on every single web page of our website. Right? So right here if we type in Hello, Mom. Right. And it's put a line break if we save this. We've just done that on this application page. But if we go back to our our site here and hit reload boom! It says, Hello, Mom, on the about page. If we go to our index page, Bouma says, Hello, mom, on our index Page two. That's kind of cool. So there's a lot of things on a Web page that are the same for every single page. Think like navigation. Every website has a navigation bar at the top of the screen, and for the most part, all of those files are all those navigation menu things are the same. So if you had that same navigation on every page of your website, let's say he had 1000 Web pages on your site. You'd have to put that 1000 times on every page. Well, that's no big deal. But what if, a year from now you want to add a different link to the menu at the top there? Well, you'd have to go back and change that that navigation thing for 1000 Web pages. It would take you forever to do that, but with rails, you just come over here to our application file, make your little change like that, save it boom. Now it's that changes reflected on every single page of your website um, copyright notices at the bottom footer things at the bottom of your page. Those air often always the same on every page. So you might put those in your application file. So anything you want to be the same on every single page, sticking in your application. That html file makes changing those things over time. Super, super easy. And it's just very important so that Oh, and also go to Snout says my stock market app appear at the top because we changed that title thing right here. So very cool and pretty simple in the future. We'll do that exactly that will put a knave bar at the top of the screen, will put that in this file, and that'll be cool. So that's all for the application file. In the next video, we'll start to look at creating links there a little bit different than regular HTML links . These they're gonna be embedded ruby links, and we'll look at those in the next video 17. Ruby Links: look in this video. I want to look at links. So every Web page has links to different pages of the website, and rails creates links a little bit differently than you might expect. Normally you could create links using something called an A her F tag. This is an HTML tag. So we might say, um, home about about me like this. So this is a normal HTML link, and this will work. So if we save this and come back to our after we see this new, uh, little about it really would hear about me link if we click on it, it goes to the about page. So that works. You can do it that way. Nothing wrong with that. But Rails has a better way to create links that sort of update automatically. If things change over time, If you're routes change, the link will change. So, I mean, think about in the future. If we change this about page two about, underscore me. For some reason, the legal department says we need to be about me instead of just about So we changed the route. Well, that might work, but now this link note doesn't look work, and we have to go back and update that. Well, we might not like to do that. So instead of using an HTML link, we can use an embedded ruby link and it will update automatically. It's just better. So how do we do that? Well, to this, we need to use something called well embedded. Ruby, First of all, tell you what that is, and that is just this right here. So we've already seen right here. This is embedded Ruby. Anytime you want to use Ruby, the programming language on an HTML page, use this embedded Ruby and all that involves is just an opening tag with this percent equal to sign and a closing tag. And then anything you do inside here, that's the ruby, right? So there's something called a link to tag. It's just link underscore to. And then we say what we want this to be. Let's call this about me. This is the text that's going to appear on the screen. And then finally, we need to tell it where to point the link, Teoh. And this is kind of where we need to find out the Route two point that too. And how do we do that? Well, let's head over to our terminal here and type in the command rake routes. And what this will do is this will sort of drum up all the routes were currently using and give you information about them. So it has taken a second here, but there we go. So we only have two routes, right? This is from our route Stott RB file that we've been made messing around with already. So we have our route route. This goes to the home page and we have this home about route, and this goes to home about this is the controller, right? So what we need is the prefix right home underscore about is the prefix that we need to use in our link to tag. So I could just right click and copy this head back over to our code. And after the common here, I just paste this in, and then we put an underscore and then path all of these end in half. So this is the home about half right? And that's pretty much s. So if we say this head back over to our page and reload this link is now There was before, but now if we right click and view the page source, we can see it looks just like a regular HTML link like we had before. But it has been generated by rails using that embedded ruby code. So we've got that we can also do. Let's do another one and let's go equal Teoh Link underscore, too. In this one, we'll call this one home and what do we want? Well, we could look back here. We want this to point to root. So that's the root path, right? So we just type in route Underscore path and we close our tag as always. And let's put a little bar in between them just for fun. All right, so we save this and back here and hit Reload. Now we can click on about me. It goes to the about me page. We can click on the home. It goes to the home page if we want to. Like I said earlier, change about me to just about. We could do that right here in our application file. One time it's changed like that. Save it very cool. So those are embedded Ruby. It links. They're just better. Like I said, if we change the route later on, that will update, and it's just it's just cool. So those are Those are how we do links with ruby on rails and a better ruby, and the next video will start to look at partials. 18. Partials: OK, moving right along. And this video I want to look at partials and a partial allows us to pull in code from another file and use it in another file. So in this case, I'm looking at this knave barcode up here for a look at our code here. It's just these two links, but you can envision a regular NAB. Our might have a dozen different lengths, all kinds of code and all that stuff. Now we could put it in this application dot html file, but it probably be probably be better to put that in a separate file and then just reference it on this application page. So that's what partials Air Force. So head over to our views Home directory, right click and let's create a new file and I want us just well, we could just come over here and let's just copy this code. It's just paste it in here right now. We want to save this, and this is kind of weird. Let's save as and we want to save it in this home directory, but we want to save it as an underscore and then the name. So let's call this knave bar dot html dot e r b Notice the underscore. That's the important thing. All partials haven't underscore as their name. That's how Rails knows their partials, right? Just how it is. All right, so that's cool. Now, if we want to access this, use this. We need to call our partial. We need to render our partial. So let's head back over to our application that html file here and then where those links, we're where we want them to actually be. Just create some embedded ruby and we want to render. And then home. What do we call that knave bar Now you're gonna wanna put, like, Nah, bardot, html dotty are because that's the name of the file. But don't do that. Rails knows. Since you're calling this render tag, it knows you're calling a partial, and it it knows that you're looking for knave. Bardot. Hmm. Adi R B, you don't have to be explicit. So finally, let's close our tag. And if we save this head back over to our website and nothing has changed, he's still work. And that's cool. So the benefit of this obviously is Now we just have this one line of code in our application dot html file. Right? So if down here at the bottom, we wanted to put a footer with, like, a copyright or something, we could do that, we would just go, you know, like here, render home. Uh, I don't know. Footer. All right, we saved this head back over here to our home thing. Create a new file, and let's just go center copy. Right? See, I don't know. John Elder center. Right now. If we save this while sitting says we want to make this a partial, so we make it underscore. We called it footer dot html. Dottie RB. Okay, that seems to work. Our application file is calling this. I have this over just to make it look good. Have that in just to make it look good. All right, so if we save this, come back here. Now we have this copyright thing, and it's on every single page. Right? So pretty simple. Uh, we want to make a change now. We don't want it right there. Let's put a bunch of line breaks. 12345 I don't know, save it. Just playing at this point. Now it goes down a little bit. You get the idea. A partial zehr. Pretty important and very simple. And that's how you do it. So I think we're pretty much done with this just very basic website creation. Now, we need to sort of move into more advanced stuff and make this look like an actual website , cause this isn't a website, but it does not look good. These links up here, Not very pretty. None of this stuff looks that good. So in the next video, we're going to start to install the bootstrap CSS framework and sort of make this more more stylish and more, uh, cool looking, I guess. And they will start in the next video. 19. Bootstrap Overview: Okay, We've got a pretty good basic framework going on here. But like I said in the last video, this is not look very cool. The kids would not like this website. It would not be popular. We need to make it look better. And the way you make a website look better usually is with CSS. Dance for cascading style sheets lets you style your web page. Right? So this is not a course on CSS. It's a whole other thing nobody really ever learned. CSS. I mean, some people surely do. But for the most part, you use a framework that does all the work for you. And we're gonna use something called Bootstrap. It is the number one CSS framework. It's completely free as super super popular. It was created by some guys at Twitter and they made this thing. It became really popular. So they spun it out a twitter. And now they do this full time. It's taken on a life of its own. Tens of millions of websites use this so head over to get bootstrap dot com. And this is the website, and we're gonna play around with this in the next few videos, but we want the documentation. Oh, I should mention right now it looks like Ron Version 4.3. Chances are it doesn't matter what version you're on, but if it's a major version, change like version five, then it may not sink up to these videos, but we're on 4.3. It will likely be years before they get to five. And so it should work, no matter what version is, as long as it's less than five. So we want the documentation and just gonna spend a second here kind of looking at some of the stuff you can you can dio. We probably want components. So you know you can do these different color things. Alerts. Ah, see there's buttons. Click on here. You can have these different colored buttons to your website and generally to use bootstrap . You just copy the thing like this, paste it into your code, and it just works. You might have to tweak it a little bit as we'll see. Ah, there's cards. It's a nice little card thing. All right, Carousel like a slide show type deal. You've probably seen these on websites, you know, uh, what else we got forms. Jumbotrons. Just a big box. We might play with that. Uh, here's nab our will. Definitely use this. You see right here this is just a nab. Are you paste this code in? Tweak it a little bit and boom, you got yourself a nice looking nab Our so all kinds of stuff you can use with this. Like I said, it's completely free. Doesn't cost anything. It's very easy to use. The hardest part actually is installing it on rails. So unlike next couple of videos, we're gonna do that. It's not bad. I'll show you how to do it. We'll walk you through it, but yeah, pretty cool. So you're gonna want to get used to playing around with this website if you plan on using this and we will in the next few videos so you'll see what it's all about and stuff, but very, very cool and completely free. So I guess that's all for this video. The next video we'll jump in and start installing this thing 20. Install Bootstrap: Okay, So there's really kind of two main ways to install and use boots. Drive with rails in the first way is just to come up here to the getting started session and copy these two lines. Are these two sections of code into your application file? It's like right here. This is a CSS reference. So if we look at our application file, you can see there's style sheet references right here. So just underneath that, you would just paste in that line of code. We also need to copy this JavaScript stuff. This stuff will go at the bottom of our application that HTML file like, right here. All right. It's just where these these things go generally, you know, if you do that, that will work. That's all you have to do, really. And and you can use bootstrap. Now you're not really using your not really installing it by doing it this way. You just sort of reference referencing it on your website, and it calls those files from the bootstrap repository. So if you do it this way, your site will be a little bit slower to load because every time a page loads it has to call that import those files and use them right? It's likely not a huge deal. But if you want to actually install this the right way, we need to actually install it. And that's what we're gonna be doing in this in this video. So what we need is a gym file or a gym, and we need to add that to our jump. Also, we need the bootstrap gem, so almost always gems come from a website called Ruby Gems dot Ord. So what we need to do is just head over there and it's gonna open another browser. It's just Ruby type ruby gems dot org's. Now this is the main repository for all Jim's. There are millions and millions, and millions of them. They have been downloaded. Looks like What is that? 35 billion times? This is a huge website. This is the official sort of rails Jim Repository. So we just want to find our gym. So let's go boot strap and we can see there's one that's been downloaded 2.7 million times . This one's been downloaded 29 million times almost, but this is version 3.4. You remember we're on version 4.3. So we want the latest version 4.3 and it looks like these air similar. So it's probably this one. Okay, so this is actually a multi step process, usually to install a gym. You just come over here to this reference right here and just click here to copy it, and then you head back over to your gem file and just anywhere in here, right? Click and paste it in right and save this now. Normally, we would then just come over here and type in bundle install right normally. But bootstrap is a little bit more complicated, so there's some other steps we need to go through first, and in fact, we need to read about it. You should always read about it, but especially this time, So what usually want to do is come down here to either the home page of the documentation. A lot of times these are the same thing. There's click home page to see and knows this is going to get up. We're familiar with Get hub and you could see here's some installation instructions, So first things first, they want us to add that reference to our Jim file. We did that. Now we need to import bootstrap in this directory app, assets style sheets. And then right here. Um, let's see. Actually, we need Teoh. Well, let's just copy this. Come over here. So style sheets application that CSO we go toe APS assets style sheets and here is application dot CSS. But this is calling for application dot SCS s So instead of doing that, what I'm gonna dio is copy this. I'm gonna create my own file right up here. So in our style sheets, I'm gonna right click and create new file And I'm gonna pace that end and I'm gonna goto file save as and let's just save this as bootstrapped li dot CSS dot s c s s application. That s CSS CSF. Okay. Yeah, that'll work. So now we come down and keep reading. Keep reading. It also wants us to install J query. I'm pretty sure we already have that. So go back to our Jim file and look through here and we don't have that. No, we sure don't guess. This version of rails does not come with Jane Query. Interesting. So we need to copy this and add this to our jump file. Just put it right here. Paced. Be sure to save this file. Control s all right. We're not done yet. We also need to add these things to our application dot Js file. So this is javascript stuff. So we need to head over to our APS assets Java script folder and then inside of this application dot Js which is says right there. We need to pace those references. So I'm gonna just paste a man. I copied him from the other page. Now they need to be above this dot line. Right? So look through here and see that none of these air already listed here and it looks like they're not, so Okay, we're good there. Save this file Control s see what else? While the stress Rather Uh okay. All right. So it looks like that's it. Make sure the file has a C s C. S s extension. If you have just generated a new rails, Abbott may come with a CSS file instead. If this exists, it will be served a wa. So rename it. Uh, okay. So instead of renaming it, I just created a new one that should work. Okay, so now we've gone through and done all the things that asked us to do. Now we can type in bundle install to install Bootstrap and the J Query. It was put in our gym, vile. So, look, you'll notice it's fetching stuff from ruby gems dot org's. And in fact, if we look at our gym file, all of these gems come from ruby gems dot order. That's kind of cool. It's installing SAS, which is part of boost traffic. Guess okay, so it may take 10 seconds and take three minutes of my take 10 minutes. Just sort of depends. You never really know. Usually it goes pretty quickly, so we see bundle complete. Everything seems to be working now. Usually we don't have to restart our rail server, but this is sort of a major thing. Bootstrap integrates into a lot of things. So it's a good idea to restart our server before we go on. So, uh oh, I should also mention this is their server. Get bashed terminal, and you notice there's a whole bunch of stuff in here now. So every time we go to a Web page. The browser makes a request to the server for that Web page, and then it returns a response. So we see all of these responses every time we've gone to a Web page. This is kind of cool, because if you get an error and you can't figure out what's going on, check here cause oftentimes you'll get a little error message here that tells you exactly what's going on. So just a little side note. So now we need to hit control C to get out of this server and then let's run it again. And as soon as it comes up, we'll go back to the Web page and hit, Reload and see if bootstrapped was installed correctly. All right, so take a look at everything here, look at the text. Look at the font. Look at the colors. Bootstrap will suddenly change everything. So if we hit reload and everything looks the same, it hasn't worked, hasn't been installed. But if everything is a little bit different, we know it's worked. So if we hit reload boom, everything changes a little bit. The links are now blue. That font is a little bit different. Everything is pushed to the side here just like that. And, uh, we're good to go. Now. The first thing that I always do when I installed Bootstrap is I come back over to our Appert who are application that html file and I wrapped that and I wrap this yield command with in a give with class equals container. And this is just a pure bootstrap thing. If we come over here and clothes are deaf tag, what this does is it takes everything on for save this. It takes everything here and pushes it over a little bit. So we're not just right on the edge like that now, I didn't do that for our links. We could have, right? We could have put this, Let's see here. And then it would have contained that. So if we save this and run it, these will bop over. But I don't necessarily want that. I want the knave bar to go all the way across to the very end. So I'm going. Teoh put that back. So it was like that. So that's bootstrapped. Pretty easy to install this thing. A couple extra steps we had to jump through, but all in all. Not too bad. In the next video, we'll start to create our actual and have bar they're gonna be using, and that'll be in the next video. 21. Bootstrap Navbar: Okay, so moving right along. We've got bootstrap installed. Now we want to create a knave bar, so just head back over to get bootstrap dot com. Click on the documentation and they come down here to components and we want a knave bar. So let's go to nab our now. That's not the same as knaves. Those air different. We want to have Boer like this thing that goes across the entire top here. That's a naff bar, right? So network and just scroll down here and find one that we like. There's one that just has the name of the thing. This one has a little icon. I think there's maybe ones with different colors. I just want the very top one here. So that's this one right here. I just click copy. Now we head back over and we want to put this. It's kind of close some of these a little bit hard to read. All this stuff was closed. Some of this stuff and we want put this intern AB are partial that we built a few videos ago. So gonna views home? Nah, bar and we see these two links so underneath them, I'm just gonna paste and that code that I just copied and I'm just gonna copy this and take them out. I'm just gonna hit control s to save this and head back over to our site and just hit reload just to see what we have so far. All right, so that's pretty good. So far, I don't like this light color. I like a darker color, so we can actually fix that by heading over here to the very first line where it says now of our light. Just change. That's a knave apart. Dark. It's just a bootstrap. Thanks. So if we saved this, come back here and hit reload, Boom! I think that looks much better. Search this green button. I'm not a big fan of that. So we want to change that color. So how do we do that? Oh, just come over here to buttons and we can see the different colors that are available. I like this secondary one. So let's use that. It's just be tiene dash bt and secretary secondary talk. Just add that class to that button. So let's head back over here, and we don't even necessarily really need to know what HTML is. You just kind of looked through here. And if we scroll down, we know that search button is towards the bottom. So here's a form. Here's a search button. Here's a bt nbt and outline. Success. If we look back here, that's the screen success we want secondary. So we just change it from success to secondary. And that should do the trick. So I'm just gonna type in secondary, save it, reload it to make sure it worked. Okay, so now it's Grey. I like that better. Ah, nab art says up there. That's not cool. Let's change that. What we wanted to say there, let's call this stocking. It's a terrible name, but I'm bad at naming things. Reload. Okay, Stocking. Cool. Now there's a drop down. We don't really need that he's disabled. We don't really need that. I want to keep this link. I want to get rid of all of these other things. So let's start with this. Disabled it Scared of that? I'm just gonna kind of look through here until I see the word disabled. And there it is. So I kind of click here. This is the link Here's an ally opening tag in an L I closing tag. It's highlighted, so I could just sort of delete that. Save it, reload it. And boom, that's disappeared. Okay, one down. Now, we don't need this drop down, so let's get rid of that again. I'm just eyeballing this. I'm looking for up there says drop down. I go up to the corresponding L I I click on it when I do the closing. Ally highlights. So I know I just highlight all this and delete it. So for save that boom, we want to keep this link, But I want to get rid of this home. I don't like that light color. I want it to be more gray like that. So again, just kind of looked through here. Boom there. It's his home. And here's an ally in the closing Ally. So wait it and save it. And boom, Now that's gone. Eso this link in this stocking, we need to fix these links to actually work, right? So what I can do is at the top here repast in our original links, and here we want this to say about and we want this link to be Well, actually, let me just copy this whole thing. Just paste it right there. So main difference here between these two. This is embedded Ruby. But this one has this class Naville Inc. And we need to keep that knave link class. So how do we added class to our embedded Ruby link? Well, we just add another comma and type class colon and then paste it in. I believe that will work so we can get rid of that one. Here we go. Let's say this and back and hit, Reload and boom. There's is about if we click on it, it goes to the about page. So it works. We have these to appear. We need to get rid off. So let's get rid of one of them about because we've got that one sorted out. Now, finally, we need this home one, and we need it to go where it says stocking, right. So I'm just gonna do the same thing again. I'm just gonna copy, and then I'm gonna come up here where this this thing is and was gonna pasted in and again well, instead staying home. We wanted to say stocking and we have this class and have bar Bram. So we need to have put that in there just like we did with the about link. So, class, that's too many. Too many quotation marks. Okay, so that looks like work. Get rid of that. Okay. So save this moment of truth. Run it one more time, Bouma. If you click on this, it goes to our home page. If we go look on this, it goes to our about page. Now, this is a little bit too close to the nab our for me. So you can change that a couple of ways. We can do it right here. Out of a line break instead. I'm probably gonna want to put that in the application file just because now let's go to go to line breaks, push it down a bit. Save that and reload. Yeah, I think that's pretty good. Let's try it with just one line break. Looks pretty good of stocking about. All right, so we're pretty good to go now, So we've got one link up here. Well, to actually, we've got this thing. It doesn't actually work yet. We'll work on that much, much later. But That's pretty much all there is Teoh creating? Ah, really pretty cool nab our very easily. We just copied and pasted on did a little tweaking. And uh huh, that's all there is in the next video, I'll talk very briefly on sort of sort of mobile first design. So your website looks good on a cell phone or whatever. We'll look at that in the next video. 22. Mobile Ready Design: Okay, So in this video, I want to talk about mobile first design making your website look good on a cell phone, right? Super important these days, Mobile is like I don't know if the majority of Internet uses is done on a cell phone, but it's up there, so your website needs to look good on a cell phone. Luckily, Bootstrap has stuff built in that allow you to make it look it on a cell phone automatically. But you need to do it specifically. Or else it won't. It won't work. So if we come up here and click this little guy and go more, more tools and developer tools, I'm using Google Chrome so I could do that. We could see this is what our website looks like. Uh, responsively. And that's another word for mobile. Ready. If we click here, we can look a different cell phones. So on a galaxy s five, this is what our website looks like. And on an iPhone, it looks pretty good. Click this little hamburger I've had and we can resize it and see. But when we dio, it doesn't change size, which is not great, right? It's not specifically responsive. That's not cool. So let's close this. Now. Let's head over Bootstrap and I forget where it is. Maybe even get getting started. Yeah, there's a starter template and you'll notice this right here. This meta tag and it says view port. Vieux Port is the bootstrap thing. Well, not just bootstrap that allows your website to be mobile. Ready. Right. So we need to make sure this is added to our application files, so I'm just gonna highlight it. All clicked. Copy head back over to our application dot html file. And let's look at this again. Where is this at? It's right below the head thing. So that's where we're gonna put it. Teoh, Right below our head thing. Well, rebel or title tag. Just paste it in in the same view port. That's what a mobile first thing is a view port, and it'll scale and shrink to fit. It won't shrink to fit. So let's say this. Come back to our page here and hit. Reload. Now, when we re size this boom, you notice it changes. All right? It is now mobile mobile ready. So if somebody pulls it up on an iPhone it looks like this. It's got a little hamburger moves down, and this is sort of resized. This thing is still centered, and we're good to go now. This will become more apparent and more obvious as we build out our page and our app with more, you know, stock market stuff. Those things will resize as well, and it will be much more obvious looking that it does now. For now. Just got to trust me that adding that little meta tag is super, super important and literally, that's all you have to dio and your website is now mobile. Ready? I mean, even like 5 10 years ago, if you wanted to design a website to be mobile ready, It was hard. It took a lot of work. He had a higher several people to write code for months on end to get it working correctly . Now boom, literally. Just add that one line and it's mobile already so very ready. Cool. So I think that's all for this video, and that's all for the bootstrap stuff. We've got a good sort of ah, structure of a website going here. We've got a cool nab or things are starting to look a lot better. They still don't look great because we haven't done a stock market stuff yet, but we're gonna start to get into that in the next video. 23. Stock Quote Gem: Okay, so we've got our basic at Bill. We've got the layout, the sort of basic functionality. It's looking okay. Basic design going on doesn't look particularly amazing yet, but we're getting there. So now it's time to jump in and actually start doing stock market stuff, adding stock market functionality. So we're gonna use a Ruby Jim for that something called Stock Quote Jim. And it will connect to 1/3 party service that will allow us to retrieve stock market data and then do stuff with it. So before we look at it, I just want to give you a real quick history. When I first started using this gem, it pulled Thesis OC market data from Yahoo yahoo dot com, and that worked for a while. But then Yahoo discontinued that service, and so the gym didn't work anymore. The guy that made the gym updated the gym tohave it start working with Google so we would get stock market data from Google. After a couple years, Google discontinued their stock market service. So now this is the third sort of ah version of this this gem, and it pulls data from another website. We'll take a look at that just a second. But if in the future you watch this video and it doesn't work because that service has discontinued their service like Yahoo did like Google did, that's okay. They'll have updated it to a different version. Just used the latest version, and you should be able to figure out how to use that new version, and I'll show you how as we learn about how to use it right now. So, like I said, when I first built this course, it was pulling data from Yahoo, and suddenly all my videos don't work because the new Google service didn't quite sink up. That was slightly different, and some people didn't know what to do, so hopefully you won't have that problem. But let's take a look at it now. Real quick. Head over to ruby gems dot organ. This is the website we always go to get gems and just type stock quote, And right now it is version two point. Oh, and there's been almost 60,000 downloads, so we could take a look at it here. And here's the home page. But first, well, let's look at the home page real quick guy talks about how Google discontinued their stuff you want to read about. That's kind of fun. Here's the installation. All we have to do is add this to our jump file would not quite that we need to actually use the latest version, so we'll go back and get that, and then that's pretty much all we have to do. So let's just do that real quick here and just gonna go here to gem file, click this to copy it and let's pull up our program here. Well, some of these and we want to come down to the gym file and open it and then just come down and paste that in there. This is what it looks like. Like said, if this version number has changed in the future, that's okay. I'll show you how to deal with that later. Let's go ahead and save this. Pull up our terminal here and again. We're in the sea stocking directory and we want to run bundle install. Any time we install a gym, we run, bundle install, and sometimes it takes 10 seconds. Sometimes it takes 10 minutes. Uh, he just never quite know this one. I think should go pretty quickly. There's not much to this stock quote gem. Uh, that, um we'll leave it to do its thing. And in the meantime, we will look at the documentation for this guy. So click the home page. And again, this is just to get home page and so we can learn how to use this thing right here. You get a current quote with the following syntax this. So all we have to dio is paste that somewhere in our AB, and it will retrieve a stock symbol for us. Very cool, Right? So let's just go ahead and copy this. Let me pull the terminal, see if this is done. OK? It looks like it's done. We've got no errors were going to go. I'm gonna pull up our other git bash. And this is where our servers running. I'm gonna hit control C to break out of the server, and then I won't run it again. Any time we had a new gym. It's just a good idea to restart a server. So we'll go ahead and do that. Now we can head over to our views, app, views, and let's just go to our home page was this. We want the index page and below this let's just paste this in right now. This is Ruby, so we need to wrap this in an embedded ruby type. There we go. Tag. Hey. And now, what symbol do we want to look up? Have a preference? Let's look up Facebook. FB. And this is just a stock ticker symbol for familiar with those. Sure you are because you're watching this course. All right, so we save this and now head back over to our site on our index page and hit Reload. We will get this funny little thing that we got air right here. We don't need to create that. I don't think that's the error reason, though. Well, let's get rid of that just to see Let's save this head back here and reload this guy. See if we still get this error. No. Okay, so that was the problem. So All right, we get this weird thing. And what is this? Well, this is actually an address in memory where the thing we just went and got is stored. So we said, go get data on Facebook. Stock quote. Jim did it brought it back. Now it's stored in this little weird memory location, right? So this is a ruby object if you're familiar with objects. Object oriented programming. Ruby is an object oriented programming language. That's what this is, so we can do stuff to this weird little thing to get information out of it. So let's come up here and I'm going to Let's create an instance variable, and I want to get rid of that, the equal to means printed to the screen. That's what the equal to sign there. It means in better Ruby. And I don't want to print this to the screen at the moment. So actually, let's just do regular variable. Now we can come down here and print out that variable. So I'm doing here is I'm assigning whatever this waas into this variable. And now I can do object oriented things with this variable on. One thing we can do to variables or objects is inspect them. So if I go dot inspect, close my tag, that should show us all of the information that this thing is retrieving. So if you say this, come back here and hit reload Boom, We get all of this information right now. If you come back here to the documentation, you'll notice that the quote, the stock quote, Jim returns all of these things, right? Symbol Company name primer exchange sector calculation price open, open price. Open time. The close price, the high, the low, the latest price. Latest source. Latest time, all of these things, right. And if we look, that's what we're seeing here. So, for instance, at symbol Facebook at company Facebook Inc. The name of the company. If we look here, that's company name. All right. Company name. So how do we access any of those things? Well again, Rubio's object oriented. And these this isn't a ruby object. So to access anything in there, we just take our object, which is the stock variable slap a period on the end and then just reference whatever we want to look at. Look up. So say we want to look at the company underscoring name. Is that what that was? Look at this again. Yeah, at company name, right, which is at company name. So all we have to do is what I've already done. Just like that. So this should print out the company name onto the screen. Save and reload room. Facebook, Inc Very, very cool and just that easy to get anything we want out of here. So let's come through here. And what do we want to look at? Um, latest price. Current stock price of Facebook is so said a company name. We just put latest price. Let's save this and reload under $90.26. And let's head over toe Google Finance and just type in Facebook to see, uh, quote, look up a Facebook. Currently, it's 100 $90.16 under $90. 26 cents. He's don't quite always sync up. I hit Reload on here. Now it says $190.20. 16. So basically the same they've rounded or something. Uh, depending on where you're pulling your data and exactly what second it is. You know, these prices change throughout the day constantly, So every second change, the press changes. So here it's 190 16. If we hit reload, it should change in 1920 1920 Right. So, uh, Ellis Ellis cracked so very, very cool and just come through here and look all of these different things you can pull out of here, right? Just by doing that. Now, if you want to do more than one quote more than one ticker symbol, you can just add a comma and put it in there. That's kind of cool. So there are other other methods as well that you can use all of these things and let's see , So we would use each of these things in the original call that we make. So we pull back up our stuff here. We're calling this stock quote, and we're calling stock dot quote. So instead of that, we could, for instance, if we want to use this dividends right, we want to see what their current dividends are. We could just pull this instead, right? So if we copy this, come back here and let's just paste this in sort of reference here, stop quote. This is the same. This is the same. But right here, instead of quote, we're calling dividends right, and we'll look at all this more in more detail going forward. So that's all for this video. I just wanted to show you how to install the gym and had to basically use it in the next video. We will spend a little bit more time looking at this and then start to talk about Web forms because right now we're just like hard coding Facebook in here. But we want to have a Web form. We can type in a specific symbol, and then it will go do its thing. So we'll look at that in the next video. Hey, guys, just a quick update. Sure enough, the stock quote, Jim updated like I said that it could, and this is kind of a major update. It's the same company giving the data as earlier in this video of the stock quote Jim. But now they require an A P I key. So you have to sign up for one of these e p i keys and then implement it in your code in a slightly different way, and it's still free, and it's still pretty easy. But I'll show you in the next video how to actually do that. And like I said, these things are always changing. These these ah gems are always updating, and this one isn't such isn't too bad one. We could still use the gym in the exact same way. We just need to make a couple of tweaks, and I'll show you how to do that real quick in the next video. 24. API Key Walkthru: Okay, So, like I said in the last video, the stock quote, Jim has actually updated. If we go to ruby gems dot org's, we see. In fact, it's not three point. Oh, and earlier in the last video, it was 2.0, and so we click on this and then go to the documentation. You see, there's actually a sort of a major change this time. So all of the core, all the code for this course from here on out won't work unless you make this little change here and the big changes you need an A P I key. That's sort of normal with AP eyes often times to use an A p I from 1/3 party, they will require you to sign up for a key that allows them to figure out who's doing what with their a p I. So if I'm using their A p I and I'm making millions of calls and that's creating a drag on the system, they comptel. Oh, it's the guy with that key doing all this stuff, and they can reach out to me and say, Hey, stop doing that or or cut out my account or do whatever. So it's a normal standard procedure out. It was kind of surprised that these guys didn't require an A b i G, but now they do. So I think probably we started using this stock quote gem. Many, many, many people started using it. It created a strain on their system. Maybe. And so now that requiring a Bianchi no big deal. We just have to click this link here to sign up for one. And then once we get the key, we need to put this line of code into our app any time we want to make a stock market, uh, request Any time we want to get any kind of stock data from this gem, we have to first put this line of code in and you could see it looks very similar to what we looked at in the last video, which stays the same to make our stock call We go stock quote colon colon stock got quote and then pass the symbol. Well, you could see now this other line of code that we also have to add first looks similar has stock quote, Colin, Colin stock and the new and then inside of here says a p I key And then you just paste in your a p I key. So pretty simple. Pretty straightforward. But I'm gonna walk you through it in this video. Now, first things first, click on this a p I key thing and create an account. So I'm gonna go john at kota me dot com Password, no company name. Leave that blank, agree to the terms and then created account. Once you do this, they will email you right away and, uh, you know, give you more instructions. No, this thing you could pay for its for 99 a month or 49 a month or $9 a month or $0 a month. We want the $0 a month one just for our purposes. We can get by on the free version now. Okay. Says we have to email. I went to verify your email, so let me do that real quick. I only put up another screen, and sure enough, there it is. There's a link. You just click on it. Okay? It's asking for my password. My email address. Okay, so let me pull this over, see if again. So it asked me for my email address and my password again. And then it says we're going to send you this little code. So I go back to my email. And sure enough, there's an email with a code. And let me just copy this and paste in the code, submit the code. Okay, so now we've been verified and all that stuff. So now we just go to this ap I tokens thing over here, and you could see you have a secret key in a publishable key we probably want to use. You can use either of these and you could see the secret key has been blurred out. I don't know why they do that. You can click on it to get your secret. You But you don't need the secret key. You can use this key right here. And, uh, so you might want to copy that and put it somewhere. So Okay, we've got the key. Now what do we dio OK, Yeah. So here's our key. Now, what do we do with this thing? Well, then come over here to the Ruby Jim stock quote documentation and just come down here and look for this right here. Stop. Quote stock that new. So let's go ahead and copy this copy. And now head over to our patient. Any time we want to use this thing, we have to put that line of code. So in our case here, all we got is our index page. Right now, all we've got is this call so above this. What I would do is just paste this and and now, instead of this, we want to put our actual key. So where did that go? Right here. One click here to copy this head back over, and we want to make sure and wrap this in quotation marks. Uh, didn't have quotation marks when we copied it from that screen. But you want the quotation marks and just pasted in. So that's kind of Israel long, so it's scrunched on one line. Let's go here, see if I can change that word wrap. Okay, so there we go. So it'll look just like this now, obviously, use your own key. Don't copy mine. I'm gonna actually close this account as soon as I finish. Recording us to this key won't work after this anyway. But now just save this. And from now on, this should be enough Teoh for this thing to work. I guess it this stuff here won't change it all. Um, and that's pretty cool. So now we're doing this on the index page, and that's fine right now, but in reality, you're publicly and probably gonna want to put this in your controller. And I don't know if we've really gone and, um, updating this video so I can't recall if we've talked about controllers yet, But it's an app. Um, yeah, controllers. And then you find your home controller, right? And like right here, I've just pasted this and I just created a variable, and I just paste this in right now. Notice we're not doing this on an HTML page. You got put these little brackets. That's what makes it work on an HTML page. This is not in html pages. This is just a ruby file. This is our controller. So we have to put those brackets. We could just put that coat. So in this case, every time this is our index controller for our home page are index page. Right? So now every time that web page gets called, it will make this call and sort of longest in with a p I key, and then you're going to go. So in the future, whenever we do stuff in the controller, just remember, always put this line of code. Really? That's the only main change. Just put this letter code in your controller as we do things. Now, as the course goes on, we're gonna have a lot more controllers. We're gonna have a lot more things. Um, we're gonna start interacting with the database. And I won't mention this again because I've already recorded those videos the old way using the 2.0, version. Um, so you'll have to remember to put this line of code in yourself. And if you don't, you'll get an air. And if you email me and say, Have got an error, I'll say, Did you put this line of code? You go, I I forgot. So you know, over time, hopefully I'll get to updating those other videos. But in the meantime, you're just gonna have to remember to put this, um, this guy in there and really, that's all It should be. So pretty simple, pretty straightforward Like I said, these stock quote or these gyms are always updating, especially stock quote Jim, pulling financial data from a website that can change often. So it's really a matter of you got to get good, that coming back to the gym, file documentation and reading through here because six months from now they'll change the version four point. Oh, in your app might stop working. Or maybe you're watching this course at that time and it's updated to version four point. Oh, our version 3.5 or you know something and our code might not work. You're gonna have to come through here and read this and see why it won't work. Now. If you were watching my course and you saw it was version 2.0, and you did my code in your app didn't work. You could have easily come here and just read this, and it says right off the bat. It requires an M. P. I key is not required. We didn't do that. Maybe I should do that and then you could have done it. And then how do you use the A P I key? Just keep on reading through here and it says right here to globalize to globally initialize a stock quote with a valid A p I key. He sat line a coda, so you paste that line of coded and now it works. So these things often aren't very complicated, but they do take, you know, a few minutes toe, look there and read and see what's going on. So I sort of like, task you in the future with doing that if this thing updates again, which it will. So at some point I try to come in here and update the videos as I can, but I've got, like, 50 video or 50 courses, and they're all dating and changing. So sometimes it takes me a while to update things. And in the meantime, you could have just read this yourself and kind of figured, I know it's hard because you're learning right now, and it's not so easy. Just toe, you know, read things and do them, but really try and start getting in the habit of reading things. The documentation, especially because it's gonna help you into the future, will be able to figure these things out on your own. And that's what we really want. We want you to be able to figure out these things on your own. That's what being a coders all about. And that's fun. So in the next video, we'll jump back into the normal sequence of the course. Remember, you'll need to also change your gym file if you haven't already. Um Teoh, stop! Quote three point. Oh, and my videos. From now on, it will still stay two point. Oh, but you use three point because now you know how to use it. And that should be good. So all right, so see in the next video. 25. Stock Quote Walkthru: Okay, So before we move forward and actually build a form to play around with this, I want to take a little bit more in depth. Look at this stock quote, gem and some of the things that it allows you to pull some of the data. A logical. You see, all of these different methods. You can pull some really cool stuff. So, like, for instance, if you want company information, if you click on here, you can see it will return this stuff. The company symbol, the company name, uh, the industry. A little description, which is kind of nice. The CEO and stuff like that, uh, slick through some more of these. One of the things. Look, cool stats. If you want specific stats on the company, there's all kinds of stuff. Market cap, 52 week high, vits, dewy glow. All of these different things here again. A symbol price to book numbers. Five year change percentage, all kinds of really cool stuff you can access. I'm just by putting this thing like, for instance, company, we can put company here instead of quote. We could just that company, and then we wanna inspect this so Let's save this. Come back to our page and just reload and see exactly what we got here. And we see the company name. Facebook Inc Technology. Facebook Inc is the world's largest online social network. It produces blah, blah, blah, blah, blah. It's kind of cool things. So if you're building amore in depth app, you can really pull some cool stuff out of here. And it works the same exact way if we want. You know, if we want to grab this description, we just do it the same way. Instead of inspect, we type in descriptions. Save this, come back here and hit, reload and boom! We get this cool description thing right? One of them was logo right? That's kind of cool to take a look at that, since that a company we want logo. Let's go ahead and inspect this to see what it returns. Saving, reload, and we get it looks like a U R l for a logo. So that's cool. We could grab that instead of inspect. Let's type. Let's pull the girl so we know what we're gonna get here. But I just want to make sure so we get this girl, and we can use that to actually create an image. If you don't know how to create images with, uh, HTML, you just call it image to Agweb's I am G S R. C and then the Earl. In our case, it's this thing. So we just copy this, paste it right in there, and that should work. So let's save this. Come back and hit. Reload. We can't Facebook's logo like, just very cool. It's completely free. Pull this data and do anything you want with this. So hopefully your imagination is just blown right now and is going wild with cool things you can do with all this stuff. You could build all kinds of different APs just with this. So very, very neat. Let's go. No, let's play around. Let's go, Apple. I don't know what's their logo look like? Why it looks like an apple, right? So very, very cool and just that easy. So I spent some time kind of go through here and news. What's this all about? I want to create a a news website. That's kind of cool, right? Latest news on a company, all kinds of stuff that you can see piers who are apples, piers, Microsoft, Nokia, IBM, B B, R y. Where that is Hewlett Packard, Google and whoever. That is so very cool. Very interesting. So take some time, play around with this look and see what you want to use for your app and just that easy. We're gonna dive into this in more detail as we build out our app and make it do some of these things. But I just want to spend just a second kind of pointing this stuff out how easy it is to actually access it and use it. So that's all for this video. In the next video, we'll start to build out our Web form so we can type in the company symbol ticker symbol instead of hard coding it into the Web page itself. And we'll do that in the next video. 26. Stock Forms: Okay, so we've got this thing. It's sort of doing some stuff, but we want an actual Web form in order to be able to type in what we want to look up and have. It actually works so we could use this thing up here and we'll fix this toe work a little bit later. Right now, I just want to spend a couple of minutes showing me how to create your own form. Now forms with Ruby on rails. I find that a lot of people don't know how to create their own forms, and there's a reason for this. We learned earlier that Rails has a lot of generators we used to generate our Web page. You know, at the beginning of the course there they have, ah, generator for database stuff. If you think about a database, database requires a Web form for you to put data into the database. So when you use the rails generator to create database stuff, it will create the forms for that automatically. So a lot of people just use that, and so they don't really know how to make their own forms by themselves. So we're not doing any database stuff yet. We just want to be able to type in a form in it. Go get the information. So we need to create our own form for that. So that's what we're gonna do now. So head back over here and let's get rid of that little guy. I'm just gonna paste in this code and walk you through it, hero, quick. So remember when we created our links earlier, we created a link to tag. Well, now we're going to use a form tag and it's kind of similar. We start out with Embedded Ruby here and equal to sign because we want this on the screen and we're just calling form tag. And now we need Teoh. Tell it where to point. So when we click the button, where does it send that information? And we wanted to send it back to this page, this route page. And just like when we created a link to this page, we used the route path. Same thing here. We're going to send it to the root path and the method that the form uses is post. We're gonna post the information from the form and when you work with forms, it's it's ever Onley, post or get and post is the one you're always going to use. You're always gonna post your data. Hardly anybody uses get for anything. Post is more secure. It hides the date a little bit better. So we always want to use post with are forms almost always. And then do we're just gonna loop through here and do each of these these next lines and then here at the bottom, we end our our do loop right? We end our form tag. So inside a here, in fact, let me just say this real quick and then come back here and hit Reload. And you see, here is what we got. We got this little thing and we've got a button. Right? So this thing right here, this box here is input Field is this text field tag and we need to name it something, So I'm gonna call it ticker. So when we send the data off into the world, we're sending a ticker off right nil. It's just something you put in there and then placeholder Quotation mark, inter tip ticker symbol. You see, this is wrapped it onto another line just because our my screens a little scrunched there. This this all goes on one line normally, but inter tickler ticker symbol. That is just this right here, you see, sort of grade out a little bit, and as soon as you start to type, it disappears. That's called placeholder text. And ah, that's all that is in size 50. That's just how big I wanted to form to be put anything you want. Finally, we have the submit tag. This is look up, and that's this thing right here. So if we click this now, we get an error right away because just like with links to Web pages, we have to have a route, right? And we have no route yet even created it. So we get no route matches so you can head back over to our CONFIG directory in our routes file. We've played with this before. We have two routes there right now, and instead of ah, get round or a route route. Now we're creating a post route. We want a post, and we want that slash just the route you are. L And we wanted to point to our home. Uh uh. index controller and we'll see why in a second. So this is a slightly different looking routes. I'm gonna go ahead and save this if you're interested and you want to learn more about routes. There's a ruby on rails guide. They have rails, guides that are official guys that are really, really good. And they're at guides dot ruby on rails dot org's, I believe. Yeah, these guys, they're fantastic. They're very in depth there very long. I mean, 20 pages, 30 pages, 40 pages very long and in depth, but they're worth looking at. If you go to the guide index, there's one on rails routing from the outside in right here, and it will teach you everything you ever wanted to know about different kinds of routes you can create. You read that if you want. I'm just gonna leave that for now. So now if we click this, we don't get an air anymore. It just goes back to the page. So if we type in something like, look up, it just disappears and it routes us back to the page. That's because we haven't written any code yet to tell our program what to do with the stuff in that that box there. So I think we'll look at that in the next video 27. Stock Form Controller: Okay, so we've got our form. We've got our route. Now we need to talk about the controller. So any time you fill out a form, you pointed towards a specific page, right? So we're pointing this to our route path. This is our index page, basically right. So we know since rails is a model view controller thing that every page of review has Ah, controller that goes with it. So are index Page has an index method in our home controller. And that's just you come to our controllers, open our home controller. That's just this method right here, Index method. So we don't have anything in these methods at the moment, But we can put all kinds of stuff in here, and that's what we want to do now. So I'm gonna headed back over here, and I've changed this back to quote it was logo. So just gonna copy this whole thing and delete it and bring it over here to our home controller and paste it in. Now, Inside the controller, we don't have to use embedded ruby. We just use regular ruby and inside of a method, which is what this index method is you don't usually use actual variables. Use something called instance variables and those air designated with an at symbol in front of it. So we create this at stock instance variable. And it, uh, we'll do the thing that we've been doing now we don't want to put apple here, right? We want to put whatever is in the form. So when you fill out a form, it sends it as a parameter parameter, and the program name is whatever the form where we go, the form field, Right. This in this text field, whatever that is called is what the parameters for that thing is. So were what we called it ticker. So we want the ticker Paramus in our controller. So to do that super easy, we just reference Haram's rams and then square brackets. And then just whatever the name is in ours was ticker, right? So now what happened is the formal get filled out this ticker parameter be sent here, it'll do all of this stuff and then return the result into this at stock instance variable that we can then use on our home page like we've been using this in the past like we did it right here instead of at stock or stock now is at stock. That's the only real difference. Now there's a couple of sort of error Handley type things we need to do. So any time this page or any page for that matter gets called with Ruby on rails, the first thing that happens before the pages even shown is the controller gets run. So when we go to this page, this home controller fires up and it runs the index method, and in this case it's saying, Okay, send ticker to the stock quote thing and get the results Well, when we just go to the page the first time we haven't filled out the form yet. There is no ticker symbol. So if we just save it like this, we're going to get an air because, like I said, we haven't filled out that form yet and it's saying type and simple required. We haven't put assemble and we haven't put a ticker, and so we need to do a little bit of error handling right here, and we can do that just with a very basic if statement. So we're gonna say if I'm just gonna copy this Paramus thing. So if that do that otherwise end. And this is just a basic if statement Ruby f statement. And it's saying if Paramus ticker exists, then do that otherwise just sort of ignore this whole thing and don't do anything, In which case, there's nothing in there, right? Basically. So that's one part of it. So we could save this. We need to do the same thing, though, on our index page down here, because the first time we come to the page before we impressed Symbol, a ticker symbol. There is no ass stock yet, right? Same thing. So we need to do some embedded ruby and just do another s statements. It was a if at, um stock and close that and do this otherwise, and and this is just very, very basic air handling. We need to do actually mawr error handling that this and we'll look at that, probably in the next video. But this, I think, should do the trick. Now notice this has an equal to sign because we want to print this onto the screen. This and this don't have equal to signs because there's nothing there we want a print onto the screen. We're just running some logic or saying, Hey, if this exists, do this. Otherwise don't do anything right. So we save this. Okay, I think that will do it. Come back to our page and hit. Reload. Now we have no error if we type in Facebook, for instance. Look, look up. Fills out the form, shoots it over to the controller. The controller does. That thing looks up, the thing brings back. The result assigns it to the at stock instance Variable. And then we print out at stock dot company Name onto the screen and boom, it worked. So very, very cool there in his Facebook weaken. I don't know play around and do Apple Apple Inc. And we've just chosen to just do the company name. You know, we could do all kinds of stuff, right? We could the line break. Let's put a line break here, too. Push it down the screen of it and we can apps cautious. Copy this whole thing and paste it again. Head over to our documentation and what looks good through here. Symbol. Latest price. Maybe. Just grab that and then we can that onto the screen. Save it. Come back here. Search again for Facebook. Facebook Inc currently $189. We could play around even Mawr and put a dollar sign on the screen. Right, looking up again, whatever you want to dio. Very, very cool. So that's the controller. That's how to connect our form to our controller. In the next video, we're gonna have a little bit deeper induce amore error handling because there's some things that could go wrong with this. And we need to address that moving forward, and we'll do that in the next video. 28. Nothing Error Handling: Okay, so our form works, sort of. But there's potentially some problems here. So, for instance, if we don't type in anything, we just click. Look up. What happens? Well, we get an error, right? Undefined method map. Did you mean to have it? It's all messed up. So that's the first thing we want toe sort of fix and do a little bit of basic air handling . With that, it's pretty simple to do. Let's just pull back up our code and head over to our home controller, and we've got here basic logic were saying, If this thing exists, do something right. So if it if we fill out the form and we're sending something, but that something is nothing that becomes a bit of a problem, too. So there's probably a bunch of different ways we can sort of fix this. I'm going to just sort of create a new, if statement just going to start over basically. And let's say if crams ticker equals nothing. Quotation marks with nothing in between just means nothing. A double eagle to sign. That's Ah, Ruby conditional statement thing. It's saying, if it it's a single equal to means Ah assigning double equal to means comparing if you're curious about that. But if it equals that, then let's create a new instance Variable called nothing and set that equal. Teoh. Hey, you forgot to enter a symbol a symbol, right? Else if e l s I f s I f s I f else if Parames ticker and do this So see, and then finally end. So we sort of modified our if statement and we've added an else if to it And if so, basically, what this is saying is saying if this equals nothing, for instance, if they forgot to type in anything instead of throwing an error, just create an instance variable called nothing and then say, Hey, you forgot to sort of Ah, inter your your whatever Otherwise, check to see if it exists at all. And if it does do this all right. So if we save this and head back here and hit reload should work now, but it won't do anything, so it just re sends us back to our index page. But we have what's up? Come on, Way hadn't have now this nothing instance variable that we can flash on the screen if we want to. So let's go ahead and do that. And, uh uh, we want the index page. So down here, if at stock exists, then put these things out. All right, else if at nothing exist, we want Teoh print out at nothing otherwise and okay, so save this and try it again. You forgot to inter Assemble. If we type in Facebook, it gives us the thing. If we try again with nothing Hey, you forgot to inter symbol so pretty simple. And it's just take a quick look at this again. Here is just a basic if else if statement if the stock thing exists, do with stuff else. Check to see if nothing exists. If it does print it out onto the screen and then end same thing here in control or we start off in the beginning. If this ticker thing equals nothing, create this instance Variable. Otherwise do the thing as normal and ah, that's how that goes. So a little bit mawr error handling. But there's still more we need to do, and we'll look at that in the next video and to give you a hint of what that is safe. We type in just gibberish. And look that up. There we go. What happens then? We get absolutely nothing listed. So we need to sort of figure out what to do about that. And we'll do that in the next video. 29. Junk Error handling: Okay, so in this video, we want to do the last bit of error handling that we really need to dio. And that is to figure out what to do when somebody just types in a bunch of gibberish. And in this case, it just returns nothing. So it's kind of hard sometimes to pin this one down, because there's several different ways that this could go depending on what is being returned. So the first thing I would dio is already know what to do. But if I didn't know what to do, I would come up here to our index page. And the first thing I would do is I would pull a at stock di inspect. All right, so we want to see what gets returned when we send out gibberish. Does gibberish get returned? Does it return an air message from the A. P I itself does. The gym itself gives some sort of error message. What's going on so we can pull at dot inspect. If we save this, come back here, reload this guy and then just, you know, it's gibberish. We get absolutely nothing. It's not returning anything, so that's kind of weird. right. So is it returning like nothing, or does it not even exist? That's my next question. Because if you remember back in our controller right at the beginning, when we did this Hey, you forgot to enter a symbol. We did this. If statement to test on whether or not there was it, was returning, nothing. If they didn't type anything, it just returns blank. Right? And we do it like this. We do in if statement, we say if this equals nothing, then do something so we could try that. So let's head over down here and let's go create another if statement inside of here. If we go at stock equals nothing, right, and then close this, then we want to print out on the screen of that stock doesn't exist. And then and our little if statement here. Otherwise it just bops on down and does its thing. So if we say this and run it and then just type in some gibberish again, nothing happened. So it's not returning. Nothing, it's is if it doesn't even exist. And we can run this again with Facebook just to make sure everything's still working and still working So it's just not returning anything, which is kind of weird, right? So let's get rid of this in an old version, it would return just gibberish, and it would crash the entire app, in which case we had to use a ruby error block. We don't have to do that anymore because with this version of the gym, it's not returning that stuff that crashed our app, so we don't need an error block. We now just need to determine if it's returning anything at all. And we just now did. We just now saw it wasn't even returning anything. It's a Ziff. The thing just shuts down and it doesn't assign anything to stop. Quote right. So how do we fix that? Well, if we go to our home controller and inside a here, this is where stuff gets done. Normally we can create an if statement inside of here. And remember, when we test to see everything exist well, actually, we need to do it after that because this needs to run and then we need to test. So let's go. If at stock, if it exists, then let's create an error. Variable. Instance Variable. Let's say Hey, that stock symbol doesn't exist. Please try again. All right. Whatever. And then underneath that, we need an end, Aereo. All right, so if it exists, print this out. We already know it doesn't exist, so it's We need to test whether it does not exist. So to test, to see if it does exist, we just go if at stock to test to see if it doesn't exist, we go if there we go at exclamation point stock. All right, just Ribhi. Okay, so now we can print this onto the screen if it exists, and we'll do that. Honor index page. We just do this anywhere. Come on down here and then go. If, as at error was our tag and then what? We just want to print out at error, otherwise, just And Okay, so let's save this. Hopefully that works. I think that will work. Yep. Looks good. All right. So it's come back here. Hit, reload. Nothing was entered. We click. Nothing. It says, Hey, you forgot to enter. Assemble. We type in Facebook. It says there's Facebook and its current price. If we type in just all kinds of nonsense Hey, that stock symbol doesn't exist. Please try again, which is just at error, Which is this? All right. So it's important that this if statement gets executed inside of this is else if statement and below this Lina code right there because otherwise gonna throw everything off. So I think that's pretty much it for air handling. We should be good to go now. We sort of covered all the basic things that you want to sort of. Ah, look out for whether or not they entered a symbol at all. Whether or not they created a symbol or inter assemble that Israel. And if they did enter, assemble this riel isn't returning the results, and it seems to be doing that. So, uh, should be good to go. So I think that's all for this video and for this basic stock section in the next video will go on to the next part where we build a user management system so that I can log in. I could sign up for the website. I can log in. I can enter stocks that I wanna watch and it will keep track of those. And then if I log back in later on it'll show those specific stocks to me, and if somebody else logs in, it will show their specific stocks to them, and we'll start to build that out in the next video. 30. Install Devise: Okay, We've got a raft coming along here. We can look up stocks, symbols and things and get some data. We haven't really done a whole lot of work on out putting different things. But we can now put something at least to the screen right now, and we'll be fed up a little bit. But now I want to talk about creating a user management system. So what we want or have to be able to do is we want people to be able to join, you know, sign up for an account, and then when they log in, we want them to be able to create a portfolio of stocks. And then for each one, it will automatically show whatever we want to show the price of the stock. Whatever information. We decided to show what we wanted to keep track over time of those stocks for those people . And we want them to be able to sort of have ah, profile where they can update, you know, change their email address if they want to automatically change their user name, that sort of thing. So, back in the day, building a user management system like that would take months, if not years and a team of people. But now we could just use it. Jump for it. And the most popular one, I think, is something called Devise, and it's completely free and we're going to download and install it in the next few videos and should be pretty cool. So let's head over to Ruby gems dot order and just search for devise. And here we go. If almost 50 million downloads very popular, and ah, 4.6 point two is the current version, if it's a different version by the time you watch is probably not a big deal. So let's go ahead and check this out. And here's the home page and this is a little bit more complicated to install. It's not bad, but there are definitely more steps than normal Teoh to install. This, luckily, has really good documentation, and we just scroll down here. It tells you getting started how to install this thing, all the different steps, all the things you need to dio and we're just gonna go through here and bang all of these out. So let's head back to Ruby Gems and the first thing we want to do is grab the gym file reference, so click that to copy it and let's go to our stocking app, go to the gym file and just paste that in. Save this Now. Normally, we just, you know, from the command line the terminal. We would type bundle installed to install this, but I want to take another quick look of this just to make sure that's the first step. So we'll scroll down, down, down, down, down, starting with rails getting started. So we've had the gem now, then run, bundle install Next. After that, it wants us to run a rails generator to install it further. So first of all, let's do the bundle. Install steps. Copy this it over to a terminal pasted and bundle install again. We're in our C stocking directory. It enter boom, boom, stalling devised bundle complete. Okay, so now we can clear this screen. Head back over the documentation and it says it wants us to run this. Rails generate. Devise. Colon installs. Okay, again, we see this. Rails. Generator generators do all kinds of stuff automatically behind the scenes. We really like them. We've used them before. Let's back up. So it's just paste in this command rails generate devised colon install. Now, this is gonna do all kinds of stuff, and it's going to give us some further instructions on things to do. So OK, now here's some other steps that we manually have to dio. And the first thing it's saying is define this thing in our in fig environments development dot RB file and wants us to add this line of code. And what this is doing is it's creating a mailer. So like, imagine somebody forgets their password. They can click a thing that says, you know, send me a reminder or, you know, reset my password and it'll email them the the the password Reset Link or something like that. So we need to add this. So I'm just gonna highlight and copy, and we we need to open our config environments development dot RB file. So it's head over here. So here's config Uh uh What was it? Config Environments development dot RB They're just gonna scroll down to the bottom of the page here and ah, sort of in Dent end back over here. Uh, went wonky. Here's what we watch all of this. Right click Copy and back over. Pasted in control V Command Viana Makary, you just right click and paste. And now it's just saying local host, which is and then Port 3000 which is our website here. This is local host 3000 Right? So head back over here and Control asked. Make sure this is saved. Having close that. No, let's take a look again. Here. Okay. In production host should be sent to the actual host of your application. So what that means is same thing here. We can copy this and I'm not gonna make this change cause we're not working in production. This is a development environment we're working Teoh are working on. Later on, when we push our code upto Roku for web hosting, That's a production environment. In which case we would make this change. So the same thing here we come to config environments. But instead of development, we do production and then we just do the same thing. We scroll down here, come down and just paste in. But here, instead of local host, it will no longer be local host. So if we have our own website called stockings dot com. We're type stockings dot com there. Right? Whatever. We're gonna be using her. Roku. So it's gonna be like, um, stocking dot Roku dot com or something like that. Right. So, uh, that's what we'll have to do later on. So I'm just gonna delete this for now because we don't really care. Save this and close it. Okay, so let's take a look again here and see what the next thing is. Now it's saying we have to have a route route that looks like this, but we already have that. We've already done that. If you remember back, close this up in our configure routes file right at the beginning. We created that route route, so we don't have to do that again. Close that and let's see next. It wants us to put this code in our application dot html file. Remember, that's the file that has everything, uh, that we want on every single page or app, you know, has the HTML code. We've looked at that before, and what these do is this is a flash message. So when you like, log in a little message, message will flash up That says log in successful, right? Or if you enter the wrong password, a little flash message will pop up That says, you entered the wrong password, things like that. That's flash messages. And we're going Teoh actually tweak this in the next video to make it look a little cooler cause we have boots draft so we can add some CSS to it and make it look good. But in the meantime, I'm just going to, right click this and copy it and head over to our I M. Use Layouts folder and in our application dot html and then just right above the yield inside of this container. I'm just gonna pace this stuff in here, and we'll just leave that there for now. Go ahead, save it. Like I said, we're going to make those look cooler in the next video. But we'll leave that for now. Now, finally, the last thing it wants us to run this another generator command. Remember, we can use the G to abbreviate generator or generate so it's rails, G devise views, and what this is going to do is very cool. It's gonna create a whole bunch of one pages for us with the views, the pages that devised needs. So, like when somebody wants to sign up, they need to go to the sign up page. This will create the sign up page. When somebody wants to log in, they need to go to the log in page. This will create the log in page. All those different kind of pages. Sort of go with this. This generator will create them for us. So let's just copy that and back over already here to our terminal taste that in rails G devised views here injure boom, boom, boom. It has created all of these things and it looks like the role in APP views devised and then stuff so we can head back over to our app here and inside of our views folder inside the APP directory. We now have this devise this device folder and it's got a whole bunch of folders in it and all kinds of pages, like registration. You want to have a new registration sign up, edit your registration, all kinds, stuff, passwords, stuff, sessions, stuff. So we're looking at all of this stuff in the next video and the video after that, probably in the next video. We're gonna look at these alerts and we'll fix them a little bit. And uh huh, that'll be in the next video. 31. Devise Database: OK, we've almost finished installing, Devised and I was in this video. I was going to play around with these messages. But then I realized we haven't quite finished installing device yet. There's still a couple more steps. So let's head back over to the device website and we did this. Rails generate, devise, install. We did that. It created all the views. We'll take a look at those, probably in the next video. And we did all this stuff with the mailer and all that stuff. And now we have this command that we need to run. So devise is installed the views. But the big, powerful thing about devises the database. So this will keep track of users that will add users to the database, remove users from the database update users in the database. It's all about the database with this and databases in a lot of programming, languages are kind of hard with ruby on rails. They are super easy as we'll see right now. So this is the command to generate a model, and we don't We're gonna copy this. I'm gonna come up here and paste it here so we don't want a name our model model. We don't want to name our database table model. We want a name it user, because we're creating users right now. So I'm going to change that to user and copy this. We can head back over to our terminal and pace that in so the command Israel's generate another generator. You can also type in G if you want gorgeous copy and pasting. So rails generate. Devise user and go ahead and hit. Enter and see what this does. But it's gonna create a user migration and in rails. In most database things, databases are two step process. The first step is to create a migration, and the migration tells the system what you want to dio, right? It creates the things that you want to dio. And then the second step is to push that migration into the database and sort of make it live. So always a two step process. So what this commanded is it created a migration. You can see it's right here in APP models user, and it's done some other things, and it's creative. A migration file in database. My great, we'll take a look at that and, uh, yeah, so very cool. So let's head back over here and let's go D B my great. This folder didn't exist. Now it does and has this folder in it with this big, long line of numbers, and that's what migrations usually look like. Big long lines of numbers and the numbers mean something. But we don't care what it means. It's, Ah, probably a date stamp SC 2019 0509 That's today's date, as is probably the minutes or seconds of the day that it got created. We don't care about that. What we want to look at real quick is what this has done is it's creating a table called users. Remember when we typed in our command, we typed in user. The convention is that then plural eyes that in the database. So Rails does that for us, and it's gonna it's gonna ask for. It's going to create an email, encrypted password, password, reset tokens and then this daytime thing. And there's some other stuff here. An index of the database thing Very cool. So we don't really care about this file is just kind of cool to look at, so we can go ahead and close that, um, way want to look at their anything worth looking at and models. It's also created this user RB model file. It is always a database stuff again. We really don't care what most of this stuff is, but it's there if you want to kind of look at it. So okay, it's created all this stuff. It's created the migration and we have to push that migration into the database to make it sort of live. And to do that and back over to the website here we just run this rails db Migrate command now pretty straightforward. Paste it in if you're using an older version of rails. Version four, for instance, were on version five. The command is rake db Migrate, sort of like when we raked the routes in version five, they changed all the rakes into just rails. So now we type in rails db migrate. But if you're on an older version, you would type rake DB migrate. The same thing holds true for the rake routes command that we've used in the past to look at our routes. You could also type of rails routes. I'm just used to typing rate cause I've been doing that forever. But anyway, the command here to push our migration into the David database. We want to migrate it. It's rails. Devi Colin, my great. So we can do that. Boom, boom, boom. Looks like it's created a migration. Now we can sort of confirm that by hang back over to our database older, and this is where the migration was. Now we have this schema file which wasn't there before, and a schema a database schema is sort of like a snapshot of the database. It tells you what's in the database of the moment. So in our database we have this table users that we just created in that table. It holds columns for email pass where password token, such etcetera, some date stamping stuff, lips. So we know when they signed up when they last updated their profile. Things like that keeps track of that and very, very cool. So this is all done for us now. This database is live, it's working. It has completely Everything that needs to be done is done, and that's it. We don't have to do any sort of sequel database stuff. We're using in our gem file. This sequel, like three Database handles all the things behind the scenes and seek a light three is a very, very lightweight database. It's not good for like a real website. So when we push our code up to her Roku later on, we're going to switch out the sequel Light Data Base for something more powerful, like Post Press. But it's it's literally as easy as just changing the reference here in the GEM file. You don't have to do anything programmatically behind the scenes. All of this stuff we just adjusted with the migration will work with whatever database we use. That's one of the really nice things about rails. It abstracts out the actual database for you. You have to do anything. So now, very quickly. Let's head over to our config. Our routes file and we've got a new set of routes. That device is created, so in the next video we'll look at those will start to look at the views that we created in the last video and, well, if we have time play around those message flash messages we looked at in the last video as well, and they will be in the next video 32. Flash Messages: Okay, so we've completely installed. Devised were ready to use it. Now, Um, the first thing we want to do, though, is head back to our server and hit control C to shut it down and then run that rails s command rails server to restart. It devises a major thing that we've added to our program. We definitely need to restart our server for all these changes to take effect. Also, I want to back to our other terminal. We need to sort of back up our code. We haven't done that in a while, so get add, period, get commit dash a m and then added of eyes, or maybe what I want to say installed, devise whatever. Boom. And then get pushed to push that up to Roku. Boom. Done. OK, So, um, like I said, the last video devices created a bunch of routes for us. It created a bunch of new Web pages. It also created the routes to those Web pages. So let's have been raped routes to rake our routes and see what those new routes are. And boom, we got a whole bunch of new ones all of this stuff. So before All we had was our route, our home in this post route. So all of this stuff is new, right? So these are the routes right here. We use those for creating links to each of these pages. These air the actual your l's so we can right click here and copy this. Users slash Sign in and we can head back over to our site here and paste that in and you see, boom, we have a sign in page. Now, this doesn't look that great. Well, style it a little bit with bootstrap. Make it look very cool, but we have a log in page. Awesome. Now, if we click here, we get this little invalid email or password. That's the flash message that we added to our application file a couple of videos ago. Now, that is not that cool. So let's just fix this right now. So let's head over into her application. No, round one, uh, APS views was the Devise one layouts application file. And instead of right here putting thes two lines of code that we paste a couple of videos ago instead, I'm gonna put a partial cause we're gonna create some code here, so let's go render as called this home slash, um, flash creating flash messages. Okay, so then in our home directory right here, let's create a new file. And let's save it as underscore flash dot html dot e r b. We've done this before, Created a partial. Now, let's grab this code here and copy it comes and paste that into here. So this will work, right? This is what we've already have. We've just made it into a partial, but there's something better we can do, and I'm just gonna paste in this code, and then we're gonna talk about it, So ah, see, is there anything No. None of this works or none of this is similar to this new coats. I'm just gonna delete all this. So what we're doing here is this is a flash sort of loop that rails has and it will list this sort of system name and message for us, and then so that is basically just that this is the loop for each message. We want to do a thing. And then here's in ending of the loop. Right inside here. I've created a new class and where I got this stuff was straight from bootstrap. In fact, we can go get bootstrap dot com, click on documentation, come down to components and alerts. The very first thing are these alerts. I kind like these yellow ones. So this one is warning. Danger is red. Green is success. Yellow is warning. So we just come down here and look for the warning one. And it's this class right here. I just flat out copied this C diff class alert. Alert. Warning. Roll equals alert. I just copied that straight. Here, give class alert. Alert. Warning. Um, I added this alert dismissible, which we'll see what that is in just a second and then roll alert. So here's opening tag and here's a closing tag for that. Inside of that, I created this button, and what this will do is you'll notice on the bootstrap site. There's no way to close these. So I had a little button up in the corner here with an X, and if you click it, it'll disappear. So that is what this button code is, right? So it's class closed Data dismiss alert, which connects it. Teoh this thing, I guess. And then inside of here. I just This is just a necks. I just typed X and keyboard, right? And I made it small and sub sub means up small up or something up, and it puts it up in the corner, sort of like So that's that. And then this is just the content of the message itself, right? Whatever. Devise returns, it'll spit it out right there. So kind of weird code. You might just want to copy and paste this. You can find this on the get help. Get help account if you just want copy and paste this that's fine. So go ahead and save this. Now let's head back over to our site here and hit. Reload. And then let's click this again. Log in email or password. Looks like maybe we need to restart our server again, huh? Extra. This has been saved. Go to the application file, make sure that has been saved. Render home flash. That looks good. Okay, so save all that now. I'm gonna come back here and we start the server just in case. That's the issue. Okay, so that's restarted. I wouldn't come back here. It reload and click. Log in and Boom. Now we get this, do a little box up here. If we click that, it disappears, let's see. That's not great. Let's go back to our flash thing and let's add a line break, pushes it down the screen of it. Save this and back here and try it again. And boom. Now that shows up like that, Very cool. And, ah, pretty simple. You can see the little message here, invalid email or password. And you know, if you like Green use success instead of, um, which one do we use? Warning. Right? So you would just come here instead of alert. Warning. Have been alert. Success. I like the yellow, so I'll keep it like that. So I'm very, very cool and pretty cool. So this is getting a little bit long, but there's some other things we can look at you user password. Try that one. No. Usually we want post things. Edit user, password, user password, cancel, user registration, new user registration. So let's try that when users sign up, copy that right click copy and ordered a browser from Paste it in that we can sign up Very cool. So I think that's over this video. In the next video, we'll start to look at these in a little more detail and will create links to them up here on the knave bar so we don't have to keep pasting him into the the Web browser. We could just click a link to do that, and we'll look at that in the next video. 33. Devise Links: Okay, so we've got our device views. We've taken a look at him a little bit here. Now we want to create links up here on the nab our teach of these pages. Now, if we rake our routes here, we could see there's a whole bunch of stuff. We don't need links to all of these things. And in fact, all of these things aren't actual pages like, for instance, is delete this. Deletes a session. It doesn't Actually, there's not actually a page for that. We'll talk about that a little bit later. But in this video, let's had three links to our nab. Our we want to sign in or let's say, log in, log out and sign up So we can head over to our APS views home, nab our and just kind of come down here and find this about link, which is this link right here and just next to that guy. We want to put these three new links for now, at least, so we could just copy this whole ally section and I'm just gonna paste it in control V 123 times. And so let's go sign up. Let's go log in and let's go. Logged out. Sign a plug in, log out. Let's do the log out one later. That's a little bit more complicated. For now. Let's just go sign up in log in. Right. So OK, everything else about these days the same. But we need to change the path from home about, obviously, to the sign up path. So head back over, Dr Dre grounds. Look for see? Signed up. Here we go. So, new user registration, what we want. Just copy this and change this. And remember, we have to put the underscore path after it. So new user registration underscore path. All right, and then here for log in again. Come back here and look for new use it. I'm just looking right here. The u R l pattern. We want to sign in. And that's probably this get guy, right? Yeah. So new user session, I believe so. Let's copy this back over here and again. Just paste the sand. New user session, underscore path. All right, so if we save this and back over here and reload these two new links so we could say sign up already there. So log in so I know. Log in. All right. Now we could put a forget your password up here, but that's kind of a big one. And if you if you go to law again, this is sort of where it needs to be anyway, so we'll just leave that there for now. Now, these links will change because later on, we're gonna create an account rights, and when we log in, we won't need a lot. This link won't need to be there. Will need to change this to a log out link. So we'll be able to tell based on whether or not we're logged in or not. Which links to show in the nab Our We'll talk about that in a few videos from now. But that's just the simple to do this and again also, after you've logged in, you don't need this sign up link anymore because you already have accounts. So well, we'll take that away as well. And, uh, replace the log in with a log out link. But we'll do that later on. After we've talked about sort of, ah registration and how to determine whether or not a person is logged in or not. That's probably a few videos from now. For now, I think that's all for this video. In the next video, we're gonna take a look at these forms and they're looking a little rough like this. We're gonna bootstrap if I them make them look a little bit better, and we'll do that in the next video. 34. Bootstrap Forms: OK in this video. We want to play around these forms, make him look a little bit nicer, and we're to use bootstrap for that. So head over to get bootstrap dot com, click on the documentation and then come down to components and then down here, find forms. Right? So these are bootstrapped forms are kind of nice. They kind of glow when you click on them. And, ah, stuff like that. That's kind of cool. So to use these, basically, what we do is wrap everything in a form group and then everything. We want a bootstrap. If I, for instance, these boxes, we give them a form control class as pretty much all there is to it. So not that complicated. So let's head back over to our code and let's open our app views. Devise folder. And I don't if we really talked about this or not, But these are the folders that have all the things So sessions. Whenever you log in, you're creating a new session. So if we click on this new that html you see, this is our log in page, so a registration if you want to create a new registration you want to sign up? That's a new registration. Is he hears? Sign up. Page. If you want to edit your profile later on. Look at that. Later on, there's the edit. The registration, right. You could have looked through some of these other ones. The password. If you want. Teoh, you forget your password. Page. It's right here. Change your password pages right there. And confirmations and mailers were pretty much leave those alone. So these are the three ones we want to look at. So let's look at the log in page, and that is just already got this up here. So we need to change these two, uh, text boxes and bootstrapped fi. These So I'm gonna head over here. I'm gonna copy this. You have class form control, and you could see its inside the form tag. So if we head back over here and look for our form tag, here's our form tag because he underneath it, we could just paste this in, and I guess above the ending form tag, which is right here. We just closed that Dev. Right? So if we say this and reload the page, not nothing's really gonna be changed. You see it in perceptively in perceptively. Whatever that word is. It changed just a little bit. You might have noticed, but not really anything. What we really need to do is at a class of form control. I'm just gonna copy this control. See each of these two boxes. Let's do that real quick. So we look through here, uses F dot label. That's the label. We don't want to mess with that. But this email field, this is the tag. We need to add a class to Soto at a class to this Pretty easy. You just put a comma class colon, and then quotation marks that could be double or single quotes and just have form control. So we save this and reload. Boom. We get this nice big glowy form now, right? So Okay, that one works. Now, let's do the password. One same deal. We just come down here, find the fat, the password field. Here it is. And again, we just add class. Colon and UCL put double quotes. This time. It makes absolutely no difference. We save this, come back over here and reload. Boom. Now, that was good. Now let's change this button. So head back over to get bootstrap and click on buttons. And here's some buttons we can use. We like the gray ones, so that's secondary. So come down here and look for this secondary, and we just need to add this class B TN Bt and dash secondary to our button on our page. So there's kind of come down here in f submit. That's the button. So we add a comma, a gang, go class colon and that we save this. Come back and hit. Reload! Bouma. That's done very, very cool and you see there's a space there. I think off camera added these two line breaks to push those down a little bit. You could do that or not do that. So OK, starting to look better, but it's still not great, right? It's all is very wide. I don't like it being that wide, so I'm gonna head over to layouts here. Or maybe it's content content, maybe no layouts and just gonna scroll down. Nope, not layouts either. Um, getting started. Maybe. No, Maybe it was layout. Ah, grid. There we go layout grid, and you can see there's different columns and stuff that you can do. So I'm going to scroll down and scroll and scroll and scroll, and we could see things are starting to move around. And here's this one. This one is centered right in the middle of the page so I can just grab this whole thing right here and copy it. And then at the top of our page, above everything, even the log in I'm gonna create a div with a class equal. And I'm just gonna pace that M now we need to remove the periods, cause when we put it in a class on the page, it doesn't need periods. And then here at the bottom, I'm just gonna It's already been closed. It looks like there No. What is this a closing tag to? I must have done it earlier. Yeah, you need to close your div tag there. So if we save this head back over here and hit reload, Okay. Now things are starting to look a little bit nicer. Everything's kind of centered. These things aren't so long anymore. What else can we dio head back over to components? There's all kinds of different things. There's cards you put it all in a card if you wanted Teoh. I don't really like that. Let's grab a Jumbotron. Jumbotron is just this big box thing, right? So, actually, we can just wrap everything in this Div class Jumbotron. So if we say this now, where do we want this? We want the Jumbotron center, so we're gonna put it below this thing. Normally, I would do all of this and tablet over, and then all of this have that over to make it easier to read. But now we need to close our Jumbotron tags, so that probably needs to go right here. Here we go. That over. Okay, so if you say this head back over here and take a look, see what we got? Yeah, It's looking pretty good, right? Yeah. I kind of like that log in a space underneath. There may be I'm just kind of playing at this point, so let's go Line, line break. That's a little bit better log in itself. We want it. Each one. Make it bigger. Well, they get preferred smaller back. Anyway, I'm just playing at this point. You could style this any way you like, You know, whatever you want. That's pretty cool between these two guys is not a whole lot of space. Maybe you want to put a line break there between these fields. All right, Here, maybe save this a little bit more spacing, whatever you like. You have complete control over this. So, uh, I like doing these bootstrapped forms. They're just nicer versus this is what it waas. Right. So, you know, this looks better to me than this. So I'm gonna leave the rest of these to you. The sign up form and the forgot your password form. So you just head over here and here's the password. The new page. Just bootstrap. If I those add those form groups and form controls just like we did here. All right, Form group in the form control classes. And that's all there is to it. So I'll leave that to you. You do that. And, uh, yeah. So that would be all in the next video. We'll start to look at, I think, figuring out whether or not a user is logged in or not 35. Conditional Navbar: okay. This video, we're gonna actually sign up. We're gonna law again, and we're gonna change. The links at the top on the NAB are based on whether or not we're logged in. So if we're logged in, we want to log out button we want and edit profile button. You will see the edit profile page, and we want to get rid of sign up Link. Obviously, if we're already logged in, we've already signed up. So I also just went in Bootstrap defied all these forms. Here, log in, sign up and forget your password. I'll leave that to you, or you can check my get hub repository if you want to see the exact code that I use but head over to our sign up page and let's just sign up. I'm gonna go John at go to dot com password firm the password, and I'm gonna type something incorrect in error. Ask for confirmation. Doesn't match. Okay. See, device has all kinds of built in things that are cool and work so sino. And you see it redirects us to our home page, right? And we get this little welcome. You have signed up successful flash message like we built earlier. So that's cool. Okay, so now we still have this sign up thing which you already signed in log in. You already signed in. So we need to change these links up on top of here and to reflect whether or not we're logged in or not. So how do we do that? We'll head back over to the, uh, devised documentation here that we looked at earlier and just scroll down past the installation. And you can see there's some controller, Phil filters and helpers. I'm going to use some of these. Most of these, probably. But the 1st 1 we want to look at is user signed in. This is just a little helper that comes with this, and you can use this in a ruby conditional statement. So we could say if user signed in show these lengths else show other links. So let's go ahead and do that right now. So I'm just gonna copy this, and we just used some embedded ruby to use this thing. So let's head over to our app views. Uh, see home? Nah. Bar and scroll down here to our lengths about sign up and log in in underneath the about one. That's where I'm gonna start to write this code. So let's use some embedded ruby and notice we don't put an equal to side because I'm going to do a conditional statement and if else statement. So to use NFL statement, this is just Ruby programming. Rio if and we just paste in that helper and that's it. Now we can we need to close or end are, if so, inside here. Now we're saying, if a user is signed in, show these specific links. So I'm going to copy one of these and what we want here is want probably two of them have this over. Have the whole thing over gives go and same thing here. I used to match up. There we go so we don't want to sign up and sign. Sign up and sign up. We want to Let's say at it profile and then here. Let's go log out. Soto editor profile. Let's head back over and look at our routes are ranked routes and we can just kind of look through here sign ins and in password password, password users edit. That's what we want, probably so edit user registration from a copy. I'm going to I like this. They're eo and right Click copy and headed back over here. So edit proof. I'll we want the edit user registration path. I think that should probably work. Save this. And now the, uh, the delete to to log out You're deleting your session. So when you log in, you're creating a new user session, and when you log out, you need to destroy that session or delete that session so we can head back over here to rake our routes. And let's look at this user sign in use assigning user signed out. You could see the verb most of these air getting post. This one is delete. So we want to destroy user session. Copy this, and now this is a little bit different. So we come down here to our log out link and right here for the path. It's the same as before. We pay said and destroy user session path. But then we also at need to add a method to this. So we go method colon and then colon delete. All right. And then we also need a comma. So the think that we can add this class in after that, so that should work. So it's going to save this head back to our page and reload. So now we get this edit profile in the log out with sign up in the log in are still there. So we need to right here. This is an if statement conditional statements. If statements are usually called if else statements. So if this do this else do that otherwise do that. So we need to add an else statement right here. So I'm just going Teoh, do another embedded Ruby and just typing else. And now inside a here, we can put other stuff. So the other stuff are these two links to sign up in the log in link. So I'm just gonna copy both of these control, see? Delete them and then inside it here, you sort of have these over pasty Zen. So looking at this as a whole, So we have there if and are we in the F? So if the user signed in, if we're signed up, if we're signed in, then put these two links on the screen if we're not signed in, but these two lengths on the screen, if else right? Pretty simple, Basic Ruby. We don't use a lot of ruby programming in this course. Little things like that. That's about it. So all right, so now we're seeing an edit profile and a log out. So let's click this edit profile. Look at this page. I bootstrap ified this. So this is the way it is and edit user a line break underneath there. I don't like that being smashed up, so let's take a look at that real quick. What are AP views? Devise and then registrations when we log in or when we sign out, we're creating a new registration. When we ended our profile work editing our registration, that's right here. And so right here, I think there we go. And just the same thing I just went through. And instead of creating a div with a form group like we did before, and then putting line breaks between each one, I just put form group in each of the classes with a field that was already there, so devised creates this class with a field. So I just went through each of these and just pasted in a form group. Just slightly different way of doing it. Funded from the father. And then, like before, we still have to add our class form control to each sort of box input button or input box that we want to play with. So say this. Come back over. Here it reload. Boom! This will bop down a little bit. Okay, so you notice it's already propagated your email address into this box. And then if you don't want to change your password, leave it blank. If you do want to change your password, go ahead and change it there. Confirm it there and then click update if you want to cancel your account and come down here and click this red button. And I made it red just by using a class B TN beauty and danger instead of Bt and secondary , which it was before. So you know you conform at this. Anyway, this sort of getting a little busy. I might break this into two jumbotrons, right? So, like, right here at it, user and cancel account. I might ah, take one of these dibs and right above that, put that in and then copy the Jumbotron and make another one of those, like right there may be. Don't like that? I don't know. Save this reload, right? Kind of breaking apart a little bit. Whatever. And you got use your back button there. That, uh, goes back. So we have had a profile. We have log out. If we log out, click this. It re returns us back to the home page and gives us this message signed out successfully. And I look at these lengths, they've changed back to sign up or law again if we log in in our email address, password and boom. These to change up again, up top. So pretty cool. Uh, nice little way to do a little bit of programming, but not too difficult. A little bit of Ruby. If you don't know Ruby, I've got courses on Ruby. It's a really fun language to learn and really easy. The thing about Ruby is it's almost like conversational English. So there's not a lot of like symbols and weird computer science e things. It's very just like English oriented. So, like any f statement, you just type. If it's just it's just very easy to do So if you're interested in learning Ruby, I definitely would. It's a lot of fun. It's really easy to pick up, and it should be cool. So I think that's all for this video. In the next video, we'll start to play around with our new database that we've got. We've got a new table of Devise a device table that has our user stuff We need to add now a stock database so that we can start adding stocks to our user accounts and keep track of your different portfolios. We'll start to look at that in the next video. 36. Stocks Database: Okay, So in this video, we want to start to build out our database table in order to keep track of stock. So right now, if we go to our website, we can have dinner ticker symbol, all right. And it looks it up, and it gives us a total of the current price. But if we reload this page, it disappears. And we want to be able to keep track of this stocks for our specific users. And that's why we're gonna start to do now that you mention that my head will hiking the other day up on the mountains outside of Vegas, man. Who, though? That's what the big gashes on my head, if you notice so anyway. So, user table, what do we want to do here? Well, let's take a look at our code and let's go to see d. B. We have this migrate folder. This is from when we created our devised migration to create our user system. If we look at our schema, we have this user table as email password tokens and some dates stuff, right? We've already looked at this before. This is just the device stuff. So databases are made up of tables, right and think of a table as a spreadsheet. It has columns and rows so you can have, like if you have a spreadsheet, you might have several workbooks, you know, several different. You know, sheets. A table is like the sheet. It's like a workbook. It's a you know, a set of columns and rows. So we have one table already our users table, and we need to create a separate table called whatever we want to call it stocks or stock or whatever. And then in that table will keep track of stocks. And we'll also keep track of who added those stocks. So right now, we only have one user, just me I can law again. But if you have this website of hundreds, thousands, millions of people sign up. They each want to add their own stocks to their own portfolio. We need to keep track of that. We'll do that in these stocks table, and then we'll sort of associate stocks table with the user table. So we'll be able to know these stocks belong to this user, right? So it's pretty simple to do that as we're gonna be doing in the next few videos. Now, when we created our first sort of database table devised did all that for us. We didn't have to actually do anything. So we didn't really learn how to do database stuff with rails, since just device did that. So this is how you actually do database stuff in rails. So, like so many times in this course, we're gonna use a generator. There's all all kinds of generators, and this time we're gonna generate a scaffold. And you know what a scaffolding is like in construction? If they're building like a skyscraper, there's always like a scaffolding around it, and the workers stand on it and they, you know, make the building. That's what this is, too. It's sort of like a framework that goes around and it, you know, it builds all of the stuff that we want to do, so it will create a database table. It will create all the stuff in the database that we need. It'll create ah, Web pages, views of create routes. It will do all the things that we wanted to do, and since it's a generator, it doesn't force with rail. So let's just do that real quick. Let's pull up. That's our That's our server. Alright, so we're in C stocking as always. And the command is as we've been in the fat in the past rails G stands for Generate. And we want to generate a scaffold s c A f f o l d. And now we want to tell it What? What do we want to name our table. So let's name it stocks, then you can name it stock or stocks if you name it stock rails were will plural eyes it as we saw when we created the user table, it turned it into users in the table. Same thing here. I'm just gonna put stocks this time to show you the difference. There's no real difference. It paralyzes it anyway. OK, so rails G scaffold stocks. Now we need to designate the columns in our table. What do we want to keep track of? Well, we want to keep track of stock ticker symbols, right? So let's just call this column ticker. And now we need to tell it what kind of stuff is gonna be in that column is gonna be numbers and the letters and words. What is it gonna be? Well, we wanted to be. This is gonna be letters like FB, Facebook. Ah, apple a a p. Els or letters. So those air strings and what that is is a ah, data type. A string is a data type. We don't really care. Uh, most of the time, if it's gonna be words and letters and things, it's gonna be strings. If it's going to be numbers, it's probably gonna be integers or or something like that. All right, so we want to keep track of the ticker symbol. We want that to be a string. What else do we want? Well, we need a user. I d We need to be able to track who submitted each of these ticker symbols. So let's create also a user underscore i d. And we want this to be a number, you know? So it will make that integer interviews just a whole number, right? And then finally, we also want to put this index on here in an index. Have you ever read a book? And at the back of the book, there was an index. That's what we're doing here. This is a way to speed up the process. We want to make these index herbal sort of. It just makes it easier to look up. It's a behind the scenes thing. We don't really care what or why. Just, ah, we just usually do that on a user i d. Type of column. So okay, I think that's it. So rails generates scaffold. Want to create a stock's table inside of that table table? We want to keep track of a ticker, and it's gonna be a string. We want to keep track of a user i d. And it's gonna be an integer. And that user I d will be also indexed index, herbal and Index, whatever. All right, So hit, enter. And after a second it'll a pup do all the things all right? And so knows right here. We got a warning. The model stocks was recognized as a plural using a singular stock. Instead, override with force plural. So it's gonna call. It's gonna create a stock, but it will look inside and it will be stocks. Just just what it does. Okay, so let's hold this stuff. It created a migration. It created some tests, stuff we don't really care about it. Created a route. A bunch of routes. Resource is route will take a look at that. It created a new controller. Up until now, we just have the one home controller and others a another controller. Ah, it created a bunch of views Index page, edit page show, Noon. We'll take a look at all these things more testing stuffs and help her stuff. And, uh, looks like even some Java script and style sheets stuff, all kinds of stuff. This is created now. We're not done yet. Clear the screen before we do the next step. Let's take a look at the code and looking our migration folder. There's this new migration. This was our original devised migration, and now this is the new one that just got created and you could see it's creating stocks. It's creating a table called stocks. Inside of that table, there's a ticker. The ticker is a string. It's also creating a user I D, which is an integer and also slaps on a time stamp. It always does that. Ah, what else we have. We also have that stocks user I D added as an index, so that's cool. But now, if we look at our schema, schema hasn't changed. It's still just has still just has the users table and all the user table stuff because we haven't done the second step. Whenever you do database stuff, remember, it's always two steps. You created migration, and then you push that migration into the database. So we need to do that. So server again. So that command is just rails D B colon migrate were migrating our migration. We're pushing our migration into the database. So we hit enter an error has occurred undefined Method strings. Did I misspell string? I did, Uh, that is hilarious. Okay, so let's go back to our migration. And sure enough, I miss Bell's strings. So let's go back here and look at Can we scroll up and we can't? All right, so what we can do here is just change that and save it. So it should be a string, not strings. What was wrong with me? All right, so let's pull this back up and run this command again. Rails db Migrate and boom, boom, done. We're good to go. So it's clear the screen and very quickly here Let's just look at this scheme again. And now, you see, before we just had the users table. Now we also have this stock stable and inside of there. There's a string for ticker, Not not strings. Uh, others user I d integer this date tamp date stamp timestamp thing just tells it when the thing is created. We like to keep track of that for different reasons. And then the user i d is an index thing. So that's pretty cool. That's really all there is to it. Now if we come back here and look at our app views. Now we have this stocks folder and inside of here. There's all these different files. If we go to our controller, we have now a stock's controller, so we'll take a look at these things. I think in the next video 37. Stocks Views: Okay. The last video we created, our new table, our stocks table in this video. I want to spend just a couple of minutes looking through all of this stuff. So first thing when I look at is the app controller. We have this new stocks controller. And first, let's look at our home controller. This is the old one. Remember, we had that index method here, and the about method and the about method doesn't have anything in it. But our index method, if you remember this, has the code that we used to go get our ticker symbol from the gem and return the result. So you look up Facebook and get the current price of Facebook or whatever. So this is our original home controller. Now we have this stocks controller and man, there is all kinds of stuff in here. We're gonna go through all of this and see what it is and why it's here. But just looking at it, you could see there's an index controller, a show controller, a new controller and edit controller. Create controller, an update controller and a destroy controller. And then there's some other ones down here. Stock. Paramus and set stock. The Paramus. Remember? When we submit a thing through a form, it comes as a Paramus. So that does some of that stuff. But just looking through here, it kind of makes sense. Right. So we have a database, right? What do you do with a database? Well, you put stuff into it. You create a new entry, a new entry. You might want to show stuff from the database. I'll show right, uh, at it. You might want to edit old stuff to her. Say that. Create. This goes with new. We'll get into all this stuff in greater detail update that kind of goes with Ed it as well . Notice there's nothing in at a at it, but there's a bunch of stuff and update. There's not much a new, but there is a bunch of stuff and create. We'll get into all this stuff and destroy. Say we have a stock in our portfolio. We want to remove it. We need to destroy that stock. So this does all the stuff for that stuff that we need and does it for us using that scaffold that we did in the last video. Very, very cool and all kinds of stuff in here. Now I want to look at our AP views. We have this new stocks older, and it has all kinds of stuff in here. Index, this index page there's an edit page is a new page show page. There's a form thing. So where all these things? What do they look like? Well, let's head back over and regular routes. Remember, you can dio rails routes you type in rake routes, or you can type in rails routes. Convention now in the newer versions of rails like I mentioned earlier as to type in rails routes. Sometimes I type in rake just cause I don't remember. I'm used to using the older versions. So all rights. Now we see all these stock things. Those weren't there before. And in fact it's kind of interesting if we go to our CONFIG folder and look at our routes file, we have This new resource is colon stocks, and we haven't talked about resource routes. But basically, instead of creating separate routes for each thing in the stocks, resource is creates them all behind the scenes, and you can learn more about routes like I mentioned before in that routes. Ah, rails routing from the outside In that rails guide, I mentioned a while back, sort of an interesting thing to note, but let's look at this. So we have new stock, edit, stock, stock and stocks. This is slash stocks. Let's take a quick look at this page by just coming up here and going slash stocks and we'll add all of these two are nab our probably Maybe in the next video or so, and you could see something's gone all wonky here will have to take a look and see what that is. But you see, we have this, uh, stocks new stock so we can click on here to add a new one. Now, do not add a new stock yet we need to do some things behind the scenes. And if you add a new stock at this point, it will mess up everything. So do not add a new stock. We'll talk about that in the next video, but, you know, it's very cool. We have this new thing taker and a user, so if we added a new stock, it would show up here very, very cool. So I think that's all for this video. In the next video, we need to do some things behind the scenes to start associating our new table with our old table. So we need to be able to tell it. Hey, those stocks belong to this user, and vice versa will start to look at that in the next video. 38. Fix Formatting and Rails Associations: OK, in this video we want to start to associate are two tables together. But before we do that really quickly, I realized exactly 30 seconds after I stopped the last video. What's going on here? What is all messed up when we ran our scaffolding command pullup bar code here, it created a whole bunch of stuff. Views controllers. It also created some. Remember some JavaScript in some CSS stuff. Completely forgot about that. So if we go toe APS assets and then style sheets, you can see there's this new scaffold that s CSS. And it has some CSS that is changing stuff in our in our in our af right. So you could just delete that if you want right, click and didn't delete or I'm just gonna rename it for now, sit down here at the bottom was gonna put a one in front of it. Now it remains to have one scaffolds. That's enough to throw off the system. You should probably delete if I'm just gonna keep it, just in case we need it for something we won't. But you never know. Now if we go back up here and hit reload, boom, it looks normal again. So you got the stocks. We got the ticker of the user New stocks again. Do not add a, uh, a new stock yet, And we're gonna bootstrap if I all this stuff so it'll look better later on. In this way, we don't need their CSS. We're going to use our own. So in this video, we want to start to start associating, um, are two new tables. So we have a stock stable and a user's table, and we need to be able to tell which stocks belong to each users. And it's actually pretty easy. And what I'm gonna do is I'm gonna point you to the rails guides one more time here, this one is actually pretty good. What we want is something called ah, the active record associations. So here again, models active record basics. See active record associations. If it's not there the time you watch this video compared to the guys and look through there , it's in there somewhere, too. So associations and it's just what they seem. We're associating something from one table with something from another. And if we come down here, there are These are the main types of associations when it comes to rails and it looks like there are 123456 Most of these we won't use. We're gonna look at these 1st 3 So what is this talking about? Well, say we have stocks and we have users who do the stocks belong to. Right stocks belong to a certain user. So if I had a bunch of stocks, those stocks belong to me. So that's the first type of association. And this doesn't make sense right now. As soon as we start to use it, though, it'll make sense. Uh, now as a user, how many stocks can I have? Can I have one, or can I have many right? Has one has many. So our users, we want them toe have many stocks, as many as they want. So we'll use has many, and those stocks will belong. Teoh User. That's all it is. That's how others to it. This is not complicated stuff, so all we have to do is sort of copy and paste these into our app and a certain place, and we need to do a few more things to tweak some other stuff But, as Faras associations goes, that will do the trick. So what we do is head back over to our code here, and this is something we haven't really looked at yet. And what we want here is the Models folder, and we have these two files stock and user. Remember, we have our users of table and our stocks table, but its singular rises them in other places. It's just the way it goes. If we open the stock and we open, the user will start with the user one. The user has a whole bunch of stuff in it already. Why? Because the user is the devise thing, device created or user table. So there's all kinds of weird device stuff in there. That's fine. We don't care about any of that, but that's what that stuff is. So all we have to dio is kind of come down here, and we want to sort of and Dent. It really doesn't matter any old where within this class here and so this is the user. And what do we say? The user has many stocks. So what we do, we just said, type in. I swear to God has many and then colon stocks as it save the file. Now that user is associated with stocks. Almost now we opened the stock dot RB file. And what did we say about stocks? There's nothing in here, So we just kind of tab space down and indented and a little bit. And what did we say? A stock belongs to ah user. So all we have to do here is belongs underscore to and then colon user Save this as it are , associations are two tables that have now been associate ID. Now, Like I said, there are a couple more little things here and there that we have to dio, but pretty much that's it. And we can sort of see here we can start to play with this a little bit. Uh, now it is okay to add a new stock. So let's add what do we have before Facebook? Now you'll notice this user, this is your user, I d. And we're gonna actually hide this field later on because we don't want to type in our user I d every time. So just for now, we can ignore and click create stock, and when we Dio. Oh, user must exist. We have to log in first. So let's go ahead and log in and will mess with all of these air messages later. Okay, so we're on the page. Stocks. Everyone had a new stock. And again, let's just type in Facebook. Create stock, User. Must you one error privet? This stock from being saved user must exist. So it's entirely possible we might have to actually type in our user. Ah, Which user? Our way. There we go. So I guess we're user number two, apparently. All right, so this stock was successfully create. Now we're gonna tinker with all this, so that goes away. But now the first thing I want to see here is Look, we've got this stock was successfully created up here and are nice thing here. We've also got this weird green one here. What is going on with that? Well, very quickly. We can actually look at that and remove that. So we want to goto aps, app views, uh, stocks. And if we look at new, you can see we're rendering this form partial. So let's go up here and look at that for impartial. Nothing. There Look at the edit one there. The index one. Okay. On the index page itself. You notice it's given this notice Things we want to delete that. Say that. Let's look at the other ones really quickly. Show Page showed a nation also has that. So we get rid of that there, Save that, and I think that's all. Okay, so that gets rid of this little thing here. Now, if we go back to the stocks page, we see it's listed as Facebook or user is number two. Apparently were, too. We have the show added and destroy. We could show it. There it is again. Facebook. We can edit it if we want. All right. We can destroy it if we want. Okay, so, uh, we're starting to come along here now. Obviously, we're not connecting to our gem. Our stock quote gem to retrieve data at this time. We're a long way from that. We've got a bunch of other stuff to do. We've associated these two things together with stock and the user, but we need to kind of designate that on our views, because if you notice like right here stocks this this U R L If I log out and go back to that page, it's still list this stock. And it shouldn't because we don't want to list are personal stocks that we put into our own database in our own account to the world. So there's much stuff we need to do to keep sort of associating these things and authenticating these things, and we'll look at those in the next video. 39. Stocks Navbar Links and CRUD: Okay, So before we continue authenticating and associating stuff in our views, I want to add some links up here so that we don't have to keep typing and like, stocks. So that's what we're gonna do in this video. I also want to talk about a concept called Crowd, which is pretty important and pretty awesome. So I'll talk about that a little bit in this video, and then we'll move on to the associating after that. So what do we want? Let's head over to our thing here and let's rake air race rails routes. Okay, so we have this stocks. This is this page right here, and it will list all the stocks that we add into our database. We also have a new stock stocks slash new, which is, let's see this new stock. We also have edit stock, but we don't want a link to that because we it's not an edit page that lists all the stocks . It will be a specific stock. So, you know, if we go back to the stocks page, we got this Facebook stock. If we click this edit, that's what that link is. It goes to just that you know that very specific stock. So if we change this to, you know, Amazon and then updated it, we've now ended it. If we go back here Well, now it says Amazon there. Right? So we don't wanna put that link in our naff bar, but definitely the stocks page itself and the new stock page should probably go up here. So us, uh, head back over to our app views home, nab our and remember when we did the ah, if statement to see if you're logged in. So we only want these links to show if a user is logged in. Right, So we'll be in this if user signed in section. And right now it has. Only thing it has is this edit links. So let's just Oh, you know, it also has a log out links so you can grab this edit link here, and probably the log out link is the last one we want. So inside here, let's just paste two of these. Let's change this edit profile to show stocks. And let's change this one. Teoh, add stock. Okay, so the show stocks, we want what we want. We want this stocks one. So it's just gonna be stocks path. We could change this to stocks have, and then at a stock that's gonna be this new underscore stock. Right? Try it again. Copy. I noticed this is stock, and this is stocks. This, I think, is what is used to, if we see show a specific stock. Right? So if we go see back here we click this show. That's this page right here. So we don't want a link to that. We want just the stocks One if you're curious, So OK, uh, let's go. Let's change this from ads stock. Teoh. He's that and it's Let's try that again. So we want new stock. Copy Head back over and paste. Okay, So new stock path. All right, so let's save this and reload to make sure this worked correctly. I am not logged in. Make sure you're logged down. Okay, Sign didn't successfully. Now we have the show stocks page. Boom goes here. There's our Amazon. We can add a stock. All right. And a profile. Still, we can log out if we do log out, those two links disappear, so All right, pretty good. Go ahead and log in again real quick. Now I want to talk about something called Crowd and that is me typing and appear. See, are you D? And this is common among all computer programming, especially Web development platforms like ruby on rails like Django like node, the concept of crowd is super important, and crowd stands for create, read, update and destroy or delete. So create, read, update and destroying. Think about all the websites you ever go to the big ones like Twitter. What are you doing on Twitter? You're creating a tweet. You're reading someone else's tweet. Your updating a tweet. Can you update a tweet on Twitter? Not sure or you're deleting. One of your tweets cried. That's it, that's all Twitter is creating, Reading, updating, destroying. Think about Facebook. What do you doing there? You're creating a Facebook post, your reading somebody else's post your editing, updating your post or you're deleting your post. That's pretty much it. That's Facebook thing about Pinterest. Think about, uh, Instagram, all the major websites that you sort of go to. They're all cried, create, read, update and destroy. And why am I talking about this? Because this system we just created this is cried. We can create a new stock, right? We can read a stock. There you go. We can update a stock, right? Or we can destroy a stock crowd. We've just learned crowd with Ruby on rails. Now, How hard was that? It was super simple. We typed rails, generate scaffold, typed on a few things. And boom, we've got a full crowd system. And this is important because if you could do Fred, you can build anything. You could build Twitter right now with this crowd. You know how to do it. It was really easy, right? Is that incredibly powerful concept. And I just taught it to you in, like, five minutes. Really? Now? Okay, there's some more stuff to learn to it. It's a little bit more complicated things here and there. But for the most part, that's all. This stuff is cried. Think about any website you've ever gone to think about how it works. Create, read, update and destroy or delete. And now you have those tools so super important. I just want to kind of mention that and hopefully ignite your imagination a little bit when you start going to websites from now on. Start thinking about Fred. Well, how are they doing? Crowd and you'll start to see these websites aren't that complicated. Twitter is not that complicated of a thing to build, and whoever built that thing is a gazillionaire. So you now have that skill set that you can build credit stuff. It's just, you know, up to you to do it. So obviously we're gonna learn more about this stuff going on. But I just wanted to kind of introduce that concept and explain just how powerful it is and hopefully get all riled up and fired up and excited because that's the great thing about Ruby on rails. It makes crutches so easy. You know, this is all database stuff. It's done it all for us. It create, read, update and destroy your doing those things to a database. And we just learned how to do that. It was super easy. So that's all for this video in the next video, we'll continue on associating these things and started clean up some of this stuff and go from there 40. Authenticate Users: OK in this video, we want to authenticate a user, make sure that person is signed in, and, ah, that they're they're correct, user. So it's going log out. If we go back to our stocks page, this kind of shows up, and it really shouldn't because we're not lodged in. You know who knows who we are? We should be able to see all the stocks that all of our members have posted to their accounts. So let's head back to Ruby gems dot or grow quick and let's see devise. I just want to pull up the devised documentation really quick. And if we scroll down here to the instructions and we have these controls and helpers and we have this one right here, the very 1st 1 before action authenticate users. And let's see, you kind of read through this right If we called our user models something other than user , you would change this from authenticate user to authenticate whatever. But we just use the default device. So all we have to do is copy this and head back over to our stocks controller. So that is APS controllers, stocks controller, and we kind of looked at this file when we created our stocks a database table, Remember, it has this index show the new the edit create. If you remember back to last video when I talked about crowd, this is the stuff that does the crowd. That right? This is the code. It handles all the crowd like the U. N. Crowd is update. Right. Well, we have an update function method in our stocks. Controller, right show, uh, create. That's the sea and cried right, Destroy us the D and cried all these things. So basically, whenever you call a web page in your ab, what goes on behind the scenes is the brown, the browser makes a request, and it comes to this thing, and then it finds So if you're on the index page, it finds us index method, and then it does whatever's in here. Well, we can designate up here that before it comes to this method, it needs to do some stuff. And there's already a before action here that was that was created. We might talk about what that is, but for now we could just paste in this one we just copied from the devise documentation So if we save this control s head back over to our I am pro quick and hit, reload and boom, we get we go back to the stocks page. There we go. Let's do it again like this. It redirects us to the sign in page, and that gives us a little message. Says you need to sign in before continuing. If we go to the about page, it doesn't happen. Why? Because the about page is not dealt with in the stocks controller. The about page is dealt with in the home controller in this about thing and up here, we don't have any before actions, right? So it doesn't It doesn't deal with any of that stuff. Same thing with our index page. So very cool. And we can do the same thing for the, uh, let's see us pull back up our terminal was that the new stocks stocks slash new. We copy this to add a new stock. We go to that page room, same thing. It redirects us toe log in. So basically, if we try and do anything at all in our stocks controller, any of our stocks pages, it says way to say I am before that you have to authenticate yourself. I e log in the very cool and very, very easy right s. So now we can law again. And no, If we want to add a stock, we go to the new stocks. If we want to show stocks, you can show very cool. Likewise, Here's the page for our stock. Amazon. If we log out again, you're going to see and we go back to that page again. It's gonna redirect you to log in because that's a page inside of our stocks controller and anything that happens before the stock in the stocks controller. Yet the log in first so very cool and very, very easy and, uh, very, very cool. So that's all for this video. In the next video, we'll continue associating stuff we've authenticated. Now we need to associate and only show the stocks that belong to us on our individual stocks. Page will start to do that in the next video 41. Controller Correct User: Okay, so a log in real quick here. And while I'm doing this in this video, we want to start to associate our users and stocks. They're already associate it on the back end. Now we need to sort of associate them on the front end for our Web pages here. So, for instance, when we go to the stocks page, it shows Amazon. I've listed that if I long out and sign up with a different account, so I'll sign up under mail at kota me dot com. Think that's even a riel address, But that's fine. Now we go to the show stocks page, the stock shows for our other user, and it shouldn't. And now, if I had a stock. So let's have Facebook and we are user three now, probably. Yep. We also need to fix that little thing right there. So if we go back now, look, it shows Amazon to for user to Facebook for user three. I'm user three. I should be able to see user twos stuff, and likewise, if I log back out and then log back in as our first account, john akademi dot com and go to show stocks again. It shows this Facebook one which is not even ours. It's the other account. So we need to fix this. And this is gonna take us probably two or three videos to Dio and, uh, let's just sort of get into it. We need to head over here to our stocks controller, and we need to create another before action. And this one is before underscore action. And then we want to designate the correct underscore user. Right? So you know who is the correct user? The correct user is whoever those stocks belong. Teoh. So we need to define what a correct user is, and we'll do that in just a second. But we also need it to add this on Lee. So here we can designate which of these methods right? We want this before action to apply to. So we want I think, the edit right. We want the person who owns the stock only to be able to edit it. We don't want anybody else to be able to edit our stock. So all the stocks that belong to me, only I can edit those nobody else can. So at it, we also want to update. Only I can update my specific stocks. Onley User three can update his specific stocks so update and also destroy. Now we can do all of the functions if we want to if we don't want even anybody to be able to read them at all. But we might want other people to be able to read them. Think of things like Facebook, right? When you make a post on Lee, you can edit that post on Lee. You can update that post on Lee. You can delete that post, but everybody else could read the post. You don't mind if people read it? You want people to read it? Uh, so, you know, as far as that's concerned, we don't. You know, we'll just leave like this so you could see this one that was applied when we created this thing automatically does the same thing here. All right, so kind of interesting. Okay, so we're halfway there. We also now need to define who is the correct user. And unfortunately, there's no like, helper thing that allows us to do that. We have to just write some code ourself. So it's not a whole lot. I'm just gonna come down here to sort of the bottom somewhere, Um, maybe above this private thing have been and let's create our own method. Define. And then let's call it correct. Underscore user. All right, which is just this exact thing right here that we just typed in. So all right, So let's now say, What is the correct user? Well, let's create an instance, Variable. It's a ticker, and I'm just gonna write some code that will sort of talk about it. So current underscore user, which is a device thing we've already looked at, right? I think. Yeah, we use that to If you remember, let's go up to our views and AP where we go Views whom naff bar. Remember up here when we oh user signed in? We didn't use way. Haven't looked at that yet. All right, well, let's look at that real quick. Let's head back, Teoh Ruby gems dot or girl quick type in devise. Look at the documentation and go down to those helpers that we just looked at. Second ago, controllers and helpers users signed in. There's also one called current user, with the current signed in user, right, so this one. See checks to see if you're signed in. And it doesn't care who you are. You're just signed in. Your somebody signed in. This one will determine exactly who you are. What's your I d? Right? So we're gonna use this a couple of different ways. Um, we'll get into that in just a second, Specifically, when we add a new stock instead of us having to type in three. We use that current user helper to put it in there for us, because we I don't know if I'm user three or two or 2000 right? So the current user will tell us what number we are. So, uh, head back over to our code. So if the current, if this ticker equals the current user dot stocks dot find underscore by and then I d is Paramus Colon, I d. Right. Then redirect. Redirect to stocks. Underscore path, which is the main page and was created notice this will be a little, you know, flash message and say not authorized peaceable authorized with a Z. I think so to edit this stock, and then we want if at ticker dot nil question mark. All right. And then we need to end our method. So this is the method. What we're doing here is we're creating this instance variable, and we're setting that equal to whatever our i d. Is and we get that I d by the current user and what stocks belong to us. Well, how do we know what stocks belong to us? What we find them by? And remember this prams we've win over passing stuff form wise kind of. We is a Paramus, and we wanted to be the i d the I d is gonna be this current current user from devise. So what is this fine by thing? We don't really talk about that really quickly. Let me just point you to the rails guides if you want to learn more about stuff. So what we're doing here is we're querying the database. Were looking up something in the database we're seeing. What stocks does this user I d have right Which stocks belong to this user, I d. And that's what that fine by does. So if you come down here to active record query interface, active records like database stuff and query is like, look up. So database look up is what this is. And you could just sort of This is a gigantic I mean later. This is humongous. All these guys are huge. So if you want to read through this and learn some cool stuff, you go and do that. I'm just gonna kind of pointed out to you really quickly. But the methods for retrieving objects in the database here's a bunch of them. So you have find created with love. Love law down here is Is there find by somewhere I looking over it. No find underscore by Okay, so if we search for it, it's down a little bit further and it's just fine. Finds the first record matching some condition, right? So we're saying find by and in our case, find my I d. Right. So we're looking up a ticker. We're finding our current users. I d were searching the database of ticker symbols for ones that match that I D. And then if they don't match, we send out a message that says, Hey, you're not authorized. Edit this. So go ahead and save this, and this is sort of the first part of what we have to do if we come back and check this out . Um, we got these two. If we reload this page, we get an error message. Yeah, a typo after notice. We need to put a Coghlan's. Now, if we come back here and reload, it works, and we don't get it. But we're still seeing things from another user. If we try to add it, This it doesn't work. Not authorized to edit this stock because we're logged in his user to If we try to add it, user to we can if we try to add it. User three not authorized. Were trying to destroy three. Are you sure? Room again? We get this not authorized to edit this stock, so it worked. But now we have to tweak this page toe on Lee. Show stocks that belong to us, at least now. So we walked through this again, start up at the top. We could see this correct user has been come completely correctly defined. If you're the correct user and you can only the correct user can edit, update and destroy. We can still see. Um, let's try putting show in here. Just this won't work, but I'm kind of curious. If we just hit show, it still shows up. So we need to make a change to the actual Web page itself to filter out those stocks that are shown and only show the stocks that belong to this specific logged in user, and we'll start to do that in the next video. 42. Correct User New Form: Okay, We got a couple more videos. T go to sort of take care all of this stuff, and then we can move on to more interesting things. We need to only show that stocks that belong to the specific logged in user and I'm gonna start out by going to the new stock. And in this video, we're going to get rid of this thing. By getting rid of this thing here. It will help us eat more easily. Get rid of this stuff on this page that we want to get rid of, so that the new stock thing and we see this user. So in order to create a ticker, um, any old ticker and we try and create a stock, It says the user must exist cause it wants us toe type in our user number, our i d number. And we don't know what all right? The number is whoever knows what their i D. Number is, so we need to fix that. So we learned a couple videos or private last video weaken. Use this current signed in user help. Her method that comes with device because our users are part of the devise user table right user. So to find what user we are, we can call the I D of the current user. So let's just do that real quick here in this video. So let's head back up to where we at. Let's see the stocks. Now let's see. We want ads stock. So the stocks new page. So let's head over to our view at views stocks, and it's gonna be probably knew. Yeah, it is rendering this form of whatever this form here. So let's pull this thing up and let's just kind of looked through here. Here's the ticker field and then here's the user I D Field. This is the field we need to play with. So inside a here, let's just really quickly make some embedded Ruby. And I just want to pace that current user thing up on the screen. That's probably not going to show much useful information like this. Let's just see what it shows. So this is an address in memory where the user information is stored. We've kind of looked at this sort of thing earlier, and if we want toe hold the actual information out here, we we needed use object oriented type things by slapping a period at the end of it. And so what we want is the die I d If we say this and reload room now it says number two. I'm logged in, I guess. Is john at kota me dot com, which is I d number two. So instead of here, we can put it in this field. All right, so all we have to do is find the field. And here it is not the label, but the field and user. I d i d stock user, I d blah blah, blah, blah. We can. Then at the end of this, just type in value colon, and then just paste this thing in. All right, we also now don't need this just for information purposes to show us what's in there. All right, so let's say this and reload and boom. Now number two is in there, and that's much, much better. But we don't want any of this on here. I mean, it needs to be here, but we don't want to show it on the screen. So how do we do that? Well, with form fields, you can also slap another come on there and call type Colon Colon hidden, and this will actually hide that whole thing. It'll still be on the screen. It will just be hidden. So we'll have to get rid of this label So the box is gone. If we right click, though, and views of the page source and kind of looked down here for that thing we can see here is that that box it's still there. It's just invisible. And it has a value of two, which is our user I d. So very cool and pretty simple. Eso Let's get rid of that user label to over at it, and that's just hear it now. We could go like that to get rid of it, or you could just delete it. Um, I'll just go ahead and delete it. All right, So let's save this and reload, All right? So let's try to add Google Geo g Great. A stock boom. It worked. Shows that are user is to now same thing. We could get rid of this on this show page, right? We could come over here and look at our let's each show and here is showing the ticker and the user i d. So we could just get rid of all this. Wanted to save this, It reload. Now it just shows the ticker. That's probably more what we were gonna change all this stuff anyway. And bootstrap if I it and do some different things. We want to show more than just the ticker when we go to the show page anyway, so we'll get into all that in future videos, but very cool and, uh, pretty simple. And now we're going to go. So others Goob. So now the only thing left to do is tweak this stocks page to get rid of the stocks that don't belong to the logged and user. And we'll do that in the next video. 43. Final Association Stocks Index Page Loop: okay, We're all those done off all this association stuff. I know. This is kind of Ah, tedious. It's kind of hard to wrap your brain around this stuff. First time around. It's a little confusing, but this is the last one. We should be done after this, and we could move on to cooler things. So Ragnar Stocks Page were showing stocks that don't belong to us. Now, how do we fix that? Let's head over, though. Some of these getting little crowded. So we want to go to our views stocks index dot html and this is the stocks page and come down here and you see this table, Uh, this whole thing is a table kind of looks like a table, right, has rows and columns and things, and as ticker and user for headers and then inside is the actual stuff that sort of mirrors . Here you have ticker and user. These are the table head headers and then inside of here, the table body. You have this loop that does all the stuff, and what this is doing is it's pulling up all of the stocks that are in the entire database , and it's just printing them. It's looping through all of those stocks and pretty each one on the screen. And what is printing on the screen is the ticker itself. They use your I D. A link to the show page, the link to the Edit page and the link to the Destroy Page. And you see those were married right here. Here's the thing. The user i d. The link to the show page linked at a page in the link to the destroy page. So if we want to Onley shows certain stocks, we need to do it sort of right inside of this each loop, which is this thing here. So we have this each loop. That's just a basic ruby loop. And we're saying for each stock in the database, do this stock ticker stock that users blah, blah, blah. All right, so that's cool. Inside of this weaken do our own little loop. There's lots of different ways you can do this, and this maybe not even is the best way, but it is pretty simple. So we have played around with the current user I d. In the last video, right? So we can already figure out who is the person that's supposed to be logged in? Right? So what we're doing here is like I said, we're looking up. All the stocks and each of those stocks are associate ID with a user, right? They belong to a user. Which user? The stock's dot i d for that user. Right. So we can use Ah, we can use that. We could go it at stock dot i d sort of similar to how we did current user dot i d If stock dot i d equals don't equal to sign our current user. So if the stocks I d in the database is the same as our current user, I d then do all this stuff, otherwise don't do anything right. So we close our tag here and then inside a here, I'm just gonna have this over, so it's easier toe, see? And then we just close our in our, um our if statement that we just created, sort of be tabbed over have to be, but makes sense. So that's pretty much it. So go and say this. And if I didn't do a typo, if we hit reload, this Facebook three should disappear no or with the wrong person. And I lost track of which one we are. Let's log out and log back in. John Cota me dot com is definitely user, too. Now, if we show the stocks Oh, that's really weird. All right, let's log out and log back in as it was a male at so to me that, um sure, the stocks here it's still only showing user, too. No, it is showing. Use it. It's very weird. What's going on here? All right. What did I do? If Stock die? I d No God, it's Friday, folks. It's Vegas. It's Friday. It's sunny out. That's my excuse, and I'm sticking with it. This should be stock dot user underscore I d. Because let's go ahead and save this. Let's look up our ski morrow, quick. Oh, um, database schema. Remember the user i d for stocks we created the name of It was user I d. Right. So that's we we we need to call stock dot user. I d not I d ah, typos. Bane of my existence. All right, so now if we were hit reload, This was show Facebook. Three were logged in as user. Three. If we log out again, log back in on John at kota me dot com and click New stocks. Boom. Just are two stocks show up, so we are finally done with all of the association. You know it just to sort of really quickly recap we started out in the r B C Where did you go? Stock app models stock. Darby. We first associate our stocks. Stocks belong to certain users. Users have many stocks. Right then we came to our controller and our stocks controller. We created a before action to authenticate to see if a person has long been at all. And if they are logged in, we determine who the correct user is and the only the correct user can edit, update and destroy and the correct user we search down here created at ticker symbol. We look up the current users stocks. We find my i d. If it's the wrong person, you get this not he notified blah, blah, blah message. Finally, on our stocks index page we create this little loop were saying, Hey, if the stocks user i d is the same as the current user, I d show it on the screen otherwise don't. So final test. Here we go to our stocks page, Let's log out. And again we are You know what's gonna happen? We're gonna hit the log in page redirection. Everything is good. So that's all for this video. In the next video, we will start to sort of sync up our our new ah stock database with our stock quote gem so that it can start actually pulling the data that we want it to pull and show on the screen , and we'll start to do that in the next video. 44. Stock Quote Gem Overview: Okay, So I think it's time to now connect our stocks database to the actual stock quote gems to start pulling data and putting it on the screen. But before we do that, let's head back to our terminal. And it's been a while since we saved our code. So let's go get add, period. Uh, I was a lot of stuff. Get commit. Dash am NC Added stock. What table? Don't like that. And then let's push this up, too. Push this up to get home bump, bump, and Okay, Okay. So let's take a look at our code. Remember? Go back to our original controller. Home controller. This is the code we used. Teoh look up, stock quotes, stuff, way back to the beginning of the course, and we're gonna use basically the same stuff, but we're gonna put this stuff on our HTML on our stock html page instead of doing it from the controller. And the reason that is you could do it in the controller is just gonna be a little more complicated, because when somebody goes to our stocks index page, this stocks u r l What's happening here is we're calling the index controller the index method in our stocks controller, and it is then creating this instance Variable. And then doing this stock dot all and what that does is it goes to the database and it pulls out all of the stocks from the database, right? So, you know, if we then want to put those things on the screen, we need toe loop through them on the index page itself. And let's see. And this is what we're doing right here and then we're putting them on the screen. So there's the ticker of the user I d show at and destroy. So for each stock, it's looping there. If then we want to call each one of those stocks using stock quote gem, we kind of need to do it inside of this loop. Otherwise, it's gonna be a little messy. So normally you don't want to put a whole lot of code on your HTML pages a whole lot of like ruby code. But in this case, I think would be all right. So that's what we're gonna do. So I'm gonna head over to our APP controller Home controller, and let's look at this code first thing remember at the beginning of the course, when we first started doing this, we were typing this into a form, and that was on this just stock page that the index patient right here. Right, So then once we hit enter, it takes that thing from the form, comes back over to our home controller here and then does this stuff. And remember, we're saying if there's nothing there we want to say, Hey, you forgot to inter symbol it. Otherwise, if there is something there, create this instance Variable, Go look it up. Get the results. If, uh, it didn't exist at all. We do this, Airstrips. We do this error down here, so we need to modify this a little bit for 11 thing, we're not passing anything from a form, so we don't need the Paramus. Instead, we'll look up stock. So, um, and it's likely not gonna be empty because we can come back to our ads stock page. If we try to add a stock putting anything did go in there, so we probably should do some error handling. Let's go back there and it exists there. Don't show up, so I delete this for now, so we might need to tinker with that a little bit. And Ah, see, we'll see. Going forward free. I want to do that or not. Relatively easy. So All right. So I think I was gonna jump in in this video and started doing this, but I've been talking about it for a little while in house. I think I'm gonna stop this video in the next video. We'll jump right in and actually start putting the code together and take it from there. 45. Connect Stocks Table To Quote Gem: Okay, so let's jump in and start putting code together. So I hope. Head back to Arkan. App controllers, Home controller. And let's just grab all of this. Um, yeah, we need all wolf. And so I copy this Control, see, or you can right click and copy. And now let's head over to our not sure which one this is. Let's go to at views. We want stocks index. We go and then just come down here and find the loop. So remember this is coming from the stocks Home controller, index controller, and it's calling at stocks, which has looked up all the stocks in our database and our table right, and it's looping through. And for each one, it's saying, if the stock user I d equals the current logged in user, then spit this stuff out onto the screen. So inside a here, we need Teoh kind of paced all that code we just copied and have this over. Now we need to put all of this stuff inside embedded ruby tags. So just right off the bat, you can kind of do this, or you can just sort of weight because we're gonna have toe Well, we have to delete some of this code. We don't need it all comes. Let me just kind of come through here and clean this up a bit, uh, equal to and like this and like that. And same thing here. Okay, so I know anyone here too. Okay, so this is looking pretty sloppy here. Let's kind of look through here. So first things first. If for one thing, Haram's equals equals ticker, we're not dealing with that. Instead, we're calling dot We're just calling stock. It's this variable right here. So we're saying, if stock and what do we want? Let's say ticker, because that's the thing we're looking up. So let's go. Instead of prams ticker, let's go. If stock dot ticker equals nothing, create this nothing variable. I don't really need to do that. We can just print this onto the screen. Well, hey, let's do this. Let's create at nothing equals instead of this whole message, let's just go in a not available right for now. Right? Else. If let's do this again, was just paste in stock dot ticker. If there is a stock dot ticker than at stock, let's change this toe at ticker because we've got a stocks here, and it's just gonna get confusing if we have stocks and stock. Otherwise, you know, it's just Yeah. All right. So then when a copy, this guy again, again, An insider here. We're looking up this Paramus thing again. We don't have the Paramus. So instead of that, I'm just gonna put in the stock ticker, cause that's what we want to look up, right? L see. If at stocks, if there is no at stock ticker again, let's take off the sequel to sign instead of an error message. Let's just put in slash a for now. All right, so this isn't really gonna work, but it's a starting point. So let's just walk through here and look and see. So if stocked out user i d. So if the I d equals Okay, if we got a stock, then okay, we do this. So here's an if, and here's our end for that. If here's an If, and here's an infer that if let's see what else we got else. If at stock ticker go look it up and slap it into this at ticker symbol. Okay, So now, if we want a reference the stuff We will reference this at bat ticker. I'm just gonna say this really quick and run this just to see if we got any errors I suspect we might, cause that was very sloppy. No, no errors. Okay, so we can sort of proceed. So now instead of calling stock that ticker, let's call at ticker dot What? What do we want? That's that we want actual ticker, um, itself. So let's head back over very quickly to our stock quote, gem, HelpAge. You know the documentation, and we want to look up the actual ticker. That's gonna be dot symbol, I think. Right. So we wanna at ticker dot simple. And here we have the user I d. We don't really want the user i d anymore. So let's change that from ticker to current price. So we come appeared to the second th it seems, stands for table head. So we have ticker, and it was user I D. And that's just ticker. And then user, these old words right here, that's the table head. So I'm changing user to current price, right? And then down here, the corresponding second t d second th used to have at stock User I D. But now let's go at ticker dot What do we want? Current Price and that is it back over to our stock quote documentation Company Name Calculation Price. Is that it? No, I don't think so. Latest price. Let's copy this and where we go. Let's see. Here we go. Ticker Figure that latest price. All right, so let's save this and see if this worked again. Amazon currently is at this, and it's kind of a weird 41 415 so we can tinker with that if we want. And we have GOOG and its current price less also, in front of these latest price, let's just put a dollar silence. There we go Now. If we save this and reload, it looks a little better and we conform at this to have call Akamas will probably maybe look at that in the next video. All right, so that's decent. Let's create another column, though, and put the actual company names up here. Let's just have down and go th and then go company right? And then down here, do the same thing. Only this time we do it t d and I'm just gonna copy this whole thing. But instead of symbol, we want the company name, so we head back over to our documentation. Look through. Here we go. Company name Boom. Pace that on there. All right, so let's save this and give it a look. All right? Amazon Inc Ticket prices. Amazin current price. 1800 Alphabet Inc. That's Google's parent company. Cool. We can add a new stock. Let's add Facebook F B if we go back. June Facebook Inc Current ticker Current price. Very, very cool up. Now we're not getting that thing so interesting. So very cool. We're coming along. We've now sort of linked it up. Now let's do some quick error handling. Let's just put I'm just gonna put nothing and click, create a stock and see what happens. Now we're getting It's just doubling the thing. So that's kind of an issue. We need to fix that, and I also want a format, these things to add commas and stuff. I think that's too difficult. So we could do that, so we'll start to look at those in the next video 46. Precision and Delimiter price fix: Okay, So in this video, I want to very quickly just deal with these. Ah, these numbers here. So notice this is 1841. There's no comma here and last video when we hit reload once there was like three digits behind the decimal point. That's no good. So how do we sort of fix that? That's what we're gonna do very quickly in this video. So it's pretty easy. There are all kinds of ruby functions that you can use to play with numbers, and I'm just going to appear. Type this out so we can use this function called number with pre cision. That's P R E C I s I O and pre cision, all right. And it's a function, and we want to pass in whatever we want toe work on. And we want to work on this at ticker latest price. So just copy this and paste it all in and we can have a comma, and then we can tell this function two different things the precision and the delimit er in a delimit er is a separator, right? So think of a calm nights and a limiter. It separates two things in our case. Thousands of numbers, right? So we started with precision. We want the precision. That's the number of decimals after the decimal point. So we want that to be too. So we just call Colon Crease Ishan and then give this hash rocket thing and then say to and we can add a comma and we could do the same thing for delimit er do you limit e Lim Mitter ? I was misspell that and again hash rocket. And then we just put quotation marks. And then the thing we want to be the delimit er and we want a comma, All right, so we could just copy this whole thing and then just paste it in here to our latest price guy and that will work. So let's go and save this. Come back here and hit, reload! And in those boom Now there's commas separating them. We can't tell because it's it's doing a precision of two, but it is doing a precision of too, so we'll only get two decimals after the decimal place. So that one won't be $1147.76 3 cents, right? Only to eso cool. So just a very simple little thing. But, ah, you know, adds a little something and, uh, as well do it. So in the next video, we'll take care of this error thing. Start to dig into that and then go from there. 47. Stock Index Error Handling: Okay, so a couple of video go videos ago, we added a stock just by not putting anything at all in here and just clicking the button. And then we see what's happening is it's showing the one before that instead of not showing anything. And why is it doing that? Well, because when it we do this first thing, if the stock equals nothing, well, that's if it equals blank. Nothing if it if it doesn't exist, we're creating this error message of N A. But then down here, we're still spitting out ticker dot company name and ticker, that symbol. But there is nothing for those. So it's just printing out the last one that it did, which in our case, is that Facebook one. So we can do this. We can fix this several different ways we could instead of just putting out in a we could go at ticker dot company name equals nothing. Or we could say in a and it's just copy this and so also symbol and the price so we can go symbol. And what was that other one at ticker dot latest price. All right, so we save this. That might just do it. Might have to do this in the second place as well. Reload. Yeah, it's not doing it. We need to also put this in our first air message. Looks like names. All right, so let's give this a try. Reload and boom in in a and, hey, we could also just, um, put in some error handling on this page. So when this thing gets created, um, in the future, they won't even added to the database. Right? And we do that in several different ways, and I think we'll look at that in the next video. 48. Form Validation: okay, This video, we want to do a bit more of error handling. So a couple videos ago, we added a stock by clicking on new stock and then just not even doing anything and clicking the button. And that's how we got this thing here. We want to be able to stop somebody from doing that completely. There's another thing somebody could do. They could just type in a bunch of white spaces and that will equally throw off our whole system. So we don't want that either. So how do we fix that? Well, head back over to the rails guides again. We've looked at these several times and just right down here looking active record validations, What we want to do is validate this form and rails will do this all behind the scenes and ah, fairly easily. And it is actually kind of nice. So we just come down here and look at our model, right? And we could just add this line right here to our model, and it'll fix this for us. We need to tweak it a little bit. So what am I talking about? Model. If we go to our APS models and then we This is the stock model. The stock tables. If we look at this where we tweak this earlier when we put this belongs to when we authenticated, not authenticated associate id our stocks with our users. Well, now we just want to validates, but instead of name. We're doing this on ticker, because on this form, this is the ticker form, right? We save this as ticker, so all we have to dio it. So it's validates and then colon ticker, And then we want the presence to be true. We need there to be something there. Something has to exist in that form in order for it to validate correctly. So we save this and come back over here and let's just hit reload. And now I haven't put anything I type anything at all in the box. I just click the button Boom. Now we get an error. It won't even let us add one. Unless, um, we actually type something so very cool. So I'm gonna head back row quick to my show stocks page, and let's just get rid of this. We'll just destroy this empty one completely. All right, so step one of the error handling processes done. Now what happens if somebody just goes like that? Or if somebody tries to add, like Facebook and then a space and something, we want to validate this form to not allow spaces, any white spaces at all, and that's pretty easy as well. We just come back here to the same stock model Stockton RB file, and we want to do another one validates. And we want this one to also be on ticker on a validate ticker. But this time we want to give this a format and colon, and then we can just do this. And inside of here we can go without Colon and then ford slash a backslash and s and then another forward slash. So what this is doing is this is regular expressions and we're saying four slash s, That's I don't know and see I code or something. Hex code, something for space. So we're saying make sure don't value only validate this if it's without spaces. So if we save this and head back here and now we type in, you know, some spaces it we get to errors. Ticker can be blank and ticker is invalid. So now that solves all of the problem. We don't have to do any sort of error handling on the index home or html page itself, and we're good to go. So I think that's pretty much it for sort of error handling stuff and formatting stuff in the next video. Let's start to actually make this look better will create an actual table and do some styling and bootstrap. If I this and then after that, we're gonna go through. If we click show it just says Amazon. So weaken. Tweak this page as well, and look at doing that. We'll start to look at both of those things while first the table thing, but in the next video. 49. Bootstrap Table Stock Index Page: Okay, so we've connected our stock table or stock database to our stock. Quote Jim, so we can pull data. We could throw anything up on the screen. We've just pick three things here. The company name the ticker, the current press. You can add anything you want, though, of course, and we'll add a little bit more going forward. Maybe, but for right now, I want to start to edit this page because this is not looking particularly cool. And we have this bootstrap thing weaken. Bootstrap. If I this so let's start to do that so head over to get bootstrap dot com. Click on the documentation and I think we want components. And then let's see. No, we want maybe content. Yes, tables. So let's create a table and we can look through here and see there's all kinds of different tables. Uh, this kind of cool, different options. Different color options. Dark, light, thick, thin with border without border, there's a border less so just really whatever you want. It's hovering ble. That's cool. Probably add that on there. What else? We got? Different colors. You can dio Oh, uh, different stripey options. So All right, Let's head back up here. And first things first. We've got to give this a table, give our table html a class of table. So I'm just gonna copy this and head back over to our stocks index page. And then up here the top. We have this table tag. If we just give this a class of table and save it, let's just see what we got here. Boom. Right off the right off the bat. It Ah started. Look. A lot better already. Its spread out. Very cool. So let's look through here. What else do we have here? We wanted Dark would just give it at a table dark. I don't think I want that. He will head options. We want that. Maybe my local. Let's try that. So we just give our th head class or a teach head tag this class on. Copy this and we have a th head. Yes, we dio bouma paste that in come back and hit. Reload. What do we got? All right. I think that looks good. Kind of contrasts a little bit here and we could take this stocks thing off. I think I'll do that. Um, yeah, Let's just get rid of that. Save that reload as a little better. All right, so I think I want this to have a border. So how do we do that? Scroll down who? We also want Striped Rose. So let's add that road quick. It wants to put this table striped also in that table tag. Let's do that. And to ADM. Or attributes to the class, you just put a space and then paste it in space and based right? All right, that reload. All right, Now start to be striped that school. What else we got keeping an eye out for border up border right there it is. So table bordered. I'll be that space and based Reload. Boom. Now we got a border that's coming along, right? Uh, what else? We won't want this hover ble thing. Where's that at? When you hover? It changes color like that. Let's add that one more space and paste. Save it, all right. We've only got a few stocks. Um, let's see what's It's at a couple more. Let's go. A pl It's apple. Create stock back. So Amazon alphabet Facebook. Apple is good enough for now. All right, so that's kind of cool coming along here. Now, look at this show button, right. If we click on this, it goes to the show page, and we're going to tweet this page to add more information and format. It better. But for now, we don't really need this. I would rather have this thing right here be a link that we can click and then just get rid of this show thing. So how do we do that? We're going to come down here and find our show thing, and it's just a link to tag. So I'm gonna copy this and come back up to our company name. I'm just gonna Well, let's just paste it in like that. So instead of show Well, wrong place. Um, yeah, right here. Let's go td td and paste that Lincoln. But instead of the show, we just want this. All right. We could just pace that end and then just delete that. All right, so we still have three TDs, right? So let's say this. Give it a look. Now, if we click on this ube alphabet Amazon Inc. Amazon, Coulson, that would get rid of this show thing completely So let's do that. We need to be a little bit careful here, because this is a TD. If we just delete it, Do we need to come up here? No, we should be good. Okay. So let's save this and reload. Cool. And no. Maybe we want to change these links to buttons. I don't know. We could, uh, head back over the are bootstrap thing and go to components and buttons. And we've been using this secondary one so we could just add a class of secondary to that link. So let's go where we adhere head back on down to at it and destroy. So instead of link to the the end here, we can just go class and then Bt nbt n dash secondary, save this reload. Okay, maybe you like that. Maybe you don't. I kind of don't. So instead of that, let's get rid of that. But instead of destroy, let's go delete. And instead of having two columns well, believe it. Two columns round. All right, so let's say this reload. Get rid of that button. Oh, what did I do? Link to Dele o comma? There will take the common out on right there. Boom moves. There we go. All right, save this. Reload. All right. Good to go now. Okay. So, uh, what else can we do here on these? These guys here, Maybe we wanna wrap this in a center tag. I don't know. Save that. Yeah, I kind of like that. Do the same thing for the delete guy, and, uh, those are centered. Tag. Very cool. So all right. I kind of want to add more stuff. If we go back here to our stop quote gem. There's a whole bunch of other stuff we could look up. And I kind of want to know the market cap market cap is like what a company is worth. So it would be kind of cool to like at a glance, C it, you know, is Amazon worth more than Facebook right now, That sort of thing. So let's add that real quick here after current price, maybe. Let's just head up here. Let's have a Oh, this is needs to be changed, too, because we got rid of that show thing. All right, so th let's go Market cap H clothes are th cap tag. And then after the current price, which is right here. No, down here. Well, we do need to add it to our air handling, I suppose, even though we probably don't. But we will. I look at it here for, so come down here to company. Name symbol Here is the precision thing underneath that Add this new TD tag and let's just copy this whole thing. Well, let's do this one first. Just see what output this gives us instead. A symbol we want. What was it again? Market cap. Copy that. Pace that. All right, So let's save this and give it a look and see how that looked. Oh, that's where. And we have this gigantic number, which is in the billions. So we need to do some error handling on that Nessim error handling some precision stuff. So I'm going Teoh put a Where did he go? Um, this guy right here, I'm just gonna copy this whole thing and paste it in, and then I'll be this and put it in here. Now we can get rid of this, All right? I think that will work. So save this and what's going on up here? Oh, what a TV instead of t h. There we go with a market cap. Okay. So save that very quickly. It reload. All right, So the market cap of Amazon is This is hundreds, thousands millions. 908 billion. Full alphabet is only 798 billion apple. 8 23 So it looks like Amazon is the most. What? The best company, The highest market cap. The most valuable company? I guess so. That's an interesting thing to see. XY has 0.0 Like we could have probably left off the delimit er are the precision, but very cool kind of interesting. And, uh, yeah, so I think that's all for this video. In the next video, we will kind of play around with these show pages and they get that taken care of and format those and adds more data and stuff to them, and that will be in the next video 50. More Error Handling: okay, Before we get into the next little thing here, I realised we added this market cap column, but we didn't add this to our air handling. So this gonna throw some stuff off, so come back to our index page. And remember, we have this if it doesn't equal anything. If company names took surprisingly, this price equals and a we need to add one here for market cap. Right, which is just this. Copy this, paste this into that. And then we need to add this again down here. Now, we added air handling if a thing doesn't exist. But we still need air handling. If they add a ticker symbol that doesn't exist, right? So, like, if we head back over here, save this. Yes. You know, if we click on new stock and if we if we do this, it won't add it to the database. If we don't do anything at all, it won't added to the database. But what if I added in like, elder or, you know, just make something up, right and click create stock that still needs to be air handled, But then also kind of looking through here. This is our all of our air handling stuff. This isn't really valid anymore, because since we had the form validation, we don't need to do. And if stock equals nothing, that will never happen. So we can just get rid of all of this and this and it's corresponding end. And then also, this doesn't quite work either, So there's always gonna be a stock ticker. So we really don't need to run if for that. So let's just kind of revamp this here and kind of look at this. So if attic So we want to take we still want stock die ticker. We want to pass it to our stock, quote Jim, and then assign that value to at ticker. Now, we need Teoh kind of like a just sort of the beginning of this video. We need to vow in that validate, but, like, you know, if somebody out innocent gibberish that needs to be taken care of, So if at That's a ticker, So let's see that work. Uh, why we can Instead, let's just go. Um um, if at ticker do stuff, uh, let's go do stuff. I think otherwise we could just end, right? You don't even need in else, right? If there is an at ticker, do the stuff, we should be explicit. Let's bring this back. So let's go. If not at ticker, then we want to sign these things. All right? That's too many tabs. It doesn't matter. L still work of extra tabs, but it looks other. It looks ugly else. So let's go else and then do stuff get rid of this. So what do we want in this else? All the other stuff. All of this stuff, right? R t r and TR opening tr tagging, closing tr tag. So boom. All right, That might do it. So let's look at this. We're starting our loop here. Oops. Some of this space. All right, so if so, here's our loop, and we want to end that loop in there. If stock this all needs to kind of be tabbed over, but leave it for now. Okay. So if and that needs to be closed, just make sure ifs and our ends all match up inside. Here we have this. So if there is no ticker, then make these. We really don't need anything here. Really? Right. Oh, let's just get rid of this. That's not quite right, cause we still want. Yeah, this won't do because we'll just be blank lines. If we save this and run this reload, it looks OK, but if we had a new stock of something, go back with the page, just be it won't even show up. That works. But now that thing isn't showing up anywhere, right? That's no good, because we want to be able to edit it or delete it or whatever. And it's not showing up at all, because when the stock quote gem tries to do a thing, it won't show up. But also what we need to dio is see, coming into our this thing right here. We need one of these inside of our if at ticker doesn't exist. Things I wanna paste all the scent. But instead of company name Let's go, ticker dot Uh well, let's just go. We could just make this error if we want. And this list price again. We don't want any of this. You don't need Ruby. It all here We can just go in slash a same thing here with our market cap in slash a and we want these edit things because we want to be ableto edit this. All right, so let's save this. Should do it. Reload. Oh! Oh, Ticker symbol. Missed one. Okay. All right. Where's eso? Make sure in our at not ticker symbol and there it is, right there. Uh, that's gonna be at dot ticker. No, I had, uh, stock check the I think. Yeah, save this. I would just put in a as well, but we want the thing that we typed in to show up. So Okay, here, we can add it. Or we could just delete stock was successfully destroyed, and we're going to go. All right, so that was a little convoluted, but ah, realized that kind of skipped ahead without dealing with that sort of different error handling that we needed to do after we validated our forms. So OK, so just to kind of recap very quickly, we are at the beginning pulling our stock out of our database table were saying if the user idea of that stock matches up our current I d. You know, we already know that. Then send that stock ticker to our ticker stock quote gem and a sign it into at ticker. If we've inter gobbledygook, it won't return anything. It'll return nothing. So if that happens, that's what this is. If it explanation, point means not. So if there is not a ticker returned, then put all this air stuff on the screen so that we can delete that that ticker if we want or edited or whatever otherwise else do all the stuff we normally do. And then in an end, all right, So who? That was a little convoluted, but hopefully follow along and in the next video will move forward and start playing with the show page. 51. Stocks Show Page: Okay, so now we want to play around with the show page. When you click on to these things, all it has her is ticker at full. The talk to the stock ticker, and that's not that exciting. So what can we do here? Well, all kinds of stuff. We can do anything you like. And, uh, that's kind of what we're gonna start to deal with in this video. So let's head back to our app, views stocks and then show this is the page that showing up and you could see it just has ticker. It's calling at stock ticker. It knows what stock toe look up because of the route. It says, you know, this is stock number eight, so it knows what that is. It can look up at Stop number eight. It knows the database. You know, the database can see that stock number eight is apple, right? So pretty straightforward there. Now what do we want to do? Let's head back over to our index or stock index page. And let's just grab all this code right and bring it back to our show page. Let's get rid of that and just paste it all in here, right? So what we're doing here is we're creating a new at ticker thing, and we're doing at stock dot ticker, which is at stock dot ticker. But this has an instance. Variable a dollar, a dollar sign, an at sign ampersand, whatever. So we need to change that. So there we go. So at so we're sending our at stock. That's ticker into stock quote thing signing into the sticker again. We want to say if it's gobbledygook, don't do anything right. So we got all this table stuff. We don't necessarily want to create a table with all this stuff. So I'm gonna get rid of all this stuff TDs and what? Not kind of tedious, but I'm going to relate to replace it with line breaks. You're that. And we don't need these edit things or the delete things. All those. Okay, so we don't need this to be a link to think either instead of stock ticker. Everything on this page is at stock ticker to change that. And we really don't need this either. We could put a little message. The ticker does not exist. All right, else. And again, let's get rid all this stuff. And we don't want this to be a link to because you don't need it to be at a line break. Adaline break. I'm break for the T D Limburg. And again, we don't need these edit things. Okay, so let's see, that's looking. Okay, let's save this and just see what we got right now because we did a whole bunch of weird stuff just then. Probably messed something up. Okay, Apple Inc. A pl price thing doesn't have the headings or whatever, but we can play with that if we like. How would we like to play with that? So company name. Let's go strong. Give this up. Bold. The symbol. Let's go, Sim. Uh, ticker symbol, Colon. Uh oh. This one is latest price, current price, and this one is market cap. All right, save this kind of playing at this point to get this stuff onto the screen. All right, so here was a line break. There are to save it. Reload. All rights coming along now. Uh, this isn't particularly great. So let's head back over here. And what do we got here? Let's go. The open calculations sector got interesting Let's graph sector. We'll see what that is here. We can just go boom and paste this in and let's go sector, I think sexed er sector. All right, say this Reloaded. So what? That IHS technology sector. OK, Interesting. Uh, what else do we want? Uh, which we got the high the low. The latest latest price previous Close. That's interesting. Grab that one previous close and copy all of this. Yeah, Paste. Copy this. And it's the sector we want previous. Close. All right, so save that reload previous Close 1 78 97 That's a number. So we need to sort of number five this. I'm just gonna copy all of this and its previous underscore. Close. So here. Let's just go. Pre V s underscore. Close. Okay, save that reload. All right. So yesterday it closed at 1 78 97 Today it's at 1 78 90 So it's down for the day. Let's put the previous close right next to the current price. Easier to read and sort of more interesting, right? We want to know those two things together. So makes sense that they would be right by each other. All right. So save this and reload current price Previous close. Very cool. What else do we have? Changed? Change percent. See what that is? Put that right underneath. Close. Previous. Close. So again, we can just grab this and see right here. Let's go. Percent change. Maybe with a lower case E. Is that in? Copy paste. Boom! Boom! All right, so let's say this and take a look and see what that looks like. Percent change. So its down 0.56 and let's take a percentage sign after that because it is 8% say that. Okay, that's kind of interesting. Ah, what else do we want? Your to date? Probably. We have a year to date something sighs. Last update. Age previous Close Change champs percent volume volume It's a good thing to know market cat P E ratios. Interesting to know. 52 week high. If it's two year to date change, that's a good one. What's it been doing all year? Year to date change and again, we can just copy this. Taste it in instead of change percent we want you're to date change. I think it's a percentage point percent We'll see here. Reload. Year to date. Change. That is a crazy number. Let's number if I that I want this precision thing again. Use this a lot, huh? All right, So you're today change. He stall this in and copy this at Tigger. Latest price. Boom. Afterwards, we want that percentage sign, please. Delete. All right, Fort 0.14%. Interesting. Oh, is there a two week low? It's a two week high. Interesting. You know, you can come through here and do all of this stuff that you want. I just wanted to get all of this data kind of onto the page here. You know, at least see what we got and what we could deal with. Now, remember, way back we looked at, there was a other method you can dio. So look through here and get all the stuff you want out of here. So if you want, like, wasn't there up picture a logo like this logo? If we wanted to pull the logo and put it on this screen, that would be cool, uh, and come through here. And bootstrap if I this, you know, put this stuff in a jumbotron or you know, Do whatever you want. Be very creative here. And, uh, that's kind of cool. So, you know, I just kind of messing around in this video, adding some different things, you know, at whatever you want. And maybe, you know, there's one of them has, like, a a paragraph of, like, what the company does and who their competitors are, who their CEO is. You know, I go through all that stuff and really kind of do this up. Make this however you want. I mean, this could be a huge page with stuff you've learned now, how to do that? You know, do whatever you want. I'm gonna leave that to you and your imagination. But for now, we are coming right along. We have this guy here. We have this here. We didn't really make this into one of these forms. But I've showed you how to use forms already so you can tweet this on your own. If you really want Teoh, I think we're gonna may be called the actual app itself. Done as we can play with this forever and just keep adding different things, adding different features and all the stuff, but, uh you know, the main functionality that you need, How to connect your stock quote table or your stock table to your stock quote gem. How to get the data out of Put it on the screen like this out of, you know, make these clickable and then have an individual page for each one that you can then, you know, go to so, uh, play around with this in the next video, I'm going to start to show you how to push all of this up to 1/3 party web hosting. We're gonna use her Roku to actually make this website live so people could start using it . You trolling domain name, do all that kind of stuff, and we'll start to look at that in the next video. 52. Rails stock 44 Heroku Intro: Okay, so we've pretty much finished our app here and now we want to push this up to third party Web hosting to make this live online. How do we do that? A bunch of different ways. The easiest way of I found by many, many, many years has used a company called Roku and we can head over to Let's just go Roku a row cu dot com H e r. Okay, you and apparently I am currently logged in. I need to log out. Okay, this is Hiroko dot com and they started out as a company that sort of specialized in ruby on rails, APS. Nowadays they hosts just about everything you can see down here. Job, script, node, ruby on rails, java, PHP, python, whatever you want. They probably have so head over to pricing. Now we're gonna use the free tier. There is a free tier. It works fantastically fine, but it's not particularly powerful. It's great for development purposes, like what we're doing here learning, creating a hobby website, things like that. And it works the same way as a regular account. But it's not powerful, So a few people can go to your app online, and it'll be fine if more than that come at the same time it starts to get real slow and Laghi and it doesn't work. It may even crash if, like more than a few dozen people come at once. So definitely not like professional, you know, the the the free tier, if you want actually pay for it. They started $7 a month per dino on a dyno is like a unit of measure like the more powerful you want your website to be, the more Dino's you throw at it, which is kind of nice. So when you're starting out, not many people are gonna come to your website. Everybody thinks they're gonna build the next Facebook and overnight millions of people are gonna show up. Doesn't happen. It starts out very gradual. So the first month, only a couple 100 people might come to your website. Why spend thousands of dollars on Web hosting? If only a couple 100 people are going to show up? So you get one Dino in the next month, more people start to come. Maybe you bump up to two Dino's and you can do that. You could just sort of slide up on down at different levels with the click of a mouse, you don't even need to know about servers or anything. It's all done for you in the background, so very, very cool, and I highly recommend them. But like I said, we're just gonna use the free tier. So go ahead and sign up for an account here. And, uh, like I said, we're gonna be using this. We installed the Roku tool belt way. Hey, back at the beginning of the course. So if we go to our terminal here and type in Roku Dash dash version, we can see that it has, in fact, been installed. If you don't get this message, go back and watch the video on how to install that. Her Okay, tool belt. It's important. You need to have that. But, uh, we should be good to go. So in this video, I just wanted to spend a couple of minutes like I just did talking about her, Okay. What? It is what you can expect, how much it costs for eat. We can use our own domain names with a We can use one of their domain names we're gonna be using one of theirs. I'll show you how to use your own if you want Teoh Super easy and very, very cool. So this works a lot like get hub how we push our code to get her. We're gonna do this sort of the same thing to push our code to Roku. And we need to make a couple of changes to our app first. And I think we'll start to do that in the next video. 53. Rails stock 45 Heroku Push: Okay, so we need to make a few changes to our code in order to use her. Roku so had overturned jump file. And remember, we've been using the sequel Light three database, and that works fine for development purposes, but it will not work with Harow. Cucaracha won't even let you use it. So we need to actually take this and remove it. So copy this and delete it Here, Come down here to either of these development groups and inside here. Just paste it in there. All right, So what we're saying here is we want to still use the sequel Light three database for developed development purposes like we've been using. But when we push our code upto her Roku, we want to create when he's a different database. And to designate that, let's just ah, come right in here. And let's create a new group and call it production. And then Dio and then and now inside a here. We need to designate what database we do want to use and her Okay, uses recommends something called post stress. It's a super popular database. It's been around forever. It's free. So let's head over to Ruby gems dot org's And you could just type Pete PG and stands for post Grads. Uh, 76 million downloads. That's probably the one we want. And we don't even need to look at the installation stuff. We could just come over here to this gem fire reference and click to copy it, head back over to our coat and just paste it in right there. So that's really all we have to do. Now we have to install this, but we install it in a different way than normal. You know, normally, when we add something to the gym file, we type bundle, install. Well, this time we need to type, bundle, install, dash, dash without production. Because what we're saying here, go ahead and hit. Enter. What we're saying here is install the bundle stuff, but don't install the production because we don't want to install this PG Jim locally, we don't want to install it on our computer. We only want this on Hiroko up in production. So I see back over here, we didn't get any errors. All right, so we're good to go there now. It's been a while since we saved our code to get hope. It's important that we do that. So let's go get add, period. Get commit. Dash A M. Added PG database to production. All right, and then get push. Okay, so we're ready to go now. Hopefully, you send up for an account with her Roku, and now we just need to log in. Soho. Roku, log in. We're gonna be doing a lot of Roku commands, and they almost all start with her. Roku. So it's same. Press Any key to open your browser toe log in or cute to exit. So I enter It opens up her browser. It says log in. Ah, see, I think this is my Roku account in your password. Oh, try again. There we go. So now you're logged in, you enclosure this page and return to your cli. It should now be logged in. So if we come back here, it says logging in done, logged in as Johnny blah, blah, blah. If you don't get this, if it just looks blank, that's okay. You're probably all right. Go ahead and hit control C to break out of that terminate bash job. Yes. Okay. So even though we just broke out of that little loopy thing there were still logged into Roku and good to go. So the first thing we want to do is create a new app with Roque. Every time you have a new project, you create a new app at Roque who for it and to do that, we just happened. Roku create. And this will create a NAB. You see, right here is the Earl of our app. So I can't right click and copy this. And we can head over to our browser and paste this in and you could see Boom, Here's our after it's live Now this is just the starter page. We haven't actually pushed our code up yet, but it's very cool is, you know, nice. Little happened just like that has been created. Now this is Are you Earl protected Dash Springs Dash 6468 nine dot Roku app dot com. We can rename that if we want to. In fact, let's give that trials go rename. Um, well, you type in her Roku rename and then what do we want? Let's try stocking. I don't know if that's taken yet. Probably is, uh, stocking has already taken All right. So how about stockings? Dockings has already taken. Uh, let's go stocking. I don't know. Older stock, nothing renaming. Okay, that seemed to have worked. So now if we come back here, this will no longer work. Now it's elder stock and a great you know, this is granted not much of anything. You know, it's not a very good domain name. We can use an actual domain name like www dot elder stock dot com or something. You know, whatever. Also had to do that in a couple of videos. So now we are almost ready to push our code up to her. Rocca five. We already and I think the only thing really left to Dio Well, first, remember when we installed devise way back when and let's see, it was where was that file been? Maybe no. At the dumb vendor under Maybe it was the environmental Oh config environments. Uh, development RB. We added this mailer thing at the bottom with local host, and then it told us to also do it for production, and it looks like we didn't do that. So I'm gonna go ahead and copy this whole thing. And in production down here at the bottom. Paste it in. But it's done a local host. This is gonna be that you are. L right. This thing, right? Oh, man. Did ice misspell elder e r l D E r. Let's change that elder stock. Um, so, yes, I did mis spell my own name. Oh, no, I didn't. Huh? That's weird. That happened. All right, let's coffee. This is just paste this in again to make sure Ariel Elder stock air we go, It looks better. All right, so overstocked out Roku app dot com We've added it here. Might have to change this poor guy later, but, uh, in fact, let's just get rid of that fourth. All right? Let's just save that now. We need to change this. We need to save this to get hubs of get add, period. Get commit. Dash A M added production devised thing that doesn't matter. Get push. All right. And now only thing left to do is push our code up to Roku. So take a deep breath and type and get push. Roku. Master, we're pushing our master branch of our get code up to her. Roku that we had enter now. This could take a long time. Sometimes it could take 10 minutes. Sometimes it would take 30 seconds. Sometimes it doesn't work at all. Chances are we will get an error here. Sometimes we dio and if we get a narrow, I'll walk you through it. But this is always sort of ah attends sort of thing. You're pushing your coat up to Roku back in the old days, pushing your coat up to Web hosting. It was, ah, lot, lot worse because you see on the screen, there's all kinds of weird stuff going on. And, ah, lots of chances for errors toe happen, especially when you're pushing remotely like this. So, uh, likely will be okay, but we might come into an error. Sometimes you get in there with the Post press reference that we did. Sometimes there's a new version of Post Press that has just come out, for instance. So when we grab the reference from Ruby gems dot ord and added to our code, it may not yet be ready like Hero who may not yet have updated their system to work with the new the new Post Grads database. So sometimes you'll get an error there. If that happens, you just use an older version of Post Crest. And you can add that in your gem file. You see, right here were saying, use version 1.1, but not but greater than or equal to 1.14 So you could just put a different number there. If you're getting an error when you push to her Roku and it says something about post grads Google it, Google her Roku Post credits version and it'll tell you the version that you should be using and you just type that in there, save it, pushed to get hub and then push it again to Roku. So, um, right now we're installing devised that always takes a little bit of time. Look at all this stuff. And it is. I got a warning that doesn't look like a big deal. And a lot of times, you know, if you do get a warning or an error, it will tell you what's going on, right? So I just read this and it will tell you if you can't figure out what's going on Google the air that you got, and you'll probably find a stack overflow article explaining it. So All right, I'm gonna pause the video because it looks like this is taking a while. Like I said, sometimes this can take 10 minutes. I've had him take half an hour before. Um, usually takes a couple of minutes, but I'll go ahead and pause this video and we'll take it back up when it starts up again. Okay? It looks like it just did something. When the completed heads up. These check your rails at for something. Post install message from SAS. That's ah CSS thing that I think bootstrap used to use. Warning. You've not declared a ruby version of your gem file. Warning. LA blah. Warning. Warning. Oprah Prock Files detected. Compressing, launching. Done. So we got a couple of warnings that air, No big deal, and then we can ignore it. Looks like and OK, it looks like it was successful. So let's puller at back up here and here. Reload and boom! Here is our app. It is live. If we type in Facebook, does it work? Yes, it does. Now here's something interesting. Our old app we logged in, we created an account. That account doesn't exist anymore. All these stocks, they still exist on our development environment, our local host. But none of these stocks are up here in our Roku app. And the reason that is is because we're using a different database. So all of those things were saved in the sequel light database. And that data doesn't get pushed up to Roku. So if we want to create it a new one, we have to start over again. Now, Uh, I just clicked. Log in and boom, we got an air. So this is not an actual error. We need to do one more step before this app is completely live, and I think we'll get that in the next video. 54. Rails stock 46 Heroku DB Migrate: Okay. Looks like our app is up and everything seems to be working. The about thing works. But if we want to sign up or log in, do anything database related. We get this error. What's going on? Well, think back to when we first created a database. Locally. Remember, databases are always a two step, the two step process. You create the migration, and then you push the migration. Well, we haven't done that for her, Roku. And we need to because we have a new database. We've created this new database thing, and we need to actually push it up to Hiroko. Now, we don't actually have to create the migrations because those migrations already exist. We just need to push them into our Roku Post press database. And so to do that, it's her Roku. All these commands start with Roku and then run. You want to run a command on Roku, you often type in heroic who run and then the command. Now our command was rails. Db migrate, break db Migrate is the way it used to be. But the newest version of rails now they do rails. Eso I think that's what we do here running rails to be migrate on elder stock blah blah, blah And you can see it's doing up Hey, notices free We're on a free here so it looks like boom, boom, boom! Okay, it's doing all the things inserting schema scheme. Ah, okay. We got no errors or anything, so hopefully this will work. Now if we hit reload here Boom! We can sign up. So let's sign up for an account and play with this thing Password, Password. Welcome. You've signed up successfully. We can add our profile if we want. Cancel our account If you want to show stocks, there aren't any stocks yet So let's create some stocks and you notice I didn't bootstrap. If I this page, I'll let you do that. If you want eso weaken g o grams on Oh, and I also tweet the show paged. Add the logo and I put this in an H to tag. You can check my get hub account if you want the code for that, but you should be able figure out how to do that by now. Uh, let's go back to create a new stock. GOOG Alphabet Inc. Let's create another new stock. What back? Uh, what else We want Facebook? Facebooking Cool. And now our app is live. So just that easy to push our app up to her. Okay, Now this is live. This is Anybody can go to this. U r L uh, Elder stocked out her Roku app dot com or whatever you named yours or if you use the default, you know, weird one that they generated for you. You can use that one too. Very cool. Anybody can go to it. It's live. It's free. Very, very cool. So in the next video, I'll show you how to point an actual domain name at this. If you have a domain name or want to buy one, I'll talk about that a little bit, and that will be in the next video. 55. Rails stock 47 Heroku Domain: OK in this video. I want to show you how to use an actual domain name instead of this. You know whatever dot Roku app dot com if you want to. So head back over to her Roku and you'll probably still be logged. Dan, if you dio there if you are, If you're not, log in. If you If you aren't, come through here and find your app. So ours was elder stock dot Roku app, and it's right here. You can see these are all Z. That's another thing about the free tier. It sleeps. If nobody's on your website, it goes to sleep. And then if somebody comes to your upside, it wakes up and it takes a few seconds to wake up. So that's why another reason why it's kind of slower, but it's free, so we don't complain, so you can see I've got quite a few APs. So click on your app and then let's see, we want settings. And if you just scroll down here, you see somewhere in delete the app. There you go custom domains. You want to add your own domain? Just click this button Now imagine we had ah elder stocks dot com. We would just type that in click Save Changes, and that is it. From now on, this will go to elder stocks dot com. Almost. There's one more step now. Whenever you order a domain name, you have tow purchase that from some company. And the companies that do that are called registrars kind of warrior name registrar. And there's a bunch of them Go Daddy named cheap. Whatever. I use something called name Chief. They are, in my opinion, the best domain registrar. The cheap domain names are generally less than $10 usually like nine something, and with the domain name you, you rent them per year, and every year you have to renew it and you have the first right to renew a domain name. What, you buy it the first time you know you can. Also, when you buy it the first time you can choose to pay for the next 10 years in advance, right? You can do that and then just not worry about it, or you could just do it yearly. And at the end of your year, you'll get une email from your registrar saying, Hey, it's time to renew or most of the time they have, like an auto renew thing you can set up. You can enter your credit card every year. We'll just charge another 10 bucks for it or whatever s. So that's how that works. Now, the next step is at your domain, Registrar. The place you ordered your domain name. You need to tell it to point that domain name to your heroic UAP. And I can't tell you how to do that because there are literally thousands of registrars and they all have different ways to do it. So what you want to do is just go to Google and type in, say, I'm at name Chief. I would type in name cheap and then her Roku. If I'm a go daddy out, what type and go Daddy Harajuku and then boom. The very first thing pointing a domain name to the heroic UAP on name, cheap dot com. They've got a little tutorial, tells you how to do it. So whatever you're register is, just do that Google it and it'll tell you exactly what you do. There's three or four steps reconfigure your app, your Roku app. We just did that by that. It means add your domain on your hero Coup settings, Just like we I just showed you a step. One step to verify your heroes grew account. In order to do this, I think you have to add a credit card to Roku. Now we're on the free tier. So they used to make you give a credit card to sign up at all. Even if you're just going to use a free tier now, broke, who is a top company? I mean, they are as big as it comes in technology land, right? I mean, there, there, well known there. Like as well known as Facebook in the developer world, they're not going to screw around with your credit card number. If you give you them their credit card number, they're not going to start charging you unless you actually tell them to buy purchasing Dino's. They just needed to verify that your human being I guess so. Do that. And then once your account is verified, you will be able to add a custom domain. That's what we did here. Added the domain right there. And then finally you can Well, you could just read your here and it tells you Step five were to go in name cheap. You click on the domain list thing, look on the thing, and then you add as a C name record, it looks like I don't know what's going on here. Yeah. See? Name record example dot Roku whatever dot com That's your app U R l Anyway, you get the point. I'm not gonna go through all of this. Uh, this is actually a little more complicated than I would think. There's a few more steps. Looks like 766 steps. I thought there were three or four. Bottom line is very, very easy. Just read through the instructions for your registrar. It's just a matter of putting your Roku. You are l which is this thing as a C name is pasting it in and, uh, saving it basically. So you'll be able do that wherever your register is, and it's just that easy. So, uh, vertical and, uh so I think we're gonna call this one done in the next video. I'll say a few more words and we'll wrap this up