GithubHelp home page GithubHelp logo

sinatra-routes-readme-teacher-onboarding's Introduction

Routes in Sinatra

Overview

In this lesson, we'll explore routes and how they direct users to different parts of your website

Objectives

  1. Define routes as the part of an application that connects HTTP requests to a specific method in your application code
  2. Construct a route by matching an HTTP method/verb, like GET or POST with a URL-matching pattern
  3. Explain the syntax of routes as Ruby methods that are called with arguments and blocks

What are Routes?

Every time a person clicks on a link, types in a URL, or submits a form, they are making HTTP requests to a specific URL on your application. Routes are the part of an application that connect HTTP requests to a specific method in your application code built to handle responding to such a request (that part of code is called a Controller Action).

Let's say we have a web application that helps doctors track the medications they've prescribed. The doctor would need an easy way to see all the medicines she's prescribed.

In the application's navigation is a link "All Medicines". When the user clicks on that link, it directs the browser via the link's HREF attribute to the URL "/medicines" on the domain. The URL "/medicines" must trigger the method in your application built to load the appropriate medicines and send an HTML response with that list of medicines.

Also in the application's navigation is a link "All Patients". When the user clicks on that link, it directs the browser via the link's HREF attribute to the URL "/patients" on the domain. The URL "/patients" must trigger the method built to load the appropriate patients and send an HTML response with a list of patients.

These mappings are called Routes.

Mapping http://localhost:9393/medicines to a Sinatra Action for a response:

Sinatra Route Example 1

Mapping http://localhost:9393/patients to a Sinatra Action for a response:

Sinatra Route Example 2

Users interact with our application by requesting specific URLs via HTTP. URLs are the interface to a web application.

How does our application know what to show a user based on the web request they sent? Through the routes we program in our application. Being able to draw a route in a web application to respond to an HTTP request is the absolute first step in building anything on the web.

In Sinatra, a route is constructed by pairing an HTTP method/verb, like GET or POST with a URL-matching pattern, i.e. a string that matches what users type in to their browser when they want to visit our webpage. We'll see an example in just a moment.

How Do Routes Work?

Routes match the web request sent by a client to some code in our application that tells the app what data and templates to send back to the client.

Let's go into more detail on our two routes, /medicines and /patients, from the example application above.

When our doctor types into the browser, http://localhost:9393/medicines, our application gets a request: GET /medicines.

Our Sinatra application will match this request to a route that is defined in a controller.

In Sinatra, a route is an HTTP method paired with a URL-matching pattern. Each route is associated with a block. The matching route defined in the controller would look like this:

get '/medicines' do
	# some code to get all the medicines
	# some code to render the correct HTML page
 end

Once the request has been matched to the route in the controller, called the controller action, then it executes the code inside of the controller action's block, as shown below:

# medicines_controller.rb

get '/medicines' do
  @medicines = Medicine.all

  erb :'medicines/index.html.erb'
end

Advanced: You might be wondering what this line does for us: erb :'/medicines/index.html.erb. We'll learn much more about ERB soon. For now, all you need to know is that that line of code identifies a file that contains a combination of HTML and Ruby code and sends it back to the client to be rendered in the browser.

Let's run through this specific scenario.

  1. The HTTP request verb, GET matches the get method in our controller. The /medicines path in the HTTP request matches the /medicines path in our controller method. Yay! We've successfully matched the request to a controller action!

  2. Once our app has found its match, it will run the code in the block that accompanies the route. In this case, the block will query the Medicine table for all of its medicines. The collection of Medicine instances that such a query returns is stored in the variable @medicines.

  3. Finally, the @medicines collection of objects is rendered via the index.html.erb file: views/medicines/index.html.erb. This file is the HTML (+ some Ruby code––more on that later) that we want our users to see when they request to see all of the medicines. The HTML returned from the template is sent by the controller action as a response to the user.

  4. If no matching route for the web request is found, our application will respond with a 404 informing the user's browser that our application cannot find a match for that request URL.

Breaking Down Route Definition

Now that we know how routes work, let's take a closer look at their syntax.

Sinatra is what is known as a Domain Specific Language, or DSL. A DSL is a specialized, situation-specific language. Sinatra was built expressly for the purpose of creating web applications with Ruby. It is written with Ruby and the code we'll be using to build our Sinatra apps is Ruby code.

The route below:

get '/medicines' do
	# some code to get the medicines and render the correct HTML file
end

is actually a plain old-fashioned Ruby method that is getting called with an argument and a block.

Here, the get method is called with an argument of '/medicines' and is being invoked with a block (the code between the do/end keywords.

Here's another way to write it that might look familiar:

get('/medicines') { some code }

The get , or the post, or delete methods for that matter, will be invoked if Sinatra matches the HTTP method (GET, POST, etc) and the URL, in this case '/medicines', to a route defined in the controller.

Advanced: If you're curious, check out the Sinatra source code, especially that code that defines the #get, #post, #patch and #delete methods.

Resources

View this lesson on Learn.co

View Sinatra Routes on Learn.co and start learning to code for free.

sinatra-routes-readme-teacher-onboarding's People

Contributors

annjohn avatar sophiedebenedetto avatar fs-lms-test-bot avatar pletcher avatar deniznida avatar irmiller22 avatar jmburges avatar lcorr8 avatar drakeltheryuujin avatar nancyko avatar smulligan85 avatar sarogers avatar fislabstest avatar aviflombaum avatar babyshoes avatar victhevenot avatar

Watchers

 avatar  avatar  avatar Bernard Mordan avatar Otha avatar raza jafri avatar  avatar Joe Cardarelli avatar  avatar  avatar  avatar  avatar Matt avatar Antoin avatar  avatar Alex Griffith avatar  avatar Amanda D'Avria avatar  avatar Ahmed avatar Nicole Kroese  avatar Kaeland Chatman avatar Lisa Jiang avatar Vicki Aubin avatar Maxwell Benton avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.