سایت خود را بسازید ، به روش saalek110

saalek110

saalek110

Well-Known Member
من بسته ادیتور را در پوشه tools آپلود کردم.
و کد پست قبل را آپلود کردم. و مسیر بسته مذکور را بهش دادم.


Screenshot_۲۰۲۴-۰۲-۰۸_۰۰۱۰۰۵.jpg

!! جالبه!

من چون در پوشه test آپلود کردم و پوشه test کنار پوشه tools است ، خط زیر به این شکل شد:
HTML: 
    <script language="javascript" type="text/javascript" src="../tools/editarea/edit_area/edit_area_full.js"></script>
یعنی با گذاشتن دو نقطه کنار هم از پوشه test خارج شدم و با نوشتن اسم پوشه tools وارد پوشه tools شدم.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
این قسمت کد بالا :
HTML: 
<form method="post">
    <textarea id="textarea_1" name="content" cols="80" rows="15">
/*This is some css that will be editable with EditArea.*/
body, html{
    margin: 0;
    padding: 0;
    height: 100%;
    border: none;
    overflow: hidden;
}</textarea>

</form>

کد یک فرم است. و احتمالا میشه مثل یک فرم عادی ازش استفاده کرد.
 
saalek110

saalek110

Well-Known Member
من قبل پیدا کردن این ادیتور ، لیست گیری از پوشه css را انجام دادم ،
و فایل های css را خواندم ، و در کدهای css را در یک textarea قرار داده بودم.

حالا تنها فرقی که می کنه اینه که textarea ما با این بسته مجهز تر میشه.
من ردیف های textarea را بیشتر کردم. و ستونهایش را کمتر کردم. در کد زیر cols و rows منظورم است:
HTML: 
<textarea id="textarea_1" name="content" cols="68" rows="35">

بروید در سایت نمونه و خودتان ببینید.
 

پیوست ها

  • Screenshot_۲۰۲۴-۰۲-۰۸_۰۰۳۴۴۵.jpg
    Screenshot_۲۰۲۴-۰۲-۰۸_۰۰۳۴۴۵.jpg
    128.4 کیلوبایت · بازدیدها: 1
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
PHP: 
     if(isset($_POST['action1']))   // add one text at end
      {
         $content=test_input($_POST["content"]);

$myfile = fopen("myfile.txt", "w") or die("Unable to open file!");
fwrite($myfile, htmlspecialchars_decode($content)  );
fclose($myfile);

      }

در کد بالا ، که کد جواب فرم است ، محتوای textarea در متغیر $content ریخته شده ،
موقع ذخیره در فایل از تابع htmlspecialchars_decode استفاده کردم تا علامت های کوچکتر و بزرگتر به حالت عادی برگردد.

در کد بالا برای تست در فایلی به نام myfile.txt ذخیره شده ولی باید با همان اسمی ذخیره شود که از اون فایل خونده شده.

اگر از تابع htmlspecialchars_decode استفاده نکنیم ، اول و آخر فایل که به شکل کد زیر ، علامت کوچکتر و بزرگتر دارد(مثلا اطراف style ) ، یک سری کاراکترهای دیگر می آید جایش.

PHP: 
<?php
?>

<style>

برای اینکه اون کاراکترها را ببینید ، من اول با استفاده از تابع و بعد بدون استفاده از تابع فوق در فایل ذخیره کردم...
حدفاصل دو قسمت چنین داریم:
PHP: 
}
</style>


<?php


?>&lt;?php
?&gt;

&lt;style&gt;
اون قسمت خوانا با استفاده از تابع ذخیره شده و اون قسمت ناخوانا کا پایین تر است بدون استفاده از تابع htmlspecialchars_decode ساخته شده.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
عدد رنگ ساز:#78f366
بهتر است یک پالت رنگ جایی که ادیتور را قرار می دهیم ، در اختیار کاربر باشد تا عدد رنگ خود را بسازد.
سایت زیر یکی از این رنگ سازها را در اختیار قرار می دهد. البته از این سایتها زیاده و خودتان با سرچ مثلا javascript color picker می توانید این سایتها را پیدا کنید. شاید یک نفر یک ابزار بزرگ تر یا مجهزتر دوست داشته باشه... فعلا یک مورد را در این پست معرفی می کنم:

github.com

Release v0.22.0 · mdbassit/Coloris

Expose the DOMReady function in the global Coloris object
github.com github.com
از لینک بالا ، بسته زیپ را من دانلود کردم.

بعد این را باید در صفحه اضافه کنید.اگر آپلود کردید
HTML: 
<link rel="stylesheet" href="coloris.min.css"/>
<script src="coloris.min.js"></script>

یا این را :
HTML: 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
اگر آپلود نکردید.

لینک زیر:


حاوی کد زیر است:
HTML: 
<html>
    <head>
    <title>color Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
    <script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
                </head>
                <body>
<input type="text" data-coloris>

</body>
</html>

یعنی بدون آپلود اون دو خط را به صفحه اضافه کردم.البته یک خط هم داخل بدنه اضافه شده. حالا بالای صفحه دارم:

Screenshot_۲۰۲۴-۰۲-۰۹_۰۲۴۳۳۱.jpg
البته بهتر است فایلها آپلود شود.


لینک بالا حاوی کد زیر است:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Coloris examples</title>
    <link rel="stylesheet" type="text/css" href="coloris.min.css">
    <style type="text/css">
    @import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap);

    body {
      height: 120vh;
      margin: 30px;
      color: #444;
      background-color: #fff;
      font-family: 'Lato', sans-serif;
    }

    h1 {
      margin-bottom: 1.5em;
    }

    input {
      width: 150px;
      height: 32px;
      padding: 0 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      box-sizing: border-box;
    }
 
    .examples {
      display: flex;
      flex-wrap: wrap;
    }

    .example {
      flex-shrink: 0;
      width: 300px;
      margin-bottom: 30px;
    }

    .square .clr-field button,
    .circle .clr-field button {
      width: 22px;
      height: 22px;
      left: 5px;
      right: auto;
      border-radius: 5px;
    }

    .square .clr-field input,
    .circle .clr-field input {
      padding-left: 36px;
    }

    .circle .clr-field button {
      border-radius: 50%;
    }

    .full .clr-field button {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }

    </style>
  </head>
  <body>
    <a href="https://github.com/mdbassit/Coloris">View <b>Coloris</b> on GitHub</a>
    <h1>Coloris examples</h1>
    <div class="examples">
      <div class="example">
        <p>Default color thumbnail</p>
        <input type="text" value="green" data-coloris>
      </div>
      <div class="example square">
        <p>Rounded square thumbnail</p>
        <input type="text" class="coloris instance1" value="rgb(255, 0, 0)">
      </div>
      <div class="example circle">
        <p>Circular thumbnail</p>
        <input type="text" class="coloris instance2" value="#cc458faa">
      </div>
      <div class="example full">
        <p>Full size thumbnail</p>
        <input type="text" class="coloris instance3" value="#ffcc00">
      </div>
      <div class="example square" style="position: relative; top: 300px; padding-bottom: 30px;">
        <p>The dialog will appear on top of this field for lack of space under it.</p>
        <input type="text" class="coloris" value="#00a5cc">
      </div>
    </div>
    <script type="text/javascript" src="coloris.min.js"></script>
    <script type="text/javascript">

    /** Default configuration **/

    Coloris({
      el: '.coloris',
      swatches: [
        '#264653',
        '#2a9d8f',
        '#e9c46a',
        '#f4a261',
        '#e76f51',
        '#d62828',
        '#023e8a',
        '#0077b6',
        '#0096c7',
        '#00b4d8',
        '#48cae4'
      ]
    });

    /** Instances **/

    Coloris.setInstance('.instance1', {
      theme: 'pill',
      themeMode: 'dark',
      formatToggle: true,
      closeButton: true,
      clearButton: true,
      swatches: [
        '#067bc2',
        '#84bcda',
        '#80e377',
        '#ecc30b',
        '#f37748',
        '#d56062'
      ]
    });

    Coloris.setInstance('.instance2', { theme: 'polaroid' });

    Coloris.setInstance('.instance3', {
      theme: 'polaroid',
      swatchesOnly: true
    });

    </script>
  </body>
</html>

اگر از این مورد خوشتان اومد ، بقیه توضیحات و آپشن ها را از خود سایتش بخوانید.
شاید من یکی دیگه پیدا کنم. پس فعلا زیاد این مورد را توضیح نمی دهم.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
من الان رفتم ۲۵ صفحه تاپیک را گشتم ، و مباحثی که مربوط به چگونگی ادامه دادن کار بود را ادیت یا جمع آوری کردم ، تا یک جا باشه و دم دست باشه. همین پست و پست بعدی.



کارهای باقی مونده :
آپلود عکس در موقع پست زدن.

ایده داشتن سایت دانلود بسته:
شاید بهتر باشه یک سایت برای دانلود بسته داشته باشیم و دو زبانه هم باشه ، یعنی زبان انگلیسی را هم داشته باشه



ساختن ابزارهای ادمین: تابحال یک سری ابزار ادمین ساختیم، بعدا ممکن است ابزارهای بیشتری اضافه شود.



ایده داشتن pdf راهنمای استفاده از بسته سایت ساز: شاید ، برای استفاده از بسته سایت ساز ، داشتن یک pdf بهتر از توضیحات در تاپیک باشد.



جدوالی که توسط فایل install ساخته می شود پیشوند s110 دارند. شامل:

posts
users
texts
counters
comments

من به جداول خود پیشوند s110 دادم تا از جداول دیگر متمایز باشد.

ایده داشتن استاندارد قالب ثابت یا قابل گشترش بودن:
تعریف یک استاندارد ثابت که در ورژن های مختلف ثابت بماند. مثلا تعداد ستون های جدول پست ها ، تعدادش مشخص باشد.

ایده هوشمند بودن فایل نصب ، و اعمال تغییرات لازم بر روی ورژن قبلی.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
images.jpeg

این پست از صفحات قبلی به اینجا منتقل شد ، تا در مورد بقیه کار بشود تصمیم گیری شود.

طراحی صفحه:
من حالا می خواهم در مورد طراحی صفحه صحبت کنم. همان طور که در شکل بالا می بینید ، صفحه از قسمتهایی تشکیل شده ، من اسم این قسمتها را part می گذارم..... می خواهم سایت ساز ما ، یک تعدادی part داشته باشه.


Part چیست؟
دیدید مغازه ها ، بنر می دهند برایشان چاپ می کنند می زنند اطراف مغازه.
یک چیزی شبیه بنر داریم... ممکن است فقط یک عکس باشه ، یا یک عکس و مقداری نوشته ، یا با چند تا لینک.
فعلا چیزی که به مخیله من می تونه برسه اینه که در یک ادیتور اینها را کنار هم می چینیم.
شما ادیتور سایت را در ، سایت نمونه می تونید ببینید که چه ابزارهایی داره...خودتان با ادیت فایلهای my buttons و فایل جایگزین کننده ، هر تعداد از این ابزارها می توانید اضافه کنید.
ادیتور part ساز هم یک چیزی مثل ادیتور پست ها هست ، الان دقیقا مشخصات اون را نمی دونم ، دارم مطرحش می کنم تا با هم فکری شما طراحی اش کنیم.


خوب ، پس شما یک سری part یا بنر می سازید ، و در قسمتهای مختلف سایت خود می چینید.

فکر کنم اول لازمه الگوی کلی صفحه خود را طراحی کنید یا انتخاب کنید... سایتی که من الان در سایت نمونه گذاشتم ، حالت وبلاگ داره ، یعنی تکیه بیشتر روی پستهاست ولی میشه سایت فروشگاهی هم ساخت.

مثلا برای ساخت سایت فروشگاهی به جای پستها ، جنس ها قرار می گیرند...

ولی اگر من نتونستم چنین خدماتی ارائه کنم ، همین بحث اینجا کمک می کنه خودتان سایت خودتان را بسازید. در طول این حدود ۲۰ صفحه تاپیک ، همه چیز برای ساخت یک سایت گفته شده ، و شما فقط یک مقدار اعتماد به نفس و حوصله نیاز دارید تا سایت خودتان را بسازید... شاید بعضی این کارو تابحال انجام دادند... بهرحال هر کس در یک مرحله است

...
برگردیم به بحث ...من سعی می کنم ادوات و ابزارهایی به سایت ساز اضافه کنم که دست شما بازتر باشه برای ساخت سایتهای متنوع تر...

در مورد اسکلت کلی ، اگر نتونم ابزار ساختش را بسازم ، یک سری نمونه ها می زارم تا شما بین اون نمونه ها انتخاب کنید.

مثلا سایت فعلی ، یک سری جدول بالا داره ، یک جدول ۳ ستونه وسط داره و یک سری جدول پایین داره.
مثل چینش در فوتبال بگیم یک ۳ یک ...
یا یک ، یک ، یک ، ۳ ، یک ،یک.
یا
یک ، دو ، ۳ ، یک، یک.
این آخری یعنی سطر اول سایت یک ردیف داره ،
سطر دوم دو ردیف و وسط سایت ۳ ردیف و پایین سایت دو تا یک ردیفه.

پس چننش کلی چگونگی چیدن جدوال کنار هم است ، که باید با همفکری با هم ، طرز پیاده کردنش را یاد بگیریم برای سایت ساز ، یا خودتان برای سایت خودتان را با آموزش های تاپیک بسازید.

بعدش...... اون part ها میاد می شینه توی این جداول کلی صفحه. مثلا یک سری پارت ها در ستون ۱ از جدول سه ستونه وسط سایت می شینا و یک سری پارت ها می شینه توی ستون یک.
....
....
شاید بشه یک ابزاری ساخت که شما اولش تعداد سطر و ستون سایت خودتون را مشخص کنید ، و بعدش در مرحله بعد خونه های خالی اون را با part ها پر کنید.

پس مقداری طرز ساخت اسکلت کلی سایت مشخص شد.
طرز ساخت part ها هم به تدریج مشخص میشه....
فرض کنید یک قفسه در مغازه خود دارید و می خواهید جنس ها را درون قفسات بچینید.. چیدن پارت ها قسمتهای صفحه سایت هم مثل چیدن اجناس داخل قفسه های سایت است.

حالا فعلا من table از html فقط توی ذهنم هست برای صفحه بندی سایت ولی ابزارهای دیگری هم هست ، مثلا استفاده از css. که بعدا نگاهی بهش می کنم و یک مقدار سرچدر گوگل می کنم و با هوش مصنوعی ها در مورد صحبت می کنم.
فعلا خواستم در این پست یک بحث اولیه در این مورد بکنیم تا بعدا فنی تر در موردش بحث کنیم.
 
saalek110

saalek110

Well-Known Member
در مورد پست قبل.....

هنوز چگونگی طراحی سایت مشخص نشده.. فعلا دارم در موردش فکر می کنم.
طراحی شامل دو قسمت هست:
اولی : ساختن قطعات. در پست قبل در مورد چیزی به نام part صحبت شد.
دوم: چگونگی چیدن قطعات در صفحه. یعنی چیدمان در صفحه.
 
saalek110

saalek110

Well-Known Member
من یک تاپیک ساختم برای کار با کوئری های لازم برای کارهای پشتیبانی و ارتقای بسته سایت ساز...

اول تاپیک زیر یک مروری بر کوئری های استفاده شده در این تاپیک کردم ، و بعدش می خوام کوئری های ساخت و بررسی جداول دیتابیس را کار کنم ولی ممکن است کوئری ها و یا نکاتی از کوئری ها هم گفته شود که به کار شما هم بیاید.

خواندن تاپیک زیر اختیاری است:


forum.majidonline.com

دستورات sql , کوئری ها در mysql در php

دستورات sql , کوئری ها در mysql در php در تاپیک سایت خود را بسازید: https://forum.majidonline.com/threads/%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AE%D9%88%D8%AF-%D8%B1%D8%A7-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D8%AF-%D8%8C-%D8%A8%D9%87-%D8%B1%D9%88%D8%B4-saalek110.242137/ قسمت مهمی از کار ما با دیتابیس و...
forum.majidonline.com forum.majidonline.com
 
saalek110

saalek110

Well-Known Member
Screenshot_۲۰۲۴-۰۲-۱۰_۲۱۱۷۴۶.jpg

عکس از اینستاگرام است..
نمی دونم چقدر مطلبش درست باشه...

در مورد ستون چپ ، یعنی طراح سایت ،
من فکر می کنم ، php یک رقیبی داره به نام asp.net .....
همون دات نت میکروسافت... من مختصری خیلی وقت پیش asp.net کار کردم.
آمار اینکه چند درصد سایتهابا php یا با asp.netاست یا با بقیه چیزها ، ندارم. اگر کسی داره ، پست بزنه.

سافت ویر دولوپر ، فکر کنم سازنده نرم افزار را میگن ، مثلا برای ویندوز. یا برای موبایل.
ماچین لرنینگ هم که برای روبات است.

حالا نمی دونم این سه دسته ، دسته بندی مناسبی است یا نه.

Screenshot_۲۰۲۴-۰۲-۱۱_۰۵۱۱۴۲.jpg

عکس بالا هم از اینستاگرام است.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
ما وقتی با POST مقدار دریافت کردیم ، با تابع test_input امنیت ایجاد کردیم،
در مورد دریافت با GET هم باید همین کار را کرد.

