Как создать совместный редактор документов на PHP

В наше время, когда удаленная работа и совместное использование документов стали неотъемлемой частью нашей жизни, создание удобного инструмента для коллективного редактирования — это необходимость. Если вы хотите узнать, как создать совместный редактор документов на PHP, то вы попали по адресу. В этой статье я подробно расскажу вам о процессе создания такого редактора, начиная с основ и заканчивая более сложными аспектами.

Шаг 1: Создание базы данных

Следующий шаг — создание базы данных для хранения документов и информации о пользователях. Подключитесь к MySQL и создайте новую базу данных:

CREATE DATABASE document_editor;
CREATE USER 'editor_user'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON document_editor.* TO 'editor_user'@'localhost';
FLUSH PRIVILEGES;

Шаг 2: Создание таблиц

Теперь создадим таблицы для хранения информации о документах и пользователях. Воспользуемся следующими SQL-запросами:

USE document_editor;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE documents (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    user_id INT,
    FOREIGN KEY (user_id) REFERENCES users(id)
);

Шаг 3: Разработка основной функциональности

Теперь, когда у нас есть база данных, перейдем к созданию основной функциональности нашего редактора. Для этого нам понадобятся следующие компоненты:

1. Регистрация и авторизация пользователей
2. Создание, редактирование и удаление документов
3. Совместное редактирование документов в реальном времени

Регистрация и авторизация пользователей

Наченм с создания системы регистрации и авторизации пользователей. Для этого создадим несколько PHP-скриптов.

Регистрация (register.php)

<?php
require 'config.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $password = password_hash($_POST['password'], PASSWORD_BCRYPT);

    $stmt = $pdo->prepare("INSERT INTO users (username, password) VALUES (:username, :password)");
    $stmt->execute(['username' => $username, 'password' => $password]);

    header("Location: login.php");
    exit();
}
?>

<form method="POST">
    <input type="text" name="username" placeholder="Имя пользователя" required>
    <input type="password" name="password" placeholder="Пароль" required>
    <button type="submit">Зарегистрироваться</button>
</form>

Авторизация (login.php)

<?php
require 'config.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $password = $_POST['password'];

    $stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username");
    $stmt->execute(['username' => $username]);
    $user = $stmt->fetch();

    if ($user && password_verify($password, $user['password'])) {
        session_start();
        $_SESSION['user_id'] = $user['id'];
        header("Location: index.php");
        exit();
    } else {
        echo "Неправильное имя пользователя или пароль";
    }
}
?>

<form method="POST">
    <input type="text" name="username" placeholder="Имя пользователя" required>
    <input type="password" name="password" placeholder="Пароль" required>
    <button type="submit">Войти</button>
</form>

Шаг 4: Создание и редактирование документов

Теперь, когда у нас есть возможность регистрироваться и авторизоваться, перейдем к созданию и редактированию документов.

Создание документа (create_document.php)

<?php
require 'config.php';
session_start();

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $title = $_POST['title'];
    $content = $_POST['content'];
    $user_id = $_SESSION['user_id'];

    $stmt = $pdo->prepare("INSERT INTO documents (title, content, user_id) VALUES (:title, :content, :user_id)");
    $stmt->execute(['title' => $title, 'content' => $content, 'user_id' => $user_id]);

    header("Location: index.php");
    exit();
}
?>

<form method="POST">
    <input type="text" name="title" placeholder="Название документа" required>
    <textarea name="content" placeholder="Содержание документа" required></textarea>
    <button type="submit">Создать</button>
</form>

Редактирование документа (edit_document.php)

<?php
require 'config.php';
session_start();

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

$document_id = $_GET['id'];

$stmt = $pdo->prepare("SELECT * FROM documents WHERE id = :id AND user_id = :user_id");
$stmt->execute(['id' => $document_id, 'user_id' => $_SESSION['user_id']]);
$document = $stmt->fetch();

if (!$document) {
    echo "Документ не найден";
    exit();
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $title = $_POST['title'];
    $content = $_POST['content'];

    $stmt = $pdo->prepare("UPDATE documents SET title = :title, content = :content WHERE id = :id");
    $stmt->execute(['title' => $title, 'content' => $content, 'id' => $document_id]);

    header("Location: index.php");
    exit();
}
?>

<form method="POST">
    <input type="text" name="title" value="<?= $document['title'] ?>" required>
    <textarea name="content" required><?= $document['content'] ?></textarea>
    <button type="submit">Сохранить</button>
</form>

Шаг 5: Реализация совместного редактирования в реальном времени

Для реализации совместного редактирования нам потребуется использовать WebSockets. WebSockets позволяют устанавливать двустороннее соединение между клиентом и сервером, что идеально подходит для обновлений в реальном времени.

Установка Ratchet

Ratchet — это библиотека PHP для работы с WebSockets. Установим её с помощью Composer:

composer require cboden/ratchet

Создание WebSocket-сервера

Создадим WebSocket-сервер, который будет обрабатывать изменения в документах.

server.php

<?php
require dirname(__DIR__) . '/vendor/autoload.php';

use Ratchet\Http\HttpServer;
use Ratchet\Server\IoServer;
use Ratchet\WebSocket\WsServer;
use MyApp\DocumentEditor;

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new DocumentEditor()
        )
    ),
    8080
);

$server->run();
?>

DocumentEditor.php

<?php
namespace MyApp;

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class DocumentEditor implements MessageComponentInterface {
    protected $

clients;

    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        foreach ($this->clients as $client) {
            if ($from !== $client) {
                $client->send($msg);
            }
        }
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        $conn->close();
    }
}
?>

Шаг 6: Создание клиентской части

Для взаимодействия с WebSocket-сервером нам потребуется написать клиентскую часть на JavaScript.

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Совместный редактор документов</title>
</head>
<body>
    <textarea id="editor"></textarea>

    <script>
        const editor = document.getElementById('editor');
        const ws = new WebSocket('ws://localhost:8080');

        ws.onmessage = function(event) {
            editor.value = event.data;
        };

        editor.addEventListener('input', function() {
            ws.send(editor.value);
        });
    </script>
</body>
</html>

---

---