Forum PHP.pl

jQuery jest trudniejsze i bardziej skomplikowane niż się wydawało, a wydawało się naprawdę trudne...
Pomijam fakt, że w sieci brak zgrabnego gotowca (jQuery, AJAX, PHP5.6) najprostszego systemu głosowania +/- 1 dla np. komentarza. (albo nie umiem szukać)

Na podstawie kilkunastu różnych kodów z Internetu zlepiłem jeden funkcjonalny skrypt, który (po kliknięciu) ma za zadanie:
1. przyznać ocenę +1 (tj. zwiększyć zawczasu, sztucznie licznik aktualnej oceny +1)
a) wysłać ID_komentarza z rodzajem_oceny(+/-) do PHP i tam po weryfikacji zrobić Update SQL (po stronie PHP brak problemów)
2. sformatować kolorystycznie kliknięty button "plus" oraz usunąć możliwość kliknięcia w button "minus" za pomocą display:none;
3. wrzucić ocenionego komentarza (tj. ID_komentarza) do localStorage, żeby user wiedział co już ocenił.
4. sprawdzić ID_komentarza z localStorage i jeśli istnieje, to sformatować kolorystycznie na stałe. (tj. do czasu usunięcia pamięci lokalnej www)

Generalnie wszystko działa dla jednego komentarza. Siedziałem nad tym dwa dni i jestem pewny, że można to zrobić znacznie lepiej, ale składnia i jej logika mnie dobija więc będę wdzięczny za naprowadzenie w jaki sposób edytować kod, aby wrzucić w jakąś pętle, która automatycznie pobiera i sprawdza (tj. formatuje jeśli oceniono) wszystkie wyświetlone komentarze (tj. ID_komentarza).

[PHP] pobierz, plaintext 
    $(document).ready(function() {
        $('.punkt').click(function () {
 
            if ($(this).hasClass("current")) {
              // $("#1 .suma").text("Zagłosowano.");
            } else {
                var id_koment = $(this).parent("div").attr("id");
                var rodzaj = $(this).attr("class");
                var error = false;
 
				//formatowanie
                if ($(this).hasClass("plus")) {
                    $("#1 .1").css("color", "green");
                    $("#1 .1").css("font-weight", "bold");
                    $("#1 .0").css("display", "none");//likwiduje minusa
 
					//plus jeden
					var suma = +$("#1 .sumai").val() + 1;
					$("#1 .sumai").val(suma);	
 
					//zapisanie na local	
					localStorage.setItem('id_koment', id_koment);					
 
					//update
					$.ajax({
					  type: "POST",
					  url: "db.php",
					 data: { 
					 id_koment: id_koment, 
					 rodzaj: rodzaj,
					 csrf: <?php echo $_SESSION['key']; ?>
					 }
					}).done(function (data) {
					  console.log(data);
					});                    
 
                }
 
                else if($(this).hasClass("down")) {
                    alert("głos -1");
                }
                //removes all the votes 
                $(this).parent("div").children().removeClass("current");
 
                if(!error) {
                    $(this).addClass("current");
                } else {
                    alert("jakis problem....");
                }
            }
            return false;
        });
    });
 
<div id="1" class="idkom1">
    <a class="punkt plus" href="#">
      <div class="1">plus +</div>
    </a>
 
    <div class="suma">
		<input class="sumai" type="number" value="12">
    </div>    
 
    <a class="vote down" href="#">
     <div class="0">minus -</div>
    </a>
</div>
 
var pobieramid = JSON.parse(localStorage.getItem("id_koment"));
	$("#"+pobieramid+" .plus").removeClass("plus"); //usuwam mozliwosc dodania kolejnej wartosci +1
	$("#"+pobieramid+" .0").css("display", "none");//likwiduje minusa
	$("#"+pobieramid+" .1").css("color", "red");
	$("#"+pobieramid+" .1").css("font-weight", "bold");
[PHP] pobierz, plaintext 

woow! @aras785, wielkie dzięki za poświęcony czas! nie testowałem Twojego rozwiązania, ale na pierwszy rzut oka wygląda konkretnie w porównaniu do moich wypocin. Mój problem przed chwilą (raczej) rozwiązałem w taki sposób, że inaczej zapisuje na localStorage, a na końcu inaczej odczytuje i generalnie na pierwsze testy wszystko hula jak należy:

[PHP] pobierz, plaintext 
var data = existing ? existing + id_koment : id_koment;
localStorage.setItem('id_koment', data+',');
// ...
pobieramid = localStorage.getItem("id_koment");
let ids = pobieramid.split(",");
for(let id of ids)
{
    $("#"+id + " .plus").removeClass("plus"); 
    $("#"+id + " .1").css("color", "red");
    $("#"+id + " .1").css("font-weight", "bold");
    $("#"+id + " .0").css("display", "none");
}
[PHP] pobierz, plaintext 

Ze wstępnych oględzin amatora wygląda na to, że jedna klasa (.commented) obsługuje formatowanie końcowe dla obu kliknięć, co defacto będzie prowadziło do błędnego kolorowania dla plusa bądź minusa - będę musiał to rozszyfrować aby dodać drugą klase. Zapisujesz też więcej danych w tablicy co jest jak najbardziej spoko, bo można zamknąć się w jednym kluczu, a później łatwo zweryfikować ocenę komentarza bez dodatkowego kombinowania z dwoma kluczami(+/-):

[PHP] pobierz, plaintext 
{action: "down", commentId: "1"}
{action: "down", commentId: "2"}
{action: "down", commentId: "3"}
[PHP] pobierz, plaintext 

moje rozwiązanie było lżejsze zważając na limit 5242878 znaków dla jednego klucza, ale musiałbym kombinować z dwoma kluczami. ^^

[PHP] pobierz, plaintext 
1,2,3
[PHP] pobierz, plaintext 

Skrócę Twoją formę do: {a:"d",i:"1"} i z przyjemnością przygarnę cały wzór pod grunt do budowy.

A tak jeszcze z ciekawości odnośnie wydajności aplikacji po stronie SQL & PHP....
1. Lepiej za każdym razem Insertować na nowo i później pojedynczo zliczać każdą ocenę dla ID_kom
2. Czy lepiej Updatować jeden dany ID_kom o oceny?
Osobiście obstaje przy rozwiązaniu 2. ale wole się upewnić.
Niby insert jest szybszy i można do niego dodać id_usera, który głosował co jest na plus przy statystykach, ale z drugiej strony będzie więcej danych i trzeba będzie liczyć by uzyskać sume ocen, a to też będzie swoje kosztować.

Jeszcze raz wielkie dzięki!

Ten post edytował phpuser88 7.05.2022, 04:47:52

Cześć,

Taaaak dotarłem do tego z godzine po opublikowaniu posta:

[HTML] pobierz, plaintext 
.commented__down [data-action="down"] {
  color:red;
}
[HTML] pobierz, plaintext 

Potencjalne problemy z DDoS'em przy głosowaniu/pisaniu planuje rozwiązać wprowadzając twardy i miękki limit w taki sposób, że stworze osobną tabele z id_user, id_kom, timestamp
Miękki limit: to możliwość oddania 20 głosów na każdą godzinę bez problemów, a każdy kolejny głos >20 będzie można oddać 1x/min.
Twardy limit: to max. 60 głosów na godzine.
Później w ramach rozwoju dorzucę jeszcze sprawdzanie jaki user często osiąga limity żeby sprawdzić != BOT.

Twoje rozwiązanie jest jak Graal, którego szukałem przed napisaniem tematu. Konkretne i dość zrozumiałe dla amatora jQuery. Świetny przykład do nauki na start, który rozwiązuje w lepszy sposób aktualne zadanie, dziękówa!

Dopisano 10.05.22 & 18:20:

Nie wydaje mi się aby był sens tworzenia nowego tematu, skoro kolejne dwa pytania dotyczą tematu. Więc pozwolę sobie dopytać tu (najwyżej @nospor mnie rozstrzela^^).
1. Czy powinienem obawiać się wstrzyknięcia kodu z localStorage do jQuery, który odbiera i później powierzchownie przetwarza zawartość?

[PHP] pobierz, plaintext 
if (getCommentFromLocalStorage()) {
    $.each(getCommentFromLocalStorage(), function(index, comment) {
      $('[data-element="comment"][data-comment-id="'+comment.commentId+'"]')
        .addClass('commented')
        .addClass('commented__'+comment.action);
  });
}
function getCommentFromLocalStorage() {
  return JSON.parse(localStorage.getItem("id_koment"));
}
[PHP] pobierz, plaintext 

Czytałem że niby obróbka json'em jest bezpieczna, ale nie siedzę w JS i nie wiem czy nie trzeba dla pewności czymś dodatkowym tego przefiltrować. Obstawiam że nie trzeba i kilka prób potwierdziło to przekonanie, ale wole zadać głupie pytanie niż później żałować.

2. Rozterka wydajnościowa, przykładowo User klika "plus" i PHP za pomocą Ajax'a robi UPDATE - jeżeli jest zalogowanych 1000 Userów i każdy z nich zacznie updatować baze kilkanaście razy z rzędu, to raczej racjonalnym wydaje się być założenie przymulenia hostingu, mam rację? Czy można ten problem jakoś obejść? istnieją jakieś sposoby? przeszło mi przez myśl by "wysłane głosy" odczytywać z localStorage 1x/10min i robić zbiorowy update, ale to raczej nie rozwiąże problemu. Ostatnio gdzieś czytałem o mechanizmie składowania memory w mysql - może lepiej jest robić tego typu update w tabeli memory, a następnie 1x/24h z tabeli memory do zwykłej(właściwej) tabeli, gdy ma się do dyspozycji 1Ghz + 2GB RAM? doświadczone osoby z pewnością znają odpowiedź, a ja chętnie skorzystam z możliwie jak najwydajniejszego sposobu kosztem wyświetlania aktualnych danych dla usera z opóźnieniem. Tutaj jeszcze rozważam wykupienie kolejnego hostingu i korzystania z dwóch osobnych baz danych na jednym hostingu, gdzie jedna(zewnętrzna) baza będzie odpowiadać za aktualne update i wyświetlanie "ocen" w trybie natychmiastowym, a druga baza odpowiadałaby za inne działania - czy przyniesie to znacznie lepszy rezultat jak się wydaje i czy taka hybryda ma racje bytu?

Ten post edytował phpuser88 10.05.2022, 17:20:06