7 Like innlegg med AJAX
![Charts](https://progitek.no/wp-content/uploads/2019/09/charts-commerce-data-265087-1024x683.jpg)
7 Like innlegg med AJAX
av Ole Petter den 26. oktober 2019
Sist oppdatert: 26 november, 2019 kl 11:20For å like innlegg med ajax trengs post_id, og ved behov et navn på den som liker innlegget.
Contents
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
![Like knapp post](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/like_post-1024x400.png)
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.
![Onclick like](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/like_section-1024x160.png)
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.
![Tabellen likes](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/likes_table_2-1024x217.png)
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.
![Likes aktiv onclick](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/post_liked-1024x229.png)
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.
![like_post ajax](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/like_post_js.png)
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.
![Feilmelding konsollet](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/console_err-1024x349.png)
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.
![Tom likes tabell](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/likes_empty.png)
Etter jeg trykker settes forhåpentligvis liken inn i tabellen likes.
![Like-knapp aktiv](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/post_liked_1-1024x230.png)
En kjapp titt i tabellen likes viser at tabellen har fått en ny like.
![Likes tabell oppdatert](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/likes_not_empty.png)
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);
?>
![Finn likes PHP](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/num_likes_sql.png)
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>.
![Vis likes PHP](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/show_num_likes.png)
![like](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/post_liked_num_likes.png)
![likes](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/liked_twice.png)
For å teste at koden fungerer som den skal legger jeg til enda et innlegg.
![posts tabell](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/post_2-1024x728.png)
![posts](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/index_post_2.png)
Når jeg er inne på linken kan jeg se at innlegget ikke har noen likes.
![Post](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/post_2_no_likes-1024x811.png)
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.
![Tabellen likes](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/post_2_table_liked.png)
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».
![Antallet likes](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/live_likes_update.png)
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.
![JSON parse](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/num_likes_json.png)
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.
![Koden i like_post.js](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/json_like.png)
Kodeoversikt
![Mappestruktur](https://smorasstats.com/PORTFOLIO/nyheter/wp-content/uploads/2019/10/mappe_oversikt.png)