MIXEDERGrapesFiles
Page cover image

シンプルなメモ帳のサンプル

JSDB API を利用した PHP メモ帳サンプル

以下は、JSON Scalable Database (JSDB) API を活用したシンプルなメモ帳アプリケーションのサンプルコードです。PHP を使用して、メモの追加、表示、編集、削除が行えます。

ファイル構成

/notepad
├── index.php      // メモ帳のUIと操作ページ
├── style.css      // 簡易スタイルシート（オプション）

index.php (メインのPHPファイル)

<?php
$apiKey = "";  // 使用するAPIのkey名（データベース名）
$apiEndpoint = "https://events-front.mixeder.net/v2/jsdb";

// メモ一覧を取得する関数
function getNotes() {
    global $apiKey, $apiEndpoint;
    $response = file_get_contents("$apiEndpoint?key=$apiKey&action=read");
    return json_decode($response, true) ?? [];
}

// メモを追加する関数
if (isset($_POST['add'])) {
    $newNote = json_encode(["text" => $_POST['note']]);
    file_get_contents("$apiEndpoint?key=$apiKey&action=add&data=" . urlencode($newNote));
    header("Location: index.php");
    exit();
}

// メモを削除する関数
if (isset($_GET['delete'])) {
    $id = $_GET['delete'];
    file_get_contents("$apiEndpoint?key=$apiKey&action=delete&id=$id");
    header("Location: index.php");
    exit();
}

// メモの更新
if (isset($_POST['update'])) {
    $id = $_POST['id'];
    $updatedNote = json_encode(["text" => $_POST['note']]);
    file_get_contents("$apiEndpoint?key=$apiKey&action=update&id=$id&data=" . urlencode($updatedNote));
    header("Location: index.php");
    exit();
}

// すべてのメモを取得
$notes = getNotes();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メモ帳</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>メモ帳</h1>

    <!-- メモ追加フォーム -->
    <form method="POST">
        <textarea name="note" rows="3" placeholder="新しいメモを入力してください..." required></textarea>
        <button type="submit" name="add">追加</button>
    </form>

    <!-- メモ一覧表示 -->
    <ul>
        <?php foreach ($notes as $note): ?>
            <li>
                <form method="POST" style="display:inline;">
                    <input type="hidden" name="id" value="<?= $note['id'] ?>">
                    <input type="text" name="note" value="<?= htmlspecialchars($note['text']) ?>" required>
                    <button type="submit" name="update">更新</button>
                </form>
                <a href="?delete=<?= $note['id'] ?>" onclick="return confirm('このメモを削除しますか？')">削除</a>
            </li>
        <?php endforeach; ?>
    </ul>
</body>
</html>

style.css (簡易スタイルシート)

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
}

form {
    margin-bottom: 10px;
}

textarea, input[type="text"] {
    width: 80%;
    margin-right: 5px;
    padding: 10px;
}

button {
    padding: 10px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

説明

  1. メモの追加: 新しいメモを入力して「追加」ボタンを押すと、JSDB API を通じてメモが保存されます。

  2. メモの表示: すべてのメモはリスト形式で表示され、各メモには更新フォームと削除リンクがあります。

  3. メモの更新: 各メモのテキストを変更し、「更新」ボタンを押すと、JSDB API を使用してその内容が更新されます。

  4. メモの削除: 削除リンクを押すと、メモが削除されます。

注意点

  • APIのkey ($apiKey) は一意のものを使用してください。

  • APIエンドポイントが有効であることを確認してください。

  • data パラメータは JSONエンコード および URLエンコード が必要です。

このサンプルを使えば、JSDB API を使った軽量なメモ帳アプリをすぐに構築できます。

前へログイン・サインインシステムのサンプル次へJSDB V1とV2の相違点

最終更新

役に立ちましたか？