AngularJS $http Servis Post ( PHP)

Bu yazıda $http ve post yöntemi ile veritabanına veri yazma ve veritabanından veri okuma işlemini yapacağız.

Öncelikle Jquery ile angularjs arasındaki post farkına değinmek zorundayım.

Jquery ile bir veriyi kaydetmek için şuna benzer bir yol izlenmekte;


$.post("islem.php",{var1: data, var2: data},function(gelen){

//php tarafından veri işlendikten sonra gelen sonuc
});

$.post("islem.php",{var1: data, var2: data},function(gelen){

//php tarafından veri işlendikten sonra gelen sonuc

});

Yukarıdaki yöntemde veri http protokolü ile şu şekilde gönderilmektedir.


POST /islem.php HTTP/1.1

var1=deger1&var2=deger2

POST /islem.php HTTP/1.1

var1=deger1&var2=deger2

Angularjs ile veri yine http’nin post protokolü ile gönderiliyor fakat veri gönderilirken bir JSON datası olarak gönderilmektedir. Aşağıdaki kod ile islem.php sayfasına 3 tane veri gönderilmektedir.


var islem = $http({
method: "post",
url: "islem.php",
data: {
ad: $scope.isim,
soyad: $scope.soyisim,
yas: $scope.yas
}
});

var islem = $http({

method: "post",

url: "islem.php",

data: {

ad: $scope.isim,

soyad: $scope.soyisim,

yas: $scope.yas

}

});

Bu yöntemde veri http protokolü ile şu şekilde görünmektedir.


POST /page.php HTTP/1.1

{"ad":"ali","soyad":"al","yas":"25"}

POST /page.php HTTP/1.1

{"ad":"ali","soyad":"al","yas":"25"}

Bu yüzden veriyi $_POST ile doğrudan okumak mümkün olmamaktadır. (Angularjs php post data)


/*aşağıda bu kodun kullanımı açıklanacaktır.*/
$inputJSON = file_get_contents('php://input'); 
$_POST= json_decode( $inputJSON, TRUE )

/*aşağıda bu kodun kullanımı açıklanacaktır.*/

$inputJSON = file_get_contents('php://input');

$_POST= json_decode( $inputJSON, TRUE )

Bu yazıda angular $http ifadesi ile veriyi okuma ve yazma işlemini yapacağız. Açıklamaları bitirdikten sonra örneğimizi uygulamaya başlayalım. (Yukarıdaki kod php post json data örneğidir. php post data sample)

[divider]

SQL: Örnek aşağıdaki veritabanı üzerinden gerçekleştirilecektir.


CREATE TABLE `bilgiler` (
`id` int(11) NOT NULL,
`ad` varchar(50) NOT NULL,
`soyad` varchar(50) NOT NULL,
`yas` int(11) NOT NULL
) ;

ALTER TABLE `bilgiler`
 ADD PRIMARY KEY (`id`);


ALTER TABLE `bilgiler`
 MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

CREATE TABLE `bilgiler` (

`id` int(11) NOT NULL,

`ad` varchar(50) NOT NULL,

`soyad` varchar(50) NOT NULL,

`yas` int(11) NOT NULL

) ;

ALTER TABLE `bilgiler`

ADD PRIMARY KEY (`id`);

ALTER TABLE `bilgiler`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

SCRIPT KODU: $scope.kaydet adında bir tane olay oluşturduk. Bu olay HTML içindeki buton ile çalıştırılacak. $scope.kaydet olayının içinde ise $http ile islem.php sayfasına veri gönderme ve alınan verinin $scope.personeller modeline yazılması işlemi var.

$http nesnesini kullanarak islem.php sayfasına post işlemini gerçekleştirdik. islem.php sayfasına üç tane veri gönderdiğimiz görünüyor. ad,soyad ve yas bu veriler ng-model ile oluşturulmuş olan HTML sayfalarından alınmaktadır.

$http ile dönen veriyi islem (var islem) olarak tanımladığımız değişkende tutuyoruz. Eğer işlem başarılı olarak gerçekleşirse islem.success metodu çalışacak ve veriyi modele yapıştıracaktır.


<script>

var app = angular
.module("persModul", [])
.controller("persController", function ($scope, $http) {

$scope.kaydet=function(){

var islem = $http({
method: "post",
url: "islem.php",
data: {
ad: $scope.isim,
soyad: $scope.soyisim,
yas: $scope.yas
}
});


islem.success(function (data) {

$scope.personeller=data;
});

}

});


