Angular CRUD aplikacija

U ovom ću blog postu napraviti jednostavnu Angular CRUD (create, read, update, delete) aplikaciju koja će se sastojati od forme za pregled podataka uz mogućnost dodavanja, uređivanja i brisanja podataka.

CRUD operacije nešto su s čime se svaki web developer najčešće susreće i zato bi ovaj primjer posebno mogao biti koristan novim developerima ili onima koji će to tek postati.

Uvod

Cilj ovog blog posta je pokazati:
– kako kreirati Angular projekt koristeći Angular CLI
– kako kreirati i koristiti servis pomoću kojega ću pozivati JSON API
– kako dodati Bootstrap za brže kreiranje forme za unos, pregled, uređivanje i brisanje sadržaja

Kreiranje Angular projekta

Pomoću Angular CLI-a kreirat ću novi projekt.

Ako projekt sada otvorim u web pregledniku na adresi http://localhost:4200/ dobit ću sljedeće

Angular CRUD aplikacija

S obzirom da umjesto toga želim imati formu za unos, pregled, uređivanje i brisanje sadržaja prvo ću dodati podršku za Bootstrap na način da u index.html dodam

. I sada mogu koristiti Bootstrap komponente.

Kasnije ću se vratiti na izgled forme, a sada idem postaviti glavni dio funkcionalnosti koji se tiče kreiranja servisa i pozivanja API-ja.

Kreiranje servisa za API

Servis pomoću kojega ću vršiti sve upite na API kreiram naredbom

Nakon čega dobijem korisnici-api.service.ts

Servis se može koristiti za različite svrhe, ali kako ću meni ovdje glavna svrha biti slanje upita na API znači da obavezno moram koristiti Http servis.

Konačan izgled servisa može se vidjeti u nastavku, a njime je pokriveno sve – od pregleda svih korisnika, dodavanja novih, uređivanja i brisanja postojećih.

Izgled forme (app.component.html)

Za izgled forme iskoristit ću Bootstrap komponente. Struktura forme nalazi se unutar app.component.html, a izgleda ovako:

Forma na početku i bez podataka izgleda ovako:

Angular CRUD aplikacija

Sada kada imam definiran izgled forme mogu kreirati opcije koje će joj dati funkcionalnost.

Dodavanje (POST)

Što se dodavanja sadržaja tiče nije ga moguće dodati dok sva obavezna polja nisu unesena. U ovom slučaju postoje dva polja, ime i prezime te broj telefona, i oba su obavezna. S obzirom da u formi za sada nema niti jednog korisnika *ngIf="ukupanbrojkorisnika < 1" prikezuje se poruka “Nema podataka”.

Nakon dodavanja korisnika popis se automatski osvježava i prikazuje sve dodane korisnike.

Angular CRUD aplikacija

Pregled (GET)

Kada se Angular web aplikacija pokrene automatski se dohvaća popis svih do tada unesenih korisnika. Za tu svrhu koristim ngOnInit() što je dio Angular Lifecycle Hook.

Također, odmah dohvaćam i dužinu niza this.ukupanbrojkorisnika = res.length; kako bi mogao prikazati ukupan broj korisnika.

Angular CRUD aplikacija

Uređivanje (PUT)

Kod uređivanja korisnika imam dvije funkcije. Prva urediKorisnika(); dohvaća podatke odabranog korisnika i prikazuje ih u gornjoj formi za unos/uređivanje, a druga urediKorisnika2(); obavlja proces uređivanja odabranog korisnika tj. šalje nove podatke na API.

Nakon što su novi podaci poslani popis korisnika se automatski osvježava, a gumb ‘Uredi’ ponovno postaje ‘Spremi’.

Angular CRUD aplikacija

Brisanje (DELETE)

Brisanje korisnika zadnji je korak izrade ovog CRUD primjera. Nakon što je odabrani korisnik obrisan popis se automatski osvježava.

Angular CRUD aplikacija

Zaključak

Ovo je bio jednostavan primjer Angular CRUD forme. Mogao sam ovdje dodatno uljepšati izgled forme ili na drugačiji način slati upite na API, ali mislim da je ovo sasvim dovoljno za početak jer kako god bilo korištenjem ovog primjera može se napraviti funkcionalna forma za unos, pregled, uređivanje i brisanje sadržaja.

I za kraj, NPM paketi korišteni u ovom primjeru:

Kako postaviti i koristiti WordPress REST API: Osnovna provjera autentičnosti

U ovom ću blog postu pokazati kako omogućiti korištenje WordPress REST API-ja sa CRUD (Create, Read, Update, Delete) mogućnostima dok za neki od sljedećih blog postova planiram napraviti jednostavnu Ionic aplikaciju koja će koristiti ovdje kreiran API.

Dokumentacija koju koristim za ovaj blog post: REST API Handbook

Uvod

Za početak je važno znati da autentifikacija nije isto što i autorizacija. U ovom blog postu govorit ćemo o autentifikaciji koja označava proces provjere točnosti pristupnih podataka korisnika koji traži pristup određenom sustavu. To znači da autentificirani korisnik može izvršavati CRUD operacije uz uvjet da pri svakom zahtjevu pošalje “dokaz” o valjanosti pristupnih podataka.

