loading...
پله پله
MahdiHD بازدید : 129 چهارشنبه 24 تیر 1394 نظرات (0)

حرف p مخفف واژه paragraph به معنی "پاراگراف" است. در واقع هر محتوایی که داخل تگ های <p> و </p> قرار گیرد در قالب یک پاراگرف در صفحه مرورگر نمایش داده می شود. حال کدی که در آموزش قبل نوشتیم را به صورت زیر بازنویسی می کنیم (لازم به ذکر است در ادامه فقط بخش body را ویرایش کرده و مابقی کدهای دست نخورده باقی خواهند ماند):

?
1
2
3
4
   <body>
       <p>In the Name of the Most High</p>
       <p>Hello World!</p>
   </body>

همانطور که در کد فوق ملاحظه می شود، عبارت اول را داخل یک تگ پاراگراف قرار داده و عبارت Hello World! را هم داخل یک تگ دیگر پاراگراف قرار داده ایم. در این مرحله فایل خود را Save کرده و اما نیازی نیست تا مجدد فایل خود را در فایرفاکس باز کنیم بلکه وارد مرورگر شده و دکمه های Ctrl + R را به صورت هم زمان فشار می دهیم (لازم به ذکر است از آن جهت دکمه R برای این کار انتخاب شده است که حرف R مخفف کلمه Refresh است):

استفاده از تگ پاراگراف

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

به عنوان نکته پایانی می توان به این نکته اشاره کرد که هر متنی را که بخواهیم می توان بدون استفاده از تگ پاراگراف فقط داخل تگ body قرار دهیم و این در حالی است که بسیاری از مرورگرها آنرا به شکل یک پاراگراف نمایش می دهند اما بهتر است که همواره منونی را که می خواهیم در قالب یک پاراگراف نمایش دهیم را داخل تگ های p قرار دهیم.

MahdiHD بازدید : 220 چهارشنبه 24 تیر 1394 نظرات (0)

پس از مطالعه تئوری های مرتبط با زبان اچ تی ام ال در آموزش های قبل، در این آموزش می خواهیم اولین صفحه وب سایت خود را بسازیم. برای این منظور یک ویرایشگر متن مورد علاقه را انتخاب کرده و شروع به کدنویسی می کنیم (لازم به ذکر است که توصیه می شود به هیچ وجه از نرم افزارهایی مثل Dreamweaver و Microsoft Expression و ... استفاده نشود. در واقع از آنجا که قرار است با تکرار و تمرین کدهای اچ تی ام ال آن ها را ملکه ذهن خود کنیم پس یک نرم افزار ویرایشگر متن مثل Notepad یا Notepad++ یا Brackets از شرکت ادوبی را مورد استفاده قرار می دهیم).
پیش از شروع کدنویسی دانستن این نکته ضروری است که همان طور که ما با یکدیگر به زبان فارسی صحبت می کنیم، زبان اچ تی ام ال هم با مرورگر صحبت می کند اما طرز صحبت کردن اچ تی ام ال متفاوت از شیوه ای است که با یکدیگر صحبت می کنیم. در واقع یک مرورگر کدهای اچ تی ام ال را از بالا به پایین و از چپ به سایت می خواند. به عبارت دیگر کدهایی که بالاتر نوشته شوند نسبت به کدهایی که پایین تر نوشته شود زودتر نمایش داده می شوند. برای روش شدن مطلب فوق می توان تصویر زیر را مد نظر قرار داد:

نحوه-اجرای-تگ-های-اچ-تی-ام-ال

همانطور که در تصویر فوق می بینیم، کدها ابتدا از بالا توسط مرورگر تفسیر می شوند. اگر به بخش body توجه کنیم می بینیم که یک تگ <h1> و یک تگ <p> قرار دارد. حال از آنجا که تگ های بالاتر زودتر به نمایش در می آید پس می توان این انتظار را داشت که اول عبارت Heading سپس عبارت Paragraph در صفحه مرورگر نمایش داده شود. اکنون با دانستن این نکات می توانیم با دید بهتری اقدام به نوشتن اولین صفحه وب سایت خود نماییم.
پس از باز کردن نرم افزار Notepad یا Notepad++ شروع به نوشتن کدهای زیر می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
     
<!DOCTYPE html>
<html>
     
    <head>
        <title>Netshahr</title>
    </head>
     
    <body>In the Name of the Most High
            Hello World!
   </body>
     
</html>

همانطور که در کد فوق ملاحظه می شود، ابتدا دستور <!DOCTYPE html> را نوشته ایم تا به مروگر ها این پیغام را برسانیم که نسخه اچ تی ام ال استفاده شده در این صفحه وب سایت نسخه 5 است. عنوانی که برای این صفحه در نظر گرفته ایم Netshahr است. سپس در بخش body سایت ابتدا  عبارت In the Name of the Most High به معنی "به نام خدا" را نوشته سپس در خط بعد عبارت Hello World! را به معنی "سلام دنیا" نوشته ایم.
حال زمان آن فرا رسیده تا این فایل را Save کنیم. نکته ای که در مورد ذخیره سازی این فایل همواره می بایست مد نظر قرار دهیم این است که پسوند فایل مد نظر می بایست حتما html یا htm باشد (لازم به ذکر است که این دو پسوند هیچ فرقی با یکدیگر نمی کنند و بنا به سلیقه خود می توانید یکی را در همین ابتدای راه انتخاب کرده و همواره در ساخت صفحات وب خود آن را مورد استفاده قرار دهید).
برای این صفحه نام index.html را در نظر می گیریم. علت انتخاب نام index برای این صفحه این است که معمولاً نرم افزارهای  وب سروری که روی هاست شرکت میزبانی خدمات وب نصب هستند که این وظیفه دارند تا فایل های وب سایت ما را برای مرورگر کاربران اینترنتی ارسال کنند به صورت پیش فرض نام index را برای صفحه اصلی سایت مبنا قرار می دهند. به طور مثال زمانیکه شما آدرس www.netshahr.com را در مرورگر خود تایپ می کنید، نرم افزار وب سرور می گردد روی سرور تا فایلی با نام index را بیابد و به محض یافتن آن را برای مرورگر شما ارسال می کند. لازم به ذکر است گاهی اوقات به جای نام index از default هم استفاده می شود که این بستگی به شرکت خدمات میزبانی وب دارد (به طور کلی منظور از وب سرور، نرم افزاری است که روی سرور شرکت میزبانی خدمات وب نصب است که این وظیفه را دارا است تا مابین مرورگر کاربر و سرور هاست ارتباط برقرار سازد).
به عنوان یک قرارداد بین المللی، برنامه نویسان مبتدی اولین برنامه ای که در هر زبان برنامه نویسی می نویسند را با عبارت Hello World به معنی "سلام دنیا" شروع می کنند. تاریخچه این عبارت به سال 1972 بر می گردد که در آن سال آقای Brian Kernighan یک کتابچه آموزش زبان برنامه نویسی B تالیف کرد که در آن اولین برنامه ای که آموزش داده شد این بود که عبارت Hello World روی صفحه به نمایش در آید. بنابراین از آن تاریخ تاکنون برنامه نویسان به احترام این برنامه نویس، اولین برنامه خود را با این عبارت آغاز می کنند.
پس از بررسی نکاتی تکمیلی، حال قصد داریم تا اولین صفحه از وب سایت خود را در یک مرورگر مثل فایرفاکس به نمایش در آوریم. برای این منظور سه راه کار وجود دارد. راه کار اول اینکه به مسیری که فایل اچ تی ام ال خود را در آن ذخیره کرده رفته و روی نام فایل کلیک راست کرده و گزینه Open را انتخاب می کنیم:

نحوه-اجرای-یک-فایل-اچ-تی-ام-ال-در-فایرفاکس

سپس خواهیم دید که این صفحه از سایت مان در مرورگر پیش فرض باز خواهد شد.
راه کار دوم این است که مرورگر مد نظر خود را باز نموده سپس از منوی اصلی وارد منوی Open File شده و مسیری که فایل اچ تی ام ال خود را در آن ذخیره کرده ایم را وارد می کنیم (لازم به ذکر است که بسته به نوع مرورگر ممکن است این روش باز کردن فایل اچ تی ام ال متفاوت باشد. این آموزش در مورد مرورگر فایرفاکس است):

نحوه-باز-کردن-یک-فایل-از-داخل-فایرفاکس

لازم به ذکر است که برای باز کردن یک فایل داخل مرورگر می توان به جای استفاده از منوی مرورگر دکمه های Ctrl + O را به صورت هم زمان فشار داد. در واقع از آن جهت کلید O برای باز کردن یک فایل جدید انتخاب شده است که حرف O ابتدا کلمه Open به معنی باز کردن می باشد.
و در نهایت راه کار سوم این است که به صورت Drag and Drop فایل مد نظر خود را گرفته و روی نرم افزار فایرفاکس که از قبل آن را باز کرده ایم رها می سازیم.
با اتخاذ هر کدام از رویکردهای فوق، صفحه وب سایت ما به صورت زیر نمایش داده خواهد شد:

اولین صفحه اچ تی ام ال خود

می بینیم که با موفقیت توانستیم اولین صفحه از وب سایت خود را در یک مرورگر به نمایش در آوریم. اما این صفحه دارای دو مشکل است. مشکل اول اینکه این صفحه اصلا زیبا نیست که در آموزش های آتی به این نکته هم خواهیم پرداخت و مشکل دوم اینکه اگر به کد خود توجه کنیم ما عبارت In the Name of the Most High را در یک خط نوشتیم و عبارت hello World را در خط دیگری اما این در حالی است که مرورگر هر دو خط را پشت سر هم قرار داده است.
علت این مسئله این است که مرورگر هر آنچه را که داخل تگ های <body> و </body> باشد را پشت سر هم نمایش داده و هیچ توجهی به فواصلی که مابین کدها قرار دارد نخواهد کرد.
برای رفع این مشکل می بایست هر جمله خود را داخل یک پاراگراف قرار دهیم که در آموزش شانزدهم به تفصیل این موضوع را مورد بررسی قرار خواهیم داد.

MahdiHD بازدید : 148 چهارشنبه 24 تیر 1394 نظرات (0)

تگ های اچ تی ام ال را می توان با حروف بزرگ، کوچک و یا ترکیبی از هر دو نوشت و اکثر مرورگرها می توانند آن ها را تفسیر کنند و بدون هیچ مشکلی نمایش دهند اما این در حالی است که نوشتن کلیه تگ ها با حروف کوچک روشی است که به صورت استاندارد در آمده است و توصیه می شود که کلیه تگ ها با حروف کوچک نوشته شوند.
به طور کلی تگ های اچ تی ام ال به دو دسته کلی تقسیم بندی می شوند. دسته اول تگ هایی هستند که به هیچ وجه به تنهایی مورد استفاده قرار نمی گیرند. به عبارت دیگر زمانیکه تگ آغازین <body> را نوشتیم می بایست حتماً تگ پایانی </body> را نیز بنویسیم. در واقع دلیل استفاده از تگ پایانی این است که پس از تگ آغازین به هر حال محتوایی می بایست قرار گیرند مثل یک پاراگراف. حال اگر تگ پایانی را در کد خود ننویسیم، مرورگر متوجه نخواهد شد که کجا تگ آغازین به اتمام رسیده است.
گروه دوم تگ هایی هستند که نیاز به تگ پایانی ندارند. به عبارت دیگر این گروه از تگ ها خودشان هم تگ آغازین هستند و هم تگ پایانی. علت این مسئله هم آن است که این تگ ها دارای محتوایی نمی باشند تا نیاز باشد به آن خاطر به مرورگر بفهمانیم که تگ که کجا به اتمام می رسد. مثلا تگی در زبان اچ تی ام ال داریم تحت عنوان <br/>. کاری که این تگ انجام می دهد این است که هر کجا آن را استفاده کنیم، از آن نقطه به بعد، به خط بعد انتقال داده خواهد شد (کار Enter در نرم افزار آفیس ورد را انجام می دهد). وظیفه این تگ انتقال محتوا به خط بعد است و خود این تگ حاوی هیچ محتوایی نیست، از اینرو این تگ هم تگ آغازین است و هم تگ پایانی (در ادامه آموزش با عملکرد این تگ بیشتر آشنا خواهیم شد).
نکته دیگری که در مورد کدنویسی با زبان اچ تی ام ال وجود دارد این است که زبان اچ تی ام ال به فاصله به هیچ وجه حساس نیست. برای روش شدن این مسئله کد آموزش سیزدهم را به صورت زیر بازنویسی می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
     
<title>Title of Your Page</title            >
            </head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
               <p>This is another paragraph.</p>
                            </body>
</html            >

همانطور که در کد فوق ملاحظه می شود، فاصله تگ های اچ تی ام ال نسبت به یکدیگر تغییر یافته است اما این در حالی است که مادامیکه علامت های < و > و / حذف نشوند صفحه ما به مشکلی مواجه نخواهد شد. به عبارت دیگر تگ های <body> و <body    > هیچ فرقی با یکدیگر نمی کنند. اما به خاطر داشته باشیم که تگ های <    body> و <bo   dy> تگ های درستی نبوده و صفحه ما با مشکل مواجه خواهد شد.
به عنوان یک قانون کلی می بایست همواره کدهای خود را منظم نوشته و فواصل یکسانی را در کدهای خود رعایت کنیم.

MahdiHD بازدید : 144 چهارشنبه 24 تیر 1394 نظرات (0)

هر زبان برنامه نویسی از تعدادی Keyword یا "کلید واژه" تشکیل شده است که این کلید واژگان توسط طراحان آن زبان برنامه نویسی مشخص شده اند و هر کدام کار خاصی انجام می دهند و غیر قابل تغییر هستند. در زبان اچ تی ام ال این کلید واژگان تحت عنوان Tag یا تگ شناخته می شوند. هر تگ اچ تی ام ال داخل علامت < > قرار می گیرد و این در حالی است که اکثر تگ های اچ تی ام ال به صورت جفت استفاده می شوند. برای روشن شدن مطلب کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <head>
        <title>Title of Your Page</title>
    </head>
    <body>   
    </body>
</html>

در این کد بعد از تگ مربوط به نسخه اچ تی ام ال که در قسمت قبل توضیح داده شد، می بینیم که تگ <html> نوشته شده است. در واقع این تگ یکی از کلید واژه های زبان اچ تی ام ال است. نکته ای که در مورد این تگ همواره می بایست مد نظر قرار دهیم این است که این تگ هیچ وقت به تنهایی مورد استفاده قرار نمی گیرد. تگ <html> تگ آغازین نامیده می شود و هر تگ آغازین نیازمند یک تگ پایانی می باشد. برای نوشتن تگ های پایانی فقط نیاز است تا یک علامت / قبل از کلید واژه مد نظر داخل علامت های < > قرار دهیم. بنابراین تگ پایانی <html> برابر است با </html> که در کد فوق هم مشاهده می شود.
بعد از تگ آغازین <html> تگی داریم تحت عنوان <head> که این وظیفه را دارا است تا اطلاعاتی در مورد این صفحه از اچ تی ام ال را در خود ذخیره سازد. به عبارت دیگر کلیه چیزهایی که مابین تگ آغازین <head> و تگ پایانی </head> قرار می گیرند از دید کاربر پنهان خواهد بود (لازم به ذکر است که اطلاعاتی که داخل این تگ قرار می گیرند اختیاری بوده و عدم کامل کردن این تگ مشکلی در صفحه وب سایت ما ایجاد نخواهد کرد اما این در حالی است که طراحی حرفه صفحات وب نیازمند برخورداری از این تگ می باشد. علاوه بر این گاهی اوقات نیازمند تگ هایی مثل meta هستیم که حتما بایستی در صفحه خود از آن ها استفاده کنیم که در غیر این صورت به طور مثال صفحه ما از نمایش کاراکترهای فارسی ناتوان خواهد بود).
همانطور که در کد فوق می بینیم داخل تگ های <head> و </head> دو تگ دیگر تحت عنوان <title> و </title> قرار دارند. معنوی لغوی واژه title عبارت است از "لقب، عنوان" و در زبان اچ تی ا ال هم چنین معنایی دارد. زمانی که در دنیای اینترنت گشت می زنیم، می بینیم که هر صفحه دارای یک عنوان است که در Tab مرتبط با آن صفحه در مرورگر به نمایش در می آید:

نمایش عنوان صفحه اصلی سایت آمازون

همانطور که در تصویر فوق می بینیم عنوان Amazon.com: Online Shopping داخل<title> و </title> صفحه اصلی سایت آمازون قرار گرفته است.
تگ <title> از اهمیت بسزایی برخوردار است. به عبارت دیگر عنوان صفحات اچ تی ام ال توسط موتور های جستجو مورد بررسی قرار گرفته و در نتایج جستجوی کاربران اینترنتی به نمایش در می آیند. بنابراین توصیه می شود که هیچ صفحه وب سایت خود را بدون عنوان روی اینترنت قرار ندهید چرا که این کار باعث می شود وب سایت شما از یک سو غیر حرفه به نظر برسد و از سوی دیگر موتورهای جستجویی مثل گوگل و بینگ نخواهند توانست آن صفحه را به راحتی شناسایی کنند بنابراین این صفحه رتبه ای از دید موتورهای جستجو اخذ نخواهد کرد.
چنانچه کد فوق را پس از ذخیره کردن در یک مرورگر به نمایش درآوریم، می بینیم که عنوان Title of your page در بالای مرورگر به نمایش در می آید:

آشنایی با تگ های اصلی یک سند اچ تی ام ال

پس از تگ پایانی </head> تگ آغازین <body> را می بینیم که با تگ پایانی </body> به اتمام می رسد. به طور کلی یک سند اچ تی ام ال را می توان به دو بخش کلی تقسیم بندی کرد: بخش اول که داخل تگ های <head> و </head> قرار می گیرد و بخش دوم که مابین تگ های <body> و </body> قرار می گیرد. هر آنچه که در بخش head قرار گیرد در مرورگر به نمایش در نخواهد آمد اما هر آنچه که در بخش body قرار گیرد در صفحه مرورگر به نمایش در خواهد آمد. به طور مثال هم اکنون که مشغول مطالعه این آموزش هستید، کلیه عکس ها، پاراگراف ها و ... داخل تگ های <body> و </body> این صفحه قرار گرفته اند.

MahdiHD بازدید : 124 چهارشنبه 24 تیر 1394 نظرات (0)

خیلی اوقات یک Element با یک Tag مترادف قلمداد می شود اما این در حالی است که این دو اصطلاح با یکدیگر فرق می کنند. برای روشن شدن این مطلب کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>Title of Your Page</title>
    </head>
     
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
</html>

همانطور که در کد فوق می بینیم چند خط کد جدید به کدهای قسمت 12 اضافه کرده ایم که <p>This is a paragraph.</p> یکی از آن ها است. اگر فقط <p> را مد نظر قرار دهیم این بخش از کد یک تگ است اما اگر تگ آغازین به علاوه تگ پایانی و هر آنچه مابین آن دو را مد ظنر قرار دهیم یک Element پیش روی ما قرار دارد. برای روشن تر شدن این مطلب تصویر زیر را مد نظر قرار می دهیم:

المنت ها در زبان اچ تی ام ال

همانطور که در تصویر فوق می بینیم <body> یک تگ است اما <p>This is a paragraph.</p> یک Element است. به عبارت دیگر هر Element حاوای یک تگ آغازین، محتوی یا متن و یک تگ پایانی است.

MahdiHD بازدید : 121 چهارشنبه 24 تیر 1394 نظرات (0)

لوگوی-اچ-تی-ام-ال-5

به طور کلی ساختار یک صفحه اچ تی ام ال به صورت زیر است:

?
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <head>
        <title>Title of Your Page</title>
    </head>
    <body>
    </body>
</html>

در اولین خط از کد دستوری تحت عنوان می بینیم (عبارت DOCTYPE مخفف واژگان Document Type به معنی "نوع سند" است). اگر از این دستور در صفحات خود استفاده نکنیم باز هم صفحه در مرورگر نمایش داده می شود اما این در حالی است که این دستور به مرورگر کمک می کند تا صفحه وب را به طور کامل و بدون هیچ مشکلی نمایش داده و نوع و نسخه مورد استفاده اچ تی ام ال را نیز برای مرورگر مشخص می کند. به طور مثال همانطور که در کد فوق ملاحظه می شود اگر بخواهیم از آخرین نسخه اچ تی ام ال که 5 است استفاده کنیم می بایست این دستور را به صورت بنویسیم. از این پس کلیه مرورگرها متوجه خواهند شد که با یک صفحه ای از وب رو به رو هستند که با زبان اچ تی ام ال 5 نوشته شده است. در اینجا نیاز است تا با مفهوم Parse آشنا شویم. در واقع در برنامه نویسی زمانیکه برنامه، اپلیکیشن و یا حتی مرورگر که این نوع برنامه است چیزی را تجزیه و تحلیل می کند، به این فرایند Parse شدن می گویند (لازم به ذکر است که معنی لغوی این واژه نیز "تجزیه شدن" است). لازم به ذکر است که دستور DOCTYPE را هم می توان با حروف بزرگ و هم با حروف کوچک به صورت doctype نوشت (توجه داشته باشیم که علامت ! را پیش از دستور DOCTYPE به هیچ وجه فراموش نکنیم). حال زمانیکه مرورگری مثل فایرفاکس با صفحه ای از جنس اچ تی ام ال رو به رو شود که حاوی دستور است، متوجه می شود که با یک سندی رو به رو است که با زمان اچ تی ام ال 5 نوشته شده است بنابراین از این پس کلیه تگ ها را بر اساس نسخه 5 اچ تی ام ال اصطلاحاً Parse می کند و سپس به کاربر نمایش می دهد. اگر بخواهیم کد فوق را برای نسخه 4.01 بازنویسی کنیم کدی به شکل زیر خواهیم داشت:

?
1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Title of Your Page</title>
    </head>       
    <body>
    </body>
</html>

و اگر بخواهیم مثلاً کد فوق را برای xhtml 1.0 بازنویسی کنیم کد فوق به صورت زیر در خواهد آمد:

?
1
2
3
4
5
6
7
8
9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Title of Your Page</title>
    </head>
<body>
</body>
</html>

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

از آن جا که آخرین نسخه زبان اچ تی ام ال نسخه 5 است بنابراین در این سری از آموزش ها همواره از دستور استفاده خواهیم کرد زیرا نه تنها نوشتن آن ساده تر است بلکه با استفاده از آن به کلیه امکانات اضافه شدن در نسخه 5 زبان اچ تی ام ال دسترسی خواهیم داشت.

MahdiHD بازدید : 147 چهارشنبه 24 تیر 1394 نظرات (0)

چرا از محیط های یکپارچه برنامه نویسی استفاده نکنیم

به طور کلی از نقطه نظر سهولت در استفاده، سرعت در کدنویسی، خطایابی و ... IDE ها یا همان محیط های برنامه نویسی یکپارچه آنقدر امکانات فراوانی در اختیار برنامه نویسان قرار می دهند که به سختی می توان نقطه ضعفی برای آن ها متصور شد. اما اگر از نقطه نظر اصول برنامه نویسی بخواهیم به این قضیه نگاه کنیم، کلیه IDE ها دارای یک نقطه ضعف بزرگ هستند و آن هم این که برنامه نویسان مبتدی را «تنبل» می کنند.
به عبارت دیگر برنامه نویسان مبتدی شاید در ابتدای راه برنامه نویسی استفاده از IDE هایی همچون دریم ویور را خیلی مفید ببینند، اما این در حالی است که در دراز مدت این گروه از برنامه نویسان آنقدر به نرم افزار مربوطه عادت می کنند که اگر بخواهند روزی بخشی ازکدهای خود را با نرم افزاری همچون Notepad ویرایش کنند از عهده این کار بر نخواهند آمد چرا که بیشتر به یک محیط بصری عادت کرده اند و از ماهیت و ساختار کدها خیلی با خبر نیستند.
طبق گزارش هایی که از برنامه نویسان حرفه ای در سرتاسر دنیا به دست آمده است، مشخص شده است که اکثر ایشان نه تنها در ابتدای راه فراگیری یک زبان برنامه نویسی از نرم افزارهای ویرایش متنی همچون Notepad استفاده کرده اند، بلکه پس از تسلط به زبان مد نظرشان باز هم استفاده از نرم افزارهای ویرایش متن ساده را کاربردی تر دیده اند.
از سوی دیگر با صحبت با شرکت های برنامه نویسی مطرح ایرانی، متوجه شدیم که اکثر ایشان حتی اجازه نصب یک IDE پیشرفته را هم به برنامه نویسان خود در شرکت نمی دهند.
بنابراین در این سری از آموزش ها مبنا را بر یک ویرایشگر متن ساده همچون Notepad++ یا Brackets قرار می دهیم به طوری که مجبور شویم کلیه کدهای مد نظر را به صورتی دستی وارد کنیم.

MahdiHD بازدید : 153 چهارشنبه 24 تیر 1394 نظرات (0)

نکته ای که در ارتباط با فراگیری زبان اچ تی ام ال وجود دارد این است که برای فراگیری این زبان و بالتبع ساخت یک وب سایت استاتیک به هیچ نوع نرم افزار غیر رایگانی و یا نرم افزار خاصی نیاز نداریم که می شود گفت این یکی از محاسن فراگیری این زبان است.
به عبارت دیگر برای نوشتن کدهای اچ تی ام ال نیاز به یک نرم افزار ویرایش متن و برای نمایش کدهایی که می نویسیم نیاز به یک مرورگر وب داریم. خوشبختانه هر دو نرم افزاری که در بالا به آن ها اشاره شد در هر سیستم عاملی به صورت پیش فرض وجود دارند. اگر سیستم عامل ما ویندوز باشد نرم افزاری تحت عنوان Notepad وجود دارد که می توان برای ویرایش کدهای اچ تی ام ال از آن استفاده کرد. در این سیستم عامل مروگری تحت عنوان اینترنت اکسپلورر وجود دارد که کار نمایش صفحات وب را برای ما انجام خواهد داد. برای دسترسی به نرم افزار Notepad می توان طبق تصویر زیر عمل کنیم:

نحوه-اجرای-نوت-پد

همانطور که در تصویر فوق مشخص است، پس از ورود به بخش Start ویندوز وارد All Programs شده سپس گزینه Accessories را انتخاب می کنیم. زیر شاخه این منوی گزینه ای وجود دارد تحت عنوان Notepad که با یک بار کلیک کردن روی آن این برنامه اجرا خواهد شد:

نرم-افزار-نوت-پد

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

MahdiHD بازدید : 108 چهارشنبه 24 تیر 1394 نظرات (0)

معرفی زبان پی اچ پی

پس از آن که توانستیم وب سایتی کاملاً جذاب با استفاده از زبان های اچ تی ام ال و جاوا اسکریپت به علاوه سی اس اس طراحی کنیم باز هم وب سایت ما یک وب سایت استاتیک خواهد بود. در صورتی که بخواهیم تمایزی مابین یک وب سایت استاتیک با یک وب سایت دینامیک قائل شویم بایستی بگوییم که یک وب سایت استاتیک به هیچ وجه با کاربر تعامل نخواهد داشت. به عبارت دیگر کاربر فقط و فقط این امکان را خواهد داشت تا اطلاعاتی که برای مشاهده در نظر گرفته شده اند را روئیت نماید اما این در حالی است که وب سایت های دینامیک این امکان را به کاربران می دهند تا بتوانند در سایت ثبت نام کنند، وارد ناحیه کاربری خود شوند، در خبرنامه ثبت نام کنند، به پایگاه داده مرتبط با سایت دسترسی پیدا کنند و بسیاری امکانات دیگر.
برای آنکه بخواهیم وب سایت دینامیک طراحی کنیم مجبور به استفاده از زبان های دیگری هستیم که برای این کار طراحی شده اند که از آن جمله می توان به زبان های پی اچ پی، دات نت، جاوا، کلدفیوژن و ... اشاره کرد. محبوب ترین زبانی که برای طراحی وب سایت های دینامیک مورد استفاده قرار می گیرد زبان پی اچ پی است که متن باز بوده، رایگان است، فراگیری آن راحت است و در نهایت به خوبی با زبان اچ تی ام ال قابل ادغام می باشد.
زبان پی اچ پی هم به مانند زبان جاوا اسکریپت زبانی Scripting است. به عبارت دیگر در پاسخ به یک رویداد یا درخواست کاری را انجام می دهد. تنها تفاوتی که زبان پی اچ پی با زبان جاوا اسکریپت دارد این است که زبان جاوا اسکریپت یک زبان سمت کاربر است اما این در حالی است که زبان پی اچ پی یک زبان سمت سرور است. به عبارت دیگر زبان جاوا اسکریپت در مرورگر کاربر اجرا می شود اما زبان پی اچ پی وب اپلیکیشنی تحت عنوان پی اچ پی اجرا می گردد که روی سرور نصب است.
در واقع از آنجا که زبان پی اچ پی ساختار خاص خود را دارا است و به کارگیری از آن نیازمند آشنایی با مفاهیم دیگری همچون وب سرور، برنامه نویسی شیئ گرا، لوکال هاست و ... دارد، در این دوره مورد بررسی قرار نخواهد گرفت.

MahdiHD بازدید : 166 چهارشنبه 24 تیر 1394 نظرات (0)

علاوه بر نرم افزارهای ساده ای که برای کدنویسی صفحات وب می توان مورد استفاده قرار داد، شرکت های مطرح تولید نرم افزار اقدام به طراحی نرم افزارهایی نموده اند که فرایند کدنویسی را بسیار ساده نموده بطوریکه برنامه نویس به هیچ وجه نیاز حفظ کردن کلیه دستوارت ندارد. گاهی اوقات شرایط از این هم به مراتب راحت تر شده بطوری که برنامه نویس به جای آن که کدهای مرتبط با مثلا یک دکمه را وارد کند، به سادگی می تواند به صورت کاملاً «بصری» روی یک دکمه کلید کرده و آن دکمه ایجاد شود.
به طور کلی این دست از نرم افزارها تحت عنوان IDE شناخته می شوند. این اصطلاح مخفف واژگان Integrated Development Environment به معنی "محیط توسعه یکپارچه" است.
از جمله این IDE ها می توان به نرم افزار شرکت معروف ادوبی تحت عنوان Adobe Dreamweaver اشاره کرد که آخرین نسخه آن (در زمان نوشتن این آموزش که سال 1392 است) نسخه CC است و این در حالی است که این نرم افزار غیر رایگان است. در حقیقت با استفاده از این نرم افزار می توان به سرعت یک وب سایت را طرحی نموده و روی شبکه اینترنت قرار داد:

محیط-نرم-افزار-دریم-ویور

این نرم افزار امکان نمایش بصری صفحات اچ تی ام ال را نیز علاوه بر نمایش کدها برای برنامه نویس فراهم آورده است بطوری که بدون نیاز به مرورگر می توان خروجی کدهای اچ تی ام ال را مشاهده کرد (لازم به ذکر است که نتایجی صفحات وب که داخل این نرم افزار مشاهده می کنیم خیلی دقیق نیستند و برای دیدن نتیجه اصلی می بایست از یک مرورگر استفاده کرد).
شرکت مایکروسافت یک IDE قدرتمند تحت عنوان Microsoft Expression Web به دنیا معرفی کرده است که علاوه بر زبان های .NET از زبان های اچ تی ام ال، سی اس اس و پی اچ پی هم پشتیبانی می کند:

محیط-نرم-افزار-مایکروسافت-اکسپرشن

شرکت ادوبی که غالب محصولات آن غیر رایگان است، اقدام به طراحی یک ویرایشگر متن تحت عنوان Brackets نموده است که علاوه بر آن که رایگان است از زبان های اچ تی ام ال، سی اس اس، و پی اچ پی به خوبی پشتیبانی می کند و همچنین دارای محیط گرافیکی ساده و جذابی می باشد:

محیط-نرم-افزار-برکت-شرکت-ادوبی

علاوه بر این نرم افزار، می توان به نسخه پیشرفته نرم افزار Notepad تحت عنوان Notepad++ اشاره کرد که به صورت رایگان قابل استفاده است:

محیط-نرم-افزار-نوت-پد-پلاس-پلاس

همانطور که می بینیم رابط گرافیکی این نرم افراز بسیار شبیه به نرم افزار Notepad است با این تفاوت که امکانات بیشتری در اختیار برنامه نویس قرار می گیرد (ممکن است که این سوال برای برنامه نویسان مبتدی پیش آید که آیا این نرم افزار نسخه Notepad+ هم دارد یا خیر. در حقیقت در برنامه نویسی زمانیکه بخواهیم یک واحد بیشتر را نمایش دهیم از دو علامت به علاوه پشت سر هم استفاده می کنیم. مثلا زمانیکه زبان برنامه نویسی C تکمیل شد و امکانات بیشتری به آن اضافه شد زبان C++ آمد. این بدان معنی است که زبان C++ نسخه بعدی زبان C است. بنابراین نرم افزار Notepad++ نسخه پیشرفته نرم افزار Notepad است).
از برخی ویژگی های نرم افزار Notepad++ می توان به موارد زیر اشاره کرد:
•    رایگان بودن
•    پشتیبانی از اکثر زبان های برنامه نویسی
•    سهولت در استفاده از آن
•    Code Hinting
•    Code Highlighting
به طور کلی منظور از Code Hinting این است که نرم افزار در حین کدنویسی به برنامه نویس کدهای مرتبط با کدی که می نویسد را نشان می دهد.
منظور از Code Highlighting این است که نرم افزار بخش های مختلف کد را به رنگ های مختلفی نشان می دهد تا برنامه نویس بتواند به سادگی کدهایی را که نوشته را تشخیص دهد.

چرا نمی توان از نرم افزای همچون Word استفاده کرد؟
در کدنویسی ما صرفاً نیاز به متن ساده یا اصطلاحاً Plain Text داریم. در اسنادی که با نرم افزاری همچون Word شرکت مایکروسافت نوشته می شوند اطلاعاتی اضافی همچون Bold, Italic و ... به کدهایی که می نویسیم اضافه می شوند که کاملاً غیر ضروری هستند. بنابراین به هیچ وجه استفاده از این نرم افزار برای کدنویسی استفاده نخواهیم کرد.

MahdiHD بازدید : 118 چهارشنبه 24 تیر 1394 نظرات (0)

معرفی جاوا اسکریپت

