Jak zrobić prosty like button?

0

Proszę mi podrzucić jakiś fajny przykład albo najlepiej gotowiec, ewentualnie proszę odesłać mnie do jakiegoś fajnego kursu. Dziękuje.

Kuba

2

Trzymaj gdzieś (w bazie, pliku) ilość like'ów
wyświetl ją w formularzu
zrób przycisk
zrób żeby przycisk submitowal formularz albo wysyłał ajaxa o zwiększenie like'a

0

@TomRiddle: Moze cos z tego... jak to przerobic zeby AJAX dopisywal mi do bazy...

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

2

No to teraz musisz mieć server, który obsłuży żądanie GET ajax_info.txt, i zapisze tego like'a gdzieś. Tam skąd potem Twoja strona sobie go wczyta.

0

@TomRiddle: No wiec wystrugalem taki plik...

<!DOCTYPE html>
<html>

<script type="text/javascript">

	var likes = 1;
	function like() {
		document.getElementById("show").innerHTML = likes;
		likes=likes+1;
		
		var xhttp;    
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "zapisLajka.php?q="+likes, true);
        xhttp.send();
	    }
	    
</script>

<button id="button" onclick="like()">Like <a type="text" id="show" style="color:black;"></a></button>

<p type="text" id="show" style="color:black;"></p>

</html>

Dodalem do funkcji doliczajacej lajki, fragment kodu ktory poprzez GET i AJAXa na bieżąco bedzie dopisywal mi kazda zmiane do bazy danych. Czy to mniej wiecej dobrze wyglada? Teraz jeszcze tylko musze zrobic plik zapisLajka.php Prosze o jakis komentarz. Dziekuje.

Kuba

Ps. I mam jeszcze takie jedno male pytanie. Na swoim blogu mam duzo wpisow i komentow do tych wpisow. Chcialbym zrobic tak, zeby mozna bylo lajkowac zarowno wpisy jak i komenty. Jednym slowoem bedzie wielki bajzel. I pytanie. W jaki sposob strona powinna pobierac lajki juz nabite przy ladowaniu sie. Tj. tez AJAXem mam to zrobic? Czy po prostu PHPem?

0

James Prada napisał(a):

<!DOCTYPE html>
<html>

<script type="text/javascript">

	var likes = 1;
	function like() {
		document.getElementById("show").innerHTML = likes;
		likes=likes+1;
		
		var xhttp;    
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "zapisLajka.php?q="+likes, true);
        xhttp.send();
	    }
	    
</script>

<button id="button" onclick="like()">Like <a type="text" id="show" style="color:black;"></a></button>

<p type="text" id="show" style="color:black;"></p>

</html>

Dodalem do funkcji doliczajacej lajki, fragment kodu ktory poprzez GET i AJAXa na bieżąco bedzie dopisywal mi kazda zmiane do bazy danych. Czy to mniej wiecej dobrze wyglada?

Wygląda jak g**no.

Zmienna likes to zmienna globalna, którą potem modyfikujesz w like().
Funkcja like() nie przyjmuje żadnych parametrów, więc nie wiadomo co ona like'uje tak na prawdę.
Funckja sama bierze getElementById("show"), czyli ma ukryty efekt uboczny
Funkcja like() jednocześnie update'uje dane i zmienia widok, czyli robi dwie rzeczy na raz.
MEGA GŁUPIE1. Twój plik zapisLajka.php dostaje ilość like'ów. CZyli ja np mógłbym sobie zrobić reuqest i ustawić 1000 lajkó, albo 0. Powinno być tak że zapisLajka.php po prostu zwiększa wartość z bazy o jeden.

Teraz jeszcze tylko musze zrobic plik zapisLajka.php Prosze o jakis komentarz. Dziekuje.

Zrób żeby nie dostawał nowej ilości like'ów, tylko niech zwiększa aktualną o jeden.

Ps. I mam jeszcze takie jedno male pytanie. Na swoim blogu mam duzo wpisow i komentow do tych wpisow. Chcialbym zrobic tak, zeby mozna bylo lajkowac zarowno wpisy jak i komenty. Jednym slowoem bedzie wielki bajzel. I pytanie. W jaki sposob strona powinna pobierac lajki juz nabite przy ladowaniu sie. Tj. tez AJAXem mam to zrobic? Czy po prostu PHPem?

