블록체인 sw개발자

게시판 CRUD 개념

sang969 2023. 7. 28. 15:22

 

웹 개발에 있어 게시판은 가장 기본적이며 , 어떠한 시스템이던 게시판의 특성을 가지고 있습니다.

그러면 CRUD는 무엇이냐 쇼핑물로 예를 들어 보자면 관리자는 상품 정보를 "등록(C)/수정(R)/조회(U)/삭제(D)" 

할 수 있으며. 사용자는 상품 정보를 "조회(R)" 또는 상품을 "구매(C-구매 정보/U- 재고)" 할 수 있어야 한다.

 

Create

-JavaScript를 이용하여 요소를 추가하 것.

 

사용예시

const liElement = document.createElement("li");
//liElment 안에 li 엘리먼트를 생성한다.

 

Read

-선택한 요소에 콘텐츠를 추가한다.

 

사용예시

ulElemnt.append(liElement)
//ulElement 안에 liElement를 추가한다

Upload

-선택한 요소를 추가하는 것.

 

Delet (remove삭제)

-선택한 요소를 삭제하는 것.

 

사용예시

function removeHandeler(e) {
  e.target.parentNode.remove() // remove 선택힌 요소가 삭제된다.
}
  //parentNode 한단계 상위 엘리먼트 선택

 

기본 게시판

 

HTML 게시판 기본 구성

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>indexHTML</title>
  </head>
  <body>
    <a href="./board/list.html">게시판 가기</a>
  </body>
</html>

index.html

list.html

<!DOCTYPE html>
<html lang="ㅏㅐ">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1><a href="/"></a></h1>
    <h2>게시판 목록</h2>
    <table>
      <tr>
        <td>번호</td>
        <td>제목</td>
        <td>작성자</td>
        <td>작성일</td>
        <td>조회수</td>
      </tr>
      <tr>
        <td>1</td>
        <td><a href="./view.html?page=1">2</a></td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table>

    <a href="./write.html">글쓰기</a>
  </body>
</html>

 

view.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2><a href="a"></a></h2>
    <ul>
      <li>제목 :제목입니다.</li>
      <li>작성자: 작성자 입니다.</li>
      <li>
        <span>작성일 : 2023-07-28</span>
        <span>조회수 : 0</span>
      </li>
      <li>내용입니다</li>
      <li>
        <a href="./list.html">목록가기</a>
        <a href="./modify.html?id=1">글수정</a>
        <a href="#">글삭제</a>
        <!-- 자바스크립트로 처리한다 -->
      </li>
    </ul>
  </body>
</html>

view.html

write.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1><a href="/">Logo</a></h1>

    <form action="./view.html?id=1">
      <ul>
        <li>제목 : <input type="text" name="title" /></li>
        <li>작성자 : <input type="text" name="write" /></li>
        <li>
          <textarea name="" id=""></textarea>
        </li>
        <li></li>
        <li>
          <button type="submit">글작성</button>
        </li>
      </ul>
    </form>
  </body>
</html>

 

write.html

 

modify.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>
      <a href="/2023-07-28/index.html">Logo</a>
    </h1>
    <h2>글 수정</h2>

    <form id="modifyFrm">
      <div>제목: <input type="text" id="#" /></div>
      <div>작성자: <input type="text" id="#" /></div>
      <div>글작성: <textarea name="" id=""></textarea></div>
      <input type="submit" value="수정 완료" />
    </form>
  </body>
</html>
<!-- localStorage로 id값 저장후 출력 -->

modify.html