پس از آن که توانستیم با موفقیت زبان اچ تی ام ال و سی اس اس را فرا بگیریم، در واقع توانسته ایم حداقل های طراحی یک سایت استاتیک را فرا بگیریم. در این مرحله اگر بخواهیم عناصر قرار گرفته روی صفحات سایت خود را متحرک ساخته و به نوعی از انیمیشن در صفحات سایت خود استفاده کنیم نیاز به زبانی تحت عنوان JavaScript داریم (به خاطر داشته باشیم که زبان جاوا اسکریپت با زبان جاوا فرق می کند).
در واقع زبان جاوا اسکریپت یک زبان Scripting و یک زبان برنامه نویسی محسوب نمی شود. به طور کلی منظور از زبان های Scripting این است که این زبان ها در پاسخ به یک رویداد یا درخواست کاری را انجام می دهند اما این در حالی است که یک زبان برنامه نویسی این امکان را به ما می دهد تا بتوانیم بدون وجود یک درخواست نیز کاری را انجام دهیم. نمونه دیگری از زبان های Scripting زبان پی اچ پی است که در ادامه با آن بیشتر آشنا می شویم.
به طور مثال اگر بخواهیم وب سایتی که در آن از زبان جاوا اسکریپت استفاده شده است را نام ببریم می توان به سایت http://www.howarths.nl اشاره کرد که در آن منوها با استفاده از زبان جاوا اسکریپت به گونه ای زیبا طراحی شده اند.
لازم به ذکر است که تسلط به زبان جاوا اسکریپت نیازمند دوره ای اختصاصی است و مسلماً چنانچه بخواهیم در طول این دوره به آن اشاره کنیم فقط موجبات سر در گمی برنامه نویسان مبتدی را فراهم خواهیم آورد بنابراین در طول این دوره به زبان جاوا اسکریپت نخواهیم پرداخت.

MahdiHD بازدید : 118 چهارشنبه 24 تیر 1394 نظرات (0)

چنانچه بخواهیم صفحاتی از وب که با زبان اچ تی ام ال نوشته می شوند را با مثالی از دنیای واقعی مقایسه کنیم به نظر می رسد که بهترین مثال یک ساختمان است. در واقع زمانی که یک ساختمان می سازیم، چارچوب اصلی ساختمان جایگاه در، پنجره ها، اتاق ها و ... را مشخص می سازد اما این در حالی است که اگر صرفاً به سازه ساختمان اکتفا کنیم ساختمانی خواهیم داشت که از هرگونه زیبایی ظاهری عاری است:

اچ تی ام ال در قالب تصویر

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

سی اس اس در قالب تصویر

در مورد زبان اچ تی ام ال هم قضیه به همین صورت است. در واقع با استفاده از اچ تی ام ال فقط می توانیم متون را روی یک صفحه مرورگر وب به نمایش در آوریم بدون آنکه رنگ و اندازه و شکل خاصی برای متون، جداول، فرم ها، منوها و ... بتوانیم در نظر بگیریم. چیزی که در اینجا به کمک ما می آید CSS است که مخفف واژگان Cascading Style Sheet است. الگوهای آبشاری یا همان سی اس اس ها در کنار زبان اچ تی ام ال این امکان را به برنامه نویس یا طراح وب می دهند تا بتواند چیدمان، رنگ، اندازه، نوع فونت و بسیاری از امکانات دیگر را در مورد عناصر اچ تی ام ال اعمال کند و بالتبع صفحات به مراتب زیباتری نسبت به صفحاتی که صرفاً با زبان اچ تی ام ال طراحی می شوند را ایجاد کند. برای آنکه به اهمیت سی اس اس در طراحی وب بیشتر پی ببریم در ادامه یک صفحه اچ تی ام ال ساده را خواهیم دید که به هیچ وجه سی اس اس در آن استفاده نشده است:

اچ تی ام ال بدون سی اس اسمی بینیم که متون به خوبی نمایش داده شده اند اما اصلا زیبا به نظر نمی رسند. حال با استفاده از کمی کدهای سی اس اس سعی می کنیم که صفحه را کمی زیباتر جلوه دهیم:

اچ تی ام ال به همراه سی اس اسمی بینیم که فقط با استفاده از 5 دستور ساده سی اس اس صفحه وب ما چقدر زیباتر به نظر می رسد.
لازم به ذکر است که در این دوره آموزشی تکنیک های کاربردی سی اس اس نیز به منظور بهینه کردن ظاهر صفحات وب نیز مورد بررسی دقیق قرار خواهند گرفت.

MahdiHD بازدید : 221 چهارشنبه 24 تیر 1394 نظرات (0)

تیم برنرز لی

 آقای تیم برنرز لی در سال 1989 شبکه جهانی وب را طرح ریزی کرد. در واقع هدف اصلی وی فراهم آوردن ساز و کاری بود که از آن طریق محقیق بتوانند نتایج تحقیقات خود را با یکدیگر به اشتراک بگذارند. سپسزبان نشانه گذاری فرامتنی یا HyperText Markup Language که به صورت مختصر HTML خوانده می شود را طرح ریزی نمود و در نهایت در سال 1991 این زبان به طور رسمی به دنیا معرفی شد و این زبان به جایی رسید که دنیای اینترنت بدون آن بی معنا است.

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

عبارت Hyper در مقابل عبارت Linear قرار دارد. منظور از Linear ساختاری "خطی" است. به عبارت دیگر فرض کنیم یک زبان برنامه نویسی است که ساختاری خطی دارد و در آن کارها یکی پس از دیگری انجام می شوند. فرض کنیم دو دستور داریم: دستور الف و دستور ب. حال مادامیکه دستور الف انجام نشده باشد قادر نخواهیم بود دستور ب را اجرا کنیم. اما قضیه در مورد زبان اچ تی ام ال که یک زبان Hyper است فرق می کند به این شکل که در هر کجای وب و در هر زمانی که باشیم می توانیم به بخش دیگری رفته و به هیچ وجه نیاز نیست تا دستورات یکی پس از دیگری انجام شوند. به طور مثال اصلاً نیازی نیست تا اول به سایت گوگل رفته سپس وارد سایت یاهو شویم (لازم به ذکر است که معنی لغوی Hyper عبارت است از ماوراء، فوق، بالا و ...).

کلمه Text که گویا است و به معنی "متن" است. به طور کلی Hypertext به منزله متنی است که با کلیک روی آن می توان به صفحه دیگری رفت.

منظور ازLanguageMarkup زبانی است که در آن، متن کاری بیش از قرار گرفتن روی صفحه مروگر انجام می دهد و از سوی دیگر به جای متون می توان از تصاویر، لینک ها، جداول، منوها و ... استفاده کرد.

همانطور که پیش از این توضیح داده شد زبان اچ تی ام ال یک زبان Markup است. به عبارت دیگر برخلاف زبان های Scripting یا Programming که برای انجام کارهای مختلف از دستورات خاصی استفاده می کنند، زبان اچ تی ام ال از تگ ها برای انجام کارهای خود استفاده می کنند (منظور از زبان Scripting زبانی است که اپلیکیشن های نوشته شده با آن فقط در صورت مشاهده یک درخواست کاری را انجام می دهد اما یک زبان Programming زبانی است که برنامه های نوشته شده با آن بدون نیاز به دریافت درخواست از طرف کاربر هم می توانند دستوری را اجرا کنند).

پس از معرفی اولین نسخه این زبان، در هر نسخه جدید قابلیت های فراوانی به این زبان اضافه شد بطوریکه سیر پیشرفت این زبان در جدول زیر نشان داده شده است:

جدول نسخه های مختلف زبان اچ تی ام ال

 همانطور که در جدول فوق مشاهده می شود نسخه ای تحت عنوان XHTML 1.0 و XHTML5 در لیست دیده می شوند. سازمانی به آدرس http://www.w3c.com/ متولی ارتقاء و انتشار زبان اچ تی ام ال است تقریباً در سال 2000 نسخه جدیدی از زبان اچ تی ام ال را تحت عنوان اکس اچ تی ام ال را را منتشر کرد ( لازم به ذکر است که w3c مخفف World Wide Web Consortium به معنی کنسرسیوم شبکه جهانی وب می باشد). به طور کلی منظور از اکس اچ تی ام ال ترکیبی از زبان اچ تی ام ال با زبان اکس ام ال است. در واقع پس از ترکیب دو زبان با یکدیگر زبان اچ تی ام ال توسعه پذیر تر شد و به طور کلی دست برنامه نویسان به مراتب باز تر شد. در نسخه اول این زبان کلیه تگ ها شبیه به تگ های نسخه اچ تی ام ال 4 بود با این تفاوت که یکسری تگ های تکمیلی به آن اضافه شده و یکسری قوانینی هم به آن اضافه شده است که می شود گفت قوانین سخت گیرانه ای بودند.

همانطور که در جدول بالا مشخص است، آخرین نسخه از زبان اچ تی ام ال نسخه 5 است که در این سری از آموزش ها نیز این نسخه را مد نظر قرار خواهیم داد. به طور کلی نسخه 5 این زبان به منزله نسخه تکمیلی نسخه 4 است با این تفاوت که یکسری تگ های تکمیلی به آن اضافه شده است که به مراتب برنامه نویس را در ساخت صفحات وب یاری می رسانند. علاوه بر این در نسخه 5 از زبان اچ تی ام ال یک تفاوت عمده می بینیم و آن هم اینکه نسخه 5 زبان اچ تی ام ال این امکان را به برنامه نویسان می دهد تا علاوه بر صفحات وب بتوانند وب اپلیکیشن نیز طراحی کنند.

MahdiHD بازدید : 118 چهارشنبه 24 تیر 1394 نظرات (0)

تایپ ده انگشتی به عنوان پیش نیاز شروع برنامه نویسی است

به طور کلی در این سری از آموزش ها مبنا را بر آن خواهیم گذاشت که مخاطبین دوره هیچ گونه زمینه ای در برنامه نویسی نداشته و صرفاً با نحوه کار با سیستم عاملی همچون ویندوز، نصب نرم افزار، اجرای نرم افزار و ... آشنایی دارند.

به هر حال از دید بنده، برنامه نویسی اچ تی ام ال دو پیش نیاز دارد که از اهمیت بسزایی برخوردارند:

1. تایپ ده انگشتی لاتین: در برنامه نویسی بیش از آنکه با موس سر و کار داشته باشیم، به استفاده از صفحه کلید سیستم خود خواهیم پرداخت و همانگونه که از نام آن پیدا است با کلیدهای صفحه کلید سر و کار داریم. به عبارت دیگر بایستی کدهای خود را «تایپ» کنیم. اگر بخواهیم به صورت دو انگشتی و به عبارت دیگر غیر حرفه ای کدهای خود را وارد نماییم، فرایند برنامه نویسی برای ما کار دشواری خواهد بود و به هیچ وجه از کاری که انجام می دهیم لذت نخواهیم برد و شاید هم انگیزه خود را تا حدی از دست بدهیم و دوره طراحی سایت را در نیمه راه رها کنیم. بنابراین توصیه می شود از ابتدای راه، تایپ ده انگشتی را یا با استفاده از نرم افزارهای موجود در بازار و یا به صورت تمرین آزمون و خطا فرا بگیریم.

2. فراگیری زبان انگلیسی: در واقع از آنجا که کلیه اسناد زبان های برنامه نویسی دنیا از جمله زبان اچ تی ام ال و همچنین واژگان مورد استفاده در زبان های برنامه نویسی به زبان انگلیسی است، توصیه می شود با این زبان بین المللی نه در حد خیلی زیاد بلکه در حدی که بتوانیم متون انگلیسی تخصصی را بخوانیم و متوجه شویم و همچنین به زبان انگلیسی مکاتبه نماییم کفایت می کند. در اینترنت Forum های زیادی هستند که به سادگی می توانیم سوالات خود را در آن ها مطرح کرده و پاسخ مناسب را دریافت کنیم که از مهم ترین آنها می توان به سایت www.stackoverflow.com اشاره کرد. بنابراین برخورداری از دانشی نسبی در زمینه زبان انگلیسی به طرز قابل توجهی می تواند فرایند یادگیری یک زبان برنامه نویسی را تسهیل نماید. از سوی دیگر هر آموزشی مباحث خاصی را پوشش می دهد و بالتبع فراگیری جنبه های مختلف یک زبان برنامه نویسی نیازمند استفاده از کتب و مقالات مرجع است که غالباً به زبان انگلیسی هستند. بنابراین با فراگیری زبان انگلیسی خواهیم توانست دانش برنامه نویسی خود را همواره به روز نگه داشته و مهارت های خود را گسترش دهیم.

MahdiHD بازدید : 125 چهارشنبه 24 تیر 1394 نظرات (0)

دوره آموزش اچ تی ام ال و سی اس اساینترنت علاوه بر خدمات گسترده ای که در اختیار کاربرانش در سرتاسر دنیا قرار داده است، دید کاربران را نیز به مطالعه تغییر داده است. برای روش شدن این مطلب مثالی می زنیم. زمانیکه یک کتاب مثلاً 87 صفحه ای را می خواهیم مطالعه کنیم، این 87 صفحه خیلی زیاد به نظر ما نخواهد آمد اما اگر یک کتاب تحت وب باشد که به همین میزان صفحه داشته باشد احتمال قریب به یقین حوصله خواندن آن را نداشته باشیم.

اگر بخواهیم به دلایل چنین اتفاقی در اینترنت اشاره کنیم، موارد زیادی را می توان برشمرد که به طور حتم یکی از آنها استفاده از خود کامپیوتر است. در حقیقت زمانیکه می خواهیم یک کتاب بخوانیم به سادگی کتاب را باز کرده و شروع به خواندن می کنیم اما این در حالی است که اگر بخواهیم همین کتاب را تحت وب بخواهیم چند چیز نیاز است: اول آنکه کامپیوتر را روشن کنیم، وارد اینترنت شویم، آدرس وب سایت مد نظر را وارد کنیم و در نهایت روی هر فصلی که بخواهیم کلیک کنیم. علاوه بر این اگر از لپ تاپ، موبایل و یا تبلت برای اتصال به اینترنت استفاده نکنیم، نیاز به توضیح ندارد که برای استفاده از کامپیوتر های معمولی در بیشتر مواقع می بایست پشت میز بنشینیم (مگر آنکه کسی کامپیوتر خود را روی زمین قرار دهد!).

همین پشت میز نشستن خود موجب تحلیل رفتن انرژی کاربر می شود بنابراین کاربر در استفاده از کامپیوتر نسبت به خواندن یک کتاب به مراتب بیشتر خسته می شود. اگر بخواهیم دلایل زودتر خسته شدن در استفاده از کامپیوتر را نسبت به کتاب خواندن برشمریم مسلماً به موارد بیشتری نیز خواهیم رسید.

به همین دلیل رویکرد موفقی که در ارتباط با آموزش های اینترنتی می توان اتخاذ کرد این است که آموزش ها کوتاه و کاربردی باشند. منظورمان از کوتاه این است که برای خواندن هر آموزش بیش از 10 دقیقه زمان نیاز نخواهیم داشت و علاوه بر این منظورمان از کاربردی این است که در هر قسمت یک نکته آموزشی مورد بررسی قرار خواهد گرفت که در ادامه نکات آموزشی قبل بوده و در صورتی که نکات آموزشی قبل را به خوبی مطالعه کرده باشیم هیچ نیازی به مرور مطالب دیگر نخواهیم داشت.

بنابراین با اتخاذ چنین رویکردی این انتظار را می توان داشت که کاربر برای مطالعه هر قسمت از آموزش های طراحی سایت فقط نیاز است تا 10 دقیقه پشت میز کامپیوتر خود نشسته و یک نکته جدید را بیاموزد. علاوه بر این شاید شنیده باشید که خیلی ها می گویند زبان فرار است. خب منظور ایشان زبان برنامه نویسی نیست بلکه زبانی است که با آن ارتباط برقرار می سازیم. به عقیده بنده زبان فرار نیست بلکه "زبانی که استفاده نشود" فرار است. فرض کنیم می خواهیم برای ادامه زندگی به کشور آلمان برویم. برای این منظور در کلاس های زبان آلمانی شرکت کرده و این زبان را تا حد متوسطه فرا می گیریم. حال تا ویزای خود را دریافت کنیم تقریباً 18 ماه زمان صرف خواهد شد و ما هم به این امید که زبان آلمانی را تا حد متوسطه بلد هستیم دیگر کلاس های خود را ادامه نمی دهیم. پس از گرفتن ویزای آلمان خود پس از یک سال و نیم، زمانیکه در فرودگاه فرانکفورت از هواپیما پیاده می شویم به خود می آییم که خیلی از چیزها را فراموش کرده ایم. علت این مسئله هم کاملاً واضح است: "تمرین کردن را رها کرده ایم".

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

بنابراین اگر شروع به فراگیری یک زبان برنامه نویسی نماییم و به طور مداوم آن را تمرین نکنیم به طور حتم آن را فراموش خواهیم کرد. در واقع بایستی آنقدر کدهای زبان مد نظر خود را بنویسیم که ملکه ذهنمان شوند که در آن صورت همچون زبان فارسی، آذری، کردی، گیلکی، مازنی، عربی و ... (قابل توجه تمام اقوام ایرانی) که اگر آن را به مدت یکسال هم مورد استفاده قرار ندهیم فراموش نخواهیم کرد، به زبان برنامه نویسی مد نظر خود کاملاً مسلط خواهیم شد.

با مد نظر قرا دادن موارد فوق الذکر امیدواریم این دوره برای شما کاربر گرامی مفید واقع گردد.

MahdiHD بازدید : 94 چهارشنبه 24 تیر 1394 نظرات (0)

آموزش HTML

زبان HTML پایه و اساس طراحی صفحات وب می باشد. عبارت HTML که مخفف Hyper-Text Markup Language به معنای "زبان علامت گذاري فرا متنی"است، زبان استاندارد طراحی صفحات وب است که از آن طریق می توان وب سایت هایی کاملاً استاتیک طراحی کرد. سایت های دینامیکی هم که با سایر زبان ها من جمله PHP، C Sharp و ... طراحی می شوند در نهایت خروجی کدهای سمت سرور آن ها تگ های اچ تی ام ال را به مرورگر کاربران ارسال خواهند کرد.

اچ تی ام ال یک زبان نشانه گذاری است به اين معنی که بخش های مختلف توسط اجزايی به نام Tag از هم جدا شده که هر کدام دارای کاربرد مخصوص به خود هستند. اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت در معرض دید کاربران قرار گیرند.

تیم تولید محتوای آموزشی نت شهر سعی نموده تا در این سری از آموزش های مقدماتی طراحی سایت، زبان اچ تی ام ال را به زبانی ساده و به صورت کاملاً قابل فهم آموزش دهد تا علاقمندان بتوانند پس از پایان آموزش HTML،با استفاده از تگ هایی من جمله Header، H1، Map، Div، Paragraph، Break و همچنین متاتگ هایی از قبیل title، description، keyword، head و ... سایتی همراه با عناصری از قبیل متن، عکس، تیتر، جدول و... طراحی نمایند که در عین حال از دید موتورهای جتسجویی همچون گوگل، بینگ، یاهو و ... بهینه باشند.

منبع این سری از آموزش ها شهر نت است.

MahdiHD بازدید : 97 چهارشنبه 24 تیر 1394 نظرات (0)

گاهی اوقات در طراحی سایت برای ما به عنوان یک برنامه نویس پیش می آید که نیاز داریم Property یکسانی را برای چندین Selector در نظر بگیریم:

?
1
2
3
4
5
6
7
8
9
p {
   color:yellow;
}
td {
   color:yellow;
}
h3 {
   color:yellow;
}

همانطور که در کد فوق می بینیم برای Selector های p و td و h3 یک Property تحت عنوان color در نظر گرفته ایم و Value آن را هم برابر با yellow قرار داده ایم. در عوض می توان کد فوق را به صورت زیر به طور خلاصه نوشت:

?
1
2
3
p, td, h3 {
   color:yellow;
}

همانطور که می بینیم پس از p یک کاما قرار داده و td را نوشته و پس از آن هم یک کامای دیگر قرار داده و h3 را نوشته ایم. از این پس color برای هر سه Selector در نظر گرفته خواهد شد.

MahdiHD بازدید : 118 چهارشنبه 24 تیر 1394 نظرات (0)

گاهی اوقات نیاز داریم تا مثلاً فقط تگ های <p> را که داخل تگ <div> هستند را هدف قرار دهیم. برای این کار می بایست از مفهومی تحت عنوان Descendant Selector استفاده کنیم. برای روشن شدن این موضوع کد سی اس اس (CSS) زیر را مد نظر قرار می دهیم:

?
1
2
3
4
div p {
   color:#00ff00;
   font-size:20px;
}

همانطور که می بینیم ابتدا کلید واژه div را نوشته سپس یک فاصله قرار داده و کلیدواژه p را می نویسیم ( اگر خاطرمان باشد پیش از این گفتیم که کدهای سی اس اس (CSS) در موارد خاصی به فاصله حساس هستند که در اینجا یک مورد از آن ها را می بینیم. به عبارت دیگر اگر فاصله مابین div و p را حذف کنیم عملکرد مورد انتظار مشاهده نخواهد شد).
از این پس هر تگ <p> که داخل تگ <div> باشد به رنگ سبز در آمده و اندازه آن هم 20 پیکسل خواهد شد. برای روشن شدن این مسئله کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>Netshahr</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>
     
    <body>
        <p>استفاده از کلاس در کدهای اچ تی ام ال</p>
        <br/>
        <div>
            <p>پاراگرافی که داخل تگ دیو قرار دارد</p>
        </div>
    </body>
</html>

در کد فوق می بینیم که دو تگ <p> داریم که یکی از آن ها داخل تگ <div> قرار گرفته است. حال با آگاهی از کدهای سی اس اس خود این انتظار می رود که فقط پاراگراف داخل تگ <div> تحت تاثیر استایل ها قرار گیرد. برای روشن شدن این موضوع فایل خود را در مرورگر اجرا می کنیم:

using element selectors in div in css

MahdiHD بازدید : 158 چهارشنبه 24 تیر 1394 نظرات (0)

گر نیاز داشته باشیم تا id یا class یی که ایجاد کرده ایم فقط به برخی تگ های خاص در اچ تی ام ال (HTML) اختصاص یابند، می بایست کد سی اس اس (CSS) خود را به صورت زیر بازنویسی کنیم:

