فرم آپلود تصویر را با استفاده از فریم‌ورک بوت‌استرپ (Bootstrap) طراحی می‌کنیم. بوت‌استرپ به ما این امکان را می‌دهد که به راحتی طراحی زیبایی ایجاد کنیم بدون نیاز به نوشتن CSS زیاد. 1. کد HTML با بوت‌استرپ: ابتدا کد HTML فرم را با استفاده از بوت‌استرپ تنظیم می‌کنیم. برای اینکه از ویژگی‌های بوت‌استرپ استفاده کنیم، باید فایل‌های CSS و JS بوت‌استرپ را در صفحه وارد کنیم. <!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>فرم آپلود تصویر</title> <!-- لینک به بوت‌استرپ 5 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <style> /* پروگرس بار */ #progressWrapper { display: none; margin-top: 20px; } #progressBar { width: 100%; height: 20px; background-color: #f3f3f3; border-radius: 5px; } #progress { height: 100%; width: 0; background-color: #28a745; border-radius: 5px; } </style> </head> <body> <div class="container mt-5"> <h2 class="text-center mb-4">فرم آپلود تصویر</h2> <form id="uploadForm" enctype="multipart/form-data"> <div class="mb-3"> <label for="name" class="form-label">نام و نام خانوادگی:</label> <input type="text" class="form-control" id="name" name="name" required> </div> <div class="mb-3"> <label for="image" class="form-label">انتخاب تصویر:</label> <input type="file" class="form-control" id="image" name="image" accept="image/*" required> </div> <button type="submit" class="btn btn-primary">ارسال</button> </form> <!-- نمایش پروگرس بار --> <div id="progressWrapper"> <p>در حال آپلود: <span id="progressText">0%</span></p> <div id="progressBar"> <div id="progress"></div> </div> </div> </div> <!-- اسکریپت‌های جاوااسکریپت --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <script src="/script.js"></script> </body> </html> 2. کد جاوااسکریپت (AJAX) در این بخش همانطور که قبلاً ذکر شد، از FormData و XMLHttpRequest استفاده می‌کنیم تا فایل آپلود شده را به سرور ارسال کنیم و پروگرس بار را به نمایش درآوریم. $(document).ready(function() { $("#uploadForm").submit(function(event) { event.preventDefault(); // نمایش پروگرس بار $("#progressWrapper").show(); var formData = new FormData(this); $.ajax({ url: "upload.php", // فایل PHP برای پردازش type: "POST", data: formData, contentType: false, processData: false, xhr: function() { var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var percent = (e.loaded / e.total) * 100; $("#progress").width(percent + "%"); $("#progressText").text(Math.round(percent) + "%"); } }); return xhr; }, success: function(response) { alert("آپلود با موفقیت انجام شد!"); console.log(response); $("#progressWrapper").hide(); }, error: function(xhr, status, error) { alert("خطا در آپلود فایل!"); $("#progressWrapper").hide(); } }); }); }); 3. کد PHP برای پردازش آپلود کد PHP برای پردازش فایل آپلودی به شکل مشابهی خواهد بود که قبلاً ذکر شد: <?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { $uploadDir = 'uploads/'; // مسیر پوشه آپلودها $maxFileSize = 5 * 1024 * 1024; // حداکثر حجم فایل 5MB $allowedTypes = ['image/jpeg', 'image/png', 'image/gif']; // انواع فایل مجاز $name = $_POST['name']; // گرفتن نام و نام خانوادگی $file = $_FILES['image']; // بررسی نوع فایل if (!in_array($file['type'], $allowedTypes)) { echo 'فرمت فایل مجاز نیست.'; exit; } // بررسی اندازه فایل if ($file['size'] > $maxFileSize) { echo 'حجم فایل بیش از حد مجاز است.'; exit; } // ساخت نام تصادفی برای فایل $fileName = uniqid('img_') . '.' . pathinfo($file['name'], PATHINFO_EXTENSION); // مسیر نهایی فایل $uploadPath = $uploadDir . $fileName; // انتقال فایل به پوشه مقصد if (move_uploaded_file($file['tmp_name'], $uploadPath)) { echo 'فایل با موفقیت آپلود شد!'; } else { echo 'خطا در آپلود فایل!'; } } else { echo 'درخواست غیر معتبر'; } ?> توضیحات: بوت‌استرپ: این فریم‌ورک به شما کمک می‌کند تا بدون نوشتن CSS زیاد، فرم خود را به شکلی زیبا طراحی کنید. در اینجا از کلاس‌های بوت‌استرپ برای استایل‌دهی به فرم و دکمه‌ها استفاده شده است. پروگرس بار: به محض اینکه آپلود شروع می‌شود، یک پروگرس بار به نمایش درمی‌آید که درصد آپلود فایل را نشان می‌دهد. AJAX: فرم به صورت AJAX ارسال می‌شود و صفحه رفرش نمی‌شود. PHP: فایل‌ها در سرور ذخیره می‌شوند و انواع فایل و حجم آن‌ها محدود به تنظیمات مشخص شده‌اند. این روش ساده و امن برای ایجاد فرم آپلود تصویر با استفاده از بوت‌استرپ، AJAX و PHP است.
ادامه مطلب
پنجشنبه, 13 آذر 1403
آموزش
استفاده از هوش مصنوعی در چت AJAX و PHP با ذخیره‌سازی داده‌ها در پایگاه داده MySQL
سلام! برای استفاده از هوش مصنوعی در چت با استفاده از AJAX و PHP و ذخیره‌سازی داده‌ها در پایگاه داده MySQL، مراحل زیر را می‌توانید دنبال کنید: مراحل کلی: ساخت پایگاه داده MySQL: ابتدا باید یک پایگاه داده MySQL برای ذخیره‌سازی داده‌های چت ایجاد کنید. این داده‌ها می‌توانند شامل پیام‌ها، تاریخ و زمان ارسال، و وضعیت پیام‌ها (خوانده شده یا نشده) باشند. ایجاد API برای ارتباط با PHP و MySQL: برای ارتباط بین چت (که به طور معمول از AJAX استفاده می‌کند) و پایگاه داده، باید یک API در PHP طراحی کنید که داده‌ها را از پایگاه داده خوانده و در صورت لزوم، پیام‌ها را ذخیره کند. پیاده‌سازی هوش مصنوعی در چت: می‌توانید از سرویس‌های هوش مصنوعی مانند OpenAI، GPT-3 یا GPT-4، یا حتی مدل‌های خاص خودتان استفاده کنید تا چت را هوشمندتر کنید. این مدل‌ها می‌توانند پاسخ‌های خودکار به پیام‌های کاربر بدهند. پیاده‌سازی AJAX برای ارسال و دریافت پیام‌ها: از AJAX برای ارسال و دریافت داده‌ها به صورت غیر همزمان استفاده می‌کنید. به این ترتیب، صفحه چت بدون نیاز به بارگذاری مجدد به روز می‌شود. 1. ساخت پایگاه داده MySQL ابتدا یک پایگاه داده و جدول برای ذخیره پیام‌ها بسازید: CREATE DATABASE chat_db; USE chat_db; CREATE TABLE messages ( id INT AUTO_INCREMENT PRIMARY KEY, user_message TEXT, bot_response TEXT, timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); 2. کدنویسی PHP برای ذخیره و خواندن پیام‌ها ایجاد یک فایل PHP برای ذخیره پیام‌های کاربر و پاسخ‌های هوش مصنوعی: save_message.php <?php $servername = "localhost"; $username = "root"; // نام کاربری MySQL $password = ""; // رمز عبور MySQL $dbname = "chat_db"; // ایجاد اتصال به دیتابیس $conn = new mysqli($servername, $username, $password, $dbname); // بررسی اتصال if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $user_message = $_POST['user_message']; $bot_response = $_POST['bot_response']; // ذخیره پیام‌ها در پایگاه داده $sql = "INSERT INTO messages (user_message, bot_response) VALUES ('$user_message', '$bot_response')"; if ($conn->query($sql) === TRUE) { echo "New record created successfully"; } else { echo "Error: " . $sql . "<br>" . $conn->error; } $conn->close(); ?> get_messages.php <?php $servername = "localhost"; $username = "root"; // نام کاربری MySQL $password = ""; // رمز عبور MySQL $dbname = "chat_db"; // ایجاد اتصال به دیتابیس $conn = new mysqli($servername, $username, $password, $dbname); // بررسی اتصال if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } // خواندن پیام‌ها از دیتابیس $sql = "SELECT user_message, bot_response FROM messages ORDER BY timestamp ASC"; $result = $conn->query($sql); $messages = []; if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $messages[] = $row; } } echo json_encode($messages); $conn->close(); ?> 3. پیاده‌سازی هوش مصنوعی (مانند OpenAI GPT) برای اینکه بتوانید از GPT-3 یا GPT-4 برای پاسخ به پیام‌های کاربران استفاده کنید، باید یک درخواست به API OpenAI ارسال کنید. chat_with_ai.php <?php $api_key = "YOUR_OPENAI_API_KEY"; $api_url = "https://api.openai.com/v1/completions"; $user_message = $_POST['user_message']; $data = [ "model" => "gpt-4", // یا gpt-3.5 برای نسخه قدیمی‌تر "prompt" => $user_message, "max_tokens" => 150, "temperature" => 0.7 ]; $options = [ 'http' => [ 'header' => "Content-type: application/json\r\n" . "Authorization: Bearer $api_key\r\n", 'method' => 'POST', 'content' => json_encode($data) ] ]; $context = stream_context_create($options); $response = file_get_contents($api_url, false, $context); $response_data = json_decode($response, true); $bot_response = $response_data['choices'][0]['text']; echo $bot_response; ?> 4. پیاده‌سازی AJAX برای ارسال و دریافت پیام‌ها در نهایت، از AJAX برای ارسال پیام‌ها به سرور و دریافت پاسخ استفاده می‌کنید. این کار باعث می‌شود که تجربه کاربری روان و بدون بارگذاری مجدد صفحه باشد. chat.js // ارسال پیام به سرور و دریافت پاسخ از هوش مصنوعی function sendMessage() { const userMessage = document.getElementById("userMessage").value; // ارسال پیام به PHP و ذخیره در دیتابیس $.ajax({ url: "chat_with_ai.php", type: "POST", data: { user_message: userMessage }, success: function(response) { const botResponse = response.trim(); document.getElementById("chatBox").innerHTML += "<p>User: " + userMessage + "</p>"; document.getElementById("chatBox").innerHTML += "<p>Bot: " + botResponse + "</p>"; document.getElementById("userMessage").value = ""; // ذخیره پیام‌ها در دیتابیس $.ajax({ url: "save_message.php", type: "POST", data: { user_message: userMessage, bot_response: botResponse }, success: function() { console.log("Message saved successfully."); } }); } }); } // بارگذاری پیام‌های قبلی از دیتابیس function loadMessages() { $.ajax({ url: "get_messages.php", type: "GET", success: function(response) { const messages = JSON.parse(response); messages.forEach(message => { document.getElementById("chatBox").innerHTML += "<p>User: " + message.user_message + "</p>"; document.getElementById("chatBox").innerHTML += "<p>Bot: " + message.bot_response + "</p>"; }); } }); } // بارگذاری پیام‌ها هنگام بارگذاری صفحه window.onload = loadMessages; HTML برای نمایش چت: <!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat AI</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="/chat.js"></script> </head> <body> <div id="chatBox"></div> <input type="text" id="userMessage" placeholder="پیام خود را وارد کنید..."> <button onclick="sendMessage()">ارسال</button> </body> </html> توضیحات: chat_with_ai.php از OpenAI API برای دریافت پاسخ هوش مصنوعی استفاده می‌کند. save_message.php پیام‌های کاربر و پاسخ‌های هوش مصنوعی را در پایگاه داده MySQL ذخیره می‌کند. get_messages.php پیام‌ها را از پایگاه داده می‌خواند و به صورت JSON ارسال می‌کند. AJAX به شما این امکان را می‌دهد که بدون بارگذاری مجدد صفحه، پیام‌ها را ارسال و دریافت کنید. این مراحل یک سیستم چت ساده با استفاده از PHP، MySQL و هوش مصنوعی را ایجاد می‌کند. البته برای استفاده در پروژه‌های بزرگ‌تر، ممکن است نیاز به بهینه‌سازی و امنیت بیشتر داشته باشید (مثل استفاده از prepared statements در PHP برای جلوگیری از SQL injection).
ادامه مطلب
- پنجشنبه, 13 آذر 1403
- آموزش
دریافت داده‌ها از کاربر به صورت JSON و نمایش دوباره آن‌ها به صورت JSON در
برای دریافت داده‌ها از کاربر به صورت JSON و نمایش دوباره آن‌ها به صورت JSON در PHP، معمولاً از متدهای POST یا GET استفاده می‌کنیم. در اینجا یک نمونه کد ساده برای دریافت داده‌ها از کاربر به صورت JSON و سپس نمایش آن‌ها به صورت JSON آورده‌ام: مراحل: دریافت داده‌ها به صورت JSON از درخواست POST. پردازش داده‌ها (در اینجا فقط بازتاب آن‌ها به صورت JSON). ارسال پاسخ به صورت JSON. نمونه کد PHP: <?php // تنظیم هدر برای اعلام نوع داده JSON header('Content-Type: application/json'); // بررسی اینکه درخواست از نوع POST است if ($_SERVER['REQUEST_METHOD'] === 'POST') { // دریافت داده‌های خام JSON از بدن درخواست $json_input = file_get_contents('php://input'); // تبدیل داده‌های JSON به آرایه یا شیء PHP $data = json_decode($json_input, true); // بررسی اینکه آیا داده‌های JSON معتبر هستند if ($data === null) { // اگر JSON نامعتبر بود، ارور برمی‌گردانیم echo json_encode(["error" => "Invalid JSON data"]); } else { // در اینجا می‌توانید داده‌ها را پردازش کنید (در این مثال، فقط آن‌ها را برمی‌گردانیم) // ارسال داده‌ها به صورت JSON به کاربر echo json_encode([ "status" => "success", "received_data" => $data ]); } } else { // اگر درخواست از نوع POST نباشد، ارور می‌دهیم echo json_encode(["error" => "Only POST requests are allowed"]); } ?> توضیحات کد: خط اول: هدر Content-Type را برای اعلام نوع پاسخ به JSON تنظیم می‌کنیم. خط پنجم: بررسی می‌کنیم که آیا درخواست از نوع POST است. خط هشتم: داده‌های JSON را از بدنه درخواست دریافت می‌کنیم. خط یازدهم: داده‌های JSON را با استفاده از json_decode به آرایه PHP تبدیل می‌کنیم. خط سیزدهم: اگر JSON نامعتبر باشد، پیام خطا ارسال می‌کنیم. خط بیست و یکم: داده‌های دریافت شده را به صورت JSON مجدد به کاربر ارسال می‌کنیم. ارسال درخواست از طریق POST به این API: برای ارسال درخواست از نوع POST با JSON، می‌توانید از ابزارهایی مانند Postman یا کد زیر در جاوااسکریپت استفاده کنید: fetch('URL_OF_YOUR_PHP_FILE.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'John Doe', age: 30 }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); مثال خروجی: اگر داده‌های JSON به صورت زیر ارسال شوند: { "name": "John Doe", "age": 30 } پاسخ دریافتی به صورت زیر خواهد بود: { "status": "success", "received_data": { "name": "John Doe", "age": 30 } } این کد می‌تواند به شما کمک کند تا داده‌ها را از کاربر دریافت کرده و به صورت JSON پاسخ دهید. اگر سوال یا مشکل خاصی دارید، خوشحال می‌شوم که بیشتر کمک کنم!
ادامه مطلبتازه های سایت
-
ساده ترین روش تبدیل تاریخ میلادی به شمسی
آموزش برنامه نویسی جوملا
-
طراحی ماژول اپلود تصاویر با اجاکس و بوت استراپ
آموزش برنامه نویسی جوملا
-
-
یک کامپوننت جوملا با استفاده از PHP و MySQL بسازید.
آموزش برنامه نویسی جوملا
-
برنامه نویسی و طراحی یک پلاگین چت با هوش مصنوعی در وردپرس
آموزش برنامه نویسی وردپرس