1. HTML 사용
>> my_to_do_app 폴더를 확인한다.
>> my_to_do_app 폴더에 templates 폴더를 만든다.
>> 이후 templates 폴더 안에 my_to_do_app 폴더를 생성한다.
>> my_to_do_app 폴더 안에 index.html 파일을 생성한다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- Boot strap -->
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style>
.content{
height: 75%;
}
.messageDiv{
margin-top: 20px;
margin-bottom: 50px;
}
.toDoDiv{
}
.custom-btn{
font-size: 10px;
}
.panel-footer{
height:10%;
color:gray;
}
</style>
<title>To-Do</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="page-header">
<h1>To-do List <small>with Django</small></h1>
</div>
</div>
<div class="content">
<div class="messageDiv">
<form action="" method="POST">{% csrf_token %}
<div class="input-group">
<input id="todoContent" name="todoContent" type="text" class="form-control" placeholder="메모할 내용을 적어주세요">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">메모하기!</button>
</span>
</div>
</form>
</div>
<div class="toDoDiv">
<ul class="list-group">
<form action="" method="GET">
<div class="input-group" name='todo1'>
<li class="list-group-item">메모한 내용은 여기에 기록될 거에요</li>
<input type="hidden" id="todoNum" name="todoNum" value="1"></input>
<span class="input-group-addon">
<button type="submit" class="custom-btn btn btn-danger">완료</button>
</span>
</div>
</form>
</ul>
</div>
</div>
<div class="panel-footer">
실전예제로 배우는 Django. Project1-TodoList
</div>
</div>
</body>
</html>>> index.html 파일에 위 코드를 복사 붙여넣기 한다.
>> 파일 경로 확인 : ToDoList/my_to_do_app/templates/my_to_do_app/index.html
2. views.py 파일 수정
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
return render(request, "my_to_do_app/index.html")>> 코드를 위와 같이 수정한다.
3. models.py 작성 & 장고 서버 반영
models.py 파일을 연다.(경로 : ToDoList/my_to_do_app/models.py)
from django.db import models
# Create your models here.
class Todo(models.Model):
content = models.CharField(max_length=255)>> 위와 같이 코드를 작성한다.
위 코드를 Django 서버에 등록시키기 위해 manage.py가 있는 경로로 접속한다.
>> ls를 통해 확인
python manage.py makemigrations>> 위 코드를 입력한다.
python manage.py migrate>> 위 명령어를 입력하여 데이터베이스 모델과 같은 테이블을 생성한다.
4. DB 확인
python manage.py dbshell>> 확인을 위해 실제 django 프로젝트 데이터베이스 쉘을 연다.
sqlite> .tables>> 위 명령어를 통해 my_to_do_app_todo 테이블이 만들어졌는지 확인한다.
sqlite> SELECT * FROM my_to_do_app_todo;>> SELECT 명령어로 데이터가 있는지 확인할 수 있는데, 지금은 아무런 데이터가 없어 조회되지 않는다.
5. HTML 코드 수정
index.html 파일을 연다.
<form action="./createTodo/" method="POST">{% csrf_token %}>> 44번째 줄의 form 태그를 위와 같이 수정한다.
>> action은 서버로 데이터를 전달할 때 어떤 URL로 전달할 것인지를 나타낸다.
>> 위 사진의 메모하기 버튼을 누르면 createTodo라는 URL로 전달된다는 뜻
6. urls.py 설정
>> ToDoList의 urls.py 파일을 보면 위 코드를 확인할 수 있다.
>> 21번째 줄을 보면 my_to_do_app 폴더에 있는 urls.py로 코드가 처리됨을 알 수 있다.
from django.urls import path
from . import views
urlpatterns = [
path('', views.index),
path('createTodo/', views.createTodo)
]>> my_to_do_app의 urls.py를 열어 코드를 위와 같이 수정한다.
7. view.py 설정
my_to_do_app의 urls.py 에서 설정한 createTodo의 views 를 처리하는 함수를 만든다.
def index(request):
return render(request, "my_to_do_app/index.html")
def createTodo(request):
user_input_str = request.POST['todoContent']
return HttpResponse("create Todo를 하자 " + user_input_str)>> 코드를 위와 같이 수정한다.
>> 함수명: createTodo
>> user_input_str = request.POST['todoContent'] 코드를 아래 index.html 파일을 통해 확인한다.
>> input 태그의 name 속성 이름이 todoContent인 것을 볼 수 있다.
8. 확인
웹에서 aa를 입력하고 메모하기 누르면,
http://127.0.0.1:8000/createTodo/ 주소의 웹사이트에 "create Todo를 하자 aa"가 출력되는 것을 확인할 수 있다.
'Django' 카테고리의 다른 글
| To do list 만들기 4 (0) | 2024.01.26 |
|---|---|
| To do list 만들기 3 (0) | 2024.01.26 |
| To do list 만들기 1 (0) | 2024.01.25 |
| Django 설치 & 프로젝트 생성 (0) | 2024.01.24 |
| 웹개발 실습 2(HTML 구조) (0) | 2024.01.22 |