7 Like innlegg med AJAX

av Ole Petter den 26. oktober 2019

For å like innlegg med ajax trengs post_id, og ved behov et navn på den som liker innlegget.

Innholdsoversikt

1 Hente post_id og sende det til like_post.js
2 Oppdatere tabellen likes
3 Vise resultatet på post.php
4 Vise antall reaksjoner
5 Kodeoversikt

Med utgangspunkt i forrige innlegg: https://smorasstats.com/PORTFOLIO/nyheter/2019/10/25/6-ajax-del-2/
hvor det var mulig å kommentere et innlegg og vise kommentaren uten å laste siden på nytt, er det en kjapp jobb å legge til en like-funksjonalitet.

1 Hente post_id og sende det til ajax-filen like_post.js

For å like innlegget sendes post_id og selve like-knappen til js-filen like_post.js, hvor dataen blir videresendt til php-filen som sender dataene til databasetabellen likes.

Når man trykker på like-knappen, sendes $id – altså post_id til like_post.js i undermappen assets/js/. Dette skjer ved hjelp av funksjonen likePost();, som tar parameterene button og post_id.

Parameteret button (som refererer til like-knappen) brukes til å endre stilen til selve like-knappen når den trykkes på for å vise leseren at liken ble sendt.

NB: Hvis ingenting skjer, er det viktig å inkludere rett jQuery-versjon. Slim-versjonen støtter ikke AJAX, så bruk uncompressed eller min-versjonen i stedet.

2 Oppdatere tabellen likes

Parameteren post_id sendes videre til like_post.php for deretter å settes inn i tabellen likes.

.done(function(data) gir beskjed om post-requesten var vellykket eller ikke.

Hvis den var vellykket, utføres koden som ligger inne i blokken etterpå, altså var likeButton endrer farge, i dette tilfellet blir den blå
–> likeButton.addClass(«text-primary»);

For mer informasjon om jQuery, les om det på w3schools: https://www.w3schools.com/jquery/

Hvis post_requesten ikke var vellykket skjer ingenting, knappen endrer ikke farge, og det blir ikke satt inn en ny like i tabellen likes.

Hvis ingenting skjer, vil man få en feilmelding i konsollet (trykk ctrl-shift-i på chrome) om at ingen data ble sendt eller at funksjonen ikke finnes.

3 Vise resultatet på post.php

Dersom $_GET[‘id’] ikke er tom, altså for eksempel post.php?id=1, da sendes denne id-en til like_post.php, og settes inn i databasen.

Etter jeg trykker settes forhåpentligvis liken inn i tabellen likes.

En kjapp titt i tabellen likes viser at tabellen har fått en ny like.

4 Vise antall reaksjoner

Etter hvert som innlegget får mye respons er det greit å vite hvor mange som har reagert. Dette kan kjapt finnes ut på flere måter.

Første metoden er å bruke php-funksjonen mysqli_num_rows, som teller antall rader i tabellen.

<?php
$sql = "SELECT * FROM likes WHERE post_id = $id";
$result = mysqli_query($link, $sql);
$num_likes = mysqli_num_rows($result);
?>

Etter å ha gjort en spørring mot tabellen likes basert på gjeldende post_id, samles antallet likes i variabelen $num_likes, som da vises ved siden av like-knappen mellom <span></span>.

For å teste at koden fungerer som den skal legger jeg til enda et innlegg.

Når jeg er inne på linken kan jeg se at innlegget ikke har noen likes.

Trykker jeg på like-knappen, sendes forhåpentligvis en like til likes-tabellen med post_id lik innlegget jeg er inne på, post nummer 2.

Med dette i orden virker altså likes-funksjonen som den skal, når du er inne på et spesifikt innlegg, likes det innlegget og det settes inn i tabellen likes.

Med et fungerende kommentarsystem i tillegg, så har man satt sammen en dynamisk og interaktiv blogg.

Senere når man etter hvert lager større sider med mer kode, kan det være greit å samle en del av koden i funksjoner, slik at den kan gjenbrukes ved behov.

Hvis man lager veldig store programmer er objektorientert programmering med klasser veldig nyttig, og i mange tilfeller helt nødvendig for å strukturere koden på en ryddig og organisert måte.

PS: Live oppdatering av antall likes med JSON.parse

For å oppdatere antall likes live når man trykker på liker-knappen, kan man lagre antall likes i en variabel.

I dette tilfellet er antallet likes lagret i en skjult input med id=»numLikes».

Deretter kan man hente verdien i dette elementet på vanlig måte, via document.getElementById, men dataen er i JSON-format, altså formatert som tekst, ikke som tall. Derfor må verdien omkodes til tall ved hjelp av JSON.parse.

Når man liker et innlegg med ajax, vil antallet reaksjoner altså inkrementeres med +1 umiddelbart. Dette vises i post.php i elementet «<span id=»showLikes»><?php echo $num_likes; ?></span> «.

Verdien vil da endres fra nåværende antall likes, til nåværende likes+1.

Kodeoversikt

Kildekode