AngularJS CKEditor using PHP MYSQL – Angular ckEditor Tutorials

AngularJS CKEditor using PHP MYSQL – Angular ckEditor Tutorials

In this Post We Will Explain About is AngularJS CKEditor using PHP MYSQL – Angular ckEditor Tutorials With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angular.js, CKEditor, and REST including file uploads using PHP Example

In this post we will show you Best way to implement Integrate CKEditor in Html Page using AngularJS php, hear for How to add CKEditor with image upload using Angularjs in PHPwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Phase 1 – Setup create Database Table

CREATE TABLE `products` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL DEFAULT '',
  `products_desc` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Phase 2 – simple View Design User interface:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple CKEditor with AngularJS and PHP Steps</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- Put / Include External Libs using Live24u.com -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Put / Include External Libs using Live24u.com -->
<script src="https://cdn.ckeditor.com/4.7.1/standard/ckeditor.js"></script>
<!-- Put / Include External Libs using Live24u.com -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Put / Include External Libs using Live24u.com -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</body>
</html>

Full Source Code (index page)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CKEditor with AngularJS and PHP</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div ng-app="App">
    <div ng-controller="products_ctrl">

        <div class="container">
            <h1>Products</h1>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <button class="btn btn-primary btn-xs pull-right" ng-click="createProductsfirst()">Add Product</button>
                    <h3 class="panel-title">All Product</h3>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>


        <div class="modal fade" tabindex="-1" role="dialog" id="new_product">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                        <h4 class="modal-title">Create New Product</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Name:</label>
                            <input type="text" ng-model="product.name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Product Details:</label>
                            <textarea ck-editor ng-model="product.products_desc"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" ng-click="liveProduct()" class="btn btn-primary">Publish</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Put / Include External Libs using Live24u.com -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Put / Include External Libs using Live24u.com -->
<script src="https://cdn.ckeditor.com/4.7.1/standard/ckeditor.js"></script>
<!-- Put / Include External Libs using Live24u.com -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Put / Include External Libs using Live24u.com -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="js/live-script.js"></script>

</body>
</html>




Also Read :   PHP page redirect URL Example php redirect

Phase 3- Must Write Required validation AngularJS Script

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

app.controller('products_ctrl', ['$scope', '$http', function ($scope, $http) {

    $scope.product = {
        name: '',
        products_desc: ''
    };

    $scope.createProductsfirst = function () {
        var element = angular.element('#new_product');
        element.modal("show");
    };

}]);

Phase 4 – Create simple CKEditor AngularJS Directive using js

app.directive('ckEditor', function () {
    return {
        require: '?ngModel',
        link: function (scope, elm, attr, ngModel) {
            var ck = CKEDITOR.replace(elm[0]);

            if (!ngModel) return;

            ck.on('pasteState', function () {
                scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            });

            ngModel.$render = function (value) {
                ck.setData(ngModel.$viewValue);
            };
        }
    };
});




Phase 5 – simple Create PHP CRUD RESTFUL API:

First of all below file and directive create using PHP files.
/script/database_connection.php
/script/library.php
/script/create.php
/script/list.php
/script/update.php
/script/delete.php

/script/database_connection.php:

define('HOST', 'localhost'); 
define('USER', 'live24u'); 
define('PASSWORD', 'live@#$%^&*gh'); 
define('DATABASE', 'livedb'); 

function DB()
{
    static $instance;
    if ($instance === null) {
        $opt = array(
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            PDO::ATTR_EMULATE_PREPARES => FALSE,
        );
        $dsn = 'mysql:host=' . HOST . ';dbname=' . DATABASE;
        $instance = new PDO($dsn, USER, PASSWORD, $opt);
    }
    return $instance;
}

?>

/script/library.php:
<?php

require __DIR__ . '/database_connection.php';

/**
 * Class Product
 */
class Products
{

    protected $db;

    public function __construct()
    {
        $this->db = DB();
    }

    public function Create($name, $products_desc)
    {
        $sql_query = $this->db->prepare("INSERT INTO products(name, products_desc) VALUES (:name,:products_desc)");
        $sql_query->bindParam("name", $name, PDO::PARAM_STR);
        $sql_query->bindParam("products_desc", $products_desc, PDO::PARAM_STR);
        $sql_query->execute();

        return json_encode(['product' => [
            'id'          => $this->db->lastInsertId(),
            'name'        => $name,
            'products_desc' => $products_desc
        ]]);
    }

    public function Read()
    {
        $sql_query = $this->db->prepare("SELECT * FROM products");
        $sql_query->execute();
        $data = array();
        while ($row = $sql_query->fetch(PDO::FETCH_ASSOC)) {
            $data[] = $row;
        }

        return json_encode(['products' => $data]);
    }


    public function Update($name, $products_desc, $id)
    {
        $sql_query = $this->db->prepare("UPDATE products SET name = :name, products_desc = :products_desc WHERE id = :id");
        $sql_query->bindParam("name", $name, PDO::PARAM_STR);
        $sql_query->bindParam("products_desc", $products_desc, PDO::PARAM_STR);
        $sql_query->bindParam("id", $id, PDO::PARAM_STR);
        $sql_query->execute();
    }

    public function Delete($id)
    {
        $sql_query = $this->db->prepare("DELETE FROM products WHERE id = :id");
        $sql_query->bindParam("id", $id, PDO::PARAM_STR);
        $sql_query->execute();
    }
}





/script/create.php:
<?php

$data = json_decode(file_get_contents('php://input'), TRUE);

if (isset($data['product'])) {

    require __DIR__ . '/library.php';

    $name = (isset($data['product']['name']) ? $data['product']['name'] : NULL);
    $products_desc = (isset($data['product']['products_desc']) ? $data['product']['products_desc'] : NULL);

    // validated the request
    if ($name == NULL) {
        http_response_code(400);
        echo json_encode(['get_errors' => ["Name Field is required"]]);

    } else {

        $product = new Products();

        echo $product->Create($name, $products_desc);
    }
}
?>

Also Read :   CKEditor Upload files Custom File Manager using PHP

/script/list.php:

<?php
require __DIR__ . '/library.php';

$product = new Products();

echo $product->Read();
?>

/script/update.php:

<?php

$data = json_decode(file_get_contents('php://input'), TRUE);

if (isset($data['product'])) {

    require __DIR__ . '/library.php';

    $name = (isset($data['product']['name']) ? $data['product']['name'] : NULL);
    $products_desc = (isset($data['product']['products_desc']) ? $data['product']['products_desc'] : NULL);
    $id = (isset($data['product']['id']) ? $data['product']['id'] : NULL);

    if ($name == NULL) {
        http_response_code(400);
        echo json_encode(['get_errors' => ["Name Field is required"]]);

    } else {

        $product = new Products();

        $product->Update($name, $products_desc, $id);
    }
}

?>





/script/delete.php:
<?php

$data = json_decode(file_get_contents('php://input'), TRUE);

if (isset($data['product'])) {

    require __DIR__ . '/library.php';

    $id = (isset($data['product']['id']) ? $data['product']['id'] : NULL);

    $product = new Products();

    $product->Delete($id);
}

?>

Phase 6 – Add new Product:

app.controller('products_ctrl', ['$scope', '$http', function ($scope, $http) {

    $scope.product = {
        name: '',
        products_desc: ''
    };

    $scope.products = [];
    $scope.get_errors = [];

    // init add product model
    $scope.createProductsfirst = function () {
        var element = angular.element('#new_product');
        element.modal("show");
    };

    // publish the the product
    $scope.liveProduct = function () {

        $http.product('script/create.php', {
            product: $scope.product
        })
            .then(function success(e) {

                $scope.get_errors = [];

                $scope.products.push(e.data.product);

                var get_model_element = angular.element('#new_product');
                get_model_element.modal('hide');

            }, function error(e) {
                $scope.get_errors = e.data.get_errors;
            });

    };


}]);




Phase 7 – List all product:

 // list all product
    $scope.listPost = function () {
        $http.get('script/list.php', {})
            .then(function success(e) {
                $scope.products = e.data.products;
            }, function error(e) {

            });
    };
    $scope.listPost();

index.php
  <div class="panel panel-default">
                <div class="panel-heading">
                    <button class="btn btn-primary btn-xs pull-right" ng-click="createProductsfirst()">Add Product</button>
                    <h3 class="panel-title">All Product</h3>
                </div>
                <div class="panel-body">
                    <table ng-if="products.length > 0" class="table table-bordered table-responsive table-striped">
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                        <tr ng-repeat="product in products">
                            <td>{{ $index + 1 }}</td>
                            <td>{{ product.name }}</td>
                            <td>{{ product.products_desc }}</td>
                            <td>
                                <button ng-click="edit($index)"  class="btn btn-primary btn-xs">Edit</button>
                                <button ng-click="delete($index)" class="btn btn-danger btn-xs">Delete</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>




Also Read :   AngularJS Login with Session in PHP MySQLi

Phase 8 – simple Update the Product:

index.php:

  <div class="modal fade" tabindex="-1" role="dialog" id="update_post">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                        <h4 class="modal-title">Update Product</h4>
                    </div>
                    <div class="modal-body">

                        <ul class="alert alert-danger" ng-if="get_errors.length > 0">
                            <li ng-repeat="error in get_errors">
                                {{ error }}
                            </li>
                        </ul>

                        <div class="form-group">
                            <label>Name:</label>
                            <input type="text" ng-model="update_post.name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Product Details:</label>
                            <textarea ck-editor ng-model="update_post.products_desc"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" ng-click="updatePost()" class="btn btn-primary">Publish Changes</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

Update the Product Controller from live-script.js:

$scope.edit = function (index) {
        $scope.update_post = $scope.products[index];
        var get_model_element = angular.element('#update_post');
        get_model_element.modal('show');
    };

    $scope.updatePost = function () {
        $http.product('script/update.php', {
            product: $scope.update_post
        })
            .then(function success(e) {

                $scope.get_errors = [];

                var get_model_element = angular.element('#update_post');
                get_model_element.modal('hide');

            }, function error(e) {
                $scope.get_errors = e.data.get_errors;
            });
    };

Phase 9 – Delete Product

$scope.delete = function (index) {
        var conf = confirm("Do you really want to delete the product?");

        if (conf == true) {
            $http.product('script/delete.php', {
                product: $scope.products[index]
            })
                .then(function success(e) {

                    $scope.get_errors = [];

                    $scope.products.splice(index, 1);

                }, function error(e) {
                    $scope.get_errors = e.data.get_errors;
                });
        }
    };





Example

I hope you have Got What is How to Add CKEditor in PHP Page in Ajax Angular Step By Step And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.