Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Rails 8 Course - Beginner to Intermediate!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
This video demonstrates how to create a scaffold in Ruby on Rails, explaining the process of generating model-view-controller (MVC) components, migrating the database schema, and enhancing the application with CSS styling for a better user interface.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Okay, so we're ready to rock and roll.
0:00
And the first thing that we're
going to do is create a scaffold.
0:01
If you've never heard of that, then pay
attention because this is important.
0:04
What we're gonna do is head to
the terminal, and inside of here,
0:06
we're going to start
the server using Control C.
0:08
Then we're gonna do is press clear or
type clear,
0:10
and then that's gonna clear the terminal.
0:12
Inside of here We're
gonna run a command and
0:14
the command is going to generate a bunch
of files inside of all these folders.
0:16
It's gonna create a few folders
inside of these folders, and
0:20
it's gonna really help us.
0:22
So a scaffold is essentially a collection
of files that's gonna allow us to create,
0:23
read, update and destroy a model.
0:27
Now, you'll see what I mean
after we actually create it,
0:29
if you've never created before.
0:31
So I'm just going to control and
scroll wheel to zoom in and
0:32
zoom out of the terminal.
0:35
Now, inside of the terminal,
I'm gonna do Rails G Scaffold, and
0:36
we're gonna call it post, and we're
gonna say title, text, user_ID integer.
0:41
It's extremely important that you
have it the way that I have it here.
0:48
I'll just bump it up so you can see it.
0:51
Rails G scaffold, post, title,
and I actually made a mistake.
0:53
So make sure you have it like this so that
you can see, post, title, text, user_id,
0:56
integer.
1:00
It has to be exactly the same as I have
here so that it doesn't have an error,
1:00
hit Enter on that command and
it's going to create a scaffold.
1:04
See, before we run Rails DB Migrate,
1:06
we're just gonna see what that
scaffold actually created.
1:08
If we go to App Views, you can see
there's a new folder here called Posts.
1:10
It also created controllers and
also created a model.
1:14
Now, you notice that created the view the
models on the controller, and that's MVC.
1:17
MVC is the type of architecture
that rails is, and
1:21
we'll talk about a little bit
more about that in a second.
1:22
So now that we've done that,
we're gonna run another command,
1:25
this command is called Rails DB Migrate.
1:27
This is going to migrate this model to
the database and change the schema RB.
1:29
The schema RB is the representation
of the database.
1:34
So go to DB Schema RB, and here we have
the representation of the database.
1:37
This is what the database looks like,
it's called a schema.RB.
1:41
RB is the Ruby because
it's a Ruby file and
1:45
schema is what they call
it in all programming.
1:47
So now that we've done that,
what we're gonna do is hit Rails S again.
1:49
And if we refresh our application,
even though we run that Rails G scaffold
1:53
command, G stands for
generate, by the way.
1:56
Even though we run that,
nothing's happened to our application.
1:58
So let's go ahead and
let's go to the config roots RB file and
2:00
inside of here we're going to uncomment
this line, root, post, index.
2:03
Make sure you have to have it exactly like
this, root quotes, post, hashtag, index.
2:08
Everything in programming kind
of has to be exactly as it is,
2:11
it has to be exactly
syntactically correct.
2:14
So once we do that and
2:17
then we refresh the page, we should
have a completely new application.
2:18
And I'll just show you what it looks like,
as you can see, it says post, new post.
2:21
And if you haven't seen this before,
2:24
it's gonna be kind of wild because you
can create a new post very quickly and
2:26
you can edit it and delete it and
all this good stuff.
2:29
And the good thing about this is that even
if we stop the server turn off our PC,
2:32
this post is still gonna be there.
2:36
Obviously, if I didn't delete it or
destroy it,
2:37
it would have still been there.
2:39
But I'm just gonna show you like this
post is saved to the database, so
2:40
that's the cool thing about this.
2:44
Now you can play around with that, but
2:46
I don't really like how this looks
because I think it's a little bit ugly.
2:47
So what we're going to do is add a CSS
framework to this application and
2:51
it's gonna be called Holiday.CSS.
2:55
So navigate to the website
called holidaycss.js.org and
2:57
inside of here there's a link,
a link rel_stylesheet, href to this link.
3:01
And if we add this link
to our application,
3:07
more specifically to our application HTML,
which is a file I'll show you now,
3:08
then our application is
gonna look a lot better.
3:12
So I'll just show instead of talk.
3:14
So app views, layouts,
application HTML, erb and
3:16
inside of here we wanna add
it inside of the head tag.
3:19
So if I just bump that out out of it, then
want to add it inside of the head tag.
3:23
So you just copy and
paste this link inside of the head tag.
3:27
And then if you save the file and
the refresh.
3:30
The application is obviously
looking a little bit better.
3:31
Now, notice how it's changed
the dark mode, the font size,
3:33
the font sizes have changed,
everything kind of looks better.
3:37
Well, if you don't like it that way,
then you can obviously change it back.
3:40
Or you can just choose a different CSS
library by going to the website called
3:43
css_bedbed.com so css bed.com kind of has
a lot of CSS different CSS libraries.
3:48
And these CSS libraries are free and
3:54
you can just click on each one,
see how it looks.
3:56
So that's Holiday and we can go to Bamboo.
3:58
As you can see, it looks different AWS M.
4:00
That's just a side note, but
4:03
it's just something cool that
I like to tell you about.
4:05
So those are all the different
CSS libraries, right?
4:07
So I'm going to X out of that because
I like this one called Holiday.
4:10
And so that's the CSS library,
our office looking good.
4:13
So this is really good, we can now
create a post and that's really cool.
4:15
We don't know who the user is because
we haven't added user authentication.
4:19
And one thing that I'd like to do is I'd
like to go to VS code, if I just fix this,
4:22
I'd like to go to VS code.
4:26
We'll go to posts,
underscore post HTML and
4:28
inside of this file we're just going to.
4:30
If I just bump this up, we're gonna get
rid of title because we don't need that
4:32
and we're going to get rid of user because
we obviously know that that's the title.
4:35
And we know that that's, we don't,
we're not obviously gonna show a user ID.
4:39
In the future,
we're gonna add the username or username.
4:42
So yeah, but right now we don't have that,
so that's okay.
4:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up