AngularJS CKEditor using PHP MYSQL – Angular 6 ckEditor Tutorials

Rate this post

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]




Simple CKEditor with AngularJS and PHP Steps











[/php]

Full Source Code (index page)
[php]




CKEditor with AngularJS and PHP


Products

All Product









READ :  Dynamically Added Meta Data,keywords,title using AngularJS



[/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’, ‘[email protected]#$%^&*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;
}

READ :  Vuejs RESTful Web Service Example - Vue RESTful APIs VueResource

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]

[/php]

Phase 8 – simple Update the Product:

index.php:
[php]


[/php]

Update the Product Controller from live-script.js:

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

Phase 9 – Delete Product

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

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(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.