I'm creating a web page in cakephp. I've a login form, before a user can access it. I've created the login form too. I've written my nav bar in default.ctp. Since, the nav bar is written in default.ctp, the nav-bar is visible in login page too. But, I don't want to show that in the login page. I learnt that I need to create my new layout and include it in my page. This is how I tried:
LoginController.php
<?php
namespace App\Controller;
session_start ();
use App\Controller\AppController;
use Cake\ORM\TableRegistry;
class LoginController extends AppController
{
public function loginindex(){
$this->layout= 'loginlayout';
$this->render ( 'login' );
}
}
loginlayout.ctp
<?php
$cakeDescription = 'Takt Time';
use Cake\Routing\Router;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?= $cakeDescription ?> ::
<?= $this->fetch('title') ?>
</title>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>
</head>
<body>
</body>
</html>
login.ctp
<?php
use Cake\Routing\Router;
echo $this->Form->create(false,array('url'=>array('controller'=>'login','action'=>'loginentry'),'id'=>'myform'));
?>
<body class="page-signin">
<div class="signin-container shadow">
<div class="signin-info bg-primary">
<a href="index.html" class="logo"><?php echo $this->Html->image('logo-white.png'); ?></a>
<!-- / .logo -->
<ul>
<li><i class="fa fa-line-chart signin-icon"></i> Demand</li>
<li><i class="fa fa-clock-o signin-icon"></i> Available time</li>
<li><i class="fa fa-signal signin-icon"></i> Pulse</li>
</ul>
<!-- / Info list -->
</div>
<div class="signin-form">
<!-- Form -->
<form novalidate="novalidate" method="post" id="myform">
<div class="signin-text">
<span>Sign In to your account</span>
</div>
<!-- / .signin-text -->
<div class="form-group">
<div class="input-group input-group-sm">
<div class="input-group-addon">
<span class="fa fa-user"></span>
</div>
<input name="LoginID" id="LoginID" class="form-control"
placeholder="Username" type="text">
</div>
</div>
<!-- / Username -->
<div class="form-group">
<div class="input-group input-group-sm">
<div class="input-group-addon">
<span class="fa fa-lock"></span>
</div>
<input name="Password" id="Password" class="form-control"
placeholder="Password" type="password">
</div>
</div>
<!-- / Password -->
<div class="form-actions">
<input value="SIGN IN" class="btn btn-primary btn-sm" type="submit"
id="btnSave" name="btnSave"> <a href="#" class="forgot-password"
id="forgot-password-link">Forgot your password?</a>
</div>
<!-- / .form-actions -->
</form>
</div>
<!-- / Password reset form -->
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {},
success: function(label) {}
});
$("#myform").validate({
rules:
{
LoginID: "required",
Password:"required",
},
messages:
{
LoginID: "Enter LoginID",
Password:"Enter Password"
}
})
$('#btnSave').on('click', function(){
$("#myform").valid();
});
$('#forgot-password-link').click(function () {
$('#password-reset-form').fadeIn(400);
return false;
});
$('#password-reset-form .close').click(function () {
$('#password-reset-form').fadeOut(400);
return false;
});
$("#mySendPassword").validate({
rules:
{
emailid: "required",
},
messages:
{
emailid: "Enter EmailID",
}
})
$('#btnSendPassword').on('click', function()
{
$("#mySendPassword").valid();
});
});
</script>
</body>
This is how I did. In loginlayout.ctp I didn't write anything in the body section because, I've customised my home.ctp to display login form. So, I'm just going to display my login page, without the nav-bars.
But, the problem is the login page appears with the nav-bars. What's wrong with the above code? What should I add or change?