基板設計記録WEBアプリその33
views.pyで入力フォーム1から3までを作成する前に
色々変更点がある
それは、入力フォーム画面のイメージ図を改良した事
なぜなら基板を設計している段階で、
最低でも5種類の部品で構成しているものが多い
最大25種類分の部品情報がある場合も考えられる
大学でのサークル活動時に使用していた基板が
そうだったから
なので、改良したイメージ図を載せる
またそれに伴い
入力フォーム1から3までのviews.pyの内容も変わってくる
例として入力フォーム1を出す
・クラスベースビューを使い、新規登録フォーム1を作る
・pdr_dataテーブルを使う
・フォーム1の入力項目は、
"設計作成日", "基板名", "基板英名", "基板概要", "縦の外形", "横の外形",
"電源供給方法"の計7つを入れる
・"PDR_data_form.html"と連携する
以上を踏まえてコード化すると
#入力フォーム1画面 class PDRCreateView(CreateView): #pdr_dataテーブルと連携する model = models.pdr_data #入力項目を"設計作成日", "基板名", "基板英名", "基板概要", "縦の外形", "横の外形", #"電源供給方法"に設定する fields = ("design_day", "board_name", "substrate_english_name", "board_overview", "verical_outline", "horizonal_outline", "power_supply_method") #テンプレートファイルと連携する template_name = "PDR_data_form.html"
という風に書けた
次回は、入力フォーム2と3を作り
余裕があれば削除画面と詳細画面を作る予定
基板設計記録WEBアプリその32
今の問題点として
views.pyに書かれている内容と自分で設定したhtmlの名前が
一致していないのが判明したので、これを修正していく
あと"リダイレクト"や"redirect"とかの用語を理解してないので、
これも併せて学んでいく
まず一覧画面から作り込んでいく
PDR_dataテーブルと連携させる
テンプレートファイルの"PDR_data_list.html"と連携する
またレコード情報をテンプレートに渡すオブジェクト名を
"PDR_data_list"とする
以上の3つを踏まえたコードが以下のようになる
#修正版のviews.py #一覧画面 class PDRList(ListView): #PDR_dataテーブルと連携 model = models.PDR_data #レコード情報をテンプレートに渡すオブジェクト context_ojbect_name ="PDR_data_list" #テンプレートファイル連携 template_name = "PDR_data_list.html"
このように組んでいく
次回は、入力フォーム1から3までを作成する
基板設計記録WEBアプリその31
ちゃんとバリデーションを出来ているか確認する前に
webページ表示設定を行うviews.pyの変更をする
views.pyの役割は、
ユーザーからhttpリクエストを受けてから
それに応じたHTML形式のレスポンスを返す事
改めてPDRに関する画面をまとめると
- PDR_data_list.htmlが、PDR一覧画面のデザインで、ListViewと連携する
- PDR_data_detail.htmlが、PDR詳細画面のデザインで、DetailViewと連携する
- PDR_data_update.htmlが、PDR更新画面のデザインで、UpdateViewと連携する
- PDR_data_delete.htmlが、PDR削除画面のデザインで、DeleteViewと連携する
- PDR_data_form.htmlが、PDR登録画面のデザインで、CreateViewと連携する
- PDR_data_form2.htmlが、PDR登録画面のデザインで、CreateViewと連携する
- PDR_data_form3.htmlが、PDR登録画面のデザインで、CreateViewと連携する
- PDR_data_done.htmlが、PDR登録完了のデザイン連携しない
- PDR_data_contest_check.htmlが、PDR登録内容確認のデザイン 連携しない
になっているが、
7-13日時点のviews.pyの中身(一部抜粋して載せる)
#一覧画面 class Pdr_dataList(ListView): #Pdr_dataテーブル連携 model = models.Pdr_data #レコード情報をテンプレートに渡すオブジェクト context_object_name = "Pdr_data_list" #テンプレートファイル連携 template_name = "PDR_data_form_list.html" #詳細画面 class Pdr_dataDetail(DetailView): #Pdr_dataテーブル連携 model = models.Pdr_data #レコード情報をテンプレートに渡すオブジェクト context_object_name = "Pdr_data_detail" #テンプレートファイル連携 template_name = "PDR_data_detail.html" #Create画面 class Pdr_dataCreateView(CreateView): #Pdr_dataテーブル連携 model = models.Pdr_data #入力項目定義 fields = ("board_name","industory","location") #テンプレートファイル連携 template_name = "PDR_data_form.html" #更新後のリダイレクト先 def get_success_url(self): return reverse('pdr_app:detail', kwargs={'pk': self.object.pk}) #Create画面2 class Pdr_dataCreateView2(CreateView): #Pdr_dataテーブル連携 model = models.Pdr_data #入力項目定義 fields = ("name","age","company") #テンプレートファイル連携 template_name = "PDR_data2_form.html" #作成後のリダイレクト先 success_url = reverse_lazy("pdr_app:list") #Create画面3 class Pdr_dataCreateView3(CreateView): #Pdr_dataテーブル連携 model = models.Pdr_data #入力項目定義 fields = ("name","age","company") #テンプレートファイル連携 template_name = "PDR_data3_form.html" #作成後のリダイレクト先 success_url = reverse_lazy("pdr_app:list") #Update画面 class Pdr_dataUpdateView(UpdateView): #入力項目定義 fields = ("board_name","industory","location") #Pdr_dataテーブル連携 model = models.Pdr_data #テンプレートファイル連携 template_name = "PDR_data_form.html" #更新後のリダイレクト先 def get_success_url(self): return reverse('pdr_app:detail', kwargs={'pk': self.object.pk}) #更新画面 class Pdr_dataUpdateView(UpdateView): #入力項目定義 fields = ("boara_name","age") #Pdr_dataテーブル連携 model = models.Pdr_data #テンプレートファイル連携 template_name = "PDR_data_form.html" #更新後のリダイレクト先 success_url = reverse_lazy("pdr_app:list") #削除画面 class Pdr_dataDeleteView(DeleteView): #Pdr_dataテーブル連携 model = models.Pdr_data #テンプレートファイル連携 template_name = "PDR_data_delete.html" #削除後のリダイレクト先 success_url = reverse_lazy("pdr_app:list") #create_done関数 #データ登録が完了した際に呼び出される関数で、最終的に #データ登録完了画面(PDR_data_done.html)が呼び出される def create_done(request, **kwargs): contents = {} for key, val in kwargs.items(): contents[key] = val return render(request, 'PDR_data_done.html',{ 'contents': contents, }) def image_index(request): params = { 'title':'画像のアップロード', 'upload_form':UploadForm(), 'id': None, } if (request.method == 'POST'): form = UploadForm(request.POST, request.FILES) if form.is_valid(): upload_image = form.save() params["id"] = upload_image.id return render(request, 'pdr_app/PDR_data_form3.html', params)
紙のノートにまとめている時に気づいた・・・
目標とviewの中身がチグハグでHTML名もバラバラになっている
次回は、ちゃんと合うように
views.pyを修正する所から始める
基板設計記録WEBアプリその30
画像のバリデーション(入力チェックの事)を実装する
コードはforms.pyに書く
Python3系だとValidationErrorの書き方が少し変更されている
raise forms.ValidationError
と書かないとデバッグ出来ない
今回は
・jpegやpng以外のものはアップロード出来ない
・25MB以上の画像ファイルはアップロード出来ない
というバリデーションを設ける
#forms.py class UploadImgForm(forms.Form): avatar = forms.ImageField(required=True) def Img_avatar(self): ''' 1.fileformat 2.filesize ''' avatar = self.cleaned_data['avatar'] if not avatar: raise forms.ValidationError('投稿されたデータが画像ではありません!') IMG_SIZE = 25*1000*1000 if avatar.size > IMG_SIZE: raise forms.ValidationError( '画像サイズが大きすぎます。%sMBより小さいサイズの画像を入れてください。' \ % str(IMG_SIZE//1000//1000) ) return avatar
次回は、ちゃんとバリデーションを出来ているか確認する
基板設計記録WEBアプリその28
自作のjQueryを作成していく
第一段階：部品候補を追加する」ボタンを押すと以下の内容が増える
jQueryを作成
部品候補名や候補の仕様、メーカー名、
販売コード、価格を増やす
上記のHTMLのnameを以下のようにした
$(document).ready(function () { 'use strict'; $('.repeater').repeater({ defaultValues: { 'Candidate part name': 'LED1', //部品候補名 'candidate specification': '', //候補の仕様 'Manufacturer Name': '', //メーカー名 'mail-order code': '', //通販コード }, show:function(){ $(this).slideDown(); }, hide:function(deleteElement){ if(confirm('削除しますよー')){ $(this).slideup(deleteElement); } } }); });
またカレンダーと時間を入力出来るjQueryプラグインを見つけた
「DateTimePicker」が使えそう
次回は、「DateTimePicker」を使ったものを作る
基板設計記録WEBアプリその27
部品候補の情報は
同じ内容のものが多いので
入力フォームを追加・削除出来るjQueryプラグイン「Repeater」を使う
このプラグインを使うと同じ内容の入力フォーム
(候補の仕様やメーカー名、販売コードとか)を
ページを"更新せずに"追加や削除が出来る
このプラグインの特徴は、
様々なinput要素(textやtextarea、checkboxなど)を
グループにまとめて、追加・削除出来る事
ただjQueryの基本フォーマットと引数渡しの方法を知らないので
まずは上記の2つを学んでいく
(function($) { $.fn.独自名称1 = function(options) { // パラメータデフォルト設定 var 独自名称2 = { } // パラメータを配列化 var 独自名称3 = $.extend(独自名称2, options); return this; } })(jQuery);
$("#sample").独自名称1();
このように書くとプラグインを呼び出せる
これを実現する為に「$.fn.独自名称1」という記述をする。
プラグイン名称の設定はこのような感じ。
2つ目：引数渡しの方法
$("#sample").独自名称1({ color: "#ff0000", size: 300, loop: true });
プラグインの受け取り方は以下のようになる
$.fn.独自名称1 = function(options) { // パラメータデフォルト設定 var 独自名称2 = { color: "#00ff00", size: 600, loop: false } // パラメータを配列化 var 独自名称3 = $.extend(独自名称2, options); }
コード先頭の$.fn.独自名称1 = function(options)の箇所で
optionsの部分が呼び出し側から渡される引数になる
これに習って次回は自作のjQueryを作成していく
