내용 저장
PHP MySQL로 TinyMCE 컨텐츠를 저장하고 검색하는 방법에 대한 튜토리얼에 오신 것을 환영합니다.
그래서 당신은 당신의 자신의 CMS를 구축하거나 사용자가 자신의 제품 페이지를 편집 할 수 있는 유연성을 부여하고 싶습니까?
TinyMCE는 확실히 좋은 선택이지만 어떻게 MySQL 데이터베이스에 내용을 저장합니까?
이 안내서는 예제를 통해 이를 수행하는 방법을 안내합니다. 계속 읽으십시오!
ⓘ이 튜토리얼을 시작할 때 모든 예제 소스 코드가 포함 된 zip 파일을 포함 시켰으므로 모든 내용을 복사하여 붙여 넣을 필요가 없습니다.
소스 코드 다운로드
먼저 약속 된 예제 소스 코드에 대한 다운로드 링크가 있습니다.
소스 코드 다운로드
소스 코드를 다운로드하려면 여기를 클릭하십시오. MIT 라이센스에 따라 릴리스되었으므로 그 위에 빌드하거나 자신의 프로젝트에서 자유롭게 사용하십시오.
폴더
다음은 zip 파일에서 폴더를 구성하는 방법에 대한 간략한 소개입니다.
빠른 시작
기본 설정
코드로 들어가기 전에 먼저 설정해야 할 몇 가지 사항이 있습니다.
TINYMCE 다운로드
사본을 직접 호스팅 하기로 결정한 경우 TinyMCE를 웹 사이트에서 무료로 다운로드하거나 CDN 사본<script src = "https://cloud.tinymce.com/5/tinymce.min.js"></ script>을 사용할 수 있습니다. – 그러나 먼저 등록해야 합니다.
샘플 데이터베이스
시연을 위해 다음 더미 데이터베이스 테이블을 사용합니다.
CREATE TABLE `contents` ( `content_id` int(11) NOT NULL, `content_text` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE `contents` ADD PRIMARY KEY (`content_id`); ALTER TABLE `contents` MODIFY `content_id` int(11) NOT NULL AUTO_INCREMENT;
이것은 2 개의 필드가 있는 매우 간단한 테이블입니다.
| Field | Description |
| content_id | Primary key, auto-increment. |
| content-text | Content text. |
물론, 프로젝트에 맞게 제목, 설명, 상태를 추가하여 자신의 프로젝트에 맞게 자유롭게 확장하십시오.
콘텐츠 라이브러리
계속해서 내용을 다룰 PHP 라이브러리를 만들어 보자.
구성 파일
// MUTE NOTICES error_reporting(E_ALL & ~E_NOTICE); // PATH define('PATH_LIB', __DIR__ . DIRECTORY_SEPARATOR); // DATABASE SETTINGS - CHANGE THESE TO YOUR OWN define('DB_HOST', 'localhost'); define('DB_NAME', 'test'); define('DB_CHARSET', 'utf8'); define('DB_USER', 'root'); define('DB_PASSWORD', '');
이것은 모든 설정을 유지하기 위한 구성 파일일 뿐입니다. 데이터베이스 설정을 자신의 것으로 변경하십시오.
콘텐츠 라이브러리
class Content { protected $pdo = null; protected $stmt = null; public $error = ""; public $lastID = null; function __construct() { // __construct() : connect to the database // PARAM : DB_HOST, DB_CHARSET, DB_NAME, DB_USER, DB_PASSWORD // ATTEMPT CONNECT try { $str = "mysql:host=" . DB_HOST . ";charset=" . DB_CHARSET; if (defined('DB_NAME')) { $str .= ";dbname=" . DB_NAME; } $this->pdo = new PDO( $str, DB_USER, DB_PASSWORD, [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_EMULATE_PREPARES => false ] ); } // ERROR - DO SOMETHING HERE // THROW ERROR MESSAGE OR SOMETHING catch (Exception $ex) { print_r($ex); die(); } } function __destruct() { // __destruct() : close connection when done if ($this->stmt !== null) { $this->stmt = null; } if ($this->pdo !== null) { $this->pdo = null; } } function add($text) { // add() : create a new content page // PARAM $text : content text try { $this->stmt = $this->pdo->prepare("INSERT INTO `contents` (`content_text`) VALUES (?)"); $this->stmt->execute([$text]); $this->lastID = $this->pdo->lastInsertId(); } catch (Exception $ex) { $this->error = $ex->getMessage(); return false; } $this->stmt = null; return true; } function edit($text, $id) { // edit() : update content page // PARAM $text : content text // $id : content ID try { $this->stmt = $this->pdo->prepare("UPDATE `contents` SET `content_text`=? WHERE `content_id`=?"); $this->stmt->execute([$text, $id]); } catch (Exception $ex) { $this->error = $ex->getMessage(); return false; } $this->stmt = null; return true; } function get ($id) { // get : get content text // PARAM $id : content ID $result = []; try { $this->stmt = $this->pdo->prepare("SELECT * FROM `contents` WHERE `content_id`=?"); $this->stmt->execute([$id]); $result = $this->stmt->fetchAll(); } catch (Exception $ex) { $this->error = $ex->getMessage(); return false; } $this->stmt = null; return count($result)==0 ? false : $result[0]['content_text'] ; } }
| Function | Description |
| __construct() | Connects to the database when the object is created. |
| __destruct() | Closes the database connection when the object is destroyed. |
| add() | Add a new content entry. |
| edit() | Update a content entry. |
| get() | Get the given content entry. |
내용 저장
이제 기초가 설정되면 TinyMCE 페이지를 만들어 내용을 저장할 수 있습니다.
HTML & JAVASCRIPT
<html> <head> <title> TinyMCE PHP MySQL Demo </title> <script src="tinymce/js/tinymce/tinymce.min.js"></script> <script> // (A) INIT TINYMCE // https://www.tiny.cloud/get-tiny/downloads/ // https://www.tiny.cloud/docs/configure/ tinymce.init({ selector : '#content-text', plugins : "save", menubar : false, toolbar: 'save | styleselect | bold italic | alignleft aligncenter alignright alignjustify', save_onsavecallback : "save" }); // (B) SAVE FUNCTION function save (editor) { // APPEND DATA var data = new FormData(); data.append('content_text', editor.getContent()); // AJAX var xhr = new XMLHttpRequest(); xhr.open('POST', "3b-save.php", true); xhr.onload = function(){ if (xhr.status==200) { var response = JSON.parse(this.response); alert(response.message); } else { alert("ERROR LOADING 3b-save.php!"); } }; xhr.send(data); } </script> </head> <body> <textarea id="content-text"></textarea> </body> </html>
그렇습니다. 그렇게 간단합니다. TinyMCE를 로드하고 툴바에 저장 버튼을 추가하고 커스텀 저장 기능을 생성합니다. <textarea>에서 내용을 가져와 AJAX 호출을 통해 서버로 전송합니다.
AJAX HANDLER
// (A) LOAD LIBRARIES require __DIR__ . DIRECTORY_SEPARATOR . "lib" . DIRECTORY_SEPARATOR . "2a-config.php"; require PATH_LIB . "2b-lib-content.php"; $contentLib = new Content(); // (B) DO SAVE $pass = $contentLib->add($_POST['content_text']); echo json_encode([ "status" => $pass, "message" => $pass ? "ok" : $contentLib->error, "id" => $contentLib->lastID ]);
AJAX 호출의 서버 측 수신 측에서 – 앞서 작성한 컨텐츠 라이브러리를 사용하고 처리 결과에 따라 응답합니다.
LOAD CONTENTS
내용 저장이 완료되면 마지막 단계는 데이터베이스에서 가져 와서 원하는 페이지에 표시하는 것입니다.
HTML & JAVASCRIPT
// (A) GET CONTENT require __DIR__ . DIRECTORY_SEPARATOR . "lib" . DIRECTORY_SEPARATOR . "2a-config.php"; require PATH_LIB . "2b-lib-content.php"; $contentLib = new Content(); $id = 1; // CHANGE THIS TO THE CONTENT ID YOU WANT TO FETCH $content = $contentLib->get($id); // (B) HTML <html> <body> echo $content; </body> </html>
앞서 만든 라이브러리를 기억하십니까? get (ID) 함수를 사용하여 내용을 가져 와서 HTML에 넣으십시오.
기존 목차 편집
그러나 기존 컨텐츠를 업데이트하려면 어떻게 해야 합니까? 컨텐츠를로드하려면“새 컨텐츠 추가”페이지를 약간 업데이트하면 됩니다.
// (A) GET CONTENT require __DIR__ . DIRECTORY_SEPARATOR . "lib" . DIRECTORY_SEPARATOR . "2a-config.php"; require PATH_LIB . "2b-lib-content.php"; $contentLib = new Content(); $id = 1; // CHANGE THIS TO THE CONTENT ID YOU WANT TO FETCH $content = $contentLib->get($id); // (B) EDIT CONTENT <html> <head> <title> TinyMCE PHP MySQL Demo </title> <script src="tinymce/js/tinymce/tinymce.min.js"></script> <script> // (A) INIT TINYMCE // https://www.tiny.cloud/get-tiny/downloads/ // https://www.tiny.cloud/docs/configure/ tinymce.init({ selector : '#content-text', plugins : "save", menubar : false, toolbar: 'save | styleselect | bold italic | alignleft aligncenter alignright alignjustify', save_onsavecallback : "save" }); // (B) SAVE FUNCTION function save (editor) { // APPEND DATA var data = new FormData(); data.append('content_id', document.getElementById("content-id").value); data.append('content_text', editor.getContent()); // AJAX var xhr = new XMLHttpRequest(); xhr.open('POST', "4c-save.php", true); xhr.onload = function(){ if (xhr.status==200) { var response = JSON.parse(this.response); alert(response.message); } else { alert("ERROR LOADING 4c-save.php!"); } }; xhr.send(data); } </script> </head> <body> <input type="hidden" id="content-id" value="<?=$id?>"/> <textarea id="content-text">=$content</textarea> </body> </html>
그러나 이제는 맨 위에 내용을 로드하고 AJAX 호출에 추가 content-id를 포함 시킵니다. 해당 서버 측에서 edit (TEXT, ID) 함수를 대신 사용하십시오.
// (A) LOAD LIBRARIES require __DIR__ . DIRECTORY_SEPARATOR . "lib" . DIRECTORY_SEPARATOR . "2a-config.php"; require PATH_LIB . "2b-lib-content.php"; $contentLib = new Content(); // (B) DO SAVE $pass = $contentLib->edit($_POST['content_text'], $_POST['content_id']); echo json_encode([ "status" => $pass, "message" => $pass ? "ok" : $contentLib->error ]);
유용한 비트
이 프로젝트의 전부입니다. 여기에 도움이 될만한 추가 정보 및 링크에 대한 작은 섹션이 있습니다.
링크 및 참조
등록된 댓글이 없습니다.
