طراحی یک وب سایت ساده با PHP — از صفر تا صد

۶۸۸۹ بازدید
آخرین به‌روزرسانی: ۰۵ فروردین ۱۴۰۲
زمان مطالعه: ۵ دقیقه
طراحی یک وب سایت ساده با PHP — از صفر تا صد

دوست دارید نحوه ساختن یک وبسایت را بیاموزید؟ زمانی برای اینکار تنها شروع به یادگیری HTML کافی بود، اما این روز‌ها بهترین راه‌حل برای این مسئله PHP‌ و البته یادگیری آن است. هر چند هنوز هم لازم است برای شروع به کار قدری دانش کدنویسی HTML داشته باشید، اما می‌توانیم بدون اغراق بگوئیم که PHP اکنون محبوب‌ترین گزینه برای ساخت انواع سایت‌های استاتیک و دینامیک در حوزه برنامه نویسی وب به شمار می‌رود. PHP در آموزش برنامه نویسی USSD نیز کاربرد دارد. بسیار خب، حالا می‌دانیم که باید PHP‌ یاد بگیریم و یکی از بهترین راه‌ها برای یادگیری آن، ساخت یک وب سایت ساده با PHP است؛ کاری که بنا داریم در ادامه انجام دهیم.

چرا باید از PHP برای توسعه وب‌سایت استفاده کنیم؟

گزینه‌های مختلفی برای توسعه وب در این سال‌ها مطرح شده‌اند. در آغاز HTML ساده استفاده می‌شد، سپس توسعه‌دهندگان از HTML به همراه CSS جاسازی شده یا یک ارجاع به فایل CSS استفاده کردند. زمانی که وب‌سایت‌های دینامیک مطرح شدند، ASP (که در ادامه به ASP.NET تبدیل شد) و PHP نیز وارد میدان شدند. بر اساس آمار و ارقام اکنون PHP با سهم 82 درصدی از وب‌سایت‌ها به عنوان محبوب‌ترین زبان برنامه‌نویسی سمت سرور مطرح است. این عدد را با 16 درصد که از ASP استفاده می‌کنند مقایسه کنید.

ASP تا سال 2022 پشتیبانی خواهد شد، اما انتظار نمی‌رود پس از این تاریخ به صورت رسمی دست کم به عنوان یک فناوری وب تداوم داشته باشد. PHP که اختصاری برای عبارت «پیش پردازشگر ابرمتن PHP» (به معنی PHP Hypertext Preprocessor) است موفقیت زیادی داشته است که به طور عمده ناشی از یکپارچگی آن با لینوکس است.

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

برای ساخت یک وب‌سایت PHP به چه چیزی نیاز داریم؟

پیش از آن که کار ساخت وب‌سایت خود را آغاز کنیم، باید مطمئن شویم که یک ادیتور متن ساده یا محیط توسعه مناسب PHP را نصب کرده‌ایم. برای کدنویسی PHP می‌توانید در ابتدا از چیزی به سادگی Notepad ویندوز استفاده کنید. مثال‌هایی که در این مقاله مطرح می‌شوند، همگی با استفاده از ادیتور متن Notepad++‎ نوشته شده‌اند.

همچنین باید یک وب‌سرور PHP داشته باشید که فایل‌های خود را روی آن آپلود کنید. این سرور می‌تواند یک سرور ریموت یا یک رایانه محلی باشد که مجموعه LAMP روی آن نصب شده است. LAMP اختصاری برای عبارت‌های Linux ،Apache ،MySQL ،PHP است. به طور جایگزین می‌توانید از مجموعه WAMP که اختصاری برای عبارت‌های Windows ،Apache، MySQL ،PHP است استفاده کنید. اگر از ویندوز استفاده می‌کنید، می‌توانید از این راهنما بهره بگیرید:

در نهایت به یک برنامه FTP نیاز دارید تا فایل‌هایتان را روی وب‌سرور آپلود کنید. به این منظور برنامه‌های مختلفی مانند WinSCP، Cyberduck و FileZilla وجود دارند.

آغاز کار با PHP: آشنایی با دستور زبان

در ساختار مقدماتی PHP از تعداد زیادی براکت استفاده می‌شود و هر تابع با یک نقطه‌ویرگول به صورت زیر پایان می‌یابد:

1<?php [CODE…CODE];?>

در صفحه‌های وب تقریباً همه کاربردهای PHP بر مبنای گزاره echo هستند.

این گزاره به مرورگر دستور می‌دهد که متن و محتوای گیومه‌ها را در خروجی ارائه کند. برای نمونه:

