【Python】FullCalendarとMySQLを連携して予定を登録できるようにする

2018年6月19日2020年10月11日Javascript,Python,開発

おはようございます。

昨日に引き続き FullCalendar。
今回は MySQLにテーブルを作成してカレンダーに表示するデータを登録できるところまでやってみました。

プログラムは前回のものを流用。

【Python】FullCalendar を使ったWEBページを作ってみる | ドラブロ – let bygo

JQueryプラグインの「FullCalendar」を使って、単純にカレンダーを表示するWEBサービスのサンプルを作 ...

https://www.doraxdora.com/blog/2018/06/18/post-4983/

1. 下準備
2. 画面の修正
3. サーバープログラムの修正
- 3.1. 新規クラス追加
- 3.2. URLハンドラー、新規メソッドを追加
4. 起動してみる
5. まとめ

下準備

MySQLのインストール

MySQL（フリーのMariaDBを使います）のインストールは次の記事を参照していただければ。

MariaDB 10.2.6 のインストールからテーブル作成まで | ドラブロ – let bygones

MySQLから派生したOSSの「mariadb-10.2.6」を Windows にインストールして、テーブル作成、データのイ ...

https://www.doraxdora.com/blog/2017/05/30/post-1024/

テーブルの作成

CREATE TABLE IF NOT EXISTS TBL_SCHEDULE (
          USER_CD VARCHAR(10)
        , ID INT(10)
        , TITLE VARCHAR(100)
        , START DATETIME
        , END DATETIME
        , TEXTCOLOR VARCHAR(20)
        , COLOR VARCHAR(20)
        , URL VARCHAR(100)
        , ALLDAY VARCHAR(10)
        , PRIMARY KEY(USER_CD, ID)
)

CREATETABLEIF NOT EXISTSTBL_SCHEDULE(

USER_CDVARCHAR(10)

,IDINT(10)

,TITLEVARCHAR(100)

,STARTDATETIME

,ENDDATETIME

,TEXTCOLORVARCHAR(20)

,COLORVARCHAR(20)

,URLVARCHAR(100)

,ALLDAYVARCHAR(10)

,PRIMARY KEY(USER_CD,ID)

)

データ登録

ひとまずサンプルのデータを登録しておきます。

DELETE FROM TBL_SCHEDULE;
INSERT INTO TBL_SCHEDULE VALUES('001','1','定例会','2018-06-06T19:00:00','2018-06-06T21:00:00','','','', 'FALSE');
INSERT INTO TBL_SCHEDULE VALUES('001','2','外出','2018-06-18T14:00:00','2018-06-18T17:30:00','','','', 'FALSE');
INSERT INTO TBL_SCHEDULE VALUES('001','3','有給','2018-06-28','2018-06-28','','','', 'TRUE');

DELETEFROMTBL_SCHEDULE;

INSERTINTOTBL_SCHEDULEVALUES('001','1','定例会','2018-06-06T19:00:00','2018-06-06T21:00:00','','','','FALSE');

INSERTINTOTBL_SCHEDULEVALUES('001','2','外出','2018-06-18T14:00:00','2018-06-18T17:30:00','','','','FALSE');

INSERTINTOTBL_SCHEDULEVALUES('001','3','有給','2018-06-28','2018-06-28','','','','TRUE');

ライブラリの追加

次のライブラリを「メニュー」＞「Default Settings」よりインストールします。

mysql-connector-python-rf

画面の修正

fullCalendar のオプションで時刻の形式を指定するようにしたのと、
予定を入力した際にサーバーのメソッドを呼び出してデータ登録するようにしました。

index.html

    <!DOCTYPE html>
    <html>
       <head>
          <title>カレンダーサンプル</title>
          <link rel="stylesheet" href="{{ static_url('css/fullcalendar.min.css') }}"/>
          <link rel="stylesheet" href="{{ static_url('css/style.css') }}"/>
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
          <script type="text/javascript" src="{{ static_url('js/moment.min.js') }}"></script>
          <script type="text/javascript" src="{{ static_url('js/fullcalendar.min.js') }}"></script>
          <script type="text/javascript" src="{{ static_url('lang/ja.js') }}"></script>
          <script>
             // ページ読み込み時の処理
             $(document).ready(function () {
    
             // カレンダーの設定
             $('#calendar').fullCalendar({
                height: 550,
                lang: "ja",
                header: {
                   left: 'prev,next today',
                   center: 'title',
                   right: 'month,basicWeek,basicDay'
                },
                timeFormat: 'HH:mm',
                selectable: true,
                selectHelper: true,
                navLinks: true,
                eventSources: [{
                   url: 'http://localhost:8080/getCalendar',
                   dataType: 'json',
                   async: false,
                   type : 'GET',
                   error: function() {
                      $('#script-warning').show();
                   }
                }],
                select: function(start, end, resource) {
                   var title = prompt("予定タイトル:");
                   var eventData;
                   if (title) {
                      eventData = {
                         title: title,
                         start: start,
                         end: end,
                         allDay: true
                      };
                      $('#calendar').fullCalendar('renderEvent', eventData, true);
    
                      $.ajax({
                         url: "http://localhost:8080/regist",
                         type: "POST",
                         data: JSON.stringify(eventData),
                         success: function(jsonResponse) {
                            alert("予定を登録しました。")
                         },
                         error: function() {
                         }
                      });
                   }
                   $('#calendar').fullCalendar('unselect');
                   },
                   editable: true,
                   eventLimit: true,
                });
             });
          </script>
       </head>
       <body>
          <div id='calendar'></div>
       </body>
    </html>

<!DOCTYPE html>

<html>

<head>

<title>カレンダーサンプル</title>

// ページ読み込み時の処理

$(document).ready(function(){

// カレンダーの設定

$('#calendar').fullCalendar({

height:550,

lang:"ja",

header:{

left:'prev,next today',

center:'title',

right:'month,basicWeek,basicDay'

timeFormat:'HH:mm',

selectable:true,

selectHelper:true,

navLinks:true,

eventSources:[{

url:'http://localhost:8080/getCalendar',

dataType:'json',

async:false,

type:'GET',

error:function(){

$('#script-warning').show();

}

}],

select:function(start,end,resource){

vartitle=prompt("予定タイトル:");

vareventData;

if(title){

eventData={

title:title,

start:start,

end:end,

allDay:true

};

$('#calendar').fullCalendar('renderEvent',eventData,true);

$.ajax({

url:"http://localhost:8080/regist",

type:"POST",

data:JSON.stringify(eventData),

success:function(jsonResponse){

alert("予定を登録しました。")

error:function(){

}

});

}

$('#calendar').fullCalendar('unselect');

editable:true,

eventLimit:true,

});

</script>

</head>

<body>

</body>

</html>

サーバープログラムの修正

新規クラス追加

MySQL用クラスを追加

MySQLUtil.py

import mysql.connector
import logging
from contextlib import closing


class MySQLUtil:
    """
    MySQL 操作用クラス
    """

    def __init__(self, host="localhost", port="3306", user="USER01", password="USER01", database="DB01"):
        self.config = {
            "host": host,
            "port": port,
            "user": user,
            "password": password,
            "database": database
        }
        self.create_db()

    def create_db(self):
        """
        データベース、及び必要なテーブルを作成します.
        :return:
        """

        with closing(mysql.connector.connect(**self.config)) as conn:

            c = conn.cursor()

            # スケジュールテーブル
            sql = "CREATE TABLE IF NOT EXISTS TBL_SCHEDULE ("
            sql += "  USER_CD VARCHAR(10)"
            sql += ", ID VARCHAR(10)"
            sql += ", TITLE VARCHAR(100)"
            sql += ", START DATETIME"
            sql += ", END DATETIME"
            sql += ", TEXTCOLOR VARCHAR(20)"
            sql += ", COLOR VARCHAR(20)"
            sql += ", URL VARCHAR(100)"
            sql += ", ALLDAY VARCHAR(20)"
            sql += ", PRIMARY KEY(USER_CD, ID)"
            sql += ")"
            c.execute(sql)

            c.close()
            conn.commit()

    def delete_data(self):
        """
        データを削除します
        :return:
        """

        logging.info("delete_data")
        with closing(mysql.connector.connect(**self.config)) as conn:

            c = conn.cursor()

            # データクリア
            sql = "DELETE FROM TBL_SCHEDULE"
            c.execute(sql)
            c.close()
            conn.commit()

    def insert_data(self, data):
        """
        データを登録します
        :param ticker:
        :return:
        """

        with closing(mysql.connector.connect(**self.config)) as conn:

            c = conn.cursor()
            # データ登録
            sql = "INSERT INTO TBL_SCHEDULE VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s)"
            c.execute(sql, data)

            c.close()
            conn.commit()

    def get_schedule(self, year_month, user_cd=""):
        """
        データ（テーブル）をデータフレームに変換してかえします
        :return:
        """
        result = []

        with closing(mysql.connector.connect(**self.config)) as conn:

            c = conn.cursor(dictionary=True)

            sql = "SELECT * FROM TBL_SCHEDULE"
            sql += " WHERE (DATE_FORMAT(START, '%Y%m') = '" + year_month + "'"
            sql += " OR DATE_FORMAT(END, '%Y%m') = '" + year_month + "')"
            if user_cd != "":
                sql += " AND USER = '" + user_cd + "'"

            sql += " ORDER BY USER_CD, ID"

            c.execute(sql)
            for r in c.fetchall():
                result.append({
                    "user_cd": r['USER_CD'],
                    "id": r['ID'],
                    "title": r['TITLE'],
                    "start": r['START'],
                    "end": r['END'],
                    "textColor": r['TEXTCOLOR'],
                    "color": r['COLOR'],
                    "url": r['URL'],
                    "allDay": (r['ALLDAY'] == 'TRUE')
                })

        return result

    def get_next_id(self, user_cd=""):
        """
        データ（テーブル）をデータフレームに変換してかえします
        :return:
        """
        result = 0

        with closing(mysql.connector.connect(**self.config)) as conn:

            c = conn.cursor(dictionary=True)

            sql = "SELECT MAX(ID) + 1 AS ID FROM TBL_SCHEDULE WHERE USER_CD = '" + user_cd + "'"

            c.execute(sql)

            result = c.fetchone()

        return result[r"ID"]

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

importmysql.connector

importlogging

fromcontextlibimportclosing

classMySQLUtil:

"""

MySQL 操作用クラス

"""

def__init__(self,host="localhost",port="3306",user="USER01",password="USER01",database="DB01"):

self.config={

"host":host,

"port":port,

"user":user,

"password":password,

"database":database

}

self.create_db()

defcreate_db(self):

"""

データベース、及び必要なテーブルを作成します.

:return:

"""

withclosing(mysql.connector.connect(**self.config))asconn:

c=conn.cursor()

# スケジュールテーブル

sql="CREATE TABLE IF NOT EXISTS TBL_SCHEDULE ("

sql+=" USER_CD VARCHAR(10)"

sql+=", ID VARCHAR(10)"

sql+=", TITLE VARCHAR(100)"

sql+=", START DATETIME"

sql+=", END DATETIME"

sql+=", TEXTCOLOR VARCHAR(20)"

sql+=", COLOR VARCHAR(20)"

sql+=", URL VARCHAR(100)"

sql+=", ALLDAY VARCHAR(20)"

sql+=", PRIMARY KEY(USER_CD, ID)"

sql+=")"

c.execute(sql)

c.close()

conn.commit()

defdelete_data(self):

"""

データを削除します

:return:

"""

logging.info("delete_data")

withclosing(mysql.connector.connect(**self.config))asconn:

c=conn.cursor()

# データクリア

sql="DELETE FROM TBL_SCHEDULE"

c.execute(sql)

c.close()

conn.commit()

definsert_data(self,data):

"""

データを登録します

:param ticker:

:return:

"""

withclosing(mysql.connector.connect(**self.config))asconn:

c=conn.cursor()

# データ登録

sql="INSERT INTO TBL_SCHEDULE VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s)"

c.execute(sql,data)

c.close()

conn.commit()

defget_schedule(self,year_month,user_cd=""):

"""

データ（テーブル）をデータフレームに変換してかえします

:return:

"""

result=[]

withclosing(mysql.connector.connect(**self.config))asconn:

c=conn.cursor(dictionary=True)

sql="SELECT * FROM TBL_SCHEDULE"

sql+=" WHERE (DATE_FORMAT(START, '%Y%m') = '"+year_month+"'"

sql+=" OR DATE_FORMAT(END, '%Y%m') = '"+year_month+"')"

ifuser_cd!="":

sql+=" AND USER = '"+user_cd+"'"

sql+=" ORDER BY USER_CD, ID"

c.execute(sql)

forrinc.fetchall():

result.append({

"user_cd":r['USER_CD'],

"id":r['ID'],

"title":r['TITLE'],

"start":r['START'],

"end":r['END'],

"textColor":r['TEXTCOLOR'],

"color":r['COLOR'],

"url":r['URL'],

"allDay":(r['ALLDAY']=='TRUE')

})

returnresult

defget_next_id(self,user_cd=""):

"""

データ（テーブル）をデータフレームに変換してかえします

:return:

"""

result=0

withclosing(mysql.connector.connect(**self.config))asconn:

c=conn.cursor(dictionary=True)

sql="SELECT MAX(ID) + 1 AS ID FROM TBL_SCHEDULE WHERE USER_CD = '"+user_cd+"'"

c.execute(sql)

result=c.fetchone()

returnresult[r"ID"]

URLハンドラー、新規メソッドを追加

Main.py

import json
import logging
import os
import tornado.ioloop

from tornado.web import RequestHandler
from tornado.options import options
from Utils.MySQLUtil import MySQLUtil
from datetime import datetime

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("index.html")


class GetCalendar(RequestHandler):
    """
    カレンダー取得
    """

    def initialize(self):
        logging.info("GetCalendar [initialize]")

    def get(self):
        logging.info("GetCalendar [get]")

        mysql = MySQLUtil()

        data = mysql.get_schedule("201806", "")

        self.write(json.dumps(data, default=support_datetime_default))


class RegistSchedule(RequestHandler):
    """
    スケジュール登録
    """
    def initialize(self):
        logging.info("RegistSchedule [initialize]")

    def post(self):
        logging.info("RegistSchedule [post]")

        mysql = MySQLUtil()

        param = json.loads(self.request.body)
        allday = "TRUE" if param["allDay"] else "FALSE"
        id = mysql.get_next_id('001')

        data = [
            "001",
            id,
            param["title"],
            param["start"],
            param["end"],
            "",
            "",
            "",
            allday
        ]

        mysql.insert_data(data)

def support_datetime_default(o):
    if isinstance(o, datetime):
        return o.isoformat()
    raise TypeError(repr(o) + " is not JSON serializable")


app = tornado.web.Application([
    (r"/", MainHandler),
    (r"/getCalendar", GetCalendar),
    (r"/regist", RegistSchedule),
],
    template_path=os.path.join(os.getcwd(), "templates"),
    static_path=os.path.join(os.getcwd(), "static"),
)

if __name__ == "__main__":
    options.parse_command_line()
    app.listen(8080)
    logging.info("server started")
    tornado.ioloop.IOLoop.instance().start()

importjson

importlogging

importos

importtornado.ioloop

fromtornado.web importRequestHandler

fromtornado.options importoptions

fromUtils.MySQLUtil importMySQLUtil

fromdatetimeimportdatetime

classMainHandler(tornado.web.RequestHandler):

defget(self):

self.render("index.html")

classGetCalendar(RequestHandler):

"""

カレンダー取得

"""

definitialize(self):

logging.info("GetCalendar [initialize]")

defget(self):

logging.info("GetCalendar [get]")

mysql=MySQLUtil()

data=mysql.get_schedule("201806","")

self.write(json.dumps(data,default=support_datetime_default))

classRegistSchedule(RequestHandler):

"""

スケジュール登録

"""

definitialize(self):

logging.info("RegistSchedule [initialize]")

defpost(self):

logging.info("RegistSchedule [post]")

mysql=MySQLUtil()

param=json.loads(self.request.body)

allday="TRUE"ifparam["allDay"]else"FALSE"

id=mysql.get_next_id('001')

data=[

"001",

id,

param["title"],

param["start"],

param["end"],

"",

allday

]

mysql.insert_data(data)

defsupport_datetime_default(o):

ifisinstance(o,datetime):

returno.isoformat()

raiseTypeError(repr(o)+" is not JSON serializable")

app=tornado.web.Application([

(r"/",MainHandler),

(r"/getCalendar",GetCalendar),

(r"/regist",RegistSchedule),

template_path=os.path.join(os.getcwd(),"templates"),

static_path=os.path.join(os.getcwd(),"static"),

)

if__name__=="__main__":

options.parse_command_line()

app.listen(8080)

logging.info("server started")

tornado.ioloop.IOLoop.instance().start()

起動してみる

まとめ

なかなか形になってきましたね。
次回は Bootstrap なんかを使ってもう少し詳細な予定を登録できるようにしたり、
登録済みの予定を更新、削除までできたらいいかなと思います。

ではでは。

2018年6月19日2020年10月11日Javascript,Python,開発FullCalendar,Javascript,JQuery,MariaDB,MySQL,Python,プログラミング

Posted by doradora