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 3: Dynamic Content Creation
Loading...
来自 University of New Mexico 的课程
Web Application Development: Basic Concepts
113 个评分
从本节课中
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.
与讲师见面
Greg HeilemanProfessor and Associate Provost
Electrical and Computer Engineering
Manel Martínez-RamónProfessor
Electrical and Computer Engineering
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.
