-
Notifications
You must be signed in to change notification settings - Fork 0
/
comentando.html
187 lines (176 loc) · 10.1 KB
/
comentando.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Guía para la creación de la app - Rails Girl Córdoba 2015</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="http://railsgirls.com/cordoba">
<img src="images/railsgirls-logo.png">
</a>
</li>
<li>
<a href="index.html">1. Creando la aplicación web</a>
</li>
<li>
<a href="estructura.html">2. Revisando la estructura del proyecto </a>
</li>
<li>
<a href="fotos.html">3. Creando las fotos de la aplicación</a>
</li>
<li>
<a href="subida.html">4. Habilitando la subida de fotos</a>
</li>
<li>
<a href="web-bonita.html">5. Haciendo una aplicación web bonita</a>
</li>
<li>
<a href="rutas.html">6. Refinando rutas</a>
</li>
<li>
<a href="comentando.html">7. Comentando fotos</a>
</li>
<li>
<a href="internet.html">8. Tu aplicación en internet</a>
</li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle"> ☰</a>
<div class="row">
<div class="col-lg-12">
<h1>7. Comentando fotos</h1>
<p class="grey">A continuación vas a agregar una funcionalidad extra a tu aplicación web, y es la de incluir comentarios a las fotos que se van subiendo. En este caso, los comentarios serán un nuevo modelo de la base de datos de tu aplicación, e irán ligados a las fotos que se vayan añadiendo.</p>
<ul>
<li>Crea el modelo comment a través de la utilidad scaffold de rails:
<p><code>rails g scaffold comment text:string photo_id:integer</code></p>
<ul>
<li>
Presta atención al atributo photo_id. Necesitas que los comentarios estén relacionados con las fotos a las que pertenecen. En este atributo podrás guardar un número identificador de cada foto, con tal de establecer dicha relación.
</li>
</ul>
</li>
<li>Crea las tablas de la base de datos para comment con el comando rake:
<p><code>rake db:migrate</code></p>
</li>
<li>Abre el fichero app/models/photo.rb e incluye la siguiente linea:
<p><code>has_many :comments</code></p>
<ul>
<li>
Con esta línea le estás indicando a rails que una foto tiene varios comentarios. Esta manera de relacionar modelos de tu base de datos permite que tengas acceso a ellos fácilmente.
</li>
</ul>
</li>
<li>Abre el fichero app/models/comment.rb e incluye la siguiente linea:
<p><code>belongs_to :photo</code></p>
<ul>
<li>
Con esta línea le estás indicando a rails que un comentario pertenece a una foto.
</li>
</ul>
</li>
<li>Abre el fichero app/controllers/photos_controller.rb y busca la siguiente línea de código...
<p><code>def show</code></p>
… Y añade justo debajo las siguientes líneas de código:
<p><code>@comments = @photo.comments.all</code></p>
<p><code>@comment = @photo.comments.build</code></p>
<ul>
<li>
Con la primera nueva línea estás recogiendo en la variable <strong>@comments</strong> todos los comentarios de la foto.
</li>
<li>
Con la segunda estás preparando un contenedor para un nuevo comentario. Es necesario incluir esta línea para poder realizar el formulario de creación de comentarios desde la vista de foto.
</li>
</ul>
</li>
<li>
Abre el fichero app/controllers/comments_controller.rb y busca la siguiente línea de código...
<p><code>format.html { redirect_to @comment, notice: 'Comment was successfully created.' }</p></code>
… Y reemplaza por la siguiente línea de código:
<p><code>format.html { redirect_to @comment.photo }</p></code>
<ul>
<li>
El funcionamiento por defecto al crear un comentario es llevarte a un vista individual de dicho comentario, como se indica en el comando redirect_to del primer fragmento de código. Con el cambio que has hecho le estás diciendo a rails que te lleve a la vista de la foto a la que pertenece el comentario.
</li>
</ul>
</li>
<li>
Abre el fichero app/views/photos/show.html.erb y busca la siguiente línea de código...
<p><code><!-- COMMENTS --></p></code>
… Y reemplaza por las siguientes líneas de código:
<p><code>
<% @comments.each do |comment| %> <br>
<div class="comment"><%= comment.text %></div> <br>
<% end %> <br>
<%= render "comments/form" %>
</code></p>
<ul>
<li>
Con este fragmento de código estás visualizando todos los comentarios de tu foto en una lista. Justo después de esa vista estás incluyendo el formulario de creación de comentarios.
</li>
</ul>
</li>
<li>
Abre el fichero app/views/comments/_form.html.erb y reemplaza todo su contenido por las siguientes líneas de código:
<p><code>
<%= form_for( @comment ) do |f| %> <br>
<%= f.text_area :text %> <br>
<%= f.hidden_field :photo_id %> <br>
<%= f.submit %> <br>
<% end %> <br>
</p></code>
<ul>
<li>
Con este fragmento de código estás introduciendo el formulario para crear un comentario en la foto actual. Este formulario está compuesto por un área de texto donde incluir el comentario y un campo oculto que se rellena automáticamente con el identificador de la foto.
</li>
</ul>
</li>
<li>
Lanza el servidor de rails para ver tu aplicación con los cambios que has realizado:
<p><code>rails server</code></p>
<ul>
<li>
Si ya tenías el servidor de rails lanzado, cierralo. Para cerrar el servidor de rails pulsa las teclas CTRL y C en la terminal.
</li>
<li>
Dedica un rato a explorar las siguientes direcciones web de tu aplicación e intenta crear comentarios a través de <strong>photos/1:</strong>
</li>
<ul>
<li>
http://localhost:3000/photos/1
</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<script src="js/vendor.js"></script>
<script src="js/main.js"></script>
</body>
</html>