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

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

مقدمه طراحی سایت با php

همان طور که می‌دانید زبان برنامه نویسی php یک زبان سمت سرور است که برای اجرا و استفاده از آن به یک وب سرور نیاز دارید. بدون وب سرور قابلیت اجرای کدهای php وجود ندارد! اما نگران نباشید زیرا می‌توانید از نرم افزارهای شبیه ساز سرور استفاده نمایید و به کمک آن php را در کامپیوتر شخصی خود و یا یه اصطلاح LocalHost اجرا نمایید. در پروسه طراحی سایت نیز می‌توانید به کمک شبیه ساز سرور یک سایت به زبان php طراحی کرده و آن را مشاهده کنید.

انواع مختلفی از شبیه سازهای سرور وجود دارد که معروف‌ ترین آن‌ها wamp و xampp هستند که ما در پست طراحی سایت با php از شبیه ساز xampp استفاده خواهیم کرد. در ادامه می‌خواهیم نحوه نصب نرم افزار xampp بر روی سیستم عامل ویندوز را به شما آموزش دهیم. با ما همراه باشید.

آموزش نصب و راه اندازی xampp

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

 

 

پس از اینکه دانلود با موفقیت انجام شد بر روی فایل نصبی برنامه یا همان setup دابل کلیک کنید تا صفحه نصب اجرا شود. همانند دیگر نرم افزارها ابتدا باید بر روی Next کلیک کنید تا به صفحه بعدی منتقل شوید.

 

 

در مرحله دوم تعدادی آیتم برای نصب در یک پنجره نمایش داده می‌شود که نیاز دارید همه ان‌ها را نصب نمایید. به همین منظور پس از فعال کردن تیک همه آن‌ها باید مجدداً روی دکمه Next کلیک کنید.

 

 

در مرحله سوم نوبت به انتخاب مسیر می‌رسد. مسیر نصب این نرم افزار به صورت پیش فرض C:\xampp است که در صورت دلخواه می‌توانید با کلیک کردن بر روی آیکون پوشه در سمت راست صفحه، مسیر دلخواهتان را انتخاب کنید.

 

 

در مرحله چهارم پنجره‌ای دیگر برای انتخاب زبان باز می‌شود که بهتر است همان زبان انگلیسی را انتخاب کنید و در ادامه بر روی Next کلیک کنید.

 

 

در مرحله پنجم پیامی را مشاهده می‌کنید که به معنایی تکمیل تنظیمات برای نصب نرم افزار xampp بوده که باید برای آخرین بار بر روی دکمه Next کلیک کنید تا مراحل نصب بر روی سیستم شما شروع شود.

 

 

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

 

 

در آخرین مرحله نصب نرم افزار به پایان رسیده و پنجره‌ای نیز باز می‌شود که در آن یک سوال با این عنوان پرسیده شده است که آیا می‌خواهید کنترل پنل این نرم افزار باز شود؟ در صورتی که جواب شما بله باشد می‌تواند تیک کنار سوال را فعال کرده سپس بر روی گزینه Finish کلیک کنید. اگر هم تیک این گزینه را بردارید می‌توانید با مراجعه به منوی Start مجدداً کنترل پنل را اجرا نمایید.

 

 

پس از تمام شدن مراحل نصب و با انتخاب گزینه Finish کنترل پنل نرم افزار xampp با تعدادی گزینه باز می‌شود که ما بیشتر با گزینه‌های Apache و MySQL سر و کار داریم. برای فعال کردن هر کدام از این گزینه‌ها باید بر روی دکمه Start که در مقابل هر کدام وجود دارد یک بار کلیک کنید تا رنگ گزینه‌ها به رنگ سبز تغییر کند.

 

 

شاید پس از پایان نصب با این سوال مواجه شده‌اید که آیا نرم افزار xampp به درستی نصب کرده‌اید یا نه؟ برای پاسخ به این سوال می‌توانید به سراغ یک مرورگر رفته و آدرس http://localhost را جستجو کنید. با مشاهده پنجره خوش آمد گویی xampp متوجه می‌شوید که توانسته‌اید xampp را به درستی نصب کنید.

 

 

