آموزش طراحی سایت با php

نویسنده : مینا علی زاده | زمان انتشار : 10 اسفند 1399 ساعت 17:28

جهت انجام پروژه های دانشجویی و یا تمرین‌های برنامه نویسی رشته کامپیوتر میتوانید به آی دی تلگرام زیر پیام دهید

@AlirezaSepand

دوست دارید نحوه ساختن یک وبسایت را بیاموزید؟ زمانی برای اینکار تنها شروع به یادگیری HTML کافی بود، اما این روز‌ها بهترین راه‌حل برای این مسئله PHP‌ و البته یادگیری آن است. هر چند هنوز هم لازم است برای شروع به کار قدری دانش کدنویسی HTML داشته باشید، اما می‌توانیم بدون اغراق بگوئیم که PHP اکنون محبوب‌ترین گزینه برای ساخت انواع سایت‌های استاتیک و دینامیک است. بسیار خب، حالا می‌دانیم که باید 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 است استفاده کنید. اگر از ویندوز استفاده می‌کنید، می‌توانید از این راهنما بهره بگیرید:

چگونه یک سرور WAMP راه‌اندازی کنیم؟ — از صفر تا صد

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li><ahref="about.php">About</a></li>

<li><ahref="https://www.makeuseof.com/tag/author/ccawley/">MakeUseOf</a></li>

</ul>

</nav>

</header>

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

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

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

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

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

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

</div>

Contact me on Twitter:<ahref="https://www.twitter.com/TheGadgetMonkey">@TheGadgetMonkey</a>

</footer>

</body>

</html>

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

جمع‌بندی

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

<?phpechofile_get_contents("html/header.html");?>

<?phpechofile_get_contents("html/body.html");?>

<?phpechofile_get_contents("html/footer.html");?>

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

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

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

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

سخن پایانی

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

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

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

میثم لطفی (+)

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

بر اساس رای 23 نفر

آیا این مطلب برای شما مفید بود؟

منبع: blog.faradars.org