مساعدة في دمج الكودين معا php HTML js

لدي هذا الكود
<?php
session_start(); // بدء الجلسة

// التحقق إذا كانت الجلسة تحتوي على بيانات المستخدم
if (!isset($_SESSION['user_email']) && !isset($_COOKIE['user_email'])) {
    header('Location: register.php'); // إعادة التوجيه إذا لم تكن الجلسة أو ملفات تعريف الارتباط متوفرة
    exit();
}

// استرجاع بيانات المستخدم
$userEmail = isset($_SESSION['user_email']) ? $_SESSION['user_email'] : $_COOKIE['user_email'];
$userUsername = isset($_SESSION['user_username']) ? $_SESSION['user_username'] : $_COOKIE['user_username'];
$userPassword = isset($_SESSION['user_password']) ? $_SESSION['user_password'] : $_COOKIE['user_password'];
$userDescription = isset($_SESSION['user_description']) ? $_SESSION['user_description'] : $_COOKIE['user_description'];
$userProfilePicture = isset($_SESSION['user_profile_picture']) ? $_SESSION['user_profile_picture'] : $_COOKIE['user_profile_picture'];

if ($userProfilePicture) {
    $userProfilePicture = base64_decode($userProfilePicture);
}

require 'db.php'; // الاتصال بقاعدة البيانات

// استرجاع المنشورات الخاصة بالمستخدم مع بيانات صورة الملف الشخصي
$stmt = $pdo->prepare("
    SELECT posts.content, posts.image_urls, posts.created_at, users.username, users.profile_picture
    FROM posts
    JOIN users ON posts.user_id = users.id
    WHERE users.email = :email
    ORDER BY posts.created_at DESC
");
$stmt->execute(['email' => $userEmail]);
$posts = $stmt->fetchAll();
?>

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>الملف الشخصي</title>
</head>
<body>

<h1>الملف الشخصي</h1>

<!-- عرض بيانات المستخدم -->
<p><strong>البريد الإلكتروني:</strong> <input id="emailInput" type="text" value="<?= htmlspecialchars($userEmail) ?>" readonly></p>
<p><strong>اسم المستخدم:</strong> <?= htmlspecialchars($userUsername) ?></p>
<p><strong>الوصف:</strong> <?= nl2br(htmlspecialchars($userDescription)) ?></p>

<!-- عرض صورة الملف الشخصي -->
<?php if ($userProfilePicture): ?>
    <img src="data:image/jpeg;base64,<?= base64_encode($userProfilePicture) ?>" alt="صورة الملف الشخصي" style="width: 100px; height: 100px; border-radius: 50%;">
<?php endif; ?>

<!-- نموذج نشر منشور -->
<h2>نشر منشور جديد</h2>
<form method="POST" action="profile.php">
    <textarea name="content" placeholder="اكتب منشورك هنا..." required></textarea><br>
   
    <!-- حاوية روابط الصور -->
    <div id="imageFieldsContainer">
        <input type="url" name="image_urls[]" placeholder="رابط صورة (اختياري)" style="width: 100%;"><br>
    </div>

    <!-- زر لإضافة رابط صورة جديد -->
    <button type="button" id="addImageFieldButton" onclick="addImageField()">إضافة صورة</button><br><br>

    <button type="submit" name="submit_post">نشر المنشور</button>
</form>

<script>
    // دالة لإضافة حقل رابط صورة جديد
    function addImageField() {
        var container = document.getElementById('imageFieldsContainer');
        var inputField = document.createElement('input');
        inputField.type = 'url';
        inputField.name = 'image_urls[]';
        inputField.placeholder = 'رابط صورة (اختياري)';
        inputField.style.width = '100%';
        container.appendChild(inputField);
        container.appendChild(document.createElement('br')); // إضافة سطر جديد بعد الحقل
    }
</script>

<?php
// إضافة منشور جديد
if (isset($_POST['submit_post'])) {
    $content = $_POST['content'];
    // جمع روابط الصور (إذا كانت موجودة)
    $imageUrls = !empty($_POST['image_urls']) ? array_filter($_POST['image_urls']) : [];
   
    // تحويل روابط الصور إلى JSON
    $imageUrlsJson = $imageUrls ? json_encode($imageUrls) : null;

    try {
        $stmt = $pdo->prepare("INSERT INTO posts (user_id, content, image_urls) VALUES ((SELECT id FROM users WHERE email = :email), :content, :image_urls)");
        $stmt->execute(['email' => $userEmail, 'content' => $content, 'image_urls' => $imageUrlsJson]);

        // إعادة تحميل الصفحة
        header("Location: profile.php");
        exit();
    } catch (PDOException $e) {
        echo "حدث خطأ: " . $e->getMessage();
    }
}
?>

<!-- عرض المنشورات الخاصة بالمستخدم -->
<h2>منشوراتك</h2>
<?php if (count($posts) > 0): ?>
    <ul>
        <?php foreach ($posts as $post): ?>
            <li style="margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px;">
                <!-- صورة الناشر -->
                <?php if ($post['profile_picture']): ?>
                    <img src="data:image/jpeg;base64,<?= base64_encode($post['profile_picture']) ?>" alt="صورة الملف الشخصي" style="width: 50px; height: 50px; border-radius: 50%; display: inline-block;">
                <?php else: ?>
                    <img src="default-profile.png" alt="صورة افتراضية" style="width: 50px; height: 50px; border-radius: 50%; display: inline-block;">
                <?php endif; ?>

                <!-- اسم المستخدم -->
                <span style="margin-left: 10px; font-weight: bold;"><?= htmlspecialchars($post['username']) ?></span>

                <!-- محتوى المنشور -->
                <p style="margin-left: 60px;"><?= nl2br(htmlspecialchars($post['content'])) ?></p>

                <!-- صور المنشور -->
                <?php
                $imageUrls = json_decode($post['image_urls'], true);
                if ($imageUrls):
                ?>
                    <div style="margin-left: 60px;">
                        <?php foreach ($imageUrls as $imageUrl): ?>
                            <img src="<?= htmlspecialchars($imageUrl) ?>" alt="صورة المنشور" style="max-width: 100%; height: auto; margin-bottom: 10px;">
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <!-- وقت النشر -->
                <small style="margin-left: 60px; color: #666;">تم النشر في: <?= $post['created_at'] ?></small>
            </li>
        <?php endforeach; ?>
    </ul>
<?php else: ?>
    <p>لا توجد منشورات بعد.</p>
<?php endif; ?>

</body>
</html>

مع

اريد دمج الكود السابق مع هذا بحيث يتم اضافة روابط الصور مباشزة في حقلها في الكود الاول
<form id="upload-form" enctype="multipart/form-data">         <input type="file" name="file" id="file" accept="image/*,video/*" required>         <br><br>         <button type="submit">رفع</button>     </form>     <div id="progress-bar">         <div></div>     </div>     <div id="result"></div>     <h3>روابط الصور المضافة:</h3>     <div id="imageFieldsContainer"></div>     <script>         // دالة لإضافة حقل رابط صورة جديد         function addImageField(url = '') {             var container = document.getElementById('imageFieldsContainer');             var inputField = document.createElement('input');             inputField.type = 'url';             inputField.name = 'image_urls[]';             inputField.placeholder = 'رابط صورة (اختياري)';             inputField.style.width = '100%';             // إذا كان الرابط موجودًا، قم بضبط القيمة وجعل الحقل للقراءة فقط             if (url) {                 inputField.value = url;                 inputField.readOnly = true;             }             container.appendChild(inputField);             container.appendChild(document.createElement('br')); // إضافة سطر جديد بعد الحقل         }         document.getElementById('upload-form').addEventListener('submit', function(event) {             event.preventDefault();             var fileInput = document.getElementById('file');             var file = fileInput.files[0];             var formData = new FormData();             formData.append('file', file);             var xhr = new XMLHttpRequest();             xhr.open('POST', 'upload.php', true);             xhr.upload.onprogress = function(e) {                 if (e.lengthComputable) {                     var percentComplete = (e.loaded / e.total) * 100;                     document.querySelector('#progress-bar div').style.width = percentComplete + '%';                     document.querySelector('#progress-bar div').textContent = Math.round(percentComplete) + '%';                 }             };             xhr.onload = function() {                 if (xhr.status == 200) {                     var response = JSON.parse(xhr.responseText);                     var resultDiv = document.getElementById('result');                     if (response.success) {                         resultDiv.innerHTML = `<p>تم رفع الملف بنجاح. يمكنك الوصول إليه عبر الرابط التالي:</p>`;                         resultDiv.innerHTML += `<a href="${response.url}" target="_blank">${response.url}</a>`;                                                 // إضافة الرابط إلى حقل الصور تلقائيًا                         addImageField(response.url);                     } else {                         resultDiv.textContent = 'حدث خطأ أثناء رفع الملف.';                     }                 } else {                     alert('حدث خطأ أثناء محاولة رفع الملف.');                 }             };             xhr.send(formData);         });     </script>

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>الملف الشخصي</title>
</head>
<body>


    <h1>الملف الشخصي</h1>


    <!-- ... باقي الكود ... -->


    <!-- نموذج رفع الملفات -->
    <form id="upload-form" enctype="multipart/form-data">
        <input type="file" name="file" id="file" accept="image/*,video/*" required>
        <br><br>
        <button type="submit">رفع</button>
    </form>


    <div id="progress-bar">
        <div></div>
    </div>


    <div id="result"></div>


    <h3>روابط الصور المضافة:</h3>
    <div id="imageFieldsContainer"></div>


    <!-- ... باقي الكود ... -->


    <script>
        // ... دالة addImageField ...


        document.getElementById('upload-form').addEventListener('submit', function(event) {
            event.preventDefault();
            var fileInput = document.getElementById('file');
            var file = fileInput.files[0];
            var formData = new FormData();
            formData.append('file', file);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'upload.php', true);
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    document.querySelector('#progress-bar div').style.width = percentComplete + '%';
                    document.querySelector('#progress-bar div').textContent = Math.round(percentComplete) + '%';
                }
            };
            xhr.onload = function() {
                if (xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    var resultDiv = document.getElementById('result');
                    if (response.success) {
                        resultDiv.innerHTML = `<p>تم رفع الملف بنجاح. يمكنك الوصول إليه عبر الرابط التالي:</p>`;
                        resultDiv.innerHTML += `<a href="${response.url}" target="_blank">${response.url}</a>`;
                        // إضافة الرابط إلى حقل الصور تلقائيًا
                        addImageField(response.url);
                    } else {
                        resultDiv.textContent = 'حدث خطأ أثناء رفع الملف.';
                    }
                } else {
                    alert('حدث خطأ أثناء محاولة رفع الملف.');
                }
            };
            xhr.send(formData);
        });
    </script>


</body>
</html>

ثم إنشاء ملف upload.php:

<?php
// تحديد مجلد التخزين
$uploadDir = 'uploads/';


// التحقق من وجود ملف تم تحميله
if (isset($_FILES['file'])) {
    $file = $_FILES['file'];


    // التحقق من صحة الملف
    if ($file['error'] === UPLOAD_ERR_OK) {
        // إنشاء اسم ملف فريد
        $fileName = uniqid() . '_' . basename($file['name']);


        // مسار الملف النهائي
        $filePath = $uploadDir . $fileName;


        // نقل الملف إلى المجلد
        if (move_uploaded_file($file['tmp_name'], $filePath)) {
            // إنشاء رابط الملف
            $fileUrl = 'uploads/' . $fileName;


            // إرجاع استجابة JSON
            echo json_encode(['success' => true, 'url' => $fileUrl]);
        } else {
            echo json_encode(['success' => false, 'message' => 'حدث خطأ أثناء نقل الملف.']);
        }
    } else {
        echo json_encode(['success' => false, 'message' => 'حدث خطأ أثناء تحميل الملف.']);
    }
} else {
    echo json_encode(['success' => false, 'message' => 'لم يتم تحميل أي ملف.']);
}
?>

بخصوص التعديلات على profile.php أولها إزالة image_urls[] من نموذج النشر فلا حاجة إلى ذلك الحقل بعد إضافة حقل image_urls[] في addImageField.

ثم إضافة image_urls إلى قاعدة البيانات وتغيير استعلام INSERT في profile.php ليشمل image_urls من $_POST.

<?php
// ... الكود الأصلي ...


// إضافة منشور جديد
if (isset($_POST['submit_post'])) {
    $content = $_POST['content'];
    // جمع روابط الصور (إذا كانت موجودة)
    $imageUrls = !empty($_POST['image_urls']) ? array_filter($_POST['image_urls']) : [];


    // تحويل روابط الصور إلى JSON
    $imageUrlsJson = $imageUrls ? json_encode($imageUrls) : null;


    try {
        $stmt = $pdo->prepare("INSERT INTO posts (user_id, content, image_urls) VALUES ((SELECT id FROM users WHERE email = :email), :content, :image_urls)");
        $stmt->execute(['email' => $userEmail, 'content' => $content, 'image_urls' => $imageUrlsJson]);


        // إعادة تحميل الصفحة
        header("Location: profile.php");
        exit();
    } catch (PDOException $e) {
        echo "حدث خطأ: " . $e->getMessage();
    }
}


// ... باقي الكود ...

وعليك إنشاء مجلد uploads في نفس مجلد profile.php ليتم تخزين الملفات فيه.

تمام عصام

2024-11-20T15:04:04+00:00
2024-11-20T15:04:55+00:00
المزيد
- رابط مختصر

لقد استخدمت مكتبة

Dropzone.js و اصبح رفع الصور متعدد و افضل و عند دمج ملف الرفع مع ملف النشر يتم عمله جيدا لكن روابط الصور لا يتم ارسالها مع الطلب بعد الضغط على زر النشر اذا ممكن تراجع الكود و تعدله ان امكن لكي يتم تضمين روابط الصور في حقلها لكي يتم ارساله الى قاعدة البيانات

هذا كود جزء رفع الصور

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">
    <style>
        #result {
            margin-top: 20px;
            font-family: Arial, sans-serif;
            direction: rtl;
            text-align: right;
        }
        #imageFieldsContainer input {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">رفع الصور مع روابط إضافية</h2>

    <form id="upload-form" action="upload.php" class="dropzone"></form>

    <div id="imageFieldsContainer">
        <input type="url" name="image_urls[]" placeholder="رابط صورة (اختياري)" style="width: 100%;"><br>
    </div>
    <button type="button" onclick="addImageField()">إضافة رابط صورة جديد</button>

    <div id="result"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
    <script>
        Dropzone.options.uploadForm = {
            paramName: "file",
            maxFilesize: 10, // الحد الأقصى لحجم الملف (ميغابايت)
            acceptedFiles: "image/*,video/*",
            dictDefaultMessage: "اسحب الملفات هنا أو انقر للرفع",
            success: function (file, response) {
                var resultDiv = document.getElementById("result");
                if (response.success) {
                    // إضافة رابط الصورة إلى الحقول تلقائيًا
                    addImageFieldWithValue(response.url);

                    // عرض الرابط في النتائج
                    resultDiv.innerHTML += `<p>تم رفع الملف بنجاح. الرابط:</p>`;
                    resultDiv.innerHTML += `<a href="${response.url}" target="_blank">${response.url}</a><br>`;
                } else {
                    resultDiv.innerHTML += `<p style="color: red;">خطأ: ${response.error}</p>`;
                }
            },
            error: function (file, errorMessage) {
                alert("حدث خطأ أثناء محاولة رفع الملف: " + errorMessage);
            }
        };

        // دالة لإضافة حقل رابط صورة جديد يدويًا
        function addImageField() {
            var container = document.getElementById('imageFieldsContainer');
            var inputField = document.createElement('input');
            inputField.type = 'url';
            inputField.name = 'image_urls[]';
            inputField.placeholder = 'رابط صورة (اختياري)';
            inputField.style.width = '100%';
            container.appendChild(inputField);
            container.appendChild(document.createElement('br')); // إضافة سطر جديد بعد الحقل
        }

        // دالة لإضافة رابط صورة تلقائيًا
        function addImageFieldWithValue(url) {
            var container = document.getElementById('imageFieldsContainer');
            var inputField = document.createElement('input');
            inputField.type = 'url';
            inputField.name = 'image_urls[]';
            inputField.value = url;
            inputField.style.width = '100%';
            container.appendChild(inputField);
            container.appendChild(document.createElement('br')); // إضافة سطر جديد بعد الحقل
        }
    </script>

و هذ كود صفحة النشر

<?php
session_start(); // بدء الجلسة

// التحقق إذا كانت الجلسة تحتوي على بيانات المستخدم
if (!isset($_SESSION['user_email']) && !isset($_COOKIE['user_email'])) {
    header('Location: register.php'); // إعادة التوجيه إذا لم تكن الجلسة أو ملفات تعريف الارتباط متوفرة
    exit();
}

// استرجاع بيانات المستخدم
$userEmail = isset($_SESSION['user_email']) ? $_SESSION['user_email'] : $_COOKIE['user_email'];
$userUsername = isset($_SESSION['user_username']) ? $_SESSION['user_username'] : $_COOKIE['user_username'];
$userPassword = isset($_SESSION['user_password']) ? $_SESSION['user_password'] : $_COOKIE['user_password'];
$userDescription = isset($_SESSION['user_description']) ? $_SESSION['user_description'] : $_COOKIE['user_description'];
$userProfilePicture = isset($_SESSION['user_profile_picture']) ? $_SESSION['user_profile_picture'] : $_COOKIE['user_profile_picture'];

if ($userProfilePicture) {
    $userProfilePicture = base64_decode($userProfilePicture);
}

require 'db.php'; // الاتصال بقاعدة البيانات

// استرجاع المنشورات الخاصة بالمستخدم مع بيانات صورة الملف الشخصي
$stmt = $pdo->prepare("
    SELECT posts.content, posts.image_urls, posts.created_at, users.username, users.profile_picture
    FROM posts
    JOIN users ON posts.user_id = users.id
    WHERE users.email = :email
    ORDER BY posts.created_at DESC
");
$stmt->execute(['email' => $userEmail]);
$posts = $stmt->fetchAll();
?>

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>الملف الشخصي</title>
</head>
<body>

<h1>الملف الشخصي</h1>

<!-- عرض بيانات المستخدم -->
<p><strong>البريد الإلكتروني:</strong> <input id="emailInput" type="text" value="<?= htmlspecialchars($userEmail) ?>" readonly></p>
<p><strong>اسم المستخدم:</strong> <?= htmlspecialchars($userUsername) ?></p>
<p><strong>الوصف:</strong> <?= nl2br(htmlspecialchars($userDescription)) ?></p>

<!-- عرض صورة الملف الشخصي -->
<?php if ($userProfilePicture): ?>
    <img src="data:image/jpeg;base64,<?= base64_encode($userProfilePicture) ?>" alt="صورة الملف الشخصي" style="width: 100px; height: 100px; border-radius: 50%;">
<?php endif; ?>

<!-- نموذج نشر منشور -->
<h2>نشر منشور جديد</h2>
<form method="POST" action="profile.php">
    <textarea name="content" placeholder="اكتب منشورك هنا..." required></textarea><br>
   
    <!-- حاوية روابط الصور -->
    <div id="imageFieldsContainer">
        <input type="url" name="image_urls[]" placeholder="رابط صورة (اختياري)" style="width: 100%;"><br>
    </div>

    <!-- زر لإضافة رابط صورة جديد -->
    <button type="button" id="addImageFieldButton" onclick="addImageField()">إضافة صورة</button><br><br>

    <button type="submit" name="submit_post">نشر المنشور</button>
</form>

<script>
    // دالة لإضافة حقل رابط صورة جديد
    function addImageField() {
        var container = document.getElementById('imageFieldsContainer');
        var inputField = document.createElement('input');
        inputField.type = 'url';
        inputField.name = 'image_urls[]';
        inputField.placeholder = 'رابط صورة (اختياري)';
        inputField.style.width = '100%';
        container.appendChild(inputField);
        container.appendChild(document.createElement('br')); // إضافة سطر جديد بعد الحقل
    }
</script>

<?php
// إضافة منشور جديد
if (isset($_POST['submit_post'])) {
    $content = $_POST['content'];
    // جمع روابط الصور (إذا كانت موجودة)
    $imageUrls = !empty($_POST['image_urls']) ? array_filter($_POST['image_urls']) : [];
   
    // تحويل روابط الصور إلى JSON
    $imageUrlsJson = $imageUrls ? json_encode($imageUrls) : null;

    try {
        $stmt = $pdo->prepare("INSERT INTO posts (user_id, content, image_urls) VALUES ((SELECT id FROM users WHERE email = :email), :content, :image_urls)");
        $stmt->execute(['email' => $userEmail, 'content' => $content, 'image_urls' => $imageUrlsJson]);

        // إعادة تحميل الصفحة
        header("Location: profile.php");
        exit();
    } catch (PDOException $e) {
        echo "حدث خطأ: " . $e->getMessage();
    }
}
?>

<!-- عرض المنشورات الخاصة بالمستخدم -->
<h2>منشوراتك</h2>
<?php if (count($posts) > 0): ?>
    <ul>
        <?php foreach ($posts as $post): ?>
            <li style="margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px;">
                <!-- صورة الناشر -->
                <?php if ($post['profile_picture']): ?>
                    <img src="data:image/jpeg;base64,<?= base64_encode($post['profile_picture']) ?>" alt="صورة الملف الشخصي" style="width: 50px; height: 50px; border-radius: 50%; display: inline-block;">
                <?php else: ?>
                    <img src="default-profile.png" alt="صورة افتراضية" style="width: 50px; height: 50px; border-radius: 50%; display: inline-block;">
                <?php endif; ?>

                <!-- اسم المستخدم -->
                <span style="margin-left: 10px; font-weight: bold;"><?= htmlspecialchars($post['username']) ?></span>

                <!-- محتوى المنشور -->
                <p style="margin-left: 60px;"><?= nl2br(htmlspecialchars($post['content'])) ?></p>

                <!-- صور المنشور -->
                <?php
                $imageUrls = json_decode($post['image_urls'], true);
                if ($imageUrls):
                ?>
                    <div style="margin-left: 60px;">
                        <?php foreach ($imageUrls as $imageUrl): ?>
                            <img src="<?= htmlspecialchars($imageUrl) ?>" alt="صورة المنشور" style="max-width: 100%; height: auto; margin-bottom: 10px;">
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <!-- وقت النشر -->
                <small style="margin-left: 60px; color: #666;">تم النشر في: <?= $post['created_at'] ?></small>
            </li>
        <?php endforeach; ?>
    </ul>
<?php else: ?>
    <p>لا توجد منشورات بعد.</p>
<?php endif; ?>

</body>
</html>

تطوير الويب

مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.

91 ألف متابع

مساعدة في دمج الكودين معا php HTML js

التعليقات

تطوير الويب