Python 会議室予約システム

Djangoフレームワークを使った会議室予約システムの作成(フロント)

会議室予約システムのデザインをする

今回はPythonのWebアプリケーション用フレームワークのDjangoを使った会議室予約システム作成の続きになります。

前回までの内容は以下を参照してください。

Djangoフレームワークを使った会議室予約システムの作成

目次

  1. フロントデザイン修正
    1. templates/resurv.htmlコーディング
    2. mrrs/forms.pyコーディング
  2. まとめ

フロントデザイン修正

フロントのデザインを修正します。

templates/resurv.htmlコーディング

templates/resurv.htmlを修正します。

  1.     
  2. <!DOCTYPE html>
  3. <html>
  4.   <head lang="ja">
  5.     <meta charset="utf-8">
  6.     <title>会議室予約システム</title>
  7.     <!-- google fontsを使用するためgoogleからフォントのcssを取得します。-->
  8.     <link href="https://fonts.googleapis.com/css?family=Courgette|Noto+Serif+JP&display=swap" rel="stylesheet">
  10.     <!-- css のスタイルを記述します。 今後cssは外部ファイル化を行います。 start -->
  11.     <style>
  12.       /** CSS はhtmlのtag class id の有効範囲が大きいものから記載します。 */
  13.       /** ************************************************** */
  14.       /** tag                                                */
  15.       /** ************************************************** */
  17.       /** h1タグのスタイルです */
  18.       h1 {
  19.         font-size  : 40px;                     /* h1タイトルのフォントサイズです */
  20.         font-family: 'Courgette', cursive;     /* googleフォントです */
  21.         text-align : center;                   /* 文字の中央よせです */
  22.       }
  24.       /** ************************************************** */
  25.       /** class                                              */
  26.       /** ************************************************** */
  28.       /** wrapper のスタイルです */
  29.       /** bodyタグでもいいですが wrapperを使うことで全体的にpaddingやmarginの調整をとりやすくします */
  30.       .wrapper {
  31.         max-width  : 1200px;                   /* 最大横幅です */
  32.         min-width  : 700px;                    /* 最小横幅です レスポンシブ対応ではないです */
  33.         margin     : 0 auto;                   /* 外側を操作します。 中央よせをします 0が上下 autoが左右 */
  34.         padding    : 40px;                     /* 内側を操作します。 上下左右で内側に40pxの余白を付けます */
  35.       }
  37.       /** reserveのwrapperを使うことでreserveにpaddingやmarginの調整をとりやすくします */
  38.       .reserve_wrapper {
  39.          padding   : 50px;                     /* 内側を操作します。 上下 50px 左右200px で内側に余白を付けます */
  40.       }
  43.       /** -------------------------------------------------- */
  44.       /** 入力フォーム                                       */
  45.       /** -------------------------------------------------- */
  46.       /** reserveのinput部分で使用します */
  47.       .reserve_input {
  48.         border-radius : 12px;                  /* 枠に丸みを付けます */
  49.         box-sizing : border-box;
  50.         border     : 1px solid #465DAA;
  51.                                                /* 枠線を表示します */
  52.         padding    : 50px;                     /* 内側を操作します。 上下左右 50px で内側に余白を付けます */
  53.         margin     : 50px 200px;               /* 外側を操作します。 上下 50px 左右200px で外側に余白を付けます */
  54.       }
  56.       /** reserveのinput部分で入力の部品を囲みます */
  57.       .reserve_input_div {
  58.         position   : relative;                 /* reserve_input からみて相対的な位置を設定します。 positionのデフォルトは staticです */
  59.         margin     : 30px 3%;                  /* 外側を操作します。 上下 30px 左右3% で外側に余白を付けます */
  60.       }
  62.       /** input部分で入力の部品の中の実際の部品textを選択します */
  63.       .reserve_input_div input[type='text'] {
  64.         font       : 16px/24px 'Noto Serif JP', serif;
  65.                                                /* font-size/line-height googleフォントです */
  66.         box-sizing : border-box;               /* ボックスサイズの算出方法を指定します パディングとボーダーを幅と高さに含めています */
  67.         width      : 100%;                     /* 横幅を100%にします。*/
  68.         letter-spacing : 1px;                  /* 文字の間隔を指定します。*/
  69.         padding-left : 6em;                    /* 内側を操作します。 左 6em(font-sizeに合わせる) で内側に余白を付けます */
  70.       }
  72.       /** input部分で入力の部品の中の実際の部品textにfocusが当たったとき */
  73.       .reserve_input_div input[type='text']:focus {
  74.         outline    : none;                     /* focus（入力ができるようになるとき）が当たったとき 枠を表示しません */
  75.       }
  77.       /** 部品のclass です 今回はmrrs/form.pyに記載しています */
  78.       .reserve_type_text {
  79.         padding    : 4px 0;                    /* 内側を操作します。 上下 4px 左右0 で内側に余白を付けます  で内側に余白を付けます */
  80.         border     : 0;                        /* bordrを表示しない */
  81.         border-bottom: 1px solid #1b2538;      /* 下線は表示する */
  82.         background-color: transparent;         /* 背景を透過 */
  83.       }
  85.       /** reserve_type_text に関連する focus_lineのクラスを指定します */
  86.       .reserve_type_text ~ .focus_line {
  87.         position   : absolute;                 /* reserve_type_text からみて絶対的な位置を設定します。 positionのデフォルトは staticです */
  88.         bottom     : 0;                        /* 下から0 */
  89.         left       : 0;                        /* 左から0 */
  90.         width      : 0;                        /* 横幅 0 */
  91.         height     : 2px;                      /* 高さ 2px */
  92.         transition : 0.4s;                     /* 要素の2つの状態間の変化を0.4秒で操作します */
  93.         background-color: #da3c41;             /* 下線を赤にします */
  94.       }
  96.       /** reserve_type_textのforcusに関連する focus_lineのクラスを指定します */
  97.       .reserve_type_text:focus ~ .focus_line,
  98.       .reserve_input_div.reserve_type_text ~ .focus_line {
  99.         width      : 100%;                     /* 横幅 100%にします */
  100.         transition : 0.4s;                     /* 要素の2つの状態間の変化を0.4秒で操作します */
  101.       }
  103.       /**  reserve_type_text に関連する labelを指定します */
  104.       .reserve_type_text ~ label {
  105.         position   : absolute;                 /* reserve_type_text からみて絶対的な位置を設定します。 positionのデフォルトは staticです */
  106.         z-index    : -1;                       /* labelの重なりz軸を 下にするのかな */
  107.         top        : 4px;                      /* 上から4px */
  108.         left       : 0;                        /* 左から0 */
  109.         width      : 100%;                     /* 横幅 100%にします */
  110.         transition : 0.3s;                     /* 要素の2つの状態間の変化を0.5秒で操作します */
  111.         letter-spacing: 0.5px;                 /* 文字の間隔を指定します。*/
  112.         color      : #aaaaaa;                  /* ラベルの文字の色を灰色っぽいいろにします */
  113.       }
  115.       /**  reserve_type_textのforcusに関連する labelのクラスを指定します */
  116.       .reserve_type_text:focus ~ label,
  117.       .reserve_input_div.reserve_type_text ~ label {
  118.         font-size  : 12px;                     /* 文字サイズを小さくします */
  119.         top        : -16px;                    /* 文字位置を上にします テキストの中から上に移動 */
  120.         transition : 0.3s;                     /* 要素の2つの状態間の変化を0.4秒で操作します */
  121.         color      : #da3c41;                  /* 赤文字 */
  122.       }
  124.       /** reserve_input_div_button 登録ボタンで使用します  */
  125.       .reserve_input_div_button {
  126.         text-align : center;                   /* 文字を中央に寄せます */
  127.         margin     : 10px auto;                /* divを中央に寄せます */
  128.       }
  130.       /** submit_insert 登録ボタンのデザインです  */
  131.       .submit_insert {
  132.         position   : relative;                 /* reserve_input_div_button からみて相対的な位置を設定します。 positionのデフォルトは staticです */
  133.         color      : #fff;                     /* 文字色白 */
  134.         width      : 120px;                    /* 横幅 120px */
  135.         height     : 50px;                     /* 高さ 50px */
  136.         line-height: 50px;                     /* 高さ 50px */
  137.         border-radius: 12px;                   /* 枠に丸みを付けます */
  138.         text-align : center;                   /* 文字を中央に寄せます */
  139.         font-family: 'Noto Serif JP', serif;   /* googleフォントです */
  140.         font-size  : 16px;                     /* 文字のサイズです */
  141.         background-color: #465DAA;             /* ボタンの背景色です */
  142.         box-shadow : 0 1px 1px rgba(0, 0, 0, 0.28);
  143.                                                /* ボックスの影を付けます */
  144.       }
  146.       /** -------------------------------------------------- */
  147.       /** リスト                                             */
  148.       /** -------------------------------------------------- */
  149.       /** reserveのlist部分で使用します */
  150.       .reserve_list {
  151.         display    : grid;                     /* gridを使います */
  152.         border-radius : 12px;                  /* 枠に丸みを付けます */
  153.         position   : relative;                 /* reserve_input_div_button からみて相対的な位置を設定します。 positionのデフォルトは staticです */
  154.         box-sizing : border-box;               /* ボックスサイズの算出方法を指定します パディングとボーダーを幅と高さに含めています */
  155.         border     : 1px solid rgba(70,93,170,1);
  156.                                                /* 枠を付けます */
  157.       }
  159.       /** reserveのlist部分の行で使用します */
  160.       .reserve_list_row {
  161.         display    : grid;                     /* gridを使います */
  162.         grid-template-columns : 150px 1fr;     /* 150px 1 fr*/
  163.         background-color : #fff;               /* 文字色 */
  164.         border-top : 1px solid rgba(70,93,170,1);
  165.                                                /* 枠を付けます */
  166.       }
  168.       /** グリッドのヘッダー部分 */
  169.       .reserve_list_row-houre {
  170.         color      : #fff;                     /* 文字色 */
  171.         background-color: #465DAA;
  172.                                                /* 背景色 */
  173.         border-bottom : 1px solid rgba(0, 0, 0, 0.1);
  174.                                                /* 枠線 */
  175.         grid-template-columns : 150px repeat(24, 1fr);
  176.                                                /* 150px 1frで24時間の枠を作成 */
  177.       }
  179.       /** グリッドの最初部分 */
  180.       .reserve_list_row-houre .reserve_list_row-first {
  181.         border-top : 0;                        /* 上線 */
  182.         background-color : #465DAA;            /* 背景色 */
  183.       }
  185.       /** グリッドの最初部分 のspan */
  186.       .reserve_list_row-houre span {
  187.         text-align : center;                   /* 文字中央よせ */
  188.         font-size  : 12px;                     /* 文字サイズ */
  189.         align-self : center;                   /* 中央配置 *
  190.         font-weight: bold;                     /* 文字太さ*/
  191.         padding    : 20px 0;                   /* 内側を操作します。 上下20px 左右0 で内側に余白を付けます */
  192.       }
  194.       /** グリッドのライン部分 */
  195.       .reserve_list_row-lines {
  196.         position   : absolute;                 /* reserve_type_text からみて絶対的な位置を設定します。 positionのデフォルトは staticです */
  197.         height     : 100%;                     /* 高さ100% */
  198.         width      : 100%;                     /* 横幅100% */
  199.         background-color : transparent;        /* 背景色透過 */
  200.         grid-template-columns : 150px repeat(24, 1fr);
  201.                                                /* 150px 1frで24時間の枠を作成 */
  202.       }
  204.       /** グリッドのライン部分 のspan */
  205.       .reserve_list_row-lines span {
  206.         display    : block;                    /* ブロック要素にします */
  207.         border-right : 1px solid rgba(0, 0, 0, 0.1);
  208.                                                /* 左枠線 */
  209.       }
  211.       /** グリッドのライン */
  212.       .reserve_list_row-first {
  213.         background-color : #fff;               /* 背景色 白 */
  214.         border-width : 1px 0 0 0;              /* 線の太さ 上*/
  215.         border-color : rgba(0, 0, 0, 0.1);     /* 線の色 */
  216.         border-style : solid;                  /* 実践 */
  217.         padding    : 15px 0;                   /* 内側を操作します。 上下左右 15px で内側に余白を付けます */
  218.         font-size  : 12px;                     /* 文字のサイズ */
  219.         font-weight: bold;                     /* 太文字 */
  220.         text-align : center;                   /* 中央寄せ */
  221.       }
  223.       /** 文字テキスト */
  224.       .reserve_text {
  225.         text-align : center;                   /* 中央寄せ */
  226.         font-family: 'Noto Serif JP', serif;   /* googleフォントです */
  227.       }
  229.       /** 文字テキスト */
  230.       .reserve_list_row-bars {
  231.         list-style : none;                     /* マーカーを外す */
  232.         display    : grid;                     /* gridを使います */
  233.         padding    : 9px 0;                    /* 内側を操作します。 上下左右 15px で内側に余白を付けます */
  234.         margin     : 0;                        /* 外側を操作します。 上下左右 0px で内側に余白を付けます */
  235.         grid-template-columns: repeat(24, 1fr);
  236.                                                /* 150px 1frで24時間の枠を作成 */
  237.         grid-gap   : 8px 0;                    /* グリッドの間の線 */
  238.         border-top : 1px solid rgba(221, 221, 221, 0.8);
  239.                                                /* 上線 */
  240.         text-align : center;                   /* 文字の中央よせ */
  241.       }
  243.       /** ユーザー名 */
  244.       .user_name {
  245.         font-family: 'Noto Serif JP', serif;   /* googleフォントです */
  246.         font-size  : 12px;                     /* 文字のサイズ */
  247.         color      : #fff;                     /* 文字色 白 */
  248.       }
  250.     </style>
  251.   </head>
  252.   <body>
  253.     <div class="wrapper"><!-- wrapper start -->
  255.       <header>
  256.         <h1>Meeting room reservation system</h1>
  257.       </header>
  259.       <article>
  260.         <!-- 入力フォームと送信ボタンは formタグで囲み postメソッドで送信する -->
  261.         <form action="" method="POST">
  262.           <!--POSTを行う際に必要 -->
  263.           {% csrf_token %}
  265.           <div class="reserve_wrapper"><!-- reserve_wrapper start -->
  267.             <!-- -------------------------------------------------- -->
  268.             <!-- 入力フォーム                                       -->
  269.             <!-- -------------------------------------------------- -->
  270.             <div class="reserve_input"><!-- reserve_input start -->
  272.                 <!-- 予約ID -->
  273.                 <div class="reserve_input_div">
  274.                   {{ form.reserve_id }}
  275.                   <label>{{ form.reserve_id.label }}</label>
  276.                   <span class="focus_line"></span>
  277.                 </div>
  279.                 <!-- 会議室ID -->
  280.                 <div class="reserve_input_div">
  281.                   {{ form.room_id }}
  282.                   <label>{{ form.room_id.label }}</label>
  283.                   <span class="focus_line"></span>
  284.                 </div>
  286.                 <!-- 利用者 -->
  287.                 <div class="reserve_input_div">
  288.                   {{ form.reserve_name }}
  289.                   <label>{{ form.reserve_name.label }}</label>
  290.                   <span class="focus_line"></span>
  291.                 </div>
  293.                 <!-- 開始日時 -->
  294.                 <div class="reserve_input_div">
  295.                   {{ form.start_date_time }}
  296.                   <label>{{ form.start_date_time.label }}</label>
  297.                   <span class="focus_line"></span>
  298.                 </div>
  300.                 <!-- 終了日時 -->
  301.                 <div class="reserve_input_div">
  302.                   {{ form.end_date_time }}
  303.                   <label>{{ form.end_date_time.label }}</label>
  304.                   <span class="focus_line"></span>
  305.                 </div>
  307.                 <div class="reserve_input_div_button">
  308.                   <input type="submit" class="submit_insert" value="登 録">
  309.                 </div>
  310.             </div><!-- reserve_input end  -->
  312.             <!-- -------------------------------------------------- -->
  313.             <!-- 入力 リスト                                        -->
  314.             <!-- -------------------------------------------------- -->
  315.             <div class="reserve_list"><!-- reserve_list start  -->
  317.               <div class="reserve_list_row reserve_list_row-houre">
  318.                 <!-- 24時間の表記 -->
  319.                 <div class="reserve_list_row-first"></div>
  320.                   {% for houre in ''|center:24 %}
  321.                   <span>{{forloop.counter}}</span>
  322.                   {% endfor %}
  323.                 </div>
  325.                 <!-- 縦線の表記 -->
  326.                 <div class="reserve_list_row reserve_list_row-lines">
  327.                   {% for count in ''|center:24 %}
  328.                   <span></span>
  329.                   {% endfor %}
  330.                 </div>
  332.                 <!-- 会議室の内容 -->
  333.                 {% for reserv in reserve_data %}
  334.                 <div class="reserve_list_row">
  335.                   <div class="reserve_list_row-first">
  336.                     <div class="reserve_text">会議室{{reserv.room_id}}：予約[{{reserv.id}}]</div>
  337.                   </div>
  338.                   <ul class="reserve_list_row-bars">
  339.                     <li style="grid-column: {{reserv.start_date_time|date:'H'}}/{{reserv.end_date_time|date:'H'}}; background-color: #465DAA;"><span class="user_name">{{reserv.user}}</span></li>
  340.                   </ul>
  341.                 </div>
  342.                 {% endfor %}
  343.               </div>
  345.             </div><!-- reserve_list end  -->
  347.           </div><!-- reserve_wrapper end  -->
  349.         </form>
  350.       </article>
  352.       <footer></footer>
  354.     </div><!-- wrapper end   -->
  356.   </body>
  357. </html>
  359.     
  360.

mrrs/forms.pyコーディング

フロントのデザインを修正します。

  1.     
  2. from django import forms
  4. class reserve_room(forms.Form):
  5.     """
  6.     reserve_roomのフォーム.
  8.     """
  9.     # 予約ID
  10.     reserve_id = forms.CharField(
  11.         label = 'ID',
  12.         max_length = 20,
  13.         required = True,
  14.         widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
  15.     )
  16.     # 会議室ID
  17.     room_id = forms.CharField(
  18.         label = '会議室ID',
  19.         max_length = 20,
  20.         required = True,
  21.         widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
  22.     )
  23.     # 利用者
  24.     reserve_name = forms.CharField(
  25.         label = '利用者',
  26.         max_length = 20,
  27.         required = True,
  28.         widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
  29.     )
  30.     # 開始日時
  31.     start_date_time = forms.CharField(
  32.         label = '開始日時',
  33.         max_length = 20,
  34.         required = True,
  35.         widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
  36.     )
  37.     # 終了日時
  38.     end_date_time = forms.CharField(
  39.         label = '終了日時',
  40.         max_length = 20,
  41.         required = True,
  42.         widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
  43.     )
  44.     
  45.

formにhtmlのデザイン属性のclassを追加しています

まとめ

サーバーを起動します。

  1.     
  2. python manage.py runserver
  3.     
  4.

urlを入力します。

http://127.0.0.1:8000/mrrs/

以下は完成のイメージです。

コメント

0 件のコメント:

コメントを投稿

コメントをお待ちしています。