json을 이용한 회원명부 > 그누보드5 스킨

🙏SIR UI/UX 디자인 의뢰(~7/31)

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

json을 이용한 회원명부 정보

레이아웃 json을 이용한 회원명부

첨부파일

test.zip (396.9K) 16회 다운로드 2024-12-17 02:58:38

본문

2106540763_1734373930.6081.png

회원명단을 json파일로 저장한후에 저장된 회원명단을 웹에서 볼수 있게 만들어 보았습니다.

회원수가 적은 경우에는 데이타베이스를 사용하는 것 보다 간편하게 사용할 수 있는 것 같습니다.

압축을 풀면 test 폴더안에 data.json, images folder, look.php 파일이 나옵니다.

test폴더를 통째로 업로드합니다.

example.com/test/look.php 경로가 됩니다.

json 파일에 회원항목을 추가하거나 변경하고, 이미지를 원하는데로 바꾸면 될 것 같습니다.

look.php에서 테이블을 변경하면 보기좋게 나올 것 같습니다.

chatgpt의 도움을 받았습니다.

 

data.json

[
    {
        "이름": "John Doe",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "New York",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Hello",
        "사진": "images/1.png"
    },
    {
        "이름": "Jane Smith",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "Los Angeles",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Nice to meet you",
        "사진": "images/2.png"
    },
    {
        "이름": "David Brown",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "Chicago",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "I love coding",
        "사진": "images/3.png"
    },
    {
        "이름": "Emily White",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "San Francisco",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Passionate about design",
        "사진": "images/4.png"
    },
    {
        "이름": "Michael Green",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "Miami",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Outdoor enthusiast",
        "사진": "images/5.png"
    },
    {
        "이름": "Sophia Taylor",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "Houston",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Music lover",
        "사진": "images/6.png"
    },
    {
        "이름": "James Johnson",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "Boston",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Football fan",
        "사진": "images/7.png"
    },
    {
        "이름": "Olivia Martinez",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "Seattle",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Art and photography",
        "사진": "images/8.png"
    },
    {
        "이름": "Benjamin Harris",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "Austin",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Tech geek",
        "사진": "images/9.png"
    },
    {
        "이름": "Charlotte Lewis",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "Dallas",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Traveler",
        "사진": "images/10.png"
    },
    {
        "이름": "Henry Clark",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "Phoenix",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Caffeine addict",
        "사진": "images/11.png"
    },
    {
        "이름": "Ava Walker",
        "전화번호": "*** 개인정보보호를 위한 휴대폰번호 노출방지 ***",
        "주소": "San Diego",
        "이메일": "*** 개인정보보호를 위한 이메일주소 노출방지 ***",
        "소개": "Fitness enthusiast",
        "사진": "images/12.png"
    }
]

 

look.php


<?php
// data.json 파일에서 JSON 데이터 읽기
$jsonData = file_get_contents('data.json');
$dataArray = json_decode($jsonData, true);
// 데이터가 없으면 빈 배열로 초기화
if ($dataArray === null) {
    $dataArray = [];
}
// 검색 기능
$searchName = isset($_GET['search_name']) ? $_GET['search_name'] : '';
// 검색된 결과 필터링
if ($searchName) {
    $filteredData = array_filter($dataArray, function($member) use ($searchName) {
        return stripos($member['이름'], $searchName) !== false;  // 이름을 포함하는 경우
    });
} else {
    // 검색어가 없으면 모든 데이터 출력
    $filteredData = $dataArray;
}
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원 목록</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        img {
            width: 50px;  /* 이미지 크기 조정 */
            height: 50px;
        }
    </style>
</head>
<body>
<h1>회원 목록</h1>
<!-- 검색 폼 -->
<form method="GET" action="look.php">
    <label for="search_name">회원 이름 검색:</label>
    <input type="text" id="search_name" name="search_name" value="<?php echo htmlspecialchars($searchName); ?>" placeholder="이름을 입력하세요">
    <button type="submit">검색</button>
</form>
<h2>검색 결과</h2>
<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>전화번호</th>
            <th>주소</th>
            <th>이메일</th>
            <th>소개</th>
            <th>사진</th>  <!-- 사진 항목 추가 -->
        </tr>
    </thead>
    <tbody>
        <?php
        // 필터링된 데이터 배열을 순회하며 테이블 행을 생성
        if (count($filteredData) > 0) {
            foreach ($filteredData as $member) {
                echo "<tr>";
                echo "<td>" . htmlspecialchars($member['이름']) . "</td>";
                echo "<td>" . htmlspecialchars($member['전화번호']) . "</td>";
                echo "<td>" . htmlspecialchars($member['주소']) . "</td>";
                echo "<td>" . htmlspecialchars($member['이메일']) . "</td>";
                echo "<td>" . htmlspecialchars($member['소개']) . "</td>";
                // 이미지 출력
                echo "<td><img src='" . htmlspecialchars($member['사진']) . "' alt='사진'></td>";
                echo "</tr>";
            }
        } else {
            echo "<tr><td colspan='6'>검색된 회원이 없습니다.</td></tr>";
        }
        ?>
    </tbody>
</table>
</body>
</html>

 

추천
9

댓글 전체

추천합니다.

그런데 제이슨파일을 웝에서 다이렉트로 열거나 다운로드 받으면 비회원도 열람이 가능할텐데...

제이슨파일을 자격있는 사람만 열 수 있게끔 php 처리를 해야 더 안정적일 것 같습니다.

멋진 아이디어라는 데는 공감합니다.

전체 293 |RSS
그누보드5 스킨 내용 검색 레이아웃에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT