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

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

ایجاد جدول

برای ساختن جدول می‌تونید از این کد SQL استفاده کنیم.

CREATE TABLE IF NOT EXISTS `news` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` text COLLATE utf8_bin NOT NULL,
`sm` text COLLATE utf8_bin NOT NULL,
`body` text COLLATE utf8_bin NOT NULL,
`slider` int(1) NOT NULL,
`img` varchar(250) COLLATE utf8_bin DEFAULT NULL,
PRIMARY KEY (`id`)
)

خوب ما اینجا ستون id برای ایندکس کردن جدول،title عنوان مطلب،sm برای خلاصه مطلب،body برای متن مطلب،slider برای اینکه مشخص کنیم این مطلب باید توی اسلایدشو نشون داده بشه یا نه،img برای ذخیره آدرس تصویر برای نمایش توی اسلاید شو.

ایجاد صفحه ارسال مطلب

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

<form action="new.php" method="post" enctype="multipart/form-data" >
<table>
<tbody>
<tr>
<td>عنوان مطلب :</td>
<td> <input type="text" name="txt_title" ></td>
</tr>
<tr>
<td>خلاصه مطلب :</td>
<td><textarea cols="50" rows="8" name="txt_sm"></textarea></td>
</tr>
<tr>
<td>متن مطلب :</td>
<td> <textarea cols="100" rows="15" name="txt_body"></textarea></td>
</tr>
<tr>
<td>درج اسلایدر :</td>
<td><input id="chk" type="checkbox" name="chkslider" ></td>
</tr>
<tr id="row" >
<td>تصویر اسلایدر :</td>
<td> <input type="file" name="img"></td>
</tr>
<tr>
<td></td>
<td>
<input class="btn" name="Submit" type="submit" value="ارسال مطلب">
<input class="btn" type="reset" value="جدید"></td>
</tr>
</tbody>
</table>
</form>

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

input,textArea{
padding: 5px 10px;
margin-bottom: 10px;
border-radius:6px;
-webkit-border-radius:6px;
outline: none;
border:1px solid #d7d7d7;
box-shadow: 0px 0px 5px rgb(220,220,220);
-webkit-box-shadow: 0px 0px 5px rgb(220,220,220);
}
input[type="text"]{
width:200px;
}
.btn{
cursor: pointer;
background-color: #898989;
padding: 8px 20px;
color:#FFFFFF;
font-weight: bold;
}
#row{
display: none;
}

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

$(document).ready(function(){
$('#chk').on("change",function(){
if(this.checked==true)
{
$('#row').css({'display':'table-row'});
}
else
{
$('#row').css({'display':'none'});
}
});
});

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

require_once 'config/database.php';
if(isset($_POST['Submit']))
{
if(isset($_POST['txt_title']) && isset($_POST['txt_sm']) && isset($_POST['txt_body']))
{
$title=$_POST['txt_title'];
$sm=$_POST['txt_sm'];
$body=$_POST['txt_body'];
$is_slider=0;
if(isset($_POST['chkslider']) && isset($_FILES['img']))
{
$is_slider=1;
$prename=rand(100,999999);
$file_name= basename($_FILES['img']['name']);
$tmp_name=$_FILES['img']['tmp_name'];
$upliad_dir='images/Slider/';
$path=$upliad_dir.$prename.'-'.$file_name;
move_uploaded_file($tmp_name,$path);
}
else
{
$path='';
}
if(!empty($title) && !empty($sm) && !empty($body))
{
$db->connect();
$sql="INSERT INTO news (title,sm,body,slider,img) VALUES('{$title}','{$sm}','{$body}','{$is_slider}','$path')";
$result=$db->query($sql);
$db->disconnect();
if($result)
{
echo 'مطلب با موفقیت ثبت گردید.';
}
}
}
}

یه نکته  اینکه اینجا زیاد بحث امنیتی رو لحاظ نکردیم چون این صفحه در اختیار مدیر یا نویسنده سایت هست،حالا اگه شما خواستین خودتون قسمت امنیتی رو اضافه کنید،اول از همه فایل کار با دیتابیس رو اضافه کردیم،بعدش چک کردیم که فرم ارسال شده یا نه و بعدش هم چک کردیم که مقادیر عنوان و خلاصه و متن اصلی مطلب ست شده باشه و اونارو توی یه سری متغییر ریختیم،یه متغییر هم ایجاد کردیم به اسم is_slider که باهاش چک میکنیم که کاربر اون چک باکس رو انتخاب کرده یا نه و براش مقدار پیش فرض 0 رو قرار دادیم،بعدش چک می‌کنیم که کاربر چک باکس رو انتخاب کرده و عنصر فایل هم مقداری گرفته باشه،اگه اینطوری باشه یه سری مقادیر دیگه ست می‌کنیم،is_slider اینجا ست شده با مقدار 1 یعنی این مطلب به صورت اسلایدره،متغییر prename برای ایجاد یک عدد تصادفی که قبل از اسم فایل برای ذخیره به صورت منحصر به فرد و جلوگیری از ایجاد فایل‌های هم نام ایجاد می‌کنیم،filename رو برای دریافت نام فایل ارسالی و tmp_name برای دریافت نام موقت فایل ارسالی،برای ذخیره فایل‌ها هم یه مسیر مشخص میکنیم که تصاویر اسلایدر رو اونجا ذخیره میکنیم،خوب با استفاده از متغییر‌های قبلی متغییر path رو ایجاد میکنیم و بعدشم فایل رو به مسیر ایجاد شده منتقل کردیم.

خوب حال چک میکنیم که مقادیر ارسال شده خالی نباشن (فضای خالی نداشته باشن) و بعدش یه کوئری ایجاد کردیم و مقادیر رو توی دیتابیس ذخیره کردیم و اگه موفق ثبت شد یه پیغام که میگه مطلب با موفقیت ثبت گردید نشون داده میشه(برای دیتابیس ما از متد connect برای اتصال  و query برای پردازش کوئری و disconnect برای قطع ارتباط استفاده کردیم،این متد‌ها توی فایل database موجوده).

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

صفحه نمایش اسلاید شو

توی کد‌های اسلاید شو باید اون قسمتی که به صورت مرتب تکرار میشه رو کد نویسی کنیم و با PHP ایجادش کنیم.

خوب کد‌های PHP رو اول می‌نویسیم .

require_once 'config/database.php';
$count=4;
$sql="SELECT * FROM news WHERE slider=1 ORDER BY id DESC LIMIT {$count} ";
$db->connect();
$result=$db->query($sql);
$db->disconnect();

فایل database رو الصاق کردیم و با متغییر count تعداد اسلایدی که باید نشون داده بشه رو مشخص کردیم،خوب کوئری خودمون رو می‌نویسیم  و تعداد 4 مطلب آخری  که مقدار فیلد slider اونها یک (true) هست رو واکشی میکنیم و توی result قرار میدیم.

خوب حالا کد‌های HTML لازم رو می‌نویسیم.

<div class="slider-wrapper theme-default">
<div style="text-align:center;margin-top:30px;">Edited By Kaivan Alimohammadi : keivan@7learn.com</div>
<div id="slider" class="nivoSlider">
<?php
while ($row=$db->fetch_array($result))
{
echo '<a href="#"><img src="'.$row['img'].'" data-thumb="'.$row['img'].'" alt="'.$row['title'].'" title="'.$row['title'].'"/></a>';
}
?>
</div>
</div>

اون قسمت تگ a که یه تگ img داخلشه ،کد تکراری ما هست که توی حلقه گذاشتیم و تا زمانی که result، مقدار داشته باشه اونو تکرار می‌کنیم و در هر بار اجرا مقادیر لازم هر سطر  رو توی این قسمت قرار میدیم (آدرس تصویر و مقدار title مطلب).

[panel type='info' title='']برای تنظیم اندازه دلخواه اسلایدر، داخل فایل style.css کلاس slider-wrapper ،خاصیت width اش رو به اندازه دلخواه تنظیم کنید.سعی کنید تصاویر رو همه به یک اندازه برای اسلایدشو آپلود کنید[/panel]

خوب اینم از این اسلایدر داینامیک ما.توی مطلب بعدی این اسلایدر رو توی ASP.NET پیاده سازی می‌کنیم.

دانلود فایل‌های پروژه برای PHP

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۴۵ دیدگاه
mahsa ۲۸ مرداد ۱۳۹۳، ۱۴:۵۴
سلام
دوستان میشه راهنمایم کنید؟؟
میخوام وقتی کاربر روش کلیک میکنه بره تو صفحه ایی دیگه تا بتونه مطلب این عکس رو بخونه
یه راهنمایی میکنید؟؟
ممون میشم :oops:
کیوان علی محمدی ۰۲ شهریور ۱۳۹۳، ۱۲:۰۴
سلام در خاصیت href تگ های a شما لینک مطلب رو قرار بده و این بستگی به آدرس نمایش مطالب در سایتتون داره.
mohsen ۰۲ مرداد ۱۳۹۳، ۱۹:۵۵
ممنون عالی بود بازم از این کارا بکن.
طراحی سایت ۱۷ تیر ۱۳۹۳، ۱۳:۵۶
عالی بود ممنون از مطالب بسیار خوبتون
mahsa ۱۱ تیر ۱۳۹۳، ۱۲:۰۳
سلام ببخشید من میخوام این اسلایدم بیاد سمت راست باشه! وسط نمی خوام باشه و اینکه میخام لینک داشته باشه بره به صفحه بعدی
میشه خواهش کنم بهم کمک کنید
ممنون میشم
دستتون درد نکنه بابت آموزش عالیتون چون برای پروژم واقعاً بهش نیاز داشتم
:?:
وحید صالحی ۱۲ تیر ۱۳۹۳، ۲۲:۰۷
سری آموزشی css و html رو مشاهده کنید...
Faraz Minasian ۰۷ اردیبهشت ۱۳۹۳، ۲۱:۵۹
مرسی. ولی میشه یکم بیشتر کمک کنید؟
کیوان علی محمدی ۰۷ اردیبهشت ۱۳۹۳، ۲۳:۳۰
توب فایل config ثابت های اتصال به دیتابیس وجود داره بهتره مقادیر رو به صورت آرایه در فایل db ذخیره کنی و در همین فایل db هم به جای اون ثابت هااز مقادیر آرایه استفاده کنی.
Faraz Minasian ۰۴ اردیبهشت ۱۳۹۳، ۱۲:۰۸
من کل این کارا رو درست انجام دادم . 10 بارم کل کد هارو خوندم. دیتا بیس هم کامل درست کردم . ولی بازم از لوکال میرم داخل هاست فقط خطای برقراری با دیتا بیس رو میده ؟؟ چرا؟؟


Warning: mysql_connect() [function.mysql-connect]: Unknown MySQL server host 'DB_SERVR' (11001) in C:\xampp\htdocs\Slider\config\database.php on line 18
DB Connection failed.
Unknown MySQL server host 'DB_SERVR' (11001)
کیوان علی محمدی ۰۴ اردیبهشت ۱۳۹۳، ۱۶:۱۵
سلام برای زمپ بهتره اون اطلاعات اتصال به دیتابیس رو توی یه آرایه قرار بدی و بعدشم در کلاس دیتابیس جایگذاری کنی.
mehran... ۱۴ آبان ۱۳۹۲، ۱۲:۴۳
:idea: با تشکر از مطلب مفیدتان

----------------------------------
:arrow: سایت شما به عنوان یک سایت مفید در لیکدونی ما قرار گرفت .
مجید ۰۶ آبان ۱۳۹۲، ۱۰:۳۶
با سلام من کدها اسلایدشو رو در easy php استفاده کردم.در مرورگر گوگل ناقص نشون می دید.ولی در مرورگر اینترنت اکسپلورر بهتر بود.ولی فقط یک دکمه زیر یک قابی بود که یک فلش درون اون می چرخید و هیچ عکسی رو نضشون نمس داد.ممنون میشم راهنمایی کنید
کیوان علی محمدی ۰۶ آبان ۱۳۹۲، ۱۱:۱۱
سلام وقتی اسلاید شو درست نشون داده نمیشه به احتمال زیاد فایل های استایل به ردستی لود نشده،همه موارد رو طبق آموزش چک کنید.
امیر ۱۵ شهریور ۱۳۹۲، ۱۸:۳۸
سلام
میشه بگید دقیقا به بجای db-server چه چیزی رو بنویسیم
ممنون .. :?: :?: :?:
کیوان علی محمدی ۲۰ شهریور ۱۳۹۲، ۱۵:۴۵
سلام اگه از نرم افزار هایی مثل wamp یا xammp استفاده می کنید باید localhost رو بنویسید و اگه از هاست استفاده می کنید باید آدرس mysql هاست رو بنویسید.
mogoei ۱۳ شهریور ۱۳۹۲، ۰۵:۰۲
سلام دوست گرامي ممنون از جوابتون
mogoei ۱۲ شهریور ۱۳۹۲، ۲۲:۲۹
سلام دوست گرامي براي ياد گرفتن php بايد اول كتاب خوند يا پروژه كار كرد بنده تقريبا تازه شروع به خوندن php كرده ام با تشكر
کیوان علی محمدی ۱۲ شهریور ۱۳۹۲، ۲۳:۲۲
سلام دوست عزیز،اول کتاب رو بخونید و هم زمان تمرین ها رو انجام بدید و بعدا هم سعی کنید برای خودتون پروژه تعریف کنید و انجامش بدید.
جلال ۱۰ شهریور ۱۳۹۲، ۱۵:۰۴
سلام
اگه ممکنه در اخر اموزش دموی طراحی شده رو هم قرار بدید تا نتیجه کار رو بشه دید
با تشکر
موفق باشید
کیوان علی محمدی ۱۰ شهریور ۱۳۹۲، ۱۸:۳۷
سلام چشم حتما سعی میشه از این به بعد دمو رو هم قرار بدیم.
پیمان ۰۹ شهریور ۱۳۹۲، ۰۹:۵۳
باسلام وخسته نباشید من به اون لینک رفتم ولی چیزی نفهمیدم اگه میشه بیشتر توضیح بدین یا اموزششو توسایتتون بزارین ممنون میشم
تشکر از اینکه وقت گذاشته بودین
yoosef ۰۶ شهریور ۱۳۹۲، ۱۶:۲۵
سلام خسته نباشید
میخواستم بدونم چه طوری میتونم این فایل پروژه یا هر فایل php دیگه ای رو بعد از دانلود تو کامپیوتر خودم با wamp server اجرا کنم?
کیوان علی محمدی ۰۶ شهریور ۱۳۹۲، ۱۶:۳۰
سلام ومپ سرور معمولا توی درایو C و توی پوشه wamp نصب میشه اونجا هم یه پوشه ای هست با نام www شما می تونید یه پوشه توش بسازید و فایل های لازم رو اونجا کپی کنید بعدش مثلا اگه نام پوشه ی ساخته شده توی پوشه www برابر با temp باشه شما می تونید از طریق آدرس http://localhost/temp اون فایل هارو اجرا کنید.
پیمان ۰۶ شهریور ۱۳۹۲، ۱۲:۰۴
با سلام و سته نباشید بابت سایت کاربردی و عالی تون یه سوال داشتم میخام ببینم یه قسمت توسایت ها هست که ادرسی که کاربر اونجاس را نشون میده مثلا کاربر رفته به قسمت آموزشها قسمت کامپیوتر قسمت سخت افزار بعد اون بالا مینویسه : آموزشها > کامپیوتر > سخت افزار
اینو چه جوری مینویسن میشه تو سایتتون بزارین و تو ایمیل برام بفرسین که کدوم قسمت سایت هست این اموزش. از چندتا سایت دیگه پرسیدم جواب حسابی ندادن
کیوان علی محمدی ۰۶ شهریور ۱۳۹۲، ۱۲:۱۹
سلام برای اینکار میتونی از افزونه استفاده کنی.اینجا یه نمونه اش رو میتونی ببینی
elham.e ۰۵ شهریور ۱۳۹۲، ۲۰:۱۶
به قول فوتبالیا ما منتظره دومیش هستیم!!
امیر ۰۴ شهریور ۱۳۹۲، ۱۴:۵۸
اگه امنیتی نکنم ارسال میشه ؟
:?: :?:
کیوان علی محمدی ۰۴ شهریور ۱۳۹۲، ۱۹:۳۰
مشکلی نیست،چون این صفحات معمولا فقط در دسترس مدیر سایت هستن.
mehran90 ۰۳ شهریور ۱۳۹۲، ۱۴:۱۰
سلام یه سوال داشتم چه طوری میشه مطلب ارسال کرد توی سایت؟ اصلا این امکان برای همه اعضا وجود داره؟
کیوان علی محمدی ۰۳ شهریور ۱۳۹۲، ۱۴:۳۶
سلام منظورتون سایت سون لرنه؟نه این فقط برای مدیر و نویسندگان سایت امکان داره.باید درخواست خودتونو مبنی بر اینکه میخواید نویسنده سایت باشید برای مدیریت بفرستید،البته فکر نکنم تا اطلاع ثانوی نویسنده جدیدی اضافه بشه چون اون لینک همکاری در سایت هم برداشته شده.
star ۰۲ شهریور ۱۳۹۲، ۱۶:۱۲
دست شما درد نکنه :) اگه با asp.net هم بگین عالی میشه
بازم مرسی خسته نباشید
کیوان علی محمدی ۰۲ شهریور ۱۳۹۲، ۱۶:۲۹
سلام،ممنون حتما قسمت بعدیش با ASP.NET هم پیاده سازی میشه.
شاتل ۰۱ شهریور ۱۳۹۲، ۲۱:۱۳
آقا کیوان ممنون از آموزش عالیتون...
من تازه کارم.

Deprecated: Assigning the return value of new by reference is deprecated in E:\xampp\php\PEAR\Config.php on line 80

Deprecated: Assigning the return value of new by reference is deprecated in E:\xampp\php\PEAR\Config.php on line 166

کمک کنید.... :cry: :cry: :cry:
کیوان علی محمدی ۰۱ شهریور ۱۳۹۲، ۲۱:۴۹
سلام الان مشکلتون چیه؟این پیغام خطا؟ این پیغام میگه توی فایل config.php یه شی جدید بوسله رفرنس به یه متغییر نسبت داده شده،این مشکل به خاطر اینه که PHP5 به صورت اتومات ای کارو خودش انجام میده و در صورتی که کاربر این کارو انجام بده اونو به عنوان یه نوع خطا (Deprecated) شناسایی میکنه،شما از کتابخانه PEAR برای چی استفاده می کنید؟
mehran90 ۰۱ شهریور ۱۳۹۲، ۱۹:۳۷
با سلام
اگه میشه فایل های خود اسلاید شاو رو هم توضیح بدید
خیلی ممنون
mehran90 ۰۱ شهریور ۱۳۹۲، ۱۹:۲۲
خیلی ممنون اتفاقا میخواستم خواهش کنم این آموزش رو بذارید واقعا عالی