</script>

var app = angular

.module("persModul", [])

.controller("persController", function ($scope, $http) {

$scope.kaydet=function(){

var islem = $http({

method: "post",

url: "islem.php",

data: {

ad: $scope.isim,

soyad: $scope.soyisim,

yas: $scope.yas

}

});

islem.success(function (data) {

$scope.personeller=data;

});

}

});

</script>

[divider]

HTML KODU: HTML kodunda dikkat edilecek kısım ng-model ile oluşturulan alanlar. ng-model ile oluşturulan değerler ng-click ile çalıştırılan kaydet olayında kullanılmaktadır.


<body ng-app="persModul">
<div ng-controller="persController">
<form>
Ad:<input type="text" ng-model="isim"><br>
Soyad:<input type="text" ng-model="soyisim"><br>
Yaş:<input type="text" ng-model="yas"><br>
Soyad:<input type="button" value="Kaydet" ng-click="kaydet()">

</form>

<table border=1>
<thead>
<tr>
<th>İSİM</th>
<th>SOYİSİM</th>
<th>YAŞ</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personel in personeller">
<td> {{ personel.ad }} </td>
<td> {{ personel.soyad }} </td>
<td> {{ personel.yas }} </td>
</tr>
</tbody>
</table>
</div>
</body>

<form>

Ad:<input type="text" ng-model="isim"><br>

Soyad:<input type="text" ng-model="soyisim"><br>

Yaş:<input type="text" ng-model="yas"><br>

Soyad:<input type="button" value="Kaydet" ng-click="kaydet()">

</form>

<thead>

<tr>

<th>SOYİSİM</th>

</tr>

</thead>

<tbody>

<td> {{ personel.ad }} </td>

<td> {{ personel.soyad }} </td>

<td> {{ personel.yas }} </td>

</tr>

</tbody>

</table>

</div>

</body>

[divider]

ISLEM.PHP: PHP tarafında işlem alıştığımız yöntemin dışında yapılmak zorunda. Makalenin başında bahsettiğim gibi JSON ile gönderilen veriyi $_POST ile doğrudan okumak mümkün değil. Yukarıdaki post işlemini gerçekleştiren PHP sayfası aşağıda ve kodlarımızı bölüm bölüm açıklayalım.


<?php
/* Sürücü isteğiyle bir ODBC veritabanına bağlanalım */
$dsn = 'mysql:dbname=personel;host=127.0.0.1';
$kullanici = 'root';
$sifre = '';
$vt = new PDO($dsn, $kullanici, $sifre);


$inputJSON = file_get_contents('php://input'); 
$_POST= json_decode( $inputJSON, TRUE );

$sorgu=$vt->prepare("insert into bilgiler values(NULL,?,?,?)");
$sorgu->bindValue(1,$_POST['ad'],PDO::PARAM_STR);
$sorgu->bindValue(2,$_POST['soyad'],PDO::PARAM_STR);
$sorgu->bindValue(3,$_POST['yas'],PDO::PARAM_INT);
$sorgu->execute();

$sorgu2=$vt->query("select * from bilgiler");

echo json_encode($sorgu2->fetchAll());

?>

<?php

/* Sürücü isteğiyle bir ODBC veritabanına bağlanalım */

$dsn = 'mysql:dbname=personel;host=127.0.0.1';

$kullanici = 'root';

$sifre = '';

$vt = new PDO($dsn, $kullanici, $sifre);

$inputJSON = file_get_contents('php://input');

$_POST= json_decode( $inputJSON, TRUE );

$sorgu=$vt->prepare("insert into bilgiler values(NULL,?,?,?)");

$sorgu->bindValue(1,$_POST['ad'],PDO::PARAM_STR);

$sorgu->bindValue(2,$_POST['soyad'],PDO::PARAM_STR);

$sorgu->bindValue(3,$_POST['yas'],PDO::PARAM_INT);

$sorgu->execute();

$sorgu2=$vt->query("select * from bilgiler");

echo json_encode($sorgu2->fetchAll());

PDO ile veritabanı bağlantısı ve veritabanı nesnesi oluşturma. $vt veritbanı işlemlerini yapmak için oluşturulan nesne.


/* Sürücü isteğiyle bir ODBC veritabanına bağlanalım */
$dsn = 'mysql:dbname=personel;host=127.0.0.1';
$kullanici = 'root';
$sifre = '';
$vt = new PDO($dsn, $kullanici, $sifre);

