초보자를 위한 PHP: 첫 번째 데이터베이스 기반 웹 앱 구축

이제 막 PHP를 시작했다면 수행할 수 있는 가장 흥미로운 프로젝트 중 하나는 데이터베이스 기반 웹 앱을 구축하는 것입니다. 백엔드 작동 방식을 이해하고, 데이터베이스와 상호 작용하며, 사용자에게 동적 콘텐츠를 제공하는 좋은 방법입니다.

이 튜토리얼에서는 PHP와 MySQL을 사용하여 간단한 할 일 목록 앱을 구축해 보겠습니다. 결국 사용자가 작업을 추가하고, 보고, 삭제할 수 있는 작동하는 애플리케이션을 갖게 될 것입니다.

---

전제 조건

자세히 살펴보기 전에 다음 사항을 확인하세요.

• PHP(버전 7.4 이상)
• MySQL(또는 MariaDB)
• XAMPP 또는 Laragon과 같은 로컬 서버
• VS Code와 같은 코드 편집기

---

1단계: 환경 설정

1. 로컬 서버(예: XAMPP)를 설치합니다.
2. Apache 및 MySQL 서비스를 시작합니다.
3. 웹 루트 디렉터리(XAMPP용 htdocs)로 이동하여 todo_app이라는 새 폴더를 만듭니다.

---

2단계: 데이터베이스 생성

1. phpMyAdmin을 엽니다.
2. todo_app이라는 새 데이터베이스를 만듭니다.
3. 작업 테이블을 생성하려면 다음 SQL 쿼리를 실행하세요.

sql
CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

---

3단계: HTML 프런트엔드 구축

todo_app 폴더에 index.php 파일을 만들고 다음 HTML을 추가하세요.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="styles.css">


    <div>




<hr>

<h2>
  
  
  Step 4: Handle Adding Tasks
</h2>

<p>Create a new file called <em>add_task.php</em> and add the following code:<br>
</p>

<pre class="brush:php;toolbar:false"><?php if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $task = $_POST['task'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Insert the task into the database
    $stmt = $conn->prepare("INSERT INTO tasks (task) VALUES (?)");
    $stmt->bind_param("s", $task);
    $stmt->execute();

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

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

---

5단계: 삭제 작업 처리

delete_task.php라는 새 파일을 만듭니다.

<?php if (isset($_GET['id'])) {
    $id = $_GET['id'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Delete the task from the database
    $stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();

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

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

---

6단계: 일부 CSS 추가(선택 사항)

같은 폴더에 styles.css 파일을 만들어 앱 스타일을 지정하세요.

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

form input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background-color: #218838;
}

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

ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

ul li a {
    color: #dc3545;
    text-decoration: none;
}

---

7단계: 애플리케이션 실행

1. 브라우저를 열고 http://localhost/todo_app/index.php로 이동합니다.
2. 일부 작업을 추가하고 확인하고 삭제하세요. ?

---

축하합니다! PHP와 MySQL을 사용하여 첫 번째 데이터베이스 기반 웹 앱을 구축했습니다. 이 간단한 프로젝트는 더 복잡한 애플리케이션을 만들기 위한 기반을 마련합니다. 작업 우선순위 지정 또는 사용자 인증과 같은 기능을 추가해 보세요.

이 튜토리얼이 마음에 드셨다면 댓글을 남기시거나 동료 개발자들과 공유해 주세요. 즐거운 코딩하세요! ?