-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
441 lines (235 loc) · 158 KB
/
atom.xml
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
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Cheng Ting's Blog</title>
<subtitle>PATH To Engineer</subtitle>
<link href="https://danny3766.github.io/atom.xml" rel="self"/>
<link href="https://danny3766.github.io/"/>
<updated>2023-11-05T09:09:57.417Z</updated>
<id>https://danny3766.github.io/</id>
<author>
<name>Cheng Ting</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>轉職之路，有你有我！！！</title>
<link href="https://danny3766.github.io/2023/11/05/%E5%B0%88%E8%81%B7%E4%B9%8B%E8%B7%AF%EF%BC%8C%E6%9C%89%E4%BD%A0%E6%9C%89%E6%88%91%EF%BC%81%EF%BC%81%EF%BC%81/"/>
<id>https://danny3766.github.io/2023/11/05/%E5%B0%88%E8%81%B7%E4%B9%8B%E8%B7%AF%EF%BC%8C%E6%9C%89%E4%BD%A0%E6%9C%89%E6%88%91%EF%BC%81%EF%BC%81%EF%BC%81/</id>
<published>2023-11-05T06:53:28.000Z</published>
<updated>2023-11-05T09:09:57.417Z</updated>
<content type="html"><![CDATA[<h1 id="Make-it-happen-轉職之路，有你有我。"><a href="#Make-it-happen-轉職之路，有你有我。" class="headerlink" title="Make it happen !!! 轉職之路，有你有我。"></a><font color=#FFA344>Make it happen !!! 轉職之路，有你有我。</font></h1><p>By Cheng Ting<br>2023/03/30</p><span id="more"></span><p><img src="https://i.imgur.com/PyXNx3g.jpg" alt="文章圖片001"></p><h2 id="原本是在電信門市的小專員，舒適圈裡的小蝦米"><a href="#原本是在電信門市的小專員，舒適圈裡的小蝦米" class="headerlink" title="原本是在電信門市的小專員，舒適圈裡的小蝦米"></a><font color=#FFA344>原本是在電信門市的小專員，舒適圈裡的小蝦米</font></h2><p>我原本是在電信門市服務的專員，工作內容基本就是門市營業時間一到，鐵門拉起後，開始清亮的叫號：「您好，歡迎光臨～請問今天有什麼可以為您服務？」，協助客戶辦理完成客戶需求的業務後「謝謝您，請慢走。」</p><p>我的個性是喜歡與人互動交談，當初選擇從事這份工作也是覺得滿符合自己的個性，但就在日復一日重複性的工作模式及內容、每天被 KPI 追著跑的循環下，從滿懷熱情與衝勁的初生之犢，漸漸變成一顆彈性疲乏的橡皮球，隨著年紀漸漸奔三，心裡有個聲音不斷告訴自己：「<strong>我的未來要有所改變！！！</strong>」</p><p>此時，轉職的念頭已然萌芽，我問自己：「假如你今天不做出選擇及改變，3 年後或是 5 年後的你會不會後悔？」</p><p>我的答案是，「會！」不想讓未來的自己有遺憾，如果真的轉職成功，當然是我期望的。如果沒有成功，我也不會留有後悔及遺憾，至少我努力過、嘗試過。</p><h2 id="轉職的選擇？要如何達成轉職目標？"><a href="#轉職的選擇？要如何達成轉職目標？" class="headerlink" title="轉職的選擇？要如何達成轉職目標？"></a><font color=#FFA344>轉職的選擇？要如何達成轉職目標？</font></h2><p>非常確定我想要改變現在的生活及工作內容，轉職已是必然，但是要朝什麼樣的方向選擇，及如何準備可提高轉職的成功率，和身邊親朋好友討論及自己上網蒐集相關資料，經過分析及衡量，主要影響我選擇轉職方向的是我的高中好友，他是本科系畢業，目前擔任 APP 開發工程師 (屬於軟體工程師)，且累積工作年資和我一樣，但是他的薪資每年調整且成長幅度滿高，已經是所謂的年薪百萬俱樂部，他的工作型態及薪資讓我非常憧憬。以高中好友為例子，我確定「軟體工程師」這個職位包含：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">薪資水平提升的垂直發展性。</span><br><span class="line">專業能力廣度的橫向發展性。</span><br></pre></td></tr></table></figure><p>這兩個特性確實符合我所期望的工作條件，「軟體工程師」就決定是你了！</p><p>已經確定好轉職的方向，剩下要考慮的就是如何達成，從零基礎到具備專業能力與知識，勢必需從頭學起，網路上很容易搜尋到各種豐富的學習資源，依照你的需求，選擇適合自己學習的資源及方式來進修。我非常確定自己不適合透過線上教學影片這類型的「自學」方法，顯而易見，適合我的就是實體授課的學習資源。</p><h2 id="選擇-ASTRO-Camp-作為改變的起點"><a href="#選擇-ASTRO-Camp-作為改變的起點" class="headerlink" title="選擇 ASTRO Camp 作為改變的起點"></a><font color=#FFA344>選擇 ASTRO Camp 作為改變的起點</font></h2><p><img src="https://i.imgur.com/w804C16.jpg" alt="文章圖片002"><br>開始上網尋找是否有符合我個人的實體學習資源，再找尋的過程中，五倍學院 <strong><a href="https://astro.5xruby.tw/">ASTRO Camp 全端工程師實戰訓練營</a></strong> 的字樣出現在了瀏覽器的頁面上，基於好奇點開連結，瀏覽五倍學院的網站課程規劃及說明，我注意到了在 YouTube 上歷屆學員的「Demo Day」成果發表影片，看到這麼多的學員在參加 ASTRO Camp 後竟然可以在3個月的時間內，從一個完全沒有程式基礎的素人，經過技能學習並實際進行團隊協作專案，最終完成屬於自己的作品。</p><p>我非常驚豔 ASTRO Camp 的黑魔法為什麼可以在短時間培育出全端工程師，這讓我非常好奇也嚮往，是否我加入 ASTRO Camp 之後，也能跟那些學員一樣成功翻轉職涯？<br>於是我報名參加實體說明會，更加深入了解 ASTRO Camp 的規劃及目標後，決定為自己踏出那一步，我的轉職之路正式開始。</p><h2 id="如果可以用最短的時間成本達成學習目標，爲什麼要花更久的時間？"><a href="#如果可以用最短的時間成本達成學習目標，爲什麼要花更久的時間？" class="headerlink" title="如果可以用最短的時間成本達成學習目標，爲什麼要花更久的時間？"></a><font color=#FFA344>如果可以用最短的時間成本達成學習目標，爲什麼要花更久的時間？</font></h2><p>評估自身各方面因素，全職投入學習到完成轉職，我給自己設立的轉職期限是半年，參加實體說明會，深入了解「ASTRO Camp」確實可做到 3 個月培養我具備全端網頁工程師的能力，於是說明會結束後，我馬上就報名 ASTRO Camp。</p><h2 id="轉職成功的關鍵，掌握面面俱到的「軟」、「硬」實力"><a href="#轉職成功的關鍵，掌握面面俱到的「軟」、「硬」實力" class="headerlink" title="轉職成功的關鍵，掌握面面俱到的「軟」、「硬」實力"></a><font color=#FFA344>轉職成功的關鍵，掌握面面俱到的「軟」、「硬」實力</font></h2><p>ASTRO Camp 有非常扎實的專業技能課程規劃，線上先修預習課程、實體課程。線上線下虛實整合的學習資源，著實提升學習效率。</p><p>在 ASTRO Camp，講師希望學員們要做的第一件事情，就是<strong>改變學習方式</strong>，只要在課堂上有不會的、不懂的就舉手發問，不要把問題帶回家。目的就是要培養我們「如何問問題」。問對問題，是非常重要的一件事，甚至說是一項能力，因為工程師往往要找答案時，要先知道問題是什麼。</p><h2 id="密集實體課程-amp-助教制度"><a href="#密集實體課程-amp-助教制度" class="headerlink" title="密集實體課程 & 助教制度"></a><font color=#FFA344>密集實體課程 & 助教制度</font></h2><p>講師們都是現役業界中的一時之選，透過<strong>密集</strong>的<strong>實體課程</strong>深入淺出的解釋技術原理及觀念，外加實作練習，課堂上透過分析近期的實例分享，幫你打好基底。</p><p>在學習的過程中，<strong>現役工程師</strong>作為我們的助教，每天的課程結束後，會有助教時間，可以讓我們詢問，助教們也會以引導的方式，把我們思考的方向調整到正確的思路，靠自己去思考找出答案，這也是講師與助教們的心法傳授「授人以魚不如授人以漁」，培養工程師應具備的獨自<strong>分析問題</strong>、<strong>有效率且有系統性的找出解決方法</strong>、<strong>學習新技術更快掌握且能實際應用輸出</strong>的能力。每天不斷累積扎實的基礎觀念與技能，而在這過程中，我發現面對單一功能或是網頁畫面切版的需求，竟然可以用不同方法將其實踐出來，我想能夠寫出最有效率的程式，就是工程師的專業和價值所在。</p><h2 id="個人履歷製作-amp-快速面試"><a href="#個人履歷製作-amp-快速面試" class="headerlink" title="個人履歷製作 & 快速面試"></a><font color=#FFA344>個人履歷製作 & 快速面試</font></h2><p>ASTRO Camp 更顧及到學員結訓後未來轉職的第一個關卡「企業面試」所需的軟實力。提供<strong>製作個人履歷</strong>課程之外，老師親自幫每位學員<strong>履歷健檢</strong>，也提供模擬面試，幫助我在結訓後的求職階段，不用感到擔心或徬徨，有一份完整的個人履歷，可以把自己的學習成果及亮點完美展現，提升錄取的成功率。</p><p>ASTRO Camp 也在課程的尾聲，安排學員們與廠商進行<strong>快速面試</strong>，等於是結訓後，大大提升可以馬上有被各間國內外廠商看見，進而拿到 offer 的機會，減少自己到求職網站投遞履歷的時間成本，這也是五倍學院讓我覺得貼心的地方。</p><h2 id="團隊專案-amp-成果發表"><a href="#團隊專案-amp-成果發表" class="headerlink" title="團隊專案 & 成果發表"></a><font color=#FFA344>團隊專案 & 成果發表</font></h2><p>ASTRO Camp 最重要的一個環節就是在訓練的最後階段，1個月左右時間，實際參與團隊的專案製作與最後結訓前的成果發表「Demo Day」。</p><p>當初我會選擇報名 ASTRO Camp 也是因為看到網頁上介紹課程的規劃，包含<strong>團隊專案</strong>這個部分，因為我清楚知道想要提升轉職成功率，就需要有所謂的作品在面試時可以展現出來個人的學習歷程，這也是<strong>學習成果與技術能力</strong>最實際也是最直觀的展示方式。</p><p>實際開始進行團隊專案開發時，該如何起頭、專案主題的決定，組員們就有彼此間諸多的意見碰撞與討論，從這樣的經驗就可以了解實際職場上團隊開發是更複雜且更需要良好的跨團隊溝通，以確保專案的進程可以如期地推進。</p><p>過程中也有遇到各種突發狀況，原本是 5 人團隊，其中一位隊友因個人家裡因素中途退出 ASTRO Camp，後續由包含我在內共 4 位成員們一起努力完成專案。</p><p>當隨著時間越來越接近 Demo Day，就在 Demo Day 的前兩週我確診需隔離，一面擔心不能出席 Demo Day，一面努力吃藥休息，希望可以盡快康復回歸團隊，在確診的前3天基本上，真的是滿不舒服的，身體非常疲累，沒辦法好好專心完成我負責的功能，感謝隊友們的體諒、支援與配合，這時候 Discord、Google Meet 等便利的通訊軟體，我與組員們依然可透過線上會議或是訊息往返的方式，對焦每天的 Standup Meeting，順利交接我的任務給組員僅恩，請他協助完成剩下的部分，讓我負責的功能得以順利部署上線，最終我們順利的完成專案，且終於隔離後的第 10 天我也順利出席 Demo Day。</p><p><img src="https://i.imgur.com/jFgJtOp.jpg" alt="文章圖片003"></p><h2 id="前面99個台階已經走完，只剩最後1個台階，你可以的！"><a href="#前面99個台階已經走完，只剩最後1個台階，你可以的！" class="headerlink" title="前面99個台階已經走完，只剩最後1個台階，你可以的！"></a><font color=#FFA344>前面99個台階已經走完，只剩最後1個台階，你可以的！</font></h2><p>Demo Day 結束後，緊接著就是前面提到的<strong>快速面試</strong>，我有幸在快速面試中獲得其中一間廠商給予第2次面試機會，雖然最後我沒有進入第3階段，但因有了這次快速面試的經驗，我知道後續可以如何調整及加強裝備自己，在各個求職平台投遞履歷及準備面試時可以更好的展現，提升拿到 offer 的機率。</p><p>ASTRO Camp 結訓後，便開始修改自己的履歷及針對想要應徵的職缺投遞履歷，了解該間公司且研究該職缺的工作內容須具備哪些能力，專業能力部分如有尚未具備的，便開始自我學習加強，以期如有獲得後續面試機會可以展現這期間所做的準備。</p><h2 id="不斷地調整面試準備方法，增加獲得-offer-的機率"><a href="#不斷地調整面試準備方法，增加獲得-offer-的機率" class="headerlink" title="不斷地調整面試準備方法，增加獲得 offer 的機率"></a><font color=#FFA344>不斷地調整面試準備方法，增加獲得 offer 的機率</font></h2><p>在主動投遞履歷且參加面試，但收到 2 次感謝信後，我檢討整個面試的環節中是否有可以提升的地方，我開始調整準備面試的方式，如何自我介紹、如何提高履歷在投遞後被看見的「能見度」，於是我開始針對應徵的職缺撰寫「自我推薦信」，而不是套用求職平台的公版格式，調整後，我個人而言認為是有效的，我發現自從有撰寫自我推薦信，公司回覆我的機率變高，獲得面試邀請的次數變多。</p><p>前後修改了 10 次履歷，也不斷地進行想像練習，不斷練習自我介紹，練到不會講話卡卡的，相信在接下來的面試可以很流暢的表現，順利完成面試過程。</p><h2 id="入場券到手，給自己一個掌聲"><a href="#入場券到手，給自己一個掌聲" class="headerlink" title="入場券到手，給自己一個掌聲"></a><font color=#FFA344>入場券到手，給自己一個掌聲</font></h2><p>終於，我在結訓後的 2 個月拿到了軟體工程師的 offer 轉職成功。謝謝自己當初願意踏出那一步，先給自己掌聲，你做到了！</p><p>當然過程中，一定會遇到挫與自我懷疑，我真的可以嗎？我真的適合工程師嗎？<br>真的非常感謝五倍學院的講師、助教、課務組們的陪伴與支援，還有 ASTRO Camp 一起想轉職成為工程師的同學們，在同一個環境底下，我不會感到孤單，我知道有同伴跟我一起奮鬥前進。轉職這條路不輕鬆，<strong>但請記得「莫忘初衷」，記得當初勇敢選擇改變的自己</strong>。</p><p>改變，就在踏出那一步，沒有實際開始第一步，改變也就是一個念想，你依然是原來的你。</p><p>假如你跟我一樣，對於未來的職涯及人生有想要看到不一樣的景色、更加地飽滿，或許可以問問自己：「如果我今天沒有踏出這一步，3 年或 5 年後的自己會不會後悔？」</p><p>如果你想轉職軟體工程師，但是還沒找到一個強大給力的學習資源 Support你， <strong><a href="https://astro.5xruby.tw/">ASTRO Camp 全端工程師實戰訓練營</a>會是你轉職之路的好夥伴</strong> 。</p><p>或是你對於轉職為工程師有點嚮往，但是還是有疑問或迷惘，提供我的聯絡方式，歡迎你跟我聊聊</p><blockquote><p>信箱：<a href="mailto:woodming9889@gmail.com">woodming9889@gmail.com</a></p></blockquote><hr><blockquote><p>👩🏫 課務小幫手：<br>✨ 想要再自我精進技能嗎？ 五倍學院開設眾多實體課程與線上課程<br>✨ 想要三個月轉職網站工程師嗎？ 五倍學院有 ASTRO Camp 全端工程師實戰訓練營</p></blockquote>]]></content>
<summary type="html"><h1 id="Make-it-happen-轉職之路，有你有我。"><a href="#Make-it-happen-轉職之路，有你有我。" class="headerlink" title="Make it happen !!! 轉職之路，有你有我。"></a><font color=#FFA344>Make it happen !!! 轉職之路，有你有我。</font></h1><p>By Cheng Ting<br>2023&#x2F;03&#x2F;30</p></summary>
<category term="轉職心得分享" scheme="https://danny3766.github.io/categories/%E8%BD%89%E8%81%B7%E5%BF%83%E5%BE%97%E5%88%86%E4%BA%AB/"/>
<category term="轉職心得" scheme="https://danny3766.github.io/tags/%E8%BD%89%E8%81%B7%E5%BF%83%E5%BE%97/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - ActiveJob 背景工作</title>
<link href="https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveJob-%E8%83%8C%E6%99%AF%E5%B7%A5%E4%BD%9C/"/>
<id>https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveJob-%E8%83%8C%E6%99%AF%E5%B7%A5%E4%BD%9C/</id>
<published>2023-02-01T05:34:10.000Z</published>
<updated>2023-02-01T05:36:26.503Z</updated>
<content type="html"><![CDATA[<h1 id="ActiveJob-背景工作"><a href="#ActiveJob-背景工作" class="headerlink" title="ActiveJob 背景工作"></a>ActiveJob 背景工作</h1><span id="more"></span><p>可以進到終端機輸入<code>rails g</code>看看有什麼指令可以使用。發現有一個<code>job</code>。可以透過它產生一個背景工作來做些事情。<br>那我們就來產生一個背景工作，並給它命名<code>VoteMail</code><br><img src="https://i.imgur.com/EaEwupX.png"><br>打開VScode，來確認看看是否jobs的地方有新增一個背景工作。<br><img src="https://i.imgur.com/qjGNaI1.png"><br>再回到<code>candidate_controller.rb</code>投票的function裡面，把原本那行寄信工作的code搬家，搬到個剛建立的背景工作<code>vote_mail_job.rb</code>裡面。<br><img src="https://i.imgur.com/cI2eyMr.png"><br>回到 <code>candidate_controller.rb</code><br>增加一行<code>VoteMailJob.perform_later</code><br><img src="https://i.imgur.com/j9zNMC2.png"><br>這時候重新啟動rails server。發現現在點擊 <code>vote</code> 之後，馬上就顯示 <code>Voted!!!</code>。<br>這個做法就是讓那個較花時間的工作先存放到背景去，等有空的時候再來執行它。</p><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="ActiveJob-背景工作"><a href="#ActiveJob-背景工作" class="headerlink" title="ActiveJob 背景工作"></a>ActiveJob 背景工作</h1></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - ActionMailer 寄發信件</title>
<link href="https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActionMailer-%E5%AF%84%E7%99%BC%E4%BF%A1%E4%BB%B6/"/>
<id>https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActionMailer-%E5%AF%84%E7%99%BC%E4%BF%A1%E4%BB%B6/</id>
<published>2023-02-01T05:31:01.000Z</published>
<updated>2023-02-01T05:33:33.235Z</updated>
<content type="html"><![CDATA[<h1 id="ActionMailer-寄發信件"><a href="#ActionMailer-寄發信件" class="headerlink" title="ActionMailer 寄發信件"></a>ActionMailer 寄發信件</h1><span id="more"></span><p>首先使用終端機輸入指令<code>rails g mailer Vote</code>，Rails會幫我們產生對應的<code>mailer.rb</code>跟<code>view/vote_mailer</code><br><img src="https://i.imgur.com/xH5GJcN.png"><br>打開VSCode<br><img src="https://i.imgur.com/zqxPNQO.png"><br><img src="https://i.imgur.com/ShAWgXZ.png"><br><img src="https://i.imgur.com/klf7uBu.png"><br><img src="https://i.imgur.com/hbX2i6O.png"><br><img src="https://i.imgur.com/EPXOQkJ.png"><br><img src="https://i.imgur.com/esd0p8I.png"><br>接著我們就打開<code>rails server</code> 連到網頁測試看看，可以當我們點擊Vote後卻出現錯誤的畫面。<br><img src="https://i.imgur.com/xiZh5Hq.png"><br>因為它還是依循著MVC的架構在運行，所以mailer是相當於controller的角色，那我們就必須幫它新增一個對應的view的角色。<br><img src="https://i.imgur.com/kYYZkeM.png"><br>重新整理，再試一次。看起來是有正常運作。<br>不過我們可以到Rails Guide搜尋<br><img src="https://i.imgur.com/Pt44DNZ.png"><br><img src="https://i.imgur.com/oVlPHL4.png"><br>把剛剛找到的那段貼到<code>development</code>檔案中<br><img src="https://i.imgur.com/0dBPQzv.png"><br>但其實這樣做有風險，就是你自己的<br>e-mail會被別人看光光。<br>此時有一個收費的網站很方便 mailgun。註冊完後，進到Domains裡面找到SMTP伺服器<br><img src="https://i.imgur.com/UZ8bEwE.png"><br><img src="https://i.imgur.com/vyUK5Fv.png"><br>把上面這些對應的設定，複製貼上到VScode裡面的<code>development.rb</code> 檔案中。<br><img src="https://i.imgur.com/uQuoPjK.png"><br>設定好後，從新啟動<code>rails server</code><br>這時候重新點選<code>Vote</code> 會發現網頁的標籤頁開始轉圈圈之後顯示<code>Voted!!!</code>，接著我們打開自己的信箱發現有一封標題是hi的郵件<br><img src="https://i.imgur.com/QRgRmWL.png"><br>確實有收到了！！！但同時也發現一件事情，就是當我們點擊 vote 之後頁面要轉圈圈快5秒才成功。<br>假如今天我們有人比較沒有耐心一直連點 vote，會發生什麼事呢？<br>沒錯！！！就是系統會一直寄信一直寄信。所以下面一堂課程，我們要來透過「背景工作」解決這個情況。</p><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="ActionMailer-寄發信件"><a href="#ActionMailer-寄發信件" class="headerlink" title="ActionMailer 寄發信件"></a>ActionMailer 寄發信件</h1></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - ActiveRecord - 資料表關連 part 4 (ORM基本操作)</title>
<link href="https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveRecord-%E8%B3%87%E6%96%99%E8%A1%A8%E9%97%9C%E9%80%A3-part-4(ORM%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C)/"/>
<id>https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveRecord-%E8%B3%87%E6%96%99%E8%A1%A8%E9%97%9C%E9%80%A3-part-4(ORM%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C)/</id>
<published>2023-02-01T05:24:04.000Z</published>
<updated>2023-02-01T05:27:51.978Z</updated>
<content type="html"><![CDATA[<h1 id="ActiveRecord-資料表關連-part-4-ORM基本操作"><a href="#ActiveRecord-資料表關連-part-4-ORM基本操作" class="headerlink" title="ActiveRecord - 資料表關連 part 4 (ORM基本操作)"></a>ActiveRecord - 資料表關連 part 4 (ORM基本操作)</h1><span id="more"></span><p><img src="https://i.imgur.com/s1fUOuq.png"></p><h3 id="ORM-基本操作之-Create"><a href="#ORM-基本操作之-Create" class="headerlink" title="ORM 基本操作之 Create"></a>ORM 基本操作之 Create</h3><ul><li>new 方法會建立一筆資料，但還不會將資料存到資料庫裡。</li><li>create 或 create! 會建立一筆資料，並直接寫入資料庫裡。</li><li>create 跟 create!這兩個方法有什麼不同?<br>答案：<br>create → 寫入失敗的時候，會默默地rollback回來，會默默地取消這次交易(transaction)。<br>create! → 寫入失敗時，會立刻噴出Exception(發生例外)。之後可以用 begin、rescue的方法來處理這些Exception</li></ul><hr><p><img src="https://i.imgur.com/vnBzxhK.png"></p><hr><h3 id="ORM基本操作之-Read"><a href="#ORM基本操作之-Read" class="headerlink" title="ORM基本操作之 Read"></a>ORM基本操作之 Read</h3><ul><li>first 與 last</li><li>fing_by(id: 1) 與 find(1)</li><li>find_by_sql</li><li>find_each</li></ul><hr><p><img src="https://i.imgur.com/KOjs0Nq.png"></p><h4 id="find-與find-by差別"><a href="#find-與find-by差別" class="headerlink" title="find()與find_by差別"></a>find()與find_by差別</h4><p>就像 <code>cteate</code> 跟 <code>create!</code>的差別一樣<br><code>find(1)</code>：是比較激進派的做法，當找不到資料的時候，會跳出錯誤訊息(<code>exception</code>)。</p><p><code>find_by(id: 1)</code>：當找不到資料的時候，會回傳一個 <code>nill</code> 給你，屬於比較溫和派的作法。</p><p>find_each：利用跑回圈的方式，預設是一千次，當今天是在用大型資料查詢的時候，<code>find_each</code>可以有效地減少電腦記憶體的使用。<br><img src="https://i.imgur.com/AQHAb06.png"><br>答案：<br><img src="https://i.imgur.com/gngA6vi.png"></p><hr><h3 id="ORM基本操作之-Read-1"><a href="#ORM基本操作之-Read-1" class="headerlink" title="ORM基本操作之 Read"></a>ORM基本操作之 Read</h3><ul><li>all</li><li>select</li><li>where</li><li>order</li><li>limit<br><img src="https://i.imgur.com/brYhRsx.png"><br>where 跟前面提到的 find_by(id: 1)差別是，where 會回傳「一包長得像陣列」的資料回來。</li></ul><hr><h3 id="ORM基本操作之-Read-2"><a href="#ORM基本操作之-Read-2" class="headerlink" title="ORM基本操作之 Read"></a>ORM基本操作之 Read</h3><ul><li>count</li><li>average</li><li>sum</li><li>maximum & minimum<br><img src="https://i.imgur.com/ybQBceL.png"></li><li><em><strong>不要傻傻的用ORM抓出來轉迴圈再來計算!!!</strong></em></li></ul><hr><h3 id="ORM基本操作之-Update"><a href="#ORM基本操作之-Update" class="headerlink" title="ORM基本操作之 Update"></a>ORM基本操作之 Update</h3><ul><li>save</li><li>update</li><li>update_attributes</li><li>update_all<br><img src="https://i.imgur.com/hjM4bKg.png"><br><img src="https://i.imgur.com/N6Big9r.png"><br>答案：<br>這兩個方法本質上是一樣的。</li></ul><hr><h3 id="ORM基本操作之-Update-1"><a href="#ORM基本操作之-Update-1" class="headerlink" title="ORM基本操作之 Update"></a>ORM基本操作之 Update</h3><ul><li>increment 與 decrement</li><li>toggle<br><img src="https://i.imgur.com/7iufLy2.png"></li><li>上面2項用到的方法，都沒有存檔的功能，所以記得要執行<code>.save</code>。</li></ul><hr><h3 id="ORM基本操作之-Delete"><a href="#ORM基本操作之-Delete" class="headerlink" title="ORM基本操作之 Delete"></a>ORM基本操作之 Delete</h3><ul><li>delete</li><li>destroy</li><li>detroy_all(condition = nil)<br><img src="https://i.imgur.com/FbJSvFD.png"><br><img src="https://i.imgur.com/0YU0OrG.png"><br>答案：<br>(1)<code>delete</code>是直接把資料刪除就結束了，<code>dedtroy</code>是會經過一連串的callback。<br>(2)<code>destroy</code>是真的把資料刪掉，從資料表上整個刪除，所以也救不回來。</li></ul><hr><h3 id="Scope-範圍"><a href="#Scope-範圍" class="headerlink" title="Scope(範圍)"></a>Scope(範圍)</h3><ul><li>把一群條件整理成一個Scope</li><li>簡化使用時的邏輯</li><li>減少在Controller裡寫一堆Where組合</li><li>用起來跟類別方法一樣<br><img src="https://i.imgur.com/sqzEpzC.png"><br>已投摽系統舉例，要依照候選人年紀來篩選資料。先到<code>candidate_controller.rb</code><br><img src="https://i.imgur.com/owx5JQf.jpg"><br>再到<code>candidate.rb</code><br><img src="https://i.imgur.com/HvCjT2S.jpg"></li></ul><hr><h3 id="Scope-範圍-1"><a href="#Scope-範圍-1" class="headerlink" title="Scope(範圍)"></a>Scope(範圍)</h3><ul><li>default_scope 可幫所有的查詢預設套用 scope</li><li>default_scope 的副作用？<br>答案：<br>default_scope的副作用就是它會一直跟著你。<br><img src="https://i.imgur.com/ZMkkIaD.png"><br>要擺脫它必須做undcope把它拔掉。</li></ul><hr><h3 id="類別方法"><a href="#類別方法" class="headerlink" title="類別方法"></a>類別方法</h3><p><img src="https://i.imgur.com/qeNQZVl.png"><br>【練習題】</p><ul><li>scope 跟類別方法有什麼不一樣？</li><li>什麼時候該用什麼寫法？<br>答案：<br>如果是相對簡單的查詢，只要寫一行就可以解決，可以優先考慮使用scope的寫法。<br>遇到比較複雜的時候，會使用類別方法。<br>沒有絕對答案，看每個人的習慣。</li></ul><hr><h3 id="資料驗證"><a href="#資料驗證" class="headerlink" title="資料驗證"></a>資料驗證</h3><ul><li><p>presence<br><img src="https://i.imgur.com/BG3rHP6.png"><br>還有另外一種早期寫法<br><img src="https://i.imgur.com/q92rr8V.png"></p></li><li><p>format</p></li><li><p>uniqueness</p></li><li><p>numericality</p></li><li><p>length</p></li><li><p>condition</p></li></ul><hr><h3 id="資料驗證過程"><a href="#資料驗證過程" class="headerlink" title="資料驗證過程"></a>資料驗證過程</h3><p><img src="https://i.imgur.com/YhUktlu.png"><br><img src="https://i.imgur.com/VxVsYoV.png"><br>【練習題】</p><ul><li>硬是要繞過驗證可以嗎？</li><li>只要以驗證就可以保證資料正確嗎？<br>答案：<br>(1)如果硬要繞果驗證，其實是可以的。但基本這樣做沒有任何意義。<br><img src="https://i.imgur.com/SXkZaKg.jpg"></li></ul><p>(2)如果說整個系統都是用Rails寫，然後Model都有做驗證的話，基本上可以保證資料都是正確的。<br>但是如果說今天你的系統或是資料庫有跟別的系統共用的話，那就很難說了。</p><hr><h3 id="Callback"><a href="#Callback" class="headerlink" title="Callback"></a>Callback</h3><p><img src="https://i.imgur.com/3jQZxkI.png"><br>舉例<br><img src="https://i.imgur.com/xH5Q3U1.png"><br>【練習題】</p><ul><li>在前面的範例中，用before_save會造成什麼問題？</li><li>before_save跟before_create有什麼差別？<br>答案：<br><code>before_save</code>：是資料寫入及資料更新的時候都會被執行。<br><code>before_create</code>：是只有在資料被建立的時候執行。</li></ul><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="ActiveRecord-資料表關連-part-4-ORM基本操作"><a href="#ActiveRecord-資料表關連-part-4-ORM基本操作" class="headerlink" title="ActiveRecord - 資料表關連 part 4 (ORM基本操作)"></a>ActiveRecord - 資料表關連 part 4 (ORM基本操作)</h1></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - ActiveRecord - 資料表關連 part 3 (關聯性)(一對多)</title>
<link href="https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveRecord-%E8%B3%87%E6%96%99%E8%A1%A8%E9%97%9C%E9%80%A3-part-3(%E9%97%9C%E8%81%AF%E6%80%A7)%E4%B8%80%E5%B0%8D%E5%A4%9A/"/>
<id>https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveRecord-%E8%B3%87%E6%96%99%E8%A1%A8%E9%97%9C%E9%80%A3-part-3(%E9%97%9C%E8%81%AF%E6%80%A7)%E4%B8%80%E5%B0%8D%E5%A4%9A/</id>
<published>2023-02-01T05:19:01.000Z</published>
<updated>2023-02-01T05:21:05.531Z</updated>
<content type="html"><![CDATA[<h1 id="ActiveRecord-資料表關連-part-3-關聯性-一對多"><a href="#ActiveRecord-資料表關連-part-3-關聯性-一對多" class="headerlink" title="ActiveRecord - 資料表關連 part 3 (關聯性)(一對多)"></a>ActiveRecord - 資料表關連 part 3 (關聯性)(一對多)</h1><span id="more"></span><h3 id="has-many-through"><a href="#has-many-through" class="headerlink" title="has_many:through"></a>has_many:through</h3><p><img src="https://i.imgur.com/JjcKE7r.png"><br><img src="https://i.imgur.com/9ngoMXJ.png"><br><img src="https://i.imgur.com/OxAehwn.png"><br><img src="https://i.imgur.com/gCFLqms.png"></p><hr><p>所以我們需要一個第三方的資料表儲存資料<br>首先打開終端機建立一個新的Model Warehouse<br><img src="https://i.imgur.com/BqlqgNh.png"><br><img src="https://i.imgur.com/hRQsJjT.png"><br>打開VScode 可以看到warehouse屬於store也屬於products。<br><img src="https://i.imgur.com/Lgev2KT.png"><br>此時打開 <code>product.rb</code> 增加一行 <code>has_many :warehouses</code><br><img src="https://i.imgur.com/tsVdahr.png"><br>另外 <code>store.rb</code> 也要做一樣的步驟<br><img src="https://i.imgur.com/WAvGMZC.png"><br>回到 <code>product.rb</code> 要再多增加一行<br><img src="https://i.imgur.com/VmNuRoX.png"></p><p>表示我有哪些商品要鋪貨到那些商店，都透過warehouses來拿到相關的資料。<br>所以 <code>store.rb</code> 也要相同寫法<br><img src="https://i.imgur.com/z95KUns.png"><br>表示<code>store.rb</code> 本身不會知道我有哪些商品<br>必須透過<code>warehouses</code>才能知道相關資訊。<br>接著打開rails console，輸入s1,s2看看<br><img src="https://i.imgur.com/534GAEl.png"><br>此時也可以看看資料庫裡面是否有商品<code>Product.all</code><br><img src="https://i.imgur.com/lE5RR6v.png"><br>確認目前都是沒有商品的，那就來建立商品吧!<br><img src="https://i.imgur.com/5HZQkop.png"><br>接著我們在第一間店上架3個商品<br><img src="https://i.imgur.com/9kZbuk2.png"><br>輸入 <code>s1 = products.count</code> 可以看到目前第一間店有的商品數量<br><img src="https://i.imgur.com/cOt5hfZ.png"><br>依此類推第二間店。<br>也可以用商品的角度來查詢有在那些店上架<br><img src="https://i.imgur.com/D2PJemh.png"></p><hr><p>除了剛剛的寫法以外還有另外一種早期使用的多對多寫法(HABTM)<br><img src="https://i.imgur.com/3SkSltl.png"><br><img src="https://i.imgur.com/bhlpQwx.png"><br><img src="https://i.imgur.com/gZm9IeV.png"><br>答案：<br>沒有一定的寫法，只要自己喜歡的方式就好。</p><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="ActiveRecord-資料表關連-part-3-關聯性-一對多"><a href="#ActiveRecord-資料表關連-part-3-關聯性-一對多" class="headerlink" title="ActiveRecord - 資料表關連 part 3 (關聯性)(一對多)"></a>ActiveRecord - 資料表關連 part 3 (關聯性)(一對多)</h1></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - ActiveRecord - 資料表關連 part 2 (關聯性)(一對一)</title>
<link href="https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveRecord-%E8%B3%87%E6%96%99%E8%A1%A8%E9%97%9C%E9%80%A3-part-2(%E9%97%9C%E8%81%AF%E6%80%A7)%E4%B8%80%E5%B0%8D%E4%B8%80/"/>
<id>https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveRecord-%E8%B3%87%E6%96%99%E8%A1%A8%E9%97%9C%E9%80%A3-part-2(%E9%97%9C%E8%81%AF%E6%80%A7)%E4%B8%80%E5%B0%8D%E4%B8%80/</id>
<published>2023-02-01T05:08:30.000Z</published>
<updated>2023-02-01T05:17:13.047Z</updated>
<content type="html"><![CDATA[<h1 id="ActiveRecord-資料表關連-part-2-關聯性-一對一"><a href="#ActiveRecord-資料表關連-part-2-關聯性-一對一" class="headerlink" title="ActiveRecord - 資料表關連 part 2 (關聯性)(一對一)"></a>ActiveRecord - 資料表關連 part 2 (關聯性)(一對一)</h1><span id="more"></span><h2 id="假設我們現在有一個書店系統"><a href="#假設我們現在有一個書店系統" class="headerlink" title="假設我們現在有一個書店系統"></a>假設我們現在有一個書店系統</h2><h2 id=""><a href="#" class="headerlink" title=""></a><img src="https://i.imgur.com/Re9x5VR.png"></h2><h2 id="-1"><a href="#-1" class="headerlink" title=""></a><img src="https://i.imgur.com/kbAmqec.png"></h2><h2 id="-2"><a href="#-2" class="headerlink" title=""></a><img src="https://i.imgur.com/libvwen.png"></h2><h2 id="-3"><a href="#-3" class="headerlink" title=""></a><img src="https://i.imgur.com/Q9iwJ64.png"></h2><h2 id="-4"><a href="#-4" class="headerlink" title=""></a><img src="https://i.imgur.com/5HZ1FUZ.png"></h2><h2 id="-5"><a href="#-5" class="headerlink" title=""></a><img src="https://i.imgur.com/D49Idxx.png"></h2><p><img src="https://i.imgur.com/eIDw2OI.png"><br><img src="https://i.imgur.com/deK2HwX.png"></p><hr><p>另外開一個新專案MyStore<br>先使用終端機輸入相關的rails 指令產生對應的model<br><img src="https://i.imgur.com/n3BOVBX.png"></p><hr><p><img src="https://i.imgur.com/4AKPsUu.png"></p><hr><h3 id="has-one-它其實是類別方法"><a href="#has-one-它其實是類別方法" class="headerlink" title="has_one(它其實是類別方法)"></a>has_one(它其實是類別方法)</h3><p>打開文字編輯器VScode，進到<code>app/models/owner.rb</code> 編輯裡面內容<br><img src="https://i.imgur.com/ef4h1O7.png"><br>接著打開 <code>reails console</code> 來建議一個變數 o1(歐一)並給它一個名字 O1(大寫歐一)<br><img src="https://i.imgur.com/YCAlBrt.png"><br>這裡也新增一個商店命名s1，但是會發現錯誤，是正常的。<br><img src="https://i.imgur.com/vlLn7VO.png"><br>可以透過查看錯誤訊息知道，它必須有一個owner，我們還沒有指定給它<br><img src="https://i.imgur.com/VFaQxXS.png"><br>所以我們可以換個方式<br><img src="https://i.imgur.com/mltY7RH.png"><br><img src="https://i.imgur.com/hAZBI1K.png"><br><img src="https://i.imgur.com/DC7japR.png"><br><img src="https://i.imgur.com/4O5xXX1.png"><br><img src="https://i.imgur.com/qYLW4VS.png"></p><hr><p><img src="https://i.imgur.com/Hg1IUo0.png"><br>答案：</p><ul><li>build → 會直接寫到記憶體裡面，但是要透過<code>.save</code>才會存進去資料庫</li><li>create → 會直接寫進去資料庫</li></ul><hr><h3 id="belons-to-它其實是類別方法"><a href="#belons-to-它其實是類別方法" class="headerlink" title="belons_to(它其實是類別方法)"></a>belons_to(它其實是類別方法)</h3><p><img src="https://i.imgur.com/DvQfEJO.png"><br><img src="https://i.imgur.com/UVbaxkw.png"><br><img src="https://i.imgur.com/KSKJqeO.png"><br>答案：</p><ul><li>沒有同時設定不會怎麼樣，只是只能從 <code>owner.rb</code> 查詢 <code>store.rb</code>。但是不能從 <code>store.rb</code>反查 <code>owner.rb</code>。</li><li>xxx_id不一定要叫這個名字，這只是個慣例。<br>完整名稱：</li></ul><p><img src="https://i.imgur.com/y6RqP9V.png"><br>如果今天是別人寫的資料庫，但不是用Ruby寫的我們就會需要使用這樣的寫法去讀取外部id。</p><hr><h3 id="has-many-它其實是類別方法"><a href="#has-many-它其實是類別方法" class="headerlink" title="has_many(它其實是類別方法)"></a>has_many(它其實是類別方法)</h3><p><img src="https://i.imgur.com/za5xwJy.png"><br><img src="https://i.imgur.com/qBHpbZ9.png"><br><img src="https://i.imgur.com/1zAjEEg.png"><br><img src="https://i.imgur.com/iqxllB5.png"><br><img src="https://i.imgur.com/2Px6n6B.png"></p><p>答案：</p><ul><li>has_many方法後面不用符號改用字串不會發什麼事。</li><li>就來建立一個看看<br><img src="https://i.imgur.com/6c2Ee7h.png"><br>打開VScode<br><img src="https://i.imgur.com/1cVDtTN.png"><br>在<code>store.rb</code> 新增 <code>has_many :products</code><br><img src="https://i.imgur.com/GyNictS.png"><br>打開 <code>rails console</code> 來看看<br><img src="https://i.imgur.com/TXDiXNO.png"><br>回到VScode <code>store.rb</code> 將products改成單數product<br><img src="https://i.imgur.com/c1lB9HY.png"><br>然後再開啟 <code>rails console</code>來看看，會發現這時候找不到對應的商品。<br><img src="https://i.imgur.com/cyRxN6n.png"></li></ul><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="ActiveRecord-資料表關連-part-2-關聯性-一對一"><a href="#ActiveRecord-資料表關連-part-2-關聯性-一對一" class="headerlink" title="ActiveRecord - 資料表關連 part 2 (關聯性)(一對一)"></a>ActiveRecord - 資料表關連 part 2 (關聯性)(一對一)</h1></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - ActiveRecord - 資料表關連 part 1</title>
<link href="https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveRecord-%E8%B3%87%E6%96%99%E8%A1%A8%E9%97%9C%E9%80%A3-part-1/"/>
<id>https://danny3766.github.io/2023/02/01/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-ActiveRecord-%E8%B3%87%E6%96%99%E8%A1%A8%E9%97%9C%E9%80%A3-part-1/</id>
<published>2023-02-01T04:39:40.000Z</published>
<updated>2023-02-01T05:09:50.693Z</updated>
<content type="html"><![CDATA[<h1 id="ActiveRecord-資料表關連-part-1"><a href="#ActiveRecord-資料表關連-part-1" class="headerlink" title="ActiveRecord - 資料表關連 part 1"></a>ActiveRecord - 資料表關連 part 1</h1><span id="more"></span><p><img src="https://i.imgur.com/18t3uNV.png"></p><h2 id="把資料表的『一筆資料』包裝成一個「物件」，並可在物件上增加額外的邏輯操作，讓資料的存取更便利。"><a href="#把資料表的『一筆資料』包裝成一個「物件」，並可在物件上增加額外的邏輯操作，讓資料的存取更便利。" class="headerlink" title="把資料表的『一筆資料』包裝成一個「物件」，並可在物件上增加額外的邏輯操作，讓資料的存取更便利。"></a><strong>把資料表的『一筆資料』包裝成一個「物件」，並可在物件上增加額外的邏輯操作，讓資料的存取更便利。</strong></h2><hr><p><img src="https://i.imgur.com/zQMDWB7.png"><br><img src="https://i.imgur.com/4ht96p7.png"></p><hr><h3 id="到這裡就會有問題：那-Model-到底是什麼"><a href="#到這裡就會有問題：那-Model-到底是什麼" class="headerlink" title="到這裡就會有問題：那 Model 到底是什麼?"></a>到這裡就會有問題：那 Model 到底是什麼?</h3><h3 id="Model-x3D-依照-Active-Record-模式設計的產物"><a href="#Model-x3D-依照-Active-Record-模式設計的產物" class="headerlink" title="Model = 依照 Active Record 模式設計的產物"></a><em><strong>Model = 依照 Active Record 模式設計的產物</strong></em></h3><p><img src="https://i.imgur.com/ZIXS4ya.png"></p><p>這邊就要提到一個觀念：</p><ul><li>ORM = Object Relational Mapping (物件關聯對映)</li><li>目的：簡化資料庫操作語法<br>那又會有一個問題：<br>用 ORM 就不需要學 SQL 了?</li></ul><h3 id="當然不是"><a href="#當然不是" class="headerlink" title="當然不是!!!"></a>當然不是!!!</h3><hr><p><img src="https://i.imgur.com/n3YYS5k.png"><br>答案：</p><blockquote><p>ActiveRecord 是一種 ORM 的設計框架，目的是希望透過物件的方式來簡化操作資料庫的語法。</p></blockquote><hr><h3 id="慣例優於設定："><a href="#慣例優於設定：" class="headerlink" title="慣例優於設定："></a>慣例優於設定：</h3><blockquote><p>Convention over Configuration(CoC)</p></blockquote><ul><li>慣例 = 可以少寫不必要的程式碼</li></ul><hr><h3 id="換句話說：學習Rails，等於是在學習Rails的慣例"><a href="#換句話說：學習Rails，等於是在學習Rails的慣例" class="headerlink" title="換句話說：學習Rails，等於是在學習Rails的慣例"></a>換句話說：學習Rails，等於是在學習Rails的慣例</h3><p>慣例一：</p><ul><li>Model：大寫、單數</li><li>Table：小寫、複數<br><img src="https://i.imgur.com/Iehm27f.png"></li></ul><hr><p>慣例二：</p><ul><li>每個表格預設有一個叫做 id 的流水編號欄位</li><li>在 migration 裡預設會有個 timestamps：<br>timestamps 會轉變成 <code>created_at</code> 跟 <code>update_at</code> 這兩個時間欄位<br>在資料新增或更新的時候會自動寫入當下時間<br><img src="https://i.imgur.com/7USCurR.png"></li></ul><hr><p><img src="https://i.imgur.com/UwBjFi9.png"><br>答案：<br>流水編號(id)：當資料在新增的時候，它會自動跳號去「累加」。<br>如果自己手動增加：會有個風險，假設你要手動把某筆 id 是最大的資料取出，手動+1後再存回去資料庫，但是你取出的同時有另外的人也剛好取出同一筆資料，這樣你們兩者回傳回去資料庫的 id 會產生一樣的情況。<br>為了避免發生這種情況，盡量不要自己手動去做，都交給資料庫系統本身處理就好。</p><hr><p><img src="https://i.imgur.com/cXy9zmL.png"><br>答案：<br>其實是在 Rails 專案裡面有個檔案 <code>config/initializers/inflection.rb</code><br>第6、9、11行解開註解<br>在第9行去修改它<br><img src="https://i.imgur.com/1vhcbvE.png"><br>打開 rails console畫面檢查結果<br><img src="https://i.imgur.com/Kju8hid.png"><br>檔名更類別可以對應：<br><img src="https://i.imgur.com/mYT7zOL.png"></p><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="ActiveRecord-資料表關連-part-1"><a href="#ActiveRecord-資料表關連-part-1" class="headerlink" title="ActiveRecord - 資料表關連 part 1"></a>ActiveRecord - 資料表關連 part 1</h1></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 016 ( 整理code )</title>
<link href="https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-016-%E6%95%B4%E7%90%86code/"/>
<id>https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-016-%E6%95%B4%E7%90%86code/</id>
<published>2023-01-19T04:31:31.000Z</published>
<updated>2023-02-01T04:57:39.289Z</updated>
<content type="html"><![CDATA[<h1 id="練習-016-整理code"><a href="#練習-016-整理code" class="headerlink" title="練習 - 016 (整理code)"></a>練習 - 016 (整理code)</h1><span id="more"></span><p>首先，整理 <code>candidate_controller.rb</code></p><p><code> @candidate = Candidate.find_by(id: params[:id])</code><br>它出現5次，所以我們可以拉到下面 private function 將它獨立出來成為一個 function。<br><img src="https://i.imgur.com/E6Ok9Gn.png" alt="圖"></p><hr><p>其他 function 有使用到它的<br>都可以用呼叫的方式<br><img src="https://i.imgur.com/kVA4HnA.png" alt="圖"></p><hr><p>目前這樣有變得比較簡潔乾淨，但是find_candidate 都還是會被重複呼叫5次。<br>這裡就要介紹Rails Controller提供了一個更便利有趣的方法：<br><code>before_action :find_candidate</code></p><hr><p>會發現原本需要輸入的地方都可以拿掉function<br><img src="https://i.imgur.com/kL6Zb8m.png"></p><hr><p>另外它還有很好的地方就是可以指定需要使用到find_candidate 的 function，可以改寫成<br><img src="https://i.imgur.com/jeENwLD.png"><br>這樣就可以指定哪些方法使用 find_candidate。<br>也有另外一種反向的寫法<br><img src="https://i.imgur.com/3sO7r6X.png"></p><hr><p>另外<code>flash[:notice] = 'Candidate Created!!!'</code><br>也可以跟另外一行<code>redirect_to '/candidate'</code> 寫在同一行<br><img src="https://i.imgur.com/fJvYEXT.png"><br>其他的方法有用到 <code>notice</code> 也都可以同樣簡化成一行。</p><hr><p>接著要看 <code>view</code> 的地方，有那裡可以做精簡化。<br>一樣我們先從一些會被重複使用的方法來做簡化，我們可從<code>view/layouts</code>裡面的<code>application.html.erb</code> 也就是所謂的「公版」裡面來進行相關的設定，達到我們要的簡化效果。所以我們可以把 <code>index.html.erb</code> 裡面的 <code><%= flash[notice] %></code> 放到 <code>application.html.erb</code> 的<br><code><body> </bodya</code> 裡面<br><img src="https://i.imgur.com/jFMLKqR.png"></p><hr><p>另外在 <code>new.html.erb</code> 的新增候選人及 <code>edit.html.erb</code> 更新候選人寫法幾乎一樣<br>那我們可以另外開一個新的檔案命名 <code>_form.html.erb</code>，把它變成「局部選染」檔案獨立出來，規定局部渲染檔案命名前面是下底線<code>_</code>。<br><img src="https://i.imgur.com/BF6emi5.png"><br>然後回到 <code>new.html.erb</code> 裡面輸入<br><img src="https://i.imgur.com/5kuwWjJ.png"><br>這樣畫面就會乾淨很多。所以 <code>edit.html.er</code> 檔案也可以同樣寫法<br><img src="https://i.imgur.com/PIc3OEl.png"></p><hr><p>同時我們檢查 <code>_form.html.erb</code> 檔案中有沒有可以簡化的地方，發現檔案中的 @candidate 變數是 <code>_form.html.erb</code> 他要自己伸手要東西過來，不是等別人餵東西給他。所以我們可以<code>new.html.erb</code> 裡面再加工一下。<br><img src="https://i.imgur.com/POZBVNz.png"><br>這樣我們就可以把<code>_form.html.erb</code> 裡面的實體變數 <code>@candidate</code> 改成區域變數 <code>candidate</code>。同樣的 <code>edit.html.erb</code> 也要做一樣的修改。<br><img src="https://i.imgur.com/opx3fYo.png"></p><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="練習-016-整理code"><a href="#練習-016-整理code" class="headerlink" title="練習 - 016 (整理code)"></a>練習 - 016 (整理code)</h1></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 015 ( 效能改善 N+1 Query)</title>
<link href="https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-015-%E6%95%88%E8%83%BD%E6%94%B9%E5%96%84-N-1-Query/"/>
<id>https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-015-%E6%95%88%E8%83%BD%E6%94%B9%E5%96%84-N-1-Query/</id>
<published>2023-01-19T04:20:43.000Z</published>
<updated>2023-02-01T04:57:41.236Z</updated>
<content type="html"><![CDATA[<h1 id="練習-015-效能改善-N-1-Query"><a href="#練習-015-效能改善-N-1-Query" class="headerlink" title="練習 - 015 (效能改善 N+1 Query)"></a>練習 - 015 (效能改善 N+1 Query)</h1><p>上一堂課，已經可以正確的顯示投票紀錄。但是透過<code>rails console</code>可以看到 server 的 log，每次投票都會計算一次。 <strong>(N+1 Query)</strong></p><span id="more"></span><p><img src="https://i.imgur.com/5Dahc4w.png" alt="圖"></p><hr><p>為了改善效能問題，此時我們就需要使用<code>Counter Cache</code></p><h3 id="Counter-Cache-概念"><a href="#Counter-Cache-概念" class="headerlink" title="Counter Cache 概念"></a>Counter Cache 概念</h3><ul><li>當我們的票寫入到投票紀錄的當下，同時會更新一份候選人票數到「候選人表單」的欄位中。</li><li>這樣我們在讀取候選人票數的時候，就可以不用再 count 票數的欄位。</li><li>因為在候選人的<code>table</code>已經有專門的欄位記載票數。</li><li>這個欄位的「數字」會在每次按下<code>vote</code>的時候更新欄位的數字。</li></ul><hr><h3 id="所以我們現在需要幫原本的Candidate-Model增加欄位："><a href="#所以我們現在需要幫原本的Candidate-Model增加欄位：" class="headerlink" title="所以我們現在需要幫原本的Candidate Model增加欄位："></a>所以我們現在需要幫原本的<code>Candidate Model</code>增加欄位：</h3><ol><li>欄位名稱(依照慣例<關聯的table名字_count>)：vote_logs_count</li><li>欄位資料型態：integer</li></ol><p>打開終端機輸入指令產生一個migration，<code>rails g migration add_counter_cache_to_candidate</code><br><img src="https://i.imgur.com/BcXt7om.png"><br><img src="https://i.imgur.com/dz9NYaV.png"></p><p>再到 <code>db/migrate/</code> 可以找到剛剛透過終端機指令產生的 migration 檔案，檔案裡長出來的<code>class</code>名稱<code>AddCounterCacheToCandidate</code>其實會對應上我們輸入的名字。<br><img src="https://i.imgur.com/OtkpDMy.png"></p><hr><p>上網找尋 Rails 新增欄位的方法<code>add_column</code></p><ul><li>add_column(要加入的表單名稱, 欄位名稱, 資料型態, option = {})<br><img src="https://i.imgur.com/e8sHeEN.png" alt="圖"></li></ul><hr><p>進到<code>AddCounterCacheToCandidate</code> migration檔案在<code>change</code>方法裡面增加一行程式碼。</p><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">add_column <span class="symbol">:candidates</span>, <span class="symbol">:vote_logs_count</span>, <span class="symbol">:integer</span>, <span class="symbol">default:</span> <span class="number">0</span></span><br><span class="line"><span class="comment">#加入欄位:加進candidate表單, 欄位名稱vote_logs_count, 型態是integer, 預設值為0</span></span><br></pre></td></tr></table></figure><p><strong>這裡要非常注意table名稱是複數(candidates)!</strong><br><strong>這裡要非常注意table名稱是複數(andidates)!</strong><br><strong>這裡要非常注意table名稱是複數(candidates)!</strong><br><img src="https://i.imgur.com/uBCjsNO.png"></p><p>這裡已經確認migration檔案裡面的內容沒有問題，接下來就是要把這個migration「具現化」，使用終端機執行<code>rails db:migrate</code><br><img src="https://i.imgur.com/mHwN7g2.png"></p><p>接著打開<code>db/migrate/schema.rb</code>來看看是否剛剛新增的欄位有加入成功。登愣!!!恭喜成功加入。<br><img src="https://i.imgur.com/FukqXwH.png"></p><p>但是不是增欄位這樣就有效果，還要進到<code>VoteLog Model</code>裡面做一件很神奇的事情。要在原本的<code>belongs_to :candidate</code>後面加上<code>counter_cache: true</code>。<br><img src="https://i.imgur.com/fZLlk7H.png"></p><p>增加<code>counter_cache: true</code>的用意，就是當我們把那張票寫入到資料庫的同時，也會執行「更新票數」的動作。把票數更新到哪裡呢？</p><ul><li>會把票數更新到<code>candidates</code>表單的<code>vote_logs_count</code>欄位<br><img src="https://i.imgur.com/o12lQ3L.png"></li></ul><hr><p>來確認看看是否有成功寫入。重新整理瀏覽器。確認目前頁面資料。<br><img src="https://i.imgur.com/Z6MW28a.png"></p><hr><p>按下<code>vote</code>，投給<code>ddd</code>候選人8票。<br><img src="https://i.imgur.com/PICPIDk.png"><br>確定每次的票數都會同步更新到畫面上，目前<code>ddd</code>候選人有10票。</p><p>觀察一下終端機上<code>rails server</code>顯示的紀錄，每次投票的時候有做了哪些事情，先截圖其中一筆資料。<br><img src="https://i.imgur.com/EThCpUb.png"></p><p>確實在寫入票數資料的同時也去更新了<code>candidates</code>表單的<code>vote_logs_count</code>欄位。</p><p>但是我們也會發現現在rails server 每次撈資料的時候，都會再去撈一次，是因為在<code>view/index.html.erb</code>的<code><%= candidate.vote_logs.count %></code> 它會去<code>vote_logs</code>這個表單<br>去撈count。</p><p>不是從<code>candidates</code>表單裡面的<code>vote_logs_count</code>欄位撈資料。所以要更改為<code><%= candidate.vote_logs_count %></code><br><img src="https://i.imgur.com/VRmJw9J.png"></p><p>這時候重新整理瀏覽器畫面，看到的票數資料才是正確的。對<code>eee</code>候選人按下<code>vote</code>。<br><img src="https://i.imgur.com/bKRnCjU.png"></p><hr><p>我們可以發現 rails server 的紀錄顯示只有撈一次而已。<br><img src="https://i.imgur.com/nlIAEwZ.png"></p><p>是不是發現效能有變更好一點了。但其實還可以再更優化。就是在<code>view/index.html.erb</code>的<code><%= candidate.vote_logs_count %></code>去修改。</p><p>我們現在是讓它直接讀取那個欄位的資料，但是其實還有一個更「漂亮」的寫法。我們一樣透過<code>vote_logs</code>，畢竟<code>candidate</code> 有 <code>has_many :vote_logs</code>。</p><p>所以我們可以把<code><%= candidate.vote_logs_count %></code>改成<br><code><%= candidate.vote_logs.size %></code></p><p>為什麼用這樣的寫法？目前重新整理頁面看到的結果兩種寫法顯示的結果是一樣的，可以為什麼要用<code>.size</code>而不是直接讀取<code>vote_logs_count</code>欄位。為什麼用<code>.size</code>的寫法？</p><ul><li>原因就是：以程式碼的可讀性，使用<code><%= candidate.vote_logs.size %></code> 比較可以看出關聯性。</li></ul><hr><p>不曉得到這邊大家有沒有發現一個事情，現在顯示的票數，好像跟一開始的不太一樣。打開<code>rails console</code>來看一下目前總票數。總共投了24票。<br><img src="https://i.imgur.com/XUwuRwv.png"></p><p>可是瀏覽器畫面顯示的票數似乎不太一樣。</p><p>是因為後來才加入的<code>counter cache</code>，現在瀏覽器畫面顯示的票數是<code>counter cashe</code>紀錄的票數。</p><p>我們可以google搜尋關鍵字：rails api reset counter_cache<br><img src="https://i.imgur.com/NLnuZBE.png"></p><p>找到了可以使用的方法，但是我們要測試看看，可以用<code>rake</code>語法來寫一個<code>task</code>。要寫在哪個目錄底下呢？<br>我們到<code>db/lib/tasks</code>目錄裡面新增一個任務<code>rest_counter.rake</code>檔案。<br><img src="https://i.imgur.com/aGLTATA.png"></p><p><img src="https://i.imgur.com/wyQEkeF.png"></p><p>這樣以後在終端機輸入<code>rake -T</code>就可以在任務列表中找到我們今天新增的這個<code>reset_counter</code>這個 task。<br><img src="https://i.imgur.com/dZba1TX.jpg"></p><hr><p>接著我們就要來寫程式了，進到<code>reset_counter.rake</code>，在<code>tesk ...do...end</code>裡面來寫程式。<br><img src="https://i.imgur.com/qRvg4V8.png"></p><p>再多增加一行<code>puts "prepare to reset counter"</code>，表示執行<code>reset_counter</code>前會先印出<code>prepare to reset counter</code><br><img src="https://i.imgur.com/nZd6Xp1.png"></p><p>執行完畢印出<code>done!</code>，所以在最下面增加一行<code>puts "done!"</code><br><img src="https://i.imgur.com/ylt6u7d.png"></p><p>終端機輸入<code>rails db:reset_counter</code><br><img src="https://i.imgur.com/6AOnyHf.png"></p><p>這時候我們再回到瀏覽器重新整理畫面，會發現票數就更新了。<br>從原本的 0票 8票 1票 —> 7票 10票 7票。這樣票數就正確了!!!<br><img src="https://i.imgur.com/9JLBxwE.png"></p><hr><p>目前我們已經有 新增/修改/刪除/投票 都有成功寫出來了。但是現在我們的code長得樣子是滿雜亂的，需要再整理一下。把一些功能寫成方法，這樣整個專案的程式碼可讀性會更高。</p><blockquote><h3 id="下一堂課程，整理程式碼"><a href="#下一堂課程，整理程式碼" class="headerlink" title="下一堂課程，整理程式碼"></a>下一堂課程，整理程式碼</h3></blockquote><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="練習-015-效能改善-N-1-Query"><a href="#練習-015-效能改善-N-1-Query" class="headerlink" title="練習 - 015 (效能改善 N+1 Query)"></a>練習 - 015 (效能改善 N+1 Query)</h1><p>上一堂課，已經可以正確的顯示投票紀錄。但是透過<code>rails console</code>可以看到 server 的 log，每次投票都會計算一次。 <strong>(N+1 Query)</strong></p></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 014 ( 投票紀錄表 )</title>
<link href="https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-014-%E6%8A%95%E7%A5%A8%E7%B4%80%E9%8C%84%E8%A1%A8/"/>
<id>https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-014-%E6%8A%95%E7%A5%A8%E7%B4%80%E9%8C%84%E8%A1%A8/</id>
<published>2023-01-19T04:01:20.000Z</published>
<updated>2023-02-01T04:57:43.098Z</updated>
<content type="html"><![CDATA[<h1 id="練習-014-投票記錄表"><a href="#練習-014-投票記錄表" class="headerlink" title="練習 - 014 (投票記錄表)"></a>練習 - 014 (投票記錄表)</h1><p>利用 Rails 的 Model 產生器，產生一個資料表出來，並且幫我們做好 migration。</p><span id="more"></span><p>需要的欄位有 ↓</p><ol><li><p>candidate_id：因為是一個參照值，可以使用<code>candidate:references</code>這個指令，Rails會幫我們去撈candidate的流水編號(id)欄位。</p></li><li><p>ip_address：想要有記名投票的效果，所以我們需要投票人的ip位置。資料型態雖然是 string 但是這邊可以省略不寫:string。</p></li></ol><hr><p>在終端機輸入指令。<br><img src="https://i.imgur.com/yv4eKSD.png"></p><p>可以看到終端機顯示的資訊，有產生migration檔案也同時有建立model。<br><img src="https://i.imgur.com/umqcQK5.png"></p><p>確認model目錄底下有建議了 VoteLog 這個 model，並且幫我們設定好<code>belongs_to :candidate</code><br><img src="https://i.imgur.com/5F25y8o.png"></p><p>再到db目錄底下看到有新增了 migration 檔案，確認檔案內容是否都正確。<br><img src="https://i.imgur.com/JpiuRhX.png"></p><hr><p>確認migration檔案內容都沒問題，接著我們就可以把它「具現化」。<br>終端機執行 <code>rials db:migrate</code> 指令，終端機畫面顯示有migrate成功。<br><img src="https://i.imgur.com/h83XGyE.png"></p><hr><p>那我們現在都有投票紀錄了，接著就是要把它寫進去，因此我們回到<code>CandidatesController</code> 在<code>vote action</code>裡面增加</p><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">VoteLog</span>.new(<span class="symbol">candidate:</span> <span class="variable">@candidate</span>, <span class="symbol">ip_address:</span> <span class="string">??</span><span class="string">?)</span></span><br></pre></td></tr></table></figure><p>這遇到ip位置不知道該放什麼<code>value</code>給它，這時候我們可以請出google大神，輸入關鍵字<code>rails ip_address</code>，通常前幾篇就會找到需要的答案，很幸運的我們很快就找到了。<code>request.remote_ip</code></p><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">VoteLog</span>.new(<span class="symbol">candidate:</span> <span class="variable">@candidate</span>, <span class="symbol">ip_address:</span> request.remote_ip)</span><br></pre></td></tr></table></figure><p><img src="https://i.imgur.com/b7zzjNV.png"></p><p>但是如果是用new方法的話，會需要給它一個變數承接，在執行<code>.save</code></p><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">v = <span class="title class_">VoteLog</span>.new(<span class="symbol">candidate:</span> <span class="variable">@candidate</span>, <span class="symbol">ip_address:</span> request.remote_ip)</span><br><span class="line">v.save</span><br></pre></td></tr></table></figure><p><img src="https://i.imgur.com/sC7SeXC.png"></p><hr><p>這裡我們可以換另外一種寫法，比較直接一點，不需要兩段式的方式寫入資料庫。<code>create</code>的方法可以直接存進去。</p><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">VoteLog</span>.create(<span class="symbol">candidate:</span> <span class="variable">@candidate</span>, <span class="symbol">ip_address:</span> request.remote_ip)</span><br></pre></td></tr></table></figure><p><img src="https://i.imgur.com/qMyx9dA.png"></p><p>打開瀏覽器，來投票試試看，先記下2號候選人ddd的目前票數2票。<br><img src="https://i.imgur.com/eUkew1b.png"></p><hr><p>接著按下左邊的<code>vote</code>，來觀察一下是否有變化。變成3票了!!ˊ而且畫面也有顯示「投票成功!!!」<br><img src="https://i.imgur.com/MzezoyB.png"></p><hr><p>確認有沒有確實寫入資料庫，透過<code>rails console</code>來確認。<br>輸入指令<code>VoteLog.all</code>就可以看到目前在<code>VoteLog</code> model裡面有多少的投票紀錄。<br><img src="https://i.imgur.com/fp0cBCy.png"></p><p>這樣每個候選人(id)被點擊一次<code>vote</code>就會被記錄下來。<br><img src="https://i.imgur.com/tR6V9ef.png"></p><hr><p>此時我們可以換個角度從候選人角度來寫，候選人名字有被投票的就會被紀錄起來。<br><img src="https://i.imgur.com/UXAmOGZ.png"></p><hr><p>另外原本下面的第55-56行寫的程式碼，是針對候選人的某個欄位執行遞增，並且將結結果save到資料庫中。<br>因為我們現在已經寫了第53行的程式碼，所以55-56行的程式碼就可以拿掉。<br><img src="https://i.imgur.com/fk3Sy7M.png"></p><hr><p>打開瀏覽器，此時按下<code>vote</code>會顯示錯誤訊息「沒有定義<code>vote_logs</code>方法」<br><img src="https://i.imgur.com/5sSgxW4.png"></p><p>為什麼會看到，是因為剛剛我們給每一位候選人都有很多「投票紀錄」model，透過這個「投票紀錄」model，直接建立一個投票紀錄出來。這樣我們就可以計算票數。</p><p>雖然我們剛剛建立<code>VoteLog Model</code>時有使用<code>references:candidate</code>這個指令，會幫我們在<code>vote_log.rb</code>這個model檔案直接幫我們加上<code>belongs_to :candidate</code>。<br><img src="https://i.imgur.com/B8cQNIh.png"></p><p>但是相對的<code>Candidate Model</code>卻沒有幫我們做這件事情。<br><img src="https://i.imgur.com/LUs6UDK.png"><br>因為Rails不曉得我們是要做「一對一」關聯？「一對多」關聯？它沒有辦法去猜，所以這邊就只能由我們自己手動來幫Model們來建立「關聯」。</p><hr><p>進到<code>Candidate Model</code>手動新增<code>has_many :vote_logs</code>，要記得log是負數型態(logs)。<br><img src="https://i.imgur.com/uE8rHdD.png"><br>關於<code>has_many</code>的黑魔法，之後會有另位的章節介紹它。目前先知道它其實默默地在背後建立一個叫做<code>vote_logs</code>的方法。</p><hr><p>這邊我們回到瀏覽器，回到前一頁，先確認目前每位候選人的票數。<br><img src="https://i.imgur.com/4nMkGOJ.png"></p><hr><p>對候選人<code>eee</code>按下<code>vote</code>，再看看是否會一樣出現錯誤訊息。<br><img src="https://i.imgur.com/Pv8DrFD.png"></p><hr><p>有顯示投票成功，可是票數還沒有改變一樣維持4票。這時候我們可以透過<code>rails console</code>來觀察一下是否真的有投票成功。</p><p>輸入指令：<code>VoteLog.count</code>，看到顯示有7票。<br><img src="https://i.imgur.com/r6tO1Ik.png"></p><p>再繼續對<code>eee</code>候選人多按3次<code>vote</code>，看看數字會不會變化：<br><img src="https://i.imgur.com/GsOzmp3.png"></p><p>確實現在票數變成10票了。是有成功將票數寫進資料庫中。但是目前瀏覽器的畫面依然顯示票數是4票<br><img src="https://i.imgur.com/WojFYi4.png"></p><hr><p>會有這樣的原因是原本我們把票數的累進，寫在了<code>Candidate Model</code>的<code>votes</code>欄位累進票數。不是現在我們使用的<code>VoteLog Model</code>。</p><p>所以我們進到<code>view/index.html.erb</code>檔案來修改一下<code><%= candidate.votes %></code>的內容，改成<code><%= candidate.vote_logs %></code>。<br><img src="https://i.imgur.com/BZEnxrm.png"><br>因為每個候選人都會有很多投票紀錄，所以<code><%= candidate.vote_logs %></code>會回傳一大包東西 (是一個陣列)。</p><p>可以透過<code>rails console</code>來看一下回傳的資料內容，首先我們先宣告一個<code>c1</code>變數=候選人的第一個<code>c1 = Candidate.first</code><br><img src="https://i.imgur.com/B43Dr2U.png"></p><p>輸入<code>c1.vote_logs</code>説：「誒，聽說你有很多票。」會看到一長串長得像陣列的東西。<br><img src="https://i.imgur.com/XTQ9L0r.png"></p><p>再輸入<code>c1.vote_logs.count</code>説：「那你到底有幾張票」。c1候選人告訴你：「我有2張票。」<br><img src="https://i.imgur.com/uS75NME.png"></p><p>所以這時候我們可以回到<code>view/index.html.erb</code>再修改剛剛的那行程式碼<code><%= candidate.vote_logs.count %></code>。這樣應該就會拿到我們想要看到的票數。</p><p>再回到瀏覽器重新整理，此時可以發現票數改變了。變成了<code>votelogs</code>紀錄的票數。<br><img src="https://i.imgur.com/6VhNhBM.png"></p><hr><p>這時候我們對<code>ccc</code>候選人再投5票。看看是否票數會增加變成7。<br><img src="https://i.imgur.com/wIQFzxi.png"><br>真的有成功投票，並且寫進資料庫。</p><p>如果要確認投票紀錄，現在我們可以再透過<code>rails console</code>來觀察<br>一樣輸入：<code>c1 = Candidate.first</code>、<code>c1.vote_logs</code>。<br><img src="https://i.imgur.com/UZD2SRl.png"></p><p>可以看到一號候選人的投票紀錄：<br><img src="https://i.imgur.com/6DBIl1r.png"></p><p>雖然有顯示投票紀錄了。但是不知道有沒有發現一件事情，執行<code>rails console</code>如果要看去投票紀錄。輸入<code>c1.vote_logs</code>它是會撈後選人的資料，你有幾票它會去撈幾次。</p><p>這個狀況是否似成相似？有沒有「N + 1」的感覺。如果候選人很多時，大家同時上線投票，會很佔用資源，有資源消耗的問題。</p><hr><p>目前已經看到每次投票的紀錄，但是其實有需要優化的地方，「效能」。</p><blockquote><h3 id="下一堂課程，改善效能。"><a href="#下一堂課程，改善效能。" class="headerlink" title="下一堂課程，改善效能。"></a>下一堂課程，改善效能。</h3></blockquote><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="練習-014-投票記錄表"><a href="#練習-014-投票記錄表" class="headerlink" title="練習 - 014 (投票記錄表)"></a>練習 - 014 (投票記錄表)</h1><p>利用 Rails 的 Model 產生器，產生一個資料表出來，並且幫我們做好 migration。</p></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 013 ( 投票 )</title>
<link href="https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-013-%E6%8A%95%E7%A5%A8/"/>
<id>https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-013-%E6%8A%95%E7%A5%A8/</id>
<published>2023-01-19T03:57:10.000Z</published>
<updated>2023-02-01T04:57:44.867Z</updated>
<content type="html"><![CDATA[<h1 id="練習-013-投票"><a href="#練習-013-投票" class="headerlink" title="練習 - 013 (投票)"></a>練習 - 013 (投票)</h1><p>在候選人表單增加 vote 超連結。<br>我們想在<code>Name</code>的前面加上<code>Ｖote</code>的超連結</p><span id="more"></span><p><img src="https://i.imgur.com/exNG5YE.png"></p><hr><p>為了要服符合 <strong>RESTful</strong> 設計風格，路徑我們希望是<code>candidates/id/vote</code><br>所以這時候要進到<code>config/routes.rb</code> 手動增加路徑，而我們選擇使用的方法是<code>POST</code>。意思就是對<code>candidates/:id/vote</code>這個地方做POST這個動作，它就會去找<code>candidates#vote</code>這個方法。<br>所以只要路徑對了，就會對到對的<code>action</code>。<br><img src="https://i.imgur.com/FYLYb27.png" alt="圖"></p><hr><p>這時候我們可以打開Routes路徑對照表來看看 <code>rails routes</code>。確實我們可以看到路徑有出來了。<br><img src="https://i.imgur.com/OC1DY7n.png" alt="圖"></p><hr><h2 id="但是，如果今天我們是要幫原本的resources產生的8條路徑做擴充，那我們就必須改成另外的寫法。就是在原本的resources後面給它一個block-增加do-x2F-end-。-member-原本8個路徑在多一個「成員」的路徑。candidates-id-vote-collection-原本8個路徑多一個「沒有成員」的路徑。candidates-vote"><a href="#但是，如果今天我們是要幫原本的resources產生的8條路徑做擴充，那我們就必須改成另外的寫法。就是在原本的resources後面給它一個block-增加do-x2F-end-。-member-原本8個路徑在多一個「成員」的路徑。candidates-id-vote-collection-原本8個路徑多一個「沒有成員」的路徑。candidates-vote" class="headerlink" title="但是，如果今天我們是要幫原本的resources產生的8條路徑做擴充，那我們就必須改成另外的寫法。就是在原本的resources後面給它一個block(增加do/end)。* member: 原本8個路徑在多一個「成員」的路徑。candidates/:id/vote* collection: 原本8個路徑多一個「沒有成員」的路徑。candidates/vote"></a>但是，如果今天我們是要幫原本的<code>resources</code>產生的8條路徑做擴充，那我們就必須改成另外的寫法。就是在原本的<code>resources</code>後面給它一個<code>block</code>(增加do/end)。<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">resources <span class="symbol">:candidates</span> <span class="keyword">do</span></span><br><span class="line"> <span class="comment"># 用 member </span></span><br><span class="line"> <span class="comment"># 或是</span></span><br><span class="line"> <span class="comment"># 用 collection</span></span><br><span class="line"><span class="keyword">end</span></span><br></pre></td></tr></table></figure><br><img src="https://i.imgur.com/RKpdhc6.png" alt="圖"><br>* member: 原本8個路徑在多一個「成員」的路徑。<code>candidates/:id/vote</code><br>* collection: 原本8個路徑多一個「沒有成員」的路徑。<code>candidates/vote</code></h2><p>打開我們的<code>Routes</code>路徑對照表 <code>rails routes</code> 看看發什麼事。<br><img src="https://i.imgur.com/VLgzAS9.png" alt="圖"></p><p>可以發現第一行是<code>member</code>做的路徑擴充，另外一行就是<code>collection</code>做的路徑擴充。</p><p>但是我們可以明顯發現兩者產生的路徑擴充有不同。</p><ul><li><code>memeber</code> 的路徑有保留<code>id</code>：<code>candidates/:id/vote</code></li><li><code>collection</code> 產生的路徑不會保留<code>id</code>：<code>candidates/vote</code></li></ul><p>另外這裡要「特別注意」的地方就是資料讀取方法，這邊使用 <code>POST</code> 會比較適合，是因為<code>POST</code>會帶<code>token</code>，相較於 GET 比較安全。這樣才有檢查機制。</p><p><code>GET</code>比較容易被仿造，只要知道你的路徑，有心人士就可以一直灌票，相信這樣的結果應該不大家所樂見的。<br><img src="https://i.imgur.com/spZj3xB.png" alt="圖"></p><hr><p>回到 <code>view/candidates/index.html.erb</code> 表單中我們把要走的路徑寫上去。<br><img src="https://i.imgur.com/fDq0u4S.png" alt="圖"></p><hr><p>打開我們的瀏覽器，這時發現畫面還是會有錯誤訊息，找不到<code>vote action</code><br><img src="https://i.imgur.com/HVEeaN8.png"></p><hr><p>既然沒有，那就自己動手做一個。到<code>CandidatesController</code>來定義<code>vote action</code><br><img src="https://i.imgur.com/Z7DWwtd.png"><br><img src="https://i.imgur.com/KY7ligI.png"></p><hr><p>打開瀏覽器，確認畫面<br><img src="https://i.imgur.com/glIGY6T.png"><br><img src="https://i.imgur.com/4EK84hA.png"><br>但是這時候如果一直按下<code>vote</code>我們的票數就會一直蕾加上去。所以等下要來修改投票的部分。</p><hr><p>因為我們還沒新增<code>vote action</code>在<code>CandidatesController</code>裡面，所以要先確認一下在<code>/db/schema.rb</code> <code>vote</code> 的值<br><img src="https://i.imgur.com/j8B6zlr.png" alt="圖"></p><hr><p>接著再到<code>CandidatesController</code>新增<code>vote action</code><br><img src="https://i.imgur.com/sEFB6Bw.png"></p><hr><p>另外還有一個比較優化一點的方法<br><img src="https://i.imgur.com/T6AUT8U.png" alt="圖"></p><p><code>@candidate.increment(:votes)</code><br>效果等於<code>@candidate.votes = @candidate.votes + 1</code><br>increment 是 rails 提供的方法</p><blockquote><h3 id="下一堂課，就要來增加一個表格專門，紀錄投票紀錄。並且讓那個表格跟候選人建立關聯"><a href="#下一堂課，就要來增加一個表格專門，紀錄投票紀錄。並且讓那個表格跟候選人建立關聯" class="headerlink" title="下一堂課，就要來增加一個表格專門，紀錄投票紀錄。並且讓那個表格跟候選人建立關聯"></a>下一堂課，就要來增加一個表格專門，紀錄投票紀錄。並且讓那個表格跟候選人建立關聯</h3></blockquote><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="練習-013-投票"><a href="#練習-013-投票" class="headerlink" title="練習 - 013 (投票)"></a>練習 - 013 (投票)</h1><p>在候選人表單增加 vote 超連結。<br>我們想在<code>Name</code>的前面加上<code>Ｖote</code>的超連結</p></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 012 ( 資料””刪除(delete) )</title>
<link href="https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-012-%E8%B3%87%E6%96%99%E2%80%9D%E2%80%9D%E5%88%AA%E9%99%A4-delete/"/>
<id>https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-012-%E8%B3%87%E6%96%99%E2%80%9D%E2%80%9D%E5%88%AA%E9%99%A4-delete/</id>
<published>2023-01-19T03:53:43.000Z</published>
<updated>2023-02-01T04:57:46.523Z</updated>
<content type="html"><![CDATA[<h1 id="練習-012-資料””刪除-delete"><a href="#練習-012-資料””刪除-delete" class="headerlink" title="練習 - 012 ( 資料””刪除(delete) )"></a>練習 - 012 ( 資料””刪除(delete) )</h1><h2 id="CRUD前面已經介紹了新增、修改、編輯，現在剩下刪除的功能"><a href="#CRUD前面已經介紹了新增、修改、編輯，現在剩下刪除的功能" class="headerlink" title="CRUD前面已經介紹了新增、修改、編輯，現在剩下刪除的功能"></a>CRUD前面已經介紹了新增、修改、編輯，現在剩下刪除的功能</h2><span id="more"></span><p>首先，在 <code>view/index.html.erb</code> 再多增加一個”刪除”超連結。一樣我們使用<code>link_to</code>方法。</p><p>可是我們不知道<code>delete</code>的路徑要怎麼走，所以一樣需要請門口阿姨(Routes)來告訴我們。可以發現<code>DELETE</code>前面的<code>prefix</code>沒寫東西，只要是沒寫就表示同上。<br><img src="https://i.imgur.com/pnmoGm5.png"><br>所以我們可以確定路徑是<code>/candidate/candidates/:id(.:format)</code>。</p><p>所以路徑該會是<code><%= link_to 'delete', candidate_path(candidate.id) %></code>。</p><p>可是如果這樣寫的話，基本上你會看到跟<code>show</code>的頁面是一模一樣。因此我們要在路徑後面給它加上一個動詞：<br><code><%= link_to 'delete', candidate_path(candidate.id), method: 'delete' %></code><br><img src="https://i.imgur.com/YocIh5i.png"><br>打開瀏覽器，就會看到畫面上的表單中呈現<br><img src="https://i.imgur.com/LoStwWL.png"><br>同時我們檢視頁面原始碼，可以發現在每個超連結中，都多出了一個<code>data-method="delete"</code>的屬性。這個是Rails做的是手腳。<br><img src="https://i.imgur.com/OlQiFhL.png"></p><hr><p>所以我們應該也可以猜到，按下去<code>delete</code>，因該是會出現提示訊息的頁面，告訴我們說找不到<code>destroy action</code>。<br><img src="https://i.imgur.com/vrgpbCX.png"><br>而我們也是維持跟之前一樣的作法，如果找不到，那就做一個給你。</p><hr><p>接著我們就要到<code>CandidatesController</code> 新增<code>destroy action</code>。<br><img src="https://i.imgur.com/piEOXfT.png"></p><hr><p>如果今天我們要刪除一筆資料，那首先要做的就是先把那筆資料找出來。在前面的新增、編輯、更新，我們早就找過好幾次的資料了，所以直接把同樣的code給複製過來。<br><img src="https://i.imgur.com/q1aA65a.png"></p><hr><p>找到資料，那我們就可以直接把資料給刪除了，<code>@candidate.destroy</code><br><img src="https://i.imgur.com/68MTX5y.png"><br>另外我們一樣給它一個提示訊息<code>flash[notice] = "候選人已刪除!!!"</code>，並且將頁面跳轉回候選人列表頁面。<br><img src="https://i.imgur.com/Hclg3Wb.png"><br>打開瀏覽器，隨便點選一個候選人的刪除超連結<br><img src="https://i.imgur.com/kCXCvlC.png"><br>如果我們回到候選人表單頁面，真的點擊 delete 是會直接將整筆資料刪除，救不回來。</p><hr><p>所以我們可以在 <code>index.html.erb</code> 中<code>delete</code>超連結多增加一個防呆機制<code>data: {confirm: "確定要刪除嗎？"}</code><br><img src="https://i.imgur.com/6vfESBr.png"><br>接著打開瀏覽器，來看看畫面。<br><img src="https://i.imgur.com/MFxwSK7.png"><br>這樣的設計，就是怕使用者不小心按到刪除，還會再做第2次的確認，這時候按下<code>確定</code>那就真的刪除那筆資料了。</p><hr><h3 id="下一堂課程，就是要進入投票的部分。"><a href="#下一堂課程，就是要進入投票的部分。" class="headerlink" title="下一堂課程，就是要進入投票的部分。"></a>下一堂課程，就是要進入投票的部分。</h3><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="練習-012-資料””刪除-delete"><a href="#練習-012-資料””刪除-delete" class="headerlink" title="練習 - 012 ( 資料””刪除(delete) )"></a>練習 - 012 ( 資料””刪除(delete) )</h1><h2 id="CRUD前面已經介紹了新增、修改、編輯，現在剩下刪除的功能"><a href="#CRUD前面已經介紹了新增、修改、編輯，現在剩下刪除的功能" class="headerlink" title="CRUD前面已經介紹了新增、修改、編輯，現在剩下刪除的功能"></a>CRUD前面已經介紹了新增、修改、編輯，現在剩下刪除的功能</h2></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 011 ( 資料"編輯"(update) )</title>
<link href="https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-011-%E8%B3%87%E6%96%99-%E7%B7%A8%E8%BC%AF-update/"/>
<id>https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-011-%E8%B3%87%E6%96%99-%E7%B7%A8%E8%BC%AF-update/</id>
<published>2023-01-19T03:47:17.000Z</published>
<updated>2023-02-01T04:57:48.791Z</updated>
<content type="html"><![CDATA[<h1 id="前面課程已經知道如何新增-x2F-製作列表"><a href="#前面課程已經知道如何新增-x2F-製作列表" class="headerlink" title="前面課程已經知道如何新增/製作列表"></a>前面課程已經知道如何新增/製作列表</h1><p>首先，我們進到<code>view/index.html.erb</code> 將原本在 table 裡面 Action 選項的<code><td></code> 裡面換成 <code>update</code>，但是我們要使用link_to的方法來寫。</p><span id="more"></span><p>所以要先去找門口阿姨(Routes)才能知道正確的路徑。</p><p>打開終端機輸入<code>rails routes</code>，可以找到那8個路徑中，跟<code>edit</code>有相關的。找到了，所以我們可以拿前面的<code>prefix verb</code>來用在link_to裡面。<br><img src="https://i.imgur.com/1uiBToG.png"><br>因為這個路徑也是需要有一個<code>id</code> 所以寫法跟上面的<code>Name</code>欄位很像。path後面接<code>id</code>。<code>edit_candidate_path(cadidtae.id)</code><br><img src="https://i.imgur.com/C26M6lL.png" alt="圖"><br>打開瀏覽器看看，確實看到<code>Action``Update</code>欄位的出現<br><img src="https://i.imgur.com/s90HCmZ.png"></p><hr><p>也就是對應每個候選人 id 在Action欄位新增一個叫做 update 的超連按鈕，點擊之後會連到另外一個頁面。</p><p>點擊第一位候選人的update按鈕，會看到提示畫面。沒有在controller中找到叫做<code>edit</code>的 action。</p><p>但這時我們可以注意網址列的部分，有看到第一位候選人的 id 有在網址列上，表示目前是正確的。<br><img src="https://i.imgur.com/OIbeECm.png"></p><hr><p>接著我們就要到<code>CandidatesController</code>中產生對應的<code>edit action</code><br><img src="https://i.imgur.com/H6N9ZHu.png"><br>可以預期的是，重新整理瀏覽器後，頁面應該會顯示沒有 edit 的 template。<br><img src="https://i.imgur.com/uQQaxpS.png"><br>當然我們也就必須到 view 裡面 新增對應的<code>edit.html.erb</code>檔案。先給它一個<code><h1>Edit Candidate</h1></code><br><img src="https://i.imgur.com/gOuTQYx.png"><br>再確認一下瀏覽器是否可以正常顯示頁面，確實有正確顯示網址列也看到<code>h1</code>標籤<br><img src="https://i.imgur.com/BtAbQhO.png"></p><hr><p>這時候我們想要在畫面上給它一個表單(form)，因為其實表單的內容應該會跟新增候選人頁面的表單差不多，一樣有名稱、年紀、政見的等欄位。</p><p>所以編輯候選人頁面中的表單，我們可以稍微偷懶一點點，借用原本<code>new.html.erb</code> 的內容 copy & past。<br><img src="https://i.imgur.com/swkcXQg.png" alt="圖"></p><hr><p>再打開瀏覽器確認畫面如何，發現咦？還是有錯誤訊息。<br><img src="https://i.imgur.com/dzxaKNe.png"><br><img src="https://i.imgur.com/lI0ur7C.png"></p><hr><p>為什麼會看到錯誤訊息呢？會看到是正常的，我們回到<code>CandidatesController</code>來看裡面的<code>edit action</code>。</p><p>這時候<code>edit action</code>都沒有做任何事，所以剛剛看才會看到錯誤訊息。<br><img src="https://i.imgur.com/fLokBvn.png"></p><p>這時候我們可以再借用<code>show action</code>裡面的變數<code>@candidate = Candidate.fint_by(id: params[:id])</code>放到<code>edit action</code>裡面。</p><p>因為<code>show action</code>可以去抓到某個<code>id</code>候選人的資料，這邊在<code>edit action</code>裡面也是要針對某個<code>id</code>候選人的資料做編輯。所以直接把整行code借用過來。<br><img src="https://i.imgur.com/wp6ZGz2.png"><br>接著我們再打開瀏覽器確認畫面</p><hr><p>此時神奇的事情發生了，可以發現畫面已經做好了。<br><img src="https://i.imgur.com/19wOknq.png"></p><p>這也是<code>form_for()</code>這個小幫手厲害的地方，它發現參數<code>@candidate</code>是「有料的」，所以把裡面的「料」一個一個往每個欄位塞。</p><hr><p>這時候我們可以再打開網頁原始碼，來看一下裡面的<code><form></code>標籤。<br><img src="https://i.imgur.com/HH8pa69.png"></p><p>可以跟之前做新增的時候對比一下，可以明顯發現有不一樣。<code>edit</code>方法會帶到<code>id</code>，把<code>id</code>帶進來。發法也是用「POST」，但是往後繼續看，會看到一個隱藏<code>input</code>欄位，它的名字叫<code>"_method"</code>，<code>value="PATCH"</code>。</p><p>這時候我們可以打開終端機的<code>Routes</code>，來看一下patch方法對/candidates/id 這個位址送資料的話，對應的<code>controller action</code>是<code>candidate#update</code>。也就表示我們按下送出後，他會直接往<code>update action</code>這個地方去。<br><img src="https://i.imgur.com/PQjJVtJ.png"></p><p>是不是覺得<code>form_for()</code>很厲害了，我們只是把完全同樣的code從<code>new.html.erb</code>檔案直接複製過來<code>edit.html.erb</code>。完全沒有去修改任何的code，它還可以猜到我們要做什麼事情。</p><p>因為<code>form_for()</code>會去猜，你既然從資料庫裡面撈東西出來，應該不會是要新增才對，所以會猜到你可能是要去修改資料。</p><p>在我們沒有更改原始碼的情況下，可以發現原本在新增候選人頁面的按鈕是<code>new candidate</code>。</p><p>而目前的頁面顯示的是 <code>update candidate</code>。<code>form_for()</code>直接幫我們做好了。</p><hr><p>點擊<code>update candidate</code>按鈕送出資料，看看瀏覽器的頁面如何。馬上看到提示訊息。<br><img src="https://i.imgur.com/oDzpQhL.png"><br>就如同之前的步驟，找不到某個<code>action</code>，那就動手做給你。</p><hr><p>這時我們可以觀察終端機的(Routes)，路徑<code>/candidates/:id(.:format)</code>有出現4個一樣的路徑。但是使用的方法卻不同。表示不一樣的動作，對應不同的<code>controller action</code>。<br><img src="https://i.imgur.com/4h2NZMT.png"></p><ol><li>GET： 讀取候選人資料</li><li>PATCH：更新候選人資料</li><li>PUT：更新候選人資料</li><li>DELETE：刪除後選人資料</li></ol><hr><p>所以我們就可以知道按下頁面的<code>update candidate</code>按鈕，應該是會往<code>candidates#update</code>這個地方去找。</p><p>接著就是要到<code>CandidatesContrller</code>裡面新增<code>update action</code>。<br><img src="https://i.imgur.com/YhUieSL.png"><br>因為 「HTTP不會有狀態」，瀏覽器頁面跳轉的時候，資料不會保留，現在唯一有的是網址列的<code>id</code>及剛剛在編輯候選人頁面，我們輸入在表單裡面的那包資料。</p><p>所以在<code>CandidatesController</code>的<code>update action</code>我們要再重新抓一次資料，並且更新抓到的那包資料。</p><p>而更新資料的動作會跟在新增候選人時的動作很相似。所以code寫法很像。<br>新增時，先新增一個物件，如果新增成功就接著往下個目的地走，如果新增失敗就重新 Render 畫面。</p><p>而我們在<code>update action</code>也是做類似的事情。<br><img src="https://i.imgur.com/psQiWIG.png"></p><p>但此時在<code>update action</code>要記得做資料「清洗」，因為我們之前有定義了<code>private method</code>，已經有一包清洗過的資料，可以把它拿到<code>update action</code>來使用，所以要將 code 寫成<br><img src="https://i.imgur.com/UBdJYod.png"><br>如果成功更新，畫面會跳出訊息顯示候選人更新成功!!!並且將頁面跳轉到候選人清單頁面。<br><img src="https://i.imgur.com/L0Mtlv6.png"><br>打開瀏覽器確認，確實跟我們預期的一樣。<br><img src="https://i.imgur.com/L1hNnAj.png"></p><hr><p>如果更新候選人資料失敗，那就是借用<code>edit.html.erb</code>這個檔案，重新渲染畫面。<br><img src="https://i.imgur.com/YozEepA.png"></p><hr><blockquote><h3 id="候選人更新的部分就到這邊，下堂課要介紹”刪除”功能"><a href="#候選人更新的部分就到這邊，下堂課要介紹”刪除”功能" class="headerlink" title="候選人更新的部分就到這邊，下堂課要介紹”刪除”功能"></a>候選人更新的部分就到這邊，下堂課要介紹”刪除”功能</h3></blockquote><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="前面課程已經知道如何新增-x2F-製作列表"><a href="#前面課程已經知道如何新增-x2F-製作列表" class="headerlink" title="前面課程已經知道如何新增&#x2F;製作列表"></a>前面課程已經知道如何新增&#x2F;製作列表</h1><p>首先，我們進到<code>view/index.html.erb</code> 將原本在 table 裡面 Action 選項的<code>&lt;td&gt;</code> 裡面換成 <code>update</code>，但是我們要使用link_to的方法來寫。</p></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 010 (Add Candidate有欄位沒填寫，顯示錯誤訊息，並且加上紅色外框提示)</title>
<link href="https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-010-Add-Candidate%E6%9C%89%E6%AC%84%E4%BD%8D%E6%B2%92%E5%A1%AB%E5%AF%AB%EF%BC%8C%E9%A1%AF%E7%A4%BA%E9%8C%AF%E8%AA%A4%E8%A8%8A%E6%81%AF%EF%BC%8C%E4%B8%A6%E4%B8%94%E5%8A%A0%E4%B8%8A%E7%B4%85%E8%89%B2%E5%A4%96%E6%A1%86%E6%8F%90%E7%A4%BA/"/>
<id>https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-010-Add-Candidate%E6%9C%89%E6%AC%84%E4%BD%8D%E6%B2%92%E5%A1%AB%E5%AF%AB%EF%BC%8C%E9%A1%AF%E7%A4%BA%E9%8C%AF%E8%AA%A4%E8%A8%8A%E6%81%AF%EF%BC%8C%E4%B8%A6%E4%B8%94%E5%8A%A0%E4%B8%8A%E7%B4%85%E8%89%B2%E5%A4%96%E6%A1%86%E6%8F%90%E7%A4%BA/</id>
<published>2023-01-19T03:41:55.000Z</published>
<updated>2023-02-01T04:57:50.475Z</updated>
<content type="html"><![CDATA[<p>已經知道有資料驗證的機制，現在要透過CSS的方式在<code>Add Candidate</code>頁面上製作出一些美化效果。</p><h2 id="在終端機輸入-rails-c宣告一個變數-c1-Candidate-new呼叫-c1-會看到所有值是nil"><a href="#在終端機輸入-rails-c宣告一個變數-c1-Candidate-new呼叫-c1-會看到所有值是nil" class="headerlink" title="在終端機輸入 rails c宣告一個變數 c1 = Candidate.new呼叫 c1 會看到所有值是nil]"></a>在終端機輸入 <code>rails c</code><br>宣告一個變數 <code>c1 = Candidate.new</code><br>呼叫 c1 會看到所有值是nil]<br><span id="more"></span></h2><p><img src="https://i.imgur.com/z9boT1S.png"></p><hr><p>之後再輸入 <code>c1.save</code><br><img src="https://i.imgur.com/C2kegYZ.png"></p><p>這裡會看到 false 是因為 資料驗證的時候發現目前資料的內容不符合儲存的格式，所以出現 false 。</p><hr><p>再輸入 <code>c1.errors</code><br><img src="https://i.imgur.com/v85S5Zb.png"></p><p>會看到資料驗證時發現有error的表單樣式。</p><hr><p>這時輸入 <code>c1.errors.any?</code><br><img src="https://i.imgur.com/YWFDM7d.png"></p><p>表示詢問 <code>c1</code> 你資料驗證有發現任何錯誤嗎？會看到 <code>true</code> 表示它的回應是有喔，有發現。</p><hr><p>整個流程說明：<br>從一開始的<code>c1.save</code> 有嘗試要存入資料，後面的 <code>c1.errors.any?</code> 才會看到 <code>true</code> 。</p><p>否則一開始就輸入<code>c1.errors.any?</code>得到的回應是<code>false</code>。</p><hr><p>那我們接著輸入<code>c1.errors.full_messages</code><br>會得到我們出現錯誤的地方是哪裡<br><img src="https://i.imgur.com/Z4WB1Ny.png"></p><p>因為我們驗證資料只有針對Name的項目進行判斷，所以會看到這個錯誤訊息，當然我們是可以再增加其他的資料驗證判斷條件。</p><hr><p>不過我們現在是要讓頁面可以顯示出來錯誤訊息。<br>在 <code>new.html.erb</code><br>我們增加指令<br><img src="https://i.imgur.com/CkBrgeW.png"></p><hr><p>利用<code><ul><li></li></ul></code>的方式，執行<code>if @candidate.errors.any?</code>迴圈，如果有錯誤訊息，就把訊息放到<code><li></code>裡面<br><img src="https://i.imgur.com/F8Ccjgl.png"></p><hr><p>打開瀏覽器<br><img src="https://i.imgur.com/Ql67ScK.png"></p><hr><p>雖然有正確地顯示出來<code>errors.full_messages</code>，但同時我們也發現了<code>Name</code>欄位跑版的問題，所以這時候，我們可以去<code>app/assets/stylesheets/application.css</code>，看到裡面有很長一串註解，但其實不是註解是有意義的，尤其是最後兩行<br><img src="https://i.imgur.com/anRnljj.png"><br>這是跟打包有關係的，所以不可以亂刪掉。這邊只是要介紹CSS相關設定可以寫在哪些地方。<br>我們要在<code>app/assets/stylesheets</code>目錄底下手動新增一個<code>candidate.scss</code>檔案，就可以把我們要的CSS相關設定寫在這邊。<br><img src="https://i.imgur.com/jEo3fBe.png"><br><code>application.css</code>因為有那兩行指令，所以也會把<code>app/assets/stylesheets</code>目錄底下其他的 SCSS 一起打包。<br>這邊可以來測試看看，在<code>candidate.scss</code>裡面我們幫<code>body</code>增加背景顏色紅色。<br><img src="https://i.imgur.com/ir57Se2.png"><br>再打開瀏覽器看看，確實背景顏色變更了。<br><img src="https://i.imgur.com/eKS8z6x.png"></p><hr><p>那我們來找出哪邊要修改，所以一樣讓新增候選人頁面出現錯誤訊息，但我們打開<code>檢查</code>來看看是哪裡跑版。發現有個<code><div class="field_with_errors"></code>，這裡是有問題的。<br><img src="https://i.imgur.com/hxYbPLU.png"><br>我們期望的頁面顯示是兩個欄位對齊排在同一行，不要輸入匡欄位被往下面壓下去，所以我們可以對剛剛找到的那個<code><div class="field_with_errors"></code>設定它的style。<br><img src="https://i.imgur.com/9HXZ89E.png"><br>我們再回到瀏覽器來看看，真的有對齊了沒有跑版。<br><img src="https://i.imgur.com/bfd1xC3.png"><br>如果社時候我們想再多給它一些畫面上的美化，譬如提醒使用者欄位記得填寫，欄位框是紅色框框。那我們就可以在<code>candidate.scss</code>這邊再給<code>field_with_errors</code>這個class其他的 CSS style。</p><p>此時<code>SCSS</code> 它厲害的厲害的地方，就可以展現出來了。SCSS可以寫巢狀CSS。</p><p>這邊設定<code>input</code> type 是<code>text</code>的元件，讓它的外框是紅色，然後外框的寬度是1px。表示在<code>field_with_errors</code>這個class裡面有<code>input</code>且型態是<code>text</code>的話，都套用一樣的CSS style 設定。<br><img src="https://i.imgur.com/nsnnQha.png"><br>打開瀏覽器看看畫面效果如何，確實有出現紅色邊框。<br><img src="https://i.imgur.com/AIPSeUq.png"><br>如果像要旁邊的<code>Name</code>也一起顯示紅色。那我們可以再SCSS裡面多增加一個CSS選取器。要針對<code>label</code>才可以。所以我們可以這樣寫CSS sytle。<br><img src="https://i.imgur.com/k2JkKLI.png"><br>再打開瀏覽器看看，是否呈現我們想要的效果。確定有<br><img src="https://i.imgur.com/pFuzVR3.png"></p><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><p>已經知道有資料驗證的機制，現在要透過CSS的方式在<code>Add Candidate</code>頁面上製作出一些美化效果。</p>
<h2 id="在終端機輸入-rails-c宣告一個變數-c1-Candidate-new呼叫-c1-會看到所有值是nil"><a href="#在終端機輸入-rails-c宣告一個變數-c1-Candidate-new呼叫-c1-會看到所有值是nil" class="headerlink" title="在終端機輸入 rails c宣告一個變數 c1 = Candidate.new呼叫 c1 會看到所有值是nil]"></a>在終端機輸入 <code>rails c</code><br>宣告一個變數 <code>c1 = Candidate.new</code><br>呼叫 c1 會看到所有值是nil]<br></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 009 (建立show action & show 的 view)</title>
<link href="https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-009-%E5%BB%BA%E7%AB%8Bshow-action-show-%E7%9A%84-view/"/>
<id>https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-009-%E5%BB%BA%E7%AB%8Bshow-action-show-%E7%9A%84-view/</id>
<published>2023-01-19T03:36:51.000Z</published>
<updated>2023-02-01T04:57:52.369Z</updated>
<content type="html"><![CDATA[<p>回到<code>CandidatesController</code>裡面，來新增<code>show action</code>。至於要放在哪個地方都可以，只要不要放到<code>private method</code>下面就行。<br>這邊我們就把<code>show action</code>新增在<code>index action</code>的下面。</p><span id="more"></span><p><img src="https://i.imgur.com/tONr3kh.png"></p><p>存檔完，回到瀏覽器點擊任何一位候選人，看看頁面會出現什麼訊息。沒意外的話，應該會看到沒有樣板(no template)的訊息。果真出現了!!!<br><img src="https://i.imgur.com/cDzChwM.png"></p><hr><p>所以這個時候，我們就來做一個 show 的頁面給它。進入到<code>view/candidates/</code>新增檔案<code>show.html.erb</code><br><img src="https://i.imgur.com/nVTuNJw.png"><br>我們測試一下，點擊第一個(id=1)候選人’ccc’，看看會呈現什麼樣的畫面。<br><img src="https://i.imgur.com/KDw0W9B.png"><br>從上面的圖片可以看見，我們在<code>show.html.erb</code>檔案新增的<code><h1>Candidate Information</h1></code>有確實的顯示在瀏覽器頁面，且觀察網址列可以確定現在是在<code>id是一號</code>的候選人的頁面了。</p><hr><p>回到<code>CandidatesController</code>的<code>show action</code>這裡，它應該要做的事情，就是把某一個候選人的資料調出來。但是它要怎麼去調呢？</p><ul><li>根據<code>id</code>去把對應的候選人資料調出來。</li></ul><p>我們切換到終端機，來看看<code>rails server</code>再跑的時候顯示的一些資訊，可以看到有一包<code>Parameters: {"id"=>"1"}</code>。</p><p>表示點擊候選人之後，會有一個對應的<code>id</code>被捕捉到<code>Parameters</code>這個變數裡面。<br>所以我們得知可以透過<code>params</code>裡面<code>id</code>這個值拿回來用，把這個值放到<code>show action</code> 裡面。<br><img src="https://i.imgur.com/2sGIt3k.png"></p><hr><p>假設今天我們要拿2號候選人的資料，這個時候我們就試著請<code>Candidate</code>Model 去抓2號候選人的資料。<br>這邊就可以使用find_by(key: value)的方法去抓我們要的id的資料。<br><img src="https://i.imgur.com/1yXFlXB.png"></p><hr><p>這時候給它一個變數來承接它<code>@candidate = Candidate.find_by(id: params[:id])</code>。至於為什麼要給它一個變數，是因為等下在view的部分會使用到。<br><img src="https://i.imgur.com/v1KtCp3.png"></p><hr><p>此時我們進到<code>view/show.html.erb</code>來把<code><h1></code>標籤更改為<code><h1><%= @candidate.name %></h1></code>，表示我們要印出候選人的名稱。<br><img src="https://i.imgur.com/RNQ6w6P.png"><br>打開瀏覽器看看畫面，真的有印出每個<code>id</code>對應的候選人名稱。<br><img src="https://i.imgur.com/dYQmolH.png"><br><img src="https://i.imgur.com/tUmlRsO.png"><br><img src="https://i.imgur.com/wTs8bnE.png"></p><hr><p>既然如此，我們也可以印出其他的欄位資料，包含政黨、年紀、政見等等。<br>這邊我們用<code><ul><li></li></ul></code>的方式呈現這些欄位資料。<br><img src="https://i.imgur.com/eszVGpL.png"><br>那接著就可以打開瀏覽器來驗證一下，是否會出現一個列表有我們要的欄位資料。<br>在瀏覽器執行重新整理後，果真畫面上出現了我們想看到的列表清單。<br><img src="https://i.imgur.com/XOvOti0.png"><br>上圖顯示的欄位資料也確實是我們想要抓到的資料。</p><hr><h2 id="可是呢？我們今天也要考慮了其他的情況，假設今天使用者在網址列需要輸入id的位置，不小心打錯打成100，這時候會看到錯誤訊息說-nil-找不到-‘name’-這個方法，為什麼會有-nil-呢？這個-nil-表示id-x3D-100這件事情是不存在的，所以得到一個nil回傳值。因此，我們可以回到show-html-erb檔案裡面，增加一個if-else-的判斷式。-gt-因為在Ruby的世界，只有兩個東西會是false1-false-本身-x3D-x3D-gt-false2-nil-x3D-x3D-gt-false"><a href="#可是呢？我們今天也要考慮了其他的情況，假設今天使用者在網址列需要輸入id的位置，不小心打錯打成100，這時候會看到錯誤訊息說-nil-找不到-‘name’-這個方法，為什麼會有-nil-呢？這個-nil-表示id-x3D-100這件事情是不存在的，所以得到一個nil回傳值。因此，我們可以回到show-html-erb檔案裡面，增加一個if-else-的判斷式。-gt-因為在Ruby的世界，只有兩個東西會是false1-false-本身-x3D-x3D-gt-false2-nil-x3D-x3D-gt-false" class="headerlink" title="可是呢？我們今天也要考慮了其他的情況，假設今天使用者在網址列需要輸入id的位置，不小心打錯打成100，這時候會看到錯誤訊息說 nil 找不到 ‘name’ 這個方法，為什麼會有 nil 呢？這個 nil 表示id=100這件事情是不存在的，所以得到一個nil回傳值。因此，我們可以回到show.html.erb檔案裡面，增加一個if...else...的判斷式。>因為在Ruby的世界，只有兩個東西會是false1. false 本身 ==> false2. nil ==> false"></a>可是呢？我們今天也要考慮了其他的情況，假設今天使用者在網址列需要輸入<code>id</code>的位置，不小心打錯打成100，這時候會看到錯誤訊息<br><img src="https://i.imgur.com/SEJGrNq.png"><br>說 nil 找不到 ‘name’ 這個方法，為什麼會有 nil 呢？這個 nil 表示id=100這件事情是不存在的，所以得到一個nil回傳值。因此，我們可以回到<code>show.html.erb</code>檔案裡面，增加一個<code>if...else...</code>的判斷式。<br>>因為在Ruby的世界，只有兩個東西會是false<br><strong>1. false 本身 ==> false</strong><br><strong>2. nil ==> false</strong></h2><p>所以我們可以使用這樣的寫法<br><img src="https://i.imgur.com/S8tZ0U3.png"><br>如果 <code>@candidate</code> 是有東西，就執行下面第2-8行code<br>其他的話就在畫面上印出<code>No Record found!!!</code><br>重新整理瀏覽器頁面，一樣是讓網址列的 id 輸入 100，這時候顯示的就不是錯誤訊息的畫面，而是<code>No Record found!!!</code>。<br><img src="https://i.imgur.com/8LNBaSJ.png"></p><hr><h3 id="目前這樣我們的-show-action-amp-show-html-erb算是完成了"><a href="#目前這樣我們的-show-action-amp-show-html-erb算是完成了" class="headerlink" title="目前這樣我們的 show action & show.html.erb算是完成了"></a>目前這樣我們的 show action & show.html.erb算是完成了</h3><hr><blockquote><h3 id="這時候發現前面新增候選人的頁面忘記加上CSS強化視覺效果，所以下一堂課，來做畫面的CSS吧"><a href="#這時候發現前面新增候選人的頁面忘記加上CSS強化視覺效果，所以下一堂課，來做畫面的CSS吧" class="headerlink" title="這時候發現前面新增候選人的頁面忘記加上CSS強化視覺效果，所以下一堂課，來做畫面的CSS吧"></a>這時候發現前面新增候選人的頁面忘記加上CSS強化視覺效果，所以下一堂課，來做畫面的CSS吧</h3></blockquote><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><p>回到<code>CandidatesController</code>裡面，來新增<code>show action</code>。至於要放在哪個地方都可以，只要不要放到<code>private method</code>下面就行。<br>這邊我們就把<code>show action</code>新增在<code>index action</code>的下面。</p></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 008 (候選人列表頁面，產生候選人列表)</title>
<link href="https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-008-%E5%80%99%E9%81%B8%E4%BA%BA%E5%88%97%E8%A1%A8%E9%A0%81%E9%9D%A2%EF%BC%8C%E7%94%A2%E7%94%9F%E5%80%99%E9%81%B8%E4%BA%BA%E5%88%97%E8%A1%A8/"/>
<id>https://danny3766.github.io/2023/01/19/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-008-%E5%80%99%E9%81%B8%E4%BA%BA%E5%88%97%E8%A1%A8%E9%A0%81%E9%9D%A2%EF%BC%8C%E7%94%A2%E7%94%9F%E5%80%99%E9%81%B8%E4%BA%BA%E5%88%97%E8%A1%A8/</id>
<published>2023-01-19T03:28:15.000Z</published>
<updated>2023-02-01T04:57:54.064Z</updated>
<content type="html"><![CDATA[<h2 id="要將資料庫的的資料呈現到畫面，首先我們不需要自己寫SQL語法去撈資料"><a href="#要將資料庫的的資料呈現到畫面，首先我們不需要自己寫SQL語法去撈資料" class="headerlink" title="要將資料庫的的資料呈現到畫面，首先我們不需要自己寫SQL語法去撈資料"></a>要將資料庫的的資料呈現到畫面，首先我們不需要自己寫SQL語法去撈資料</h2><h3 id="我們只要透過Model就可以幫我們去把資料拿出來。"><a href="#我們只要透過Model就可以幫我們去把資料拿出來。" class="headerlink" title="我們只要透過Model就可以幫我們去把資料拿出來。"></a>我們只要透過Model就可以幫我們去把資料拿出來。</h3><p>進到<code>CandidatesController</code>，接著要來寫<code>index action</code>。這樣才能知道，我們要把什麼東西放到<code>view//index.html.erb</code>裡面讓使用者看到。</p><span id="more"></span><p>在<code>index action</code> 裡面我們增加<code>@candidates = Candidate.all</code>。這裡我們把<code>candidate.rb</code>這個 Model 裡面的所有候選人都拿出來，放到實體變數@candidates。<br><img src="https://i.imgur.com/ygOWzp1.png"><br>為何將變數取名為複數型態，是因為因為如果知道我們現在拿到的資料看起來是一個集合、一個群體，會用複數的變數名稱來取名。</p><hr><h2 id="接著進入到view-index-html-erb，我們要來讓從-Model-拿出來的候選人資料，可以在頁面上印出來。★小撇步：這邊可以先在VScode上設定，把檔案的格式改為HTML在頁面上，先新增一個-lt-五個欄位的table-gt"><a href="#接著進入到view-index-html-erb，我們要來讓從-Model-拿出來的候選人資料，可以在頁面上印出來。★小撇步：這邊可以先在VScode上設定，把檔案的格式改為HTML在頁面上，先新增一個-lt-五個欄位的table-gt" class="headerlink" title="接著進入到view/index.html.erb，我們要來讓從 Model 拿出來的候選人資料，可以在頁面上印出來。★小撇步：這邊可以先在VScode上設定，把檔案的格式改為HTML在頁面上，先新增一個<五個欄位的table>"></a>接著進入到<code>view/index.html.erb</code>，我們要來讓從 Model 拿出來的候選人資料，可以在頁面上印出來。<br>★小撇步：這邊可以先在VScode上設定，把檔案的格式改為HTML<br>在頁面上，先新增一個<五個欄位的table><br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><table></span><br><span class="line"> <tr></span><br><span class="line"> <td>Name</td> #名稱</span><br><span class="line"> <td>Party</td> #政黨</span><br><span class="line"> <td>Age</td> #年齡</span><br><span class="line"> <td>Politics</td> #政見</span><br><span class="line"> <td>Action</td> #動作：可能是 新增 or 刪除</span><br><span class="line"> </tr></span><br><span class="line"></table></span><br></pre></td></tr></table></figure></h2><h2 id="那我們要如何把資料印出來，我們可以透過「迴圈」的方式。一筆一筆的把資料印出來。接著把剛剛建立的-table-複製一份放到迴圈裡面，同時將原本的欄位內容替換"><a href="#那我們要如何把資料印出來，我們可以透過「迴圈」的方式。一筆一筆的把資料印出來。接著把剛剛建立的-table-複製一份放到迴圈裡面，同時將原本的欄位內容替換" class="headerlink" title="那我們要如何把資料印出來，我們可以透過「迴圈」的方式。一筆一筆的把資料印出來。接著把剛剛建立的 table 複製一份放到迴圈裡面，同時將原本的欄位內容替換"></a>那我們要如何把資料印出來，我們可以透過「迴圈」的方式。一筆一筆的把資料印出來。<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><% @candidates.each do |candidate| %></span><br><span class="line"><% end %></span><br></pre></td></tr></table></figure><br>接著把剛剛建立的 table 複製一份放到迴圈裡面，同時將原本的欄位內容替換<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><% @candidates.each do |candidate| %></span><br><span class="line"><tr></span><br><span class="line"> <td><%= candidate.name %></td></span><br><span class="line"> <td><%= candidate.party %></td> </span><br><span class="line"> <td><%= candidate.age %></td></span><br><span class="line"> <td><%= candidate.politics %></td></span><br><span class="line"> <td>Action</td></span><br><span class="line"></tr></span><br><span class="line"><% end %></span><br></pre></td></tr></table></figure></h2><p>最後寫成<br><img src="https://i.imgur.com/8S5j1wh.png"><br>接著打開瀏覽器看看畫面，有成功顯示前面我們增加的兩筆候選人資料<br><img src="https://i.imgur.com/E9Pqjmh.png"><br>這時候我們來新增一筆候選人叫<code>kk</code>的資料。按下送出按鈕，看看結果會發生什麼？<br><img src="https://i.imgur.com/mD3xlxS.png"></p><hr><p>哇!有成功新增資料，畫面也有出現提示<br><img src="https://i.imgur.com/Rm6jgfV.png"><br>這邊就要再思考另外一件事情，候選人頁面顯示的欄位有包含政見(politics)。如果候選人的政見，字數非常多，那畫面會很擁擠不好看。<br>一般使用者想要是click候選人名稱後，會跳到新的頁面，這個頁面只會顯示此候選人的個人資料，包含政見。我們就開始來修該一下吧。</p><hr><ol><li>拿掉<code>view/index.html.erb</code>的<code>politics</code>欄位。<br><img src="https://i.imgur.com/Z7WrksF.png"></li><li>幫<code>Name</code>欄位加上超連結功能，要超連結的網址先暫時以＃代替，因為要知道要去的路徑，需要請門口阿姨(Routes)告訴我們。<br><img src="https://i.imgur.com/Z6k5Aby.png"></li><li>打開終端機輸入<code>rails routes</code>，我們要找的路徑需要跟<code>id</code>有相關。可以看到路徑<code>candidates/:id(.:format)</code>，有一個對應的<code>controller#action</code>。(<code>candidates#show</code>)<br><img src="https://i.imgur.com/SfUZx2u.png"><br>所以這時候回到<code>view/index.html.erb</code>我們來補上超連結的路徑。<br><img src="https://i.imgur.com/Ua1H0c9.png"><br>打開瀏覽器，直接來測試看看，點擊超連結會發生什麼事？<br>竟然出現錯誤訊息。<br><img src="https://i.imgur.com/HGsjQWP.png"></li></ol><hr><p>在把錯誤訊息處理前，我們先來看看剛剛的超連結寫法，其實不是很好看，意思也不明確，這時候又可以請出一個小幫手<code><%= link_to '要顯示的字樣', 要去的位址 %></code><br>先來修改一下<code><a href="/candidates/new">Add Candidate</a></code><br>換成<code><%= link_to 'Add Candidate', '/candidates/new' %></code><br><img src="https://i.imgur.com/bz5QYYM.png"><br>我們打開瀏覽器，右鍵 > 檢查頁面原始碼，這時候你會發現兩個長一樣。<br><img src="https://i.imgur.com/vMs0zVy.png"></p><hr><p>這時候我們可以使用終端機打開<code>rails routes</code>看一下<code>Prefix Verb</code>這邊的<code>new_candidate</code>我們手動幫它後面加上<code>_path</code> 它就會幫我們做出<code>/candidates/new</code>出來。<br>所以回到<code>view/index.html.erb</code> ，我們把剛剛的<code><%= link_to 'Add Candidate', '/candidates/new' %></code>後面的<code>/candidates/new</code> 換成<code>new_candidate_path</code><br><img src="https://i.imgur.com/uGbXBV8.png"><br>打開瀏覽器檢視網頁原始碼，發現其實兩個都是超連結到同一個網址。<br><img src="https://i.imgur.com/ytgOghT.png"><br>其實第二個超連結等於是Routes幫我們產生的。這樣的好處就是，如果以後有需要維護專案或是更改超連結的網頁，我們只要到進到<code>config/routes.rb</code>這個檔案去修改路徑，整個網站就修改好了。</p><hr><h3 id="link-to-方法的好處-搭配prefix路徑寫法"><a href="#link-to-方法的好處-搭配prefix路徑寫法" class="headerlink" title="link_to 方法的好處(搭配prefix路徑寫法)"></a>link_to 方法的好處(搭配prefix路徑寫法)</h3><ul><li>好處就是，如果在連結的地方少打字或者打錯字，瀏覽器會噴訊息提醒你。</li><li>因為 <code>link_to</code> 是一個方法，所以只要有打錯字，就會噴訊息出來。</li></ul><hr><ul><li>另外如果發現<code>rails routtes</code>有些<code>Prefix Verb</code>是空的就同上面的<code>Prefix Verb</code>。</li></ul><hr><p>接著修改候選人名稱的超連結，改用 link_to 的寫法。<br><img src="https://i.imgur.com/5llYzLM.png"><br>但是這邊我們是要連到某個id的候選人頁面，所以candidate_path要給它一個id，他才能正確連結到對的候選人。<br><img src="https://i.imgur.com/HF0RlJl.png"><br>按下送出按鈕，網址後面就會有id，但是畫面上噴出訊息<code>the action 'show' could not be found</code><br><img src="https://i.imgur.com/E0yrPQf.png"></p><hr><blockquote><h3 id="接下來，下一堂課程，我們要建立一個-“show-action”-給它，當然同時也要給它一個-“show”-的-view。"><a href="#接下來，下一堂課程，我們要建立一個-“show-action”-給它，當然同時也要給它一個-“show”-的-view。" class="headerlink" title="接下來，下一堂課程，我們要建立一個 “show action” 給它，當然同時也要給它一個 “show” 的 view。"></a>接下來，下一堂課程，我們要建立一個 “show action” 給它，當然同時也要給它一個 “show” 的 view。</h3></blockquote><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h2 id="要將資料庫的的資料呈現到畫面，首先我們不需要自己寫SQL語法去撈資料"><a href="#要將資料庫的的資料呈現到畫面，首先我們不需要自己寫SQL語法去撈資料" class="headerlink" title="要將資料庫的的資料呈現到畫面，首先我們不需要自己寫SQL語法去撈資料"></a>要將資料庫的的資料呈現到畫面，首先我們不需要自己寫SQL語法去撈資料</h2><h3 id="我們只要透過Model就可以幫我們去把資料拿出來。"><a href="#我們只要透過Model就可以幫我們去把資料拿出來。" class="headerlink" title="我們只要透過Model就可以幫我們去把資料拿出來。"></a>我們只要透過Model就可以幫我們去把資料拿出來。</h3><p>進到<code>CandidatesController</code>，接著要來寫<code>index action</code>。這樣才能知道，我們要把什麼東西放到<code>view//index.html.erb</code>裡面讓使用者看到。</p></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 007 (新增候選人，存檔失敗的情況)</title>
<link href="https://danny3766.github.io/2023/01/14/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-007-%E6%96%B0%E5%A2%9E%E5%80%99%E9%81%B8%E4%BA%BA%EF%BC%8C%E5%AD%98%E6%AA%94%E5%A4%B1%E6%95%97%E7%9A%84%E6%83%85%E6%B3%81/"/>
<id>https://danny3766.github.io/2023/01/14/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-007-%E6%96%B0%E5%A2%9E%E5%80%99%E9%81%B8%E4%BA%BA%EF%BC%8C%E5%AD%98%E6%AA%94%E5%A4%B1%E6%95%97%E7%9A%84%E6%83%85%E6%B3%81/</id>
<published>2023-01-13T18:32:30.000Z</published>
<updated>2023-02-01T04:57:56.066Z</updated>
<content type="html"><![CDATA[<h2 id="什麼是新增候選人失敗，驗證表單該填的欄位是否填寫，資料格式是否正確，沒有通過驗證，即是存檔失敗。"><a href="#什麼是新增候選人失敗，驗證表單該填的欄位是否填寫，資料格式是否正確，沒有通過驗證，即是存檔失敗。" class="headerlink" title="什麼是新增候選人失敗，驗證表單該填的欄位是否填寫，資料格式是否正確，沒有通過驗證，即是存檔失敗。"></a>什麼是新增候選人失敗，驗證表單該填的欄位是否填寫，資料格式是否正確，沒有通過驗證，即是存檔失敗。</h2><ul><li>進入<code>mondel/candidate.rb</code> 在這個<code>model</code>裡面，我們來增加驗證的內容。<span id="more"></span>需要驗證<code>Name</code>欄位，是否有存在<code>validates :name, presence: true</code><br><img src="https://i.imgur.com/IztV3wg.png"></li></ul><hr><p>接著我們回到<code>CandidatesController</code>的<code>create action</code>，來寫驗證失敗的話，我們要怎麼做。<br>在<code>create action</code> <code>else</code> 輸入<code>redirect_to '/candidate/new'</code><br>表示如果驗證失敗，就將頁面導入到”新增候選人”頁面<br><img src="https://i.imgur.com/nhsUaTQ.png"></p><hr><p>打開瀏覽器來試試看，我們先在新增的表單頁面，故意空著<code>Name</code>欄位。<br><img src="https://i.imgur.com/XHfLdrB.png"></p><hr><p>按下送出按鈕，看看網址列，確實有導回新增候選人頁面，但我們也可以發現剛剛有填寫的欄位資料也 <strong>一併被清空了</strong> 。<br><img src="https://i.imgur.com/LDTjJl5.png"></p><hr><h3 id="要如何做到保留原本填寫的資料，然後又可以提醒使用者有欄位忘記填寫。"><a href="#要如何做到保留原本填寫的資料，然後又可以提醒使用者有欄位忘記填寫。" class="headerlink" title="要如何做到保留原本填寫的資料，然後又可以提醒使用者有欄位忘記填寫。"></a>要如何做到保留原本填寫的資料，然後又可以提醒使用者有欄位忘記填寫。</h3><ul><li>目前可以確定的事情，使用 <code>redirect_to '/candidate/new'</code> 不是好的做法。因為會直接把頁面整個清空，讓使用者重新填寫。</li></ul><p>我們來修改一下，使用<code>render :new</code>方法來重新導入頁面。如果存檔失敗的話，我們就去借 new 這個 template，把畫面重新「畫」出來。<br><img src="https://i.imgur.com/juCRrMz.png"></p><blockquote><p>這裡需要注意的地方，<code>render :new</code>其中的<code>:new</code> 並不是指同樣<code>CandidatesController</code>的<code>new action</code>。<br>而是我們去借用<code>view/new.html.erb</code>這個檔案，重新將畫面「渲染」出來，本質上我們還是在<code>create action</code>當中執行。</p></blockquote><hr><p>我們再試一次，這次一樣空著<code>Name</code>欄位不填。送出表單試試看。<br><img src="https://i.imgur.com/pSbfzvk.png"></p><hr><p>咦？這次的畫面有跟上次不一樣了，剛剛填寫過的資料還是有保留起來，<code>Name</code>欄位也是維持空著的狀態。可以達到這樣的效果，就是<code>form_for()</code>它神奇的地方。<br><img src="https://i.imgur.com/bWbLF1u.png"></p><hr><p>因為在<code>new.htaml.erb</code>檔案中的<code>form_for(@candidate)</code>，它會去接<code>@candidate</code>這個變數。<br><img src="https://i.imgur.com/fl2gxPi.png"><br>另外我們在<code>CandidatesController</code>裡面的<code>new action</code>、<code>create action</code> 也都有用到<code>@candidate</code>變數。<br><img src="https://i.imgur.com/fV7M9O7.png"></p><hr><p>這個就是我們取變數名稱時，「故意」取同名的用意，製造「巧合」。<br>透過這個「巧合」，當它在<code>render</code>這個<code>new.html.erb</code>這個過程中，會去抓變數<code>@candidate</code>。當抓到<code>@candidate</code>，它不是空的，它裡面是「有料的」**(candidate_params)** 。因為我們仍然在執行<code>create acion</code>。</p><h3 id="form-helper-神奇黑魔法"><a href="#form-helper-神奇黑魔法" class="headerlink" title="form helper 神奇黑魔法"></a>form helper 神奇黑魔法</h3><p>接著就是<code>new.html.erb</code>裡面<code>form_for()</code>它厲害的地方。它會根據我們給它的那包東西<code>參數(@candidate)</code>裡面相對應的值，放到相對應的欄位。<br>因此當我們按下送出按鈕後，會看到畫面上欄位裡還保留著剛剛填入的資料。</p><h3 id="因為HTTP沒有所謂的「狀態」，所以如果今天使用redirect-to，把它轉址轉過去，就會整個頁面重新整理，欄位當然就被清空。"><a href="#因為HTTP沒有所謂的「狀態」，所以如果今天使用redirect-to，把它轉址轉過去，就會整個頁面重新整理，欄位當然就被清空。" class="headerlink" title="因為HTTP沒有所謂的「狀態」，所以如果今天使用redirect_to，把它轉址轉過去，就會整個頁面重新整理，欄位當然就被清空。"></a>因為HTTP沒有所謂的「狀態」，所以如果今天使用redirect_to，把它轉址轉過去，就會整個頁面重新整理，欄位當然就被清空。</h3><h3 id="在驗證不過，存檔失敗時，去借用「現有的」表單重新畫一次"><a href="#在驗證不過，存檔失敗時，去借用「現有的」表單重新畫一次" class="headerlink" title="在驗證不過，存檔失敗時，去借用「現有的」表單重新畫一次"></a>在驗證不過，存檔失敗時，去借用「現有的」表單重新畫一次</h3><ul><li>要記得，不是重新執行<code>CandidatesController</code>的<code>new action</code>!!!</li><li>是借用<code>view/new.html.erb</code>這個檔案，重新把它<code>render</code>出來!!!</li></ul><p>失敗時頁面是有了，但是似乎少了醒目的提示。</p><hr><h2 id="下一堂課程，我們就使用CSS來製作一些醒目的提示"><a href="#下一堂課程，我們就使用CSS來製作一些醒目的提示" class="headerlink" title="下一堂課程，我們就使用CSS來製作一些醒目的提示"></a>下一堂課程，我們就使用CSS來製作一些醒目的提示</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">class CandidatesController < ApplicationController</span><br><span class="line"> </span><br><span class="line"> def index</span><br><span class="line"> end</span><br><span class="line"></span><br><span class="line"> def new</span><br><span class="line"> @candidate = Candidate.new</span><br><span class="line"> end</span><br><span class="line"></span><br><span class="line"> def create</span><br><span class="line"></span><br><span class="line"> @candidate = Candidate.new(candidate_params)</span><br><span class="line"> if @candidate.save</span><br><span class="line"> flash[:notice] = "Candidate created!!!"</span><br><span class="line"> redirect_to '/candidates'</span><br><span class="line"> else</span><br><span class="line"> #NG</span><br><span class="line"> render :new</span><br><span class="line"> end</span><br><span class="line"> end</span><br><span class="line"> </span><br><span class="line"> private</span><br><span class="line"> def candidate_params</span><br><span class="line"> params.require(:candidate).permit(:name, :party, :age, :politics)</span><br><span class="line"> end</span><br><span class="line"></span><br><span class="line"> end</span><br></pre></td></tr></table></figure><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h2 id="什麼是新增候選人失敗，驗證表單該填的欄位是否填寫，資料格式是否正確，沒有通過驗證，即是存檔失敗。"><a href="#什麼是新增候選人失敗，驗證表單該填的欄位是否填寫，資料格式是否正確，沒有通過驗證，即是存檔失敗。" class="headerlink" title="什麼是新增候選人失敗，驗證表單該填的欄位是否填寫，資料格式是否正確，沒有通過驗證，即是存檔失敗。"></a>什麼是新增候選人失敗，驗證表單該填的欄位是否填寫，資料格式是否正確，沒有通過驗證，即是存檔失敗。</h2><ul>
<li>進入<code>mondel/candidate.rb</code> 在這個<code>model</code>裡面，我們來增加驗證的內容。</summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 006 (資料清洗 data cleaning)</title>
<link href="https://danny3766.github.io/2023/01/14/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-006-%E8%B3%87%E6%96%99%E6%B8%85%E6%B4%97-data-cleaning/"/>
<id>https://danny3766.github.io/2023/01/14/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-006-%E8%B3%87%E6%96%99%E6%B8%85%E6%B4%97-data-cleaning/</id>
<published>2023-01-13T18:22:44.000Z</published>
<updated>2023-02-01T04:57:58.118Z</updated>
<content type="html"><![CDATA[<h1 id="練習-006-資料清洗-data-cleaning"><a href="#練習-006-資料清洗-data-cleaning" class="headerlink" title="練習 - 006 (資料清洗 data cleaning)"></a>練習 - 006 (資料清洗 data cleaning)</h1><p>首先在<code>CandidatesController</code>的<code>create</code>action，我們宣告一個變數<code>clean_params</code>承接清洗過的資料。</p><span id="more"></span><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">def</span> <span class="title function_">create</span></span><br><span class="line"> clean_params = params.<span class="keyword">require</span>(<span class="symbol">:candidate</span>).permit(<span class="symbol">:name</span>, <span class="symbol">:party</span>, <span class="symbol">:age</span>, <span class="symbol">:politics</span>)</span><br><span class="line"> <span class="comment"># require方法，表示只要params裡面的candidate資料</span></span><br><span class="line"> <span class="comment"># permit方法，只允許cadidate中的部分欄位可以過來</span></span><br><span class="line"> <span class="variable">@candidate</span> = <span class="title class_">Candidate</span>.new(clean_params)</span><br><span class="line"> <span class="comment"># 把清洗過的資料`clean_params`放到`Candidate.new(clean_params)`，作為Candidate.new()的參數</span></span><br><span class="line"> <span class="keyword">if</span> <span class="variable">@candidate</span>.save</span><br><span class="line"> redirect_to <span class="string">'/candidates'</span></span><br><span class="line"> <span class="keyword">else</span></span><br><span class="line"> <span class="comment"># NG</span></span><br><span class="line"> <span class="keyword">end</span></span><br><span class="line"><span class="keyword">end</span></span><br></pre></td></tr></table></figure><p><img src="https://i.imgur.com/UinnykQ.png"></p><hr><p>打開瀏覽器來看看<br>首先各個欄位填入資料<br><img src="https://i.imgur.com/wWGPUoo.png"><br>按下送出，存檔。直接跳回後選人的列表頁。<br><img src="https://i.imgur.com/Z5i5bI0.png"></p><hr><p>這樣表示是有資料 <strong>寫入成功</strong> 了，才會跳回候選人列表頁面。<br>要如何確認呢？<br>我們可以透過終端機的中控台模式來查看<br>在終端機輸入<code>rails c --sandbox</code> 表示打開 rails console 沙盒模式<br><img src="https://i.imgur.com/pQK5pZu.png"><br><img src="https://i.imgur.com/M1fkd52.png"></p><hr><p>接著入輸入<code>Candidate.all</code>。這個指令可以show出，現在Candidate表單裡面所有的資料。<br>可以發現有一包陣列，包含了<code>id, name, party, politics, votes</code>等欄位。<br>就是剛剛我們在瀏覽器上輸入的那筆資料。<br><img src="https://i.imgur.com/SyGNZpn.png"></p><hr><p>但是，到這邊可以發現好像缺少點什麼，資料是成功寫入資料庫，但直接跳回候選人列表的頁面，這樣的使用者體驗不太優。似乎少了點提示，讓使用者知道到底有沒有投票成功。所以我們就來增加這個功能吧!!!</p><p>回到<code>CandidateController</code>的<code>create</code> action，我們來寫個提示(<code>flash[]</code>)。<br><img src="https://i.imgur.com/7x9h1K4.png"></p><hr><p>接著我們在<code>index.html.erb</code> 把那<code>flash[]</code> 給印在頁面上。<br><code>flash[]</code>的特點就是，只要頁面有印過一次，頁面重新整理後，也不會再出現。<br><img src="https://i.imgur.com/C9Ni0DE.png"></p><hr><p>我們就在新增一位候選人看看，是否真的有出現<code>flash[]</code><br><img src="https://i.imgur.com/yAMXdfO.png"></p><hr><p>按下送出按鈕，真的有出現提示!!!<br><img src="https://i.imgur.com/Kp5EcFE.png"></p><hr><p>現在確定功能有正常顯示，接著我們來做程式碼的整理，讓程式碼可以更乾淨，可讀性更高。<br>首先，在<code>CandidatesController</code>中<code>create action</code>清洗資料的那行，等號右邊有點太長了。</p><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">clarn_params = params.<span class="keyword">require</span>(<span class="symbol">:candidate</span>).permit(<span class="symbol">:name</span>, <span class="symbol">:party</span>, <span class="symbol">:age</span>, <span class="symbol">:politics</span>)</span><br></pre></td></tr></table></figure><p>之後還會有其他的 aciton 會需要使用，所以我們可以用一個方法把它包起來。<br>這樣一來原本的</p><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">clarn_params = params.<span class="keyword">require</span>(<span class="symbol">:candidate</span>).permit(<span class="symbol">:name</span>, <span class="symbol">:party</span>, <span class="symbol">:age</span>, <span class="symbol">:politics</span>)</span><br></pre></td></tr></table></figure><p>就可以整行拿掉。<br><img src="https://i.imgur.com/MG7vewh.png"></p><hr><p>因為<code>candidate_params</code>只會在這個<code>class</code>底下內被呼叫，不會被其他的<code>class</code>取用。所以我們可以將它變成一個<code>private method</code>。因此我們給它一個註記<br><img src="https://i.imgur.com/kaH00kI.png"></p><hr><blockquote><h3 id="下一堂課程，將學習，如果存檔失敗，要如何執行。"><a href="#下一堂課程，將學習，如果存檔失敗，要如何執行。" class="headerlink" title="下一堂課程，將學習，如果存檔失敗，要如何執行。"></a>下一堂課程，將學習，如果存檔失敗，要如何執行。</h3></blockquote><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h1 id="練習-006-資料清洗-data-cleaning"><a href="#練習-006-資料清洗-data-cleaning" class="headerlink" title="練習 - 006 (資料清洗 data cleaning)"></a>練習 - 006 (資料清洗 data cleaning)</h1><p>首先在<code>CandidatesController</code>的<code>create</code>action，我們宣告一個變數<code>clean_params</code>承接清洗過的資料。</p></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 005 (Create Action 的建立 & Forbidden Attribute Error)</title>
<link href="https://danny3766.github.io/2023/01/14/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-005-Create-Action-%E7%9A%84%E5%BB%BA%E7%AB%8B-Forbidden-Attribute-Error/"/>
<id>https://danny3766.github.io/2023/01/14/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-005-Create-Action-%E7%9A%84%E5%BB%BA%E7%AB%8B-Forbidden-Attribute-Error/</id>
<published>2023-01-13T17:53:19.000Z</published>
<updated>2023-02-01T04:57:59.859Z</updated>
<content type="html"><![CDATA[<h2 id="在new-html-erb檔案使用了form-for的View-action-helper寫法"><a href="#在new-html-erb檔案使用了form-for的View-action-helper寫法" class="headerlink" title="在new.html.erb檔案使用了form_for的View action helper寫法"></a>在new.html.erb檔案使用了form_for的View action helper寫法</h2><span id="more"></span><ul><li>但是目前我們的寫法<code>form_for(Candidate.new)</code>，表示我們在view這邊有new一個新的物件出來。這邊可以做一些修改，讓view更專心做它平常做的事情。<br><img src="https://i.imgur.com/RxxiPLT.png"></li><li>在MVC的架構中，view算是相對 <strong>被動</strong> 的角色，負責把東西印出來就好。</li><li>應該是要由controller的部分來做這件事</li></ul><hr><h2 id="接著進到candidates-controller"><a href="#接著進到candidates-controller" class="headerlink" title="接著進到candidates_controller"></a>接著進到candidates_controller</h2><p>把原本在<code>new.html.erb</code>檔案中的<code>Candidate.new</code>搬到<code>candidates_controller</code>的<code>new action</code>中。<br><img src="https://i.imgur.com/p9z96sp.png"><br>回到<code>new.html.erb</code>，將form_for(參數)改成<code>@candidate</code><br><img src="https://i.imgur.com/8n6c1vv.png"><br>此時打開瀏覽器，每個欄位輸入資料，按下送出按鈕，會發現好像畫面卡住不會動。<br><img src="https://i.imgur.com/5OZiB34.png"></p><hr><p>但其實如果看終端機log紀錄，應該會看到log顯示我們對candidates這個路徑使用POST方法，傳送一包parameters給它。並寫到沒有找到對應<code>CandidateController#create</code>的樣板。<br><img src="https://i.imgur.com/ga4tnuy.png"><br>此時，我們回到<code>CandidatesController</code>裡面的<code>create</code>action，寫入一個debugger。<br><img src="https://i.imgur.com/c2gJFEp.png"></p><hr><p>雖然這時候瀏覽器畫面還是呈現轉圈圈，但是終端機是有畫面的，會有一個byebug的輸入區塊<br><img src="https://i.imgur.com/mQExxjl.png"><br>此時可以輸入<code>params</code>看看會得到什麼結果。得到一大串的東西，雖然裡面有<code>token</code>，但是<code>token</code>就交給 Rails 處理。</p><hr><p>我們真正感興趣的是<code>"candidate"</code><br><img src="https://i.imgur.com/olUzfq1.png"></p><hr><p>那我們就接著輸入<code>params[:candidate]</code>看看會出現什麼吧。<br>咦？好像有類似hash的東西唷。先暫時把它當作一個hash看待<br><img src="https://i.imgur.com/d5er7Eo.png"></p><hr><p>我們想要取得當中的名字，那我們就繼續輸入<code>params[:candidate][:name]</code>試試看。確實有拿到我們要的名字<code>"bbb"</code><br><img src="https://i.imgur.com/ib2xUbP.png"></p><hr><p>此時我們可以把剛剛在<code>CandidatesController</code> <code>create</code>action裡面的<code>debugger</code>改成<code>@candidate = Candidate.new(params[:candidate])</code><br><img src="https://i.imgur.com/HA1RiKo.png"></p><hr><p>接著我們可以要這個新產生出來的物件去”存檔”。就會有存檔成功及存檔失敗的狀態，所以這邊我們使用<code>if...else</code>的方式去判斷不同情況，分別要做什麼動作。<br><img src="https://i.imgur.com/BUP82nz.png"></p><hr><h3 id="存檔成功"><a href="#存檔成功" class="headerlink" title="存檔成功"></a>存檔成功</h3><p><img src="https://i.imgur.com/ElZfKQC.png"><br>先來看看瀏覽器畫面。竟然出現之前沒有看過的錯誤訊息<br><img src="https://i.imgur.com/w0KTPM1.png"></p><hr><h2 id="Forbidden-Attribute-Error"><a href="#Forbidden-Attribute-Error" class="headerlink" title="Forbidden Attribute Error"></a>Forbidden Attribute Error</h2><ul><li>看到「Forbidden Attribute Error」訊息，表示我們透過 model 要將整包 Hash 資料放到資料庫的時候，需要先經過「清洗」。</li><li>Model 怕資料裡面會被加料一些奇奇怪怪的東西進去。</li><li>如果資料沒有經過「清洗」，Model 預設是會資料檔下來。</li></ul><hr><p>(舉個例子，有點像是你不洗澡，父母不准你上床睡覺。)<br>(嗯，雖然這個例子滿爛的，但意思很像。)<br>此時會充滿疑惑？不是已經檢視頁面原始碼有使用<code>token</code>來保護了嗎？為什麼還要把資料「清洗」過才能存到資料庫裡面呢？</p><hr><p>現在我們打開瀏覽器，進到新增候選人的頁面，<code>右鍵 > 檢查</code>。<br>將politics的<code><div></code>標籤複製然後也填入資料，並且更改裡面的值為<code>Vote</code><br><img src="https://i.imgur.com/m0V9Qmb.png"><br>發現左半邊我們的網頁真的出現剛剛新增的欄位了，我們一樣按下送出按鈕。<br>接著打開終端機，竟然會看到這樣的畫面<br><img src="https://i.imgur.com/XfYdypN.png"><br>我們透過 POST 的方式，要把一包parameters傳送到資料庫，赫然看到了剛剛我們透過瀏覽器<code>右鍵 > 檢查</code>自己手動新增的 <strong>票數欄位</strong> 竟然也傳進來了。</p><blockquote><p><strong>表示我們新增這個候選人時，他就天生自帶1000張票數!!!</strong></p></blockquote><p>可以達成灌票數的原因，在於瀏覽器那邊這包資料有合法的 <code>token</code>。就這樣直接寫入資料庫的話，似乎不太對吧。</p><hr><p>這就是為什麼資料經由 model 寫入資料庫前，需要確認是否有經過「清洗」。</p><ul><li>確保寫入資料庫的資料沒有「被加料」。</li><li>同時維持寫入資料庫的資料不會過於龐大，進而消耗資料庫的資源。</li></ul><hr><blockquote><h3 id="下一堂課程，將學習到如何做資料清洗。"><a href="#下一堂課程，將學習到如何做資料清洗。" class="headerlink" title="下一堂課程，將學習到如何做資料清洗。"></a>下一堂課程，將學習到如何做資料清洗。</h3></blockquote><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h2 id="在new-html-erb檔案使用了form-for的View-action-helper寫法"><a href="#在new-html-erb檔案使用了form-for的View-action-helper寫法" class="headerlink" title="在new.html.erb檔案使用了form_for的View action helper寫法"></a>在new.html.erb檔案使用了form_for的View action helper寫法</h2></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
<entry>
<title>Ruby on Rails 網站開發 練習 - 004 (完成新增候選人頁面)</title>
<link href="https://danny3766.github.io/2023/01/14/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-004-%E5%AE%8C%E6%88%90%E6%96%B0%E5%A2%9E%E5%80%99%E9%81%B8%E4%BA%BA%E9%A0%81%E9%9D%A2/"/>
<id>https://danny3766.github.io/2023/01/14/Ruby%20on%20Rails%20%E7%B6%B2%E7%AB%99%E9%96%8B%E7%99%BC%20%E7%B7%B4%E7%BF%92-004-%E5%AE%8C%E6%88%90%E6%96%B0%E5%A2%9E%E5%80%99%E9%81%B8%E4%BA%BA%E9%A0%81%E9%9D%A2/</id>
<published>2023-01-13T17:49:51.000Z</published>
<updated>2023-02-01T04:58:02.250Z</updated>
<content type="html"><![CDATA[<h2 id="出現錯誤訊息，遇到無效的Token"><a href="#出現錯誤訊息，遇到無效的Token" class="headerlink" title="出現錯誤訊息，遇到無效的Token"></a>出現錯誤訊息，遇到無效的Token</h2><span id="more"></span><p><img src="https://i.imgur.com/NmyjGVp.png"></p><ul><li>會出現這個錯誤訊息，是因為Rails要將資料送進資料庫前會做一些驗證的動作。因為只要檢視原始碼，你的路徑都是公開的。</li><li>有心人士就可以在要傳送的資料裡面加料，如果你沒有這些驗證的步驟，那不就很危險了嗎？</li></ul><hr><p>回到<code>new.html.erb</code>，來增加驗證功能。這行code格式有規定，須依照規定寫。<br><img src="https://i.imgur.com/XTfyxIl.png"></p><hr><p>瀏覽器畫面<br><img src="https://i.imgur.com/O9YgkgX.png"></p><hr><h2 id="但是這樣寫太長也太麻煩了，所以-Rails-有提供小幫手form-helper-form-for-表示要幫某個model做一個表單出來-所以form-for-Candidate-new-表示做一個新的候選人表單出來"><a href="#但是這樣寫太長也太麻煩了，所以-Rails-有提供小幫手form-helper-form-for-表示要幫某個model做一個表單出來-所以form-for-Candidate-new-表示做一個新的候選人表單出來" class="headerlink" title="但是這樣寫太長也太麻煩了，所以 Rails 有提供小幫手form helper* form_for()表示要幫某個model做一個表單出來* 所以form_for(Candidate.new) 表示做一個新的候選人表單出來"></a>但是這樣寫太長也太麻煩了，所以 Rails 有提供小幫手<code>form helper</code><br>* form_for()表示要幫某個model做一個表單出來<br>* 所以<code>form_for(Candidate.new)</code> 表示做一個新的候選人表單出來</h2><h3 id="來看看form-for-跟我們自己寫的差別"><a href="#來看看form-for-跟我們自己寫的差別" class="headerlink" title="來看看form_for() 跟我們自己寫的差別"></a>來看看form_for() 跟我們自己寫的差別</h3><ul><li>進到瀏覽器 new 頁面，重新整理，檢視原始碼<br>紅色匡：我們自己寫的 ; 綠色匡：form_for()做的<br><img src="https://i.imgur.com/iyNJJ69.png"></li></ul><hr><p>for_for知道action要往哪裡去，也知道用post方法。也幫你產生好了token。是不是非常快速方便！！！<br>所以可以把我們剛剛自己寫的給刪掉了，直接使用form_for()就可以了。<br><img src="https://i.imgur.com/xkw4xJ4.png"></p><hr><p>打開瀏覽器看看畫面長怎樣<br><img src="https://i.imgur.com/coDqO6w.png"></p><hr><p>一樣有輸入匡，這個就是<code>form.text_field :name</code>產生的。<br>那我們就可以來增加其他欄位<br><img src="https://i.imgur.com/UYd7VXR.png"></p><hr><p>是不是神奇的做好了欄位？<br><img src="https://i.imgur.com/cKkTxfn.png"></p><hr><p>來看看頁面原始碼吧<br><img src="https://i.imgur.com/rQCHCtk.png"></p><hr><p>這邊有一個欄位需要做些調整，有猜到了嗎？沒錯就是政見的欄位，應該使用<code>form.text_area</code>，因為政見發表應該會需要輸入更多內容。<br><img src="https://i.imgur.com/vNdFrMF.png"></p><hr><p>做點畫面上的美化，並加個標籤給每個欄位吧<br><img src="https://i.imgur.com/a02JzHZ.png"></p><hr><p>打開瀏覽器<br><img src="https://i.imgur.com/f8unkjJ.png"></p><hr><blockquote><h3 id="到這裡目前新增候選人的頁面就算完成了，下堂課講解，按下送出按鈕後，找到對應的-create-action-要如何來處理這筆資料。"><a href="#到這裡目前新增候選人的頁面就算完成了，下堂課講解，按下送出按鈕後，找到對應的-create-action-要如何來處理這筆資料。" class="headerlink" title="到這裡目前新增候選人的頁面就算完成了，下堂課講解，按下送出按鈕後，找到對應的 create action 要如何來處理這筆資料。"></a>到這裡目前新增候選人的頁面就算完成了，下堂課講解，按下送出按鈕後，找到對應的 create action 要如何來處理這筆資料。</h3></blockquote><p>參考來源：為你自己學 Ruby on Rails (<a href="https://railsbook.tw/">https://railsbook.tw/</a>)</p>]]></content>
<summary type="html"><h2 id="出現錯誤訊息，遇到無效的Token"><a href="#出現錯誤訊息，遇到無效的Token" class="headerlink" title="出現錯誤訊息，遇到無效的Token"></a>出現錯誤訊息，遇到無效的Token</h2></summary>
<category term="ASTRO CAMP 線上課程學習筆記" scheme="https://danny3766.github.io/categories/ASTRO-CAMP-%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/"/>
<category term="Ruby on Rails" scheme="https://danny3766.github.io/tags/Ruby-on-Rails/"/>
</entry>
</feed>