221115 TIL details, main page 작성

오늘 한일

1. base.html 구성

- 공통 url

<head>
  {% block head %}
  <!--기본코드-->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!--bootstrap-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

  <!--외부폴더 참조link-->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />

  <!--title-->
  <title>{% block title %}{% endblock %};Bow-Meow:유기반려동물 제보</title>
  {% endblock %}
  
  <!--javascript 외부링크-->
  {% block javascript %}
  <script src="{{ url_for('static',filename='js/script.js') }}"></script>
  {% endblock %}
</head>

- navigation bar

<!--웹페이지 상단에 해당하는 부분이다-->
<!--여기서부터 navigation bar를 구성한다-->
<body>
  <nav class="navbar navbar-expand-sm bg-success navbar-dark">
    <!--brand logo-->
    <a class="navbar-brand" href="/">
      <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top"
        alt="">
      Bow-Meow</a>

    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/login">
          <button type="button" class="btn btn-light">로그인</button></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/join">
          <button type="button" class="btn btn-light">회원가입</button></a>
      </li>
    </ul>
  </nav>
  
  <!--여기서부터 children page의 내용이 들어간다.-->
  <div class="container-fluid">
    <div id="content">{% block content %}{% endblock %}</div>
  </div>
  
  <!--여기서부터 footer의 내용이 들어간다.-->
  <div id="footer">
    {% block footer %} &copy; Copyright 2008 by
    <a href="http://domain.invalid/">you</a>. {% endblock %}
  </div>
</body>

2. details.html 작성

-전체적인 화면구성: 크기 조절하고 배치하는데 상당히 애먹었다. 조금 노가다식으로 한것 같다. 더 효율적인 방법은 없을까?

<!--images를 carousel로 구성해보았다-->
<!--layout을 좀 노가다식으로 맞췄는데 더 좋은 방법은 없을까?>
<!--smartphone 화면으로 다시 구성해야한다-->
<div id="carouselExampleIndicators" class="carousel slid float-start" data-bs-ride="true"
    style="width: 45%; margin: 10px 10px 10px 10px;">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
            aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
            aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
            aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="static/img/puppy-gd9b77039c_640.jpg" class="d-block w-100" alt="puppy-gd9b77039c_640.jpg">
        </div>
        <div class="carousel-item">
            <img src="static/img/labrador-retriever-gef16083bd_640.jpg" class="d-block w-100"
                alt="puppy-gd9b77039c_640.jpg">
        </div>
        <div class="carousel-item">
            <img src="static/img/dog-g4cdeec951_640.jpg" class="d-block w-100" alt="puppy-gd9b77039c_640.jpg">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<!--right description-->
<table class="table" style="width: 45%; margin: 10px 10px 10px 10px;">
    <thead>
        <tr>
            <th scope="col" class="h1 text-center" style="width: 33.3%; height: 100px;">이름</th>
            <th scope="col" class="h1">똥개</th>
        </tr>
    </thead>
    <tbody class="table-group-divider">
        <tr>
            <th scope="row">구분</th>
            <td>목격</td>
        </tr>
        <tr>
            <th scope="row">날짜</th>
            <td>오늘</td>
        </tr>
        <tr>
            <th scope="row">지역</th>
            <td>여기</td>
        </tr>
        <tr>
            <th scope="row">연락처</th>
            <td colspan="2">1588</td>
        </tr>
        <tr>
            <th scope="row">품종</th>
            <td colspan="2">말티즈</td>
        </tr>
        <tr>
            <th scope="row">성별</th>
            <td colspan="2">남자였었음</td>
        </tr>
        <tr>
            <th scope="row">나이</th>
            <td colspan="2">세살</td>
        </tr>
        <tr>
            <th scope="row">몸무게</th>
            <td colspan="2">10kg</td>
        </tr>
        <tr>
            <th scope="row">특징</th>
            <td colspan="2">잘생김</td>
        </tr>
    </tbody>
</table>

<!--특징 및 상세설명-->
<div class="card" style="width: 95%; margin: 20px 20px 20px 20px;">
    <h5 class="card-header">상세 설명</h5>
    <div class="card-body" style="height: 300px;">
        <p class="card-text">상세설명이 들어갑니다</p>
    </div>
</div>

<h2 class="detailsh2">발견하시거나 아는 것이 있으시면 댓글을 남겨주세요</h2>

- 댓글 섹션은 아래에서 설명

3. main.html 작성

- 전체적인 화면구성: 특별히 막히는 점은 없었다.

<!--main banner-->
<div class="main-banner">
  <h1>Bow-Meow</h1>
</div>

<!--top description-->
<div class="top-desc">
  <h1>집을 잃은 강아지/고양이를 제보해주세요.</h1>
  <h3>소중한 반려동물이 가정으로 돌아가도록 돕겠습니다.</h3>
</div>

<!--card section-->
<div class="row row-cols-1 row-cols-md-4 g-4 m-1">
  <div class="col">
    <div class="card h-100">
      <img src="static/img/puppy-gd9b77039c_640.jpg" class="card-img-top" alt="test image">
      <div class="card-body">
        <h5 class="card-title">강아지 이름</h5>
        <p class="card-text">설명</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="static/img/puppy-gd9b77039c_640.jpg" class="card-img-top" alt="test image">
      <div class="card-body">
        <h5 class="card-title">강아지 이름</h5>
        <p class="card-text">설명</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="static/img/puppy-gd9b77039c_640.jpg" class="card-img-top" alt="test image">
      <div class="card-body">
        <h5 class="card-title">강아지 이름</h5>
        <p class="card-text">설명</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="static/img/puppy-gd9b77039c_640.jpg" class="card-img-top" alt="test image">
      <div class="card-body">
        <h5 class="card-title">강아지 이름</h5>
        <p class="card-text">설명</p>
      </div>
    </div>
  </div>
</div>

<!--report section-->
<div class="card m-5">
  <div class="card-body">
    <h5 class="card-title">유기동물 신고/제보</h5>
    <p class="card-text">잃어버린 반려동물의 정보를 입력해 주세요.</p>
    <a href="/registration" class="btn btn-success">신고/제보</a>
  </div>
</div>

4. 댓글 등록 기능 구현

- 화면구성: 이전 작성한 tab에서 가져와서 금방 끝났다.

<!--댓글 남기기-->
<div class="mypost" style="width: 95%; margin: 20px 20px 20px 20px;">
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="name" placeholder="url">
        <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="comment" style="height: 100px"></textarea>
        <label for="floatingTextarea2">댓글을 남겨주세요</label>
    </div>
    <div style="width: 95%; height: 50px; margin: 20px 20px 20px 20px;">
        <button onclick="save_comment()" type="button" class="btn btn-success float-end m-2 mb-2">댓글 남기기</button>
    </div>
</div>

<!--댓글 조회-->
<div class="mycards" id="comment-list">
</div>

-java script: 예전 tab에서 url만 조금 손봐주었다.

/*details script*/
$(document).ready(function () {
  show_comment();
});

function save_comment() {
  let name = $("#name").val();
  let comment = $("#comment").val();

  $.ajax({
    type: "POST",
    url: "/comments",
    data: { nickname_give: name, comment_give: comment },
    success: function (response) {
      alert(response["msg"]);
      window.location.reload();
    },
  });
}

function show_comment() {
  $.ajax({
    type: "GET",
    url: "/comments",
    data: {},
    success: function (response) {
      let rows = response["lists"];
      for (let i = 0; i < rows.length; i++) {
        let nickname = rows[i]["nickname"];
        let comment = rows[i]["comment"];

        let temp_html = `<div class="card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-1">
                                                    <p>${comment}</p>
                                                    <footer class="blockquote-footer">${nickname}</footer>
                                                </blockquote>
                                            </div>
                                        </div>`;
        $("#comment-list").append(temp_html);
      }
    },
  });
}
/*end of detatils script*/

총평

오늘 전체적으로 어려운 것은 없는 날이었지만 그만큼 특별히 배운것도 없는 날이라고 볼 수 있다. 좀더 어렵고 새로운 것을 해야 배울 것이 많다. 그래도 다른 팀원들이 하는 것들을 함부로 건들수는 없다. 좀 더 천천히 생각해봐야겠다.

'Hanghae99' 카테고리의 다른 글

221119 JS 알고리즘 문제풀이 1 (0)	2022.11.20
221118 TIL Javascript 기본 (0)	2022.11.19
221114 WIL 0주차 동안 배운것 (0)	2022.11.14
221114 TIL 미니프로젝트 시작 (0)	2022.11.14
221111 TIL Chapter 06 두번째 시간 (0)	2022.11.11

개발자로 가는 길

221115 TIL details, main page 작성

'Hanghae99' 카테고리의 다른 글

티스토리툴바

221115 TIL details, main page 작성

'Hanghae99' 카테고리의 다른 글

'Hanghae99' Related Articles

티스토리툴바