Hello friends, welcome to findnerd. Today I am going to tell you how to integrate pop up in cakephp. Popups are very popular and it is used in many websites. Like in wordpress, joomla, drupal and magento there are many plugins available for implementing popups, Similarly in Cakephp also it is possible to do. So lets start implementing popup in cakephp in a very simple way.

Lets create table for popups with following fields say id, title, content, firstvisit, delay and time, Run the following query in sql:

CREATE TABLE IF NOT EXISTS `popups` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(200) NOT NULL,
  `content` text NOT NULL,
  `firstvisit` tinyint(2) NOT NULL,
  `delay` int(10) NOT NULL,
  PRIMARY KEY (`id`)
)

Run the below sql statement and insert some dummy data.

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

(1, 'title', '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);

Second Step: Create controller for managing popup settings. Create "PopupsController.php" in your app/Controller folder.

<?php
class PopupsController extends AppController {

 public function index() {
       $data = $this->Popup->find('first');
      $this->set('data',$data);
  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;
 }
}

?>

Create Model file Popup.php in app/Model folder.

<?php

class Popup extends AppModel {
 public $validate = array(
   'title'=>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'
     )
   ),

   'delay'=>array(
     '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 View file "index.ctp" in  app/View/Popups folder. This file will be used for changing the settings.
 

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

Create Element: Now create element "popup.ctp" in app/View/Elements folder.

<?php

$data=$this->requestAction('/Popups/display');
$show_popup = 1;

// checking if first visit display is set or not
if($data['Popup']['firstvisit']=='1'){

 //checking if cookie is set or not
        if(!isset($_COOKIE['jquery_popup'])){
     setcookie('jquery_popup','jQuery Popup',time() + 2592000); // 1 day cookie
 }
 else{
   $show_popup = 0;
 }
}

if($show_popup == 1){?>
   <div class="p_anch">
   <div class="js__p_start"></div>
   </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>
   <div align="center" class="midiv"></div>
   </div>
<?php } ?>

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

 $(window).load(function(){
  setTimeout(pageSet,delaytime); 
 }); 
</script>

Add following lines in default.ctp file

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');

Now go to any page and you will see the pop up according to the settings. To change the settings go to this url URL : http://localhost/popups

Thanks for reading.