با
سلام
با ظهور فریم در HTML،تکنیک فریم پنهان بوجود آمد.ایده ی اصلی پشت این تکنیک این است که یک frameset حاوی یک frame پنهان ایجاد کنیم.این فریم برای ارتباطات کلاینت-سرور به کار می رود.برای پنهان کردن یک فریم،باید طول و عرض آن را با صفر 0 مقداردهی کنید(در این مورد کمی بعد توضیح داده می شود).اگرچه بعضی مرورگرهای اولیه(مانند Netscape) نمی توانستند فریم را کاملا پنهان کنند و یک فریم با حاشیه ی ضخیم نشان می دادند،ولی باز هم این تکنیک محبوب برنامه نویسان بود.
الگو ی کار
تکنیک فریم پنهان از یک الگوی چهار مرحله ای تبعیت می کند.مرحله ی اول همیشه با یک فریم قابل مشاهده شروع می شود.کاربر در این فریم با صفحه تعامل دارد ولی طبیعتا کاربر نمی داند که یک فریم پنهان وجود دارد.بعضی وقت ها کاربر می خواهد داده هایی را از سرور بگیرد در این اثنا،اولین مرحله ی روند شروع می شود:یک تابع جاوااسکریپت روی فریم پنهان فرواخوانی می شود.این تابع می تواند آنقدر ساده باشد(مثل همین مثال ما) که فریم پنهان را به یک صفحه ی دیگر منتقل کند یا آنقدر پیچیده باشد که داده های فرم را به سرور ارسال کند.صرف نظر از کارکرد این تابع،نتیجه،مرحله ی دوم است:یعنی یک درخواست به سرور ارسال می شود.
مرحله ی سوم در این الگو پاسخی است که از سرور دریافت می شود.این پاسخ باید یک صفحه ی دیگر باشد.صفحه ی فوق حاوی داده های درخواست شده از سرور و چند تابع جاوااسکریپت برای منتقل کردن این داده ها از فریم غیر پنهان باشد.معمولا این کار با اختصاص دادن یک رخدادگردان onload در صفحه ی وب سمت سرور انجام می شود.بعد از اینکه فریم غیر پنهان کاملا بارگذاری شد،این رخدادگردان یک تابع را فراخوانی می کند(مرحله ی چهارم).حال که داده ها در فریم غیر پنهان قرار گرفته اند،تصمیم گیری در مورد داده ها بر عهده ی فریم است.
درخواست Get مربوط به فریم پنهان
حال که تکنیک فریم پنهان را شرح دادیم(اگر کاملا متوجه نشدید اشکالی ندارد.مثال راحتتر از توضیحش است)،بهتر است یک مثال عملی را کار کنیم.در این مثال یک صفحه ی جستجوی ساده ایجاد می کنیم تا نماینده ی خدمات مشتریان بتواند اطلاعات مربوط به یک مشتری را پیدا کند.یعنی کاربر شناسه(ID) مشتری را وارد می کند و اطلاعات آن مشتری را دریافت می کند.چون چنین عملکردی،بیشتر با استفاده از پایگاه داده ممکن است،پس باید کمی برنامه نویسی سمت سرور نیز انجام دهیم.این مثال از PHP که یک زبان اوپن سورس عالی برای برنامه نویسی سرورساید است و MySQL که یک پایگاه داده ی اوپن سورس و سازگار با PHP است،استفاده می کند.
ایجاد پایگاه داده
برای اینکه بتوانید داده ها را جستجو کنید،باید یک جدول برای نگهداری داده ها داشته باشید.این جدول را با استفاده از کد SQL زیر می توان ایجاد کرد:
create table customers c_id int(11) auto_increment PRIMARY KEY, c_name varchar(255), c_address varchar(255), c_city varchar(255), c_state varchar(255), c_zip varchar(255), c_phone varchar(255), c_email varchar(255) );
مهم ترین فیلد این جدول c_id است که برای جستجو ی مشتری به کار می رود.
ایجاد صفحات HTML
ما کلا سه صفحه خواهیم داشت:
index.html که حاوی یک فریم پنهان و یک فریم آشکار است
display.html هم صفحه ای است که در فریم آشکار صفحه ی بالا نمایش داده می شود.
و getcustomerdata.php که مسئول دریافت ID مشتری،جستجو و نمایش اطلاعات مشتری مربوط است.
کد صفحه ی index.html:
<frameset rows="100%,0" frameborder="0"> <frame name="displayframe" src="display.html" noresize="noresize" /> <frame name="hiddenFrame" src="about:blank" noresize="noresize" /> </frameset>
مهمترین قسمت این کد،صفت rows عنصر frameset است.اگر این صفت را با 100,0% مقداردهی کنید،مرورگرها می فهمند که نباید بدنه ی فریم دوم که اسمش hiddenframe است را نمایش دهند.بعد،صفت frameborder با 0 مقداردهی می شود تا هیچ حاشیه ی مرئی حول فریم قرار نگیرد.سپس باید از صفت noresize استفاده کنید تا کاربر نتواند اندازه ی فریم ها را تغییر دهد و محتویات فریم پنهان را مشاهده کند.
کد صفحه ی display.html:
بعد نوبت به صفحه ی درخواست می رسد که داده های مربوط به مشتریان را نمایش می دهد.این صفحه یک صفحه ی نسبتا ساده است که در آن از یک کادر متنی برای وارد کردن شناسه ی مشتری،یک دکمه برای اجرای درخواست و یک عنصر div برای نمایش اطلاعات دریافت شده تشکیل می شود:
<html>
<head>
<script language="javascript">
//Request data from DB.
function requestCustomerInfo()
{
var sId=document.getElementById("txtCustomerid").value;
top.frames['hiddenFrame'].location='getcustomerdata.php?id='+sId;
}
//Display data that returned from DB.
function displayCustomerinfo(sText)
{
document.getElementById("divCustomerinfo").innerHTML=sText;
}
</script>
</head>
<body>
<p>Enter customer ID number to retrieve information:</p>
<p>Customer ID:<input type="text" id="txtCustomerid" /></p>
<p><input type="button" value="Get Customer info!" onClick="requestCustomerInfo()" /></p>
<div id="divCustomerinfo"></div>
</body>
</html>این دکمه یک تابع به نام ()requestCustomerInfo را فراخوانی می کند که برای بازیابی اطلاعات،با فریم پنهان ارتباط برقرار می کند.این تابع مقدار کادر متنی را می گیرد و آن را به رشته ی جستجو(query string) در فایل getcustomerdata.php اضافه می کند تا یک URL به صورت مثلا getcustomerdata.php?id=48 به وجود آید.بعد این URL به فریم پنهان اختصاص داده می شود:
function requestCustomerInfo()
{
var sId=document.getElementById("txtCustomerid").value;
top.frames['hiddenFrame'].location='getcustomerdata.php?id='+sId;
}اولین کار این تابع این است که شماره ی شناسه ی مشتری را از کادر متنی بگیرد.برای این کار تابع document.getElementById به همراه شناسه ی کادر متنی یعنی txtCustomerid فراخوانی می شود و ویژه گی value آن مورد استفاده قرار می گیرد(ویژه گی value،متن کادر متنی را در خود دارد).بعد این شناسه به رشته ی =getcustomerdata.php?id اضافه می شود تا URL کامل بوجود آید.خط دوم URL را بوجود آورده،آن را به فریم پنهان اختصاص می دهد.برای ارجاع به فریم پنهان،ابتدا باید با استفاده از شی top به بالاترین پتجره ی مرورگر دسترسی یابید.این شی یک آرایه به نام frames دارد که تمام فریم ها،از جمله فریم پنهان در این آرایه قرار دارد.چون هر فریم یک شی از نوع window است،می توانید location (مسیر) آنرا با یک URL مقداردهی کنید.
برای درخواست اطلاعات همین کارها کافی است.چون این درخواست از نوع get (از طریق رشته ی پرس و جو) می باشد،ساده است.
حالا یک تابع دیگر برای نمایش اطلاعات مشتریان لازم است.وقتی داده ها برمی گردند،این تابع بنام displayCustomerinfo توسط فریم پنهان فراخوانی می شود.تنها آرگومان این تابع رشته ای است که حاوی اطلاعات مشتریان است:
function displayCustomerinfo(sText)
{
document.getElementById("divCustomerinfo").innerHTML=sText;
}این تابع اطلاعات کاربر را در div قرار می دهد.کد مربوط به صفحه نمایش اصلی کامل شد.حالا وقت آن است که صفحه ی سمت سرور را بوجود آورید.
کد صفحه ی getcustomerdata.php:
کد مربوط به getcustomerdata.php ترکیبی از مقداری HTML و کمی کد PHP در دو محل است:
<?php //php code here ?> </head> <body> <div id=”infodivTOreturn”><?php echo $sInfo;?></div> </body> </html>
در این صفحه اولین بلاک php که مشاهده می کنید،کد لازم برای بازیابی داده های مربوط به مشتری است و بلاک دوم،متغیر sInfo$ را که حاوی داده هاست در یک div درج می کند.از این div است که داده ها را خواهید خواند و آن را به فریم نمایش خواهید فرستاد.برای این کار باید یک تابع جاوااسکریپت بنویسید که وقتی صفحه به طور کامل بازگذاری شد،فراخوانی شود.
window.onload=function(){
var infodivTOreturn=document.getElementById(“infodivTOreturn”);
top.frames['displayframe'].displayCustomerinfo(infodivTOreturn.innerHTML);
};این تابع مستقیما به رخدادگردان window.onload داده می شود.ابتدا یک ارجاع به div که حاوی اطلاعات مشتری است،به دست می آورد.بعد با استفاده از آرایه ی top.frames به فریمی که اطلاعات را نمایش می دهد،دستیابی پیدا می کند و با رد کردن innerHTML مربوط به div به عنوان آرگومان،تابع displayCustomerinfo را که قبلا تعریف کردیم فراخوانی می کند.خوب،این اطلاعات از کجا می آید؟برای استخراج اطلاعات از پایگاه داده به php نیاز داریم.یعنی کد زیر:
<html>
<head>
<title>Get customer data from database!</title>
<script language=”javascript”>
window.onload=function(){
var infodivTOreturn=document.getElementById(“infodivTOreturn”);
top.frames['displayframe'].displayCustomerinfo(infodivTOreturn.innerHTML);
};
</script>
<?php
$sId=$_GET['id'];
$sInfo=”;$server=’localhost’;
$database=’test’;
$username=’root’;
$password=”;
$query=”select * from customers where c_id=’$sId’”;
$dblink=@mysql_connect($server,$username,$password) or $sInfo=’Unable to connect MySQL.<br />’;
@mysql_select_db($database) or $sInfo.=’Unable to select database.’;
if(!$sInfo)
{
$result=mysql_query($query);
if(!$sId){
$sInfo=’Customer ID is empty! please enter a id.’;
}elseif(mysql_num_rows($result)>0)
{
$CusInfo=mysql_fetch_assoc($result);
$sInfo=$CusInfo['c_name'].’<br />’.
$CusInfo['c_address'].’<br />’.
$CusInfo['c_city'].’<br />’.
$CusInfo['c_state'].’<br />’.
$CusInfo['c_zip'].’<br />’.
$CusInfo['c_phone'].’<br /><a href=”mailto://’.
$CusInfo['c_email'].’”>’.$CusInfo['c_email'].’</a><br />’;
}else{
$sInfo=’Customer with ID ‘.$sId.’ doesn\’t exist.’;
}
mysql_close($dblink);
}
?>
</head>
<body>
<div id=”infodivTOreturn”><?php echo $sInfo;?></div>
</body>
</html>نکته:اگر در هر کجای کد php مشکل دارید،می توانید در بخش نظرات مطرح کنید.
امیدوارم استفاده کرده باشید.
منتظر نظرات شما هستیم.
سایت جالبی دارین 🙂
خسته نباشید :kiss:
سلام دوست عزیز
ممنونم ، چون دوستان جالب و خوبی مثل شما داریم 🙂
موفقیت