كيفية عرض نموذج تعديل لبيانات النصوص والصور في PHP عند الضغط على زر تعديل

Omer Amad · 10 أغسطس

كيفكم يا أصدقاء.... فيه عندي بيانات نصوص وصور في جدول php مستلمة عن طريق form ... بدي اضع تعديل... عندما يتم الضغط زر تعديل تظهر لنا صفحة توجد فيها form تحتوي على المعلومات المراد تعديلها الاسم والعنوان والصورة الشخصية مثل ماموضح في صوره....

Taha Khaled2 · 10 أغسطس

وعليكم السلام , الموضع بسيط
اولا دعنا مثلا نعطي مثال ان لدينا جدول به بيانات وبه زر التعديل وعند الضغط عليه المفترض ان البيانات تنتقل في الحقول الاخر و المستخدم يستطيع التعديل عليها

اولا نضع كود ال html المسؤول عن الجدول و المودل

<!-- Table to display the data -->
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Photo</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        // Fetch data from your database
        foreach ($rows as $row) {
            echo "<tr>";
            echo "<td>{$row['name']}</td>";
            echo "<td>{$row['address']}</td>";
            echo "<td><img src='uploads/{$row['photo']}' width='100'></td>";
            echo "<td><button class='edit-btn' data-id='{$row['id']}' data-name='{$row['name']}' data-address='{$row['address']}' data-photo='{$row['photo']}'>Edit</button></td>";
            echo "</tr>";
        } 
        ?>
    </tbody>
</table>


<!-- Modal for editing -->
<div id="editModal" style="display:none;">
    <form id="editForm" method="POST" enctype="multipart/form-data">
       
        <input type="hidden" name="id" id="edit-id">
        <label for="edit-name">Name:</label>
        <input type="text" name="name" id="edit-name">
        <label for="edit-address">Address:</label>
        <input type="text" name="address" id="edit-address">
        <label for="edit-photo">Photo:</label>
        <input type="file" name="photo" id="edit-photo">
        <img id="current-photo" src="" width="100">
        <button type="submit" name="update">Update</button>
    </form>
</div>

ثما التنسيق الخاص بهم بواسطة css

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 18px;
    text-align: left;
}

table th, table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

table th {
    background-color: #f2f2f2;
    color: #333;
}

table tr:hover {
    background-color: #f1f1f1;
}

table img {
    border-radius: 5px;
    object-fit: cover;
}

.edit-btn {
    padding: 8px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.edit-btn:hover {
    background-color: #45a049;
}


/* Modal Background */
#editModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Modal Container */
#editForm {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Form Labels */
#editForm label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

/* Form Inputs */
#editForm input[type="text"],
#editForm input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Current Photo Display */
#current-photo {
    display: block;
    margin: 10px 0;
    border-radius: 5px;
}

/* Update Button */
#editForm button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

#editForm button:hover {
    background-color: #45a049;
}

/* Close Modal */
.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

واخيرا المنطق الخاص بالكود بواسطة js

document.addEventListener('DOMContentLoaded', function () {
    const editBtns = document.querySelectorAll('.edit-btn');
    const editModal = document.getElementById('editModal');
    const closeModalBtn = document.querySelector('.close-modal');
    
    editBtns.forEach(btn => {
        btn.addEventListener('click', function () {
            // Populate form fields
            document.getElementById('edit-id').value = this.getAttribute('data-id');
            document.getElementById('edit-name').value = this.getAttribute('data-name');
            document.getElementById('edit-address').value = this.getAttribute('data-address');
            document.getElementById('current-photo').src = 'uploads/' + this.getAttribute('data-photo');

            // Show the modal
            editModal.style.display = 'block';
        });
    });

    // Close the modal when clicking the close button
    closeModalBtn.addEventListener('click', function () {
        editModal.style.display = 'none';
    });

    // Close the modal when clicking outside of the form
    window.addEventListener('click', function (event) {
        if (event.target == editModal) {
            editModal.style.display = 'none';
        }
    });
});

وبهذه سيعطينا الشكل المطلوب

Omer Amad · 11 أغسطس

بتاريخ 15 ساعة قال Taha Khalid:

وعليكم السلام , الموضع بسيط
اولا دعنا مثلا نعطي مثال ان لدينا جدول به بيانات وبه زر التعديل وعند الضغط عليه المفترض ان البيانات تنتقل في الحقول الاخر و المستخدم يستطيع التعديل عليها

اولا نضع كود ال html المسؤول عن الجدول و المودل

<!-- Table to display the data -->
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Photo</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        // Fetch data from your database
        foreach ($rows as $row) {
            echo "<tr>";
            echo "<td>{$row['name']}</td>";
            echo "<td>{$row['address']}</td>";
            echo "<td><img src='uploads/{$row['photo']}' width='100'></td>";
            echo "<td><button class='edit-btn' data-id='{$row['id']}' data-name='{$row['name']}' data-address='{$row['address']}' data-photo='{$row['photo']}'>Edit</button></td>";
            echo "</tr>";
        } 
        ?>
    </tbody>
