*ngFor u Angularu 101

Cilj blog posta “*ngFor u Angularu za početnike” je napraviti uvod u ngFor Angular direktivu jer ona je osnova koju svaki, Angular, developer treba i mora znati.

*ngFor direktiva se primarno koristi za prikaz niza podataka (array) i početnicima može predstavljati poseban izazov. Također, može se koristiti i za prikaz objekata uz pomoć KeyValuePipe.

Prije nego krenem s izradom primjera trebam kreirati Angular projekt, a to činim naredbom:

Projekt je vidljiv na adresi http://localhost:4200/

Uvod

*ngFor direktiva u Angularu, osim što služi za prikaz niza podataka, je optimizirana da minimalno utječe na DOM (Document Object Model).

To će se najbolje vidjeti u nastavku kada budem koristio let i = index pri čemu ću uklanjati elemente niza bez da ga cijelog ponovno osvježavam.

Angular će se pobrinuti za to da samo taj jedan element izbaci dok sve drugo ostaje isto. Isti slučaj bi bio i kada bi htio dodati novi element u niz.

U slučaju kada podatke dohvaćamo putem nekog API-ja dogodit će se, u slučaju kada se neki podataka obriše ili doda, da Angular više neće znati što treba biti na kojoj poziciji. U tom slučaju koristim trackBy putem čega Angularu mogu reći koji parametar da koristi kako bi identificirao elemente.

*ngFor – prikaz niza podataka

Ako npr. imam sljedeći niz podatka za pretpostaviti je da ih želim na ekranu prikazati kao popis. U ovom će slučaju to biti jednostavan popis osoba. Podaci su fiksno određeni unutar niza, ali logika je ista čak i da stižu putem nekog API-ja.

Gore navedeni popis podataka želim prikazati na sljedeći način:

To znači da nekako moram postići da se za svaki objekt unutar niza kreira novi <li></li> element.

Upravo tu uskače *ngFor sa vrlo jednostavnom sintaksom *ngFor="let <value> of <collection>" pri čemu <value> označava naziv varijable koji proizvoljno određujem, dok <collection> označava izvor podataka što je u ovom slučaju niz simpleArray.

Konačni rezultat je sljedeći:

**ngFor u Angularu za početnike

Ako želim imati redne brojeve mogu koristiti ol tag. Ovo spominjem samo iz razloga što ću u nastavku pokazati kako je redne brojeve moguće dobiti i pomoću indexa elementa.

*ngFor u Angularu za početnike

*ngFor + element index

index se definira kao varijabla let i = index i uvijek počinje od 0. Mogu ga koristiti kako bi prikazao redne brojeve elemenata.

Na ekranu to izgleda ovako:

*ngFor u Angularu za početnike

index mogu, ali i ne moram prikazati na ekranu. U oba ga slučaja mogu koristiti kako bi pristupio pojednom elementu niza.

U sljedećem ću primjeru pomoću funkcije removeByIndex(i) ukloniti neke elemente iz niza.

Funkciju pozivam klikom na pojedini element.

U praksi to izgleda ovako:

Angular index element

*ngFor + trackBy

trackBy se definira kao ; trackBy: id.

Pomoću funkcije trackElement(i,data.id) dohvaćam unikatni ID svakog elementa niza.

U praksi to izgleda ovako:

*ngFor trackBy

*ngFor – prvi i zadnji element niza

*ngFor direktiva u Angularu nudi još jednu zanimljivu mogućnost, a to je dohvaćanje prvog i zadnjeg elementa niza pomoću ; let first = first; let last = last.

Na taj se način prvi i zadnji element mogu npr. urediti CSS-om.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

Iako ovo još nisam koristio u nekoj produkcijskoj aplikaciji izgleda vrlo zanimljivo.

*ngFor – parni i neparni elementi niza

Kada već spominjem uređivanje elementata CSS-om, postoji još jedna zanimljiva funkcionalnost korištenjem ; let even = even; let odd = odd.

Na taj se način parni i neparni elementi mogu npr. urediti CSS-om.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

