Djangoの使い方:その22019-11-13Djangoの使い方:その2raspberrypi-softブログ管理者のP.Hです!下記ブログでプロジェクトの作成をするところまで説明しました。今回は実際にコードを実装してWebアプリを作成して行きたいと思います。(djtest→webpi→models.pyファイルの編集)Viewの作成(djtest→webpi→views.pyファイルの編集)HTMLファイルの作成前の準備HTMLファイルの作成base.htmlの作成index.htmlの作成ブラウザで指定するURLの設定(djtest→webpi→urls.pyファイルの編集)データベースの再構築おおまかに説明すると以下のような流れで作成します。urls.pyの編集それではひとつひとつ作成してきましょう。(djtest→webpi→models.pyファイルの編集)まずはデータのモデルを作成します。djangoモジュールのmodels.Modelを継承したPidataクラスを作ります(pidata1~3の値をWebアプリのテーブルに表示します)。このPidataクラスのデータ構造がそのままデータベースに登録されます。migrateコマンドで、自動的にdjangoシステムが行ってくれますので非常に楽です。)models.pyを下記のように編集します。models.CharField(max_length=255)Viewの作成(djtest→webpi→views.pyファイルの編集)上記のmodels.pyで作成したデータモデルから、Webページの表示に必要なデータを抽出、生成します。そのデータを使用するhtmlファイルのパスを指定します。※htmlのパスはブラウザに入力するURLとは全く関係ありません。views.pyを下記のように編集します。先ほど作成したPiDataクラスをimportします。SQL文のような感じでデータベースからデータを取得し、pidatasという変数に格納しています。そのデータを'pidatas'という変数名で、webpi/index.htmlに渡します。htmlファイルはこの後作成します。HTMLファイルの作成前の準備HTMLファイルはアプリフォルダ(webpi)の下にtemplatesという名前のフォルダを作成し、その中に作成していきます。先ほど作成したview.pyでは、templates以下のパスを指定すればOKです。(templatesフォルダのパスはdjtest→djtest→settings.pyの中に記載があり、デフォルトでアプリフォルダの中に作成するように指定されています。)djtest→webpi→templates(新規作成)→base.html(新規作成)djtest→webpi→templates(新規作成)→webpi(新規作成)→index.html(新規作成)HTMLファイルは共通で使用するbase.html(テンプレート)をまず作成します。見た目をきれいにするbootstrapのjavascriptは、全てのページで使いますので、このbase.htmlで指定しておきます。下記のURLからbootstrapをダウンロードし、解凍します。http://getbootstrap.com/解凍すると生成されるcss、jsフォルダをdjtest→webpi→static(新規作成)に保存します。HTMLファイルの作成base.htmlの作成base.htmlファイルを新規作成し、下記のコードを記載します。※文字コードは必ずUTF-8を使用してください。</div></body></html>index.htmlの作成このbase.htmlを継承して、Webアプリのhtmlファイル(index.html)を作成することができます。書き換えたい箇所、不足箇所だけをindex.htmlに記載していきます。%}でbase.htmlの内容を上書きすることができます。index.htmlファイルを新規作成し、下記のコードを記載します。%}ブラウザで指定するURLの設定(djtest→webpi→urls.pyファイルの編集)まず、webpiフォルダにurls.pyファイルを新規作成し、下記のコードを記載します。アドレスは正規表現で指定できます。そのアドレスがブラウザに入力されると、viewファイルで設定しているhtmlファイルが表示されるしくみです。今回であれば、http://xxx.xxx.xxx.xxx:8000/webpiと指定すれば、view.pyファイルのindexメゾットで記載したtemplatesフォルダのwebpi/index.htmlが表示されます。]また、まぎらわしいですが、djtest→djtest→urls.pyに上記で作成したurls.pyを登録します。includeが必要ですので注意してください。pathは''このふたつが連結されるので、最終的にpathは'webpi/'になります。データベースの再構築models.pyでデータベースの内容を追加しているので、下記コマンドでデータベースを再構築します。データを追加した場合は、下記コマンドで毎回データベースを再構築してください。migrateまだ、データベースに値が何も入っていないので、エラーになりWebページは表示されません。長くなりましたが、今回はここまでにしたいと思います。次回は、djangoシステムからデータベースに値を入れる方法を紹介して、Webアプリを完成させたいと思います。Piの使い方、設定をわかりやすく解説。長年、ソフトウェア開発に携わっています。8はてなブログをはじめよう!raspberrypiさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。