System polubiona wiadomości, jak z insta

pytanie zadane 26 października 2020 w Sieci komputerowe, internet przez _zixoziz Użytkownik (500 p.)

Cześć.

Ostatnio robię stronę internetową i mam pewien duży problem. Chodzi o to, że nie umiem zrobić "systemu serduszek" jak z instagrama. Mam ikonkę serduszka umieszczoną w divie i dalej już nwm co robić i czy robić to w JavaScripcie czy PHP. Chciałbym zrobić też prostą bazę danych, która będzie przechowywać ilość serduszek - jedno kliknięcie użytkownika, jedno serduszko jest dodawane do bazy. Proszę o pomoc.

1 odpowiedź

odpowiedź 26 października 2020 przez wizarddos Nałogowiec (25,930 p.)

Jeżeli jak na Instagramie to jakiś framework do JS lub Ajax, Jeżeli ma się tak po prostu odświeżać po każdym serduszku to PHP może być

komentarz 26 października 2020 przez _zixoziz Użytkownik (500 p.)

Tak, chodzi mi o PHP. Teraz jak do tego podpiąć bazę danych i faktycznie zrobić ten kod?

Bazę już mam. Tylko, że TXT, ale chyba to nie problem.

komentarz 26 października 2020 przez wizarddos Nałogowiec (25,930 p.)

tworzysz sobie plik np. connect.php i tam masz dane potrzebne do połączenia się z bazą danych. dla XAMPPa wyglądać może tak

<?php
    	
	$host = "localhost";
	$db_user = "root";
	$db_password = "";
	$db_name = "//tu nazwa bazy danych";
	
?>

a potem do pliku gdzie obsługujesz dodawanie serduszek

<?php
require_once "connect.php";
	$polaczenie = @new mysqli($host,$db_user,$db_password,$db_name);
//i dalsza część kodu np. sprawdzanie błędów połączenia..
?>

a pomysł na algorytm dodawania serduszek masz?

komentarz 26 października 2020 przez _zixoziz Użytkownik (500 p.)

To znaczy. Wstępnie wartość serduszka to 0, bo zero serduszek. Teraz muszę napisać: jeżeli gracz kliknie na dany div/input, to dodaj do bazy 1, jeżeli znów kliknie(z tego samego kompa) to odejmij 1. Jeszcze chciałbym aby liczba "polubień" wyświetlała się obok mojego inputa/diva. Tylko nwm jak zamienić to na kod .

komentarz 26 października 2020 przez wizarddos Nałogowiec (25,930 p.)

mam taki pomysł z PHP.robisz nowy plik obsługujący to i po naciśnięciu serduszka przenosi na chwilę do tego pliku, w tym pliku tworzysz połączenie z bazą pobierasz do zmiennej aktualną wartość inkrementujesz ,np. zapytaniem UPDATE edytujesz rekord gdzie znajduje się post w bazie danych i przenosisz z powrotem do postu. Taki mój pomysł

komentarz 26 października 2020 przez _zixoziz Użytkownik (500 p.)

Coś takiego?

<?php
         
    $host = "localhost";
    $db_user = "root";
    $db_name = "serduszka.txt";
	$serduszka = file_get_contents('serduszka.txt');
	
	$serduszka = 0;

	if($serduszka += 1)
	{
		echo 'OK';
		file_put_contents('serduszka.txt', 1)
	}
	else
	{
		echo 'Coś poszło nie tak. Spróbuj jeszcze raz';
	}
  
?>

to w conetcie, teraz nwm czy to jest poprawne. I jak w tej właściwej zakładce zrobić zmienną, z liczbą serduszek.

komentarz 27 października 2020 przez wizarddos Nałogowiec (25,930 p.)

chyba lepiej by było zrobic bazę dznych na localhoscie i tam dawać to wszystko zapytaniami do bazy. a zmienne z nazwą hosta, hasłem itp. lepiej by było przechowywać w innym pliku ale sam pomysł jest spoko

komentarz 30 października 2020 przez _zixoziz Użytkownik (500 p.)

Ok, Długo mnie nie było, ale za to wiele rzeczy przemyślałem. Teraz mam zupełnie nowe podejście. Nie muszę już wyświetlać liczby polubień. Teraz piszę też w JS. Załączam dotychczasowy kod JSu.

function serca01()
		{
			document.getElementById('b1').innerHTML = '<i class="icon-heart-emptyheart"></i>';
		}
		
		function serca02()
		{
			document.getElementById('s1').innerHTML = '<i class="icon-heart-emptyheart"></i>';
		}
		
		function serca03()
		{
			document.getElementById('l1').innerHTML = '<i class="icon-heart-emptyheart"></i>';
		}
		
		function serca04()
		{
			document.getElementById('t1').innerHTML = '<i class="icon-heart-emptyheart"></i>';
		}
		
		function serca05()
		{
			document.getElementById('b2').innerHTML = '<i class="icon-heart-emptyheart"></i>';
		}
		
	</script>	
</head>
<body>

	<div id="container">
	
		<a href="#" class="scrollup"></a>
		
		<div id="header">
			Goto<span style="color: #0066ff; font-size: 55px;">wanie</span>
		</div>
	
		<div id="nav">
			<ol>
				<li>
					<a href="index.html">Strona Główna</a>
				</li>
				<li>
					<a href="#">Przepisy</a>
					<ul>
						<li><a href="przystawki.html">Przystawki</a></li>
						<li><a href="glowne.html">Dania Główne</a></li>
						<li><a href="desery.html">Desery</a></li>
					</ul>
				</li>
				<li>
					<a href="news.php">Newsy</a>
				</li>
				<li>
					<a href="forum.html">Nasze Forum</a>
				</li>
				<li>
					<a href="video.html">Video Poradniki</a>
				</li>
				<li>
					<a href="#" title="Chwilowo zakładka jest nieaktywna, zobacz inną!">Ekipa Patronów</a>
				</li>
				<li>
					<a href="gra.php">Gra W Wisielca</a>
				</li>
				<li style="width: 250px;">
					<a href="wsparcie.html">Wesprzyj Mój Projekt</a>
				</li>
			</ol>
		</div>
		
		<div id="content" style="min-height: 1390px;">
		
			<div style="height: 10px; width: 100%;"></div>
			<div class="articl">
			<a href="https://www.youtube.com/watch?v=hmpgHGocoZQ" target="
			_blank" style="color: black; text-decoration: none;">
				<img src="img/News/1.png" class="miniaturka" />
				<div class="arttit">
					PROPOZYCJA NA IDEALNE ŚNIADANIE! Czyli jak zrobić: płatki ryżowe z karmelizowanymi winogronami! według Bartka w 5 minut!
				</div>
				<div class="artopis">
					<br />
					Cześć, dzisiaj Wam przepis na pyszne płatki ryżowe do robienia w 5 minut, poznacie także sposób jak wzbogacić to danie o wszystkie niezbędne walory smakowe. Takie gotowanie to coś co zbuduje Wasze samopoczucie i mega pozytywny klimat dnia, dlatego zachęcam Ciebie to powtórzenia go na swoim śniadaniu.
				</div>
			</a>
				<div class="hartandkom">
					<div style="padding: 0; width: 706px; height: 25px;"></div>
					<div style="width: 666px; float: left; height: 30px;"></div>
					<div style="width: 40px; float: left;" onclick="serca01();" id="b1"><i class="icon-heart-empty"></i></div>
				</div>
			</div>

Itd. Ogólnie chodzi w nim o to, że jeżeli user kliknie na dany element na stronie wywoływana jest funkcja, która zmienia dotychczasowe serce na nowe. Teraz mam jeszcze jedno pt. Chciałbym, żeby jeżeli user kliknie jeszcze raz na dany element, to żeby serduszko znów stawało się normalne(zmieniało się w pierwsze). Masz może jakiś pomysł?

komentarz 31 października 2020 przez wizarddos Nałogowiec (25,930 p.)

np. może gdy user kliknie w serduszko sprawdzaj czy jest zaznaczone czy nie np. tak

var czy_like = false;
function serce()
{
  if(czy_like == true)
  {
    $('div#b1').removeClass('liked');
    czy_like = false;
  }
  else
  {
    $('div#b1').addClass('liked');
    czy_like = true;
    
  }
}

z użyciem JQuery. Nie wiem czy działa nie testowałem

komentarz 31 października 2020 przez wizarddos Nałogowiec (25,930 p.)

@_zixoziz, działa?

komentarz 31 października 2020 przez _zixoziz Użytkownik (500 p.)

Niestety jeszcze nie. Próbowałem zrobić coś takiego, ale też nie działa

	function serca01()
		{
		
			var czy_like = false;
			
			if(czy_like == false)
			{
				document.getElementById('b1').innerHTML = '<i class="icon-heart-emptyheart"></i>';
				czy_like = true;
			}
			else if(czy_like == true)
			{
				document.getElementById('b1').innerHTML = '<i class="icon-heart-empty"></i>';
				czy_like = false; 
			}
			
		}

To znaczy, że można kliknąć i zmienić obrazek, ale potem już nie można go odmienić.