*ngFor – niz unutar niza

Osim prikaza osnovnog niza mogu prikazati i napredni niz tj. countryList niz unutar nestedArray niza.

U ovom slučaju *ngFor ide unutar <ul>.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

Zaključak

U ovom blog postu, pod nazivom “*ngFor u Angularu za početnike“, naveo sam osnovne funkcionalnosti *ngFor direktive s kojom svaki developer može napraviti funkcionalno rješenje. Sve dalje ovisi o specifičnim potrebama projekta.

P.S. Struktura projekta prema package.json:

Kako pomoću SOAP protokola slati/primati XML u PHP-u

Iako sam do sada radio isključivo s REST API-jem koristeći JSON u ovom ću blog postu pokazati kako pomoću SOAP protokola slati/primati XML u PHP-u.

Nekoliko stvari će biti pojašnjeno:
– kako treba izgledati XML kojeg šaljem kako bi dobio očekivani rezultat
– kako raspakirati dobiveni rezultat i od njega napraviti niz (array) podataka
– od čega se sastoji __doRequest metoda

XAMPP

S obzirom da ću sve raditi i testirati na lokalnom računalu potreban mi je XAMPP, jedno od popularnijih PHP razvojnih okruženja.

Ako lokalno želim koristiti SOAP protokol moram aktivirati SoapClient jer ću inače dobiti sljedeću grešku:

Aktivacija se vrši unutar Apache modula – ConfigPHP (php.ini).

SOAP XAMPP

Potrebno je pronaći ;extension=php_soap.dll i maknuti ; te nakon toga restartati Apache modul.

SOAP XAMPP

Postman

Prije nego krenem s izradom primjera u PHP-u moram se uvjeriti da API radi, a to ću napraviti kroz Postman.

Kod slanja zahtjeva na API moram pod Headers postaviti Content-Type: text/xml dok u Body ide XML u raw obliku.

Na prvom API-ju dobijem popis stanica.

SOAP XML Postman

Na drugom API-ju, nakon što pošaljem ID dvije stanice i datum, dobijem popis aktivnih stanica za odabrani datum.

SOAP XML Postman

PHP demo aplikacija

U službenoj dokumentaciji na adresi https://www.php.net/manual/en/class.soapclient.php saznao sam koje parametre trebam poslati kako bi dobio željeni rezultat.

__doRequest metoda me u ovom slučaju najviše zanima.

Iz priložene dokumentacije vidim da mi je potrebno četiri tj. pet parametara.

getStanice

string $request je zapravo XML koji sam u Postmanu slao kroz Body.

string $location je URL API-ja.

string $action je potrebno pronaći u dokumentaciji API-ja.

int $version označava verziju XML-a. U ovom slučaju to je 1.

Sve zajedno to izgleda ovako

Nakon što sam dobio rezultat $result trebam iz njega izvući nazive stanica tj. njihove ID-eve kako bi mogao kreirati select polja. Ovdje koristim getElementsByTagName() metodu.

[nodeValue]

print_r($popisStanica); daje sljedeći rezultat u kojemu gledam [nodeValue] unutar kojega se nalazi string sa svim podacima od pojedine stanice. Npr. [nodeValue] => idNAZIVgps1GPS2granicaZEMLJAIDnazivzemljeOZNAKA.

Od toga sada mogu kreirati dva select polja + polje za odabir datuma.

Krajnji rezultat su dva padajuća izbornika sa popisom stanica.

SOAP protokol

getLinije

string $request je zapravo XML koji sam u Postmanu slao kroz Body.

Parametre StanicaOd, StanicaDo i Datum dohvaćam dinamički putem forme kroz funkciju display().

string $location je URL API-ja.

string $action je potrebno pronaći u dokumentaciji API-ja.

int $version označava verziju XML-a. U ovom slučaju to je 1.

Sve zajedno to izgleda ovako

