DEV Community

Cover image for Website: Poison
Cicada0315
Cicada0315

Posted on • Edited on

2 3

Website: Poison

Step1: Deciding type of website

I was thinking either making dog website or cocktail website since I love both of them. I ended up deciding cocktail website.

TheCocktailDB API: https://www.thecocktaildb.com/api.php

Step2: Getting Data

I want to get all the cocktails so I used my base as List all cocktails by first letter (https://www.thecocktaildb.com/api/json/v1/1/search.php?f=a) and changed f= as all the alphabet characters. I used gem 'httparty'.

@base_endpoint= "https://www.thecocktaildb.com/api/json/v1/1/search.php?f="
def get_cocktails_data
      char=[*('a'..'z')]
      #delete u and x since api doesn't contain any cocktail.
      char.delete('u') 
      char.delete('x')
      char.each do |alphabet|
        cocktail_url=@base_endpoint+alphabet
        cocktails_array=HTTParty.get(cocktail_url)["drinks"]
        self.create_cocktail_objects(cocktails_array)
      end
end
Enter fullscreen mode Exit fullscreen mode

Step3: Making database

Using rake and sqlite3, created tables(cocktails, users) and added data that I got from API.

rake db:create_migration NAME=create_cocktails
rake db:create_migration NAME=create_users
Enter fullscreen mode Exit fullscreen mode
class CreateCocktails < ActiveRecord::Migration[5.2]
  def change
    create_table :cocktails do |t|
      t.string :name
      t.string :glass
      t.string :ingredient
      t.string :instruction
      t.string :image
    end
  end
end
Enter fullscreen mode Exit fullscreen mode
class CreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      t.string :name
      t.date :birthday
      t.string :email
      t.string :password_digest

      t.timestamps
    end
  end
end
Enter fullscreen mode Exit fullscreen mode
rake db:migrate
rake db:seed
Enter fullscreen mode Exit fullscreen mode

Step4: Building MVC

Model

  1. cocktail.rb (belongs_to user)
  2. user.rb (has_many cocktails)

View

  1. layout.erb
  2. welcome.erb
  3. index.erb
  4. users: new.erb
  5. sessions: new.erb
  6. cocktails:
  • edit.erb
  • index.erb
  • new.erb
  • show.erb

Controller

  1. application_controller.rb
  2. cocktail_controller.rb
  3. sessions_controller.rb
  4. users_controller.rb

Step5: CRUD(Create, Read, Update, Delete)

Create

get '/cocktails/new' do
        redirect_if_not_logged_in
        erb :'cocktails/new'
end

post '/cocktails' do
        cocktail = current_user.cocktails.build(params[:cocktail])

        if cocktail.save
            redirect "/cocktails/#{cocktail.id}"
        else
            flash[:error] = "#{cocktail.errors.full_messages.join(", ")}"
            redirect "/cocktails/new"
        end
end
Enter fullscreen mode Exit fullscreen mode

Read

get '/cocktails' do
        @cocktails = current_user.cocktails
        erb :'cocktails/index'
end

get '/cocktails/:id' do
        @cocktail=Cocktail.find(params[:id])
        erb :'cocktails/show'
end

Enter fullscreen mode Exit fullscreen mode

Update

get '/cocktails/:id/edit' do
        erb :'cocktails/edit'
end

patch '/cocktails/:id' do
        redirect_if_not_logged_in
        redirect_if_not_authorized

        if @cocktail.update(params["cocktail"])
            redirect "/cocktails/#{@cocktail.id}"
        else
            redirect "/cocktails/#{@cocktail.id}/edit"
        end
end
Enter fullscreen mode Exit fullscreen mode

Delete

delete "/cocktails/:id" do
        @cocktail.destroy
        redirect "/cocktails"
end
Enter fullscreen mode Exit fullscreen mode

Step6: Front-end (Making look nicer)

I used below links mostly to make my website look nicer and I got help from Laura Berge and Eriberto Guzman (thank you).

Bootstrap: https://getbootstrap.com/

W3schools: https://www.w3schools.com/

Future

I will make another join table called party which users can share their cocktail list to make a shopping list for the party.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay