“How to integrate CKEditor + CKFinder with Session CheckAuthentication into CakePHP”

 

In the process of web development such as CMS (Content Management System), there are many cases where you may find a WYSIWYG editor or a file manager useful.  However from my experience, I noticed that most web application frameworks provide from crappy to no backend interface for WYSIWYG editors or file managers or uploading functions.

In BeamStyle, we use the CakePHP web application framework.  The CakePHP framework is very easy to use and keeps our code clean.  That’s the reason why we are using it.  But of course, nothing is perfect.  The form filling API is crappy and there is no file management system.

To resolve such an issue, the use of external applications is unavoidable.

In this tutorial, I will introduce the method on how to setup CKEditor (WYSIWYG editor) and CKFinder (File Manager, Upload) with CakePHP with CakePHP Authentication.

== Requirements ==

1) CakePHP has already been setup and working. (http://cakephp.org/)

2) CakePHP Authentication has been setup and working inside CakePHP. (http://book.cakephp.org/view/172/Authentication)

== What you need to get ==

1) Download CKEditor (http://ckeditor.com/)

   – I used CKEditor 3.0.1, released on 16 October 2009

2) Download CKFinder (http://ckfinder.com/)

   – I used CKFinder 1.4.1.1, updated 02.10.2009

  

== Instructions ==

1) Extract your CKEditor and CKFinder into your /app/webroot/js/ directory

   It should look like the following:

     /app/webroot/js/ckeditor/

  /app/webroot/js/ckfinder/

2) Setup CKEditor in your view:

 a) Assuming that you already have your form and Javascript enabled in your controller, and your controller is named AdminController, and your Admin view is already password protected by CakePHP’s Authentication method (http://book.cakephp.org/view/172/Authentication), first you need to tell your view about the classname for CKEditor.  Let’s use the controller to tell the view about it because we want to follow some engineering ethics and the rules of MVC.

  


  class AdminController extends AppController {

   ...

   var $helpers = array('Form', 'Html', 'Javascript', 'Time');

  

   $ckeditorClass = 'CKEDITOR';

   $this->set('ckeditorClass', $ckeditorClass);

   ...

  }

 b) Since you will be integrating the CKFinder very soon when CKEditor is complete, let’s also define what’s required by CKFinder now, so we save some trouble later :p  The following specifies the path to the CKFinder application.

 

  class AdminController extends AppController {

   ...

   var $helpers = array('Form', 'Html', 'Javascript', 'Time');

  

   $ckeditorClass = 'CKEDITOR';

   $this->set('ckeditorClass', $ckeditorClass);

   

   $ckfinderPath = 'js/ckfinder/'

   $this->set('ckfinderPath', $ckfinderPath);

   ...

  }

c1) Now you need to link the javascript libraries for CKEditor and CKFinder into your template (for this example, let’s use the default template -> default.ctp)

 echo $javascript->link('ckeditor/ckeditor.js');

 echo $javascript->link('ckfinder/ckfinder.js'); 

 c2) Now you need to add a CakePHP textarea in your view.  So add it!  And let’s call it “newsContent” for now

 

  [app/views/admin/index.ctp]

  <?php echo $form->textarea('newsContent', array('class'=>$ckeditorClass)) ?>

c3) Now let’s edit the ckfinder’s config.php file so that everything will link perfectly 😉

$baseUrl = ‘upload/’;

$baseDir = '/home/cakeroot/app/webroot/upload/';

 d) If you give a load on that page, you will see a crappy textarea in your page.

    You want to need to convert that into the trendy CKEditor!  And let’s add some default text to it too! XD

    So what you do is you assign a javascript variable to represent ur newsContent, and we called it “ck_newsContent”.

    After that, we set the contents of it using that variable.

  

  [app/views/admin/index.ctp]

  <?php echo $form->textarea('newsContent', array('class'=>$ckeditorClass)) ?>

  

  <script type="text/javascript">

  var ck_newsContent = CKEDITOR.replace( 'newsContent' );

  ck_newsContent.setData( '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>&quot;Browse Server&quot;</b>.</p>' );

  </script>

ckeditor_wysiwyg

 

 e)  Now, if you just load the page and click on the image icon (circled in red in the above image), u will see Image Properties window showing up like below (Except without the “Server Browser” button)

ckeditor_image

f) So what is that server browser button?  Well, that is in fact the CKFinder.  Let’s add that!

  

  [app/views/admin/index.ctp]

  <?php echo $form->textarea('newsContent', array('class'=>$ckeditorClass)) ?>

  

  <script type="text/javascript">

  var ck_newsContent = CKEDITOR.replace( 'newsContent' );

  ck_newsContent.setData( '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>&quot;Browse Server&quot;</b>.</p>' );

  CKFinder.SetupCKEditor( ck_newsContent, '<?php echo $ckfinderPath ?>') ;

  </script>

g) After you add the above code and try again and you will see the button.  If you click on the button, you may find the following restriction screen >__<

ckfinder_restrict

h) Yes that’s right.  You need authentication check!  Let’s do that!

 Open up app/webroot/js/ckfinder/config.php

And first thing, implement your CheckAuthentication() function, like the following:

function CheckAuthentication()

{

 if( isset($_SESSION['Auth']['User']) )

 {

  return true;

 }

 return false;

}

i) Now, because CakePHP uses a different session name (Not the default name), we gotta tell CKFinder to look inside THAT CAKEPHP SESSION!

 

 Add the following at the very top of the config.php file, right below <?php

<?php

// Start CakePHP Session

session_name("CAKEPHP");

session_start();

j) Let’s but not least, let’s add an upload folder and grant 757 Permissions to it:

->  app/webroot/upload

 

ckfinder_allow

k) Now try loading up the Server Browser rom step (g) again and happy surfing!

Find out what your needs are.
If you want to show off your company’s core business and it hardly ever changes, then you may not need a full blown CMS solution. If you want to sell a couple of products online, maybe all you need is an online form with Paypal integration, not a complete e-commerce solution.

Pay for only what you really need.
Please make sure you are getting the services you want. I have heard stories where companies only want a simple Paypal integration for the couple of products they are selling, but the solution provider keep asking them to get a full e-commerce solution. The resulting price ended up about 300% higher than what it would’ve been, and the customer had gained nothing as a result. In addition, there are a lot of companies boosting that they can do SEO. Make sure SEO is really what you need before agreeing to pay for it. If your website is just your online portfolio which you want to show off to your friends, then you probably don’t need SEO.

Make sure you are getting what you want for the package.
Never assume what you are getting as a part of your package. Once the agreement is signed, it is rather a difficult (and unwilling for most solution provider) to change the requirement for free. Make sure that if you need web hosting or domain registration, you need to ask if it is included in the package.

Make sure you remember these points, even if your solution provider is Beamstyle Web Design Hong Kong 🙂

Today, I was working a newsletter program in Java using the Hibernate library.  I decided to use the ScrollableResults object because I do not have to load all of the database entity at once.  Instead, I can use a database cursor to retrieve the entity one by one.

At the beginning, I wrote this code.

ScrollableResults userCursor = query.scroll();
while (userCursor.next()) {
    User user = (User)userCursor.get(0);
    // do action
}

Our database has around 200,000 users and the program seems to be working fine. Later on, we put this code in a multi-threaded environment with 5 threads, and the program runs slower and slower.  A few minutes later, I saw this message in the console:

Continue reading