Tomislav Stanković, Autor na Tomislav Stanković

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.

Ionic 3 desktop aplikacija

Iako sam do sada o Ionicu pisao samo u kontekstu mobilnih aplikacija nedavno sam naišao na primjere korištenja Ionica kao cross-platform desktop aplikacije što mi se učinilo zanimljivim pa sam odlučio nešto više saznati o tome i napisati ovaj blog post.

Što je Electron?

Electron je framework za razvoj cross-platform desktop aplikacija koristeći JavaScript, HTML i CSS. S tehnologijama koje koristi jako podsjeća na Ionic, a omogućava razvoj desktop aplikacija koje se mogu pokrenuti na Windows, Mac i Linux platformi.

Priprema Ionic projetka

Za početak ćemo kreirati novi Ionic projekt.

$ ionic start Ionic3ElectronApp sidemenu
$ cd Ionic3ElectronApp
$ ionic serve

$ ionic start Ionic3ElectronApp sidemenu

$ cd Ionic3ElectronApp

$ ionic serve

Kada aplikaciju pokrenemo nećemo vidjeti ništa što već ranije nismo vidjeli. Standardna Ionic aplikacija koja se pokreće u web pregledniku kao što je npr. Google Chrome.

Postavljanje Electron projekta

Sada je potrebno dodati Electron unutar našeg Ionic projekta koristeći naredbu:

$ npm install electron --save

1	$ npm install electron --save

Sve dalje opisane korake radimo prema službenoj dokumentaciji na adresi https://electron.atom.io/docs/

Sada ćemo kreirati datoteku main.js koja će biti ulazna točka prilikom pokretanja Ionic-Electron aplikacije. Više o ovoj datoteci možete pronaći na adresi https://electron.atom.io/docs/tutorial/quick-start/

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'www/index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

const {app, BrowserWindow} = require('electron')

const path = require('path')

const url = require('url')

// Keep a global reference of the window object, if you don't, the window will

// be closed automatically when the JavaScript object is garbage collected.

let win

function createWindow () {

// Create the browser window.

win = new BrowserWindow({width: 800, height: 600})

// and load the index.html of the app.

win.loadURL(url.format({

pathname: path.join(__dirname, 'www/index.html'),

protocol: 'file:',

slashes: true

}))

// Open the DevTools.

win.webContents.openDevTools()

// Emitted when the window is closed.

win.on('closed', () => {

// Dereference the window object, usually you would store windows

// in an array if your app supports multi windows, this is the time

// when you should delete the corresponding element.

win = null

})

}

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.on('ready', createWindow)

// Quit when all windows are closed.

app.on('window-all-closed', () => {

// On macOS it is common for applications and their menu bar

// to stay active until the user quits explicitly with Cmd + Q

if (process.platform !== 'darwin') {

app.quit()

}

})

app.on('activate', () => {

// On macOS it's common to re-create a window in the app when the

// dock icon is clicked and there are no other windows open.

if (win === null) {

createWindow()

}

})

// In this file you can include the rest of your app's specific main process

// code. You can also put them in separate files and require them here.

Osim te datoteke moramo unutar package.json dodati dvije važne naredbe.

"main": "main.js" služi kako bi se znalo koju datoteku gledati kada se projekt pokrene kao Electron aplikacija.

"start": "electron ." služi kao naredba za pokretanje Electron aplikacije.

{
  "name": "Ionic3ElectronApp",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "start": "electron ."
  },
  "dependencies": {
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/storage": "2.0.1",
    "electron": "^1.7.9",
    "ionic-angular": "3.8.0",
    "ionicons": "3.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.1",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project",
  "main": "main.js"
}

