در هشتمین بخش از آموزش برنامه نویسی php بر پایه مدل mvc به آموزش روش طراحی بخش view و رابط کاربری یک پروزه MVC می پردازیم. ابتدا روش طراحی این بخش را آموزش داده و در ادامه فایل های الگوی view را برای پروژه نمونه پیاده سازی می کنیم.
در بخش های قبلی روش طراحی و پیاده سازی بخش مدل و بخش کنترلر پرداخته شده و می دانید که کاربران سایت با بخش view در ارتباط هستند و درخواست هایشان را از طریق این بخش به کنترولر می فرستند. بخش کنترولر در صورت نیاز با بخش مدل ارتباط برقرار کرده و داده ها را مدل می فرستد یا داده ها را از مدل دریافت می کند و نتایج را در متغیرهایی قرار داده و یک فایل الگوی view را نمایش می دهد. در این فایل الگو که دارای پسوند .tpl بوده و در پوشه views از سایت قرارگرفته ، این متغیرها چاپ می شود تا کاربر ببیند، این متغیرها می توانند دارای یک مقدار ساده ، یک آرایه یک بعدی و یا آرایه دوبعدی باشد.
مجموعه فیلم های آموزشی آموزش برنامه نویسی PHP بر پایه مدل MVC را از همین سایت دریافت کنید.
طراحی بخش view
برای طراحی بخش ویو برای یک پروژه باید از خودمان بپرسیم، در یک پروژه مبتنی بر وب (سایت)، کاربر باید شاهد چه صفحاتی باشد، و در هر صفحه باید چه نوع اطلاعاتی ببیند و این اطلاعات مربوط به کدام جدول (یا بیشتر مربوط به کدام جدول) از بانک اطلاعاتی است، یا اینکه این صفحات مربوط به کدام بخش از نرم افزار و کدام کنترولر است .
بنابراین بازای هر فایل کنترولر یک زیر پوشه در مسیر views از سایت قرار می دهیم. فرض کنید دو جدول بنام های tbl_stud و tbl_dars داریم و برای آن دو کلاس کنترولر بنام های stud_controller و dars_controller داریم. پس در زیرپوشه views دو زیرپوشه stud و dars خواهیم داشت.
در داخل هر زیر پوشه تعدادی فایل با پسوند .tpl ایجاد می کنیم، هر کدام برای یکی از صفحاتی که کاربر قرار است ببیند. فرض کنید در سیستم آاموزش قرار است کاربر صفحات زیر را ببیند:
برای دانشجویان:
- صفحه لیست دانشجویان
- صفحه فرم افزودن دانشجو
- صفحه فرم ویرایش دانشجو
برای دروس :
- صفحه لیست دروس
- صفحه فرم افزودن درس
- صفحه فرم ویرایش درس
برای هر کنترولر سه فایل الگو (با پسوند tpl ) در پوشه view آنها قرار می دهیم و ساختار سایت بصورت زیر خواهد شد:
پیاده سازی فایل های الگوی View
طراحی و پیاده سازی صفحات الگو با استفاده از تکنولوژی ها و برنامه نویسی های سمت کلاینت مثل HTML، CSS، بوت استرپ، جاوااسکریپت، جی کوئری و غیره استفاده می کنیم. در ساده ترین شکل می توان فقط با زبان HTML صفحه الگو را طراحی کرد.
قبلاً اشاره کنترولر فایل الگو را برای نمایش تعیین می کند، اطلاعاتی که باید در صفحه نشان داده شود را در متغیرهایی قرار می دهد و سپس صفحه الگو را نمایش می دهد، پس در طراحی صفحات الگو باید از متغیرهای ایجاد شده توسط کنترولر استفاده کنیم. گاهی اوقات هم صفحه الگو چیزی برای نمایش دادن ندارد مثلاً در صفحه افزودن دانشجوی جدید ، هیچ اطلاعاتی نمایش داده نشده بلکه کافی است یک فرم خالی نمایش دهیم . در حالی که در صفحه ویرایش دانشجو باید فرم قبلی را طراحی کنیم و اطلاعات دانشجو را در ورودی های فرم به عنوان مقادیر اولیه نمایش دهیم، حال این اطلاعات دانشجو را کنترولر از بانک خوانده و داخل متغیری قرار داده و به صفحه الگو فرستاده است و طراحی صفحه الگو کافی است فیلدهای دانشجو که در این آرایه قرار داده شده است را در فرم نمایش دهد.
بر این اساس فایل های الگو برای جدول دانشجویان بصورت زیر طراحی می شود:
صفحه add.tpl:
<?php include('views/header.tpl');?>
<form action="index.php?id=stud/save" method="post">
<table width="500" border="0" >
<tr>
<td>Sid</td>
<td> <input type="text" name="sid" readonly="readonly" value="0"></td>
</tr>
<tr>
<td>Name</td>
<td> <input type="text" name="name" ></td>
</tr>
<tr>
<td>Avgr</td>
<td><input type="text" name="avgr" ></td>
</tr>
<tr>
<td>Fid</td>
<td><input type="text" name="fid" ></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" value="Save "></td>
</tr>
</table>
</form>
<?php include('views/footer.tpl');?>
فایل های header.tpl و footer.tpl برای طراحی قسمت بالا و قسمت پایین صفحه طراحی شده و صفحات الگو ضمیمه شده اند.
صفحه edit.tpl :
<?php include('views/header.tpl');?>
<form action="index.php?id=stud/save" method="post">
<table width="500" border="0" >
<tr>
<td>Sid</td>
<td> <input type="text" name="sid" readonly="readonly" value="<?php echo $row['sid'] ?>"></td>
</tr>
<tr>
<td>Name</td>
<td><label for="textfield"></label>
<input type="text" name="name" value="<?php echo $row['name'] ?>"></td>
</tr>
<tr>
<td>Avgr</td>
<td><input type="text" name="avgr" value="<?php echo $row['avgr'] ?>"></td>
</tr>
<tr>
<td>Fid</td>
<td><input type="text" name="fid" value="<?php echo $row['fid'] ?>"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Save "></td>
</tr>
</table>
</form>
<?php include('views/footer.tpl');?>
کنترولر مشخصات دانشجو را خوانده در متغیری بنام row قرار داده است و این متغیر row در اصل یک آرایه انجمنی است که اندیس های آن اسم ستون های جدول tbl_studs است و در صفحه edit.tpl هر کدام از فیلدهای آن به خاصیت value از تگ input نسبت داده شده است که جعبه متن مقدار قبلی فیلد را نشان دهد.
صفحه index.tpl
<?php include('views/header.tpl');?>
<a href="index.php?id=stud/add">Add Student</a>
<hr /><table width="611" border="0">
<tr>
<td width="45"> SID </td>
<td width="307">NAME</td>
<td width="76"> AVGR</td>
<td width="57"> FID </td>
<td width="104"> </td>
</tr>
<?php foreach($rows as $row) { ?>
<tr>
<td><?php echo $row['sid']; ?> </td>
<td><?php echo $row['name']; ?> </td>
<td><?php echo $row['avgr']; ?> </td>
<td><?php echo $row['fid']; ?> </td>
<td>
<a href="index.php?id=stud/delete/<?php echo $row['sid']; ?>">
delete</a> |
<a href="index.php?id=stud/edit/<?php echo $row['sid']; ?>">edit</a> </td>
</tr>
<?php } ?>
</table>
<?php include('views/footer.tpl');?>
در بخش آموزش مدل گفته شد که برای خواندن لیستی از رکوردها از بانک اطلاعاتی، نتیجه دستور select طی یک آرایه واکشی شده و هر رکورد در یک سطر از آرایه قرار می گیرد .
برای خواندن دانشجویان، نتیجه خواندن از بانک اطلاعاتی، یک آرایه دو بعدی است که هر سطر آن شامل مشخصات یک دانشجو خواهد بود، این آرایه دو بعدی در متغیری مثل rows قرار گرفته و به view فرستاده می شود و در فایل index.tpl طی یک حلقه تکرار foreach رکوردهای دانشجویان در سطر های جدول چاپ شده اند.
فایل های هدر و فوتر
فایل هدر برای ساخت بالای صفحات استفاده می شود و دارای طراحی زیر است. (متغیر title حاوی عنوان صفحه است که در کنترولر مقدار دهی شده است)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head><body>
<h1>
<?php echo $title ; ?>
</h1>
<hr />
فایل footer.php نیز دارای طراحی ساده زیر است .
<hr />
<h4> designed by webaca.ir </h4>
</body>
</html>
شما می توانید به جای استفاده از این فایل های هدر و فوتر ساده طراحی پیشرفته تر و دلخواه خودتان را داشته باشید. و برای این کار کافی است محتوای دلخواه خودتان را جایگزین محتوای فعلی این دو فایل کنید. برای یادگیری نحوه طراحی و ساخت هدر و فوتر به بخش مربوطه در آموزش برنامه نویسی PHP در همین سایت مراجعه کنید.
دریافت نمونه پروژه PHP بر اساس MVC آماده شده بر اساس آموزش های این دوره