【django】社内SNSアプリを作ってみる⑤(imageファイルの取り扱い等)【pythonメモ】

pythonLOGO

imageファイルの取り扱い

http://127.0.0.1:8000/admin/

adminに入って「add」ボタンから

http://127.0.0.1:8000/admin/boardapp/boardmodel/add/

適当な画像をアップしてみる

一見、正常に保存されているように見えるが

imageのfoodfighter_ramen.pngを選ぼうとすると

そういうの無いけど消しちゃった?って聞かれる。

 →画像が保存されていない

ので、その設定をやっていく。

models.py

settings.py

再度、http://127.0.0.1:8000/admin/boardapp/boardmodel/add/を確認する

http://127.0.0.1:8000/admin/boardapp/boardmodel/

正常のアップロードできたようです。

http://127.0.0.1:8000/admin/boardapp/boardmodel/2/change/

もう一度ファイルを触ろうとすると

エラー・・・でもこれで合っています。

なぜならdjangoでは、一個一個の画像とurlがリンクしていて画像が入っているurlを指定することでその画像を呼び出す操作が必要になる。

ただし、実務上では、pythonのコードで画像をごちゃごちゃする必要は無く、Webサーバー上、またはcssでいじれる部分なので、そういった事はしない。

これからする事は、あくまで開発環境の中だけでやる事と思っていた方が良い。

ところで、さっきアップした画像はここに格納されている。

つまり関連付けができていない。

調べてみる。(結果)

https://docs.djangoproject.com/ja/3.0/howto/static-files/

boardproject>urls.py

で、ファイルを選んでやると

http://127.0.0.1:8000/admin/boardapp/boardmodel/2/change/
http://127.0.0.1:8000/medi/tube_syouga.png

正常に表示されました。

cssの設定

signupページにCSSを適用していく

http://127.0.0.1:8000/signup/

どこに適用させていくかというと、templates > base.html の部分

まずはsignup.htmlに

を入れ込んで、imageファイルを入れ込んだようにsettings.pyに追記をする

settings.py

追記部分にstaticを定義したので、staticフォルダをmanage.pyがある階層に設置する

こんな感じ、このフォルダを作った上でurlのつなぎこみが必要になるので

urls.py

ここを参考

ここでcssをstatic内に仕込んでいく

static > style.css

適用させるのは、

https://getbootstrap.com/docs/4.5/examples/sign-in/

こんな感じ。

ソースコードを開いて

ここのsignin.cssを参考に

こいつをコピペする

その他のhtmlにcssを反映させていく

そしてF5でリロードすると

http://127.0.0.1:8000/signup/

こうなる。長くなったので次回。



 

あ、宜しければ・・・。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です