How I built my first dynamic web app

redirect_to @artist else render 'new' end enddef destroy @artist.

destroy redirect_to artists_path endprivatedef set_artist @artist = Artist.

find(params[:id]) enddef artist_params params.

require(:artist).

permit(:name, :birthyear, :deathyear) endendTo view the show page for an artist, I was going to have to have the ability to create a new artist, the new action taking the user to a new artist form page — i.

e.

adding a file new.

html.

erb to my app/views/artists file.

This form I built as below:<h1>Add an Artist</h1><br><%= form_for @artist do |f| %><div class="field"> <%= f.

label :name %> <%= f.

text_field :name, :size => 40 %> </div> <br> <div class="field"> <%= f.

label :birthyear, "Year of birth" %> <br> <%= f.

number_field :birthyear, :size => 20, min: 1850, max: 2019 %> </div> <br> <div class="field"> <%= f.

label :deathyear, "Year of death (leave blank for living artists)" %> <br> <%= f.

number_field :deathyear, :size => 20, min: 1870, max: 2019, :value => "" %> </div> <br> <div class="action"> <%= f.

submit "Submit" %> </div><% end %><br><%= link_to 'Home', artists_path %><br>Once artists had been added to the gallery using this form, users could click through to the profile page of an artist, as in artists/show.

html.

erb below, including a conditional if/else statement depending on whether the artist was a living artist or not:<h1 class=”header”><%= @artist.

name %></h1><% if @artist.

deathyear != nil @lifespan = “(“ + @artist.

birthyear.

to_s + “ — “ + @artist.

deathyear.

to_s + “)” else @lifespan = “(“ + @artist.

birthyear.

to_s + “ — )” end %><h3 id=”lifespan”><%= @lifespan %></h3><h4><%= pluralize(@artist.

artworks.

count, ‘artwork’) %></h4><ul> <% @artist.

artworks.

each do |artwork| %> <li><%= link_to artwork.

name, artwork_path(artwork) %></li> <% end %></ul><br><h4><%= link_to ‘Back’, artists_path %></h4><h4><%= link_to ‘Add an Artwork’, new_artwork_path %></h4>At the bottom of this page, I added a link back to the Artists index page, as well as a link to add a new artwork.

This was sending a get request for the new action as in the Artworks controller.

class ArtworksController < ApplicationController before_action :set_artist, only: [:show, :destroy]def index @artworks = Artwork.

all enddef show @artwork = Artwork.

find(params[:id]) enddef new @artwork = Artwork.

new enddef create @artist = Artist.

find(params[:artwork][:artist_id]) @artwork = @artist.

artworks.

create!(artwork_params) if @artwork.

valid?.redirect_to @artwork else redirect_to new_artwork_path end enddef destroy @artwork = Artwork.

find(params[:id]) @artwork.

destroy redirect_to @artist endprivatedef artwork_params params.

require(:artwork).

permit(:name, :artist_id, :year, :image_url) enddef set_artist @artist = Artwork.

find(params[:id]).

artist endendThe form was built in the app/artworks/views folder, adding a file new.

html.

erb for this very purpose.

At this point, I wanted to add the ability to add a photo of the artwork in question, by providing a URL of the image, and this meant I needed a further migration, to add the image URL to an artwork.

This produced the following additional migration file.

class AddImageToArtworks < ActiveRecord::Migration[5.

2] def change add_column :artworks, :image_url, :string endendBack to my new artwork form, I built this as below:<h1>Add an Artwork</h1><br><%= form_for [@artist, @artwork] do |f| %> <div class="field"> <%= f.

label :name, "Name:" %> <%= f.

text_field :name, :size => 50 %> </div> <br /> <div class="field"> <%= f.

label :year, "Year:" %> <%= f.

number_field :year, :size => 15, min: 1850, max: 2019 %> </div> <br /> <%= f.

label :artist_id, "Artist:" %> <br> <%= f.

collection_select :artist_id, Artist.

all, :id, :name %> <br /> <div class="field"> <br> <%= f.

label :image_url, "Add a link to an image of the artwork"%> <br> <%= f.

text_field :image_url, :size => 100 %> <br> <div class="actions"> <br> <%= f.

submit %> </div><% end %><br><h4><%= link_to "Add an artist", new_artist_path %></h4><h4><%= link_to 'Home', artists_path %></h4>This was slightly different to my new Artist form, given the Artwork’s relationship to an Artist.

I needed to call on @artist in order for the form to post the relevant data, that the user would input from a drop down list of existing artists (built using ‘collection_select’ as above).

At this point my index pages had also been developed and saved; everything migrated; my routes were saved in the config/routes.

rb file; and last but not least; I had written a large amount of carefully drafted seed data, which was now seeded using the rails db:seed command.

I added very basic amendments in terms of CSS to improve positioning and stuck to a minimalist design, in line with a contemporary art gallery no less.

Throughout this whole process I was running the server and seeing what was working in the browser and what errors I received throughout the process.

This was very rewarding and the errors given were usually clear and doing this no doubt saved me a lot of time compared to if I had just run the server for the first time after I had built everything listed and shared above.

My app will be online shortly and I’ll share the link but for now, here are a few images of how it looks, such as the index page below with the artists in my gallery:Here is how one of the artist profile pages looks, with links to the artworks’ profile pages:At the bottom of that page, there is a link to add an artwork.

Clicking on that will take you to the page below, where you can select which artist the artwork is by.

Finally, once you have created an artwork it will take you to the profile page for the artwork, with a nice image showing on the page, taken from the URL you have added:As another example, here another artwork profile page, by a different artist this time:Et, voila!.This might not be a work of art when it comes to software engineering, but for a very first dynamic website, I think I am quite rightly proud of this one for now.

I can look back on this in the future and cringe, but today it’s another step along the way in learning to code.

I encourage you all to start your own projects and keep them simple and achievable.

.. More details

Leave a Reply