آموزش طراحی سایت (HTML CSS Javascript) | آتریا

آموزش ساده php

طراحی منوی فروشگاه 3
جلسه ی اول بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 3
در قسمت چهارم از این جلسه، به آموزش 'طراحی منوی فروشگاه 3' می پردازیم.
آنچه که در قسمت قبل طراحی شد
در قسمت قبل، موارد زیر آموزش داده شدند:
1. طراحی منو ها و قرار دادن آیکن در آنها.
2. قرار دادن نوشتار مربوط به هر منو در کنار آیکن.
مشاهده آنچه که در قسمت قبل طراحی شد:
آنچه که در قسمت 'طراحی منوی فروشگاه بخش 3' خواهید آموخت
در قسمت 'طراحی منوی فروشگاه 3' موارد زیر آموزش داده خواهند شد:
1. آموزش طراحی زیر منو برای منوی اصلی در سطح متوسط.
2. آموزش نحوه ی صحیح استفاده از پوزیشن های relative و absolute.
3. آموزش استفاده از عناصر <ul> و <li> تو در تو برای ایجاد زیر منو.
1.آموزش طراحی زیر منو برای منوی اصلی در سطح متوسط
در این قسمت قصد داریم برای منوی طراحی شده، یک زیر منو به صورت بازشونده ایجاد کنیم، به طوری که با قرار گرفتن موس بر روی گزینه های منوی اصلی، این زیر منو باز شود:
اگر به زیر منوی اشاره شده در عکس بالا دقت کنید، این زیر منو درواقع یک <div> است که از سمت چپ، تا سمت راست صفحه گسترده شده است و کل صفحه را پوشش می دهد. در ابتدای کار قصد داریم این عنصر <div> را ایجاد کنیم.
برای ایجاد این عنصر <div>، فایل index.php را باز کرده تا بتوانیم شروع به نوشتن کدهای مورد نظر کنیم. سپس بعد از <div> منو، یک عنصر <div> ایجاد می کنیم و نام id آن را 'menu1' قرار می دهیم و استایل آن را به صورت زیر تعریف می کنیم:
style
```
<div id="menu1" style="width:100%; height:37px; background:#006;>
```
نکته ی مهمی که در اینجا لازم است به آن توجه کنیم، از این قرار است که باید پوزیشن(position) این <div> را به صورت 'absolute' قرار دهیم. پس کد بالا به صورت زیر در خواهد آمد:
با رفرش(refresh) کردن صفحه ی مورد نظر، عنصر <div> که آن را ایجاد نمودیم، ظاهر خواهد شد و به صورت زیر در خواهد آمد:
اکنون یک سوال به وجود می آید و آن عبارت است از اینکه، چرا در کدهای بالا، مقدار position را برابر با 'absolute' قرار دادیم؟
دلیل اینکه در قسمت بالا مقدار 'position' را به صورت absolute انتخاب کردیم، این است که...
دسترسی به موارد آموزشی بالا در بسته خریداری شده
- شماره جلسه: 1
- نام فایل ویدئو: 04
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی منوی فروشگاه 3) در ویدئو: 00:30
طراحی منوی فروشگاه 4
جلسه ی اول بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 4
در قسمت پنجم از این جلسه، به آموزش 'طراحی منوی فروشگاه 4' می پردازیم.
آنچه که در قسمت قبل طراحی شد
در قسمت قبل، موارد زیر آموزش داده شدند:
1. نحوه ی طراحی یک زیر منو برای منوی اصلی.
2. نحوه ی طراحی عناصر درون این زیر منو.
آنچه که در قسمت 'طراحی منوی فروشگاه 4' خواهید آموخت
در قسمت 'طراحی منوی فروشگاه 4' موارد زیر آموزش داده خواهند شد:
1. آموزش مخفی کردن زیرمنوها به هنگام باز کردن صفحه، با استفاده از دستور display.
2. آموزش استفاده از جی کوئری برای ساختن زیر منوها به صورت پیشرفته.
3. آموزش استفاده از دستور include برای الحاق کردن یک فایل php به فایل کنونی.
4. آموزش نحوه ی صحیح اضافه کردن پلاگین جی کوئری به صفحه ی مورد نظر.
5. آموزش نحوه ی صحیح وارد کردن کدهای جی کوئری و جاوااسکریپت به صفحه مورد نظر.
6. آموزش استفاده از دستورهای hover و slideDown در متحرک سازی زیرمنوها.
7. آموزش نحوه ی صحیح بستن زیر منوها به هنگام خارج کردن موس، از آنها.
1.آموزش مخفی کردن زیرمنوها به هنگام باز کردن صفحه، با استفاده از دستور display
همان طور که در تصویر زیر مشاهده می نمایید،بعد از اضافه کردن زیرمنو ها به منوهای 'گوشی همراه' و 'لپ تاپ'، این زیر منو ها، بر روی یکدیگر قرار می گیرند:

همان طور که می دانید، هنگام باز کردن صفحه ی مورد نظر، هیچ زیر منویی نباید نمایش داده شود، و تنها هنگامی که اشاره گر موس را بر روی منو ها قرار می دهیم، این زیر منو ها باید نمایش داده شوند. به همین دلیل باید خصوصیت display را برای <div> بنفش رنگ، برابر با 'none' قرار دهیم:
و همچنین خصوصیت display را برای <ul> هایی که زیر منوها را دربر گرفته اند، برابر با 'none' قرار می دهیم:

اکنون، با رفرش(refresh) کردن صفحه، خواهید دید که مقدار display برای بخش مربوط به زیرمنو، برابر با 'none' شده است و دیگر در صفحه نمایش داده نمی شود...
دسترسی به موارد آموزشی بالا در بسته خریداری شده
- شماره جلسه: 1
- نام فایل ویدئو: 05
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی منوی فروشگاه 4) در ویدئو: 03:00
طراحی منوی فروشگاه 5
جلسه ی اول بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 5
در قسمت ششم از این جلسه، به آموزش 'طراحی منوی فروشگاه 5' می پردازیم.
آنچه که در قسمت قبل طراحی شد
در قسمت قبل، موارد زیر آموزش داده شدند:
1. نحوه ی مخفی کردن زیر منوها به هنگام باز کردن صفحه.
2. نحوه ی اضافه کردن دستورات جی کوئری مربوط به باز شدن منو.
3. نحوه ی متحرک سازی زیر منو ها با استفاده از دستورات جی کوئری.
آنچه که در قسمت 'طراحی منوی فروشگاه 5' خواهید آموخت
در قسمت 'طراحی منوی فروشگاه 5' موارد زیر آموزش داده خواهند شد:
1. نحوه ی حل مشکل محو شدن زیرمنوها، با حرکت موس از روی منوها به سمت زیرمنو.
2. نحوه ی حل مشکل محو شدن <div> دربر دارنده ی زیر منو، با خارج کردن موس از قسمت منو.
3. نحوه ی حل مشکل ایجاد شدن <div> زیر منو برای منوی 'صفحه نخست'.
4. نحوه ی حل مشکل محو نشدن <div> زیر منو، با حرکت موس از دیگر منوها به منوی 'صفحه نخست'.
5. نحوه ی تبدیل اشاره گر موس به علامت 'دست' (poiner) به هنگام رفتن بر روی منو.
6. نحوه ی تبدیل خط جداکننده ی منوها به یک رنگ دیگر، به هنگام رفتن بر روی منوی مربوط به آن.
6.نحوه ی تبدیل خط جدا کننده ی منوها به یک رنگ دیگر، به هنگام رفتن بر روی منوی مربوط به آن
کاری که اکنون برای زیباتر و حرفه ای تر شدن منو قصد انجام آن را داریم، عبارت است از اینکه، کاری کنیم تا اگر کاربر اشاره گر موس را بر روی یکی از عناصر منو قرار دهد، خط جداکننده ی منوها، برای آن منو به رنگ قرمز تبدیل شود:
برای انجام این کار نرم افزار فتوشاپ را باز می کنیم و از عکس خط سفید رنگ جداکننده ی منوها، یک نسخه ی قرمز رنگ ایجاد می کنیم:
1. ابتدا با دوبار کلیک کردن، علامت قفل را محو کنید.
2. گزینه ی سطل رنگ را از سمت چپ انتخاب کنید.
3. با کلیک بر روی عکس مورد نظر، رنگ آن را تغییر دهید.
4. عکس مورد نظر را ذخیره کنید.
بعد از انجام موارد ذکر شده، دوباره وارد صفحه ی script.php می شویم و کد مشخص شده ی زیر را اضافه می کنیم:
در دستور خط 5، عبارت 'this' به سلکتور مشخص شده در خط شماره 3 اشاره می کند و...
دسترسی به موارد آموزشی بالا در بسته خریداری شده
- شماره جلسه: 1
- نام فایل ویدئو: 06
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی منوی فروشگاه 5) در ویدئو: 17:28
طراحی منوی فروشگاه 6
جلسه ی دوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 6
در قسمت ششم از این جلسه، به آموزش 'طراحی منوی فروشگاه 6' می پردازیم.
آنچه که در قسمت قبل طراحی شد
در قسمت قبل، موارد زیر آموزش داده شدند:
1. نحوه ی طراحی و تکمیل منوی مورد نظر.
2. نحوه ی تغییر رنگ خط جداکننده ی منوها.
طراحی منوی کاربری 1
جلسه ی دوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی کاربری 1
در قسمت اول از این جلسه، به آموزش 'طراحی منوی کاربری 1' می پردازیم.
آنچه که در قسمت قبل طراحی شد
در قسمت قبل، موارد زیر آموزش داده شدند:
1. نحوه ی طراحی و تکمیل منوی مورد نظر.
2. نحوه ی تغییر رنگ خط جداکننده ی منوها.
آنچه که در قسمت 'طراحی منوی کاربری 1' خواهید آموخت
1. آموزش ایجاد منوی کاربری پایه و استایل دهی به آن.
2. آموزش ایجاد عناصر منوی کاربری و استایل دهی به آنها.
3. آموزش نحوه ی دانلود کردن آیکن های مورد نیاز از اینترنت.
4. آموزش نحوه ی اضافه کردن آیکن ها به عناصر منوی کاربری.
1.آموزش ایجاد منوی کاربری پایه و استایل دهی به آن
همان طور که در تصویر زیر مشاهده می کنید، در این قسمت قصد داریم منوی کاربری را ایجاد کنیم:

برای ایجاد این بخش، ابتدا نرم افزار Dreamweaver را باز کنید، و برای باز کردن محتویات سایت مورد نظر، از منوی 'site' گزینه ی 'manage sites' را انتخاب کرده و سایت مورد نظر خود را که قبلا روی آن کار می کردیم، انتخاب کنید. همان طور که می دانید، از قبل، نام سایت خود را eshop قرار دادیم، پس گزینه ی 'eshop' را انتخاب کنید. سپس خواهید دید که محتویات سایت در سمت راست صفحه نشان داده خواهد شد:

در ادامه، برای اضافه کردن کدهای خود، فایل 'index.php' را باز می کنیم، و در زیر div با آی دی "top1" شروع به اضافه کردن کدهای خود می کنیم. ابتدا یک عنصر <div> ایجاد می کنیم، و id آن را به دلخواه برابر با 'user' قرار می دهیم. سپس برای اینکه ویژگی های ظاهری این <div> را مشخص کنیم، تگ <style> را باز می کنیم، و اعمال زیر را انجام می دهیم:
1. width دیو(div) مورد نظر را برابر با 1100 پیکسل قرار می دهیم.
2. height دیو(div) مورد نظر را برابر با 45px قرار می دهیم.
3. سایه ی دیو(div) مورد نظر را به صورت box-shadow: 1px 1px 4px #eee تنظیم می کنیم.
4. برای تعریف رنگ پس زمینه، دستور background: #999 را تنظیم می کنیم.
اکنون اگر صفحه را رفرش(refresh) کنیم، مشاهده می کنیم که این <div> به وجود آمده است، اما هنوز در جایگاه اصلی خود قرار نگرفته است، برای اینکه بتوانیم این <div> را در وسط صفحه قرار دهیم از دستور margin: 0 auto استفاده می کنیم:

دسترسی به موارد آموزشی بالا در بسته خریداری شده
- شماره جلسه: 2
- نام فایل ویدئو: 07
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی منوی کاربری 1) در ویدئو: 00:00

فیلدهای الزامی در PHP

در این آموزش، نحوه ی ساخت فیلدهای الزامی (required) و نمایش پیغام خطای مناسب نشان داده خواهد شد.

فیلدهای الزامی در PHP

Wiki

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

قوانین اعتبارسنجی:

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

