« طراحی سایت و گرافیک »

✅ آموزش ساخت کپچا ساده با استفاده از جاوااسکریپت 👇👇

<!-- https://t.me/Web_Designer98 -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@Web_Designer98</title>
    <style>
      /* https://t.me/Web_Designer98 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        #captcha {
            font-size: 24px;
            margin: 10px;
        }
     /*  https://t.me/Web_Designer98 */
    </style>
</head>
<body>
<!-- https://t.me/Web_Designer98 -->
<h2>تأیید کپچا @Web_Designer98</h2>
<div id="captcha"></div>
<input type="text" id="captchaInput" placeholder="کد را وارد کنید">
<button onclick="validateCaptcha()">تأیید</button>
<p id="result"></p>
<!-- https://t.me/Web_Designer98 -->
<script>
    //https://t.me/Web_Designer98
    function generateCaptcha() {
        const captchaLength = 5;
        let captcha = '';
        for (let i = 0; i < captchaLength; i++) {
            captcha += Math.floor(Math.random() * 10); // تولید اعداد ۰ تا ۹
        }

      //https://t.me/Web_Designer98 
 document.getElementById('captcha').textContent = captcha;
        return captcha;
    }

    let generatedCaptcha = generateCaptcha();

    function validateCaptcha() {
        const userInput = document.getElementById('captchaInput').value;
        const result = document.getElementById('result');
        if (userInput === generatedCaptcha) {
            result.textContent = 'کپچا موفقیت آمیز بود! ✅';
        } else {
            result.textContent = 'کپچا ناموفق بود. لطفاً دوباره امتحان کنید. ❌';
            generatedCaptcha = generateCaptcha(); // تولید دوباره کپچا
            document.getElementById('captchaInput').value = ''; // پاک کردن فیلد ورودی
        }
    }
</script>
<!-- https://t.me/Web_Designer98 -->
</body>
</html>

💢 توضیحات:
1⃣ این کد یک کپچا عددی تصادفی ایجاد می‌کند.
2⃣ کاربر باید عدد تولید شده را در فیلد ورودی وارد کند.
3⃣ وقتی کاربر روی دکمه "تأیید" کلیک می‌کند، کپچا بررسی می‌شود و نتیجه نمایش داده می‌شود.
4⃣ اگر کاربر پاسخ نادرستی وارد کند، کپچا به‌طور تصادفی دوباره تولید می‌شود.
#css #html #js

🌈 Web_Designer98.t.me

494 views11:27

« طراحی سایت و گرافیک »

✅ آموزش ساخت Toast Message با جاوااسکریپت:

<!-- https://t.me/Web_Designer98 -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title> @Web_Designer98</title>
<style type="text/css">
body {
    font-family: Arial, sans-serif;
}

.toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

.toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
    from { bottom: 0; opacity: 0; }
    to { bottom: 30px; opacity: 1; }
}

@keyframes fadeout {
    from { bottom: 30px; opacity: 1; }
    to { bottom: 0; opacity: 0; }
}
</style>
<!-- https://t.me/Web_Designer98 -->
</head>
<body>
<!-- https://t.me/Web_Designer98 -->
    <button onclick="showToast()">نمایش پیام</button>
    <div id="toast" class="toast">پیام شما با موفقیت ارسال شد!</div>

<!-- https://t.me/Web_Designer98 -->

<!-- https://t.me/Web_Designer98 -->
<script type="text/Javascript">
function showToast() {
    const toast = document.getElementById("toast");
    toast.classList.add("show");

    setTimeout(() => {
        toast.classList.remove("show");
    }, 3000); 
}

</script>
<!-- https://t.me/Web_Designer98 -->
</body>
</html>

🌀 توضیحات:
➕ با کلیک بر روی دکمه "نمایش پیام"، تابع showToast فراخوانی می‌شود که پیام توست را نمایش می‌دهد، پیام به مدت 3 ثانیه در صفحه باقی می‌ماند و سپس محو می‌شود.
#css #html #js

🌈 Web_Designer98.t.me

329 views10:56

« طراحی سایت و گرافیک »

✅ آموزش ساخت کپچا کد با PHP

🔸در مثال مثال از ایجاد کپچا با استفاده از PHP و GD Library ارائه می‌دهم.

1⃣ ایجاد تصویر کپچا با php

🔸ابتدا یک فایل به نام captcha.php ایجاد کنید:

<?php
session_start();

#https://t.me/Web_Designer98
function generateRandomString($length = 6) {
    return substr(str_shuffle(str_repeat("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", $length)), 0, $length);
}

#https://t.me/Web_Designer98
$captcha_code = generateRandomString();
$_SESSION['captcha'] = $captcha_code;

#https://t.me/Web_Designer98
header('Content-Type: image/png');
$width = 200;
$height = 70;
$image = imagecreatetruecolor($width, $height);