اجرای کدهای php با xampp

همانطور که در بالا گفته شد، برای اجرای کدهای php از شبیه ساز سرور xampp برای اجرای کدهای php استفاده می‌کنیم. بدین منظور باید Apache و MySQL را در شبیه ساز سرور xampp اجرا نمایید. برای این کار ابتدا باید کنترل پنل نرم افزار xampp را باز کرده و گزینه‌های مربوط به MySQL و Apache را با کلیک کردن بر روی start در مقابل هر کدام فعال کنید تا به رنگ سبز تغییر گردد. شبیه ساز زمپ اجرا شده است و حالا می‌توانید کدهای php خود را اجرا نمایید.

انتخاب یک IDE مناسب برای طراحی سایت با php

بهتر است ابتدا کمی با مفهوم IDE آشنا شوید. IDE مخفف Integrated Development Environment به معنی یک محیط توسعه یافته است که مانند جعبه ابزاری کامل به برنامه نویسان و طراحان سایت کمک می‌کند تا در زمان کم کدهای خود را بنویسند؛ البته برای برنامه نویسی به هر زبانی IDEهای مختلفی وجود دارند که در هر کدام تعداد بیشماری ابزار از جمله محیط برنامه نویسی، کامپایلر و غیره وجود دارد که می‌توانید از آن‌ها استفاده نمایید.

اما از جمله بهترین IDE برای طراحی سایت با php می‌توان به نرم افزار Visual Studio Code اشاره کرد که یک نرم افزار سبک بوده و می‌تواند از بیشتر زبان‌های مربوط به برنامه نویسی پشتیبانی کند. در ادامه قصد داریم تا سایتی را با استفاده از Visual Studio Code طراحی کنیم پس با ما همراه باشید.

ایجاد فایل های مورد نیاز در پروژه

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

C:\xampp\htdocs

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

برای شروع یک پوشه با نام myproject به آدرس C:\xampp\htdocs\myproject ایجاد کنید. در ادامه نیاز داریم تا فایل index را در این مسیر ایجاد کنیم. در VS Code دو روش برای ایجاد فایل جدید وجود دارد که در روش اول می‌توانید از منوی file گزینه New را انتخاب کنید و در روش دوم نیز می‌توانید از کلیدهای ترکیبی Ctrl+N استفاده کنید.

پس از ایجاد فایل با صفحه‌ای مانند صفحه زیر رو به رو می‌شوید، با کلیک کردن بر روی Select a Language از میان زبان‌های مختلف زبان پی اچ پی جهت طراحی سایت php انتخاب کنید تا فایل مدنظر ایجاد گردد.

 

 

حال نوبت به ذخیره فایل ایجاد شده در مسیری که قبلاً تعیین کردیم، می‌رسد. برای این کار می‌توانید از منوی File گزینه Save As را انتخاب کنید یا از کلید ترکیبی Ctrl+Shift+S استفاده کنید.

 

 

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

 

 

تبریگ میگم! پروژه شما ایجاد شده اما محتوای آن خالی است. برای مشاهده پروژه خود، پس از اجرای زمپ به مرورگر خود رفته و آدرس localhost/myproject را در نوار آدرس تایپ کنید. همانطور که مشاهده خواهید کرد پروژه اجرا می‌شود اما تنها با یک صفحه خالی روبرو خواهید شد.

نوشتن محتوا برای سایت

پس از اینکه پروژه خود را ایجاد کردید می بایست برای آن محتوا بنویسید. به این مورد توجه کنید که دستورات زبان برنامه نویسی پی اچ پی با php؟> شروع شده و با <؟ تمام می‌شود. می‌توانید دستورات php را داخل تگ‌های HTML نیز قرار دهید. در سایتی که مدنظر ما است می‌خواهیم چند کار انجام دهیم که ابتدا به صورت تئوری آن‌ها را توضیح می‌دهیم، سپس شروع به کدنویسی می‌کنیم.

مرحله اول: ایجاد فایل index.php

در فایل index.php که ایجاد کردیم، قصد داریم برای راحتی کار یک متغیر تعریف کنیم و نام یا همان تایتل سایت را داخل آن قرار دهیم. برای ایجاد متغیر در زبان برنامه نویسی php از کاراکتر $ استفاده می‌شود. طبق کد زیر متغیر را ایجاد می‌کنیم:

<?php
$title = "صفحه اصلی";

?>

مرحله دوم: ایجاد فایل Template.php

حال می‌خواهیم یک فایل دیگر ایجاد کنیم و محتوای از جمله هدر و فوتر سایت را در آن بنویسیم. سپس با فراخوانی متغیر title$ می‌توان عنوان را به سایت اضافه کرد. برای این کار ابتدا یک فایل جدید در همان مسیر ایجاد می‌کنیم و نام آن را Template.php قرار می‌دهیم. این فایل در برگیرنده همه بخش‌های مهم سایت خواهد بود. پس از ایجاد فایل، برای این که بتوانیم محتویات این فایل را در صفحه اصلی یا همان index.php فراخوانی کنیم، از یک دستور ساده include استفاده خواهیم کرد. بدین ترتیب کد زیر را قبل از پایان تگ php یعنی دستور <? قرار دهید.

include 'Template.php';

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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<p>Hello World!</p>	

</body>
</html>

هر کدام از بخش‌های کد HTML به منظور خاصی استفاده می‌شود. برای مثال تگ head شامل عنوان سایت، اطلاعات متا و لینک‌هایی است که فراخوانی می‌شوند (مانند فایل‌های stylesheet). از آنجایی که می‌خواهیم برای سایت خود عنوان اضافه کنیم (همان متغیری که در مرحله قبل ایجاد و ذخیره کردیم) بنابراین باید کد زیر را داخل تگ head قرار دهیم:

<title><?php echo $title; ?></title>

در زبان برنامه نویسی php از دستور echo برای چاپ استفاده می‌شود. به همین دلیل ابتدا دستور چاپ، سپس نام متغیری که در مرحله قبل ایجاد کردیم و عنوان سایت را در آن ذخیره کردیم آوردیم. در ادامه می‌خواهیم از چندین تگ دیگر استفاده کنیم و به ترتیب هدر، منو، محتوای اصلی و فوتر را طراحی کنیم. این موارد می‌بایست داخل تگ body قرار بگیرد. سپس با استفاده از کلاس‌ها و آیدی در CSS استایل دهی خواهیم کرد.

مرحله سوم: ایجاد فایل stylesheet و لینک دادن آن به صفحه اصلی

در داخل پوشه اصلی، یک پوشه جدید به نام Styles ایجاد کردیم و داخل آن یک فایل سی اس اس به نام Stylesheet.css ساختیم. این فایل در برگیرنده استایل سایت خواهد بود. برای این که بتوانیم این فایل را به سایت لینک کنیم، می‌بایست کد زیر را داخل تگ head قرار دهیم:

<link rel="stylesheet" type="text/css" href="Styles/Stylesheet.css"/>

برای زیبایی بیشتر سایت، می‌خواهیم از فونت و رنگ پس زمینه اصلی استفاده کنیم. برای اغین کار باید یک استایل برای تگ body بنویسیم. بنابراین کد زیر را در فایل CSS کپی کنید، نتیجه اصلی را در آخر کار متوجه خواهید شد:

@font-face
{
    font-family: 'iransans';
    src: url(font/IRANSansWeb.woff);
}

body
{
    font-family: 'iransans';
    background-color: #e9e9e9;
}

مرحله چهارم: ایجاد تگ بدنه اصلی سایت

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

<div id="wrapper">

</div>

به این تگ یک آیدی به نام wrapper تعریف کرده‌ایم. بیایید برای این آیدی استایل بنویسیم. توضیحات هر خط کد در مقابل آن آورده شده است. کدهای زیر را به فایل CSS خود اضافه کنید:

