ďťż

[CSS] Głosowanie za pomocą gwiazdek CSS bez JS - problemy

Podstrony

telcocafe

Kod opieram o ten samouczek: http://www.webpassion.pl/tut_7.html

Chcę to zrobić trochę inaczej. Kod HTML: http://www.unit1.pl/pb-872 i CSS: http://www.unit1.pl/pb-871
Aktualnie używam 2 grafik, lecz chyba połączę je w 1 plik. Z background-position: nie będzie problemu. Po najechaniu na kolejne gwiazdki zapala się tylko 1 - ta, nad którą znajduje się kursor myszy - mimo z-index. Do tego <ul> nie mieści się w komórce tabeli - być może overflow: hidden w <td> rozwiąże sprawę, lecz wolałbym zastosować jakiś parametr w arkuszu CSS.

Teraz najważniejsze - jak przekazać aktualną ocenę do arkusza CSS? Na przykład jeżeli średnia ocena wynosi 4, powinny świecić się 4 gwiazdki. Można to zrobić przez nadanie klasy, lecz jak to poprawnie zrobić bez kombinowania? Może są lepsze metody?

A spójrz na ten kod. Trzy gwiazdki (jeśli małe, zawsze można przerobić kod), kod xHTML jest krótszy (to, co Ty lubisz) i na pewno nie niesemantyczny. Jest też aktualna pozycja (na listach trudniej by to było uzyskać). A przykład możesz zobaczyć tutaj.
BTW Co Ty za system głosów robisz na tabeli? :-P

Ciekawy skrypt. Zacząłem jednak wcześniej tworzyć ocenianie na listach. Demo: http://skocz.pl/testgwiazdek

Niestety w IE nie działa ul:hover.

PS. Może zamiast <a> lepiej postawić <input type="image" /> zawarty w <form>? Lepiej wysyłać dane za pomocą POST, a skrypt ma działać także z wyłączonym JS. Co lepsze?

Czemu chcesz to opierać na formie? Chyba nikt tego nie robi.
A można też zrobić głosowanie z obsługą Ajaksa i bez. Po prostu w zdarzeniu onclick wysyłasz dane Ajaksem i wrzucasz return false. Osoby z wyłączoną obsługą JS lub nawet bez obsługi Ajax będą głosowały z przeładowaniem strony, a w przeciwnym wypadku Ajax.

Operacje typu: dodaj, zmień, usuń powinny być uruchamiane metodą POST dla bezpieczeństwa. Nie wiem, czy w tym przypadku to istotna kwestia. Nawet niewinny link z zachęcającym napisem może zachęcić zarejestrowanego użytkownika do kliknięcia - nieświadomie odda głos. Można też sprawdzać HTTP_REFERER. Jeżeli jednak gdzieś trafi się XSS, atakujący wyśle nawet formularz za pomocą JS.

Od tego masz walidację danych, a Ajax/JS jest powszechnie używany przy tego typu widżetach głosowania.

Operacje typu: dodaj, zmień, usuń powinny być uruchamiane metodą POST dla bezpieczeństwa.
A jak Ty chcesz dodać newsa przez GET? Przecież to nielogiczne.

Można też sprawdzać HTTP_REFERER.
Referera mam wyłączonego dla wygody, bezpieczeństwa i oszczędności, więc to nie jest najlepszy pomysł.

Od tego masz walidację danych Walidacja danych nie pomoże, jeżeli użytkownik kliknie w link o tym samym adresie, który zawiera 1 z gwiazdek. Po prostu zagłosuje nieświadomie. Może wyjaśnię na przykładzie:<a href="vote.php?id=500&ocena=1">Cud na boisku - Polacy wygrali 5:0</a> <img src="vote.php?id=4&ocena=5" /> - tak, z dowolnego miejsca w InternecieNie wiem, jakie rozwiązanie można wymyślić poza sprawdzaniem HTTP_REFERER lub wysyłanie oceny metodą POST. Problem w tym, że skrypt MUSI działać też z wyłączoną obsługą JS (chyba, że lepiej przygotować zastępczy formularz niż gwiazdki).

A nawet niech sobie zagłosuje i co to zmieni? Plus zazwyczaj głosowanie wymaga zalogowania :)

Chyba że tak. Ale mimo wszystko, czemu nie może być JS? Świad prze do przodu, nawet Opera Mini "obsługuje" JS, więc czemu masz go nie wykorzystywać? Możesz stosować jakieś algorytmy, typu klucz dnia - to zawsze pomoże. Raz na dzień zmieniasz użytkownikowi klucz w ciastku i podczas głosowania pobierasz klucz przez link i ciastko. A jeśli nie chcesz śmiecić ciastkami, to ustawiasz klucz po stronie serwera, ale tutaj mogą mieć problem osoby chcące zagłosować w czasie zmiany klucza. Choć tych możnaby poinformować odpowiednim komunikatem z prośbą o powtórzenie. I problem z głowy, czyż nie?

Głosowanie bez logowania też będzie możliwe. :) Nawet gdyby trzeba było zalogować się, problem istnieje dalej - o ile użytkownik jest w danej chwili zalogowany, a to bardzo możliwe - na pewno włączył opcję "Pamiętaj mnie".

Nie, tak nie można podejść do problemu. Ktoś może wykorzystać lukę i podwyższyć ocenę wybranej pozycji, umieszczając obrazek o URL = adres.strony/vote.php?mark=5, albo działać komuś na złość, obniżając ocenę jego pracy.

Najlepiej wysyłać ocenę metodą POST. Tylko zostaje pytanie:
A. zastosować alternatywny formularz dla użytkowników bez JS
B. oprzeć głosowanie o <input type="image" />, ale prawdopodobnie tracę kontrolę nad gwiazdkami w CSS

Chociaż w przypadku POST też jest zagrożenie, że trafisz na stronę ze złośliwym skryptem JS. Jest ono znacznie mniejsze.

Świat prze do przodu, nawet Opera Mini "obsługuje" JS Wciąż w niektórych biurach obsługa JS jest wyłączona. Chociaż... Może rzeczywiście nie ma co przejmować się tym, że internauci bez JS nie będą mogli zagłosować? Nie zrobią tego w biurze, uczynią w domu. Problem może być w telefonach komórkowych i w palmtopach - nie wszystkich. Co o tym myślicie?

Właściwie w YouTube oraz w Fakty.interia.pl nie działa głosowanie bez JS.

Albo jeszcze jedno wyjście... Generować gwiazdki za pomocą JS, a domyślnie wyświetlać tylko ocenę z linkiem do alternatywnego formularza.
Użytkownik Ferrari edytował ten post 08 wrzesień 2008, 19:14
Lanie wody nie wiadomo o czym i po co. Jak to ma być jakieś sensowne głosowanie to raczej dany user powinien głosować raz. Lub też jeżeli mogą robić to anonimy - 1 głos na IP. I przejmowanie się że ktoś zagłosuje przez jakiś link - a niech sobie zagłosuje, na serwisach nastolatko-społecznościowych jest to popularne rozwiązanie. Głosowanie "gwiazdkowe" w sieci jest w 2000 przykładach i nie widzę zupełnie jaki może tu być problem, no chyba że ktoś musi iść pod górę.

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL