프로젝트01. 메모 웹 기획하기 & 글 생성 폼 만들기

간단한 메모를 작성하는 웹을 기획해보고,

글을 생성하는 폼을 만들어보겠습니다.

<웹 기획하기>

개발 과정

글 쓰기, 수정, 삭제
글 목록 보기
로그인, 로그아웃, 회원가입

웹 사이트 간단 흐름도

<글 생성 폼 만들기>

URLconf

글 관련

/simp_web/page
/simp_web/page/memo
/simp_web/page/memo
/simp_web/page/memo
/simp_web/page/memo

기타

계정관리 /simp_web/page/memo
회원가입 /simp_web/page/memo
로그인 /simp_web/page/memo

(mysite\)urls.py 파일 설정

from django.contrib import admin
from django.urls import path
from simp_web import views #추가

from django.conf.urls import include

urlpatterns = [
    path('admin/', admin.site.urls),
    # path('설정할 url', views.뷰 이름, name='뷰 이름'),을 url 개수만큼 추가
    # 글 관련 url부터 추가함.
    path('simp_web/page', views.page, name='page'),
    path('simp_web/page/memo', views.memo, name='memo'),
    path('simp_web/page/memo/update', views.update, name='update'),
    path('simp_web/page/memo/delete', views.delete, name='delete'),
    path('simp_web/page/memo/create', views.create, name='create'),
]

뷰 만들기 views.py : 뷰는 모델에 입력한 필요한 정보를 템플릿에 연결해주는 역할을 한다.

뷰 기본 형식

def 뷰 이름(request):
	return render(request, 'simp_web'/템플릿 이름.html', {})

views.py 파일 설정

from django.shortcuts import render

# Create your views here.
def page(request):
    return render(request, 'simp_web/page.html', {})

def memo(request):
    return render(request, 'simp_web/memo.html', {})

def update(request):
    return render(request, 'simp_web/update.html', {})

def create(request):
    return render(request, 'simp_web/create.html', {})

def delete(request):
    return render(request, 'simp_web/delete.html', {})

글 관련 템플릿 만들기

page.html

<!DOCTYPE html>
<html lang="ko">
<head>
    {% load static %}
    <link rel="stylesheet" href="{% static "admin/css/base.css" %}" />
    <title>{% block title %}simple web{% endblock %}</title>
</head>

<body>
  <div id="sidebar">
        {% block sidebar %}
        <h1><strong>간단한 메모 웹사이트</strong></h1>
        <a href="/simp_web/page"><h2>Home</h2></a>
        {% endblock %}
        <br>
    </div>

  <ul>
      <li><a href="page/memo">글</a></li>
      <li><a href="page/account">계정관리</a></li>
  </ul>
  <br>

</body>
</html>

memo.html

<!DOCTYPE html>
<html lang="ko">
<head>
    {% load static %}
    <link rel="stylesheet" href="{% static "admin/css/base.css" %}" />
    <title>{% block title %}simple web{% endblock %}</title>
</head>

<body>
  <div id="sidebar">
        {% block sidebar %}
        <h1><strong>간단한 메모 웹사이트</strong></h1>
        <a href="/simp_web/page"><h2>Home</h2></a>
        {% endblock %}
        <br>
    </div>

  <ul>
      <li><a href="page/memo">글</a></li>
      <li><a href="page/account">계정관리</a></li>
  </ul>
  <br>

</body>
</html>

update.html
delete.html
create.html

<!DOCTYPE html>
<html lang="ko">
<head>
    {% load static %}
    <link rel="stylesheet" href="{% static "admin/css/base.css" %}" />
    <title>{% block title %}simple web{% endblock %}</title>
</head>

<body>
  <div id="sidebar">
        {% block sidebar %}
        <h1><strong>간단한 메모 웹사이트</strong></h1>
        <a href="/simp_web/page"><h2>Home</h2></a>
        {% endblock %}
        <br>
    </div>

  <ul>
<article>
  # 글 입력하는 폼 생성
  <div class="container">
    <form method="POST">
        <h2>메모 작성</h2>
          <div>
            <label for="title">제목</label>
            <input type="text" name="title" id="title" placeholder="제목을 입력해 주세요">
          </div>

          <div>
            <label for="content">내용</label>
            <textarea rows="5" name="content" id="content" placeholder="내용을 입력해 주세요" ></textarea>
          </div>

         <div >
           <button type="button" id="btnSave">저장</button>
         </div>
    </form>
 </article>
</body>
</html>

'💡웹 프로젝트 > (백엔드)Django - 프로젝트01' 카테고리의 다른 글

프로젝트01. bootstrap 적용하기 (0)	2019.12.11
프로젝트01. 함수형 뷰에서 클래스형 뷰로 변경 & detail, update, delete구현 (0)	2019.12.09
클래스형 view (0)	2019.12.09
프로젝트01. admin 사이트에 model class 등록하기 (0)	2019.12.09
프로젝트01. base.html설정 & modelform 생성 (0)	2019.12.08

winnih_B

LINKS

CATEGORY

프로젝트01. 메모 웹 기획하기 & 글 생성 폼 만들기

<웹 기획하기>

<글 생성 폼 만들기>

'💡웹 프로젝트 > (백엔드)Django - 프로젝트01' 카테고리의 다른 글

티스토리툴바

프로젝트01. 메모 웹 기획하기 & 글 생성 폼 만들기

<웹 기획하기>

<글 생성 폼 만들기>

'💡웹 프로젝트 > (백엔드)Django - 프로젝트01' 카테고리의 다른 글

'💡웹 프로젝트/(백엔드)Django - 프로젝트01' Related Articles

티스토리툴바