6 – AJAX del 2

6 – AJAX del 2

av Ole Petter den 25. oktober 2019

Sist oppdatert: 26 oktober, 2019 kl 13:46

I 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.

Spørring mot tabellen posts, resultatene vises i en while-løkke.

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.

url sender id-en til innlegget (id=1)

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.

Henter nåværende innlegg ved hjelp av en $_GET-funksjon og gjør en spørring basert på 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;)

Hovedseksjonen i post.php, som viser innlegget samt skjemaet for å kommentere innlegget.

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/».

comment_post.js, som behandler dataen som sendes fra kommentarfeltet i post.php

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.

Dataen sendes videre til comment_post.php fra comment_post.js-filen ved hjelp av en jQuery-post-funksjon.

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.