Realtime Chat Application with CakePHP and Socket.IO #2





Before , We begin we need the main layout for the application ,in my case i  make ctp file (cakephp file )
<!DOCTYPE html>
<html>
<head>
<?php echo $this->Html->charset(); ?>
<title>
<?php echo $this->fetch('title'); ?>
</title>
<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<?php echo $this->Html->css("bootstrap.min"); ?>
<?php echo $this->Html->css("bootstrap-material-design.min"); ?>
<?php echo $this->Html->css("ripples.min"); ?>
<?php echo $this->Html->css("snackbar.min"); ?>
<?php
echo $this->fetch('meta');
echo $this->fetch('css');
?>
<?php echo $this->Html->script("jquery"); ?>
<?php echo $this->Html->script("snackbar.min"); ?>
</head>
<body>
<?php echo $this->Element('header'); ?>
<?php echo $this->Session->flash(); ?>
<?php echo $this->fetch('content'); ?>
<?php echo $this->fetch('script'); ?>
<?php echo $this->Html->script("material.min"); ?>
<?php echo $this->Html->script("ripples.min"); ?>
<script type="text/javascript">
$.material.init()
</script>
</body>
</html>
view raw default.ctp hosted with ❤ by GitHub


I include in the css and js files for  Material Design for Bootstrap just to have a modern look for the

application


<?php echo $this->fetch('content'); ?>

this echo the view for other pages / controllers's actions

we need also to another layout file  to use it in chat

PS : the layout  files are in this directory app/view/layout , it's specific for cakephp 2









<!DOCTYPE html>
<html>
<head>
<?php echo $this->Html->charset(); ?>
<title>
<?php echo $this->fetch('title'); ?>
</title>
<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<?php echo $this->Html->css("bootstrap.min"); ?>
<?php echo $this->Html->css("bootstrap-material-design.min"); ?>
<?php echo $this->Html->css("ripples.min"); ?>
<?php
echo $this->fetch('meta');
echo $this->fetch('css');
?>
<?php echo $this->Html->script("jquery"); ?>
</head>
<body>
<style>
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
form#formulaire_chat {
position: fixed;
bottom: 0px;
}
#zone_chat{
height: 800px;
}
#zone_chat strong {
color: white;
background-color: black;
padding: 2px;
}
#message {
width: 80%;
}
.filechat{
position: fixed;
bottom: 0px;
height: 118px;
right :0px;
}
</style>
<?php echo $this->Session->flash(); ?>
<?php echo $this->fetch('content'); ?>
<?php echo $this->fetch('script'); ?>
<?php echo $this->Html->script("material.min"); ?>
<?php echo $this->Html->script("ripples.min"); ?>
<script type="text/javascript">
$.material.init()
</script>
</body>
</html>
view raw chat.ctp hosted with ❤ by GitHub

Comments

Post a Comment

Popular posts from this blog

Realtime Chat Application with CakePHP and Socket.IO #1

Image
In this blog we will build a Realtime Chat Application with CakePHP and Socket.IO Your are free to use another framework, the idea is just learning the basics and a few (Socket.IO) tips Database :  To store our data for this application we need 4 tables :  users :         contains user's informations such as username and password hash ,email ...  messages : contains messages between users, it also store the information of sender and destination  user companies : or teams table ,in order to organise groups i add this table to give the user the freedom  of organizing his contact it stores the company name with his owner .   companies_users : it contains the users and their respective  companies here the SQL file fo database structure     file in the next tutorial we'r gone started building the frontend using cakephp  
Read more

Let's build a mobile application with Ionic Framework #1

Image
Let's build a mobile application with Ionic Framework @ChihebNabil Composants UI : http://ionicframework.com/docs/components Slide NB : Ensure that NodeJS is correctly installed on your machine Slides Cordova / Ionic / AngularJS ? Native : The inconvenients Is there an alternative? Ionic CLI Overview of UI components (http://ionicframework.com/docs/components) Mini Project Cordova / Ionic / AngularJS ? Apache Cordova (6.x) : open source framework developed by the Apache Foundation. It allows to create applications for different platforms (Android, IOS ...) in HTML, CSS and JavaScript. Ionic (1.3): it is a framework based on AngularJS facilitate the development of hybrid mobile applications AngularJS (1.5.5) : AngularJS is a JavaScript framework Open Source Powered by Google Native : Les inconvénients Mastering each platform is required expensive development entirely separate Source Code Y at-il une alternative? HTML5 Applications Dir...
Read more

Let's build a mobile application with Ionic Framework #3

Image
Today We 're gonna start to write some code , first is make a main controller to our ionic application , of course by controller i mean angularjs controller . we start by add ng-controller to our body tag , but this is just a reference to controller we need also to create this controller (MainController) .  The idea is just use http call to get the data.json AngularJS comes with built in $ http service  to make (GET,UPDATE,POST,DELETE) in our case we are are doing get call app.controller('MainController',function ($scope,$http) {   // body...   $http.get("data.json")     .then(function(response) {         console.log(response)     }); }) we are just login data in the console. NB : the http call could make some time before it returns the  data in , our case we are working localy, but in real life we have to work with web services and  probably internet connection like mine lo...
Read more