PHP ile formdan alınan verileri kullanarak dinamik bir HTML tablosu oluşturmak için bir sistem geliştirdim. Bu sistemde:
Kullanıcıdan satır ve sütun isimlerini virgülle ayırarak girmesi isteniyor. Hücre verileri de satırlara karşılık gelecek şekilde satır bazında giriliyor. Form gönderildiğinde PHP, verileri alıp işleyecek ve HTML tablosu olarak görüntüleyecek. Ek olarak, html2canvas kullanarak oluşturulan tabloyu PNG formatında indirme seçeneği de mevcut.Kullanım:
Satır ve sütun isimlerini ilgili alanlara virgülle ayırarak yazın.
Hücre değerlerini satır bazında virgülle ayırarak girin.
"Tablo Oluştur" butonuna basarak tabloyu görüntüleyin.
"Tabloyu İndir (PNG)" butonu ile tabloyu resim olarak kaydedin.Oluşturulan Tablo'nun .PNG Dosya Uzantılı Resim İndirme Ayrıntıları
1. PHP ile Kullanıcıdan Veri Alarak Tablo
Oluşturma
Formdan gelen satır, sütun ve hücre verilerini işleyerek tabloyu oluşturuyoruz. PHP ile
Kod: Tümünü seç
explode()Kod: Tümünü seç
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$satirlar = explode(",", trim($_POST['satirlar']));
$sutunlar = explode(",", trim($_POST['sutunlar']));
$hucreler = explode("\n", trim($_POST['hucreler']));
}2. HTML ve CSS ile Tabloyu Görselleştirme
HTML ve CSS ile tabloyu biçimlendirdik. Satır ve sütun başlıklarını renklendirerek okunabilirliği artırdık.
Kod: Tümünü seç
<table>
<tr>
<th></th>
<?php foreach ($sutunlar as $sutun) : ?>
<th><?= htmlspecialchars(trim($sutun)) ?></th>
<?php endforeach; ?>
</tr>
<?php foreach ($satirlar as $index => $satir) : ?>
<tr>
<td><b><?= htmlspecialchars(trim($satir)) ?></b></td>
<?php
$hucre_degerleri = isset($hucreler[$index]) ? explode(",", trim($hucreler[$index])) : ;
foreach ($hucre_degerleri as $hucre) : ?>
<td><?= htmlspecialchars(trim($hucre)) ?></td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</table>3. Tabloyu Resim Olarak Kaydetme (html2canvas ile) ....{Zurnanın zııııırt dediği yer}
Tabloyu bir resim dosyası olarak kaydetmek için
Kod: Tümünü seç
html2canvas.jsİnternetsiz Ortamda Kullanım
İnternete ihtiyaç duymadan çalıştırmak için
Kod: Tümünü seç
html2canvas.min.jsArdından, aşağıdaki JavaScript kodu ile tabloyu resim olarak kaydetme işlemini gerçekleştirdik:
Kod: Tümünü seç
function downloadTable() {
html2canvas(document.querySelector("table")).then(canvas => {
let link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = "tablo.png";
link.click();
});
}Sonuç ve Test
Sistemin internet bağlantısını keserek
Kod: Tümünü seç
html2canvas.min.js
Artık oluşturduğumuz tabloyu hem dinamik olarak görüntüleyebilir hem de PNG formatında kaydedebiliriz. Sorularınız olursa yorumlarda belirtebilirsiniz. 
NOT :
Bu mekanizma forum türlerinden bağımsız değil mi?
CEVAP :
Evet, bu mekanizma forum türlerinden bağımsızdır. PHP tabanlı herhangi bir forum yazılımında (phpBB, MyBB, SMF vb.) veya bağımsız bir PHP sayfasında çalışabilir. Önemli olan, html2canvas.min.js dosyasının doğru şekilde dahil edilmesi ve PHP form verilerinin işlenerek tablo oluşturulmasıdır. Yani, forumun altyapısı ne olursa olsun, doğru entegrasyon yapıldığı sürece bu sistem sorunsuz çalışacaktır.
İyi çalışmalar!
KOD İÇERİĞİ : ( table_generator.php <<< html2canvas.min.js dosyası betik içinde eklenmiştir.)
Kod: Tümünü seç
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$satirlar = explode(",", trim($_POST['satirlar']));
$sutunlar = explode(",", trim($_POST['sutunlar']));
$hucreler = explode("\n", trim($_POST['hucreler']));
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tablo Oluşturucu</title>
<style>
body { font-family: Arial, sans-serif; }
h1 { text-align: left; margin-bottom: 5px; }
hr { border: 0; height: 2px; background: black; margin-bottom: 15px; }
label { display: block; font-weight: bold; margin: 10px 0 5px; }
textarea, input { width: 300px; height: 60px; resize: both; font-size: 1.25em; }
button { margin-top: 10px; }
.form-container { width: 320px; margin-bottom: 20px; }
table { border-collapse: collapse; margin-top: 20px; font-size: 1.105em; }
th, td { border: 1px solid black; padding: 8px; text-align: center; }
th { background-color: pink; }
td:first-child, th:first-child { background-color: lightblue; font-weight: bold; }
</style>
</head>
<body>
<h1>Tablo Oluşturucu</h1>
<hr>
<form method="post">
<div class="form-container">
<label>Satır İsimleri (Virgülle Ayır)</label>
<textarea name="satirlar"></textarea>
<hr>
<label>Sütun İsimleri (Virgülle Ayır)</label>
<textarea name="sutunlar"></textarea>
<hr>
<label>Hücre Verileri (Her Satıra Karşılık Giriş - Virgülle Ayır)</label>
<textarea name="hucreler"></textarea>
<hr>
<button type="submit">Tablo Oluştur</button>
</div>
</form>
<?php if (!empty($satirlar) && !empty($sutunlar) && !empty($hucreler)) : ?>
<h2>HTML Önizleme: Oluşturulan Tablo</h2>
<table>
<tr>
<th></th>
<?php foreach ($sutunlar as $sutun) : ?>
<th><?= htmlspecialchars(trim($sutun)) ?></th>
<?php endforeach; ?>
</tr>
<?php foreach ($satirlar as $index => $satir) : ?>
<tr>
<td><b><?= htmlspecialchars(trim($satir)) ?></b></td>
<?php
$hucre_degerleri = isset($hucreler[$index]) ? explode(",", trim($hucreler[$index])) : ;
foreach ($hucre_degerleri as $hucre) : ?>
<td><?= htmlspecialchars(trim($hucre)) ?></td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</table>
<button onclick="downloadTable()">Tabloyu İndir (PNG)</button>
<?php endif; ?>
<script src="html2canvas.min.js"></script>
<script>
function downloadTable() {
html2canvas(document.querySelector("table")).then(canvas => {
let link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = "tablo.png";
link.click();
});
}
</script>
</body>
</html>Gerekli dosyaların forum'un ana dizinin de bir arada bulunması ...(Sistem : GNU/Linux Mint 21.1 x64 LXDE-Yerel Makine Üzerinde bbforum)
Web tarayıcısının satırına (firefox v135 x64)
Kod: Tümünü seç
http://localhost/phpbb/table_generator.php
NOT:
Forumlardaki klasik tablo oluşturmanın ötesine geçildi.(Matris şeklinde tablo oluşturma )..
SONUÇ
Oluşturulan resmin sistem'e indirildikten sonra , resim sunucusuna yükleyerek
Kod: Tümünü seç
[img][/img]
