今回はDjangoを利用してSNSサイトの構築を行っていきます。
前回のブログサイト構築ではDjangoの基本機能であるMVTの仕組みやHTTPについてなどwebサイトの基礎的な部分で実装しました。
今回のSNSサイト構築では「ユーザー認証機能」や「送信フォームについて」などの少しレベルアップした内容となっています。
前提
SNSサイトに必要な機能
①サインアップ機能
②ログイン機能
③ログアウト機能
④パスワードリセット機能
⑤トップページ(ログイン/ログアウトで表示変更)
------------------------------以下ログイン後に使える機能----------------------------------------------------------
⑥タイムライン
⑦投稿の詳細
⑧投稿編集(ログインユーザー自らの記事)
⑨返信
⑩ユーザーごとの投稿一覧
開発環境/ツール
使用言語：Python, HTML & CSS, JavaScript
ツール：Git/GitHub, Doker
エディター：VScode
OS:Windows11
環境構築
環境構築はDockerで行いました。
基本的な方法はこちらの記事をご確認ください。
今回の変更箇所は以下になります。
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」をクリックしタイムラインに遷移
⑤新規投稿
ヘッダーの新規投稿をクリックすると投稿フォームに遷移します。
内容を記入して投稿するとタイムラインに遷移します。
やってみましょう！
⑥返信
続いて返信機能です。先ほど投稿詳細ページで返信ボタンがありました。それをクリックすると返信フォームが表示されます。
適当なコメントを入力しボタンをクリックすると元の投稿詳細ページに遷移し、返信が追加されています。
⑦ユーザーごとの投稿一覧
投稿詳細画面で「(ユーザー名)の投稿一覧」ボタンをクリックすると以下のページに遷移します。
ユーザーごとの投稿が表示されました。
⑧ログアウト
ヘッダーのログアウトボタンをクリックすると以下のようになります。
ログアウト後はログイン前と同じへだーになっています。
以上が作成したアプリの全体になります。
次回からコードを載せていくのでチェックしてみてください。