Python
会議室予約システム
Djangoフレームワークを使った会議室予約システムの作成(フロント)
16:58
今回はPythonのWebアプリケーション用フレームワークのDjangoを使った会議室予約システム作成の続きになります。
前回までの内容は以下を参照してください。
Djangoフレームワークを使った会議室予約システムの作成
フロントデザイン修正
フロントのデザインを修正します。
templates/resurv.htmlコーディング
templates/resurv.htmlを修正します。
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="utf-8">
<title>会議室予約システム</title>
<!-- google fontsを使用するためgoogleからフォントのcssを取得します。-->
<link href="https://fonts.googleapis.com/css?family=Courgette|Noto+Serif+JP&display=swap" rel="stylesheet">
<!-- css のスタイルを記述します。 今後cssは外部ファイル化を行います。 start -->
<style>
/** CSS はhtmlのtag class id の有効範囲が大きいものから記載します。 */
/** ************************************************** */
/** tag */
/** ************************************************** */
/** h1タグのスタイルです */
h1 {
font-size : 40px; /* h1タイトルのフォントサイズです */
font-family: 'Courgette', cursive; /* googleフォントです */
text-align : center; /* 文字の中央よせです */
}
/** ************************************************** */
/** class */
/** ************************************************** */
/** wrapper のスタイルです */
/** bodyタグでもいいですが wrapperを使うことで全体的にpaddingやmarginの調整をとりやすくします */
.wrapper {
max-width : 1200px; /* 最大横幅です */
min-width : 700px; /* 最小横幅です レスポンシブ対応ではないです */
margin : 0 auto; /* 外側を操作します。 中央よせをします 0が上下 autoが左右 */
padding : 40px; /* 内側を操作します。 上下左右で内側に40pxの余白を付けます */
}
/** reserveのwrapperを使うことでreserveにpaddingやmarginの調整をとりやすくします */
.reserve_wrapper {
padding : 50px; /* 内側を操作します。 上下 50px 左右200px で内側に余白を付けます */
}
/** -------------------------------------------------- */
/** 入力フォーム */
/** -------------------------------------------------- */
/** reserveのinput部分で使用します */
.reserve_input {
border-radius : 12px; /* 枠に丸みを付けます */
box-sizing : border-box;
border : 1px solid #465DAA;
/* 枠線を表示します */
padding : 50px; /* 内側を操作します。 上下左右 50px で内側に余白を付けます */
margin : 50px 200px; /* 外側を操作します。 上下 50px 左右200px で外側に余白を付けます */
}
/** reserveのinput部分で入力の部品を囲みます */
.reserve_input_div {
position : relative; /* reserve_input からみて相対的な位置を設定します。 positionのデフォルトは staticです */
margin : 30px 3%; /* 外側を操作します。 上下 30px 左右3% で外側に余白を付けます */
}
/** input部分で入力の部品の中の実際の部品textを選択します */
.reserve_input_div input[type='text'] {
font : 16px/24px 'Noto Serif JP', serif;
/* font-size/line-height googleフォントです */
box-sizing : border-box; /* ボックスサイズの算出方法を指定します パディングとボーダーを幅と高さに含めています */
width : 100%; /* 横幅を100%にします。*/
letter-spacing : 1px; /* 文字の間隔を指定します。*/
padding-left : 6em; /* 内側を操作します。 左 6em(font-sizeに合わせる) で内側に余白を付けます */
}
/** input部分で入力の部品の中の実際の部品textにfocusが当たったとき */
.reserve_input_div input[type='text']:focus {
outline : none; /* focus（入力ができるようになるとき）が当たったとき 枠を表示しません */
}
/** 部品のclass です 今回はmrrs/form.pyに記載しています */
.reserve_type_text {
padding : 4px 0; /* 内側を操作します。 上下 4px 左右0 で内側に余白を付けます で内側に余白を付けます */
border : 0; /* bordrを表示しない */
border-bottom: 1px solid #1b2538; /* 下線は表示する */
background-color: transparent; /* 背景を透過 */
}
/** reserve_type_text に関連する focus_lineのクラスを指定します */
.reserve_type_text ~ .focus_line {
position : absolute; /* reserve_type_text からみて絶対的な位置を設定します。 positionのデフォルトは staticです */
bottom : 0; /* 下から0 */
left : 0; /* 左から0 */
width : 0; /* 横幅 0 */
height : 2px; /* 高さ 2px */
transition : 0.4s; /* 要素の2つの状態間の変化を0.4秒で操作します */
background-color: #da3c41; /* 下線を赤にします */
}
/** reserve_type_textのforcusに関連する focus_lineのクラスを指定します */
.reserve_type_text:focus ~ .focus_line,
.reserve_input_div.reserve_type_text ~ .focus_line {
width : 100%; /* 横幅 100%にします */
transition : 0.4s; /* 要素の2つの状態間の変化を0.4秒で操作します */
}
/** reserve_type_text に関連する labelを指定します */
.reserve_type_text ~ label {
position : absolute; /* reserve_type_text からみて絶対的な位置を設定します。 positionのデフォルトは staticです */
z-index : -1; /* labelの重なりz軸を 下にするのかな */
top : 4px; /* 上から4px */
left : 0; /* 左から0 */
width : 100%; /* 横幅 100%にします */
transition : 0.3s; /* 要素の2つの状態間の変化を0.5秒で操作します */
letter-spacing: 0.5px; /* 文字の間隔を指定します。*/
color : #aaaaaa; /* ラベルの文字の色を灰色っぽいいろにします */
}
/** reserve_type_textのforcusに関連する labelのクラスを指定します */
.reserve_type_text:focus ~ label,
.reserve_input_div.reserve_type_text ~ label {
font-size : 12px; /* 文字サイズを小さくします */
top : -16px; /* 文字位置を上にします テキストの中から上に移動 */
transition : 0.3s; /* 要素の2つの状態間の変化を0.4秒で操作します */
color : #da3c41; /* 赤文字 */
}
/** reserve_input_div_button 登録ボタンで使用します */
.reserve_input_div_button {
text-align : center; /* 文字を中央に寄せます */
margin : 10px auto; /* divを中央に寄せます */
}
/** submit_insert 登録ボタンのデザインです */
.submit_insert {
position : relative; /* reserve_input_div_button からみて相対的な位置を設定します。 positionのデフォルトは staticです */
color : #fff; /* 文字色白 */
width : 120px; /* 横幅 120px */
height : 50px; /* 高さ 50px */
line-height: 50px; /* 高さ 50px */
border-radius: 12px; /* 枠に丸みを付けます */
text-align : center; /* 文字を中央に寄せます */
font-family: 'Noto Serif JP', serif; /* googleフォントです */
font-size : 16px; /* 文字のサイズです */
background-color: #465DAA; /* ボタンの背景色です */
box-shadow : 0 1px 1px rgba(0, 0, 0, 0.28);
/* ボックスの影を付けます */
}
/** -------------------------------------------------- */
/** リスト */
/** -------------------------------------------------- */
/** reserveのlist部分で使用します */
.reserve_list {
display : grid; /* gridを使います */
border-radius : 12px; /* 枠に丸みを付けます */
position : relative; /* reserve_input_div_button からみて相対的な位置を設定します。 positionのデフォルトは staticです */
box-sizing : border-box; /* ボックスサイズの算出方法を指定します パディングとボーダーを幅と高さに含めています */
border : 1px solid rgba(70,93,170,1);
/* 枠を付けます */
}
/** reserveのlist部分の行で使用します */
.reserve_list_row {
display : grid; /* gridを使います */
grid-template-columns : 150px 1fr; /* 150px 1 fr*/
background-color : #fff; /* 文字色 */
border-top : 1px solid rgba(70,93,170,1);
/* 枠を付けます */
}
/** グリッドのヘッダー部分 */
.reserve_list_row-houre {
color : #fff; /* 文字色 */
background-color: #465DAA;
/* 背景色 */
border-bottom : 1px solid rgba(0, 0, 0, 0.1);
/* 枠線 */
grid-template-columns : 150px repeat(24, 1fr);
/* 150px 1frで24時間の枠を作成 */
}
/** グリッドの最初部分 */
.reserve_list_row-houre .reserve_list_row-first {
border-top : 0; /* 上線 */
background-color : #465DAA; /* 背景色 */
}
/** グリッドの最初部分 のspan */
.reserve_list_row-houre span {
text-align : center; /* 文字中央よせ */
font-size : 12px; /* 文字サイズ */
align-self : center; /* 中央配置 *
font-weight: bold; /* 文字太さ*/
padding : 20px 0; /* 内側を操作します。 上下20px 左右0 で内側に余白を付けます */
}
/** グリッドのライン部分 */
.reserve_list_row-lines {
position : absolute; /* reserve_type_text からみて絶対的な位置を設定します。 positionのデフォルトは staticです */
height : 100%; /* 高さ100% */
width : 100%; /* 横幅100% */
background-color : transparent; /* 背景色透過 */
grid-template-columns : 150px repeat(24, 1fr);
/* 150px 1frで24時間の枠を作成 */
}
/** グリッドのライン部分 のspan */
.reserve_list_row-lines span {
display : block; /* ブロック要素にします */
border-right : 1px solid rgba(0, 0, 0, 0.1);
/* 左枠線 */
}
/** グリッドのライン */
.reserve_list_row-first {
background-color : #fff; /* 背景色 白 */
border-width : 1px 0 0 0; /* 線の太さ 上*/
border-color : rgba(0, 0, 0, 0.1); /* 線の色 */
border-style : solid; /* 実践 */
padding : 15px 0; /* 内側を操作します。 上下左右 15px で内側に余白を付けます */
font-size : 12px; /* 文字のサイズ */
font-weight: bold; /* 太文字 */
text-align : center; /* 中央寄せ */
}
/** 文字テキスト */
.reserve_text {
text-align : center; /* 中央寄せ */
font-family: 'Noto Serif JP', serif; /* googleフォントです */
}
/** 文字テキスト */
.reserve_list_row-bars {
list-style : none; /* マーカーを外す */
display : grid; /* gridを使います */
padding : 9px 0; /* 内側を操作します。 上下左右 15px で内側に余白を付けます */
margin : 0; /* 外側を操作します。 上下左右 0px で内側に余白を付けます */
grid-template-columns: repeat(24, 1fr);
/* 150px 1frで24時間の枠を作成 */
grid-gap : 8px 0; /* グリッドの間の線 */
border-top : 1px solid rgba(221, 221, 221, 0.8);
/* 上線 */
text-align : center; /* 文字の中央よせ */
}
/** ユーザー名 */
.user_name {
font-family: 'Noto Serif JP', serif; /* googleフォントです */
font-size : 12px; /* 文字のサイズ */
color : #fff; /* 文字色 白 */
}
</style>
</head>
<body>
<div class="wrapper"><!-- wrapper start -->
<header>
<h1>Meeting room reservation system</h1>
</header>
<article>
<!-- 入力フォームと送信ボタンは formタグで囲み postメソッドで送信する -->
<form action="" method="POST">
<!--POSTを行う際に必要 -->
{% csrf_token %}
<div class="reserve_wrapper"><!-- reserve_wrapper start -->
<!-- -------------------------------------------------- -->
<!-- 入力フォーム -->
<!-- -------------------------------------------------- -->
<div class="reserve_input"><!-- reserve_input start -->
<!-- 予約ID -->
<div class="reserve_input_div">
{{ form.reserve_id }}
<label>{{ form.reserve_id.label }}</label>
<span class="focus_line"></span>
</div>
<!-- 会議室ID -->
<div class="reserve_input_div">
{{ form.room_id }}
<label>{{ form.room_id.label }}</label>
<span class="focus_line"></span>
</div>
<!-- 利用者 -->
<div class="reserve_input_div">
{{ form.reserve_name }}
<label>{{ form.reserve_name.label }}</label>
<span class="focus_line"></span>
</div>
<!-- 開始日時 -->
<div class="reserve_input_div">
{{ form.start_date_time }}
<label>{{ form.start_date_time.label }}</label>
<span class="focus_line"></span>
</div>
<!-- 終了日時 -->
<div class="reserve_input_div">
{{ form.end_date_time }}
<label>{{ form.end_date_time.label }}</label>
<span class="focus_line"></span>
</div>
<div class="reserve_input_div_button">
<input type="submit" class="submit_insert" value="登 録">
</div>
</div><!-- reserve_input end -->
<!-- -------------------------------------------------- -->
<!-- 入力 リスト -->
<!-- -------------------------------------------------- -->
<div class="reserve_list"><!-- reserve_list start -->
<div class="reserve_list_row reserve_list_row-houre">
<!-- 24時間の表記 -->
<div class="reserve_list_row-first"></div>
{% for houre in ''|center:24 %}
<span>{{forloop.counter}}</span>
{% endfor %}
</div>
<!-- 縦線の表記 -->
<div class="reserve_list_row reserve_list_row-lines">
{% for count in ''|center:24 %}
<span></span>
{% endfor %}
</div>
<!-- 会議室の内容 -->
{% for reserv in reserve_data %}
<div class="reserve_list_row">
<div class="reserve_list_row-first">
<div class="reserve_text">会議室{{reserv.room_id}}：予約[{{reserv.id}}]</div>
</div>
<ul class="reserve_list_row-bars">
<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>
</ul>
</div>
{% endfor %}
</div>
</div><!-- reserve_list end -->
</div><!-- reserve_wrapper end -->
</form>
</article>
<footer></footer>
</div><!-- wrapper end -->
</body>
</html>
mrrs/forms.pyコーディング
フロントのデザインを修正します。
from django import forms
class reserve_room(forms.Form):
"""
reserve_roomのフォーム.
"""
# 予約ID
reserve_id = forms.CharField(
label = 'ID',
max_length = 20,
required = True,
widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
)
# 会議室ID
room_id = forms.CharField(
label = '会議室ID',
max_length = 20,
required = True,
widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
)
# 利用者
reserve_name = forms.CharField(
label = '利用者',
max_length = 20,
required = True,
widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
)
# 開始日時
start_date_time = forms.CharField(
label = '開始日時',
max_length = 20,
required = True,
widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
)
# 終了日時
end_date_time = forms.CharField(
label = '終了日時',
max_length = 20,
required = True,
widget = forms.TextInput(attrs={'class' : 'reserve_type_text'})
)
formにhtmlのデザイン属性のclassを追加しています
まとめ
サーバーを起動します。
python manage.py runserver
urlを入力します。
http://127.0.0.1:8000/mrrs/
以下は完成のイメージです。
コメント
0 件のコメント:
コメントを投稿
コメントをお待ちしています。