import React, { useEffect, useState } from 'react';
const MapApp = () => {
const [userLocation, setUserLocation] = useState(null);
const [otherUserLocation, setOtherUserLocation] = useState(null);
useEffect(() => {
// Kullanıcının konumunu al
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
setUserLocation({ latitude, longitude });
},
(error) => {
console.error('Konum alınamadı:', error.message);
}
);
// Simüle edilmiş diğer kullanıcının konumu
// Gerçek projede bu veri bir sunucudan alınmalıdır
setOtherUserLocation({ latitude: 40.7128, longitude: -74.006 });
// Web soketleri veya başka bir gerçek zamanlı iletişim yöntemiyle
// konum güncellemelerini alın ve setOtherUserLocation ile güncelleyin
}, []);
const calculateDistance = () => {
if (userLocation && otherUserLocation) {
const R = 6371; // Yeryüzü ortalama yarıçapı (km)
const dLat = toRadians(otherUserLocation.latitude - userLocation.latitude);
const dLon = toRadians(otherUserLocation.longitude - userLocation.longitude);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(toRadians(userLocation.latitude)) * Math.cos(toRadians(otherUserLocation.latitude)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c;
console.log('Uzaklık:', distance.toFixed(2), 'km');
}
};
const toRadians = (angle) => {
return angle * (Math.PI / 180);
};
return (
<div>
<h1>Harita Uygulaması</h1>
{userLocation && (
<p>Kullanıcı Konumu: {userLocation.latitude}, {userLocation.longitude}</p>
)}
{otherUserLocation && (
<p>Diğer Kullanıcı Konumu: {otherUserLocation.latitude}, {otherUserLocation.longitude}</p>
)}
<button onClick={calculateDistance}>Uzaklığı Hesapla</button>
</div>
);
};
export default MapApp;
Bu örnek, kullanıcının konumunu almayı, diğer kullanıcının simüle edilmiş konumunu kullanmayı ve iki konum arasındaki uzaklığı hesaplamayı içerir. Gerçek projede, kullanıcı konumları bir sunucudan alınmalı ve gerçek zamanlı güncellemeleri sağlamak için web soketleri veya benzeri bir teknoloji kullanılmalıdır. Ayrıca, güvenlik ve gizlilik konularına dikkat edilmelidir.
Eğer sayfa yenileme yapmadan, Ajax kullanarak dinamik olarak ilçeleri getirmek istiyorsanız, aşağıda PHP ve JavaScript kullanarak bu işlemi gerçekleştirebileceğiniz bir örnek bulunmaktadır. Bu örnekte jQuery kullanılmıştır, bu nedenle jQuery kütüphanesini sayfanıza eklemeniz gerekebilir.
İlk olarak, HTML sayfanızda bir select (il seçimi için) ve bir div (ilçelerin listeleneceği yer) ekleyelim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İl ve İlçe Seçimi</title>
<!-- jQuery kütüphanesini ekleyin -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<label for="il">İl:</label>
<select id="il" name="il" onchange="getIlceler()">
<option value="1">İstanbul</option>
<option value="2">Ankara</option>
<!-- Diğer illeri buraya ekleyin -->
</select>
<div id="ilceListesi"></div>
<script>
function getIlceler() {
// Seçilen ilin değerini al
var ilId = $("#il").val();
// Ajax isteği gönder
$.ajax({
url: 'getIlceler.php',
type: 'POST',
data: { ilId: ilId },
success: function(response) {
// İlçeleri göster
$("#ilceListesi").html(response);
}
});
}
</script>
</body>
</html>
Daha sonra, getIlceler.php adında bir PHP dosyası oluşturun ve bu dosyada ilçeleri getiren bir fonksiyon yazın:
<?php
// getIlceler.php
// Veritabanı bağlantısı veya ilçeleri alma işlemleri burada gerçekleştirilmelidir.
// Bu örnekte sabit bir dizi kullanılmıştır.
$ilId = isset($_POST['ilId']) ? $_POST['ilId'] : null;
if ($ilId !== null) {
// Veritabanından ilçeleri al
$ilceler = getIlcelerByIlId($ilId);
// Checkboxları oluştur
foreach ($ilceler as $ilce) {
echo '<input type="checkbox" name="ilce[]" value="' . $ilce['id'] . '">' . $ilce['isim'] . '<br>';
}
}
function getIlcelerByIlId($ilId) {
// Bu kısmı kendi veritabanı yapınıza göre uyarlayın.
// Örnek olarak sabit bir dizi kullanılmıştır.
$veritabanindan_alinan_ilceler = array(
array('id' => 1, 'isim' => 'İlçe 1'),
array('id' => 2, 'isim' => 'İlçe 2'),
// Diğer ilçeleri buraya ekleyin
);
// İlçeleri filtrele
$ilceler = array_filter($veritabanindan_alinan_ilceler, function ($ilce) use ($ilId) {
return $ilce['ilId'] == $ilId;
});
return $ilceler;
}
?>
Bu örnek, seçilen ilin değerini alarak getIlceler.php dosyasına Ajax isteği gönderir ve ilgili ilçeleri geri alarak sayfada gösterir. getIlcelerByIlId fonksiyonu, seçilen ile bağlı olarak ilçeleri döndürmek üzere örnek bir veritabanı işlevini temsil eder. Gerçek veritabanınıza uygun şekilde bu kısmı uyarlamalısınız.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resim Seçme</title>
</head>
<body>
<label for="imageInput">Resim Seç:</label>
<input type="file" id="imageInput" accept="image/*">
<div class="md-editor"></div>
<script>
let md_editor;
const imageInput = document.getElementById("imageInput");
imageInput.addEventListener("change", function (event) {
const file = event.target.files[0];
if (file) {
// Burada seçilen resmi kullanarak istediğiniz işlemleri gerçekleştirebilirsiniz.
// Örneğin, resmi önizleme olarak göstermek için aşağıdaki satırı kullanabilirsiniz:
// const imageUrl = URL.createObjectURL(file);
// const imgElement = document.createElement("img");
// imgElement.src = imageUrl;
// document.body.appendChild(imgElement);
// ClassicEditor veya başka bir editörle ilgili işlemleri burada gerçekleştirin.
}
});
ClassicEditor.create(document.querySelector(".md-editor"))
.then((neweditor) => {
md_editor = neweditor;
})
.catch((error) => {
console.error(error);
});
</script>
</body>
</html>
Hatanın kaynağı, tarayıcınızın BarcodeDetector API'sini desteklememesi olabilir. Bu durumda, bir polyfill kullanmanız gerekebilir.
import { useRef, useEffect, useState } from "react";
function App() {
const video = useRef(null);
const canvas = useRef(null);
const [barcode, setBarcode] = useState(null);
const openCam = () => {
navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 } })
.then(stream => {
video.current.srcObject = stream;
video.current.play();
const ctx = canvas.current.getContext('2d');
// BarcodeDetector API'nin tarayıcıda desteklenip desteklenmediğini kontrol et
if ('BarcodeDetector' in window) {
const barcodeDetector = new window.BarcodeDetector({ formats: ['qr_code', 'ean_13'] });
// Daha fazla işlem yapabilir veya tanıma başarılı olduğunda setBarcode ile state'i güncelleyebilirsiniz
barcodeDetector.detect(video.current)
.then(barcodes => {
console.log('Barcodes detected:', barcodes);
// setBarcode(barcodes);
})
.catch(error => {
console.error('Barcode detection error:', error);
});
} else {
console.error('Tarayıcınız BarcodeDetector API\'yi desteklemiyor.');
}
})
.catch(error => {
console.error('Kamera açma hatası:', error);
});
};
useEffect(() => {
openCam();
}, []); // Sadece bir kere çağrılması için boş bağımlılık dizisi
return (
<div>
<video ref={video} width="640" height="480"></video>
<canvas ref={canvas} width="640" height="480"></canvas>
</div>
);
}
export default App;
Bu kod, BarcodeDetector API'sini kontrol eder ve destekleniyorsa tanıma işlemini gerçekleştirir. Ayrıca, hata durumlarını da kontrol eder ve konsola bilgi yazdırır.
if ($_POST) {
$kullanici_adi_giris = trim(strip_tags($_POST['kullanici_adi_giris']));
$kullanici_sifresi_giris = trim(strip_tags($_POST['kullanici_sifresi_giris']));
$girissorgusu = "SELECT * FROM kullanicilar WHERE kullanicilar_kullaniciadi = '$kullanici_adi_giris' AND kullanicilar_sifre = '$kullanici_sifresi_giris'";
$girissorgu = mysqli_query($db, $girissorgusu);
$sonuc = mysqli_fetch_assoc($girissorgu);
if ($sonuc && ($sonuc['kullanicilar_kullaniciadi'] == $kullanici_adi_giris) && ($sonuc['kullanicilar_sifre'] == $kullanici_sifresi_giris)) {
$_SESSION["admin"] = $sonuc;
} else {
echo "Giriş Başarısız";
}
}
Merhaba! Sorununuzun iki farklı kısmı var gibi görünüyor: dosya adı sorunu ve MySQL ile ilgili bir karakter seti uyumsuzluğu hatası.
Dosya Adı Sorunu:
Dosya adında tire işareti kullanmak genellikle sorun yaratmaz. Ancak, belirttiğiniz gibi "openssl_encrypt" fonksiyonu kullanılıyorsa, bu fonksiyonun çıktısı bazen özel karakterler içerebilir. Bu durumda, dosya adını sadece harf, rakam ve basit özel karakterlerle sınırlamak daha iyi bir uygulama olabilir. Örneğin, dosya adını "siteye_konulan_birinci_resim.jpg" gibi bir formata dönüştürebilirsiniz.
MySQL Karakter Seti Uyumsuzluğu:
Hata mesajında belirtilen "Illegal mix of collations" hatası, genellikle veritabanındaki sütunların ve karşılaştırma operatörlerinin farklı karakter setleri veya sıralama düzenleri kullanması durumunda ortaya çıkar. Bu durumu düzeltmek için aşağıdaki adımları izleyebilirsiniz:
Veritabanı Karakter Seti Ayarı:
MySQL veritabanınızın karakter setini kontrol edin ve mümkünse UTF-8 (utf8mb4_general_ci) olarak ayarlayın. Bu, genellikle çeşitli karakterlerin sorunsuzca işlenmesini sağlar.Örneğin:
ALTER DATABASE your_database_name CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;Tablo ve Sütun Karakter Seti Ayarı:
Eğer mümkünse, ilgili tablo ve sütunların karakter setini de kontrol edin ve aynı şekilde ayarlayın.Örneğin:
ALTER TABLE your_table_name CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
Bu adımları izledikten sonra, sorununuz çözülmelidir. Ayrıca, dosya adlarını basitleştirmek ve özel karakterleri kaldırmak, dosya işlemleri sırasında olası sorunları azaltabilir.
Eğer PHP ile bir veri varsa o veriyi kullan, yoksa varsayılan bir değeri kullanmak istiyorsanız, isset() veya empty() fonksiyonları ile bir kontrol yapabilirsiniz.
İşte örnek bir kullanım:
<?php
// Admin panelinden gelen Facebook linki
$adminFacebookLink = $linkler['facebook_url'];
// Facebook linki var mı kontrolü
if (!empty($adminFacebookLink)) {
// Facebook linki varsa, görüntüle
$facebook= '<a href="' . $adminFacebookLink . '" target="_blank">Facebook</a>';
} else {
// Facebook linki yoksa, varsayılan bir değer kullanabilirsiniz
$facebook= null;
}
?>
empty() fonksiyonu, bir değerin boş olup olmadığını kontrol eder. Bu şekilde, Facebook linki verisi varsa görüntülenir, yoksa linki yayınlamaz. Bu sayede hataların oluşmasını önleyebilirsiniz.
Next.js'te sayfaların nasıl oluşturulacağı ve yönlendirileceği konusunda esnek bir yapı vardır. Eğer tek bir sayfa dosyasında tüm bu yolları yönetmek istiyorsanız, dinamik yolları kullanabilirsin
Öncelikle, pages dizininde [[...slug]].js adında bir dosya oluşturun. Bu dosyanın adında üç nokta içeren bir kısım, dinamik olarak gelen yolları temsil eder.
[[...slug]].js içeriği şu şekilde olabilir:
// pages/[[...slug]].js
import { useRouter } from 'next/router';
const DynamicPage = () => {
const router = useRouter();
const { slug } = router.query;
// slug parametresini kullanarak istediğiniz işlemleri yapabilirsiniz
// örneğin slug[0] ile ana kategori, slug[1] ile alt kategori alabilirsiniz
return (
<div>
<h1>Dynamic Page</h1>
<p>Slug: {slug}</p>
</div>
);
};
export default DynamicPage;
Bu sayfa, dinamik olarak gelen yolu alır ve bu yolu kullanarak istediğiniz işlemleri gerçekleştirebilirsiniz.
Örnek URL'ler:
//women/women/skirts/tr/kadin/ust-giyim
Bu URL'leri kullanarak sayfanıza ulaştığınızda, router.query.slug içinde ilgili yol bilgisini alabilir ve istediğiniz işlemleri gerçekleştirebilirsiniz.
Bu şekilde, tek bir sayfa dosyasında dinamik yolları yönetmiş olursunuz ve herhangi bir ekstra middleware kullanmanıza gerek kalmaz.
Resmin Classına veri eklemen gerekli o yüzden. kod çalışır halde. test ettim.
Örnek bir kullanım:
// File veya Blob nesnesini alın
var file = /* ... */;
// Blob URL oluşturun
var blobUrl = URL.createObjectURL(file);
// blobUrl'yi kullanarak resim önizlemesi yapın (örneğin, bir img etiketi içinde)
var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);
// Blob URL'yi serbest bırakmayı unutmayın (performans ve bellek yönetimi için)
URL.revokeObjectURL(blobUrl);