Всем доброго времени суток!
На написание этого поста меня сподвигло слишком малое количество материала о sinatra, и тем более о данной связке. Надеюсь для кого то этот пост будет полезен. Ниже я опишу как можно совместно использовать sinatra, mongodb и carrierwave, на примере создания простой фотогалереи. Для общения между sinatra и mongodb мы будем использовать отличный gem — mongoid. По умолчанию предполагается что у вас уже установлен ruby и mongodb. Приступим.
Установим необходимые gem:
Создадим sinatra приложение:
Настроим подключение к mongodb, и создадим базу данных, для хранения информации в фотографиях в галлерее. Запишем всё это index.rb:
Создадим диреткорию views и добавим в неё шаблоны index.haml(для отображения списка фотографий) и show.haml(для отображения одной фотографии), с содержимым:
Запускаем наше приложение
заходим на localhost:4567 и видим страничку с формой добавления фотографий(пока просто заголовка фотографии), пробуем что нибудь написать туда и сохранить если всё сохранилось и отразилось, то переходим к следующему шагу, где с помощь carrierwave организуем загрузку изображений
Подключим и настроим carrierwave, для того что бы этот gem правильно работал с mongoid нам необходимо поставить ещё gem carrierwave-mongoid мы его уже установили в самом начале. Ниже конечный код файлов:
index.rb, index.haml, show.haml
перезапускаем приложение, заходим на localhost:4567 и радуемся нашему приложению, ресайз изображений, редактирование и удаление я оставляю вам на домашнее задание)
Исходники лежат здесь — https://bitbucket.org/vened/imagegallery/src
Введение
На написание этого поста меня сподвигло слишком малое количество материала о sinatra, и тем более о данной связке. Надеюсь для кого то этот пост будет полезен. Ниже я опишу как можно совместно использовать sinatra, mongodb и carrierwave, на примере создания простой фотогалереи. Для общения между sinatra и mongodb мы будем использовать отличный gem — mongoid. По умолчанию предполагается что у вас уже установлен ruby и mongodb. Приступим.
Шаг 1
Установим необходимые gem:
gem install sinatra haml mongoid bson_ext carrierwave carrierwave-mongoid
Шаг 2
Создадим sinatra приложение:
- создаём каталог нашего приложения, назовём его myapp
- внутри каталога создаём файл index.rb, со следюущим содержимым:
require 'sinatra' get '/' do 'Hello from Sinatra' end
- запускаем
ruby index.rb
- Откываем в браузере localhost:4567, видим надпись «Hello from Sinatra» и радуемся, базовое приложение sinatra готово и работает
Шаг 3
Настроим подключение к mongodb, и создадим базу данных, для хранения информации в фотографиях в галлерее. Запишем всё это index.rb:
require 'sinatra'
require 'haml'
require 'bson'
require 'mongoid'
#конфигурация базы данных
configure do
Mongoid.configure do |config|
name = "app"
config.master = Mongo::Connection.new.db(name)
config.persist_in_safe_mode = false
end
end
#Создаём документ Image(практически то же самое что и таблица в SQL базе) с атрибутом :title(название фотографии)
class Image
include Mongoid::Document
field :title, type: String
end
#список фотографий
get '/' do
@images = Image.all
haml :'index'
end
#создание новой фотографии
post '/' do
@image = Image.new(:title => params['title'])
@image.save
redirect "/"
end
#показ одной фотографии
get '/image/:id' do
@image = Image.find(params[:id])
haml :'show'
end
Создадим диреткорию views и добавим в неё шаблоны index.haml(для отображения списка фотографий) и show.haml(для отображения одной фотографии), с содержимым:
#index.haml
%h2 Photogallery
%ul.photogallery
-for image in @images
%li
%a{:href => "/image/#{image.id}"}=image.title
%h2 Добавить фотографию
%form{:name => "new_image", :id =>"new_image", :method => "POST", :enctype => "multipart/form-data"}
%p
%label Заголовок фотографии
%br
%input{:type=>"text", :name => "title"}
%p
%input{:type=>"submit", :value => "Сохранить"}
#show.haml
%h1= @image.title
Запускаем наше приложение
ruby index.rb
заходим на localhost:4567 и видим страничку с формой добавления фотографий(пока просто заголовка фотографии), пробуем что нибудь написать туда и сохранить если всё сохранилось и отразилось, то переходим к следующему шагу, где с помощь carrierwave организуем загрузку изображений
Шаг 4
Подключим и настроим carrierwave, для того что бы этот gem правильно работал с mongoid нам необходимо поставить ещё gem carrierwave-mongoid мы его уже установили в самом начале. Ниже конечный код файлов:
index.rb, index.haml, show.haml
#index.rb
require 'sinatra'
require 'haml'
require 'bson'
require 'mongoid'
require 'carrierwave'
require 'carrierwave/mongoid'
#конфигурация базы данных
configure do
Mongoid.configure do |config|
name = "app"
config.master = Mongo::Connection.new.db(name)
config.persist_in_safe_mode = false
end
end
#конфигурация carrierwave
class ImageUploader < CarrierWave::Uploader::Base
storage :file
end
#Создаём документ Image(практически то же самое что и таблица в SQL базе) с атрибутом :title(название фотографии)
class Image
include Mongoid::Document
mount_uploader :image, ImageUploader, type: String
field :title, type: String
end
#список фотографий
get '/' do
@images = Image.all
haml :'index'
end
#создание новой фотографии
post '/' do
@image = Image.new(:title => params['title'])
@image.image = params[:image] #загрузка изображения
@image.save
redirect "/"
end
#показ одной фотографии
get '/image/:id' do
@image = Image.find(params[:id])
haml :'show'
end
#index.haml
%h2 Photogallery
%ul.photogallery
-for img in @images
%li
%a{:href => "/image/#{img.id}"}= img.title
%a{:href => "/image/#{img.id}"}
%img{:src => img.image}
%h2 Добавить фотографию
%form{:name => "new_image", :id =>"new_image", :method => "POST", :enctype => "multipart/form-data"}
%p
%label Заголовок фотографии
%br
%input{:type=>"text", :name => "title"}
%p
%label Изображение
%br
%input{:type=>"file", :name => "image"}
%p
%input{:type=>"submit", :value => "Сохранить"}
#show.haml
%h1= @image.title
%img{:src => @image.image}
перезапускаем приложение, заходим на localhost:4567 и радуемся нашему приложению, ресайз изображений, редактирование и удаление я оставляю вам на домашнее задание)
Исходники лежат здесь — https://bitbucket.org/vened/imagegallery/src