Bài 34: Comprehensive Project - News/Blog Website (Part 3)

Base Template

Base Layout

{# templates/base.html #}<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>{% block title %}News Website{% endblock %}</title>        <!-- Bootstrap 5 CSS -->    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">        <!-- Font Awesome -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">        <!-- Custom CSS -->    <link rel="stylesheet" href="{% static 'css/style.css' %}">        {% block extra_css %}{% endblock %}</head><body>    <!-- Navigation -->    {% include 'includes/navbar.html' %}        <!-- Messages -->    {% if messages %}        <div class="container mt-3">            {% for message in messages %}                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">                    {{ message }}                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>                </div>            {% endfor %}        </div>    {% endif %}        <!-- Main Content -->    <main class="py-4">        {% block content %}{% endblock %}    </main>        <!-- Footer -->    {% include 'includes/footer.html' %}        <!-- Bootstrap JS -->    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>        <!-- Custom JS -->    <script src="{% static 'js/main.js' %}"></script>        {% block extra_js %}{% endblock %}</body></html>

{# templates/includes/navbar.html #}{% load static %} <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">    <div class="container">        <a class="navbar-brand" href="{% url 'articles:article_list' %}">            <i class="fas fa-newspaper"></i> News Website        </a>                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">            <span class="navbar-toggler-icon"></span>        </button>                <div class="collapse navbar-collapse" id="navbarNav">            <ul class="navbar-nav me-auto">                <li class="nav-item">                    <a class="nav-link" href="{% url 'articles:article_list' %}">Home</a>                </li>                <li class="nav-item">                    <a class="nav-link" href="{% url 'pages:about' %}">About</a>                </li>                <li class="nav-item">                    <a class="nav-link" href="{% url 'pages:contact' %}">Contact</a>                </li>            </ul>                        <!-- Search Form -->            <form class="d-flex me-3" method="get" action="{% url 'articles:article_search' %}">                <input class="form-control me-2" type="search" name="q" placeholder="Search articles..." value="{{ query }}">                <button class="btn btn-outline-light" type="submit">                    <i class="fas fa-search"></i>                </button>            </form>                        <!-- User Menu -->            <ul class="navbar-nav">                {% if user.is_authenticated %}                    <li class="nav-item dropdown">                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">                            {% if user.profile.avatar %}                                <img src="{{ user.profile.avatar.url }}" alt="{{ user.username }}" class="rounded-circle" style="width: 30px; height: 30px;">                            {% endif %}                            {{ user.username }}                        </a>                        <ul class="dropdown-menu dropdown-menu-end">                            <li><a class="dropdown-item" href="{% url 'accounts:profile' %}">                                <i class="fas fa-user"></i> Profile                            </a></li>                            <li><a class="dropdown-item" href="{% url 'articles:user_articles' %}">                                <i class="fas fa-file-alt"></i> My Articles                            </a></li>                            <li><a class="dropdown-item" href="{% url 'articles:article_create' %}">                                <i class="fas fa-plus"></i> Create Article                            </a></li>                            <li><hr class="dropdown-divider"></li>                            {% if user.is_staff %}                                <li><a class="dropdown-item" href="{% url 'admin:index' %}">                                    <i class="fas fa-cog"></i> Admin Panel                                </a></li>                                <li><hr class="dropdown-divider"></li>                            {% endif %}                            <li><a class="dropdown-item" href="{% url 'accounts:logout' %}">                                <i class="fas fa-sign-out-alt"></i> Logout                            </a></li>                        </ul>                    </li>                {% else %}                    <li class="nav-item">                        <a class="nav-link" href="{% url 'accounts:login' %}">                            <i class="fas fa-sign-in-alt"></i> Login                        </a>                    </li>                    <li class="nav-item">                        <a class="nav-link btn btn-primary text-white ms-2" href="{% url 'accounts:register' %}">                            Register                        </a>                    </li>                {% endif %}            </ul>        </div>    </div></nav>

{# templates/includes/footer.html #}<footer class="bg-dark text-white mt-5 py-4">    <div class="container">        <div class="row">            <div class="col-md-4 mb-3">                <h5>About Us</h5>                <p>Your trusted source for news and articles on various topics.</p>            </div>            <div class="col-md-4 mb-3">                <h5>Quick Links</h5>                <ul class="list-unstyled">                    <li><a href="{% url 'articles:article_list' %}" class="text-white">Home</a></li>                    <li><a href="{% url 'pages:about' %}" class="text-white">About</a></li>                    <li><a href="{% url 'pages:contact' %}" class="text-white">Contact</a></li>                </ul>            </div>            <div class="col-md-4 mb-3">                <h5>Follow Us</h5>                <div>                    <a href="#" class="text-white me-3"><i class="fab fa-facebook fa-2x"></i></a>                    <a href="#" class="text-white me-3"><i class="fab fa-twitter fa-2x"></i></a>                    <a href="#" class="text-white me-3"><i class="fab fa-instagram fa-2x"></i></a>                    <a href="#" class="text-white"><i class="fab fa-linkedin fa-2x"></i></a>                </div>            </div>        </div>        <hr class="bg-white">        <div class="text-center">            <p>&copy; 2024 News Website. All rights reserved.</p>        </div>    </div></footer>

Article Templates

Article List

{# templates/articles/article_list.html #}{% extends 'base.html' %}{% load static %} {% block title %}Latest Articles - News Website{% endblock %} {% block content %}<div class="container">    <div class="row">        <!-- Main Content -->        <div class="col-lg-8">            <h1 class="mb-4">Latest Articles</h1>                        <div class="row">                {% for article in articles %}                    <div class="col-md-6 mb-4">                        <div class="card h-100 shadow-sm">                            {% if article.featured_image %}                                <img src="{{ article.featured_image.url }}" class="card-img-top" alt="{{ article.title }}" style="height: 200px; object-fit: cover;">                            {% else %}                                <div class="card-img-top bg-secondary d-flex align-items-center justify-content-center" style="height: 200px;">                                    <i class="fas fa-image fa-3x text-white"></i>                                </div>                            {% endif %}                                                        <div class="card-body">                                <span class="badge bg-primary mb-2">{{ article.category.name }}</span>                                                                <h5 class="card-title">                                    <a href="{{ article.get_absolute_url }}" class="text-decoration-none text-dark">                                        {{ article.title }}                                    </a>                                </h5>                                                                <p class="card-text text-muted">{{ article.excerpt|truncatewords:20 }}</p>                                                                <div class="d-flex justify-content-between align-items-center">                                    <small class="text-muted">                                        <i class="fas fa-user"></i> {{ article.author.username }}                                    </small>                                    <small class="text-muted">                                        <i class="fas fa-calendar"></i> {{ article.published_at|date:"M d, Y" }}                                    </small>                                </div>                                                                <div class="mt-2">                                    <small class="text-muted">                                        <i class="fas fa-eye"></i> {{ article.views }}                                        <i class="fas fa-comments ms-2"></i> {{ article.comment_count }}                                    </small>                                </div>                            </div>                                                        <div class="card-footer bg-white">                                <a href="{{ article.get_absolute_url }}" class="btn btn-sm btn-outline-primary">                                    Read More <i class="fas fa-arrow-right"></i>                                </a>                            </div>                        </div>                    </div>                {% empty %}                    <div class="col-12">                        <div class="alert alert-info">No articles found.</div>                    </div>                {% endfor %}            </div>                        <!-- Pagination -->            {% if is_paginated %}                <nav aria-label="Page navigation">                    <ul class="pagination justify-content-center">                        {% if page_obj.has_previous %}                            <li class="page-item">                                <a class="page-link" href="?page=1">First</a>                            </li>                            <li class="page-item">                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>                            </li>                        {% endif %}                                                <li class="page-item active">                            <span class="page-link">                                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}                            </span>                        </li>                                                {% if page_obj.has_next %}                            <li class="page-item">                                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>                            </li>                            <li class="page-item">                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last</a>                            </li>                        {% endif %}                    </ul>                </nav>            {% endif %}        </div>                <!-- Sidebar -->        <div class="col-lg-4">            {% include 'includes/sidebar.html' %}        </div>    </div></div>{% endblock %}

Article Detail

{# templates/articles/article_detail.html #}{% extends 'base.html' %}{% load static %} {% block title %}{{ article.title }} - News Website{% endblock %} {% block content %}<div class="container">    <div class="row">        <!-- Main Content -->        <div class="col-lg-8">            <!-- Article Header -->            <article class="mb-4">                <h1 class="mb-3">{{ article.title }}</h1>                                <div class="mb-3">                    <span class="badge bg-primary">{{ article.category.name }}</span>                    {% for tag in article.tags.all %}                        <span class="badge bg-secondary">{{ tag.name }}</span>                    {% endfor %}                </div>                                <div class="text-muted mb-3">                    <img src="{{ article.author.profile.avatar.url }}" alt="{{ article.author.username }}" class="rounded-circle me-2" style="width: 40px; height: 40px;">                    By <strong>{{ article.author.get_full_name|default:article.author.username }}</strong>                    | {{ article.published_at|date:"F d, Y" }}                    | <i class="fas fa-clock"></i> {{ article.reading_time }}                    | <i class="fas fa-eye"></i> {{ article.views }} views                </div>                                <!-- Featured Image -->                {% if article.featured_image %}                    <img src="{{ article.featured_image.url }}" alt="{{ article.title }}" class="img-fluid mb-4 rounded">                {% endif %}                                <!-- Article Content -->                <div class="article-content">                    {{ article.content|safe }}                </div>                                <!-- Action Buttons -->                {% if user == article.author or user.is_staff %}                    <div class="mt-4">                        <a href="{% url 'articles:article_update' article.slug %}" class="btn btn-primary">                            <i class="fas fa-edit"></i> Edit                        </a>                        <a href="{% url 'articles:article_delete' article.slug %}" class="btn btn-danger">                            <i class="fas fa-trash"></i> Delete                        </a>                    </div>                {% endif %}            </article>                        <!-- Related Articles -->            {% if related_articles %}                <div class="mb-4">                    <h4>Related Articles</h4>                    <div class="row">                        {% for related in related_articles %}                            <div class="col-md-4 mb-3">                                <div class="card">                                    {% if related.featured_image %}                                        <img src="{{ related.featured_image.url }}" class="card-img-top" alt="{{ related.title }}" style="height: 150px; object-fit: cover;">                                    {% endif %}                                    <div class="card-body">                                        <h6 class="card-title">                                            <a href="{{ related.get_absolute_url }}" class="text-decoration-none">                                                {{ related.title|truncatewords:10 }}                                            </a>                                        </h6>                                    </div>                                </div>                            </div>                        {% endfor %}                    </div>                </div>            {% endif %}                        <!-- Comments Section -->            <div class="card mb-4">                <div class="card-header">                    <h4>Comments ({{ article.comment_count }})</h4>                </div>                <div class="card-body">                    <!-- Comment Form -->                    {% if user.is_authenticated %}                        <form method="post" action="{% url 'articles:comment_create' article.slug %}" class="mb-4">                            {% csrf_token %}                            {{ comment_form.as_p }}                            <button type="submit" class="btn btn-primary">                                <i class="fas fa-comment"></i> Post Comment                            </button>                        </form>                    {% else %}                        <div class="alert alert-info">                            Please <a href="{% url 'accounts:login' %}">login</a> to leave a comment.                        </div>                    {% endif %}                                        <!-- Comments List -->                    {% for comment in comments %}                        <div class="card mb-3">                            <div class="card-body">                                <div class="d-flex">                                    <img src="{{ comment.user.profile.avatar.url }}" alt="{{ comment.user.username }}" class="rounded-circle me-3" style="width: 50px; height: 50px;">                                    <div class="grow">                                        <h6 class="mb-1">{{ comment.user.username }}</h6>                                        <small class="text-muted">{{ comment.created_at|timesince }} ago</small>                                        <p class="mt-2">{{ comment.content }}</p>                                                                                {% if user.is_authenticated %}                                            <button class="btn btn-sm btn-outline-primary reply-btn" data-comment-id="{{ comment.id }}">                                                <i class="fas fa-reply"></i> Reply                                            </button>                                        {% endif %}                                                                                {% if user == comment.user or user.is_staff %}                                            <form method="post" action="{% url 'articles:comment_delete' comment.pk %}" class="d-inline">                                                {% csrf_token %}                                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this comment?')">                                                    <i class="fas fa-trash"></i> Delete                                                </button>                                            </form>                                        {% endif %}                                                                                <!-- Nested Replies -->                                        {% for reply in comment.children.all %}                                            <div class="card mt-2 ms-4">                                                <div class="card-body">                                                    <div class="d-flex">                                                        <img src="{{ reply.user.profile.avatar.url }}" alt="{{ reply.user.username }}" class="rounded-circle me-2" style="width: 40px; height: 40px;">                                                        <div>                                                            <h6 class="mb-1">{{ reply.user.username }}</h6>                                                            <small class="text-muted">{{ reply.created_at|timesince }} ago</small>                                                            <p class="mt-2">{{ reply.content }}</p>                                                        </div>                                                    </div>                                                </div>                                            </div>                                        {% endfor %}                                    </div>                                </div>                            </div>                        </div>                    {% empty %}                        <p class="text-muted">No comments yet. Be the first to comment!</p>                    {% endfor %}                </div>            </div>        </div>                <!-- Sidebar -->        <div class="col-lg-4">            {% include 'includes/sidebar.html' %}        </div>    </div></div>{% endblock %}

{# templates/includes/sidebar.html #}<div class="card mb-4">    <div class="card-header bg-dark text-white">        <h5 class="mb-0">Categories</h5>    </div>    <div class="card-body">        <ul class="list-unstyled mb-0">            {% for category in categories %}                <li class="mb-2">                    <a href="{{ category.get_absolute_url }}" class="text-decoration-none">                        {{ category.name }}                        <span class="badge bg-secondary float-end">{{ category.article_count }}</span>                    </a>                </li>            {% endfor %}        </ul>    </div></div> <div class="card mb-4">    <div class="card-header bg-dark text-white">        <h5 class="mb-0">Popular Tags</h5>    </div>    <div class="card-body">        {% for tag in popular_tags %}            <a href="{{ tag.get_absolute_url }}" class="badge bg-primary me-1 mb-1">                {{ tag.name }} ({{ tag.article_count }})            </a>        {% endfor %}    </div></div> <div class="card mb-4">    <div class="card-header bg-dark text-white">        <h5 class="mb-0">Popular Articles</h5>    </div>    <div class="card-body">        <ul class="list-unstyled mb-0">            {% for article in popular_articles %}                <li class="mb-3">                    <a href="{{ article.get_absolute_url }}" class="text-decoration-none">                        {{ article.title|truncatewords:10 }}                    </a>                    <br>                    <small class="text-muted">                        <i class="fas fa-eye"></i> {{ article.views }} views                    </small>                </li>            {% endfor %}        </ul>    </div></div>

Admin Customization

Article Admin

# articles/admin.pyfrom django.contrib import adminfrom django.utils.html import format_htmlfrom .models import Category, Tag, Article, Comment @admin.register(Category)class CategoryAdmin(admin.ModelAdmin):    list_display = ['name', 'slug', 'article_count', 'created_at']    prepopulated_fields = {'slug': ('name',)}    search_fields = ['name']    readonly_fields = ['created_at']        def article_count(self, obj):        return obj.article_count    article_count.short_description = 'Articles' @admin.register(Tag)class TagAdmin(admin.ModelAdmin):    list_display = ['name', 'slug', 'article_count', 'created_at']    prepopulated_fields = {'slug': ('name',)}    search_fields = ['name']    readonly_fields = ['created_at']        def article_count(self, obj):        return obj.article_count    article_count.short_description = 'Articles' @admin.register(Article)class ArticleAdmin(admin.ModelAdmin):    list_display = ['title', 'author', 'category', 'status', 'views', 'published_at', 'image_preview']    list_filter = ['status', 'category', 'created_at', 'published_at']    search_fields = ['title', 'content', 'author__username']    prepopulated_fields = {'slug': ('title',)}    filter_horizontal = ['tags']    date_hierarchy = 'published_at'    ordering = ['-created_at']    readonly_fields = ['views', 'created_at', 'updated_at', 'reading_time', 'image_preview']        fieldsets = (        ('Article Information', {            'fields': ('title', 'slug', 'author', 'category', 'tags')        }),        ('Content', {            'fields': ('excerpt', 'content', 'featured_image', 'image_preview')        }),        ('Publishing', {            'fields': ('status', 'published_at')        }),        ('Statistics', {            'fields': ('views', 'reading_time', 'created_at', 'updated_at'),            'classes': ('collapse',)        }),    )        def image_preview(self, obj):        if obj.featured_image:            return format_html('<img src="{}" style="max-height: 100px; max-width: 200px;" />', obj.featured_image.url)        return "No image"    image_preview.short_description = 'Image Preview'        def save_model(self, request, obj, form, change):        if not change:  # New article            obj.author = request.user        super().save_model(request, obj, form, change) @admin.register(Comment)class CommentAdmin(admin.ModelAdmin):    list_display = ['user', 'article', 'content_preview', 'approved', 'created_at']    list_filter = ['approved', 'created_at']    search_fields = ['user__username', 'article__title', 'content']    actions = ['approve_comments', 'disapprove_comments']    readonly_fields = ['created_at', 'updated_at']        def content_preview(self, obj):        return obj.content[:50] + '...' if len(obj.content) > 50 else obj.content    content_preview.short_description = 'Content'        def approve_comments(self, request, queryset):        queryset.update(approved=True)        self.message_user(request, f'{queryset.count()} comments approved.')    approve_comments.short_description = 'Approve selected comments'        def disapprove_comments(self, request, queryset):        queryset.update(approved=False)        self.message_user(request, f'{queryset.count()} comments disapproved.')    disapprove_comments.short_description = 'Disapprove selected comments'

User Profile Admin

# accounts/admin.pyfrom django.contrib import adminfrom django.contrib.auth.admin import UserAdmin as BaseUserAdminfrom django.contrib.auth.models import Userfrom .models import UserProfile class UserProfileInline(admin.StackedInline):    model = UserProfile    can_delete = False    verbose_name_plural = 'Profile'    fields = ['bio', 'avatar', 'website', 'twitter', 'facebook', 'linkedin'] class UserAdmin(BaseUserAdmin):    inlines = [UserProfileInline]    list_display = ['username', 'email', 'first_name', 'last_name', 'is_staff', 'date_joined'] # Re-register UserAdminadmin.site.unregister(User)admin.site.register(User, UserAdmin) @admin.register(UserProfile)class UserProfileAdmin(admin.ModelAdmin):    list_display = ['user', 'website', 'created_at']    search_fields = ['user__username', 'user__email']    readonly_fields = ['created_at', 'updated_at']

Contact Message Admin

# pages/admin.pyfrom django.contrib import adminfrom .models import ContactMessage @admin.register(ContactMessage)class ContactMessageAdmin(admin.ModelAdmin):    list_display = ['name', 'email', 'subject', 'read', 'created_at']    list_filter = ['read', 'created_at']    search_fields = ['name', 'email', 'subject', 'message']    actions = ['mark_as_read', 'mark_as_unread']    readonly_fields = ['created_at']        def mark_as_read(self, request, queryset):        queryset.update(read=True)        self.message_user(request, f'{queryset.count()} messages marked as read.')    mark_as_read.short_description = 'Mark selected as read'        def mark_as_unread(self, request, queryset):        queryset.update(read=False)        self.message_user(request, f'{queryset.count()} messages marked as unread.')    mark_as_unread.short_description = 'Mark selected as unread'

Custom CSS

/* static/css/style.css */:root {    --primary-color: #007bff;    --secondary-color: #6c757d;    --dark-color: #343a40;} body {    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    min-height: 100vh;    display: flex;    flex-direction: column;} main {    flex: 1;} .article-content {    font-size: 1.1rem;    line-height: 1.8;} .article-content img {    max-width: 100%;    height: auto;    border-radius: 8px;    margin: 20px 0;} .article-content h2,.article-content h3,.article-content h4 {    margin-top: 30px;    margin-bottom: 15px;} .article-content p {    margin-bottom: 20px;} .article-content blockquote {    border-left: 4px solid var(--primary-color);    padding-left: 20px;    margin: 20px 0;    font-style: italic;    color: var(--secondary-color);} .card {    transition: transform 0.3s ease, box-shadow 0.3s ease;} .card:hover {    transform: translateY(-5px);    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);} .navbar-brand {    font-size: 1.5rem;    font-weight: bold;} footer a {    text-decoration: none;    transition: opacity 0.3s;} footer a:hover {    opacity: 0.8;} .badge {    font-size: 0.85rem;    padding: 5px 10px;} /* Responsive */@media (max-width: 768px) {    .article-content {        font-size: 1rem;    }        .navbar-brand {        font-size: 1.2rem;    }}

Bài Tập

Exercise 1: Complete Templates

Task: Implement all templates with Bootstrap:

# Requirements:# 1. Base template with navbar and footer# 2. Article list template with pagination# 3. Article detail template with comments# 4. Category/tag detail templates# 5. Search results template# 6. User profile templates# 7. Authentication templates (login, register)# 8. Contact form template# 9. Responsive design# 10. Test all templates

Exercise 2: Admin Customization

Task: Customize Django admin:

# Requirements:# 1. Custom list_display for all models# 2. Search and filter options# 3. Inline editing where appropriate# 4. Custom actions# 5. Readonly fields# 6. Image previews# 7. prepopulated_fields for slugs# 8. Custom fieldsets# 9. Date hierarchy# 10. Test admin interface

Tài Liệu Tham Khảo

Previous: Bài 34.2: Views and Forms | Next: Bài 34.4: Docker and Deployment

#bootstrap

Comprehensive Project - News/Blog Website (Part 3)