Bir de react örneği hazırladım. Herhangi bir html dosyasına yapıştırıp çalıştırabilirsin.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root" class="container"></div>
<script type="text/babel">
const { useState, useEffect } = React;
function App() {
const [users, setUsers] = useState([]);
const [userId, setUserId] = useState(1);
const [comments, setComments] = useState([]);
const handleUsers = async ()=>{
const result = await fetch("https://jsonplaceholder.typicode.com/users").then(d=>d.json())
setUsers(result);
};
const handleComments = async ()=>{
const result = await fetch(`https://jsonplaceholder.typicode.com/posts/${userId}/comments`).then(d=>d.json())
if(userId != users.length){
setComments([...comments, ...result]);
setUserId(prev=>prev+1);
}
}
useEffect(()=>{
handleUsers();
}, [])
return (
<div>
<ul>
{
comments.map((line,k)=>(
<li key={k}>{line.body}</li>
))
}
</ul>
<button onClick={handleComments}>Yükle</button>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />)
</script>
</body>
</html>
Tam doğru anlatabilir miyim bilmiyorum.
Php sunucu tarafında çalışıyor gelen istekleri alır ve çıktı verir.
Sayfa 1-20 arası yorum gösteriyor. Sayfa sonuna geldin 21-40 arasını otomatik eklemesini istersen Javascript ile sunucuya istek atıp gelen değerleri ekrana bastırman lazım.
Ama işlemi yine de php ile yüklemek istersen parametre aralığını 1-40 olarak değiştirmen lazım.
Bu seferde sayfa yeniden yüklenir. Pek doğru değil.
Zaten çok özel bir işlem olmadığı sürece html etiketleri ile Php çıktısı almak ve 10Kb veriyi atıyorum 100Kb veriye çıkartıyorsun.
Veri tabanından çektiğin her satır için etiket, sınıf yazmasını bekliyorsun. Tailwind içine girdi mi 100Kb olur 200Kb :)
Sunucudan bir veri çektiğin zaman hiç bir zaman html yapısı kullanma. Belki bilgilendirme sayfalarında olabilir (Anasayfa, İletişim, Hakkımızda).
O sırada hem html hem veri aynı anda yüklendiği için göz ardı edilebilir.
const rowsConfig = {
start: 1,
start: 20
}
async function movieComments(rowsConfig) {
const comments = await fetch("movie.php", {
body: new UrlSearchParams(rowsConfig),
method: "POST"
}).then(d=>d.json());
comments.forEach((line)=>{
$("ul#comment").append(`<li>${line.comment}</li>`)
})
rowsConfig.start += 20;
rowsConfig.end += 20;
}
// Şimdi tekerlekle ve aşağı ok tuşu ile sayfa sonunu yakalamak kısmını yapay zekaya sorarsın.
movieComments(rowsConfig)
Çözümü buldum form etiketi ve useRef hook'u kullanarak.
Okunan yeni değerler sonrası invoiceRef.current.reset() çalıştırılırsa set edilen değerler varsayılan değer olarak tekrar okunur.
function Fatura(){
const invoiceRef = useRef(null);
const [invoiceLine, setInvoiceLine] = useState([10,20,30,40,50]);
const newInvoice = ()=>{
invoiceLine([60,70,80,90,100]);
invoiceRef.current.reset();
}
const handleChange = (e,k)=>{
invoiceLine[k] = eval(`${e.target.value.replaceAll(".","").replace(",","."}`)
setInvoiceLine([...sayilar])
}
return(
<div>
<button type="button" className="text-white border border-[orange]" onClick={newInvoice}>Sayıları Değiştir</button>
<form ref={invoiceRef} className="grid gap-2 w-[450px] p-2 bg-black mx-auto">
{invoiceLine.map((l, k) => (
<div key={k} className="text-white grid grid-cols-2 gap-2">
<input type="text" className="text-black text-right pr-2" onChange={(e) => { handleChange(e, k) }} defaultValue={l} />
<span>Çıktı: {Intl.NumberFormat("tr", { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(l)}</span>
</div>
))}
</form>
</div>
)
}
Bir kaynak buldum ve uyarladım. Şimdilik işimi çözdü.
App.svelte
<script>
import Tabs from "./Tabs.svelte";
import Tab1 from "./Tab1.svelte";
import Tab2 from "./Tab2.svelte";
const children = [
{
title: "Tab 1",
component: Tab1
},
{
title: "Tab 2",
component: Tab2
}
]
</script>
<Tabs children={[Tab1, Tab2]} defaultName="Tab1" />
Tabs.svelte
<script>
export let children = [], index=0, defaultName = "";
defaultName = children[0].component.name
</script>
{#each children as child , i (i)}
<button on:click={()=>{index=i; defaultName=child.component.name}}>{child.title}</button>
{/each}
<h2>Sekmenin Index değerine göre</h2>
{#each children as child , i (i)}
{#if i == index}
<svelte:component this={child.component} />
{/if}
{/each}
<hr>
<h2>Sekmenin Adına Göre(Benzersiz olmalı)</h2>
{#each children as child , i (i)}
{#if child.component.name == defaultName}
<svelte:component this={child.component} />
{/if}
{/each}
Tablo dışında bir yere tıklandığı zaman pencerenin gizlenmesini sağladım o yüzden kaydırma çubuğunun bir önemi kalmadı.
<table>
<thead>
<tr>
<th>Hafta</th>
<th>82981</th>
<th>82982</th>
<th>82983</th>
<th>82984</th>
<th>82985</th>
</tr>
</thead>
<tbody>
<?php
$rez = [
43 => [
82983 => [
[
'rentable_identity' => '82983'
]
],
82985 => [
[
'rentable_identity' => '82985'
]
],
82982 => [
[
'rentable_identity' => '82982'
],
[
'rentable_identity' => '82982'
]
]
],
44 => [
82983 => [
[
'rentable_identity' => '82983'
]
],
82985 => [
[
'rentable_identity' => '82985'
]
],
82982 => [
[
'rentable_identity' => '82982'
],
[
'rentable_identity' => '82982'
]
],
82981 => [
[
'rentable_identity' => '82982'
],
[
'rentable_identity' => '82982'
],
[
'rentable_identity' => '82982'
]
]
]
];
// Boş odalar listeye eklenmemiş o yüzden sütunların eşleşmesi için aşağıdaki gibi bir diziye ihtiyaç var.
$cols = [
82981, 82982, 82983, 82984, 82985
];
foreach ($rez as $key => $value) {
?>
<tr>
<td><?=$key; ?></td>
<?php
foreach($cols as $room) {
$roomCount = isset($value[$room]) ? count($value[$room]): 0;
?>
<td><?=$roomCount; ?></td>
<?php
}
?>
</tr>
<?php
}
?>
</tbody>
</table>
Klavye Kısayolları
Arama kutusuna: acceptSelectedSuggestion
İki seçenek çıkmalı biri Enter diğeri Tab olur sende Enter birisi hangisi sorunlu ise onu düzenle.
Gerçi bütün eklentilerini kaldırmışın bu saatten sonra kaldırıp temiz kurulum da yapabilirsin... :)
Neyse internette bir örnek gördüm iş görür gibi. Metod kullanarak çözmüş.
<div id="ebelge">
<div class="h-[100vh] bg-gradient-to-b from-[#1fa2ff] to-[#12d8fa] to-[#a6ffcb]">
<div>
<input type="text" v-model="optianal('evrakNo')">
<input type="text" v-model="optianal('aliciVKN')">
<input type="file" multiple accept=".xml" @change="parseXML" />
</div>
</div>
</div>
<script>
const newVue = new Vue({
el: '#ebelge',
data: {
index: 0,
invoices: [
{
evrakNo: "1"
}
]
},
methods: {
optianal(e) {
switch (e) {
case "evrakNo":
return this.invoices?.[this.index]?.evrakNo
break;
case "aliciVKN":
return this.invoices?.[this.index]?.aliciVKN
break;
default:
break;
}
},
parseXML(e) {
this.invoices = [];
this.index = 0;
const $xmlFiles = e.target.files;
for (let i of $xmlFiles) {
$.get(
URL.createObjectURL(i),
(xml) => {
this.invoices.push($.fn.earsivXML(xml, i.name));
},
"xml"
);
}
}
}
})
</script>
Herkese ilgisi ve yardımları için teşekkür ederim.
Gökhan Kandemir'in videolarından izlediğim kadarı ile kavramaya çalışıyorum.
Html sayfasına dahil ederek yapmak istiyordum.
Şimdi web sitesine baktığım da benim kullandığımdan farklı bir kullanım mevcut.
Sizin önerilerinize benziyor. Ama jsfiddle örneklerine baktım orada denememde çalışmadı ya da beceremedim.
Örnek: https://jsfiddle.net/TrSherlock/msayL02n/8/
Sanırsam bir şeyi gözden kaçırıyorum?
Çok hakim olmadığım bir konu.
For ve bir şey değiştiğinde her şeyin değişmesi hoşuma gitmişti.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="earsivXML.js"></script>
<div id="ebelge">
<div class="h-[100vh] bg-gradient-to-b from-[#1fa2ff] to-[#12d8fa] to-[#a6ffcb]">
<div>
<input type="text" v-model="invoices?.[0]?.evrakNo">
<input type="file" multiple accept=".xml" @change="parseXML" />
</div>
</div>
</div>
<script>
const newVue = new Vue({
el: '#ebelge',
data: {
index: 1,
invoices: [
{
evrakNo: "1"
}
]
},
methods: {
parseXML(e) {
this.invoices = [];
const $xmlFiles = e.target.files;
for (let i of $xmlFiles) {
$.get(
URL.createObjectURL(i),
(xml) => {
this.invoices.push($.fn.earsivXML(xml, i.name));
},
"xml"
);
}
}
}
})
</script>
Sorunu çözdüm süslü parantez içinde => data->{"anahtar"} gibi kullanırsan sorunun çözülür.
Kaynak: https://www.php.net/manual/en/class.stdclass.php
<?php
error_reporting(0);
$url = "http://hasanadiguzel.com.tr/api/akaryakit/sehir=ANKARA";
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, $url );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );
$wisex = json_decode( curl_exec( $ch ) );
$name = $wisex->data->{"17,62"}->{"Kursunsuz_95(Excellium95)_TL/lt"};
echo $name;
?>