Laboratorium 9

Pracujemy w express

Zmiana tematyki. Od dziś memy. Zadanie (dzisiejsze) będzie polegać, na przygotowaniu serwera dla giełdy memów (dla potrzeb tego zadania mem to obrazek, który ma określoną wartość danego dnia).

Lista memów może być ustalona przez programistę w kodzie na sztywno (na przykład dziesięć memów)

Zadanie:

• przygotuj stronę główną wyświetlającą trzy najdroższe aktualnie memy
• pozwól użytkownikowi wyświetlać historię cen każdego z memów
• pozwól dowolnemu użytkownikowi, zmieniać ceny memów

Jak wyświetlić memy na stronie głównej

Załóżmy, że potrafimy otrzymać następującą tablicę:

const most_expensive = [

{'id': 10,

'name': 'Gold',

'price': 1000,

'url': 'https://i.redd.it/h7rplf9jt8y21.png'},

{'id': 9,

'name': 'Platinum',

'price': 1100,

'url': 'http://www.quickmeme.com/img/90/90d3d6f6d527a64001b79f4e13bc61912842d4a5876d17c1f011ee519d69b469.jpg'},

{'id': 8,

'name': 'Elite',

'price': 1200,

'url': 'https://i.imgflip.com/30zz5g.jpg'}

]

Nasza aplikacja expresowa będzie korzystać z szablonów (było/będzie na wykładzie, jest tu: https://pugjs.org/api/getting-started.html). Musimy je zainstalować npm'em, A następnie w kodzie wpisać następujące instrukcje:

app.set('view engine', 'pug');

app.get('/', function(req, res) {

    res.render('index', { title: 'Meme market', message: 'Hello there!', memes: most_expensive })

});

W tym momencie nasza aplikacja wie, że jeśli ma zaserwować zasób / to powinna w katalogu views poszukać pliku index.pug a następnie powinna go zinterpretować i wyświetlić go użytkownikowi. Początkową wersję pliku mamy poniżej:

html

    head

        title= title

    style

        include style.css

    body

        h1= message

        img(src="http://www.mimuw.edu.pl/")

        h1="Meme list"

        ul

            each meme in memes

                li

                   a(href="meme/" + meme.id) #{meme.name}

                   img(src=meme.url)

Próbujemy odpalić i nie działa. Brakuje pliku style.css, więc tworzymy go (może być pusty) i uruchamiamy jeszcze raz. Powinna się wyświetlić strona z trzema memami. Wygląda kiepsko, więc popracujmy nad nią.

Zadania (dla studenta):

• Napisz obiektowy kod, który będzie (w pamięci) przechowywał listę memów wraz z historią ich cen, i będzie potrafił zwrócić listę trzech najdroższych memów
• Wybierz ładnego mema, który wyświetli się powyżej Meme list
• Popraw listę wyświetlanych memów:
  • obrazek nie powinien być wielki (możesz zmniejszyć w css)
  • powinna się wyświetlać cena

Jak wyświetlić historię cen

Przydałoby się, żeby po kliknięciu na mema (meme/:memeId) można było wyświetlić jego historię

app.get('/meme/:memeId', function (req, res) {

   let meme = get_meme(req.params.memeId);

   res.render('meme', { meme: meme })

})

Zadania (dla studenta):

• Napisz funkcję get_meme, która zwraca mema z historią jego cen w oparciu o id
• Napisz szablon w PUG, który wyświetla tablicę (czyli tag HTML table) z historią cen posortowaną od najnowszych do najstarszych

Jak zmienić cenę

Pod tym samym adresem co wyświetlanie historii cen, powinien się pojawić formularz do zmiany cen (ale dostępny jako metoda POST)

app.use(express.urlencoded({

extended: true

})); 

app.post('/meme/:memeId', function (req, res) {

   let meme = get_meme(req.params.memeId);

   let price = req.body.price;

   meme.change_price(price);

   console.log(req.body.price);

   res.render('meme', { meme: meme })

})

Musimy powiedzieć expresowi, że chcemy umieć używać formularzy (app.use(express....))

Zadania (dla studenta):

• Dodaj do szablonu z poprzedniego punktu formularz zmiany cen
• Napisz funkcję change_price

To zadanie należy oddać do 22 maja