ryotankの備考録日記

趣味の電子工作についての備考録などなど

電子工作作業報告書その58

実際にモデル作成models.pyを作っていく

モデル作成にはモデル定義書が必要になる
まずはそのモデル定義書を作成する事になる

models.pyを作る上で必要となる用語がいくつか出てくる
・null:データベース上でnullを許容するかどうか
・blank:ユーザーが入力項目として必須とするか
・IDの自動生成:idはdjangoで自動生成される。
・外部キー:必要であれば付ける

またER図を作成し、テーブル同士の関係性が分かるようにしたい

ER図を作る時のコツは、テーブルの項目を列記する

ER図_テーブルの項目を列記する

列記したあとに、主キーと外部キーを決める。

ewrnのER図-主キーなどを決める

最後に
テーブル同士を線でつなぐ

ewrnのER図-テーブル同士を線でつなぐ

まずは、ER図で関係性を可視化する

これがEWRNのER図

電子工作作業報告書その57

ewrn2のテーブルの書き出し作業から正規化作業まで


まずはテーブルの書き出しから

テーブルの書き出し


主キーである「作業名」「作業日」に注目してみる

ewrn2テーブルの第2正規化に分けるには


それが出来れば第2正規化で重複していたデータの分離をする

ewrn2テーブルの第2正規化したテーブル

そうすると作業情報、登録情報、道具情報テーブルに分けることが出来る


第3正規化で主キー「作業日」「作業日」以外に関数従属する項目を切り出す

ewrn2テーブルの第3正規化

最終的に作業情報、登録情報、道具情報、写真情報の4つのテーブルになった


上記の4つの表からキーを決める

第3正規化からキーを決める

データの種類を考える

データの種類を考える

種類が決まったらデータの大きさ(桁数)を決め

データの大きさを考える

最後にデータ型を決定する これで正規化作業は終わり

ewrn2テーブルのデータ型を決める

正規化まで出来たので、次回は、実際にモデル作成models.pyを作っていく
あとヒヤリハットのアプリは単独のアプリにする
理由としては、本来ヒヤリハットはハットと思われる出来事を記録するため

電子工作作業報告書その56

登録内容確認ページで
1から10までの項目を本来の入力したデータを表示させる様に
コードを変えていく予定だったが、

モデルの作成が必要だと判明したので

データベースの正規化をEWRN2用に書き換えて

そこからモデル定義書を作成し、それをもとにモデル作成をする

モデルの項目としては以下のような内容に
・作業名
・分類
・気付いた事
・作業内容
・備考
・作業日
・登録日
・状況写真
・使用した工具
・使用したソフト
・使用した部品



次回は、実際に上記のテーブルの書き出しから正規化までを作成する

電子工作ヒヤリハットのWEBアプリ作成その1

作成経緯として昨今のヒヤリハット
原因で死亡事故や事故になったケースが多いので、
電子工作でもこれが原因で回路が動かないや
プログラムが動作しないなど起きそうな事が起こりそうなので作成しようと思った

しかし、現在開発途中のEWRN(電子工作作業報告書WEBアプリ)に
新しく組み込むか単独でWEBアプリにするか迷う

組み込むならばデータベースから組み直す必要が
出てくる

悩みどころではあるが。。どうするかな

電子工作作業報告書その55

登録内容確認ページについて紹介する


これは、データ入力1から3までに入力した各データに
間違いが無いかを確認したがために作成したページ

見た目として表形式で表示させる

CSS無しverだとこんな感じに

登録内容確認ページCSS調整無し


CSSで調整するとこんな感じになる

登録内容確認CSS調整あり
/* EWRN登録内容確認画面のCSS 2022-9-2作成
ボタンは作業日のinputより左下に配置 */


/* "登録しますか"のテキスト位置調整 */
.data_text {
    position: absolute;
    left: 250px;
    top: 20px;
    transform: translateX(-25%);
}


/* 詳細表の位置調整 */
.details_table {
    width: 20%;  /* 横幅 */
    margin: 115px auto; /* 上下115px 左右auto */
}


/* "報告する"ボタンの位置調整 */
.btn {
    position: relative;
    left: 1300px;
    top: 130px;
}

/* "新規登録へ戻る"ボタンの位置調整 */
.form1_backbtn {
    position: relative;
    left: 430px;
    top: 130px;
}


/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da;
}

次回は、1から10までの項目を本来の入力したデータを表示させる
ようにコードを変えていく

電子工作作業報告書その54


今回は、フォーム2と3のCSSが完成したので、
適用後の見た目とCSSのコードを載せる




/* EWRN入力画面2のCSS 2022-8-19作成
ボタンは作業日のinputより左下に配置

*/

/* プログレスバー */
.js-progress-bar2 {
    position: absolute;
    width: 100%;  /* 横幅 */
    z-index: 1;
    left:50px;
    
}

/* 気付いた事のテキスト */
.ton_t {
    position: absolute;
    left: 15%;
    transform: translateX(-25%);
}

/* 気付いた事の複数行フォーム */
.textarea_b5 {
    position: relative;
    left: 50%;
    transform: translateX(-25%);
    border-color: #da0622;
    outline: none;
}

/* 状況写真のテキスト */
.sp_t {
    position: relative;
    left: 10%;
    top: 20px;

}

/* 作業日のテキスト */
.wk_t {
    position: relative;
    left: 270px;
    top: 70px;
}

.workday {
    position: relative;
    left:150px;
}

/* "入力欄クリア"ボタンの位置調整*/
.clearbtn {
    position: relative;
    left: 130px;
    top: 130px;
}

/* "入力3へ"ボタンの位置調整*/
.form3_nextbtn {
    position: relative;
    left: 430px;
    top: 130px;
    
}

/* "一覧へ戻る"ボタンの位置調整*/
.listbtn {
    position: relative;
    left: 280px;
    top: 130px;
}


/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da;
}


フォーム3の画面CSS

/* EWRN入力画面3のCSS 2022-9-1作成
ボタンは作業日のinputより左下に配置
*/

/* プログレスバー */
.js-progress-bar3 {
    position: absolute;
    width: 100%;  /* 横幅 */
    z-index: 1;
    left:50px;
    
}

/* 使用した工具のテキスト */
.used_tools {
    width: 1400px;
    text-align: center;
}

/* 使用した工具の複数行フォーム */
.textarea_b6 {
    text-align: center;
}

/* 工具入力欄にカーソルがある時だけ色を変える */
.textarea_b6:focus { 
    background-color: #da0622;
    border: 2px solid #26af11;
}

/* */
.used_software{
    width: 1400px;
    text-align: center;
}

/* 使用したソフトの複数行入力フォーム */
.textarea_b7 {
    text-align: center;
}

/* */
.used_parts{
    width: 1400px;
    text-align: center;
}

/* 使用した部品の複数行入力フォーム */
.textarea_b8 {
    text-align: center;
}

/* "入力欄クリア"ボタンの位置調整*/
.clearbtn3{
    position: relative;
    left: 40px;
    
}

/* "内容確認"ボタンの位置調整*/
.reg_detail_nextbtn {
    position: relative;
    left: 1070px;
    
}

/* "一覧へ戻る"ボタンの位置調整 */
.listbtn {
    position: relative;
    left: 380px;
    
}

/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da; /* 紫色 */
}
EWRNアプリ_データ入力画面2_CSS調整済ver
EWRNアプリ_データ入力画面3_CSS調整有りver

以前よりだいぶ見栄えが良くなった

次回は、登録内容確認ページについて紹介する

余談だが、回路CADのライブラリパーツを確認するのに
わざわざ、回路CADを開いてライブラリパーツを確認してというのが
面倒なので専用データベースを作りたい GUIを検討している