#wrapper
{
    width: 1080px; /*تنظیم عرض*/
    background-color: white; /*رنگ پس زمینه*/
    margin: 0 auto; /*فضای بیرونی*/
    padding: 10px; /*فضای درونی*/
    border: 5px solid #dedede; /*حاضیه*/
}

مرحله پنجم: ایجاد هدر برای سایت

می‌خواهیم یک هدر دارای تصویر برای سایت ایجاد کنیم. برای این کار تنها کافیست یک تگ ایجاد کنیم و به آن استایل دهیم. برای این کار کد زیر را در داخل تگ div با آیدی wrapper قرار دهید.

<div id="banner"></div>

حال برای استایل دادن کد زیر را به فایل CSS اضافه کنید:

#banner
{
    background-image: url(../Images/banner.jpg); /*تصویر پس زمینه*/
    background-repeat: no-repeat; /*تکرار تصویر پس زمینه*/
    background-size: cover; /*سایز تصویر پس زمینه*/
    border: 5px solid #dedede; /*حاشیه*/
    border-radius: 15px; /*گردی حاشیه*/
    height: 200px; /*ارتفاع*/
}

اگر دقت کرده باشید، درکد بالا از یک تصویر استفاده کرده‌ایم. مسیری که این تصویر دارد به آدرس (Images/banner.jpg/..) است. تنها کافیست یک پوشه به نام Images ایجاد کنید و تصاویر خود را در داخل آن قرار دهید.

مرحله ششم: ایجاد منو

برای ایجاد منو در سایت تنها کافیست از تگ nav استفاده کنید. کد زیر را در ادامه کد HTML بالا قرار دهید:

<nav id="navigation">
    <ul id="nav">
        <li><a href="index.php">صفحه اصلی</a></li>
        <li><a href="#">تماس با ما</a></li>
        <li><a href="#">درباره ما</a></li>
        <li><a href="#">فروشگاه</a></li>
    </ul>
</nav>

برای استایل دهی به منو کد زیر را به فایل CSS اضافه کنید:

#navigation
{
    height: 60px; /*ارتفاع*/
    border: 3px solid #E3E3E3; /*حاشیه*/
    margin-top: 20px; /*فضای بیرونی*/
    text-shadow: 0.1em 0.1em #333; /*سایه*/
    background-image: url(../Images/bar_background.png); /*تصویر پس زمینه*/
}

#nav
{
    list-style: none; /*نوع نمایش*/
}

#nav ul
{
    margin: 0; /*فضای بیرونی*/
    padding: 0; /*فضای درونی*/
    width: auto; /*عرض*/
}

#nav li
{
    font-size: 24px; /*سایز متن*/
    float: right; /*چیدمان در راست*/
    width: 180px; /*عرض*/
    height: 50px; /*ارتفاع*/
}

#nav a:link, nav a:active, nav a:visited
{
    color: #fff; /*رنگ متن*/
    text-decoration: none; /*نوع نمایش لینک*/
}

#nav a:hover
{
    color: lightblue; /*رنگ متن در هنگام قرار گرفتن ماوس*/
}

مرحله هفتم: ایجاد محتوا در بدنه

برای نوشتن محتوا تنها کافیست از تگ‌هایی نظیر پاراگراف، تصویر و تیتر استفاده کنیم. همانطور که مشاهده می‌کنید، سه تصویر به نام های coffee1 و coffee2 و coffee3 استفاده کرده‌ایم که در پوشه‌ای به نام Images قرار دارند. همچنین از تگ‌های <p> برای ایجاد پاراگراف و از تگ <h3> برای تیتربندی استفاده کرده‌ایم. به طور کلی این بخش مربوط به طراحی وب است و برای آن می‌بایست مقدار کمی HTML و CSS بلد باشید. اگر هنوز یادگیری این زبان را شروع نکرده‌اید، پیشنهاد می‌کنیم مطلب آموزش ساخت قالب ساده HTML را حتماً مطالعه فرمایید. این موارد سلیقه‌ای هستند و می‌توانید از هرکدام که بخواهید استفاده نمایید. کد زیر را در ادامه کد HTML بالا قرار دهید:

