[Django] 장고 캘린더 예약 사이트 만들기 (3 - 예약 구현)

개발 순서
1. 달력 구현 (HTML, CSS, JS)
2. 날짜 선택 구현 (CSS, JS)
3. 예약 구현 (JS, DATABASE, DJANGO)

config/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('main.urls')),
    path('admin/', admin.site.urls),
]

config/settings

"""
Django settings for config project.

Generated by 'django-admin startproject' using Django 3.1.3.

For more information on this file, see
https://docs.djangoproject.com/en/3.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '0%m2+_j9yus+42mg9x!vse2s-u__d=a5reu5!)wn54(y+(=&@!'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'account',
    'main',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'config.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'config.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'ko-kr'

TIME_ZONE = 'Asia/Seoul'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

AUTH_USER_MODEL = 'account.user'

main/urls.py

from django.urls import path, include
from django.contrib.auth import views as auth_views
from . import views

app_name = 'main'

urlpatterns = [
    path('', views.index, name="main"),
    path('viewSeat', views.viewSeat, name="seat"),
    path('checkSeat', views.checkSeat, name="checkSeat"),
    path('cancelSeat', views.cancelSeat, name="cancelSeat"),
    path('save/', views.saveData, name="saveData"),

    path('login', auth_views.LoginView.as_view(template_name="login.html"), name="login"),
    path('logout', auth_views.LogoutView.as_view(), name="logout"),
    path('register', views.register, name="register"),


    path('data', views.data, name="data"),
]

main/forms.py

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

class UserForm(UserCreationForm):
    email = forms.EmailField(label = 'email')

    class Meta:
        model = User
        fields = ("username", "email")

main/models.py

from django.db import models
from django.db.models.fields.related import ManyToManyField
from account.models import *

class Month(models.Model):
    month = models.CharField(max_length=200, blank=True, null=True)

class Day(models.Model):
    day = models.CharField(max_length=200, blank=True, null=True)
    remain_seat = models.IntegerField(blank=True, null=True)
    f_month = models.ForeignKey(Month, on_delete=models.CASCADE, blank=True, null=True)

main/views.py

from django.http import HttpResponse
from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login
from main.forms import UserForm
import calendar
import json
from .models import Month, Day
from account.models import *


def index(request):
    yearCalender = calendar.HTMLCalendar().formatyear(2021)
    context = {
        'YC': yearCalender,
    }
    return render(request, 'main.html', context)


def viewSeat(request):
    month_list = Month.objects.all()
    dateDay = request.POST.get('dateDay')
    selMonth = request.POST.get('selMonth')
    resSeat = 0
    for ml in month_list:
        if ml.month == selMonth:
            for dl in ml.day_set.all():
                if dl.day == dateDay:
                    resSeat = dl.remain_seat
    context = {
        'resSeat': resSeat,
    }
    return HttpResponse(json.dumps(context), content_type="application/json")


def checkSeat(request):
    month_list = Month.objects.all()
    user = request.user
    reqDay = request.POST.get('reqDay')
    conCheck = request.POST.get('conCheck')
    selMonth = request.POST.get('selMonth')
    print(reqDay, conCheck, selMonth)

    if conCheck == "purchase":
        for ml in month_list:
            if ml.month == selMonth:
                for dl in ml.day_set.all():
                    if dl.day == reqDay:
                        dl.remain_seat -= 1
                        dl.save()
                        user.profile.book_day.add(dl)
                        print(user.profile.book_day.filter(id=dl.id))
                        user.save
                        resSeat = dl.remain_seat
    elif conCheck == "cancel":
        for ml in month_list:
            if ml.month == selMonth:
                for dl in ml.day_set.all():
                    if dl.day == reqDay:
                        dl.remain_seat += 1
                        dl.save()
                        resSeat = dl.remain_seat
    context = {
        'resSeat': resSeat,
    }
    return HttpResponse(json.dumps(context), content_type="application/json")


def cancelSeat(request):
    month_list = Month.objects.all()
    reqDay = request.POST.get('reqDay')
    selMonth = request.POST.get('selMonth')

    for ml in month_list:
        if ml.month == selMonth:
            for dl in ml.day_set.all():
                if dl.day == reqDay:
                    dayId = dl.id
                    request.user.profile.book_day.filter(id=dayId).delete()
                    # print(request.user.profile.book_day.filter(id=dl.id))
                    dl.remain_seat += 1
                    dl.save()
                    resSeat = dl.remain_seat
    context = {
        'resSeat': resSeat,
    }
    return HttpResponse(json.dumps(context), content_type="application/json")


dayMax = 32


def saveData(request):
    global dayMax
    month_list = Month.objects.all()
    for ml in month_list:
        if ml.month == 'May':
            dayMax = 32
        elif ml.month == 'June':
            dayMax = 31
        elif ml.month == 'July':
            dayMax = 32
        elif ml.month == 'August':
            dayMax = 32
        for i in range(1, dayMax):
            varDay = Day()
            varDay.day = i
            varDay.remain_seat = 4
            varDay.f_month = ml
            varDay.save()
    return render(request, 'main.html')


# REGISTER
def register(request):
    """ 계정생성 """
    if request.method == "POST":
        form = UserForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            raw_password = form.cleaned_data.get('password1')
            user = authenticate(username=username, password=raw_password)
            login(request, user)
            return redirect('main:main')
    else:
        form = UserForm()
    return render(request, 'register.html', {'form': form})


def data(request):
    return render(request, 'lottie.html')

static/script.js

var infoMonth = document.querySelector('.infoMonth');
var infoDay = document.querySelector('.infoDay');
var selFormArr = Array.from(Array(1), () => Array(2).fill(null));
var daySel = $('.selected').length + 1;

const day = document.querySelectorAll('td');
day.forEach((items)=>{

    items.addEventListener('click', (e)=>{

        // 선택한 날짜의 개수를 담는 변수
        daySel = $('.selected').length + 1;

        // 선택한 날짜가 몇달인지 찾는 변수
        selMonth = $(items).parents('tr').parents('tbody').children('tr').first().text().trim();

        if(Number(items.innerHTML)){
            if(daySel > 1 && !items.classList.contains('selected')){
                day.forEach((inItem)=>{
                    inItem.classList.remove('selected');
                });
                items.classList.toggle('selected');
                selFormArr[0][0] = selMonth;
                selFormArr[0][1] = items.innerHTML;
                infoDay.innerHTML = items.innerHTML;
                infoMonth.innerHTML = selMonth;
            }else{
                if(items.classList.contains('selected')){               
                }else{
                    selFormArr[0][0] = selMonth;
                    selFormArr[0][1] = items.innerHTML;
                    infoDay.innerHTML = items.innerHTML;
                    infoMonth.innerHTML = selMonth;
                }
                items.classList.toggle('selected');
            }
        }else{
            // alert("Not a day");
            infoDay.innerHTML = 0;
            infoMonth.innerHTML = 0;
            day.forEach((inItem)=>{
                inItem.classList.remove('selected');
            });
        }
        e.stopPropagation();
        dateDay = items.innerHTML;
        $.ajax({
            type: "POST",
            url: "http://localhost:8000/viewSeat",
            data: {'dateDay': dateDay, 'selMonth': selMonth}, // 서버로 데이터 전송시 옵션
            dataType: "json", // 서버측에서 전송한 데이터를 어떤 형식의 데이터로서 해석할 것인가를 지정, 없으면 알아서 판단
            success: function(response){ // 통신 성공시
                $('.remain-num').html(response.resSeat);
            },
            error: function(request, status, error){},
        });

    });
});

const purchase = document.querySelector('.purchase-box');
purchase.addEventListener('click', ()=>{
    reqDay =  $('.infoDay').html();
    $.ajax({
        type: "POST",
        url: "http://localhost:8000/checkSeat",
        data: {'reqDay': reqDay, 'conCheck': "purchase", 'selMonth': selMonth},
        dataType: "json",
        success: function(response){
            $('.remain-num').html(response.resSeat);
        },
        error: function(request, status, error){},
    });
});

const cancel = document.querySelector('.cancel-box');
cancel.addEventListener('click', ()=>{
    reqDay =  $('.infoDay').html();
    $.ajax({
        type: "POST",
        url: "http://localhost:8000/cancelSeat",
        data: {'reqDay': reqDay, 'selMonth': selMonth},
        dataType: "json",
        success: function(response){
            $('.remain-num').html(response.resSeat);
        },
        error: function(request, status, error){},
    });
});


// NEXT, PREV BTN FUNC SECTION
var nextBtn = document.querySelector('.next')
var prevBtn = document.querySelector('.prev')
var monthTable = document.querySelector('.year')
var currNum = 400;

nextBtn.addEventListener('click', ()=>{
    if(currNum == 1100){
        currNum = 1100;
    }else{ 
        currNum += 100;
        monthTable.setAttribute('style', `right: ${currNum}%`)
    }
});

prevBtn.addEventListener('click', ()=>{
    if(currNum == 0){
        currNum = 0;
    }else{
        currNum -= 100;
        monthTable.setAttribute('style', `right: ${currNum}%`)
    }
});



// TARGET DATE FILLFUNC
var fillDate = (tMonth, tDay, tColor) => {
    day.forEach((items)=>{
        // 선택한 날짜가 몇달인지 찾는 변수
        selMonth = $(items).parents('tr').parents('tbody').children('tr').first().text().trim();
        for(i=0; i<tDay.length; i++){
            if(selMonth == tMonth && items.innerHTML == tDay[i]){
                items.setAttribute('style', `background-color: ${tColor};`)
            }
        }
    });
};

selDateList = [24, 29, 30];
window.onload = () =>{
    fillDate('May', selDateList, '#ccffbf')
}

static/style.css

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
    font-family: 'GmarketSansMedium';
    box-sizing: border-box;
}

body, table, tbody, td, th, tr, p{
    padding: 0;
    margin: 0;
    vertical-align: top;
    text-align: center;
}

body, tbody{
    cursor: default;
}

body{
    /* background-color: #000; */
}

.calender{
    overflow: hidden;
    /* overflow-x: scroll; */
    width: 100vw;
    margin-top: 50px;
    transition: all .3s;
}

.year{
    transition: all .3s;
}

.calender > table:first-child{
    width: 100%;
    position: relative;
    right: 400%;
}

.calender > table > tbody{
    white-space: nowrap;
}

.calender > table > tbody > tr:first-child{
    display: block;
}
.calender > table > tbody > tr{
    display: inline-block;
}

/* YEAR TITLE*/
.calender > table > tbody > tr:first-child > th{
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    cursor: default;
    font-size: 50px;
    font-weight: bold;
}

/* MONTH TITLE */
.calender > table > tbody > tr > td table tbody tr:first-child > th{
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 30px;
    cursor: default;
}
/* MONTH */
.calender > table > tbody > tr > td{
    cursor: default;
    padding: 20px 0px;
    display: inline-flex;
    justify-content: space-between;
    width: 100vw;
}
.calender > table > tbody > tr > td >table{
    /* padding: 20px; */
    margin: auto;
    width: 90vw;
    height: 50vh;
}

/* MONTH WEEK TITLE */
.calender > table > tbody > tr > td table tbody tr:nth-child(2) > th{
    clear: both;
    font-weight: bold;
    padding: 5px 10px;
    background-color: rgb(218, 218, 218, 30%);
    border: 1px solid rgb(218, 218, 218, 80%);
    width: 200px;
}
/* MONTH WEEK TITLE Saturday, Sunday */
.calender > table > tbody > tr > td table tbody tr:nth-child(2) > th:nth-child(6N){
    color: rgb(68, 124, 209);
}
.calender > table > tbody > tr > td table tbody tr:nth-child(2) > th:last-child{
    color: rgb(209, 68, 68);
}

/* MONTH DAY */
.calender > table > tbody > tr > td table tbody tr > td{
    padding: 10px 0px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(218, 218, 218, 80%);
    transition: all .3s;
    line-height: 66px;
    cursor: pointer;
}
/* MONTH DAY Saturday, Sunday */
.calender > table > tbody > tr > td table tbody tr > td:nth-child(6N){
    color: rgb(68, 124, 209);
    font-weight: bold;
}
.calender > table > tbody > tr > td table tbody tr > td:last-child{
    color: rgb(209, 68, 68);
    font-weight: bold;
}
.calender > table > tbody > tr > td table tbody tr > td:hover{
    background-color: rgb(109, 109, 109) !important;
    color: #fff;
}

.selected{
    background-color: rgb(59, 59, 59) !important;
    color: #fff !important;
}


.btn-wrapper{
    position: fixed;
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.btn{
    cursor: pointer;
    width: 100px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    box-shadow: 1px 1px 9px rgba(172, 172, 172, 0.493);
    line-height: 50px;
    border: 1px solid rgb(97, 97, 97);
}
.btn.prev{border-radius: 0px 40px 40px 0px;}
.btn.next{border-radius: 40px 0px 0px 40px;}

/* INFO BAR */
.infoBar{
    width: 100vw;
    height: 250px;
    font-size: 0;
}
/* info-bar LEFT */
.infoBar-left{
    vertical-align: top;
    display: inline-block;
    width: 49%;
    height: 250px;
    font-size: 0px;
}
.infoBar-left_date{
    vertical-align: top;
    display: inline-block;
    width: 49%;
    height: 250px;
    font-size: 20px;
}
.infoBar-left_remain{
    vertical-align: top;
    display: inline-block;
    width: 49%;
    height: 250px;
    font-size: 20px;
}
.infoBar-left > div{
    border: 1px solid #fff;
}

.date-box{
    position: relative;
    top: 100px;
    margin: auto;
    width: 50%;
    line-height: 50px;
    border-radius: 20px;
    color: #000;
    background-color: #fff;
    box-shadow: 1px 1px 9px rgba(172, 172, 172, 0.493);
    border: 1px solid rgb(97, 97, 97);
}

.remain-box{
    position: relative;
    top: 75px;
    margin: auto;
    width: 50%;
    line-height: 50px;
    border-radius: 20px;
    color: #000;
    background-color: #fff;
    box-shadow: 1px 1px 9px rgba(172, 172, 172, 0.493);
    border: 1px solid rgb(97, 97, 97);
}
.remain-box > p:last-child{
    color: rgb(209, 68, 68);
    font-weight: bold;
}


/* info-bar RIGHT */
.infoBar-right{
    vertical-align: top;
    display: inline-block;
    width: 49%;
    height: 250px;
    color: #000;
    font-size: 0px;
}
.sendBtn-purchase{
    vertical-align: top;
    display: inline-block;
    width: 49%;
    height: 250px;
    font-size: 20px;
}
.sendBtn-cancel{
    vertical-align: top;
    display: inline-block;
    width: 49%;
    height: 250px;
    font-size: 20px;
}

.purchase-box{
    cursor: pointer;
    position: relative;
    top: 100px;
    margin: auto;
    width: 50%;
    line-height: 50px;
    border-radius: 20px;
    color: #000;
    background-color: #fff;
    box-shadow: 1px 1px 9px rgba(172, 172, 172, 0.493);
    border: 1px solid rgb(97, 97, 97);

}

.cancel-box{
    cursor: pointer;
    position: relative;
    top: 100px;
    margin: auto;
    width: 50%;
    line-height: 50px;
    border-radius: 20px;
    color: #000;
    background-color: #fff;
    box-shadow: 1px 1px 9px rgba(172, 172, 172, 0.493);
    border: 1px solid rgb(97, 97, 97);
}
.clckBox{transition: all .3s;}
.clckBox:hover{
    color: #fff;
    background-color: rgb(97, 97, 97) !important;
}

.sendBtn{
    cursor: pointer;
    width: 20%;
    height: 50px;
    /* margin: auto; */
    background-color: blueviolet;
}

templates/main.html

{% extends "index.html" %}
{% load static %}
{% block content %}

<a class="loginTab" href=""></a>

<div class="calender">
    {{ YC|safe }}
</div>

<div class="btn-wrapper">
    <div class="btn prev">PREV</div>
    <div class="btn next">NEXT</div>
</div>

<div class="infoBar">
    <div class="infoBar-left">
        <div class="infoBar-left_date">
            <div class="date-box">
                <span class="infoMonth">0</span>
                <span class="infoDay">0</span>
            </div>
        </div>
        <div class="infoBar-left_remain">
            <div class="remain-box">
                <p>남은 자리</p>
                <p class="remain-num">0</p>
            </div>
        </div>
    </div>

    <div class="infoBar-right">
        <div class="sendBtn-purchase">
            <button class="clckBox purchase-box">
                예약
            </button>
        </div>

        <div class="sendBtn-cancel">
            <button class="clckBox cancel-box">
                예약 취소
            </button>
        </div>
    </div>
</div>

<form id="dateSelForm" method="POST" action="">
    <input id="monthForm" value="" type="hidden">
    <input id="dayForm" value="" type="hidden">
</form>

<script src="{% static 'script.js' %}"></script>

{% endblock %}

Github Link

https://github.com/POBSIZ/calenderApp

GitHub - POBSIZ/calenderApp: 장고를 활용한 캘린더 및 일정 예약 웹앱