forked from cherimarie/gdi-rails
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathclass1.html
348 lines (292 loc) · 13.1 KB
/
class1.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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intro to Rails</title>
<meta name="description" content="This is an Intro to Rails course, intended for eventual inclusion in the Girl Develop It Core Curriculum. All material by Cheri Allen, inspired by Railsbridge.
The course is meant to be taught in four two-hour workshops. Each of the slides and practice files are customizable according to the needs of a given class or audience.">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<link rel="stylesheet" href="reveal.js/css/theme/gdicool.css" id="theme">
<link rel="stylesheet" href="overwrite.css">
<!-- For syntax highlighting -->
<!-- light editor<link rel="stylesheet" href="lib/css/light.css">-->
<!-- dark editor--><link rel="stylesheet" href="reveal.js/lib/css/dark.css">
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="reveal.js/css/print/pdf.css" type="text/css" media="print">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<img src = "images/gdi_logo_badge.png">
<h3>Intro to Rails</h3>
<p>slides: http://cherimarie.github.io/gdi-rails</p>
</section>
<section>
<h3>Welcome!</h3>
<div class = "left-align">
<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
<p class ="green">Some "rules"</p>
<ul>
<li>We are here for you!</li>
<li>Every question is important</li>
<li>Help each other</li>
<li>Have fun</li>
</ul>
</div>
</section>
<section>
<h3>Welcome!</h3>
<div class = "left-align">
<p class = "blue">Tell us about yourself.</p>
<ul>
<li>Who are you?</li>
<li>What do you hope to get out of the class?</li>
<li>Who is your favorite fictional animal?</li>
</ul>
</div>
</section>
<section>
<h3>What is Rails?</h3>
<div class = "left-align">
<ul>
<li>An open-source, full stack web application framework</li>
<li>Written in the Ruby language</li>
<li>Released in 2004</li>
<li>Created by David Heinemeier Hansson (DHH)</li>
<li>Makes many kinds of apps much simpler to write</li>
<li>Has a thriving community, tons of resources</li>
</ul>
</div>
</section>
<section>
<h3>What we will cover today</h3>
<ul>
<li>Check installation of tools</li>
<li>Build and explore a Rails app</li>
</ul>
</section>
<section>
<h3>Installation Check</h3>
<p>Run these commands in the terminal. You should expect them to return a number, like '4.0' or '2.0.0'.
<pre><code class="command-line">
$ ruby -v
$ rails -v
</code></pre>
</section>
<section>
<h3>Make a Rails app!</h3>
<p>Navigate to a project directory in your terminal, then run:</p>
<pre><code class="command-line">
$ rails new TestApp
$ cd TestApp
$ rails server
</code></pre>
<p>Now, visit localhost:3000 in your browser to view your app!</p>
</section>
<section>
<h3>Make a Rails App</h3>
<h4>What just happened?</h4>
<p>We told Rails to build a new app called TestApp, then navigated into it and started a server so we could view it live in the browser. Sweet.</p>
<p>Note: you can shut the server down by entering Ctrl-c</p>
</section>
<section>
<h3>Next Step:</h3>
<h4>Make App...</h4>
<img src="images/interesting.jpeg" alt="A cat pondering some grass" />
</section>
<section>
<h3>Step 1</h3>
<h4>Add a Student Model</h4>
<p>In the terminal, generate the model, then run database migration:</p>
<pre><code class="command-line">
$ rails generate model student bio:string full_name:string
$ rake db:migrate
</code></pre>
</section>
<section>
<h3>Migration Explanation</h3>
<p class="smalltext">Migrations are Ruby code that translate to SQL code. They’re how we setup, configure, and tune our database. </p>
<p class="smalltext">Some migrations are generated for you when you, for example, generate a new model. You will also create many of your own independently, to make changes to your database schema (adding or removing columns, changing names of columns, etc). </p>
<p class="smalltext">Find them in db/migrate/</p>
<p class="smalltext">Your app will not work as expected if you have pending migrations. They must be ‘run’ to ensure that your database is properly setup. Run them each as they’re created; run them all when resetting your database or installing the app on a new computer.
rake db:migrate
</p>
</section>
<section>
<h3>Step 2</h3>
<h4>Add a Student Record to the Database</h4>
<p>In the terminal, enter the rails console:</p>
<pre><code class="command-line">
$ rails console
</code></pre>
<p>Then, create a Student object:</p>
<pre><code class="command-line">
> Student.create(full_name: "Hermione Granger",
bio: "Dedicated student")
</code></pre>
<p>Note: close the console by entering the word 'quit'.</p>
</section>
<section>
<h3>Rails Console</h3>
<div class="smalltext">
<p>The Rails console is like IRB with your Rails app loaded in. Rad!<p>
<p>CRUD Operations:</p></div>
<pre><code class="command-line">
#Create
> Student.create
> Student.create(full_name: "Bert", bio: "Bestie of Ernie")
#Read
> Student.all
> Student.first
> student = Student.find(1)
#Update
> student.update_attributes(full_name: "Bert Bernard")
> student.update(bio: "Scrabble champ of Sesame Street")
#Destroy
> student.destroy
</code></pre>
</section>
<section>
<h3>Step 3</h3>
<h4>Create a Students Controller</h4>
<p>In the terminal:</p>
<pre><code class="command-line">
$ rails generate controller Students
</code></pre>
<p>Generating this controller also creates an app/views/students directory. </p>
</section>
<section>
<h3>Step 3</h3>
<h4>Create a Students Controller</h4>
<p>In your text editor, open the generated app/controllers/students_controller.rb, and add an ‘index’ method to the class definition:</p>
<pre><code class="ruby">
def index
@students = Student.all
end </code></pre>
</section>
<section>
<h3>Model View Controller Architecture</h3>
<ul>
<li>Models hold logic about objects & interact with db.</li>
<li>Views are presentation.</li>
<li>Controllers coordinate the two. </li>
</ul>
<img src="images/mvc.gif" />
</section>
<section>
<h3>MVC Goal</h3>
<p>By isolating logic and presentation, you remove dependencies. </p>
<p>Views don’t need to know how their data is generated, and Models don’t need to know how their data is used. Changes to one won’t affect the other.</p>
</section>
<section>
<h3>MVC Explanation</h3>
<p class="smalltext">An app this basic doesn’t really have any logic to put in the model. The controller can handle basic database actions like finding Student.all. </p>
<p class="smalltext">Every view that your app has must have an associated controller method. This method will usually pass data to the view, but not necessarily. </p>
</section>
<section>
<h3>Step 4</h3>
<h4>Create views for student controller</h4>
<p>In the app/views/students directory, create a file called index.html.erb. Insert into it:</p>
<pre><code class="ruby">
<h1>Student List</h1>
<% @students.each do |student| %>
<%= student.full_name %>
<%= student.bio %>
<% end %>
</code></pre>
</section>
<section>
<h3>ERB Explanation</h3>
<p class="smalltext">ERB is Embedded RuBy. It’s a templating system that allows you to embed Ruby code into a text document, like HTML. It’s included in the standard Ruby library. </p>
<p class="smalltext green">Syntax:</p>
<p class="smalltext">Ruby is processed, but does not display anything:</p>
<pre><code class="ruby">
<% code %>
</code></pre>
<p class="smalltext">Ruby is processed, and outputs result to the page: </p>
<pre><code class="ruby">
<%= code %>
</code></pre>
</section>
<section>
<h3>Step 5</h3>
<h4>Add routes for Student views</h4>
<p>In your text editor, open config/routes.rb, and create resource routes for our student controller:</p>
<pre><code class="ruby">
resources :students
</code></pre>
</section>
<section>
<h3>Step 6</h3>
<h4>Change the root route</h4>
<p>In config/routes.rb, set the root route to our students#index controller:</p>
<pre><code class="ruby">
root 'students#index'
</code></pre>
</section>
<section>
<h3>Routing Explanation</h3>
<p class="smalltext">Routing for your app is controlled in the config/routes.rb file. The comments in this file are extremely helpful. </p>
<p class="smalltext">If a view doesn’t have a route, there’s no way for the browser to request and receive it. </p>
<p class="smalltext">Resource routes are a shortcut. They provide routes for all CRUD actions associated with a model, so you don’t have to spell them each out.</p>
</section>
<section>
<h3>What did we just do?</h3>
<ul>
<li>Made a new Rails application</li>
<li>Added a Student model, with bio & full_name attributes</li>
<li>Added a student record to the database, using Rails Console</li>
<li>Created a Students controller</li>
<li>Created a view for the Student controller's index action</li>
<li>Added routes for Student views</li>
<li>Changed the root to point to a Student view </li>
</ul>
</section>
<section>
<h3>Wow.</h3>
<img src="images/railsshibe.jpg" />
</section>
<section>
<h3>Homework</h3>
<p>Practice:</p>
<p><a href="http://tutorials.jumpstartlab.com/projects/blogger.html" alt="Jumpstart Labs Blogger Tutorial">Blogger tutorial from Jumpstart Labs</a>, Section I0 only!</p>
</section>
</div>
<footer>
<div class="copyright">
Intro to Rails
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>