Name: Video 3: Dynamic Content Creation
Uploaded: 2016-04-29T16:33:08.977Z
Duration: 5 min 55 s
Description: Watch this video about Video 3: Dynamic Content Creation for Lesson #3 - Dynamic Content and Ajax in Web Application Development: Basic Concepts. 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.

In this video we'll go into

the details of how HTML content is dynamically created on the server

side of a model view controller-based web application framework.

We'll also discuss the specifics of how this is accomplished in Rails.

As we've discussed, the controller and

view in the model view controller designed pattern are tightly coupled.

Controllers supply the data to the views and the controller actions are typically

the targets of the links provided in all of the views in your Rails application.

In Rails, a controller makes every instance variable

in it available to the associated view files.

For example, all post are retrieved in the post controller index method and

then stored in this post array.

You'll see that this array is accessed using an iterator in that file.

Here it is.

This is the array that was created and

here an iterator is being applied to it within this embedded Ruby statement.

In Rails dynamic content is generated using templates, and the most common

templating framework is Embedded Ruby the one we're using ERb for short.

ERb is a filter it takes a .html.erb file one that has that extension

as input and transforms it into an HTML file as output.

It takes normal HTML content and

just passes it through the filter without modification.

It's the content between these less than and percent signs and

percent sign greater than that's interpreted as Ruby, and

what happens is this code gets executed and

then it gets substituted back in place of that string in order to create the HTML.

You can also see, you'll notice the first one had an equal sign.

The second one I'm showing you here does not have an equal sign.

This code is interpreted but the results are not substituted back in to the file.

So this is generally used for control statements.

Here's an example.

Here's the case where there's no equal sign use, so

this is executed as a control statement.

Here's two others in this embedded ruby statement, there's an equal sign and so

this code is executed and the results of that execution are substituted back in, in

place of this string although ERb allows you to insert Ruby code do it sparingly.

It's a matter of good design to use as little as possible.

Most of the logic associated with your web app should be in your controllers,

you shouldn't have business logic In your view code as a general rule of thumb.

In a RESTful architecture, the HTML code in the ERb templates should specify

the structure of the document, and the Ruby code should be just filling in

the pieces, providing specific information related to a particular resource.

For example, if you're pulling these posts, it's the actual.

Post itself that's being placed into the file.

Application level functionalities I've already mentioned I want to re mention it

here to emphasize should never be in ERb templates.

For generating HTML elements and formatting data there's also a bunch of

helper methods I'll show you a few of these in just a moment.

First though, let's look at the layouts.

In order to generate the final HTML file that will be supplied to your browser,

a layout file is involved.

The file that I just showed you,

this template, is passed to this layout file as a block.

So take a look for example in your blog app

at the under views/layouts/application.html.erb.

This is a layout file and it's automatically created for

you whenever you build a new Rails application.

What are the advantages of layouts?

Well you can change the look and feel of your site by editing one file,

this particular application file.

The style sheets that are associated with it.

In addition, you can create specific layout files for

specific portions of your website.

The way this works is, if you name a layout file the same name as

one of your controllers, and then you place it under this layout sub directory,

then it will be used whenever that controller needs to generate a view.

Here's what this application.html.erb layout file looks like.

Notice that it's responsible for creating a well formed HTML document, so

here's the !DOCTYPE html, head, here's the title, it generates

it automatically according to the name you use when you created the website.

And these are three different helper methods.

So this first helper method that I show here is used for

creating a link tag that you need in order to read in a stylesheet.

Here's one that you'll use for reading a JavaScript file and then this is

a security, this meta tag csrf Meta tag is used to stopped cross-eyed scripting.

And this yield statement?

This is the thing that reads in that template so it gets pasted here.

So this is where that index.html.erb would be pasted right here

in order to generate the entire html file.

Let's take a look at some specific examples.

I've opened an editor and I've got my blog app here, and

the first thing I want to show you is if you go under App/ views/ layouts,

you'll see the application .html.arb so it's what I showed you previously,

again this is the important yield statement.

If in the post controller you end up calling this index method,

then here's the HTML that will be placed where that yield statement is.

And so again, these normal HTML is just passed through.

And here is some of the embedded ruby code that I showed you earlier Well this file

gets combined with the application .HTML.urb to produce the final HTML file

that's supplied to the browser.

Video 3: Dynamic Content Creation

Web Application Development: Basic Concepts

与讲师见面