Lepiej wrenderować przy ładowaniu strony aktualną ilość like'ów.

0

@TomRiddle: Mam tu takie coś w JQuery. Kiedyś robiłem mini czacik i... w końcu zadziałał. Wywaliłem go ze swojej strony bo... mi trochę zawadzał i oprócz tego, że mi ktoś go raz shakował nic się specjalnego nie stało. No więc jedziemy z tematem. Oto fragment kodu wysyłający coś i uruchamiający przy okazji funkcjię.

<div class='chatBottom'>
			<form action='#' onSubmit='return false;' id='chatForm'>
						<input type='hidden' id='name' value='<?php echo $user; ?>'/>
						<input type='text' name='text' id='text' value='' placeholder='type your chat message' />
						<input type='submit' name='submit' value='Post' />
				</form>
		</div>

Co my tu mamy. Nie przejmujcie się detalami bo to tylko przykład. id=chatForm id=name i mamy tam VALUE. Odpowiednio skonfigurowanym Value w PHP mógłbym sobie identyfikowac poszczegolne wpisy i komentarze. Jeszcze nie wiem jak, ale jakos na pewno się da. Oto funkcja odpierajaca. Trzeba ja przerobic bo nie ma wysylac kolejnej linijki czata tylko dodawac jednego lajka po klikenięciu.

<opowiesci script>

