-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
1423 lines (1081 loc) · 101 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
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Doug's Web Development Blog]]></title>
<link href="http://doug7410.github.io/atom.xml" rel="self"/>
<link href="http://doug7410.github.io/"/>
<updated>2014-08-31T17:37:01+00:00</updated>
<id>http://doug7410.github.io/</id>
<author>
<name><![CDATA[Doug Steinberg]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[How I Added Images to My Postit App With AJAX and MetaInspector]]></title>
<link href="http://doug7410.github.io/blog/2014/08/04/add-image-to-post-with-ajax-and-metainspector/"/>
<updated>2014-08-04T15:07:35+00:00</updated>
<id>http://doug7410.github.io/blog/2014/08/04/add-image-to-post-with-ajax-and-metainspector</id>
<content type="html"><![CDATA[<p>In <a href="gotealeaf.com">Tealeaf Academy’s</a> second course <a href="http://www.gotealeaf.com/curriculum#!rails">Rapid Prototyping with Ruby on Rails</a> we built an app called Postit. It’s bassically a clone of the popular site Reddit.com. Of of the featues of this app is to add a URL to the site you are posting about. I decided to add a feature for grabbing an image on that URL. To do this I used some AJAX and a web scraping gem. Here is what the page looks like in action.</p>
<p><img src="http://doug7410.github.io/images/image_scrapper.jpg"></p>
<p>Here is the link to the actual working app <a href="http://shielded-retreat-9536.herokuapp.com/">http://shielded-retreat-9536.herokuapp.com/</a> <!--more--></p>
<p>Here is the code on GitHub <a href="https://github.com/doug7410/postit-app">https://github.com/doug7410/postit-app</a></p>
<p>You’ll have to register and create a post in order to try out the image feature.</p>
<h2>Here the rundown on how I did it.</h2>
<h3>1. First add a column to the database for the image</h3>
<p>The first thing I had to do was add a <code>post_image</code> column to the <code>posts</code> table. I went into the console and created a migration.</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rails generate migration add_post_image_to_posts</span></code></pre></td></tr></table></div></figure>
<p>This created the migration file. Below is the file with the code to add the new column.</p>
<figure class='code'><figcaption><span>20140711160221_add_post_image_to_posts.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">AddPostImageToPosts</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Migration</span>
</span><span class='line'> <span class="k">def</span> <span class="nf">change</span>
</span><span class='line'> <span class="n">add_column</span> <span class="ss">:posts</span><span class="p">,</span> <span class="ss">:post_image</span><span class="p">,</span> <span class="ss">:string</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<h3>2. the basic workflow for getting the images from a URL</h3>
<p>In this application a post has 5 attributes (not including timestamps). They are:</p>
<ul>
<li>title</li>
<li>url</li>
<li>description</li>
<li>slug</li>
<li>post_image</li>
<li>user_id</li>
</ul>
<p>I’m using a web scraper called <a href="https://github.com/jaimeiniesta/metainspector">metainspector</a> to fetch an array of images from the <code>url</code> given to the post. To access the images returned by metainspector I have to take following steps:</p>
<ol>
<li>create a link that sends an HTTP request to a <code>post_image</code> action in the post controller</li>
<li>that action renders a javascript template</li>
<li>that template uses a method which is accessed on the post objecy</li>
<li>inside that method, <strong>metainspector</strong> uses the <code>url</code> to return an array of images that are on the url’s web page</li>
<li>a list of images is shown and the user chooses an image for the post</li>
</ol>
<p>That’s the basic outline of the workflow for getting the images. Here is how I did it.</p>
<h3>3. The workflow in the UI</h3>
<p>I’m using AJAX and a very slick JavaScript interface in the UI to select the image. The workflow in the UI works like this:</p>
<ol>
<li> when creating or editing a post, the user enters a url in the URL form field</li>
<li> the user clicks on the “Choose Post Image” button</li>
<li> underneath the URL field, a hidden div slides down with all the images generated from the URL</li>
<li> the user clicks on an image to choose it and assign it to the post</li>
</ol>
<p>Rails has a very easy way to AJAXify a link by adding <code>remote: true</code> to a <code>link_to</code> helper method. Here is the section of the form with the URL field and the link:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='erb'><span class='line'><span class="x"><div class="control-group"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">label</span> <span class="ss">:url</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">text_field</span> <span class="ss">:url</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">link_to</span> <span class="s1">'Choose Post Image'</span><span class="p">,</span> <span class="n">post_image_path</span><span class="p">,</span> <span class="ss">remote</span><span class="p">:</span> <span class="kp">true</span><span class="p">,</span>
</span><span class='line'> <span class="nb">method</span><span class="p">:</span> <span class="s1">'post'</span><span class="p">,</span> <span class="ss">class</span><span class="p">:</span> <span class="s1">'btn btn-primary'</span><span class="p">,</span> <span class="nb">id</span><span class="p">:</span> <span class="s1">'choose_img_btn'</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"></div></span>
</span></code></pre></td></tr></table></div></figure>
<p>There are two things about this link use some special rails magic</p>
<ul>
<li><code>remote" true</code></li>
<li><code>method: 'post'</code></li>
</ul>
<p><code>remote: true</code> turns this into an AJAX link. It’s equivalent to writing a JavaScript event handler that process an AJAX call when the link is clicked.</p>
<p><code>method: 'post'</code> turns the link in to a POST request as opposed to a GET request.</p>
<p>Both of these are necessary for the next step, the controller action.</p>
<p>When the user adds a URL to the field and then clicks the “Choose Post Image” button it uses this rout:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">post</span> <span class="s1">'/post_image'</span><span class="p">,</span> <span class="ss">to</span><span class="p">:</span> <span class="s1">'posts#post_image'</span>
</span></code></pre></td></tr></table></div></figure>
<p>The link goes to the <code>post_image_path</code> , so a click on this link sends a POST request to the <code>post</code> controller’s <code>post_image</code> action , and because the link has the <code>remote: true</code> parameter, the format is JavaScript.</p>
<h3>4. what’s happening in the <code>post_image</code> action in the <code>post</code> controller</h3>
<p>Here is the action in the controller:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">post_image</span>
</span><span class='line'> <span class="vi">@post</span> <span class="o">=</span> <span class="no">Post</span><span class="o">.</span><span class="n">new</span>
</span><span class='line'>
</span><span class='line'> <span class="n">respond_to</span> <span class="k">do</span> <span class="o">|</span><span class="nb">format</span><span class="o">|</span>
</span><span class='line'> <span class="nb">format</span><span class="o">.</span><span class="n">js</span> <span class="k">do</span>
</span><span class='line'> <span class="vi">@url</span> <span class="o">=</span> <span class="n">params</span><span class="o">[</span><span class="ss">:url</span><span class="o">]</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>Here there are 3 things happening.</p>
<ul>
<li>a new @post object is created. This is necessary because the post model has a method that fetches the images. So you need a post object to call that method</li>
<li>a @url variable is created from the URL field in the form. If you look at the “Choose Post Image” link you probably notice there is no URL parameter anywhere. I used JavaScript to dynamically add the url as a parameter to the link.</li>
<li>lastly, the action renders the default template <code>post_image.js.erb</code> . Since the request coming into the action is JavaScript formatted, the <code>respond_to</code> block sends the request off to the <code>post_image.js.erb</code> template.</li>
</ul>
<p><strong>I should probably take a step back and show you the JavaScript that added the URL parameter to the link.</strong></p>
<figure class='code'><figcaption><span>/app/assets/javascripts/post_images.js</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class='Javascript'><span class='line'><span class="c1">// this makes the "choose image button add the url parameter to the end of the link"</span>
</span><span class='line'>
</span><span class='line'><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span class='line'>
</span><span class='line'> <span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#choose_img_btn"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"href"</span><span class="p">);</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#post_url"</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#choose_img_btn"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"href"</span><span class="p">,</span> <span class="nx">link</span> <span class="o">+</span> <span class="s2">"?url="</span> <span class="o">+</span> <span class="nx">url</span> <span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#post_url"</span><span class="p">).</span><span class="nx">change</span><span class="p">(</span> <span class="kd">function</span><span class="p">(){</span>
</span><span class='line'> <span class="nx">url</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#post_url"</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">new_link</span> <span class="o">=</span> <span class="p">(</span><span class="nx">link</span> <span class="o">+</span> <span class="s2">"?url="</span> <span class="o">+</span> <span class="nx">url</span><span class="p">);</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#choose_img_btn"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"href"</span><span class="p">,</span> <span class="nx">new_link</span> <span class="p">);</span>
</span><span class='line'> <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p><strong>NOTE:</strong> <em>to get the code above to work properly I had to add the jquery-turbolinks gem to my gemfile</em></p>
<p><code>gem 'jquery-turbolinks'</code></p>
<p>Basically what this does is append <code>?url=</code> and whatever text is in the URL feild to the end of the link.</p>
<p>The link by default points to the <code>/post_image</code> path. So if you type <code>www.cnn.com</code> into the URL field, the link will automatically be turned into <code>/post_image?www.cnn.com</code></p>
<h3>5. inside the JavaScript template <code>post_image.js.erb</code></h3>
<p>After the response goes through the controller action it ends up in the JavaScript template. This is where all of the cool AJAX stuff happens. Here is what the template looks like.</p>
<figure class='code'><figcaption><span>/app/views/posts/post_image.js.erb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class='Javascript'><span class='line'><span class="kd">var</span> <span class="nx">images_html</span> <span class="o">=</span> <span class="s1">'<ul class="choose_img_thumbs">'</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="o"><%</span> <span class="k">if</span> <span class="err">@</span><span class="nx">post</span><span class="p">.</span><span class="nx">url_images</span><span class="p">(</span><span class="err">@</span><span class="nx">url</span><span class="p">)</span> <span class="o">!=</span> <span class="s2">"error"</span> <span class="o">%></span>
</span><span class='line'> <span class="o"><%</span> <span class="err">@</span><span class="nx">post</span><span class="p">.</span><span class="nx">url_images</span><span class="p">(</span><span class="err">@</span><span class="nx">url</span><span class="p">).</span><span class="nx">each</span> <span class="k">do</span> <span class="o">|</span><span class="nx">image</span><span class="o">|</span> <span class="o">%</span>
</span><span class='line'> <span class="nx">images_html</span> <span class="o">+=</span> <span class="s1">'<li>'</span><span class="p">;</span>
</span><span class='line'> <span class="nx">images_html</span> <span class="o">+=</span> <span class="s1">'<%= image_tag image , id: "url_image" %>'</span><span class="p">;</span>
</span><span class='line'> <span class="nx">images_html</span> <span class="o">+=</span> <span class="s1">'</li>'</span><span class="p">;</span>
</span><span class='line'> <span class="o"><%</span> <span class="nx">end</span> <span class="o">%></span>
</span><span class='line'> <span class="nx">images_html</span> <span class="o">+=</span> <span class="s1">'</ul>'</span>
</span><span class='line'><span class="o"><%</span> <span class="k">else</span> <span class="o">%></span>
</span><span class='line'> <span class="nx">images_html</span> <span class="o">+=</span> <span class="s1">'You did not enter a valid URL. Please try again.'</span>
</span><span class='line'><span class="o"><%</span> <span class="nx">end</span> <span class="o">%></span>
</span><span class='line'>
</span><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s2">"#images_container"</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">images_html</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s2">"#image_choices"</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#image_choices img"</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span> <span class="kd">function</span><span class="p">(){</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span> <span class="kd">function</span><span class="p">(){</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#post_post_image"</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'src'</span><span class="p">));</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#image_choices"</span><span class="p">).</span><span class="nx">slideUp</span><span class="p">();</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#post_image"</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">().</span><span class="nx">html</span><span class="p">(</span><span class="s1">'<img src="'</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'src'</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'" />'</span><span class="p">);</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p><strong>To give you an idea of my though process I’ll try to explain what this file does.</strong></p>
<ul>
<li>It creates an unordered list of images and then places them into a div with the ID of <code>#images_container</code> .</li>
<li>Once the image list is inside the <code>#images_container</code> , that div slides down. Keep in mind this is all happening on the create post or edit post page.</li>
<li>After the <code>#images_container</code> slides down, the user clicks on an image to choose it and assign it to the post.</li>
<li>once the chosen image has been clicked the <code>images_container</code> slides up and another hidden div, <code>#post_image</code> gets the chosen image inserted into it and slides down.</li>
<li>there is also a hidden form field <code>#post_post_images</code>. The image URL is dynamically added to it’s value attriubte.</li>
</ul>
<p>The important part of this code is <code>@post.url_images(@url)</code> . Here is the <code>url_images</code> method in the Post model</p>
<figure class='code'><figcaption><span>/app/models/post.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">url_images</span><span class="p">(</span><span class="n">url</span><span class="p">)</span>
</span><span class='line'> <span class="n">ext</span> <span class="o">=</span> <span class="n">url</span><span class="o">.</span><span class="n">split</span><span class="p">(</span><span class="s1">'.'</span><span class="p">)</span><span class="o">.</span><span class="n">last</span>
</span><span class='line'> <span class="k">if</span> <span class="o">[</span><span class="s1">'jpg'</span><span class="p">,</span><span class="s1">'jpeg'</span><span class="p">,</span><span class="s1">'png'</span><span class="p">,</span><span class="s1">'gif'</span><span class="p">,</span><span class="s1">'bmp'</span><span class="o">].</span><span class="n">include?</span><span class="p">(</span><span class="n">ext</span><span class="p">)</span>
</span><span class='line'> <span class="o">[</span><span class="n">url</span><span class="o">]</span>
</span><span class='line'> <span class="k">else</span>
</span><span class='line'> <span class="k">begin</span>
</span><span class='line'> <span class="n">page</span> <span class="o">=</span> <span class="no">MetaInspector</span><span class="o">.</span><span class="n">new</span><span class="p">(</span><span class="n">url</span><span class="p">)</span>
</span><span class='line'> <span class="n">page</span><span class="o">.</span><span class="n">images</span>
</span><span class='line'> <span class="k">rescue</span>
</span><span class='line'> <span class="s2">"error"</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>There are basically 3 cases that can happen in this method</p>
<ul>
<li>the URL passed in is an image URL</li>
<li>the URL is a web page with images on it</li>
<li>or there is a problem with the URL, in which case the string “error” is returned.</li>
</ul>
<p>The first thing that happens is the URL is split apart on the dots (.) . If it’s an image URL like <code>www.mysite.com/myimage.jpg</code> the first condition in the if statement will execute and an array with the URL string will be returned.</p>
<p>If that’s not the case the URL will be passed into MetaInspector and assigned to the <code>page</code> variable. MetaInspector scrapes information from a given URL and gives you several methods for accessing that data. In this case I just want the images. <code>page.images</code> returns an array of all the images retrieved by MetaInspector</p>
<p>If MetaInspector has a problem with the URL passed in it will throw an exception and the whole app will fail. To get around this I used a <code>begin and rescue block</code>. This way if there are any exception thrown by MetaInspector the method will execute the rescue block and just return the string “error”.</p>
<p>So that’s the first thing going on the JavaScript template. The first line is</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='Javascript'><span class='line'><span class="o"><%</span> <span class="k">if</span> <span class="err">@</span><span class="nx">post</span><span class="p">.</span><span class="nx">url_images</span><span class="p">(</span><span class="err">@</span><span class="nx">url</span><span class="p">)</span> <span class="o">!=</span> <span class="s2">"error"</span> <span class="o">%></span>
</span></code></pre></td></tr></table></div></figure>
<p>so as long as there is no error, this section will execute.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='Javascript'><span class='line'><span class="o"><%</span> <span class="err">@</span><span class="nx">post</span><span class="p">.</span><span class="nx">url_images</span><span class="p">(</span><span class="err">@</span><span class="nx">url</span><span class="p">).</span><span class="nx">each</span> <span class="k">do</span> <span class="o">|</span><span class="nx">image</span><span class="o">|</span> <span class="o">%</span>
</span><span class='line'> <span class="nx">images_html</span> <span class="o">+=</span> <span class="s1">'<li>'</span><span class="p">;</span>
</span><span class='line'> <span class="nx">images_html</span> <span class="o">+=</span> <span class="s1">'<%= image_tag image , id: "url_image" %>'</span><span class="p">;</span>
</span><span class='line'> <span class="nx">images_html</span> <span class="o">+=</span> <span class="s1">'</li>'</span><span class="p">;</span>
</span><span class='line'><span class="o"><%</span> <span class="nx">end</span> <span class="o">%></span>
</span><span class='line'><span class="nx">images_html</span> <span class="o">+=</span> <span class="s1">'</ul>'</span>
</span></code></pre></td></tr></table></div></figure>
<p>This creates tan unordered list of images and assigns the list to the <code>images_html</code> variable.</p>
<p>That list is put into the <code>#images_container</code> with this code</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='Javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s2">"#images_container"</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">images_html</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>Then this part</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='Javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s2">"#image_choices"</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span></code></pre></td></tr></table></div></figure>
<p>slides down the <code>#image_choices</code> and when an image is clicked 3 things happen</p>
<ul>
<li>this line <code>$("#post_post_image").val($(this).attr('src'));</code> adds the URL of the clicked image to a hidden form input <code>"#post_post_image"</code></li>
<li>the <code>#image_choices</code> div slides up</li>
<li>the image is added to the <code>#post_image</code> div and it slides down</li>
</ul>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='Javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s2">"#image_choices"</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#image_choices img"</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span> <span class="kd">function</span><span class="p">(){</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span> <span class="kd">function</span><span class="p">(){</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#post_post_image"</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'src'</span><span class="p">));</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#image_choices"</span><span class="p">).</span><span class="nx">slideUp</span><span class="p">();</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s2">"#post_image"</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">().</span><span class="nx">html</span><span class="p">(</span><span class="s1">'<img src="'</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'src'</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'" />'</span><span class="p">);</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<h3>6. finishing up the feature’s workflow</h3>
<p>At this pont all that is left is the post has to be saved and the image URL will be added to the <code>post_image</code> column. This is because of the hidden form field I talked about. Here is the hidden field in the form.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="o"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">hidden_field</span> <span class="ss">:post_image</span> <span class="o">%></span>
</span></code></pre></td></tr></table></div></figure>
<p>Also, just for clarification. Here is the entire post form.</p>
<figure class='code'><figcaption><span>/app/views/posts/_form.html.erb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
</pre></td><td class='code'><pre><code class='erb'><span class='line'><span class="x"><div class="well"></span>
</span><span class='line'>
</span><span class='line'><span class="cp"><%=</span> <span class="n">render</span> <span class="s1">'shared/errors'</span><span class="p">,</span> <span class="ss">object</span><span class="p">:</span> <span class="vi">@post</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="cp"><%=</span> <span class="n">my_form_for</span> <span class="vi">@post</span> <span class="k">do</span> <span class="o">|</span><span class="n">f</span><span class="o">|</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">hidden_field</span> <span class="ss">:post_image</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"><div class="control-group"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">label</span> <span class="ss">:title</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">text_field</span> <span class="ss">:title</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"></div></span>
</span><span class='line'><span class="x"><div class="control-group"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">label</span> <span class="ss">:url</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">text_field</span> <span class="ss">:url</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">link_to</span> <span class="s1">'Choose Post Image'</span><span class="p">,</span> <span class="n">post_image_path</span><span class="p">,</span> <span class="ss">remote</span><span class="p">:</span> <span class="kp">true</span><span class="p">,</span> <span class="nb">method</span><span class="p">:</span> <span class="s1">'post'</span><span class="p">,</span> <span class="ss">class</span><span class="p">:</span> <span class="s1">'btn btn-primary'</span><span class="p">,</span> <span class="nb">id</span><span class="p">:</span> <span class="s1">'choose_img_btn'</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"></div></span>
</span><span class='line'><span class="x"><div id="image_choices" ></span>
</span><span class='line'><span class="x"> <h4>Choose an image to go with this post.</h4></span>
</span><span class='line'><span class="x"> <div id="images_container"></div></span>
</span><span class='line'><span class="x"></div></span>
</span><span class='line'><span class="x"><div id="post_image"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">image_tag</span> <span class="vi">@post</span><span class="o">.</span><span class="n">post_image</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"></div</span>
</span><span class='line'><span class="x">> <div class="control-group"> </span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">label</span> <span class="ss">:description</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">text_area</span> <span class="ss">:description</span><span class="p">,</span> <span class="ss">rows</span><span class="p">:</span> <span class="mi">5</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"></div></span>
</span><span class='line'><span class="x"><div class="control-group"></span>
</span><span class='line'><span class="x"> <h5>Categories:</h5></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">collection_check_boxes</span> <span class="ss">:category_ids</span><span class="p">,</span> <span class="no">Category</span><span class="o">.</span><span class="n">all</span><span class="p">,</span> <span class="ss">:id</span><span class="p">,</span> <span class="ss">:name</span> <span class="k">do</span> <span class="o">|</span><span class="n">cb</span><span class="o">|</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">cb</span><span class="o">.</span><span class="n">label</span><span class="p">(</span><span class="ss">class</span><span class="p">:</span> <span class="s1">'checkbox inline'</span><span class="p">)</span> <span class="p">{</span> <span class="n">cb</span><span class="o">.</span><span class="n">check_box</span><span class="p">(</span><span class="ss">class</span><span class="p">:</span> <span class="s1">'checkbox'</span><span class="p">)</span> <span class="o">+</span> <span class="n">cb</span><span class="o">.</span><span class="n">text</span> <span class="p">}</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span><span class="x"> </span>
</span><span class='line'><span class="x"></div></span>
</span><span class='line'><span class="x"> </span><span class="cp"><%=</span> <span class="n">f</span><span class="o">.</span><span class="n">submit</span><span class="p">(</span><span class="vi">@post</span><span class="o">.</span><span class="n">new_record?</span> <span class="p">?</span> <span class="s1">'Create Post'</span> <span class="p">:</span> <span class="s1">'Update Post'</span><span class="p">,</span> <span class="ss">class</span><span class="p">:</span> <span class="s1">'btn btn-primary'</span><span class="p">)</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span><span class="x"></span>
</span><span class='line'><span class="x"></div></span>
</span></code></pre></td></tr></table></div></figure>
<p>I hope that made some sense and now you have some idea of how I did it. It took a combination of JavaScript, jQuery, AJAX, a scraper gem, and standard rails MVC. I’m sure there are things that can be improved on and tweaked so please feel free to leave feedback.</p>
<p>Thanks for reading!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Ruby on Rails Project - Punch Clock App]]></title>
<link href="http://doug7410.github.io/blog/2014/07/16/rails-project-punch-clock-app/"/>
<updated>2014-07-16T22:45:21+00:00</updated>
<id>http://doug7410.github.io/blog/2014/07/16/rails-project-punch-clock-app</id>
<content type="html"><![CDATA[<p><img src="http://doug7410.github.io/images/punch-clock.jpg"></p>
<p>So I’m done with week 2 of the Tealeaf Ruby on Rails course and I’ve learned to do basic CRUD ( create, read, update, delete) actions using Rail’s resourses , models, form helpers, and views.</p>
<p>I thought this would be a good time start on a side project I had saved in my back pocket. This would be a good chance to practice what I’ve learned as well as start my own project. The idea is pretty simple, it’s called “Punch Clock”, for now at least. It allows you to create different jobs or tasks, and then track the time you spent working on them. Here the Github repository <!--more--></p>
<p><a href="https://github.com/doug7410/punch-clock">https://github.com/doug7410/punch-clock</a></p>
<h4>The image above is what it looks like so far.</h4>
<p>You can also click on the Job Title’s to see that job’s detail’s page There you will see a list of all the punches you’ve made. Each punch out has the “time on the clock” next to it. So if you punch in at 8:00AM and punch out at 10:35AM, that punch will show your time like this “0002:35:00” . You just worked for 2 hours and 35 minutes! Go take a coffee break!</p>
<p>The page will also show the total time worked on that job. Here’s a screenshot of the <strong> job detail page </strong>.</p>
<p><img src="http://doug7410.github.io/images/punch-clock2.jpg"></p>
<p><strong> So far my list of features for this app are: </strong></p>
<ul>
<li>You can create jobs</li>
<li>each job has a title and description</li>
<li>each job has punches</li>
<li>each punch “out” uses the previous punch “in” to calculate the time on the clock</li>
<li>each job has a running total of all the time worked</li>
</ul>
<p>That’s it for now. Here is a list of what I want to add on</p>
<ul>
<li>add user authentication</li>
<li>use javascript to have running clocks</li>
<li>add notes to each punch so you can keep track of what was done during that time period</li>
<li>have the ability to edit or delete punched</li>
<li>be able to manually add punches</li>
<li>ability to edit jobs and user profiles</li>
<li>add hourly rate to jobs to keep track of earnings</li>
<li>add reports to break down time worked by day, month, date-range, etc..</li>
</ul>
<p>That’s all I have for now, but there are lots of possibilities with this. I also want to have a nice graphic design, but that’s not as important as the MVP right now.</p>
<p>If you have any suggestions or questions please leave in the comments. Thanks!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Tealeaf - Rapid Prototyping With Ruby on Rails Cousre Done!]]></title>
<link href="http://doug7410.github.io/blog/2014/07/16/rapid-prototyping-with-ruby-on-rails-course-done/"/>
<updated>2014-07-16T16:10:36+00:00</updated>
<id>http://doug7410.github.io/blog/2014/07/16/rapid-prototyping-with-ruby-on-rails-course-done</id>
<content type="html"><![CDATA[<p><img src="http://doug7410.github.io/images/postit.jpg"></p>
<p>It’s been a few weeks since I last posted about my journey to becoming a Ruby on Rails developer through <a href="http://gotealeaf.com">Tealeaf Academy</a> . At this point I’m done with their second course “Rapid Prototyping with Ruby on Rails” . This blog post is actually my final assignment for the course. I have learned to build a basic rails app from start to finish and I’ve even been able to apply some custom features that weren’t discussed in the course. <!--more--></p>
<p>Here is the final project <a href="http://shielded-retreat-9536.herokuapp.com">http://shielded-retreat-9536.herokuapp.com</a>
Here is my code on GitHub - <a href="https://github.com/doug7410/postit-app">https://github.com/doug7410/postit-app</a></p>
<h4>I’ve learned way to much to go into detail about everything so here is a summery of all the things I learned while building this rails application.</h4></h4>
<ul>
<li>Model View Controller</li>
<li>Rails Migrations</li>
<li>Active Record</li>
<li>Active Record Associations
<ul>
<li>1 to Many Associations</li>
<li>Many to Many associations</li>
<li>Polymorphic associations</li>
</ul>
</li>
<li>RESTful routes</li>
<li>Custom Routes</li>
<li>ERB templates</li>
<li>User Authentication with “has_secure_password”</li>
<li>Helper Methods</li>
<li>Modules</li>
<li>Creating a Gem</li>
<li>Rails flavored AJAX</li>
</ul>
<p>I’m probably leaving some things out, so I might have to go back and edit that list. In my <a href="http://dsp-websolutions.com/portfolio/2014/06/25/journey-to-ror-developer-part-3">last post</a> I talked about MVC and Rails Migrations. Now I’ll talk a little about <strong>Active Record</strong> and <strong>Associations</strong> .</p>
<h3>What is Active Record?</h3>
<p>Active record is an ORM (Object Relational Mapping system). Active Record allows Rails to interact with a database and and also stores information about the relationships between tables in the database. All with out ever writing SQL.This is really incredible if you ever had to write SQL to interact with a database! Active Record completely eliminates that whole layer of thinking.</p>
<p>Here’s a simple example of the power and convenience of Active Record. Here is a simple table and it’s model.</p>
<p><strong>dogs table</strong>(tables are always named in plural form)</p>
<table class="table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Weight</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Rocky</td>
<td>15</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>Gump</td>
<td>45</td>
<td>11</td>
</tr>
<tr>
<td>3</td>
<td>Jenny</td>
<td>35</td>
<td>9</td>
</tr>
</table>
<p><strong>Dog model</strong> dog.rb (model names are always singular)</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Dog</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>Notice the Dog class is completely empty aside from the fact that it inherits from ActiveRecord::Base. The Dog class now has access to all the Active Record methods. If we wanted to select a row form the dogs table you can do so like this in rails console.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">dog</span> <span class="o">=</span> <span class="no">Dog</span><span class="o">.</span><span class="n">first</span>
</span><span class='line'><span class="o">=></span> <span class="o"><</span><span class="no">Dog</span> <span class="nb">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nb">name</span><span class="p">:</span> <span class="s2">"Rocky"</span><span class="p">,</span> <span class="ss">weight</span><span class="p">:</span> <span class="s2">"15"</span><span class="p">,</span> <span class="ss">age</span><span class="p">:</span> <span class="s2">"5"</span><span class="o">></span>
</span></code></pre></td></tr></table></div></figure>
<p>This would return the first record in the ‘dogs’ table. Active record has many other methods for returning rows form a table. Let’s say we wan’t the dog with an ID of 2</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">dog</span> <span class="o">=</span> <span class="no">Dog</span><span class="o">.</span><span class="n">find</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span>
</span><span class='line'><span class="o">=></span> <span class="o"><</span><span class="no">Dog</span> <span class="nb">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nb">name</span><span class="p">:</span> <span class="s2">"Gump"</span><span class="p">,</span> <span class="ss">weight</span><span class="p">:</span> <span class="s2">"45"</span><span class="p">,</span> <span class="ss">age</span><span class="p">:</span> <span class="s2">"11"</span><span class="o">></span>
</span></code></pre></td></tr></table></div></figure>
<p> Active Record also creates getter and setter methods for every column in the database table. So you can do things like this.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">dog</span><span class="o">.</span><span class="n">name</span>
</span><span class='line'><span class="o">=></span> <span class="s2">"Gump"</span>
</span><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">dog</span><span class="o">.</span><span class="n">age</span>
</span><span class='line'><span class="o">=></span> <span class="s2">"11"</span>
</span><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">dog</span><span class="o">.</span><span class="n">age</span> <span class="o">=</span> <span class="mi">12</span>
</span><span class='line'><span class="o">=></span> <span class="mi">12</span>
</span><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">dog</span>
</span><span class='line'><span class="o">=></span> <span class="o">[</span><span class="nb">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nb">name</span><span class="p">:</span> <span class="s2">"Gump"</span><span class="p">,</span> <span class="ss">weight</span><span class="p">:</span> <span class="s2">"45"</span><span class="p">,</span> <span class="ss">age</span><span class="p">:</span> <span class="s2">"12"</span><span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>
<p>Active record makes working with data a breeze. If we had to write SQL just to do the few examples I have above it would take way more code and would be way less pretty.</p>
<h3>The other great thing about Active Record is Associations</h3>
<p>Associations are used to create relationships between tables. There are 2 ways tables can be related</p>
<ul>
<li>1 to Many</li>
<li>Many to Many</li>
</ul>
<h4>Here is another table that can relate to the dogs table:</h4>
<p><strong>owners</strong></p>
<table class="table">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Frank</td>
</tr>
<tr>
<td>2</td>
<td>Rachel</td>
</tr>
</table>
<p>In this example we’re going to say a dog has one owner, and an owner can have many dogs. This a a typical one to many relationship. The Dog and Owner models will look like this.</p>
<p><strong>Dog model</strong></p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Dog</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
</span><span class='line'> <span class="n">belongs_to</span> <span class="ss">:owner</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p><strong>Owner model</strong></p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Owner</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
</span><span class='line'> <span class="n">has_many</span> <span class="ss">:dogs</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>Doing this will require one column to be added to the dogs table. A foreign key of <code>owner_id</code></p>
<p><strong>dogs table</strong></p>
<table class="table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Weight</th>
<th>Age</th>
<th>owner_id</th>
</tr>
<tr>
<td>1</td>
<td>Rocky</td>
<td>15</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>Gump</td>
<td>45</td>
<td>11</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>Jenny</td>
<td>35</td>
<td>9</td>
<td>2</td>
</tr>
</table>
<p>Rails will automatically know to use <code>owner_id</code> because we stated in the Dog model that a dog <code>belongs_to :owner</code> . The foreign key column always goes in the table on the <code>belongs_to</code> side of a relation.</p>
<p>Now we can do things like this.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">dog</span> <span class="o">=</span> <span class="no">Dog</span><span class="o">.</span><span class="n">find</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span>
</span><span class='line'><span class="o">=></span> <span class="o"><</span><span class="no">Dog</span> <span class="nb">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nb">name</span><span class="p">:</span> <span class="s2">"Gump"</span><span class="p">,</span> <span class="ss">weight</span><span class="p">:</span> <span class="s2">"45"</span><span class="p">,</span> <span class="ss">age</span><span class="p">:</span> <span class="s2">"12"</span><span class="o">></span>
</span><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">dog</span><span class="o">.</span><span class="n">owner</span><span class="o">.</span><span class="n">name</span>
</span><span class='line'><span class="o">=></span> <span class="s2">"Frank"</span>
</span><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">owner</span> <span class="o">=</span> <span class="no">Owner</span><span class="o">.</span><span class="n">last</span>
</span><span class='line'><span class="o">=></span> <span class="o"><</span><span class="no">Owner</span> <span class="nb">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nb">name</span><span class="p">:</span> <span class="s2">"Rachel"</span><span class="o">></span>
</span><span class='line'><span class="n">irb</span><span class="o">></span> <span class="n">owner</span><span class="o">.</span><span class="n">dogs</span><span class="o">.</span><span class="n">first</span><span class="o">.</span><span class="n">name</span>
</span><span class='line'><span class="o">=></span> <span class="s2">"Jenny"</span>
</span></code></pre></td></tr></table></div></figure>
<p>So that’s a little taste of what active record can do and how classes can be associated.</p>
<p>Here is a great reference for all Active Record - <a href="http://guides.rubyonrails.org/active_record_basics.html">http://guides.rubyonrails.org/active_record_basics.html</a></p>
<p>Rails uses a lot of conventions to make all of this magic work, but if you can remember them you can be very productive!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Say Hello to Rails and All of It's Magic!]]></title>
<link href="http://doug7410.github.io/blog/2014/06/25/say-hello-to-rails-and-all-the-magic/"/>
<updated>2014-06-25T12:20:36+00:00</updated>
<id>http://doug7410.github.io/blog/2014/06/25/say-hello-to-rails-and-all-the-magic</id>
<content type="html"><![CDATA[<p><img src="http://doug7410.github.io/images/roads-22.jpg"></p>
<p>I’m through the first week of course 2 with Tealeaf Academy (Rapid prototyping with Ruby on Rails) It’s been very demanding to say the least, but still very fun and engaging. There was a lot of information to absorb and I learned a lot.</p>
<p>Before week 1 officially started, I was asked to read this <a href="http://guides.rubyonrails.org/getting_started.html">Getting Started with Rails guide</a>. I did actually get through it and build the example project, but by the end I wasn’t very confident about Rails, which is ok, because that’s what the course is for.</p>
<!--more-->
<p>The first lecture in the course cleared a lot of things up for me. Ruby on Rails (or RoR) is basically split up into 5 main parts and follows a MVC (Model View Controller) pattern:</p>
<h3>The five parts are:</h3>
<ol>
<li> The Router</li>
<li> The Controller</li>
<li> The Model</li>
<li> The Database</li>
<li> The View</li>
</ol>
<h2>Here is my quick explanation of how rails works:</h2>
<ol>
<li> A HTTP request comes into the <strong>Router</strong></li>
<li> the router directs that request to the <strong>Controller</strong></li>
<li> depending on what is in the request, the <strong>Controller</strong> will do 1 of 3 things
<ul>
<li>redirect to the router <strong>Router</strong></li>
<li>render a <strong>View</strong> template</li>
<li>or reach into the <strong>Model</strong>. The <strong>Model</strong> can then retrieve data from the <strong>Database</strong> , send that back to the <strong>Controller</strong>, and then render a <strong>View</strong></li>
</ul>
</li>
</ol>
<h4>Here is a nice diagram of rails:</h4>
<p><img src="http://doug7410.github.io/images/request_response_mvc.jpg"></p>
<h3>This part of the course focused mostly on the Model layer</h3>
<p>Here is what a simple model looks like in Rails</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Post</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>Every model in Rails corresponds to a table in the database. The above model would belong to a table named ‘posts’. Rails has several conventions for naming models, classes, tables, and lots of other things. This is what allows the “Rails Magic” to happen. For a model three naming conventions must be followed.</p>
<ol>
<li> the name of the model file must be singular, lowercase, and snake case. So the Post model would be in a file called ‘post.rb’. A ‘PostCategory’ model would be in ‘post_category.rb’</li>
<li> the name of the model class should be singular and CamelCase. ex: ‘Post’, or ‘PostCategory’</li>
<li> the name of the table must be plaural form, and snake case. ex: ‘posts, or ‘post_categories’</li>
</ol>
<p>Figuring out the name Rails expects can sometimes be tricky, so there is a built in method you can use in rails console to figure those tricky ones out. Check out the code below in rails console.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="o">></span> <span class="s2">"Goose"</span><span class="o">.</span><span class="n">tableize</span>
</span><span class='line'><span class="o">=></span> <span class="s2">"gooses"</span>
</span></code></pre></td></tr></table></div></figure>
<p>The model name here is Goose. Calling the <code>tableize</code> method on the string “Goose” tells you rails expects the table to be called ‘gooses’. The model file for this would be goose.rb .</p>
<p>To create tables in Rails there is a great built in feature called <strong><em>migrations</em></strong>. To create a migration you first run this command in termianl in your project directory</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="err">$</span> <span class="n">rails</span> <span class="n">generate</span> <span class="n">migration</span> <span class="n">create_gooses</span>
</span></code></pre></td></tr></table></div></figure>
<p>In this example gooses is the table name. If you wanted to make a posts table you would just replace gooses with posts. This will create a file in the <code>db/migrate</code> directory that looks like this:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">CreateGooses</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Migration</span>
</span><span class='line'> <span class="k">def</span> <span class="nf">change</span>
</span><span class='line'> <span class="n">create_table</span> <span class="ss">:gooses</span> <span class="k">do</span> <span class="o">|</span><span class="n">t</span><span class="o">|</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>Now lets give gooses a name, height, and timestamps columns.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">CreateGooses</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Migration</span>
</span><span class='line'> <span class="k">def</span> <span class="nf">change</span>
</span><span class='line'> <span class="n">create_table</span> <span class="ss">:gooses</span> <span class="k">do</span> <span class="o">|</span><span class="n">t</span><span class="o">|</span>
</span><span class='line'> <span class="n">t</span><span class="o">.</span><span class="n">string</span> <span class="ss">:name</span>
</span><span class='line'> <span class="n">t</span><span class="o">.</span><span class="n">integer</span> <span class="ss">:height</span>
</span><span class='line'> <span class="n">t</span><span class="o">.</span><span class="n">timestamps</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<ol>
<li> t.string :name (creates a column called name with a type of string)</li>
<li> t.integer :height (creates a column called height with a type of integer)</li>
<li> t.timestamps creates two column (created_at and updated_at) Rails automatially fills these in when records are created or updated. Pretty neat right!</li>
</ol>
<p>After you finish creating your migration file you run this command in your terminal</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="err">$</span> <span class="n">rake</span> <span class="ss">db</span><span class="p">:</span><span class="n">migrate</span>
</span></code></pre></td></tr></table></div></figure>
<p>If you have bundler installed you might need to run</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="err">$</span> <span class="n">bundle</span> <span class="nb">exec</span> <span class="n">rake</span> <span class="ss">db</span><span class="p">:</span><span class="n">migrate</span>
</span></code></pre></td></tr></table></div></figure>
<p>This will create the table in your database, and you never have to write a single line of SQL, now that’s awesome!</p>
<h4>gooses table</h4>
<table class="table">
<tr>
<th>id</th>
<th>name</th>
<th>height</th>
<th>created_at</th>
<th>updated_at</th>
</tr>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</table>
<p>As you can see above, the rails automaically added <em>id</em> , <em>created_at</em>, and <em>updated_at</em> columns.</p>
<p><p>Now that we have a table set up all we have to go is create a model to go with it. Remember, the model is there to get data out of that table. Here is what the <em>Goose</em> model will look like .</p>
<p><figure class='code'><figcaption><span>Goose Model</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Goose</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure></p>
<p>I know there’s not much to that, but it’s all you’ll need to interact with the gooses table. There are 2 things to remember when creating this model.</p>
<ul>
<li>the file name must be singular and in snake_case</li>
<li>the class name must be singular and in CamelCase</li>
</ul>
<p>This model will give the entire application access to several getter and setter as well as other methods for objects created from the Goose class. And several methods that can be used on the Goose class. Some examples are:</p>
<ol>
<li> goose.name</li>
<li> goose.name =</li>
<li> Goose.first</li>
<li> Goose.find(2)</li>
<li> Goose.new(name: ‘fred’, height: ‘10’)</li>
</ol>
<p>In this post I talked a little about the MVC pattern in rails, the flow of Rails, creating tables with migrations, and models. In the next post I’ll talk about model associations.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Putting It All Together. Web Development With Ruby, HTTP, Ajax , MVC With Sinatra]]></title>
<link href="http://doug7410.github.io/blog/2014/06/17/putting-it-all-together-HTTP-MVC-Ajax-and-Sinatra/"/>
<updated>2014-06-17T12:20:36+00:00</updated>
<id>http://doug7410.github.io/blog/2014/06/17/putting-it-all-together-HTTP-MVC-Ajax-and-Sinatra</id>
<content type="html"><![CDATA[<p><img src="http://www.duskyswondersite.com/wp-content/uploads/2014/07/North-Queensferry-Fife-Scotland-by-David-Cation.jpg"></p>
<p>I just finished up <a href="http://www.gotealeaf.com">Tealeaf Academy</a> course 1 of 3 . It’s has been an outstanding learning experience! I feel like I’ve come really far as a programmer, and I can take on small projects in Ruby on my own. When I say small projects I mean a simple program that doesn’t require a database (databases are in course 2), like a game. I’ve done blackjack and tic-tac-toe, so I guess the next game could be something like checkers or hangman. If you have any ideas feel free to leave them in the comments. Maybe we could collaborate on a game or other small project. It might be a fun side project.</p>
<p>Anyway….here’s a recap of what I’ve learned since my last post. Here is the <a href="http://infinite-waters-7065.herokuapp.com">Blackjack Game</a> I made while learning all of these things. <!--more--></p>
<h2>HTTP</h2>
<p>The heart of web development is HTTP. It’s a stateless protocol for communicating between distributed systems. In the case of web development it’s usually a server and a client (browser). <a href="http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177">This article</a> goes into detail about HTTP.</p>
<h2>Sinatra</h2>