Nakon što sam dobio rezultat $result trebam iz njega izvući nazive stanica tj. njihove ID-eve, termine polaska, dolaska i ukupno trajanje putovanja kako bi mogao kreirati tablicu. Ovdje također koristim getElementsByTagName() metodu.

[nodeValue]

Krajnji rezultat izgleda ovako:

SOAP post

Prikaz vremena polaska, dolaska i trajanje mogu se pomoću jedne funkcije ljepše formatirati.

Krajnji rezultat sada izgleda ovako:

SOAP post

Zaključak

Cilj ovog blog posta bio je pokazati kako napraviti demo PHP aplikaciju pomoću koje se može primiti/poslati XML putem SOAP protokola.

Recenzija: CSS Grid by Wes Bos, 2. dio

Wes Bos je poduzetnik i autor nekoliko tečajeva, među kojima je i ovaj o CSS Gridu. S obzirom da mi njegov stil podučavanja odgovara neke od tečajeva sam i kupio kako bi na strukturiran način saznao i naučio nešto novo.

Redovito ih se sjetim kada me netko od kolega pita za dobre online resurse, a prema njihovim pozitivnim reakcijama zaključio sam da bi bilo dobro nešto više o tome napisati i na blogu.

Jedan od tih tečajeva je CSS Grid koji je u potpunosti besplatan, a moguće ga je pronaći na adresi https://cssgrid.io/. Sastoji se od 25 videa tj. lekcija od kojih će svaka biti detaljnije pojašnjena u nastavku.

Prvi dio blog posta objavljen pod naslovomRecenzija: CSS Grid by Wes Bos, 1. dio“.

11.) Spanning and Placing Cardio

U ovom dijelu tečaja cilj je ponoviti sve do sada obrađeno tj. samostalno napraviti primjer stranice sa zadanim rasmještajem elemenata.

Ovdje je poželjno “izgubiti” nešto vremena i barem pokušati samostalno napraviti krajnje rješenje nego u startu gledati kako ti radi Wes Bos.

Krajnje rješenje izgleda kao u nastavku. Zakomentirani dijelovi su moji pokušaji prije nego sam ih ispravno napravio.

Spanning and Placing Cardio

12.) auto-fit and auto-fill

auto-fit i auto-fill koriste se za bolje upravljanje kolonama tj. stupcima grid-template-columns.

Na početku imam sljedeću situaciju

Na ekranu će to izgledati kao na slici ispod. Znači, imam pet kolona i višak praznog prostora sa desne strane ekrana. U slučaju kada znam kakav će sadržaj biti u svakoj koloni tj. kada znam koliko takvih kolona mi je potrebno da bi popunio cijeli red onda mogu koristiti nešto kao grid-template-columns: repeat(5, 100px).

auto-fit i auto-fill

Međutim ako nisam siguran kakav će mi biti sadržaj u svakoj koloni niti koliko njih mi je potrebno da popunim cijeli red, a ipak želim da cijeli red bude dinamički popunjen mogu koristiti npr. grid-template-columns: repeat(auto-fill, 100px) tj. grid-template-columns: repeat(auto-fit, 100px) i rezultat će biti sljedeći

auto-fit i auto-fill

Gledajući gornju sliku lako se može zaključiti da ne postoji razlika između auto-fit i auto-fill, međutim razlika postoji i može se vidjeti kada nema dovoljno kolona da popune cijeli red.

auto-fit završava red iza zadnje kolone – vidljivo po punoj okomitoj liniji na kraju zadnje kolone što označava explicit grid pojašnjen u prethodnom blog postu.

auto-fit i auto-fill

auto-fill kreira prazne kolone u preostalom prostoru. U te je kolone moguće postaviti novi sadržaj.

auto-fit i auto-fill

Npr. mogu dodati jednu kolonu u krajnji desni rub ekrana.

auto-fit i auto-fill

Recenzija: CSS Grid by Wes Bos, 1. dio

Kada su u pitanju HTML i CSS dosta developera voli misliti da ih zna 90%-100%, a upravo ovakvi tečajevi služe da to demantiraju.

