استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP

همان طور که می دانیم جاوا اسکریپت (JavaScript) به عنوان یک زبان اسکریپت نویسی سمت کاربر و قابل اجرا در مرورگرها به خودی خود فواید و کاربردهای زیادی در صفحات وب دارد و تقریبا تمام برنامه نویسان و توسعه دهنده گان از آن استفاده می کنند، اما در کنار این کاربردها مواردی پیش می آید که بخواهیم از قدرت و قابلیت های آن برای نمایش محتوای داینامیک سمت سرور و به طور خاص در تعامل و ترکیب با PHP استفاده کنیم، این شیوه یکی از معمول ترین روش هایی است که بیشتر سایت های خدمات دهنده در زمینه ابزارهای وبلاگ نویسی برای کوتاه کردن کدهای نهایی و خیلی فواید دیگر از آن استفاده می کنند، از این رو و به جهت اینکه پرسش های زیادی از طرف کاربران در این خصوص مطرح می شود، قصد داریم این آموزش را به نحوه استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP اختصاص دهیم.
هدف از ترکیب JavaScript و PHP
پیش از اینکه به ادامه آموزش بپردازیم بد نیست در یک جمع بندی کلی با هدف از تکنیک استفاده ترکیبی جاوا اسکریپت (JavaScript) و PHP آشنا شویم.
شرایطی که باعث می شود از جاوا اسکریپت و PHP به صورت ترکیبی استفاده کنیم اغلب به مواردی مربوط می شوند که بخواهیم به طور مثال محتوای داینامیک خروجی داده شده توسط کدهای PHP را به صورت فریم در صفحات HTML نمایش دهیم، به طور مثال فرض کنید فایل PHP با آدرس زیرپیج رنک سایت مورد نظر را محاسبه و به صورت آیکن نمایش می دهد.
http://www.yoursite.com/page_rank.php?url=$url&img=5
واضح است که اگر مقدار متغیر url درج شده در کد بالا را به صورت دستی تنظیم و این آدرس فرضی را در نوار آدرس مرورگر وارد کنیم احتمالا آیکن پیج رنک به نمایش در می آید، اما مشکل ما اجرای این کار به صورت خودکار و در صفحات وب است که امکان درج و اجرای مستقیم دستورات PHP در صفحات HTML وجود ندارد و از طرفی تمام و شاید اغلب کاربران این امکان را ندارند که از دستورات سمت سرور در وبلاگ ها استفاده کنند و محتوای فایل PHP را نمایش دهند، به همین خاطر باید به دنبال یک واسطه بین فایل های داینامیک PHP و صفحات استاتیک HTML باشیم، این واسطه چیزی نیست جزء دستورات زبان جاوا اسکریپت (JavaScript) که به راحتی می توان به کمک آن و تنها با چند خط کدنویسی ساده به هدف مورد نظر رسید و کد نهایی را به شکل نمونه زیر تغییر داد.<script type="text/javascript" src="http://yoursite.com/page_rank.php?url=$url&img=5"></script>
اکنون می توان کد اسکریپتی بالا را در صفحات HTML به راحتی استفاده کرد، این روش جایگزین مناسبی است برای تکنیک های مشابه (مانند استفاده از iframe و...)، اما مراحل انجام این کار.فراخوانی فایل PHP در JavaScript
اولین گام این است که آدرس فایل PHP خود را در قسمت src تگ های جاوا اسکریپت آدرس دهی کنیم، البته اگر تعداد فایل های سمت سرور بیش از یک مورد باشد، فایلی باید در این قسمت تنظیم شود که خروجی را تولید می کند و نیازی به وارد کردن سایر فایل ها درون دستورات جاوا اسکریپت نیست، به مثال زیر توجه کنید.
<script type="text/javascript" src="http://yoursite.com/output.php"></script>
نکته 1: اگر فایل سمت سرور (فایل PHP) نیاز به دریافت پارامترهایی داشته باشد، مانند متد GET در حالت عادی، می توانیم پارامترها را با افزودن علامت ? به انتهای آدرس و استفاده از علامت های & و =، به هر تعداد که لازم است تنظیم کنیم.نکته 2: استفاده از این روش محدود به لینک های داینامیک نیست، درواقع با هر لینکی که فایل سرور به درستی توسط آن فراخوانی شود، خروجی دریافت شده و به نمایش در می آید.
تنظیمات JavaScript در فایل PHP
در گام دوم و در فایل PHP، باید خروجی کدها را مطابق با syntax دستور document.write تنظیم کنیم، همان طور که می دانیم یک دستور ساده document.write در جاوا اسکریپت به صورت زیر است:
<script type="text/javascript">
document.write('چاپ خروجی مورد نظر در مرورگر');
</script>
لذا وقتی این دستور را در کدهای PHP استفاده می کنیم باید به نکات زیر توجه داشته باشیم.- درج موارد مربوط به document.write درون تگ های PHP مجاز نیست و باید خارج از علامت های php?> و ?> باشد.
نمونه اشتباه:
<?php
document.write('echo "ترکیب جاوا اسکریپت و PHP";');
?>
نمونه صحیح:document.write('<?php
echo "ترکیب جاوا اسکریپت و PHP";
?>');
- به جهت رعایت syntax صحیح و مطابق با دستور العمل جاوا اسکریپت، علامت های ' و " در خروجی را با یک بک اسلش (\) ایمن سازی می کنیم، دقت کنید که در برخی سرور ها به جهت روشن بودن قابلیت magic_quotes_gpc (این قابلیت علامت های ' و " را با افزودن یک بک اسلش ایمن سازی می کند)، این کار به صورت خودکار انجام می شود و لذا ابتدا باید این قابلیت را غیر فعال کنید یا بک اسلش های اضافه شده را حذف نمائید تا از درج دو بک اسلش (یک بک اسلش توسط magic_quotes_gpc و یک بک اسلش دیگر توسط توابعی مانند addslashes) اجتناب شود، نمونه راه حل زیر می تواند هر دو مشکل را بر طرف کند.document.write('<?php
//تابعی برای حذف بک اسلش های اضافه
function GpcClean($str){
if(get_magic_quotes_gpc()){
return stripslashes($str);
}
return $str;
}
//افزودن بک اسلش به خروجی
echo addslashes(GpcClean("ترکیب جاوا اسکریپت و PHP"));
?>');
ملاحظه می کنید که برای بررسی روشن بودن قابلیت magic_quotes_gpc از تابع get_magic_quotes_gpc استفاده کرده ایم، اگر این قابلیت روشن باشد (مقادیر برگردانده شده توسط تابع get_magic_quotes_gpc برابر با TRUE بود)، مقادیر خروجی از فیلتر تابع stripslashes عبور کرده و بک اسلش های زائد حذف می شوند، در نهایت نیز با تابع addslashes، هر جا علامت ' یا " در خروجی وجود داشته باشد به صورت '\ و "\ تبدیل می شوند تا مطابق با syntax دستورات جاوا اسکریپت باشند.نکته: استفاده از خط جدید (line break) در خروجی، مجاز نیست و موجب از کار افتادن نمایش کد می شود، به عبارت دیگر نباید از حالت Enter در خروجی کدهای PHP در ترکیب با جاوا اسکریپت استفاده شود.
دسته بندی: آموزش کاربردی » JavaScript
برچسب ها: JavaScript - PHP

نمایش پیام در حال بارگذاری با جاوا اسکریپت (JavaScript)
ساخت افکت رنگی با جاوا اسکریپت (JavaScript)
کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry
نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
دیدگاه


عليرضا
۱۴:۵۴ ۱۳۹۲/۰۱/۲۲
سلام . ممنون از آموزشهاتون . در مورد فريم وركهاي php مثل zend ميخواستم ازتون بپرسم كه در چه جاهايي بايد از اين فريم وركها استفاده كنيم .من با php اشنا هستم و مشغول يادگيري شي گرايي هستم ولي گويا بايد فريم وركها را هم ياد بگيرم . مثلا ايا شما همين سايت را با فزيم ورك خاصي طراحي كرده ايد؟
سلام
استفاده از فریم ورک اجباری نیست و حتی در بیشتر موراد غیر ضروری است، PHP به تنهایی آنقدر قدرتمند است که بتواند نیازهای برنامه نویسان وب را پوشش دهد، استفاده از فریم ورک در موارد خاصی توصیه می شود، به طور مثال برای کسانی که تجربه کدنویسی ندارند یا برخی امکانات که به صورت عادی با PHP در دسترس نیست، به فرض تا آنجا که می دانیم PHP به صورت پیش فرض از زبان فارسی در هنگام خروجی pdf پشتیبانی نمی کند، اما فریم ورک zend این کار را انجام می دهد، حال اگر قرار است سایت شما فایل های pdf از محتوایی بسازد که فارسی است، نیاز به فریم ورک است که کار با آنها چندان سخت نیست، فریم ورک را در صفحه وارد می کنید و به این ترتیب به کلاس ها و توابع آن دسترسی دارید.
در مورد اینکه در سایت از فریم ورک استفاده شده یا خیر، در حال حاضر از هیچ فریم ورکی استفاده نشده است، مهم این است که شما با نظم و ساختار مشخص برنامه بنویسید که برای توسعه بعدی آن، نیاز به کمترین صرف وقت باشد، البته معمولا تجربه این مورد به تدریج کسب می شود.
استفاده از فریم ورک اجباری نیست و حتی در بیشتر موراد غیر ضروری است، PHP به تنهایی آنقدر قدرتمند است که بتواند نیازهای برنامه نویسان وب را پوشش دهد، استفاده از فریم ورک در موارد خاصی توصیه می شود، به طور مثال برای کسانی که تجربه کدنویسی ندارند یا برخی امکانات که به صورت عادی با PHP در دسترس نیست، به فرض تا آنجا که می دانیم PHP به صورت پیش فرض از زبان فارسی در هنگام خروجی pdf پشتیبانی نمی کند، اما فریم ورک zend این کار را انجام می دهد، حال اگر قرار است سایت شما فایل های pdf از محتوایی بسازد که فارسی است، نیاز به فریم ورک است که کار با آنها چندان سخت نیست، فریم ورک را در صفحه وارد می کنید و به این ترتیب به کلاس ها و توابع آن دسترسی دارید.
در مورد اینکه در سایت از فریم ورک استفاده شده یا خیر، در حال حاضر از هیچ فریم ورکی استفاده نشده است، مهم این است که شما با نظم و ساختار مشخص برنامه بنویسید که برای توسعه بعدی آن، نیاز به کمترین صرف وقت باشد، البته معمولا تجربه این مورد به تدریج کسب می شود.
۲۱:۱۷ ۱۳۹۲/۰۱/۱۶
ممنون به خاطر آموزش های خوبتون. دوستان می تونن از آموزش های این سایت
تشکر
pix3l.ir/Programming.aspx
هم استفاده کنند . من هر روز یک سر میزنم مطالبش خیلی خوب و مفیده. توی زمینه پروژه برنامه نویسی هم کار می کنه.تشکر
علی
۱۵:۲۶ ۱۳۹۲/۰۱/۱۶
خیلی ممنون از پاسختون :)
این آخرین سوال بنده هست.
حالا بنده ی کد نوشتم برای قرار دادن شکلک در متن , مثلا من اگه :) ارسال کنم. در سایت شکلکش نمایش داده بشه.
کد شکلک ها هم روی وبلاگ آزمایش کردم عمل میکنه.
حالا بنده چطور روی دو تا
برای اینکه مطلبتون بهم نخوره من به اینجا سر میزنم , میتونید 24 ساعت بعد پاسخ حذفشون کنید.
با سپاس
این آخرین سوال بنده هست.
<?php if ($_smarty_tpl->tpl_vars['item']->value['content']){?>
<div class="ow_newsfeed_content ow_smallmargin"><?php echo $_smarty_tpl->tpl_vars['item']->value['content'];?>
این کد های من است. ['content']
برای نمایش مطلب تنظیمشون کردم. (هردو شون)حالا بنده ی کد نوشتم برای قرار دادن شکلک در متن , مثلا من اگه :) ارسال کنم. در سایت شکلکش نمایش داده بشه.
<div class="comment"> محل کد</div>
در بالا نوشتم محل کد, یعنی پست باید اونجا (محل کد) قرار بگیرد نمایش داده بشه تا در نهایت :) تبدیل به شکلک شود.کد شکلک ها هم روی وبلاگ آزمایش کردم عمل میکنه.
حالا بنده چطور روی دو تا
['content']
بالا قرار دهم تا کد عمل کند؟برای اینکه مطلبتون بهم نخوره من به اینجا سر میزنم , میتونید 24 ساعت بعد پاسخ حذفشون کنید.
با سپاس
برای این مورد باید ببیند مقادیر content چگونه فراخوانی می شود و سورس اصلی آن را پیدا کنید، سپس داخل آن سورس را باید ویرایش و موارد مد نظرتان را اضافه کنید، این مورد را نمی توانیم به سادگی برایتان توضیح دهیم، نیازمند آشنایی شما با مبحث آرایه ها و برنامه نویسی شی گرا در php است که خود مبحثی مفصل دارد.
علی
۰۳:۳۳ ۱۳۹۲/۰۱/۱۶
با سلام
سوالم زیاد به این موضوع نمیخوره , ممنون میشم کمکم کنید.
من یک کد دارم به این صورت
هر کاری میکنم کد php عمل نمیکند و یا بلعکس کد html عمل نمیکنه
راه چیست؟
پیشاپیش از زحماتتون سپاس گذارم.
سوالم زیاد به این موضوع نمیخوره , ممنون میشم کمکم کنید.
من یک کد دارم به این صورت
<?php echo $_smarty_tpl->tpl_vars['item']->value['content'];?>
حالا به چه صورت قرار دهم تا این کد<div class="comment"></div>
در آن عمل کند. زیرا ['content']
در کد php بالا باید در <div class="comment"> اینجا </div>
قرار گیرد تا کد عمل کند.هر کاری میکنم کد php عمل نمیکند و یا بلعکس کد html عمل نمیکنه
راه چیست؟
پیشاپیش از زحماتتون سپاس گذارم.
سلام
پاسخ دقیق به سوال شما نیازمند بررسی کامل کد و کلاس های آن است اما اگر اشتباه نکنیم، روش ساده زیر می تواند قبل و بعد از content مقادیری را چاپ کند که به نظر مشکل شما همین است:
پاسخ دقیق به سوال شما نیازمند بررسی کامل کد و کلاس های آن است اما اگر اشتباه نکنیم، روش ساده زیر می تواند قبل و بعد از content مقادیری را چاپ کند که به نظر مشکل شما همین است:
<?php echo '<div class="comment">';echo $_smarty_tpl->tpl_vars['item']->value['content'];echo"</div>";?>
مهدي
۱۴:۳۹ ۱۳۹۲/۰۱/۱۵
سلام واقعا مطالب سايتتون عاليه من كه لذت مي برم ببخشيد كه اينجا اين نظر رو مي نويسم شما به بزرگي خودتون ببخشيد ولي يه درخواست داشتم توضيحاتي رو كه در مورد اي جكس داده بوديد تو مطالب قبلي من نتوستم ازش استفاده كنم اما از آموزش اين آدرس زير استفاده كردم :
1- قسمت لودر سايت تا وقتي كه مطالب جديد هنوز بروز نشدن بياد اون قسمت و ناپديد نشه
2- يه سري اشكالاتي داره مثلا اين كه وقتي روي لينك كليك مي كني مطالب عوض نميشن بعد از چند ثانيه عوض ميشن لطفا راه رفع اين مشكل رو هم بگيد
ممنون
aliha.ir/2010/10/04/ajax-loading-content-with-jquery
/اين سايت ديگه آپديت نميشه بخاطر همين خواستم كه شما اين مطلب رو آموزش بديد با اين فرق كه1- قسمت لودر سايت تا وقتي كه مطالب جديد هنوز بروز نشدن بياد اون قسمت و ناپديد نشه
2- يه سري اشكالاتي داره مثلا اين كه وقتي روي لينك كليك مي كني مطالب عوض نميشن بعد از چند ثانيه عوض ميشن لطفا راه رفع اين مشكل رو هم بگيد
ممنون
سلام
آموزش های مقدماتی سایت برای افرادی مناسب است که قصد دارند برنامه نویسی وب را از پایه یاد بگیرند، برای موارد کاربردی، باید از کدهای کاربردی استفاده کنید، به هر صورت در مورد لینکی که قرار دادید، متاسفانه این امکان برایمان مقدور نیست، ضمن اینکه مطلب مبتنی بر جی کئوری است و در حال حاضر این فریم ورک در سایت آموزش داده نمی شود، توصیه ما این است که از نمونه های کاملی که در وب کم هم نیستند استفاده کنید، یا به سایت های تخصصی در زمینه جی کئوری رجوع نمائید.
آموزش های مقدماتی سایت برای افرادی مناسب است که قصد دارند برنامه نویسی وب را از پایه یاد بگیرند، برای موارد کاربردی، باید از کدهای کاربردی استفاده کنید، به هر صورت در مورد لینکی که قرار دادید، متاسفانه این امکان برایمان مقدور نیست، ضمن اینکه مطلب مبتنی بر جی کئوری است و در حال حاضر این فریم ورک در سایت آموزش داده نمی شود، توصیه ما این است که از نمونه های کاملی که در وب کم هم نیستند استفاده کنید، یا به سایت های تخصصی در زمینه جی کئوری رجوع نمائید.
رهگذر ....
۱۱:۳۸ ۱۳۹۲/۰۱/۱۰
برای به کار بردن عبارتهای فارسی در پی اچ پی کافیه که استاندارد رو از ASCII به UTF8 تغییر بدین. اون وقت هر چی فارسی توی فایل بنویسید درست و حسابی نمایش داده میشه.
با تشکر
با تشکر
سلام
خیلی ممنون از مشارکت شما، اما مشکلی که در سوال بالا مطرح شده در ارتباط با نام فایل است نه محتوای درون فایل.
خیلی ممنون از مشارکت شما، اما مشکلی که در سوال بالا مطرح شده در ارتباط با نام فایل است نه محتوای درون فایل.
سلام
۰۳:۰۰ ۱۳۹۲/۰۱/۱۰
مرسی بابت سایت بسیار خوب و پر محتوای شما )):
چطور میشه چند تا عکس رو به اندازه های کوچک وکنارهم در یک پست وبلاگ قرار داد؟؟؟؟؟
اگر بخوام اخبار روز یک سایت را به صورت اسکرول در بالای وبلاگ داشته باشم چکار باید کرد؟؟؟؟
چطور میشه چند تا عکس رو به اندازه های کوچک وکنارهم در یک پست وبلاگ قرار داد؟؟؟؟؟
اگر بخوام اخبار روز یک سایت را به صورت اسکرول در بالای وبلاگ داشته باشم چکار باید کرد؟؟؟؟
مواردی که مطرح کردید در این قسمت قابل آموزش نیست! برای نمایش چند عکس کنار هم باید با css و خاصیت های آن آشنا باشید که خود مبحث مفصلی دارد، مورد دوم نیز باید از ترکیب rss خوان و جاوا اسکریپت استفاده کنید.
فریبا
۱۷:۳۳ ۱۳۹۲/۰۱/۰۹
سلام
بابت سایت خوبتون متشکرم
سوالی در مورد ساخت فایل در PHP داشتم چون نمی دونستم کجا بنویسم اینجا مطرح می کنم:
من با تابع tempnam در PHP یک فایل درست می کنم که می خوام اسمش فارسی باشه ولی اسم فایل را به این صورت می گذارد:
بابت سایت خوبتون متشکرم
سوالی در مورد ساخت فایل در PHP داشتم چون نمی دونستم کجا بنویسم اینجا مطرح می کنم:
من با تابع tempnam در PHP یک فایل درست می کنم که می خوام اسمش فارسی باشه ولی اسم فایل را به این صورت می گذارد:
تعمیر موتورسیکلت درجه 1
از جوابتون ممنونم.سلام
تا آنجا که می دانیم، نام فایل ها در PHP از استاندارد ISO-8859-1 یا (ASCII) پیروی می کند، لذا در حالت معمول نمی توانید فایل هایی به فرض با کاراکترهای فارسی بسازید و این کار نیاز به دستکاری های ساختاری دارد.
نکته دوم اینکه با فرض قابل ساخت بودن فایل هایی با کاراکترهای غیر معمول، بهتر است این کار را نکنید، چون ممکن است با مشکلات بعدی ناشی از سازگار نبودن توابع و مفسر PHP روبرو شوید.
تا آنجا که می دانیم، نام فایل ها در PHP از استاندارد ISO-8859-1 یا (ASCII) پیروی می کند، لذا در حالت معمول نمی توانید فایل هایی به فرض با کاراکترهای فارسی بسازید و این کار نیاز به دستکاری های ساختاری دارد.
نکته دوم اینکه با فرض قابل ساخت بودن فایل هایی با کاراکترهای غیر معمول، بهتر است این کار را نکنید، چون ممکن است با مشکلات بعدی ناشی از سازگار نبودن توابع و مفسر PHP روبرو شوید.
شریفی
۲۳:۳۳ ۱۳۹۱/۱۲/۲۹
ممنون.
راستی سایت شما رو در سایتم به صورت متد جدید گوگل لینک کردم.
با تشکر
راستی سایت شما رو در سایتم به صورت متد جدید گوگل لینک کردم.
adoniya.ir/Prolink/26
البته منتی به سر شما نیست. وظیفه ماست که از سایت های خوبی مثل وبگو حمایت کنیم...با تشکر
سپاس فراوان از لطف شما.
شریفی
۲۱:۴۳ ۱۳۹۱/۱۲/۲۹
سلام. از سایت خوبتون تشکر می کنم.
کاش یه کم در مورد روش های جلوگیری از هک سایت یا لو رفتن اطلاعات ذخیره شده در مای اس کیو ال که هکر ها از طریق ارسال شل یا ارسال ویروس می تونن انجام بدن، توضیحاتی بنویسید.
همچنین نحوه نوشتن کد پی اچ پی « امن » فیلد های ورودی مثل نام یا ایمیل رو بنویسید.
کاش یه کم در مورد روش های جلوگیری از هک سایت یا لو رفتن اطلاعات ذخیره شده در مای اس کیو ال که هکر ها از طریق ارسال شل یا ارسال ویروس می تونن انجام بدن، توضیحاتی بنویسید.
همچنین نحوه نوشتن کد پی اچ پی « امن » فیلد های ورودی مثل نام یا ایمیل رو بنویسید.
سلام
ممنون از پیشنهادات خوب شما، حتما در این خصوص و البته در آینده نزدیک مطالبی منتشر خواهد شد.
ممنون از پیشنهادات خوب شما، حتما در این خصوص و البته در آینده نزدیک مطالبی منتشر خواهد شد.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.