1<?php "<p>Hello World!</p>";?>

توجه داشته باشید که HTML نیز درون گیومه‌ها قرار می‌گیرد. خروجی این کار معمولاً به صورت زیر است:

وب سایت ساده با PHP

ساخت یک وب‌سایت: آشنایی با ساختار

هر طرحی که برای وب‌سایت خود در نظر دارید، ابتدا باید زمانی را صرف طراحی آن روی کاغذ بکنید. سپس می‌توانید با توجه به این طراحی اولیه وب‌سایت، محتوای مورد نظر یا صفحه‌هایی که به هم لینک دارند را مشخص سازید.

در این وب‌سایت ساده PHP قصد داریم یک صفحه PHP منفرد ایجاد کنیم که با محتوایی از سه صفحه HTML مقداردهی می‌شود. در ادامه فایل index.php که ایجاد می‌کنید، می‌تواند صرفاً با واژه‌ها و تصاویری از فایل‌های HTML اصلی ویرایش شود.

نمونه کدهایی که در ادامه ارائه می‌شوند مربوط به پروژه‌ای هستند که می‌توانید در این ریپوی گیت‌هاب (+) ملاحظه بکنید.

آغاز طراحی وب‌سایت: هدر PHP

در آغاز کار طراحی وب‌سایت باید سه صفحه وب بسازیم. این صفحه‌ها بر اساس ساختار مقدماتی، هدر، متن و فوتر هستند.

همان طور که احتمالاً حدس می‌زنید، هدر شامل اطلاعات عنوان است. با این حال اطلاعاتی مانند استاندارد HTML مورد استفاده نیز همراه با ارجاع‌های CSS برای استفاده مرورگر درج شده است.

کار خود را با ایجاد فایلی به نام header.html آغاز می‌کنیم و در ادامه اطلاعات مورد نیاز هدر را درج می‌کنیم:

1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="description" contents="About CM Cawley Biography website in PHP">
6        <link rel="stylesheet" href="style.css" type="text/css">
7    </head>
8    <body>
9        <header>
10            <nav id="navigation">
11                <ul>
12                    <li><a href="index.php">Home</a></li>
13                    <li><a href="about.php">About</a></li>
14                    <li><a href="https://www.makeuseof.com/tag/author/ccawley/">MakeUseOf</a></li>
15                </ul>
16            </nav>
17        </header>
18        <div id="contents">

ما در این مثال از یک فایل CSS ساده استفاده کرده‌ایم که همان طور که می‌بینید در دایرکتوری css/ اختصاصی ارجاع یافته است. این فایل زمانی که صفحه در مرورگر بارگذاری می‌شود فراخوانده می‌شود و فونت و طرح‌بندی تعریف شده را روی صفحه اعمال می‌کند.

درج محتوا در بدنه صفحه وب PHP

هر صفحه وب شامل یک بخش محتوا است که body نام دارد. این همان بخش از صفحه است که کاربر می‌خواند. برای نمونه شما هم اینک مشغول مطالعه بخش body این صفحه وب از مجله فرادرس هستید.

یک صفحه به نام body.html ایجاد کنید و اطلاعاتی که می‌خواهید در صفحه نمایش پیدا کند به آن اضافه کنید.

1<p> مطالب مجله فرادرس همگام با مباحث روز دنیا، به صورت جامع، با مثال‌های کاربردی و به زبان ساده تدوین می‌شوند تا دانش‌آموزان، دانشجویان و متخصصان هر حوزه بتوانند از این مطالب نهایت بهره را برده، دانش خود را به روز نگه داشته و از راه‌حل‌های ارائه شده در آن‌ها در امور علمی، شغلی و روزمره خود بهره ببرند. </p><p> مطالب مجله فرادرس همگام با مباحث روز دنیا، به صورت جامع، با مثال‌های کاربردی و به زبان ساده تدوین می‌شوند تا دانش‌آموزان، دانشجویان و متخصصان هر حوزه بتوانند از این مطالب نهایت بهره را برده، دانش خود را به روز نگه داشته و از راه‌حل‌های ارائه شده در آن‌ها در امور علمی، شغلی و روزمره خود بهره ببرند. </p>

استفاده از فوتر PHP در صفحه وب

در این مرحله باید بخش فوتر صفحه وب را طراحی کنیم. به این منظور فایلی به نام footer.php می‌سازیم و محتوایی به آن اضافه می‌کنیم.

این محتوا می‌تواند شامل اطلاعت کپی‌رایت یا برخی لینک‌های مفید برای افرادی باشد که از وب‌سایت شما بازدید می‌کنند. در نهایت باید چیزی مانند کد زیر باشد:

1		</div>
2        <footer>
3            Contact me on Twitter: <a href="https://www.twitter.com/TheGadgetMonkey">@TheGadgetMonkey</a>
4        </footer>
5    </body>
6</html>

پس از افزودن کد این فایل را ذخیره کنید.

جمع‌بندی

حال که این سه فایل HTML را در دایرکتوری html قرار داده‌ایم، می‌توانیم از دستور echo در PHP برای کامپایل کردن آن‌ها به صورت یک صفحه منفرد استفاده کنیم.

به این منظور فایلی به نام index.php یا محتوای زیر ایجاد کنید:

1<?php echo file_get_contents("html/header.html");?>
2<?php echo file_get_contents("html/body.html");?>
3<?php echo file_get_contents("html/footer.html");?>

فایل را ذخیره کرده و روی سرور آپلود کنید. سپس در مرورگر آدرس فایل index.php را وارد نمایید. اینک باید صفحه وب کامل را در مرورگر مشاهده کنید. به خاطر داشته باشید که فایل PHP واقعی که در مرورگر باز کرده‌اید شامل تنها سه خط کد است.

در نهایت می‌توانید خط کد PHP زیر را به آن اضافه کنید که شامل اعلان کپی‌رایت و همچنین سال مربوط است که به صورت خودکار به روز می‌شود:

1<p>Copyright © CM Cawley <?php echo date("Y");?></p>

این کد در فایل index.php پس از فوتر نمایش می‌یابد. توجه کنید که دستور date(“Y”) سال جاری را بر حسب چهار رقم نمایش می‌دهد. با مراجعه به لیست گزینه‌هایی که در وب‌سایت W3Schools وجود دارد، می‌توانید شیوه نمایش آن را تغییر دهید. برای نمونه استفاده از گزینه حرف کوچک به صورت y موجب می‌شود که سال به صورت دو رقمی نمایش پیدا کند.

می‌توانید از CSS برای موقعیت‌یابی و استایل‌دهی به آن مانند هر عنصر دیگری استفاده کنید. بدین ترتیب ما موفق شدیم نخستین وب‌سایت PHP خود را از صفر خودمان بسازیم.

سخن پایانی

همان‌طور که احتمالاً می‌دانید PHP تنها راه برای توسعه وب‌سایت‌ها نیست. فریمورک‌های زیادی برای توسعه وب دینامیک و مبتنی بر پایگاه داده وجود دارند. جاوا اسکریپت و فناوری‌های مرتبط نیز در این زمینه به همراه نرم‌افزارهایی مانند Adobe Dreamweaver عرضه شده‌اند.

با این وجود اگر می‌خواهید کار توسعه وب را آغاز کنید بهتر است این کار را از مبانی اولیه آن شروع کنید. اگر بلوک‌های سازنده وب‌سایت را که شامل HTML ،CSS و PHP می‌شود بشناسید، مسیر موفقیت برایتان هموارتر خواهد بود.

بر اساس رای ۵۲ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
makeuseof
۱۰ دیدگاه برای «طراحی یک وب سایت ساده با PHP — از صفر تا صد»

خواهش تمام کود ها ره برم بفرستین ممنون

سلام برادر جان میگم یه سوال دارم که تا الان جوابشو پیدا نکردم بزار بگیم من یه وبسایت دارم از طرح html و css خوب من الان میخوام php فرم رو اضافه کنم دیگه به localhost نیاز ندارم؟ با همون host سرور ایرانی میاد بالا؟

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

سلام، وقت شما بخیر؛

پاسخ این سوال به متغیرهای مختلفی مثل نوع سایت و کاربری آن، قابلیت‌های مورد نیاز و غیره وابسته است و موارد متعددی برای رسیدن به جواب نهایی باید بررسی شوند.

البته در رابطه با طراحی سایت با پایتون و کسب اطلاعات بیشتر در این زمینه می‌توانید به این مطلب از مجله فرادرس رجوع کنید.

از همراهی شما با مجله فرادرس بسیار سپاسگزاریم.

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

کد هات رو بفرست

سلام دوست عزیز؛
احتمالاً در بخش جمع‌بندی، دستور echo را برای تجمیع بخش‌های مختلف وبسایت به درستی اجرا نکرده‌اید.
با تشکر

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

PHP برای هر کار وبی عالیه

سلام در بخش body اون علامت های p چی هستن

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *