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

saalek110 · 2024-09-09T15:11:16+0430

معماری css سایت و فروم:

من یک ساب دومین ساختم به نام:

http://saalek110.is-great.net

بعد یک پوشه ساختم داخلش به نام forum پس آدرس فرومم میشه:

http://saalek110.is-great.net/forum

داخل پوشه فروم یک پوشه ساختم به نام parts.

داخل پوشه parts این این فایلها را دارم:

اول فایل index.php که صفحه اول فروم میشه ،اینها را نوشتم:

PHP:

include"parts/central.php";
include"parts/header.php";
include"parts/link_line.php";

فایل سنترال چیزهای کلی را می سازه مثل کادر دور صفحه یا کادر دور یک پیام. این پیام ممکن است در فروم یا سایت باشه.

اون دو تا اینکلود دومی و سومی در کد بالا ، این را ساخته:

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

و انتهای فایل index.php اینها را نوشتم:

PHP:

include"parts/index_footer.php";

فایل فوتر این را ساخته:

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

saalek110 · 2024-09-09T15:29:00+0430

محتوای central.php:

CSS:

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl">
<head>
<title>Saalek110</title>

<style>
          #page {  
            padding-top: 40px;
            padding-bottom: 150px;
        padding-left: 15px;
         padding-right: 15px;
        border:7px solid green;

      margin-top: 15px;
          margin-right: 8px;
            margin-left:  8px;
            margin-bottom: 40px;
                     }
                                                           

#colection{
               border-spacing: 50px;
                  text-align: right;
                         width:85%;


}


#border {
        background-color: rgba(220,150,120,1);
border-radius: 50px;
              padding-top: 20px;
              padding-bottom: 20px;
               padding-left: 20px;
               padding-right: 20px;                        
                border:7px solid yellow;                    
                margin-top: 20px;
             margin-right: 20px;
            margin-left:  20px;
            margin-bottom: 20px;
}
 #desktop{
               
 font-size:12px;  

 text-align:center;
  color:red;
  font-size:8px;
  background-color:powderblue;
  border:15px solid green;      
                padding-top: 20px;
                padding-bottom: 20px;
               padding-left: 20px;
                padding-right: 20px;  
                 margin-top: 20px;
             margin-right: 20px;
            margin-left:  20px;
             margin-bottom: 20px;
  }
    #ttt{
               border-spacing: 50px;
                  text-align: right;
                         width:85%;


}

#ggg {
        background-color: rgba(220,150,120,1);
border-radius: 50px;
              padding-top: 20px;
              padding-bottom: 20px;
               padding-left: 20px;
               padding-right: 20px;                        
                border:7px solid yellow;                    
                margin-top: 20px;
             margin-right: 20px;
            margin-left:  20px;
            margin-bottom: 20px;
}
 #mmm{
               
 font-size:12px;  

 text-align:center;
  color:red;
  font-size:8px;
  background-color:powderblue;
  border:15px solid green;      
                padding-top: 20px;
                padding-bottom: 20px;
               padding-left: 20px;
                padding-right: 20px;  
                 margin-top: 20px;
             margin-right: 20px;
            margin-left:  20px;
             margin-bottom: 20px;
  }
</style>
</head>
<body>
       <?php
       
?>
</body>
</html>

در حقیقت یک سایت کامل با بدنه خالی است.منظور استفاده از css اون بوده فقط.
راه کتابی اینه که فایل css با پسوند css باشه و بهش لینک بشه ، ولی مشکلش اینه وقتی فایل css را تعییر می دهید باید کچ بروسر را هم پاک کنید تا فایل css قدیمی پاک بشه. و دردسر داره. برای همین من بجایش از روش inclue کردن استفاده می کنم.

saalek110 · 2024-09-09T15:33:40+0430

header.php:

HTML:

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl">
<head>
<title>Saalek110</title>

<style> 
                  
#my_header{
            background-color: rgba(30,30,28,0.6);
border-radius: 15px;
   width:96%;
                 border:7px solid #110023;   
                 padding:5px;
                 margin-right:20px;
                 margin-left:20px;

                       }
   #inside_td{
            background-color: rgba(40,200,58,1);
border-radius: 5px;
   width:60%;
   font-size:18px;
                 border:1px solid #119977;   
                 padding-right:15px;
                 padding-left:35px;
                 padding-top:4px;
                 padding-bottom:12px;
                 margin-right:1px;
                 margin-left:1px;

             margin-bottom: 1px;
                       }
</style>
</head>
<body>
       <?php


echo"<div id='my_header'>";


echo"<table border=1>";
echo"<tr>";
echo"<td style='width:10%;'>";
 echo"<center><a href='http://saalek110.is-great.net/forum/index.php'><img src='./../../images/iran_football.jpg' alt='dar daste saakht' style='width:100px;height:auto;'></a></center>";
echo ""; // axxxxxxxxxxxxxxxxxxxxxxxxx
echo"</td>";



echo"<td style='width:60%;'>";
 echo"<center><a href='http://saalek110.is-great.net/forum/index.php'><img src='./../../images/lion.jpg' alt='dar daste saakht' style='width:250px;height:auto;'></a></center>";

echo"</td>";



echo"<td style='width:30%;'>";

echo"<div id='inside_td'>";
$temp=writeMsg(2); // border
echo $temp;
echo"</div>";
echo"</td>";


echo"</tr>";
echo"</table>";


echo"</div>";






?>
</body>
</html>

دو تا عکس و یک خوش آمد داره:

saalek110 · 2024-09-09T15:38:27+0430

link_line.php:

HTML:

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl">
<head>
<title>Saalek110</title>

<style>


 
                  
#my_header2{
            background-color: rgba(40,30,48,0.6);
border-radius: 15px;
   width:96%;
                 border:1px solid #999999;   
                 padding:3px;
                 margin-right:20px;
                 margin-left:20px;

                       }
#inside_site{
            background-color: rgba(220,180,60,1);
border-radius: 10px;
   width:25%;
   font-size:18px;
                 border:1px solid #999999;   
                 padding-right:10px;
                 padding-left:40px;
                 padding-top:1x;
                 padding-bottom:1px;
                 margin-right:1px;
                 margin-left:1px;

             margin-bottom: 1px;
                       }
#inside_index{
            background-color: rgba(220,180,70,1);
border-radius: 5px;
   width:60%;
   font-size:18px;
                 border:1px solid #999999;   
                 padding-right:15px;
                 padding-left:5px;
                 padding-top:1x;
                 padding-bottom:1px;
                 margin-right:1px;
                 margin-left:1px;

             margin-bottom: 1px;
                       }
</style>
</head>
<body>
       <?php
        


echo"<div id='my_header2'>";


   echo"<table border=1 style=' width:100%;  '>"; 

echo"<tr>";
echo"<td style='width:25%;'>";
 //echo"<center><a href='http://saalek110.is-great.net/forum/index.php'><img src='./../../images/tree.jpg' alt='dar daste saakht' style='width:100px;height:auto;'></a></center>";
echo ""; // axxxxxxxxxxxxxxxxxxxxxxxxx
echo"</td>";



echo"<td style='width:50%;'>";
echo"<div id='inside_index'>";


  $path =  $_SERVER['SCRIPT_FILENAME'];
      $file1 = basename($path); //index.php
        $file2 = basename($path, ".php"); //index
   // echo $file1.$file2."<br>";    index.php index

//echo $_SERVER['SCRIPT_FILENAME'];
echo $_SERVER['SCRIPT_NAME'];
echo $_SERVER['SCRIPT_URI'];

if ($file2 !="index")
{
$temp=writeMsg(14);  // enter to forum
  echo"<a href='http://saalek110.is-great.net/forum/index.php'>".$temp."</a>";

}


 echo"</div>";
echo"</td>";



echo"<td style='width:20%;'>";

echo"<div id='inside_site'>";


$temp=writeMsg(13);  // enter to forum
  echo"<a href='http://saalek110.is-great.net/index.php'>".$temp."</a>";
  echo"</div>";
echo"</td>";
echo"</tr>";
echo"</table>";


echo"</div>";






?>
</body>
</html>

لینک به صفحه اول می دهد. ولی با کدهای php بررسی می کند وقتی در index.php نباشد ، لینک می دهد، چون وقتی در هون صفحه هستیم که نباید به همون صفحه لینک بدهیم.
و در سمت چپ هم یک لینک ساده به سایت می دهد.

saalek110 · 2024-09-09T15:41:53+0430

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

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

saalek110 · 2024-09-09T15:45:53+0430

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

مثلا css صفحه اول یا index اینه:

CSS:

<style> 
        
                                                            
body {

   background-image: url('../images/background/green_flowers.jpeg');     
      background-color: rgba(20,10,10,1);
      }

#category
{
                 font-size:30px;   
                 text-align:center;
          width:98%;
                   border:5px solid #997777; 
                    background-image: url('../images/background/paper2.jpg');
                   background-color: rgba(220,150,20,0.5);
          border-radius: 20px;
          padding-top:10px;           
          padding-bottom:15px;
}
#forum
{
                
                    
               align:center;
              
                

                   width:98%;
                      background-image: url('../images/background/black_wall.jpg');
     background-color: rgba(170,170,240,0.7);
          border-radius: 15px;           
      
           border:3px solid #115555;   
}
#forum_inner
{
                 font-size:30px; 
text_align:center;
                      width:50%;
                    
     background-color: rgba(170,170,240,0.7);
          border-radius: 35px;           
        
           border:3px solid #222222;
            padding-top:3px;           
          padding-bottom:3px;
          padding-right:20px;           
          padding-left:20px;
          margin-top:10px;           
          margin-bottom:10px;
          margin-right:20%;           
          margin-left:20%;
}
                  

</style>

شاید من css را درب و داغون نوشته باشم یا ظاهر سایت فاجعه باشه ، ولی بعدا اصلاح میشه ، طرح کلی را اینجا دقت کنید و به جزییات اینجا کار نداشته باشید.

saalek110 · 2024-09-09T15:54:13+0430

خلاصه:

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

saalek110 · 2024-09-09T16:02:55+0430

فایلها و پوشه های فروم:

از اسم هر فایل یا پوشه کارش معلومه.
پوشه parts تعداد 4 تا فایل داشت که در پستهای بالا شرح دادم.

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

saalek110 · 2024-09-09T16:06:39+0430

اگر در فروم بچرخید هم در آدرس بار و هم کدی که در نوار لینک من گذاشتم ، اسم صفحه را نشان میدهد. به جز فایل create post که یک تکه کار را انجام می دهد و صفحه کاملی نیست.

saalek110 · 2024-09-09T16:11:02+0430

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

قبلا در تاپیک کدهای این دکمه ها را گذاشتم و توضیحش را داده ام.

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

کارایی ایتور را در زیر می بینید: در یک سایت دیگر من.

با استفاده از 5 دکمه زیر:

اون دکمه های f سایز است.

saalek110 · 2024-09-09T16:22:26+0430

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

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

saalek110 · 2024-09-09T16:40:10+0430

پس در ده پست بالا ، دیدید من چطور css کار کرده ام.

از فایلهای با پسوند css اصلا استفاده نکردم ، بخاطر دردسر cache کچ.
برای هماهنگی همه صفحات فروم فایل سنترال را ساختم.

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

هماهنگی رنگ 3 قسمت:

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

پس 3 قسمت سنترال و هدرها و فوترها و بدنه سایت باید به هم بخوره از لحاظ رنگ.

saalek110 · 2024-09-09T19:16:04+0430

این فایل new topic است که داره یک پیام نشان می دهد. Css پیام را از فایل سنترال.php گرفته.

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

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

saalek110 · 2024-09-09T19:20:28+0430

این هم یک فروم phpbb است که در ساب دومین دیگری نصب کردم. می توانید نگاهی بهش بیاندازید.
من نصب کردم تا هم ظاهرش را ببینم و هم کدهایش را نگاهی کنم. شاید ازش استفاده هم بکنم.

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

http://saalek121.is-great.net/?i=1

saalek110 · 2024-09-09T19:29:22+0430

هاست مجانی و نصب اتوماتیک phpbb و خراب شدن مشکوک آن:

اگر بخواهید در profreehost این فروم را نصب کنید خودش اتوماتیک نصب می کنه. من چند سال پیش نصب کردم ولی از کار افتاد. در infinityfree هم دو سال پیش کدهایش را از سایت خود phpbb دانلود کردم و نصب کردم تا خراب نشه ولی باز خراب شد و چند ماه پیش چون سر نزدم دیلتش کرد. البته قبلش پست هایش را کپی کرده بودم. هر دوی این فروم ها را پست هایشان را کپی کردم در یک فروم دیگر. حتما ایمیلی را به این هاست ها بدهید که همیشه سر می زنید تا اگر غیرفعال کرد ، بروید فعال کنید. اینفینیتی دیلت کامل می کند.

همین اتفاقات باعث شد خودم دستی فروم را بنویسم،

من حتی فکر می کنم عمدا اینها کارشکنی می کنند. مثلا پروتکل GET را از کار انداختند. ولی من کدها را تبدیل به پروتکل post کردم و به کارم ادامه دادم.

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

من اصلا به کدهای دو فروم هیچ دست نزدم ولی فروم ها خراب شد.
ولی یک سایت دست نویس دارم که پروتکل های get را تبدیل به post کردم و هنوز دارم ازش استفاده می کنم.

saalek110 · 2024-09-09T19:38:59+0430

کادر پیام ، این بار در new post:

همون طور گه گفتم تمام فایلها از css فایل سنترال استفاده می کنند ، و خواستم در فایل دیگری کادر پیام را باز ببینید:

پس کادر پیام در دو فایل new topic و new post کاملا شبیه هم است ، چون از یک جا ، یعنی فایل سنترال در پوشه parts ریشه گرفته.

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

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

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

PHP:

 if(  !   isset($_POST['act']))   // add one text at end
{
     include"tools/my_buttons.php";

در کد بالا ، نماش دکمه ها را گذاشتم بعد کد ((زمان هنوز دکمه فرم زده نشده)). احتنالا الان درست میشه.

تست کردم ، درست شده. شکل زیر:

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

saalek110 · 2024-09-09T20:05:34+0430

سومین فایل برای تست کادر دور پیام ، فایل edit post است:

فعلا همین ۳ فایل ، پیام صادر می کردند و من کدهایشان را درست کردم.

saalek110 · 2024-09-09T20:09:07+0430

اینکه یک لینک می آید و کاربر باید کلیک کند تا برود به تاپیک ، شاید مبتدی به نظر برسد.
شاید بهتر باشه خودش برود به تاپیک.

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

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