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

saalek110 · Feb 7, 2024

در صفحه نصب این بسته این کد را نوشته:

HTML:

<html>
<head>
<title>EditArea Test</title>
<script language="javascript" type="text/javascript" src="/editarea/edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript">
editAreaLoader.init({
    id : "textarea_1"        // textarea id
    ,syntax: "css"            // syntax to be uses for highgliting
    ,start_highlight: true        // to display with highlight mode on start-up
});
</script>
</head>
<body>
<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>
</body>
</html>

saalek110 · Feb 8, 2024

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

http://saalek121.fast-page.org/test/test_editor.html

!! جالبه!

من چون در پوشه test آپلود کردم و پوشه test کنار پوشه tools است ، خط زیر به این شکل شد:

HTML:

    <script language="javascript" type="text/javascript" src="../tools/editarea/edit_area/edit_area_full.js"></script>

یعنی با گذاشتن دو نقطه کنار هم از پوشه test خارج شدم و با نوشتن اسم پوشه tools وارد پوشه tools شدم.

saalek110 · Feb 8, 2024

این قسمت کد بالا :

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 · Feb 8, 2024

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

حالا تنها فرقی که می کنه اینه که textarea ما با این بسته مجهز تر میشه.
من ردیف های textarea را بیشتر کردم. و ستونهایش را کمتر کردم. در کد زیر cols و rows منظورم است:

HTML:

<textarea id="textarea_1" name="content" cols="68" rows="35">

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

saalek110 · Feb 8, 2024

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 · Feb 9, 2024

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

Release v0.22.0 · mdbassit/Coloris

Expose the DOMReady function in the global Coloris object

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>

اگر آپلود نکردید.

لینک زیر:

http://saalek121.fast-page.org/test/test_coloris.html

حاوی کد زیر است:

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>

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

البته بهتر است فایلها آپلود شود.

http://saalek121.fast-page.org/test/coloris/examples.html

لینک بالا حاوی کد زیر است:

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 · Feb 9, 2024

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

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

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

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

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

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

posts
users
texts
counters
comments

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

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

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

saalek110 · Feb 9, 2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

saalek110 · Feb 9, 2024

در مورد پست قبل.....

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

saalek110 · Feb 10, 2024

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

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

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

دستورات 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

saalek110 · Feb 10, 2024

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

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

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

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

عکس بالا هم از اینستاگرام است.

saalek110 · Feb 11, 2024

این پست را برای مقایسه html و php و جاوا اسکریپت می زنم..

saalek110 · Feb 11, 2024

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

یعنی این طوری:

PHP:

             $t=test_input($_GET['h']);

saalek110 · Feb 11, 2024

فرم:

saalek110 · Feb 11, 2024

saalek110 · Feb 14, 2024

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

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

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

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

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

saalek110 · Feb 14, 2024

انتشار بسته و ارتقا به ورژن بعدی:

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

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

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

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

saalek110 · Feb 14, 2024

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

فعلا یک ایده است فقط. شاید عملی نشود.

saalek110 · Feb 14, 2024

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