آبادییونس جمشیدی شیخی

Robin Nixonنویسنده

مترجم

jQuery, CSS & HTML

سایت بامرجع کامل طراحی وب PHP, MySQL, JavaScript

حمد و سپاس بی پايان، خدايی را سزاست كه عالم را در منتهای كمال آفريد و آدمی را بر بلندای قله ی هستی گماشت و او را جلوه گاه جمال، مخاطب كالم و وارث قلم گردانيد و «كتاب» را به عنوان بزرگ ترين معجزه ی جاودان خويش در اختيار انسان قرار داد. آيين و فرهنگ كهن ما، انس و الفتی ديرين با كتاب داشته اند و همواره انسان های وارسته، سعادت و آرامش را در كتاب جست وجو كرده اند؛ چنان كه به تعبير

امير مومنان علی عليه السالم: «كسی كه با كتاب آرامش يابد، هرگز آسايش از او سلب نمی شود». كتاب حافظه ی بشريت است و در ساحت انديشه، هيچ وسيله ای همچون كتاب، واجد ژرفا و كارايی ازاين رو ترويج و نشر كتاب، نهادينه سازی فرهنگ كتاب خوانی، ارضای حس كنجكاوی و الزم نيست؛ پرسشگری دانشجويان و تربيت علمی و فرهنگی نسلی شايسته و درخور، رسالتی مسلم بر دوش ارباب فرهنگ و دانش است. اين رسالت، ما را نيز بر آن داشت كه به عنوان عضو كوچكی از جامعه ی علمی و

فرهنگی ايران، پای به ميدان نهاده و در تحقق اين هدف ارزنده و انسانی، نقشی هرچند اندک ايفا كنيم.اشتياق اجتماعی و مشكالت روزمره ی زندگی، باعث تاسف است كه در شرايط كنونی، معضالت مطالعه را كاسته و با توسعه ی سريع دنيای مجازی و شبكه های اجتماعی، مطالب كوتاه، سطحی و كم محتوا جايگزين كتاب های عميق، مفيد و انديشه ساز گرديده و در اين ميان، مشكالت نشر، همچون هزينه های رو به افزايش كاغذ و چاپ وبه تبع آن، عدم اقبال عمومی به كتاب، مزيد بر علّت شده است. اگرچه اين تصور كه با پديد آمدن وسايل نوظهور ارتباط جمعی، كتاب به انزوا خواهد رفت، تصوری خالف واقع است، از اين نكته نيز نبايد غافل بود كه امتياز ابزارهای جديد دنيای مجازی، سهولت كاربری آنهاست؛ ولی به هر حال،

اين ابزارها هرگز از جهت عمق، تحليل و سازندگی فكر و ذهن، جای كتاب را نخواهند گرفت.انتشارات دانشگاهی كيان با بيش از يك دهه سابقه فعاليت در توليد و نشر كتاب های دانشگاهی و نيز فنی و مهندسی می كوشد رسالت های خود را در سايه لطف پروردگار و حمايت های مخاطبان خود، به بهترين نحو ممكن به انجام رساند. در اين راستا، تالش بر آن است تا آنچه در اين نشر به چاپ می رسد، حايز معيارهای استاندارد كيفی كتاب باشد و بر همين اساس است كه كتاب ها در مسير توليد، با حوصله و دقت تحت نظارت همه جانبه محتوايی- معنايی تحت چندين مرحله ويراست علمی و نيز ادبی قرار می گيرند تا در نهايت متنی روان و ساده براساس اصول آموزشی تهيه و تدوين شود. همچنين برای همه آثار به لحاظ بصری و زيبايی شناختی از منظر صفحه آرايی و طراحی جلد، سطح كيفی مناسبی در نظر گرفته شده

است.همه تالش انتشارات دانشگاهی كيان بر اين بوده است تا همگام با خواست مخاطبان خود حركت كند و كتاب ها را با باالترين كيفيت منتشر كند، اما به حتم، اين اثر خالی از اشكال نيست و از تمامی مخاطبان فهيم آن و ساير آثار نشر خواهشمند است نقدها و نظرهای ارزشمند و سازنده خود را جهت بهبود در

كتاب های آتی مطرح فرمايند. انتشارات دانشگاهی کیان

www.kianpub.com

info@kianpub.com

سخنی با خوانندگان

و پويا1 وب سايت هاي طراحي براي راه كار مناسب ترين آنها از استفاده و MySQL و PHP تركيب مبتني بر پايگاه داده2 است و اين امكان را مي دهد كه در رقابت با ساير چهارچوب 3های يكپارچه نظير

Ruby On Rails 4 كه يادگيري آن مشكل است، پا پس نكشد. به دليل ويژگي متن باز5 بودن روت6 اين

