6 – AJAX del 2
6 – AJAX del 2
av Ole Petter den 25. oktober 2019
Sist oppdatert: 26 oktober, 2019 kl 13:46I forrige eksempel, 5, viser jeg hvordan man kan sende innlegg ved hjelp av ajax. Dette er en litt mer avansert versjon hvor man kan kommentere innlegg, og vise kommentaren uten å laste inn siden på nytt, samt like innlegget.
Innhold
- Lage tabellene
- Koble til databasen
- Vise innlegg på index.php
- Innleggssiden post.php
- Lage kommentarfeltet
- Sende data fra kommentarfeltet via AJAX
- Sette dataene inn i databasen
- Resultatet
Contents
1 Lage tabeller i phpmyadmin
For å sette opp prosjektet trengs 3 tabeller, en for innlegg, en for kommentering av innlegg, og en for like av innlegg.
Første tabell er posts, som inneholder en tittel, og innhold. id-kolonnen er AI –> auto_increment, og PRIMARY KEY. Da vil hvert innlegg som lages få en automatisk id som er et nummer høyere enn den forrige.
I tabellen posts har jeg satt inn lorem ipsum for å fylle den med innhold.
Andre tabell er comments, som inneholder fremmednøkkelen post_id til tabellen posts, comment_name som inneholder navnet til den som kommenterer innlegget, og comment, som inneholder selve kommentaren.
Siste tabell er likes, som inneholder like for de ulike postene. Denne tabellen inneholder også en fremmednøkkel til posts via post_id, for å finne ut hvilket innlegg som ble liket.
2 Koble til databasen
For å koble til databasen via php lager jeg en config-fil, kalt config.php, i undermappen config som ligger i hovedmappen til programmet. Databasen heter ajax_posts. Variabelen $link brukes til å referere til databasen ved spørringer.
3 Vise innlegg på index-siden
I index.php inkluderer jeg databasetilkoblingen med config.php. Bootstrap inkluderes, samt fontawesome for å bruke deres ikoner.
Deretter lager jeg en spørring mot databasen for å vise alle innlegg fra tabellen posts. Resultatene vises i en while-løkke, og har en lenke som sender id-en til innlegget til siden post.php via URLen, som hentes i post.php ved hjelp av en $_GET-funksjon.
4 Innleggssiden post.php
For å vise et enkelt innlegg, lager jeg en template-fil kalt post.php. Denne inneholder innholdet for hvert innlegg basert på hvilket innlegg man vil lese.
Ved hjelp av en $_GET-funksjon henter jeg id som er sendt til URL fra index.php, og gjør en spørring mot tabellen posts for å hente innlegget med denne id-en.
På post.php inkluderes også tilkoblingen til databasen slik som i index.php, samt bootstrap og fontawesome.
5 Lage kommentarfeltet
Kommentarfeltet samles i en div med id=»commentForm». De ulike input-elementene samles ikke i et form med method=»POST», eller action=»example_file.php», men de sendes via en funksjon kalt «commentPost».
I post.php har jeg laget en <button> som sender dataene fra post.php, og filen comment_post.js henter dataen fra input-feltene med id=»name», og id=»comment».
I funksjonen sendes det to elementer, knappen som sender kommentaren, referert i post.php som «this», og post_id, altså id-en til innlegget som man leser på.
Innholdet i kommentarfeltet og navnefeltet hentes via id-en til henholdsvis navn og kommentarfeltet, ved hjelp av javascript:
(var comment = document.getElementById(‘comment’).value;)
og (var name = document.getElementById(‘name’).value;)
6 Sende data fra kommentarfeltet via ajax
For å sende data via jQuery Ajax, brukes id på både kommentarfelt-seksjonen, samt navne-seksjonen. (textarea med id «comment», og input med id «name»), samt post_id sendes til en ekstern javascript-fil kalt «comment_post.js», som ligger i undermappen «assets/js/».
Kommentaren sendes ved hjelp av $.post-funksjonen i jQuery. Denne behandler dataene som er sendt fra kommentarfeltet, og sender det videre til filen comment_post.php, som ligger i undermappen ajax.
Dette gjør at dataen kan sendes uten å laste inn siden på nytt. post_id, name og comment sendes da videre til comment_post.php.
For å vise kommentaren umiddelbart etter publisering brukes javascript funksjonen InnerHTML. Den endrer innholdet på nettsider uten å laste siden på nytt.
Rett under kommentarfeltet har jeg laget en div med id=»ajax_comment», som endres når kommentaren sendes. Den viser da kommentaren og navnet, når personen sender kommentaren.
7 Sette dataen inn i databasen
Til slutt sendes dataen altså fra comment_post.js videre til comment_post.php, hvor dataen settes inn i databasen, og da tabellen comments.
8 Resultatet
I neste innlegg kan du lese om hvordan leserne kan reagere på blogginnlegg ved et enkelt trykk: https://smorasstats.com/PORTFOLIO/nyheter/2019/10/26/7-like-innlegg/
