Using a bunch of Sinatra, mongodb and carrierwave, we write a simple photo gallery

Good day to all!

Introduction

On writing this post, I was moved by too little material about sinatra, and even more so about this bundle. I hope for someone this post will be useful. Below I will describe how to share sinatra , mongodb and carrierwave , using the example of creating a simple photo gallery. For communication between sinatra and mongodb, we will use a great gem - mongoid . By default, it is assumed that you already have ruby ​​and mongodb installed. Let's get started

Step 1

Install the necessary gem:

 gem install sinatra haml mongoid bson_ext carrierwave carrierwave-mongoid 

')

Step 2

Create a sinatra application:

1. create a directory of our application, let's call it myapp
2. inside the directory create the file index.rb, with the following content:
   

    require 'sinatra' get '/' do 'Hello from Sinatra' end 

   
   
   
3. run
   

    ruby index.rb 

   
   
4. We open in the browser localhost: 4567, we see the inscription “Hello from Sinatra” and we are happy, the basic application sinatra is ready and working
   

Step 3

Set up a connection to mongodb, and create a database to store information in photos in the gallery. Let's write all this 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 
 

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

Create the views directory and add the index.haml templates (to display a list of photos) and show.haml (to display one photo), with the contents:

 #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 
 

#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

Run our application

 ruby index.rb 

go to localhost: 4567 and see the page with the form of adding photos (for now just the photo header), try to write something there and save if everything is preserved and reflected, then go to the next step, where with the help of the carrierwave we organize the loading of images

Step 4

Let's connect and configure carrierwave, in order for this gem to work correctly with mongoid, we need to install another gem carrierwave-mongoid we already installed it at the very beginning. Below is the final file code:
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.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 => ""} 
 

#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} 
 

#show.haml %h1= @image.title %img{:src => @image.image}

restart the application, go to localhost: 4567 and enjoy our application, resize images, edit and delete, I leave it to you for homework)

Sources are here - https://bitbucket.org/vened/imagegallery/src