آموزشphp به زبان ساده

: 07 مهر 1397

حذف اطلاعات یک جدول با استفاده از MySQLi و PDO

دستور DELETE FROM برای حذف رکورد از یک جدول استفاده می شود.

نحوه استفاده:

DELETE FROM table_name
WHERE some_column = some_value

نکته: قسمت WHERE مشخص می کند که چه رکورد یا رکوردهایی باید حذف بشوند، توجه داشته باشید که اگر این قسمت را در نظر نگیرید کلیه رکوردهای جدول حذف می شوند.

برای کسب اطلاعات بیشتر در مورد SQL، به لینک روبرو مراجعه فرمایید: آموزش SQL-مقدمه

به جدول "MyGuests" که در فصل های قبلی همین آموزش ایجاد شده است توجه کنید:

id	firstname	lastname	email	reg_date
1	John	Doe	این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید	2014-10-22 14:26:15
2	Mary	Moe	این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید	2014-10-23 10:22:30
3	Julie	Dooley	این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید	2014-10-26 10:48:23

در مثال زیر، رکوردی که id آن برابر با 3 است در جدول "MyGuests" حذف خواهد شد:

مثال(MySQLi Object-oriented)

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// ایجاد ارتباط
$conn = new mysqli($servername, $username, $password, $dbname);
// اطمینان از صحت ارتباط
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// تنظیم کوئری حذف
$sql = "DELETE FROM MyGuests WHERE id=3";

if ($conn->query($sql) === TRUE) {
    echo "Record deleted successfully";
} else {
    echo "Error deleting record: " . $conn->error;
}

$conn->close();
?>

مثال(MySQLi Procedural)

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// ایجاد ارتباط
$conn = mysqli_connect($servername, $username, $password, $dbname);
// اطمینان از صحت ارتباط
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

// تنظیم کوئری حذف
$sql = "DELETE FROM MyGuests WHERE id=3";

if (mysqli_query($conn, $sql)) {
echo "Record deleted successfully";
} else {
echo "Error deleting record: " . mysqli_error($conn);
}

mysqli_close($conn);
?>

مثال(PDO)

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // تنظیم حالت برخورد با خطاها
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // تنظیم کوئری حذف
    $sql = "DELETE FROM MyGuests WHERE id=3";

    // بدلیل اینکه کوئری نتیجه ای را برنمی گرداند از تابع زیر استفاده می کنیم
    $conn->exec($sql);
    echo "Record deleted successfully";
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }

$conn = null;
?>

نتیجه کار بعد از حذف رکورد:

id	firstname	lastname	email	reg_date
1	John	Doe	این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید	2014-10-22 14:26:15
2	Mary	Moe	این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید	2014-10-23 10:22:30

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

حذف محصول از سبد خرید

09 فروردين 1397

جلسه ی هشتم طراحی یک فروشگاه اینترنتی-حذف محصول از سبد خرید

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

آنچه که در قسمت قبل طراحی شد

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

آنچه که در قسمت 'حذف محصول از سبد خرید' خواهید آموخت

در قسمت 'حذف محصول از سبد خرید' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:
1. نحوه ی حذف محصول از سبد خرید با استفاده از جی کوئری
توضیح تفصیلی:
1. انجام کدنویسی جی کوئری برای دکمه ی حذف محصول از سبد خرید.
2. استفاده از ajax برای حذف محصول.
3. حذف li مورد نظر از سبد خرید به صورت آنی
4. تعریف id یا کلاس برای دکمه های ضربدری شکل.
حذف محصول از سبد خرید

چون که قرار است ما، دستورات جی کوئری و ajax را زمانی اجرا کنیم که کاربر روی این ضربدر های قرمز کلیک می کند، پس بهتر است که به این ضربدرها، یک آی دی و یا کلاس خاص بدهیم، تا بتوانیم در دستورات جی کوئری به سادگی به این علامت های ضربدر دسترسی داشته باشیم:

یعنی در جایی که در فایل top.php آمدیم و محصولاتمان را از tblsabad دریافت کردیم، و سپس یک li را echo کردیم که در داخل این li علامت ضربدر هم وجود داشت، یک آی دی را تحت عنوان delete مشخص کنیم:

پس id این ضربدر های قرمز برابر با delete شد. حالا اگر که صفحه را رفرش کنیم، و کلید f12 را فشار دهیم، می بینیم که id این ضربدر ها، delete می باشد. این آی دی باعث می شود که ما کدهای جی کوئری مان را بتوانیم راحت تر بنویسیم.

حالا به سراغ صفحه ی left.php می رویم. درون این قسمت که ما تگ اسکریپت را باز کردیم و دستورات قبلی را نوشتیم، حال می آییم و یک دستور جدید را هم اجرا می کنیم. حال می خواهیم ببینیم که سلکتور ما در اینجا، چه چیزی است. یعنی در چه زمانی می خواهیم عملیات delete برای محصول را انجام بدهیم؟ مشخص است که زمانی می خواهیم این کار را انجام دهیم که کاربر روی دکمه ی delete کلیک می کند. پس در اینجا ما سلکتور خودمان را مشخص می کنیم:

کد

$("#sabad1 li #delete").click

این می شود همان سلکتور ما. زمانی که کاربر بر روی این سلکتور کلیک می کند، یک تابع باید اجرا شود:

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 8
- نام فایل ویدئو: 31
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (حذف محصول از سبد خرید) در ویدئو: 03:08
READ MORE
حفظ مقادیر فرم در PHP

07 مهر 1397

در این آموزش نحوه ی جلوگیری از خالی شدن فیلدهای فرم، زمانی که کاربر روی دکمه submit کلیک می کند را نشان خواهیم داد.

حفظ مقادیر فرم در PHP

Wiki

زمانی که کاربر، مقادیر فیلدهای فرم را تنظیم و روی دکمه submit کلیک می کند، تمام فیلدها، مقادیرشان را از دست می دهند. حالا تصور نمایید که کاربر، در ورود اطلاعات یک فیلد (مثلاً فیلد "ایمیل") خطایی داشته باشد، بنابراین باید از ابتدا شروع به وارد کردن اطلاعات کند...!

بمنظور حفظ مقادیر فیلدهای فرم، برای فیلدهای متنی، باید یک کد PHP کوچک در خصوصیت value تگ <input> قرار دهیم. همچنین برای عنصر <textarea> باید کد PHP را بین تگ های باز و بسته <textarea> و </textarea> قرار دهیم. این قطعه کدها، مقادیر متغیرهای name, $email, $website, $comment$ را نمایش می دهند.

سپس، در مورد فیلد "جنسیت" باید مشخص کنیم که کدام گزینه انتخاب شده است. بنابراین باید خصوصیت ckecked آنرا دستکاری کنیم (نه خصوصیت value):

نام: <input type="text" name="name" value="<?php echo $name;?>">

ایمیل: <input type="text" name="email" value="<?php echo $email;?>">

وب سایت: <input type="text" name="website" value="<?php echo $website;?>">

توضیحات: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>

جنسیت:
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="female") echo "checked";?>
value="female">زن
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="male") echo "checked";?>
value="male">مرد

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

Wiki

در زیر، کد تکمیل شده اعتبارسنجی فرم در PHP آمده است:

مثال (حفظ مقادیر فرم در PHP)

<!DOCTYPE HTML>
<html>
<head>
<style>
body {direction:rtl;}
.error {color: #FF0000;}
</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 = "Name is required";}
   else
     {
     $name = test_input($_POST["name"]);
     // check if name only contains letters and whitespace
     if (!preg_match("/^[a-zA-Z ]*$/",$name))
       {
       $nameErr = "Only letters and white space allowed";
       }
     }

   if (empty($_POST["email"]))
     {$emailErr = "Email is required";}
   else
     {
     $email = test_input($_POST["email"]);
     // check if e-mail address syntax is valid
     if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email))
       {
       $emailErr = "Invalid email format";
       }
     }

   if (empty($_POST["website"]))
     {$website = "";}
   else
     {
     $website = test_input($_POST["website"]);
     // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
     if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website))
       {
       $websiteErr = "Invalid URL";
       }
     }

   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"]);}
}

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" value="<?php echo $name;?>">
<span class="error">*</span>
</div>
<div>
<span>ایمیل:</span><input type="text" name="email" value="<?php echo $email;?>">
<span class="error">*</span>
</div>
<div>
<span>وب سایت:</span>
<input type="text" name="website" value="<?php echo $website;?>">
<span class="error"></span>
</div>
<div>
<span>توضیحات:</span><textarea name="comment" rows="5" cols="40">
                          <?php echo $comment;?>
                       </textarea>
<span class="error">*</span>
</div>
<div>
<span>جنسیت:</span>
<input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female") echo "checked";?>>زن
<input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male") echo "checked";?>>مرد
</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 "جنسیت: $gender";
}
?>
</body>
</html>

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

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

نام:*

ایمیل:*

وب سایت:

توضیحات:

جنسیت: زن مرد*

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

01 مهر 1397

حلقه for در PHP

Wiki

از حلقه for زمانی که تعداد دفعات اجرای دستورات را بدانید استفاده می شود یعنی دستورات داخل حلقه از یک عدد مشخص به تعدادی مشخص تکرار می شود.

نحوه استفاده:

for (init; condition; increment)
{
code to be executed;
}

پارامترها:
- init: تنها یکبار در ابتدای حلقه اجرا می شود، و اغلب برای تعریف یک شمارنده استفاده می شود.
- condition: ارزیابی تکرار حلقه، اگر شرط برقرار باشد دستورات اجرا می شوند، در غیر اینصورت دستورات ادامه نمی یابند.
- increment: بعد از هربار اجرای دستورات حلقه، این دستور اجرا می شود و اغلب برای افزایش شمارنده استفاده می شود.
نکته:
1. در for می توان هرکدام از پارامترهای بالا را خالی گذاشت، به این صورت که اگر شرط خالی باشد، مقدار آن برابر با true در نظر گرفته می شود و حلقه بینهایت بار اجرا میشود! (البته با استفاده از دستور break که بعداً به آن اشاره می شود، می توان آن را قطع نمود)
2. در for همچنین می توان برای پارامترهای بالا چند دستور مختلف را اجرا نمود به اینصورت که با علامت "," آنها را باید از یکدیگر جدا نمود.
مثال:

در مثال زیر یک حلقه تعریف شده که با i=1 شروع می شود، و تا زمانی که i<=5 باشد ادامه خواهد یافت و به مقدار i در هر بار اجرای حلقه یک واحد اضافه می شود.

<html>
<body>

<?php
for ($i=1; $i<=5; $i++)
{
  echo "The number is " . $i . "<br />";
}
?>

</body>
</html>

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

The number is 1
The number is 2
The number is 3
The number is 4
The number is 5

حلقه foreach درPHP

Wiki

مخصوص کار با آرایه ها می باشد.

نحوه استفاده:

foreach ($arrayas $value)
{
  code to be executed;
}

این دستور تمام مقادیر آرایه را یکی یکی از ابتدایی تا انتهایی به درون value می ریزد و دستورات را اجرا می نماید.

نکته:مقدار value کپی داده می باشد و با تغییر آن داده اصلی در آرایه تغییری نمی کند، اما با قرار دادن علامت "&" در ابتدای value یک نشانگر از آن برگردانده می شود، بدین معنا که با تغییر آن داده اصلی درون آرایه نیز تغییر می کند.

مثال1:مثال زیر یک حلقه را نشان می دهد که مقادیر گرفته شده از یک آرایه را چاپ می کند.

<html>
<body>

<?php
$x=array("one","two","three");
foreach ($x as $value)
{
  echo $value . "<br />";
}
?>

</body>
</html>

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

one
two
three

مثال2: با قرار دادن علامت "&" در ابتدای value اگر در حلقه این مقدار تغییر کند، داده اصلی نیز تغییر می کند.

<html>
<body>

<?php
$arr=array(1,2,3,4);
foreach($arr as &$value)
{
echo $value;
echo " ";
$value *= 2;
}
echo "<br />";
foreach($arr as $value)
{
echo $value;
echo " ";
}
?>

</body>
</html>

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

1 2 3 4
2 4 6 6

مثال3: چاپ کلید و مقدار آن (key and value)

<html>
<body>

<?php
$a = array(     "one" => 1,     "two" => 2,     "three" => 3,     "seventeen" => 17 ); foreach ($a as $k => $v) {     echo "a[$k] => $v"."<br />"; }
?>

</body>
</html>

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

a[one] => 1
a[two] => 2
a[three] => 3
a[seventeen] => 17

مثال4: چاپ کلید و مقدار آن (key and value) در یک آرایه دو بعدی

<html>
<body>

$families = array("Ahmadi"=>array("a"=>"Ali","b"=>"Reza","c"=>"Sara"),
                  "Naderi"=>array("a"=>"Amir"),
                  "Mohamadi"=>array("a"=>"Poya","b"=>"Parniya")
                 );
foreach ($families as $k => $v)
   foreach ($v as $b=>$v)
    echo "families[$k][$b] => $v "."<br />";

</body>
</html>

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

families[Ahmadi][a] => Ali
families[Ahmadi][b] => Reza
families[Ahmadi][c] => Sara
families[Naderi][a] => Amir
families[Mohamadi][a] => Poya
families[Mohamadi][b] => Parniya

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

06 دی 1398

حلقه ها در PHP

Wiki

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

انواع دستورات حلقه ای در PHP:
- while:تا زمانی که شرط حلقه درست باشد، دستورات اجرا می شود.
- do...while:دستورات داخل حلقه چه شرط حلقه درست باشد و چه نباشد برای یک بار اجرا می شود، و در مراحل بعدی اگر شرط حلقه درست بود، دستورات اجرا می شوند.
- for:دستورات داخل حلقه از یک عدد مشخص به تعدادی مشخص تکرار می شود.
- foreach:برای کار با آرایه ها کاربرد دارد.
حلقه while

Wiki

این دستور تا زمانی که شرط برقرار باشد دستورات را اجرا می کند و شرط قبل از اجرای دستورات چک می شود. بدین معنا که اگر در وسط اجرای دستورات متغیرها طوری تغییر کنند که شرط برقرار نباشد، دستورات همچنان تا پایان اجرا می شوند و نیز اگر شرط از ابتدا برقرار نباشد دستورات دیگر اجرا نخواهند شد.

نحوه استفاده:

while (condition)
{
code to be executed;
}

مثال:

در مثال زیر یک حلقه تعریف کرده ایم که با i=1 شروع می شود و دستورات داخل حلقه تا زمانی که i<=5 باشد ادامه می یابد، البته توجه داشته باشید که مقدار متغیر i در داخل حلقه هر بار یک واحد اضافه می شود و اگر این تغییر، شرط حلقه را false کند، دستورات داخل حلقه تا پایان حلقه ادامه خواهد یافت.

<html>
<body>

<?php
$i=1;
while($i<=5)
  {
  echo "The number is " . $i . "<br />";
  $i++;
  }
?>

</body>
</html>

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

The number is 1
The number is 2
The number is 3
The number is 4
The number is 5

دستور do...while

Wiki

این دستور شباهت بسیار زیادی به دستور while دارد با این تفاوت که شرط در پایان اجرای دستورات چک می شود یعنی به این صورت که اگر از ابتدا هم شرط برقرار نباشد، دستورات یکبار اجرا می شوند و بعد شرط چک می شود.

نحوه استفاده:

do
{
code to be executed;
}
while (condition);

مثال:

تفاوت این مثال با مثال قبلی در دو چیز است:
1. چون شرط حلقه در پایان دستورات چک می شود، دستورات داخل حلقه حتماً برای یک بار اجرا می شوند.
2. چون دستور ;++i$ قبل از دستور چاپ است، بنابراین اعداد از 2 تا 6 چاپ می شود.
<html>
<body>

<?php
$i=1;
do
  {
  $i++;
  echo "The number is " . $i . "<br />";
  }
while ($i<=5);
?>

</body>
</html>

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

The number is 2
The number is 3
The number is 4
The number is 5
The number is 6

حلقه forو foreach در فصل بعدی توضیح داده خواهد شد.

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

: 07 مهر 1397

دستورات آماده برای مقابله با SQL injection ها بسیار کارآمداند.

دستورات آماده (Prepared) و Bind کردن پارامترها

Wiki

با استفاده از دستورات آماده یا Prepared، می توانید یک کوئری یکسان را به تعداد دفعات دلخواه با راندمان بالا اجرا نمایید.

نحوه عملکرد دستورات آماده یا Prepared:

Prepare: با استفاده از این دستور می توانید قالبِ یک کوئری SQL را ایجاد کرده و به پایگاه داده ارسال نمایید. در واقع دلیل استفاده از کلمه قالب در اینجا این است که بجای پارامترهای لازم در کوئری، از علامت سوال (؟) استفاده می کنیم.
مثال (دستور prepare در PHP)
```
INSERT INTO MyGuests VALUES(?, ?, ?)
```
حالا قالب SQL ارسال شده، توسط پایگاه داده، تجزیه و کامپایل می شود و در ادامه بهینه ساز کوئری (query optimization) روی آن اجرا می شود و در نهایت نتیجه کار بدون اجرا در پایگاه داده ذخیره می شود.
Execute: در ادامه ی اسکریبت، مقادیر لازم را به پارامترهای کوئری مان Bind می کنیم و با استفاده از دستور Execute، کوئری را اجرا می کنیم. اما نکته ای که وجود دارد این است که کوئری ما همچنان در پایگاه داده وجود دارد و می توانیم مجدداً آنرا با پارامترهای جدید اجرا کنیم...!

روش استفاده از دستورات آماده در مقایسه با اجرای مستقیم کوئری ها دو مزیت اصلی دارد:

دستورات آماده، زمان تجزیه (parsing) کوئری را کاهش می دهند و این در حالی است که برای مواقعی که قصد داریم یک کوئری را به دفعات اجرا کنیم، این زمان فقط یکبار محاسبه خواهد شد.
از آنجایی که برای هر بار اجرای کوئری، فقط باید پارامترها را ارسال کنیم، بنابراین پهنای باند کمتری مصرف خواهد شد.
دستورات آماده برای مقابله با SQL injection ها بسیار کارآمد هستند و این بخاطر استفاده از یک پروتوکول متفاوت برای انتقال مقادیر پارامترهاست.

	تزریق SQL یا SQL injection چیست؟ SQL injection زمانی رخ می دهد که شما از کاربر یک ورودی می خواهید ( مثلا نام خانوادگی ، سن و... ) و کاربر بجای نام، یک دستور MySQL را وارد می نماید و این دستور بدون اطلاع شما بر روی دیتابیس اجرا می شود. مثال (دستور prepare در PHP) $username="''; Delete From users"; $query="Select From users where usernamr=$username"; echo $query; نتیجه کد بالا Select From users where usernamr= ''; Delete From users توضیح: همان طور که در کد بالا مشاهده می کنید، ورودی مخرب، باعث می شود که دو کوئری روی پایگاه داده اجرا شود و از آن مهمتر، کوئری دوم است که باعث می شود تا تمام اطلاعات جدول users حذف شود...!

تزریق SQL یا SQL injection چیست؟
SQL injection زمانی رخ می دهد که شما از کاربر یک ورودی می خواهید ( مثلا نام خانوادگی ، سن و... ) و کاربر بجای نام، یک دستور MySQL را وارد می نماید و این دستور بدون اطلاع شما بر روی دیتابیس اجرا می شود.

مثال (دستور prepare در PHP)

$username="''; Delete From users";
$query="Select From users where usernamr=$username";
echo $query;

نتیجه کد بالا

Select From users where usernamr= ''; Delete From users

توضیح: همان طور که در کد بالا مشاهده می کنید، ورودی مخرب، باعث می شود که دو کوئری روی پایگاه داده اجرا شود و از آن مهمتر، کوئری دوم است که باعث می شود تا تمام اطلاعات جدول users حذف شود...!

دستورات آماده یا Prepared در MySQLi

Wiki

در مثال زیر،نحوه ی استفاده از دستورات آماده یا Prepared و همچنین نحوه ی Bind کردن پارامترها در MySQLi نشان داده شده است:

مثال(MySQLi with Prepared Statements)

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// ایجاد ارتباط به پایگاه داده
$conn = new mysqli($servername, $username, $password, $dbname);

