Djangoで社会的なメディアウェブサイトを構築してください

したがって、4番目の部分では、すべてのURL、ビュー、モデル、フォームを定義し、管理パネルでモデルを登録したように、フィードアプリケーションのすべてのバックエンド部分を定義しました.
だから、今5番目の部分では、我々はフィードアプリで書いたロジックを表示するためのすべてのテンプレートに焦点を当てます.あなたがすでに知っているように、フィードのアプリのお得な情報は、ポスト、好き、コメントやポストパートの検索.
したがって、この部分では、テンプレートの一部を扱っているのでHTMLがたくさんあります.これは、ビューに渡されるデータを受け取ります.フィードアプリケーションのPYファイルは、ユーザーにデータを表示し、フォームを介してユーザー入力を取るのに役立ちます.
そこで、我々はすべてのテンプレートを次の場所に置きます:フィードフォルダの中のテンプレート/フィード.Djangoがその場所でテンプレートを探すとき、それはデータをそこに置くために、Djangoの命名規則です.
我々は1つずつテンプレートに対処します.それらのうちの6つはあります.ほとんどのHTMLやCSSのクラスとしてはあまり詳しく説明しません.テンプレートで使用するロジック部分についてのみ話をします.
では、始めましょう.

Createperspost.HTML
createperspost部から始めましょう.この部分は新しいポストの作成を扱っている.このテンプレートは、ユーザーが簡単にイメージ(義務)、イメージとタグ(オプション)に関する詳細などの関連する詳細を追加することによって新しい投稿を作成することができます.
このテンプレートの機能は、ユーザー入力を受け入れる必要なフォームを表示することです.提出ボタンを保存し、ポストを提出し、データベースに追加することです.
また、検索バーには、関連タグの特定の記事を検索することができますナビゲーションバーの内部に表示されます.
テンプレートは、他のすべてのテンプレートとユーザーテンプレートのテンプレートが使用されているレイアウトテンプレートを拡張します.レイアウトを見ます.すぐにHTMLファイル.

{% extends "feed/layout.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block cssfiles %}
{% endblock cssfiles %}
{% block searchform %}
<form class="form-inline my-2 my-lg-0 ml-5" action="{% url 'search_posts' %}" method="get">
  <input name="p" type="text" placeholder="Search posts..">
  <button class="btn btn-success my-2 my-sm-0 ml-4" type="submit">Search</button>
</form>
{% endblock searchform %}
{% block content %}
<br><br>
<div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
            <h5 class="card-title text-center"><b>Post</b></h5>
            <form class="form-signin" method = "POST" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group"><br>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Post</button><br>
            </div>
        </form>
    </div>
    </div>
    </div>
    </div>
</div>

{% endblock content %}
{% block jsfiles %}{% endblock jsfiles %}

ホーム.HTML
また、レイアウトを拡張します.HTMLファイル.それは我々のアプリのホームページです.ログインするユーザーはこのページにリダイレクトされます.このページはログインなしでアクセス可能です.
また、検索検索のための検索バーがあります.このホームページの主な目的は、ポストを適切な方法で表示することです.
また、ポストがユーザーによって好まれていたかどうかを確認し、ボタンなどのように表示されるように適用される.
ページにつき10のポストだけを表示するためにされるPaginationもあります.これは、次と前のページへのリンクもあります.
また、ページをリフレッシュせずにリアルタイムでのように扱うためのAjaxスクリプトを持っています.これは、ボタンのようにボタンを変更するようにすぐにユーザーが好きまたはその逆が好きです.これは、同じ色を表すボタンの色を変更します.

{% extends "feed/layout.html" %}
{% load static %}
{% block cssfiles %}
{% endblock cssfiles %}
{% block searchform %}
<form class="form-inline my-2 my-lg-0 ml-5" action="{% url 'search_posts' %}" method="get">
  <input name="p" type="text" placeholder="Search posts..">
  <button class="btn btn-success my-2 my-sm-0 ml-4" type="submit">Search</button>
</form>
{% endblock searchform %}
{% block content %}
    <div class="container">
        <div class="row">

          <div class="col-md-8">
            {% for post in posts %}
            <div class="card card-signin my-5">
              <div class="card-body">
                <a href="{{ post.user_name.profile.get_absolute_url }}"><img src="{{ post.user_name.profile.image.url }}" class="rounded-circle" width="30" height="30" alt=""></a>
                <a class="text-dark" href="{{ post.user_name.profile.get_absolute_url }}"><b>{{ post.user_name }}</b></a>
                <br><small class="text-muted">Posted on {{ post.date_posted }}</small>
                <br><br>
                <p class="card-text text-dark">{{ post.description }}</p>
              </div>
              <a href="{% url 'post-detail' post.id %}"><img class="card-img-top" src="{{ post.pic.url }}" alt=""></a>
              {% if post.tags %}
              <br>
              <p class="text-danger ml-3"><b>Tags: <i>{{ post.tags }}</i></b></p>
              {% endif %}
              <div class="card-footer">
                <button class="btn btn-white mr-3 like" id="{{ post.id }}">
                    {% if post in liked_post %}
                        <a href="{% url 'post-like' %}" style="color:red;" id="likebtn{{ post.id }}"> Unlike</a> | {{post.likes.count}}
                    {% else %}
                        <a href="{% url 'post-like' %}" style="color:green;" id="likebtn{{ post.id }}"> Like</a> | {{post.likes.count}}
                    {% endif %}
                </button>
                <a class="btn btn-outline-info" href="{% url 'post-detail' post.id %}">Comments | {{ post.details.count }}</a>
              </div>
            </div>
            {% endfor %}
           </div>
        </div>
    </div>

{% if is_paginated %}

      {% if page_obj.has_previous %}
        <a class="btn btn-outline-info mb-4" href="?page=1">First</a>
        <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
      {% endif %}

      {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
          <a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
          <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
        {% endif %}
      {% endfor %}

      {% if page_obj.has_next %}
        <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
        <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
      {% endif %}

    {% endif %}

{% endblock content %}

{% block jsfiles %}
<script>
    $(".like").click(function (e) {
    var id = this.id;
    var href = $('.like').find('a').attr('href');
    e.preventDefault();

    $.ajax({
        url: href,
        data: {
          'likeId': id
        },
        success: function(response){
          if(response.liked){
            $('#likebtn' + id).html("Unlike");
            $('#likebtn' + id).css("color", "red")
          }
          else{
            $('#likebtn' + id).html("Like");
            $('#likebtn' + id).css("color", "green")
          }
        }
      })
});
</script>
{% endblock jsfiles %}

レイアウト.HTML
これはレイアウトファイルです.それは私たちがウェブサイトで使用するすべての必要なCSSとJSファイルをインポートします.私たちはbootstrap 4といくつかのカスタムCSSファイルを使用します.
次に、ログインしていないユーザーとログインしていないユーザーに関連するリンクが表示されます.必要なリンクのみを表示します.
例:既にログインしているユーザーへのログアウトリンクを表示し、認証されていないユーザーのログインと登録リンクを表示します.
また、名前と著作権情報を表示する小さなフッターがあります.
あなたは、我々が我々が他のページに持っているすべてのコンテンツ情報を保持する{%block content%} {%endblock content%}を持っていることに気づくでしょう.
同様に、我々は検索ブロックもポストまたは人々の部分を検索するためです.

{% load static %}
<!DOCTYPE html>
<html>
<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" href="https://storage.googleapis.com/bytewalk/icon.png"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
    <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/bytewalk/profilepage.css">
    <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/bytewalk/styles.css">
    {% block cssfiles %}{% endblock cssfiles %}
    <title>ByteWalk</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
      <a class="navbar-brand ml-4 mr-4" href="#"><b>ByteWalk</b></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="{% url 'home' %}">Home</a>
          <a class="nav-item nav-link" href="{% url 'users_list' %}">Add New Friends</a>
          {% if user.is_authenticated %}
            <a class="nav-item nav-link" href="{% url 'friend_list' %}">Friends</a> 
            <a class="nav-item nav-link" href="{% url 'my_profile' %}">Profile</a> 
            <a class="nav-item nav-link" href="{% url 'post-create' %}">Create Post</a>
            <a class="nav-item nav-link btn btn-danger ml-4  text-light" href="{% url 'logout' %}">Logout</a>
          {% else %}
            <a class="nav-item nav-link btn btn-success ml-4  text-light" href="{% url 'login' %}">Login</a>
            <a class="nav-item nav-link btn btn-info ml-3  text-light" href="{% url 'register' %} ">Register</a>
          {% endif %}
            {% block searchform %}{% endblock searchform %}
        </div>
      </div>
    </nav>
    <div class="container">
    {% block content %}{% endblock content %}
    </div>

    <footer class="page-footer font-small black">
      <div class="footer-copyright text-center py-3">ByteWalk © 2020
      <br><small class="text-muted">All rights reserved!</small>
    </div>
    </footer>

    <!-- JS Files -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    {% block jsfiles %}{% endblock jsfiles %}
</body>
</html>

後の詳細.HTML
このテンプレートは詳細にポストの表示を扱います.これは、コメントとカウントのような完全なポストの詳細を示しています.また、コメント(コメントフォームが表示されます)を投稿するセクションがあり、以下のすべてのコメントが表示されるセクションです.
また、更新と削除の記事へのリンクがあります.人がポストの所有者と同じであるとき、それはこれらのリンクだけを示します.
そうでなければ、他の人に、これらのボタンを表示されません.
また、同じAjaxスクリプトを使用して、さわやかなこととは異なります.

{% extends "feed/layout.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block cssfiles %}
{% endblock cssfiles %}
{% block searchform %}
<form class="form-inline my-2 my-lg-0 ml-5" action="{% url 'search_posts' %}" method="get">
  <input name="p" type="text" placeholder="Search posts by tags..">
  <button class="btn btn-success my-2 my-sm-0 ml-4" type="submit">Search</button>
</form>
{% endblock searchform %}
{% block content %}
    <div class="container">
        <div class="row">
          <div class="col-md-8">
            <div class="card card-signin my-5">
              <div class="card-body">
                <a href="{{ post.user_name.profile.get_absolute_url }}"><img src="{{ post.user_name.profile.image.url }}" class="rounded-circle" width="30" height="30" alt=""></a>
                <a class="text-dark" href="{{ post.user_name.profile.get_absolute_url }}"><b>{{ post.user_name }}</b></a>
                <br><small class="text-muted">Posted on {{ post.date_posted }}</small>
                <br><br>
                <p class="card-text text-dark">{{ post.description }}</p>
              </div>
              <a href="{{ post.pic.url }}"><img class="card-img-top" src="{{ post.pic.url }}" alt=""></a>
              {% if post.tags %}
              <br><p class="text-danger ml-3"><b>Tags: <i>{{ post.tags }}</i></b></p>
              {% endif %}
              <div class="card-footer">
                <button class="btn btn-white mr-3 like" id="{{ post.id }}">
                    {% if is_liked %}
                        <a href="{% url 'post-like' %}" style="color:red;" id="likebtn{{ post.id }}"> Unlike | {{post.likes.count}}</a>
                    {% else %}
                        <a href="{% url 'post-like' %}" style="color:green;" id="likebtn{{ post.id }}"> Like | {{post.likes.count}}</a>
                    {% endif %}
                </button>

                {% if post.user_name == user %}
                <a class="btn btn-outline-info mr-3" href="{% url 'post-update' post.id %}">Update</a>
                <a class="btn btn-outline-danger" href="{% url 'post-delete' post.id %}">Delete</a>
                {% endif %}
              </div>
            </div>
           </div>
        </div>
        <br>
        <h4>Comments</h4>
        <div class="row">
            <div class="col-md-8">
                <div class="card card-signin my-5">
                    <div class="card-body">
                        <form class="form-signin" method = "POST">
                            {% csrf_token %}
                            <fieldset class="form-group"><br>
                                {{ form|crispy }}
                            </fieldset>
                            <div class="form-group">
                                <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Comment</button><br>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                {% if post.details.all %}
                <div class="card card-signin my-5">
                {% for detail in post.details.all %}
                    <div class="card-body">
                        <a href="{{ detail.username.profile.get_absolute_url }}">
                            <img src="{{ detail.username.profile.image.url }}" class="rounded-circle" width="30" height="30" alt="">
                        </a>
                        <a class="text-dark" href="{{ detail.username.profile.get_absolute_url }}"><b>{{ detail.username }}</b></a>
                        <br><small>{{ detail.comment_date }}</small><br><br>
                        <p class="card-text text-dark">{{ detail.comment }}</p>
                    </div>
                    <hr class="my-1">
                {% endfor %}
                </div>
                {% else %}
                    <p>No comments to show!</p>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock content %}
{% block jsfiles %}
<script>
    $(".like").click(function (e) {
    var id = this.id;
    var href = $('.like').find('a').attr('href');
    e.preventDefault();

    $.ajax({
        url: href,
        data: {
          'likeId': id
        },
        success: function(response){
          if(response.liked){
            $('#likebtn' + id).html("Unlike | {{post.likes.count}}");
            $('#likebtn' + id).css("color", "red")
          }
          else{
            $('#likebtn' + id).html("Like | {{post.likes.count}}");
            $('#likebtn' + id).css("color", "green")
          }
        }
      })
});
</script>
{% endblock jsfiles %}

Searchchenポスト.HTML
この部分は検索条件にマッチするポストを表示します.これは、関連するすべての記事が表示されます.
これはポストを表示する必要があるので、ホームページに似ていますが、すべてのポストを表示するホームページとは異なり、ここで検索用語に一致する選択的な投稿を表示します.
他のすべてのコンポーネントは、AJAXスクリプトのようなホームページと同じです.

{% extends "feed/layout.html" %}
{% load static %}
{% block cssfiles %}
{% endblock cssfiles %}
{% block searchform %}
<form class="form-inline my-2 my-lg-0 ml-5" action="{% url 'search_posts' %}" method="get">
  <input name="p" type="text" placeholder="Search posts..">
  <button class="btn btn-success my-2 my-sm-0 ml-4" type="submit">Search</button>
</form>
{% endblock searchform %}
{% block content %}
    <div class="container">
        <div class="row">
          <div class="col-md-8">
            {% if not posts %}
            <br>
            <h2><i>No posts match the tag provided!</i></h2>
            {% endif %}

            {% for post in posts %}
            <div class="card card-signin my-5">
              <div class="card-body">
                <a href="{{ post.user_name.profile.get_absolute_url }}"><img src="{{ post.user_name.profile.image.url }}" class="rounded-circle" width="30" height="30" alt=""></a>
                <a class="text-dark" href="{{ post.user_name.profile.get_absolute_url }}"><b>{{ post.user_name }}</b></a>
                <br><small class="text-muted">Posted on {{ post.date_posted }}</small>
                <br><br>
                <p class="card-text text-dark">{{ post.description }}</p>
              </div>
              <a href="{% url 'post-detail' post.id %}"><img class="card-img-top" src="{{ post.pic.url }}" alt=""></a>
              {% if post.tags %}
              <br><p class="text-danger ml-3"><b>Tags: <i>{{ post.tags }}</i></b></p>
              {% endif %}
              <div class="card-footer">
                <button class="btn btn-white mr-3 like" id="{{ post.id }}">
                    {% if post in liked_post %}
                        <a href="{% url 'post-like' %}" style="color:red;" id="likebtn{{ post.id }}"> Unlike</a> | {{post.likes.count}}
                    {% else %}
                        <a href="{% url 'post-like' %}" style="color:green;" id="likebtn{{ post.id }}"> Like</a> | {{post.likes.count}}
                    {% endif %}
                </button>
                <a class="btn btn-outline-info" href="{% url 'post-detail' post.id %}">Comments | {{ post.details.count }}</a>
              </div>
            </div>
            {% endfor %}
           </div>
        </div>
    </div>
{% endblock content %}
{% block jsfiles %}
<script>
    $(".like").click(function (e) {
    var id = this.id;
    var href = $('.like').find('a').attr('href');
    e.preventDefault();

    $.ajax({
        url: href,
        data: {
          'likeId': id
        },
        success: function(response){
          if(response.liked){
            $('#likebtn' + id).html("Unlike");
            $('#likebtn' + id).css("color", "red")
          }
          else{
            $('#likebtn' + id).html("Like");
            $('#likebtn' + id).css("color", "green")
          }
        }
      })
});
</script>
{% endblock jsfiles %}

ユーザ名の投稿.HTML
このページは特定のユーザーによる投稿を表示します.これは、ページのような、同じAjaxスクリプトと同じように、ページのための同じ表示スタイルをPagination、同じAjaxスクリプトとホームページです.
唯一の違いは、特定のユーザーによる投稿だけが表示されます.

{% extends "feed/layout.html" %}
{% load static %}
{% block cssfiles %}
{% endblock cssfiles %}
{% block searchform %}
<form class="form-inline my-2 my-lg-0 ml-5" action="{% url 'search_posts' %}" method="get">
  <input name="p" type="text" placeholder="Search posts..">
  <button class="btn btn-success my-2 my-sm-0 ml-4" type="submit">Search</button>
</form>
{% endblock searchform %}
{% block content %}
    <div class="container">
        <div class="row">
          <div class="col-md-8">
            {% for post in posts %}
            <div class="card card-signin my-5">
              <div class="card-body">
                <a href="{{ post.user_name.profile.get_absolute_url }}"><img src="{{ post.user_name.profile.image.url }}" class="rounded-circle" width="30" height="30" alt=""></a>
                <a class="text-dark" href="{{ post.user_name.profile.get_absolute_url }}"><b>{{ post.user_name }}</b></a>
                <br><small class="text-muted">Posted on {{ post.date_posted }}</small>
                <br><br>
                <p class="card-text text-dark">{{ post.description }}</p>
              </div>
              <a href="{% url 'post-detail' post.id %}"><img class="card-img-top" src="{{ post.pic.url }}" alt=""></a>
              {% if post.tags %}
              <br><p class="text-danger ml-3"><b>Tags: <i>{{ post.tags }}</i></b></p>
              {% endif %}
              <div class="card-footer">
                <button class="btn btn-white mr-3 like" id="{{ post.id }}">
                    {% if post in liked_post %}
                        <a href="{% url 'post-like' %}" style="color:red;" id="likebtn{{ post.id }}"> Unlike</a> | {{post.likes.count}}
                    {% else %}
                        <a href="{% url 'post-like' %}" style="color:green;" id="likebtn{{ post.id }}"> Like</a> | {{post.likes.count}}
                    {% endif %}
                </button>
                <a class="btn btn-outline-info" href="{% url 'post-detail' post.id %}">Comments | {{ post.details.count }}</a>
              </div>
            </div>
            {% endfor %}
           </div>
        </div>
    </div>

{% if is_paginated %}

      {% if page_obj.has_previous %}
        <a class="btn btn-outline-info mb-4" href="?page=1">First</a>
        <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
      {% endif %}

      {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
          <a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
          <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
        {% endif %}
      {% endfor %}

      {% if page_obj.has_next %}
        <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
        <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
      {% endif %}

    {% endif %}


{% endblock content %}
{% block jsfiles %}
<script>
    $(".like").click(function (e) {
    var id = this.id;
    var href = $('.like').find('a').attr('href');
    e.preventDefault();

    $.ajax({
        url: href,
        data: {
          'likeId': id
        },
        success: function(response){
          if(response.liked){
            $('#likebtn' + id).html("Unlike");
            $('#likebtn' + id).css("color", "red")
          }
          else{
            $('#likebtn' + id).html("Like");
            $('#likebtn' + id).css("color", "green")
          }
        }
      })
});
</script>
{% endblock jsfiles %}

だから、すべてのフィードアプリのテンプレートです.それはHTMLコンテンツの多くでした.あなたが退屈していないことを願っています.
希望を楽しむチュートリアル.それは、ジャンゴSocialメディアチュートリアルの5つの部分シリーズの最後の部分でした.
閉じるこの動画はお気に入りから削除されています.私はあなたのすべてがあなたの独自のソーシャルメディアプロジェクトをdjangoとすることができます願ってタグ付けのように、友達サークル、強化された推薦システムだけでポストを示すように多くの側面を追加することができます.
完全なシリーズのためのGithub Repoは、ここにあります.コメントしたり、任意の方法でそれを強化するために、このリポジトリに任意のプル要求を行うこと自由に感じてください.