آموزش پیاده سازی اسلاید شو با PHP و MYSQL

‏  6 دقیقه
۰۱ شهریور ۱۳۹۲
آموزش پیاده سازی اسلاید شو با PHP و MYSQL

دوستان سلام،توی انجمن‌های سایت بعضی از دوستان درخواست داده بودن که آموزش نحوه استفاده از اسلاید شو رو توی سایت به صورت داینامیک قرار بدیم،توی این آموزش قراره ما این اسلاید شو زیبا و معروف رو توی 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 : [email protected]</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 مطلب).

نکته :

برای تنظیم اندازه دلخواه اسلایدر، داخل فایل style.css کلاس slider-wrapper ،خاصیت width اش رو به اندازه دلخواه تنظیم کنید.سعی کنید تصاویر رو همه به یک اندازه برای اسلایدشو آپلود کنید

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

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

چه امتیازی به این مقاله می دید؟
نویسنده کیوان علی محمدی
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

mahsa

سلام
دوستان میشه راهنمایم کنید؟؟
میخوام وقتی کاربر روش کلیک میکنه بره تو صفحه ایی دیگه تا بتونه مطلب این عکس رو بخونه
یه راهنمایی میکنید؟؟
ممون میشم 😳

کیوان علی محمدی

سلام در خاصیت href تگ های a شما لینک مطلب رو قرار بده و این بستگی به آدرس نمایش مطالب در سایتتون داره.

mohsen

ممنون عالی بود بازم از این کارا بکن.

طراحی سایت

عالی بود ممنون از مطالب بسیار خوبتون

mahsa

سلام ببخشید من میخوام این اسلایدم بیاد سمت راست باشه! وسط نمی خوام باشه و اینکه میخام لینک داشته باشه بره به صفحه بعدی
میشه خواهش کنم بهم کمک کنید
ممنون میشم
دستتون درد نکنه بابت آموزش عالیتون چون برای پروژم واقعاً بهش نیاز داشتم

وحید صالحی

سری آموزشی css و html رو مشاهده کنید…

mahsa

آخه کجاشو؟؟
نمیشه شما راهنمایی کنید؟؟
شدیدا نیاز دارم
ممنون میشم شما بهم کمک کنید 🙁

سجاد دریس

برای ایجاد چنین تغییراتی باید به html و css مسلط باشید دوست عزیز.
توی انجمن مطرح کنید شاید دوستان کمکتون کردند.

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...

💡 با تشکر از مطلب مفیدتان

———————————-
➡ سایت شما به عنوان یک سایت مفید در لیکدونی ما قرار گرفت .

مجید

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

کیوان علی محمدی

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

امیر

سلام
میشه بگید دقیقا به بجای db-server چه چیزی رو بنویسیم
ممنون .. ❓ ❓ ❓

کیوان علی محمدی

سلام اگه از نرم افزار هایی مثل wamp یا xammp استفاده می کنید باید localhost رو بنویسید و اگه از هاست استفاده می کنید باید آدرس mysql هاست رو بنویسید.

mogoei

سلام دوست گرامي ممنون از جوابتون

mogoei

سلام دوست گرامي براي ياد گرفتن php بايد اول كتاب خوند يا پروژه كار كرد بنده تقريبا تازه شروع به خوندن php كرده ام با تشكر

کیوان علی محمدی

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