/* Sürücü isteğiyle bir ODBC veritabanına bağlanalım */

$dsn = 'mysql:dbname=personel;host=127.0.0.1';

$kullanici = 'root';

$sifre = '';

$vt = new PDO($dsn, $kullanici, $sifre);

file_get_contents (php://input) ifadesi POST ile gelen tüm ham datayı almak için kullanılmaktadır. json_decode ile gelen JSON türüdeki veriyi diziye çevirip yine $_POST değişkenine kaydediyoruz. Bu aşamadan sonraki işlemleri tamamı aslında $_POST ile yaptığımız gibi oldu.


$inputJSON = file_get_contents('php://input'); 
$_POST= json_decode( $inputJSON, TRUE );

$inputJSON = file_get_contents('php://input');

$_POST= json_decode( $inputJSON, TRUE );

Veritabanına veriyi kaydetme kısmı. Diğer sayfadan gelen değişkeler ile veriyi kaydettik.


$sorgu=$vt->prepare("insert into bilgiler values(NULL,?,?,?)");
$sorgu->bindValue(1,$_POST['ad'],PDO::PARAM_STR);
$sorgu->bindValue(2,$_POST['soyad'],PDO::PARAM_STR);
$sorgu->bindValue(3,$_POST['yas'],PDO::PARAM_INT);
Veritabanına veriyi kaydetme $sorgu->execute();

$sorgu=$vt->prepare("insert into bilgiler values(NULL,?,?,?)");

$sorgu->bindValue(1,$_POST['ad'],PDO::PARAM_STR);

$sorgu->bindValue(2,$_POST['soyad'],PDO::PARAM_STR);

$sorgu->bindValue(3,$_POST['yas'],PDO::PARAM_INT);

Veritabanına veriyi kaydetme $sorgu->execute();

Veritabanınaki veriyi okuyup JSON formatına dönüştürüp tekrar geriye göndermek için ekrana yazdırıyoruz.


$sorgu2=$vt->query("select * from bilgiler");

echo json_encode($sorgu2->fetchAll());

$sorgu2=$vt->query("select * from bilgiler");

echo json_encode($sorgu2->fetchAll());

Faydalanılan Kaynaklar

http://php.net/manual/tr/function.file-get-contents.php

http://php.net/manual/en/book.json.php

http://php.net/manual/en/wrappers.php.php

https://codeforgeek.com/2014/07/angular-post-request-php/

http://stackoverflow.com/questions/8893574/php-php-input-vs-post

İlgili

Yorum

Ali KOCA dedi ki:

Nisan 27, 2018, 2:09 pm

Çok derde deva bir makale. Teşekkürler.

Cevapla
osman dedi ki:

Kasım 20, 2017, 3:05 pm

örneğiniz harika. peki asp.net mvc sql server ile nasıl yaparız.

Cevapla
- Hayri dedi ki:
  
  Kasım 20, 2017, 6:18 pm
  
  Vakit bulup da yapabilirmiyim bilmiyorum ama sitedeki asp konularına bakıp yapabilirsin. https://www.yazilimbilisim.net/c-sharp/asp-net/angularjs-asp-net-servise-baglanma/
  
  Laravel ile yaptığım örneği bulursam yazı olarak eklerim. (asp net kullanmayı pek tercih etmiyorum)
  
  Cevapla
mklog dedi ki:

Temmuz 6, 2017, 11:31 am

php mvc framework ile angularjs yi birlikte kullanmanın zararı olur mu acaba sistem olarak. yada yöntem olarak?

Cevapla
- Hayri dedi ki:
  
  Temmuz 6, 2017, 11:39 am
  
  Her hangi bir sorun olmaz. İkisi de farklı platformlar.
  Php sunucu taraflı script
  Angularjs ise istemci taraflı script.
  Yanlız bazı php frameworkler için view yazım kurallarında benzerlik var. Kod yazarken bunu dikkate almak gerekiyor. Sorun olacak birşey değil ama
  
  Cevapla
Semih dedi ki:

Eylül 20, 2016, 8:01 pm

Örnek için teşekkürler. Anlatımınız çok sade ve anlaşılır.

Cevapla
AngularJS Dersleri | Yazılım Bilişim Programlama dedi ki:

Ağustos 22, 2016, 11:32 am

[…] Konu 18: AngularJS $http Servis Post ( PHP) […]

Cevapla

Faydalanılan Kaynaklar

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X