</table>


<!-- Modal for editing -->
<div id="editModal" style="display:none;">
    <form id="editForm" method="POST" enctype="multipart/form-data">
       
        <input type="hidden" name="id" id="edit-id">
        <label for="edit-name">Name:</label>
        <input type="text" name="name" id="edit-name">
        <label for="edit-address">Address:</label>
        <input type="text" name="address" id="edit-address">
        <label for="edit-photo">Photo:</label>
        <input type="file" name="photo" id="edit-photo">
        <img id="current-photo" src="" width="100">
        <button type="submit" name="update">Update</button>
    </form>
</div>

ثما التنسيق الخاص بهم بواسطة css

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 18px;
    text-align: left;
}

table th, table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

table th {
    background-color: #f2f2f2;
    color: #333;
}

table tr:hover {
    background-color: #f1f1f1;
}

table img {
    border-radius: 5px;
    object-fit: cover;
}

.edit-btn {
    padding: 8px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.edit-btn:hover {
    background-color: #45a049;
}


/* Modal Background */
#editModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Modal Container */
#editForm {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Form Labels */
#editForm label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

/* Form Inputs */
#editForm input[type="text"],
#editForm input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Current Photo Display */
#current-photo {
    display: block;
    margin: 10px 0;
    border-radius: 5px;
}

/* Update Button */
#editForm button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

#editForm button:hover {
    background-color: #45a049;
}

/* Close Modal */
.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

واخيرا المنطق الخاص بالكود بواسطة js

document.addEventListener('DOMContentLoaded', function () {
    const editBtns = document.querySelectorAll('.edit-btn');
    const editModal = document.getElementById('editModal');
    const closeModalBtn = document.querySelector('.close-modal');
    
    editBtns.forEach(btn => {
        btn.addEventListener('click', function () {
            // Populate form fields
            document.getElementById('edit-id').value = this.getAttribute('data-id');
            document.getElementById('edit-name').value = this.getAttribute('data-name');
            document.getElementById('edit-address').value = this.getAttribute('data-address');
            document.getElementById('current-photo').src = 'uploads/' + this.getAttribute('data-photo');

            // Show the modal
            editModal.style.display = 'block';
        });
    });

    // Close the modal when clicking the close button
    closeModalBtn.addEventListener('click', function () {
        editModal.style.display = 'none';
    });

    // Close the modal when clicking outside of the form
    window.addEventListener('click', function (event) {
        if (event.target == editModal) {
            editModal.style.display = 'none';
        }
    });
});

وبهذه سيعطينا الشكل المطلوب

الشرح غير واضح

Taha Khaled2 · 12 أغسطس

بتاريخ On 11‏/8‏/2024 at 09:37 قال Omer Amad:

الشرح غير واضح

دعنا نشرح الكود خطوخ خطوه
الجزء الأول: جدول البيانات (HTML)

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Photo</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        // Fetch data from your database
        foreach ($rows as $row) {
            echo "<tr>";
            echo "<td>{$row['name']}</td>";
            echo "<td>{$row['address']}</td>";
            echo "<td><img src='uploads/{$row['photo']}' width='100'></td>";
            echo "<td><button class='edit-btn' data-id='{$row['id']}' data-name='{$row['name']}' data-address='{$row['address']}' data-photo='{$row['photo']}'>Edit</button></td>";
            echo "</tr>";
        } 
        ?>
    </tbody>
</table>

جدول البيانات (<table>): يحتوي على جدول لعرض البيانات.

العنوان (<thead>): يحتوي على صف العناوين للأعمدة: الاسم، العنوان، الصورة، والإجراء.

الجسم (<tbody>): يحتوي على الصفوف التي يتم إنشاؤها باستخدام حلقة PHP. هذه الحلقة تمر عبر مصفوفة $rows التي تحتوي على بيانات من قاعدة البيانات.

PHP Loop:

يتم عرض كل صف من البيانات باستخدام foreach.

يتم طباعة كل قيمة من القيم ضمن خلايا الجدول (<td>).

يتم استخدام زر تحرير (Edit) مع بعض البيانات المخصصة التي ستمكنك من التعرف على العنصر عند الضغط عليه.

الجزء الثاني: نموذج التعديل (HTML وCSS)

<!-- Modal for editing -->
<div id="editModal" style="display:none;">
    <form id="editForm" method="POST" enctype="multipart/form-data">
       
        <input type="hidden" name="id" id="edit-id">
        <label for="edit-name">Name:</label>
        <input type="text" name="name" id="edit-name">
        <label for="edit-address">Address:</label>
        <input type="text" name="address" id="edit-address">
        <label for="edit-photo">Photo:</label>
        <input type="file" name="photo" id="edit-photo">
        <img id="current-photo" src="" width="100">
        <button type="submit" name="update">Update</button>
    </form>
</div>

النموذج (<div id="editModal">): نافذة منبثقة (modal) تظهر عند الحاجة لتعديل البيانات. في البداية تكون مخفية (display:none).
نموذج التعديل (<form>): يحتوي على عناصر إدخال لتحديث البيانات:
حقل مخفي (<input type="hidden">): لتخزين معرّف العنصر الذي سيتم تعديله.
حقول الإدخال (<input type="text">): لاسم والعنوان.
حقل رفع الصور (<input type="file">): لتحميل صورة جديدة.
صورة الحالية (<img>): لعرض الصورة الحالية حتى يمكن تغييرها إذا لزم الأمر.
زر التحديث (<button>): لتقديم النموذج وتحديث البيانات.

طريقة العمل:

عندما يضغط المستخدم على زر "Edit" في الجدول، يتم عرض النموذج المنبثق مع تعبئة الحقول بالمعلومات الحالية للعنصر.
يمكن للمستخدم تعديل المعلومات ثم تقديم النموذج لتحديث البيانات.

الجزء الثالث: ;كود (Java script)

هذا الكود يستخدم JavaScript لإدارة عرض نموذج التعديل (modal) وتعبئته بالبيانات المناسبة عند الضغط على زر "Edit". كما يتعامل مع إغلاق النموذج عند النقر على زر الإغلاق أو النقر خارج النموذج. دعنا نشرح كل جزء من الكود

Omer Amad · 13 أغسطس

بتاريخ 16 ساعة قال Taha Khalid:
دعنا نشرح الكود خطوخ خطوه
الجزء الأول: جدول البيانات (HTML)
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Photo</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        // Fetch data from your database
        foreach ($rows as $row) {
            echo "<tr>";
            echo "<td>{$row['name']}</td>";
            echo "<td>{$row['address']}</td>";
            echo "<td><img src='uploads/{$row['photo']}' width='100'></td>";
            echo "<td><button class='edit-btn' data-id='{$row['id']}' data-name='{$row['name']}' data-address='{$row['address']}' data-photo='{$row['photo']}'>Edit</button></td>";
            echo "</tr>";
        } 
        ?>
    </tbody>
</table>
جدول البيانات (<table>): يحتوي على جدول لعرض البيانات.

العنوان (<thead>): يحتوي على صف العناوين للأعمدة: الاسم، العنوان، الصورة، والإجراء.

الجسم (<tbody>): يحتوي على الصفوف التي يتم إنشاؤها باستخدام حلقة PHP. هذه الحلقة تمر عبر مصفوفة $rows التي تحتوي على بيانات من قاعدة البيانات.

PHP Loop:

يتم عرض كل صف من البيانات باستخدام foreach.

يتم طباعة كل قيمة من القيم ضمن خلايا الجدول (<td>).

يتم استخدام زر تحرير (Edit) مع بعض البيانات المخصصة التي ستمكنك من التعرف على العنصر عند الضغط عليه.

الجزء الثاني: نموذج التعديل (HTML وCSS)

<div id="editModal" style="display:none;">
    <form id="editForm" method="POST" enctype="multipart/form-data">
       
        <input type="hidden" name="id" id="edit-id">
        <label for="edit-name">Name:</label>
        <input type="text" name="name" id="edit-name">
        <label for="edit-address">Address:</label>
        <input type="text" name="address" id="edit-address">
        <label for="edit-photo">Photo:</label>
        <input type="file" name="photo" id="edit-photo">
        <img id="current-photo" src="" width="100">
        <button type="submit" name="update">Update</button>
    </form>
</div>
النموذج (<div id="editModal">): نافذة منبثقة (modal) تظهر عند الحاجة لتعديل البيانات. في البداية تكون مخفية (display:none).

نموذج التعديل (<form>): يحتوي على عناصر إدخال لتحديث البيانات:

حقل مخفي (<input type="hidden">): لتخزين معرّف العنصر الذي سيتم تعديله.

حقول الإدخال (<input type="text">): لاسم والعنوان.

حقل رفع الصور (<input type="file">): لتحميل صورة جديدة.

صورة الحالية (<img>): لعرض الصورة الحالية حتى يمكن تغييرها إذا لزم الأمر.

زر التحديث (<button>): لتقديم النموذج وتحديث البيانات.

طريقة العمل:

عندما يضغط المستخدم على زر "Edit" في الجدول، يتم عرض النموذج المنبثق مع تعبئة الحقول بالمعلومات الحالية للعنصر.

يمكن للمستخدم تعديل المعلومات ثم تقديم النموذج لتحديث البيانات.

الجزء الثالث: ;كود (Java script)

هذا الكود يستخدم JavaScript لإدارة عرض نموذج التعديل (modal) وتعبئته بالبيانات المناسبة عند الضغط على زر "Edit". كما يتعامل مع إغلاق النموذج عند النقر على زر الإغلاق أو النقر خارج النموذج. دعنا نشرح كل جزء من الكود

ارجوا الاطلاع على هذا الكود والاجابة

كيفية عرض نموذج تعديل لبيانات النصوص والصور في PHP عند الضغط على زر تعديل

السؤال

Omer Amad

4 أجوبة على هذا السؤال

Recommended Posts

Taha Khaled2

Omer Amad

Taha Khaled2

Omer Amad

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية