جشنواره نوروزی سون لرن

ساخت CMS ساده با PHP - قسمت 5 - نصب ویرایشگر و ارسال مطلب

دسته بندی: آموزش
زمان مطالعه: 25 دقیقه
۱۵ اردیبهشت ۱۳۹۳

به نام خدا و سلام،در قسمت قبلی ما layout اصلی بخش مدیریت رو ایجاد کردیم،در ابن مطلب قصد داریم ادیتور ckeditor رو برای مدیریت محتوای خودمون نصب کنیم تا بتونیم مطالب رو به صورت html و با امکانات بیشتری در دیتابیس ثبت کنیم.

ساختار صفحات ما شبیه همون ساختاری هست که در مطلب قبلی برای صفحه dashboard.php ایجاد کردیم و فقط بخش محتوایی هر صفحه فرق میکنه.

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

ما برای ارسال مطلب در پوشه admin یه فایل با نام new-post.php ایجاد می‌کنیم و کدهای زیر رو داخلش قرار میدیم.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>اضافه کردن مطلب جدید</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap.css" rel="stylesheet">
     <link href="../css/bootstrap-rtl.css" rel="stylesheet">
    <link href="../css/bootstrap-theme.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <div class="container">
          <div class="row">
              <div class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
                  <ul class="nav navbar-nav">
                      <li><a href="http://localhost:2020/CMS">نمایش سایت</a></li>
                       <li><a href="http://localhost:2020/logout.php">خروج از سایت</a></li>
                  </ul>
              </div>
          </div>
          <div class="row" style="margin-top: 100px;" >
               <div class="col-xs-12 col-sm-3 col-md-3">
                  <div class="panel panel-primary">
                      <div class="panel-heading">
                          <h3 class="panel-title">پنل مدیریت</h3>
                      </div>
                      <div class="panel-body">
                          <ul class="nav nav-stacked">
                               <li><a href="dashboard.php">داشبورد</a></li>
                              <li class="active">مدیریت مطالب</li>
                              <li class="nav nav-divider"></li>
                              <li><a href="posts.php">همه مطالب</a></li>
                              <li><a href="new-post.php">مطلب جدید</a></li>
                              <li>مدیریت برگه ها</li>
                              <li class="nav nav-divider"></li>
                               <li><a href="pages.php">همه برگه ها</a></li>
                              <li><a href="new-page.php">برگه جدید</a></li>
                               <li>مدیریت کاربران</li>
                              <li class="nav nav-divider"></li>
                               <li><a href="users.php">همه کاربران</a></li>
                              <li><a href="new-user.php">کاربر جدید</a></li>
                               <li>مدیریت نظرات</li>
                              <li class="nav nav-divider"></li>
                               <li><a href="comments.php">همه نظرات</a></li>
                          </ul>
                      </div>
                  </div>
              </div>
              <div class="col-xs-12 col-sm-9 col-md-9">
                   <div class="panel panel-default">
                  <div class="panel-heading">
                      <h3 class="panel-title">اضافه کردن مطلب جدید</h3>
                  </div>
                   <div class="panel-body">
                           <form action="" method="post" role="form" class="form-horizontal">
                  <div class="form-group">
                      <div class="col-sm-6">
                          <input type="text" class="form-control" name="post_title"  placeholder="عنوان مطلب در این جا ...">
                      </div>
                  </div>
                  <div class="form-group">
                      <div class="col-sm-6">
                          <input type="text" class="form-control" name="post_slug"  placeholder="نامک مطلب  در این جا ...">
                      </div>
                  </div>
                   <div class="form-group">
                      <div class=" col-xs-12 col-sm-12 col-md-12">
                          <textarea id="content" name="post_content" ></textarea>
                      </div>
                  </div>
              <div class="form-group">
                  <div class="col-sm-12">
                  <select class="selectpicker" name="post_status">
                      <option value="published">منتشر شده</option>
                      <option value="draft">پیش نویس</option>
                  </select>
                  </div>
              </div>
              <div class="form-group">
                  <div class="col-sm-offset-12 col-sm-10">
                      <button type="submit" name="submit_post" class="btn btn-primary">ذخیره مطلب</button>
                  </div>
              </div>
              </form>
            </div>
              </div>
              </div>
          </div>
           <div class="row">
              <div class="col-sm-12" id="admin_footer"></div>
          </div>
      </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../js/jquery-1.10.2.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="ckeditor/ckeditor.js"></script>
    <script src="ckeditor/adapters/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/script.js"></script>
  </body>
</html>

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

نصب ویرایشگر

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

برای این کار من ویرایشگر ckeditor رو انتخاب کردم.شما باید به سایت ckeditor.com مراجعه کنید و نسخه سفارشی اونو دانلود کنیدریالپیشنهاد میکنم نسخه standard رو با اضافه کردن زبان فارسی دانلود کنید.

برای نصب باید پوشه ckeditor رو در پوشه admin کپی کنیم.دو تا فایل هست که باید در صفحه الصاق کنیم در پوشه ckeditor فایل ckeditor.js و هم چنین فایل jquery در پوشه adapters درون پوشه ckeditor رو باید به صفحه الصاق کنید.

اگه به مارک آپ نگاه کنید ما این دو تا فایل رو الصاق کردیم.خوب بعد از این باید در فایل script.js که کدهای ما قرار میگیره کدهای زیر رو وارد کنیم.

$(document).ready(function() {
	$( 'textarea#content' ).ckeditor({
            language: 'fa' 
        });
} );

می بنید که یه کد ساده جی کوئری هست که با استفاده از فایل‌های خود ckeditor اون تگ textarea رو به ویرایشگر تبدیل میکنه.هم چنین اگه زیان فارسی رو در موقع دانلود اضافه کرده باشین میتونیم با تنظیم زبان به مقدار fa از ویرایشگر فارسی راست به چپ استفاده کنیم.

خوب میمونه کمی تغییر فایل‌های استایل ویرایشگر.

در پوشه ckeditor یه فایل با نام contents.css وجود داره که استایل محتوای ویرایشگر رو مشخص میکنه شما در قسمت body استایل مورد نظر برای بدنه رو اعمال کنید مثلا من فونت تاهوما رو برای فونت پیش فرض انتخاب کردم و هم چنین فاصله خطوط رو هم کمی تغییر دادم.

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

نصب ویرایشگر بر روی php

خوب حالا وقت اینه که مطالب نوشته شده در این قسمت رو در دیتابیس ذخیره کنیم.

در بالای صفحه کدهای php رو به صورت زیر ایجاد میکنیم.

<?php
require_once '../init.php';
    $message="";
    $success=false;
    $err=false;
if(isset($_POST['submit_post'])){
    $title=  mysql_real_escape_string($_POST['post_title']);
    $slug=  mysql_real_escape_string($_POST['post_slug']);
    $content=$_POST['post_content'];
    $status=$_POST['post_status'];
    $date=strftime("%Y-%m-%d %H:%M:%S",time());
    $sql="INSERT INTO posts (post_title,post_body,post_date,post_slug,post_status,comment_count)";
    $sql.=" VALUES('{$title}','{$content}','{$date}','{$slug}','{$status}',0) ";
    $result=  mysql_query($sql);
    if($result){
        $success=true;
        $message="مطلب جدید با موفقیت ثبت گردید";
    }else{
        $err=true;
        $message="خطایی رخ داده است لطفا بعدا امتحان کنید";
    }
}
?>

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

یه فیلد date هم داریم که اونو با تابع strftime فرمت بندی دلخواه می‌کنیم تا باهاش زمان جاری رو در دیتابیس ثبت کنیم(پارامتر اولش فرمت تاریخ و پارامتر دوم هم یه timestamp میگیره که ما با تابع time مقدار timestamp جاری رو برگردوندیم).

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

خبو حالا این پیام‌ها رو کجا نشون بدیم؟قبل از تگ فرم در صفحه ما این کدها رو قرار میدیم.

<?php if($success): ?>
<div class="alert alert-success"><?php echo $message; ?></div>
<?php elseif($err): ?>
<div class="alert alert-danger"><?php echo $message; ?></div>
<?php endif; ?>

یه شرط ساده است برای چک کردن مقدار متغییر‌ها و نشون دادن مارک اپ مناسب.

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

<?php
require_once '../init.php';
    $message="";
    $success=false;
    $err=false;
if(isset($_POST['submit_post'])){
    $title=  mysql_real_escape_string($_POST['post_title']);
    $slug=  mysql_real_escape_string($_POST['post_slug']);
    $content=$_POST['post_content'];
    $status=$_POST['post_status'];
    $date=strftime("%Y-%m-%d %H:%M:%S",time());
    $sql="INSERT INTO posts (post_title,post_body,post_date,post_slug,post_status,comment_count)";
    $sql.=" VALUES('{$title}','{$content}','{$date}','{$slug}','{$status}',0) ";
    $result=  mysql_query($sql);
    if($result){
        $success=true;
        $message="مطلب جدید با موفقیت ثبت گردید";
    }else{
        $err=true;
        $message="خطایی رخ داده است لطفا بعدا امتحان کنید";
    }
}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>اضافه کردن مطلب جدید</title>
    <!-- Bootstrap -->
    <link href="../css/bootstrap.css" rel="stylesheet">
     <link href="../css/bootstrap-rtl.css" rel="stylesheet">
    <link href="../css/bootstrap-theme.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <div class="container">
          <div class="row">
              <div class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
                  <ul class="nav navbar-nav">
                      <li><a href="http://localhost:2020/CMS">نمایش سایت</a></li>
                       <li><a href="http://localhost:2020/logout.php">خروج از سایت</a></li>
                  </ul>
              </div>
          </div>
          <div class="row" style="margin-top: 100px;" >
               <div class="col-xs-12 col-sm-3 col-md-3">
                  <div class="panel panel-primary">
                      <div class="panel-heading">
                          <h3 class="panel-title">پنل مدیریت</h3>
                      </div>
                      <div class="panel-body">
                          <ul class="nav nav-stacked">
                               <li><a href="dashboard.php">داشبورد</a></li>
                              <li class="active">مدیریت مطالب</li>
                              <li class="nav nav-divider"></li>
                              <li><a href="posts.php">همه مطالب</a></li>
                              <li><a href="new-post.php">مطلب جدید</a></li>
                              <li>مدیریت برگه ها</li>
                              <li class="nav nav-divider"></li>
                               <li><a href="pages.php">همه برگه ها</a></li>
                              <li><a href="new-page.php">برگه جدید</a></li>
                               <li>مدیریت کاربران</li>
                              <li class="nav nav-divider"></li>
                               <li><a href="users.php">همه کاربران</a></li>
                              <li><a href="new-user.php">کاربر جدید</a></li>
                               <li>مدیریت نظرات</li>
                              <li class="nav nav-divider"></li>
                               <li><a href="comments.php">همه نظرات</a></li>
                          </ul>
                      </div>
                  </div>
              </div>
              <div class="col-xs-12 col-sm-9 col-md-9">
                   <div class="panel panel-default">
                  <div class="panel-heading">
                      <h3 class="panel-title">اضافه کردن مطلب جدید</h3>
                  </div>
                   <div class="panel-body">
                       <?php if($success): ?>
                       <div class="alert alert-success"><?php echo $message; ?></div>
                       <?php elseif($err): ?>
                        <div class="alert alert-danger"><?php echo $message; ?></div>
                       <?php endif; ?>
                           <form action="" method="post" role="form" class="form-horizontal">
                  <div class="form-group">
                      <div class="col-sm-6">
                          <input type="text" class="form-control" name="post_title"  placeholder="عنوان مطلب در این جا ...">
                      </div>
                  </div>
                  <div class="form-group">
                      <div class="col-sm-6">
                          <input type="text" class="form-control" name="post_slug"  placeholder="نامک مطلب  در این جا ...">
                      </div>
                  </div>
                   <div class="form-group">
                      <div class=" col-xs-12 col-sm-12 col-md-12">
                          <textarea id="content" name="post_content" ></textarea>
                      </div>
                  </div>
              <div class="form-group">
                  <div class="col-sm-12">
                  <select class="selectpicker" name="post_status">
                      <option value="published">منتشر شده</option>
                      <option value="draft">پیش نویس</option>
                  </select>
                  </div>
              </div>
              <div class="form-group">
                  <div class="col-sm-offset-12 col-sm-10">
                      <button type="submit" name="submit_post" class="btn btn-primary">ذخیره مطلب</button>
                  </div>
              </div>
              </form>
            </div>
              </div>
              </div>
          </div>
           <div class="row">
              <div class="col-sm-12" id="admin_footer"></div>
          </div>
      </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../js/jquery-1.10.2.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="ckeditor/ckeditor.js"></script>
    <script src="ckeditor/adapters/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/script.js"></script>
  </body>
</html>

اون لینک‌های بخش ساید بار رو هم اگه احیانا فایل‌ها رو تغییر نام دادین ویرایش کنید.

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

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

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

سیده الهام نوری

سلام خسته نباشین
من درس این جلسه رو متوجه نشدم!
این کد آخری رو به کجا اضافه میکنی؟
تو یه صفحه جدید؟
ادامه قبلی؟
یه سوال دیگه
من ck رو اد کردم اما چرا هیچ اتفاقی نیفتاد؟
ایکاش یکم واضح تر توضیح میدادین

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

سلام ممنونم. مشکلتون دقیقا کدوم خط از کد هستش؟

Navid Mirzaei

سلام من تازه کارم و دارم یه وبسایت برای پروژم میسازم. این ادیتور رو میخوام برای وبسایتم استفاده کنم اما نفهمیدم منظور از الصاق کردن چیه. یعنی کد درون ckeditor.js رو به script.js کپی کنم؟
با توجه به این که من این cms رو استفاده نمیکنم. باید برای استفاده ادیتور کدی رو داخل head بزارم؟

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

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

سید صالح

سلام ، باید این کد رو کجا بزارم برای ذخیره ی اطلاعات فارسی تو دیتابیس؟؟
mysql_set_charset(“utf8″);

لقمان آوند

قبل از زدن اولین کوئری …

سید علی

سلام
ممون اط مطالب خوبتون
در این cms ایجاد تگ برای مطالب وجود نداره و منم هر چی با خودم فکر کردم نتونستم راهی پیدا کنم که بشه سیستم تگ بندی رو طوری ایجاد کرد که مثه ویدپرس حرفه ای باشه و لینک داشته باشه و …
اقای علی محمدی شما میدونین چجوری باید این سیستم رو ایجاد کرد؟روشش برام مهمه.
ممنون

لقمان آوند

یه جدول توی دیتابیس برای تگ ها بساز . و هر تگی که ساخته میشه یه رکورد به اون جدول اضافه کن .
برای هر پست هم آیدی تگهاشو ذخیره کن .

سید علی

میشه جواب منو بدین؟؟!! 😀

پرنده غریب

سلام خسته نباشید میخواستم یه سوال شاید نا مرتبط بپرسم اگه میشه راهمنماییم کنید مرسی

تو بعضی از کدها کدهایی اومده با پسوند جی اس

و علامت سوال بعدش اومده و بعد ادرس دهی میکنه به چندتا عکس اما ادرس کامل نمیده فقط اشاره به اسم فایل داره مثلا 13245.png میخواستم ببینم چجوری این کارو باید انجام بدم ممنون میشم در صورت دونستن راهنماییم کنید مرسی

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

سلام من کاملا متوجه منظور شما نشدم.

سید علی

سلام
یه چیزی که من نفهمیدم در مورد پست ها اینه که اون url ی که ما توی قسمت اضافه کردن نوشته به عنوان ادرس انتخاب میکنیم چی میشه؟؟؟
مثلا ما مطلب رو داخل یه فیلد توی db ذخیره میکنیم و موقع نمایش از همون db اونا رو سلکت میکنیم ولی در مورد ادرس پست نمیفهمم که قراره چی بشه.قراره یه فایل تازه php ایجاد بشه برای هر پست؟؟قراره یه صفحه ی فرضی داشته باشیم؟؟
اون url قراره چی بشه؟امیدوارم منظورم رو فهمیده باشین

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

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

Navid Mirzaei

شما تونستین این موردو انجام بدین؟ منظورم اینه وقتی یه پست ایجاد میشه بتونه به ادامه مطلب یا همون آدرس پست بره.

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

بله این کار انجام شده.

سید علی

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

سید علی

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

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

آدرسشون که مشخصه بر اساس شناسه مطلب یا صفحه نشون داده میشه (قسمت 11 و 12 رو بخونید متوجه میشید)،بر اساس شناسه،مطلب رو از دیتابیس واکشی میکنیم و نشون میدیم.خواهش میکنم 🙂

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

باید کمی کد به فایل htaccess اضافه کنیم تا بتونه این نحوه آدرسی دهی بر اساس فیلد آدرس مطلب رو بشناسه.

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

سلام بله در پایین کدها فایل جی کوئری و فایل های ckeditor.js الصاق شده شما باید اون فایل script.js رو خودتون ایجاد کنید و طبق آموزش کدها رو داخلش قرار بدین.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.