How To Integrate Welcome Popup In CakePHP

The concept of displaying a welcome message or popup to your visitor is very popular. It could be like a request for the subscription, a product deal, etc. In this tutorial, we are going to learn how we can implement such a welcome popup in CakePHP in the simplest way.

Note: CakePHP version used for this tutorial was 2.10.22, with some minor changes you can implement in CakePHP 2.x versions also.

First of all, we have to create a 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.

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`)
)

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

We need one controller for managing the popup settings. Create one file called 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;
	}
}

?>

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

<?php

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

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

		'delay'=>array(
			'notBlank' => array(
				'rule' => array('notBlank'),
				'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.

<?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 one element called 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>

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 to the settings. You can change the default settings from this URL: http://yoursite/popups

Enhancements

This tutorial is just to show you a very basic concept that how you can implement such welcome popup functionality in your CakePHP application. In the 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 sourcecode.zip

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

Download Source