Çok ucu açık bir soru sormuşsunuz. Tamamen varsayımlar üzere bir örnek yazıyorum.
Sayfa ilk açıldığında kutular görünecek.
Kullanıcı herhangi bir kutuya tıkladığı anda localhostunuzda bulunan test adlı veritabanındaki secilmisler adlı tablonuza seçilen fiyat eklenecek.
Şöyle bir komutla mysql'inizdeki test adlı veritabanınızda bir tablo oluşturmuşsunuz varsayalım:
CREATE TABLE secilmisler (
id int NOT NULL AUTO_INCREMENT,
secilen varchar(10) NOT NULL,
eklenme_tarihi TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id)
);
Şöyle bir index.html dosyanız var diyelim:
<html>
<head>
<title>Deneme</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="buttonsWrapper">
<button>30 TL</button>
<button>35 TL</button>
<button>40 TL</button>
<button>50 TL</button>
<button>60 TL</button>
<button>75 TL</button>
<button>100 TL</button>
<button>200 TL</button>
<button>300 TL</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Şöyle de styles.css dosyanız varmış mesela:
* { margin:0; padding:0; box-sizing:border-box; outline:none; }
#buttonsWrapper { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap: wrap; padding:10px; position:relative; }
#buttonsWrapper.waitForResponse::before { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; z-index:2; opacity:0.5; background:#fff; }
#buttonsWrapper > button { font-size:25px; line-height:1; border:1px solid #ccc; border-radius:10px; padding:20px; margin:10px; color:#222; transition:background ease .3s, color ease .3s; }
#buttonsWrapper > button.active { background-color:#03c; color:#fff; }
Bir de script.js dosyanız varmış varsayalım:
var $buttonsWrapper = $("#buttonsWrapper");
var $buttons = $buttonsWrapper.find("> button");
$buttons.on("click",function(){
$(this).addClass("active").siblings().removeClass("active");
var selectedPrice = $(this).text();
$buttonsWrapper.addClass("waitForResponse");
$.ajax({
url:"add-to-database.php",
type:"post",
data: { price: selectedPrice },
success: function(response) {
if(response.type==="error") alert("HATA!\n"+response.message);
else if(response.type==="success") alert("BAŞARILI!\n"+response.message);
else alert("Bir gariplik var...");
$buttons.removeClass("active");
$buttonsWrapper.removeClass("waitForResponse");
},
error: function(err) {
alert("ajax fonksiyonu çalışmadı!");
console.log(err);
$buttonsWrapper.removeClass("waitForResponse");
}
});
});
Seçilen fiyatı veritabanına yazacak add-to-database.php adlı bir dosyanız da varmış:
<?php
function sendJson($type, $message='') {
header('Content-Type: application/json; charset=utf-8');
echo json_encode(['type'=>$type, 'message'=>$message]);
exit();
}
function sendSuccess($message='') { sendJson('success', $message); }
function sendError($message='') { sendJson('error', $message); }
// Birkaç inceleme yapıp gelen fiyatın düzgün olup olmadığını görelim
if(!isset($_POST['price'])) sendError('Fiyat gönderilmedi!');
$priceString = trim($_POST['price']);
if($priceString==='') sendError('Fiyat boş gönderildi!');
$splittedPriceString = explode(' ', $priceString);
if(count($splittedPriceString)!==2) sendError('Fiyat, miktar ve para birimi şeklinde gönderilmedi! Örnek format şu şekilde olmalıydı: "50 TL"');
$price = trim($splittedPriceString[0]);
if(!is_numeric($price)) sendError('Fiyat sayısal değer değil!');
$currency = trim($splittedPriceString[1]);
$currency = preg_replace('/[^a-zA-Z]+/', '', $currency);
if($currency==='') sendError('Para birimi değeri eksik veya hatalı!');
$currency = strtoupper($currency);
$priceString = "$price $currency";
// Veritabanına bağlanıp ekleme işlemini gerçekleştirelim
$db = null;
try { $db = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "123456"); }
catch ( PDOException $e ){ sendError("Veritabanına bağlanılamadı."); }
$query = $db->prepare("INSERT INTO seçilmisler SET secilen = :priceString");
$insert = $query->execute(["priceString"=>$priceString]);
if(!$insert) sendError("Seçim veritabanına eklenemedi.");
// Sonucu döndürelim
sendSuccess("Ekleme tamamlandı");
Artık siz bu örneğe göre kendinize bir yol çizersiniz...
<select>
elementinin onchange
olayını tetikleterek çalıştırdığınız fonksiyonun içinde setInterval()
fonksiyonu var. Her onchange
olayıyla yeni bir setInterval()
daha kuruyorsunuz. Yeni setInterval()
fonksiyonunu çalıştırmadan önce, öncekini durdurmalısınız.
1) Mesela ilk satırda global bir değişken oluşturun:
var countdownInterval = null;
2) setInterval()
fonksiyonunu oluştururken bu değişkene de atayın. Ayrıca sayımı başlatmadan önce, önceki sayımı temizleyin.
calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
if(countdownInterval) clearInterval(countdownInterval);
countdownInterval = setInterval(function() {
calculateCountdown(todayImsakDate, todayAksamDate, tomorrowImsakDate, $countdown);
},1000);
1) PHP'de tüm dosyayı tek seferde okumak yerine stream şeklinde okuyarak işlem yapabilirsiniz.
Sorunuza benzer bir soru stackoverflow'da sorulmuş.
Kabul edilen cevapta özetle demiş ki:
"Büyük dosyaları işlemek için gerçekten uygun sadece 2 tane PHP API vardır: expat API ve daha yeni olan XMLReader. Bunlar tüm verileri belleğe yükleyip okumaya çalışmak yerine sürekli bir akış şeklinde okurlar."
Sonra da bir örnek vermiş.
Yine de dosyanız çok büyük ve burada MySQL'in de hızı devreye giriyor. Bu işlem muhakkak uzun sürecektir.
2) Yükü server (PHP) ve client (javascript) arasında paylaştırabilirsiniz.
Başka bir yol olarak belki XML'i javascript ile parçalayıp PHP'ye parça parça post ederek de işlem sağlamayı deneyebilirsiniz. Dosyayı javascript'in domParser sınıfı yardımıyla parçalamayı deneyebilirsiniz. Tarayıcınızda 100 elemanlı diziler halinde xml satırlarınızı json formatında PHP'ye post edip PHP'ye de yalnızca veritabanına yazma işlemi yapmasını söyleyebilirsiniz. PHP veritabanına yazmayla ilgilenirken siz bir sonraki 100 satırı json'a çevirtirsiniz. PHP'den "tamam yazdım" sonucu dönünce hazırladığınız 100 satırı gönderirsiniz. Hata döndürürse önceki 100 satırı tekrar gönderirsiniz. Böyle bir döngü... Ekrana da PHP'nin o ana kadar kaç satırı eklediğini yazdırırsanız, olası bir kopma halinde nerede kaldığınızı bilir, tekrar başlayınca kaldığınız yerden devam edersiniz. Burada yükü sunucuyla istemci arasında paylaştırmış olursunuz ama tarayıcının bu boyutta bir xml'i ne kadar hızlı okuyabileceğini bilemiyorum tabi. Alternatif olarak bu yöntem de kenarda dursun.
3) Dosyayı doğrudan MySQL'e aktarmayı deneyebilirsiniz.
XML dosyasını doğrudan MySQL'e aktarmayı deneyebilirsiniz. HeidiSQL gibi bir programla veritabanınıza bağlanıp dosyanızı import etmeye çalışabilirsiniz. Sanırım databasejournal.com sitesindeki The Import Process başlığı altında bu konu anlatılmış. Bu doküman güncel midir bilmiyorum.
Söylediğiniz şekilde yapabilirsiniz. Üzerinden 2 gün geçtiği için önceki cevabımı güncelleyemiyorum. try-catch içinde bir hata alıyorsunuz ama şu an ne olduğunu bilemiyoruz. Hatayı görmek için try-catch bloğunu kaldırabilirsiniz.
Görseli PHP ile boyutlandırmak için örnek
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="my_file">
<button type="submit">Yükle</button>
</form>
Butona basıldığında seçilen görsel upload.php sayfasına "my_file" key'iyle gönderilecek.
upload.php sayfasında yakalayıp kaydedin.
WideImage: wideimage.sourceforge.net
// Bu sayfayı json sonuç dönecek bir sayfa gibi düşünerek,
// kolay sonuç döndürmek için birkaç fonksiyon yazıyorum.
function sendJson($type, $message='') {
header('Content-Type: application/json; charset=utf-8');
echo json_encode(["type"=>$type, "message"=>$message]);
exit();
}
function sendError($message='') { sendJson("error", $message); }
function sendSuccess($message='') { sendJson("success", $message); }
// İşlemler buradan sonra başlıyor...
if(!isset($_FILES['my_file'])) sendError("Dosya bulunamadı.");
$fileName = $_FILES['my_file']['name'];
$fileSize = $_FILES['my_file']['size'];
$fileTmpName = $_FILES['my_file']['tmp_name'];
$fileType = $_FILES['my_file']['type'];
$fileExtension = explode('.',$fileName);
$fileExtension = end($fileExtension);
$fileExtension = strtolower($fileExtension);
if (!in_array($fileExtension,['jpeg','jpg','png'])) sendError('Dosya uzantısı geçersiz. Lütfen jpg veya png dosya seçin');
if ($fileSize > 4 * 1024 * 1024) sendError('Dosya boyutu 4 mb üzerinde olamaz.');
$bigImagePath = 'images/'.$fileName; // Bu php dosyasının olduğu aynı yerde images klasörü de olmalı.
$smallImagePath = 'images/small/'.$fileName; // Bu php dosyasının olduğu aynı yerdeki images klasörü altında small klasörü de olmalı.
$uploaded = move_uploaded_file($fileTmpName, $bigImagePath);
if(!$uploaded) sendError('Dosya kaydedilemedi.');
include "libraries/WideImage.php"; // Bu php dosyasının olduğu aynı yerde libraries klasörü de olmalı. İçine de WideImage.php dosyası eklenmiş olmalı.
$bigImage = WideImage::load($bigImagePath);
$smallImage = WideImage::load($bigImagePath);
$bigImage = WideImage::load($bigImagePath);
$smallImage = WideImage::load($bigImagePath);
$bigImageResized = $bigImage->resize(1000, 1000, 'inside'); // Görseli 1000x1000 piksellik alana sığacak şekilde boyutlandırır.
$smallImageResized = $smallImage->resize(300, 300, 'inside'); // Görseli 300x300 piksellik alana sığacak şekilde boyutlandırır.
try {
$bigImageResized->saveToFile($bigImagePath);
$smallImageResized->saveToFile($smallImagePath);
}
catch (Exception $e) { sendError("Görsel boyutlandırma başarısız oldu."); }
$db = null;
try { $db = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "123456"); }
catch ( PDOException $e ){ sendError("Veritabanına bağlanılamadı."); }
$query = $db->prepare("INSERT INTO gorseller SET dosya_adi = :fileName");
$insert = $query->execute(["fileName"=>$fileName]);
if(!$insert) sendError("Görsel adı veritabanına yazılamadı.");
sendSuccess("Görsel başarıyla kaydedildi.");
Tüm CSS'leri bir dosyaya toplayıp minimize ederseniz tekrar eden kodlar kalkacaktır sanıyorum.
- Tüm dosyaları tek bir css dosyasına aktarın.
- cssresizer.com gibi bir siteden stillerinizi minimize edilmiş halini alın.
Görseli PHP ile boyutlandırmak için örnek
1. Google'a "image library php" yazdığımda karşıma "PHP'de görüntü işlemek için en iyi 5 kütüphane" başlıklı bir yazı çıktı:
designbolts.com/2021/02/04/top-5-libraries-for-image-processing-in-php
2. Bu sayfada incelediğim kütüphaneler içinde biri gözüme kolay göründü: WideImage
wideimage.sourceforge.net
3. Diyelim ki şöyle bir form'dan PHP'ye görseli aktarıyorsunuz:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="my_file">
<button type="submit">Yükle</button>
</form>
Butona basıldığında seçilen görsel upload.php sayfasına "my_file" key'iyle gönderilecek.
4. Görseli upload.php sayfasında yakalayıp kaydedin.
// Bu sayfayı json sonuç dönecek bir sayfa gibi düşünerek,
// kolay sonuç döndürmek için birkaç fonksiyon yazıyorum.
function sendJson($type, $message='') {
header('Content-Type: application/json; charset=utf-8');
echo json_encode(["type"=>$type, "message"=>$message]);
exit();
}
function sendError($message='') { sendJson("error", $message); }
function sendSuccess($message='') { sendJson("success", $message); }
// İşlemler buradan sonra başlıyor...
if(!isset($_FILES['my_file'])) sendError("Dosya bulunamadı.");
$fileName = basename($_FILES['my_file']['name']);
$fileSize = $_FILES['my_file']['size'];
$fileTmpName = $_FILES['my_file']['tmp_name'];
$fileType = $_FILES['my_file']['type'];
$fileExtension = strtolower(end(explode('.',$fileName)));
if (!in_array($fileExtension,['jpeg','jpg','png'])) sendError('Dosya uzantısı geçersiz. Lütfen jpg veya png dosya seçin');
if ($fileSize > 4 * 1024 * 1024) sendError('Dosya boyutu 4 mb üzerinde olamaz.');
$bigImagePath = 'images/'.$fileName; // Bu php dosyasının olduğu aynı yerde images klasörü de olmalı.
$smallImagePath = 'images/small/'.$fileName; // Bu php dosyasının olduğu aynı yerdeki images klasörü altında small klasörü de olmalı.
$uploaded = move_uploaded_file($fileTmpName, $bigImagePath);
if(!$uploaded) sendError('Dosya kaydedilemedi.');
5. WideImage kütüphanesini kullanarak görseli yeniden boyutlandırın ve ilgili klasörlerine kaydedin.
//... önceki kodlardan devam
include "libraries/WideImage.php"; // Bu php dosyasının olduğu aynı yerde libraries klasörü de olmalı. İçine de WideImage.php dosyası eklenmiş olmalı.
$bigImage = null;
$smallImage = null;
try {
$bigImage = WideImage::load($bigImagePath);
$smallImage = WideImage::load($bigImagePath);
}
catch (Exception $e) { sendError("Görsel upload edilememiş."); }
$bigImage = WideImage::load($bigImagePath);
$smallImage = WideImage::load($bigImagePath);
$bigImageResized = $bigImage->resize(1000, 1000, 'inside'); // Görseli 1000x1000 piksellik alana sığacak şekilde boyutlandırır.
$smallImageResized = $smallImage->resize(300, 300, 'inside'); // Görseli 300x300 piksellik alana sığacak şekilde boyutlandırır.
try {
$bigImageResized->saveToFile($bigImagePath);
$smallImageResized->saveToFile($smallImagePath);
}
catch (Exception $e) { sendError("Görsel boyutlandırma başarısız oldu."); }
Kodları test etmeden direkt buraya yazdım. WideImage sınıfını da hiç kullanmadım. Umarım bu şekilde çalışır.
6. Görseli değil, görselin ismini veritabanına kaydedin.
Görselin adı $fileName
değişkeninde bulunuyor. Veritabanına bağlanmak için kullanıyorsunuz bilmiyorum. PDO için örnek vereyim:
//...önceki kodlardan devam
$db = null;
try { $db = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "123456"); }
catch ( PDOException $e ){ sendError("Veritabanına bağlanılamadı."); }
$query = $db->prepare("INSERT INTO gorseller SET dosya_adi = :fileName");
$insert = $query->execute(["fileName"=>$fileName]);
if(!$insert) sendError("Görsel adı veritabanına yazılamadı.");
sendSuccess("Görsel başarıyla kaydedildi.");
Bu örneklerin yardımcı olacağını sanıyorum.
Eğer yanlış yazdığım bir yer bulursanız lütfen belirtin, bu gönderimi düzenleyeyim.
Sorunuzun cevabı şu gönderinizde mevcut sanıyorum:
prototurk.com/soru/jquery-ile-veri-guncelleme-js-kodunda-duzenleme
Evet, güncellenmeyecektir. Siz aslında #tablo1USDTRYdegisim elementine hep aynı değeri basıyorsunuz.
$source
adlı değişkende tuttuğunuz adrese bir istek atılıyor ve bu isteğe yanıt geldikten sonra front-end tarafında alış ve satış alanlarını dolduruyorsunuz. Bu alış-satış değerlerinin hesaplanmasını yine front-end tarafında javascript ile yapmalısınız.
$.getJSON('<?=$source?>', function(data) {
var alis = Number(data.data.ALTIN.alis);
var satis = Number(data.data.ALTIN.satis);
var kapanis = Number(data.data.ALTIN.kapanis);
var degisim = "%" + (((satis - kapanis) * 100) / satis).toFixed(2);
$("#tablo1USDTRYalis").html(alis);
$("#tablo1USDTRYsatis").html(satis);
$("#tablo1USDTRYdegisim").html(degisim);
});
Sizin kodunuzun neden çalışmadığının cevabı, sunucunun çalışma mantığında saklı.
Siz bu javascript kodunuzun bulunduğu php dosyasına erişmek istediğinizde, yani istek attığınızda,
- Önce sunucu bu dosyayı yukarıdan aşağıya okumaya başlar.
- PHP tag'ı gördüğü yerlerde php işlemlerini yapar ve buralara çıktılarını basar.
- Sunucu sayfayı okumayı bitirdiğinde artık PHP tagları içine yazdığınız hiçbir şey ortada yoktur. PHP tagları ortadan kalkmıştır. Bu tagların yerine, PHP'nin hesapladığı değerler siz elinizle sonuçları hesaplayıp düz yazıyla yazmışsınız gibi yazılmıştır.
- Sunucu size yanıtı gönderirken artık PHP ile bir bağınız kalmamıştır. İstek yapan tarayıcıya dümdüz bir metin gelir.
- Tarayıcı bu dümdüz metni alıp anlamlandırmaya çalışır. İçinde kendince yorumlayabileceği neler var diye yukarıdan aşağıya tarar. Tabii ki burada tarayıcı hiçbir PHP tag'ıyla karşılaşmaz. PHP taglarının yerinde çoktan hesaplanmış değerleri görür.
- Sıra sizin
$.getJSON()
fonksiyonunuza geldiğinde tarayıcının gördüğü şey'<?= $source ?>'
değil, onun yerinde hangi ifade olması gerekiyorsa odur. Aynı şekilde$("#tablo1USDTRYdegisim").html('<?= $hasdegisim ?>')
için de öyle. Aslında siz otomatik değişecek bi'şey yazdığınızı düşünürken tarayıcı o satıra geldiğinde gördüğü şöyle bi'şeydir:$("#tablo1USDTRYdegisim").html('0.231232')
. Böylece tarayıcı #tablo1USDTRYdegisim elementine hep aynı ifadeyi yazmaya çalışır. - Tarayıcılar PHP gibi sunucu taraflı dillerin kodlarını göremezler. Sadece PHP işini bitirdikten sonraki halini görebilirler. PHP'yi görselerdi bile çalıştıramazdı çünkü PHP yorumlamayı bilmiyorlar. Bu yüzden, isteğe yanıt döndüğünde, yani siz sayfayı gördüğünüzde artık PHP ile bağınız kalmamıştır. Geri kalan işlemleri ancak javascript'le halledebilirsiniz.
Style tanımlarken buna direk tanımlama yapabilir miyim?
Evet, React Native'de bir component'e inline olarak stil verebilirsiniz.
<View style={{ width:200, height:200, backgroundColor:"red" }} />
CSS'te misal .alan.kutu
tarzında tanımlama yapınca alan içindeki kutulara işlem yapıyoruz. React ile bu mümkün mü?
Evet, React ve React Native'de bir component'e birkaç stil verebilirsiniz. style
prop'una obje değil objeler içeren bir dizi göndermeniz yeterli.
<View style={[{ width:200, height:200, backgroundColor:"red" }, {borderWidth:1, borderColor:"blue"}]} />
Ama siz mesela ekrandaki tüm View'lerde belli bir stil kullanılsın istiyorsanız bunun yolu yok. Yani var ama duruma göre kod kalabalığı yaratır. Mesela MyView adında bir component oluşturur ve ona belli bir stil verirsiniz. Böylece bu component'i kullandığınız her yerde aynı stil geçerli olur.
const RedView = (props) => <View style={{backgroundColor:"red"}}>{props.children}</View>;
const BlueView = (props) => <View style={{backgroundColor:"blue"}}>{props.children}</View>;
const Screen = () => {
return (
<View>
<RedView><Text>Kırmızı Arkaplanlı View</Text></RedView>
<RedView><Text>Kırmızı Arkaplanlı View</Text></RedView>
<BlueView><Text>Mavi Arkaplanlı View</Text></BlueView>
<View><Text>Normal View</Text></View>
</View>
);
}
Alında title ile aynı yöntemle yapabilirsiniz.
Hatta aslında bir masterpage oluşturup sayfalarınızı buraya aktarmanız daha da güzel olur.
Böylece header.php, footer.php gibi ayrımlara gitmek zorunda kalmaz ve PHP-HTML ayrımını güçlendirmiş, MVC mantığına yaklaşmış olursunuz.
View sayfanıza göndereceğiniz verileri kendinizce organize edeceğiniz bir değişkene aktarın.
haber.php
$viewBag = [
'page' => "haber.php",
'title' => "Güncel Haberler",
'headTags' => [
'<link id="stylecall" rel="stylesheet" href="./css/haber.css" />',
'<link id="stylecall" rel="stylesheet" href="./css/baska.css" />'
],
'footTags' => [
'<script src="./js/haber.js"></script>',
'<div>İstenen herhangi bir kod</div>'
]
];
include("masterpage.php");
masterpage.php
<html>
<head>
<title><?=$viewBag['title']?></title>
<link id="stylecall" rel="stylesheet" href="./css/master.css" />
<?=implode($viewBag['headTags'])?>
</head>
<body>
<?php include($viewBag['page']) ?>
<script src="./js/jquery3.min.js"></script>
<script src="./js/master.js"></script>
<?=implode($viewBag['footTags'])?>
</body>
</html>
masterpage.php'de kullandığınız tüm $viewBag
key'lerini haber.php gibi sayfalarınızda oluşturmalısınız. Mesela haber.php'de footTags kısmına bi'şey eklemek istemiyorsanız bile footTags key'ini oluşturup boş dizi göndermelisiniz. Bu masterpage için bir standart oluşturmuş olacaksınız.