// اطمینان از صحت ارتباط
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// تنظیم کوئری و بایند کردن پارامترها با استفاده از دستورات آماده
$stmt = $conn->prepare("INSERT INTO MyGuests (firstname, lastname, email) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $firstname, $lastname, $email);

// تنظیم پارامترها و اجرای کوئری
$firstname = "John";
$lastname = "Doe";
$email = "این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید";
$stmt->execute();

$firstname = "Mary";
$lastname = "Moe";
$email = "این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید";
$stmt->execute();

$firstname = "Julie";
$lastname = "Dooley";
$email = "این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید";
$stmt->execute();

echo "New records created successfully";

$stmt->close();
$conn->close();
?>

توضیح مثال بالا:

"INSERT INTO MyGuests (firstname, lastname, email) VALUES (?, ?, ?)"

در کوئری مان می توانیم از علامت سوال (؟) استفاده کنیم، این علامت در ادامه با یک عدد صحیح (integer)، رشته (string)، عدد اعشاری (double) یا داده های با اندازه بزرگ (BLOB - Binary Large OBject) جایگزین خواهد شد.

در ادامه نگاهی به تابع ()bind_param خواهیم انداخت:

$stmt->bind_param("sss", $firstname, $lastname, $email);

با استفاده از تابع ()bind_param، می توانیم پارامترها را به کوئری SQL مان Bind کنیم و به پایگاه داده بگوییم که چه پارامترهایی داریم. همچنین با استفاده از آرگومان اول یعنی "sss"، نوع پارامترها را تعیین می کنیم. کاراکتر s به MySQL می گوید که پارمتر ما از نوع رشته (string) است.

نوع آرگومان ها می تواند یکی از چهار گزینه زیر باشد:

i - integer
d - double
s - string
b - BLOB

برای هر کدام از آرگومان ها، باید یکی از چهار مقدار بالا را تنظیم کنیم.

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

	توجه: اگر قصد دارید که داده ی دریافتی از کاربران را در پایگاه داده ذخیره کنید، اعتبارسنجی داده ها یک امر بسیار مهم است.

دستورات آماده یا Prepared در PDO

Wiki

در مثال زیر،نحوه ی استفاده از دستورات آماده یا Prepared و همچنین نحوه ی Bind کردن پارامترها در PDO نشان داده شده است:

مثال(PDO with Prepared Statements)

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";

try {
//ایجاد ارتباط
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
// تنظیم حالت برخورد با خطاها
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// تنظیم کوئری و بایند کردن پارامترها با استفاده از دستورات آماده
$stmt = $conn->prepare("INSERT INTO MyGuests (firstname, lastname, email)
VALUES (:firstname, :lastname, :email)");
$stmt->bindParam(':firstname', $firstname);
$stmt->bindParam(':lastname', $lastname);
$stmt->bindParam(':email', $email);

// تنظیم پارامترها و اجرای کوئری
$firstname = "John";
$lastname = "Doe";
$email = "این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید";
$stmt->execute();

// تنظیم پارامترها و اجرای کوئری
$firstname = "Mary";
$lastname = "Moe";
$email = "این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید";
$stmt->execute();

// تنظیم پارامترها و اجرای کوئری
$firstname = "Julie";
$lastname = "Dooley";
$email = "این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید";
$stmt->execute();

echo "New records created successfully";
}
catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
$conn = null;
?>

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

دستور switch در PHP

01 مهر 1397

دستور Switch

Wiki

برای انتخاب و اجرای یک دستور از بین چند دستور استفاده می شود.

این دستور در برخی موارد شباهت بسیار زیادی به دستورات if... elseif... else دارد.

دستور switch یک حالت خاص هم دارد به نام default که اگر هیچکدام از مقادیر درست نبود، آن قسمت اجرا می شود.

نحوه استفاده:

switch (n)
{
case label1:
code to be executed if n=label1;
break;
case label2:
code to be executed if n=label2;
break;
default:
code to be executed if n is different from both label1 and label2;
}

کد بالا چگونه کار می کند:
- case
از کلمه case بجای if else استفاده می کنیم و حالت مختلف شرط را در جلوی آن می نویسیم و سپس علامت ":" می گذاریم، در حقیقت اگر متغییر ما یعنی n برابر با مقدار مقابل case بود، نتیجه این می شود که باید دستورات مربوط به آن case اجرا شود، در غیر اینصورت case بعدی مقایسه می شود.
- break
دستور break یکی از بخشهای switch است که به مفسر PHP می فهماند که در کجا، قسمت case تمام می شود، در حقیقت از تداخل قسمتهای مختلف جلوگیری می کند. دقت کنید که شما هم باید آنرا قبل از شروع case بعدی بنویسید.
- default
اگر هیچکدام از مقادیر مقابل caseها با متغییر n برابر نبود، در این صورت دستورات مربوط به default اجرا می شود.

مثال:

<html>
<body>

<?php
$x=3;
switch ($x)
{
case 1:
echo "Number 1";
break;
case 2:
echo "Number 2";
break;
case 3:
echo "Number 3";
break;
default:
echo "No number between 1 and 3";
}
?>

</body>
</html>

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

Number 3

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

: 05 مهر 1397

رسیدگی یا مدیریت خطاها در php

Wiki

رسیدگی به خطاها در phpبسیار ساده است. به صورت پیشفرض اگر خطایی رخ دهد، یک پیغام خطا که توضیح دهنده ی خطا است، همراه با نام فایل و شماره خط به مرورگر فرستاده می شود.

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

در زیر بعضی روش های معمول بررسی خطا در php توضیح داده خواهد شد:

استفاده از دستور ساده ()die
خطاهای معمولی و راه اندازی رسیدگی کننده خطا
واقعه نگاری خطاها

استفاده از تابع ()die

Wiki

این تابع متنی را که به عنوان پارامتر برای آن مشخص کرده ایم، چاپ می کند و از کد جاری خارج می شود.

مثال:در این مثال با استفاده از تابع ()fopen یک فایل متنی را به صورت فقط خواندنی باز می کنیم:

<?php
$file=fopen("welcome.txt","r");
?>

اگر فایل وجود نداشته باشد، با خطای زیر مواجه می شویم:

Warning: fopen(welcome.txt) [function.fopen]: failed to open stream:
No such file or directory in C:\webfolder\test.php on line 2

برای اینکه کاربر با پیغام خطای بالا مواجه نشود، قبل از هر چیز، وجود فایل "welcome.txt" را بررسی می کنیم:

<?php
if(!file_exists("welcome.txt"))
die("File not found");
else
$file=fopen("welcome.txt","r");
?>

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

File not found

توجه: در اسکریپت بالا، بعد از اجرای دستور ()die، ادامه اجرای اسکریپت متوقف می شود.

متوقف کردن اسکریپت، به این سادگی، همیشه راه درست نیست. بیایید نگاهی به توابع تناوبی رفع خطا در php بیندازیم.

ایجاد یک تابع رسیدگی کننده خطا (error handler)

Wiki

ایجاد این تابع کاملاً ساده است، و هرگاه که در کد PHP خطایی رخ داد این تابع فراخوانی می شود.

این تابع باید بتواند حداقل با دو پارامتر کار کند(سطح خطا و پیغام خطا) اما تا پنج پارامتر را بپذیرد(اختیاری: فایل، شماره خط و متن پیغام):

نحوه استفاده:

error_function(error_level,error_message,error_file,error_line,error_context)

پارامتر	توضیحات
error_level	الزامی است، سطح گزارش خطا را مشخص می کند. جدول زیر را برای انواع سطوح گزارش خطا ببینید.
error_message	الزامی است، پیغام خطا را برای خطای تعریف شده توسط کاربر مشخص می کند.
error_file	اختیاری است. نام فایلی را که خطا در ان رخ داده است مشخص می کند.
error_line	اختیاری است. شماره خطی را که خطا در آن رخ داده است مشخص می کند.
error_context	اختیاری است. یک آرایه که شامل تمام متغییرهای در حال استفاده هنگام رخداد خطا با مقادیرشان است را مشخص می کند.

سطوح گزارش خطا:

مقدار	نام ثابت	توضیحات
2	E_WARNING	خطاهای زمان اجرا غیر جدی. اجرای script متوقف نمی شود
8	E_NOTICE	اخطارهای زمان اجرا.script چیزی پیدا کرده که ممکن است خطا باشد? اما می تواند در اجرای معمولی script نیز رخ دهد
256	E_USER_ERROR	خطای جدی کاربرساز. مانند یک E-ERROR که توسط کابر با استفاده از تابع trigger_error( ) در php به وجود می آید.
512	E_USER_WARNING	هشدار غیرجدی کاربرساز. مانند یک E_WARNING است که توسط کابر با استفاده از تابع trigger_error( ) در php به وجود می آید.
1024	E_USER_NOTICE	اخطار کاربرساز. مانند یک E_NOTICE است که توسط کابر با استفاده از تابع trigger_error( ) در php به وجود می آید.
4096	E_RECOVERABLE_ERROR	خطای جدی گرفتنی. مانند یک E_ERROR است اما بوسیله ی رفع خطای تعریف شده توسط کاربر می توان ان را گرفت(set_error_handler( ) را نیز ببینید)
8191	E_ALL	همه ی خطاها و هشدارها?به جز سطح E_STRICT) E_STRICT در php 6.0 جزئی از E_ALL خواهد شد.)

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

errno$: سطح خطا
errstr$: متن خطا

function customError($errno, $errstr)
{
echo "<b>Error:</b> [$errno] $errstr<br />";
echo "Ending Script";
die();
}

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

در حال حاضر باید تصمیم بگیریم که چه موقع تابع بالا، راه اندازی شود.

تنظیم رسیدگی کننده خطا

Wiki

ما قصد داریم تابع "customError" را به عنوان پیشفرض رسیدگی کننده خطا در PHP معرفی کنیم، این کار به سادگی با استفاده از تابع زیر در PHP امکان پذیر است:

set_error_handler("customError");

نکته: یک پارامتر دوم می تواند برای مشخص کردن سطح خطا به تابع ()set_error_handler اضافه شود، ولی چون می خواهیم که تابع معمولی مان همه ی خطاها را رفع کند، ()set_error_handler تنها با یک پارامتر فراخوانی می شود.

مثال: در زیر سعی کرده ایم با چاپ متغییر "test$" که وجود ندارد تابع "رسیدگی کننده خطا" یا همان "customError" را تست کنیم:

<?php
function customError($errno, $errstr)
{
echo "<b>Error:</b> [$errno] $errstr";
}
set_error_handler("customError");
echo($test);
?>

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

Error: [8] Undefined variable: test

راه اندازی یک خطا

Wiki

در اسکریپتی که کاربران می توانند داده وارد کنند، می توان موقع رخداد یک ورودی غیرمجاز خطاها را راه اندازی کرد. در php، این کار با تابع ()trigger_error انجام می شود.

مثال: در این مثال اگر متغییر "test" بزرگتر از "1" باشد، یک خطا رخ می دهد:

<?php
$test=2;
if ($test>1)
{
trigger_error("Value must be 1 or below");
}
?>

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

Notice: Value must be 1 or below
in C:\webfolder\test.php on line 5

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

مثال: در این مثال یک خطا با سطح E_USER_WARNING رخ می دهد، اگر متغییر "test" بزرگتر از "1" باشد، تابع رسیدگی کننده خطا، راه اندازی شده و اسکریپت را خاتمه می دهیم:

<?php
function customError($errno, $errstr)
{
echo "<b>Error:</b> [$errno] $errstr<br />";
echo "Ending Script";
die();
}

set_error_handler("customError",E_USER_WARNING);

$test=2;
if ($test>1)
{
trigger_error("Value must be 1 or below",E_USER_WARNING);
}
?>

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

Error: [512] Value must be 1 or below
Ending Script

اکنون که طریقه ی رسیدگی به خطاها و چگونگی راه اندازی آن ها را یاد گرفتیم، اجاز دهید نگاهی به واقعه نگاری (Log) خطاها بیندازیم.

واقعه نگاری خطاها (Log)

Wiki

به طور پیش فرض، php یک گزارش خطا به سیستم واقعه نگاری سرورها یا یک فایل، بسته به اینکه پیکر بندی گزارش خطا چگونه درفایل php.ini تنظیم شده است ارسال می کند. با استفاده از تابع ()error_log شما می توانید گزارش های خطا را به به یک فایل مشخص شده یا یک مقصد دور ارسال کنید.

ارسال پیغام های خطاها به خودتان از طریق email می تواند روش خوبی برای آگاه شدن از خطاهای خاص باشد.

مثال: در این مثال اگر یک خطای خاص رخ دهد ما یک e-mail را همراه با یک پیغام خطا به آدرس مشخص شده می فرستیم و اسکریپت خاتمه خواهد یافت:

<?php
function customError($errno, $errstr)
{
echo "<b>Error:</b> [$errno] $errstr<br />";
echo "Webmaster has been notified";
error_log("Error:[$errno]$errstr",1,"این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید","From:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید");
}

set_error_handler("customError",E_USER_WARNING);

$test=2;
if ($test>1)
{
trigger_error("Value must be 1 or below",E_USER_WARNING);
}
?>

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

Error: [512] Value must be 1 or below
Webmaster has been notified

و در ادامه ایمیل دریافت شده چیزی شبیه زیر خواهد بود:

Error: [512] Value must be 1 or below