در کد زیر، تعدادی متغیر جدید با نام های nameErr$ و emailErr$ و genderErr$ و websiteErr$ اضافه شده است. این متغیرهای خطا، متن خطای مورد نظر را برای فیلدهای الزامی در خود نگه می دارند. ما همچنین برای هر متغیر POST_$ یک دستور if... else اضافه کرده ایم. این دستور شرطی، چک می کند که اگر متغیر POST_$ خالی است (با استفاده از تابع ()empty) یک متن خطای مناسب در متغیرهای خطا ذخیره می کند، و اگر خالی نبود، مقدار برگشتی تابع ()test_input در متغیر متناظرش ذخیره می شود:

<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST")
{

if (empty($_POST["name"]))
    {$nameErr = "Name is required";}
else
    {$name = test_input($_POST["name"]);}

if (empty($_POST["email"]))
    {$emailErr = "Email is required";}
else
    {$email = test_input($_POST["email"]);}

if (empty($_POST["website"]))
    {$website = "";}
else
    {$website = test_input($_POST["website"]);}

if (empty($_POST["comment"]))
    {$comment = "";}
else
    {$comment = test_input($_POST["comment"]);}

if (empty($_POST["gender"]))
    {$genderErr = "Gender is required";}
else
    {$gender = test_input($_POST["gender"]);}
}
?>

نمایش متن خطا در PHP

Wiki

در فرم HTML، باید یک اسکریپت PHP اضافه نمایید. که متن خطای مورد نظر را نمایش می دهد:

مثال (فیلدهای الزامی در PHP)

<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
span{min-width: 200px;float: right;}
</style>
</head>
<body>

<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST")
{

   if (empty($_POST["name"]))
     {$nameErr = "وارد کردن نام الزامی است";}
   else
     {$name = test_input($_POST["name"]);}

   if (empty($_POST["email"]))
     {$emailErr = "وارد کردن ایمیل الزامی است";}
   else
     {$email = test_input($_POST["email"]);}

   if (empty($_POST["website"]))
     {$website = "";}
   else
     {$website = test_input($_POST["website"]);}

   if (empty($_POST["comment"]))
     {$comment = "";}
   else
     {$comment = test_input($_POST["comment"]);}

   if (empty($_POST["gender"]) || $_GET["gender"]=="undefined")
     {$genderErr = "انتخاب جنسیت الزامی سات";}
   else
     {$gender = test_input($_POST["gender"]);}

}

function test_input($data)
{
     $data = trim($data);
     $data = stripslashes($data);
     $data = htmlspecialchars($data);
     return $data;
}
?>
<h2>مثال اعتبارسنجی فرم ها در PHP</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div>
<span>نام:</span><input type="text" name="name">
<span class="error">*</span>
</div>
<div>
<span>ایمیل:</span><input type="text" name="email">
<span class="error">*</span>
</div>
<div>
<span>وب سایت:</span><input type="text" name="website">
<span class="error"></span>
</div>
<div>
<span>توضیحات:</span><textarea name="comment" rows="5" cols="40"></textarea>
<span class="error">*</span>
</div>
<div>
<span>جنسیت:</span>
<input type="radio" name="gender" value="female">زن
<input type="radio" name="gender" value="male">مرد
</div>
</div><input type="submit" name="submit" value="ارسال اطلاعات"></div>
</form>

<?php
if ($nameErr!="" || $emailErr!="" || $genderErr!="" || $websiteErr!="")
echo "<span style='color:red' >
         $nameErr <br /> $emailErr <br /> $genderErr <br /> $websiteErr
      </span>";
else
{
echo "<br /><h2>خروجی کدتان</h2>";
echo "نام :$name";
echo "<br />";
echo "ایمیل: $email";
echo "<br />";
echo "وب سایت: $website";
echo "<br />";
echo "توضیحات: $comment";
echo "<br />";
echo "جنسیت: $ender";
}
?>
</body>
</html>

خروجی کد بالا:

مثال اعتبارسنجی فرم ها در PHP

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

برای مشاهده فیلم ها و آموزش های پروژه محور برنامه نویسی PHP کلیک کنید.

کار با فرم های PHP

با استفاده از متغیرهای GET _$ و POST_$، می توانید سمت سرور مقادیر فرم HTML را دریافت نمایید.

