Data Analyst KIM

[Web Server] Django mini_project(Create my blog) 본문

데이터 분석/K-Digital Training

[Web Server] Django mini_project(Create my blog)

김두연 2023. 7. 15. 01:53
반응형

집에 와서 3일동안 배운 Django를 이용해서 복습을 하면서 내가 원하는 형태의 블로그를 만들고 싶었다.

그래서 나는 티스토리의 나의 블로그와 동일하게 만들어 보고자 간단하게 미니 프로젝트를 진행해보았다.

다음 사진의  왼쪽은 내가 직접 만든 서버의 블로그이고 오른쪽은 티스토리 블로그이다.

정말 똑같이 잘 만든 것 같다.

 

 

 

HTML,CSS를 활용하여 PyCharm에서 만들었다.

실제로 티스토리 블로그에서 내가 글을 작성하면 데이터 베이스에 쌓이고

댓글을 달거나 이미지를 추가하는 등의 작업이 현실의 서버와 비슷하도록 만들어보았다.

<메인 화면>

KIM blog를 클릭하면 다음과 같은 화면이 나온다.

 

 

글을 작성하기 위해서 글 작성 버튼을 눌린다.

그리고 글을 작성해본다. 작성 후 댓글도 달아보자

 

 

 

최종적으로 서버에 저장이 되는 것을 확인할 수 있다.

느낀점

새로운 것을 배운 다는 것이 너무 재미있었다.

평소에 html과 css에 대해서 공부를 해보고 싶었는데

직접 내가 만들고 싶은 것을 만들어 보니 어느덧 시간이 많이 흘렀다.

 

나는 오늘 몰입 경험을 했다.

10시부터 시작을 했는데 지금 시간이 1시46분이다...?

(토익 스피킹 공부를 하지 못한 것은 비밀..내일은 토익 빠짝 공부!!)

 

처음부터 다시 코딩을 해보고 중간에 오류가 난 부분을 찾으면서

공부를 하니 시간이 가는 줄도 몰랐다

정말 유익한 시간이였고 좋은 강의를 해주신 김성필 박사님에게

너무 감사하다는 말씀을 전하고 싶다.

.

<서버를 만들기 위한 파일 및 코드>

 

blog/~
# admin.py #
from django.contrib import admin
from blog.models import Post , Comment

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    list_display = ['title', 'thumbnail']

@admin.register(Comment)
class CommentAdmin(admin.ModelAdmin):
    pass

# models.py #
from django.db import models

class Post(models.Model):
    title = models.CharField('포스트 제목',max_length=100)
    content = models.TextField('포스트 내용')
    thumbnail = models.ImageField('썸네일 이미지',upload_to='post',blank=True)

    def __str__(self):
        return self.title

class Comment(models.Model):
    post = models.ForeignKey(Post,on_delete = models.CASCADE)
    content = models.TextField('댓글 내용')

    def __str__(self):
        return f"{self.post.title}의 댓글 (ID:{self.id})"
        
# views.py
from django.shortcuts import render , redirect
from blog.models import Post , Comment
# Create your views here.

def post_list(request):
    posts = Post.objects.all()
    context = {
        'posts':posts,
    }
    return render(request,'post_list.html',context)

def post_detail(request,post_id):
    post = Post.objects.get(id=post_id)
    if request.method == 'POST':
        comment_content = request.POST['comment']
        Comment.objects.create(
        post = post,
        content =comment_content,
        )

    context = {
        'post': post,
    }
    return render(request,'post_detail.html',context)

def post_add(request):
    if request.method == "POST":
        title = request.POST['title']
        content = request.POST['content']
        thumbnail = request.FILES['thumbnail']
        post = Post.objects.create(
            title=title,
            content=content,
            thumbnail = thumbnail,
        )
        return redirect(f'/posts/{post.id}/')
    else:
        print("method GET")
    return render(request,'post_add.html')

 

 

config/~
# settings.py #

BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATES_DIR = BASE_DIR/'templates'

INSTALLED_APPS = [
    'blog',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR/'static']

MEDIA_URL = 'media/'
MEDIA_ROOT = BASE_DIR / 'media'


# urls.py # 
from django.conf import settings
from django.conf.urls.static import static

from django.contrib import admin
from django.urls import path
from config.views import index
from blog.views import post_list, post_detail , post_add

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',index),
    path('posts/',post_list),
    path('posts/<int:post_id>/', post_detail),
    path('posts/add/', post_add),
]

urlpatterns += static(
prefix= settings.MEDIA_URL,
document_root = settings.MEDIA_ROOT,
)

# views.py #
from django.shortcuts import render
def index(request):
    return render(request,'index.html')
static/css/style.css
너무 길어서 pass

 

templates/~
# index.html #
{% load static %}
<!DOCTYPE html>
<html lang = 'en'>
<head>
    <meta charset = 'UTF-8'>
    <title>Title</title>
    <link rel = 'stylesheet' href = "{% static 'css/style.css' %}">
</head>
<body>
    <div id="index">
        <h1><a href = '/posts/'>KIM blog</a></h1>
        <small>Believe in yourself.</small>
    </div>
</body>
</html>


# post_add.html #
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <div id="navbar">
        <span>글 작성</span>
    </div>
    <div id="post-add">
        <form method="POST" enctype='multipart/form-data'>
            {% csrf_token %}
            <divW>
                <label>제목</label>
                <input name = 'title' type="text">
            </divW>
            <div>
                <label>내용</label>
                <textarea name="content" cols="50" rows="20"></textarea>
            <div>
                <label>썸네일</label>
                <input name="thumbnail" type="file">
            </div>
            </div>
            <button type="submit" class="btn btn-primary">작성</button>
        </form>
    </div>
</body>
</html>


# post_detail.html # 
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <div id="navbar">
        {% if post.thumbnail %}
            <img src = "{{post.thumbnail.url}}">
        {% endif %}
        <span>{{post.title}}</span>
    </div>
    <div id="post-detail">
        <p>{{post.content | linebreaksbr}}</p>
        <ul class="comments">
            {% for comment in post.comment_set.all %}
                <li class="comment">{{comment.content}}</li>
            {% empty %}
                <li class="comment-empty">아직 댓글이 없습니다</li>
            {% endfor %}
        </ul>
        <form method="POST">
            {% csrf_token %}
            <textarea name="comment"></textarea>
            <button type="submit" class="btn btn-primary">댓글 작성</button>
        </form>
    </div>
</body>
</html>

# post_list.html # 
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <div id="navbar">
        <span>KIM blog</span>
        <a href="/posts/add/" class="btn btn-primary">글 작성</a>
    </div>
    <div id="post-list">
        <ul class="posts">
            {% for post in posts %}
                <li class="post">
                    <div>
                        <a href ='/posts/{{post.id}}'>{{post.title}}</a>
                    </div>
                    <p>{{post.content}}</p>
                    <ul class="comments">
                        {% for comment in post.comment_set.all %}
                            <li class="comment"> {{comment.content}} </li>
                        {% empty %}
                            <li class="comment"> 아직 댓글이 없습니다</li>
                        {% endfor %}
                    </ul>
                    {% if post.thumbnail %}
                        <img src="{{post.thumbnail.url}}" alt="">
                    {% else %}
                        <img src="" alt="">
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>
반응형
저작자표시

'데이터 분석 > K-Digital Training' 카테고리의 다른 글

데이터 시각화(선,원,막대 그래프,히스토그램)  (0) 2023.07.30
[빅데이터 양성과정] 4. MySQL 기본 개념(노션 정리본)  (0) 2023.07.23
[빅데이터 양성과정] 3. Web Server - Django  (0) 2023.07.15
[빅데이터 양성과정] 2. Window Program - PyQt  (0) 2023.07.15
[빅데이터 양성과정] 1.Python Basic(노션 정리)  (0) 2023.07.09
'데이터 분석/K-Digital Training' Related Articles more