?
1
2
3
4
5
6
p.myClass {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

همانطور که در کد فوق ملاحظه می شود ابتدا نام Selector یی تحت عنوان p را نوشته سپس نام Selector خود تحت عنوان myClass را می نویسیم (نیاز به توضیح نیست که همواره از نقطه برای Selector هایی از جنس class استفاده می کنیم). از این پس این class فقط در مورد کلیه تگ های <p> اعمال خواهد شد. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>Netshahr</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>
     
    <body>
        <p class="myClass">استفاده از کلاس در کدهای اچ تی ام ال</p>
        <br/>
        <h1 class="myClass">استفاده از کلاس قبلی در یک تگ دیگر</h1>
    </body>
</html>

در کد فوق class را هم به تگ <p> و هم به تگ <h1> ضمیمه کرده ایم اما از آنجا که در سی اس اس (CSS) دستور داده ایم که این class فقط در مورد تگ های <p> اعمال شود انتظار می رود تغییری در تگ <h1> نبینیم. برای تست کردن این کد فایل خود را در مرورگر باز می کنیم:

using class selectors and id selectors together

می بینیم که تاثیر class خود تحت عنوان myClass فقط روی تگ <p> اعمال شده است. این قانون در مورد Selector هایی از جنس id هم صدق می کند با این تفاوت که به جای نقطه می بایست از علامت # استفاده کنیم. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

?
1
2
3
4
5
6
p#myClass {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

با ویرایش کردن کدهای اچ تی ام ال (HTML) خود و نوشتن دستور id به جای کلید واژه class این تغییرات را می توان اعمال نمود. به خاطر داشته باشیم که مابین class یا id و selector نمی بایست Space وجود داشته باشد.

MahdiHD بازدید : 158 چهارشنبه 24 تیر 1394 نظرات (0)

و رایج ترین نوع Selector ها در زبان سی اس اس (CSS) تحت عنوان Element Selector شناخته می شوند. همانطور که در دوره اچ تی ام ال (HTML) توضیح دادیم منظور از Element تگ های اچ تی ام ال (HTML) به همراه محتوای داخل آنها است. به طور مثال برای تگ <h1> می بایست از Element Selector یی تحت عنوان {} h1 استفاده کرد. همانطور که می بینیم علامت های <> که در زبان اچ تی ام ال (HTML) مورد استفاده قرار می گیرند به علامت های {} در زبان سی اس اس (CSS) تبدیل می شوند.
به طور کلی این نوع از Selector ها بسیار گسترده هستند. به عبارت دیگر چنانچه از Selector یی تحت عنوان {} p استفاده کنیم، این Selector کلیه تگ های پاراگراف در صفحات وب سایت ما را تحت تاثیر قرار خواهد داد.
نوع دوم از Selector ها تحت عنوان class Selector شناخته می شوند. به طور کلی یکی دیگر از Attribute های زبان اچ تی ام ال (HTML) تحت عنوان class شناخته می شود که آن را در کلیه تگ ها می توان مورد استفاده قرار داد. نحوه نام گذاری class ها به این شکل است که هر نامی که بخواهیم می توانیم برای آن ها در نظر بگیریم و علاوه بر این class مد نظر را به هر تعداد و برای هر تعداد تگ که نیاز داشته باشیم می توانیم مورد استفاده قرار دهیم. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p class="myClass">استفاده از کلاس در کدهای اچ تی ام ال</p>
   </body>
</html>

همانطور که در کد فوق ملاحظه می کنیم، داخل تگ <body> یک تگ <p> قرار داده و داخل تگ آغازین پاراگراف از Attribute یی تحت عنوان class استفاده کرده و نامی دلخواه همچون myClass برای آن در نظر گرفته ایم (نحوه نوشتن myClass به این شکل است که حرف اول به صورت کوچک نوشته شده سپس اولین حرف کلمه دوم با حرف بزرگ نوشته شده است. این نوع نامگذاری اصطلاحاً camelCase گفته می شود. واژه camel به معنی "شتر" است و از آنجا که این طور نامگذاری شبیه به کوهان شتر است camelCase نامیده می شود. البته این نوع نامگذاری اجباری نبوده و صرفا برای خوانایی بیشتر مورد استفاده قرار می گیرد).
حال فایل main.css خود را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
6
.myClass {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

همانطور که در کد فوق می بینیم، داخل فایل main.css ابتدا یک نقطه قرار داده سپس نامی که برای class در نظر گرفتیم را می نویسیم و هر کدی که بخواهیم به این class اختصاص یابد را داخل دو علامت {} می نویسیم:

1. using class in css

به خاطر داشته باشیم که همواره برای اختصاص استایل به class های داخل کدهای اچ تی ام ال (HTML) بایستی داخل فایل سی اس اس (CSS) از علامت نقطه پیش از نام کلاس استفاده کنیم.
حال کد فوق را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
   <body>
       <p class="myClass">استفاده از کلاس در کدهای اچ تی ام ال</p>
       <br/>
       <h1 class="myClass">استفاده از کلاس قبلی در یک تگ دیگر</h1>
   </body>

کاری که در کد فوق انجام داده ایم این است که با استفاده از تگ </br> یک فاصله مابین دو خط از کد ایجاد کرده ایم. سپس یک تگ <h1> نوشته ایم و class یی که قبلاً ایجاد کرده بودیم را به آن ضمیمه می کنیم:

2. using class in css

می بینیم که کدهای سی اس اس در مورد تگ <h1> هم اعمال شده اند.
Selector دیگری که می خواهیم مورد بررسی قرار دهیم id Selector نام دارد. id Selector هم همانند class Selector است از این جهت که هر دو به عنوان Attribute برای تگ های اچ تی ام ال (HTML) مورد استفاده قرار می گیرند اما این در حالی است که یک تفاوت عمده با class Selector ها دارند به این صورت که id Selector ها فقط به یک آیتم در صفحات اچ تی ام ال (HTML) اختصاص داده می شوند. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

?
1
2
3
   <body>
       <p id="myID">استفاده از کلاس در کدهای اچ تی ام ال</p>
   </body>

می بینیم که از Attribute یی تحت عنوان id استفاده کرده و مقدار آن را برابر با myID قرار داده ایم. حال به ویرایش فایل main.css خواهیم پرداخت:

?
1
2
3
4
5
6
#myID {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

به خاطر داشته باشیم که برای id Selector ها در نوشتن کدهای سی اس اس (CSS) از علامت # استفاده می کنیم که اصطلاحاً Pound Sign یا Hash Mark نامیده می شود:

id selectors in css

به طور کلی نامگذاری در برنامه نویسی از اهمیت ویژه ای برخوردار است چرا که یک اشتباه کوچک منجر به این خواهد شد که برنامه به درستی اجرا نگردد. نامگذاری در اچ تی ام ال (HTML) و سی اس اس (CSS) هم از این قاعده مستثنی نیست. در نامگذاری id ها و class ها حتماً به خاطر داشته باشیم که از علائمی همچون @ و $ و % و ... استفاده نکنیم. علاوه بر این اجازه نداریم تا در نامگذاری از Space یا فاصله هم استفاده کنیم.
سی اس اس (CSS) اصطلاحاً case-sensitive است. به عبارت دیگر نام myClass با myclass دو چیز مجزا تلقی می شوند. بنابراین همواره نام هایی که برای id ها یا class های خود انتخاب می کنیم را می بایست به خاطر داشته باشیم.

MahdiHD بازدید : 160 چهارشنبه 24 تیر 1394 نظرات (0)

همواره به خاطر داشته باشیم که در سی اس اس (CSS) آخرین دستوری که نوشته شود همواره برنده است. به عبارت دیگر آخرین دستورات سی اس اس (CSS) موجب می گردند دستورات پیشین تاثیر خود را از دست بدهند.
برای روشن شدن این موضوع کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>آشنایی با سلسله مراتب کدهای سی اس اس</p>
   </body>
</html>

همانطور که می بینیم یک تگ <p> حاوی عبارتی را داخل تگ <body> قرار داده ایم. اکنون به ویرایش کدهای سی اس اس (CSS) خود می پردازیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
p {
   color:white;
   font-size:20px;
}
h1 {
   font-size:20px;
}
h6 {
   font-size:10px;
}
p {
   color:red;
}

همانطور که در کد فوق می بینیم ابتدا در Selector یی تحت عنوان p رنگ و اندازه مد نظر خود را نوشته ایم سپس اقدام به نوشتن کدهای مرتبط با h1 و h6 نموده و در نهایت مجدد رنگ Selector تحت عنوان p را از سفید به قرمز تغییر داده ایم.
حال مرورگر ابتدا p اول را مد نظر قرار می دهد اما از آنجا که می بیند مجدد این Selector خصوصیت جدیدی به خود گرفته است، خصوصیت دوم را مد نظر قرار می دهد. به عبارت دیگر در بار اول رنگ تگ <p> سفید شده و اندازه آن 20 پیکسل می شود ام از آنجا که مجدد در انتهای کد رنگ تگ <p> از سفید به قرمز تغییر یافته است، مرورگر اندازه را از مورد اول و رنگ را از مورد دوم اعمال خواهد کرد. به طور کلی همواره آخرین کدها مد نظر قرار داده می شوند:

more than one selector in css

این قضیه در مورد ترتیب قرارگیری کدهای سی اس اس External و Internal هم صدق می کند. برای روشن شدن این موضوع کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
       <style>
           p {
                   color:blue;
           }
       </style>
   </head>
   
   <body>
       <p>آشنایی با سلسله مراتب کدهای سی اس اس</p>
   </body>
</html>

همانطور که در کد فوق مشخص است پس از لینکی که به فایل main.css خود در تگ <head> داده بودیم تگ <style> را نوشته و در آن فقط رنگ p را به آبی تغییر داده ایم. از آنجا که تگ <style> بعد از تگ <link> که به فایل main.css لینک داده است آمده، انتظار می رود که رنگ آبی به جای رنگ قرمز در نظر گرفته شود:

internal and external css codes

اکنون برای دیدن تاثیر سلسه مراتب کدهای سی اس اس (CSS) به صورت زیر جایگاه تگ های <link> و <style> را تغییر می دهیم:

?
1
2
3
4
5
6
7
8
9
10
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <style>
           p {
                   color:blue;
           }
       </style>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>

مرورگر را به روز رسانی می کنیم تا تاثیر تغییر فوق را مشاهده کنیم:

internal and external css codes2

می بینیم که کدهای سی اس اس External از آنجا که پس از کدهای سی اس اس Internal آمده اند اقدام به رونویسی کدهای Internal می کنند.
حال قصد داریم تا رنگ این پاراگراف را با استفاده از کدهای سی اس اس Inline هم تغییر دهیم. برای این منظور کد خود را به صورت زیر تکمیل می کنیم:

?
1
2
3
    <body>
        <p style="color:yellow;">آشنایی با سلسله مراتب کدهای سی اس اس</p>
    </body>

مجدد مروگر را به روز رسانی می کنیم:

inline code in css

در واقع از آنجا که کدهای سی اس اس Inline پس از کدهای سی اس اس External و Internal قرار گرفته اند برنده این بازی هستند!

MahdiHD بازدید : 144 چهارشنبه 24 تیر 1394 نظرات (0)

بدون استفاده از تگ <style> در بخش head سند اچ تی ام ال (HTML) خود می توان کدهای سی اس اس (CSS) را به صورت Inline یا به عبارتی "داخل تگی" مورد استفاده قرار داد. برای روشن شدن این موضوع کد زیر را وارد ویرایشگر متن خود می کنیم:

?
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
   </head>
   
   <body style="background-color:#ffdeff"></body>
</html>

همانطور که در کد فوق می بینیم، داخل تگ آغازین <body> از Attribute یی تحت عنوان style استفاده کرده ایم و با استفاده از کدهای مرتبط با رنگ پس زمینه و انتخاب رنگی مایل به صورتی، رنگ body این صفحه را تغییر داده ایم:

internal css codes

لازم به ذکر است که در این سری از آموزش ها تا حد ممکن از سی اس اس (CSS) به صورت External استفاده خواهیم کرد.

MahdiHD بازدید : 117 چهارشنبه 24 تیر 1394 نظرات (0)

همانطور که پیش از این گفتیم کدهای سی اس اس (CSS) را به صورت Internal یا داخلی هم می توان در صفحات اچ تی ام ال (HTML) مورد استفاده قرار داد. برای این منظور کد زیر را وارد ویرایشگر متن خود خواهیم کرد:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <style>
           body {
                   background-color:#ffde57;
           }
       </style>
   </head>
   
   <body></body>
</html>
  

همانطور که در کد فوق می بینیم داخل تگ های <head> و <head/> از تگی تحت عنوان <style> استفاده کرده ایم. در حقیقت هر کدی که داخل این تگ بنویسیم به عنوان کدهای سی اس اس فقط و فقط در این صفحه از وب سایت ما مورد استفاده قرار خواهد گرفت. به طور مثال در کد فوق با نوشتن کدهایی که می بینیم سعی کرده ایم رنگ body سایت خود را به زرد تغییر دهیم:

making the background color yellow

از نقاط ضعف این نوع از به کار گیری کدهای سی اس اس (CSS) این است که این کدهای فقط در مورد این صفحه از وب سایت اعمال می شوند و چنانچه بخواهیم صفحه دیگری به سایت خود اضافه کنیم بایستی مجدد کدهای سی اس اس (CSS) را برای صفحه جدید هم بنویسیم. از سوی دیگر اگر بخواهیم کدی را تغییر دهیم مثلا رنگ پس زمینه را از زرد به سفید تغییر دهیم، مجبور خواهیم بود تا کلیه کدهای سی اس اس (CSS) در تک تک صفحات سایت خود را ویرایش کنیم که این کاری بسیار وقت گیر است.
علاوه بر این تا مجبور نباشیم نمی بایست کدهای سی اس اس (CSS) را داخل صفحات سایت خود قرار دهیم چرا که بر اساس قوانین سایت w3c.org کاری غیر حرفه ای و غیر استاندارد است.

MahdiHD بازدید : 115 چهارشنبه 24 تیر 1394 نظرات (0)

به منظور لینک دادن به فایل های سی اس اس (CSS) که External یا خارجی هستند می بایست به صورت زیر عمل کرد:

how to make a css file

همانطور که در تصویر فوق ملاحظه می شود فولدری تحت عنوان my site به معنی "سایت من" ایجاد کرده ایم و داخل آن فولدرهای متعددی برای تصاویر، صفحات مختلف سایت و منابع در نظر گرفته ایم. علاوه بر این فولدری تحت عنوان css ایجاد کرده ایم که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است. داخل  این فولدر فایلی تحت عنوان main.css ایجاد کرده ایم. به خاطر داشته باشیم که نام این فایل دلخواه است اما پسوند آن حتماً می بایست css باشد (در انتخاب نام فایل دقت داشته باشیم که از Space و علائم استفاده نکنیم. برای مجزا سازی بخش های مختلف نام های چند بخشی می توان از علائم – و _ استفاده کرد).
در ادامه می بایست از داخل فایل اصلی سایت که index.html نام دارد به فایل main.css خود لینک دهیم. برای این منظور این فایل را در یک ویرایشگر متن مثل Notepad یا ++Notepad و ... باز می کنیم (لازم به ذکر است تعداد نرم افزارهای بسیاری برای ویرایش کدهای اچ تی ام ال (HTML) و سی اس اس (CSS) وجود دارد):

?
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body></body>
</html>

همانطور که در کد فوق ملاحظه می شود حداقل کدهای مورد نیاز برای یک سند اچ تی ام ال (HTML) را وارد ویرایشگر متن کرده ایم. حال برای آنکه بتوانیم به فایل main.css لینک دهیم می بایست داخل تگ <head> و <head/> از تگ جدیدی تحت عنوان <link> استفاده کنیم (لازم به ذکر است که این تگ نیاز به تگ پایانی ندارد).
داخل این تگ از Attribute یی تحت عنوان type به معنی "نوع" استفاده کرده و از آنجا که می خواهیم این تگ را برای یک فایل سی اس اس (CSS) مورد استفاده قرار دهیم می بایست مقدار آن را برابر با text/css قرار دهیم. سپس از Attribute دیگری تحت عنوان rel که مخفف واژه Relation به معنی "رابطه" است استفاده کرده و مقدار آن را برابر با stylesheet قرار می دهیم. در نهایت می بایست به فایل css خود لینک دهیم که برای این کار از Attribute یی تحت عنوان href که مخفف واژگان Hypertext Reference است استفاده کرده و مقدار آن را برابر با آدرس فایل main.css قرار می دهیم. در واقع از آنجا که فایل main.css داخل فولدری تحت عنوان css است از اینرو ابتدا نام فولدر css را نوشته سپس یک / قرار داده و نام فایل خود را می نویسیم. از این پس هر کدی که داخل فایل main.css بنویسیم، در سند اچ تی ام ال (HTML) ما که index.html نام دارد اعمال خواهد شد.

MahdiHD بازدید : 91 چهارشنبه 24 تیر 1394 نظرات (0)

کدهای سی اس اس (CSS) از دو بخش کلی تشکیل شده اند که عبارتند از Selector و Declaration. برای روشن شدن این دو اصطلاح تصویر زیر را مد نظر قرار خواهیم داد:

css syntax

حرف p که با یک بیضی قرمز رنگ مشخص شده است اصطلاحاً Selector نامیده می شود. در واقع این Selector کلیه تگ های <p> را در سند اچ تی ام ال (HTML) تحت تاثیر قرار می دهد. بخشی از کد که با یک مستطیل سبز رنگ مشخص شده است اصطلاحاً Declaration نامیده می شود که خود حاوی عناصر مختلفی است (لازم به ذکر است که هر Declaration با علامت { آغاز شده و با علامت } پایان می یابد).
داخل Declaration دو کلمه color و font-size با مستطیل های آبی رنگ مشخص شده اند که اصطلاحاً Property نامیده می شوند. کاری که Property ها انجام می دهند این است که ویژگی های مختلفی همچون رنگ، نوع، اندازه و ... را به یک Selector اختصاص می دهند. پس از هر Property یک علامت : قرار گرفته سپس مقداری در نظر گرفته می شود که اصطلاحاً Value نامیده می شود. بعد از قرار گرفتن Value هم می بایست حتماً یک علامت ; قرار داد تا کد تکمیل شود. به خاطر داشته باشیم که در هر Declaration به هر تعداد که بخواهیم می توانیم Property و Value مرتبط با Selector بنویسیم.
به خاطر داشته باشیم که Space یا "فضای خالی" در کدهای سی اس اس (CSS) در برخی جاها تاثیر داشته و در برخی جاها هم بدون تاثیر است. به عبارت دیگر می توان کدهای سی اس اس (CSS) فوق را به صورت زیر هم نوشت چرا که در مورد کد فوق حذف فضاهای سفید از کد هیچ گونه تاثیری در روند اجرای کدهای سی اس اس (CSS) ندارد (در ادامه آموزش ها، جاهایی که قرار دادن Space مشکل ایجاد می کند را بیشتر توضیح خواهیم داد):

css syntax form

MahdiHD بازدید : 591 چهارشنبه 24 تیر 1394 نظرات (0)

css

زمانیکه زبان سی اس اس (CSS) بوجود نیامده بود، هر مرورگری دارای قواعد مختص به خود برای نمایش تگ های اچ تی ام ال (HTML) بود. بنابراین می توانستیم این انتظار را داشته باشیم که یک وب سایت در مرورگر الف با ظاهر به مراتب متفاوت تری نسب به مرورگر ب به نمایش در آید.
بالاخره به خاطر وجود این ناهماهنگی ها در سال 1996 نسخه اول زبان سی اس اس (CSS) تحت عنوان CSS 1.0 ایجاد شد و در سال 1998 هم نسخه CSS 2.0 به بازار عرضه شد. سپس در سال 2004 با اعمال برخی بازنگری ها در کدهای سی اس اس، نسخه CSS 2.1 شکل گرفت و در نهایت در سال 2011 با رفع برخی مشکلات این نسخه، مجدد تحت همین عنوان به دنیا عرضه شد و این نسخه از سی اس اس (CSS) همان نسخه ای است که طراحان وب با آن سر و کار دارند.
با توجه به سرعت گسترش وب و همچنین ایجاد وب اپلیکیشن ها و دستگاه های موبایل نیاز به نسخه جدیدی از سی اس اس بود که می بایست رویکردی کاملاً متفاوت را اتخاذ می کرد. از این رو نسخه CSS 3 ایجاد شد که هنوز هم در حال توسعه و تکمیل است.

MahdiHD بازدید : 139 چهارشنبه 24 تیر 1394 نظرات (0)

به عبارت ساده سی اس اس (CSS) زبانی است که با استفاده از آن می توان ظاهر کدهای زبان های Markupیی همچون اچ تی ام ال را تغییر داد. در واقع اچ تی ام ال (HTML) ساختار یک صفحه از وب سایت را ایجاد می کند و این در حالی است که سی اس اس (CSS) نحوه به نمایش در آمدن عناصر مختلف زبان اچ تی ام ال (HTML) را مشخص می سازد:

the relationship between html and css

برای روشن شدن مطلب، زبان اچ تی ام ال (HTML) را به اسکلت یک ساختمان تشبیه می کنیم. همانطور که در تصویر فوق می بینیم اسکلت ساختمان عاری از هرگونه زیبایی ظاهری فقط چهارچوب اصلی ساختمان را مشخص می سازد. در سمت چپ، همان سازه را می بینیم که با اعمال قوانین سی اس اس (CSS) ظاهری متفاوت به خود گرفته است. همانطور که در سمت چپ تصویر می بینیم با اعمال سه سری متفاوت از قوانین سی اس اس (CSS) توانسته ایم ساختاری یکسان را به سه مدل مختلف  نمایش دهیم.
زبان CSS مخفف واژگان Cascading Style Sheet به معنی "الگوهای آبشاری" است. علت اختصاص صفت Cascading به معنی "آبشاری" به این زبان این است که قوانین این زبان به صورت آبشاری یا از بالا به پایین اعمال می شوند. برای روشن شدن این مسئله ابتدا نیاز است تا راه های مختلفی که از آن طریق می توان کدهای سی اس اس (CSS) را روی یک سند اچ تی ام ال (HTML) اعمال کرد مورد بررسی قرار دهیم:
به طور کلی سه راه برای استفاده از کدهای سی اس اس در یک سند اچ تی ام ال وجود دارد که عبارتند از:
1.    Inline: منظور از این اصطلاح این است که می توان کدهای سی اس اس (CSS) را در قالب Attribute، داخل تگ های اچ تی ام ال (HTML) استفاده کرد. برای روشن شدن این مطلب کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
   </head>
   
   <body>
       <p style="font-family:Tahoma; font-size:20px;">این یک پاراگراف است</p>
   </body>
</html>

همانطور که می بینیم داخل تگ آغازین <p> کلیدواژه style را نوشته و یک علامت مساوی مقابل آن قرار می دهیم. سپس داخل علامت های "   " به هر تعداد Property که بخواهیم می توانیم مورد استفاده قرار دهیم و آن ها را با یک فاصله از یکدیگر جدا می سازیم. تا حد ممکن استفاده از این نوع نوشتن کدهای سی اس اس (CSS) توصیه نمی شود چرا که اگر بخواهیم روزی مقادیر یک تگ را تغییر دهیم، می بایست شروع به ویرایش کلیه کدهای سی اس اس (CSS) در کلیه فایل های اچ تی ام ال (HTML) نماییم.
2.    Internal: منظور از این اصطلاح این است که می توان کلیه کدهای سی اس اس (CSS) را در تگ <head> یک سند اچ تی ام ال (HTML) نوشت:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <style>
           body{
               background-color:#fff;
           }
           p {
               font-family:Tahoma;
                   font-size:20px;
           }
       </style>
   </head>
   
   <body>
       <p>این یک پاراگراف است</p>
   </body>
</html>

در نسخه های قبلی اچ تی ام ال (HTML) برای تگ <style> می بایست از Attribute یی تحت عنوان type استفاده می کردیم اما در نسخه 5 اچ تی ام ال دیگری نیازی به این Attribute نیست و فقط کافی است تا تگ های <style> و <style/> را داخل تگ <head> و <head/> بنویسیم.
همانطور که در کد فوق می بینیم، Selector ها یا همان body و p و ... را به صورت مجزا از یکدیگر نوشته و مقادیر مرتبط با هر یک از آن ها را داخل علامت های {} نوشته ایم.
به طور کلی این نوع نوشتن کدهای سی اس اس (CSS) نسبت به روش Inline به مراتب بهتر است اما این در حالی است که این نوع کدنویسی فقط برای تگ های یک صفحه از اچ تی ام ال (HTML) مناسب هستند و اگر بخواهیم کدهایی بنویسیم که برای کل سایت مناسب باشند می بایست روش سوم را مد نظر قرار دهیم.
3.    External: منظور از این اصطلاح این است که می توان کلیه کدهای سی اس اس (CSS) را داخل فایلی با پسوند css قرار داد سپس در تگ <head> سند اچ تی ام ال (HTML) خود به آن فایل لینک داد. برای این منظور یک فایل جدیدی ساخته و حتماً پسوند آن را css. قرار می دهیم. به طور مثال در این آموزش نام main.css را در نظر می گیریم. سپس کدهای سی اس اس (CSS) خود را به صورت زیر وارد آن می کنیم:

?
1
2
3
4
5
6
7
8
9
body {
   font-family:Tahoma;
}
p {
   font-size:20px;
}
h2 {
   background-color:#fff;
}

حال فایل اچ تی ام ال را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="/css/main.css">
   </head>
   
   <body>
       <p>این یک پاراگراف است</p>
   </body>
</html>

همانطور که در کد فوق می بینیم، داخل تگ <head> و <head/> از تگ دیگری تحت عنوان <link> استفاده کرده ایم. داخل تگ <link> از سه Attribute مختلف تحت عناوین type، rel و href استفاده کرده ایم. لازم به ذکر است که در نسخه 5 اچ تی ام ال (HTML) نیازی به type نیست اما اگر بخواهیم از نسخه های قبلی اچ تی ام ال استفاده کنیم می بایست از این Attribute استفاده کرد. وظیفه href این است که آدرس فایل سی اس اس را به فایل اچ تی ام ال معرفی می کند. rel مخفف واژه relationship به معنی "رابطه" است. مقداری که برای این Attribute می بایست مد نظر قرار دهیم stylesheet است (لازم به ذکر است که تگ <link> نیاز به تگ پایانی </link> ندارد).
از این پس حتی اگر سایت ما حاوی یکصد صفحه مختلف باشد، فقط کافی است تا با قرار دادن تگ <link> در بخش <head> هر فایل، کدهای سی اس اس (CSS) را در آن صفحه اعمال کرد و چنانچه به طور مثال بخواهیم یک تغییر کوچک ایجاد کنیم، فقط کافی است تا آن تغییر را در main.css اعمال کنیم و از آن پس در کلیه فایل های اچ تی ام ال (HTML) سایت، آن 10111213039 , 80167643تغییر اعمال خواهد شد.
راه کار دومی که برای برقراری ارتباط مابین فایل اچ تی ام ال (HTML) و سی اس اس (CSS) وجود دارد استفاده از دستور import است. برای این منظور کد زیر را وارد فایل اچ تی ام ال (HTML) می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
<!--
       <link type="text/css" rel="stylesheet" href="/css/main.css">
-->
       <style>
       @import url("css/main.css");
       </style>
   </head>
   
   <body>
       <p>این یک پاراگراف است</p>
   </body>
</html>

همانطور که در کد فوق می بینیم، ابتدا تگ <link> را کامنت کرده ایم سپس در تگ <head> ابتدا تگ های <style> و <style/> را نوشته و علامت @ را قرار می دهیم و بلافاصله بعد از آن کلید واژه import را می نویسیم و سپس یک فاصله قرار می دهیم. در نهایت دستور url را نوشته و داخل پرانتز آدرس فایل سی اس اس خود را می نویسیم. لازم به ذکر است که استفاده از تگ <link> به مراتب رایج تر از دستور import@ است.
توجه داشته باشیم که تگ های زبان اچ تی ام ال (HTML) ابتدا به سراغ کدهای اصطلاحاً External سی اس اس (CSS) می روند و پس از آن به سراغ کدهای Internal رفته و در نهایت کدهای سی اس اس (CSS) از نوع Inline را مورد استفاده قرار می دهند. فرض کنیم که در یک فایل External رنگ تگ <p> را به رنگ سبز در آورده ایم و در کدهای Internal رنگ همین تگ را به آبی تغییر داده ایم و در نهایت در کدهای Inline رنگ را به سفید تبدیل کرده ایم. در چنین شرایطی اچ تی ام ال (HTML) رنگ سفید را مد نظر قرار خواهد داد.
از دیگر کاربردهای زبان سی اس اس (CSS) می توان به نحوه نمایش صفحات اچ تی ام ال (HTML) در نمایشگرهای مختلف اشاره کرد. در واقع با استفاده از فایل های سی اس اس (CSS) مختلف می توان این امکان را بوجود آورد که صفحات وب سایت ما در دستگاه های مختلفی همچون مانیتورهای بسیار بزرگ، تبلت و حتی موبایل با ظاهری متفاوت به نمایش در آید. علاوه بر این می توان با اختصاص یک فایل سی اس اس (CSS) مجزا این امکان را بوجود آورد که اگر کاربری خواست صفحات وب سایت ما را پرینت کند، صفحات وب سایت به شکل یک کتاب پرینت شوند.
برای روشن شدن مطالب فوق وب سایت زیر را در نظر می گیریم:

responsive design with css

با وارد کردن آدرس اینجا در مرورگر صفحه فوق را مشاهده خواهیم کرد. حال اگر همین آدرس را در مرورگر یک تلفن همراه که صفحه نمایش به مراتب کوچک تری نسبت به یک مرورگر کامپیوتر دارد وارد کنیم با تصویر زیر مواجه خواهیم شد:

responsive design with css for mobile

می بینیم که طراح این سایت با استفاده از کدهای سی اس اس (CSS) مجزا برای دستگاه هایی با نمایشگر خیلی کوچک همچون موبایل، ساختار متفاوتی را برای سایت در نظر گرفته است بطوریکه عناصر روی سایت بدون آنکه به هم ریخته به نظر برسند با ظاهری زیبا و متفاوت در معرض دید کاربران قرار خواهد گرفت.

MahdiHD بازدید : 115 چهارشنبه 24 تیر 1394 نظرات (0)

آموزش CSS

زبانCSSاین امکان را به طراحان سایت می دهد تا کدهای اچ تی ام ال خود را از لحاظ بصری زیبا و چشمگیر کنند. پس از فراگیری نحوه استفاده از تگ های HTML، اساسی ترین گام یادگیری استفاده از کدهای سی اس اس است چرا که امروزه کمتر سایتی را می توان یافت که صرفاً با استفاده از زبان اچ تی ام ال طراحی شده باشد.

CSSکه مخفف واژگانCascading Style Sheetsبه معنای "الگو های آبشاری" است را می توان برای طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شودبه کار برد.

سی اس اس به زبان ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها)، زیبایی جهت طراحي انواع سبک يا استايل براي صفحه هاي وب مورد استفاده قرار می گیرد.

با استفاده از کدهايCSS همچون font-size، font-weight، font-style، font-variant،text-align، border-radius، background-color، box-shadow و ... ميتوان براي صفحه وب طرح‌ها و قالب‌هاي متنوعي طراحي کرد.

از مهمترین مزایایCSSمیتوان به انعطاف پذیری بالای کدهای سی اس اس، کم حجم کردن فایل های HTML و بالتبع آن پایین آمدن مدت زمان بارگذاری صفحه، هماهنگی راحت تر نمایش ظاهر سایت در مرورگر های مختلف، امکان طراحی سایت به صورت Responsive یا "واکنش گرا" و ... نام برد.

امیدواریم با مطالعه این سری از آموزش های مقدماتی سی اس اس که در آن ها سعی شده با زبانی گویا و کاملاً ساده مفاهیم پیچیده CSS توضیح داده شوند، به علاقمندان به فراگیری این زبان کمک کرده باشیم تا بتوانند سایت هایی جذاب طراحی کنند.

منبع این سری از آموزش ها نت شهر است

MahdiHD بازدید : 94 چهارشنبه 24 تیر 1394 نظرات (0)

به منظور نامگذاری متغیرها بهتر است از علامت – استفاده نکنیم. اگر چه که استفاده از Dash در نامگذاری متغیرها اشکالی ایجاد نمی کند، اما این در حالی است که ممکن است با علامت تفریق اشتباه گرفته شده و موجب سردرگمی شود.
از سوی دیگر استفاده از چندین _ در ابتدای نام متغیرها روش خیلی خوبی نیست چرا که وقتی در آینده بخواهیم به آن متغیر رجوع کنیم فهمیدن این نکته که $___name دارای چند علامت _ است کار دشواری خواهد بود.
از آنجا که برخی متغیرهای از پیش تعریف شده در خود زبان پی اچ پی با _ شروع می شوند، بهتر است در نامگذاری متغیرهایی که خود ایجاد می کنیم از علامت _ استفاده نکنیم تا از این طریق بتوانیم وجه تمایزی مابین متغیرهای خود زبان پی اچ پی و متغیرهای ایجاد شده توسط خودمان قائل شویم.
علاوه بر موارد فوق، روشی که در این سری از آموزش ها برای نامگذاری متغیرها مورد استفاده قرار می گیرد روش نامگذای camelCase است. در واقع این روش منجر به راحت تر خواندن اسامی متغیرها در زبان پی اچ پی می شود. زیرا اگر به طور مثال نام  خود را به صورت عادی و به شکل userage$ بنویسیم، به دشواری خواهیم توانست آن را بخوانیم اما اگر آن را به صورت userName$ بنویسیم اینکار موجب راحت تر خوانده شدن این متغیر می شود. به عبارت دیگر حرف اول کلمه دوم را به صورت بزرگ می نویسیم (در زبان انگلیسی واژه Camel به معنای "شتر" است و این سبک نوشتن به این خاطر به camelCase معروف شده است که نامی که ما در نظر می گیریم یک شمایی از کوهان شتر را خواهد داشت).

MahdiHD بازدید : 110 چهارشنبه 24 تیر 1394 نظرات (0)

در نامگذاری متغیرها در زبان پی اچ پی می بایست موارد زیر را مد نظر قرار دهیم:
- در زبان پی اچ پی برای ایجاد یک متغیر ابتدا می بایست علامت $ را بنویسیم (برای تایپ این علامت بایستی پس از پایین نگه داشتن دکمه Shift دکمه شماره 4 را فشار دهیم).
- پس از این علامت می توان از کلیه حروف ، _  و یا - استفاده کرد (لازم به ذکر است که حرف اول هم می توان حرف بزرگ باشد و حرف کوچک).
- در ابتدای نام متغیر می توان از بیش از یک _ نیز استفاده کرد. به عبارت دیگر می توان  از دو علامت _ پشت سر هم به صورت __ استفاده کرد.
- به خاطر داشته باشیم که اولین کاراکتر نام متغیر به هیچ وجه نمی تواند یک عدد باشد.
- سپس در ادامه می توان از اعداد، حروف، علامت – و علامت _ استفاده کرد.
- در حین نامگذاری متغیرها به هیچ وجه نمی بایست از فاصله استفاده کرد.
- متغیرها در زبان پی اچ پی Case Sensitive هستند. به عبارت دیگر متغیر name$ با متغیر Name$ فرق می کند (منظور از اصطلاح Case Sensitive این است زبان پی اچ پی به حروف بزرگ و کوچک حساس است و دو متغیر با نامی یکسان اما حروف بزرگ و کوچک ، از دید زبان پی اچ پی دو متغیر متفاوت تلقی می شوند.)
- نام متغیرها می بایست توصیف کننده مقداری باشد که آن متغیر در خود ذخیره می سازد. به طور مثال اگر متغیری قرار است مقدار سن کاربر را در خود ذخیره سازد، بهتر است نامی همچون userAge$ برای آن متغیر در نظر گرفته شود. چنانچه نامی همچون number$ را در نظر بگیریم مسلماً در پروژه های بزرگ دچار سر در گمی خواهیم شد.
- برای اختصاص مقداری به یک متغیر بایستی از علامت مساوی استفاده کرد.
- برای ذخیره سازی string ها یا "رشته ها" در یک متغیر، می بایست پس از علامت مساوی از علامت "   " استفاده کرد.
- پس از اختصاص مقداری به یک متغیر، می بایست از علامت ; استفاده کرد.

MahdiHD بازدید : 94 چهارشنبه 24 تیر 1394 نظرات (0)

برای درک بهتر این موضوع می توان متغیرها را به چیزهایی در دنیای واقعی تشبیه کرد که مسئول ذخیره سازی و یا محافظت چیزهای دیگر هستند. به عنوان مثال می توان کابینت آشپزخانه را در نظر بگیریم. در کابینت هم می توان لیوان و استکان نگهداری کرد و هم یک کاسه و بشقاب اما این در حالی است که به هیچ وجه نمی توان گوشت را در کابینت ذخیره کرد:

what-is-a-variable-1

در واقع برای نگهداری گوشت بایستی از فریزر استفاده کرد. از سوی دیگر اگر بخواهیم اشیاء قیمتی خود مثل طلا و اسناد مهم را نگهداری کنیم بایستی از گاو صندوق استفاده کنیم:

what-is-a-variable-2

متغیرها در زبان های برنامه نویسی را می توان به عنوان ظرفی قلمداد کرد که این وظیفه را دارند تا Value ها یا مقادیر خاصی را در خود ذخیره سازند. از آنجا که "متغیر" به عنوان نام برای چنین ظرفی در نظر گرفته شده است، می توان فهمید که مقداری که در این ظرف ذخیره می شود "قابل تغییر یا متغیر" است. به عبارت دیگر همانطور که می توان چیزهای گوناگونی داخل یک گاو صندوق قرار دارد، متغیرها هم می توانند چیزهای گوناگونی را داخل خود قرار دهند.
به عنوان مثال اگر بخواهیم مقادیری که کاربران در یک فرم اینترنتی وارد می نمایند را ذخیره سازیم بایستی از متغیرها استفاده کنیم. مثلاً برای ذخیره سازی نام و نام خانوادگی کاربر از یک جنس به خصوص از متغیرها استفاده می شود و برای ذخیره سازی این نکته که آیا کاربر بالای 18 سال است یا زیر 18 سال می بایست از متغیر دیگری استفاده کرد.

MahdiHD بازدید : 108 چهارشنبه 24 تیر 1394 نظرات (0)

در برنامه نویسی همواره زمان هایی برای برنامه نویسان پیش می آید که نیاز دارند چیزهایی به کد خود اضافه نمایند که فقط جهت یادآوری خود ایشان در آینده و یا جهت اطلاع دیگر برنامه نویسان باشد. برای این منظور از مفهومی تحت عنوان Comment استفاده می شود (لازم به ذکر است که معادل فارسی واژه Comment به معنی "نظر دادن" است). به طور کلی با قرار دادن کامنت ها در کد خود می توانیم این امکان را برای خود در آینده ایجاد کنیم که متوجه شویم کدی که نوشته ایم به کدام بخش از وب اپلیکیشن ما مرتبط است. برای آشنایی بیشتر با کامنت ها در زبان پی اچ پی، کد خود را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php
        //This is my first PHP statement
        echo "This is a PHP text";
    ?>
</body>
 
</html>

همانطور که در کد فوق می بینیم با قرار دادن دو علامت / یا اصطلاحاً Slash و نوشتن عبارت This is my first PHP statement به معنی "این اولین دستور پی اچ پی من است" می بینیم که این دستور به رنگ سبز در آمده است. در نرم افزار ++ Notepad کلیه کامنت های پی اچ پی به رنگ سبز در خواهند آمد و این در حالی است که ممکن است در دیگر ویرایشگرهای متنی کامنت ها با رنگ دیگری نمایش داده شوند.
به طور کلی زمانی که وب اپلیکیشن پی اچ پی با این فایل رو به رو می شود، با دیدن دو علامت // متوجه می شود که با یک کامنت رو به رو است بنابراین از Render کردن یا تفسیر کردن این خط از کد امتناع خواهد ورزید و آن را نادیده خواهد گرفت:

comments in php 1

پس از ذخیره کردن فایل خود و Refresh کردن فایرفاکس خواهیم دید که این کامنت به هیچ وجه در خروجی وب اپلیکیشن ما نمایش داده نخواهد شد:

comments in php 2

اکنون چنانچه به Source Code برنامه هم توجه کنیم می بینیم که این کامنت ها زمانی که وب سرور آپاچی کدهای پی اچ پی را به فرمت اچ تی ام ال تبدیل می کند از دستور کارش حذف کرده بنابراین همانطور که در تصویر فوق ملاحظه می شود در Source Code هم هیچ گونه کامنتی نخواهیم دید.
به عنوان راه کار جایگزین می توان برای قرار دادن کامنت ها در پی اچ پی به جای // از علامت # هم استفاده کرد (لازم به ذکر است که این علامت اصطلاحاً Pound Sign یا Hash Tag نامیده می شود). برای این منظور کد فوق را به صورت زیر بازنویسی می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php
        #This is my first PHP statement
        echo "This is a PHP text";
    ?>
</body>
 
</html>

می بینیم که باز هم با قرار دادن علامت # رنگ کلیه نوشته های پس از آن به رنگ سبز در آمده و تبدیل به کامنت می شوند.
در صورتیکه بخواهیم چندین خط را به کامنت تبدیل کنیم می توانیم همان طور که در کد زیر مشخص است در ابتدای هر خط دو علامت // قرار دهیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php
        // This is comment 1
        // This is comment 2
        // This is comment 3
        echo "This is a PHP text";
    ?>
</body>
 
</html>

می بینیم که هر سه خط از کد تبدیل به کامنت شده اند. راه کار جایگزینی وجود دارد که بتوانیم از آن طریق هر سه خط از کد فوق را بدون استفاده از // تبدیل به کامنت کنیم. برای روشن شدن مطلب، کد فوق را به صورت زیر بازنویسی می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php
        /* This is comment 1
           This is comment 2
           This is comment 3 */
        echo "This is a PHP text";
    ?>
</body>
 
</html>
 
</html>

می بینیم که با قرار دادن یک علامت */ در ابتدای جایی که می خواهیم کامنت شروع شود و قرار دادن یک علامت /* در جایی که می خواهیم کامنت ما تمام شود قادر خواهیم گشت به هر تعداد خطی که بخواهیم را کامنت نماییم. در واقع به این نوع از کامنت ها چند خطی گفته می شود چرا که بدون اینکه نیاز باشد برای هر خط از کد // قرار دهیم، خواهیم توانست به سادگی در ابتدای خطی که می خواهیم کامنت شروع شود علامت */ را نوشته و چند خط بعد تر علامت پایانی /* را نوشته و به هر تعداد خط را که بخواهیم کامنت کنیم.

MahdiHD بازدید : 112 چهارشنبه 24 تیر 1394 نظرات (0)

در صورت کار با Function های echo و print نیاز است تا با اصطلاحی تحت عنوان Concatenation آشنا شویم. معنی لغوی این واژه "الحاق" است و این در حالی است که در زبان پی اچ پی هم به منظور الحاق یا اتصال دو Value به یکدیگر از این مفهوم استفاده می شود. برای روشن شدن این مسئله کد فوق را به صورت زیر بازنویسی می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php echo "This is a PHP text" . "This is text 2" ?>
</body>
 
</html>

همانطور که می بینیم برای الحاق کردن دو Value به یکدیگر صرفاً نیاز است تا یک نقطه قرار داده و شروع به نوشتن مقدار الحاقی نماییم (به خاطر داشته باشیم که برای الحاق کردن دو Value به یکدگیر بایستی حتماً Value اول داخل دو علامت " " قرار گرفته سپس یک نقطه قرار داده و مجدد Value بعدی هم داخل دو علامت " " قرار گیرد):

php print statement 4

پس اجرای مجدد می بینیم که Value دوم که با بیضی سبز رنگ مشخص شده است به Value اول که با بیضی قرمز رنگ مشخص شده است الحاق شده است.
در پایان لازم به ذکر است که به هر تعداد دستور <?php ?> که بخواهیم می توانیم داخل کد اچ تی ام ال خود بگنجانیم. برای مثال در کد زیر چهار دستور <?php ?> را داخل صفحه وب سایت خود قرار داده ایم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php echo "This is my first PHP text" ?>
    <?php echo "This is my second PHP text" ?>
    <?php echo "This is my third PHP text" ?>
    <?php echo "This is my forth PHP text" ?>
</body>
 
</html>

اکنون پس از Refresh کردن فایرفاکس چهار خروجی پی اچ پی مشاهده خواهیم کرد:

php print statement 5

می بینیم که هر چهار کد پی اچ پی به نمایش در آمده اند اما این در حالی است که خروجی های پی اچ پی یکی پس از دیگری قرار گرفته اند. برای آنکه بتوانیم یک خط از کد پی اچ پی را به خط بعد منتقل کنیم می توانیم از تگ معروف <br/> که در اچ تی ام ال استفاده می شود استفاده کنیم. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php echo "This is my first PHP text<br/>" ?>
    <?php echo "This is my second PHP text<br/>" ?>
    <?php echo "This is my third PHP text<br/>" ?>
    <?php echo "This is my forth PHP text<br/>" ?>
</body>
 
</html>

حال پس از ذخیره کردن فایل خود مجدد فایرفاکس را Refresh می کنیم:

php print statement 6

می بینیم که هر خط از کد پی اچ پی با استفاده از تگ <br/> به خط بعد منتقل شده است(نکته ای که همواره در مورد نحوه استفاده از تگ های اپ تی ام ال داخل کدهای پی اچ پی می بایست مد نظر قرار داده شود این است که این تگ ها می بایست داخل علامت علامت های " " قرار گیرند).

MahdiHD بازدید : 105 چهارشنبه 24 تیر 1394 نظرات (0)

همانطور که می دانیم به منظور نمایش دادن یک عبارت در یک سند اچ تی ام ای فقط کافی است تا عبارت مد نظر را داخل تگ های <p> </p> قرار دهیم و عبارت مد نظر ما در قالب یک پاراگراف نمایش داده می شود. به منظور نمایش دادن همین عبارت در زبان پی اچ پی می بایست از دستور echo استفاده کنیم (توجه داشته باشیم که حرف اول این دستور به صورت کوچک نوشته می شود):

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <html>
 
    <head>
        <title> My Website </title>
    </head>
 
    <body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <? php echo "This is a PHP text" ?>
    </body>
 
</html>

در واقع پس از نوشتن تگ آغازین php ?> نوشتن کدهای پی اچ پی خود را آغاز می کنیم. سپس کلید واژه echo را می نویسیم. echo یکی از Function های زبان پی اچ پی است. به عبارت دیگر Function های زبان پی اچ پی این وظیفه را دارند تا کاری انجام دهند. به طور مثال وظیفه Function یی تحت عنوان echo این است که عبارت یا جمله ای را به نمایش در آورد. سپس نیاز داریم تا یک Value یا مقداری را برای این Function در نظر بگیریم. برای این منظور مقدار مد نظر خود را برای echo پس از قرار دادن یک فاصله پس از echo مابین دو علامت “ “ قرار می دهیم. تا اینجای کار نوشتن این Statement یا "دستور" پی اچ پی به اتمام نرسیده است چرا که هنوز از علامت ; در انتهای کد خود استفاده نکرده ایم. لازم به ذکر است که علامت ; به عنوان یک جدا کننده در زبان پی اچ پی قلمداد می شود. به عبارت دیگر زمانیکه کدهای پی اچ پی تفسیر می شوند، به محض مشاهده یک علامت ; وب اپلیکیشن پی اچ پی متوجه خواهد شد که به انتهای یک دستور رسیده است.
در واقع با نوشتن یک Function که در مثال فوق echo است و سپس در نظر گرفتن یک Value برای آن و در نهایت قرار دادن یک علامت ; در انتها خواهیم توانست یک دستور پی اچ پی تولید کنیم که به درستی اجرا خواهد شد.
در این مرحله از کار می توانیم فایل خود را ذخیره کرده و مجدد آن را از طریق localhost در مرورگر اجرا نماییم:

php print statement 1

می بینیم که علاوه بر کدهای اچ تی ام ال، کدهای پی اچ پی هم به نمایش در آمده اند. اگر به Source Code این فایل توجه کنیم همانطور که قبلاً توضیح داده شده فقط و فقط کدهای اچ تی ام ال خواهیم دید:

php print statement 2

همانطور که در تصویر فوق مشخص است، عبارتی که در قالب دستور echo در بخش پی اچ پی نوشته بودیم توسط وب سرور آپاچی به کدهای اچ تی ام ال تبدیل شده و برای مرورگر ارسال می شوند. بنابراین ما هیچ گونه کد پی اچ پی در Source Code خود نمی بینیم.
لازم به ذکر است جزو قوانین زبان پی اچ پی است که حروف بزرگ و کوچک در این زبان در مورد echo محلی از اعراب ندارد. به عبارت دیگر هیچ فرقی نمی کند که داخل کد خود بنویسیم echo, Echo, ECHO, eCHo زیرا کلیه اینها توسط وب اپلیکیشن پی اچ پی قابل تفسیر هستند.
لازم به ذکر است که مقادیر echo را می توان داخل دو علامت ‘ ‘ نیز قرار داد:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php echo 'This is a PHP text' ?>
</body>
 
</html>

همانطور که می بینیم عبارت This is a PHP text داخل دو علامت ‘ ‘ قرار گرفته است و در صورتیکه فایرفاکس را Refresh کنیم نتیجه مشابهی خواهیم دید.
Function دیگری که همانند echo است print نام دارد. بنابراین اگر کد خود را به صورت زیر بازنویسی کنیم، خروجی برنامه هیچ تغییری نخواهد کرد:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php print 'This is a PHP text' ?>
</body>
 
</html>

اکنون مجدد فایرفاکس را Refresh می کنیم:

php print statement 3

می بینیم که خروجی برنامه یکسان خواهد بود. اگرچه Function های echo و print کار یکسانی را انجام می دهند، اما این در حالی است که echo نسبت به print در میان برنامه نویسان رایج تر است.

MahdiHD بازدید : 119 چهارشنبه 24 تیر 1394 نظرات (0)

در این مرحله از آموزش اشاره به این نکته ضروری است که کلیه کدهای پی اچ پی زمانیکه توسط وب سرور برای مرورگر کاربر فرستاده می شوند به کدهای اچ تی ام ال تبدیل می شوند. به عبارت دیگر در سمت سرور ما کدهای پی اچ پی را مشاهده خواهیم کرد اما این در حالی است که کاربر فقط و فقط کدهای اچ تی ام ال را در مرورگر خود مشاهده می کند و این کاری است که نرم افزار وب سرور آپاچی برای ما انجام می دهد. اگر  آموزش قبل را به خاطر آوریم، می بینیم که وقتی Source Code فایل index.php را مشاهده کردیم، فقط کدهای اچ تی ام ال دیدیم.
در واقع زمانیکه ما آدرسی به یک صفحه اچ تی ام ال را وارد مرورگر خود می کنیم، این دستور برای وب سرور ارسال شده و وب سرور پس از یافتن فایل مرتبط با صفحه اچ تی ام ال از روی هاست، آن فایل را در قالب پاسخی، مجدد برای کاربر ارسال می کند اما این در حالی است که وقتی ما به عنوان یک کاربر آدرس http://localhost/my_website/index.php را وارد مرورگر خود می کنیم (به عبارت دیگر به یک فایل پی اچ پی می خواهیم دست پیدا کنیم)، این دستور در قالبHTTP برای وب سرور ارسال می شود (منظور آپاچی است) و وب سرور به محض دیدن پسوند پی اچ پی می فهمد که با یک وب اپلیکیشن یا یک وب سایت دینامیک سر و کار دارد.
به طور کلی برای آنکه بتوانیم یک دستور پی اچ پی را اجرا کنیم اول نیاز است تا پسوند فایل ما حتما پی اچ پی باشد سپس کلیه دستورات پی اچ پی خود را داخل فایلی با پسوند پی اچ پی داخل تگ های php?> و <؟ قرار دهیم.
وب سرور آپاچی با دیدن کدهای اچ تی ام ال آنها را برای مرورگر کاربر به طور مستقیم ارسال می کند و اینکار آنقدر ادامه پیدا می کند تا به تگ آغازین php?> برسد. به محض دیدن این تگ متوجه می شود که دیگر نمی تواند مستقیماً دستورات داخل این تگ را برای مرورگر کاربر ارسال کند بنابراین دستوراتی که پس از این تگ قرار می گیرند را گرفته و تحویل وب اپلیکیشن پی اچ پی می دهد. حال وب اپلیکیشن پی اچ پی شروع به تفسیر کدهای دریافتی می کند و این کار آنقدر ادامه پیدا می کند تا وب سرور آپاچی به دستور <؟ برسد. در این مرحله وب سرور آپاچی متوجه می شود که کدهای پی اچ پی به پایان رسیده اند. از اینرو ارسال کدها به وب اپلیکیشن پی اچ پی به اتمام می رسد و وب سرور آپاچی منتظر می ماند تا وب اپلییکشن پی اچ پی کدهای پی اچ پی تفسیر شده را در اختیارش قرار دهد (در این مرحله ممکن است وب اپلیکیشن پی اچ پی به سراغ دیتابیس MySQL رفته تا اطلاعات مورد نیازی که در قالب دستور به دستش رسیده را پیدا کند).
آپاچی پس از دریافت دستورات پی اچ پی تفسیر شده آنها را به کدهای اچ تی ام ال تبدیل کرده و برای مرورگر کاربر ارسال می کند.
در نهایت وب سرور آپاچی پس از آنکه تگ <؟ را مشاهده کرد مجدد به سراغ کدهای اچ تی ام ال رفته و آنها را به صورت مستقیم برای مرورگر کاربر ارسال می کند.
حال که فهمیدم چرا در Source Code یک صفحه از وب سایت های دینامیک فقط و فقط کدهای اچ تی ام ال دیده می شوند، در آموزش بعد با یکی از دستورات ابتدایی اما در عین حال پر کاربرد زبان PHP آشنا خواهیم شد.

MahdiHD بازدید : 4973 چهارشنبه 24 تیر 1394 نظرات (0)

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


مفعول <  فعل <  فاعل

جالب است بدانیم که این قواعد گرامری در هر زبانی خاص آن زبان بوده و قواعد گرامری زبان های مختلف با یکدیگر فرق می کند. حال با دانستن واژگان مورد نیاز و آگاهی از قواعد زبان انگلیسی خواهیم توانست جمله ای صحیح تولید کنیم. برای مثال جمله زیر را در نظر می گیریم:


.I learn programming


در حقیقت در مثال فوق کلمه "I" فاعل است، کلمه "learn" فعل است و کلمه "programming" مفعول است. معنی جمله فوق "من برنامه نویسی یاد می گیرم" است. به طور کلی ما با دانستن قوانین حاکم بر زبان انگلیسی قادر خواهیم بود با دانستن تعدادی اسم و فعل و ... تعداد بی نهایت جمله تولید کنیم. سپس با ادغام این جملات خواهیم توانست یک کتاب کامل در مورد برنامه نویسی بنویسیم (لازم به ذکر است گاهی اوقات می توانیم از خیلی از این قواعد و دستورات ساخت جمله پیروی نکرده و جملاتی تولید کنیم که از لحاظ دستور صحیح نیستند اما این در حالی است که مخاطب ما منظورمان را خواهد فهمید. برای مثال عبارت"Programming I like" را در نظر بگیریم. اگر بخواهیم این جمله را به صورت واژه به واژه ترجمه کنیم با معنی "برنامه نویسی من دوست دارم" رو به رو می شویم. اگر چه که این جمله از لحاظ دستور گرامر زبان انگلیسی اشتباه است اما این در حالی است که اگر این جمله را برای یک شخص انگلیسی زبان بیان کنیم وی منظور ما را خواهد فهمید).
در زبان های برنامه نویسی هم قضیه دقیقاً به همین صورت است اما با یک تفاوت عمده. به عبارت دیگر در زبان های برنامه نویسی یکسری کلید واژه، متد، کلاس و ... وجود دارد که از پیش توسط طراحان زبان های برنامه نویسی ایجاد شده اند. جالب است بدانیم همانطور که در زبان های زنده دنیا واژگان جدید دائماً به لیست واژگان قبلی اضافه می گردند و تعدادی واژگان هم می میرند و دیگر مورد استفاده قرار نمی گیرند، در زبان های برنامه نویسی هم این امکان وجود دارد که کلید واژه ها، کلاس ها، متدهای جدید و به طور کلی API های جدید به نسخه های تکمیلی زبان برنامه نویسی مد نظر افزوده گردد (لازم به ذکر است که API مخفف واژگان Application Programming Interface است). علاوه بر این تعدادی قوانین نیز در هر زبان برنامه نویسی وجود دارد که برنامه نویس با دنبال نمودن آنها قادر خواهد بود تا دستورات قابل اجرایی را تولید کند. همانند زبان های زنده دنیا، قواعد حاکم بر هر زبان برنامه نویسی خاص خود آن زبان بوده و متفاوت از دیگر زبان های برنامه نویسی است.
یک برنامه نویس با آگاهی از کلید واژه ها، کلاس ها، متدها و ... در یک زبان برنامه نویسی و همچنین آگاهی از قواعد حاکم در آن زبان خواهد توانست با استفاده از اجزای تشکیل دهنده یک زبان برنامه نویسی تعداد بی نهایت دستور صحیح تولید کرده و با ادغام این دستورات برنامه ها و اپلیکیشن های پیچیده ای تولید کند.
اگر خاطرمان باشد پیش از این گفتیم که زبان های برنامه نویسی همانند زبان های زنده دنیا هستند اما با یک تفاوت عمده. گفتیم اگر در زبان انگلیسی اصول و قواعد ساخت جمله را دنبال نکنیم باز هم قادر خواهیم بود جملاتی ایجاد کنیم که اگر چه از لحاظ گرامری صحیح نیستند اما مخاطب منظور ما را خواهد فهمید. تفاوت عمده یک زبان برنامه نویسی با یک زبان زنده از اینجا ناشی می شود که در برنامه نویسی "به هیچ وجه" قادر نخواهیم بود اصول، قواعد و قوانین زبان های برنامه نویسی را زیر پا بگذاریم. به عبارت دیگر اگر این اصول را زیر پا بگذاریم اصلاً هیچ برنامه یا اپلیکیشنی اجرا نخواهد شد. به طور خلاصه زبان های برنامه نویسی آنقدر هم که تصور می کنیم با هوش نیستند که بتواند منظورمان را درک کنند.
امید است با تشبیهی که مابین یک زبان زنده و زبان های برنامه نویسی صورت دادیم، به اهمیت فراگیری اصول و قواعد زبان های برنامه نویسی پی برده و سعی کنیم به منظور تولید برنامه ها و اپلیکیشن های صحیح همواره این اصول و قواعد را مد نظر قرار دهیم.
اکنون با دانستن این مسئله، شروع به نوشتن اولین خط از کد به زبان پی اچ پی خواهیم کرد و کد خود را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php
     
    ?>
</body>
 
</html>

اولین قانون به کار گیری زبان پی اچ پی استفاده از دستور php?> است. به منظور اضافه کردن دستورات پی اچ پی داخل کدهای اچ تی ام ال نیاز است تا ابتدا علامت > را قرار داده و پس از آن یک علامت سوال قرار دهیم و عبارت php را بنویسیم (توجه داشته باشیم که این عبارت می بایست با حروف کوچک نوشته شوند). سپس برای آنکه بتوانیم دستورات خود را وارد کنیم چند خط فاصله قرار داده و کد  پی اچ پی خود را با قرار دادن یک علامت سوال دیگر و سپس علامت بزرگ تر به صورت <? به پایان می رسانیم. از این پس ما با یک صفحه وب سایت دینامیک رو به رو خواهیم بود. اکنون از این مرحله به بعد هر کدی که داخل این بخش نوشته شود توسط وب سرور دریافت شده و تحویل اپلیکیشن سرور پی اچ پی می گردد.
توجه داشته باشیم که در نسخه های ابتدایی تر به جای تگ php?> این امکان وجود داشت که از دستور ؟> نیز استفاده کرد اما این در حالی است که با استفاده از این دستورات ممکن است که در برخی مواقع وب اپلیکیشن ما اجرا شود اما به هیچ وجه اینکار توصیه نمی شود.
علاوه بر این با ویرایش کردن فایل php.ini این امکان را خواهیم داشت تا از Syntax زبان ASP نیز در کدهای پی اچ پی خود استفاده کنیم. به عبارت دیگر به جای <?       ?> می توان از <%       %> استفاده نمود اما این کار هم به هیچ وجه توصیه نمی شود و علت هم آن است که چنین ساختاری الزاماً همیشه کار نخواهد کرد چرا که ممکن است پس از قرار دادن این کدها روی سرور با این مسئله مواجه شویم که سرور امکان اجرای این فایل ها را به ندهد.
دستوری داخل زبان پی اچ پی وجود دارد که این امکان را به ما می دهد تا اطلاعاتی مرتبط با زبان پی اچ پی که روی سیستم عامل ما نصب است از قبیل نسخه آن و غیره را به ما نشان دهد. این دستور عبارت است از ;()phpinfo. حال کد فوق را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php
        phpinfo();
    ?>
</body>
 
</html>

نکته ای که در مورد دستورات پی اچ پی وجود دارد این است که نوشتن کد فوق به صورت زیر هیچ تاثیری در اجرای روند برنامه نخواهد داشت:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
    <?php phpinfo(); ?>
</body>
 
</html>

به عبارت دیگر وجود فاصله در قبل و بعد از کدهای پی اچ پی در زمان تفسیر کدها مد نظر قرار داده نمی شوند (البته لازم به ذکر است همانطور که در کد فوق ملاحظه می شود حتماً می بایست دستور <?php و کدی که پس از آن قرار می گیرد حداقل یک فاصله وجود داشته باشد. به عبارت دیگر هر دستور پی اچ پی می بایست از مابقی دستورات با استفاده از یک فاصله مجزا شده باشد.)
در این مرحله برنامه ما تکمیل شده است. با فشردن کلیدهای Ctrl + S برنامه خود را Save می کنیم. مجدد قصد داریم تا برنامه خود را اجرا کنیم برای این منظور به مرورگر فایرفاکس رفته و با زدن دکمه های Ctrl + R مرورگر را Refresh می کنیم تا کدهای جدید که وارد کرده ایم را نمایش دهد:

phpinfo function

 همانطور که می بینیم پس از Refresh کردن کدهای جدید پی اچ پی که وارد کردیم نمایش داده نمی شوند. در واقع همانطور که در تصویر فوق مشخص است، مسیر اجرای این فایل مستقیماً از روی درایو سی است و این در حالی است که هر موقع بخواهیم یک دستور پی اچ پی را در مرورگر اجرا کنیم، حتماً نیاز است تا آن را از طریق آدرس localhost اجرا کنیم.
برای این منظور ابتدا برنامه Wamp را اجرا کرده تا به صورت زیر در نوار پایین ویندوز نمایش داده شود:

running wamp on windows 8.1

در واقع با قرار گرفتن آیکان این نرم افزار و سبز شدن رنگ آن در نوار پایین ویندوز این اطمینان را خواهیم داشت که پی اچ پی، MySQL و آپاچی به درستی کار می کنند. مجدد به مرورگر فایرفاکس مراجعه کرده و همانطور که در تصویر زیر مشخص است آدرس مرتبط با فایل خود در localhost را وارد می کنیم:

running php code on wamp software

آدرس http://localhost/my_website/index.php را وارد می کنیم (منظور از این آدرس فولدری تحت عنوان my_website داخل فولدر www است که داخل دایرکتوری wamp قرار دارد). در این مرحله دکمه Enter را می فشاریم تا فایرفاکس به آدرس مد نظر رجوع کند (در واقع هرآنچه داخل فولدر www قرار گیرد از طریق آدرس http://localhost قابل دسترس خواهد بود):

1running php code on wamp software

می بینیم که این بار وب اپلیکیشن ما از روی localhost اجرا شده و دستور پی اچ پی را هم که وارد برنامه خود کردیم نمایش داده می شود. به طور مثال در تصویر فوق می بینیم که نسخه مرتبط با پی اچ پی نصب شده روی سیستم عامل به علاوه اطلاعات گسترده دیگری نمایش داده می شوند.
اکنون برای آنکه مجدد Source Code این صفحه را مشاهده کنیم، مطابق روشی که در قبل به آن اشاره شد عمل می کنیم:

phpinfo source code exmpale

می بینیم که دستور ;()phpinfo حاوی اطلاعات گسترده ای در خود می باشد که در Source Code نمایش داده شده اند. به عبارت دیگر دستور ;()phpinfo توسط وب سرور آپاچی به کدهای اچ تی ام ال تبدیل شده و در مرورگر نمایش داده می شوند و به همین دلیل هم هست که وقتی به Source Code نگاه می کنیم هیچ گونه کد و تگ مربوط به زبان پی اچ پی در آن نمی بینیم.

MahdiHD بازدید : 141 چهارشنبه 24 تیر 1394 نظرات (0)

اکنون قصد داریم تا فایلی که در آموزش قبل با پسوند اچ تی ام ال ایجاد کردیم را به یک فایل پی اچ پی تبدیل کنیم. برای این منظور ابتدا فایل را از داخل نرم افزار  ++Notepad می بندیم. سپس وارد فولدر my_website می شویم:

change html to php page

اکنون روی نام این فایل کلیک راست کرده و گزینه Rename را انتخاب می کنیم و سپس پسوند این فایل را از اچ تی ام ال به پی اچ پی تغییر می دهیم (توجه داشته باشیم که می بایست مابین نام index و پسوند یک نقطه قرار گیرد):

1change html to php page

حال نیاز است تا مجدد این فایل را داخل نرم افزار ++Notepad باز نماییم. برای این منظور از منوی اصلی نرم افزار وارد گزینه File شده سپس روی گزنیه Open کلیک می کنیم. به محض کلیک کردن روی این گزینه با پنجره ای به صورت زیر مواجه خواهیم شد:

opening a php file in notepad

مسیر فایل را مشخص نموده و در نهایت روی گزینه Open کلیک می کنیم و خواهیم دید که این فایل پی اچ پی در نرم افزار باز خواهد شد:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
 
<head>
    <title>My Website
    </title>
</head>
 
<body>
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
</body>
 
</html>

می بینیم تنها تفاوتی که ایجاد شده است پسوند فایل است که از اچ تی ام ال به پی اچ پی تغییر کرده است. حال مجدد این فایل پی اچ پی را در مرورگر اجرا می کنیم (از داخل فولدر my_website روی نام index.php کلیک راست کرده و گزینه Open with را کلیک کرده و سپس نرم افزار فایرفاکس را انتخاب می کنیم:

2change html to php page

می بینیم علیرغم اینکه پسوند فایل به پی اچ پی تغییر پیدا کرده است، اما در روند اجرای این صفحه وب هیچ تغییری صورت نگرفته است. به عبارت دیگر مادامی که ما هیچ گونه کد پی اچ پی به صفحه خود اضافه نکنیم، این صفحه همانند یک صفحه اچ تی ام ال اجرا خواهد شد. در ادامه خواهیم دید که به محض اضافه نمودن کدهای پی اچ پی به کدهای اچ تی ام ال روند اجرای برنامه نیز تغییر پیدا خواهد کرد.

MahdiHD بازدید : 106 چهارشنبه 24 تیر 1394 نظرات (0)

پس از نصب نرم افزار Wamp روی سیستم عامل خود، ابتدا وارد فولدر wamp  می شویم:

new-project-in-wamp

در تصویر بالا می بینیم که به درایو سی رفته و روی فولدر wamp کلیک می کنیم:

2 new-project-in-wamp

همانطور که می بینیم داخل فولدر wamp فولدری وجود دارد تحت عنوان www که این فولدر در توسعه وب اپلیکیشن از اهمیت بسزایی برخوردار است چرا که فایل های مرتبط با وب اپلیکیشن ما داخل این فولدر قرار خواهند گرفت که بعداً از طریق localhost به آنها دسترسی خواهیم داشت. با کلیک روی این فولدر وارد آن می شویم:

3-new-project-in-wamp

همانطور که در تصویر بالا می بینیم دو فایل پیش فرض داخل این فولدر وجود دارند که در حین نصب نرم افزار Wamp ایجاد می گردند. کاری که در این مرحله می بایست انجام دهیم این است که فولدری ایجاد کنیم که مرتبط با وب سایتی باشد که می خواهیم توسعه دهیم. در این آموزش نام my_website را انتخاب می کنیم (توجه داشته باشیم که این نام نمی بایست حاوی حروف بزرگ و فاصله باشد. برای مجزا ساختن بخش های مختلف نام می توانیم از _ استفاده کنیم. این علامت که اصطلاحاً Underscore نامیده می شود با هم زمان فشار دادن کلید های Shift و دکمه Dash ایجاد می گردد. دکمه Dash در کیبوردهای استاندارد در کنار دکمه 0 قرار دارد).
اکنون می توانیم برنامه ++Notepad را باز کنیم:

4-new-project-in-wamp

سپس از منوی اصلی نرم افزار روی گزینه File کلیک کرده و همانطور که در تصویر بالا می بینیم روی گزینه New کلیک می کنیم تا یک سند جدید ایجاد گردد:

5-new-project-in-wamp

پس از اینکه یک سند جدید ایجاد کردیم، اقدام به نوشتن حداقل کدهایی که برای یک صفحه اچ تی ام ال نیاز است می کنیم (برای آشنایی بیشتر با مفاهیم اچ تی ام ال به دوره مرتبط با این زبان در سایت نت شهر رجوع نمایید):

6-new-project-in-wamp

همانطور که می بینیم یک تگ آغازین و پایانی مرتبط با <html>، یک تگ آغازین و پایانی مرتبط با <head>، یک تگ آغازین و پایانی <title> و یک تگ آغازین و پایانی <body> ایجاد کرده ایم. از آنجا که می خواهیم در مرورگر نام این پروژه نمایش داده شود، داخل تگ های مربوط به title به معنی "عنوان" عبارت My Website را می نویسیم. اگر به رنگ کدها در نرم افزار ++Notepad توجه کنیم می بینیم که کلیه عبارات به رنگ مشکی هستند و این در حالی است که یکی از قابلیت های کلیدی این نرم افزار Code Highlighting یا به عبارتی "رنگی نشان دادن بخش های مختلف کد" است. در حقیقت علت این مسئله آن است که ما فایل خود را هنوز ذخیره نکرده ایم تا پسوندی برای آن مشخص گردد. در ادامه  از منوی اصلی روی گزینه File کلیک کرده و سپس گزینه Save را انتخاب می کنیم:

 7-new-project-in-wamp

حال برای انتخاب مسیر برای ذخیره سازی این فایل ابتدا وارد درایو سی شده و فولدر wamp را انتخاب کرده، سپس وارد فولدر www شده و سپس داخل فولدری که قبلا تحت عنوان my_website ایجاد کرده بودیم می شویم:

8-new-project-in-wamp

همانطور که در تصویر فوق مشخص است، نامی تحت عنوان index با پسوند اچ تی ام ال انتخاب کرده و روی گزینه Save کلیک می کنیم:

9-new-project-in-wamp

به محض Save کردن این فایل با پسوند اچ تی ام ال می بینیم که کدها به صورت رنگی در می آیند چرا که از این پس نرم افزار ++Notepad می داند که با یک فایل اچ تی ام ال سر و کار دارد. از سوی دیگر نام index.html در تب بالای این سند به نمایش در می آید. اگر به فولدر my_website وارد شویم می بینیم که فایلی تحت عنوان index.html داخل فولدر ایجاد شده است که قبلاً وجود نداشت:

10-new-project-in-wamp

دقت داشته باشیم که در انتخاب نام این فایل بایستی دقت داشته باشیم که حرف اول با حرف کوچک نوشته شود و به هیچ وجه از فاصله هم استفاده نکنیم. حال با کیک کردن روی این فایل خواهیم توانست آن را در مرورگری که به عنوان پیش فرض برای فایل های اچ تی ام ال انتخاب شده است باز کنیم:

11-new-project-in-wamp

همانطور که می بینیم عنوان سایت نوشته شده است اما داخل پنجره اصلی فایرفاکس هیچ چیزی نشان داده نمی شود و علت این مسئله هم آن است که هیچ مطلبی داخل تگ مربوط به <body> ننوشته ایم. برای ادامه کار مجدد به نرم افزار ++Notepad بازگشته و اقدام به تکمیل کد خود می کنیم:

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// <![CDATA[
<html>
 
<head>
    <title>My Website</title>
</head>
 
<body>
 
    <h2>In the name of the most high</h2>
    <p>Hello World</p>
 
</body>
 
</html>
//

داخل تگ <body> شروع به کدنویسی می کنیم. ابتدا با استفاده از یک تگ مربوط به "عنوان" مثل <h1> عنوانی برای صفحه خود انتخاب می کنیم که در اینجا عبارت In the Name of the Most High به معنی "به نام خدا" را در نظر گرفته ایم (توجه داشته باشیم که تگ پایانی </h1> را بایستی پس از این عبارت بنویسیم). سپس از یک تگ پاراگراف استفاده کرده و عبارت Hello World به معنی "سلام دنیا" را داخل آن می نویسیم. اکنون نیاز داریم تا این فایل را Save کنیم. برای این منظور دو راه کار وجود دارد. راه کار اول اینکه از منوی اصلی وارد گزنیه File شده و سپس روی گزینه Save کلیک می کنیم. راه کار دوم اینکه از کلید های Ctrl + S استفاده می کنیم. پس از ذخیره کردن این فایل مجدد به مرورگر فایرفاکس باز می گردیم:

opening--an-html-page-in-firefox

می بینیم که مجدد صفحه خالی است و تغییرات اعمال نشده اند. برای اعمال این تغییرات از کلید های Ctrl + R استفاده می کنیم تا اصطلاحاً صفحه را Refresh کنیم:

1-opening--an-html-page-in-firefox

بلافاصله پس از زدن دکمه های Ctrl + R می بینیم که عباراتی که داخل کد خود اضافه کردیم نمایش داده می شوند. در ادامه برای آنکه بتوانیم Source Code خود را از داخل فایرفاکس مشاهده کنیم، روی صفحه کلیک راست کرده و گزینه View Page Source را کلیک می کنیم:

showing-page-source

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

1showing-page-source

می بینیم که دقیقاً کدهایی که داخل ++Notepad نوشتیم اینجا نمایش داده می شود که همگی کدهای اچ تی ام ال هستند. در آموزش بعد خواهیم دید که به چه شکل می توان یک سند HTML را به یک سند PHP تغییر داد.

MahdiHD بازدید : 109 چهارشنبه 24 تیر 1394 نظرات (0)

بر خلاف وب سایت های استاتیک که به سادگی قابل مشاهده در مرورگری همچون فایرفاکس هستند، برای توسعه وب سایت های دینامیک به یک نرم افزار وب سرور همچون آپاچی، وب اپلیکیشن پی اچ پی و همچنین پایگاه داده MySQL خواهیم داشت.
نکته جالب توجه اینجا است که تمامی این ابزارها به رایگان قابل استفاده می باشند اما نکته که می بایست حتماً مد نظر قرار دهیم این است که اگر بخواهیم تک تک این نرم افزارها را به صورت تکی نصب کنیم سپس آن ها را به یکدیگر لینک دهیم ممکن است این کار تا حدودی زمان بر بوده در حین لینک دادن آن ها به یکدیگر با مشکلات گوناگونی مواجه شویم.
برای این منظور، پکیج های آماده ای طراحی شده اند که هر سه نرم افزار مورد نیاز را در برگرفته و به سادگی قابل نصب و اجرا می باشند. پکیجی که برای سیستم عامل ویندوز مورد استفاده قرار می گیرد WAMP نام دارد که مخفف واژگان Windows Apache MySQL PHP است.
برای دانلود این نرم افزار به آدرس wampserver.com/en  مراجعه نموده و همانطور که در تصویر زیر مشاهده می شود روی گزینه WAMPSERVER کلیک نمایید:

نصب ومپ روی ویندوز

پس از کلیک کردن روی دکمه WAMP SERVER با تصویر زیر مواجه خواهید شد:

دانلود ومپ برای ویندوز

همانطور که در تصویر فوق مشاهده می شود، می بایست روی دکمه download directly کلیک نمایید:

دانلود Wamp

در این مرحله به صفحه دیگی ارجاع داده خواهیم شد که به راحتی با کلیک کردن روی دکمه Save File می توان نرم افزار را ذخیره ساخت.
حال می بایست فایل دانلود شده را نصب کرد. برای این منظور دو بار روی آیکان این نرم افزار کلیک می کنیم:

نصب نرم افزار ومپ روی ویندوز

پس از کلیک کردن روی دکمه Run بسته به تنظیمات ویندوز ممکن است با یک پیام امنیتی مواجه شود که با تایید آن، پنجره زیر مواجه خواهید شد:

wamp installation on windows 8.1

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

wamp install on windows

همانطور که در تصویر فوق مشخص است، می بایست گزینه I accept the agreement را انتخاب کرده سپس روی دکمه Next کلیک می نماییم:

wamp installation directory

 همانطور که در تصویر فوق مشخص است، می بایست محل نصب این نرم افزار را مشخص کرد. لازم به ذکر است که در این مرحله از نصب بایستی دایرکتوری پیش فرض را انتخاب کرده و در نهایت روی دکمه Next کلیک نماییم:

installing wamp

 در این مرحله با انتخاب گزینه های Create a Quick Launch icon و Create a Desktop icon به ترتیب می توان آیکان مرتبط با اپلیکیشن را در نوار پایین ویندوز و دسکتاپ قرار داد. مجدد روی دکمه Next کلیک می کنیم:

wamp installation summery

در این مرحله نرم افزار منتظر نصب بوده و با کلیک کردن روی دکمه Install می توان نصب نرم افزار Wamp را آغاز نمود:

installation process of wamp

می بینیم که فرایند نصب آغاز می شود و بسته به سرعت سخت افزار کمی به طول خواهد انجامید تا نصب تکمیل گردد. پس از نصب نرم افزار، چنانچه مرورگر فایرفاکس روی سیستم نصب باشد از ما این سوال پرسیده خواهد شد تا در صورت تمایل مرورگر فایرفاکس را به عنوان مرورگر پیش فرض انتخاب نماییم:

making firefox the default browser for Wamp Server

پس از کلیک کردن روی دکمه Yes این احتمال وجود دارد که فایروال ویندوز نصب نرم افزار را متوقف سازد. در صورت بروز چنین مسئله ای، همانطور که در تصویر زیر مشخص است می بایست روی دکمه Allow access کلیک نماییم:

firewall allowance for wamp

در ادامه می بایست مسیری که با ارجاع به آن در مروگر قادر خواهیم گشت تا وب سایت دینامیک خود را مشاهده کنیم بایستی مشخص گردد:

localhost

همانطور که در تصویر فوق مشخص است، تنظیمات پیش فرض را انتخاب نموده و روی دکمه Next کلیک می کنیم:

wamp-installation-finished

در این مرحله فرایند نصب نرم افزار Wamp Server به پایان رسیده و پس از کلیک کردن روی دکمه Finish، این نرم افزار اجرا خواهد شد:

Untitled-1

 همانطور که در تصویر فوق مشاهده می شود، پس از اجرای این نرم افزار آیکان مرتبط با نرم افزار Wamp در نوار پایین ویندوز نمایان می گردد. توجه داشته باشیم که پس از اجرای نرم افزار، رنگ این آیکان ابتدا قرمز بوده سپس به نارنجی تغییر می کند و در نهایت چنانچه هیچ مشکلی بوجود نیاید رنگ آیکان سبز خواهد شد.

یکی از تنظیماتی که حتماً می بایست انجام دهیم این است که گزینه display_errors در وب اپلیکیشن نصب شده به همراه Wamp فعال باشد. برای این منظور روی آیکان سبز رنگ Wamp کلیک کرده سپس از گزینه PHP روی گزینه PHP settings کلیک کرده و تیک آیتم display_errors را می زنیم:

Activate display errors in wamp

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

MahdiHD بازدید : 133 چهارشنبه 24 تیر 1394 نظرات (0)

وب سایت های استاتیک به آن دسته از وب سایت ها گفته می شود که صفحات وب تشکیل دهنده آن ها با پسوند html. ایجاد شده باشند و این در حالی است که صفحات وب سایت های دینامیک با پسوند متفاوتی همچون php. ساخته می شوند.
برای روشن شدن این مسئله، ابتدا نحوه عملکرد یک وب سایت استاتیک را مد نظر قرار می دهیم:

Static-vs-dynamic-website

همانطور که در تصویر فوق مشخص است، در یک وب سایت استاتیک از سمت کاربر یک درخواست برای سرور (کامپیوتری که فایل های یک سایت روی آن نگهداری می شوند) ارسال می شود و نرم افزار وب سروری (همچون آپاچی) این وظیفه را دارا است تا فایل مد نظر را پیدا نموده و برای مرورگر کاربر ارسال می کند و کاربر خواهد توانست صفحه مد نظر خود را مشاهده نماید.
فرایند انجام این کار در مورد وب سایت های دینامیک کاملاً متفاوت و تا حدودی پیچیده تر است. برای این منظور تصویر زیر را مد نظر قرار می دهیم:

Static-vs-dynamic-webیsite

همانطور که در تصویر فوق مشخص است، زمانیکه کاربر آدرس یک صفحه وب سایت دینامیک (مثلاً index.php ) را وارد مرورگر می کند، مرورگر این درخواست را برای نرم افزار وب سرور (آپاچی) که روی سرور هاست نصب است ارسال می کند. وب سرور هم در خواست را گرفته و برای وب اپلیکیشن پی اچ پی ارسال می کند. در این مرحله، وب اپلیکیشن اگر نیاز به اطلاعات خاصی داشته باشد به دیتابیس رجوع می کند و آن اطلاعات را گرفته، صفحه مد نظر ساخته شده و در نهایت تحویل نرم افزار وب سرور آپاچی شده و در نتیجه صفحه اچ تی ام ال تحویل مرورگر کاربر شده و وب خواهد توانست صفحه مد نظر خود را مشاهده نماید.

1 2 صفحه بعد

تعداد صفحات : 2

اطلاعات کاربری
  • فراموشی رمز عبور؟
    • آرشیو
  • تير 1394
    • نظرسنجی
    آیا از آموزش های سایت راضی هستید؟
    آمار سایت
  • کل مطالب : 94
  • کل نظرات : 0
  • افراد آنلاین : 10
  • تعداد اعضا : 46
  • آی پی امروز : 26
  • آی پی دیروز : 20
  • بازدید امروز : 60
  • باردید دیروز : 48
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 457
  • بازدید ماه : 457
  • بازدید سال : 23,898
  • بازدید کلی : 122,363

    • صفحه اصلی تالار گفتمان ثبت نام ورود آرشیو تماس با ما
    نیرو گرفته : رزبلاگ