chatGPT가 만드는 Django, Python, Bootstrap 간단한 홈페이지

아래는 Django, Python, 그리고 Bootstrap을 사용하여 간단한 회사 홈페이지를 만드는 예시입니다. 이 예시는 회사 소개, 대표이사 인사말, 회사 오는 길, 그리고 회사 간단 게시판 메뉴로 구성된 웹사이트를 제작합니다.

1. 프로젝트 및 앱 설정

먼저 Django 프로젝트를 생성하고, 웹페이지를 관리할 앱을 생성해야 합니다.

django-admin startproject company_website 
cd company_website 
python manage.py startapp main

2. settings.py 수정

Django 프로젝트에서 main 앱을 사용하도록 설정을 수정해야 합니다. INSTALLED_APPS에 main 앱을 추가합니다.

# company_website/settings.py 
INSTALLED_APPS = [ 
	# other apps 
    'main', 
]

3. Model 구성 (게시판 용)

python

# main/models.py 
from django.db import models 

class Post(models.Model): 
	title = models.CharField(max_length=200) 
    content = models.TextField() 
    created_at = models.DateTimeField(auto_now_add=True) 
    
    def __str__(self): 
    	return self.title

이 모델은 회사 간단 게시판에서 사용할 게시글 데이터를 저장합니다.

4. View 작성

각각의 메뉴에 해당하는 View를 작성합니다.

# main/views.py 
from django.shortcuts import render 
from .models import Post 

	def home(request): 
    	return render(request, 'home.html') 
        
    def about_company(request): 
    	return render(request, 'about_company.html') 
        
    def ceo_message(request): 
    	return render(request, 'ceo_message.html') 
        
    def company_location(request): 
    	return render(request, 'company_location.html') 
        
    def board(request): 
    	posts = Post.objects.all().order_by('-created_at') 
        return render(request, 'board.html', {'posts': posts})

5. URL 설정

Django의 URL 패턴을 설정해 각 페이지로 접근할 수 있게 합니다.

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

urlpatterns = [ 
    path('', views.home, name='home'), 
    path('about/', views.about_company, name='about_company'), 
    path('ceo/', views.ceo_message, name='ceo_message'), 
    path('location/', views.company_location, name='company_location'), 
    path('board/', views.board, name='board'), 
]

company_website/urls.py에 main/urls.py를 include합니다.

# company_website/urls.py 

from django.contrib import admin 
from django.urls import path, include 

urlpatterns = [ 
    path('admin/', admin.site.urls), 
    path('', include('main.urls')), 
]

6. 템플릿 작성 (Bootstrap 사용)

6.1 base.html (기본 레이아웃)

<!-- templates/base.html --> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Company Website</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
    <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <div class="container-fluid"> 
        <a class="navbar-brand" href="{% url 'home' %}">Company</a> 
    	<div class="collapse navbar-collapse">
            <ul class="navbar-nav"> 
                <li class="nav-item"><a class="nav-link" href="{% url 'about_company' %}">회사 소개</a></li> 
                <li class="nav-item"><a class="nav-link" href="{% url 'ceo_message' %}">대표이사 인사말</a></li> 
                <li class="nav-item"><a class="nav-link" href="{% url 'company_location' %}">회사 오는 길</a></li> 
                <li class="nav-item"><a class="nav-link" href="{% url 'board' %}">간단 게시판</a></li> 
            </ul> 
        </div> 
    </div> 
    </nav> 
    
    <div class="container mt-4"> {% block content %}{% endblock %} </div> 

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> 
</body> 
</html>

6.2 홈 페이지 (home.html)

<!-- templates/home.html --> 
{% extends 'base.html' %} 

{% block content %} 
<div class="jumbotron"> 
    <h1 class="display-4">Welcome to Our Company</h1> 
    <p class="lead">당사의 웹사이트에 오신 것을 환영합니다!</p> 
    <hr class="my-4"> 
    <p>회사 소개, 대표이사 인사말, 회사 위치 및 게시판을 이용하실 수 있습니다.</p> 
</div> 
{% endblock %}

6.3 회사 소개 (about_company.html)

<!-- templates/about_company.html --> 
{% extends 'base.html' %} 

{% block content %} 
    <h1>회사 소개</h1> 
    <p>우리 회사는 최고의 기술력을 바탕으로 혁신적인 제품을 제공합니다.</p> 
{% endblock %}

6.4 대표이사 인사말 (ceo_message.html)

<!-- templates/ceo_message.html --> 
{% extends 'base.html' %} 

{% block content %} 
    <h1>대표이사 인사말</h1> 
    <p>안녕하십니까, 당사 대표이사입니다. 여러분의 성원에 감사드립니다.</p> 
{% endblock %}

6.5 회사 오는 길 (company_location.html)

<!-- templates/company_location.html --> 
{% extends 'base.html' %} 

{% block content %} 
	<h1>회사 오는 길</h1> 
    <p>서울시 강남구 테헤란로 123</p> <p>지하철 2호선 강남역 10번 출구에서 도보 10분.</p> 
{% endblock %}

6.6 게시판 (board.html)

<!-- templates/board.html --> 
{% extends 'base.html' %} 

{% block content %} 
    <h1>회사 간단 게시판</h1> 
    <ul class="list-group"> 
        {% for post in posts %} 
            <li class="list-group-item"> 
                <h5>{{ post.title }}</h5> 
                <p>{{ post.content }}</p> 
                <small>{{ post.created_at }}</small> 
            </li> 
        {% endfor %} 
    </ul> 
{% endblock %}

7. 마이그레이션 및 관리자 설정

모델을 데이터베이스에 반영하려면 마이그레이션을 수행하고, 관리자에서 게시판 글을 추가할 수 있도록 설정합니다.

python manage.py makemigrations 
python manage.py migrate

# main/admin.py 
from django.contrib import admin 
from .models import Post 

admin.site.register(Post)

8. 서버 실행

모든 설정이 완료되었으면 로컬 서버를 실행하여 웹사이트를 확인합니다.

python manage.py runserver

9. 결과

웹사이트에 접속하면 메뉴에 따라 회사 소개, 대표이사 인사말, 회사 오는 길, 회사 간단 게시판 페이지를 탐색할 수 있습니다. 간단 게시판에서는 관리자 페이지를 통해 게시글을 작성하고, 이를 목록으로 확인할 수 있습니다.

게시판에 게시글 작성, 수정, 삭제 기능을 추가하기 위해서는 Django에서 기본적으로 제공하는 Form과 Generic View를 사용할 수 있습니다. 아래는 해당 기능을 추가하는 방법입니다.

1. 게시글 작성, 수정, 삭제를 위한 URL 추가

우선 urls.py에 게시글 작성, 수정, 삭제를 위한 URL 패턴을 추가합니다.

# main/urls.py 

from django.urls import path 
from . import views 

urlpatterns = [
    path('', views.home, name='home'), 
    path('about/', views.about_company, name='about_company'), 
    path('ceo/', views.ceo_message, name='ceo_message'), 
    path('location/', views.company_location, name='company_location'), 
    path('board/', views.board, name='board'), 
    path('board/new/', views.PostCreateView.as_view(), name='post_create'), # 게시글 작성 
    path('board/edit/<int:pk>/', views.PostUpdateView.as_view(), name='post_update'), # 게시글 수정 
    path('board/delete/<int:pk>/', views.PostDeleteView.as_view(), name='post_delete'), # 게시글 삭제 
]

2. Form 및 Generic Views 작성

Django에서 제공하는 CreateView, UpdateView, DeleteView를 사용하여 게시글 작성, 수정, 삭제 기능을 구현할 수 있습니다.

# main/views.py 

from django.urls import reverse_lazy 
from django.views.generic import CreateView, UpdateView, DeleteView 
from .models import Post 

class PostCreateView(CreateView): 
    model = Post 
    fields = ['title', 'content'] 
    template_name = 'post_form.html' 
    success_url = reverse_lazy('board') 
    
class PostUpdateView(UpdateView): 
    model = Post 
    fields = ['title', 'content'] 
    template_name = 'post_form.html' 
    success_url = reverse_lazy('board') 
    