S druge strane, autorizacija identificira i dodjeljuje pristup resursima sustava. U slučaju WordPressa to možete vidjeti kroz različite uloge koje je moguće zadati korisnicima: pretplatnik, suradnik, autor, urednik, administrator. Vidjet ćete i kasnije da prilikom korištenja API-ja autor neće moći npr. promijeniti parametre nekog blog posta dok će urednik ili administrator to moći.

Priprema

Za pripremu su potrebni:

  • JSON Auth plugin https://github.com/WP-API/Basic-Auth
  • Korisnik s kojim ćemo vršiti autentifikaciju

Osnovna autentifikacija (Basic authentication) podrazumijeva slanje korisničkog imena i lozinke u zaglavlju (header) svakog zahtjeva (request).

Kako bi uopće omogućili osnovnu provjeru autentičnosti potrebno je instalirati plugin Basic Authentication handler (https://github.com/WP-API/Basic-Auth).

JSON Basic Authentication

Sada ćemo kreirati korisnika čije ćemo pristupne podatke (korisničko ime: TestKorisnik, lozinka: OvoJeLozinka) koristiti u zaglavlju svih zahtjeva koje ćemo slati.

WordPress REST API - Novi korisnik

Sada smo spremni i možemo testirati slanje zahtjeva koristeći Postman (A complete API Development Environment).

Kreiranje blog posta (POST /wp/v2/posts)

Za kreiranje novog blog posta potrebni su:

  • URL na koji ćemo slati zahtjev
  • Korisničko ime i lozinka
  • Tijelo poruke (naslov, sadržaj i dr.)

WordPress REST API: Osnovna provjera autentičnosti

Kao što se može vidjeti iz prethodne animacije scenarij je sljedeći.

– Zahtjev za kreiranjem novog blog posta šaljemo na URL “…/wp-json/wp/v2/posts/”
– Koristimo korisničko ime “TestKorisnik” i lozinku “OvoJeLozinka” koji se pretvaraju u base64 string oblika “Basic VGVzdhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=” koji ide u zaglavlje zahtjeva.
– S obzirom da se ovdje radi o kreiranju novog blog posta uz zaglavlje šaljemo i tijelo (body) poruke koje se sastoji od dvije stavke, naslova i statusa.
– Na kraju dobijemo status 201 što znači da je blog post uspješno kreiran što se može vidjeti unutar sučelja WordPressa.

Uređivanje blog posta (POST /wp/v2/posts/id)

Za uređivanje postojećeg blog posta potrebni su:

    WordPress REST API ID

  • URL na koji ćemo slati zahtjev
  • ID blog posta kojeg želimo urediti
  • Korisničko ime i lozinka
  • Tijelo poruke (neki od parametara)

WordPress REST API UPDATE

Kao što se može vidjeti iz prethodne animacije scenarij je sljedeći.

– Zahtjev za kreiranjem novog blog posta šaljemo na URL “…/wp-json/wp/v2/posts/id”
– Koristimo korisničko ime “TestKorisnik” i lozinku “OvoJeLozinka” koji se pretvaraju u base64 string oblika “Basic VGVzdhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=” koji ide u zaglavlje zahtjeva.
– S obzirom da se ovdje radi o uređivanju postojećeg blog posta uz zaglavlje šaljemo i tijelo (body) poruke koje se može sastojati od nekoliko parametara. Konkretno u ovom primjeru promijenit ćemo autora i kategoriju blog posta.
– Na kraju dobijemo status 200 što znači da je blog post uspješno uređen što se može vidjeti unutar sučelja WordPressa.

Vratimo se nakratko na pitanje autorizacije. Kada sam u jednom od prethodnih koraka kreirao korisnika “TestKorisnik” stavio sam mu ulogu “Autor” međutim korisnik s tom ulogom nema sva prava i nije u mogućnosti izvršiti gore navedenu radnju jer dobije poruku sa statusom 403.

Međutim, kada sam mu dodijelio ulogu “Urednik” korisnik je bez problema mogao putem API-ja izvršiti uređivanje blog posta.

Brisanje blog posta (DELETE /wp/v2/posts/id)

Za brisanje postojećeg blog posta potrebni su:

  • URL na koji ćemo slati zahtjev
  • ID blog posta kojeg želimo urediti
  • Korisničko ime i lozinka

WordPress REST API DELETE

Kao što se može vidjeti iz prethodne animacije scenarij je sljedeći.

– Zahtjev za brisanjem postojećeg blog posta šaljemo na URL “…/wp-json/wp/v2/posts/id”
– Koristimo korisničko ime “TestKorisnik” i lozinku “OvoJeLozinka” koji se pretvaraju u base64 string oblika “Basic VGVzdhaXMuYWxhbUBjbG91ZHdheXMuY29tOmVKNWtuU24zNVc=” koji ide u zaglavlje zahtjeva.
– Na kraju dobijemo status 200 što znači da je blog post uspješno obrisan što se može vidjeti unutar sučelja WordPressa.

Dohvaćanje svih blog postova (GET /wp/v2/posts)

Za dohvaćanje svih blog postova potreban je samo URL na koji će se slati zahtjev.

WordPress REST API GET

Dohvaćanje jednog blog posta (GET /wp/v2/posts/id)

Za dohvaćanje jednog blog posta potrebni su:

  • URL na koji ćemo slati zahtjev
  • ID blog posta kojeg želimo prikazati
  • Korisničko ime i lozinka

WordPress REST API GET Single