تركيب )برخالف چهارچوب Microsoft.NET(، استفاده از آن رايگان است و به همين دليل انتخاب بسيار مناسبي براي توسعه وب7 محسوب می شود.

تسلط آپاچي11، ويندوز/ پلتفرم10 حتي يا لينوكس9 يونيكس/ توسعه دهنده 8 ی به عنوان فردی هر نظير ديگر تكنولوژی های از استفاده و تركيب ميان اين در می كند. احساس را تكنولوژي ها اين بر سطح در وب سايت هايی تا می آورند فراهم را امكان اين HTML5 و CSS ،jQuery جاوااسكريپت،

استانداردهای ابتكاری نظير Twitter ،Facebook و Gmail ايجاد كنيد.مخاطبان

اين كتاب مناسب افرادي است كه عالقه مند به يادگيري چگونگي ايجاد وب سايت هاي پويا و تاثيرگذار هستند. اين افراد ممكن است شامل متخصصان وب يا طراحان گرافيك كه قبال وب سايت هاي ايستا12 را ايجاد كرده اند و هم اكنون خواستار ارتقای مهارت خود به سطح باالتري هستند، به عالوه دانش آموزان،

دانشجويان و آنهايي كه عالقه مند به فراگيري به صورت خودآموز هستند، باشند.به عنوان كه Web 2.0 تكنولوژي پس بنيادي اصول فراگيري به عالقه كه فردي هر درحقيقت، ،MySQL ،PHP تكنولوژي هاي شالوده كتاب، اين مطالعه با می تواند دارد، مي شود، شناخته اِيجكس

جاوااسكريپت، HTML5 ،CSS و همچنين اصول اوليه كتابخانه jQuery را فراگيرد.فرضیات کتاب

فرض كتاب بر اين است كه مخاطب دانشي ابتدايي از HTML را دارد و حداقل مي تواند يك وب سايت ايستا و ساده را ايجاد كند؛ اما اين موضوع به اين معنا نيست كه مخاطب بايد داراي پيش زمينه قبلي در MySQL ،PHP، جاوااسكريپت، CSS و HTML5 باشد؛ اگرچه داشتن زمينه قبلي خالي از لطف نخواهد بود

1. Dynamic2. Database-driven3. Framework

4. يك چهارچوب متن باز مبتني بر وب براي زبان برنامه نويسي رابي )Ruby( است.م.5. Open Source6. Root7. Web Development8. Developer9. Unix/Linux10. Platform11. Windows/Apache12. Static

سخن نویسنده

و باعث افزايش سرعت فراگيري مفاهيم كتاب خواهد شد.نحوه ی سازمان دهي کتاب

فصل های موجود در اين كتاب براساس ترتيب خاصي نوشته شده اند؛ ابتدا به معرفي همه تكنولوژي هاي اصلي موجود در كتاب پرداخته شده و سپس نحوه ی نصب آنها روي يك سرويس دهنده ی وب ارايه

شده است تا مخاطبان بتوانند مثال های موجود در كتاب را عمال اجرا كنند.در بخش اول، اصول بنيادي برنامه نويسي با زبان PHP شامل مباني نحو1 زبان، آرايه2ها، توابع3 و

برنامه نويسي شی ءگرا4 پوشش داده شده است. MySQL 5ارايه شده در بخش قبل، مقدمه اي از سيستم پايگاه داده PHP سپس، با فراگيری مفاهيمارايه خواهد شد. در اين بخش همه چيز در رابطه با چگونگي سازمان دهي پايگاه داده MySQL و توليد

پرس وجو6هاي پيچيده را فرا خواهيد گرفت.تركيب با وب پوياي ايجاد صفحات براي MySQL به همراه PHP از استفاده نحوه ی آن، از پس فرم 7ها و ساير ويژگي هاي HTML را فرا خواهيد گرفت. در اين قسمت به زيربنا و شالوده اي از جنبه عملي توسعه PHP و MySQL می پردازيم. همچنين در اين بخش توابع سودمند متنوع، چگونگي مديريت

كوكي8 ها و جلسه 9ها و دستيابي به سطح بااليي از امنيت را فرا خواهيد گرفت.در چند فصل بعدي نيز، اصول بنيادي كاملي در رابطه با جاوااسكريپت از مثال های ساده گرفته تا مديريت رويداد10 براي دستيابي به Document Object Model، اعتبارسنجي در مرورگر11 و مديريت خطا12 ارايه شده است. عالوه بر آن اصول اوليه درخصوص به كارگيری و استفاده از كتابخانه معروف

jQuery ارايه شده است.

با درک اين سه تكنولوژي اصلي، چگونگي فراخواني های نامحسوس اِيجكس و تبديل وب سايت خود به محيط های پوياي سطح باال را فرا خواهيد گرفت.

سپس دو فصل نيز به يادگيري مفاهيمی در رابطه با CSS به منظور طرح بندي صفحات وب اختصاص داده شده است و در بخش نهايی به ويژگی های جديد HTML5 كه شامل video ،audio ،geolocation و canvas می باشد، پرداخته شده است. در انتها با تركيب هر آنچه آموخته ايد، به ايجاد يك وب سايت شبكه

اجتماعی كاربردی می پردازيم. در طول اين كتاب، موارد بسياري در رابطه با شيوه های مفيد برنامه نويسي و نكاتي كه در يافتن خطاهايی كه به آساني قابل مشاهده نيستند نيز ارايه شده است. همچنين آدرس وب سايت های بسياري

براي مشاهده اطالعات بيشتر در رابطه با موضوع مورد بحث معرفي گرديده است.

1. Syntax2. Array3. Functions4. Object-Orienter Programming

5. Database6. Query7. Form8. Cookie

9. Session10. Event Handling11. In-browser Validation12. Error Handling

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

اين تصوير بيانگر يك نكته عمومی يا توصيه می باشد.

اين تصوير بيانگر يك اخطار يا خطا می باشد.

تقدیم هب همسرم هک نشاهن لطف الهی رد زندگی من است

تيم برنرزلی )Tim Berners-Lee( بنيانگذار شبكه جهانی وب، در سال 1990 با طراحی اولين وب سايت ايجاد HTML ساده كدهای با وب آغاز، صفحات در می شود. محسوب وب طراح نخستين به عنوان می شدند و نياز افراد را در آن زمان برآورده می كردند، اما امروزه به علت گسترش نيازها و به وجود آمدن HTML تكنولوژی های مختلف در حوزه طراحی سايت و برنامه نويسی مبتنی بر وب، استفاده تنها از

برای طراحی سايت، جوابگوی نياز كاربران نيست. امروزه با اينكه شاهد گسترش سيستم های مديريت محتوا و همچنين افزايش استفاده از آنها برای ايجاد سايت های مختلف هستيم؛ اما نياز به فراگيری زبان های برنامه نويسی تحت وب بر كسی پوشيده نيست. با وجود اينكه سيستم های مديريت محتوا امكانات الزم را در اختيار كاربران قرار می دهند تا هر فردی بتواند بدون داشتن كوچك ترين دانش برنامه نويسی در كوتاه ترين زمان ممكن سايت خود را ايجاد كند، افراد حرفه ای به اين امكانات بسنده نكرده و با فراگيری زبان های تحت وب ازجمله PHP سعی در بهبود و افزايش كارايی سايت خود دارند؛ به طور مثال ممكن است فردی از دروپال1 برای ايجاد سايت ايجاد PHP زبان باز و توسط متن ازآنجاكه دروپال يك سيستم مديريت محتوای كند. استفاده خود افزودن شده است و دارای ساختاری مبتنی بر ماژول می باشد، برای سفارشی كردن سايت خود و

ويژگی های خاص به آن، می توان با زبان PHP ماژول های مورد نظر خود را ايجاد كرد. آنها می توان رايج ترين از كه دارند پويا وجود ايجاد وب سايت های برای بسياری تكنولوژی های از هفت بخش مجزا اين كتاب اشاره كرد. 4 Ruby on Rails و ColdFusion ،3 JSP ،2 ASP.NET ،PHP به PHP يك زبان PHP صحبت شده است. با تشكيل شده است كه در بخش اول آن منحصرا در رابطه اسكريپت نويسی چندمنظوره می باشد كه برای توسعه وب بسيار مناسب است و می توان از كدهای آن در تگ های HTML استفاده كرد. به عبارت ديگر می توان گفت برای افزودن قابليت پويايی به يك وب سايت، PHP ،اضافه می كنيم. همان طور كه گفته شد HTML را در قسمت های مورد نياز به تگ های PHP كدهایيك زبان اسكريپت نويسی است كه برخالف زبان های كامپايلری، برای نوشتن اسكريپت های تحت وب طراحی شده است نه برای برنامه های مستقل5 )البته امكان استفاده از آن برای ايجاد برنامه های مستقل اصطالح از منظور است. چندسكويی7 و َسمت سرويس دهنده6 تكنولوژی يك PHP دارد(. وجود نيز و می شود انجام در سمت سرويس دهنده PHP پردازش های تمام كه است اين سمت سرويس دهنده

1. Drupal2. Active Server Pages3. Java Server Pages

Ruby 4. چهارچوب توسعه وب برای زبان برنامه نويسی5. Stand-alone Application6. Server-side7. Cross-platform

سخن مترجم

چندسکویى بودن آن اشاره به این موضوع دارد که PHP روى بیشتر سیستم عامل ها قابل اجراست.هنگامى که در رابطه با طراحى وب سایت هاى پویا صحبت مى کنیم، لزوم استفاده از یک پایگاه داده قدرتمند براى نگهدارى داده هاى مختلف به طور ملموس احساس مى شود. پایگاه داده این امکان را به شما مى دهد تا به طور موثر به ذخیره سازى، جست وجو، مرتب سازى و بازیابى داده هاى خود بپردازید. نرم افزارهاى پایگاه هاى داده مختلفى وجود دارند که هرکدام داراى ویژگى هاى منحصربه فرد مى باشند؛ مهم تر همه از و بسیار انعطاف پذیرى و قدرت، سرعت به دلیل MySQL داده پایگاه میان این در اما استفاده گسترده از آن در کنار زبان برنامه نویسى PHP، به گستردگى استفاده مى شود و بخش دوم

کتاب نیز به معرفى و کار با این پایگاه داده اختصاص داده شده است.برخالف PHP که یک زبان اسکریپت نویسى سمت سرویس دهنده مى باشد، جاوااسکریپت یک زبان اسکریپت نویسى سمت مشترى1 است؛ به این معنا که کدهاى جاوااسکریپت در صفحه HTML قرار داده HTML را که حاوى کدهاى جاوااسکریپت مى باشد، درخواست مى شوند و هنگامى که کاربر صفحه مى کند، اسکریپت ها براى مرورگر ارسال شده و توسط آن اجرا مى شوند. به عبارت دیگر براى افزودن پویایى در سمت مشترى مى توان از جاوااسکریپت استفاده کرد. عالوه بر آن استفاده از کتابخانه هاى معروف این زبان ازجمله jQuery نیز امکان استفاده ى راحت تر و سریع تر و همچنین نوشتن کدهایى با

سازگارى چندمرورگرى را فراهم مى آورد. استفاده مى شود. CSS از نیز آن از محتواى موجود در به منظور جداسازى جنبه طراحى سایت به عبارت دیگر با استفاده از CSS و امکانات جدید ارایه شده در CSS3 مى توان نحوه ى نمایش عناصر موجود در صفحه وب را تعیین کرد. استفاده از جاوااسکریپت و CSS این امکان را به شما مى دهد تا سایتى زیبا با قابلیت پویایى بسیار را طراحى و ایجاد کنید. با استفاده از امکانات و ویژگى هاى پیشرفته

ارایه شده در HTML5 نیز مى توان به سطح باالیى از طراحى صفحات وب دست یافت.اینکه براى است مرجعى وب طراحى بحث در تکنولوژى ها این ترکیب با حاضر کتاب بر مبتنى برنامه نویسى و طراحى وب سایت اصول یادگیرى به آن از استفاده با بتوانند عالقه مندان Learning PHP, MySQL, JavaScript With jQuery, چهارم ویرایش ترجمه کتاب این بپردازند. وب توضیحات که است گفتنى است. رسانده به چاپ O'REILLY انتشارات که است CSS & HTML5

براى دسترسى است. «م» مشخص کرده نشان با پاورقى در است، دیده مترجم الزم که را اضافى نشانى به کیان دانشگاهى انتشارات وب سایت به مى توانید نیز کتاب در موجود کدهاى به رایگان

http://www.kianpub.com مراجعه نمایید.

سپاسگزار خواهیم بود اگر نظرها و انتقادهاى خود را درباره این کتاب به آدرس پست الکترونیکى مترجم ارسال نمایید. صمیمانه در انتظار نظرها و انتقادهاى سازنده شما عزیزان هستیم و آنها را به

دیده منت پذیرا مى باشیم.

1. Client-side

در انتها جای دارد از جناب آقای كامبيز تكاپومنش كه در طول اين سال ها ياری رسان بنده بوده اند مراتب سپاسگزاری صميمانه و همچنين نمايم قدردانی است، صميمانه فزون از حد مهربانی شان و با كتاب اين ترجمه مراحل تمامی در كه تبريزی صابری غالمرضا مهندس آقای جناب از را خود بزرگواری راهنما و راهگشای بنده بودند و از هيچ گونه حمايتی دريغ نكردند، به جا آورم كه بدون لطف

و حمايت های ايشان، اين ترجمه به انجام نمی رسيد. يونس جمشيدی شيخی آبادیyoones.jamshidi@hotmail.com

فصل اول: آشنایی با محتوای پویای وبHTTP و HTML: تعاريف اوليه برنرزلي...................................................................................................... 22

رويه ی درخواست / پاسخ............................................................................................................................. 2325 ................................................... HTML5 و CSS ،جاوااسكريپت ،PHP ،MySQL برتری های استفاده از30 ........................................................................................................................................................... HTML532 ................................................................................................................................. سرويس دهنده ی آپاچي33 ................................................................................................................................................ مفهوم متن بازتركيب اين تكنولوژي ها با يكديگر................................................................................................................. 3335 ........................................................................................................................................................... تمرين ها

فصل دوم: نصب یک سرویس دهنده ی وب38 .............................................................................................................. MAMP ،WAMP و LAMP چيست؟

نصب XAMPP در ويندوز............................................................................................................................. 3849 ...................................................................................................................... Mac OS X در XAMPP نصب50 .............................................................................................................................. نصب LAMP در لينوكس51 ..................................................................................................................................... كار كردن از راه دور53 ............................................................................................................... استفاده از يك برنامه ی ويرايشگر54 .........................................................................................................................................IDE استفاده از يك56 ........................................................................................................................................................... تمرين ها

PHP فصل سوم: آشنایی با57 .................................................................................................................................... HTML با PHP تركيب59 ............................................................................................................................. مثال های موجود در كتاب60 ..........................................................................................................................................PHP ساختار زبان85 ........................................................................................................................................................... تمرين ها

PHP فصل چهارم: عبارت ها و کنترل جریان در87 .......................................................................................................................................................... عبارت ها90 ........................................................................................................................................................... عملگرهاعبارت های شرطي.......................................................................................................................................... 99107 ............................................................................................................................................................... حلقهتبديل نوع ضمني و صريح.......................................................................................................................... 113115 ............................................................................................................................... PHP لينك دادن پويا درايجاد لينك های پويا در عمل........................................................................................................................ 115117 ......................................................................................................................................................... تمرين ها

فهرست مطالب

مرجع کامل طراحی صفحات وب

1415

PHP فصل پنجم: توابع و اشیا در120 ..................................................................................................................................................... PHP توابع128 ............................................................................................... استفاده از Include و Require براي فايل ها129 ..................................................................................................................................PHP سازگاري نسخه130 .................................................................................................................................................PHP اشيا درتمرين ها......................................................................................................................................................... 147

PHP فصل ششم: آرایه ها دردسترسي عادي............................................................................................................................................ 149153 ......................................................................................................................................... foreach…as حلقهآرايه های چندبعدي...................................................................................................................................... 155159 ................................................................................................................................. استفاده از توابع آرايهتمرين ها......................................................................................................................................................... 164

PHP فصل هفتم: مفاهیم کاربردی در165 ...........................................................................................................................................printf استفاده از170 ..................................................................................................................................... توابع تاريخ و زمان174 ................................................................................................................................................. مديريت فايل188 ............................................................................................................................... فراخوانی های سيستمی 189 .................................................................................................................................. XHTML يا HTML5؟

تمرين ها......................................................................................................................................................... 190

MySQL فصل هشتم: مقدمه ای بر191 ................................................................................................................................ MySQL اصول ابتدايی192 ......................................................................................................... خالصه ای از اصطالحات پايگاه دادهدسترسی به MySQL از طريق خط فرمان................................................................................................ 192213 ........................................................................................................................................................ انديس ها232 ...............................................................................................................................................MySQL توابع232 .......................................................................................... phpMyAdmin از طريق MySQL دسترسي بهتمرين ها......................................................................................................................................................... 234

MySQL فصل نهم: تسلط بر237 ....................................................................................................................................... طراحي پايگاه دادهنرمال سازي.................................................................................................................................................. 239248 ............................................................................................................................................................ روابطتراكنش.......................................................................................................................................................... 252255 .....................................................................................................................EXPLAIN استفاده از دستورتهيه نسخه پشتيبان و بازيابي آن.............................................................................................................. 256

1415

فهرست مطالب

262 ......................................................................................................................................................... تمرين ها

PHP با استفاده از MySQL فصل دهم: دسترسی به263 ..........................................................................PHP با استفاده از MySQL پرس وجوی يك پايگاه داده271 ........................................................................................................................................ يك مثال كاربردي278 ......................................................................................................................MySQL استفاده كاربردي ازجلوگيری از تالش هايی جهت هك شدن.................................................................................................... 286292 .......................................................................................................... استفاده از mysqli در حالت رويه ای294 ......................................................................................................................................................... تمرين ها

فصل یازدهم: مدیریت ُفرمايجاد فرم ها................................................................................................................................................... 295بازيابی داده های ارسال شده....................................................................................................................... 297310 ........................................................................................................................................... يك برنامه نمونه313 .................................................................................................................... HTML5 ويژگی های جديد درويژگی های در صف انتظار......................................................................................................................... 314317 ......................................................................................................................................................... تمرين ها

فصل دوازدهم: کوکی ها، نشست ها و احراز هویت319 ........................................................................................................................PHP استفاده از كوكی ها در322 ...................................................................................................................................... HTTP احراز هويت331 .................................................................................................................................... استفاده از نشست ها340 ......................................................................................................................................................... تمرين ها

فصل سیزدهم: کاوش در جاوااسکریپت344 ...............................................................................................................................HTML جاوااسكريپت و350 .................................................................................................................................. استفاده از توضيحاتنقطه ويرگول.................................................................................................................................................. 350متغيرها.......................................................................................................................................................... 351352 ......................................................................................................................................................... عملگرها356 ..................................................................................................................................... نوع داده ای متغيرها357 .............................................................................................................................................................. توابع357 ........................................................................................................................................ متغيرهای عمومی357 ........................................................................................................................................... متغيرهای محلی358 ....................................................................................................................... )DOM( مدل شیءگرای سند362 ................................................................................................................................document.write درباره364 ......................................................................................................................................................... تمرين ها

مرجع کامل طراحی صفحات وب

1617

فصل چهاردهم: عبارت ها و کنترل جریان در جاوااسکریپت365 ........................................................................................................................................................ عبارت ها366 ......................................................................................................................................... ثابت ها و متغيرها367 ......................................................................................................................................................... عملگرها372 .................................................................................................................................................. with دستور373 ........................................................................................................................................onerror استفاده از374 ................................................................................................................................... try...catch استفاده ازدستورهای شرطی....................................................................................................................................... 375379 ........................................................................................................................................................... حلقه ها383 .......................................................................................................................................... تغيير نوع صريح384 ......................................................................................................................................................... تمرين ها

فصل پانزدهم: توابع، آرایه ها و اشیای جاوااسکریپت385 .............................................................................................................................................................. توابع390 ................................................................................................................................... اشيای جاوااسكريپت395 ............................................................................................................................ آرايه ها در جاوااسكريپت404 ......................................................................................................................................................... تمرين ها

فصل شانزدهم: اعتبارسنجی و کنترل خطا در PHP و جاوااسکریپتاعتبارسنجی ورودی كاربر با استفاده از جاوااسكريپت......................................................................... 405413 ....................................................................................................................................... عبارت های باقاعده422 ................................................................ PHP نمايش مجدد يك فرم پس از اعتبارسنجی با استفاده از430 ......................................................................................................................................................... تمرين ها

Ajax فصل هفدهم: استفاده از

431 ................................................................................................................................................ Ajax چيست؟

432 ......................................................................................................................XMLHttpRequest استفاده از449 ......................................................................................................................................................... تمرين ها

CSS فصل هجدهم: آشنایی با452 ........................................................................................................................ وارد كردن يك اِستايل شيت453 .................................................................................................................................... استفاده از شناسه ها454 ...................................................................................................................................... استفاده از كالس هااستفاده از نقطه ويرگول............................................................................................................................... 454454 ................................................................................................................................................... CSS قوانينانواع سبك..................................................................................................................................................... 456458 .........................................................................................................................................CSS انتخابگرهاي

1617

فهرست مطالب

464 ..............................................................................................................................CSS ويژگي آبشاري درواحدهاي اندازه گيری................................................................................................................................... 469قلم ها و تايپوگرافي....................................................................................................................................... 471مديريت سبك های مربوط به متن............................................................................................................... 473476 ............................................................................................................................................. CSS رنگ ها در478 .................................................................................................................................. تغيير موقعيت المان ها481 ........................................................................................................................................... كالس های كاذب484 ............................................................................................................................... قانون های كوتاه نويسی484 ............................................................................................................................ مدل جعبه اي و طرح بندی490 ......................................................................................................................................................... تمرين ها

CSS3 پیشرفته با CSS :فصل نوزدهم491 ...................................................................................................................................... انتخابگرهاي صفت493 ......................................................................................................................................... box-sizing صفت493 ..................................................................................................................................... CSS3 پس زمينه هایپس زمينه های چندتايي................................................................................................................................. 496498 ............................................................................................................................................CSS3 مرز ها در503 ............................................................................................................................................. Box Shadow ها

503 ............................................................................................................................................. سرريزی المان504 ............................................................................................................ طرح بندی با استفاده از چند ستونرنگ ها و كِدري............................................................................................................................................. 506508 ............................................................................................................................................... جلوه های متن509 ................................................................................................................................................... قلم های وب510 ......................................................................................................................................Google قلم های وب512 ...................................................................................................................................................... تغيير فرمتغيير فرم های سه ُبعدی............................................................................................................................... 513514 .......................................................................................................................................................... انتقال ها518 ......................................................................................................................................................... تمرين ها

فصل بیستم: دسترسی به CSS از جاوااسکریپت519 ...................................................................................................................getElementById بازديد از تابع522 .............................................................................. دسترسی به صفت های CSS از طريق جاوااسكريپتاستفاده از جاوااسكريپت به صورت درون خطی....................................................................................... 526اضافه كردن المان جديد.............................................................................................................................. 529

مرجع کامل طراحی صفحات وب

1819

532 ........................................................................................................................................ استفاده از وقفه ها538 ......................................................................................................................................................... تمرين ها

jQuery فصل بیست و یکم: آشنایی با540 ............................................................................................................................................ jQuery چيست؟

540 ............................................................................................................................................jQuery گنجاندن544 ................................................................................................................................. jQuery نحو دستورات546 ..................................................................................................................................................... انتخابگرها549 ......................................................................................................................................... مديريت رويدادها550 ......................................................................................................................... انتظار برای بارگذاری سند551 ......................................................................................................... توابع و صفت های مربوط به رويدادجلوه های ويژه.............................................................................................................................................. 564573 ................................................................................................................................................... DOM تغيير578 ......................................................................................................... اعمال كردن كالس ها به صورت پوياتغيير ابعاد..................................................................................................................................................... 579582 ............................................................................................................................................... DOM پيمايش595 ........................................................................................................... استفاده از jQuery بدون انتخابگرها597 ............................................................................................................................................Ajax استفاده از599 .......................................................................................................................................................... افزايه ها601 ......................................................................................................................................................... تمرين ها

HTML5 فصل بیست و دوم: آشنایی با604 ...........................................................................................................................................................Canvas

موقعيت جغرافيايی....................................................................................................................................... 605608 ............................................................................................................................................. صوت و ويديو609 ............................................................................................................................................................. فرم ها609 ...................................................................................................................................... ذخيره سازی محلی609 ............................................................................................................................................... web worker ها

610 ............................................................................................................................. برنامه های كاربردی وب610 ..................................................................................................................................................... ميكروداده610 .......................................................................................................................................................... خالصه610 ......................................................................................................................................................... تمرين ها

HTML5 Canvas :فصل بیست و سوم611 ................................................................................................................Canvas ايجاد و دسترسی به يك

1819

فهرست مطالب

623 ............................................................................................................................ Canvas نوشتن متن رویترسيم خطوط............................................................................................................................................... 626629 ............................................................................................................................. )path( استفاده از خطوط630 ............................................................................................................................................ پر كردن نواحی632 ..........................................................................................................................................................clip متد635 ......................................................................................................................................... isPointInPath متد636 ................................................................................................................................................Curves كار با642 ......................................................................................................................................... كار روی عكس هاويرايش در سطح پيكسل............................................................................................................................. 647جلوه های گرافيكی پيشرفته......................................................................................................................... 651تغيير شكل ها................................................................................................................................................. 654660 .......................................................................................................................................................... خالصه661 ......................................................................................................................................................... تمرين ها

HTML5 فصل بیست و چهارم: صوت و ویدیو در664 .............................................................................................................................................. درباره كدک ها665 ............................................................................................................................................ <audio> عنصر667 .................................................................. پشتيبانی از مرورگرهايی كه از HTML5 پشتيبانی نمی كنند668 ............................................................................................................................................ <video> عنصر674 .......................................................................................................................................................... خالصه674 ......................................................................................................................................................... تمرين ها

HTML5 فصل بیست و پنجم: سایر ویژگی های 675 .............................................................................................................. GPS مكان جغرافيايی و سرويس676 ...................................................................................................................................... ساير متدهای مكان677 ...................................................................................................................HTML5 موقعيت جغرافيايی و681 ...................................................................................................................................... ذخيره سازی لوكال684 .............................................................................................................................................. Web Worker ها

686 ............................................................................................................................. اپليكيشن های وب آفالينكشيدن و رها كردن..................................................................................................................................... 688ارسال پيام ميان سندها............................................................................................................................... 690694 ..................................................................................................................................................... ميكروداده696 .................................................................................................................................HTML5 ساير تگ های697 .......................................................................................................................................................... خالصه

مرجع کامل طراحی صفحات وب

20

697 ......................................................................................................................................................... تمرين ها

فصل بیست و ششم: ترکیب تکنولوژی ها با یکدیگر700 .............................................................................................................. طراحي يك سايت شبكه اجتماعي700 ............................................................................................................................................. روی وب سايت700 ................................................................................................................................................ functions.php

703 .................................................................................................................................................... header.php

705 ....................................................................................................................................................... setup.php

706 ...................................................................................................................................................... index.php

707 .................................................................................................................................................... signup.php

711 ...............................................................................................................................................checkuser.php

712 ....................................................................................................................................................... login.php

714 .................................................................................................................................................... profile.php

719 ................................................................................................................................................ members.php

723 .................................................................................................................................................... friends.php

727 ................................................................................................................................................messages.php

731 ..................................................................................................................................................... logout.php

732 ....................................................................................................................................................... styles.css

735 ................................................................................................................................................... javascript.jsپيوست 1: پاسخ تمرين ها............................................................................................................................ 737پيوست 2: منابع آنالين........................................................................................................................ 757761 ..................................................................MySQL در FULLTEXT پيوست 3: كلمات بازدارنده انديس765 .............................................................................................................................MySQL پيوست 4: توابع777 ..........................................................................................jQuery پيوست 5: انتخابگرها، اشيا و متدهای

فصل

آشنایی با محتوای پویای وب

وب جهان گستر1 شبكه اي است كه نسبت به محتواي اوليه ی خود در سال های آغازين دهه ی 1990 كه به منظور حل يك مشكل خاص ايجاد شده بود، دچار دگرگوني های فراواني شده است. تحقيقات مدرن در سازمان اروپايي پژوهش های هسته ای )ِسرن2( در حال توليد حجم انبوهي از داده3ها بود و به دليل حجم باورنكردني اين اطالعات، در عمل توزيع آنها ميان دانشمندان انتخاب شده در قسمت های مختلف

دنيا كنترل پذير نبود.در اين زمان، اينترنت با اتصال چند صد هزار رايانه در حال كار بود. بنابراين تيم برنرزلي4 )يكي از اعضاي ِسرن( روشي براي حركت بين رايانه ها با استفاده از چارچوب ابرمتن5 ابداع كرد كه به نام 8HTML شناخته شد. همچنين او با ايجاد يك زبان نشانه گذاري7 به نام HTTP پروتكل انتقال ابر متن6 ياتوانست اين دو را باهم تركيب كند. وی به عالوه اولين مرورگر و سرويس دهنده ی وب را ايجاد كرد؛

ابزارهايی كه امروزه وجود آنها را بديهی می پنداريم.امروزه، بدون توجه به ماهيت اين ابزارها، از آنها استفاده می كنيم؛ درحالی كه پيش از توليد آنها، هرج و مرج اطالعات بسيار زياد بود. تا آن زمان مدرن ترين نوع ارتباط، اتصال كاربران خانگي به صورت Dial up به منابع خبري بود كه روي يك رايانه ميزباني9 می شد و تمام نقل و انتقال داده ها تنها با كاربران

همكاران، و دوستان با ارتباط برقراري اساس، همين بر می گرفت. نوع سرويس خاص صورت آن نيازمند عضويت در چندين منبع خبري بود.

اواسط دهه ی 1990 سه مرورگر وب اين ساختارها را تغيير داد و در ناگهان برنرزلي تمام اما نياز اندک مدتی از به رقابت زدند. پس با يكديگر دست پنج ميليون كاربر گرافيكي براي جلب توجه

1. World Wide Web2. CERN3. Data

4. Tim Burners-Lee5. hyperlink6. Hyper Text Transfer Protocol

7. Markup Language8. Hyper Text Markup Languag9. Hosed

1

مرجع کامل طراحی صفحات وب

2223

ديگر به صفحه های را كاربران كه متني و گرافيكي ابرمتني نظير صفحه های توانايی ها از برخی به از پتانسيل كافي به منظور توجه به اينترنت اما دنياي رايانه ها و هدايت كنند، به وضوح احساس شد، نياز كاربران و تغيير محتوا به صورت پويا برخوردار نبودند. در آن زمان، استفاده از وب با وجود

پيشرفت های امروزي در زمينه متن و تصاوير انيميشني GIF، بسيار بی روح و ساده بوده است.خريدهاي اينترنتي، موتورهاي جست وجو1 و شبكه های اجتماعي2 نحوه ی استفاده ی ما از وب را تغيير داده اند. در اين فصل، نگاهي اجمالي به اجزای تشكيل دهنده ی وب و برنامه هايی كه قابليت پويايي

آن را فراهم می آورند، خواهيم داشت.

در شروع کتاب، استفاده از کلمه های کوتاه شده ضروري است. سعي بر این بوده است که پیش از بیان هر مطلب، کلمه های اختصاری آن را آشکارا شرح دهیم. پس

نگران مفهوم این کلمه ها نباشید.

HTTP و HTML: تعاریف اولیه برنرزليبين پاسخ5هاي رد و بدل شده و كنترل درخواست4ها كه وظيفه ی است ارتباطي3 استاندارد HTTP يك

دارد. وظيفه ی سرويس دهنده دريافت درخواست نهايي6 و سرويس دهنده7 را برعهده مرورگر كاربر مشتري8 و تالش در جهت ارايه ی پاسخي مناسب به آن است كه به طور معمول كاربر، صفحه ی وب مورد نظر را درخواست می كند و سرويس دهنده آن را در اختيار او قرار می دهد؛ استفاده از كلمه ی به همين منظور است. بی شك، قرار گرفتن كلمه ی مشتري در مقابل به معنای سرويس دهنده سرور

سرويس دهنده هم به رايانه و هم به برنامه مرورگر وب كه روي آن اجرا می شود، اطالق می گردد.البته، بين مشتري و سرويس دهنده دستگاه های ديگری همچون روتر9ها، پروكسي10ها، گذرگاه11ها درست ارسال از اطمينان كسب به منظور مختلفي وظايف دستگاه ها اين همه ی دارند. وجود و ... درخواست ها و پاسخ ها بين سرويس دهنده و سرويس گيرنده را برعهده دارند. به طور معمول از اينترنت

براي ارسال اين اطالعات استفاده می شود.بيشتر اوقات سرويس دهنده ی وب می تواند در زمان عدم ارتباط با مشتري، ارتباط های همزمان چندگانه12 ای را مديريت كند و زمان خود را صرف گوش دادن13 به يك درخواست ورودي نمايد. پس از ورود يك درخواست، سرويس دهنده پاسخي را مبني بر رسيدن درخواست به درخواست كننده ارسال

خواهد كرد.

1. Search Engins2. Social Networks3. Communication Standard4. Request5. Response

6. End User7.Server8. Client9. Router10. Proxy

11. Gateway12. Multiple Simulttaneous Connections13. Listening

2223

فصل اول: آشنایی با محتوای پویای وب

رویه ی1 درخواست / پاسخدر ساده ترين سطح، فرايند درخواست/ پاسخ شامل يك درخواست از سوي مرورگر به سرويس دهنده ی وب براي دريافت يك صفحه ی وب می باشد كه سرويس دهنده صفحه ی مورد نظر را ارسال می كند.

سپس مرورگر اين صفحه را نمايش می دهد )شكل 1-1(.

شکل 1-1. مراحل درخواست/ پاسخ مشتري/ سرویس دهنده به صورت ساده.

ترتيب مراحل موجود در فرايند درخواست و پاسخ به شرح زير است: وارد كردن http://server.com در نوار آدرس2 مرورگر..1 مرورگر به جست وجوي آدرس IP مربوط به server.com می پردازد..2 مرورگر، درخواستي را مبني بر دريافت صفحه ی اصلي3 به server.com ارسال می كند..3 درخواست مربوطه از اينترنت عبور می كند و به سرويس دهنده ی وب server.com می رسد..4 سرويس دهنده ی وب پس از دريافت درخواست، صفحه ی وب خواسته شده را در هارد ديسك4 خود .5

جست وجو می كند. سرويس دهنده ، صفحه ی وب مربوطه را بازيابي5 و آن را براي مرورگر ارسال می كند..6 مرورگر صفحه ی وب را نمايش می دهد..7

به طور معمول، اين فرايند براي هر يك از اجزاي موجود در صفحه يك وب سايت ازجمله يك تصوير گرافيكي، يك ويديو يا فايل فلش6 و حتي يك قالب CSS تكرار می شود.

توجه داشته باشيد در مرحله دو، مرورگر به جست وجوي آدرس IP مربوط به server.com می پردازد.

1. Procedure2. Address Bar3. Home Page4. Hard Disk5. Retrieve6. Flash File

مرجع کامل طراحی صفحات وب

2425

هر ماشيني كه به اينترنت متصل است، داراي يك آدرس IP می باشد. رايانه شما هم به همين ترتيب عمل می كند؛ ولي ما به طور معمول، توسط نامی مثل google.com به يك سرويس دهنده ی وب دسترسي پيدا می كنيم. همان طور كه می دانيد، مرورگر از يك سرويس اينترنتي به نام DNS 1 براي پيدا كردن IP مربوط

به آدرس سرويس دهنده و از اين IP براي ارتباط با رايانه مورد نظر استفاده می كند.رويه ی مورد نظر براي وب سايت های پويا به دليل استفاده از PHP و MySQL اندكي پيچيده تر است

)شكل 1-2( كه مراحل آن به شرح زير می باشد: وارد كردن http://server.com در نوار آدرس مرورگر..1 مرورگر، آدرس IP مطلق به server.com را جست وجو می كند..2ارسال .3 وب سرويس دهنده ی آدرس به را اصلي صفحه ی دريافت بر مبني درخواستي مرورگر،

می كند. درخواست مربوطه از اينترنت عبور می كند و به سرويس دهنده ی وب server.com می رسد..4 سرويس دهنده ی وب پس از دريافت درخواست، صفحه اصلي سايت مورد نظر را از هارد ديسك.5

خود واكشي2 می كند. پس از قرار گرفتن صفحه اصلي در حافظه3، سرويس دهنده ی وب متوجه می شود كه فايل، شامل.6

اسكريپتPHP 4 است؛ درنتيجه، صفحه مربوطه را به مفسر php 5 ارسال می كند. كد PHP توسط مفسر آن اجرا می شود..7موتور.8 به را آنها مفسر، دليل بدين می باشند؛ MySQL دستورهای شامل PHP كدهاي از برخی

پايگاه دادهMySQL 6 می فرستد. پايگاه داده MySQL نتيجه دستورها را به مفسر PHP برمی گرداند..9

به سرويس دهنده ی.10 را MySQL داده پايگاه به همراه PHP كد اجراي از نتيجه های حاصل مفسر وب برمي گرداند.

را.11 آن تا می كند ارسال درخواست كننده به مشتري را مربوطه نيز صفحه سرويس دهنده ی وب نمايش دهد.

اكنون با نگاهی به اين فرايند، با نحوه عملكرد اين سه تكنولوژي با يكديگر آشنا شده ايد؛ البته در عمل نيازي به پرداختن به اين جزييات نيست، زيرا تمام اين عمليات به صورت خودكار انجام می شود.

صفحاتي كه در هر بار به مرورگر بازگردانده می شوند، ممكن است شامل جاوااسكريپت باشند كه به صورت محلي7 توسط مرورگر مشتري تفسير می گردد و احتمال دارد درخواست ديگري نيز توليد

شود. برای مثال، شیء8 ديگري مانند يك عكس را درخواست كنند.

1. Domain Name Service2. Fetch3. Memory4. Script

5. PHP Interpreter6. Database Engine7. Locally8. Object

2425

فصل اول: آشنایی با محتوای پویای وب

.

.

شکل 1-2. مراحل درخواست/ پاسخ مشتري/ سرویس دهنده به صورت پویا.

HTML5 و CSS ،جاوااسکریپت ،PHP ،MySQL برتری های استفاده ازدر ابتدای اين فصل، دنيای Web 1.0 معرفی شد، اما با وجود پيشرفت هايی كه در زمينه ابزارهاي توسعه Web1.1 رخ داد، طولی نكشيد كه همه به فكر ايجاد ActiveX 2 و Jscript ،وب نظير جاوا1، جاوااسكريپت3Perl برآمدند. در سمت سرويس دهنده نيز پيشرفت هايی با استفاده از زبان های اسكريپت نويسی نظير

فراخوانی از ناشی )خروجی فايل يك محتوای دادن قرار سرويس دهنده4 سمت اسكريپت نويسی و سيستمی( در فايل ديگر به صورت پويا روي 5Perl شكل گرفت.

Perl هنوز پس از پايان اين آشفتگي ها، سه تكنولوژي اصلي پا به عرصه ی ظهور نهادند. اگرچه به عنوان يك زبان اسكريپت نويسی مشهور و پر طرفدار ايفاي نقش می كند؛ اما سادگي PHP و داشتن ارتباط داخلي با پايگاه داده MySQL سبب شد تا كاربران زيادي را به خود جذب كند. جاوااسكريپت نيز به عنوان يك جزو اصلي در ايجاد محتواي پوياي وب به همراه CSS و مديريت پردازش Ajax در نامحسوس به صورت وب صفحه های ،Ajax از بهره گيری با شد. واقع توجه مورد مشتري6 سمت به درخواست ها ارسال و داده ها مديريت به اقدام شوند، مطلع كاربران اينكه بدون پس زمينه در و

سرويس دهنده ی وب می كنند.بی شك، تعامل PHP و MySQL، سبب افزايش كارايي آنها می شود، اما چه چيزی در نگاه اول باعث جلب توجه توسعه دهندگان شده است؟ سادگي استفاده از اين دو تكنولوژي براي ايجاد سريع المان7 های

1. Java2. نسخه ی متفاوت جاوااسكريپت از شركت مايكروسافت.

.PHP 3. جايگزيني براي زبان4. قرار دادن محتويات يك فايل يا خروجي يك فراخواني سيستمي در فايل ديگر.

5. Common Gateway Interface6. Client side7. Element