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

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

<!-- https://yangx.top/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://yangx.top/Web_Designer98 -->
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
    <button onclick="showToast()">نمایش پیام</button>
    <div id="toast" class="toast">پیام شما با موفقیت ارسال شد!</div>

<!-- https://yangx.top/Web_Designer98 -->

<!-- https://yangx.top/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://yangx.top/Web_Designer98 -->
</body>
</html>

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

🌈 Web_Designer98.t.me

👍2

368 views10:56

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

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

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

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

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

<?php
session_start();

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

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

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

#https://yangx.top/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://yangx.top/Web_Designer98
imagefilledrectangle($image, 0, 0, $width, $height, $background_color);

#https://yangx.top/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://yangx.top/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://yangx.top/Web_Designer98
imagettftext($image, 30, 0, 40, 50, $text_color, 'Arial.ttf', $captcha_code); 

# https://yangx.top/Web_Designer98
imagepng($image);
imagedestroy($image);
?>

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

<!DOCTYPE html>
<!-- https://yangx.top/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://yangx.top/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://yangx.top/Web_Designer98 -->
</body>
</html>

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

<?php
session_start();

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

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

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

#css #html #js #php

🌈 Web_Designer98.t.me

👍2👏1

300 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

👍2

391 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

👍2

391 views17:41

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

✅ به اطلاع می رسانیم دوره آموزشی برنامه نویسی با جاوااسکریپت در 6 قسمت از کانال طراحی وب تقدیم حضور خواهد شد.

📝 زبان آموزش: فارسی 🇮🇷
📊 سطح دوره: مقدماتی تا پیشرفته 🔥
🏷 تگ ها: #js #java_script

🌈 Web_Designer98.t.me

👍4

502 views14:09

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

3:46:32

Media is too big

VIEW IN TELEGRAM

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

🌈 Web_Designer98.t.me

👍3

608 views17:03

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

1:01:47

Media is too big

VIEW IN TELEGRAM

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

🌈 Web_Designer98.t.me

👍3

556 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://yangx.top/Web_Designer98

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

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

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

// https://yangx.top/Web_Designer98
 reader.readAsArrayBuffer(file);
});

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

👍5

564 views10:55

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

1:43:20

Media is too big

VIEW IN TELEGRAM

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

🌈 Web_Designer98.t.me

❤‍🔥4

625 views13:01

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

1:40:36

Media is too big

VIEW IN TELEGRAM

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

🌈 Web_Designer98.t.me

👍2

580 views17:36

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

1:45:08

Media is too big

VIEW IN TELEGRAM

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

🌈 Web_Designer98.t.me

👍2

605 views12:04

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

2:08:51

Media is too big

VIEW IN TELEGRAM

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

🌈 Web_Designer98.t.me

👍4

622 views11:25

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

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

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

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

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

❤‍🔥1

360 views14:20

About

Blog

Apps

Platform