$(function(){
    
	$(document).on("submit","#chatForm",function(){
		var text = $.trim($("#text").val());
		var name = $.trim($("#name").val());

		if(text !== "" && name !== "") {
			$.post("ChatPoster.php",{text: text, name: name}, function(data){
				$(".chatMessages").append(data);
				});
			}else{
				alert("Data missing");
			}
			
		});

</script>

Jest tu jakas funkcja trim ktora chyba wyciaga wartosci INPUTOW oznakowanych odpowienim ID. W kazdym badz razie fukcja odpala ChatPoster.php za kazdym razem jak user kliknie SEND button. Misja jest taka, zeby przerobic SEND button na LIKEa. Jakies sugestie i podpowiedzi? Bardzo prosze.

Aha no i jeszcze mamy tutaj coś takiego jak function(data) - wskazujacy na odpowiednia .CLASS i mamy tam append(data) - to chyba chodzi o to, żeby w czacie pojawialo sie od razu to co zostalo dopisane do bazy. Nie wiem. Tym można by było zmienić numerek o 1 za kazdym razem jak USER kliknie LIKE.

HELP!

0

No to zaczynamy...

<!DOCTYPE html>
<html>

<script type="text/javascript">

	var likes = 1;
	
	function like() {
		document.getElementById("show").innerHTML = likes;
		likes=likes+1;
		
		// OTO NASZ PLIK WYJSCIOWY TUTAJ BEDZIEMY MONTOWAC CALA RESZTE...
	    
</script>

<button id="button" onclick="like()">Like <a type="text" id="show" style="color:black;"></a></button>

</html>

0

Masz jakiś server postawiony? Mówiłeś coś o php?

0

Staram sie polaczyc to co juz dziala... z JQuery,,, ale to dopiero szkice. Pierwsze pytanie czy do BUTTONa można przypisać ACTION # ?

<!DOCTYPE html>

<html>
    
<title>Chat</title>

<meta charset="utf-8">

<script type="text/javascript">

	var likes = 1;
	
	function like() {
		document.getElementById("show").innerHTML = likes;
		likes=likes+1;
		
		// OTO NASZ PLIK WYJSCIOWY TUTAJ BEDZIEMY MONTOWAC CALA RESZTE...
	}
	
</script>

<body>
    
<!-- Pamiętaj, że jquery musi ładować się zawsze przed css! -->    
<script src="jquery.js"></script>

<script>
 
    $( document ).ready(function() {
 
        alert( "Wygląda na to, że jQuery się ładnie uruchamia! Pozdrawiam!" );
 
});


$( function() {
    $( "#dialog" ).dialog();
  } ); 

$(function(){
    
	$(document).on("submit","#chatForm",function(){
		var text = $.trim($("#text").val());
		var name = $.trim($("#name").val());

		if(text !== "" && name !== "") {
			$.post("ChatPoster.php",{text: text, name: name}, function(data){
				$(".chatMessages").append(data);
				});
			}else{
				alert("Data missing");
			}
			
		});
		
		
		function getMessages(){
            
            $.get( "GetMessages.php", function( data ) {
                $( ".chatMessages" ).html( data );
            });
            
        }
        
        setInterval(function(){
            
            getMessages()
        
        }, 500);

});
 
</script>    
    
<button action="#" onSubmit="return false;" id="chatForm" onclick="like()" value='<?php echo $jakiesPHPDaneInValue; ?>'/>Like <a type="text" id="show" style="color:black;"></a></button>

</body>
</html>

Jak to póki co wygląda możecie zobaczyć tutaj:
http://prada.fun/test.php

0

@James Prada: No i oczywiście skupiamy się na tym fragmencie...

$(function(){

    $(document).on("submit","#chatForm",function(){
        var text = $.trim($("#text").val());
        var name = $.trim($("#name").val());

        if(text !== "" && name !== "") {
            $.post("ChatPoster.php",{text: text, name: name}, function(data){
                $(".chatMessages").append(data);
                });
            }else{
                alert("Data missing");
            }

        });

Wiadomo... jak to przerobić, żeby naliczające się lajki zoastały dopisane do BAZY...

0

Coś takiego byłoby ok:

Render

Likes: <span id="like-welcome"><?= file_get_contents("like-welcome.txt") ?></span>
<button type="button" onclick="like('welcome')">
  Like
</button>

JS:

function like(group) {
  $.post("like.php", {group:group}, function onSuccess(data) {
    $("#likes- " + group).text(data.likes);
  });
}

I ten plik like.php

<?php
$group = // tutaj odczytaj sobie parametr grop
$currentLikes = file_get_contents("like-$group.txt");
$newLikes = $currentLikes + 1;
file_put_contents("like-$group.txt", $newLikes);
echo json_encode(['likes' => $newLikes]);

0

James Prada napisał(a):

Wiadomo... jak to przerobić, żeby naliczające się lajki zoastały dopisane do BAZY...

No to żeby to zrobić dobrze, żeby zapisywało się do bazy to musialbyś odseparować warstwę PHP'a która czyta dane z bazy, od tej która renderuje widok. Musiałbyś trochę przerobić tą apke.

0

@TomRiddle: Momento. Nie do końca to kminie. Z tego co widzę to dla każdy lajk będzie przechowywany w osobnym pliku txt. Czy tak?

<?= to chyba po prostu <?php albo <?, tak? No i co to jest to? json_encode Po prostu szybki odczyt i zapis do tablicy? Hmm... No dobra... Nic z tego i tak nie rozumiem. Poza tym zależy mi na tym, żeby te lajki bujały mi się w bazie danych. Mam posty i komenty do postów i jakoś to muszę zidentyfikować. Rozumiem, że tutaj zrobiłeś coś w stylu group:group. To znaczy powiedzmy post:komenty - Hmm... I co to jest ten wewnętrzny ewent onSuccess? Hmm... Czy mogę prosić o dodatkowe wyjaśnienia zanim to wszystko zacznę lutować. Dziekuję serdecznie! :-)

0

Tak myślałem. Nic nie działa i wszystko jest z...

0

James Prada napisał(a):

@TomRiddle: Momento. Nie do końca to kminie. Z tego co widzę to dla każdy lajk będzie przechowywany w osobnym pliku txt. Czy tak?

Tak, ale możesz przerobić na osobny np record w bazie.

<?= to chyba po prostu <?php albo <?, tak?

<?= to to samo co <?php echo / <? echo.

No i co to jest to? json_encode Po prostu szybki odczyt i zapis do tablicy?

To jest po to żebyś mógł odczytać obiekt w JavaScript. Tutaj masz info: https://www.w3schools.com/js/js_objects.asp Możesz to zignorować, jeśli chcesz wysłać jedną wartość, ale gdybyś chciał wysłać więcej to niezbędne.

Hmm... No dobra... Nic z tego i tak nie rozumiem. Poza tym zależy mi na tym, żeby te lajki bujały mi się w bazie danych. Mam posty i komenty do postów i jakoś to muszę zidentyfikować. Rozumiem, że tutaj zrobiłeś coś w stylu group:group. To znaczy powiedzmy post:komenty - Hmm...

{group: group} to jest właśnie obiekt JavaScript, możesz o nich przeczytać tutaj: https://www.w3schools.com/js/js_objects.asp

I co to jest ten wewnętrzny ewent onSuccess? Hmm...

onSuccess, tak po prostu nazwałem sobie funkcje którą przekazałem do $.post(), mogłeś go nazwać inaczej albo wgl (tak jak u Ciebie).

0

@TomRiddle: $group = // tutaj odczytaj sobie parametr grop To jeszcze proszę powiedz mi jak mam sobie odczytać parametr group? Próbowałem $_POST['group']; i nic

0

Zrób sobie

var_dump($_POST);
var_dump($_GET);

i zobacz jakie wartości tam są, kiedy robisz @.post().

0

@TomRiddle: echo $_GET['likes']; ? Jak odświeżam to się samo nabija o jedno. Tak?

0

Dobra mam coś takiego i nie wiem w ogóle co to jest!

<!DOCTYPE html>

<html>
    
<title>Chat</title>

<meta charset="utf-8">

<script type="text/javascript">

	var likes = 1;
	
	function like() {
		document.getElementById("show").innerHTML = likes;
		likes=likes+1;
	
		function like(group) {
        $.post("like.php", {group:group}, function onSuccess(data) {
        $("#likes- " + group).text(data.likes);
        });
    
	                         }
                     }
	
	
	
</script>

<body>
    
    
Likes: <span id="like-welcome"><?php file_get_contents("like-welcome.txt") ?></span>
<button type="button" onclick="like('welcome')">
  Like
</button>
    
    
<!-- Pamiętaj, że jquery musi ładować się zawsze przed css! -->    
<script src="jquery.js"></script>

<script>
 
    $( document ).ready(function() {
 
        alert( "Wygląda na to, że jQuery się ładnie uruchamia! Pozdrawiam!" );
 
});


$( function() {
    $( "#dialog" ).dialog();
  } ); 

$(function(){
    
	$(document).on("submit","#chatForm",function(){
		var text = $.trim($("#text").val());
		var name = $.trim($("#name").val());

		if(text !== "" && name !== "") {
			$.post("ChatPoster.php",{text: text, name: name}, function(data){
				$(".chatMessages").append(data);
				});
			}else{
				alert("Data missing");
			}
			
		});
		
		
		function getMessages(){
            
            $.get( "GetMessages.php", function( data ) {
                $( ".chatMessages" ).html( data );
            });
            
        }
        
        setInterval(function(){
            
            getMessages()
        
        }, 500);

});
 
</script>    
    
<button action="#" onSubmit="return false;" id="chatForm" onclick="like()" value='<?php echo $jakiesPHPDaneInValue; ?>'/>Like <a type="text" id="show" style="color:black;"></a></button>

</body>
</html>

I zrobił mi się jakiś plik like-.txt i nie wiem co to jest. Niby tam zapamiętuje jak odświeżam like.php. Dobra... nic z tego nie wiem. Pytanie jest jeszcze jedno. W jaki sposób mam załadować ilość lajków na początku?

1

Mam nadzieje, że na tym forum nie ma małych dziewczynek:

<?php
$group = // tutaj odczytaj sobie parametr grop
$currentLikes = file_get_contents("like-$group.txt");
$newLikes = $currentLikes + 1;
file_put_contents("like-$group.txt", $newLikes);
echo json_encode(['likes' => $newLikes]);

Do kur*** jebanej nędzy. [CIACH!] $group - co to prostytutka mać jebanego jest?
Dlaczego się do to kur*** jebanej nie przekazuje? Co mam prostytutka plik tekstowy
nazywać like-234234234.txt i prostytutka tyle ile laków będzie tak się będzie nazywał
tej kochany inaczej plik tekstowy. [CIACH!] prostytutka takie pisanie programów. Pies jebał
ten system laków.

Kto za niech kliknie lajka, kto przeciw niech wypierdala.

1

Wniosek formalny o perełkę!

0

@p_agon: Poproszę o gotowca. Like button z możliwością nieskończonego nabijania. Wnioskować możecie o podywżkę.

1

@James Prada: Wniosek formalny pedały [CIACH!] - o usunięcie mnie z tego pedalskiego grona. Dziękuję do niezobaczenia prostytutka nigdy. Won! Zapraszam na Prada.fun za jakiś czas będziecie mogli tam kliknąć lajk. Fuck You!

Jak zrobić prosty like button?

James Prada napisał(a):

James Prada napisał(a):

James Prada napisał(a):

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami