Rails girls - Part 1

Transcript

1. Vinh Nguyen Le PHÁT TRIỂN ỨNG DỤNG WEB VỚI RUBY ON RAILS
2. Command Prompts (CMD) Text editor: Sublime, Atom ... Web browsers: Chrome, Firefox, Opera … Vagrant Virtual Box
4. CÁC CHỨC NĂNG CƠ BẢN Tạo mới, chỉnh sửa, cập nhật, xoá ý tưởng Đăng ảnh cho mỗi ý tưởng Thiết kế giao diện cho ứng dụng
5. mkdir projects cd projects rails new railsgirls rails server -b 0.0.0.0 KHỞI TẠO ỨNG DỤNG
6. Ứng dụng mô hình MVC vào phát triển
7. TẠO MỚI - CẬP NHẬT - XOÁ Ý TƯỞNG rails generate scaffold idea name:string description:text picture:string
9. TẠO CƠ SỞ DỮ LIỆU rake db:create && rake db:migrate
11. HTTP REQUEST URL ACTION MỤC ĐÍCH GET /ideas index hiển toàn bộ các ý tưởng GET /ideas/1 show chi tiết 1 ý tưởng GET /ideas/new new vào page có chứa form tạo ý tưởng mới POST /ideas create tạo ý tưởng mới GET /ideas/2/edit edit vào page có chứa nội dung của ý tưởng cần edit PUT /ideas/2 update cập nhật ý tưởng với nội dung mới DELETE /ideas/2 delete xoá ý tưởng
12. Tạo mới, chỉnh sửa, cập nhật, xoá ý tưởng
13. ĐĂNG TẢI HÌNH ẢNH gem `carierrwave` bundle install rails generate uploader Picture
14. ĐĂNG TẢI HÌNH ẢNH • app/models/idea.rb mount_uploader :picture, PictureUploader • app/views/ideas/_form.html.erb <%= f.file_field :picture %>
15. ĐĂNG TẢI HÌNH ẢNH • app/views/ideas/_form.html.erb <%= form_for @idea, :html => {:multipart => true} do |f| %> • app/views/ideas/show.html.erb <%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>
16. ĐĂNG TẢI HÌNH ẢNH • config/routes.rb root :to => redirect('/ideas') • Truy cập đến http://localhost:3000/
17. Đăng ảnh cho mỗi ý tưởng
18. THIẾT KẾ GIAO DIỆN Twitter Bootstrap 3 (http://getbootstrap.com/)
19. THIẾT KẾ GIAO DIỆN • app/views/layouts/application.html.erb <link rel="stylesheet" href="http://railsgirls. com/assets/bootstrap.css"> <link rel="stylesheet" href="http://railsgirls. com/assets/bootstrap-theme.css">
20. THANK YOU