Arhiva Frontend - Stranica 4 od 5

Angular & pdfmake – kreiranje PDF-a

U ovom ću blog postu pokazati kako kreirati PDF dokument unutar Angular web aplikacije koristeći pdfmake.

Što je pdfmake?

pdfmake je biblioteka temeljena na JavaScriptu koja omogućava kreiranje PDF dokumenata iz JSON-a. Može se koristiti na serverskoj npm install pdfmake i klijentskoj bower install pdfmake strani.

Osobno, više sam za NPM nego za Bower. Razloga je nekoliko.

Kreiranje Angular projekta

Koristeći Angular CLI pokrećem novi projekt

$ ng new AngularPdfMAke
$ ng serve

1 2	$ ng new AngularPdfMAke $ ng serve

Nakon što sam pokrenuo web aplikaciju u web pregledniku i uvjerio se da sam sve ispravno postavio mogu krenuti u instalaciju pdfmake biblioteke.

pdfmake implementacija

$ npm install pdfmake

1	$ npm install pdfmake

Nakon instalacije uvozim pdfmake u komponentu unutar koje želim kreirati PDF.

import { Component } from '@angular/core';

var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
...

import { Component } from '@angular/core';

var pdfMake = require('pdfmake/build/pdfmake.js');

var pdfFonts = require('pdfmake/build/vfs_fonts.js');

pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

...

Što se vidljivog dijela aplikacije tiče ondje će se u ovom primjeru nalaziti samo tri gumba, po jedan za otvaranje, preuzimanje i ispis PDF-a.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Angular & pdfmake - kreiranje PDF-a
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<div class="button">
  <button (click)="open()">Open</button> - <button (click)="download()">Download</button> - <button (click)="print()">Print</button>
</div>

<h1>

Angular & pdfmake - kreiranje PDF-a

</h1>

</div>

<button (click)="open()">Open</button> - <button (click)="download()">Download</button> - <button (click)="print()">Print</button>

</div>

Kreiranje PDF-a moguće je na tri načina:

1.) Otvara PDF u novom tabu web preglednika.

pdfMake.createPdf(this.docDefinition).open();

1	pdfMake.createPdf(this.docDefinition).open();

2.) Otvara prozor za ispis.

pdfMake.createPdf(this.docDefinition).print();

1	pdfMake.createPdf(this.docDefinition).print();

3.) Preuzimanje PDF-a na računalo. U ovom je slučaju moguće unaprijed odrediti naziv PDF-a.

pdfMake.createPdf(this.docDefinition).download('exampleDocument.pdf');

1	pdfMake.createPdf(this.docDefinition).download('exampleDocument.pdf');

Kao što se vidi iz gore navedenih funkcija sadržaj od kojega se kreira PDF dobije se iz objekta this.docDefinition koji u ovom konkretnom primjeru izgleda ovako:

this.docDefinition = {
      content: [
        { text: 'Ovo je naslov', style: 'header' },
        'Primjer sadržaja bez dodatnog uređivanja.',
        { text: 'Poravnato desno.', style: 'anotherStyle' },
        { text: 'Kombinacija više stilova.', style: [ 'header', 'anotherStyle' ] }
      ],
    
      styles: {
        header: {
          fontSize: 22,
          bold: true
        },
        anotherStyle: {
          italics: true,
          alignment: 'right'
        }
      }
    };

this.docDefinition = {

content: [

{ text: 'Ovo je naslov', style: 'header' },

'Primjer sadržaja bez dodatnog uređivanja.',

{ text: 'Poravnato desno.', style: 'anotherStyle' },

{ text: 'Kombinacija više stilova.', style: [ 'header', 'anotherStyle' ] }

styles: {

header: {

fontSize: 22,

bold: true

anotherStyle: {

italics: true,

alignment: 'right'

}

};

Više primjera moguće je pronaći na poveznici http://pdfmake.org/playground.html

Osim toga, tražio sam popis mogućih CSS stilova i za sada sam pronašao poveznicu https://stackoverflow.com/a/32805835/5059916 na kojoj se spominje nekoliko njih.

Zaključak

pdfmake omogućava brzo i jednostavno kreiranje PDF-a unutar Angular aplikacije.

I za kraj, u nastavku dajem strukturu projekta prema package.json datoteci.

{
  "name": "angular-pdf-make",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "pdfmake": "^0.1.35",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

{

"name": "angular-pdf-make",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build --prod",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^5.2.0",

"@angular/common": "^5.2.0",

"@angular/compiler": "^5.2.0",

"@angular/core": "^5.2.0",

"@angular/forms": "^5.2.0",

"@angular/http": "^5.2.0",

"@angular/platform-browser": "^5.2.0",

"@angular/platform-browser-dynamic": "^5.2.0",

"@angular/router": "^5.2.0",

"core-js": "^2.4.1",

"pdfmake": "^0.1.35",

"rxjs": "^5.5.6",

"zone.js": "^0.8.19"

"devDependencies": {

"@angular/cli": "1.6.6",

"@angular/compiler-cli": "^5.2.0",

"@angular/language-service": "^5.2.0",

"@types/jasmine": "~2.8.3",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "^4.0.1",

"jasmine-core": "~2.8.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~2.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~4.1.0",

"tslint": "~5.9.1",

"typescript": "~2.5.3"

}

Promjena verzije PHP-a za WordPress

S obzirom da sve volim imati “up-to-date”, koliko god je to moguće, nedavno sam istraživao koliki utjecaj verzija PHP-a ima na WordPress. Iako je i sam WordPress pisan u PHP-u velika je vjerojatnost da se korisnik običnog WordPress bloga nikada neće niti susresti s pravim PHP-om koji stoji “ispod poklopca”. No, to nije razlog da se zanemare prednosti koje donose novije verzije PHP-a, ako ništa drugo, onda po pitanju sigurnosti i performansi.

Što je potrebno za samostalnu promjenu PHP verzije?
– WordPress instalacija
– pristup cPanelu
– pristup opciji Select PHP Version unutar cPanela
– PHP Compatibility Checker plugin
– Display PHP Version plugin

Trenutna verzija PHP-a

Prije svega potrebno je (sa)znati koja se verzija PHP-a trenutno koristi kako bi uopće znali koje nam opcije nadogradnje ostaju i što s njima možemo dobiti. Za tu svrhu može se koristiti “Display PHP Version” plugin koji će nakon instalacije i aktivacije unutar upravljačke ploče WordPress nadzorne ploče prikazati trenutno korištenu verziju PHP-a.

U mojem slučaju to je bila verzija 5.3.29.

Nakon što sam saznao koju verziju PHP-a trenutno koristim zaključujem da bi se trebao prebaciti na (naj)noviju verziju.

Promjena verzije PHP-a za WordPress — PHP Supported Versions

Međutim, prije nego to napravim trebam se uvjeriti da su tema koju koristim i svi pluginovi kompatibilni sa verzijom PHP-a, na koju se planiram prebaciti, jer se u suprotnom WordPress stranica može srušiti.

Kompatibilnost nove verzije PHP-a

Kada se koriste najnovije verzije teme i pluginova mala je vjerojatnost da isti neće biti kompatibilni sa novom verzijom PHP-a, ali ipak može se i to dogoditi. Zato je važno prije promjene provjeriti jesu li tema i svi pluginovi kompatibilni sa novom verzijom PHP-a.

To je moguće učiniti koristeći PHP Compatibility Checker plugin.

Nakon instalacije i aktivacije dovoljno je otići u izbornik Alati -> PHP Compatibility -> odabrati željenu verziju PHP-a i kliknuti na Scan site.

Prvo ću provjeriti kompatibilnost sa trenutno najnovijom verzijom PHP-a, a to je verzija 7.0

Iz analize mogu vidjeti da mi jedan plugin, konkretno Social Warfare Pro kojeg sam platio 30ak $, nije kompatibilan sa verzijom 7.0 PHP-a. Zbog toga trenutno odlučujem da neću prelaziti na najnoviju verziju PHP-a, barem ne dok ne istražim moguće načine kako taj plugin prilagoditi ili moguće posljedice nadogradnje unatoč nekompatibilnosti.

Sljedeća logična verzija PHP-a je 5.6 te odlučujem testirati kompatibilnost svoje instalacije WordPressa s tom verzijom. Zaključujem da imam punu kompatibilnost i da se slobodno mogu prebaciti na verziju PHP-a 5.6

Promjena verzije PHP-a

Sada mogu otići u cPanel i promijeniti verziju PHP-a koristeći Select PHP Version.

Odabirem verziju 5.6 i klikom na Set as current potvrđujem da tu verziju želim koristiti.

Ako se sada vratim u nadzornu ploču mogu vidjeti da je nova verzija PHP-a za WordPress 5.6.32

Zaključak

So, now you know – PHP versions aren’t something you have to think about a lot, but it’s the engine that runs everything else. It matters, and you can improve your speed, security and compatibility, by making the right choice. – Does your PHP version matter?

Kako prilagoditi Angular početni zaslon (Initial Loading Screen)

Ako ste do sada razvijali Angular web aplikacije ili koristili tuđe mogli ste kod svih njih primijetiti jednu zajedničku stvar, a to je početni zaslon koji se prikazuje prije nego se učita Angular aplikacija i na kojemu u gornjem lijevom kutu ekrana piše “Loading…” (Angular 2) uz monotonu bijelu pozadinsku boju. Kasnije je to izbačeno te se prikazuje samo obična, prazna, bijela pozadina (>= Angular 4).

Išao sam malo istražiti kako najbolje to riješiti tako da i meni kao developeru, a i korisniku bude lijepo. Našao sam nekoliko mogućnosti od kojih sam odabrao jednu o kojoj ću nešto više napisati u nastavku.

Kreiranje novog Angular projekta

Koristeći Angular CLI pokrećem novi projekt

$ ng new AngularLoadingScreen
$ ng serve

1 2	$ ng new AngularLoadingScreen $ ng serve

Početni zaslon je čisto bijele boje i to je dobar izbor ako nakon toga ide prikaz npr. stranice za prijavu korisnika s bijelom pozadinom. U tom će se slučaju te dvije bijele pozadinske boje lijepo stopiti i činiti cjelinu.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularLoadingScreen</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

<!doctype html>

<head>

<title>AngularLoadingScreen</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

Prilagođeni početni zaslon

Za promjenu prikaza početnog zaslona dovoljno je kreirati novi <div> s klasom loading.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularLoadingScreen</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <div class="loading"></div>
</body>
</html>

<!doctype html>

<head>

<title>AngularLoadingScreen</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

.loading {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: -1;
}

my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

.loading {

opacity: 0;

transition: opacity .8s ease-in-out;

position: fixed;

height: 100%;

width: 100%;

top: 0;

left: 0;

background: #000;

z-index: -1;

}

my-app:empty + .loading {

opacity: 1;

z-index: 100;

}

Na kraju to izgleda ovako

Zaključak

To bi bilo sve. Ovo se možda ne čini kao nešto vrijedno spomena, ali svakako daje onaj završni sjaj Angular web aplikaciji.

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.

$ ng new AngularCRUD
$ ng serve

1 2	$ ng new AngularCRUD $ ng serve

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

1	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

. 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

$ ng generate service KorisniciAPI

1	$ ng generate service KorisniciAPI

Nakon čega dobijem korisnici-api.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class KorisniciApiService {

  constructor() { }

}

import { Injectable } from '@angular/core';

@Injectable()

export class KorisniciApiService {

constructor() { }

}

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.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class KorisniciApiService {

  constructor(private _http: Http) {}

  // Pregled svih korisnika u imeniku
  svi(){
		return this._http.get('http://localhost:3000/Imenik')
				   .map(res => res.json());
  } 

  // Dodavanje korisnika u imenik
  dodaj(a:any){
		return this._http.post('http://localhost:3000/Imenik', a)
				   .map(res => res.json());
  } 

  // Uređivanje korisnika u imeniku
  uredi(a:any){
    return this._http.put('http://localhost:3000/Imenik/' + a.id, a)
                .map(res => res.json());  
   } 

  // Brisanje korisnika iz imenika
  obrisi(a:any){
		return this._http.delete('http://localhost:3000/Imenik/' + a)
					.map(res => res.json());
  }

}

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class KorisniciApiService {

constructor(private _http: Http) {}

// Pregled svih korisnika u imeniku

svi(){

return this._http.get('http://localhost:3000/Imenik')

.map(res => res.json());

}

// Dodavanje korisnika u imenik

dodaj(a:any){

return this._http.post('http://localhost:3000/Imenik', a)

.map(res => res.json());

}

// Uređivanje korisnika u imeniku

uredi(a:any){

return this._http.put('http://localhost:3000/Imenik/' + a.id, a)

.map(res => res.json());

}

// Brisanje korisnika iz imenika

obrisi(a:any){

return this._http.delete('http://localhost:3000/Imenik/' + a)

.map(res => res.json());

}

Izgled forme (app.component.html)

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

<div class="container-fluid">
  <div class="row">
      <div class="col-lg-8">
        <div class="panel panel-default">
          <div class="panel-heading">Dodaj/Uredi korisnika:</div>
          <div class="panel-body">
            <form name="ImenikForma" novalidate>
                <div class="form-group">
                    <div class="row">
                      <div class="col col-lg-5 col-md-5" ng-class="{ 'has-error' : ImenikForma.ime.$invalid && !ImenikForma.ime.$pristine }">
                          <div id="input_container">
                            <input type="text" class="form-control" id="ime" required maxlength="30" placeholder="Ime i prezime" [(ngModel)]="korisnik.ime" [ngModelOptions]="{standalone: true}" #ime="ngModel">
                          </div>
                        </div>
                        <div class="col col-lg-5 col-md-5" ng-class="{ 'has-error' : ImenikForma.telefon.$invalid && !ImenikForma.telefon.$pristine }">
                            <div id="input_container">
                              <input type="tel" class="form-control" id="telefon" required placeholder="Telefon" [(ngModel)]="korisnik.telefon" [ngModelOptions]="{standalone: true}" #telefon="ngModel">
                            </div>
                          </div>
                          <div class="col col-lg-2 col-md-2">
                              <div id="input_container">
                              <div *ngIf="spremi" class="text-center"><button type="button" class="btn btn-success btn-md" (click)="dodajKorisnika(korisnik)" [disabled]="!ime.valid || !telefon.valid"> Spremi </button></div> 
                              <div *ngIf="!spremi" class="text-center"><button type="button" class="btn btn-success btn-md" (click)="urediKorisnika2(korisnik)" [disabled]="!ime.valid || !telefon.valid"> Uredi </button></div>
                            </div>
                          </div>
                        </div>
                  </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    
      <div class="row">
        <div class="col-lg-8">
          <div class="panel panel-default">
            <div class="panel-heading">Ukupno korisnika: {{ukupanbrojkorisnika}}</div>
            <div class="panel-body">
              <form novalidate>
                <div >
                  <span *ngIf="ukupanbrojkorisnika < 1">Nema podataka</span>
                  <table *ngIf="ukupanbrojkorisnika > 0" class="table table-striped table-hover table-responsive" ng-switch-default>
                    <thead>
                      <tr>
                        <th class="tablica text-center">Rb.</th>
                        <th class="tablica text-center">Ime</th>
                        <th class="tablica text-center">Telefon</th>
                        <th class="tablica text-center">Uredi | Obriši</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let kor of svikorisnici; let i = index">
                        <td class="tablica text-center">{{i+1}}.</td>
                        <td class="tablica text-center">{{kor.ime}}</td>
                        <td class="tablica text-center">{{kor.telefon}}</td>
                        <td class="tablica text-center">
                          <button class="btn btn-info btn-sm" (click)="urediKorisnika(kor)"><i class="glyphicon glyphicon-edit"></i></button>
                          <button class="btn btn-danger btn-sm" (click)="obrisiKorisnika(kor)"><i class="glyphicon glyphicon-trash"></i></button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div> 
    </div>

<div class="panel-heading">Dodaj/Uredi korisnika:</div>

</div>

</div>

<div *ngIf="spremi" class="text-center"><button type="button" class="btn btn-success btn-md" (click)="dodajKorisnika(korisnik)" [disabled]="!ime.valid || !telefon.valid"> Spremi </button></div>

<div *ngIf="!spremi" class="text-center"><button type="button" class="btn btn-success btn-md" (click)="urediKorisnika2(korisnik)" [disabled]="!ime.valid || !telefon.valid"> Uredi </button></div>

</div>

</form>

</div>

<div class="panel-heading">Ukupno korisnika: {{ukupanbrojkorisnika}}</div>

<div >

<span *ngIf="ukupanbrojkorisnika < 1">Nema podataka</span>

<table *ngIf="ukupanbrojkorisnika > 0" class="table table-striped table-hover table-responsive" ng-switch-default>

<thead>

<tr>

<th class="tablica text-center">Telefon</th>

<th class="tablica text-center">Uredi | Obriši</th>

</tr>

</thead>

<tbody>

<td class="tablica text-center">{{kor.telefon}}</td>

</td>

</tr>

</tbody>

</table>

</div>

</form>

</div>

Forma na početku i bez podataka izgleda ovako:

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

dodajKorisnika(korisnik){
     this._korisniciService.dodaj(korisnik).subscribe(
      res => {
        console.log(res);
        this.dohvatiSveKorisnike();
        this.korisnik.ime = ' ';
        this.korisnik.telefon = ' ';
      });
  }

dodajKorisnika(korisnik){

this._korisniciService.dodaj(korisnik).subscribe(

res => {

console.log(res);

this.dohvatiSveKorisnike();

this.korisnik.ime = ' ';

this.korisnik.telefon = ' ';

});

}

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

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.

ngOnInit() {
      this.dohvatiSveKorisnike();
    }

    dohvatiSveKorisnike(){
     this._korisniciService.svi().subscribe(res => {
       console.log(res);
       this.svikorisnici = res;
       this.ukupanbrojkorisnika = res.length;
      });
    }

ngOnInit() {

this.dohvatiSveKorisnike();

}

dohvatiSveKorisnike(){

this._korisniciService.svi().subscribe(res => {

console.log(res);

this.svikorisnici = res;

this.ukupanbrojkorisnika = res.length;

});

}

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

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.

urediKorisnika(kor){
      console.log(kor);
      this.spremi = false;
      this.korisnik.id = kor.id;
      this.korisnik.ime = kor.ime;
      this.korisnik.telefon = kor.telefon;
  }

  urediKorisnika2(korisnik){
      console.log(korisnik);
      this._korisniciService.uredi(korisnik).subscribe(
        res => {
          console.log(res);
          this.dohvatiSveKorisnike();
          this.korisnik.ime = ' ';
          this.korisnik.telefon = ' ';
          this.spremi = true;
      });
  }

urediKorisnika(kor){

console.log(kor);

this.spremi = false;

this.korisnik.id = kor.id;

this.korisnik.ime = kor.ime;

this.korisnik.telefon = kor.telefon;

}

urediKorisnika2(korisnik){

console.log(korisnik);

this._korisniciService.uredi(korisnik).subscribe(

res => {

console.log(res);

this.dohvatiSveKorisnike();

this.korisnik.ime = ' ';

this.korisnik.telefon = ' ';

this.spremi = true;

});

}

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

Brisanje (DELETE)

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

obrisiKorisnika(kor){
    let id = kor.id;
    if(window.confirm('Jeste li sigurni da želite obrisati korisnika?')){
    this._korisniciService.obrisi(id).subscribe(
      res => {
        console.log(res);
        this.dohvatiSveKorisnike();
    });
    } 
  }

obrisiKorisnika(kor){

let id = kor.id;

if(window.confirm('Jeste li sigurni da želite obrisati korisnika?')){

this._korisniciService.obrisi(id).subscribe(

res => {

console.log(res);

this.dohvatiSveKorisnike();

});

}

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:

{
  "name": "angular-crud",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.7",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }
}

{

"name": "angular-crud",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^4.2.4",

"@angular/common": "^4.2.4",

"@angular/compiler": "^4.2.4",

"@angular/core": "^4.2.4",

"@angular/forms": "^4.2.4",

"@angular/http": "^4.2.4",

"@angular/platform-browser": "^4.2.4",

"@angular/platform-browser-dynamic": "^4.2.4",

"@angular/router": "^4.2.4",

"core-js": "^2.4.1",

"rxjs": "^5.4.2",

"zone.js": "^0.8.14"

"devDependencies": {

"@angular/cli": "1.4.7",

"@angular/compiler-cli": "^4.2.4",

"@angular/language-service": "^4.2.4",

"@types/jasmine": "~2.5.53",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "~3.2.0",

"jasmine-core": "~2.6.2",

"jasmine-spec-reporter": "~4.1.0",

"karma": "~1.7.0",

"karma-chrome-launcher": "~2.1.1",

"karma-cli": "~1.0.1",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~3.2.0",

"tslint": "~5.7.0",

"typescript": "~2.3.3"

}

Uvod u Angular Material

Prilikom pokretanja Angular projekta dobijemo dobru osnovu za razvoj web aplikacija. S obzirom da to podrazumijeva i dobar dizajn važno je odmah na početku odabrati kojim putem će se krenuti. U velikom broju slučajeva dobar izbor je Bootstrap, ali ako želimo nešto u skladu s trenutnim trendovima možemo koristiti još i Angular Material.

Kreiranje Angular projekta

Novi projekt kreiramo koristeći Angular CLI i pokrećemo naredbom

$ ng new AngularMaterial
$ cd AngularMaterial
$ ng serve

$ ng new AngularMaterial

$ cd AngularMaterial

$ ng serve

Sada na adresi http://localhost:4200 možemo vidjeti sljedeće

Instalacija Angular Material paketa

U mapi ranije kreiranog projekta pokrećemo sljedeću naredbu

$ npm install --save @angular/material @angular/cdk @angular/animations

1	$ npm install --save @angular/material @angular/cdk @angular/animations

Instalirali smo tri nova NPM paketa:
– @angular/material – službeni Material paket za Angular
– @angular/cdk – CDK (Component Development Kit) pruža mogućnost razvoja prilagođenih Angular Material komponenti
– @angular/animations – neke komponente ovise o ovome kako bi mogle prikazivati napredne tranzicije

I sada unutar package.json možemo vidjeti sljedeće

  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },

"dependencies": {

"@angular/animations": "^4.4.6",

"@angular/cdk": "^2.0.0-beta.12",

"@angular/common": "^4.2.4",

"@angular/compiler": "^4.2.4",

"@angular/core": "^4.2.4",

"@angular/forms": "^4.2.4",

"@angular/http": "^4.2.4",

"@angular/material": "^2.0.0-beta.12",

"@angular/platform-browser": "^4.2.4",

"@angular/platform-browser-dynamic": "^4.2.4",

"@angular/router": "^4.2.4",

"core-js": "^2.4.1",

"rxjs": "^5.4.2",

"zone.js": "^0.8.14"

Zadane Material teme

Angular Material nudi nam mogućnost biranja između nekoliko zadanih tema koje u projekt možemo dodati jednostavnim uvozom unutar datoteke src/styles.css

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

1 2	/* You can add global styles to this file, and also import other style files */ @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

– deeppurple-amber.css – @import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css’;
– indigo-pink.css – @import ‘~@angular/material/prebuilt-themes/indigo-pink.css’;
– pink-bluegrey.css – @import ‘~@angular/material/prebuilt-themes/pink-bluegrey.css’;
– purple-green.css – @import ‘~@angular/material/prebuilt-themes/purple-green.css’;

Material ikone i tipografija

Osim tema imamo mogućnost korištenja i Angular Material ikona kao i tipografije.

To postižemo dodavanjem sljedeće poveznice unutar src/index.html

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

1 2	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

Podrška za geste

$ npm install --save hammerjs

1	$ npm install --save hammerjs

U službenoj dokumentaciji spominje se još u Hammer.JS paket kojega je potrebno dodati u Angular projekt ako se planiraju koristiti komponente kao što su npr. Tooltip i Slider, kako bi se iz njih dobila maksimalna funkcionalnost.

Nakon instalacije potrebno je unutar src/main.ts dodati

import 'hammerjs';

1	import 'hammerjs';

Angular Material komponente

Instalacijom ranije navedenih paketa još uvijek nismo sve riješili i naš Angular projekt i dalje nema podršku za korištenje svih Angular Material komponenti.

Ako npr. želimo u projekt dodati npr. Card komponentu moramo unutar njene dokumentacije pronaći API referencu koja će nam to omogućiti.

Za svaku komponentu koju želimo koristiti moramo pronaći pripadajuću API referencu i navesti ju unutar naše app.module.ts datoteke što na kraju može izgledati i ovako:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, 
         MatCardModule,
         MatInputModule,
         MatSelectModule,
         MatMenuModule,
         MatToolbarModule,
         MatButtonToggleModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatSelectModule,
    MatMenuModule,
    MatToolbarModule,
    MatButtonToggleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatButtonModule,

MatCardModule,

MatInputModule,

MatSelectModule,

MatMenuModule,

MatToolbarModule,

MatButtonToggleModule } from '@angular/material';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

BrowserAnimationsModule,

MatButtonModule,

MatCardModule,

MatInputModule,

MatSelectModule,

MatMenuModule,

MatToolbarModule,

MatButtonToggleModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Ako sada usporedimo sliku izgleda Angular aplikacije s početka ovog blog posta i nakon dodavanja Angular Materiala razlika je jasno vidljiva.

Zaključak

I to je sve. Ovo čak može djelovati i previše jednostavno da bi bilo istinito, ali to je zapravo i cilj korištenja Angular Materiala.