Implementing Welcome Popup in CakePHP

Source : Flickr

The concept of displaying welcome message to your visitor is very popular nowadays.It could be like thanking user, prompting any terms or conditions related information,request for the subscription etc.

You might have seen such popup in any website.To implement this concept there are many plugins and extensions are available in the market for various web development platforms like wordpress , joomla, magento,drupal or it might be possible for even cakephp also, but as far as i searched there is no such plugin :(  if you find any then please let me know. :) 

But as of now, i am going to show you how you can implement such welcome popup in cakephp by the simplest way.

First of all we have to create simple table to store the required details for the popup like, title, content, delay time etc..In order to create the table just run the following sql statement into your database to create the popup table.

  `title` varchar(200) NOT NULL,
  `content` text NOT NULL,
  `firstvisit` tinyint(2) NOT NULL,
  `delay` int(10) NOT NULL,
  PRIMARY KEY (`id`)

Now insert some default values in the table.To do so just run the below sql statement.

INSERT INTO `popups` (`id`, `title`, `content`, `firstvisit`, `delay`) VALUES

(1, 'Main title goes here', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', 0, 5000);

The second step is to create the controller for managing the popup settings.Create one file  called "PopupsController.php" in your app/Controller folder.

class PopupsController extends AppController {

 public function index() {
       $data = $this->Popup->find('first');
  if (!$data) {
       throw new NotFoundException(__('Invalid Request'));

  if ($this->request->is(array('post', 'put'))) {
   if ($this->Popup->save($this->request->data)) {
    $this->Session->setFlash(__('Your settings has been updated.'));
    return $this->redirect(array('action' => 'index'));
   $this->Session->setFlash(__('Unable to update your changes.'));

  if (!$this->request->data) {
   $this->request->data = $data;

 public function display(){
  $data = $this->Popup->find('first');
  return $data;


Now create one Model file called "Popup.php" in your app/Model folder.

Note : Here, I have added only basic rules, you can add others as you wish , after all you are the only one who is going to enter the values.


class Popup extends AppModel {
 public $validate = array(
     'nonEmpty' => array(
      'rule' => array('notEmpty'),
      'message' => 'Title is required',
      'allowEmpty' => false
   'content' => array(
     'nonEmpty' => array(
      'rule' => array('notEmpty'),
      'message' => 'Popup Content is required',
      'allowEmpty' => false

     'avoidCertainTags' => array(
      'rule'    => array('avoidCertainTags'),
      'message' => 'Please enter proper content'

     'nonEmpty' => array(
      'rule' => array('notEmpty'),
      'message' => 'Delay is required',
      'allowEmpty' => false

 public function avoidCertainTags($check) {
  $value = array_values($check);
  $value = $value[0];
  return preg_match('/^[^*\<>[\]{}\\;@$]+$/', $value);



Create one file called "index.ctp" in your app/View/Popups folder.Using this view we'll change the settings.

      echo $this->Form->create();
      echo $this->Form->input('title');
      echo $this->Form->input('content',array('type'=>'textarea'));
<label>First time</label>
      echo $this->Form->checkbox('firstvisit');
      echo $this->Form->input('delay');
      echo $this->Form->input('id', array('type' => 'hidden'));
      echo $this->Form->end('Save');

Create one element called "popup.ctp" in app/View/Elements folder.


$show_popup = 1;

// checking if first visit display is set or not

 //checking if cookie is set or not
     setcookie('jquery_popup','jQuery Popup',time() + 2592000); // 1 day cookie
   $show_popup = 0;

if($show_popup == 1){?>
   <div class="p_anch">
   <div class="js__p_start"></div>
   <div class="p_body js__p_body js__fadeout"></div>
   <div class="popup js__popup js__slide_top">
   <a href="#" class="p_close js__p_close" title="CLOSE"></a>
   <div class="p_title"><?php echo $data['Popup']['title'];?></div>
   <div class="p_content">
    <p><?php echo $data['Popup']['content'];?></p>
   <div align="center" class="midiv"></div>
<?php } ?>

<script type="text/javascript">
 var delaytime='<?php echo $data['Popup']['delay'];?>';
 function pageSet(){


Now open your default.ctp file and add the following lines

echo $this->Html->script('jquery-1-10-2.min');
echo $this->Html->script('jquery.popup');
echo $this->Html->css('jquery.popup');
echo $this->element('popup');

Note: if you are using any other version of jquery then no need to add the first line, but make sure that you are loading the jquery.popup after the main jquery.

Now browse to any page of your site and the welcome popup will be displayed according the settings.

You can change the default settings from this URL : http://yoursite/popups


This tutorial is just to show you very basic concept that how you can implement such welcome popup functionality in your cakephp application.In next part of this tutorial we'll add some enhancement in terms of popup dynamic design and routing of this popup display.

The files required for this tutorial and can be found in the are as below,

  -- jquery.popup.css
  -- close.png
  -- jquery.popup.js
  -- jquery-1-10-2.min.js

Download Full Source Code

If you are an experienced developer and find any issue, error or performance related major bug then your suggestions are highly appreciated. please leave your suggestions in the comment form.