10주차 화 1024 진행도 :: newb

    ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 10주차 화 1024 진행도
      광주인력개발원 일일포스팅(메모장) 2023. 10. 24. 16:28
      728x90
      반응형

      저번에 이어서 

      메인화면까지 했다면 이제 여행일지와 여행계획 게시글을 만들려고 한당

      여행일지는

      여행을 다녀와서 여행중 있었던 일을 포스팅할 수 있는 공간을 만들려고 했고

       

      여행계획은 나만의 공간으로서 계획을 짤 수 있는 공간을 만들려고 했다.

       

      우선 모습은 똑같이 만들어봤당.

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <script src="https://kit.fontawesome.com/63fc58c3dd.js" crossorigin="anonymous"></script>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta charset="UTF-8">
          <link rel="stylesheet" th:href="@{/cssjs/board.css}" />

          <title>TravelBoard</title>
      </head>

      <body>
          <div class="wrapper">
              <div class="bar">
                  <h1 class="logo">
                      <a href="/">
                          <img src="/img/logo.png" alt="Travel">
                      </a>
                  </h1>
                  <div class="barleft">
                      <div class="allmenu">
                          <a href="">
                              <span class="baricon">
                                  <i class="fa-solid fa-bars"></i>
                              </span>
                              <span>메뉴</span>
                          </a>
                      </div>
                  </div>
                  <div class="barright">
                      <div class="join">
                          <button th:if="${email == null}">회원가입</button>
                      </div>
                      <div class="login" id="login-logout">
                          <button id="login-button" th:if="${email == null}" onclick="loginOrLogin()">로그인</button>

                          <button id="login-button" th:if="${email != null}" onclick="loginOrLogout()">로그아웃</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="subwrapper">
              <nav class="subnav">
                  <ul>
                      <li>
                          <a href="#">공지사항</a>
                      </li>
                      <li>
                          <a href="#">여행계획</a>
                      </li>
                      <li>
                          <a href="#">여행일지</a>
                      </li>
                      <li>
                          <a href="#">고객센터</a>
                      </li>
                  </ul>
              </nav>
          </div>
          <form action="/board" method="post">
              <div id="wrapper">
                  <div id="contents" class="event">
                      <nav class="tab">
                          <ul>
                              <li class="selected">
                                  <a href="/board">여행일지</a>
                              </li>
                              <li class="selected2">
                                  <a href="/plan">여행계획</a>
                              </li>
                          </ul>
                      </nav>
                      <div class="write">
                          <a href="/write">
                              <button type="button" th:if="${email != null}" onclick="writego()">글쓰기</button>
                          </a>
                      </div>
                      <div class="sort">
                          <select name="region" id="region" onchange="changeRegion()" class="hot-articles">
                              <option value="">지역을 선택하세요</option>
                              <option value="서울특별시">서울특별시</option>
                              <option value="부산광역시">부산광역시</option>
                              <option value="대구광역시">대구광역시</option>
                              <option value="인천광역시">인천광역시</option>
                              <option value="광주광역시">광주광역시</option>
                              <option value="대전광역시">대전광역시</option>
                              <option value="울산광역시">울산광역시</option>
                              <option value="세종특별자치시">세종특별자치시</option>
                              <option value="경기도">경기도</option>
                              <option value="강원특별자치도">강원특별자치도</option>
                              <option value="충청북도">충청북도</option>
                              <option value="충청남도">충청남도</option>
                              <option value="전라북도">전라북도</option>
                              <option value="전라남도">전라남도</option>
                              <option value="경상북도">경상북도</option>
                              <option value="경상남도">경상남도</option>
                              <option value="제주특별자치도">제주특별자치도</option>
                          </select>
                      </div>

                      <ul class="list">
                          <li class="travelcard" th:each="board : ${boards}">
                              <a th:href="@{'/board/' + ${board.id}}">
                                  <div class="img" th:utext="${board.content}">
                                      <!-- <div class="mainimg" th:utext="${board.content}"></div> -->
                                      <!-- <img th:src="" th:alt="Board Image"> -->
                                  </div>
                                  <div class="detail">
                                      <div class="tandd">
                                          <span class="title" th:text="${board.title}"></span>
                                          <br>
                                          <br>
                                          <span class="boardDate"
                                              th:text="${#temporals.format(board.boardDate, 'yy년 mm월 dd일')}"></span>
                                      </div>
                                      <span class="deco">
                                          <span class="userimg">
                                              <!-- <img th:src="" th:alt="User Image"> -->
                                          </span>
                                          <br>
                                          <span class="name" th:text="${board.member.name}"></span>
                                      </span>
                                  </div>
                              </a>
                          </li>
                      </ul>
                  </div>
                  <div class="footer">
                      <p>Kepco Boot Capm</p>
                  </div>
              </div>
          </form>
      </body>

      <script>
          async function loginOrLogout() {
              // 현재 버튼의 텍스트 값을 확인하여 로그인 상태인지 확인

              try {
                  // 로그아웃 버튼을 클릭한 경우 세션 값 삭제
                  const response = await fetch("/logout", {
                      method: "POST"
                  });
                  const data = await response.json();
                  // 현재 페이지 리로드
                  location.reload();

              } catch (error) {
                  console.error("오류 발생: " + error);
              }

          }
          function loginOrLogin() {
              window.location.href = "/signin?page=board"
              //해당 페이지 로그인버튼의 = get 주소값 으로 써주면 로그인시 해당 페이지로 진입
              sessionStorage;

          }
          function writego() {
              winow.location.href = "/write?page=board"
          }


      </script>

      </html>

      이건 여행일지의 travel board의 코드이다. 
      아직 미완성이라 주소나 수정중이지만 50프로 이상은 완성된 느낌?

      여행일지 뷰 사진

      코드나 모습은 똑같지만 계획 사진 
      카테고리를 선택해서 원하는 곳에 글을 쓸 수 있게 해놨당.

       

      그리고 글 쓰는 공간을 만들었는데 웹 에디터를 가져와서 사용하다보니 코드를 해석하는데도 오래걸리고 못보던 오류를 마주쳐서 굉장히 오래 걸렸다 ㅠㅠ

       

      <!DOCTYPE html>
      <html lang="ko_KR">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Write Travel</title>
              referrerpolicy="origin"></script>
      </head>

      <body>
          <h1>Travel</h1>
          <form action="/write" method="post"  id="writeForm">
              <select name="category">
                  <option value="plan">여행계획</option>
                  <option value="board">여행일지</option>
              </select>
              <input type="text" name="title" id="title" placeholder="제목">
              <textarea id="editor" name="content"></textarea>
              <button type="button" id="saveButton">게시글 저장</button>
              <input type="hidden" id="id" th:if="${session.id != null}" th:value="${session.id}">
          </form>
          <input id="page" type="hidden"  th:value="${page} != null ? ${page}:'' ">

          <script>
              const page = document.getElementById("page");
              $(document).ready(function () {
                  var plugins = [
                      "advlist", "autolink", "lists", "link", "image", "charmap", "print", "preview", "anchor",
                      "searchreplace", "visualblocks", "code", "fullscreen", "insertdatetime", "media", "table",
                      "paste", "code", "help", "wordcount", "save"
                  ];
                  var edit_toolbar = 'formatselect fontselect fontsizeselect |'
                      + ' forecolor backcolor |'
                      + ' bold italic underline strikethrough |'
                      + ' alignjustify alignleft aligncenter alignright |'
                      + ' bullist numlist |'
                      + ' table tabledelete |'
                      + ' link image';

                  tinymce.init({
                      language: "ko_KR",
                      selector: '#editor',
                      height: 500,
                      menubar: false,
                      plugins: plugins,
                      toolbar: edit_toolbar,

                      image_title: true,
                      automatic_uploads: true,

                      file_picker_types: 'image',

                      file_picker_callback: function (cb, value, meta) {
                          var input = document.createElement('input');
                          input.setAttribute('type', 'file');
                          input.setAttribute('accept', 'image/*');

                          input.onchange = function () {
                              var file = this.files[0];

                              var reader = new FileReader();
                              reader.onload = function () {
                                  var id = 'blobid' + (new Date()).getTime();
                                  var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                                  var base64 = reader.result.split(',')[1];
                                  var blobInfo = blobCache.create(id, file, base64);
                                  blobCache.add(blobInfo);

                                  cb(blobInfo.blobUri(), { title: file.name });
                              };
                              reader.readAsDataURL(file);
                          };
                          input.click();
                      },

                      content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px }'
                  });

                  $("#saveButton").on("click", async function () {
                      // 게시글 내용 가져오기
                      var content = tinymce.activeEditor.getContent();
                      var category = $("[name=category]").val();
                      var title = $("#title").val();
                      var id = $("#id").val();
                      // var id = '1';
                      console.log(category);
                      console.log(content);
                      console.log(title);
                      console.log(id);

                      // FormData 객체 생성
                      var formData = new FormData();
                      formData.append("content", content);
                      formData.append("category", category);
                      formData.append("title", title);
                      formData.append("id", id);

                      const data = await fetch('/write', {
                          method: 'post',
                          body: formData
                      });
                      const res = await data.json();
                     
                      if (res.error) {
                          alert("저장 중 오류가 발생했습니다.");
                          console.error("오류 발생: " + res.error);
                      } else {
                          alert(res.msg)

                      }
                      // if (data.code === 200) {
                      //     window.location.href = "/"+page.value;
                      // } else if(data.code === 201){
                      //     window.location.href = "/"+page.value;
                      // }
                  });
              });

          </script>
      </body>

      </html>

      처음에 파일을 첨부하길래 멀티파트 를 써서 텍스트와 첨부파일을 따로 관리하는 줄알고 막 진행했는데 아니었고

      base64로 컨텐트에 첨부이미지를 인코딩해서 넣는 방식이라 처음부터 다시 수정했다.

       

      에디터는 깔끔했다.. 그래서 포기하지 않고 엉성하더라도 쓰는중...

       

      이렇게 작성된 글이 위에서 봤던 리스트 형식으로 사용자에게 보여지게 된다.

       

      후... 이제 게시물 상세보기 페이지와 조회수... 공감버튼 , 댓글을 만들어야한다..

      그리고 대부분 완성이 된다면 세부적인 기능을 넣을려고 한다.

       

      현재 만들어진 기능들도 많은 허점이 존재하기에 또 수정을...

      css도 해야하고... 

      ㅂㅂ

      728x90
      반응형

      '광주인력개발원 일일포스팅(메모장)' 카테고리의 다른 글

      10주차 금 1027 진행도  (3) 2023.10.27
      10주차 목 1026 진행도  (1) 2023.10.26
      9주차 금 1020 진행도  (2) 2023.10.20
      9주차 수 1018  (0) 2023.10.18
      9주차 화 1017  (0) 2023.10.17

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바