This is the first course in a Coursera Specialization track involving Web Application Architectures. This course will give you the basic background, terminology and fundamental concepts that you need to understand in order to build modern full stack web applications. A full stack web developer is familiar with each "layer" of the software technologies involved in a web application, including data modeling and database technologies, the web server environment and middleware components, network protocols, the user interface and basic visual design and user interaction concepts. In this course we will learn by doing. We will start by learning the major components of web application architectures, along with the fundamental design patterns and philosophies that are used to organize them. You will build and continually refine a fully functional full-stack web application as we progress through the modules in this course. Along the way you will be exposed to agile software development practices, numerous tools that software engineers are expected to know how to use, and a modern web application development framework. This course is also available in Spanish. To join the Spanish version, visit this page: https://www.coursera.org/learn/apliweb.
Video 4: Blog App - Iteration 5
Loading...
Del curso dictado por University of New Mexico
Web Application Development: Basic Concepts
118 calificaciones
De la lección
Module #5 - The User Interface
In our final module we will discuss the User Interface. We will touch on CSS and JavaScript, and how these are used to add style to layout and design of HTML documents. We will also learn about Ajax and how it improves user requests.
Conoce a los instructores
Greg HeilemanProfessor and Associate Provost
Electrical and Computer Engineering
Manel Martínez-RamónProfessor
Electrical and Computer Engineering
[MUSIC]
In this video, I'll discuss the fifth and
final iteration of the blog application that will be a part of this course.
But don't be surprised if you see the blog application show up in a later course.
I'll show you how to add some ajax to the blog application.
So as we add this ajax, I'd also like to refactor the application.
Let's take a look in our blog application, let's go to app,
let's go to views, and then let's go to the show.html.erb.
And this is currently what happens if you try to show one of your posts.
We'll show the title, and then we'll show the body of the post and
there'll be some links at the bottom of the page.
I'd like to refactor this and let me show you how.
I'd like to refactor the posts/show.html.erb file as follows.
What I like to do is first at the very top, I'd like to have the code for
displaying a particular post.
Underneath that I'd like to show all of the comments that are associated with
that post.
Beneath that, let's have a form for
adding new comments if you'd like to that particular post.
And then let's put the same links at the bottom, the edit and back links.
The places where I'm going to have to change some things are these.
Do we have the code for displaying a post?
But we don't have yet the code here for displaying comments or a form for
creating a new post.
Now as a part of this refactoring,
I'm going to create something in Rails called a partial.
And what a partial is, is it's a fragment of view code.
And the first one I'm going to do it for is for posts.
So to display a post I'm going to create a div and
this is a helper method for creating a div.
I'm going to hand it the post and we're going to print the post title, and
this is within embedded Ruby as an h2, second level heading here.
And this h method here, what that does is it escapes HTML.
So if you have some funny things in the title It'll still be able to escape it,
produce the appropriate HTML to allow it to display in your browser,
the next line displays the body of the post, so again, we're first escaping any
unsafe HTML and then simple format will produce a very simple HTML formatting.
Store all of this under views > posts in the file_post.html.arb.
Very important,
partials have to have an underscore as the first character in their file name.
The whole goal with partials is to refactor your code
to create these snippets that can be used over and over again.
Let me show you how.
Going back to our show.html.arb, I can remove all of this code, this
was the code for showing the title and the body, and instead just call that partial.
And here's how it's done, just render post.
And post, it knows to look for _post.html.arb In the post sub directory.
Now let's create a partial for adding comments below the posts.
So go to your views comments subdirectory, and
create a file called _comment.html.erb.
And let's put this in it.
We're going to create a div for
our comments and here's just a little HTML formatting.
The first says that this is a paragraph.
That's what the p is.
And then I like it strong so
we want this emphasized in however emphasize is being styled.
And then we're going to put posted and
we're going to use this helper method time_ago_in_words.
So this will tell us how long ago this particular comment was created.
Now notice that I'm not using an @ symbol here.
That's because I'm going to be dealing with a whole list of comments.
So this div is going to need to work for each of those comments.
Let's go ahead and use this partial now in our post show method.
So we'll place it right here and what I'm going to do is I'm going to create a div
for all of the comments, I'm going to give a div id for all of those comments.
And here is the partial,
I'm calling that partial on each of the individual comments.
So this goes post.comments, and then I'm using reverse because I want to display
these In reverse chronological order.
The most recent comment should appear on top and the oldest at the bottom.
Let's go ahead and save this, start up or server, and
see if everything's still working.
I've started the server, and
if I go to local host 3000, we see there's the rails app.
Let's see if I can still view my posts, and there they are.
And if I take a look at a particular post, and we see that everything is working.
Here's the title of the post, the body, and then all of the comments in reverse
chronological order, and finally the links at the bottom of the page.
Here's the code for the form.
So we're going to use the form_for method and just copy some of this, we'll explain
more of it later when we have an opportunity to get deeper into HTML.
But I'm going to pass a post and then we're going to create a new comment.
And that's going to be the basis for how we fill in this form.
This remote true, this is how we're going to end up calling JavaScript.
And then there's going to be a label called new comment that will
appear in the browser.
And then this is a control.
This text area is we're going to be able to enter our text for the new comment.
And then there's a Submit button that will appear at the bottom.
Let's save this and start up the server and see if this now works.
I'm just going to hit Refresh and see what happens.
And we'll see an error was generated.
There's a problem here.
There's no path, there's no route for post comments path.
And I'll show you the reason for this and how to fix it.
To show you what the issue is, go to the root of your Rails application, and
type rake routes.
And you'll see that there are a bunch of routes that are available to us, but
there are none for POST followed by comments.
Let's fix that.
Go to the config subdirectory and
select routes.rb, and this is what it looks like n ow.
What we need to do is add what's called a sub-resource, and
it's actually described further down here.
It talks about the fact that if you're going to create sub Resources,
you do it in this way.
And so, this is what we're going to need to do,
because a comment is a sub-resource for a post.
We'd like to create a set of routes that has post followed by comments, and
here's how you do it.
You add the do statement and
then you nest this resource comments within this do statement.
Let's go back to our operating system console and see if we have any new routes.
Again type rake routes and you should see a bunch of new routes
associated with the sub resource for comments, and here they are.
Now let's reload that page and see if we can get that form to display properly.
I restarted the server, because every time you change your route you need to do that.
Let's reload this page and see if it fixed things.
And sure enough, everything now works.
This looks much better.
So, now we have our posted self.
We've got the comments underneath it, and at the bottom we have a form.
There's a little more we need to do,
however in order to make this form work properly.
Recovered I told you that this remote true,
because it is JavaScript to be called.
The forum will call the create method in our comments controller.
So we need to tell our commentsController to support JavaScript and
here's how you do that.
Go to your commentsController, scroll down to you find create method and
we need to create a new line here.
Called format tut js.
This will qualify create.js.erb if it exists.
So you need to go to views, comments, and
you need to create a new file called create.js.erb.
I've created it and here are the,
here's the jQuery commands that I've placed in it.
So the first line creates a new variable And what it does is it renders the content
and then it uses this J method to escape anything that's unsafe for Java script.
And then I'm hiding this.
This is a jQuery method.
I'm hiding this and then I'm going to prepend a new comment to
the comment div that we created and then I'm going to fade it in slowly.
So for the new actual comment that's under the comment div,
is going to fade in slowly.
And so this gives it a nice appearance that the user can actually
see the comment coming in.
And then the last thing is you need to reset the form, so a user can enter yet
another comment.
Let's take a look at how this looks in a browser now,
let's enter a new comment and see what happens.
So I'm want to add this comment and take a look up at this top area and
you should see it fading and fairly quickly.
Hey we just got JavaScript to working on our blog application, this is pretty cool.
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2018 Coursera Inc. Todos los derechos reservados.
