mirror of https://github.com/E-Almqvist/hsf
parent
d15112b3c0
commit
0248361e96
@ -0,0 +1,41 @@ |
|||||||
|
#!/usr/bin/ruby -w |
||||||
|
|
||||||
|
require "sinatra" |
||||||
|
require "slim" |
||||||
|
require "sqlite3" |
||||||
|
#1. |
||||||
|
# - Kontrollera gems (sinatra, slim, sqlite). Kommer du behöva sessions? Troligen ej, ska endast utföra CRUD på databasen. |
||||||
|
# - Se hur Slimfiler är organierade i mappstrukturen. Följer det REST? Hur kallar man på en slimfil i en mapp? |
||||||
|
|
||||||
|
#2. Starta upp applikationen och inspektera koden i Chrome (högerklick>inspect). Hur ser länkarna ut? Finns de som routes i app.rb? |
||||||
|
|
||||||
|
#3. När vi klickar på ett album vill vi även se artisten (inte bara id). Gör ett andra anrop till db och skicka med i locals. |
||||||
|
|
||||||
|
#4. Skapa en sida där vi lägger till nya album för tex Artisten ACDC (ArtistId 1). Hitta gärna på nya namn på skivorna |
||||||
|
|
||||||
|
#5. Skapa funktionalitet för att ta bort album |
||||||
|
|
||||||
|
#6. Skapa funktionalitet för att uppdatera artistinformation |
||||||
|
|
||||||
|
|
||||||
|
get "/" do |
||||||
|
slim(:start) |
||||||
|
end |
||||||
|
|
||||||
|
get "/albums" do |
||||||
|
db = SQLite3::Database.new("db/chinook-crud.db") |
||||||
|
db.results_as_hash = true |
||||||
|
result = db.execute("SELECT * FROM albums") |
||||||
|
p result |
||||||
|
slim( :"albums/index", locals: { albums: result } ) |
||||||
|
end |
||||||
|
|
||||||
|
get "/albums/:id" do |
||||||
|
id = params[:id].to_i |
||||||
|
db = SQLite3::Database.new("db/chinook-crud.db") |
||||||
|
db.results_as_hash = true |
||||||
|
result = db.execute("SELECT * FROM albums WHERE ArtistId = ?",id).first |
||||||
|
slim(:"albums/show",locals:{result:result}) |
||||||
|
end |
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
@ -0,0 +1,56 @@ |
|||||||
|
:root { |
||||||
|
--magic-number:2vw; |
||||||
|
} |
||||||
|
|
||||||
|
body{ |
||||||
|
margin:0; |
||||||
|
background: rgb(131,58,180); |
||||||
|
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); |
||||||
|
font-family:Arial, Helvetica, sans-serif; |
||||||
|
font-weight:500; |
||||||
|
color:white; |
||||||
|
position:relative; |
||||||
|
} |
||||||
|
|
||||||
|
nav { |
||||||
|
height:100px; |
||||||
|
background:rgba(80,80,80,0.2); |
||||||
|
display:flex; |
||||||
|
justify-content: space-around; |
||||||
|
align-items:center; |
||||||
|
} |
||||||
|
|
||||||
|
nav a, nav a:link { |
||||||
|
color:black; |
||||||
|
text-decoration:none; |
||||||
|
text-transform:uppercase; |
||||||
|
font-size:1.2em; |
||||||
|
font-weight:900; |
||||||
|
opacity:0.5; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
img { |
||||||
|
position:fixed; |
||||||
|
bottom:0; |
||||||
|
right:0; |
||||||
|
width:25vw; |
||||||
|
margin:0 var(--magic-number) var(--magic-number) 0; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
h1 { |
||||||
|
margin:var(--magic-number); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
a, form { |
||||||
|
display:inline-block; |
||||||
|
margin:10px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 6.6 KiB |
@ -0,0 +1,10 @@ |
|||||||
|
h1 All Albums |
||||||
|
|
||||||
|
|
||||||
|
ol |
||||||
|
- albums.each do |album| |
||||||
|
li |
||||||
|
a href="albums/#{album['AlbumId']}" #{album["Title"]} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,4 @@ |
|||||||
|
h1 = result |
||||||
|
|
||||||
|
p Albumet som du har sökt efter heter #{result["Title"]}. |
||||||
|
p Artisten som du har sökt efter heter #{result["ArtistId"]}. |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
html lang="en" |
||||||
|
head |
||||||
|
meta charset="UTF-8"/ |
||||||
|
meta name="viewport" content="width=device-width, initial-scale=1.0"/ |
||||||
|
meta http-equiv="X-UA-Compatible" content="ie=edge"/ |
||||||
|
link rel="stylesheet" href="/css/style.css"/ |
||||||
|
title Document |
||||||
|
body |
||||||
|
img src="img/love.png" alt="musik listener"/ |
||||||
|
|
||||||
|
nav |
||||||
|
a href="/" Start it |
||||||
|
a href="/albums" Visa alla album |
||||||
|
==yield |
||||||
|
|
||||||
@ -0,0 +1 @@ |
|||||||
|
h2 Welcome to Music zite! |
||||||
Loading…
Reference in new issue