今回はDjangoを利用してSNSサイトの構築を行っていきます。
前回のブログサイト構築ではDjangoの基本機能であるMVTの仕組みやHTTPについてなどwebサイトの基礎的な部分で実装しました。
今回のSNSサイト構築では「ユーザー認証機能」や「送信フォームについて」などの少しレベルアップした内容となっています。

前提

SNSサイトに必要な機能

①サインアップ機能
②ログイン機能
③ログアウト機能
④パスワードリセット機能
⑤トップページ(ログイン/ログアウトで表示変更)
------------------------------以下ログイン後に使える機能----------------------------------------------------------
⑥タイムライン
⑦投稿の詳細
⑧投稿編集(ログインユーザー自らの記事)
⑨返信
⑩ユーザーごとの投稿一覧

開発環境/ツール

使用言語：Python, HTML & CSS, JavaScript
ツール：Git/GitHub, Doker
エディター：VScode
OS:Windows11

環境構築

環境構築はDockerで行いました。
基本的な方法はこちらの記事をご確認ください。
今回の変更箇所は以下になります。

requirement.txt

Django==3.1

ターミナルで以下のコマンドを入力しプロジェクトを作成しましょう。

ターミナル

docker-compose web run django-admin startproject app_sns .
docker-compose up

localhost:8000でwelcomeページに接続できるはずです。
続いてsettings.pyの編集です。今回もSqLiteを用いるためDATABASEの編集は不要です。
まずはこちらの記事と同様にしましょう。

ここまで来たらアプリケーションを作成しましょう。新規ターミナルを立ち上げ以下のコマンドを入力してください。

ターミナル

docker exec -it app_sns_web_1 bash
python3 manage.py startapp user
python3 manage.py startapp timeline

今回はユーザー機能とタイムライン機能でアプリケーションを分けています。
先ずはユーザー機能から実装していきます。

完成したSNSアプリケーションについて

実装に入る前にまずは完成したSNSアプリについて見ていきましょう。

ログインしていない状態

①トップページ



②サインアップ

③パスワードリセット

登録したメールアドレスを入力して送信すると以下のページに遷移します。

メールフォルダを確認するとlocalhost:8000からメールが送られてきているのでそのURLをクリックすると以下のページにつながります。

新しいパスワードを入力しリセットすると、以下の成功画面に遷移します。

ログイン状態のとき

①ログインフォーム

②タイムライン

ユーザー名・記事内容は適当なのでご了承ください。
③投稿詳細
他のユーザーの投稿

自分の投稿

削除/更新といった機能が現れます。
④投稿編集
投稿詳細(自ページ)の削除をクリック

「削除する」をクリック

「OK」をクリックしタイムラインに遷移
⑤新規投稿
ヘッダーの新規投稿をクリックすると投稿フォームに遷移します。

内容を記入して投稿するとタイムラインに遷移します。
やってみましょう！

⑥返信
続いて返信機能です。先ほど投稿詳細ページで返信ボタンがありました。それをクリックすると返信フォームが表示されます。

適当なコメントを入力しボタンをクリックすると元の投稿詳細ページに遷移し、返信が追加されています。

⑦ユーザーごとの投稿一覧

投稿詳細画面で「(ユーザー名)の投稿一覧」ボタンをクリックすると以下のページに遷移します。

ユーザーごとの投稿が表示されました。
⑧ログアウト
ヘッダーのログアウトボタンをクリックすると以下のようになります。
ログアウト後はログイン前と同じへだーになっています。

以上が作成したアプリの全体になります。
次回からコードを載せていくのでチェックしてみてください。