توجه:این نباید برای همه ی خطاها استفاده شود، خطاهای معین باید با سیستم واقعه نگاری پیش فرض php در سرور ثبت شوند.

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

ساختار دستورات در PHP

01 مهر 1397

ساختار دستورات در PHP

Wiki

دستورات PHP همیشه با <?php آغاز و با ?> خاتمه می یابد. یک بلوک اسکریپتی PHP می تواند در هر جایی از کد HTML قرار بگیرد. در یک سرور که به تکنیک مختصر نویسی مجهز است می توان بلوک اسکریپتی php را با <? شروع و با ?> خاتمه داد.

توجه: برای داشتن حداکثر سازگاری، ما حالت استاندارد (<?php) را پیشنهاد می کنیم.

<?php
?>

یک فایل php به طور معمول ترکیبی از تگ های HTML و تعدادی کد های اسکریپتی PHP است.
مثال: در مثال زیر، متن "Hello world" توسط دستور echo چاپ می شود:

<html>
<body>

<?php
echo "Hello World";
?>

</body>
</html>

هر خط در php باید با علامت (;) پایان پذیرد. این علامت یک جدا کننده است و برای تمیز دادن یک مجموعه از دستورالعمل ها از دیگری استفاده می شود.

دو دستور پایه ای برای ارسالِ خروجیِ متنی وجود دارد:
1. echo
2. print
  در مثال بالا از دستور echo برای فرستادن رشته ی "hello world" به خروجی استفاده شده است.
نکته: این فایل باید دارای پسوند php باشد. اگر پسوند فایل html باشد کد php اجرا نخواهد شد.

(Comment) توضیحات در PHP

Wiki

در php از // برای یک خط comment و از /* و*\ برای یک بلوک بزرگ از توضیحات استفاده می کنیم.

<html>
<body>

<?php
//This is a comment

/*
This is
a comment
block
*/
?>

</body>
</html>

PHP یک زبان غیرحساس به حروف بزرگ و کوچک (case-insensitive)

Wiki

در PHP، هیچکدام از توابع، کلاس ها و کلمات کلیدی (مانند if و while و...) به حروف بزرگ و کوچک، حساس نیستند.

در مثال زیر، هر سه دستور echo، صحیح و یکسان است:

مثال (ساختار دستورات در PHP)

<!DOCTYPE html>
<html>
<body>

<?php
ECHO "Hello World!<br>";
echo "Hello World!<br>";
EcHo "Hello World!<br>";
?>

</body>
</html>

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

Hello World!
Hello World!
Hello World!

اما، در PHP تمام متغیرها به حروف بزرگ و کوچک حساس اند. (case-sensitive)

در مثال زیر، تنها دستور اول مقدار متغیر color$ را نمایش می دهد: (دلیل این اتفاق، این است که با سه متغیر color$ و COLOR$ و coLOR$ مانند سه متغیر متفاوت برخورد می شود)

مثال (ساختار دستورات در PHP)

<!DOCTYPE html>
<html>
<body>

<?php
$color="red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>

</body>
</html>

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

My car is red
My house is
My boat is

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

10 فروردين 1397

سازنده یا Constructor

Wiki

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

در PHP 4 سازنده تابعی می باشد که نام آن همان نام کلاس می باشد و در PHP 5 تابعی است که با نام"construct__" می باشد.

مثال1:در مثال زیر به دو روش، تابع سازنده تعریف شده است:

<?php class className{     function __construct()     {         echo 'className created from PHP5 format';     }     function className()     {         echo 'className created from PHP4 format';     } } $a=new className(); ؟>

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

اگر در PHP 5 اجرا شود خروجی آن className created from PHP5 format خواهد بود و اگر در PHP 4 اجرا شود خروجی آن className created from PHP4 format خواهد بود.

توجه: در PHP 5 چنانچه تابع construct__ وجود نداشته باشد مدل PHP 4 آن اجرا خواهد شد.

مثال2:

<?php
class My_class
{
public $name;
function __construct($Param="Amir")
{
   $this->name=$Param;
}
function SayHello()
{
   print "Hello My Name is $this->name"."<br />";
}
}

$obj1=new My_Class();
$obj1->SayHello();
$obj2=new My_Class("Reza");
$obj2->SayHello();
?>

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

Amir
Reza

همانطور که دیدید در مثال بالا یک سازنده ساختیم و مقدار دیفالتش را روی "Amir" گذاشتیم که اگر هیچی وارد نشد این عبارت چاپ بشود.

مخرب یا Destructors

Wiki

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

در واقع مخرب، زمانی فراخوانی می شود که تمام رفرنس های کلاس مورد نظر رفته اند.

مثال:

<?php
class className{     funcrion __construct()     {         echo 'Start of className';     }     function __destruct()     {         echo 'End of className';     } } $a=new className();
?>

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

Start of className
End of className
READ MORE
طراحی اسلایدشو فروشگاه

09 فروردين 1397

جلسه ی سوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی اسلایدشو فروشگاه

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

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد زیر آموزش داده شدند:
1. ایجاد پس زمینه ی آبی رنگ فروشگاه.
2. ایجاد بدنه ی اسلایدشو فروشگاه.
آنچه که در قسمت 'طراحی اسلایدشو فروشگاه' خواهید آموخت

در قسمت'طراحی اسلایدشو فروشگاه' موارد زیر آموزش داده خواهند شد:
1. آموزش استفاده از پلاگین cycle برای نمایش دادن عکس ها.
2. آموزش ایجاد دکمه ی عکس قبلی و بعدی برای اسلایدشو.
3. آموزش استفاده از فتوشاپ برای ایجاد دکمه ی next.
4. آموزش استفاده از پوزیشن ها(position) برای موقعیت دهی عناصر.
4.آموزش استفاده از پوزیشن ها(position) برای موقعیت دهی عناصر

همان طور که مشاهده می نمایید، وقتی که دو عنصر img را به صفحه اضافه می کنیم، div اسلایدشو به سمت پایین منتقل می شود:

این به این بدین معنی است که این دو عنصر img بر روی محل و موقعیت div اسلایدشو تاثیر می گذارند. نکته ای که در اینجا لازم است بدانیم عبارت است از بحث position ها در css. اگر که شما می خواهید دو المان را مثل دو عنصر img ذکر شده، به صفحه ی مورد نظرتان اضافه کنید، به طوری که اضافه شدن این المان ها، تاثیری بر روی سایر المان ها و اجزای صفحه نداشته باشد، باید از position: absolute استفاده کنید.

بنابر آنچه گفته شد، برای دو عنصر img مورد نظر، استایل هایی را تعریف می کنیم و مقدار position آنها را برابر با absolute قرار می دهیم، تا موقعیت آنها به صورت مستقل از دیگر اجزا، تعیین گردد:

با رفرش(refresh) کردن صفحه، مشاهده می کنیم که اسلایدشو از مکان اصلی خود منحرف نشده است. چون که مقدار position این دو فلش یا به عبارت دیگر همان تگ های img را به صورت absolute قرار دادیم، این عناصر، به صورت مستقل از سایر المان های همجوار خودشان موقعیت دهی می شوند:

حالا این سوال پیش می آید که اگر بخواهیم فلش ها را از سمت بالا به اندازه ی فرضی 105px فاصله بدهیم، باید چه کار کنیم؟

اگر مقدار top را برابر با 155px قرار دهیم، این اتفاق رخ می دهد اما...

دسترسی به موارد آموزشی بالا در بسته خریداری شده
- شماره جلسه: 3
- نام فایل ویدئو: 10
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی اسلایدشو فروشگاه) در ویدئو: 13:08
READ MORE
طراحی بدنه ی فروشگاه

09 فروردين 1397

جلسه ی سوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی بدنه ی فروشگاه

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

آنچه که در قسمت قبل طراحی شد

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

در قسمت'طراحی بدنه ی فروشگاه' موارد زیر آموزش داده خواهند شد:
1. آموزش ایجاد پس زمینه ی آبی رنگ فروشگاه.
2. آموزش عوض کردن فونت فرم جستجوی فروشگاه.
3. آموزش استفاده از دستور include برای منظم کردن کدنویسی ها.
4. آموزش ایجاد بخش slideshow مقدماتی برای نمایش دادن عکس ها.
4.آموزش ایجاد بخش slideshow مقدماتی برای نمایش دادن عکس ها

در ادامه ی آموزش ها به div مربوط به اسلاید شو می رسیم، که یک سری از تصاویر را به صورت اسلاید به نمایش می گذارد. با استفاده از ابزار ruler می توانیم مقادیر width و height این اسلاید شو را به دست بیاوریم:

همان طور که در تصویر بالا مشاهده می نمایید، width اسلایدشو برابر با 735px است و height اسلایدشو برابر با 315px است. پس برای ایجاد اسلایدشو، یک div ایجاد می کنیم و آی دی آن را برابر با 'slideshow' قرار می دهیم و استایل آن را به صورت زیر می نویسیم :

همان طور که در تصویر زیر مشاهده می نمایید، div مربوط به اسلاید شو ساخته شد:

حالا برای این که این div را به سمت راست منتقل کنیم، کافی است که از دستور float:right استفاده کنیم:

مشکلی که اکنون داریم، این است که نمی توانیم div اسلایدشو را در وسط صفحه به صور ثابت قرار دهیم. برای رفع این مشکل، همان طور که قبلا هم گفته شد، باید از یک div استفاده کنیم که مقدار width آن برابر با 1100px باشد. این مقدار width همان است که ما خودمان آن را مبنای طراحی صفحات سایتمان قرار دادیم، که می تواند اعداد دیگری هم باشد...

دسترسی به موارد آموزشی بالا در بسته خریداری شده
- شماره جلسه: 3
- نام فایل ویدئو: 09
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی بدنه ی فروشگاه) در ویدئو: 13:12
READ MORE
طراحی بر اساس ترفندهای css3

09 فروردين 1397

جلسه ی پنجم طراحی یک فروشگاه اینترنتی-طراحی بر اساس ترفندهای css3

در قسمت دوم از این جلسه، به آموزش 'طراحی بر اساس ترفندهای css3' می پردازیم.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد کلی زیر آموزش داده شدند:
1. در قسمت قبل، به یکی از مفاهیم ساده، اما بسیار کاربردی در طراحی وب سایت و انجام پروژه های برنامه نویسی پرداختیم. این مفهوم همان مفهوم مسترپیج بود.
مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی بر اساس ترفندهای css3' خواهید آموخت

در قسمت'طراحی بر اساس ترفندهای css3' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

در هفدهمین قسمت از مجموعه ی آموزشی 'طراحی یک فروشگاه اینترنتی' به یکی از مباحث به روز و کاربردی در css3 خواهیم پرداخت. transition در css برای ایجاد افکت های انیمیشنی در حالتی که موس را روی یک بخش از صفحه قرار می دهیم کاربرد دارد.

توضیح تفصیلی:
1. مقایسه ی دستور hover در css با دستور transition و بررسی تفاوت های آنها در یک مثال کاملا عملی.
2. استفاده از دستور transition برای تغییر رنگ بخش هایی از سایت به حالت انیمیشنی.
3. بررسی موشکافانه همه ی ویژگی های مربوط به transition و همچنین بررسی easing های متنوع و افکت های مختلف در این دستور.
4. معرفی سایتی برای ساخت انواع transition ها به صورت آنلاین و همچنین نحوه ی استفاده از آنها در صفحات طراحی شده.
5. بررسی پیشوندهای -moz- و -webkit- و-o- و مفهوم آنها در transition و سازگاری آن با انواع مرورگرها.
6. بررسی delay در transition.
7. بررسی مفهوم all در transition.
طراحی بر اساس ترفندهای css3

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

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

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