#https://t.me/Web_Designer98
$background_color = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);
$line_color = imagecolorallocate($image, 64, 64, 64);
$arc_color = imagecolorallocate($image, 255, 0, 0);

#https://t.me/Web_Designer98
imagefilledrectangle($image, 0, 0, $width, $height, $background_color);

#https://t.me/Web_Designer98
for ($i = 0; $i < 5; $i++) {
    imageline($image, rand(0, $width), rand(0, $height), rand(0, $width), rand(0, $height), $line_color);
}
#https://t.me/Web_Designer98
for ($i = 0; $i < 3; $i++) {
    imagearc($image, rand(0, $width), rand(0, $height), rand(50, 100), rand(20, 80), rand(0, 360), rand(0, 360), $arc_color);
}

#https://t.me/Web_Designer98
imagettftext($image, 30, 0, 40, 50, $text_color, 'Arial.ttf', $captcha_code); 

# https://t.me/Web_Designer98
imagepng($image);
imagedestroy($image);
?>

2⃣ یک فرم HTML ایجاد کنید. نام این فایل را form.php بگذارید:

<!DOCTYPE html>
<!-- https://t.me/Web_Designer98 -->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web_Designer98</title>
</head>
<body>
<!-- https://t.me/Web_Designer98 -->
    <form action="process.php" method="post">
        <label for="captcha">کپچا: </label>
        <img src="captcha.php" alt="کپچا" /><br />
        <input type="text" name="captcha_input" required />
        <input type="submit" value="ارسال" />
    </form>
<!-- https://t.me/Web_Designer98 -->
</body>
</html>

3⃣ یک فایل دیگر به نام process.php ایجاد کنید

<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
#https://t.me/Web_Designer98
    $captcha_input = $_POST['captcha_input'];
    
    if ($_SESSION['captcha'] === $captcha_input) {
        echo "کپچا صحیح است!🤩";
    } else {
        echo "کپچا اشتباه است!😟";
    }
} else {
    echo "لطفا از طریق فرم ارسال کنید.";
}
# https://t.me/Web_Designer98
?>

💢 توضیحات:
1⃣ مطمئن شوید که GD Library روی سرور شما فعال است.

2⃣ برای فونت Arial.ttf، مطمئن شوید که فایل فونت در مسیر صحیح قرار دارد.

#css #html #js #php

🌈 Web_Designer98.t.me

278 viewsedited 09:36

« طراحی سایت و گرافیک »

✅ لیستی جامع از فریمورک‌های جاوااسکریپت شامل فریمورک‌های سمت کاربر و سمت سرور:

🔸 فریمورک‌های سمت کاربر:
1. React
2. Angular
3. Vue.js
4. Ember.js
5. Svelte
6. Backbone.js
7. Preact
8. Riot.js
9. Mithril
10. Inferno

🔸فریمورک‌های سمت سرور:
1. Express.js
2. Nest.js
3. Koa.js
4. Hapi.js
5. Sails.js
6. Meteor
7. Total.js
8. LoopBack
9. Feathers.js
10. Socket.io (برای برنامه‌های real-time)

▫فریمورک‌های مختلط:
1. Next.js (برای React)
2. Nuxt.js (برای Vue.js)
3. Gatsby (برای React)

🔸این فریمورک‌ها هرکدام کاربردها و ویژگی‌های خاص خود را دارند و بسته به نیاز پروژه شما می‌توانند انتخاب شوند.
#js #وب #طراحی_وب #سایت

🌈 Web_Designer98.t.me

364 views10:57

« طراحی سایت و گرافیک »

✅ آموزش مینفی کردن کدها در ویندوز با استفاده از Git، می‌توانید از ابزارهایی مانند Terser (برای جاوا اسکریپت) یا cssnano (برای CSS) استفاده کنید. فرض می‌کنیم که شما Node.js و npm را نصب کرده‌اید. مراحل زیر را دنبال کنید:

1⃣ ابتدا از ترمینال یا CMD دستور زیر را برای نصب Terser و cssnano اجرا کنید:

npm install terser cssnano --save-dev

2⃣ نوشتن اسکریپت در فایل package.json خود، یک اسکریپت برای مینفی کردن فایل‌ها اضافه کنید. مانند زیر:

{
  "scripts": {
    "minify-js": "terser src/**/*.js -o dist/app.min.js",
    "minify-css": "cssnano src/**/*.css dist/styles.min.css"
  }
}

3⃣ حالا با استفاده از دستور زیر می‌توانید کدهای خود را مینفی کنید:

npm run minify-js
npm run minify-css

3⃣ اگر می‌خواهید این پروسه را قبل از کامیت کردن (commit) خودکار انجام دهید، می‌توانید از git hooks استفاده کنید. شما می‌توانید pre-commit hook را ایجاد کنید که مینفی کردن را انجام دهد.

4⃣ برای این کار می‌توانید از husky استفاده کنید:

