[리드위드 웹사이트 제작 프로젝트] 프로젝트 개요 및 시작

목표

• 독서모임 리드위드의 공식 웹 페이지 개설
• 웹 페이지를 활용한 모임 홍보 및 커뮤니티 활성화 
• 웹 페이지를 사용하여 모임 및 회원 관리

 

구현 기능

• 로그인/로그아웃
• 일정 캘리더
• 게시판(공지사항, 사진, 자유게시판)
• 활동점수(사이트 이용정도에 따라 점수 부여, 구현 고민 중, 여유있으면 구현)

 

사용 기술 스택

사용 언어 

• python
• html, css, javascript

프레임워크

• django

라이브러리

•  bootstrap: 반응형 웹 구현 

나머지는 작업하면서 추가해나갈 예정 

 

django 프로젝트 생성 

• home: 메인 페이지 앱
• accounts: 계정 인증 관련 기능 구현(로그인, 로그아웃, 회원가입)
• templates: html 파일 저장
• static: js, css, 기타 파일 소스 저장
• config: 프로젝트 

본 블로그의 django 앱 생성 과정을 참고하여 프로젝트 생성 

[Django, python] Django 설치 및 프로젝트 생성

 

 

공통 헤더 구현 

예전에 홍보용으로 작업한 정적 페이지 헤더 참고하여 작업 

 

bootstrap을 사용하여 반응형 웹으로 제작  

Bootstrap

<header id="header">
  <div id="mega-menu" class="header header2 header-sticky primary-menu icons-no default-skin zoomIn align-right ">
    <nav class="navbar navbar-default redq">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbar">
        <a class="mobile-menu-close"><i class="fa fa-close"></i></a>
        <div class="menu-top-menu-container">
          <ul id="menu-top-menu" class="nav navbar-nav nav-list">
            <li><a href="../">Home</a></li>
            <li><a href="../announce">공지사항</a></li>
            <li><a href="../calender">모임일정</a></li>
            <li><a href="../community">커뮤니티</a></li>
            <li><a href="../apply">모임신청</a></li>
            <li>
              {% if user.is_authenticated %}
                <a href="{% url 'accounts:logout' %}">{{ user.username }} (로그아웃)</a>
              {% else %}
                <a href="{% url 'accounts:login' %}">로그인</a>
              {% endif %}
            </li>
            <li>
              {% if not user.is_authenticated %}
              <a class="nav-link" href="{% url 'accounts:signup' %}">회원가입</a>
              {% endif %}
            </li>
            </ul>
        </div>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
    </nav>
  </div>
  </header>

css 파일 적용 후 모습

이후 페이지 로고 삽입 예정 

 

로그인, 로그아웃, 회원가입 구현 

 

아래 내용 참조 하여 작업

3장 파이보 서비스 개발!

 

---

로그인 

 

 

---

로그아웃

로그인에 성공할 경우 메인 페이지로 이동 및 로그아웃 버튼 활성화 

 

---

회원가입

 

 

 

해결한 문제점 

• 원래 작업하던 파일에서 로그인 기능을 구현하려 하다 위 내용을 참고하여 구현하기 위해 파일 구조를 전부 변경해야만 했다. 
• 경로가 맞지 않아서 html이 제대로 불러올 수 없는 문제점 해결. 경로 재확인 후 수정 
• 자바스크립트로 공통헤더를 구현하였으나 {%include "header.html"%}로 페이지 공통 헤더를 구현하는 것으로 변경

 

배운 내용

• django에서 html 폼을 상속하는 것
• django에서 제공하는 계정인증 함수 사용법 
• django 프레임워크 구조 파악 

 

개선할 점 , 해결해야 될 문제

• 로그인, 회원가입 창 디자인 변경 
• 홈페이지 로고 삽입
• 회원가입 입력정보 내용 변경(기본 입력 정보 외에 추가 정보, 연락처 추가)