React kullanırken kullanacağın back-end dilinin hiçbir önemi yok. İster PHP kullan ister Python ister Nodejs.
Burada önemli olan react tarafından bu back-end'e nasıl istek atacağım.
Bunun için native fetch() kullanılabilir ya da alternatif olarak SWR, React Query ya da axios paketleri kullanılabilir.
Back-end tarafında ise json formatında bir veri dönmen gerekiyor. Dolayısı ile api.php dosyan olsun ve içinde şöyle basit bir şey olsun.
<?php
$name = $_POST['name'];
echo json_encode([
'text' => 'Yazdığınız cevap = ' . $name
]);
Ve react'de bu php dosyasına istek atıp sonucu göstermek istersen;
import React, { useState } from 'react';
import './style.css';
export default function App() {
const [name, setName] = useState();
const [data, setData] = useState();
const getName = () => {
const data = new FormData();
data.append('name', name);
fetch(`https://localhost/api.php`, {
method: 'POST',
body: data
})
.then(res => res.json())
.then(data => setData(data.text));
};
return (
<>
<input type="text" value={name} onChange={e => setName(e.target.value)} />
<button onClick={getName}>İstek At</button>
{data && <div className="result">API'den dönen istek = {data}</div>}
</>
);
}
Not: eğer CORS hatası alırsan php dosyanın başına şunu eklemeyi unutma
header("Access-Control-Allow-Origin: *");
Örnek demo: https://stackblitz.com/edit/react-php-ornek?file=src/App.js
Bir diğer konuda bunu nasıl yayınlacağın? Önce react projeni build ediyorsun.
yarn build
Ve build klasöründe aslında html, css ve javascript dosyaların var. Bunu sunucuna atacaksın, herhangi bir sunucuda hiçbir ayar yapmadan çalıştırabilirsin sonuçta javascript projesi çıkartıyorsun.
siteni pwa yaptıktan sonra beforeinstallprompt eventını dinleyip işlem yapabilirsin. Örneğin;
const installButton = document.querySelector('.install-app'); // uygulamayı yükle butonu
let beforeInstallPromptEvent
window.addEventListener("beforeinstallprompt", function(e) {
e.preventDefault();
beforeInstallPromptEvent = e
installButton.style.display = 'block'
installButton.addEventListener("click", function(mouseEvent) {
e.prompt();
});
installButton.hidden = false;
});
installButton.addEventListener("click", function(mouseEvent) {
beforeInstallPromptEvent.prompt();
});
options'ları çekeceksin öncelikle
$options = $db->query('SELECT * FROM ozelliklers')->fetchAll(PDO::FETCH_ASSOC);
function filterType($options, $type) {
return array_filter($options, function($option) use ($type) {
return $option['ozellik_tip'] === $type;
});
}
$colors = filterType($options, 'renk');
$sizes = filterType($options, 'beden');
$numbers = filterType($options, 'ayakkabi');
artık tablona şöyle bastırabilirsin
<table>
<thead>
<tr>
<th>Renk</th>
<th>Beden</th>
<th>Numara</th>
</tr>
</thead>
<tbody>
<?php foreach($colors as $key => $color): ?>
<tr>
<tr><?=$color['ozellik']?></tr>
<tr><?=$sizes[$key]['ozellik']?></tr>
<tr><?=$numbers[$key]['ozellik']?></tr>
</tr>
<?php endforeach; ?>
</tbody>
</table>
@xreadyshoots, kaymadı ben öyle tasarladım, sayfanın geneline bakarsan durumu anlayabileceğini düşünüyorum :)
imkanın olmadığı durumlarda kullanabilirsin bu yöntemi, onclick ekleyebiliyorsan zaten sorun yok :)
ne yapmak istediğini tam anlayamadım, verdiğin fonksiyon hiçbir şey yapmıyor? istek objen yok bir kere içinde. eğer istekleri bir fonksiyondan kolayca yöneteyim diyorsan şöyle bir şey yazabilirsin;
function request(url, method, data, calback) {
const request = new XMLHttpRequest();
request.open(method, url);
request.addEventListener('load', callback)
request.send(data);
}
kullanırkende;
const data = {
name: 'tayfun,
surname: 'erbilen'
}
request('ajax.php', 'POST', data, function(e) {
console.log(e.currentTarget.response); // istekten dönen cevabın
})
Her emoji her platformda gözükmeyebiliyor. Ben mac'den baktığım için apple'ın simgesi çıkıyor. Ama windowsta dediğin gibi boş kare bir şey çıkıyor :)
Sırasıyla yapılacaklar
1- app ve core dahil altındaki tüm klasörlerin baş harfleri büyük olmalı.
2- App/Bootstrap.php içinde new Router kısmındaki klasör isimlerininde baş harfini büyültmeyi unutma.
3- composer.json dosyanda helpers dosyalarının klasör isimlerinide baş harfini büyük yapmayı unutma.
4- SQLite ile ilgili bir hata alırsan yine App/Bootstrap.php dosyasında db bağlantı ayarına şunu ekle
$capsule->addConnection([
// diğer ayarların burada
// ek olarak bunu ekle
'options' => [
\PDO::ATTR_EMULATE_PREPARES => true
]
]);
1- php'nin 8. sürümüyle yapılan benchmark teslerine bakma şansın oldu mu?
2- işte buna denecek söz yok :D ama sırf bu yüzden back-end dili tercih edilmez
3- php'nin yazımına çirkin diyenler laravel'i hiç incelememişler bence :D
şaka bir yana, ikisini öğren derim. ikisininde avantajlarını bilerek ona göre projelerde tercihini yaparsın.
öncelikle javajavascript olacak onu düzelterek başlayalım.
sweetalert2'nin ilgili javascript kodunu sayfana dahil et
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
daha sonra kullanmak için
Swal.fire({
title: 'Başlık!',
text: 'Açıklama buraya gelecek',
icon: 'success',
confirmButtonText: 'Tamamla'
})