İçerikler
Döviz kuru çeviricisi için ihtiyacımız olan, döviz kuru bilgileri ve çevirme işlemi için hazırlanacak bir işlem fonksiyonudur. Bu işlemi PHP ve JS kullanarak ortaya karışık bir şekilde gerçekleştireceğiz. Buradaki amaç, bilgilerin birden fazla işlemle nasıl işleneceğini gösterebilmektedir. Tabi bu örneği tek bir dille de gerçekleştirebilirsiniz.
Döviz bilgileri almak için aşağıdaki API‘den faydalanacağız.
https://api.genelpara.com/embed/doviz.json
Burada yer alan bilgileri PHP ile alacağız. Sonrasında buradan elde edilen bilgileri form üzerinde kullanarak işleyeceğiz. Bunun için, file_get_contents ile API adresine bağlanacağız. Ardından json_decode ile gelen verileri Array formatına çevireceğiz.
PHP Kodları
Burada sadece döviz bilgileri almak için işlem yapacağız. Bunun için yukarıda yer alan API adresini kullanacağız. Buradan gelen bilgiler JSON formatında olacağı için, bunu decode ederek bir değişkende tutacağız.
<?php $baglan = json_decode(file_get_contents("https://api.genelpara.com/embed/doviz.json"), TRUE); ?>
API adresine bağlandıktan sonra artık işlemleri gerçekleştireceğimiz asıl bölüme geçebiliriz. Döviz değerini seçerek çevirme işlemini yapmak için bir HTML alanı oluşturmamız gerekiyor.
HTML Kodları
Uygulamanın güzel görünmesi amacıyla, CSS ile erişim sağlamak adına bir HTML yapısı oluşturuyoruz.
<div class="kutu">
<div>Döviz Tipini Seçiniz</div>
<select id="secim">
<option value="<?=$baglan["USD"]["alis"]?>">DOLAR</option>
<option value="<?=$baglan["EUR"]["alis"]?>">EURO</option>
</select>
<div>Tutarı Giriniz</div>
<input type="text" id="tutar" autocomplete="off">
<div id="sonuc"></div>
<button onclick="hesapla()">Sonuç</button>
</div>
Oluşturduğumuz bu yapının güzel görünebilmesi ve kullanım kolaylığı sağlayabilmek için CSS kodlarını da eklememiz gerekiyor.
CSS Kodları
Hazırlamış olduğumuz HTML iskeletini kullanabilir hale getiriyoruz. Bu alanı dilediğiniz gibi değiştirebilirsiniz.
.kutu{width: 200px; margin: 50px auto}
.kutu div{padding:10px 0px}
.kutu select{width: 100%; padding:10px; border:1px solid #ddd}
.kutu input{width: 100%; padding:10px; border:1px solid #ddd;margin-bottom:10px}
.kutu button{width: 100%; padding:10px; border:1px solid #ddd}
#sonuc{text-align: center; font-weight: bold;}
Bu kodlarla birlikte, kullanım kolaylığı olan bir uygulama hazırlamış oluyoruz. Şimdi işlemi sağlayacağımız JS kodlarına geçelim.
JS Kodları
PHP ile elde ettiğimiz verileri SELECT kısmında OPTION içerisine eklemiştik. Buradan verileri alıp, INPUT alanındaki veriyle matematiksel işlem yapmak gerekiyor.
hesapla = () => {
var doviz = document.getElementById("secim").value;
var tutar = document.getElementById("tutar").value;
var sonuc = document.getElementById("sonuc");
var hesapla = doviz * tutar;
sonuc.innerHTML = Number(hesapla.toFixed(2))+" TL";
}
Bu kodlarla birlikte, TL cinsinden girilen tutarın, seçilen döviz kuruyla çarpılarak sonuç alınmasını sağlıyoruz. Böylece PHP ve JS ile döviz kuru çevirici hazırlamış oluyoruz. Bu uygulamayı dediğim gibi farklı şekillerde de gerçekleştirebilirsiniz.
Uygulamanın Tamamı
Neler yaptığımızı birleştirecek olursak, PHP ile verileri çektik ve JS ile verileri işlemiş olduk. Hazırlamış olduğumuz kodun tamamı da aşağıdaki gibi olacaktır.
<?php $baglan = json_decode(file_get_contents("https://api.genelpara.com/embed/doviz.json"), TRUE); ?>
<style>
.kutu{width: 200px; margin: 50px auto}
.kutu div{padding:10px 0px}
.kutu select{width: 100%; padding:10px; border:1px solid #ddd}
.kutu input{width: 100%; padding:10px; border:1px solid #ddd;margin-bottom:10px}
.kutu button{width: 100%; padding:10px; border:1px solid #ddd}
#sonuc{text-align: center; font-weight: bold;}
</style>
<script>
hesapla = () => {
var doviz = document.getElementById("secim").value;
var tutar = document.getElementById("tutar").value;
var sonuc = document.getElementById("sonuc");
var hesapla = doviz * tutar;
sonuc.innerHTML = Number(hesapla.toFixed(2))+" TL";
}
</script>
<div class="kutu">
<div>Döviz Tipini Seçiniz</div>
<select id="secim">
<option value="<?=$baglan["USD"]["alis"]?>">DOLAR</option>
<option value="<?=$baglan["EUR"]["alis"]?>">EURO</option>
</select>
<div>Tutarı Giriniz</div>
<input type="text" id="tutar" autocomplete="off">
<div id="sonuc"></div>
<button onclick="hesapla()">Sonuç</button>
</div>
Bu kodların çalışması için .php uzantılı bir dosyada olması gerektiğini unutmayınız. Bu örnekle birlikte, Döviz kuru çeviricisi uygulamasını geliştirmiş oluyoruz.
