プログラミング

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. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. プログラミング

    Django Webアプリケーションの構築 デザイン要素としてbootstrap…
  2. プログラミング

    MySQLによる 条件分岐とサブクエリー
  3. プログラミング

    WordPressで jqueryプラグイン Qrcodeを表示する
  4. Web・デザイン

    JavaScriptのアニメーションライブラリ AniJS
  5. サーバー環境

    ubuntu 20.04 nginx php postgreSQL 12.5 W…
PAGE TOP