プログラミング

Django Webアプリケーションの構築 デザイン要素としてbootstrap4 を使用してみる

  1. templatesとは
  2. ルーティングの設定 ([アプリケーション]/urls.pyの設定)
  3. webapps/view.pyの編集
  4. テンプレート base.html
  5. Bootstrap4 ナビゲーションのソース
  6. テンプレート listdisplay.html
  7. 参考:css リスト表示 display:flex フレックスボックス使用
  8. 参考:jquery動きの部分
  9. 参考:今回のサンプルページ
  10. まとめ

templatesとは

HTML等の静的な部分は テンプレート としてHTMLファイルに書記載します。
ホームページには、ホーム、一覧、詳細、入力用等々いくつかのページで成り立っています。
そこでヘッダー、フッター、サイドバー等々の部分は各ページは共有しています。
各ページには基本ページを作成しそれを各ページで共有します。includeファイルということですね。
設置場所はプロジェクト内に作成したアプリケーション内のフォルダーに作成します。
具体的な使用は[アプリケーションフォルダー」/views.py 内で rendar関数を用いて実現します。(後述)

ルーティングの設定 ([アプリケーション]/urls.pyの設定)

メニューに戻る

/webapps/view.pyの編集

view.py内の表示用関数 def listdisplay(request): を定義しますが、 HttpResposeを返す方法として、render関数を用います。 rennda関数は request, テンプレートパスを渡すとそのテンプレートを使用したレンダリング結果をHttpResponseとして返してくれます

メニューに戻る

テンプレート base.html

Bootstrap4を用いてデザインをしてみました。
また、データは前回の投稿で紹介した本ブログのタイトル等々を入力したデータベース(mysql)を利用しています。
一覧は画像、タイトル、投稿日、URLです。
参考:
以前の投稿(マイグレーション)
bootstrap4 GettingStart
bootstrap4 チートシート

メニューに戻る

参考:
Bootstrap4 Navbar
列行を一次元に並べて表示する CSS 「FlexBox」 jQuery + Ajax で挙動を確認する。

メニューに戻る

テンプレート listdisplay.html

Djangoのテンプレートエンジンが標準で付属しています。
Python製のテンプレートエンジン jinja2 のサブセット?とのことです。
templates/listdisplay.html では view.py で定義しているrender関数の引数で投稿されたデータベースデータオブジェクト linksが有効になっています。それを展開して一覧表示する仕組みとなっています。 使い方詳細はDjangoドキュメント クイックインストールガイドを参照してください。 

メニューに戻る

css リスト表示 display:flex フレックスボックス使用

メニューに戻る

参考:jquery動きの部分

メニューに戻る

まとめ

アプリケーションとしては、一覧表示だけでしたが、今後データ入力、詳細ページ、コメント等々を含め「SNSアプリケーション」として進めていきたいと思っています。
また、一連のソースコードも記述しましたが、実際のコーディングはローカルの仮想環境上で構築、まとめてFTPにより直接デプロイして公開用に手直しをしています。
公開は Nginxで行っていますがプロジェクト自体も system.d で管理しています。
つまり手作業で nginxのリスタート、Djangoプロジェクト自体もリスタート等々手作業で作業しました。
Django Webアプリケーションシリーズ参照してください。
今後別な形で「git」を用いたデプロイもチャレンジしたいと思っています

メニューに戻る

最近の記事

  1. EC-CUBE 4.0 インストール
  1. サーバー環境

    macOS Mojaveにデフォルトの Apache、PHPを利用してみる
  2. EC-CUBE 4.0 インストール

    サーバー環境

    EC-CUBE4 を CentOS7、LAMP環境整備及インストール
  3. サーバー環境

    centos7 に Node Version Manager(nvm)で nod…
  4. プログラミング

    MySQLによる 条件分岐とサブクエリー
  5. Web・デザイン

    美しい文字 「Google Web Fonts」「Adobe Web Font…
PAGE TOP