class PostDeleteView(DeleteView): 
    model = Post 
    template_name = 'post_confirm_delete.html' 
    success_url = reverse_lazy('board')

3. 게시글 작성/수정 템플릿 (post_form.html)

게시글 작성 및 수정을 위한 폼 템플릿을 작성합니다. 이 템플릿은 게시글 작성과 수정에 공통으로 사용됩니다.

<!-- templates/post_form.html --> 
{% extends 'base.html' %} 

{% block content %} 
    <h1>{% if object %}게시글 수정{% else %}새 게시글 작성{% endif %}</h1> 
    <form method="post"> 
        {% csrf_token %} 
        {{ form.as_p }} 
        <button type="submit" class="btn btn-primary">
            {% if object %}수정{% else %}작성{% endif %}
        </button> 
    </form> 
    <a href="{% url 'board' %}" class="btn btn-secondary mt-3">뒤로 가기</a> 
{% endblock %}

4. 게시글 삭제 확인 템플릿 (post_confirm_delete.html)

게시글을 삭제하기 전에 확인하는 페이지를 위한 템플릿을 작성합니다.

<!-- templates/post_confirm_delete.html --> 
{% extends 'base.html' %} 

{% block content %} 
    <h1>게시글 삭제</h1> 
    <p>이 게시글을 삭제하시겠습니까?</p> 
    <form method="post"> 
        {% csrf_token %} 
    	<button type="submit" class="btn btn-danger">삭제</button> 
    </form> 
    <a href="{% url 'board' %}" class="btn btn-secondary mt-3">뒤로 가기</a> 
{% endblock %}

5. 게시판에 작성/수정/삭제 링크 추가

게시글 목록 페이지에서 게시글 작성, 수정, 삭제 버튼을 추가합니다.

<!-- templates/board.html --> 
{% extends 'base.html' %} 

{% block content %} 
    <h1>회사 간단 게시판</h1> 
    <a href="{% url 'post_create' %}" class="btn btn-success mb-3">새 글 작성</a> 
    <ul class="list-group"> 
        {% for post in posts %} 
        <li class="list-group-item"> 
            <h5>{{ post.title }}</h5> 
            <p>{{ post.content }}</p> 
            <small>{{ post.created_at }}</small> 
            <div class="mt-2"> 
                <a href="{% url 'post_update' post.pk %}" class="btn btn-primary btn-sm">수정</a> 
                <a href="{% url 'post_delete' post.pk %}" class="btn btn-danger btn-sm">삭제</a> 
            </div> 
        </li> 
        {% endfor %} 
    </ul> 
{% endblock %}

6. 마이그레이션 및 서버 실행

모델이 변경되지 않았으므로 추가적인 마이그레이션은 필요 없습니다. 이제 로컬 서버를 실행하여 모든 기능을 확인할 수 있습니다.

python manage.py runserver

7. 결과

게시글 작성: "새 글 작성" 버튼을 클릭하여 게시글을 작성할 수 있습니다.
게시글 수정: 게시글 목록에서 "수정" 버튼을 클릭하여 게시글을 수정할 수 있습니다.
게시글 삭제: "삭제" 버튼을 클릭하여 게시글을 삭제할 수 있으며, 삭제 확인 페이지가 표시됩니다.

이 구조를 통해 간단한 CRUD 기능을 갖춘 게시판을 구현할 수 있습니다.

전체 폴더 및 파일 구조

아래는 Django, Bootstrap, 그리고 게시판 CRUD 기능을 추가한 회사 홈페이지 프로젝트의 전체 폴더 및 파일 구조입니다.

설명:

