AngularJS CKEditor using PHP MYSQL – Angular 6 ckEditor Tutorials

In this Post We Will Explain About is AngularJS CKEditor using PHP MYSQL – Angular 6 ckEditor Tutorials With Example and Demo.Welcome on infinityknow.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

[php]
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;
[/php]

Phase 2 – simple View Design User interface:

[php]
















[/php]

Full Source Code (index page)
[php]

[/php]

Phase 3- Must Write Required validation AngularJS Script

[php]
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”);
};

}]);
[/php]

Phase 4 – Create simple CKEditor AngularJS Directive using js

[php]
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);
};
}
};
});
[/php]

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:
[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;
}

?>
[/php]
/script/library.php:
[php]
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();
}
}
[/php]
/script/create.php:
[php]
[“Name Field is required”]]);

} else {

$product = new Products();

echo $product->Create($name, $products_desc);
}
}
?>
[/php]

/script/list.php:
[php]
Read();
?>
[/php]

/script/update.php:
[php]
[“Name Field is required”]]);

} else {

$product = new Products();

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

?>
[/php]
/script/delete.php:
[php]
Delete($id);
}

?>
[/php]

Phase 6 – Add new Product:

[php]
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;
});

};

}]);
[/php]

Phase 7 – List all product:

[php]
// 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();
[/php]
index.php
[php]