Agile Web Development Using Rails 6/

...

/

Making Prettier Listings

Making Prettier Listings

Learn to apply some styling to the existing list of products.

We'll cover the following...

Our customer has one more request. The listing of all the products is ugly. Can we pretty it up a bit? And, while we’re there, can we also display the product image along with the image URL?

Before we get too far, it would be nice if we had a consistent set of test data to work with. We could use our scaffold-generated interface and type data in from the browser. However, if we did this, future developers working on our codebase would have to do the same. If we were working as part of a team on this project, each member of the team would have to enter their own data. It would be nice if we could load the data into our table in a more controlled way. Luckily, we can! Rails has the ability to import seed data.

Adding dummy products

To start, we simply modify the file in the DB directory named seeds.rb.

We then add the code to populate the products table. This uses the create!() method in line 2 of the Product model. The following is an extract from that file. Be warned, this seeds.rb script removes existing data from the products table before loading the new data.

Author’s note: You might not want to run it if you’ve just spent several hours typing your own data into the application!

Press + to interact
Product.delete_all
Product.create!(title: 'Docker for Rails Developers',
  description:
    %{<p>
      <em>Build, Ship, and Run Your Applications Everywhere</em>
      Docker does for DevOps what Rails did for web development—it gives you 
      a new set of superpowers. Gone are “works on my machine” woes and lengthy 
      setup tasks, replaced instead by a simple, consistent, Docker-based 
      development environment that will have your team up and running in seconds. 
      Gain hands-on, real-world experience with a tool that’s rapidly becoming 
      fundamental to software development. Go from zero all the way to production 
      as Docker transforms the massive leap of deploying your app in the cloud 
      into a baby step.
      </p>},
  image_url: 'ridocker.jpg',
  price: 38.00)
# . . .
Product.create!(title: 'Build Chatbot Interactions',
  description:
    %{<p>
      <em>Responsive, Intuitive Interfaces with Ruby</em>
      The next step in the evolution of user interfaces is here. 
      Chatbots let your users interact with your service in their
      own natural language. Use free and open source tools along 
      with Ruby to build creative, useful, and unexpected interactions 
      for users. Take advantage of the Lita framework’s step-by-step 
      implementation strategy to simplify bot development and testing.
      From novices to experts, chatbots are an area in which everyone 
      can participate. Exercise your creativity by creating chatbot 
      skills for communicating, information, and fun.
      </p>},
  image_url: 'dpchat.jpg',
  price: 20.00)
# . . .
Product.create!(title: 'Programming Crystal',
  description:
    %{<p>
      <em>Create High-Performance, Safe, Concurrent Apps</em>
      Crystal is for Ruby programmers who want more performance or for 
      developers who enjoy working in a high-level scripting environment. Crystal 
      combines native execution speed and concurrency with Ruby-like syntax, so 
      you will feel right at home. This book, the first available on Crystal, 
      shows you how to write applications that have the beauty and elegance of a 
      modern language, combined with the power of types and modern concurrency 
      tooling. Now you can write beautiful code that runs faster, scales better, 
      and is a breeze to deploy.
      </p>},
  image_url: 'crystal.jpg',
  price: 40.00)

Note: This code uses %{...}. This ...