These are going to be the solutions for the Unit 2 homework.
Remember, we had 2 parts to this.
We had the ROT13 tool, and then we had the sign up page
that tested for errors and that sort of thing.
I'll show you quickly my versions working,
and then I'll show you the code, so let's start with the ROT13.
Okay, here's my ROT13 running on my local machine here.
I could type in some text, and if I submit,
it gets ROT13'd inside the text box,
and if I submit again, it gets changed back to the original text,
and that's how you know it's working.
It escapes properly.
We can see that by typing in our closed text area there,
and it's preserving everything.
All right, so let's take a peek at the code.
So, I'm in an appengine.py file.
This is the base ROT13 handler that I wrote.
It inherits from this base handler class, the ROT13 class does.
That added some convenience functions.
First, I have a write function, and this is short hand,
so I can say self.write instead of self.response.out.write.
I'll just save some typing.
And then I started using something called templates, and I'm going to spend
a little bit more time on templates in Unit 3.
It saves me the effort of having to type in all of the string substitutions
that you probably did for this homework if you didn't already
get tired of that and figure out templates.
My base page--well, let's look at the URL handler first.
We've got /unit2/rot13 maps to the Rot13 class,
and so we come up here to our Rot13 class, and it's got 2 functions.
It's got a get function, and all this does is it renders
this file called rot13-form.html.
Now, your version, you may have printed a whole string.
This accomplishes that same thing, and I'll go ahead and show you that file.
It's right here.
We want to get in the habit going forward of starting to separate these things,
and I apologize for putting you through that heartache of
writing out long strings first, but you'll appreciate
the niceness of this once you've done it the hard way.
This just returns some HTML.
It's got our title.
It's got an h2, which makes some big text at the top of the page.
Here's our form. Its method is post.
And it's got a text area.
The text area has a name of text.
I added a little styling here to make it a little bigger.
This is just some basic CSS.
You're free to copy this from my demo when I put this source stuff online.
This syntax here, again, we'll talk about this more in the next lesson,
but instead of doing the string substitution,
this substitutes the variable text passed into the template,
and it automatically escapes it for me so I don't have to deal with that,
and this closes the text area, and then there's a submit button.
That's pretty simple.
If I were to turn off the auto escaping ability,
which is set by this parameter here, let me show you the behavior of that.
Okay, so here we've got some text in here.
Remember, I disabled the texting--I'm sorry.
I disabled the escaping, so let's see what happens when we submit this.
It works the first time, but the second time the text jumps outside the box.
Why did that happen?
Well, when we turn that ROT13 text area back into a closing text area,
it actually closed our text area in the HTML
and then put this text outside it.
If I were to view the source of this file, which you can do in Chrome easily,
we can see what happened.
You can see my template, and then you can see my text area gets closed
by the unescaped version of that text
and then "escapes properly" gets put outside the text area.
And then here is the closing text area for my template,
so we want to make sure if we go back to our editor here
and I turn on escaping again--this is something you're probably doing by hand,
which is how we learned to do it initially--and if I were to go to Chrome
and then reload this page--reload, that's going to confirm the form submission--
we can see that my text area actually got escaped.
And so this is what the template has, and this is how it renders.
Now, what's interesting to note is that even though our HTML
has the escaped version of less than and greater than,
it renders as less than and greater than, and when we submit the form,
it's as less than and greater than.
It's not as the escaped version, so hopefully you had a chance to
kind of experiment that and see for yourself,
but that's how that works.
Estas son las soluciones
para los ejercicios de la Unidad 2.
Recuerda, tenemos 2 partes de esto.
Tenemos ROT13 y después
la página para registrarse
este revisa errores y ese tipo de cosas.
Os voy a mostrar rápidamente
mis versiones de trabajo,
y después os mostraré el código,
así que vamos a empezar con ROT13.
Vale, aquí tenemos mi RTO13
funcionando en mi máquina local.
Puedo escribirle algo de texto,
y si lo envío,
le llega ROT13 dentro de la caja,
y si lo vuelvo a enviar,
se vuelve a cambiar al texto original,
y así es como sabes que está funcionando.
Arranca adecuadamente.
Podemos observar que al escribir
en nuestra área de texto cerrada aquí,
se preserva todo.
Bien, vamos a echarle un vistazo al código.
Estoy en el archivo appengine.py
Esta es la base del
manipulador ROT13 que escribí.
Este hereda de esta clase
de manipulador, el ROT13 lo hace.
Esto añade algunas
funciones por conveniencia.
Primero, tengo una función
de escritura, y esto es abreviado,
así puedo decir self.write
en lugar de self.resonse.out.write.
Solo guardaré algo escrito.
Y después uso una cosa
llamada plantillas; emplearé
un poco más de tiempo en
explicar las plantillas en la Unidad 3.
Me ahorra el esfuerzo de tener
que escribir todas las series sustitutas
que probablemente hayas hecho
para este ejercicio si es que aún no
te has aburrido ya
y resuelves las plantillas.
Mi página base...bueno,
vamos a ver primero el manipulador de la URL.
Tenemos /unit2/rot13 maps en la clase Rot13,
y aquí nos aparece nuestra
clase Rot13 y sus dos funciones.
Tiene una función para empezar
y todo lo que hacer es representar
este archivo llamado rot13-form.html.
Tu versión debe haber copiado la serie completa.
Esto logra lo mismo, vamos a
seguir adelante y mostrarte este archivo.
Está justamente aquí.
Queremos que te acostumbres
empezando a separar este tipo de cosas
y perdonadme por poneros en esta angustia de
tener que escribir un montón de
series primero, pero apreciaréis
lo bonito que es una vez lo hayáis hecho por fuerza.
Nos devuelve algún HTML.
Tiene nuestro título.
tiene un h2, lo que hace el texto
más grande en la parte superior de la página.
Aquí está nuestra forma. Su método está publicado.
Y tiene un área de texto.
El área de texto tiene un nombre de texto.
He añadido añadido un poco
de estilo aquí para hacerlo más grande.
Esto es básicamente una CSS.
Siéntete libre en copiar esta forma
de mi demo cuando ponga esta fuente en línea.
Esta sintaxis aquí, otra vez,
hablaremos más en la siguiente lección
pero en lugar de hacer la sustitución de serie
esto sustituye el texto variable
que se ha pasado a una plantilla,
y automáticamente lo arranca por mí,
no me tengo que preocupar,
cierra el texto de área y después,
aquí está el botón de enviar.
Es muy sencillo.
Si quiero desactivar la función de autoarranque,
que se activa en este parámetro de aquí,
dejadme que os muestre su comportamiento.
Vale, aquí tenemos algo de texto.
Recordad, he desactivado el texto, lo siento.
He desactivado el arranque,
así que vamos a ver qué pasa cuando envío esto.
Funciona la primera vez,
pero la segunda, el texto salta fuera de la caja.
¿Por qué pasa esto?
Bien, cuando devolvemos esta área
de texto ROT13 a un área de texto cerrada,
esto realmente ha encerrado
nuestro área de texto en el HTML
y después ha puesto este texto fuera de él.
Si quisiera ver la fuente de este archivo,
que se puede hacer muy fácilmente a través de Chrome,
podemos ver qué ha pasado.
Puedes ver mi plantilla, y después puedes
ver que mi área de texto se encierra
por la versión sin arranque de este texto
y después "arranca adecuadamente",
se pone fuera del área de texto.
Y después, aquí tenemos el área
de texto cerrado para mi plantilla,
así que queremos asegurarnos de
que si volvemos a nuestro editor aquí
y activamos el arranque de nuevo.
Es algo que seguramente hagas manualmente,
que es como hemos aprendido a hacerlo
desde un principio... y si voy a Chrome
y vuelvo a cargar la página...
Va a confirmar el envío de la forma
podemos ver que mi área de texto en realidad ha ido.
Esto es lo que la plantilla tiene, y es como se presenta.
Lo que hay que destacar es que aunque nuestro HTML
tiene la versión de arranque de menos que y mayor que,
se presenta como menos que y mayor que,
y cuando enviamos la forma
es como menos que y mayor que.
No es como la versión de arranque,
así que afortunadamente tiene la suerte
de hacer un experimento y verlo por ti mismo,
pero es como esto funciona.
レッスン2の宿題の解説をします
ポイントは2点あります
ROT13とサインアップページの作成です
ここでエラーなどをチェックします
私の作ったものをお見せします
まずROT13のコードから始めましょう
これは私のローカルマシンで走っているROT13です
テキストを入力して送信すると
ROT13で変換されたものが表示されます
再度送信すると元のテキストに戻ります
こうなることは知っていますね
ecscapes properlyと入力します
テキストエリアに入力されました
そしてこれを保存します
ここでコードを確認してみましょう
これはappengine.pyファイルです
これが私の書いたROT13ハンドラです
BaseHandlerクラスを継承しています
便利な関数が含まれています
まず省略表現であるwrite関数を使います
self.response.out.writeの代わりに
self.writeが使えます
書かれたものをセーブするだけです
次にテンプレートを使います
これについてはレッスン3で説明します
文字列を作る時にすべてをタイプする手間が省けます
宿題で使った人もいるかもしれませんね
すべてタイプした人もいるでしょう
まず最初に私のページのハンドラを見てみましょう
ROT13クラスに位置する/unit2/rot13とあります
上のROT13を見ると関数が2つあります
GET関数は表示の働きをします
このファイルはrot13-form.htmlです
この文字列をすべてコピーした人もいるかもしれません
これでも同じことができます
ファイルを見てみましょう
これがそのファイルです
ファイルは分けておきましょう
長い文字列を書かせてしまいすみません
頭が痛くなってしまったかもしれませんね
これでずっと楽になります
これはHTMLを返すだけです
これはタイトルの部分です
h2はページのトップの大きい文字です
ここがフォームでメソッドはPOSTです
それからtextareaがあります
textareaにはテキストの名前と
エリアを少し大きくするスタイルを加えました
これは基本的なCSSです
このフォームをコピーしてもいいです
これは次のレッスンでやりますが
文字列を入れ替える代わりに
様々なテキストをテンプレートに当てはめてくれます
何もしなくても自動的にエスケープします
そして送信ボタンでtextareaを閉じます
非常に簡単です
もしも自動エスケープを削除したら
このパラメータで設定されていますが
どうなるか見てみましょう
ここにテキストが入っています
今入力はできませんがやってみましょう
エスケープを削除した場合
送信後どうなるのか見てみましょう
1度目は普通に動きますが
2度目はボックスから出てしまいます
なぜでしょう?
ROT13のtextareaをクローズにすると
HTMLでのtextareaもクローズになり
テキストが外に出てしまいます
Chromeでこのファイルのソースを見てみると
原因が分かります
テンプレートでtextareaが非エスケープになり
クローズされているためエスケープされず
textareaからはみ出てしまうのです
ここでクローズになっています
エディタをさかのぼって
再度エスケープを設定します ここは手入力ですね
初めに習ったやり方です
そしてChromeに戻りこのページをリロードします
フォームの送信を確認すると
textareaがエスケープされているのが分かります
テンプレートを変えると
このように正しく表示されます
気をつけてほしいのは
HTMLには<>の記号があり
<>が表示されると送信した場合
<>のまま表示されます
これはエスケープバージョンではありません
時間があれば試してみてください
このように動くはずです
Essas são as soluções para o dever
de casa da Unidade 2.
Lembre-se: ele foi dividido em duas partes.
Nós tínhamos a ferramenta ROT13, e depois
nós tínhamos a página de inscrição
que testava erros e esse tipo de coisa.
Eu vou mostrar rapidamente para vocês as
minhas versões em funcionamento
e depois eu irei mostrar o código, então
vamos começar com o ROT13.
Ok, aqui está meu ROT13 funcionando
na minha máquina aqui.
Eu poderia digitar "some text" e,
se eu clicar em "Submit",
ele fica em formato ROT13 dentro
da caixa de texto.
Se eu clicar em "Submit" novamente,
ele volta para o texto original.
É assim que sabemos que está funcionando.
O programa está apresentando
os dados corretos.
Nós podemos ver ao digitar
em nossa área de texto.
Ele está preservando os dados.
Muito bem, vamos dar uma
olhada no código.
Eu estou no arquivo appengine.py.
Este é o "BaseHandler ROT13"
que eu escrevi.
A "class Rot13" herda da
"class BaseHandler".
Ela tem algumas funções úteis a mais.
Primeiro, eu tenho uma função "write".
Ela funciona como uma abreviação.
Ou seja, eu posso escrever "self.write"
em vez de "self.response.out.write".
Não vou ter que escrever tanto.
E depois eu comecei a usar
algo chamado "templates".
Eu vou gastar mais tempo
em templates na Unidade 3.
Elas me poupam do esforço
de ter que digitar
em todas as substituições de strings.
Coisa que você, provavelmente,
fez para esse dever de casa.
Isso se você ainda não se cansou
e descobriu as templates.
Minha página principal...
Bem, vamos dar uma olhada
no manipulador da URL primeiro.
Nós temos "/unit2/rot13"
que requisita a "class Rot13".
Vamos subir aqui até à nossa
"class Rot13". Ela tem duas funções.
Tem a função "get".
Ela renderiza
esse arquivo chamado "rot13-form.html".
Bem, você deve ter apresentado
uma string inteira na sua versão.
Essa função faz exatamente isso.
Deixe-me lhe mostrar esse arquivo.
Está bem aqui.
Daqui em diante, queremos ter o hábito
de separar estas coisas.
Desculpe-me por ter feito
vocês terem o aborrecimento
de ter que escrever
strings gigantescas antes.
Mas vocês vão apreciar mais
a beleza desse método
depois de o terem feito
da maneira mais difícil.
Ela responde com uma HTML.
Tem o nosso título.
Tem um "h2", que escreve um
texto enorme no topo da página.
Aqui está o nosso "form".
Seu método é "post".
Tem uma "textarea".
Essa "textarea" tem um
"name" que é "text".
Eu acrescentei um "style" aqui
para fazê-lo um pouco maior.
Isso é só CSS básico.
Fique à vontade para copiar
isso do meu programa demonstrativo
depois que eu colocar
o código-fonte na internet.
Sobre essa sintaxe aqui, novamente, nós
falaremos mais a respeito na próxima aula,
mas ao em vez de fazer uma
substituição de strings,
ela substitui a variável "text"
passada para o template,
e o apresenta automaticamente para mim,
para que eu não tenha que lidar com isso.
E isso fecha a "textarea".
E aqui está o botão "Submit".
É bem simples!
Se eu fosse desabilitar essa
habilidade "autoescape",
que é definido por esse parâmetro aqui --
deixe-me mostrar como ele se comporta.
Ok, aqui nós temos um texto aqui.
Lembre-se de que eu desabilitei o texto...
Desculpe.
Eu desabilitei a apresentação do texto.
Então, vejamos o que acontece
quando eu clico em "Submit".
Funciona da primeira vez, mas
da segunda, o texto pula fora da caixa.
Por que isso aconteceu?
Bem, ao colocarmos a área de texto
ROT13 de volta na área de texto fechado,
ele realmente fecha nossa área
de texto na HTML
e apresenta o texto fora da caixa.
Se eu fosse olhar a fonte desse arquivo,
o que você pode fazer facilmente no Chrome,
você pode ver que isso aconteceu.
Você pode ver meu template e depois pode
ver que a minha área de texto foi fechada
pela versão não-apresentada daquele texto
e depois "escape properly!!" é
colocado fora da área de texto.
E aqui está o fechamento
da área de texto do meu template.
Então, nós queremos ter certeza...
Se voltarmos para o editor
e ativar a apresentação novamente -- isso
é algo que provavelmente fazemos à mão,
da maneira como aprendemos a fazer
inicialmente -- se eu fosse no Chrome
e recarregasse a página -- recarregasse,
ela vai confirmar o envio do formulário --
nós podemos ver que minha área
de texto realmente foi apresentada.
E é isso que o template possui,
e é como ele é apresentado.
Agora, o interessante é que,
mesmo nosso HTML
possui uma versão de apresentação
de "menor do que/maior do que",
ela apresenta como
"menor ou maior do que",
e quando nós clicamos em "Submit",
o "menor e maior do que" aparecem.
Não é a versão de apresentação.
Espero que você tenha tido
a oportunidade de experimentar isso
e vê-lo com os próprios olhos.
É assim que funciona.