گروه انفورماتیک لیمو

طراحی سایت انواع وب سایت های گرافیکی, اتوماسیون آنلاین, نرم افزار های تحت وب و وب سرویس

www.Limoo-IT.ir - www.TMWeb.ir

طراحی سایت لیمو, قوی ترین تیم طراحی سایت در غرب کشور

طراحی سایت در بروجرد, طراحی سایت در خرم آباد, طراحی سایت در لرستان


آموزش طراحی سایت به زبان PHP بخش پنجم ساخت منو

نگاه دوم شروع فصل برنامه نویسی وقت آن رسیده پروژه اصلی را شروع کنیم. در ابتدا با ساختن دو منو شروع می کنیم. اول منوی عمودی, سپس منوی افقی

وقت آن رسیده پروژه اصلی را شروع کنیم. در ابتدا با ساختن دو منو شروع می کنیم. اول منوی عمودی, سپس منوی افقی. NotePad را باز کنید و دستورات زیر را در آن بنویسید:

<style media="all">

body{

                        direction:rtl;

            }

            .mymenu{

                        padding:0;

                        margin:10px;

            }

            .mymenu .btn{

                        list-style:none;

                        width:200px;

                        line-height:30px;

                        background-color:#333;

                        color:#FFF;

                        border-radius:5px;

                        padding:5px;

                        margin:5px;

                        transition:0.2s;

            }

            .mymenu .btn:hover{

                        background-color:#FFF;

                        color:#333;

            }

</style>

 

<ul class="mymenu">

            <li class="btn">صفحه اول</li>

            <li class="btn">درباره ما</li>

            <li class="btn">محصولات</li>

            <li class="btn">گالری عکس</li>

</ul>

حال این فایل را با نام rightmenu.php ذخیره کنید. قبل از اینکه فایل را ببندید بدانید که تگ <ul> برای ایجاد یک لیست استفاده می شود و تگ های <li> هر کدام یکی از سطرهای لیست هستند. دقیقاً مانند لیست نرم افزار Word.

ما با این کد یک لیست عمودی ایجاد کرده ایم, اما نیاز است این سطرها را به صفحات سایتمان لینک دهیم. پس تغییرات زیر را اعمال کنید(عناصر درون <ul>):

<ul class="mymenu">

            <a href="./" title="صفحه اول"><li class="btn">صفحه اول</li></a>

            <a href="./about.php" title="درباره ما"><li class="btn">درباره ما</li></a>

            <a href="./products.php" title="محصولات"><li class="btn">محصولات</li></a>

            <a href="./gallery.php" title="گالری عکس"><li class="btn">گالری عکس</li></a>

</ul>

حال که این کدها آماده شده اند نوبت آن رسیده با PHP آشنا شوید. این فایل را ذخیره کنید و به ادامه دقت کنید.

 

تعریف زبان برنامه نویسی PHP

PHP یک زبان سمت سرور است که کار آن پردازش و مقداردهی و مقداریابی, ذخیره, تصمیم گیری و این قبیل رفتارها برای اطلاعات موجود در صفحه ی وب ماست. اجرای فایل PHP برعکس HTML که توسط دابل کلیک انجام میشد, نیازمند ایجاد یک سرور است. یا حقیقی یا مجازی. در یک کامپیوتر شخصی که وسیله ای به نام سرور وجود ندارد ما با نرم افزار XAMPP (زمپ) یک وب سرویس مجازی ایجاد می کنیم.

