Jak użyć pliku "oferta.html" z różnym identyfikatorem?

Question

Cześć! Tworzę sklep internetowy i mam plik o nazwie oferta.html (w przyszłości będzie rozwinięcie .php) i w tym pliku szkielet oferty. Tytuł, zdjęcie, cenę itd. będę wyciągał z bazy danych. Każde ogłoszonie będzie posiadać swój identyfikator i tutaj rodzi się pytanie jak wykorzystać ten plik oferta.html na różnych id?

Chodzi mi mniej więcej o to jak zrobić, aby rozwinięcie ścieżki było np: www.my-shop.pl/oferta?id=45 i aby ten id znajdujący się po znaku zapytania ustawiał wszystkie wartości ogłoszenia. Nie robi się przecież oddzielnego pliku dla każdego ogłoszenia.

Jeżeli ktoś wie jak to zrobić  proszę o jakiś trop który pomoże mi w rozwiązaniu problemu. Kodu związanego z tym jeszcze nie posiadam, ponieważ jestem dopiero na etapie planowania :D

 

Jakby coś było niezrozumiałe to napisz - odpowiem. Nie wiedziałem jak ten probelem ująć w słowa, również w wyszukiwarce.

Pozdrawiam.

Answer 1

Chodzi mi mniej więcej o to jak zrobić, aby rozwinięcie ścieżki było np: www.my-shop.pl/oferta?id=45

Jak wyświetlasz listę produktów na stronie "kategorii" to musisz wyciągnąć oferty z bazy danych. W tym celu robisz request GET do backendu i dostajesz w odpowiedzi oferty w jakimś tam formacie. Następnie w pętli* wyświetlasz tę listę już jako HTML iterując po każdym produkcie więc po prostu w miejscu gdzie masz link do strony z pojedyńczą ofertą wstawiaj id produktu wyciągniete z db.

 i aby ten id znajdujący się po znaku zapytania ustawiał wszystkie wartości ogłoszenia 

Na podstronie oferty odpalasz skrypt który "wyciąga" z URLa id i robisz kolejnego GET'a, tym razem pobierającego dane dotyczące konkretnej oferty i na sukces tego requestu wpychasz otrzymane dane do konkretnych divów - nagłówek, zdjęcia, content etc.

 

* Swoją drogą takie frameworki jak angular czy vue bardzo ułatwiają takie wyświetlanie list dzięki dyrektywom takim jak ng-repeat czy v-for

Comments

Swoją drogą takie frameworki jak angular czy vue bardzo ułatwiają takie wyświetlanie list dzięki dyrektywom takim jak ng-repeat czy v-for

No bez jaj... serio podciągałbyś na prodzie całego angulara tylko dla dyrektywy...? Te frameworki są używane z zupełnie innych powodów. Samą iterację to możesz zrobić w vanillaJS bez żadnego problemu choćby metodami Array.prototype czy zwykłą pętlą.

---

A jeśli nawet to raczej polecałbym autorowi tego posta Angulara 6 a nie angularaJS jak Ty to zrobiłeś podając ng-repeat... AngularJS to już stare rozwiązanie spotykane tylko chyba na prodach starych, dużych apek, a i tutaj coraz częściej są robione migracje.

---

No bez jaj... serio podciągałbyś na prodzie całego angulara tylko dla dyrektywy...? 

A kto tak napisał? Czytałeś mój post?

Chyba nie :( więc - w skrócie napisałem, że listy fajnie wyświetla się dyrektywami frameworków jako dodatkowe info łamane na ciekawostke do całego postu tymbardziej, że specjalnie użyłem gwiazdki jako adnotacji bo jest to dodatkowe info, o które OP nie pytał.

 Samą iterację to możesz zrobić w vanillaJS bez żadnego problemu choćby metodami Array.prototype czy zwykłą pętlą.

Pewnie, że może

A jeśli nawet to raczej polecałbym autorowi tego posta Angulara 6 a nie angularaJS jak Ty to zrobiłeś podając ng-repeat... 

Nikomu nic nie polecałem podałem przykład wymieniłem stare ng-repeat i stosunkowo nowe v-for (Vue2), mogłem wymienić też *ngFor.

A jakbym już miał coś polecać to bym polecił właśnie vue2 ze względu na niziutki próg wejścia, idealny framework dla osób początkujących.

---

z vue nie pracowalem i szczerze mówiąc to często spotykam się z opiniami że wcale vue nie jest taki super i wiele osób woli jednak na proda angulara lub reacta, no ale to kwestia indywidualna danego zespołu, chyba że biznes coś narzuca.

Dyskutowalbym natomiast co do tego progu wejscia, wydaje mi się że angular 5/6 również jest prosty do wdrożenia juniorów w większych projektach.

---

 często spotykam się z opiniami że wcale vue nie jest taki super

Cóż istnieją również opinie, że wszystkie te frameworki są do śmieci bo przecież mieszają warstwę HTMLa z JSem właśnie poprzez  użycie dyrektyw - ify, pętle itd w HTML. 

Ja używam Vue i chętnie bym się pospierał na temat czemu vue nie jest super ale musiałbyś podać jakieś argumenty :)

Dyskutowalbym natomiast co do tego progu wejscia, wydaje mi się że angular 5/6 również jest prosty do wdrożenia juniorów w większych projektach.

Myślę, że to jest kwestia indywidualna. Mi też jest ciężko się ustosunkować bo z angularem miałem styczność ostatnio ponad rok temu z drugą wersją, jeszcze wcześniej jakieś 2-3 lata temu używałem angularJS ale uprzedzając odpowiedź wiem, że od drugiej wersji jest to zupełnie przepisany fw.

Co mogę jeszcze dodać dlaczego wydaje mi  się ciężej opanować angulara niż vue ponieważ z angularem bardzo często idzie w parze typescript, którego OP zapewne również nie zna.

---

argumentów nie mam, ja tylko mówiłem co najczęściej słyszę, ale jeśli chcesz to chetnie pogadam o zaletach i wadach różnych frameworkow na osobnym wątku gdyby zebrać jakąś ekipę osób pracujacych z roznymi technologiami. Ten czesto podnoszony próg wejscia to moim zdaniem nie jest w sumie argument za czy przeciw bo tak naprawdę kwestia miesiaca i jesteś w stanie ogarnąć solidne podatawy kazdego frameworka.

Answer 2

W tym przypadku przekazujesz te dane jako query params i na ich podstawie musisz po prostu podciągnąć sobie dane danego produktu. Najczęściej robi się to na back-endzie, a z frontu tylko strzela np. GET, ale jeśli nie chcesz się bawić w back-end to możesz na razie ćwiczeniowo opykać to w JS i wyciągnąć sobie ten parametr. Zastanowiłbym się tylko czy id produktu nie umieścić w path param ale to już kwestia mocno indywidualna.

Poczytaj sobie generalnie o metodach http i zdecyduj się np. na jakąś bazę danych. Jeśli chcesz na razie ograniczać się do frontu to polecam jakąś chmurkę, np. mega prostą i z niskim progiem wejścia bazę mongoDB na mLab.

Answer 3

To dane wysyłane za pomocą metody GET. Poucz się PHP i będziesz wiedział co i jak :)