tag:blogger.com,1999:blog-13677624835058816632024-03-20T10:50:08.685+03:00Gurkan' nın BloguAndroid, Spring MVC, JSP, AngularJS, Ubuntu, BloggerGürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-1367762483505881663.post-42114740239353624152018-08-13T21:05:00.001+03:002018-08-13T21:05:21.639+03:00Http' den Https' e Geçişte Sosyal Medya Beğenilerinin Kaybolması <div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" alt="Facebook Beğeni Kaybolması" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXF-6a6iw9iVcN_TdDwF8BBHURqImhILSVzVDDgmpWQwP9kUGOVCZyDprkXWTPy3NeWrFteWXKYfbub-P68s8644AuDj4Eq8_mmqo3NCyv3-5WrhamGxMqpfPIY2LJqdfQ3Zx4qxmYIg/s144-Ic42/blogger_global.png" width="200" />
</div>
<div id="main-cont" style="text-align:Justify; float: right; overflow: hidden; width: 370px; word-wrap: break-word;">
Http' den Https' e geçişte eski beğenilerin nasıl geri getirileceğine bir bakalım!<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align:Justify;">
Normalde Http ile sunduğunuz websitenizi, Https protokolü ile sunmaya karar verdiniz. Gelen tüm istekleri Https' e yönlendirdiğinizde( 301), o zamana kadar ki tüm sosyal medya beğenilerinizin kaybolduğunu görebilirsiniz. İşte tam bu noktada kullanabileceğiniz bir yöntemi ele alacağız.
</div>
<br />
<h2>Open Graph Kontrolü</h2>
<div style="text-align: Justify;">
Facebook, Google+ gibi arama motorları sitenizi ziyaret ettiğinde, sosyal medya- website ilişkisini sağlamak için Open Graph protokolünü kullanır. Bu nedenle botların standart sayfa olarak eski sayfamızı görmesini istediğimizden <span style="background-color: #f3f3f3;"><code><og:url></code></span> etiketini Http versiyonunda bırakıyoruz.
<pre><code>
<meta property="og:url" content="http://websiteniz.com" />
</code></pre>
<b>Not:</b>
Google sayfa indeksleri için canonical etiketinin Https olması gerekir.
<pre><code>
<link rel="canonical" href="https://websiteniz.com">
</code></pre>
</div>
<br />
<h2>Facebook Crawler Hariç Tutulması</h2>
<div style="text-align: Justify;">
Eğer Facebot' unun Http sayfasına uğramasını engellerseniz, bu durumda bot, standart( canonical) sayfayı Https olarak görmeye zorlanacak ve eski beğenileriniz gidecektir.
Aşağıda, Apache sunucusunun <span style="background-color: #f3f3f3;">.htaccess</span> dosyasında nasıl "Facebook crawler"ı yönlendirme dışında tutacağımız var. Böylece Facebot' un dışındaki istekler Https yönlendirmesine tabi olacak. Yani websitenize talepte bulunan, Facebook botu ise sayfanızın Http versiyonunu standart kabul edip eski beğenilerinizi tekrar gösterecektir.
</div>
<br />
<pre><code>
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_USER_AGENT} !(Facebot|facebookexternalhit/1.1) [NC]
RewriteRule ^(.*)$ https://websiteniz.com/$1 [R=301,L]
</code></pre>
<h2>Test</h2>
<div style="text-align: Justify;">
Son olarak beğenilerinizin geri gelip gelmediğini, <a href="https://developers.facebook.com/tools/debug/sharing/">Facebook Sharing Debugger</a> 'dan <b>Debug-->Scrape Again</b> yolunu izleyerek bakabilirsiniz.
</div>
<hr />
<h2>Bitir</h2>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-63621240606564004652018-03-18T17:31:00.000+03:002018-03-20T19:02:47.235+03:00sockjs_client_1.SockJS is not a constructor Hatası<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhytmqXovye7UmGI8PWgYuwOsu84TlWY5dHgezynNZblJ5UMSCiHuXLHWTQ6IFvSK20_ZGQYXjfBRyY6b5fWX9Lw_WPGIRcOAUCu2zL3Q4czQN5xbYUrzL87447q_f9w2nzyv568SaqA1o/s200/angularjs_global.png" width="200" />
</div>
<div id="main-cont" style="text-align:Justify; float: right; overflow: hidden; width: 370px; word-wrap: break-word;">
Angular 5 ile socket uygulaması yaparken karşılaştığım hata ve çözümü!<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align:Justify;">
Spring Boot ve Angular 5 ile belli bir kullanıcıya özel web socket oluşturma uygulaması geliştirmek için takip ettiğim bir uygulamanın client tarafında hata verdiğini ve aşağıdaki adımı uygulayınca düzeldiğini gördüm.
<h2>Errors Encountered</h2>
<pre><code>
1 ) 'ERROR TypeError: sockjs_client_1.default is not a constructor'
2 ) 'ERROR TypeError: Cannot read property 'over' of undefined'
3 ) 'ERROR TypeError: jquery_1.default is not a function'
</code></pre>
</div>
<br />
<br />
<div style="text-align: Justify;">
<h1>Adım 1 :</h1>
<h2>Bağımlılıkları yükle</h2>
<pre><code>
npm install --save stompjs
npm install --save sockjs-client
npm install --save jquery
</code></pre>
</div>
<br />
<div style="text-align: Justify;">
<h1>Adım 2 :</h1>
<h2>Aşağıdaki Kodu</h2>
<pre><code>
import Stomp from 'stompjs';
import SockJS from 'sockjs-client';
import $ from 'jquery';
</code></pre>
</div>
<br />
<div style="text-align: Justify;">
<h2>İle Değiştir (Fixed)</h2>
<pre><code>
import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';
import * as $ from 'jquery';
</code></pre>
</div>
Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-24542616804313264542017-04-11T15:34:00.000+03:002019-07-28T15:11:02.362+03:00Angular 4 PHP + MySQL Paylaşımlı Hosting <div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblZSpISlaG2wW-QW8dwMVHeJduGUWAH0M75IN3Wi3DRh_nP-EBf435fdJxoSYTZNit4uKR0Z6-pQ-GHceY_LUFR_DCDhYFeMkGeMjQSp7YXZKOXSgF97UXjoyGqdAEkOtWkdaB1mCGd0/s200/angular-php.png" width="200" />
</div>
<div id="main-cont" style="float: right; overflow: hidden; text-align: justify; width: 370px; word-wrap: break-word;">
Angular ve Php paylaşımlı sunucuda nasıl kullanılabilir.<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align: Justify;">
Sadece fikir olsun diye bir paylaşımlı sunucuda Angular ve pure Php ile nasıl uygulama yapılabilir, basit bir örnek üzerinden bakacağız.
<!--<p>Son hali için <a target="_blank" href="http://greenlab.html-5.me/php-angular-backend/"><b>DEMO</b></a>' ya bakabilirsiniz.</p>-->
</div>
<br />
<h3>
Kullanılan Teknolojiler</h3>
<ul>
<li>Php 5.x</li>
<li>MySql</li>
<li>Angular 4 (cli)</li>
</ul>
<br />
<div style="text-align: Justify;">
<h1>
Adım 1 :</h1>
<h2>
İ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.</h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<figure style="float: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3GYwMCoLLguUm0x0qoiXRPxAJbPnQgld8D8ZbchhrBarwUXNGWG0FhDiQsFRpiYNSZcOHEGIJcbojSIBtuAgw8k0BKv1nQwGlp-mg91NBIwzLmDzdvKgnGCmmasmM-gzXETNV16S-biQ/s1600/php-angular-share-table.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3GYwMCoLLguUm0x0qoiXRPxAJbPnQgld8D8ZbchhrBarwUXNGWG0FhDiQsFRpiYNSZcOHEGIJcbojSIBtuAgw8k0BKv1nQwGlp-mg91NBIwzLmDzdvKgnGCmmasmM-gzXETNV16S-biQ/s320/php-angular-share-table.png" width="320" /></a>
<figcaption>Res 1.1 (a) Mysql veri yapısı (b) Tablo</figcaption>
</figure>
<br />
<div class="separator" style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifG2G1Gq9B1IyTSbJ1NW0bhU44vHh3aNUtJdeYZM8p2XEAFqLumsYzla_PmmXjRnAi1HA6cBK8NiDBnOXDJ1C2vg6KBzryC86dDdOSi1doqyuBND7JwLrEhneVOMcSHPHoqi-5624IaCo/s1600/php-angular-host-mysql.png" imageanchor="1" style="float: right; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifG2G1Gq9B1IyTSbJ1NW0bhU44vHh3aNUtJdeYZM8p2XEAFqLumsYzla_PmmXjRnAi1HA6cBK8NiDBnOXDJ1C2vg6KBzryC86dDdOSi1doqyuBND7JwLrEhneVOMcSHPHoqi-5624IaCo/s320/php-angular-host-mysql.png" width="320" /></a>
</div>
<br />
<div style="clear: both; text-align: Justify;">
<h1>
Adım 2 :</h1>
<h2>
Şimdi veritabanına bağlanıp verileri çeken bir php script yazalım.</h2>
</div>
<span style="background-color: #f3f3f3;">veritabani.php
</span><br />
<pre><code>
<?php
header("Content-Type: application/json; charset=utf-8");
$conn = new mysqli("localhost", "root", "", "city");
$conn->set_charset("UTF8");
?>
<code></code></code></pre>
<ul>
<li><span style="background-color: #f3f3f3;">Content-Type</span> json ayarlayıp client' a json döndüreceğimizi bildirebiliriz.</li>
<li>Geri kalan kısmı kendinize göre ayarlayın. Host' a atarken host ayarlarını girmeniz gerekecek.</li>
</ul>
<span style="background-color: #f3f3f3;">cities.php</span> dosyası oluşturup yukarıdaki veritabanı dosyasını dahil edelim.
<br />
<pre><code>
<?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);
?>
</code></pre>
<ul>
<li>Yukarıda cities tablosundan gelen verileri Json yapıya dönüştürüp "echo" ile bastırıyoruz.</li>
<li><span style="background-color: #eeeeee;">http://localhost/php-angular-backend/model/cities.php </span>adresine gidersek aşağıdaki gibi bir json veri göreceğiz.</li>
<li>Böylece server tarafını basit end-point yazarak bitirmiş olduk.</li>
</ul>
<pre><code>
{"records":[{"ID":"1","name":"İstanbul","country":"Turkey"},{"ID":"2","name":"Ankara","country":"Turkey"}]}
</code></pre>
<div style="clear: both; text-align: Justify;">
<h1>
Adım 3 :</h1>
<h2>
Şimdi client tarafına geçiyoruz. Angular-cli kullanarak altyapımızı oluşturalım.</h2>
</div>
<ul>
<li>Node.js ve angular-cli alt yapınız kurulu değilse sırasıyla <a href="https://nodejs.org/en/">NodeJs</a> ve <a href="https://github.com/angular/angular-cli#installation">angular-cli</a> kurulumlarını yapabilirsiniz.</li>
<li>Bu teknolojilerin nimetlerinden yararlanıp, sadece son kodu host' a atacağız.</li>
</ul>
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.<br />
Not: Windows' da CMD' yi yönetici olarak çalıştırın.
<br />
<pre><code>
ng new php-angular
cd php-angular
ng serve
</code></pre>
Projeyi kod editöründe açın. Visual Studio Code kullanıyorsanız console' da proje dizininde direk <b>code .</b> yazabilirsiniz.<br />
Aşağıdaki kodu konsola yazarak php server ile konuşacak ilk servisimizi oluşturalım.<br />
<pre><code>ng g service cities</code></pre>
<div style="clear: both; text-align: Justify;">
<h1>
Adım 4 :</h1>
<h2>
Service kodlarımızı ekleyelim.</h2>
</div>
<pre><code>
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);
}
}
</code></pre>
<ul>
<li>Json veri döndürecek URL' i belirtiyoruz. (Sunucuya atarken sunucu adresi)</li>
<li>Get isteği göndermek için Http servisini dahil( inject) ediyoruz.</li>
<li><span style="background-color: #f3f3f3;">getCities() </span>metodunda isteğimizi gönderip Observable data servisini kullanarak gelen stream üzerinde sırasıyla:
<ul>
<li>
2 saniyelik bir delay ekliyoruz sadece test için
</li>
<li>Gelen stream' i ekrana direk bastırıyoruz do(console.log)</li>
<li>Gelen Json string ifadesini Json object ifadesine dönüştürüyoruz. (map)</li>
<li>Dönüştürülen ifadeyi tekrar console' a bastırıyoruz.</li>
</ul>
</li>
</ul>
<b>city.ts</b> City model sınıfını oluşturalım. Servis bu modelin dizisini döndürecek.<br />
<pre><code>
export class City {
ID:number;
name:string;
country:string;
}
</code></pre>
<div style="clear: both; text-align: Justify;">
<h1>
Adım 5 :</h1>
<h2>
app.component.ts - Servisi kullanacak component</h2>
</div>
<pre><code>
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)
);
}
}
</code></pre>
<ul>
<li>Component oluşturulduktan sonra çağrılacak olan ngOnInit metodunu kullanıyoruz.</li>
<li>Burada servisin <span style="background-color: #f3f3f3;">getCities</span> metoduna subscribe oluyoruz.(Observer or Subscriber) Böylece Observable' dan dönen veriyi görebileceğiz. Dönen veriyi cities dizisine atıyoruz.</li>
</ul>
<div style="clear: both; text-align: Justify;">
<h1>
Adım 6 :</h1>
<h2>
app.component.html - Verileri ekrana bastırıyoruz.</h2>
</div>
<pre><code>
<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>
</code></pre>
<ul>
<li>Angular 4 ile gelen if else yapısı kullanıyoruz.</li>
<li>Eğer cities mevcutsa ekrana bastırıyoruz değilse ng-template ile başka bir resim gösteriyoruz.</li>
<li>ng-template' i <span style="background-color: #f3f3f3;">#loading</span> (template variable) ile ifade ediyoruz.</li>
</ul>
<div style="clear: both; text-align: Justify;">
<h1>
Adım 7 :</h1>
<h2>
Client kodlarını build etme</h2>
</div>
<pre><code>
ng build --prod
</code></pre>
<ul>
<li>Console' da yukarıdaki komutu girerek projeyi sunuma hazır hale getiriyoruz.</li>
<li>Bu tüm optimizasyon işlemlerini yapacak. (Sıkıştırma, birleştirme css, js vb.)</li>
<li>Oluşan dosyalar proje klasöründeki dist/ altına atılacak. Bu dosyaları php proje klasörünüze atın.</li>
<li>index.html açın ve <span style="background-color: #f3f3f3;"><base href="/php-angular-backend/"></span> kısmına kendi php proje kök dizininizi belirtin. Burası önemli yoksa proje çalışmayacaktır.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
</div>
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrhXi4RB1Wx3Z_HcDgnJLz8rhWhcWbiDjG4E_pdrLkgWk4g9vlQA0IlEG1tGuc4Safy8SJOnV1l2TDlEI33ltf4J2NSZ0jEzVVjaKcPmHrJGOZxzWrPMghyqmOGXOuf9iu3KRx9VVnrGU/s1600/php-angular-2-file.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrhXi4RB1Wx3Z_HcDgnJLz8rhWhcWbiDjG4E_pdrLkgWk4g9vlQA0IlEG1tGuc4Safy8SJOnV1l2TDlEI33ltf4J2NSZ0jEzVVjaKcPmHrJGOZxzWrPMghyqmOGXOuf9iu3KRx9VVnrGU/s320/php-angular-2-file.png" width="278" /></a>
<figcaption>Res 7.1 Proje Yapısı</figcaption>
</figure>
<br />
<div style="clear: both; text-align: Justify;">
<h1>
Adım 8 :</h1>
<h2>
Url isteklerini index.html yönlendirme</h2>
</div>
Php klasörü ana-dizinde .htaccess dosyası oluşturup aşağıdaki komutları girin.<br />
<pre><code>
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>
</code></pre>
<ul>
<li>Böylece gelen istekler index.html' de toplanacak. </li>
<li>Router işlemi yapmadık ama yapacağımızı varsayarsak yukarıdaki komutlar yeterli.</li>
</ul>
<br/>
<b>Not (Seo)</b>: 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.<br />
<!--<p>Uygulamanın <a target="_blank" href="http://greenlab.html-5.me/php-angular-backend/"><b>Demo</b></a>' suna bakabilirsiniz.</p>-->
<hr />
<h3>Bitir</h3>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-90485469306066428802017-04-08T17:18:00.000+03:002017-04-15T12:00:44.249+03:00Angular ngModel Direktifi - İki Yönlü Veri Bağlama<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhytmqXovye7UmGI8PWgYuwOsu84TlWY5dHgezynNZblJ5UMSCiHuXLHWTQ6IFvSK20_ZGQYXjfBRyY6b5fWX9Lw_WPGIRcOAUCu2zL3Q4czQN5xbYUrzL87447q_f9w2nzyv568SaqA1o/s200/angularjs_global.png" width="200" />
</div>
<div id="main-cont" style="float: right; overflow: hidden; text-align: justify; width: 370px; word-wrap: break-word;">
Angular Çift Yönlü Bağlama Nedir Bakalım!<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align: Justify;">
Angular form elementlerinde kullanılan "ngModel" direktifine göz atacağız. Çift yönlü bağlamaya gitmeden önce, altında yatan event ve property binding işlemlerine bakalım.
</div>
<br />
<br />
<div style="text-align: Justify;">
<h1>
Event Binding</h1>
<h2>
Kullanıcı taraflı eylemlerin yakalanması. </h2>
<ul>
<li>Sentaksı (event)="ifade" şeklindedir.</li>
<li>Aşağıdaki butonun click olayı, testEvent($event) metodunu çağırıyor.</li>
<li>$event yakalanan olayın ta kendisidir. Parametre olarak geçiriliyor ki Component sınıfındaki metotta kullanılabilsin.</li>
<li>Kısacası element' den component' e doğru bir bağlama yapılıyor. İşte <b>event binding</b>. </li>
Dahili olarak kullanılabilen event' ları <a target="_blank" href="https://www.w3schools.com/tags/ref_eventattributes.asp">burada</a> görebilirsiniz.
</ul>
</div>
<pre><code>
<button (click)="testEvent($event)">Tıkla</button>
</code></pre>
<pre><code>
export class AppComponent {
title = 'app works!';
testEvent(event:any) {
console.log(event.innerHTML); // output: Tıkla
}
}
</code></pre>
<br />
<div style="text-align: Justify;">
<h1>
Property Binding:</h1>
<h2>
Component' in bir özelliğini( property) element' in bir özelliğine bağlama </h2>
<ul>
<li>Bu bağlamanın sentakslarından biri, [dom_property]="component_property" şeklindedir. (Üç bağlama şekli var.)</li>
<li>Aşağıda button nesnesinin property' lerine nasıl erişilebileceği gösterilmiştir.</li>
</ul>
</div>
<br />
<pre><code>
<button [innerHTML]="myText" [name]="myName" [type]="myButton" [id]="myId" [attr.value]="btnValue"></button>
</code></pre>
<pre><code>
export class AppComponent {
myText="Tıkla";
myName="guroo";
myButton="button"
myId="5";
btnValue ="Benim Button";
}
</code></pre>
<p>Diğer HTML DOM özelliklerini <a target="_blank" href="https://www.w3schools.com/jsref/dom_obj_all.asp">buradan </a>görebilirsiniz.</p>
<br />
<div style="text-align: Justify;">
<h1>
Two-way Data Binding:</h1>
<h2>
Hem event hem de property bağlama işlemi</h2>
<ul>
<li>Property ile event binding özelliğinin soyutlanmasıyla elde edilmiştir. </li>
<li>Bu nedenle sentaksı [()] ikisinin birleşimi şeklinde belirlenmiş.</li>
<li>[()] sentaksı "banana box" olarak adlandırılıyor.</li>
</ul>
</div>
<br />
Aşağıda two-way-data binding açık hali görülmekte. "name" property' si input' un "value" property' sine ilk değer olarak bağlanıyor. "(input)" event HTML5 ile gelen ve her veri girişinde tetiklenen bir olay. Kullanıcının her bir veri girişinden sonra, Angular name değerine, hedef event( $event.target)' ın değerini atıyor.
<br />
<pre><code>
<input [value]="name" (input)="name=$event.target.value" >
</code></pre>
<pre><code>
export class AppComponent {
name="Test";
}
</code></pre>
<h2>
ngModel</h2>
<ul>
<li>İşte Angular bu iki olayın kolayca kullanılabilmesi için ngModel direktifini sağlıyor. </li>
<li>Bu direktif sadece uygun elementlerde kullanılabiliyor. (form elements) </li>
<li>Aşağıda name property' si, hem normal yöntem hem de banana-box yöntemiyle iki yönlü bağlamaya tabi tutulmuş. </li>
<li>ngModel property' si input value değerini set ediyor. ngModelChange ise DOM' da bir değişiklik olduğunda bunu yayıyor(emit) ve bu bilgiye $event ile ulaşıyoruz. Artık $event.target.value ifadesini kullanmayız. Çünkü ngModelChange zaten sadece gerekli datayı yayar.</li>
<li>Görüleceği üzere ngModel property' si için ngModelChange event' ı çağrılıyor. Yani banana-box ile kendi direktifinizi yazmak isterseniz [(custom)] için (customChange) isimli bir event oluşturmalısınız.</li>
</ul>
<pre><code>
<input [ngModel]="name" (ngModelChange)="name=$event">
<input [(ngModel)]="name" >
</code></pre>
<pre><code>
export class AppComponent {
name="Test";
}
</code></pre>
<span>Bu direktif FormModule tarafından sağlandığı için, modülün aşağıdaki gibi ayrıca dahil edilmesi gerekir.</span>
<br />
<pre><code>
@NgModule({
...
imports: [
BrowserModule,
FormsModule
]
...
})
export class AppModule { }
</code></pre>
<br />
<h3>
Bitir</h3>
Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com3tag:blogger.com,1999:blog-1367762483505881663.post-1035529893796580262017-04-06T18:26:00.002+03:002017-04-07T17:36:25.288+03:00Spring 4 MVC jQuery ile AJAX CRUD İşlemleri<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9scC8DZO4Ud4DR5dewRRRxgRyQQfxGmfBCTAxn8zrsSsZhV7PBkPYhVyiq5OCKNQXxLfzyDPFyucLXrotnfgpSKO-X5qaZJV5v1bY1e857GkojSkqSMD5hAsz15iQs10PNYcHt4CJqUc/s320/spring_global.png" width="200" />
</div>
<div id="main-cont" style="text-align:Justify; float: right; overflow: hidden; width: 370px; word-wrap: break-word;">
Spring MVC ve jQuery ile %100 Ajax İşlemleri Nasıl Yapılabilir?<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align:Justify;">
<article>
<header>
<h1>Spring MVC jQuery AJAX Kullanımı</h1>
<div style="text-align:Justify;">
<p>Spring MVC Ajax işlemleri nasıl yapılabilir. Json veri nasıl gönderilir ve işlenir. Bakalım.</p>
<p>Projenin son hali aşağıdaki gibi olacak. Sayfanın tamamını yenilemeden ekleme, güncelleme ve silme işlemleri gerçekleştirilecek.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgateVfNifWVk1O0YA9br5GYskecR510158tjQVuLtgtZGlORcvLuR6cGRrmVQFkqQZda6YCziv_uPI7I_3ZMt-bIeRb9kRtXLO2HKsWkueAobBLrO73XUICraZaiGNCoCJWLWwLhh5y-E/s1600/ekle.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgateVfNifWVk1O0YA9br5GYskecR510158tjQVuLtgtZGlORcvLuR6cGRrmVQFkqQZda6YCziv_uPI7I_3ZMt-bIeRb9kRtXLO2HKsWkueAobBLrO73XUICraZaiGNCoCJWLWwLhh5y-E/s320/ekle.jpg" width="320" height="111" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkeYMZ4zkCt5UW1IbogBZOsymmiwuS6mDfMCoJZK3aUcqmIseesOA38ze6eATgVrj2GpyB_FjGv_QpLt5YqfFIjyFHtNItpYBARPIqf_OMMuXIer1m4HXYybu3V1Lkm8JCYZv5btBF33o/s1600/delete.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkeYMZ4zkCt5UW1IbogBZOsymmiwuS6mDfMCoJZK3aUcqmIseesOA38ze6eATgVrj2GpyB_FjGv_QpLt5YqfFIjyFHtNItpYBARPIqf_OMMuXIer1m4HXYybu3V1Lkm8JCYZv5btBF33o/s320/delete.jpg" width="320" height="88" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbtxtKTmjV1SDAluVEvhFB-vHAux1W7gFX6YjdNQeNyux7NBdMPNemg3asecCLftbP6vjb3kgA9vhdNDBSKXlSBRMcbdknRQY3Z2ZiXIMNqBO4brrLRCVIfQ_nLzYX1VN58bhAEGRBYM/s1600/update.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbtxtKTmjV1SDAluVEvhFB-vHAux1W7gFX6YjdNQeNyux7NBdMPNemg3asecCLftbP6vjb3kgA9vhdNDBSKXlSBRMcbdknRQY3Z2ZiXIMNqBO4brrLRCVIfQ_nLzYX1VN58bhAEGRBYM/s320/update.jpg" width="320" height="63" /></a></div>
<br/>
<p>Kullanılan Teknolojiler</p>
<ul>
<li>Spring MVC 4.1.6.RELEASE</li>
<li>Maven 4</li>
<li>JDK 1.8</li>
<li>Jackson Library</li>
<li>JSTL 1.2</li>
<li>Bootstrap</li>
<li>jQuery</li>
</ul>
</div>
</header>
</div>
<br />
<br />
<div style="text-align: Justify;">
<h1>Adım 1 :</h1>
<h2>Maven projesi oluşturalım. <a href="http://gurkanyesilyurt.blogspot.com.tr/2015/10/spring-mvc-4-annotation-hello-world.html">Java Based Configuration</a> Gerekli bağımlılıkları ekleyelim. Json' dan Java nesnesine veya tam tersine dönüşüm yapmak için Jackson lib. kullanıyoruz. </h2>
<span>Kapsamı provided kütüphaneler zaten servlet container(tomcat vb.) tarafından çalışma zamanında( runtime) sağlanıyor. Derleme için kullanılıyor.</span>
</div>
<br />
<pre class="brush: xml;">
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.4.1</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.4.1.1</version>
</dependency>
</pre>
<br />
<br />
<div style="text-align: Justify;">
<h1>Adım 2 :</h1>
<h2>Model sınıfını tanımlayalım.</h2>
</div>
<br />
<pre class="brush: java;">
public class Person {
private int id;
private String name;
private int age;
/*setters getters*/
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 3 :</h1>
<h2>Kullanacağımız bazı metotları tanımlıyoruz. Sahte( dummy) data acces layer bu arayüzden oluşacak.</h2>
</div>
<br />
<pre class="brush: java;">
public interface PersonDAO {
public void insert(Person p);
public List<Person> getAllPerson();
public void update(Person person);
public void remove(int id);
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 4 :</h1>
<h2>Uygulamayı test etmek için sahte( dummy) data acces layer oluşturuyoruz.</h2>
</div>
<br />
<pre class="brush: java;">
@Repository
public class PersonDAOImpl implements PersonDAO{
private static final List<Person> myPersons = new ArrayList<>();
static int id = 4;
static {
myPersons.add(new Person(1, "Person1", 14));
myPersons.add(new Person(2, "Person2", 24));
myPersons.add(new Person(3, "Person3", 34));
myPersons.add(new Person(4, "Person4", 45));
}
@Override
public void insert(Person p) {
p.setId(++id);
myPersons.add(p);
}
@Override
public void remove(int id) {
myPersons.stream()
.filter(p -> p.getId()==id)
.findFirst()
.map(p -> myPersons.remove(p));
}
@Override
public void update(Person person) {
myPersons.stream()
.filter(p -> p.getId() == person.getId())
.findFirst()
.map(newP -> {
newP.setName(person.getName());
newP.setAge(person.getAge());
return newP;
});
}
@Override
public List<Person> getAllPerson(){
return myPersons;
}
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 5 :</h1>
<h2>Url eşlemelerine göre HTTP isteklerine karşılık verecek controller sınıfını yazıyoruz.</h2>
<ul>
<li>@Autowired ile PersonDAO' nun implement sınıfının örneği( PersonDAOImpl), otomatik oluşturulur(Inject). </li>
<li>@RequestMapping url-http istekleriyle method' ların eşlenmesini sağlar.</li>
<li>@RequestBody body-post' dan gelen json veriyi java nesnesine dönüştürür.</li>
<li>@ResponseBody java nesnesini json' a dönüştürür ve response olarak gönderir.</li>
<li>Jackson lib. @RequestBody ve @ResponseBody kullanıldığında dönüşüm için devreye girer.</li>
<li>Spring 4.x+ ile @RestController kullanabilirsiniz. Bu @RequestMapping ve @ResponseBody birleşimidir.</li>
</ul>
</div>
<br />
<pre class="brush: java;">
@Controller
public class CRUDController {
public static final String APP_NAME = "CRUD %100 AJAX";
@Autowired
PersonDAOImpl dAOImpl;
@RequestMapping(value = "/" , method = RequestMethod.GET)
public String index(ModelMap map) {
map.put("users", dAOImpl.getAllPerson());
map.put("hello", APP_NAME);
return "index";
}
@RequestMapping(value = "/addPerson" , method = RequestMethod.POST)
@ResponseBody
public Person addPerson(@RequestBody Person person) {
if (person.getName().equals("")) {
return null;
}
dAOImpl.insert(person);
return person;
}
@RequestMapping(value = "/updatePerson" , method = RequestMethod.PUT)
@ResponseBody
public String updatePerson(@RequestBody Person person) {
dAOImpl.update(person);
return "{\"status\":\"Success\"}";
}
@RequestMapping(value = "/deletePerson" , method = RequestMethod.DELETE)
@ResponseBody
public void deletePerson(@RequestBody Map<String, String> id) {
dAOImpl.remove(Integer.parseInt(id.get("id")));
}
}
</pre>
<div style="text-align: Justify;">
<h1>Adım 6 :</h1>
<h2>DAO' da Java 8 Streams kullanıyoruz bu yüzden Maven ayarlarında JDK 1.8 olduğuna dikkat edelim.</h2>
</div>
<br />
<pre class="brush: xml;">
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 7 :</h1>
<h2>@RequestMapping(value="/") dönen sahte datamızı Jstl->foreach kullanarak table' a bastırıyoruz. </h2>
<b>WEB-INF/views/index.jsp</b>
</div>
<br />
<pre class="brush: html;">
<table id="person-list" class="table table-striped table-hover" style="width: 50%">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<c:forEach items="${users}" var="user">
<tr>
<td> ${user.id}</td>
<td class="display${user.id}" id="displayName${user.id}"> ${user.name}</td>
<td class="display${user.id}" id="displayAge${user.id}"> ${user.age}</td>
<td style="display: none;" class="edit${user.id}">
<input type="text" name="editName${user.id}" id="editName${user.id}" value="${user.name}" />
</td>
<td style="display: none;" class="edit${user.id}">
<input type="text" name="editAge${user.id}" id="editAge${user.id}" value="${user.age}" />
</td>
<td>
<input type="button" class="delete-person" data-item-id="${user.id}" id="delete-person${user.id}" value="Delete" />
</td>
<td>
<input type="button" class="update-person" data-item-id="${user.id}" id="update-person${user.id}" value="Update" />
</td>
<td style="display: none;" class="edit${user.id}">
<input type="button" class="update-person" data-item-id="${user.id}" id="edit-person${user.id}" value="Confirm" />
</td>
<td id="updatecheck${user.id}" style="display: none"><span class="label label-success" >OK</span></td>
</tr>
</c:forEach>
<tr>
<td>NEW</td>
<td><input type="text" name="name" id="name" placeholder="Enter Name" /></td>
<td><input type="text" name="age" id="age" placeholder="Enter Age" /></td>
<td>
<input type="button" id="add-person" value="Add" />
</td>
</tr>
</table>
<span class="otherchecks label label-success" style="display: none;">SUCCESS</span>
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 8 :</h1>
<h2>jQuery Ajax Post metodu : Post edilecek verileri alıp, Json formatına uygun hale getiriyoruz. @RequestMapping(value="addPerson") metoduna post edilecek şekilde url ve type belirtiyoruz.</h2>
<ul>
<li>Server-client uyumu sağlamak için Content-Type:"application/json" tanımlamamız gerekiyor. Çünkü server(@RequestBody) bizden json/xml data bekliyor(Consumes). (varsayılan olarak kullanılan= application/x-www-form-urlencoded). Aksi taktirde 415 Unsupported Media Type hatası döndürebilir server.</li>
<li>Server' ın döndürdüğü yanıtı (body-response) jquery success ile yakalayıp işleyeceğiz. Server @ResponseBody ile zaten Json veri döndürecek (Produces). Dönen veriyi nokta notasyonu ile kolaylıkla parse edebilirsiniz. </li>
<li>jQuery dönen belirli data formatlarına ayak uydurur. dataType:"json" yazmaya gerek yok. <blockquote>default: Intelligent Guess (xml, json, script, or html)</blockquote></li>
<li>success callback fonksiyonuna dönen datayı kullanarak yeni bir table row(tr) oluşturup DOM sayesinde sayfayı yenilemeden tabloya ekliyoruz. Karışık gelebilir, mantığı bildikten sonra client tarafında daha etkili framework' lar kullanabilirsiniz(Angular vb). </li>
</ul>
</div>
<br />
<pre class="brush: js;">
$("#add-person").click(function(){
var name= $("#name").val();
var age = $("#age").val();
var data = JSON.stringify({"name":name,"age":age});
$.ajax({
type : "POST",
url : "${pageContext.request.contextPath}/addPerson",
contentType: "application/json",
data : data,
success: function(data){
if(data===""){
return;
}else{
var html = [];
html.push(
'<tr>',
'<td>'+data.id+'</td>',
'<td class="display'+data.id+'" id="displayName'+data.id+'">'+data.name+'</td>',
'<td class="display'+data.id+'" id="displayAge'+data.id+'">'+ data.age+'</td>',
'<td style="display: none;" class="edit'+data.id+'"> <input type="text" name="editName'+data.id+'" id="editName'+data.id+'" value="'+data.name+'" /></td>',
'<td style="display: none;" class="edit'+data.id+'"> <input type="text" name="editAge'+data.id+'" id="editAge'+data.id+'" value="'+data.age+'" /></td>',
'<td><input type="button" class="delete-person" data-item-id="'+data.id+'" id="delete-person'+data.id+'" value="Delete" /></td>',
'<td> <input type="button" class="update-person" data-item-id="'+data.id+'" id="update-person'+data.id+'" value="Update" /> </td>',
'<td style="display: none;" class="edit'+data.id+'"> <input type="button" class="update-person" data-item-id="'+data.id+'" id="edit-person'+data.id+'" value="Confirm" /> </td>',
'<td id="updatecheck'+data.id+'" style="display: none;background-color: greenyellow; color:white;">OK</td>',
'</tr>'
);
var a = html.join("");
$('#person-list tr:last').before(a);
$("#name").val("");
$("#age").val("");
$(".otherchecks").show();
setTimeout(function() { $(".otherchecks").hide(); }, 2000);
}
}
});
});
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 9 :</h1>
<h2>@RequestMapping(value="/updatePerson") için uygun url ve type belirtiyoruz.</h2>
<li>Güncelleme işlemi biraz daha fazla kod satırına sahip. Kısacası, tablonun her satırındaki elemanların belirli bir class ve id değerleri var. Update butonuna basıldığında normal text' lerin yerine edit-text ler geçiyor. (display:none özelliğini show() hide() metotlarıyla değiştirerek)</li>
<li>Bir element' de data-item-id="${user.id}" şeklinde tanımlanan attribute' a var id = $(event.target).data('itemId'); ile erişilebilir. Böylece, tabloda tıklanan her satıra özgü değerlere erişilebilir. Confirm butonuna basıldığında, bu değerler server' a post ediliyor ve yeni verilerle eski verileri tabloda güncelliyoruz.</li>
</div>
<br />
<pre class="brush: js;">
$("#person-list").on('click','.update-person',function(){
var value = $(event.target).val();
var id = $(event.target).data('itemId');
var tdclassshow = ".edit"+id;
var tdclasshide = ".display"+id;
var editnameid = "#editName"+id;
var editageid = "#editAge"+id;
var confirmbuttonshow = ".edit"+id;
if(value==="Update"){
$(tdclassshow).show();
$(tdclasshide).hide();
$(confirmbuttonshow).show();
}else if(value==="Confirm"){
var name = $(editnameid).val();
var age = $(editageid).val();
var data = JSON.stringify({"id":id ,"name":name,"age":age});
$.ajax({
type : "PUT",
url : "${pageContext.request.contextPath}/updatePerson",
contentType: "application/json",
data : data,
success: function(data){
$(tdclassshow).hide();
$(tdclasshide).show();
$(confirmbuttonshow).hide();
var dispName = "#displayName"+id;
var dispAge = "#displayAge"+id;
$(dispName).text(name);
$(dispAge).text(age);
$('#updatecheck'+id).show();
setTimeout(function() { $('#updatecheck'+id).hide(); }, 2000);
}
});
}
});
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 10 :</h1>
<h2>@RequesMapping(value="/deletePerson") uygun url ve type belirleyelim.</h2>
<ul>
<li> Tıklanan "Delete" butonundan data-item-id="${user.id}" person id alıp post ediyoruz. <span style="background-color:#F2F2F2;">public void deletePerson(@RequestBody Map<String, String> id)</span> metodunda id' yi alıp, eşleşen person' ı siliyoruz.</li>
<li> $(rowId).closest('tr').remove(); ile butona en yakın satırı( tr) siliyoruz </li>
</ul>
</div>
<br />
<pre class="brush: js;">
$("#person-list").on('click','.delete-person',function(event){
var id = $(event.target).data('itemId');
var data = JSON.stringify({"id":id});
var rowId= "#"+event.target.id;
$.ajax({
type : "DELETE",
url : "${pageContext.request.contextPath}/deletePerson",
contentType: "application/json",
data : data,
success: function(data){
$(rowId).closest('tr').remove();
$(".otherchecks").show();
setTimeout(function() { $(".otherchecks").hide(); }, 2000);
}
});
});
</pre>
<br />
Kaynak Kodlara bakmak için <a target="_blank" href="https://github.com/gurkan0791/spring-ajax-crud"><b>Github Source Code</b></a>
</article>
<hr />
<b>Bitir</b>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-47163189021465079942015-10-25T20:25:00.000+03:002016-02-27T20:35:07.310+02:00Spring MVC ile Google Maps API MongoDB Uygulaması <div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1Vhsw-exp3THbOUIQ_xcJOTAXk_bm0z6EIDRx873p6jE6rIbMtZRkPgph0imm50UYkWkzvY4jznCL7bR28NwxJvJn1nuYb_AiUHAH3BQ6a3NrIPvirMxOBnuc5WZvrZj5H7TfONOb5g/s144-Ic42/maps_global.png" width="200" alt="google map uygulama" title="google map icon" />
</div>
<div id="main-cont" style="text-align:Justify; float: right; overflow: hidden; width: 370px; word-wrap: break-word;">
Google Maps API v3 ve MongoDB kullanımının basit bir uygulaması için bakabilirsiniz. <br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<hr/>
<article>
<header>
<h1>Spring MVC Google Maps API Kulanımı Örneği</h1>
<div style="text-align:Justify;">
<p>Basit bir veri yapısı MongoDB' de nasıl tutulur. Bu verileri Java tarafında nasıl eşlenir. Veriler (maker) Google Maps API ile nasıl gösterilebilir. Bakalım.</p>
<p>Projenin Son Hali Aşağıdaki Gibi Olacak</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuKAy63W6MusLtr42F100F5GEQM48G-Xl6EfNGJcOpCIa69QrWq5Hf6n320wqlijqbs4X2cfr_qI0-whbIHiyGdTd2nYhQ3TDeCLBFUlsbvEawXbhvb8LNC00sIdmvTWFluRFEN_eFko/s1600/map12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" title="Spring MongoDB Google Maps Api Ekran Görüntüsü" alt="Uygulama Ekran Görüntüsü" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuKAy63W6MusLtr42F100F5GEQM48G-Xl6EfNGJcOpCIa69QrWq5Hf6n320wqlijqbs4X2cfr_qI0-whbIHiyGdTd2nYhQ3TDeCLBFUlsbvEawXbhvb8LNC00sIdmvTWFluRFEN_eFko/s400/map12.png" /></a></div>
<br/>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh93pi6XqKwiWusGnVFoAnuVEHrR4eZf1Szs_P1kdustVeQsVK4nR6W-BwYPAp4z8qPPoA6EBCd_dh5nhLKLZ7iwYGyOuig4PRw00NCl5jSphARv1FMgiHSfuIVfc_yYqR4PPgjncWAK1o/s1600/map13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" alt="maps ekran goruntu" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh93pi6XqKwiWusGnVFoAnuVEHrR4eZf1Szs_P1kdustVeQsVK4nR6W-BwYPAp4z8qPPoA6EBCd_dh5nhLKLZ7iwYGyOuig4PRw00NCl5jSphARv1FMgiHSfuIVfc_yYqR4PPgjncWAK1o/s400/map13.png" /></a></div><br/>
<p>Kullanılan Teknolojiler</p>
<ul>
<li>Spring 4.1.6.RELEASE</li>
<li>Maven 4</li>
<li>Google MAP APIv3 & markerCluster</li>
<li>MongoDB</li>
<li>Angular</li>
<li>Bootstrap</li>
<li>Netbeans 8.2</li>
<li>Java EE 7 & Glashfish 4.1</li>
</ul>
</div>
</header>
<div>
<div style="text-align:Justify;">
<h1>Adım 1 :</h1>
<h2>Netbeans Maven Web Projesi Oluşturalım</h2>
<h1>Adım 2 :</h1>
<h2>Aşağıdaki Dosya Yapısını Gerçekleştirelim</h2>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7yl4cFb1si-6CzH3o5ILO87_7VdAv5e_PoXbbTrykydAHgYdnNCdvqj8SlUJJogJf-BStFgvz7hyI5QT9lpXVzjckASmwmcI1UGl7UeI4oaRY2ih79lywJRbHRApMj6yyCER7JZcZ_as/s1600/map11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" alt="ekran map spring" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7yl4cFb1si-6CzH3o5ILO87_7VdAv5e_PoXbbTrykydAHgYdnNCdvqj8SlUJJogJf-BStFgvz7hyI5QT9lpXVzjckASmwmcI1UGl7UeI4oaRY2ih79lywJRbHRApMj6yyCER7JZcZ_as/s320/map11.png" /></a></div>
<h1>Adım 3 :</h1>
<h2>pom.xml Dosyamızı Düzenleyelim</h2>
</div>
<pre class="brush: xml;">
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.mycompany</groupId>
<artifactId>AngularGoogleMap</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>AngularGoogleMap</name>
<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<jstl.version>1.2</jstl.version>
<javax.servlet.version>3.0.1</javax.servlet.version>
</properties>
<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
<!-- spring-context which provides core functionality -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-aop module provides an AOP Alliance-compliant aspect-oriented
programming implementation allowing you to define -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-webmvc module (also known as the Web-Servlet module) contains
Spring’s model-view-controller (MVC) and REST Web Services implementation
for web applications -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-web module provides basic web-oriented integration features
such as multipart file upload functionality and the initialization of the
IoC container using Servlet listeners and a web-oriented application context -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${javax.servlet.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
<!--Mongo Driver-->
<dependency>
<groupId>org.mongodb</groupId>
<artifactId>mongo-java-driver</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-mongodb</artifactId>
<version>1.8.0.RELEASE</version>
</dependency>
<!--Twitter Bootstrap-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.2.0</version>
<exclusions>
<exclusion>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>2.1.1</version>
</dependency>
<!--AngularJS-->
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>angularjs</artifactId>
<version>1.4.7</version>
</dependency>
<!--MarkerCluster -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>leaflet-markercluster</artifactId>
<version>0.4.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.6</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<outputDirectory>${endorsed.dir}</outputDirectory>
<silent>true</silent>
<artifactItems>
<artifactItem>
<groupId>javax</groupId>
<artifactId>javaee-endorsed-api</artifactId>
<version>7.0</version>
<type>jar</type>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
</pre><br/>
<div style="text-align:Justify;">
<h1>Adım 4 :</h1>
<h2>WebInitializer.java</h2>
</div>
<pre class="brush: java">
package com.mycompany.config;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration;
import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;
/**
*
* @author gurkan0791
*/
public class WebInitializer implements WebApplicationInitializer{
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext();
ctx.register(Config.class);
ctx.setServletContext(servletContext);
ServletRegistration.Dynamic servlet = servletContext.addServlet("dispatcher", new DispatcherServlet(ctx));
servlet.addMapping("/");
servlet.setLoadOnStartup(1);
}
}
</pre>
<br/>
<div style="text-align:Justify;">
<h1>Adım 5 :</h1>
<h2>Config.java</h2>
</div>
<pre class="brush: java;">
package com.mycompany.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;
/**
*
* @author gurkan0791
*/
@Configuration
@ComponentScan("com.mycompany")
@EnableWebMvc
public class Config extends WebMvcConfigurerAdapter{
@Bean
public ViewResolver viewResolver(){
InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
viewResolver.setViewClass(JstlView.class);
viewResolver.setPrefix("/WEB-INF/view/jsp/");
viewResolver.setSuffix(".jsp");
// viewResolver.setOrder(0);
return viewResolver;
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/WEB-INF/resources/");
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}
</pre><br/>
<div style="text-align:Justify;">
<h1>Adım 6 :</h1>
<h2>MongoConfig.java</h2>
</div>
<pre class="brush: java;">
package com.mycompany.config;
import com.mongodb.MongoClient;
import com.mycompany.model.MarkerDAO;
import com.mycompany.model.MarkerDAOImpl;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.AnnotationConfigApplicationContext;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.mongodb.MongoDbFactory;
import org.springframework.data.mongodb.core.MongoOperations;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.SimpleMongoDbFactory;
/**
*
* @author gurkan0791
*/
@Configuration
public class MongoConfig {
@Bean
public MongoDbFactory mongoDbFactory() throws Exception {
return new SimpleMongoDbFactory(new MongoClient("localhost", 27017), "local");
}
@Bean
public MongoTemplate mongoTemplate() throws Exception {
MongoTemplate mongoTemplate = new MongoTemplate(mongoDbFactory());
return mongoTemplate;
}
@Bean
public MarkerDAO getContactDAO() {
return new MarkerDAOImpl();
}
public static MongoOperations getMongoConnection(){
ApplicationContext ctx = new AnnotationConfigApplicationContext(MongoConfig.class);
MongoOperations mongoOperation = (MongoOperations) ctx.getBean("mongoTemplate");
return mongoOperation;
}
}
</pre><br/>
<div style="text-align:Justify;">
<h1>Adım 7 :</h1>
<h2>Marker.java</h2>
</div>
<pre class="brush: java">
package com.mycompany.model;
import java.io.Serializable;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;
/**
*
* @author gurkan0791
*/
@Document(collection = "markers")
public class Marker implements Serializable{
@Id
private String _id;
private String lat;
private String lng;
private String icon;
private String content;
private String title;
/**
* @return the icon
*/
public String getIcon() {
return icon;
}
/**
* @param icon the icon to set
*/
public void setIcon(String icon) {
this.icon = icon;
}
/**
* @return the content
*/
public String getContent() {
return content;
}
/**
* @param content the content to set
*/
public void setContent(String content) {
this.content = content;
}
/**
* @return the title
*/
public String getTitle() {
return title;
}
/**
* @param title the title to set
*/
public void setTitle(String title) {
this.title = title;
}
/**
* @return the lat
*/
public String getLat() {
return lat;
}
/**
* @param lat the lat to set
*/
public void setLat(String lat) {
this.lat = lat;
}
/**
* @return the lng
*/
public String getLng() {
return lng;
}
/**
* @param lng the lng to set
*/
public void setLng(String lng) {
this.lng = lng;
}
/**
* @return the _id
*/
public String getId() {
return _id;
}
/**
* @param _id the _id to set
*/
public void setId(String _id) {
this._id = _id;
}
}
</pre><br />
<div style="text-align:Justify;">
<h1>Adım 8 :</h1>
<h2>MarkerDAO.java</h2>
</div>
<pre class="brush: java;">
package com.mycompany.model;
import java.util.List;
/**
*
* @author gurkan0791
*/
public interface MarkerDAO {
public void saveOrUpdate(Marker marker);
public void delete(String markerId);
public List<Marker> markerListAll();
}
</pre><br/>
<div style="text-align:Justify;">
<h1>Adım 9 :</h1>
<h2>MarkerDAOImpl.java</h2>
</div>
<pre class="brush: java;">
package com.mycompany.model;
import com.mongodb.BasicDBObject;
import com.mongodb.DBCollection;
import com.mycompany.config.MongoConfig;
import java.util.List;
import org.bson.types.ObjectId;
/**
*
* @author gurkan0791
*/
public class MarkerDAOImpl implements MarkerDAO{
@Override
public void saveOrUpdate(Marker marker) {
DBCollection markerCollection = MongoConfig.getMongoConnection().getCollection("markers");
BasicDBObject document = new BasicDBObject();
document.put("lat", marker.getLat());
document.put("lng", marker.getLng());
document.put("title", marker.getTitle());
document.put("icon", marker.getIcon());
document.put("content", marker.getContent());
if (marker.getId().length() > 0) {
BasicDBObject query = new BasicDBObject();
query.append("_id", new ObjectId(marker.getId()));
markerCollection.update(query, document);
}else{
markerCollection.insert(document);
}
}
@Override
public void delete(String markerId) {
DBCollection markerCollection = MongoConfig.getMongoConnection().getCollection("markers");
BasicDBObject query = new BasicDBObject();
query.append("_id", new ObjectId(markerId));
markerCollection.remove(query);
}
@Override
public List<Marker> markerListAll() {
List<Marker> listUser=MongoConfig.getMongoConnection().findAll(Marker.class, "markers");
return listUser;
}
}
</pre><br/>
<div style="text-align:Justify;">
<h1>Adım 10 :</h1>
<h2>DatabaseController.java</h2>
</div>
<pre class="brush:java">
package com.mycompany.controllers;
import com.mycompany.model.Marker;
import com.mycompany.model.MarkerDAO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
/**
*
* @author gurkan0791
*/
@Controller
public class DatabaseController {
@Autowired
private MarkerDAO markerDAO;
@RequestMapping(value = "/" , method = RequestMethod.GET)
public String index(@ModelAttribute Marker marker,ModelMap map) {
//MongoDBTest mongoDBTest = new MongoDBTest();
map.put("msg", "Hello Spring 4 Web MVC!");
map.put("mark", markerDAO.markerListAll());
//map.put("mark", mongoDBTest.getMarker());
return "index";
}
@RequestMapping(value = "/insert" , method = RequestMethod.GET)
public String insert(@ModelAttribute Marker marker){
markerDAO.saveOrUpdate(marker);
// System.out.println("Marker Bilgi : "+marker.getTitle()+"\n"+marker.getContent()+"\n"+marker.getIcon()
// +"\n"+marker.getId()+"\n"+marker.getLat()+"\n"+marker.getLng());
return "redirect:/";
}
@RequestMapping(value = "/delete", method = RequestMethod.GET, params = {"id"})
public String delete(@RequestParam("id") String id){
//System.out.println("Delete id :"+ id);
markerDAO.delete(id);
return "redirect:/";
}
}
</pre><br />
<div style="text-align:Justify;">
<h1>Adım 11 :</h1>
<h2>app.js</h2>
</div>
<pre class="brush: js;">
(function(){
var app=angular.module('myApp', ['ngMap']);
app.controller('MarkerCtrl',['$scope', function($scope) {
var beforeMarker = null;
//var markers = [];
$scope.deleteID = "";
$scope.elements = elements;
$scope.isDelete = true;
var map;
var infoWindow;
$scope.dynMarkers = [];
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
for (var i=0; i<$scope.elements.length; i++) {
setMarker(map,new google.maps.LatLng($scope.elements[i].latLng[0],$scope.elements[i].latLng[1]),$scope.elements[i].title,
$scope.elements[i].icon,$scope.elements[i].content,$scope.elements[i].id);
}
$scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {});
$scope.placeMarker = function(e) {
var marker;
if (beforeMarker !== null) {
beforeMarker.setMap(null);
marker = new google.maps.Marker({position: e.latLng, map: map});
map.panTo(e.latLng);
$("#lat").val(marker.position.lat);
$("#lng").val(marker.position.lng);
$("#id").val("");
$("#title").val("");
$("#icon").val("");
$("#content").val("");
$('#addOrUpdate').val('ADD MARKER');
$scope.isDelete = true;
}else {
marker = new google.maps.Marker({position: e.latLng, map: map});
map.panTo(e.latLng);
$("#lat").val(marker.position.lat);
$("#lng").val(marker.position.lng);
$("#id").val("");
$("#title").val("");
$("#icon").val("");
$("#content").val("");
$('#addOrUpdate').val('ADD MARKER');
$scope.isDelete = true;
}
beforeMarker = marker;
}
});
function setMarker(map, position, title, icon, content,id) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title,
icon: icon,
content: content,
id:id
};
marker = new google.maps.Marker(markerOptions);
//markers.push(marker); // add marker to array
$scope.dynMarkers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
// close window if not undefined
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(map, marker);
$("#id").val(marker.id);
$("#lat").val(marker.position.lat);
$("#lng").val(marker.position.lng);
$("#title").val(marker.title);
$("#icon").val(marker.icon);
$("#content").val(marker.content);
$('#addOrUpdate').val('UPDATE MARKER');
$scope.$apply(function () {
$scope.isDelete = false;
$scope.deleteID = marker.id;
});
});
}
}]);
})();
</pre><br/>
<div style="text-align:Justify;">
<h1>Adım 12 :</h1>
<h2>index.jsp</h2>
</div>
<pre class="brush: html;">
<%--
Document : index
Created on : Oct 20, 2015, 7:56:10 PM
Author : gurkan0791
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!--<link rel="stylesheet" type="text/css" href="${cp}/resources/css/site.css" />-->
<link rel='stylesheet' href='${cp}/webjars/bootstrap/3.2.0/css/bootstrap.min.css'>
<!--<link rel='stylesheet' href='${cp}/webjars/leaflet-markercluster/0.4.0/MarkerCluster.css'>-->
<title>JSP Page</title>
<script>
var elements = [
<c:forEach var="row" items="${mark}">
{"id": '<c:out value="${row.id}" />',
"latLng" : [<c:out value="${row.lat}" />,
<c:out value="${row.lng}" />],
"title" : '<c:out value="${row.title}" />',
"icon": '<c:out value="${row.icon}" />',
"content" : '<c:out value="${row.content}" />'},
</c:forEach> ];
</script>
</head>
<body>
<div ng-controller="MarkerCtrl">
<div class="container">
<h1>GOOGLE MAP V3 ANGULARJS MONGODB DEMO</h1>
</div>
<map style="height: 500px;" center="39.095963, 35.419922" zoom="6" scrollwheel="false" center="36.900,30.70 " map-type-id="ROADMAP" on-click="placeMarker()">
</map>
<br />
<hr />
<div class="container text-center">
<h2><p>MAKER INFORMATION</p></h2>
<!--<p id="demo">Click me to change my HTML content (innerHTML).</p>-->
<div ng-show="{{deleteID !== null }}">
<form:form class="form-horizontal" modelAttribute="marker" action="${cp}/insert" method="GET" >
<form:hidden path="id" name="id" id="id" />
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Lat</label>
<div class="col-sm-10">
<form:input path="lat" type="text" class="form-control" id="lat" placeholder="Lat" disabled="disabled" />
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Lng</label>
<div class="col-sm-10">
<form:input path="lng" type="text" class="form-control" id="lng" placeholder="Lng" disabled="disabled"/>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<form:input path="title" type="text" class="form-control" id="title" placeholder="Marker Title here!" />
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Icon</label>
<div class="col-sm-10">
<form:input path="icon" type="text" class="form-control" id="icon" placeholder="Marker Icon Here!" />
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Content</label>
<div class="col-sm-10">
<form:input path="content" type="text" class="form-control" id="content" placeholder="Marker Content Here!" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-success" value="ADD MARKER" id="addOrUpdate" />
<a href="${cp}/delete?id={{deleteID}}" class="btn btn-warning" ng-disabled="isDelete" id="deleteMarker" >DELETE Marker</a>
</div>
</div>
</form:form>
</div>
</div>
</div>
<!--Script Bootstrap & Jquery -->
<!--src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3.exp&libraries=places&signed_in=true&region=tr&language=tr&key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM"-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script>
<script type="text/javascript" src="${cp}/webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${cp}/webjars/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="${cp}/webjars/angularjs/1.4.7/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<!--<script type="text/javascript" src="${cp}/webjars/leaflet-markercluster/0.4.0/leaflet.markercluster.js"></script>-->
<!--<script type="text/javascript" src="${cp}/webjars/leaflet-markercluster/0.4.0/leaflet.markercluster-src.js"></script>-->
<script type="text/javascript" src="${cp}/resources/js/markercluster.js"></script>
<script type="text/javascript" src="${cp}/resources/js/app.js"></script>
</body>
</html>
</pre><br/>
<div style="text-align:Justify;">
<h1>Adım 13 :</h1>
<h2>markercluster.js Burdan Çekebilirsiniz.</h2>
<a href="https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/scripts/markerclusterer.js">MarkerCluster.js</a>
</div>
<div style="text-align:Justify;">
<h1>Adım 14 :</h1>
<h2>MongoDB' de Tutulacak Veri Yapısı</h2>
</div>
<pre class="brush: html">
/* 1 */
{
"_id" : ObjectId("56288336404341fde27eca35"),
"lat" : "36.9",
"lng" : "30.700000000000045",
"title" : "Title1",
"icon" : "https://maps.google.com/mapfiles/ms/icons/orange-dot.png",
"content" : "Content1new"
}
/* 2 */
{
"_id" : ObjectId("56288367404341fde27eca36"),
"lat" : 36.8999999999999986,
"lng" : 30.7004200000000012,
"title" : "Title2",
"icon" : "https://maps.google.com/mapfiles/ms/icons/orange-dot.png",
"content" : "Content2"
}
</pre>
<div style="text-align:Justify;">
<h1>Adım 15 :</h1>
<h2>MongoDB UI Desteği İçin RoboMongo İle Bağlanma</h2>
<p>İlk önce MongoDB Kuralım. <a href="https://www.digitalocean.com/community/tutorials/how-to-install-mongodb-on-ubuntu-14-04">Ubuntu kurulum için </a></p>
<p><a href="http://robomongo.org/">Robomongo' yu kuralım.</a></p>
<p>Robomongo' yu açalım ve "Create" ile yeni bir bağlantı oluşturalım ve "Connect" ile bağlantıyı gerçekleştirelim( :27017 Varsayılan port).</p>
</div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguS-U4Eo8mIu5x58A11lXq3ZGpxJgU-7MWZV4IGYnuWOuyUpLb16-T94SOcrYzyE9H8eEZxbiFxlkzR98kZcEnoz-01Oxt5lHK1AiLHgc54riUBroObDWQEEng1I5wz07GPFS-bCDUlYI/s1600/map14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" alt="ekran map google" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguS-U4Eo8mIu5x58A11lXq3ZGpxJgU-7MWZV4IGYnuWOuyUpLb16-T94SOcrYzyE9H8eEZxbiFxlkzR98kZcEnoz-01Oxt5lHK1AiLHgc54riUBroObDWQEEng1I5wz07GPFS-bCDUlYI/s320/map14.png" /></a></div>
<div style="text-align:Justify;">
<p>"local" isimli veritabanımızda "Collection" sağ tıklayalım ve "markers" adında yeni bir collection( tablo) oluşturalım. </p>
</div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRHWzVqnTblZlYROmiFkYcfD3D_oPhqbAy_n-q9C7Vd9tnnhBOQWgWusbyBxjFBqMbNGSMYgYeyOYDBjRAALgUxqhXYuLM53wKYOYqewJjlqw4LyLMGqhmfVet3e_X32Fr9EHjjrYHAHM/s1600/map15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" alt="google map mongo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRHWzVqnTblZlYROmiFkYcfD3D_oPhqbAy_n-q9C7Vd9tnnhBOQWgWusbyBxjFBqMbNGSMYgYeyOYDBjRAALgUxqhXYuLM53wKYOYqewJjlqw4LyLMGqhmfVet3e_X32Fr9EHjjrYHAHM/s320/map15.png" /></a></div>
</div>
<hr />
<footer>
Uygulamayı GitHub' da Gör. <br/><a href="https://github.com/gurkan0791/AngularGoogleMap">Github AngularMap</a><br/><br/>
<blockquote>
<span>
<br />
<br />
<a href="http://websystique.com/spring-4-mvc-tutorial/" target="_blank">Spring Tutorial</a><br />
<a href="http://crunchify.com/simplest-spring-mvc-hello-world-example-tutorial-spring-model-view-controller-tips/" target="_blank">Spring MVC</a><br />
<a href="https://docs.mongodb.org/getting-started/java/" target="_blank">MongoDB Java Driver Getting-Started</a>
<a href="https://github.com/allenhwkim/angularjs-google-maps" target="_blank">AngularJS Google MAPS</a>
</span>
</blockquote>
</footer>
</article>
<br />
<br />
<br />
<h2>Bitir</h2>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com4tag:blogger.com,1999:blog-1367762483505881663.post-33886085793833163062015-10-15T20:51:00.000+03:002016-02-27T20:26:26.848+02:00AngularJS ile Basit Alışveriş Sepeti<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOn4PV24anqGqeVnC05nJ1x-OO_1fCB-UjOYhuByKvc6jRfjKvvXpE_CFqXGcAVw7KDe3kmdwKE185tFq-at0ccwfaa-AuA9s7d10g7G0-eyy_ILzR7VLKK4B4Yi-xvgzuo5DvJzJ3V1U/s144-Ic42/angularjs_global.png" alt="cart angular" width="200" />
</div>
<div id="main-cont" style="text-align:Justify; float: right; overflow: hidden; width: 370px; word-wrap: break-word;">
AngularJS ile Basit Alışveriş Sepeti Nasıl Gerçekleştirilebilir ? Bakalım.<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<br />
<hr />
<br />
<article>
<header>
<h1>Angular Sepet Uygulaması</h1>
<div style="text-align:Justify;">
<p>Angular ile verilerin cookie' de nasıl tutulduğunu gösteren basit bir uygulama. Alışveriş sepeti örneği üzerinde görelim.</p>
<p>Kullanılan Teknolojiler</p>
<ul>
<li>Angular</li>
<li>Bootstrap</li>
</ul>
</div>
</header>
<div style="text-align:Justify;">
<div class="separator" style="clear: both; text-align: center;">
<figure><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc7WT3cG1YibLu60R16Tk11oGHfd9Sb7coZ7XUtTkktgO8t_UO5GPJyRyK0Z_hRUiZT1Wi0xpDMoWfALlw9EvChRLcIrRVV8DPpDDoRO5NiJkGJDjm9iESDdXR9EKWRKs_Vas09atdzF0/s1600/angular11.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="angularjs cart" title="AngularJS Shopping Cart Screenshot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc7WT3cG1YibLu60R16Tk11oGHfd9Sb7coZ7XUtTkktgO8t_UO5GPJyRyK0Z_hRUiZT1Wi0xpDMoWfALlw9EvChRLcIrRVV8DPpDDoRO5NiJkGJDjm9iESDdXR9EKWRKs_Vas09atdzF0/s400/angular11.PNG" /></a>
<figcaption>Res - Uygulama Arayüzü</figcaption>
</figure>
</div>
<br /><br />
<div style="clear:both;"></div>
<iframe style="border: 1px solid #999;width: 100%; height: 500px"
src="http://embed.plnkr.co/wrT0ao?t=readme" frameborder="0"
allowfullscreen="allowfullscreen">
Loading plunk...
</iframe>
<p>Uygulamanın çalışır hali ve açıklamalar için<br /><br />
<a target="_blank" href="http://plnkr.co/edit/wrT0ao?p=preview">Plunker' de Gör</a>
</p>
<p>Uygulamada çerezler için $cookies servisinden yararlandık.<br /><br />
Bu servis ve daha fazlası için <a target="_blank" href="https://docs.angularjs.org/api/ngCookies">docs.angularjs.org/api/ngCookies</a>
</p>
</div>
<footer>
<p><small>Ayrıca <a target="_blank" href="http://getbootstrap.com/getting-started/">getbootstrap.com/getting-started/</a></small></p>
</footer>
</article>
<br />
<h2>Bitti</h2>
<br />
<hr />Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com5tag:blogger.com,1999:blog-1367762483505881663.post-82429797071302665252015-10-12T21:57:00.001+03:002016-02-27T20:26:52.185+02:00Spring MVC 4 AngularJS Bootstrap Entegrasyonu Final<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" title="Spring AngularJS Bootstrap Example" alt="bootstrap spring" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChSm0X1mxucSI_6ZeGbmSLUQocOQiCtQnwQY9SS6xR6G3gmqNCqriVHmDE-rAJDqgJfgr4xTPsb7xauoaGpO-cZNDZ30stHqby402X3l5QUf-8WGPh6PIH0p0mohpo8mnvgGOMmz7MR4/s144-Ic42/spring_global.png" width="200" />
</div>
<div id="main-cont" style="float: right; overflow: hidden; text-align: Justify; width: 370px; word-wrap: break-word;">
Maven Yapılı Spring MVC 4 Web ile AngularJS ve Bootstrap Nasıl Yapılandırılabilir ve Kullanılabilir.<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align: Justify;">
<h2>
Kullanılan Teknolojiler</h2>
<ul>
<li>Maven 4.0</li>
<li>Netbeans IDE 8.0.2</li>
<li>Spring 4.1.6.RELEASE</li>
<li>Glashfish 4.1</li>
<li>Java EE 7</li>
<li>Apache Tiles 3.0.5</li>
<li>SLF4J 1.7.6</li>
<li>AngularJS 1.4.7</li>
<li>Bootstrap 3.2.0</li>
</ul>
</div>
<br />
<blockquote>
<span>
<br />
<br />
<a href="http://websystique.com/spring-4-mvc-tutorial/" target="_blank">Spring Tutorial</a><br />
<a href="http://crunchify.com/simplest-spring-mvc-hello-world-example-tutorial-spring-model-view-controller-tips/" target="_blank">Spring MVC</a><br />
<a href="http://www.tutorialspoint.com/spring/logging_with_log4j.htm" target="_blank">LOG4J Kullanımı ?</a><br />
LOG4J Hatası Çözümü <a href="http://stackoverflow.com/questions/1266139/log4jwarn-no-appenders-could-be-found-for-logger-in-web-xml" target="_blank">log4j:WARN No appenders could be found for logger</a>
</span>
</blockquote>
<br />
<div style="text-align: Justify;">
<h1>
Adım 1 :</h1>
<h2>
Netbeans Maven Web Projesi Oluşturalım. <a href="https://gurkanyesilyurt.blogspot.com.tr/2015/10/spring-mvc-4-maven-projesi.html">Nasıl Oluşturulur?</a> </h2>
</div>
<br />
<div style="text-align: Justify;">
<h1>
Adım 2 :</h1>
<h2>
Aşağıdaki Proje Yapısını Oluşturalım.</h2>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLLAuM9BFuORmIKnrqjt4qKVSZHCAWowIB4B1j2yvGXuTrN7FDyIvFAkfUx2l6GLfnkdLY4EtQiKA-OM2H0W-gwSHIg-oHLLIHMfLljviEGmf1p88B8SqF3xncOv8eshNjqW0NYhC5Kc/s1600/spring13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maven AngularJS Bootstrap" title="Maven proje dosya yapısı ( maven project structure )" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLLAuM9BFuORmIKnrqjt4qKVSZHCAWowIB4B1j2yvGXuTrN7FDyIvFAkfUx2l6GLfnkdLY4EtQiKA-OM2H0W-gwSHIg-oHLLIHMfLljviEGmf1p88B8SqF3xncOv8eshNjqW0NYhC5Kc/s320/spring13.png" />
</a>
<figcaption>Res2.1. - Proje Dosya Yapısı</figcaption>
</figure>
</div>
<br />
<div style="text-align: Justify;">
<h1>
Adım 3 :</h1>
<h2>
Kullanılacak Tüm Teknolojileri Projeye Bağlayalım. (pom.xml)</h2>
</div>
<br />
<pre class="brush: xml;"><?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.mycompany</groupId>
<artifactId>MySpringMVC</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>MySpringMVC</name>
<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<jstl.version>1.2</jstl.version>
<javax.servlet.version>3.0.1</javax.servlet.version>
</properties>
<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
<!-- spring-context which provides core functionality -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-aop module provides an AOP Alliance-compliant aspect-oriented
programming implementation allowing you to define -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-webmvc module (also known as the Web-Servlet module) contains
Spring’s model-view-controller (MVC) and REST Web Services implementation
for web applications -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-web module provides basic web-oriented integration features
such as multipart file upload functionality and the initialization of the
IoC container using Servlet listeners and a web-oriented application context -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${javax.servlet.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
<!--Twitter Bootstrap-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.2.0</version>
<exclusions>
<exclusion>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>2.1.1</version>
</dependency>
<!--AngularJS-->
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>angularjs</artifactId>
<version>1.4.7</version>
</dependency>
<!--Apache Tiles-->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-extras</artifactId>
<version>3.0.5</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>1.7.6</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>1.7.6</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.6</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<outputDirectory>${endorsed.dir}</outputDirectory>
<silent>true</silent>
<artifactItems>
<artifactItem>
<groupId>javax</groupId>
<artifactId>javaee-endorsed-api</artifactId>
<version>7.0</version>
<type>jar</type>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 4 :</h1>
<h2>
(tiles.xml) Template belirleyelim</h2>
</div>
<br />
<pre class="brush: xml;"><tiles-definitions>
<definition name="defaultTemplate" template="/WEB-INF/jsp/template/template.jsp">
<put-attribute name="header" value="/WEB-INF/jsp/template/header.jsp">
<put-attribute name="menu" value="/WEB-INF/jsp/template/menu.jsp">
<put-attribute name="body" value="/WEB-INF/jsp/template/body.jsp">
<put-attribute name="footer" value="/WEB-INF/jsp/template/footer.jsp">
</put-attribute></put-attribute></put-attribute></put-attribute></definition>
</tiles-definitions>
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 5 :</h1>
<h2>
(log4j.properties)Loglama İçin Gerekli Tanımlamarı Yapalım. Projeyi Build Edelim.</h2>
</div>
<br />
<pre class="brush: xml;">log4j.rootLogger=INFO, CONSOLE
log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%d{ABSOLUTE} %-5p [%c{1}:%L] %m%n
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 6 :</h1>
<h2>
template.jsp</h2>
</div>
<br />
<pre class="brush: html;"><%--
Document : template
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="${cp}/resources/css/site.css" />
<link rel='stylesheet' href='${cp}/webjars/bootstrap/3.2.0/css/bootstrap.min.css'>
</head>
<body>
<div class="container">
<div class="row" style="background-color: burlywood;">
<div class="header col-md-12">
<tiles:insertAttribute name="header" />
</div>
</div>
<div class="row" >
<div class="menu col-md-4" style="background-color: coral;">
<tiles:insertAttribute name="menu" />
</div>
<div class="body col-md-8" style="background-color: antiquewhite;">
<tiles:insertAttribute name="body" />
</div>
</div>
<div class="row" style="background-color: chartreuse;">
<div class="footer col-md-12">
<tiles:insertAttribute name="footer" />
</div>
</div>
</div>
<!--Script Bootstrap & Jquery -->
<script type="text/javascript" src="${cp}/webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${cp}/webjars/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="${cp}/webjars/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="${cp}/resources/js/app.js"></script>
</body>
</html>
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 7 :</h1>
<h2>
body.jsp,header.jsp,footer.jsp dosyalarını şimdilik aşağıdaki gibi sadece belirtelim.</h2>
</div>
<br />
<pre class="brush: html;"><%--
Document : footer
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Footer</h1>
</body>
</html>
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 8 :</h1>
<h2>
menu.jsp sayfasını bootstrap kullanmak amacıyla biraz özelleştirelim.</h2>
</div>
<br />
<pre class="brush: html;"><%--
Document : menu
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>List</h1>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="${cp}/">AnaSayfa</a></li>
<li role="presentation"><a href="${cp}/page1">Page1</a></li>
<li role="presentation"><a href="${cp}/page2">Page2</a></li>
</ul>
</body>
</html>
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 9 :</h1>
<h2>
index.jsp (Dikkat! Sadece template body kısmı override ediliyor.)</h2>
</div>
<br />
<pre class="brush: html;"><%--
Document : index
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set>
<!DOCTYPE html>
<tiles:insertDefinition name="defaultTemplate" >
<tiles:putAttribute name="body" >
<body ng-app="myModule">
<h1>Hello World!</h1>
<h2${msg}</h2>
<h2>
<div ng-controller="MyController">
{{myValue}}
</div>
<c:out value="JSTL Hello World!"></c:out>
</h2>
<button type="button" class="btn btn-success" id="bas">Click mE</button>
</tiles:putAttribute>
</tiles:insertDefinition>
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 10 :</h1>
<h2>
page1.jsp (Müdahale edilmemiş sayfa)</h2>
</div>
<br />
<pre class="brush: html;"><%--
Document : page1
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<tiles:insertDefinition name="defaultTemplate" />
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 11 :</h1>
<h2>
page2.jsp (Şablonun body kısmı değiştirilmiş.)</h2>
</div>
<br />
<pre class="brush: html;"><%--
Document : page2
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<tiles:insertDefinition name="defaultTemplate" >
<tiles:putAttribute name="body" >
Ben Tasarım Yapılmış Body
<input type="button" value="Bootstrap" class="btn btn-success" />
</tiles:putAttribute>
</tiles:insertDefinition>
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 12 :</h1>
<h2>
app.js (AngularJS ve JQuery Testi İçin Basit Örnek) Ayrıca site.css ile de özelleştirme yapabiliriz.</h2>
</div>
<br />
<pre class="brush: js;">(function (){
var app = angular.module('myModule', []);
app.controller('MyController', ['$scope', function($scope) {
$scope.myValue = 'AngularJS Merhaba Dünya!';
}]);
})();
$(document).ready(function(){
$('#bas').click(function(){
alert("Bana Tiklandi.");
});
});
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 13 :</h1>
<h2>
Config.java</h2>
</div>
<br />
<pre class="brush: java;">package com.mycompany.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;
@Configuration
@ComponentScan("com.mycompany")
@EnableWebMvc
public class Config extends WebMvcConfigurerAdapter{
@Bean
public UrlBasedViewResolver xmlViewResolver(){
UrlBasedViewResolver resolver = new UrlBasedViewResolver();
resolver.setViewClass(TilesView.class);
resolver.setOrder(1);
return resolver;
}
@Bean
public TilesConfigurer tilesConfigurer() {
TilesConfigurer tilesConfigurer = new TilesConfigurer();
tilesConfigurer.setDefinitions(new String[] { "/WEB-INF/tiles.xml" });
tilesConfigurer.setCheckRefresh(true);
return tilesConfigurer;
}
@Bean
public ViewResolver viewResolver(){
InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
viewResolver.setViewClass(JstlView.class);
viewResolver.setPrefix("/WEB-INF/jsp/view/");
viewResolver.setSuffix(".jsp");
viewResolver.setOrder(0);
return viewResolver;
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//css ve js ulaşmak için
registry.addResourceHandler("/resources/**").addResourceLocations("/WEB-INF/resources/");
//bootstrap ve jquery sağlayan webjars ulaşmak için
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 14 :</h1>
<h2>
WebInitializer.java</h2>
</div>
<br />
<pre class="brush: java;">package com.mycompany.config;
import javax.servlet.ServletRegistration.Dynamic;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;
public class WebInitializer implements WebApplicationInitializer{
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext();
ctx.register(Config.class);
ctx.setServletContext(servletContext);
Dynamic servlet = servletContext.addServlet("dispatcher", new DispatcherServlet(ctx));
servlet.addMapping("/");
servlet.setLoadOnStartup(1);
}
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 15 :</h1>
<h2>
DefaultController.java (LOG4J basit kullanım)</h2>
</div>
<br />
<pre class="brush: java;">package com.mycompany.controllers;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class DefaultController {
private static final Logger logger = LoggerFactory.getLogger(DefaultController.class);
@RequestMapping(value = "/" , method = RequestMethod.GET)
public String index(ModelMap map) {
logger.info("index deyim");
map.put("msg", "Hello Spring 4 Web MVC!");
return "index";
}
@RequestMapping(value = "/page1", method = RequestMethod.GET)
public String page1() {
logger.info("page1 deyim");
return "page1";
}
@RequestMapping(value = "/page2", method = RequestMethod.GET)
public String page2(ModelMap model) {
logger.info("page2 deyim");
return "page2";
}
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 15 :</h1>
<h2>
Projeyi Build ve Run Edelim.</h2>
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdclVkqZizFeo1OLzmsrGje3DW3LjPR7YCmF8KKK3oMusR7aXCJ3RAZ8vqMYU6dVbxzz1NOPq2CSzfxDIkn4KDj648TmQPClV9EtJL22liQgHTAMRXcKIoItW7ORpu6-BGawFtosS-Aps/s1600/spring41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maven AngularJS Bootstrap Final Arayüz" title="index.jsp sayfasının final görünümü" border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdclVkqZizFeo1OLzmsrGje3DW3LjPR7YCmF8KKK3oMusR7aXCJ3RAZ8vqMYU6dVbxzz1NOPq2CSzfxDIkn4KDj648TmQPClV9EtJL22liQgHTAMRXcKIoItW7ORpu6-BGawFtosS-Aps/s320/spring41.png" width="320" />
</a>
<figcaption>Res15.1. - Uygulama Ekran Görüntüsü (index.jsp)</figcaption>
</figure>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-GyX8YOtnUer6rurj9DDKKUvQTaDfkGu8Cv41k1sZ9r2HxrPk_GoP8aSHFHy-X6ct_mTth4orTDAZVySnCagy9OdlrqYaSLU4Nf2MtjsVppbo8hyMZJVB2LDDaZdICpP5SZC9H7EnIs/s1600/spring42.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maven AngularJS Bootstrap Final Arayüz - 2" title="page1.jsp sayfasının final görünümü - 2" border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-GyX8YOtnUer6rurj9DDKKUvQTaDfkGu8Cv41k1sZ9r2HxrPk_GoP8aSHFHy-X6ct_mTth4orTDAZVySnCagy9OdlrqYaSLU4Nf2MtjsVppbo8hyMZJVB2LDDaZdICpP5SZC9H7EnIs/s320/spring42.png" width="320" />
</a>
<figcaption>Res15.2. - Uygulama Ekran Görüntüsü (page1.jsp)</figcaption>
</figure>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPDpMBMzTXaFxzDH6gTJlW-7iVE6YCP6gSPVHo_1-PkexeRwrLdpJtNRZeKo3EN1KPWv0Q1_b2p5P0dbGUtbx3laaLtNAkRG01Mpn2PmY8KMdExyErESLcFvn9IH1OLctucH1cuZNpyI/s1600/spring43.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maven AngularJS Bootstrap Final Arayüz - 3" title="page2.jsp sayfasının final görünümü - 3" border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPDpMBMzTXaFxzDH6gTJlW-7iVE6YCP6gSPVHo_1-PkexeRwrLdpJtNRZeKo3EN1KPWv0Q1_b2p5P0dbGUtbx3laaLtNAkRG01Mpn2PmY8KMdExyErESLcFvn9IH1OLctucH1cuZNpyI/s320/spring43.png" width="320" />
</a>
</figure>
<figcaption>Res15.3. - Uygulama Ekran Görüntüsü (page2.jsp)</figcaption>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidGProm55OCc5tFGZfWcA2zdB2bvGYpgG4TrfRtJpOaciIyu3bEunOSjW76niBHqrGK9uKxQ1gQ5kMgj_5EMgSNPmidRUQ6z2EOFABH2CfAx1oU9uHqrcxgT0Jm1tgOOFj7l13VrVJiWs/s1600/spring44.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maven AngularJS Bootstrap Final Arayüz - 4" title=" mobil sayfa final görünümü - 4" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidGProm55OCc5tFGZfWcA2zdB2bvGYpgG4TrfRtJpOaciIyu3bEunOSjW76niBHqrGK9uKxQ1gQ5kMgj_5EMgSNPmidRUQ6z2EOFABH2CfAx1oU9uHqrcxgT0Jm1tgOOFj7l13VrVJiWs/s320/spring44.png" width="266" />
</a>
</figure>
<figcaption>Res15.4. - Uygulama Ekran Görüntüsü Mobil</figcaption>
</div>
<div>
<br /></div>
<div>
<br /></div>
</div>
<br />
Download <a href="https://github.com/gurkan0791/MySpringMVC">GitHub</a>
<br />
<h2>Bitir</h2>
<br />Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com1tag:blogger.com,1999:blog-1367762483505881663.post-48208635839792490652015-10-12T15:42:00.002+03:002016-02-27T20:27:10.904+02:00Spring MVC 4 Apache Tiles Entegrasyonu - 3<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" alt="tiles spring" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChSm0X1mxucSI_6ZeGbmSLUQocOQiCtQnwQY9SS6xR6G3gmqNCqriVHmDE-rAJDqgJfgr4xTPsb7xauoaGpO-cZNDZ30stHqby402X3l5QUf-8WGPh6PIH0p0mohpo8mnvgGOMmz7MR4/s144-Ic42/spring_global.png" width="200" />
</div>
<div id="main-cont" style="float: right; overflow: hidden; text-align: Justify; width: 370px; word-wrap: break-word;">
Apache Tiles kullanarak template nasıl hazırlanır ve kullanılır.<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align: Justify;">
<blockquote>
<span>
Apache Tiles Nedir?
<br />
<a href="https://tiles.apache.org/">bkz. Apache</a>
<br />
<a href="https://www.google.com.tr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=apache+tiles+nedir">bkz. Google</a>
</span>
</blockquote>
<br />
Kullanılan Teknolojiler
<ul>
<li>Spring MVC 4</li>
<li>Apache Tiles 3.0.5</li>
<li>Netbeans IDE 8.0.2</li>
</ul>
<br />
</div>
<div style="text-align: Justify;">
<h1>Adım 1 :</h1>
<h2>Proje yapısını aşağıdaki gibi oluşturalım.</h2>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNgva4mM3xLGscG2HxQj5HHo_DGviy0796_d-PdF1yk89JiPpJ-w-yJUX_a1_EQkuPd5YnuxXa1Nn_cRkXkxvS2RQ0tJ0DiGrzHAY8zlMBh74Oc1OsIMS_So5v8l_lpO-LAHkTwFBsI4E/s1600/spring31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Spring Apache Tiles" title="Spring MVC Apache Tiles Entegrasyonu Dosya Yapısı" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNgva4mM3xLGscG2HxQj5HHo_DGviy0796_d-PdF1yk89JiPpJ-w-yJUX_a1_EQkuPd5YnuxXa1Nn_cRkXkxvS2RQ0tJ0DiGrzHAY8zlMBh74Oc1OsIMS_So5v8l_lpO-LAHkTwFBsI4E/s320/spring31.png" />
</a>
</figure>
<figcaption>Res1.1. - Netbeans Maven Proje Yapısı Görünümü</figcaption>
</div>
<br />
<div style="text-align: Justify;">
<h1>Adım 2 :</h1>
<h2>Apache Tiles için gerekli dependency ekleyelim (pom.xml)</h2>
</div>
<br />
<pre class="brush: xml">
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.mycompany</groupId>
<artifactId>MavenSpring</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>MavenSpring</name>
<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<jstl.version>1.2</jstl.version>
<javax.servlet.version>3.0.1</javax.servlet.version>
</properties>
<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
<!-- spring-context which provides core functionality -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-aop module provides an AOP Alliance-compliant aspect-oriented
programming implementation allowing you to define -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-webmvc module (also known as the Web-Servlet module) contains
Spring’s model-view-controller (MVC) and REST Web Services implementation
for web applications -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-web module provides basic web-oriented integration features
such as multipart file upload functionality and the initialization of the
IoC container using Servlet listeners and a web-oriented application context -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${javax.servlet.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
<!--Apache Tiles-->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-extras</artifactId>
<version>3.0.5</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.6</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<outputDirectory>${endorsed.dir}</outputDirectory>
<silent>true</silent>
<artifactItems>
<artifactItem>
<groupId>javax</groupId>
<artifactId>javaee-endorsed-api</artifactId>
<version>7.0</version>
<type>jar</type>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 3 :</h1>
<h2>tiles.xml</h2>
</div>
<br />
<pre class="brush: xml">
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="defaultTemplate" template="/WEB-INF/jsp/template/template.jsp">
<put-attribute name="header" value="/WEB-INF/jsp/template/header.jsp" />
<put-attribute name="menu" value="/WEB-INF/jsp/template/menu.jsp" />
<put-attribute name="body" value="/WEB-INF/jsp/template/body.jsp" />
<put-attribute name="footer" value="/WEB-INF/jsp/template/footer.jsp" />
</definition>
</tiles-definitions>
</pre>
<br />
<br />
<div style="text-align: Justify;">
<h1>Adım 4 :</h1>
<h2>Config.java</h2>
</div>
<br />
<pre class="brush: java;">
package com.mycompany.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.JstlView;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
import org.springframework.web.servlet.view.tiles3.TilesConfigurer;
import org.springframework.web.servlet.view.tiles3.TilesView;
/**
*
* @author gurkan
*/
@Configuration
@ComponentScan("com.mycompany")
@EnableWebMvc
public class Config extends WebMvcConfigurerAdapter{
@Bean
public UrlBasedViewResolver viewResolver(){
UrlBasedViewResolver resolver = new UrlBasedViewResolver();
resolver.setPrefix("/WEB-INF/jsp/view/");
resolver.setSuffix(".jsp");
resolver.setViewClass(JstlView.class);
resolver.setOrder(0);
return resolver;
}
@Bean
public UrlBasedViewResolver xmlViewResolver(){
UrlBasedViewResolver resolver = new UrlBasedViewResolver();
resolver.setViewClass(TilesView.class);
resolver.setOrder(1);
return resolver;
}
@Bean
public TilesConfigurer tilesConfigurer() {
TilesConfigurer tilesConfigurer = new TilesConfigurer();
tilesConfigurer.setDefinitions(new String[] { "/WEB-INF/tiles.xml" });
tilesConfigurer.setCheckRefresh(true);
return tilesConfigurer;
}
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 5 :</h1>
<h2>WebInitializer.java</h2>
</div>
<br />
<pre class="brush: java;">
package com.mycompany.config;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration.Dynamic;
import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;
/**
*
* @author gurkan
*/
public class WebInitializer implements WebApplicationInitializer{
@Override
public void onStartup(ServletContext sc) throws ServletException {
AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext();
ctx.register(Config.class);
ctx.setServletContext(sc);
Dynamic servlet = sc.addServlet("dispatcher", new DispatcherServlet(ctx));
servlet.addMapping("/");
}
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 6 :</h1>
<h2>HelloController.java</h2>
</div>
<br />
<pre class="brush: java;">
package com.mycompany.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
/**
*
* @author gurkan
*/
@Controller
public class HelloController {
@RequestMapping(value = "/" , method = RequestMethod.GET)
public String index(ModelMap map) {
map.put("hello", "Hello Spring MVC with Tiles");
return "index";
}
@RequestMapping(value = "/page1", method = RequestMethod.GET)
public String page1() {
return "page1";
}
@RequestMapping(value = "/page2", method = RequestMethod.GET)
public String page2(ModelMap model) {
return "page2";
}
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 7 :</h1>
<h2>template.jsp</h2>
</div>
<br />
<pre class="brush: html;">
<%--
Document : template
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div >
<div style="background-color: burlywood;">
<div >
<tiles:insertAttribute name="header" />
</div>
</div>
<div >
<div style="background-color: coral;">
<tiles:insertAttribute name="menu" />
</div>
<div style="background-color: antiquewhite;">
<tiles:insertAttribute name="body" />
</div>
</div>
<div style="background-color: chartreuse;">
<div >
<tiles:insertAttribute name="footer" />
</div>
</div>
</div>
</body>
</html>
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 8 :</h1>
<h2>body.jsp</h2>
</div>
<br />
<pre class="brush: html;">
<%--
Document : body
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Default Body</h1>
</body>
</html>
</pre>
<br />
<div style="text-align: Justify;">
<h2>menu.jsp</h2>
</div>
<br />
<pre class="brush: html;">
<%--
Document : menu
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>List</h1>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="${cp}/">AnaSayfa</a></li>
<li role="presentation"><a href="${cp}/page1">Page1</a></li>
<li role="presentation"><a href="${cp}/page2">Page2</a></li>
</ul>
</body>
</html>
</pre>
<h3>Not: footer, header gibi elementleri çoğaltabilirsiniz.</h3>
<br />
<div style="text-align: Justify;">
<h1>Adım 9 :</h1>
<h2>Oluşturulan template' i kullanmak için </h2>
<h2>index.jsp</h2>
</div>
<br />
<pre class="brush: html;">
<%--
Document : index
Author : gurkan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set>
<!DOCTYPE html>
<tiles:insertDefinition name="defaultTemplate" >
<tiles:putAttribute name="body" >
<h1>Hello Body!</h1>
<h2>${hello}</h2>
</tiles:putAttribute>
</tiles:insertDefinition>
</pre>
<br />
<div style="text-align: Justify;">
<h1>Adım 10 :</h1>
<h2>Projeyi Build ve Run edelim.</h2>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhszlQPJB7uo_0hQiwmHwtANMPca78gA3iue42x80TM-8Eq4R3vL9QLUB6rCgO3hKrNvPEnR6EAIpZIv0jmzSZ2sXll8uBJOm3qaTkaGAeeUynq-E8-UjYpA1xeTzJ9ewe4cTwVemiFM/s1600/spring32.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Apache Tiles Spring" title="MVC Apache Tiles anasayfa görüntüsü" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhszlQPJB7uo_0hQiwmHwtANMPca78gA3iue42x80TM-8Eq4R3vL9QLUB6rCgO3hKrNvPEnR6EAIpZIv0jmzSZ2sXll8uBJOm3qaTkaGAeeUynq-E8-UjYpA1xeTzJ9ewe4cTwVemiFM/s320/spring32.png" /></a>
<figcaption> (a) </figcaption>
</div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwtALqlF_b62QfrezALKPsCDlqnK_LrsbHMQ6AdIprk1qy0-9n6wBdBKUmV6U_6KPDdvHOnYQKqYfQuKUUvczZYeNe92NetbzQLtIQFLAGrcCqnWTyQIFx-MUqmSCzKH52yKAf-VP25k/s1600/spring33.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Apache Tiles Spring b" title="MVC Apache Tiles page1 görüntüsü" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwtALqlF_b62QfrezALKPsCDlqnK_LrsbHMQ6AdIprk1qy0-9n6wBdBKUmV6U_6KPDdvHOnYQKqYfQuKUUvczZYeNe92NetbzQLtIQFLAGrcCqnWTyQIFx-MUqmSCzKH52yKAf-VP25k/s320/spring33.png" /></a>
<figcaption> (b) </figcaption>
</div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-V9ntM2cdMRUaVpgkhjeGBHv8WS8Pn9AtHTU9UlbK0hpmzZRxYVS0ESACiE995rnueptFUjGF-fpdjMQGO-SVtbuiOOaJ4QbDBGdfOTo2gX54Rs_j4Xbsf1fuOWY4AIVL_0S2a42W3nc/s1600/spring34.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Apache Tiles Spring c" title="MVC Apache Tiles page2 görüntüsü" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-V9ntM2cdMRUaVpgkhjeGBHv8WS8Pn9AtHTU9UlbK0hpmzZRxYVS0ESACiE995rnueptFUjGF-fpdjMQGO-SVtbuiOOaJ4QbDBGdfOTo2gX54Rs_j4Xbsf1fuOWY4AIVL_0S2a42W3nc/s320/spring34.png" /></a>
<figcaption> (c) </figcaption>
<figcaption>Res10.1. - a ) Anasayfa Ekran Görüntüsü
<br /> b ) page1.jsp Ekran Görüntüsü
<br /> c ) page2.jsp Ekran Görüntüsü
</figcaption>
</figure>
</div>
<br />
<br />
<div style="text-align:Justify;">
Spring MVC 4 Maven + AngularJS + Bootstrap Entegrasyonu İçin <a href="https://gurkanyesilyurt.blogspot.com.tr/2015/10/spring-mvc-4-maven-angularjs-bootstrap.html">Buradan</a> Geçebilirsiniz.
</div>
<br />
<h2>Bitir</h2>
<br />Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-47293294745516287852015-10-12T13:47:00.002+03:002016-02-27T20:27:27.985+02:00Spring MVC 4 Annotation Hello World Uygulaması - 2<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" alt="annotation spring" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChSm0X1mxucSI_6ZeGbmSLUQocOQiCtQnwQY9SS6xR6G3gmqNCqriVHmDE-rAJDqgJfgr4xTPsb7xauoaGpO-cZNDZ30stHqby402X3l5QUf-8WGPh6PIH0p0mohpo8mnvgGOMmz7MR4/s144-Ic42/spring_global.png" width="200" />
</div>
<div id="main-cont" style="text-align:Justify; float: right; overflow: hidden; width: 370px; word-wrap: break-word;">
Spring MVC ile XML kullanmadan Hello World Uygulaması Gerçekleştirelim.<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align:Justify;">
<h1>Adım 1: </h1>
<h2>Netbeans ile Maven Projesi Oluşturalım. Gerekli Spring kütüphanelerini ekleyelim. Nasıl oluşturulur. <a href="https://gurkanyesilyurt.blogspot.com.tr/2015/10/spring-mvc-4-maven-projesi.html?zx=ed4d99cd63468cdf">Bakınız</a></h2>
</div>
<div style="text-align:Justify;">
<h1>Adım 2: </h1>
Web Pages klasöründe bulunan index.html sayfasını silelim.<br />
Web Pages' e sağ tıklayalım WEB-INF adında yeni klasör (Folder) oluşturalım.
<h2>Proje Yapısını Aşağıdaki Gibi Düzenleyelim. Gerekli Java Class' larını Ekleyelim.</h2>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTiPcmCLdhjrZ3wBUxChWNX5iW74GuzhwV545WeCC4C_SDqHCBzG49Ss_pA7eN4UzR4uMsFsr7okQFtVtgKDVthLCMiVhKKPtzzZwd67c3dDx0M1Wor7oRZA637c4EvBZK45FawsQEG1w/s1600/spring21.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maven Proje" title="Maven Project Structure" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTiPcmCLdhjrZ3wBUxChWNX5iW74GuzhwV545WeCC4C_SDqHCBzG49Ss_pA7eN4UzR4uMsFsr7okQFtVtgKDVthLCMiVhKKPtzzZwd67c3dDx0M1Wor7oRZA637c4EvBZK45FawsQEG1w/s320/spring21.png" />
</a>
<figcaption>Res2.1. - Maven Proje Yapısı</figcaption>
</figure>
</div>
<br />
<div style="text-align:Justify;">
<h1>Adım 3: </h1>
<h2>Config.java</h2>
</div>
<pre class="brush: java">
package com.mycompany.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.JstlView;
import org.springframework.web.servlet.view.UrlBasedViewResolver;
/**
*
* @author gurkan
*/
@Configuration
@ComponentScan("com.mycompany")
@EnableWebMvc
public class Config extends WebMvcConfigurerAdapter{
@Bean
public UrlBasedViewResolver viewResolver(){
UrlBasedViewResolver resolver = new UrlBasedViewResolver();
resolver.setPrefix("/WEB-INF/jsp/");
resolver.setSuffix(".jsp");
resolver.setViewClass(JstlView.class);
return resolver;
}
}
</pre>
<br />
<div style="text-align:Justify;">
<h1>Adım 4: </h1>
<h2>WebInitializer.java</h2>
</div>
<br />
<pre class="brush: java">
package com.mycompany.config;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration.Dynamic;
import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;
/**
*
* @author gurkan
*/
public class WebInitializer implements WebApplicationInitializer{
@Override
public void onStartup(ServletContext sc) throws ServletException {
AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext();
ctx.register(Config.class);
ctx.setServletContext(sc);
Dynamic servlet = sc.addServlet("dispatcher", new DispatcherServlet(ctx));
servlet.addMapping("/");
}
}
</pre>
<br/>
<div style="text-align:Justify;">
<h1>Adım 5: </h1>
<h2>HelloController.java</h2>
</div>
<br />
<pre class="brush: java">
package com.mycompany.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
/**
*
* @author gurkan
*/
@Controller
public class HelloController {
@RequestMapping(value = "/" , method = RequestMethod.GET)
public String index(ModelMap map) {
map.put("hello", "Hello Spring MVC");
return "index";
}
}
</pre>
<br/>
<div style="text-align:Justify;">
<h1>Adım 6: </h1>
<h2>index.jsp</h2>
</div>
<br />
<pre class="brush:java">
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>${hello}</h1>
</body>
</html>
</pre>
<br/>
<div style="text-align:Justify;">
<h1>Adım 7: </h1>
<h2>Projeyi Build ve Run edelim. </h2>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_G9gJGRLC-OYcqa6Sc4_Akn_XzcTTFDNhKehkuUABGwDbsmWZiA1OqeplrBRz2OwhxCcTDbWG2D40pSMJtOMOyYHKkQNzA7_lqy0c6y4QLf-LJZtzP9w-9PlH49JzInjqpMgQFliy_I/s1600/spring22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maven Arayüz Spring" title="Hello World Spring Arayüzü" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_G9gJGRLC-OYcqa6Sc4_Akn_XzcTTFDNhKehkuUABGwDbsmWZiA1OqeplrBRz2OwhxCcTDbWG2D40pSMJtOMOyYHKkQNzA7_lqy0c6y4QLf-LJZtzP9w-9PlH49JzInjqpMgQFliy_I/s320/spring22.png" /></a>
<figcaption>Res7.1. - Uygulama Ekran Görüntüsü</figcaption>
</figure>
</div>
<br />
<br />
<div style="text-align:Justify;">
Spring MVC 4 Apache Tiles Entegrasyonu İçin <a href="https://gurkanyesilyurt.blogspot.com.tr/2015/10/spring-mvc-4-apache-tiles-entegrasyoun.html">Buradan</a> Geçebilirsiniz.
</div>
<h2>Bitir.</h2>
<br />Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-67512178937424025532015-10-12T11:43:00.001+03:002016-02-27T20:27:45.095+02:00Spring MVC 4 Maven Projesi - 1<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" alt="spring maven" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChSm0X1mxucSI_6ZeGbmSLUQocOQiCtQnwQY9SS6xR6G3gmqNCqriVHmDE-rAJDqgJfgr4xTPsb7xauoaGpO-cZNDZ30stHqby402X3l5QUf-8WGPh6PIH0p0mohpo8mnvgGOMmz7MR4/s144-Ic42/spring_global.png" width="200" />
</div>
<div id="main-cont" style="float: right; overflow: hidden; text-align: Justify; width: 370px; word-wrap: break-word;">
Spring MVC 4 Netbeans IDE ile Maven Projesi Oluşturma<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align: Justify;">
<h2>
Kullanılan Teknolojiler</h2>
<ul>
<li>Netbeans IDE 8.0.2</li>
<li>Maven 4.0.0</li>
<li>Spring 4.1.6.RELEASE</li>
<li>Glashfish 4.1</li>
<li>Java EE 7</li>
</ul>
<br />
Netbeans' de Maven alt yapısı hazır olarak gelmektedir.
<h1> Adım 1: </h1>
<h2>Aşağıdaki gibi projeyi oluşturalım.</h2>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvvmvouTDC_dGgsISydTaUjZ_9aVEl2nf5wgNJkY9ORuonLhKIkfFGbJojOLTPPL3ftq5iHZlnr95qISFl_CUbgEtnnY6XUoJe-Yd5TWo6XU6MJm1Lt3e6DzNiaS1AgAryoTpS-0_TGU/s1600/spring11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvvmvouTDC_dGgsISydTaUjZ_9aVEl2nf5wgNJkY9ORuonLhKIkfFGbJojOLTPPL3ftq5iHZlnr95qISFl_CUbgEtnnY6XUoJe-Yd5TWo6XU6MJm1Lt3e6DzNiaS1AgAryoTpS-0_TGU/s320/spring11.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzv88zBM3__SIGywzNoHCpf814UizsEGsNAH2FH6ImmxWWD4dHILBjdqnPzx8VC2NNs8lslNGtneUb2DLofhFAKYnJ11Ge_JCNQvsuhkNhVeioP3mrod6lfHoU3L8xBreP9ab_M8BYDCE/s1600/spring12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzv88zBM3__SIGywzNoHCpf814UizsEGsNAH2FH6ImmxWWD4dHILBjdqnPzx8VC2NNs8lslNGtneUb2DLofhFAKYnJ11Ge_JCNQvsuhkNhVeioP3mrod6lfHoU3L8xBreP9ab_M8BYDCE/s320/spring12.png" /></a></div>
<br />
<div style="text-align: Justify;">
<h1> Adım 2: </h1>
<h2>Oluşan proje yapısında <i>Project Files</i> altında pom.xml açalım. Spring için gerekli dependency' leri ekleyelim.</h2>
</div>
<br />
<pre class="brush: xml">
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.mycompany</groupId>
<artifactId>MavenSpring</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>MavenSpring</name>
<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
<!-- spring-context which provides core functionality -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-aop module provides an AOP Alliance-compliant aspect-oriented
programming implementation allowing you to define -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-webmvc module (also known as the Web-Servlet module) contains
Spring’s model-view-controller (MVC) and REST Web Services implementation
for web applications -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<!-- The spring-web module provides basic web-oriented integration features
such as multipart file upload functionality and the initialization of the
IoC container using Servlet listeners and a web-oriented application context -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${javax.servlet.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.6</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<outputDirectory>${endorsed.dir}</outputDirectory>
<silent>true</silent>
<artifactItems>
<artifactItem>
<groupId>javax</groupId>
<artifactId>javaee-endorsed-api</artifactId>
<version>7.0</version>
<type>jar</type>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
</pre>
<br />
<div style="text-align: Justify;">
<h1> Adım 3: </h1>
<h2>Gerekli kütüphanelerin indirilmesi için projeyi <i>Build</i> edelim.</h2>
<br />
Spring MVC 4 Annotation Hello World Uygulaması İçin <a href="https://gurkanyesilyurt.blogspot.com.tr/2015/10/spring-mvc-4-annotation-hello-world.html">Buradan</a> Geçebilirsiniz.
</div>
<br />
<h2>Bitir</h2>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-50359019946230348402015-10-06T23:27:00.001+03:002016-02-27T20:28:18.786+02:00Örnek Kod Siteye Nasıl Eklenir - Blogger<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" alt="Syntax Highlighter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXF-6a6iw9iVcN_TdDwF8BBHURqImhILSVzVDDgmpWQwP9kUGOVCZyDprkXWTPy3NeWrFteWXKYfbub-P68s8644AuDj4Eq8_mmqo3NCyv3-5WrhamGxMqpfPIY2LJqdfQ3Zx4qxmYIg/s144-Ic42/blogger_global.png" width="200" />
</div>
<div id="main-cont" style="float: right; overflow: hidden; text-align: Justify; width: 370px; word-wrap: break-word;">
Geliştirilen uygulamanın örnek kodları web sayfasında düzenli bir şekilde nasıl paylaşılır. <b>Syntax Highlighter</b><br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align: Justify;">
Geliştirdiğiniz uygulamaların kod parçalarını sitenizde göstermek isteyebilirsiniz. Bunun için bir vurgulayıcı kullanmalısınız.
<br />
Blogger için bu işlem nasıl yapılır bakalım.
<br />
SyntaxHighlighter 3.0.83 projesini kullanacağız. <a href="http://alexgorbatchev.com/SyntaxHighlighter/" target="_blank">Proje Hakkında bkz.</a><br />
<br />
<h1>
Adım 1 :</h1>
<h2>
Temel CSS ve JS Dosyalarını Belirleyin</h2>
<br />
Blog panelinden Şablon-->"HTML'yi Düzenle"yi tıklayın. Açılan şablon kodlarında
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #007700;"><head></head></span>
</pre>
</div>
etiketlerinin arasına aşağıdaki kodları yapıştırın. Aşağıdaki kodlara dikkat ederseniz shBrushJava.min.js, shBrushXml.min.js gibi dosyalar göreceksiniz. Bu kısma hangi dilleri kullanacaksanız onları ekleyin.<br />
Desteklenen tüm dillerin CDN' lerine <a href="http://cdnjs.com/libraries/SyntaxHighlighter" target="_blank">Buradan</a> ulaşabilirsiniz. Örneğin C# dilinde paylaşım yapacaksanız;<br />
<br />
<pre class="brush:js"><script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js' type='text/javascript'/>
</pre>
<br />
kodunu ekleyin.<br />
<br />
Eklenecek Kod
</div>
<pre class="brush:js"><script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js' type='text/javascript'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 2 :</h1>
<h2>
Yeni Yayın--> HTML kısmına gelin. Kod yazmak istediğiniz yere;</h2>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #007700;"><pre</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"brush:js"</span><span style="color: #007700;">></span>
...Kodlarınız Buraya
<span style="color: #007700;"></pre></span>
</pre>
</div>
<br />
yazın. class="brush: js" javascript kodu için. Siz hangi dili istiyorsanız onu yazın. Örneğin; java için "brush:java"
</div>
<br />
<div style="text-align: Justify;">
<h1>
Adım 3 :</h1>
<h2>
Kodlarınızı yapıştırdıktan sonra bir sorunla karşılaşıyorsanız temiz kod programı kullanın.</h2>
<br />
Kodunuzu Blogger' a eklemeden önce aşağıdaki siteye yapıştırın. Kodunuzun yeni halini Blogger' a ekleyin.<br />
<a href="http://www.dan.co.jp/cases/javascript/encode_entities.html" target="_blank">Temiz Kod İçin Tıkla</a>
<br />
İşlem bu kadar.
</div>
<h3>
Alternatif olarak online Syntax Highlighter programlarını da kullanabilirsiniz.</h3>
<ul>
<li><a href="http://markup.su/highlighter/" target="_blank">Markup.su</a></li>
<li><a href="http://hilite.me/" target="_blank">hilite.me</a></li>
</ul>
<br />
<h2>
Bitir</h2>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-33366740371269821942015-10-06T16:05:00.000+03:002016-02-27T20:28:38.615+02:00Android ile REST Erişimi ve Konum Bulma Uygulaması<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" title="Android Rest Uygulaması" alt="rest android att" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsh5ZiLx6elAAqaon3sRQXvAvRfSoS6EsSuI9A2lIs6OirH329jtnkYS-sgBb4pRXk17emRvizVpb8Zi81BrM4qE387LX7X_zsglNaF5NV4mmwbwDBPDbX9_neH4VUXOJ3RTleVa0J8kk/s144-Ic42/android_global.png" width="200" />
</div>
<div id="main-cont" style="float: right; overflow: hidden; text-align: Justify; width: 370px; word-wrap: break-word;">
Android uygulamalarında konuma göre (GPS, NETWORK) hava durumu nasıl çekilir.<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<br />
<div style="text-align: Justify;">
Uygulama çalıştırıldığında ilk önce konum bilgisi veren hizmetlerin (GPS vb.) kullanılabilir olup olmadığı kontrol ediliyor. Kullanılabilir ise konum bilgisi hava durumu servisine postalanıyor ve geri dönen JSON veri işlenerek ekrana bastırılıyor. Eğer konum hizmetleri kapalı ise uyarı veriyor ve sizden konum ayar sayfasına gitmenizi istiyor.
</div>
<br />
<div style="text-align: Justify;">
Hava durumunu coğrafi koordinatlara göre çektik.<br />
Daha fazlası için <a href="http://openweathermap.org/current#geo">openweathermap.org</a><br />
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<figure>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjCswe0IyyWucEPVQpc6Dvw6_02h6dkWo_OWd1NEknfwexUEoeZ99ql7gKtGPCA9Gy9TEC3KWMALJfhwFh7qv3r9hpi4kVd1PFqA5F9dW4PwRvmZLrXrKqioPKVs6h9K_u67bAvMx17g/s1600/android1ana.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img alt="android hava" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjCswe0IyyWucEPVQpc6Dvw6_02h6dkWo_OWd1NEknfwexUEoeZ99ql7gKtGPCA9Gy9TEC3KWMALJfhwFh7qv3r9hpi4kVd1PFqA5F9dW4PwRvmZLrXrKqioPKVs6h9K_u67bAvMx17g/s320/android1ana.png" title="android hava durumu ekran görüntüsü" width="255" />
</a>
<figcaption>Res1. - Uygulamanın ekran görüntüsü</figcaption>
</figure>
</div>
<br />
<div style="text-align: Justify;">
<h1>
Adım 1 :</h1>
<h2>
Gerekli İzinleri Verin</h2>
</div>
<pre class="brush: xml"><?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.gurkan0791.weatherlikeapp" >
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
</pre>
<br />
<div style="text-align: Justify">
<h1>Adım 2 :</h1>
<h2>Arayüz </h2>
</div>
<br />
<pre class="brush: xml">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
android:background="@drawable/background_image"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/textViewWeather"
android:background="#ffa72a"
android:layout_alignTop="@+id/textView3"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="@+id/myImageView"
android:layout_above="@+id/textViewCountry"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Country"
android:id="@+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="77dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="City"
android:id="@+id/textView2"
android:layout_marginTop="30dp"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Weather"
android:id="@+id/textView3"
android:layout_below="@+id/textView2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="29dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/textViewCountry"
android:layout_alignTop="@+id/textView"
android:layout_alignLeft="@+id/textViewWeather"
android:layout_alignStart="@+id/textViewWeather"
android:background="#ffa72a" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/textViewCity"
android:layout_alignTop="@+id/textView2"
android:layout_alignLeft="@+id/textViewWeather"
android:layout_alignStart="@+id/textViewWeather"
android:background="#ffa72a" />
</RelativeLayout>
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 3 :</h1>
<h2>
Rest Service' den Konum Bilgisine Göre Verileri Çekin. Parse İşlemi Yapın ve Arayüzde Gösterin.</h2>
</div>
<pre class="brush: java">package com.example.gurkan0791.weatherlikeapp;
import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
//json veri sabitleri
private static final String MAIN = "main";
private static final String TEMP = "temp";
private static final String SYS ="sys";
private static final String COUNTRY ="country";
private static final String CITY ="name";
private TextView myTextView;
private TextView myTextViewCountry;
private TextView getMyTextViewCity;
private ImageView myImageView;
private static GetWeather getWeather = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myTextView = (TextView) findViewById(R.id.textViewWeather);
myTextViewCountry = (TextView) findViewById(R.id.textViewCountry);
getMyTextViewCity = (TextView) findViewById(R.id.textViewCity);
myImageView = (ImageView) findViewById(R.id.myImageView);
//async metodu çalıştır
getWeather = new GetWeather();
getWeather.execute();
}
@Override
protected void onStart() {
super.onStart();
if (getWeather == null) {
getWeather = new GetWeather();
getWeather.execute();
}
}
public class GetWeather extends AsyncTask<Void,Void,List<Object>> {
//süren işlemi göster
private ProgressDialog loading;
//json veri tiplerini belirle
private JSONObject jsonReader ;
private JSONObject main ;
private JSONArray weather;
private JSONObject sys;
//json istenen verileri array at
private List<Object> weatherList;
//konum (GPS, NETWORK) servisi
private GPSTracker gpsTracker;
@Override
protected void onPreExecute() {
super.onPreExecute();
gpsTracker = new GPSTracker(MainActivity.this);
weatherList = new ArrayList<Object>();
loading = ProgressDialog.show(MainActivity.this,"Please Wait...",null,true,true);
}
@Override
protected List<Object> doInBackground(Void... params) {
//tamponlu okuyucu
BufferedReader bufferedReader = null;
double latitude = 0;
double longitude = 0;
//konum bilgisi alınabiliyor mu?
if(gpsTracker.canGetLocation()) {
//enlem boylam bilgisini çek
latitude = gpsTracker.getLatitude();
longitude = gpsTracker.getLongitude();
try {
//json servisi için hedef url
URL url = new URL("http://api.openweathermap.org/data/2.5/weather?lat="+latitude+"&lon="+longitude+"&units=metric");
//URL url = new URL("http://api.openweathermap.org/data/2.5/weather?q=Antalya&units=metric");
//java .net sınıfına ait http sağlayıcı
HttpURLConnection con = (HttpURLConnection) url.openConnection();
StringBuilder sb = new StringBuilder();
bufferedReader = new BufferedReader(new InputStreamReader(con.getInputStream()));
String json;
while((json = bufferedReader.readLine())!= null){
sb.append(json+"\n");
}
//okunan veriyi al
jsonReader = new JSONObject(sb.toString().trim());
//verideki main anahtarı bilgilerini tut ve temp değerini listeye ekle
main = jsonReader.getJSONObject(MAIN);
weatherList.add(main.getString(TEMP));
//weather anahtarının gösterdiği diziyi al
weather = jsonReader.optJSONArray("weather");
//dizinin ilk elemanını çek
JSONObject jsonObject = weather.getJSONObject(0);
//hava durumunu resim olarak göstermek için weather.icon bilgisini çek ve url' ye ata
//url' ye ulaş ve bitmap olarak listeye ekle
URL url1 = new URL("http://openweathermap.org/img/w/"+jsonObject.getString("icon")+".png");
Bitmap bmp = BitmapFactory.decodeStream(url1.openConnection().getInputStream());
weatherList.add(bmp);
//aynı şekilde ülke kodunu çekmek için
sys = jsonReader.getJSONObject(SYS);
weatherList.add(sys.getString(COUNTRY)); //get(2)
//şehir adını çekmek için
weatherList.add(jsonReader.getString(CITY)); // GET(3)
// diziyi onPostExecute metoduna gönder
return weatherList;
}catch (IOException e) {
e.printStackTrace();
return null;
}
catch (JSONException e) {
e.printStackTrace();
return null;
}
}else{
/*
can't get location
GPS or Network is not enabled
Ask user to enable GPS/ network in settings
alınmıyorsa onPostExecute null döndür
*/
return null;
}
}
@Override
protected void onPostExecute(List<Object> s) {
super.onPostExecute(s);
loading.dismiss();
//konum bilgisi alınamadıysa android setting activity' sine gönder
if (s == null) {
getWeather = null;
gpsTracker.showSettingsAlert();
}else {
//konum bilgisi alındıysa dizideki verileri context' e bas
myTextView.setText((CharSequence) s.get(0).toString() + " \u00b0"); // ° Derece sembolü
myTextViewCountry.setText((CharSequence) s.get(2));
getMyTextViewCity.setText((CharSequence) s.get(3));
myImageView.setImageBitmap((Bitmap) s.get(1));
//konum bilgisini toast a basmak isterseniz
if (gpsTracker.canGetLocation()) {
double latitude = gpsTracker.getLatitude();
double longitude = gpsTracker.getLongitude();
Toast.makeText(getApplicationContext(), "Your Location is - \nLat: " + latitude + "\nLong: " + longitude, Toast.LENGTH_LONG).show();
} else {
gpsTracker.showSettingsAlert();
}
//myWebView.loadUrl("http://openweathermap.org/img/w/03d.png");
}
gpsTracker.stopUsingGPS();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
</pre>
<br />
<div style="text-align: Justify;">
<h1>
Adım 4 :</h1>
<h2>
Konum Belirlemek İçin Gerekli Servisi Yazın.</h2>
</div>
<pre class="brush: java">package com.example.gurkan0791.weatherlikeapp;
/**
* Created by gurkan0791 on 05.10.2012.
* bu bir copy-paste sınıftır.
*/
import android.app.AlertDialog;
import android.app.Service;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;
import android.os.Bundle;
import android.os.IBinder;
import android.provider.Settings;
import android.util.Log;
public class GPSTracker extends Service implements LocationListener {
private final Context mContext;
// flag for GPS status
boolean isGPSEnabled = false;
// flag for network status
boolean isNetworkEnabled = false;
// flag for GPS status
boolean canGetLocation = false;
Location location; // location
double latitude; // latitude
double longitude; // longitude
// The minimum distance to change Updates in meters
private static final long MIN_DISTANCE_CHANGE_FOR_UPDATES = 10; // 10 meters
// The minimum time between updates in milliseconds
private static final long MIN_TIME_BW_UPDATES = 1000 * 60 * 1; // 1 minute
// Declaring a Location Manager
protected LocationManager locationManager;
public GPSTracker(Context context) {
this.mContext = context;
getLocation();
}
public Location getLocation() {
try {
locationManager = (LocationManager) mContext
.getSystemService(LOCATION_SERVICE);
// getting GPS status
isGPSEnabled = locationManager
.isProviderEnabled(LocationManager.GPS_PROVIDER);
// getting network status
isNetworkEnabled = locationManager
.isProviderEnabled(LocationManager.NETWORK_PROVIDER);
if (!isGPSEnabled && !isNetworkEnabled) {
// no network provider is enabled
} else {
//ilk önce network metoduyla konum alıyor.
//ama GPS açıksa network yerine gps yükleniyor.
this.canGetLocation = true;
// First get location from Network Provider
if (isNetworkEnabled) {
locationManager.requestLocationUpdates(
LocationManager.NETWORK_PROVIDER,
MIN_TIME_BW_UPDATES,
MIN_DISTANCE_CHANGE_FOR_UPDATES, this);
Log.d("Network", "Network");
if (locationManager != null) {
location = locationManager
.getLastKnownLocation(LocationManager.NETWORK_PROVIDER);
if (location != null) {
latitude = location.getLatitude();
longitude = location.getLongitude();
}
}
}
// if GPS Enabled get lat/long using GPS Services
if (isGPSEnabled) {
if (location == null) {
locationManager.requestLocationUpdates(
LocationManager.GPS_PROVIDER,
MIN_TIME_BW_UPDATES,
MIN_DISTANCE_CHANGE_FOR_UPDATES, this);
Log.d("GPS Enabled", "GPS Enabled");
if (locationManager != null) {
location = locationManager
.getLastKnownLocation(LocationManager.GPS_PROVIDER);
if (location != null) {
latitude = location.getLatitude();
longitude = location.getLongitude();
}
}
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
return location;
}
/**
* Stop using GPS listener
* Calling this function will stop using GPS in your app
* */
public void stopUsingGPS(){
if(locationManager != null){
try {
locationManager.removeUpdates(GPSTracker.this);
}catch (SecurityException e) {
e.printStackTrace();
}
}
}
/**
* Function to get latitude
* */
public double getLatitude(){
if(location != null){
latitude = location.getLatitude();
}
// return latitude
return latitude;
}
/**
* Function to get longitude
* */
public double getLongitude(){
if(location != null){
longitude = location.getLongitude();
}
// return longitude
return longitude;
}
/**
* Function to check GPS/wifi enabled
* @return boolean
* */
public boolean canGetLocation() {
return this.canGetLocation;
}
/**
* Function to show settings alert dialog
* On pressing Settings button will lauch Settings Options
* */
public void showSettingsAlert(){
AlertDialog.Builder alertDialog = new AlertDialog.Builder(mContext);
// Setting Dialog Title
alertDialog.setTitle("GPS is settings");
// Setting Dialog Message
alertDialog.setMessage("GPS is not enabled. Do you want to go to settings menu?");
// On pressing Settings button
alertDialog.setPositiveButton("Settings", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,int which) {
Intent intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
mContext.startActivity(intent);
}
});
// on pressing cancel button
alertDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
}
});
// Showing Alert Message
alertDialog.show();
}
@Override
public void onLocationChanged(Location location) {
}
@Override
public void onProviderDisabled(String provider) {
}
@Override
public void onProviderEnabled(String provider) {
}
@Override
public void onStatusChanged(String provider, int status, Bundle extras) {
}
@Override
public IBinder onBind(Intent arg0) {
return null;
}
}
</pre>
<br />
<h2>
Bitir</h2>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-29481611998503703112015-10-04T14:37:00.000+03:002016-02-27T20:28:53.833+02:00AngularJS ile Basit Rest Service Erişimi<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" alt="angular rest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOn4PV24anqGqeVnC05nJ1x-OO_1fCB-UjOYhuByKvc6jRfjKvvXpE_CFqXGcAVw7KDe3kmdwKE185tFq-at0ccwfaa-AuA9s7d10g7G0-eyy_ILzR7VLKK4B4Yi-xvgzuo5DvJzJ3V1U/s144-Ic42/angularjs_global.png" width="200" />
</div>
<div id="main-cont" style="float: right; overflow: hidden; text-align: Justify; width: 370px; ">
AngularJS kullanarak hava durumu uygulaması nasıl olur.<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
Basit bir hava durumu uygulaması yapalım.
Neler Kullandık ?
<br />
<br />
<ol>
<li>AngularJS</li>
<li>Bootstrap</li>
</ol>
Sonunda girilen şehrin hava durumunu veren basit bir uygulama olacak.<br />
<br />
Uygulamanın çalışır hali için<br />
<br />
<a href="http://plnkr.co/edit/Yq5Vb2?p=preview" target="_blank">plnkr.co</a><br />
<br />
Hava durumunu şehir adına göre çektik.<br />
Daha fazlası için <a href="http://openweathermap.org/current#name" target="_blank">openweathermap</a><br />
<br />
Veriyi aşağıdaki fonksiyonla çekiyoruz.<br />
<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">$scope<span style="color: #333333">.</span><span style="color: #0000CC">sehirBul</span> <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">function</span><span style="color: #333333">(</span>sehir<span style="color: #333333">){</span> <span style="color: #888888">/*ng-click ile çağrılacak fonksiyon*/</span>
$scope<span style="color: #333333">.</span><span style="color: #0000CC">seh</span> <span style="color: #333333">=</span> sehir<span style="color: #333333">;</span>
<span style="color: #888888">//APPID=84bec579f4652ecefedd0e883dcdaa0a openweathermap.org sitesine üye olup sınırlı ücretsiz API KEY alıp URL sonuna ekleyerek kullanabilirsiniz.</span>
$http<span style="color: #333333">.</span><span style="color: #0000CC">get</span><span style="color: #333333">(</span><span style="background-color: #fff0f0">"http://api.openweathermap.org/data/2.5/weather?q="</span><span style="color: #333333">+</span>sehir<span style="color: #333333">+</span><span style="background-color: #fff0f0">"&units=metric&APPID=84bec579f4652ecefedd0e883dcdaa0a"</span><span style="color: #333333">).</span>success<span style="color: #333333">(</span><span style="color: #008800; font-weight: bold">function</span><span style="color: #333333">(</span>data<span style="color: #333333">){</span>
$scope<span style="color: #333333">.</span><span style="color: #0000CC">dat</span> <span style="color: #333333">=</span> data<span style="color: #333333">;</span>
$scope<span style="color: #333333">.</span><span style="color: #0000CC">iconUrl</span> <span style="color: #333333">=</span> <span style="background-color: #fff0f0">'http://openweathermap.org/img/w/'</span><span style="color: #333333">+</span>$scope<span style="color: #333333">.</span><span style="color: #0000CC">dat</span><span style="color: #333333">.</span><span style="color: #0000CC">weather</span><span style="color: #333333">[</span><span style="color: #0000DD; font-weight: bold">0</span><span style="color: #333333">].</span>icon<span style="color: #333333">+</span> <span style="background-color: #fff0f0">'.png'</span><span style="color: #333333">;</span>
<span style="color: #333333">});</span>
<span style="color: #333333">};</span>
</pre></div>
<br />
Fonksiyon başarılı bir şekilde çalıştığında aşağıdaki gibi Json formatında veri elde ediyoruz.<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #333333;">{</span><span style="background-color: #fff0f0;">"coord"</span><span style="color: #333333;">:{</span><span style="background-color: #fff0f0;">"lon"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">139</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"lat"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">35</span><span style="color: #333333;">},</span>
<span style="background-color: #fff0f0;">"sys"</span><span style="color: #333333;">:{</span><span style="background-color: #fff0f0;">"country"</span><span style="color: #333333;">:</span><span style="background-color: #fff0f0;">"JP"</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"sunrise"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">1369769524</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"sunset"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">1369821049</span><span style="color: #333333;">},</span>
<span style="background-color: #fff0f0;">"weather"</span><span style="color: #333333;">:[{</span><span style="background-color: #fff0f0;">"id"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">804</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"main"</span><span style="color: #333333;">:</span><span style="background-color: #fff0f0;">"clouds"</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"description"</span><span style="color: #333333;">:</span><span style="background-color: #fff0f0;">"overcast clouds"</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"icon"</span><span style="color: #333333;">:</span><span style="background-color: #fff0f0;">"04n"</span><span style="color: #333333;">}],</span>
<span style="background-color: #fff0f0;">"main"</span><span style="color: #333333;">:{</span><span style="background-color: #fff0f0;">"temp"</span><span style="color: #333333;">:</span><span style="color: #6600ee; font-weight: bold;">289.5</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"humidity"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">89</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"pressure"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">1013</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"temp_min"</span><span style="color: #333333;">:</span><span style="color: #6600ee; font-weight: bold;">287.04</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"temp_max"</span><span style="color: #333333;">:</span><span style="color: #6600ee; font-weight: bold;">292.04</span><span style="color: #333333;">},</span>
<span style="background-color: #fff0f0;">"wind"</span><span style="color: #333333;">:{</span><span style="background-color: #fff0f0;">"speed"</span><span style="color: #333333;">:</span><span style="color: #6600ee; font-weight: bold;">7.31</span><span style="color: #333333;">,</span><span style="background-color: #fff0f0;">"deg"</span><span style="color: #333333;">:</span><span style="color: #6600ee; font-weight: bold;">187.002</span><span style="color: #333333;">},</span>
<span style="background-color: #fff0f0;">"rain"</span><span style="color: #333333;">:{</span><span style="background-color: #fff0f0;">"3h"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">},</span>
<span style="background-color: #fff0f0;">"clouds"</span><span style="color: #333333;">:{</span><span style="background-color: #fff0f0;">"all"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">92</span><span style="color: #333333;">},</span>
<span style="background-color: #fff0f0;">"dt"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">1369824698</span><span style="color: #333333;">,</span>
<span style="background-color: #fff0f0;">"id"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">1851632</span><span style="color: #333333;">,</span>
<span style="background-color: #fff0f0;">"name"</span><span style="color: #333333;">:</span><span style="background-color: #fff0f0;">"Shuzenji"</span><span style="color: #333333;">,</span>
<span style="background-color: #fff0f0;">"cod"</span><span style="color: #333333;">:</span><span style="color: #0000dd; font-weight: bold;">200</span><span style="color: #333333;">}</span>
</pre>
</div>
<br />
İlk amacımız temp:289.5 değerini çekmek olsun.<br />
<br />
Veri bir ağaç şeklindedir. İlk parantezleri kök kabul edin {} ve her değerin virgül ile ayrıldığını görün.<br />
<br />
<i><b>coord</b>, <b>sys</b>, <b>weather</b>, <b>main</b></i> vb. ağacın aynı seviye anahtarlarıdır. Her birinin kendi içinde verileri var. Örneğin <i>cod: 200</i> dediğimizde <i><b>cod</b></i> anahtarının verisi 200' dür. Ama anahtarların verisi birden fazla da olabilir. Örneğin bizim kullanacağımız <i><b>main</b></i> anahtarının; <b><i>temp</i></b>, <b><i>humidity</i></b>, <b><i>pressure</i></b> gibi verilere başkanlık ettiği görülüyor. Ağaç üzerinde nokta (.) ile ilerleyeceğiz.<br />
<br />
Şimdi <i><b>temp</b></i> değerine ulaşalım. Servis sağlayıcısından gelen Json formatlı veriyi data değişkenine attık. Bu değişkeni ilk parantezler olarak görebiliriz. Ve <span style="color: #3d85c6;">data.main.temp</span> ile değere ulaşırız.<br />
<br />
Veriyi incelediğimizde weather anahtarının diğerlerinden farklı olarak bir diziye başkanlık ettiği görülüyor. Bu nedenle icon değerine ulaşmamız için <span style="color: #3d85c6;">data.weather[0].icon</span> demeliyiz.<br />
<br />
<br />
<h2>Bitir</h2>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-81210689595151704712015-10-03T12:55:00.000+03:002016-02-27T20:38:20.881+02:00Sanal Bellek Oluşturmak - Ubuntu<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" alt="ubuntu" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGM3jLk4z3oQpndd9z2vsmO4u_2ZK-z12KPTAuo0CQ7wWst-9jVC5PPTDdRiVUx5K9r-U6Ncb6GOt5SeydDJNbO4tmIC51oZSIDqErec04dwG02WP2Qksy1umud_WgBuz_160yP0ew4tw/s144-Ic42/ubuntu_global.png" title="ubuntu" width="200" />
</div>
<div id="main-cont" style="float: right; overflow: hidden; text-align: Justify; width: 370px; word-wrap: break-word;">
Ubuntu kullanıcılarının harddisk' i ram olarak nasıl kullandıklarını görelim. Bu işlem swap olarak adlandırılır.<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<div style="text-align: Justify;">
İlk olarak, harddisk' de bu işlem için hafıza ayıralım. (4 GB ram için minimum 2 GB önerilir.)
</div>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #996633;">$ </span>sudo fallocate -l 4G /swapfile
veya
<span style="color: #996633;">$ </span>sudo dd <span style="color: #008800; font-weight: bold;">if</span><span style="color: #333333;">=</span>/dev/zero <span style="color: #996633;">of</span><span style="color: #333333;">=</span>/swapfile <span style="color: #996633;">bs</span><span style="color: #333333;">=</span>1M <span style="color: #996633;">count</span><span style="color: #333333;">=</span>4000
4000+0 records in
4000+0 records out
4194304000 bytes <span style="color: #333333;">(</span>4.2 GB<span style="color: #333333;">)</span> copied, 5.92647 s, 708 MB/s
</pre>
</div>
<br />
<div style="text-align: Justify;">
Dosya içeriğini kullabılabilir yapalım.
</div>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #996633;">$ </span>ls -lh /swapfile
<span style="color: #996633;">$ </span>sudo chmod 600 /swapfile
<span style="color: #996633;">$ </span>sudo mkswap /swapfile
Setting up swapspace version 1, <span style="color: #996633;">size</span> <span style="color: #333333;">=</span> 4095996 KiB
no label, <span style="color: #996633;">UUID</span><span style="color: #333333;">=</span>7d1895e4-7ccf-42c6-979a-51ebddb49e91
</pre>
</div>
<br />
<div style="text-align: Justify;">
Aktif edelim.
</div>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #996633;">$ </span>sudo swapon /swapfile
</pre>
<br /></div>
<br />
<div style="text-align: Justify;">
Takası onaylayalım.
</div>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #996633;">$sudo</span> nano /etc/fstab
add /swapfile none swap sw 0 0
<span style="color: #996633;">$cat</span> /proc/sys/vm/swappiness
60
<span style="color: #996633;">$sudo</span> sysctl vm.swappiness<span style="color: #333333;">=</span>10
<span style="color: #996633;">$sudo</span> nano /etc/sysctl.conf
add vm.swappiness<span style="color: #333333;">=</span>10
cat /proc/sys/vm/vfs_cache_pressure
<span style="color: #996633;">$sudo</span> sysctl vm.vfs_cache_pressure<span style="color: #333333;">=</span>50
<span style="color: #996633;">$sudo</span> nano /etc/sysctl.conf
add vm.vfs_cache_pressure<span style="color: #333333;">=</span>50
<span style="color: #996633;">$ </span>cat /proc/swaps
Filename Type Size Used Priority
/swapspace file 4095996 0 -1
</pre>
</div>
<br />
<div style="text-align: Justify;">
/etc/fstab etkin olması için sistemi yeniden başlatalım.
</div>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #996633;">$ </span>sudo shutdown -r now
</pre>
</div>
<br />
<div style="text-align: Justify;">
İşlem bu kadar.
Super --> System Monitor --> Resources sekmesinde durumu kontrol edebilirsiniz.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-iM5iOZNruW71SXeUnd1IN7y6BiIF1OXRnub7y58MzBOhiyz13EJd0kxRozb_juvrOWcWxgiMknCAP_z_rTYc_dChIp1a9MWuOchi3qG7SV8yepoBtrqZpIOQBBi2CoXvSH_23bRESSU/s1600/swap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" alt="ubuntu swap" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-iM5iOZNruW71SXeUnd1IN7y6BiIF1OXRnub7y58MzBOhiyz13EJd0kxRozb_juvrOWcWxgiMknCAP_z_rTYc_dChIp1a9MWuOchi3qG7SV8yepoBtrqZpIOQBBi2CoXvSH_23bRESSU/s320/swap.png" /></a></div>
<br />
<a href="https://help.ubuntu.com/community/SwapFaq" target="_blank">Ayrıca Bu Sayfaya Bakınız</a>
</div>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0tag:blogger.com,1999:blog-1367762483505881663.post-15347092575107637472015-10-02T14:33:00.000+03:002016-02-27T20:29:20.227+02:00Ubuntu Nvidia Ekran Kartı Optimizasyonu<div class="content" style="height: 200px; width: 600px;">
<div id="cont-image" style="width: 200px;">
<img align="left" border="0" height="200" alt="nvidia ubuntu" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGM3jLk4z3oQpndd9z2vsmO4u_2ZK-z12KPTAuo0CQ7wWst-9jVC5PPTDdRiVUx5K9r-U6Ncb6GOt5SeydDJNbO4tmIC51oZSIDqErec04dwG02WP2Qksy1umud_WgBuz_160yP0ew4tw/s144-Ic42/ubuntu_global.png" width="200" />
</div>
<div id="main-cont" style="text-align:Justify; float: right; overflow: hidden; width: 370px; word-wrap: break-word;">
Nvidia Ekran Kartı İçin FPS sorunu olanlar bakabilir.<br />
<br /></div>
</div>
<br />
<a name='more'></a><br />
<br />
<h2>
Başla</h2>
<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #996633">$ </span><span style="color: #007020">echo</span> <span style="background-color: #fff0f0">"0/SyncToVBlank=0"</span> >> ~/.nvidia-settings-rc
<span style="color: #996633">$ </span>nvidia-settings --load-config-only --assign<span style="color: #333333">=</span><span style="background-color: #fff0f0">"SyncToVBlank=0"</span> <span style="color: #888888"># disable vertical sync</span>
<span style="color: #996633">$ </span>glxgears <span style="color: #888888"># test it out</span>
<span style="color: #996633">$ </span>nvidia-settings --load-config-only <span style="color: #888888"># restore your original vertical sync setting</span>
</pre></div>
<a href="https://stackoverflow.com/questions/17196117/disable-vertical-sync-for-glxgears">AMD için</a>Gürkan Yeşilyurthttp://www.blogger.com/profile/07725549552359468570noreply@blogger.com0