و سپس آنها را در صفحه ی index.php اضافه(include) کردیم.

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

اکنون به سراغ قسمت مشخص شده در عکس زیر می رویم و می خواهیم به هرکدام از این تگ های a یک id یا class اختصاص دهیم:

چون ما همیشه از id استفاده می کردیم برای اینکه مقداری هم با class کار کرده باشیم، این باز از class استفاده می کنیم. پس کلاس ها را به صورت زیر انتخاب می کنیم:

حال می خواهیم در داخل تگ style، در ادامه ی کدهای css که قبلا آنها را نوشته بودیم، از دستور hover استفاده کنیم و هنگامی که کاربر موس را روی هرکدام از این بخش ها قرار می دهد، رنگ پس زمینه ی تگ های x1 و x2 و x3 و x4 را به یک رنگ متفاوت تغییر دهیم:
کد
```
.x1:hover{

background: #09f;

}
```
دستور بالا به این معنی است که، وقتی کاربر موس خود را بر روی این تگ a قرار داد، رنگ پس زمینه ی آن تبدیل به رنگ آبی شود. حال صفحه را رفرش می کنیم تا نتیجه را مشاهده نماییم:

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 5
- نام فایل ویدئو: 17
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی بر اساس ترفندهای css3) در ویدئو: 00:30
READ MORE
طراحی بر اساس مسترپیج

09 فروردين 1397

جلسه ی پنجم طراحی یک فروشگاه اینترنتی-طراحی بر اساس مسترپیج

در قسمت اول از این جلسه، به آموزش 'طراحی بر اساس مسترپیج' می پردازیم.

آنچه که در قسمت قبل طراحی شد

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

آنچه که در قسمت 'طراحی بر اساس مسترپیج' خواهید آموخت

در قسمت 'طراحی بر اساس مسترپیج' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

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

توضیح تفصیلی:

استفاده از این مفهوم چند مزیت بسیار بزرگ دارد:
1. اگر بخشی مشترک در صفحات وب سایت وجود داشته باشد نیازی نیست که کدهای مربوط به آن بخش را در تمامی صفحات بنویسیم و یا آن کدهای طولانی را کپی کنیم.
2. اگر بعدها بخواهیم تغییری را در آن قسمت ایجاد کنیم، نیازی نیست که در تک تک آن صفحات اصلاحاتی را ایجاد کنیم. بلکه با استفاده از مفهوم بسیار کاربردی مسترپیج می توان تنها با یک بار تغییر این تغییرات را در تمامی صفحات به صورت خود کار اعمال کرد.
3. صفحات سایت بسیار خلوت تر شده و کار کردن با آنها ساده تر می گردد و از سردرگم شدن طراح جلوگیری می نماید.
4. با استفاده از مسترپیج به سادگی قادر خواهید بود که کدهای css مشترک در تمام صفحات را تنها با یک بار نوشتن در تمامی صفحات اعمال نمایید.
طراحی بر اساس مسترپیج

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

مفهوم مسترپیج یک مفهوم پیچیده و سنگین نیست، بلکه یک مفهوم بسیار ساده است اما بسیار بسیار کاربردی می باشد.

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

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

همان طور که در تصویر بالا مشاهده می کنید، صفحه ی ما بسیار خلوت تر شده است و کار کردن با آن ساده تر شده است.

مزیت دوم عبارت است از اینکه به راحتی می توانید از بخش هایی که در صفحات مختلف ایجاد کرده اید، با استفاده از دستور include، به تنهایی استفاده کنید:

نکته ی دیگری که وجود دارد عبارت است از اینکه، اگر زمانی لازم بود که تغییراتی را روی یک بخش اعمال کنید، کافی است که در صفحه ی master خود، صفحه ی های right یا left یا هر صفحه ی دیگری که آن را فراخوانی کرده اید، تغییرات لازم را اعمال کنید. سپس به صورت خودکار و اتوماتیک، در تمامی صفحات تغییرات لازم اعمال خواهد شد...

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 5
- نام فایل ویدئو: 16
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی بر اساس مسترپیج) در ویدئو: 20:15
READ MORE
طراحی پرفروش ترین کالاها2

09 فروردين 1397

جلسه ی چهارم طراحی یک فروشگاه اینترنتی-طراحی پرفروش ترین کالاها2

در قسمت سوم از این جلسه، به آموزش 'طراحی پرفروش ترین کالاها2' می پردازیم.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد کلی زیر آموزش داده شدند:
1. ایجاد بخش دیگری جهت نمایش پر فروش ترین محصولات در ستون left.
2. ایجاد زیرخط با جلوه ای بی نظیر برای عنوان بخش پرفروش ترین محصولات.
3. ایجاد بخش هایی برای نمایش قیمت و نام و مدل کالای مورد نظر.
مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی پرفروش ترین کالاها 2' خواهید آموخت

در قسمت 'طراحی پرفروش ترین کالاها2' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

در چهاردهمین قسمت از این مجموعه ی آموزشی، قصد داریم سه بخش زیر را برای هر محصول طراحی کنیم:
1. ایجاد بخش اضافه به سبد خرید
2. ایجاد بخش توضیحات محصول
3. ایجاد بخش محصولات مشابه
توضیح تفصیلی:
1. ایجاد div جدید با id برابر با tozihat.
2. کاربردی دیگر از position نوع absolute و بررسی دقیق مفهوم و کاربرد آن.
3. چگونگی افزودن یک بخش به داخل بخش دیگر بدون به هم ریختگی اجزای موجود در آن بخش.
4. نحوه ی قرارگیری یک المان یا بخش، دقیقا در وسط یک بخش دیگر، با استفاده از css.
5. کار با دستور line-height در css و تنظیم موقعیت محتوای درون یک بخش، بدون جابه جایی کل بخش.
1. ایجاد بخش اضافه به سبد خرید

هدف ما ایجاد گزینه های زیر است:

برای اینکه بتوانیم به هدف خود برسیم، و یا به عبارت دیگر، این گزینه ها را برای کاربر به نمایش در بیاوریم، دو مرحله را باید به انجام برسانیم:
1. نوشتن کدهای html
2. استفاده از JQuery
ابتدا به نوشتن کدهای اچ تی ام ال می پردازیم.

همان طور که در تصویر زیر مشاهده می کنید، باید یک div ایجاد کنیم، که اندازه ی آن به صورت زیر باشد:

پس به سراغ تگ های li خود می رویم و درون آن یک div ایجاد می کنیم و مقدار آی دی آن را به طور فرضی، برابر با 'tozihat' قرار می دهیم:

همان طور که در تصویر بالا مشاهده می کنید، اکنون می خواهیم بفهمیم که div با آی دی 'tozihat' چه قسمت هایی را دربر می گیرد:

همان طور که مشاهده می کنید، در عکس بالا قسمت خاکستری رنگ، همان div با آی دی tozihat است، که آن را ایجاد کردیم. حالا طبق عکس بالا، عبارت افزودن به سبد خرید و مشاهده ی جزئیات محصول و مشاهده محصولات مشابه، همگی باید در داخل div با آی دی 'tozihat' قرار بگیرند. بنابراین به داخل div توضیحات می رویم و شروع به نوشتن قمت های مورد نظر می کنیم.

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 4
- نام فایل ویدئو: 14
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی پرفروش ترین کالاها2) در ویدئو: 3:57
READ MORE
طراحی پرفروش ترین کالاها3

09 فروردين 1397

جلسه ی چهارم طراحی یک فروشگاه اینترنتی-طراحی پرفروش ترین کالاها 3

در قسمت چهارم از این جلسه، به آموزش 'طراحی پرفروش ترین کالاها3' می پردازیم.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد کلی زیر آموزش داده شدند:
1. ایجاد سه بخش، اضافه به سبد خرید و توضیحات محصول و محصولات مشابه برای محصولات
مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی پرفروش ترین کالاها 3' خواهید آموخت

در قسمت 'طراحی پرفروش ترین کالاها 3' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:
1. ظاهر شدن سه بخش اضافه به سبد خرید و توضیحات محصول و... به هنگام حرکت موس بر روی آنها
توضیح تفصیلی:
1. افزودن پلاگین جی کوئری به صفحه.
2. بررسی مفهوم this درجی کوئری.
3. بررسی نکاتی در رابطه با نحوه افزایش سرعت لود سایت.
4. توضیح دقیق دستور hover در جی کوئری و کار با دو تابع موجود در این دستور.
5. کار با دستور find در جی کوئری، برای یافتن یک بخش درون بخش دیگری.
6. کار با animate جهت انجام دستورات css.
7. مقایسه animate با css در جی کوئری و بررسی تفاوت آنها.
8. کار با دستور addClass در جی کوئری برای افزودن کلاس به یک المان.
9. کار با دستور removeClass جهت حذف class از یک المان.
10. کاربردی از important در دستورات css و بررسی مفهوم آن.
1.ظاهر شدن سه بخش اضافه به سبد خرید و توضیحات محصول و... به هنگام حرکت موس بر روی آنها

طبق گقته های قبلی، باید با استفاده از دستورات جی کوئری کاری کنیم که طراحی ما به صورت زیر بشود:

یعنی وقتی که موس را بر روی li مورد نظر قرار می دهیم، رویداد های نشان داده شده اتفاق بیافتد و این آیتم ها به ما نمایش داده شود.

همان طور که می دانید، زمانی که صفحه ی ما به کاربر نمایش داده می شود، برای بار اول، گزینه های زیر باید به صورت محو شده باشند:

این یعنی برای بار اول، این گزینه ها نباید به کاربر نمایش داده شوند. برای به انجام رساندن این کار ما از دستور opacity استفاده می کنیم، یعنی مقدار opacity از div با آی دی tozihat را برابر با 0 قرار می دهیم:

در واقع یعنی با انجام این کار، ما داریم div با آی دی tozihat را ناپدید می کنیم. حالا یک بار صفحه را رفرش می کنیم و همان طور که در تصویر زیر مشاهده می کنید، div با ای دی tozihat ناپدید شده است، به عبارت دیگر یعنی، opacity آن برابر با 0 شده است:

حال به سراغ دستورات جی کوئری می رویم. در ابتدا باید دقت داشته باشیم که پلاگین جی کوئری به صفحات ما الحاق شده باشد، پس باید با استفاده از یک تگ <script> این پلاگین را وارد کنید:

در ادامه به سراغ div با آی دی porforush می رویم و اسکریپت های مورد نظر را وارد می کنیم...

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 4
- نام فایل ویدئو: 15
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی پرفروش ترین کالاها3) در ویدئو: 00:30
READ MORE
طراحی جدیدترین کالاها

09 فروردين 1397

جلسه ی سوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی جدیدترین کالاها

