Create php mvc app. Make authorization in application

Home » Tutorials » PHP+MySQL » Create php mvc app. Make authorization in application

We continue to develop our php mvc app and we will make authorization mechanism in our app today.Last lesson we created form. Today we’ll make some changes and also dynamic avatar image changing depending on the user entered data.

First of all we must create .htaccess file in the root of our application. It is necessary to walk between application pages correctly. I notice, we don’t this pages directly on the server. In real all requests index.php handles. Such approach is called FromController.
For implementation authorization mechanism we must create method in IndexModel, which will return false, if user data from form is not correct, or redirect us to cabinet main page.
This method we will call in index method of IndexController, if $_POST is not empty.
As as homework you can implement registration mechanism and send me to my email – mail@kamil-abzalov.ru. First work I put on the server.

Code lesson (.htaccess)

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php

Code lesson (style.css)

html, body {
	height: 100%;
}

.table-block {
	display: table;
	width: 100%;
}

.table-cell-block {
	display: table-cell;
	vertical-align: middle;
}


.form-signin
{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
    margin-bottom: 10px;
}
.form-signin .checkbox
{
    font-weight: normal;
}
.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus
{
    z-index: 2;
}
.form-signin input[type="text"]
{
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall
{
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title
{
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img
{
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help
{
    margin-top: 10px;
}
.new-account
{
    display: block;
    margin-top: 10px;
}

Code lesson (script.js)

$(document).ready(function(){

	$("#form-signin").submit(function(e){
		e.preventDefault();

		var login = $.trim($("#login").val());
		var password = $.trim($("#password").val());

		if(login == '' || password == '') {
			$("img.profile-img").attr("src", "/images/user-error.png");
		} else {
			$("img.profile-img").attr("src", "/images/user-ok.png");
			$(this).unbind().submit();
		}

	});


});

Code lesson (main.tpl.php)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><?php echo $pageData['title']; ?></title>
	<meta name="vieport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<link rel="stylesheet" href="/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/style.css">
</head>
<body>
	
	<header></header>

	<div id="content">
	<div class="container table-block">
    <div class="row table-cell-block">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <h1 class="text-center login-title">Вход в кабинет</h1>
            <div class="account-wall">
                <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
                    alt="">
                <form class="form-signin" id="form-signin" method="post">
                    <?php if(!empty($pageData['error'])) :?>
                        <p><?php echo $pageData['error']; ?></p>
                    <?php endif; ?>
                <input type="text" class="form-control" name="login" id="login" placeholder="Логин" required>
                <input type="password" name="password" id="password" class="form-control" placeholder="Пароль" required>
                <button class="btn btn-lg btn-primary btn-block" type="submit">Войти</button>
                </form>
            </div>
        </div>
    </div>
</div>
	</div>

	<footer>
		
	</footer>


	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/angular.min.js"></script>
	<script src="/js/script.js"></script>


</body>
</html>

Code lesson (IndexModel.php)

<?php

class IndexModel extends Model {

	
	public function checkUser() {

		$login = $_POST['login'];
		$password = md5($_POST['password']);

		$sql = "SELECT * FROM users WHERE login = :login AND password = :password";

		$stmt = $this->db->prepare($sql);
		$stmt->bindValue(":login", $login, PDO::PARAM_STR);
		$stmt->bindValue(":password", $password, PDO::PARAM_STR);
		$stmt->execute();


		$res = $stmt->fetch(PDO::FETCH_ASSOC);


		if(!empty($res)) {
			header("Location: /cabinet");
		} else {
			return false;
		}

	}

}

Code lesson (IndexController.php)

<?php

class IndexController extends Controller {

	private $pageTpl = '/views/main.tpl.php';


	public function __construct() {
		$this->model = new IndexModel();
		$this->view = new View();
	}


	public function index() {
		$this->pageData['title'] = "Вход в личный кабинет";
		if(!empty($_POST)) {
			if(!$this->login()) {
				$this->pageData['error'] = "Неправильный логин или пароль";
			}
		}

		$this->view->render($this->pageTpl, $this->pageData);
	}


	public function login() {
		if(!$this->model->checkUser()) {
			return false;
		}
	}



}