یک فرم ساده HTML

Wiki

در مثال زیر، یک فرم ساده HTML با دو فیلد ورودی و یک دکمه submit نشان داده شده است:

مثال (کار با فرم های PHP)

<html>
<body>

<form action="welcome.php" method="post">
نام: <input type="text" name="name"><br>
ایمیل: <input type="text" name="email"><br>
<input type="submit" value="ارسال اطلاعات">
</form>

</body>
</html>

خروجی کد بالا:

زمانی که کاربر، اطلاعات فرم بالا را پر می کند و روی دکمه "submit" کلیک می کند، اطلاعات فرم برای پردازش به یک فایل PHP بنام "welcome.php" ارسال می شود. اطلاعات فرم با متد POST ارسال می شود.

فایل welcome.php

Wiki

برای نمایش اطلاعات ارسال شده به سرور، بصورت ساده می توانید همه متغیرها را چاپ نمایید:

<html>
<body>

نام :<?php echo $_POST["name"]; ?><br>
ایمیل: <?php echo $_POST["email"]; ?>

</body>
</html>

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

نام: beyamooz
ایمیل: این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

توجه: مثال بالا را می توان از طریق متد get نیز انجام داد. که البته نحوه انجام کار در بیاموزهای قبلی ذکر شده است.

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

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

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

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

برای مشاهده فیلم ها و آموزش های پروژه محور برنامه نویسی PHP کلیک کنید.

متدهای کلاس در PHP

تعریف Methodها
Wiki
Methodها در واقع توابعی هستند که داخل کلاس وجود دارند و با علامت "<-" صدا زده می شوند، مهمتر اینکه متدها به اعضای متغیرهای یک کلاس دسترسی دارند.
مثال1: در مثال زیر یک تابع ساده برای چاپ یک عبارت تعریف شده است:
<?php
class My_class
{
private $name="Amir";
function SayHello()
{
   print "Hello My Name is $this->name";
}
}

$obj=new My_Class();
$obj->SayHello();
?>
خروجی کد بالا:
Hello My Name is Amir
توجه: درون خود تابع برای دسترسی به تمامی متغیر ها و توابع دیگر با <-this$ و سپس نام تابع یا متغیر می توانیم عمل کنیم.
مثال2: در مثال زیر ابتدا اسممان، امیر است و بعد از صدا زدن تابع ()SetName به رضا تغییر می یابد:
<?php
class My_class
{
private $name="Amir";
function SetName($Param)
{
   $this->name=$Param;
}
function SayHello()
{
   print "Hello My Name is $this->name";
}
}

$obj=new My_Class();
$obj->SetName("Reza");
$obj->SayHello();
?>
خروجی کد بالا:
Hello My Name is Reza
در مثال بالا یک تابع به نام ()SetName تعریف کردیم که یک پارامتر دارد و می توانیم اسم را در همه جا تغییر بدهیم.
متغیرهای کلاس در PHP
متغییرها یا Properties
Wiki
اشیاء یا Objectها به متغییرهای خاصی دسترسی دارند که به آنها Property می گویند این Propertyها می توانند در هرجای بدنه کلاس تعریف شوند اما برای اینکه اسکریبتمان مرتب باشد بهتر است که در بالای کلاس تعریف شوند.
مثال:در my_class یک property به نام name با مقدار اولیه "Amir" تعریف شده است:
<?php
class my_class
{
public $name="Amir";
}

$obj1=new my_class();
$obj1->name="Reza";
$obj2=new my_class();
print "$obj1->name"."<br />";
print "$obj2->name"."<br />";
?>
خروجی کد بالا:
Reza
Amir
توضیح مثال بالا:
1. در مثال بالا متغییر یا Property تعریف شده، در ابتدا با مقدار "Amir" تنظیم شده است، ولی در ادامه با ساختن شیء obj1 و دسترسی به این متغییر مقدار آنرا به "Reza" تغییر می دهیم.
2. به این نکته توجه داشته باشید که بعد از اسم کلاس از دو پرانتز خالی استفاده نمودیم چون کلاس را ساده و بدون سازنده (Constructor) ساختیم.
  (بعداً به سازنده (Constructor) و مخرب (Destructor) می پردازیم.)
3. علامت "<-" به شما اجازه می دهد تا به متغییر های یک کلاس دسترسی داشته باشید.