Create PHP MVC app. Edit use info with angular js custom directive

Home » Tutorials » PHP+MySQL » Create PHP MVC app. Edit use info with angular js custom directive
In last lesson we made how to make custom directives in angular js. Today we will continue to use it, reading data to it.

Code lesson (users.js)

var users = angular.module('users', []);

users.controller("usersController", function($scope, $http){


	$scope.getUserData = function(userId) {
		$http({
			method: "POST",
			url: "http://cabinet.kamil-abzalov.ru/cabinet/users/getUserById",
			data: $.param({id: userId}),
			headers: {'Content-Type': 'application/x-www-form-urlencoded'}
		}).then(function(result){
			$scope.userId = result.data.id;
			$scope.fullName = result.data.fullName;
			$scope.login = result.data.login;
			$scope.email = result.data.email;
			$scope.getRoles();
		})
	}

	$scope.getRoles = function() {
		$http({
			method: "POST",
			url: "http://cabinet.kamil-abzalov.ru/cabinet/users/getUsersRoles",
			headers: {'Content-Type': 'application/x-www-form-urlencoded'}
		}).then(function(result){
			$scope.roles = [];
			for(var i=0; i<result.data.length; i++) {
				$scope.roles.push(result.data[i]);
			}
		})	
	}


});


users.directive('editUser', function(){
	return {
		templateUrl: "/views/edit-user-tpl.php",
		restrict: "E",
		replace: true,
		transclude: true,
		controller: "usersController",
		link: function(scope, element, attrs) {
			scope.showEditForm = function() {
				scope.isShowEditForm = true;
			}
		}
	}
})

Code lesson (UsersController)

<?php


class UsersController extends Controller {

	private $pageTpl = "/views/users.tpl.php";


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

	public function index() {

		if(!$_SESSION['user']) {
			header("Location: /");
		}
		$this->pageData['title'] = "Пользователи";
		$this->pageData['usersList'] = $this->model->getUsers();
		$this->view->render($this->pageTpl, $this->pageData);
	}

	public function getUserById() {

		if(!$_SESSION['user']) {
			header("Location: /");
		}

		if(isset($_POST['id']) && $_POST['id'] != '') {
			$userId = $_POST['id'];
			$userInfo = json_encode($this->model->getUserById($userId));
			echo $userInfo;
		} else {
			echo json_encode(array("success" => false, "text" => "ошибка"));
		}
	}

	public function getUsersRoles() {

		if(!$_SESSION['user']) {
			header("Location: /");
		}

		$roles = $this->model->getRoles();
		if(empty($roles)) {
			echo json_encode(array("success" => false, "text" => "ошибка"));
		} else {
			echo json_encode($roles);
		}

	}


}

Code lesson (UsersModel)

<?php

class UsersModel extends Model {


	public function getUsers() {

		$sql = "SELECT users.id, users.login, users.fullName, users.email, role.name as role FROM users 
				INNER JOIN role ON users.role_id = role.id";

		$stmt = $this->db->prepare($sql);
		$stmt->execute();
		$result = array();
		while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
			$result[$row['id']] = $row;
		}

		return $result;		

	}


	public function getUserById($id) {
		$sql = "SELECT users.id, users.email, users.fullName, users.login, role.name as role FROM users	
				INNER JOIN role ON users.role_id = role.id
				WHERE users.id = :id";


		$stmt = $this->db->prepare($sql);
		$stmt->bindValue(":id", $id, PDO::PARAM_INT);
		$stmt->execute();
		$result = $stmt->fetch(PDO::FETCH_ASSOC);
		if(!empty($result)) {
			return $result;
		} else {
			return false;
		}		
	}

	public function getRoles() {
		$result = array();
		$sql = "SELECT * FROM role";
		$stmt = $this->db->prepare($sql);
		$stmt->execute();
		while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
			$result[] = $row;
		}
		return $result;
	}


}

Code lesson (directive template edit-user-tpl.php)

<form method="post" class="form-horizontal" data-ng-show="isShowEditForm">
	<input type="hidden" data-ng-model="userId">		

	<fieldset>
		<div class="form-group">
			<label for="fullName" class="col-md-4 control-label">ФИО</label>
			<div class="col-md-4">
				<input type="text" id="fullName" name="fullName" data-ng-model="fullName" class="form-control" required="true">
			</div>
		</div>
		<div class="form-group">
			<label for="login" class="col-md-4 control-label">Логин</label>
			<div class="col-md-4">
				<input type="text" id="login" name="login" data-ng-model="login" class="form-control" required="true">
			</div>
		</div>
		<div class="form-group">
			<label for="email" class="col-md-4 control-label">Email</label>
			<div class="col-md-4">
				<input type="email" id="email" name="email" data-ng-model="email" class="form-control" required="true">
			</div>
		</div>
		<div class="form-group">
			<label for="fullName" class="col-md-4 control-label">Роль</label>
			<div class="col-md-4">
				<select name="role" id="role" data-ng-model="role" class="form-control">
					<option value="{{role.id}}" data-ng-repeat="role in roles">{{role.name}}</option>
				</select>
			</div>
		</div>
		<div class="from-group">
			<div class="col-md-4 col-md-offset-4">
				<button class="btn btn-success">Сохранить</button>
				<button class="btn btn-danger">Удалить</button>
			</div>
		</div>
	</fieldset>
</form>

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This