در قسمت سوم از این جلسه، به آموزش 'طراحی جدیدترین کالاها' می پردازیم.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد زیر آموزش داده شدند:
1. نحوه ی طراحی اسلایدشو.
2. نحوه ی اضافه کردن دکمه های next به اسلایدشو.
3. نحوه ی اضافه کردن دکمه ی previous به اسلایدشو.
آنچه که در قسمت'طراحی جدیدترین کالاها' خواهید آموخت

در قسمت'طراحی جدیدترین کالاها' موارد زیر آموزش داده خواهند شد:
1. آموزش طراحی حرفه ای اسلایدشو با استفاده از جی کوئری.
2. آموزش طراحی قسمت جدیدترین کالاها.
2.طراحی قسمت جدیدترین کالاها

... در div با id برابر با 'undermenu1'، یک div به نام slide وجود دارد، و حالا می خواهیم یک div جدید برای قسمت 'جدیدترین کالاها ' ، ایجاد کنیم. همان طور که در تصویر مشاهده می کنید، قبل از اینکه div با id برابر با undermenu1 بسته شود، یک div جدید ایجاد می کنیم و id آن را بعنون مثال برابر با 'jadidtarinha' قرار می دهیم و کامنت آن را نیز به صورت زیر مشخص می کنیم:

در ادامه با استفاده از یک تگ <style> می توانیم استایل آن را مشخص کنیم و دستورات css مورد نظر را بنویسیم:

اولین استایلی که باید آن را مشخص کنیم، width یا همان عرض div ی است که می خواهیم برای جدیدترین کالاها بسازیم. پس مقدار width را حدوداً برابر با 347 پیکسل قرار می دهیم. سپس مقدار height را برابر با 313 پیکسل قرار می دهیم و مقدار background آن را، به رنگ سفید قرار می دهیم:

با رفرش کردن صفحه، div مورد نظر ما به صورت زیر ایجاد خواهد شد:

حالا برای تنظیم کردن div مورد نظر، اعمال زیر را انجام می دهیم:
1. مقدار width این div را برابر با 349px قرار می دهیم.
2. مقدار height این div را برابر با 316px قرار می دهیم.
3. مقدار margin-left این div را برابر با 4px قرار می دهیم.
4. مقدار margin-top این div را برابر با3px قرار می دهیم.
قدم بعدی این است که می خواهیم یک کادر به رنگ خاکستری در اطراف این div ایجاد کنیم، برای این کار از دستور border به صورت زیر استفاده می کنیم:

دسترسی به موارد آموزشی بالا در بسته خریداری شده
- شماره جلسه: 3
- نام فایل ویدئو: 11
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی جدیدترین کالاها) در ویدئو: 10:50
READ MORE
طراحی جدیدترین کالاها2

09 فروردين 1397

جلسه ی چهارم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی جدیدترین کالاها2

در قسمت چهارم از این جلسه، به آموزش 'طراحی جدیدترین کالاها2' می پردازیم.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد زیر آموزش داده شدند:
1. نحوه ی ایجاد قسمت جدیدترین کالاها
2. نحوه ی تکمیل اسلایدشو مورد نظر
آنچه که در قسمت 'طراحی جدیدترین کالاها2' خواهید آموخت
READ MORE
طراحی داینامیک کالاهای پیشنهادی

09 فروردين 1397

جلسه ی ششم طراحی یک فروشگاه اینترنتی-طراحی کالاهای پیشنهادی به طور داینامیک

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

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد کلی زیر آموزش داده شدند:
1. ایجاد بخش جدیدترین کالاها به صورت داینامیک
2. ایجاد بخش پرفروش ترین محصولات به صورت داینامیک
مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی کالاهای پیشنهادی به طور داینامیک' خواهید آموخت

در قسمت 'طراحی کالاهای پیشنهادی به طور داینامیک' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

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

توضیح تفصیلی:
1. ایجاد فیلدهای مربوط به محصولات پیشنهادی فروشگاه در دیتابیس
2. ایجاد فیلدهای لازم جهت درج پربحث ترین محصولات فروشگاه در دیتابیس
3. کاربرد عملی و بررسی مفهوم limit در کوئری های sql
4. echo کردن li های مربوط به بخش محبوب ترین محصولات با استفاده از حلقه while
5. ایجاد field جدیدی در جدول محصولات که تعداد فروش هر محصول را ذخیره می کند.
6. انتخاب پر بحث ترین محصولات براساس فیلد porbahs در جدول محصولات با استفاده از دستور order به صورت کاملا خودکار
7. کاربردی دیگر از دستور order by fieldname desc/asc و انتخاب به صورت نزولی یا صعودی بر اساس یک فیلد
8. ایجاد بخش جدیدی در جدول محصولات تحت عنوان bazdid جهت نمایش محبوب ترین محصولات
9. اصلاحات جزیی در مورد کدهای css مربوط به بخش های موجود در سایت از جمله بخش نمایش موجود بودن یا نبودن محصول( با کمک فایرباگ)
طراحی کالاهای پیشنهادی به طور داینامیک

در این قسمت می خواهیم به صورت مشابه، همان کاری را که در مورد قسمت پرفروش ترین کالاها و اسلایدر و قسمت جدیدترین کالاها انجام دادیم، به همان صورت، کالاهای پیشنهادی و پربحث ترین مطالب را هم در دیتابیس دریافت کنیم و به وبسایت خودمان وارد کنیم. دوباره به phpmyadmin می رویم تا نگاهی دیگر به جدول tblmahsool بیاندازیم. برای انجام این کار، دیتابیس db_eshop را انتخاب می کنیم:

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

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

دوباره به قسمت structure می رویم و فیلد جدیدی را در انتهای جدول ایجاد می کنیم:

به طور فرضی، عنوان فیلد را pishnahad قرار می دهیم و نوع آن را هم از نوع INTدر نظر می گیریم یا به عبارت دیگر از نوع عددی. چون که فقط قرار است که یک مقدار 0 یا 1 را به خودش بگیرد، طول آن را برابر با 1 قرار می دهیم و تغییرات را ذخیره می کنیم.

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 6
- نام فایل ویدئو: 22
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی کالاهای پیشنهادی به طور داینامیک) در ویدئو: 01:01
READ MORE
طراحی زیرمنوها به صورت داینامیک

09 فروردين 1397

جلسه ی ششم طراحی یک فروشگاه اینترنتی-طراحی زیرمنوها به صورت داینامیک

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

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد کلی زیر آموزش داده شدند:
1. پیاده سازی منوهای html با استفاده از php با استفاده از یک جدول در داخل دیتابیس
مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی زیرمنوها به صورت داینامیک' خواهید آموخت

در قسمت 'طراحی منو به صورت داینامیک' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

در این قسمت به تکمیل داینامیک نمودن منوی اصلی سایت می پردازیم.در قسمت قبل منوها را داینامیک نمودیم و اما در این بخش قصد داریم زیرمنوها را نیز به صورت داینامیک از دیتابیس دریافت کنیم و به کاربران نمایش دهیم.

توضیح تفصیلی:
1. ایجاد table جدیدی با نام tblzirmenu در دیتابیس جهت ذخیره سازی زیرمنوها
2. ایجاد سه فیلد id,title,parent از نوع int,varchar,varchar در جدول فوق
3. insert نمودن برخی از زیرمنوها در این table
4. یافتن تعداد زیرمنوهای هرمنو با استفاده از دستور rowCount در PDO
5. استفاده از دستور شرطی if جهت نمایش یا عدم نمایش زیرمنو در صورت وجود یا عدم وجود
6. استفاده از کوئری select جهت اتصال به دیتابیس و فراخوانی زیرمنوها
7. کاربرد حلقه while تو در تو جهت fetch کردن زیرمنوها از tblzirmenu
8. نحوه نوشتن مقدار متغیرهای غیرعددی در یک کوئری با استفاده از سینگل کوتیشن یا دابل کوتیشن ها
9. توضیحاتی در مورد ترکیب متغیرها و دستورات مربوط به php و رفع ایرادات احتمالی یا باگ ها
10. prepare نمودن و سپس execute کردن و هم چنین fetch کردن اطلاعات با استفاده از PDO در php
طراحی زیرمنوها به صورت داینامیک

منوهای زیر را در نظر داشته باشید:

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

قبل از شروع به نوشتن کدها، باید به سراغ دیتابیس برویم و یک table جدید ایجاد کنیم تا زیر منو ها را در داخل آن ذخیره کنیم. بنابراین یک table به نام tblzirmenu ایجاد می کنیم:

پس tblzirmenu جدولی است که قرار است در آن زیرمنوها را ایجاد کنیم.

یک فیلد که باید برای آن در نظر بگیریم عبارت است از فیلد id. ما از فیلد id اکثرا در جدول استفاده می کنیم. دلیل آن هم این است که موقعی که داریم سطرهای جدیدی را در table خود insert می کنیم، اگر که یک فیلد داشته باشیم که به صورت auto increment باشد، سطرها به صورت اتوماتیک افزایش پیدا می کنند. و علاوه بر آن، چون id منحصر به فرد است، به همین دلیل می توانیم با استفاده از id، هر سطری را به طور خاص تشخیص دهیم.

به طور فرضی، اگر بخواهیم که در جدول tblmenu همان طور که در زیر مشاهده می کنید، مشخص کنیم که سطر مربوط به لپتاپ، برابر است با سطر id شماره ی 2، چون این سطر منحصر به فرد است و سطر دیگری وجود ندارد که id آن برابر با 2 باشد، همین سطر مربوط به لپتاپ را برای ما مشخص می کند:

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

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 6
- نام فایل ویدئو: 19
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی زیرمنوها به صورت داینامیک) در ویدئو: 01:41
READ MORE
طراحی سبد خرید فروشگاه2

09 فروردين 1397

جلسه ی هفتم طراحی یک فروشگاه اینترنتی-طراحی سبد خرید فروشگاه(2)

در قسمت دوم از این جلسه، به آموزش 'طراحی سبد خرید فروشگاه(2)' خواهیم پرداخت.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد کلی زیر آموزش داده شدند:
1. ایجاد کدهای ساختاری(html) و همچنین دستورات css لازم برای ساخت سبد خرید.
مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی سبد خرید فروشگاه(2)' خواهید آموخت

در قسمت 'طراحی سبد خرید فروشگاه(2)' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

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

توضیح تفصیلی:
1. کاربرد دستور opacity در jquery جهت ایجاد انیمیشن های جذاب
2. کاربرد دیگر از دستور animate در jquery و آشنایی با نحوه انجام animate ها با jquery
3. بررسی callback function در دستور animate همراه با مثال عملی و کاملا کاربردی
طراحی سبد خرید فروشگاه(2)

در این قسمت می خواهیم، مقداری کدهای جی کوئری را که قبلا نوشته بودیم را به صورت حرفه ای تر انجام دهیم. کدهایی که ما قبلا نوشته بودیم، درواقع از 2 دستور ساده ی ()hide و()show تشکیل شده بودند، که از آنها استفاده کردیم و با استفاده از همین دو دستور، عناصر div با نام sabad و tarik را show یا hide کردیم:

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

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

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