company_website/
- Django 프로젝트의 루트 디렉토리입니다.
- settings.py, urls.py, wsgi.py 등의 기본 설정 파일이 포함됩니다.
company_website/settings.py
- 프로젝트 전역 설정 파일입니다. INSTALLED_APPS에 main 앱이 등록되어 있어야 합니다.
main/ (앱 디렉토리)
- Django 애플리케이션 폴더입니다. 회사 홈페이지의 주요 기능이 여기에 구현됩니다.
- models.py: 데이터베이스 모델 정의 (예: 게시판 Post 모델).
- views.py: 각 페이지에 대한 View 함수 및 게시판의 CRUD 기능.
- urls.py: main 앱의 URL 설정.
- admin.py: 관리자 사이트 설정 파일. 게시판(Post) 모델이 등록되어 있습니다.
- migrations/: 데이터베이스 스키마 변경을 추적하는 마이그레이션 파일들이 위치.
templates/ (HTML 템플릿 파일 폴더)
- base.html: 사이트의 기본 레이아웃, 모든 페이지에서 상속.
- home.html: 홈페이지 템플릿.
- about_company.html: 회사 소개 페이지 템플릿.
- ceo_message.html: 대표이사 인사말 페이지 템플릿.
- company_location.html: 회사 오는 길 페이지 템플릿.
- board.html: 게시판 목록 페이지 템플릿.
- post_form.html: 게시글 작성 및 수정 폼 템플릿.
- post_confirm_delete.html: 게시글 삭제 확인 페이지 템플릿.
static/ (정적 파일 폴더)
- css/: Bootstrap 커스터마이징 및 기타 CSS 파일이 위치하는 폴더입니다.
- 정적 파일(이미지, CSS, JS)은 일반적으로 여기 배치됩니다.
manage.py
- Django 프로젝트의 관리 명령어 도구입니다. 서버 실행, 마이그레이션, 관리 사용자 생성 등 다양한 명령을 실행할 수 있습니다.

서버 실행 및 확인

모든 파일이 준비된 후, 다음 명령어로 서버를 실행합니다:

python manage.py runserver

브라우저에서 http://127.0.0.1:8000/로 접속하여 프로젝트가 잘 동작하는지 확인할 수 있습니다.

저작자표시 비영리 동일조건

Change Agent(변화변혁 주도자)

chatGPT가 만드는 Django, Python, Bootstrap 간단한 홈페이지

1. 프로젝트 및 앱 설정

2. settings.py 수정

3. Model 구성 (게시판 용)

4. View 작성

5. URL 설정

6. 템플릿 작성 (Bootstrap 사용)

6.1 base.html (기본 레이아웃)

6.2 홈 페이지 (home.html)

6.3 회사 소개 (about_company.html)

6.4 대표이사 인사말 (ceo_message.html)

6.5 회사 오는 길 (company_location.html)

6.6 게시판 (board.html)

7. 마이그레이션 및 관리자 설정

8. 서버 실행

9. 결과

1. 게시글 작성, 수정, 삭제를 위한 URL 추가

2. Form 및 Generic Views 작성

3. 게시글 작성/수정 템플릿 (post_form.html)

4. 게시글 삭제 확인 템플릿 (post_confirm_delete.html)

5. 게시판에 작성/수정/삭제 링크 추가

6. 마이그레이션 및 서버 실행

7. 결과

설명:

서버 실행 및 확인

티스토리툴바

chatGPT가 만드는 Django, Python, Bootstrap 간단한 홈페이지

1. 프로젝트 및 앱 설정

2. settings.py 수정

3. Model 구성 (게시판 용)

4. View 작성

5. URL 설정

6. 템플릿 작성 (Bootstrap 사용)

6.1 base.html (기본 레이아웃)

6.2 홈 페이지 (home.html)

6.3 회사 소개 (about_company.html)

6.4 대표이사 인사말 (ceo_message.html)

6.5 회사 오는 길 (company_location.html)

6.6 게시판 (board.html)

7. 마이그레이션 및 관리자 설정

8. 서버 실행

9. 결과

1. 게시글 작성, 수정, 삭제를 위한 URL 추가

2. Form 및 Generic Views 작성

3. 게시글 작성/수정 템플릿 (post_form.html)

4. 게시글 삭제 확인 템플릿 (post_confirm_delete.html)

5. 게시판에 작성/수정/삭제 링크 추가

6. 마이그레이션 및 서버 실행

7. 결과

설명:

서버 실행 및 확인

관련글

티스토리툴바