Ruby Sinatra table from MySQL

I am currently working on a project where I have to pull data from a MySQL database and display the data in a table using Ruby Sinatra.

I was able to connect to the database and pull the data and put it inside an array.

Example of table in database

City Country Dallas USA Tokyo Japan

Example of what array looks like

["Dallas, USA", "Tokyo, Japan"]

Now, how would I display the array to look exactly like the table from the database. Or, is there a way where I can completely copy the table from the database onto the webpage?

Thanks for the help!

Answers


your_app/routes.rb:

require 'sinatra'
require 'slim'

get '/' do

  raw_data = [
    "Dallas, USA", 
    "Tokyo,Japan", 
    "Munich,    Germany",
  ]

  @results = {}

  raw_data.each do |item|
    city, country = item.split(/, \s* /x)
    @results[city] = country
  end

  p results # {"Dallas"=>"USA", "Tokyo"=>"Japan", "Munich"=>"Germany"}

  slim :index 

end

your_app/views/layout.slim:

doctype html 
html
  head 
    meta charset="utf-8"
    title Test
    css:
      th {text-align:left}
      table {width: 15em}
  body 
    h1 This is the Layout.  Find me in your_app/views/layout.slim
    == yield 

Note the css, which left aligns the column headers--otherwise the column headers will be centered.

your_app/views/index.slim:

table 
  thead
    tr
      th City
      th Country

  tbody
  - @results.each do |city, country|
    tr
      td = city
      td = country

Result:

Edit:

To use the jquery program tablesorter, download tablesorter, then unzip/untar it, then move the newly created directory, tablesorter-master, into the directory your_app/public/.

You can use these files:

your_app/views/layout.slim:

doctype html 
html
  head 
    meta charset="utf-8"
    title Test
    link rel="stylesheet" type='text/css' href="tablesorter-master/themes/green/style.css"
  body 
    h1 This is the Layout.  Find me in your_app/views/layout.slim
    == yield 

    script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" !<= the link
    script src="tablesorter-master/jquery.tablesorter.js"
    script src="hookup_tablesorter.js"

your_app/public/hookup_tablesorter.js:

$(document).ready(function() 
  { 
    $("#myTable").tablesorter(); 
  } 
); 

your_app/views/index.slim:

table id="myTable" class="tablesorter"
  thead
    tr
      th City
      th Country

  - @results.each do |city, country|
    tr
      td = city
      td = country

Note the changes above. Slim adds a tbody tag automatically, therefore explicitly adding a tbody tag in the Slim template creates two tbody tags which screws up tablesorter.

Then you will see this:

And clicking on the column headers will sort the rows. You need an internet connection to link to the jquery file. As an alternative, you can download jquery, and put it in the directory your_app/public/, then link to it:

doctype html 
html
  head 
    meta charset="utf-8"
    title Test
    link rel="stylesheet" type='text/css' href="tablesorter-master/themes/green/style.css"
  body 
    h1 This is the Layout.  Find me in your_app/views/layout.slim
    == yield 

    script src="jquery.min.js"
    script src="tablesorter-master/jquery.tablesorter.js"
    script src="js_ready.js"

If you don't like that table style, tablesorter also has a blue theme:

And people have created other styles.


Need Your Help

how to insert div/textarea inside html5 shapes like rectangle.?

javascript html html5

I am working on a HTML5 project in which i have to make text with its boundary. I am using ctx.strokeRect(x,y,width,Height) to draw rectangle. My shape(rectangle) is resizable. I want to insert tex...

Alphabetizing a List

autohotkey alphabetical alphabet alphabetical-sort

I'm looking for a way to truly alphabetize a list. Assuming it's a list of basic words, such as:BlackGreenThe RedBlueWaxyLivingPorousSolidLiquidVioletIs there a way to modify this code to alphabeti...