http://www.smashingmagazine.com/2014/11/17/creating-save-later-chrome-extension-modern-web-tools adresindeki bir yazıyı okurken daha önce Silverlight-PHP ve ASP.Net MVC uygulamalarından tanıdık bir konuyu gördüm. AngularJS ile JavaScript dilinden veritabanına bağlantı gibi işlemleri yapabiliyoruz. Google’ın desteklediği bu proje ile siteler, senkron bir şekilde tam sayfa güncellenmesi yerine asenkron olarak sadece gereken bölgedeki bilgiler güncellenir. JSON olarak bilgiler gelip gidiyor. Bu sayede internet sitelerinin her tıklanmada, kaynaklarını (css, resim, script dosyaları gibi) devamlı sunucudan tekrar indirmesi gerekmiyor, hem de site içinde istediğimiz yerde güncelleme gibi işlemleri yapabiliyoruz.

ScreenShot001

Tek sayfalık bir uygulama örneği yapalım. Kodları indirmek için tıklatınız: http://sourceforge.net/projects/yunus/files/%5B2%5D%20Other%20various%20projects/PHP/angularPHP.rar/download

AngularJS ana sitesi: https://angularjs.org/

Öğretici siteler:
http://www.w3schools.com/angular/
http://www.angularcode.com/simple-task-manager-application-using-angularjs-php-mysql/
http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/video/1 (ilk ders)

Örnekte stabil sürüm olan 1.2.27 kullandım. Altyapı olarak veritabanında MySQL, ara dil olarak da PHP kullanıyoruz. Aslında ilk videosunu seyrederken PHP gibi diller gerekmeden çalıştığını zannetmiştim. Yani HTML ve JavaScript ile dinamik site yapılabilir gibi gözüküyor ama sunucu kısmı için mecburen ya PHP ya da ASP.Net gerekli.

Görüntü için Bootstrap (Twitter’ın desteklediği bir CSS kütüphanesi) kullanabilirdik şimdilik eski tablo yöntemi ile sade bir HTML istedim.

Küçük projemizde kayıt listeleme, ekleme, silme, arama ve sıralama çalışıyor. Internet Explorer 10’da sayfa yenilemede bir sorun var, Chrome’da ise tam olarak çalışıyor. Projeyi denemek için ister “http://localhost/angularPHP” isterseniz doğrudan “index.html”yi çift tıklatın. Doğrudan index’in çalışması garip gelebilir çünkü “js/my.js” içinde bir ayarımız var:

var pageData = "http://localhost/angularPHP/php/";

“index.html” dosyasını inceleyelim:

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="iso-8859-9">
<title>Tek Sayfa AngularJS - PHP Uygulamamız</title>
<link href="css/my.css" rel="stylesheet" type="text/css">
<script src="js/angular.min.js"></script>
<script src="js/my.js"></script>
</head>
<body ng-controller="urunKontrolcusu">
<h2>Tek Sayfa AngularJS - PHP Uygulamamız</h2>
<p><em>(Single Page AngularJS with PHP-MySQL)</em></p>
<div>
<table width="700" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#FFFF99" align="left"><form id="newProductForm">
<input type="text" name="name" ng-model="nameInput" placeholder="Adı"/>
&nbsp;
<input type="text" name="price" ng-model="priceInput" placeholder="Fiyat"/>
&nbsp;
<button type="submit" ng-click="addProduct(nameInput, priceInput)">&nbsp;Ekle (Add)</button>
</form></td>
<td align="center"><img id="spinner" ng-src="img/spinner.gif" style="visibility:hidden;width:40px;"></td> 
</tr>
<tr>
<td colspan="3" bgcolor="#FFFF99" align="left"><input type="text" ng-model="filterProducts" placeholder="Filter">
Sort :
<select size="1" ng-model="orderProp">
<option value="id">Id</option>
<option value="name">Name</option>
<option value="price">Price</option>
<option value="date" selected="selected">Newest</option>
</select></td>
</tr>
<tr>
<th width="45%"><p>&Uuml;r&uuml;n Adı (Product Name)</p></th>
<th width="25%">Fiyat (Price)</th>
<th width="25%">Tarih (Date)</th>
<th width="5%">Sil (Delete)</th>
</tr>
<tr ng-repeat="x in products | filter : filterProducts | orderBy:orderProp">
<td>{{ x.id }}. {{ x.name }}</td>
<td align="right">{{ x.price}} TL</td>
<td align="right">{{ x.date }}</td>
<td align="center" bgcolor="#FFFF99"><a ng-click="deleteProduct(x.id)">X</a></td>
</tr>
</table>
</div>
<p><a href="https://angularjs.org/">AngularJS</a> ile yapılmıştır.</p>
<p><a href="http://www.w3schools.com/angular/">w3schools</a>, <a href="http://www.angularcode.com/simple-task-manager-application-using-angularjs-php-mysql/">angularcode</a>: Öğreticilerinden faydalanılmıştır.</p>
<p><a href="http://sourceforge.net/projects/yunus/files/%5B2%5D%20Other%20various%20projects/PHP/angularPHP.rar/download">Download</a>: Kaynak kodları indirebilirsiniz.</p>
</body>
</html>


Mavi olarak işaretlediğim yerler yani ng- ile başlayanlar AngularJS’nin tanıdığı otomatik kullandığı nesneler. {{}} içindeki yazılanlar ise veri bağlı nesnelerdir.

Reklamlar