{

"name": "Ionic3ElectronApp",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve",

"start": "electron ."

"dependencies": {

"@angular/common": "4.4.4",

"@angular/compiler": "4.4.4",

"@angular/compiler-cli": "4.4.4",

"@angular/core": "4.4.4",

"@angular/forms": "4.4.4",

"@angular/http": "4.4.4",

"@angular/platform-browser": "4.4.4",

"@angular/platform-browser-dynamic": "4.4.4",

"@ionic-native/core": "4.3.2",

"@ionic-native/splash-screen": "4.3.2",

"@ionic-native/status-bar": "4.3.2",

"@ionic/storage": "2.0.1",

"electron": "^1.7.9",

"ionic-angular": "3.8.0",

"ionicons": "3.0.0",

"rxjs": "5.4.3",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.18"

"devDependencies": {

"@ionic/app-scripts": "3.0.1",

"typescript": "2.3.4"

"description": "An Ionic project",

"main": "main.js"

}

Spremni smo za kreiranje skripte buildElectron.sh koja će obaviti nekoliko radnji automatski tako da ih ne moramo svaki put ručno pokretati.

ionic cordova build browser --prod
rm -rf www/*
cp -r platforms/browser/www/* www/
npm start

ionic cordova build browser --prod

rm -rf www/*

cp -r platforms/browser/www/* www/

npm start

I konačno, Ionic-Electron aplikaciju možemo pokrenuti naredbom ./buildElectron.sh

ili dvoklikom na ikonu buildElectron skripte unutar našeg projekta.

nakon čega dobijemo našu Ionic aplikaciju unutar Electrona.

Možete primijetiti da se prilikom pokretanja aplikacije automatski pokrenuo i Developer Tools. To možemo spriječiti ako unutar main.js datoteke zakomentiramo win.webContents.openDevTools().

Dizajn i prilagodba sučelja

Dizajn trenutno kreirane aplikacije prilagođen je mobilnim uređajima i ako ju raširimo preko cijelog ekrana nekog desktop uređaja to neće izgledati lijepo jer će npr. popis stavki ići jedan ispod drugog preko cijelog ekrana umjesto da se fino rasporedi po nekoliko stavki u jedan red.

Ovo ćemo prikazati na primjeru stranice list.html

To ćemo riješiti korištenjem Ionic Grida.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col *ngFor="let item of items" (click)="itemTapped($event, item)" col-12 col-md-6 col-lg-4 col-xl-3>
          <ion-card>
              <ion-card-header>{{item.title}}</ion-card-header>
              <ion-card-content>{{item.note}}</ion-card-content>
          </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>

<ion-header>

<ion-navbar>

<ion-icon name="menu"></ion-icon>

</button>

<ion-title>List</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-grid>

<ion-row>

<ion-col *ngFor="let item of items" (click)="itemTapped($event, item)" col-12 col-md-6 col-lg-4 col-xl-3>

<ion-card>

<ion-card-header>{{item.title}}</ion-card-header>

<ion-card-content>{{item.note}}</ion-card-content>

</ion-card>

</ion-col>

</ion-row>

</ion-grid>

You navigated here from <b>{{selectedItem.title}}</b>

</div>

</ion-content>

Konačan izgled na većem ekranu je sljedeći

Produkcijska verzija Electron aplikacije

Kada smo zadovoljni s našom aplikacijom možemo kreirati produkcijsku verziju.

Prije nego to napravimo moramo instalirati Electron Packager. To možemo učiniti naredbom $ npm install -g electron-packager

Nakon toga ćemo kreirati produkcijsku verziju Electron aplikacije za Windows OS.

$ electron-packager . Ionic3ElectronApp --overwrite --platform=win32 --arch=x64 --prune=true --out=release-builds

1	$ electron-packager . Ionic3ElectronApp --overwrite --platform=win32 --arch=x64 --prune=true --out=release-builds

Proces kreiranja produkcijske verzije Electron aplikacije za Windows, Mac ili Linux može se olakšati i ubrzati na sljedeći način.

U datoteku package.json dodajemo

{
    "name": "Ionic3ElectronApp",
    "version": "0.0.1",
    "author": "Tomislav Stanković",
    "homepage": "https://www.tomislavstankovic.com",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve",
        "start": "electron .",
        "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
        "package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",    
        "package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
    },

{

"name": "Ionic3ElectronApp",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve",

"start": "electron .",

"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",

"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",

"package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"

I onda se proces kreiranja produkcijske verzije Electron desktop aplikacije pokreće sljedećim naredbama:
– Windows OS: npm run package-win
– Mac: npm run package-mac
– Linux: npm run package-linux

Zaključak

Iz ovog ste blog posta mogli vidjeti kako Ionic mobilnu aplikaciju pretvoriti u cross-platform destkop aplikaciju pa iako se to čini zanimljivim i očito da je moguće osobno se ne planiram detaljnije tome posvetiti. Također, ne treba zanemariti niti činjenicu da na tu temu ne postoji dovoljno primjera i dokumentacije.

Kako prebaciti WordPress blog na HTTPS?

U ovom ću blog postu pokazati postupak prebacivanja WordPress bloga s HTTP protokola na HTTPS. Ako to već niste učinili krajnje je vrijeme. Za prebacivanje WordPress bloga na HTTPS protokol treba vam plan, malo vremena, tehničkog znanja, backup i naravno SSL certifikat.

Uvod

Što je SSL?

SSL (Secure Sockets Layer) tehnologija je enkripcije podataka koji putuju između web-preglednika i web-poslužitelja koja pomaže u zaštiti korisničkih podataka. Web-adrese koje su zaštićene SSL protokolom započinju izrazom “https://“, a ne izrazom “http://“, pa zato neki SSL nazivaju i HTTPS. – Wiki

Postoji više vrsta SSL certifikata, a glavni su:
– DV (Domain Validation) – ovaj certifikat je dovoljan za vaš blog
– OV (Organization Validation)
– EV (Extended Validation)

Zašto SSL/HTTPS?

Nekoliko je razloga zašto bi trebali na svojem WordPress blogu koristiti SSL/HTTPS.

Sigurnost – Ovo je osnovni razlog zašto je potrebno koristiti SSL certifikat tj. HTTPS protokol. Za običan blog ovaj razlog i nije toliko bitan, osim možda za administratora, međutim web stranice/trgovine koje vrše naplatu putem kreditnih kartica svakako moraju koristiti SSL/HTTPS zbog potrebe za enkriptiranim prijenosom korisničkih podataka kao što su broj kreditne kartice, osobni identifikacijski broj (OIB) i sl.

Povjerenje/vjerodostojnost – Iako korisnici u ovom trenutku možda ne ostavljaju povjerljive podatke na vašem blogu oni mogu biti sigurni da s vaše strane ulažete maksimalne napore kako bi osigurali sigurno korištenje vašeg bloga. Na taj način podižete razinu povjerenja korisnika. To će posebno doći do izražaja kada većina stranica bude koristila SSL/HTTPS jer će tada biti neobično posjetiteljima vidjeti neku stranicu koja nije ‘zelena’.

Bolja pozicija na tražilicama/SEO – Google je i službeno objavio da je ne/korištenje HTTPS-a na web stranicama jedan od faktora koji će utjecati na rangiranje web stranica. To znači da je veća šansa da posjetitelji pronađu vašu web stranicu ako koristite SSL/HTTPS. Iako je taj faktor tek jedan mali dio onoga što Google gleda ipak nije zanemariv.

Migracija na HTTPS

Nabava i instalacija SSL certifikata

SSL certifikat možete kupiti ili koristiti neku od besplatnih verzija kao što su Let’s Encrypt ili AutoSSL od cPanela ako vaš pružatelj hosting usluga to dopušta.

Postavljanje SSL certifikata možete prepustiti hosting tvrtki ili odraditi samostalno putem npr. cPanela.

Kada je SSL certifikat uspješno instaliran možete pristupiti HTTS i HTTPS verziji vašeg bloga. Međutim postupak je daleko od gotovog jer potrebno je napraviti konkretne i trajne promjene kako bi vaš blog postojao samo u HTTPS verziji. Više o tome u nastavku.

Prije nastavka testirajte ispravnost SSL certifikata:
– https://www.ssllabs.com/ssltest/analyze.html
– https://www.sslshopper.com/ssl-checker.html

Promjena HTTP poveznica na HTTPS

WordPress sve poveznice sprema u MySQL bazu podataka. U bazi može biti više tisuća poveznica i sve ih je potrebno prebaciti na HTTPS. To ćemo ovdje učiniti ručno na način da ćemo preuzeti MySQL bazu podataka na lokalno računalo, otvoriti bazu koristeći Notepad++, promijeniti sve poveznice sa “http://” na “https://“ i ponovno vratiti bazu podataka na hosting.

1 – Izvoz MySQL baze na lokalno računalo

2 – Zamjena HTTP poveznica sa HTTPS

3 – Pražnjenje aktivne MySQL baze. Prije ovog koraka budite sigurni da imate kopiju originalne baze na lako dostupnom mjestu.

4 – Uvoz nove MySQL baze sa HTTPS poveznicama

Vaš blog bi blog sada trebao biti dostupan na HTTP i na HTTPS protokolu. Ako se nakon ovog koraka vaš blog ne prikazuje kako bi trebao znači da je došlo do greške prilikom rada s bazom podataka. Provjerite jeste li uspješno napravili uvoz nove MySQL baze i ako je potrebno ponovite postupak.

Ako se ne usudite raditi promjene ovakve vrste na MySQL bazi možete koristiti plugin Better Search Replace, ili neki drugi, koji obavlja isti posao.

Na stranici https://www.whynopadlock.com možete provjeriti postoji li još neka zaostala HTTP poveznica, ako ne postoji znači da ste sve do sada uspješno napravili i možete nastaviti dalje.

301 redirekcija

301 redirekcija je službeni standard koji se koristi za označavanje trajno premještenog sadržaja. U ovom slučaju vaš se blog trajno premješta sa HTTP protokola na HTTPS protokol.

Spojite se putem FTP-a na svoj hosting i unutar .htaccess datoteke dodajte sljedeće:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
</IfModule>

RewriteEngine On

RewriteCond %{HTTPS} off

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

</IfModule>

S postavkama unutar .htaccess datoteke budite jako oprezni, obavezno u blizini imajte kopiju originalnih postavki i ako niste sigurni što napraviti kontaktirajte korisničku podršku tvrtke u kojoj imate zakupljen hosting paket ili se poslužite pluginom Easy HTTPS Redirection koji će za vas obaviti izmjenu postavki unutar .htaccess datoteke tj. dodati će sljedeće:

# BEGIN HTTPS Redirection Plugin
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>
# END HTTPS Redirection Plugin

# BEGIN HTTPS Redirection Plugin

RewriteEngine On

RewriteCond %{SERVER_PORT} !^443$

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

</IfModule>

# END HTTPS Redirection Plugin

Ako sada posjetite HTTP verziju vašeg bloga trebali bi automatski biti preusmjereni na HTTPS verziju.

To je sve što se tiče vašeg hosting i WordPress bloga. Sve dalje što ću navesti tiče se marketing strane cijelog ovog postupka. S obzirom da većina prometa web stranica stiže od strane web tražilica kao što je Google Search potrebno je i njih obavijestiti o ovoj promjeni kako ne bi došlo do zabune ili još gore kako vas Google ne bi kaznio jer može pomisliti da imate dvije različite web stranice s potpuno istim sadržajem, a Google to ne voli.

Gdje su nestali ‘lajkovi’?

Nakon promjene na HTTPS protokol možete primijetiti da se stanje na gumbima za ‘šeranje‘ na društvene mreže resetiralo na nulu! Ako imate relativno aktivan blog čiji se sadržaj dijeli na društvenim mrežama nije lako za prihvatiti da je odjednom sve vraćeno na nulu. Također kada dođu novi posjetitelji vrlo lako mogu pomisliti da vaš sadržaj nikome nije zanimljiv jer se uopće ne dijeli.

Ipak nije sve izgubljeno. Postoji način za vraćanje statistike dijeljenja vašeg sadržaja. Rješenje se zove Social Warfare Pro.

Nakon što kupite plugin i aktivirate ga imate dostupnu opciju “Share Recovery” koja vam omogućava vraćanje teško stečenih ‘šerova‘ vašeg sadržaja na društvenim mrežama.

Nakon što pokrenete vraćanje broja ‘šerova‘ možete vidjeti da se stanje vratilo na prijašnje.

Google Search Console

Potrebno je kreirati novi Google Search Console profil za HTTPS
verziju vašeg bloga zato što Search konzola ne podržava promjenu adrese sa HTTP na HTTPS verziju.

Nakon toga kreirajte i dodajte novu sitemap.xml datoteku koja će vam pomoći u bržem indeksiranju. sitemap.xml možete generirati na adresi https://www.xml-sitemaps.com

Nakon što ste uspješno napravili novi HTTPS profil slobodno možete obrisati stari HTTP profil ako ga imate.

Google Analytics

Ako do sada niste koristili Google Analtycs onda je pravo vrijeme da počnete, no ako ste ga koristili potrebno je napraviti manje izmjene kako bi se počela prikupljati statistika i za vašu HTTPS verziju bloga.

Ako ovo ne napravite Google Analtycs više neće prikupljati vrlo korisnu statistiku posjećenosti vaših web stranica, a siguran sam da to ne želite.

Ažurirajte “postavke web entiteta”

i ažurirajte “postavke vlasničkog pregleda”

Zaključak

Osim ranije navedenog postoji još nešto što možete učiniti kako bi tranzicija na HTTPS prošla u najboljem redu. Svakako ažurirajte sve poveznice koje vode na vašu novu web stranicu.

Ovo je samo jedan od načina kako svoj WordPress blog možete prebaciti na HTTPS. Ja sam odabrao ovaj način što ne znači da morate i vi. U svakom slučaju naoružajte se strpljenjem i rezervirajte si nekoliko sati vremena samo za ovaj posao kako bi ga napravili kako treba i mogli mirno spavati.

Najgora stvar koju možete napraviti je žuriti i napraviti polovičan posao zbog kojeg vas i Google može kazniti iako ste imali najbolju namjeru, a da ne govorim koliko možete razočarati svoje posjetitelje kada dođu na vaš blog koji ne radi.

Nadam se da sam vam barem donekle uspio pojasniti postupak prebacivanja WordPress bloga sa HTTP protokola na HTTPS.

Za one koji žele znati više: