Yazılım Adası

Gönderilme zamanı: **03 Mar 2025 18:39**

Merhaba arkadaşlar,

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()

fonksiyonunu kullanarak girişleri ayırıyor ve tablo içinde düzenli bir şekilde yerleştiriyoruz.

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']));
}

Bu kod, kullanıcının girdiği verileri satır ve sütunlara uygun şekilde parçalayarak işlemeye hazır hale getiriyor.

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ç

&lt;table&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;?php foreach ($sutunlar as $sutun) : ?&gt;
&lt;th&gt;&lt;?= htmlspecialchars(trim($sutun)) ?&gt;&lt;/th&gt;
&lt;?php endforeach; ?&gt;
&lt;/tr&gt;
&lt;?php foreach ($satirlar as $index =&gt; $satir) : ?&gt;
&lt;tr&gt;
&lt;td&gt;&lt;b&gt;&lt;?= htmlspecialchars(trim($satir)) ?&gt;&lt;/b&gt;&lt;/td&gt;
&lt;?php
$hucre_degerleri = isset($hucreler[$index]) ? explode(",", trim($hucreler[$index])) : ;
foreach ($hucre_degerleri as $hucre) : ?&gt;
&lt;td&gt;&lt;?= htmlspecialchars(trim($hucre)) ?&gt;&lt;/td&gt;
&lt;?php endforeach; ?&gt;
&lt;/tr&gt;
&lt;?php endforeach; ?&gt;
&lt;/table&gt;

Bu yapı, oluşturulan tabloyu HTML içinde düzgün bir şekilde görüntülememizi sağlıyor.

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

kütüphanesini kullandık.

İnternetsiz Ortamda Kullanım

İnternete ihtiyaç duymadan çalıştırmak için

Kod: Tümünü seç

html2canvas.min.js

dosyasını proje dizinine (phpBB ana dizinine) kopyaladık ve aşağıdaki şekilde HTML sayfamıza ekledik:

Ardı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 =&gt; {
let link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = "tablo.png";
link.click();
});
}

Bu fonksiyon, tabloyu görüntüye çeviriyor ve kullanıcıya indirme bağlantısı sunuyor.

Sonuç ve Test

Sistemin internet bağlantısını keserek

Kod: Tümünü seç

html2canvas.min.js

dosyasının proje dizininde çalışıp çalışmadığını test ettik. Her şey sorunsuz çalıştı!

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ç

&lt;?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$satirlar = explode(",", trim($_POST['satirlar']));
$sutunlar = explode(",", trim($_POST['sutunlar']));
$hucreler = explode("\n", trim($_POST['hucreler']));
}
?&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="tr"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;Tablo Oluşturucu&lt;/title&gt;
&lt;style&gt;
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; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Tablo Oluşturucu&lt;/h1&gt;
&lt;hr&gt;
&lt;form method="post"&gt;
&lt;div class="form-container"&gt;
&lt;label&gt;Satır İsimleri (Virgülle Ayır)&lt;/label&gt;
&lt;textarea name="satirlar"&gt;&lt;/textarea&gt;
&lt;hr&gt;
&lt;label&gt;Sütun İsimleri (Virgülle Ayır)&lt;/label&gt;
&lt;textarea name="sutunlar"&gt;&lt;/textarea&gt;
&lt;hr&gt;
&lt;label&gt;Hücre Verileri (Her Satıra Karşılık Giriş - Virgülle Ayır)&lt;/label&gt;
&lt;textarea name="hucreler"&gt;&lt;/textarea&gt;
&lt;hr&gt;
&lt;button type="submit"&gt;Tablo Oluştur&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;?php if (!empty($satirlar) &amp;&amp; !empty($sutunlar) &amp;&amp; !empty($hucreler)) : ?&gt;
&lt;h2&gt;HTML Önizleme: Oluşturulan Tablo&lt;/h2&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;?php foreach ($sutunlar as $sutun) : ?&gt;
&lt;th&gt;&lt;?= htmlspecialchars(trim($sutun)) ?&gt;&lt;/th&gt;
&lt;?php endforeach; ?&gt;
&lt;/tr&gt;
&lt;?php foreach ($satirlar as $index =&gt; $satir) : ?&gt;
&lt;tr&gt;
&lt;td&gt;&lt;b&gt;&lt;?= htmlspecialchars(trim($satir)) ?&gt;&lt;/b&gt;&lt;/td&gt;
&lt;?php
$hucre_degerleri = isset($hucreler[$index]) ? explode(",", trim($hucreler[$index])) : ;
foreach ($hucre_degerleri as $hucre) : ?&gt;
&lt;td&gt;&lt;?= htmlspecialchars(trim($hucre)) ?&gt;&lt;/td&gt;
&lt;?php endforeach; ?&gt;
&lt;/tr&gt;
&lt;?php endforeach; ?&gt;
&lt;/table&gt;
&lt;button onclick="downloadTable()"&gt;Tabloyu İndir (PNG)&lt;/button&gt;
&lt;?php endif; ?&gt;

