Download - Intro to Web Development from Bloc.io
![Page 1: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/1.jpg)
http://gitbookio.github.io/javascript/
![Page 2: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/2.jpg)
IntroAbout Doug
● Not a C.S. major!● Bloc engineer & former Bloc student● School > Film > Marketing > Engineering● Previously worked at New Relic, Get Satisfaction, and 99designs● Author of RubyKin
![Page 3: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/3.jpg)
Intro
We will cover:
1. The basics of a Web Application2. Understanding MVC, CRUD and other key concepts3. How to get your first app online with Heroku
![Page 4: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/4.jpg)
Behind the scenes of a web app
MVC
DBs
CRUD
![Page 5: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/5.jpg)
Requests
WebApplication
CRUD
![Page 6: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/6.jpg)
Get, Post, Put, DeleteWhat do users do with a web application?
aka CRUD
GET
Read
POST
Create
PUT
Update
DELETE
Destroyhttp://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods
![Page 7: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/7.jpg)
our MVC application
http://www.essenceandartifact.com/2012/12/the-essence-of-mvc.html
![Page 8: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/8.jpg)
http://www.essenceandartifact.com/2012/12/the-essence-of-mvc.html
Model View Controller
![Page 9: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/9.jpg)
Model Controller View
http://www.essenceandartifact.com/2012/12/the-essence-of-mvc.html
![Page 10: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/10.jpg)
Requests & Resources
Model Controller View
![Page 11: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/11.jpg)
Application Files
app● assets
○ images○ stylesheets○ javascripts
● controllers● models● views
![Page 12: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/12.jpg)
Creating Web CRUD apps
Rails
A web framework written in Ruby.
Django
A web framework written in Python.
http://rubyonrails.org/
![Page 13: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/13.jpg)
ViewsHTML
CSS
JavaScript
Hello World!
![Page 14: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/14.jpg)
ViewsHTML
CSS
JavaScript
Haml
Sass
CoffeeScript
![Page 15: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/15.jpg)
Controller & View Sublime (text editor)
![Page 16: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/16.jpg)
Routes => Controller => View
![Page 17: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/17.jpg)
Sublime, Git & Heroku
HerokuGit & GitHubText Editor
![Page 18: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/18.jpg)
![Page 19: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/19.jpg)
Let’s make a Rails App!
http://docs.railsbridge.org/installfest/choose_your_operating_system
Terminal
Install Guide
![Page 20: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/20.jpg)
Let’s make a Rails App!rails new ‘your project name’
Open my_app
![Page 21: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/21.jpg)
Controllers
http://guides.rubyonrails.org/command_line.html
Terminal (Shell)
![Page 22: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/22.jpg)
Controllers
http://guides.rubyonrails.org/command_line.html
Sublime (text editor)
![Page 23: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/23.jpg)
Controllers Terminal (Shell)
http://guides.rubyonrails.org/command_line.html#rails-server
![Page 24: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/24.jpg)
Controllers
http://guides.rubyonrails.org/command_line.html#rails-server
Web Browser
![Page 25: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/25.jpg)
Routes
http://guides.rubyonrails.org/routing.html
Sublime (text editor)
![Page 26: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/26.jpg)
Git● Git
○ Revision control and pushing to Heroku
![Page 27: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/27.jpg)
Github
https://help.github.com/articles/create-a-repo
Browser
● Github○ Repository online and pushing to Heroku
![Page 28: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/28.jpg)
Github
https://help.github.com/articles/create-a-repo
Terminal (shell)
![Page 29: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/29.jpg)
Heroku
https://toolbelt.heroku.com/
Terminal (shell)
● Heroku client○ CLI tool for creating and managing Heroku apps
![Page 30: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/30.jpg)
Postgres
http://docs.railsbridge.org/installfest/deploy_a_rails_app
![Page 31: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/31.jpg)
Heroku
https://devcenter.heroku.com/articles/git
Terminal (shell)
![Page 32: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/32.jpg)
Bundle & Push
https://devcenter.heroku.com/articles/git
Terminal (shell)
![Page 33: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/33.jpg)
Deployed! Terminal (shell)
![Page 34: Intro to Web Development from Bloc.io](https://reader034.vdocuments.us/reader034/viewer/2022051411/54799a555806b571048b46a1/html5/thumbnails/34.jpg)
LinksStart Here! Install Ruby, Rails and more...
http://docs.railsbridge.org/installfest/choose_your_operating_system
Starter Kit for new Rails app with lots of Gems
http://railsapps.github.io/rails-composer
http://www.gitbook.io/
Rails Guides: http://guides.rubyonrails.org/getting_started.html
Codecademy
http://RubyKin.com