از صفحه html ، برای نمایش داده های فیلدهای جدول بانک اطلاعاتی استفاده می کنیم

 کار را در محیط برنامه webmatrix ادامه می دهیم
  در مرکز محیط کار ، گزینه create a new file  به چشم می خورد . روی ان کلیک کنید تا اولین صفحه را ایجاد کنیم .
 
 
  در صفحه انتخاب نوع فایل جدید ، روی html کلیک کنید
 
 
  در قسمت پائین همین پنجره ، قبل از کلیک روی ok ، نام فایل جدید را بدهید . من نام 01 را انتخاب می کنم . نام صفحه من می شود 01.html
 
  حالا وارد محیط برنامه نویسی ان می شویم
  نکته 1 : هیچکدام از خطهای موجود در برنامه را پاک نکنید . فقط دستورات لازم را از این به بعد در body و بخشهای ذکر شده دیگر بنویسید
 

نکته 2 :

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

 
 

گام اول :

طراحی یک جدول html برای نمایش محتویات جدول داده info :

 
  در قسمت body ، دستورات زیر را بنویسید :
 

 

<body>

<h1>student information</h1>

<table>
<tr>
  <th>id</th>
  <th>name</th>
  <th>family</th>

<th>avg</th>


</tr>
<tr>
  <td>1</td>
  <td>ali</td>
  <td>samadi</td>

<td>14.25</td>

</tr>
</table>

</body>

 
 

برنامه را اجرا کنید

برای اجرای برنامه باید روی دکمه run کلیک کرده تا زیر منوی ان باز شود . سپس مشخص کنید با کدام مرورگر می خواهید برنامه اجرا شود

 
 
 

فعلا جدول ما هیچ شکل و شمایلی ندارد

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

شما می توانید این فایل را باز کرده و استایل های تعریف شده در ا ن را به میل خودتان تغییر دهید

 
  برای  ایجاد اتصال بین فایل 01.html و فایل استایل خارجی appml.css باید تگ link را به برنامه 01.html اضافه کنیم
 
  این تگ را درون تگ head می نویسیم :

 

<head>
<link rel="stylesheet" href="appml.css">
</head>

 
 

در فایل appml.css  کلاسی با نام appmltable برای قالب بندی جدولها تعریف شده است

در تگ table برنامه 01.html عبارتی را می نویسیم که بگوید جدول با استفاده از استایلهای کلاس appmltable ایجاد شود

 

class="appmltable"

  برنامه تا این لحظه :

 

  
<!DOCTYPEhtml>

 <html lang="en">

<head>

<meta charset="utf-8"/>

<title></title>

 <link rel="stylesheet"href="appml.css">

 </head>

<body>

<h1>student information</h1>

 <table class="appmltable">

<tr>

<th>id</th>

<th>name</th>

<th>family</th>

<th>avg</th>

 </tr>

<tr>

<td>1</td>

<td>ali</td>

<td>samadi</td>

<td>14.25</td>

</tr>

</table>

 </body>

</html>

 
  برنامه را دوباره اجرا کنید .
 
 

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

سطر دوم فعلا اطلاعات یک دانش آموز فرضی را نمایش می دهد

ما می خواهیم بگوئیم داده های موجود در هر فیلد جدول info را نمایش دهد

نام فیلدهای من عبارت اند از :

Id , name , family , avg

 
  لذا باید دستورات زیر را بنویسیم :

 
<!DOCTYPEhtml>


<html lang="en">

<head>

<meta charset="utf-8"/>

<title></title>

 

<link rel="stylesheet"href="appml.css">

 

</head>

<body>

<h1>student information</h1>

 

<table class="appmltable">

<tr>

<th>id</th>

<th>name</th>

<th>family</th>

<th>avg</th>

 

</tr>

<tr>

<td>#id#</td>

<td>#name#</td>

<td>#family#</td>

<td>#avg#</td>

</tr>

</table>

 

</body>

</html>

 
 

حالا کل جدول را در یک تگ دایو با نام place01 قرار دهید

و ای دی جدول را هم چیزی مثل t1 بگذارید

 

 


<!DOCTYPE html>


<html>


 <head>

<link rel="stylesheet" href="appml.css">

</head>



<body>

<h1>My First Web Application</h1>



<div id="Place01">
 
 <table class="appmltable"  id=”t1”>

<tr>

<th>id</th>

<th>name</th>

<th>family</th>

<th>avg</th>

 

</tr>

<tr>

<td>#id#</td>

<td>#name#</td>

<td>#family#</td>

<td>#avg#</td>

</tr>

</table>

</div>


</body>
</html>

 
 

در صورتیکه برنامه را اجرا کنید هنوز داده های جدول info را مشاهده نخواهید کرد

چرا ؟

چون هنوز ما رابطه ای بین فایل 01.html و بانک ایجاد نکرده ایم