MIXEDER For Developers
MixederCloud MIXEDERGrapesFilesLogin to console
MixederCloud Docs
MixederCloud Docs
  • 👋MIXEDER For Developersへようこそ!
  • まずはここから!
    • StartFromBeginner
  • 🍇GrapeAPI
    • GrapesAPIについて
    • GrapesAPIs 利用規約
    • APIリファレンス
      • GrapeQRAPI リファレンス
      • GrapeFaviconAPI リファレンス
      • GrapeAvaterAPI リファレンス
        • GrapesAPI サンプルコード
      • GrapesAPI(個人向け) リファレンス
    • Swagger
  • Conversion API
    • Conversion APIとは?
    • APIドキュメント
      • SVG Via PNG API
      • PNG Via HEIC API
      • HTML to PDF API
  • 🌍MixederPublicAPIs
    • MixederPublicAPIについて
    • サンプルコードを利用する前に
    • APIリファレンス
      • WhoisAPI
        • WhoisAPI TLDリスト
      • ConvertAPI
      • TimeZoneAPI
      • WEBFetchAPI
      • NETRecordAPI
      • WebInfoAPI
      • ImageConvertAPI
      • Profanity Detection and Cleaning API
      • Similarity Determination API
      • API利用料金
      • JSON Scalable Database (JSDB) API
        • ログイン・サインインシステムのサンプル
        • シンプルなメモ帳のサンプル
        • JSDB V1とV2の相違点
      • JSON Database API V2
        • JSONDB Login System (Node.js)
        • JSONDB管理アプリの紹介
      • EventFront MAIL API ドキュメント
  • 🐣TinytoolsAPI
    • TINYTOOLSAPIについて
    • TINYTOOLSAPI for Enterpriceについて(英語)
  • Product Guides
    • 📪How to configure MTM(Mixeder Traffic Manager) with MixederWaterStorage
      • VMC Machine specs per plan
    • MIXEDER ISSHとは?
    • 🖥️開発者向けAPIの公開について
    • 📎MixederIAM(Permissions)
  • MixederCloudのサービス料金・お支払サイクルについて
  • MixederCloudでウェブサイトを作成しよう
    • 🏋️MixederCloudでウェブサイトを作成しよう
GitBook提供
このページ内
  • ファイル構成
  • index.php (メインのPHPファイル)
  • style.css (簡易スタイルシート)
  • 説明
  • 注意点

役に立ちましたか?

  1. MixederPublicAPIs
  2. APIリファレンス
  3. JSON Scalable Database (JSDB) API

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

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の相違点

最終更新 7 か月前

役に立ちましたか?

🌍
Page cover image