npx husky-init && npm install

5⃣ سپس فرمان زیر را برای فعال‌سازی pre-commit hook اضافه کنید:

npx husky add .husky/pre-commit "npm run minify-js && npm run minify-css"

🔘 حالا هر بار که شما یک commit انجام می‌دهید، کدهای شما به طور خودکار مینفی خواهد شد.

#وب #گیت #css #js
🌈 Web_Designer98.t.me

377 views17:41

« طراحی سایت و گرافیک »

3:46:32

Media is too big

VIEW IN TELEGRAM

☑️ آموزش برنامه نویسی جاوا اسکریپت
🎥 قسمت: اول - 1
💽 کیفیت: 720p 👌
📊 سطح آموزش: مقدماتی - پیشرفته ✔
🏷 دسته بندی: #js #java_script

🌈 Web_Designer98.t.me

547 views17:03

« طراحی سایت و گرافیک »

1:01:47

Media is too big

VIEW IN TELEGRAM

☑️ آموزش جامع برنامه نویسی جاوا اسکریپت
🎥 قسمت: دوم - 2
💽 کیفیت: 720p 👌
📊 سطح آموزش: مقدماتی - پیشرفته ✔
🏷 دسته بندی: #js #java_script

🌈 Web_Designer98.t.me

508 views12:50

« طراحی سایت و گرافیک »

✅ آموزش خواندن فایل اکسل با استفاده از جاوااسکریپت خالص

1⃣ اضافه کردن کتابخانه SheetJS

🔸ابتدا باید کتابخانه xlsx را به پروژه خود اضافه کنید. می‌توانید آن را از CDN بارگیری کنید:

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>

2⃣ ساختن فرم بارگذاری فایل

🔹شما نیاز به یک فرم ساده برای بارگذاری فایل اکسل دارید:

<input type="file" id="file-input" accept=".xlsx, .xls" />
<div id="output"></div>

3⃣ نوشتن کد جاوااسکریپت

🔸حالا می‌توانید کد جاوااسکریپت را برای خواندن فایل اکسل بنویسید:

document.getElementById('file-input').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();

    reader.onload = function(e) {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

//https://t.me/Web_Designer98

        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];

// https://t.me/Web_Designer98
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

//https://t.me/Web_Designer98
        document.getElementById('output').innerText = JSON.stringify(jsonData, null, 2);
    };

// https://t.me/Web_Designer98
 reader.readAsArrayBuffer(file);
});

🔷 نکته: فایل کتابخانه Xlsx.js و فایل اکسل تمرینی در بخش دیدگاه قرار گرفته است.
#وب #طراحی_وب #js #json
🌈 Web_Designer98.t.me

531 views10:55

« طراحی سایت و گرافیک »

1:43:20

Media is too big

VIEW IN TELEGRAM

☑️ آموزش جامع برنامه نویسی جاوا اسکریپت
🎥 قسمت: سوم - 3
💽 کیفیت: 720p 👌
📊 سطح آموزش: مقدماتی - پیشرفته ✔
🏷 دسته بندی: #js #java_script

🌈 Web_Designer98.t.me

578 views13:01

« طراحی سایت و گرافیک »

1:40:36

Media is too big

VIEW IN TELEGRAM

☑️ آموزش جامع برنامه نویسی جاوا اسکریپت
🎥 قسمت: چهارم - 4
💽 کیفیت: 720p 👌
📊 سطح آموزش: مقدماتی - پیشرفته ✔
🏷 دسته بندی: #js #java_script

🌈 Web_Designer98.t.me

525 views17:36

« طراحی سایت و گرافیک »

1:45:08

Media is too big

VIEW IN TELEGRAM

☑️ آموزش جامع برنامه نویسی جاوا اسکریپت
🎥 قسمت: پنجم - 5
💽 کیفیت: 720p 👌
📊 سطح آموزش: مقدماتی - پیشرفته ✔
🏷 دسته بندی: #js #java_script

🌈 Web_Designer98.t.me

549 views12:04

« طراحی سایت و گرافیک »

2:08:51

Media is too big

VIEW IN TELEGRAM

☑️ آموزش جامع برنامه نویسی جاوا اسکریپت
🎥 قسمت: ششم - قسمت آخر
💽 کیفیت: 720p 👌
📊 سطح آموزش: مقدماتی - پیشرفته ✔
🏷 دسته بندی: #js #java_script

🌈 Web_Designer98.t.me

557 views11:25

« طراحی سایت و گرافیک »

🔸کد آماده سازنده متن دست نویس

🔹ما کد ایجاد یک تولید کننده متن را می گذاریم که در آن می توانید یک فونت را انتخاب کنید و سپس این متن را به صورت تصویر دانلود کنید.

💻 کد را دریافت کنید

#html #css #js #web #php
🌈 Web_Designer98.t.me

322 views14:20

About

Blog

Apps

Platform