Git Product home page Git Product logo

shopping's Introduction

Practice with Passing Data with Sinatra

In this workshop, we're going to practice passing data between a client and a Sinatra server.

Remember, there are a few different ways to pass data. We'll be focus on passing data via query params (in the url) and via forms.

Query String Parameters

Activity 1

You'll see a route defined in shopping_app.rb that handles requests to the root (/). It's looking for a "name" in the params.

Add something to the url to make the name added in the url appear on the page. Do NOT change any code in the index.erb view.

If you're stuck, research query string parameters. If you're still stuck, scroll down to the bottom for help.

Activity 2

Next, create a route that handles GET requests to /cart (in your server file - shopping_app.rb) that renders the views/cart.erb view template after setting the instance variables necessary. You'll need to pass query string parameters in your url with keys of item and price. Do NOT change the code in the cart.erb view template.

Again, if you're stuck - attempt to do some research on your own, then check the "Hints" section.

Form Parameters

Activity 1

Take a look in views/new_item.erb. You'll see an existing form. Can you identify what each piece of the form does? What currently happens when you launch the server, visit /items/new, and try to submit the form?

Modify the code in the route that handles this request so that the data a user enters in the form is shown on the page after submission.

Activity 2

You'll see a route in your shopping_app.rb to get '/users/new' that renders a view template that's blank. Create a form in this file that will accept a username and password.

Create a route that handles the submission of this form (a POST to /users). Then, create a view that displays the submitted data.

Hints

Query String Parameters

Activity 1

After you launch you're server, type in localhost:4567/?name=YourNameHere. The ? indicates that the data following will be query params. Then, we add key/value pairs using = and separate multiple pieces of data with &.

Activity 2

We need to first create a route to handle this request:

# shopping_app.rb

get '/cart' do

end

Then, we'll need to assign the instance variables requested:

# shopping_app.rb

get '/cart' do
  @item = params["item"]
  @price = params["price"]
end

The above params need to be passed in through the url like so: localhost:4567/cart?item=Apple&price=4.50

Then, we'll need to render the correct view:

# shopping_app.rb

get '/cart' do
  @item = params["item"]
  @price = params["price"]

  erb :cart
end

Form Parameters

Activity 1

The name attribute on the input tags in views/new_item.erb. We can access these keys within params to pull the data that was submitted via the form.

post '/items' do
  @item = params["item"]
  @price = params["price"]

  erb :cart
end

Activity 2

In views/new_user.erb, let's create a form:

<form method="POST" action="/users">
  Username: <input type="text" name="username">
  Password: <input type="text" name="password">
  <input type="submit" value="Submit">
</form>

In our shopping_app.rb, we'll define the route that accepts this data then renders a new view.

# shopping_app.rb

post '/users' do
  @username = params["username"]
  @password = params["password"]

  erb :user
end

In your views/user.erb, you can access @username and @password and display this data!

shopping's People

Contributors

case-eee avatar cjmoore avatar s-espinosa avatar

Watchers

James Cloos 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.