Wes Bos je poduzetnik i autor nekoliko tečajeva, među kojima je i ovaj o CSS Gridu. S obzirom da mi njegov stil podučavanja odgovara neke od tečajeva sam i kupio kako bi na strukturiran način saznao i naučio nešto novo.

Redovito ih se sjetim kada me netko od kolega pita za dobre online resurse, a prema njihovim pozitivnim reakcijama zaključio sam da bi bilo dobro nešto više o tome napisati i na blogu.

Jedan od tih tečajeva je CSS Grid koji je u potpunosti besplatan, a moguće ga je pronaći na adresi https://cssgrid.io/. Sastoji se od 25 videa tj. lekcija od kojih će svaka biti detaljnije pojašnjena u nastavku. Trajanje snimljenog materijala je 4 sata, ali ako se paralelno idu raditi primjeri satnica će vrlo brzo rasti.

CSS Grid by Wes Bos

1. Introduction

U ovom dijelu Wes Bos daje uvod u tečaj i naglašava kako Firefox stoji iza odluke da tečaj bude besplatan zbog čega ćemo koristiti njihove alate u nastavku tečaja.

Autor također potiče developere koji će krenuti s ovim tečajem da redovito daju povratne informacije, bilo to putem društvenih mreža ili blogova.

Osim toga, na svakome od nas ostaje odluka hoćemo li ovaj tečaj pogledati samo da bismo mogli reći da smo ga prošli ili ćemo paralelno raditi primjere i tako nešto konkretno i naučiti.

2. Starter files

Preporuka ovog dijela tečaja je preuzeti i koristiti Firefox Quantum: Developer Edition koji je sa svojim naprednim rješenjima prilagođen upravo developerima.

Sve starter datoteke moguće je preuzeti na adresi https://courses.wesbos.com/account/ nakon besplatne registracije. Za one nestrpljive datoteke se nalaze i na sljedećoj poveznici https://github.com/wesbos/css-grid.

Nakon preuzimanja moguće je vidjeti package.json datoteku:


Zbog paketa “browser-sync” i “run-script-os” potrebno je na računalu imati instaliran NodeJS.

Pokretanjem ove dvije naredbe instaliram ranije navedene NPM pakete i tečaj mi se otvara u odabranom web pregledniku.


CSS Grid by Wes Bos

Ovo je sada temelj svega što ću u nastavku raditi.

3. CSS Grid Fundamentals

Fokus ovog dijela tečaja je odgovor na pitanje – što je CSS Grid? U donjem primjeru ako smo za klasu container rekli da je display: grid; automatski smo sve unutarnje elemente, u ovom slučaju to su <div class="item">1</div>, klasificirali kao dijelove CSS Grida.

Nakon toga ostaje podijeliti ih u redove i kolone pomoću: grid-template-columns, grid-template-rows i grid-gap.

4. CSS Grid Dev Tools

Desni klik miša tj. odabir “Inspect Elements” vodi nas do dijela web preglednika koji je poznat svakom web developeru.

Ovdje upoznajemo Grid Inspector.

Grid Inspector

5. CSS Grid Implicit vs Explicit Tracks

Explicit označava sve kolone (grid-template-columns) i redove (grid-template-rows) koje smo sami odredili tj. zadali im parametre. U ovom primjeru to su prve dvije kolone tj. prva dva reda.


Explicit CSS Grid

Implicit označava sve preostale kolone (grid-auto-columns) i redove (grid-auto-rows). U ovom primjeru to su zadnja dva, tj. blokovi 5, 6, 7 i 8.


Implicit CSS Grid

Zaključno, u sljedećem primjeru explicit su nam kolone dok su redovi implicit jer njih nigdje nismo definirali, a svejedno ih imamo.


CSS Grid Implicit vs Explicit Tracks

6. CSS Grid Auto Flow

U ovom dijelu tečaja pojašnjen je grid-auto-flow pomoću kojega određujemo hoće li implicitno kreirani elementi biti prikazani kao redovi ili stupci.

U startu dodajemo dva elementa i za njih definiramo dva stupca.


CSS Grid Auto Flow

Međutim, ako dodamo nekoliko novih elemenata koje nismo eksplicitno odredili pitanje je gdje će se oni prikazati.

Zadano će biti prikazani kao redovi,


CSS Grid Auto Flow

a možemo ih prikazati i kao stupce.


CSS Grid Auto Flow

Zaključno, na taj se način može napraviti horizontalni scroll.

CSS Grid Auto Flow

7. Sizing tracks in CSS Grid

Ovdje se upoznajemo s fr (fractional unit) jedinicom koja označava preostali slobodan prostor na ekranu.

Ako definiramo tri stupca na sljedeći način


prva dva će biti široka 150px dok će zadnji biti širok koliko god je ostalo viška prostora.

Fr (fractional unit) uzima u obzir grid-gap tako da naši stupci prikazuju u prostoru koji ostane nakon što se zauzme grid-gap.

Sizing tracks in CSS Grid

Isto tako, moguće je koristiti i parametar auto.

Donji primjer označava prvi stupac čija je širina određena kao auto što znači da će on biti širok koliko i sadržaj unutar njega dok će drugi stupac uzeti preostali prostor 1fr.


Sizing tracks in CSS Grid

8. CSS Grid repeat function

Sve navedeno ranije može se napraviti na jednostavniji način koristeći repeat() funkciju. Npr. umjesto definiranja četiri stupca na standardni način


možemo ih definirati na sljedeći način gdje prva vrijednost označava koliko puta je taj element potrebno ponoviti, a druga vrijednost označava širinu.


Rezultat će biti isti tj. imati ćemo četiri stupca jednake širine.

CSS Grid repeat function

Mogu se raditi i naprednije stvari. Npr. prvi stupac će biti širok 100px dok će od preostalih osam jedan biti 1fr, drugi 2fr, treći 1fr,…


CSS Grid repeat function

9. Sizing Grid Items

U ovom dijelu fokus je na pojedinačnim elementima kompletnog grida, <div class="item item1">1</div>.

Ako napravimo sljedeće dobit ćemo pet stupaca koji su raspoređeni tako da zauzimaju sav slobodan prostor.


Sizing grid items

Pomoću parametara grid-column i grid-row možemo zadati visinu odnosno širinu pojedinog elementa, neka to sada bude .item17. Ostali elementi se automatski repozicioniraju.

Pomoću grid-column: span 2; određujemo širinu.

Sizing grid items

Pomoću grid-row: span 2; određujemo visinu.

Sizing grid items

Ako ih koristimo zajedno određujemo visinu i širinu.


Sizing grid items

U primjeru na slici iznad odredili smo visinu i širinu jednog elementa dok su se ostali automatski posložili na svoje nove pozicije.

U nastavku se može vidjeti primjer kada odabranom elementu zadajemo mjesto početka i mjesto završetka.

10. Placing Grid Items

Početni raspored svih elemenata izgleda ovako i ovdje će fokus biti na pozicioniranju elementa s klasom .poop.


Placing Grid Items

Na ovaj način određujem startnu poziciju odabranog elementa.


Placing Grid Items

Sada ću uz mjesto početka odabranom elementu zadati i mjesto završetka.

To mogu napraviti pojedinačno za početak i završetak.


A mogu i na skraćeni način.


Rezultat je isti.

Placing Grid Items

Osim što odabranom elementu na gornji način mogu reći gdje počinje i završava također mu na sljedeći način mogu odrediti širinu.


Placing Grid Items


Placing Grid Items

Ako želim da odabrani element uvijek počinje na prvom mjestu i završava na posljednjem napravit ću sljedeće. Ovo se može koristiti i kao zamjena za width: 100%;


Placing Grid Items

Isto to možemo napraviti i kada su u pitanju redovi koristeći grid-row.


Placing Grid Items

Naravno, moguće ih je i kombinirati.


Placing Grid Items

Nastavak ovog blog posta uskoro pod naslovom “Recenzija: CSS Grid by Wes Bos, 2. dio“.