نرم افزار XAMPP را دانلود کنید (https://www.apachefriends.org/download.html) و در درایوی که ویندوز در آن نباشد نصب کنید (برای امنیت و نگهداری مناسب).

حال به محل نصب XAMPP رفته و وارد پوشه ی htdocs شوید. تمامی اطلاعات داخل این پوشه را حذف نمایید و یک پوشه جدید با اسم MyFirst ایجاد نمایید و فایلی که ساخته بودید را با نام index.php در اینجا ذخیره کنید. از این به بعد ما فقط با XAMPP سروکار داریم. حال به پوشه محل نصب XAMPP رفته و فایل XAMPP-CONTROL را اجرا نمایید.

 

شکل 5 نرم افزار زمپ

سپس روی Start که در مقابل Apache (سرور php) و MySql (پایگاه داده) قرار دارند کلیک کنید تا به شکل زیر در بیایند:

 

شکل 6 نرم افزار زمپ در حال اجزا

دکمه ی Explorer پوشه ی محل نصب را برای شما باز می کنید. فراموش نکنید که فایل های شما در پوشه ی htdocs ذخیره شوند.

مرورگر خود را باز کنید (ترجیحاً Chrome کار کنید چون نحوه نمایش آن در تمام مرورگرها یکسان است). یک وب سایت باید طوری ساخته شود که در تمام مرورگرها به یک شکل دیده شود. Google Chrome در این هدف به ما کمک خواهد کرد. در مرورگر آدرس  http://localhost را وارد کنید. روی فولدر MyFirst کلیک کنید و Web Page خود را ببینید.

 

شکل 7

اگر با نمایش محتوای فارسی به مشکل برخوردید کد زیر را به تگ <head> اضافه کنید:

  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

شاید بپرسید اگر فایل دیگری نیز داشتیم از کجا بفهمیم کدام را باز میکند؟ پاسخ این است که به صورت پیشفرض تمامی سرورها فایلی با نام index را باز می کنند وindex.html  به index.php نیز اولویت دارد. امتحان کنید!

حال شما یک صفحه با محتوای منو شامل چهار لینک مشاهده می کنید.

در ادامه:

  • با بوتسترپ آشنا می شویم.
  • Lay Out بندی که یاد گرفتیم را تکمیل می کنیم.
  • Fav Icon سایتمان را ایجاد می کنیم.
  • سایر صفحات را ایجاد می کنیم.
  • از پایگاه داده استفاده خواهیم کرد.
  • فرم لاگین خواهیم ساخت.
  • صفحه ای برای ارسال مطلب به صورت آنلاین ایجاد خواهیم کرد.

حال از شما می خواهم نام فایل index.php را به rmenu.php تغییر دهید(مخفف  rightmenu)سپس یک فایل دیگر با دستورات زیر ایجاد نمایید:

محتویات داخل تگ <Style> دستورات CSS هستند. ویژگی های جدید:

<style media="all">

            body{

                        direction:rtl;

            }

            .mymenu2{

                        padding:0;

                        margin:10px;

            }

            .mymenu2 .btn2{

                        list-style:none;

                        width:200px;

                        line-height:30px;

                        background-color:#333;

                        color:#FFF;

                        border-radius:5px;

                        padding:5px;

                        margin:5px;

                        display:inline-block;

                        transition:0.2s;

            }

            .mymenu2 .btn2:hover{

                        background-color:#FFF;

                        color:#333;

            }

</style>

 

<ul class="mymenu2">

            <a href="./" title="صفحه اول"><li class="btn2">صفحه اول</li></a>

            <a href="./about.php" title="درباره ما"><li class="btn2">درباره ما</li></a>

            <a href="./products.php" title="محصولات"><li class="btn2">محصولات</li></a>

            <a href="./gallery.php" title="گالری عکس"><li class="btn2">گالری عکس</li></a>

</ul>

 

List-style: none;

باعث می شود نقطه ای کنار لیست نشان داده نشود

Line-height:30px;

ارتفاع خط المان مورد نظر را مشخص می کند

Background-color:#333;

رنگ زمینه با مشخص می کنید

Color:#FFF;

رنگ متن را مشخص می کند

Border-radius:5px;

شعاع دایره ای که در گوشه های المان قرار دارند

Transition:0.2s;

زمان تغییر به پوزیشن :hover به حالت انیمیشن

Display: inline-block;

باعث می شود عناصر li خطی چیده شوند.

 

 

شکل 8

حالا این فایل را با نام topmenu.php ذخیره کنید. ما الآن دو فایل منو داریم. rmenu.php و topmenu.php

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

Bootstrap یک کتابخانه است, کتابخانه ای متشکل از دستورات JavaScript و CSS که حالت نمایش متفاوت و استانداردی را در تبلت, مانیتور و گوشی تلفن همراه ایجاد می کند. دوفایلی که تا به حال ساخته اید در پوشه ی myfirst در htdocs ریخته و به سراغ دانلود بوتسترپ بروید.

  • http://www.getbootstrap.com/

پس از دانلود فایل های بوتسترپ آنها را در پوشه ی myfirst کپی نمایید. همینطور فایل jQuery را نیز دانلود کرده و کنار آنها بگذارید.

  • https://www.jquery.com

 

پوشه ی myfirst شما باید به این شکل باشد.

شکل 9 پوشه پروژه

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

(از اینجا به بعد مجازید با نرم افزار Adobe DreamWeaver  کار کنید که در دیسک همراه کتاب موجود می باشد)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>سایت من</title>

<script language="javascript" src="jquery-1.11.2.js"></script>

<script language="javascript" src="js/bootstrap.js"></script>

<link href="css/bootstrap.css" rel="stylesheet" />

</head>

 

<body>

            <div class="toolbar">

                         <?php include(‘topmenu.php’); ?>

</div>

    <?php include(‘rmenu.php’); ?>

</body>

</html>

توضیحات:

  • اگر بخواهیم به یک فایل جاوا اسکریپت وصل شویم تا بتوانیم از دستورات آن در کار استفاده کنیم باید از تگ <script src=path></script> استفاده کنیم. مانند بالا. ویژگی src در این تگ آدرس فایل JS را نشان می دهد. دقت کنید که آدرس دهی مانند لینوکس است. به طور مثال فایلی که در پوشه ی CSS به نام Style.css است با این آدرس قابل دسترسی است : “./css/style.css”
  • آیا می توانیم دستورات CSS را نیز در یک فایل دیگر بریزیم؟ بله. و این دقیقا کاری است که ما می خواهیم انجام دهیم.
    • کلیه ی دستورات CSS در فایلی که ایجاد کرده ایم را کپی کنید در NotePad و با نام mystyle.css پیش فایل index.php ذخیره کنید. بدون تگ <style>
  • حال با استفاده از تگ زیر به آن وصل می شویم.
  • <link href="mystyle.css" rel="stylesheet" />
  • فایل های rmenu و topmenu هر کدام را به صفحه اول ضمیمه کردیم. بنابراین هر کدام از آنها به دستورات CSS موجود دسترسی دارند.
  • تگ <link> صرفاً برای اتصال فایل CSSاستفاده می شود.
  • دقت کنید آدرس دهی ها طبق اصول پوشه ها در لینوکس مقداردهی می شوند, اصولی که در DOS داشتیم:
  • ./ پوشه جاری
  • ../   پوشه والد
  • <script language="javascript" src="jquery-1.11.2.js"></script>
  • این تکه کد jQuery را به سایت متصل می کند.
  • <script language="javascript" src="js/bootstrap.js"></script>
  • این کد, فایل جاوااسکریپت بوتسترپ را به سایت متصل می کند.
  • <link href="css/bootstrap.css" rel="stylesheet" />
  • این کد هم فایل CSS بوتسترپ را به سایت متصل می کند.
  • در <body> یک تگ div قرار داده ایم, با کلاس toolbar در داخل آن دو تگ قرار گرفته اند که با <?php شروع و با ?> تمام می شوند. این ها دستورات PHP هستند. به دنیای PHP خوش آمدید!

بر خلاف سایر کتاب ها ما  از دستورات کاربردی شروع می کنیم, اگر بخواهیم مطالب را مانند جغرافیا حفظ بکنیم W3Schools کفایت می کند!

دستور

  • <?php include(‘topmenu.php’); ?>

محتویات فایل topmenu.php  را عیناً وارد صفحه ی index می کند بطوریکه انگار دستورات برای فایل index.php هستند.همین صورت rmenu.php نیز ضمیمه شده است. خوبی این روش این است که یک فایل را می توان در چند جای مختلف فراخوانی کرد و با تغییر یک فایل تمام صفحات دیگر نیز تغییر خواهند کرد. چیزی شبیه object در برنامه نویسی شئ گرا.

تاریخ مطلب: 12 اردیبهشت 1400