ایجاد جدول

برای ساختن جدول می تونید از این کد SQL استفاده کنیم.
1 CREATE TABLE IF NOT EXISTS `news` (

2 `id` int(11) NOT NULL AUTO_INCREMENT,

3 `title` text COLLATE utf8_bin NOT NULL,

4 `sm` text COLLATE utf8_bin NOT NULL,

5 `body` text COLLATE utf8_bin NOT NULL,

6 `slider` int(1) NOT NULL,

7 `img` varchar(250) COLLATE utf8_bin DEFAULT NULL,

8 PRIMARY KEY (`id`)

9 )



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

برای اینکه کارمون شکل و شمایل بهتری بگیره ما یه صفحه ارسال مطلب ایجاد می کنیم و ازش برای ثبت مطالب و تصاویر استفاده میکنیم،قسمت HTML لازم رو برای این صفحه رو به این صورت می نویسیم.
1 <form action="new.php" method="post" enctype="multipart/form-data" >

2 <table>

3 <tbody>

4 <tr>

5 <td>عنوان مطلب :</td>

6 <td> <input type="text" name="txt_title" ></td>

7 </tr>

8 <tr>

9 <td>خلاصه مطلب :</td>

10 <td><textarea cols="50" rows="8" name="txt_sm"></textarea></td>

11 </tr>

12 <tr>

13 <td>متن مطلب :</td>

14 <td> <textarea cols="100" rows="15" name="txt_body"></textarea></td>

15 </tr>

16 <tr>

17 <td>درج اسلایدر :</td>

18 <td><input id="chk" type="checkbox" name="chkslider" ></td>

19 </tr>

20 <tr id="row" >

21 <td>تصویر اسلایدر :</td>

22 <td> <input type="file" name="img"></td>

23 </tr>

24 <tr>

25 <td></td>

26 <td>

27 <input class="btn" name="Submit" type="submit" value="ارسال مطلب">

28 <input class="btn" type="reset" value="جدید"></td>

29 </tr>

30 </tbody>

31 </table>

32 </form>



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

2 padding: 5px 10px;

3 margin-bottom: 10px;

4 border-radius:6px;

5 -webkit-border-radius:6px;

6 outline: none;

7 border:1px solid #d7d7d7;

8 box-shadow: 0px 0px 5px rgb(220,220,220);

9 -webkit-box-shadow: 0px 0px 5px rgb(220,220,220);

10 }

11 input[type="text"]{

12 width:200px;

13 }

14 .btn{

15 cursor: pointer;

16 background-color: #898989;

17 padding: 8px 20px;

18 color:#FFFFFF;

19 font-weight: bold;

20 }

21 #row{

22 display: none;

23 }



توی استایل ما سطری از جدول که عنصر انتخاب فایل توش قرار داره رو به صورت پیشفرض مخفی کردیم،چون می خوایم وقتی کاربر روی اون چک باکس کلیک کرد این سطر نشون داده بشه،برا این کار هم کمی کد جاوا اسکریپت با جی کوئری اضافه میکنیم.
1 $(document).ready(function(){

2

3 $('#chk').on("change",function(){

4

5 if(this.checked==true)

6 {

7 $('#row').css({'display':'table-row'});

8 }

9 else

10 {

11 $('#row').css({'display':'none'});

12 }

13

14 });

15 });



خوب کار قسمت HTML برای صفحه ارسال مطلب تموم شد،حالا کد های PHP لازم رو می نویسیم.
1 require_once 'config/database.php';

2 if(isset($_POST['Submit']))

3 {

4 if(isset($_POST['txt_title']) && isset($_POST['txt_sm']) && isset($_POST['txt_body']))

5 {

6 $title=$_POST['txt_title'];

7 $sm=$_POST['txt_sm'];

8 $body=$_POST['txt_body'];

9 $is_slider=0;

10 if(isset($_POST['chkslider']) && isset($_FILES['img']))

11 {

12 $is_slider=1;

13 $prename=rand(100,999999);

14 $file_name= basename($_FILES['img']['name']);

15 $tmp_name=$_FILES['img']['tmp_name'];

16 $upliad_dir='images/Slider/';

17 $path=$upliad_dir.$prename.'-'.$file_name;

18 move_uploaded_file($tmp_name,$path);

19 }

20 else

21 {

22 $path='';

23 }

24

25 if(!empty($title) && !empty($sm) && !empty($body))

26 {

27 $db->connect();

28 $sql="INSERT INTO news (title,sm,body,slider,img) VALUES('{$title}','{$sm}','{$body}','{$is_slider}' ,'$path')";

29 $result=$db->query($sql);

30 $db->disconnect();

31 if($result)

32 {

33 echo 'مطلب با موفقیت ثبت گردید.';

34 }

35

36 }

37 }

38 }



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

توی کد های اسلاید شو باید اون قسمتی که به صورت مرتب تکرار میشه رو کد نویسی کنیم و با PHP ایجادش کنیم.
خوب کد های PHP رو اول می نویسیم .
1 require_once 'config/database.php';

2 $count=4;

3 $sql="SELECT * FROM news WHERE slider=1 ORDER BY id DESC LIMIT {$count} ";

4 $db->connect();

5 $result=$db->query($sql);

6 $db->disconnect();



فایل database رو الصاق کردیم و با متغییر count تعداد اسلایدی که باید نشون داده بشه رو مشخص کردیم،خوب کوئری خودمون رو می نویسیم و تعداد 4 مطلب آخری که مقدار فیلد slider اونها یک (true) هست رو واکشی میکنیم و توی result قرار میدیم.
خوب حالا کد های HTML لازم رو می نویسیم.
1 <div class="slider-wrapper theme-default">

2 <div style="text-align:center;margin-top:30px;">Edited By Kaivan Alimohammadi : keivan@7learn.com</div>

3 <div id="slider" class="nivoSlider">

4 <?php

5

6 while ($row=$db->fetch_array($result))

7 {

8 echo '<a href="#"><img src="'.$row['img'].'" data-thumb="'.$row['img'].'" alt="'.$row['title'].'" title="'.$row['title'].'"/></a>';

9 }

10 ?>

11 </div>

12 </div>



اون قسمت تگ a که یه تگ img داخلشه ،کد تکراری ما هست که توی حلقه گذاشتیم و تا زمانی که result، مقدار داشته باشه اونو تکرار می کنیم و در هر بار اجرا مقادیر لازم هر سطر رو توی این قسمت قرار میدیم (آدرس تصویر و مقدار title مطلب).
نکته : برای تنظیم اندازه دلخواه اسلایدر، داخل فایل style.css کلاس slider-wrapper ،خاصیت width اش رو به اندازه دلخواه تنظیم کنید.سعی کنید تصاویر رو همه به یک اندازه برای اسلایدشو آپلود کنید