Building Web Apps with Sinatra Course (How To)

Sinatra is the second-most popular web framework written in Ruby (after Rails). It's much simpler than Rails, and it's a great way to try out web development.

What you'll learn

• Sinatra
• HTTP Requests
• ERB Templates

Your First Sinatra App

Sinatra is a simple web framework. We'll discuss exactly what that means, and how Sinatra can help you build web apps. Then we'll install Sinatra, and try out a simple app.

Chevron 7 steps

• Introduction

  1:16

• Your First App

  7:25

• Your First Test of Your App

  6 questions

• Requests and Responses

  5:44

• Requests and Responses

  7 questions

• Hello, Sinatra!

  3 objectives

• Multiple Routes in the Same App

  2:41

ERB Templates

Sinatra has a feature that makes it easy to load text in from files: ERB templates. ERB stands for "Embedded Ruby". It allows you to take a text file, such as an HTML template, that always shows the same static text, and embed Ruby code into it, that displays changing dynamic data.

Chevron 12 steps

• The Root Path

  2:39

• Root Path

  2 objectives

• Getting HTML from a Template

  2:19

• Loading ERB Templates

  1 objective

• Loading Text Files

  2:43

• URL Parameters

  4:19

• URL Parameters

  1 objective

• ERB Tags

  7:15

• ERB Tags

  1 objective

• Embedding Page Data with ERB

  4:22

• Embedding Instance Variables

  3 objectives

• ERB

  5 questions

Adding New Data

Our users can view pages that we've created for them. But a major feature of a wiki is the ability for users to create their own pages, and they can't do that yet. So let's fix that. Our next task is to set up a form so that users can create their own pages.

Chevron 10 steps

• Saving Text Files

  3:20

• Route Priority

  3:58

• Route Priority

  1 objective

• HTML Forms

  5:18

• An HTML Form

  3 objectives

• HTML Forms

  4 questions

• Submitting the Form

  3:38

• A Route for POST Requests

  8:47

• Submitting the Form Via POST Request

  4 objectives

• Submitting a POST request

  6 questions

Updating Data

In this stage, we'll need to set up another pair of new Sinatra routes. The first route will accept GET requests and return an HTML form for a wiki page, just like before. The difference is that this HTML form will be pre-populated with an existing page's content. The second route will accept the completed form data, also just like before. But since we're updating existing data on the server, we need to send a PUT request, not a POST request.

Chevron 5 steps

• A Form to Edit an Existing Page

  7:32

• An Edit Form

  4 objectives

• A Route for PUT Requests

  6:43

• Submitting the Edit Form Via PUT Request

  6 objectives

• Submitting a PUT request

  5 questions

Finishing Touches

We can add new wiki pages, show pages we've added, and then update them. The only thing missing now is the ability to delete pages. Let's add that now. We'll also show you how to serve a static CSS file to make your site look more appealing. Finally, we'll link to that CSS file from every page on our site using a Sinatra layout.

Chevron 8 steps

• Deleting Pages

  5:17

• A DELETE Request

  6 objectives

• Serving a Static CSS File

  3:30

• Referencing a Static File

  1 objective

• Layouts

  5:12

• Layouts

  1 objective

• Finishing Touches

  6 questions

• Summary

  1:10