یعنی این طوری:
PHP: 
             $t=test_input($_GET['h']);
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
انتقال سایت خود به جای جدید:
من یک سایت قدیمی در infinityfree داشتم که شپلپر بود..
دارم منتقل می کنم به profreehost .....

روش کار:
اول با اکسپورت کردن ، جداول دیتابیس را آوردم در گوشی.. بعدا ایمپورت کردم در جای جدید
بعد خواستم با نرم افزار ftp فایلها را منتقل کنم که نشد و دارم دستی فایلها را دانلود و آپلود می کنم....
فایل کانکشن هم باید مقادیرش طبق هاست جدید مقدار دهی شود.
اگر ftp کار می کرد ، کلش زیر ۵ دقیقه وقت می گرفت ولی دستی فایلها را منتقل کردن وقت می گیره.

با انجام این انتقال دیگه لازم نیست برای دیدن سایتم نرم افزار تیرتپر را روشن کنم.

در ضمن فایل دیتابیس و فایلهای فایل منیجر را یک جایی ذخیره می کنم تا اگر هاست خراب شد بتوانم سایتم را جای دیگر برپا کنم. مثلا در مموری گوشی ..یا در پیوست جیمیل یا درایو گوگل یا یک فلش...یا هر جا شما بلدید.

چند ساعت بعد: انتقال انجام شد.
اگر نرم افزار ftp وصل میشد این قدر وقت نمی گرفت. نمی دانم چرا وصل نشد.
سایت من چند منظوره بود... فقط قسمت وبلاگش را منتقل کردم. چون وبلاگش را نیاز داشتم.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
انتشار بسته و ارتقا به ورژن بعدی:

یک تاپیک در مورد دستکاری جداول دیتابیس زدم. اونجا کوئری های افزودن جدول یا ستونی به جدول گفته شد.

اگر الان ورژن یک را منتشر کنیم ،
و بعد مدتی بخواهیم ورژن ۲ را منتشر کنیم ،
یک سری کدها اول به دیتابیس چیزهایی می افزایند تا مناسب کدهای ورژن ۲ بشود.
کدهای ورژن قبلی پاک میشه و کدهای ورژن جدید اضافه میشه. یا شاید بشهگفت چه فایلهایی اضافه شده یا تغییر کرده که فقط اون فایلها آپلود بشه.


من هنوز نمی دونم چه زمانی ورژن یک منتشر میشه....
و نمی دونم استقبال ازش چقدره.


...فعلا مشغول طراحی قسمتهای مختلف هستم.
 
saalek110

saalek110

Well-Known Member
داشتم الان به ساخت بازی فکر می کردم. بازی در سایت خود بگذاریم.
و به ابعاد اون فکر می کردم.
مثلا ثبت امتیاز ، داشتن جایزه.

فعلا یک ایده است فقط. شاید عملی نشود.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
و داشتم به این فکر می کردم ، هر کس یک home داشته باشه
هوم سه بعدی.... جنگی خوشم نمیاد ، ولی یک قلعه زیباست.
باید به ابعاد قضیه فکر کرد. فعلا فقط این یک ایده است ، شاید هیچ وقت عملی نشود.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
صفحه ۲۶:

اولین بازی سایت خودم را گذاشتم.
ادرس سایتم:


سایت بالا خیلی اوقات بالا نمی آید ، فعلا خودم از اینجا استفاده می کنم:


یک جا نوشته sea game.... اون لینک را بزنید.
اگر جابجا شده بود و نبود مستقیم این لینک را بروید:


بازی را در ساب دومین:

گذاشتم ، از سایت اولی بهش لینک دادم.

شرح و کد بازی در:

forum.majidonline.com

ساخت بازی با کانواس و جاوا اسکریپت

ساخت بازی با کانواس و جاوا اسکریپت تاپیک زیر هم هست: آموزش ساخت بازی با کانواس و جاوا اسکریپت. در آن تاپیک سعی شده مطالب از اول و به ترتیب باشه...
forum.majidonline.com forum.majidonline.com

کدهای اون را می توانید در یک فایل با پسوند html ذخیره کنید و با بروسر خود باز کنید و بازی کنید. نیاز به سرور نداره. و می توانید اعداد کدها را عوض کنید تا حالت بازی عوض شود.

Screenshot_۲۰۲۴-۰۲-۱۵_۰۷۲۹۲۳.jpg
 
آخرین ویرایش:
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا