درس پنجم- استفاده از فایل های متفاوت (فایل های خارجی)
با اطلاعاتی که تا به اینجا کسب کردیم٬ حال زمان آن رسیده تا با مفاهیم مهمتر و جالب تر پی اچ پی آشنا شویم.
یکی از این مفاهیم٬ استفاده کردن یا وارد کردن فایل هایی خارجی به درون فایل اصلی خود، در پی اچ پی است. عبارت تارنمای پویا در اصل با بکارگیری این مفاهیم معنی پیدا می کند. حال اگر بخواهیم به طور حرفه ای تر تارنمای پویا را شرح دهیم٬ می گوییم: یک تارنمای پویا سیستمی است که از نظر نگهداری و تولید محتوا راحت تر و در مقابل کاربر به صورت تعاملی عمل می کند. این بدین معنی است که شما می توانید محتوا را براساس پاسخی به درخواست کاربر تعیین کنید.
قرار دادن چند فایل در یک فایل
تا
به امروز همه کدها چه اچ تی ام ال و چه پی اچ پی در یک فایل قرار داشت.
اما امروزه برای توسعه تارنماهای پیچیده تر این کار کمی اشتباه و نادرست
است. شما با تقسیم فایل بزرگ تر به قسمت های کوچک تر می توانید کار را برای
خود ساده تر و حرفه ای تر انجام دهید. اجازه بدهید با یک مثال این را
بیشتر شرح دهیم:
فرض کنید شما سیستمی شامل ۱۰۰ برگه دارید که سیستم به صورت ایستا ساخته شده است٬ حال می خواهید یک قسمت در سربرگ صفحه ها را تغییر دهید. چه باید کرد؟ باید این کار را در تمام ۱۰۰ برگه انجام داد در صورتی که در سیستم پویا شما یک فایل برای سربرگ می سازید و آن را در بدنه فایل های دیگر وارد می کنید. حال برای تغییر تنها کافی است که آن فایل را تغییر دهید. البته در ادامه خودتان با انجام این کار، راز این نوع برنامه نویسی را کشف خواهید کرد.
نحوه قرار دادن فایل
کلا چهار تابع برای وارد کردن یک فایل در فایل دیگر وجو ددارند که شامل:
- include()
- include_once()
- require()
- require_once()
برای استفاده از این توابع و وارد کردن فایلی با آنها باید به طریق زیر عمل کرد:
include('نام فایل / نشانی فایل');
include(' files/header.html');
همانطور که مشاهده می کنید در داخل پرانتز ابتدا آدرس و بعد نام فایل آمده است. در اصل file پوشه ای است که شما فایل header.html را در آن قرار داده اید.
تمام توابع بالا عملیات قرار دادن را برای شما انجام می دهند اما با کمی تفاوت. فرق include() با require() این است که در هنگام بروز خطایی در برنامه، با استفاده کردن از include()، یک پیغام نشان داده می شود اما ادامه کدها اجرا و نشان داده می شوند در حالی که در require() ابتدا پیغام خطا نمایان و بعد اجرای کد قطع می شود.
نکته: معمولا در زمان هایی که می خواهیم اطلاعات مهمی را توسط این توابع وارد فایل دیگری کنیم، از تابع require() استفاده می کنیم. این بدین معنی است که ما می خواهیم فایل مورد نظر حتما وارد شده و در صورت بروز خطا یا درست وارد نشدن آن به ما هشدار دهد و از اجرای باقی کدها جلوگیری شود.
هر دوی این توابع نوع دیگری دارند که همراه با _once می آید. این توابع ضمانت می کنند که حتی در صورت دوباره فراخوانی فایل، آن فایل فقط یک بار وارد شود. once در زبان پارسی «یک بار» معنی می شود.
برای نوشتن نشانی فایل در قسمت ابتدایی پرانتز تابع، ما می توانیم به دو صورت عمل کنیم، یکی «مطلق» و دیگری «نسبی».
آدرس دهی مطلق: آدرس دهی مطلق نشانی فایل را از ریشه فهرست رایانه محاسبه و فراخوانی می کند. به طور مثال:
include (‘ C:/php/includes/header.html ’);
همان طور که می بینید نشانی از فهرست C: آغاز شده و به خود فایل header.html رسیده است.
آدرس دهی نسبی: در این نوع آدرس دهی، نشانی از خود فایلی که در آن هستید و تقاضای قرار دادن فایل را می کند آغاز می شود. مثلا:
include(' ../includes/header.html ');
فرض کنید فایل فراخوان کننده در داخل پوشه scripts با آدرس
C:/php/scripts/
قرار دارد و می خواهد فایل header.html را فراخوانی کند. در این صورت ابتدا باید از پوشه scripts بیرون رفته و بعد وارد include شود و باقی آدرس ها.
علامت /.. کار به عقب رفتن از پوشه کنونی را انجام می دهند و بعد به پوشه دلخواه باید راهنمایی شوند. به این شیوه آدرس دهی که نشانی از خود فایل فراخوان کننده آغاز می شود، آدرس دهی نسبی می گوییم. حال زمان آن رسیده که از اندوخته های یادگرفته استفاده کنیم.
قرار دادن فایل خارجی
ابتدا
به داخل پوشه php که قبلا ساخته اید بروید و پوشه جدیدی با نام including
files بسازید. وارد آن شوید و فایلی با نام index.php و پوشه ای با نام
includes بسازید. در داخل پوشه includes هم فایل هایی با نام های
header.html و footer.htmlو style.css بسازید. حال ما پوشه ای به نام
including files داریم که در داخل آن فایل index.php و پوشه includes قرار
دارند.
سربرگ یا header: در داخل این فایل کدهای زیر را بنویسید:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" charset=utf-8" />
<title> فایل های خارجی</title>
<link rel="stylesheet" href="includes/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<h1> قسمت سربرگ</h1>
<div id="navigation">
<ul>
<li><a href="index.php"> خانه</a></li>
</ul>
</div> </div>
<div id="content"> <!-- قسمت محتوا -->
همان طور که مشاهده می کنید در این فایل قسمتی از کدهای اچ تی ام ال که شامل برچسب ها می شوند، قرار دارد. این بدین خاطر است که این فایل در داخل فایل اصلی فراخوانی می شود و در بالای باقی کدها قرار می گیرد. سربرگ را بسته و محتوای آن را ثبت کنید.
footer یا پایین برگ: فایل footer.html را باز کنید و کدهای زیر را در داخل آن قرار دهید:
</div><!-- پایان قسمت محتوا -->
<div id="footer">
<p>
قسمت پایین برگه
</p>
</div>
</body>
</html>
در داخل این فایل برچسب های بستن html و body به همراه دیگر کدها قرار دارند. این فایل هم همانند فایل سربرگ در داخل فایل اصلی قرار داده می شود.
index.php: در این فایل ما باید دو فایل دیگر را فراخوانی کنیم و این کار را به صورت زیر انجام می دهیم:
<?php include ('includes/header.html'); ?>
<h1> قرار دادن فایل های دیگر در فایل اصلی</h1>
<p> در این قسمت محتوای تارنما قرار می گیرد. این قسمت همان فایل ایندکس است.</p>
<?php include ('includes/footer.html'); ?>
همانطور که می بینید در ابتدا و پایان این صفحه دو برگه header و footer توسط تابع include وارد شده اند و هر آنچه در میان این دو تابع گذاشته شوند به صورت محتوا در داخل کادر اصلی نمایان می شوند.
حال فرض کنید شما ۱۰۰ برگه دارید که نیاز دارند این دو قسمت سربرگ و پایین برگ را نمایش بدهند. تنها کار وارد کردن این دو برگه به صورت بالا در داخل آنها است.
شیوه نمایش محتوا از طریق Style: بخش آخر که شیوه نمایش محتوا را تعیین می کند، مطابق معمول در فایل style.css قرار می گیرد.
body {
background:#fafafa;
color:#555;
font:12px Tahoma,Arial, Helvetica, "bitstream vera sans", sans-serif;
}
/* header */
#header {
border:1px solid #bbb;
height:130px;
margin:10px auto;
width:751px;
}
#header h1 {
color:#888;
font-size:24px;
text-align:right;
}
/* navigation */
#navigation {
border-top:1px solid #ccc;
margin:auto;
width:740px;
}
#navigation ul{
overflow:hidden;
list-style:none;
margin:0px;
}
#navigation li {
border-left:1px solid #bbb;
float:right;
width:130px;
height:40px;
list-style:none;
margin:0 auto;
}
#navigation a {
color:#555;
display:block;
line-height:40px;
text-align:center;
font-size:18px;
text-decoration:none;
}
#navigation a:hover {
background:#e3e3e3;
color:#333;
}
#navigation .active {
background:#e3e3e3;
color:#777;
}
/* content */
#content {
border:1px solid #ccc;
height:auto;
min-height:400px;
margin:10px auto;
padding:0 0 20px;
width:751px;
text-align:right;
}
#content h1 {
font-size:16px;
padding:20px 0 0;
}
#content p {
padding:20px 20px 0;
}
/* footer */
#footer {
border:1px solid #ccc;
height:100px;
margin:0 auto;
padding:10px 0;
text-align:center;
width:751px;
}
این شیوه گذاری به ما اجازه می دهد که محتوا را هر طور که دوست داریم نمایش دهیم.
حال یک نگاه به خروجی کار بیاندازیم:
اتفاقی که در صورت استفاده از فایل های متفاوت در ساخت تارنما می افتد این است که مرورگر شما ابتدا به طور پیش فرض به سراغ فایل index می رود و شروع به خواندن کدهای داخل این فایل از بالای صفحه می کند.
نخست به تابع include() که فایل سربرگ را وارد می کند، برخورد می کند که با اجرای این تابع، محتوای فایل سربرگ در داخل فایل index آورده می شود.
سپس مرورگر محتوای زیرین این تابع را به نمایش می گذارد تا به تابع دیگر که باز هم include() است برسد.
این بار این تابع محتوای داخلی فایل پایین برگ را آورده و در فایل اصلی می گذارد. کاربر به هیچ عنوان از این انتقال ها با خبر نمی شود، چیزی که او می بیند همان چیزی است که در صورت داشتن تارنمای ایستا مشاهده می کرد.
فکر می کنیم که اکنون به معنی قرار دادن فایل های متفاوت در داخل یک فایل در طراحی یک تارنما آگاهی پیدا کرده اید.
نکته قابل توجه این است که شما می توانید به تعداد دلخواه از این شیوه استفاده کنید. مثلا فایل دیگری به نام ستون کناری ساخته و در داخل فایل اصلی آنرا وارد کنید. البته باید توجه داشته باشید که برای درست به نمایش در آمدن ستون کناری در صفحه، باید در فایل شیوه CSS، انتخابگرها و کدهای لازم را قرار دهید.
در ادامه دوره تلاش می کنیم که از این فن به صورت های متفاوتی استفاده کنیم. اما چیزی که شما باید در آخر این درس یاد گرفته باشید در ابتدا فهم دلیل این کار و درک چگونگی راحتی و مدیریت بهتر سیستم بعد از استفاده از این فن است.
در درس بعدی ما باز به سراغ ساخت فرم می رویم اما این بار کل روند کار را در داخل یک فایل انجام می دهیم. علاوه بر آن با فن های جدیدی در مورد کار با فرم ها آشنا می شویم که فرم های ما را به صورت حرفه ای تری در خواهند آورد.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.