Angular 4 PHP + MySQL Paylaşımlı Hosting

            Angular ve Php paylaşımlı sunucuda nasıl kullanılabilir.

Başla

Sadece fikir olsun diye bir paylaşımlı sunucuda Angular ve pure Php ile nasıl uygulama yapılabilir, basit bir örnek üzerinden bakacağız.

Kullanılan Teknolojiler

• Php 5.x
• MySql
• Angular 4 (cli)

Adım 1 :

İlk olarak mysql ile "cities" adında veritabanı ve içinde "city" adında bir tablo oluşturalım ve test için veri ekleyelim.

Res 1.1 (a) Mysql veri yapısı (b) Tablo

Adım 2 :

Şimdi veritabanına bağlanıp verileri çeken bir php script yazalım.

veritabani.php

<?php
header("Content-Type: application/json; charset=utf-8");

$conn = new mysqli("localhost", "root", "", "city");
$conn->set_charset("UTF8");
?>

• Content-Type json ayarlayıp client' a json döndüreceğimizi bildirebiliriz.
• Geri kalan kısmı kendinize göre ayarlayın. Host' a atarken host ayarlarını girmeniz gerekecek.

cities.php dosyası oluşturup yukarıdaki veritabanı dosyasını dahil edelim.

<?php
require_once  'veritabani.php'; //$conn

$result = $conn->query("SELECT * FROM cities");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"ID":"'  . $rs["ID"] . '",';
    $outp .= '"name":"'   . $rs["name"]        . '",';
    $outp .= '"country":"'. $rs["country"]     . '"}'; 
}
$outp ='{"records":['.$outp.']}';
$conn->close();
echo($outp);
?>

• Yukarıda cities tablosundan gelen verileri Json yapıya dönüştürüp "echo" ile bastırıyoruz.
• http://localhost/php-angular-backend/model/cities.php adresine gidersek aşağıdaki gibi bir json veri göreceğiz.
• Böylece server tarafını basit end-point yazarak bitirmiş olduk.

{"records":[{"ID":"1","name":"İstanbul","country":"Turkey"},{"ID":"2","name":"Ankara","country":"Turkey"}]}

Adım 3 :

Şimdi client tarafına geçiyoruz. Angular-cli kullanarak altyapımızı oluşturalım.

• Node.js ve angular-cli alt yapınız kurulu değilse sırasıyla NodeJs ve angular-cli kurulumlarını yapabilirsiniz.
• Bu teknolojilerin nimetlerinden yararlanıp, sadece son kodu host' a atacağız.

Kurulumları yaptıktan sonra herhangi bir komut yorumcusu acıp (CMD,Terminal vb.) aşağıdaki komutları sırasıyla girip angular projemizi oluşturalım.
Not: Windows' da CMD' yi yönetici olarak çalıştırın.

ng new php-angular
cd php-angular
ng serve

Projeyi kod editöründe açın. Visual Studio Code kullanıyorsanız console' da proje dizininde direk code . yazabilirsiniz.
Aşağıdaki kodu konsola yazarak php server ile konuşacak ilk servisimizi oluşturalım.

ng g service cities

Adım 4 :

Service kodlarımızı ekleyelim.

import { Observable } from 'rxjs/Rx';

import { City } from './city';
// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/Rx';

@Injectable()
export class CitiesService {
 
  private url = "http://localhost/php-angular-backend/model/cities.php";
  
  constructor(private _http:Http) { }

  getCities(): Observable<City[]>{
      // url:api/users
      // get all Users
       return this._http.get(this.url)
                .delay(2000) //end-point sahte bir gecikme verelim
                .do(console.log) //gerekli değil ama..
                .map((res:Response)=>res.json().records)
                .do(console.log);
   }
}

• Json veri döndürecek URL' i belirtiyoruz. (Sunucuya atarken sunucu adresi)
• Get isteği göndermek için Http servisini dahil( inject) ediyoruz.
• getCities() metodunda isteğimizi gönderip Observable data servisini kullanarak gelen stream üzerinde sırasıyla:
  • 2 saniyelik bir delay ekliyoruz sadece test için
  • Gelen stream' i ekrana direk bastırıyoruz do(console.log)
  • Gelen Json string ifadesini Json object ifadesine dönüştürüyoruz. (map)
  • Dönüştürülen ifadeyi tekrar console' a bastırıyoruz.

city.ts City model sınıfını oluşturalım. Servis bu modelin dizisini döndürecek.

export class City {
    ID:number;
    name:string;
    country:string;
}

Adım 5 :

app.component.ts - Servisi kullanacak component

import { Component,OnInit,Input } from '@angular/core';
import { CitiesService } from './cities.service';
import { City } from './city';
import { Observable } from 'rxjs/Rx';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'City App';
  cities:City[];

  constructor(public _cityService:CitiesService){}

  ngOnInit(){
    this._cityService.getCities()
    .subscribe(
        cities => (this.cities = cities) 
    );
  }
}

• Component oluşturulduktan sonra çağrılacak olan ngOnInit metodunu kullanıyoruz.
• Burada servisin getCities metoduna subscribe oluyoruz.(Observer or Subscriber) Böylece Observable' dan dönen veriyi görebileceğiz. Dönen veriyi cities dizisine atıyoruz.

Adım 6 :

app.component.html - Verileri ekrana bastırıyoruz.

<div *ngIf="cities as city; else loading" id="cities">
 <ul>
  <li *ngFor="let city of cities">
    <span class="idtext">{{city.ID}}</span> -- {{city.name}} -- {{city.country}}
  </li>
 </ul>
</div>
<ng-template  #loading>
  <div class="loading">
    <img src="assets/images/preloader.gif">
  </div>
</ng-template>

• Angular 4 ile gelen if else yapısı kullanıyoruz.
• Eğer cities mevcutsa ekrana bastırıyoruz değilse ng-template ile başka bir resim gösteriyoruz.
• ng-template' i #loading (template variable) ile ifade ediyoruz.

Adım 7 :

Client kodlarını build etme

ng build --prod

• Console' da yukarıdaki komutu girerek projeyi sunuma hazır hale getiriyoruz.
• Bu tüm optimizasyon işlemlerini yapacak. (Sıkıştırma, birleştirme css, js vb.)
• Oluşan dosyalar proje klasöründeki dist/ altına atılacak. Bu dosyaları php proje klasörünüze atın.
• index.html açın ve <base href="/php-angular-backend/"> kısmına kendi php proje kök dizininizi belirtin. Burası önemli yoksa proje çalışmayacaktır.

Res 7.1 Proje Yapısı

Adım 8 :

Url isteklerini index.html yönlendirme

Php klasörü ana-dizinde .htaccess dosyası oluşturup aşağıdaki komutları girin.

DirectoryIndex index.html

<IfModule mod_rewrite.c>
    Options -Indexes +FollowSymlinks
    RewriteEngine On

    
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
   
    RewriteCond %{REQUEST_URI} ^.*/$
    RewriteCond %{REQUEST_URI} !^/$
    RewriteRule ^(.*)/$ $1 [R,QSA,L]
    
    RewriteRule ^ index.html [L]
 
</IfModule>

• Böylece gelen istekler index.html' de toplanacak.
• Router işlemi yapmadık ama yapacağımızı varsayarsak yukarıdaki komutlar yeterli.

Not (Seo): Google, Angular sayfalarını doğrudan indeksliyebiliyor. Ama alt sayfaları taramada sıkıntı çıkabiliyor. Şimdilik her alt sayfayı Google Gibi Getir aracında eklemeniz gerekiyor. Facebook Comment Api kullanmada sıkıntı olmuyor ama Facebook Share gibi dinamik içerik paylaşma sıkıntılı. Böylesi durumlarda server render gerekiyor.

---

Bitir