Here's some reference material about ruby basics.

Arrays and Hashes

array = [1,2,3,4,5] # => [1,2,3,4,5]
array.pop # => 5
array # => [1,2,3,4] The array has been modified by the pop method
hash = {key1: 'value1',key2: 'value2',key3: 'value3'} # => {:key1=>"value1", :key2=>"value2", :key3=>"value3"}
hash.keys # => [:key1, :key2, :key3]
hash.values # => ["value1", "value2", "value3"]

Conditional Statements

time = Time.now
hour = time.hour
# a conditional that tells youn what time of day it is
if hour > 17
  puts "Evening"
elsif hour > 12
  puts "Afternoon"
else
  puts "Morning"
end

Iterators and Loops

array = [1, 2, 3, 4, 5]
new_array = []
array.each do |val|
  new_array << val # adds val to new_array
end
new_array # => [1, 2, 3, 4, 5]

# loops through ten times and outputs the numbers 1 through 10
i = 1
while i <= 10
  puts i
  i += 1
end

# does the same as above
i = 1
10.times do
  puts i
  i += 1
end

Methods

# defines a new method that outputs "Hello World!"
def hello_world
  puts "Hello World!"
end
hello_world # outputs "Hello World!"

# method that takes a parameter
def say(message)
  puts message
end
say("Hello World!") # outputs "Hello World!"

Object Oriented Programming

class Furniture
  attr_accessor :materials # allows for modification

  def initialize
    @materials = []
  end

  def pick_materials(material)
    self.materials << material
  end

  def print_materials
    p materials
  end
end

new_furniture = Furniture.new # instantiates new object from Furniture class
new_furniture.pick_materials('wood')
new_furniture.pick_materials('metal')
new_furniture.pick_materials('fabric')
new_furniture.print_materials # => ["wood", "metal", "fabric"]

Using Sinatra to Create a Web App with Ruby

Sinatra is a framework that uses Ruby to create simple quick web applications. Learn more about sinatra here: http://www.sinatrarb.com

# use get method for rendering content
get '/about' do
  "This is a page about nothing"
end

# use an erb template to render content
get '/about' do
  erb :about
end

In the views directory create a file called about.erb with the following:

<h1>About</h1>
<p>This page is about nothing</p>

Post method to get variables from a submitted form

post '/post' do
  form_variable = params[:form_variable]
end

Adding AJAX

Let's say we have an html form that we would like submit and replace some html on the page without refreshing the page. We can do this with ajax. Let's say our about.erb template part is something like the following:

<div id="about">
  <h1>About</h1>
  <p>Here's a page about nothing</p>
  <form method="post" action="">
    <input type="submit" id="submit" value="Submit">
  </form>
</div>

Since it's a page about nothing, let's make another template part called about_new.erb with the following:

<div id="about">
  <h1>About</h1>
  <p>Here's a page about something</p>
</div>

Our sinatra methods are created below. The post method is used on about-new route so that it can handle the ajax request.

get '/about' do
  erb :about
end

post '/about-new' do
  erb :about_new
end

Finally, create a javascript file to perform the ajax request when the submit button is clicked.

$(document).ready(function() {
  $(document).on("click", "#submit", function() {
    $.ajax({
      type: 'POST',
      url: '/about-new'
    }).done(function(msg){
      $("#about").replaceWith(msg);
    });
    return false;
  });
});

Also, make sure to load jquery and the javascript file like so:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/application.js"></script>

And that's how to use AJAX in combination with sinatra.