[웹개발] 사진 업로드 기능 구현

CHIKA·2024년 7월 10일
php웹개발

웹개발

목록 보기
6/9

📌
게시판 만들기

게시판 만들 때 글만 작성할 수 있게 만들고 사진 업로드 기능은 구현하지 않았다.
사진 업로드 기능을 구현해보자.

수정할 파일은 write.php,write_proc.php,read.php 이다.

파일 수정에 앞서 DB (post_table)에 file_path 를 추가해주자.

ALTER TABLE post_table
ADD COLUMN file_path VARCHAR(255);

write.php

1) form enctype 설정

form 태그 enctype = "multipart/form-data" 설정.

📌 multipart/form-data 속성
파일을 포함한 다양한 형태의 데이터를 서버로 전송하기 위해 사용.
파일은 바이너리 데이터로 전송되기 때문에 이 속성이 필요함.

2) 사진 업로드 버튼 만들기

 <div class="input-group mb-3">
      <input type="file" class="form-control" id="inputGroupFile02" name="write_file_path"> <!--파일등록-->
      <label class="input-group-text" for="inputGroupFile02">Upload</label>
    </div>

부트스트랩에서 가져와 name = "write_file_path" 설정.
제목과 내용 사이에 넣어 주었다.

write_proc.php

1) file_path 정의

$file_path = $_POST['write_file_path'];

2) 파일을 저장할 디렉토리 경로 설정

$upload_dir = "D:/xampp/htdocs/login/upload/";  // 파일을 저장할 디렉토리 경로
$upload_file = $upload_dir . basename($_FILES["write_file_path"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($upload_file, PATHINFO_EXTENSION));

파일을 저장할 경로를 써준다.
나는 php 파일들이 있는 경로에 upload 폴더를 만들어 주었다.

3) 파일 업로드 함수

if ($_FILES["write_file_path"]["size"] > 500000) {
    echo '<script>alert("파일 크기를 확인해주세요.");</script>';
    $uploadOk = 0;
}

if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo '<script>alert("jpg,png,jpeg,gif 파일만 등록할 수 있습니다.");</script>';
    $uploadOk = 0;
}

// $uploadOk가 0으로 설정되었는지 확인
if ($uploadOk == 0) {
    echo '<script>alert("파일 업로드에 실패했습니다.");</script>';
// 모든 조건을 만족하면 파일을 업로드.
} else {
    if (move_uploaded_file($_FILES["write_file_path"]["tmp_name"], $upload_file)) {
        echo "파일 ".basename( $_FILES["write_file_path"]["name"]). "가 업로드되었습니다.";

        // 파일 경로를 변수에 저장
        $file_path = $upload_file;

        // 데이터베이스에 파일 경로를 저장.
        $stmt = $conn->prepare("INSERT INTO post_table (title, content, id, file_path) VALUES (?, ?, ?, ?)");
        $stmt->bind_param("ssss", $title, $content, $id, $file_path);

        if ($stmt->execute()) {
            echo '<script>alert("글이 성공적으로 등록되었습니다.");</script>';
        } else {
            echo "오류: " . $stmt->error;
        }

        $stmt->close();
    } else {
        echo '<script>alert("파일 업로드중 문제가 발생했습니다.");</script>';
    }
}

read.php

1) 로컬 파일경로를 웹서버 경로로 변경

if (!empty($board["file_path"])) {
                    // 로컬 파일 경로를 웹 서버 경로로 변환
                    $image_path = str_replace('D:/xampp/htdocs/', 'http://localhost/', $board["file_path"]);
                    echo "<img src='" . htmlspecialchars($image_path) . "' alt='Uploaded Image' style='max-width: 500px; height: auto;'/>";
                }

전체코드

💻 write.php 전체 코드

<?php require("nVtop.php");?>

<main class="container">
  <div class="bg-body-tertiary p-5 rounded">

    <form action= "write_proc.php" method="post" enctype="multipart/form-data">
    <div class="mb-3">
    <label>제목</label>
    <input class="form-control" name="write_title" placeholder="제목을 입력하세요." required>
    </div>

    <div class="input-group mb-3">
      <input type="file" class="form-control" id="inputGroupFile02" name="write_file_path"> <!--파일등록-->
      <label class="input-group-text" for="inputGroupFile02">Upload</label>
    </div>

    <div class="mb-3">
    <label>내용</label>
    <textarea class="form-control" name ="write_content" rows="10" placeholder="내용을 입력하세요." required></textarea>
    </div>
    <button type="submit" class="btn btn-success">제출 &raquo;</button>

    </form>
  </div>

</main>

<?php require("nVbottom.php");?>

💻 write_proc.php 전체 코드

<?php 
require("nVtop.php");
require("DB_conn.php");
$title = $_POST['write_title'];
$content = $_POST['write_content'];
$file_path = $_POST['write_file_path'];
$id = $_SESSION['username'];

/*
// 데이터베이스에 글 추가
$sql= "INSERT INTO post_table(title,content,id) VALUES ('$title','$content','$id')";
*/


$upload_dir = "D:/xampp/htdocs/login/upload/";  // 파일을 저장할 디렉토리 경로
$upload_file = $upload_dir . basename($_FILES["write_file_path"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($upload_file, PATHINFO_EXTENSION));

/*
$result = $conn->query($sql);
if ($result === TRUE) {
    echo '<script>alert("글이 성공적으로 등록되었습니다.");</script>';
   
} else {
    echo "오류: " . $sql . "<br>" . $conn->error;
}
*/

if ($_FILES["write_file_path"]["size"] > 500000) {
    echo '<script>alert("파일 크기를 확인해주세요.");</script>';
    $uploadOk = 0;
}

if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo '<script>alert("jpg,png,jpeg,gif 파일만 등록할 수 있습니다.");</script>';
    $uploadOk = 0;
}

// $uploadOk가 0으로 설정되었는지 확인
if ($uploadOk == 0) {
    echo '<script>alert("파일 업로드에 실패했습니다.");</script>';
// 모든 조건을 만족하면 파일을 업로드.
} else {
    if (move_uploaded_file($_FILES["write_file_path"]["tmp_name"], $upload_file)) {
        echo "파일 ".basename( $_FILES["write_file_path"]["name"]). "가 업로드되었습니다.";

        // 파일 경로를 변수에 저장
        $file_path = $upload_file;

        // 데이터베이스에 파일 경로를 저장.
        $stmt = $conn->prepare("INSERT INTO post_table (title, content, id, file_path) VALUES (?, ?, ?, ?)");
        $stmt->bind_param("ssss", $title, $content, $id, $file_path);

        if ($stmt->execute()) {
            echo '<script>alert("글이 성공적으로 등록되었습니다.");</script>';
        } else {
            echo "오류: " . $stmt->error;
        }

        $stmt->close();
    } else {
        echo '<script>alert("파일 업로드중 문제가 발생했습니다.");</script>';
    }
}

// 데이터베이스 연결 닫기
$conn->close();

?>

<?php require("nVbottom.php");?>
<script>location.href = 'list.php';</script>

💻 read.php 전체 코드

<?php require("nVtop.php");
    // 데이터베이스 연결 설정
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "post_DB";

// 데이터베이스에 연결
$conn = new mysqli($servername, $username, $password, $dbname);

// 연결 확인
if ($conn->connect_error) {
    die("연결 실패: " . $conn->connect_error);
}
    function mq($sql)
    {
    global $conn;
    return $conn->query($sql);
    }

	$bno = $_GET['idx']; /* bno함수에 idx값을 받아와 넣음*/
	$sql = mq("select * from post_table where idx='".$bno."'"); /* 받아온 idx값을 선택 */
	$board = $sql->fetch_array();

?>

<!-- Page content-->
<main class="container">
<div class="bg-body-tertiary p-5 rounded">
    <div class="container mt-5">
        <div class="row">
        <div class="col-md-6">
        <!-- Post content-->
            <article>
            <!-- Post header-->
                <header class="mb-4">
                <!-- Post title-->
                    <h1 class="fw-bolder mb-1"><?php echo $board['title']; ?></h1>
                    <!-- Post meta content-->
                    <div class="text-muted fst-italic mb-2"><?php echo $board['date']; ?> 작성자: <?php echo $board['id']; ?> </div>

                </header>
                <!-- Post content-->

                <section class="mb-5">

              
                <?php 
                if (!empty($board["file_path"])) {
                    // 로컬 파일 경로를 웹 서버 경로로 변환
                    $image_path = str_replace('D:/xampp/htdocs/', 'http://localhost/', $board["file_path"]);
                    echo "<img src='" . htmlspecialchars($image_path) . "' alt='Uploaded Image' style='max-width: 500px; height: auto;'/>";
                }
                
    
                echo nl2br("$board[content]"); ?>
                </section>

            </article>
    </div>
</div>
</div>
   
    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
    <a class="btn btn-sm btn-success" href="modify.php?idx=<?= $bno?>" role="button" 
>수정</a>
    <a class="btn btn-sm btn-outline-success " href="delete.php?idx=<?= $bno?>" role="button" >삭제</a>
    
    </div>  
    </div>         
</div> 
</main>
<?php require("nVbottom.php");?>
profile
CHIKA
이전 포스트

[웹개발] 게시판 만들기

다음 포스트

[웹개발] 마이페이지 구현

0개의 댓글