PHP와 MariaDB를 사용하여 CRUD

호야70 2024. 7. 21. 22:55

2024. 7. 21. 22:55

728x90

PHP와 MariaDB를 사용하여 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 구현하는 방법을 설명하겠습니다. 이 과정에는 두 가지 주요 부분이 포함됩니다:

백엔드 서버: PHP를 사용하여 MariaDB와 상호작용하는 API를 구축합니다.
프론트엔드 애플리케이션: Vanilla JavaScript를 사용하여 사용자 인터페이스를 구축하고, PHP 백엔드와 통신하여 CRUD 작업을 수행합니다.

1단계: PHP 백엔드 서버 구축

프로젝트 설정:

PHP와 MariaDB가 설치된 환경이 필요합니다. XAMPP, WAMP, MAMP와 같은 패키지를 사용할 수 있습니다.
데이터베이스 설정:

MariaDB 데이터베이스를 설정하고 테이블을 생성합니다. MariaDB 콘솔이나 phpMyAdmin에서 다음 SQL을 실행합니다:
```
CREATE DATABASE my_database;
USE my_database;

CREATE TABLE items (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL
);
```

PHP 스크립트 작성:

PHP 스크립트는 /api 폴더에 저장하고, 각 CRUD 작업을 처리합니다. PHP 파일을 api 폴더에 넣고 index.php와 같은 이름을 지정합니다.

파일 구조:

/api
├── create.php
├── read.php
├── update.php
└── delete.php

api/create.php:

<?php
header('Content-Type: application/json');

$conn = new mysqli('localhost', 'your-username', 'your-password', 'my_database');

if ($conn->connect_error) {
    die(json_encode(['error' => $conn->connect_error]));
}

$data = json_decode(file_get_contents('php://input'), true);
$name = $data['name'];

$stmt = $conn->prepare('INSERT INTO items (name) VALUES (?)');
$stmt->bind_param('s', $name);
$stmt->execute();

echo json_encode(['id' => $stmt->insert_id, 'name' => $name]);

$stmt->close();
$conn->close();
?>

api/read.php:

<?php
header('Content-Type: application/json');

$conn = new mysqli('localhost', 'your-username', 'your-password', 'my_database');

if ($conn->connect_error) {
    die(json_encode(['error' => $conn->connect_error]));
}

$result = $conn->query('SELECT * FROM items');
$items = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($items);

$conn->close();
?>

api/update.php:

<?php
header('Content-Type: application/json');

$conn = new mysqli('localhost', 'your-username', 'your-password', 'my_database');

if ($conn->connect_error) {
    die(json_encode(['error' => $conn->connect_error]));
}

$data = json_decode(file_get_contents('php://input'), true);
$id = $data['id'];
$name = $data['name'];

$stmt = $conn->prepare('UPDATE items SET name = ? WHERE id = ?');
$stmt->bind_param('si', $name, $id);
$stmt->execute();

echo json_encode(['id' => $id, 'name' => $name]);

$stmt->close();
$conn->close();
?>

api/delete.php:

<?php
header('Content-Type: application/json');

$conn = new mysqli('localhost', 'your-username', 'your-password', 'my_database');

if ($conn->connect_error) {
    die(json_encode(['error' => $conn->connect_error]));
}

$id = $_GET['id'];

$stmt = $conn->prepare('DELETE FROM items WHERE id = ?');
$stmt->bind_param('i', $id);
$stmt->execute();

echo json_encode(['id' => $id]);

$stmt->close();
$conn->close();
?>

2단계: 프론트엔드 애플리케이션 구축 (Vanilla JavaScript)

HTML 파일 작성 (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vanilla JS CRUD with PHP</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        input, button {
            margin: 5px;
            padding: 8px;
        }
    </style>
</head>
<body>
    <h1>Items</h1>
    <input type="text" id="new-item" placeholder="New item">
    <button id="add-item">Add Item</button>

    <div id="edit-section" style="display: none;">
        <input type="text" id="edit-item-name" placeholder="Edit item">
        <button id="update-item">Update Item</button>
    </div>

    <ul id="item-list"></ul>

    <script src="app.js"></script>
</body>
</html>

JavaScript 파일 작성 (app.js):

const apiUrl = 'http://localhost/api';

const newItemInput = document.getElementById('new-item');
const addItemButton = document.getElementById('add-item');
const editSection = document.getElementById('edit-section');
const editItemNameInput = document.getElementById('edit-item-name');
const updateItemButton = document.getElementById('update-item');
const itemList = document.getElementById('item-list');

let editItemId = null;

const fetchItems = async () => {
    const response = await fetch(`${apiUrl}/read.php`);
    const items = await response.json();
    renderItems(items);
};

const addItem = async () => {
    const name = newItemInput.value;
    if (name) {
        await fetch(`${apiUrl}/create.php`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name })
        });
        newItemInput.value = '';
        fetchItems();
    }
};

const startEdit = (id, name) => {
    editItemId = id;
    editItemNameInput.value = name;
    editSection.style.display = 'block';
};

const updateItem = async () => {
    const name = editItemNameInput.value;
    if (editItemId !== null && name) {
        await fetch(`${apiUrl}/update.php`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: editItemId, name })
        });
        editSection.style.display = 'none';
        fetchItems();
    }
};

const deleteItem = async (id) => {
    await fetch(`${apiUrl}/delete.php?id=${id}`, {
        method: 'GET'
    });
    fetchItems();
};

const renderItems = (items) => {
    itemList.innerHTML = '';
    items.forEach(item => {
        const li = document.createElement('li');
        li.innerHTML = `
            ${item.name}
            <button onclick="startEdit(${item.id}, '${item.name}')">Edit</button>
            <button onclick="deleteItem(${item.id})">Delete</button>
        `;
        itemList.appendChild(li);
    });
};

addItemButton.addEventListener('click', addItem);
updateItemButton.addEventListener('click', updateItem);

// Initialize
fetchItems();

3단계: 실행 및 테스트

PHP 서버 실행:

PHP 서버가 실행되고 있어야 합니다. XAMPP, WAMP, MAMP와 같은 패키지를 사용하여 PHP 서버를 실행할 수 있습니다.
프론트엔드 애플리케이션 실행:

HTML 파일을 웹 브라우저에서 열거나, PHP 서버를 통해 index.html을 열어 테스트합니다. 예를 들어, XAMPP를 사용하는 경우, htdocs 폴더에 프로젝트를 위치시키고 http://localhost/index.html에서 열 수 있습니다.

이제 PHP와 MariaDB를 사용하여 Vanilla JavaScript로 CRUD 작업을 수행할 수 있습니다. 이 예제는 기본적인 구현을 다루며, 실제 프로덕션 환경에서는 보안, 오류 처리, 데이터 유효성 검증, 그리고 데이터베이스 연결 관리를 추가적으로 고려해야 합니다.

728x90

저작자표시 비영리 동일조건

'ChatGPT 대답' 카테고리의 다른 글

Webpack 설명해줘 (0)	2024.07.22
Python REST API Svelte (0)	2024.07.21
Svelte를 사용하여 MariaDB와 CRUD (1)	2024.07.21
React와 MariaDB를 사용하여 CRUD (0)	2024.07.21
Vue.js와 MariaDB를 사용하여 CRUD (0)	2024.07.21

초심자 코더 호야