اما چیزی که ما آن را طراحی کردیم، در آن از دو دستور ساده ی show و hide بکار رفته بود و این خاصیت بالا را ندارد. حالا می خواهیم کاری کنیم که این محو شدن و آشکار شدن، با حالت انیمیشنی انجام شود. برای این کار ما از دستور opacity استفاده می کنیم. این یعنی از خاصیت opacity استفاده می کنیم و با تغییر دادن opacity، آن حالت انیمیشنی که مد نظر داریم را ایجاد می کنیم...

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 7
- نام فایل ویدئو: 24
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی سبد خرید فروشگاه 2) در ویدئو: 01:00
READ MORE
طراحی سبد خرید فروشگاه3

09 فروردين 1397

جلسه ی هفتم طراحی یک فروشگاه اینترنتی-طراحی سبد خرید فروشگاه(3)

در قسمت سوم از این جلسه، به آموزش 'طراحی سبد خرید فروشگاه(3)' خواهیم پرداخت.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد کلی زیر آموزش داده شدند:
1. طراحی حرفه ای سبد کالا از لحاظ انیمیشنی.
مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی سبد خرید فروشگاه(3)' خواهید آموخت

در قسمت 'طراحی سبد خرید فروشگاه(3)' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:
1. ایجاد کوکی ها جهت ذخیره سازی اطلاعات سبد خرید
توضیح تفصیلی:
1. ساخت یک table جدید در دیتابیس db_eshop جهت ذخیره سازی اطلاعات سبد خرید با سه فیلد id,cookiename,idmahsool
2. بررسی مفهوم سیستم های آژاکس (ایجکس) و اهمیت آن در طراحی وب سایت های مدرن
3. نحوه تشخیص id محصولی که کاربر قصد دارد آن را به سبد خرید خود اضافه نماید.
4. کاربردی از دستور attr در jquery جه دریافت اطلاعات یک المان ( id,class,...)
5. کار با ajax با استفاده از جی کوئری و مفهوم type,url,data در ایجکس جی کوئری
6. دستور done پس از اجرای ایجکس
7. نحوه ایجاد کوکی ها در مرورگر با استفاده از دستور setcookie
8. چگونگی ایجاد کوکی منحصر به فرد برای هر کاربر، به صورتی که هیچ دو کاربری مقدار کوکی یکسان نداشته باشند.
9. آشنایی با تابع microtime در php و ایجاد رشته زمانی در php
10. کار با دستور شرطی isset جهت چک کردن وجود یا عدم وجود یک متغیر در php
11. دریافت پارامترها با کمک متود POST در صفحه sabad.php
12. اتصال به بانک اطلاعاتی و ذخیره سازی مقادیر سبد خرید در جدول مربوطه با استفاده از PDO در PHP
طراحی سبد خرید فروشگاه(3)

حالا قصد داریم به صورت دقیق شروع به نوشتن کدها کنیم:

پس در نرم افزار دریم ویور، صفحه ی left.php را باز می کنیم. این صفحه، صفحه ای بود که ما قسمت پرفروش ترین کالاها و محبوب ترین کالاها را در داخل آن ایجاد کرده بودیم. کار اصلی ما اکنون، کار با قسمت افزودن به سبد خرید می باشد:

نکته ی دیگری که می خواهم خدمتتان عرض کنم، این است که، دقیقا همان جوری که این وب سایت دارد به صورت ajax سبد خرید خود را ایجاد می کند، ما نیز قصد داریم از فناوری ajax استفاده کنیم. یعنی اگر که من بخواهم در سایت 5040 این محصول را اضافه کنم، در قسمت نشان داده شده در تصویر زیر کلیک می کنم و عددی در سبد خرید به ما نشان داده می شود:

به هنگام کلیک کردن، درواقع صفحه رفرش نمی شود، و یا به صفحه ی دیگری منتقل نمی شود. درواقع در پشت صحنه، دستوراتی که باید اجرا شود را اجرا می کند، بدون اینکه این صفحه بخواهد رفرش شود. درواقع به این مفهوم، ajax گفته می شود و بدن معنی است که همه ی برنامه ها در پشت صحنه، بدون اینکه صفحه بخواهد رفرش شود، یا به صفحه ی دیگری منتقل شود، انجام می شود و سبد خرید به این صورت ایجاد می شود:

بنابراین این را هم به خاطر داشته باشید که ما قرار است از ajax استفاده کنیم.

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

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

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 7
- نام فایل ویدئو: 25
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی سبد خرید فروشگاه 3) در ویدئو: 10:04
READ MORE
طراحی سبد خرید فروشگاه4

09 فروردين 1397

جلسه ی هفتم طراحی یک فروشگاه اینترنتی-طراحی سبد خرید فروشگاه(4)

در قسمت چهارم از این جلسه، به آموزش 'طراحی سبد خرید فروشگاه(4)' خواهیم پرداخت.

آنچه که در قسمت قبل طراحی شد

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

آنچه که در قسمت 'طراحی سبد خرید فروشگاه(4)' خواهید آموخت

در قسمت 'طراحی سبد خرید فروشگاه(4)' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:
1. طراحی سبد خرید با استفاده از php
توضیح تفصیلی:
1. rowCount و کاربرد آن در PDO
2. اجرای دو کوئری مختلف با استفاده از دستور شرطی if و سپس افزودن محصول جدید به دیتابیس( یا افزایش تعداد موجود در سبد از همان نوع محصول)
3. کار با کوئری update در pdo
4. نحوه عیب یابی و رفع ایرادات دستورات sql به هنگام استفاده از ajax و نمایش کوئری ها جهت بررسی صحت و یا عدم صحت آنها
5. کار با ajax با استفاده از جی کوئری و مفهوم type,url,data در ایجکس جی کوئری
6. دستور done پس از اجرای ایجکس
7. کار با دستورات مختلف pdo و حل مثال های کاربردی در مورد دستورات sql و pdo
طراحی سبد خرید فروشگاه(4)

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

همان طور که عکس بالا را ملاحظه می کنید، فرض کنید یکی از محصولات درون سبد خرید را که قبلا آن را وارد کرده ایم، بعنوان مثال چای سفید تیما، تعدادش برابر با 1 است. اگر که دوباره بر روی قسمت اضافه به سبد خرید این محصول کلیک کنیم، مشاهده کنید که چه اتفاقی رخ می دهد:

درواقع عدد یک به عدد 2 تبدیل می شود. بنابراین ما در tblsabad که ایجاد کردیم، به یک فیلد جدید نیاز داریم تا بتوانیم تعداد کالاهایی که مد نظر کاربرمان است را ذخیره کنیم. پس به سراغ phpmyadmin می رویم. بنابراین دیتابیس db_eshop را باز می کنیم و سپس tblsabad را باز کرده و در قسمت structure یک فیلد جدید اضافه می کنیم:

و نام این فیلد را tedad قرار می دهیم. این فیلدی است که قرار است تعداد هر محصول را در داخل خودش نگه داری کند. نوع آن را INT قرار می دهیم و مقدار value را هم به طور فرضی، 10 در نظر می گیریم. این عدد در حد یک فروشگاه کفایت می کند و حتی زیاد هم هست. حالا تغییرات را ذخیره می کنیم.

در اینجا یک نکته ی دیگری را هم تکمیل می کنیم. این نکته عبارت است از اینکه، در قسمت else، زمانی که کوکی را وارد کردیم، و همچنین id محصول را هم وارد کردیم، حالا باید تعداد آن را هم مشخص کنیم. زمانی که هنوز کوکی ست نشده است، یعنی زمانی که در این حلقه ی else قرار داریم، چون بار اولی است که کاربر سبد خرید خودش را تشکیل می دهد، ما در قسمت tedad عدد 1 را وارد می کنیم:

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 7
- نام فایل ویدئو: 26
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی سبد خرید فروشگاه 4) در ویدئو: 03:40
READ MORE
طراحی کالاهای پیشنهادی

09 فروردين 1397

جلسه ی چهارم طراحی یک فروشگاه اینترنتی-طراحی کالاهای پیشنهادی

در قسمت اول از این جلسه، به آموزش 'طراحی کالاهای پیشنهادی' می پردازیم.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل موارد زیر آموزش داده شدند:
1. نحوه ی ایجاد قسمت جدیدترین کالاها
2. نحوه ی اضافه کردن قسمت اسلایدشو
مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی کالاهای پیشنهادی' خواهید آموخت

در قسمت 'طراحی کالاهای پیشنهادی' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:
1. ایجاد div دربردارنده ی قسمت کالاهای پیشنهادی
2. ایجاد قسمت 'کالاهای پیشنهادی'
توضیح تفصیلی:
1. ایجاد یک تگ div جدید با id به نام underslide و همچنین div دیگری با آی دی underslide1 درون آن با width برابر با 1100 پیکسل.
2. تفکیک underslide1 به دو ستون راست و چپ با id های right و left
3. استایل دهی به بخش های فوق با استفاده از دستورات css
4. ایجاد تگ h2 جهت نمایش عنوان مربوط به کالاهای پیشنهادی
5. مثال هایی دیگر از دستور float جهت نمایش المان ها در یک ردیف در کنار یکددیگر.
6. عیب یابی کدنویسی قالب و رفع مشکل با استفاده از فایرباگ.
7. ایجاد زیرخط زیبا و گرافیکی جهت جدا کردن عنوان از بخش های درون کالاهای پیشنهادی
8. مثالی دیگر از دستور box-shadow برای ایجاد سایه در اطراف یک المان
9. کار با دستور list-style و نحوه ی حذف نقاط توپر سیاه رنگ کنار تگ های li
10. کاربردی دیگر از دستور direction و مشخص نمودن جهت شروع کدنویسی html
11. استایل دهی به تگ ul و liهای درون آن و همچنین مشخص نمودن padding یا همان حاشیه داخلی
2.ایجاد قسمت 'کالاهای پیشنهادی'

در این قسمت، به سراغ ایجاد عنوان 'کالاهای پیشنهادی' و نقاط رنگی که در کنار این عنوان مشاهده می شوند می رویم:

به دلیل اینکه این کار را برای قسمت جدیدترین کالاها، یک بار انجام داده ایم، پس می توانیم دوباره از آن استفاده کنیم. کاری که قبلا انجام دادیم این بود که یک تگ h2 ایجاد کردیم و برای آن یک استایل تعریف کردیم. حالا می خواهیم برای ایجاد قسمت 'جدیدترین کالاها' دوباره از آنها استفاده نماییم. قبل از انجام این کار، یک div جدید را باز می کنیم و مقدار id آن را برابر با 'pishnahad' قرار می دهیم،حالا در داخل این div از تگ h2 مورد نظر استفاده می کنیم:

مشاهده ی کد نویسی:

اکنون از div با آی دی pishnahad شروع می کنیم و یک استایل دهی مختصر را به آن اضافه می کنیم، به صورت زیر:
1. width یا همان پهنای آن را برابر با % 100 قرار می دهیم.
2. مقدار border آن را برابر با 1px solid #ccc قرار می دهیم که درواقع یک کادر به اندازه ی یک پیکسل را ایجاد می کند.
3. مقدار دستور border-radius را برابر با 7px قرار می دهیم که باعث گرد شدن حاشیه ها می شود.
مشاهده ی کدنویسی:

با انجام این تنظیمات، اگر که صفحه را دوباره رفرش(refresh) کنیم، تغییرات زیر را مشاهده می نماییم:

مشاهده ی نتیجه:

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

مشاهده ی کد نویسی:

بعد از تعریف استایل برای تگ h2 در داخل div با آی دی 'pishnahad'، تغییرات را ذخیره می کنیم و دوباره صفحه را رفرش(refresh)می کنیم. همان طور که در تصویر زیر می بینید، استایل این تگ h2 مشابه قسمت جدیدترین کالاها شد:

مشاهده ی نتیجه:

به یک نکته ی حائز اهمیت توجه داشته باشید که، دستور float ممکن است ما را دچار سردرگمی کند، الان اگر که کلید F12 را فشار دهیم تا افزونه ی Firebog اجرا شود...

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:
- شماره جلسه: 4
- نام فایل ویدئو: 12
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی کالاهای پیشنهادی) در ویدئو: 8:52
READ MORE
طراحی منو به صورت داینامیک

09 فروردين 1397

جلسه ی ششم طراحی یک فروشگاه اینترنتی-طراحی منو به صورت داینامیک

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

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد کلی زیر آموزش داده شدند:
1. استفاده از transition در css برای ایجاد افکت های انیمیشنی هنگام رفتن موس بر روی محصولات.
مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی منو به صورت داینامیک' خواهید آموخت

در قسمت 'طراحی منو به صورت داینامیک' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

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

توضیح تفصیلی:
1. نحوه ی ایجاد یک دیتابیس جدید و تنظیم collation آن برای سازگاری با زبان فارسی
2. ایجاد جدولی به نام tblmenu برای ذخیره سازی منوها در آن.
3. ایجاد سه فیلد جدید با نام های img , title ,id از نوع varchar و int و مشخص نمودن طول آنها.
4. insert کردن منوهای مورد نظر و همچنین وارد نمودن آدرس عکس ها یا آیکن های هر منو.
5. ایجاد فایل جدیدی با نام connect.php جهت اتصال به دیتابیس مورد نظر.
6. استفاده از دستور PDO و نحوه ی اتصال به دیتابیس با استفاده از این دستور.
طراحی منو به صورت داینامیک

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

اولین بخشی که قصد داریم آن را از حالت استاتیک خارج کنیم، همان منوی بالای صفحه مان است:

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

برای این کار ما باید اول به دیتابیس خود برویم:

ابتدا باید برای فروشگاهی که داریم آن را طراحی می کنیم، یک دیتابیس ایجاد کنیم. نام دیتابیس را به طور فرضی db_eshop قرار می دهیم و مقدار collation را برابر با utf8 انتخاب می کنیم. همان طور که مشاهده می کنید، مقدار پیش فرض collation برابر با utf8_general_ci است که ما آن را از نوع utf8_persian_ci انتخاب می کنیم.

همان طور که مشخص است، persian به معنای فارسی است و ci هم به معنای عدم حساسیت به حروف بزرگ و کوچک است.

اکنون این دیتابیس را ایجاد می کنیم و شروع به ساختن table های خودمان می کنیم.

اولین table ی که ما نیاز داریم، table ی است که این منوها را در داخل آن ذخیره کنیم، یعنی یک table لازم داریم که اولا منوهای اصلی را در داخل آن ذخیره کنیم و یک table دیگر هم لازم داریم، برای اینکه زیرمنوها را در داخل آن ذخیره کنیم:

بنابراین ما در اینجا دو عدد table نیاز داریم. نام اولین table را tblmenu قرار می دهیم :

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

09 فروردين 1397

جلسه ی اول بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 1

در قسمت دوم از این جلسه، به آموزش 'طراحی منوی فروشگاه1' می پردازیم.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد زیر آموزش داده شدند:
1. طراحی یک خط به رنگ بنفش در قسمت بالای سایت.
2. طراحی سه گزینه ی 'بازگشت به صفحه ی نخست' و 'درباره ی ما' و 'تماس با ما'.
3. طراحی لوگوی وب سایت و قرار دادن آن در بالای سایت.
مشاهده آنچه که در قسمت قبل طراحی شد:

پیشنهاد می شود قبل از مطالعه ی 'طراحی منوی فروشگاه بخش 1' قسمت اول از جلسه اول را مطالعه نمایید.

آنچه که در قسمت 'طراحی منوی فروشگاه بخش 1' خواهید آموخت

در قسمت 'طراحی منوی فروشگاه 1'، موارد زیر آموزش داده خواهند شد:
1. آموزش دانلود یک آیکن سبد خرید و نحوه ی صحیح تغییر دادن رنگ آن در فتوشاپ.
2. آموزش قرار دادن صحیح آیکن سبد خرید در گوشه ی سربرگ و استایل دهی به آن .
3. آموزش نحوه ی تراز کردن متن در کنار عکس به طور صحیح.
4. آموزش ایجاد خط بنفش رنگ و قسمت آبی رنگ که دربردارنده ی منو می باشند.
2. آموزش قرار دادن صحیح آیکن سبد خرید در گوشه ی سربرگ و استایل دهی به آن

بعد از قرار دادن لوگوی مورد نظر در قسمت قبل، که دارای یک تگ <a> و یک تگ <img> بود،دوباره یک تگ <a> را ایجاد می کنیم. بدین صورت که در داخل این تگ <a>، یک تگ <img> قرار می دهیم و مقدار src این تگ(تگ <img>) را برابر با"img/sabad.png" قرار می دهیم:
ایجاد تگ <img> درون عنصر <a>:
```
<a> <img src = "img/sabad.png" > سبد خرید شما </a>
```
مشاهده ی کد نویسی:

مشاهده ی نتیجه:

همان طور که در تصویر بالا مشاهده می کنید، آیکن سبد خرید، و عبارت 'سبد خرید شما'، اضافه شده است.

اکنون باید استایل هایی را به تگ <img> و تگ <a> اضافه کنیم. به دلیل اینکه قرار است قسمت سبد خرید، در سمت چپ صفحه قرار گیرد، می توانیم از دستور ;float : left استفاده کنیم. بنابراین تگ استایل را باز می کنیم و مقدار float : left را به تگ <a> اضافه می کنیم. این بدین معنی است که تگ <a>، به سمت چپ صفحه شناور شود.

مشاهده ی نتیجه:

همان طور که در عکس بالا مشاهده می نمایید، عبارت 'سبد خرید شما' نسبت به عکس سبد خرید، مقداری پایین تر قرار گرفته است.

هنگامی که می خواهیم مقداری متن را در کنار یک عکس(تگ <img>) قرار دهیم ، این مشکل به وجود خواهد آمد. نحوه ی حل این مشکل بدین صورت است که...

در ادامه ی آموزش 'طراحی منوی فروشگاه 1' خواهید دید...!

با خرید بسته ی آموزشی "طراحی منوی فروشگاه 1" موارد زیر را خواهید دید:
1. نحوه ی صحیح تراز کردن متن در کنار یک عنصر عکس(<img>).
2. نحوه ی صحیح استایل دادن به سبد خرید و کار بر روی ظاهر آن.
3. نحوه ی ایجاد سایه برای عنصر در بر دارنده ی سبد خرید.
4. نحوه ی ایجاد عنصر <div> در بر دارنده ی منو.
دسترسی به موارد آموزشی بالا در بسته خریداری شده
- شماره جلسه: 1
- نام فایل ویدئو: 02
- فرمت فایل: mp4.
نقطه ی شروع بحث بالا (طراحی منوی فروشگاه 1) در ویدئو: 6:00
READ MORE
طراحی منوی فروشگاه 2

09 فروردين 1397

جلسه ی اول بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 2

در قسمت سوم از این جلسه، به آموزش ' طراحی منوی فروشگاه 2' می پردازیم.

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد زیر آموزش داده شدند:
1. طراحی خط بنفش رنگ در زیر سربرگ.
2. طراحی سبد خرید و استایل دهی به آن.
3. طراحی قسمت آبی رنگ در بر دارنده ی منو.
مشاهده آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'طراحی منوی فروشگاه بخش 2' خواهید آموخت

در قسمت 'طراحی منوی فروشگاه 2' موارد زیر آموزش داده خواهند شد:
1. آموزش ایجاد آیتم های منو و استایل دهی صحیح به آنها
2. آموزش اضافه کردن خطوط جدا کننده بین عناصر منو
3. آموزش نحوه ی صحیح فاصله دادن به عناصر منو
1.آموزش ایجاد آیتم های منو و استایل دهی صحیح به آنها

در ادامه ی توضیحات قبلی، نوبت به طراحی منوی مشخص شده ی زیر می رسد. به عبارت دیگر، منوی ما به صورت زیر در خواهد آمد:

برای طراحی این منو، دوباره صفحه ی index.php را باز می کنیم و در داخل <div> با آی دی menu، شروع به نوشتن کدهای خود می کنیم. برای ایجاد این منو، از تگ <ul> استفاده می کنیم. همان طور که می دانید، در ایجاد کردن یک لیست، از تگ <ul> استفاده می شود و ما نیز دقیقا چون می خواهیم لیستی از منوها را از قبیل: 'صفحه ی نخست' و 'گوشی همراه' و 'لپ تاپ' و... ایجاد کنیم، از تگ <ul> استفاده می کنیم:

همان طور که در تصویر بالا مشاهده می نمایید، یک تگ <style> را نیز باز می کنیم، تا بتوانیم استایل های خود را در داخل این تگ وارد کنیم. در ادامه، در تگ <style> موارد زیر را اضافه می کنیم:
1. برای حذف padding پیش فرض، در تمام عناصر <ul>، مقدار padding را برابر با 0 قرار می دهیم.
2. برای حذف margin پیش فرض، در تمام عناصر <ul> مقدار margin را برابر با 0 قرار می دهیم.
3. مقدارwidth و height برای عناصر <ul> را برابر با %100 قرار می دهیم.
4. به منظور مشاهده ی عنصر <ul>، مقدار background را برای این عنصر به رنگ زرد اختصاص می دهیم.
با انجام گزینه های بالا، بعد از رفرش(refresh) کردن صفحه، منوی ما به صورت زیر در خواهد آمد:

همان طور که ملاحظه می نمایید، <ul> مورد نظر ایجاد شد، و دقیقا روی div منو قرار گرفت. اکنون زمان آن رسیده است که در داخل این تگ <ul> شروع به نوشتن عناصر <li> کنیم. همان طور که در عکس دوم از آموزش 'طراحی منوی فروشگاه 1' مشاهده می فرمایید، اولین عنصر <li> باید به 'صفحه ی نخست' اختصاص یابد و شامل یک تگ <img> و عبارت 'صفحه ی نخست' باشد. پس بدین منظور، درون عنصر <li> یک تگ <img> ایجاد می کنیم و مقدار src آن را برابر با "img/home54.png" که نشان دهنده ی آیکن 'خانه' می باشد، قرار می دهیم و سپس عبارت 'صفحه ی نخست' را اضافه می کنیم . در قسمت های قبلی بسته ی آموزشی 'طراحی یک فروشگاه اینترنتی' نشان داده شد که چطور می توان آیکن ها را از اینترنت دانلود کرد و تغییرات لازم را بر روی آنها به وجود آورد، لذا در اینجا به این موضوع نمی پردازیم...

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

09 فروردين 1397

جلسه ی اول بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 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
READ MORE
طراحی منوی فروشگاه 4

09 فروردين 1397

جلسه ی اول بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 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
READ MORE
طراحی منوی فروشگاه 5

09 فروردين 1397

جلسه ی اول بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 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
READ MORE