<div id="content_area">
    <img src="Images/coffee1.png" class="imgLeft" />
    <p>
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز
    و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
    شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای
    علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
    </p>
    <img src="Images/coffee2.png" class="imgRight" />
    <h3>عنوان دو</h3>
    <p>
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز
    و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
    شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای
    علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
    </p>
    <img src="Images/coffee3.png" class="imgLeft" />
    <h3>عنوان سه</h3>
    <p>
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز
    و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
    شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای
    علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
    </p>
</div>

برای استایل دهی به تگ‌هایی که ایجاد کردیم، کد زیر را به فایل CSS اضافه کنید:

#content_area
{
    float: left; /*چیدمان در چپ*/
    width: auto; /*عرض*/
    margin: 20px 0 20px 0; /*فضای بیرونی*/
    padding: 10px; /*فضای درونی*/
    text-align: justify; /*مرتب سازی*/
    direction: rtl; /*چیدمان متن از راست*/
    line-height: 3; /*فاصله قلم*/
}

#content_area p
{
    font-size: 14px; /*سایز متن*/
}

.imgLeft
{
    float: left; /*چیدمان در چپ*/
    width: 240px; /*عرض*/
    height: 150px; /*ارتفاع*/
    margin: 0px 10px 10px 0; /*فضای بیرونی*/
    padding: 10px; /*فضای درونی*/
}

.imgRight
{
    float: right; /*چیدمان در راست*/
    width: 200px; /*عرض*/
    height: 250px; /*ارتفاع*/
    margin: 0px 0 10px 10px; /*فضای بیرونی*/
    padding: 10px; /*فضای درونی*/
}

مرحله هشتم: ایجاد فوتر

در نهایت برای فوتر سایت می‌توانید تنها با یک تگ footer به راحتی این کار را انجام دهید. کد زیر را در ادامه کد HTML بالا وارد کنید:

<footer>
    <p>تمامی حقوق محفوظ است</p>
</footer>

حال برای استایل دهی کد زیر را در فایل CSS قرار دهید:

footer
{
    clear: both; /*انتقال عنصر به آخر صفحه*/
    width: auto; /*عرض*/
    height: 40px; /*ارتفاع*/
    padding: 10px; /*فاصله درونی*/
    border: 3px solid #E3E3E3; /*حاشیه*/
    text-align: center; /*مرتب سازی*/
    color: #000; /*رنگ متن*/
    font-size: 14px; /*سایز متن*/
    text-shadow: 0.03em 0.03em #333; /*سایه*/
    background-image: url(../Images/bar_background.png); /*تصویر پس زمینه*/
}

مشاهده خروجی در مرورگر

بدین ترتیب طراحی سایت با php به اتمام رسید و حالا می‌توانید مرورگر خود را باز کرده و سایت خود را مشاهده نمایید. هر قسمتی از سایت را به دلخواه می‌توانید از طریق فایل Template.php ویرایش کنید. سورس کد کامل این سایت در قالب فایل زیپ در ادامه مطلب قرار خواهد گرفت که می‌توانید دانلود بفرمایید. پیشنمایش خروجی سایت را می‌توانید در ویدیو زیر مشاهده نمایید.

این ویدیو تنها یک پیشنمایش از سایت طراحی شده است.

سخن آخر درمورد طراحی سایت با php

در این پست یاد گرفتیم که چگونه با استفاده از زبان‌های HTML و CSS و همچنین PHP یک صفحه وب طراحی کنیم و آن را در شبیه ساز سرور اجرا کنیم. در ابتدای این پست آموزش نصب و راه اندازی نرم افزار xampp، از دانلود تا اجرای نرم افزار گذاشته شده و سپس در مورد انتخاب یک IDE مناسب برای طراحی سایت با php بحث شده است. روال کار به صورت پروژه محور جلو رفته و تکه کدهای قسمت های مختلف به طور کامل و شفاف توضیح داده شده است. امیدورایم این پست به شما کمک کرده باشد. موفق باشید.