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

saalek110

Well-Known Member
معماری css سایت و فروم:


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


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


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

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


Screenshot_1.png

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

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

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

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

Screenshot_3.png


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

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

PHP:
include"parts/index_footer.php";

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

Screenshot_2.png

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

saalek110

Well-Known Member
محتوای 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

Well-Known Member
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>

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

Screenshot_4.png
 

saalek110

Well-Known Member
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>

Screenshot_5.png

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

saalek110

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

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

saalek110

Well-Known Member
صفحات ایندکس و فروم و تاپیک و .... ، خودشان یک سری 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 را درب و داغون نوشته باشم یا ظاهر سایت فاجعه باشه ، ولی بعدا اصلاح میشه ، طرح کلی را اینجا دقت کنید و به جزییات اینجا کار نداشته باشید.

Screenshot_6.png
 
آخرین ویرایش:

saalek110

Well-Known Member
خلاصه:

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

saalek110

Well-Known Member
فایلها و پوشه های فروم:

Screenshot_7.png

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

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

saalek110

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

Screenshot_8.png

Screenshot_9.png

Screenshot_13.png
 
آخرین ویرایش:

saalek110

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

Screenshot_12.png

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

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

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


Screenshot_14.png

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

Screenshot_15.png

اون دکمه های f سایز است.
 
آخرین ویرایش:

saalek110

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


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

saalek110

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

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

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


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

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

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

saalek110

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

Screenshot_۲۰۲۴-۰۹-۰۹_۱۸۱۲۱۳.jpg

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

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

saalek110

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

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


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

 
آخرین ویرایش:

saalek110

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


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



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

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

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

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

saalek110

Well-Known Member
کادر پیام ، این بار در new post:

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

Screenshot_۲۰۲۴-۰۹-۰۹_۱۸۳۶۰۵.jpg

پس کادر پیام در دو فایل 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";

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

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

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

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

saalek110

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

Screenshot_۲۰۲۴-۰۹-۰۹_۱۹۰۳۳۴.jpg

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

saalek110

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

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

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

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

بالا