RE_PROJECT 01 | 메인화면 구현하기

✅ 메인화면 만들기 ✅

 

 

✔️ tweet/urls.py 작성

# tweet/urls.py
from django.urls import path
from . import views


urlpatterns = [
    path('', views.home, name='home'), # 127.0.0.1:8000 과 views.py 폴더의 home 함수 연결
    path('tweet/', views.tweet, name='tweet'), # 127.0.0.1:8000/tweet 과 views.py 폴더의 tweet 함수 연결
]

 

 

 

✔️ tweet/models.py 에서 모델 설정

from django.db import models
from user.models import UserModel


# Create your models here.
class TweetModel(models.Model):
    class Meta:
        db_table = "tweet"

    author = models.ForeignKey(UserModel, on_delete=models.CASCADE)
    content = models.CharField(max_length=256)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)


class TweetComment(models.Model):
    class Meta:
        db_table = "comment"
        
    tweet = models.ForeignKey(TweetModel, on_delete=models.CASCADE)
    author = models.ForeignKey(UserModel, on_delete=models.CASCADE)
    comment = models.CharField(max_length=256)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

python3 manage.py makemigrations
python3 manage.py migrate

 

 

 

✔️ tweet/views.py 에 추가

def tweet(request):
    if request.method == "GET":
        # 사용자가 로그인 되어있는지 확인하기
        user = request.user.is_authenticated
        
        if user: # 로그인 되어있는 사용자라면 
            all_tweet = TweetModel.objects.all().order_by('-created_at')
            all_comment = TweetComment.objects.all().order_by('-created_at')
            return render(request, 'tweet/home.html', {'tweet': all_tweet, 'comment': all_comment})
        else: # 로그인 되어있지 않다면
            return redirect('/sign-in')
        
    elif request.method == "POST":
        user = request.user
        my_tweet = TweetModel()  # 글쓰기 모델 가져오기
        my_tweet.author = user  # 모델에 사용자 저장
        my_tweet.content = request.POST.get('my-content', '')  # 모델에 글 저장
        my_tweet.save()
        return redirect('/tweet')

 

 

 

✔️ templates/tweet/home.html 수정

<span class="feed_name_txt"> {{ user.username }} </span>

➡️ 게시글 상단에 로그인한 사용자의 username이 나타난다.

 

<div class="feed_content">
	<p class="feed_txt"> <b> {{ tw.author }}</b> {{ tw.content }}</p>
</div>

➡️ 게시글 피드에 게시글 작성자 이름과 내용을 보여준다.

 

<div class="name_content">
    <span class="feed_name_txt"> {{ user.username }} </span>
    <span class="name_content_txt"> {{ user.first_name }}</span>
</div>

➡️ 메인 페이지에서 오른쪽 부분의 상단에 현재 로그인 되어있는 사용자의 username과 first_name을 띄워준다.

 

 

 

✔️ templates/base.html에서 홈 아이콘 링크 연결하기

<li class="nav-item active">
    <a class="nav-link" href="/tweet">
<li class="material-icons">home</li></a>

 

---

 

 

✔️ 완성화면

➡️ 아직 게시글을 작성하지 않아서 왼쪽 피드부분에 아무것도 나오지 않는다! 현재 로그인한 사용자의 username과 first_name이 화면에 보여지는 것을 확인할 수 있다. 

그리고 네비게이션바 오른쪽에 있는 아이콘을 누르면 홈화면으로 이동, 로그아웃이 가능하게 연결해두었다.