&lt;script src="html2canvas.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
function downloadTable() {
html2canvas(document.querySelector("table")).then(canvas =&gt; {
let link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = "tablo.png";
link.click();
});
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Ekran Görüntüleri :

Gerekli dosyaların forum'un ana dizinin de bir arada bulunması ...(Sistem : GNU/Linux Mint 21.1 x64 LXDE-Yerel Makine Üzerinde bbforum)

Resim

Web tarayıcısının satırına (firefox v135 x64)

Kod: Tümünü seç

http://localhost/phpbb/table_generator.php

yazılarak HTML arayüze ulaşılması ve gerekli verilerin arayüzden girilmesi (klasik form-data input yöntemi)

Resim

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]

taglarına yazılması....

Resim

Gönderilme zamanı: **03 Mar 2025 21:31**

İnşallah bu forum'da , bu farklı özelliği kullanmaya başlarız.....

Gönderilme zamanı: **04 Mar 2025 01:52**

Daha da güzelleştirilmiş hali.... (betik güncellemesi) :

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>

Gönderilme zamanı: **04 Mar 2025 16:30**

Html tablosuna başlık da ekleyebilirsin. Bunun için html etiketi de var.

Gönderilme zamanı: **04 Mar 2025 16:34**

trasmus yazdı: 04 Mar 2025 16:30 Html tablosuna başlık da ekleyebilirsin. Bunun için html etiketi de var.

Aklıma geldi ama (yaptım da) ama beceremdim....

Gönderilme zamanı: **04 Mar 2025 16:37**

php dosyası 47. satırdan sonra ekle <caption>Tablo Adı</caption>

Gönderilme zamanı: **04 Mar 2025 17:14**

trasmus yazdı: 04 Mar 2025 16:37 php dosyası 47. satırdan sonra ekle <caption>Tablo Adı</caption>

Öncelikle çok teşekkür ederim, hem konuya katkı sunduğun için (forum mesajı yazma) hem de bana yardımcı olduğun için...

Güncellenmiş Kod İçeriği :

Kod: Tümünü seç

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $tabloAdi = trim($_POST['tabloAdi']);
    $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>Tablo Adı</label>
            <input type="text" name="tabloAdi" />
            <hr>
            <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>
            <caption><?= htmlspecialchars($tabloAdi) ?></caption>
            <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>

Ekran Görüntüleri : (sistem : GNU/Linux Mint 21.1 x64 LXDE)

Resim

SONUÇ :

Resim

NOT:

Betik dosyası güncellense bile orjinal dosyayı arşivleyerek yedekleyin...

Gönderilme zamanı: **04 Mar 2025 18:34**

@TRWE_2012 Github hesabı kullanırsan senin için daha kolay olur.

Gönderilme zamanı: **04 Mar 2025 19:12**

trasmus yazdı: 04 Mar 2025 18:34 @TRWE_2012 Github hesabı kullanırsan senin için daha kolay olur.

Ben amatörüm ve böyle daha iyi bence (önerin için teşekkürler)

Yazılım Adası

PHP ile Dinamik HTML Tablo Oluşturma

PHP ile Dinamik HTML Tablo Oluşturma

Re: PHP ile Dinamik HTML Tablo Oluşturma

Re: PHP ile Dinamik HTML Tablo Oluşturma

Re: PHP ile Dinamik HTML Tablo Oluşturma

Re: PHP ile Dinamik HTML Tablo Oluşturma

Re: PHP ile Dinamik HTML Tablo Oluşturma

Re: PHP ile Dinamik HTML Tablo Oluşturma

Re: PHP ile Dinamik HTML Tablo Oluşturma

Re: PHP ile Dinamik HTML Tablo Oluşturma