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

Project Overview

Xây dựng website tin tức/blog hoàn chỉnh với Django.

Features List

✅ User Features:- User registration và login- User profile với avatar- Password change- Profile editing ✅ Article Features:- Create, read, update, delete articles- Rich text editor (WYSIWYG)- Categories và tags- Featured images- Draft và published status- SEO-friendly URLs (slugs)- View counter- Reading time estimation ✅ Comment System:- Nested comments (replies)- Comment moderation- User comments management ✅ Search & Filter:- Search articles by title/content- Filter by category- Filter by tag- Sort by date/views ✅ Admin Features:- Custom admin dashboard- Article management- User management- Comment moderation- Category/tag management ✅ Additional Features:- Pagination- Contact form with email- Responsive design (Bootstrap 5)- Image upload với validation- SEO optimization- Docker deployment

Technology Stack

Backend:- Django 5.0- PostgreSQL 15- Gunicorn Frontend:- HTML5, CSS3, JavaScript- Bootstrap 5- CKEditor (WYSIWYG) Deployment:- Docker- Docker Compose- Nginx Tools:- python-decouple (environment variables)- Pillow (image processing)- django-ckeditor (rich text editor)- whitenoise (static files)

Project Structure

news_website/├── news_website/           # Project settings│   ├── __init__.py│   ├── settings.py│   ├── urls.py│   └── wsgi.py├── articles/              # Articles app│   ├── migrations/│   ├── templates/│   ├── __init__.py│   ├── admin.py│   ├── forms.py│   ├── models.py│   ├── urls.py│   └── views.py├── accounts/              # User accounts app│   ├── migrations/│   ├── templates/│   ├── __init__.py│   ├── admin.py│   ├── forms.py│   ├── models.py│   ├── urls.py│   └── views.py├── pages/                 # Static pages app│   ├── templates/│   ├── __init__.py│   ├── forms.py│   ├── urls.py│   └── views.py├── templates/             # Global templates│   ├── base.html│   └── includes/├── static/                # Static files│   ├── css/│   ├── js/│   └── images/├── media/                 # User uploads│   ├── articles/│   └── profiles/├── manage.py├── requirements.txt├── Dockerfile├── docker-compose.yml├── .dockerignore├── .env.example├── .gitignore└── README.md

Database Design

ERD (Entity Relationship Diagram)

User├── id (PK)├── username├── email├── password└── UserProfile    ├── id (PK)    ├── user_id (FK to User)    ├── bio    ├── avatar    ├── website    └── social_links Category├── id (PK)├── name├── slug└── description Tag├── id (PK)├── name└── slug Article├── id (PK)├── title├── slug├── content├── excerpt├── featured_image├── author_id (FK to User)├── category_id (FK to Category)├── status (draft/published)├── views├── created_at├── updated_at└── tags (M2M to Tag) Comment├── id (PK)├── article_id (FK to Article)├── user_id (FK to User)├── parent_id (FK to Comment, nullable)├── content├── approved└── created_at ContactMessage├── id (PK)├── name├── email├── subject├── message└── created_at

Models Implementation

User Profile Model

# accounts/models.pyfrom django.db import modelsfrom django.contrib.auth.models import Userfrom django.db.models.signals import post_savefrom django.dispatch import receiverfrom PIL import Image class UserProfile(models.Model):    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='profile')    bio = models.TextField(max_length=500, blank=True)    avatar = models.ImageField(upload_to='profiles/', default='profiles/default.png')    website = models.URLField(blank=True)    twitter = models.CharField(max_length=100, blank=True)    facebook = models.CharField(max_length=100, blank=True)    linkedin = models.CharField(max_length=100, blank=True)    created_at = models.DateTimeField(auto_now_add=True)    updated_at = models.DateTimeField(auto_now=True)        class Meta:        verbose_name = 'User Profile'        verbose_name_plural = 'User Profiles'        def __str__(self):        return f'{self.user.username} Profile'        def save(self, *args, **kwargs):        super().save(*args, **kwargs)                # Resize avatar        if self.avatar:            img = Image.open(self.avatar.path)            if img.height > 300 or img.width > 300:                output_size = (300, 300)                img.thumbnail(output_size)                img.save(self.avatar.path) # Automatically create profile when user is created@receiver(post_save, sender=User)def create_user_profile(sender, instance, created, **kwargs):    if created:        UserProfile.objects.create(user=instance) @receiver(post_save, sender=User)def save_user_profile(sender, instance, **kwargs):    instance.profile.save()

Category Model

# articles/models.pyfrom django.db import modelsfrom django.utils.text import slugifyfrom django.urls import reverse class Category(models.Model):    name = models.CharField(max_length=100, unique=True)    slug = models.SlugField(max_length=100, unique=True, blank=True)    description = models.TextField(blank=True)    created_at = models.DateTimeField(auto_now_add=True)        class Meta:        verbose_name = 'Category'        verbose_name_plural = 'Categories'        ordering = ['name']        def __str__(self):        return self.name        def save(self, *args, **kwargs):        if not self.slug:            self.slug = slugify(self.name)        super().save(*args, **kwargs)        def get_absolute_url(self):        return reverse('articles:category_detail', kwargs={'slug': self.slug})        @property    def article_count(self):        return self.articles.filter(status='published').count()

Tag Model

class Tag(models.Model):    name = models.CharField(max_length=50, unique=True)    slug = models.SlugField(max_length=50, unique=True, blank=True)    created_at = models.DateTimeField(auto_now_add=True)        class Meta:        verbose_name = 'Tag'        verbose_name_plural = 'Tags'        ordering = ['name']        def __str__(self):        return self.name        def save(self, *args, **kwargs):        if not self.slug:            self.slug = slugify(self.name)        super().save(*args, **kwargs)        def get_absolute_url(self):        return reverse('articles:tag_detail', kwargs={'slug': self.slug})        @property    def article_count(self):        return self.articles.filter(status='published').count()

Article Model

from django.contrib.auth.models import Userfrom django.utils import timezonefrom ckeditor.fields import RichTextFieldimport readtime class Article(models.Model):    STATUS_CHOICES = (        ('draft', 'Draft'),        ('published', 'Published'),    )        title = models.CharField(max_length=200)    slug = models.SlugField(max_length=200, unique=True, blank=True)    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='articles')    category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True, related_name='articles')    tags = models.ManyToManyField(Tag, related_name='articles', blank=True)    excerpt = models.TextField(max_length=300, help_text='Short description for preview')    content = RichTextField()    featured_image = models.ImageField(upload_to='articles/', blank=True)    status = models.CharField(max_length=10, choices=STATUS_CHOICES, default='draft')    views = models.PositiveIntegerField(default=0)    created_at = models.DateTimeField(auto_now_add=True)    updated_at = models.DateTimeField(auto_now=True)    published_at = models.DateTimeField(null=True, blank=True)        class Meta:        verbose_name = 'Article'        verbose_name_plural = 'Articles'        ordering = ['-created_at']        indexes = [            models.Index(fields=['-created_at']),            models.Index(fields=['slug']),            models.Index(fields=['status']),        ]        def __str__(self):        return self.title        def save(self, *args, **kwargs):        if not self.slug:            self.slug = slugify(self.title)            # Ensure unique slug            counter = 1            temp_slug = self.slug            while Article.objects.filter(slug=temp_slug).exists():                temp_slug = f'{self.slug}-{counter}'                counter += 1            self.slug = temp_slug                # Set published_at when status changes to published        if self.status == 'published' and not self.published_at:            self.published_at = timezone.now()                super().save(*args, **kwargs)        def get_absolute_url(self):        return reverse('articles:article_detail', kwargs={'slug': self.slug})        @property    def reading_time(self):        """Estimate reading time"""        result = readtime.of_text(self.content)        return result.text        @property    def comment_count(self):        return self.comments.filter(approved=True).count()        def increment_views(self):        """Increment view counter"""        self.views += 1        self.save(update_fields=['views'])

Comment Model

class Comment(models.Model):    article = models.ForeignKey(Article, on_delete=models.CASCADE, related_name='comments')    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='comments')    parent = models.ForeignKey('self', on_delete=models.CASCADE, null=True, blank=True, related_name='replies')    content = models.TextField(max_length=1000)    approved = models.BooleanField(default=True)    created_at = models.DateTimeField(auto_now_add=True)    updated_at = models.DateTimeField(auto_now=True)        class Meta:        verbose_name = 'Comment'        verbose_name_plural = 'Comments'        ordering = ['created_at']        def __str__(self):        return f'Comment by {self.user.username} on {self.article.title}'        @property    def is_parent(self):        return self.parent is None        @property    def children(self):        return Comment.objects.filter(parent=self)

Contact Message Model

# pages/models.pyfrom django.db import models class ContactMessage(models.Model):    name = models.CharField(max_length=100)    email = models.EmailField()    subject = models.CharField(max_length=200)    message = models.TextField()    created_at = models.DateTimeField(auto_now_add=True)    read = models.BooleanField(default=False)        class Meta:        verbose_name = 'Contact Message'        verbose_name_plural = 'Contact Messages'        ordering = ['-created_at']        def __str__(self):        return f'{self.name} - {self.subject}'

Install Dependencies

# requirements.txtDjango==5.0.1psycopg2-binary==2.9.9Pillow==10.2.0python-decouple==3.8dj-database-url==2.1.0django-ckeditor==6.7.0readtime==3.0.0whitenoise==6.6.0gunicorn==21.2.0

# Install dependenciespip install -r requirements.txt

Create Django Project

# Create projectdjango-admin startproject news_websitecd news_website # Create appspython manage.py startapp articlespython manage.py startapp accountspython manage.py startapp pages # Add to INSTALLED_APPS in settings.pyINSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',        # Third-party apps    'ckeditor',        # Local apps    'articles',    'accounts',    'pages',] # CKEditor configurationCKEDITOR_CONFIGS = {    'default': {        'toolbar': 'full',        'height': 300,        'width': '100%',    },} # Static filesSTATIC_URL = '/static/'STATIC_ROOT = BASE_DIR / 'staticfiles'STATICFILES_DIRS = [BASE_DIR / 'static'] # Media filesMEDIA_URL = '/media/'MEDIA_ROOT = BASE_DIR / 'media' # Create directoriesmkdir -p static/css static/js static/imagesmkdir -p media/articles media/profilesmkdir -p templates/includes

Run Migrations

# Make migrationspython manage.py makemigrations # Apply migrationspython manage.py migrate # Create superuserpython manage.py createsuperuser

Bài Tập

Exercise 1: Complete Models

Task: Implement all models with proper relationships:

# Requirements:# 1. Create UserProfile model with OneToOne to User# 2. Create Category model with slug# 3. Create Tag model with slug# 4. Create Article model with all fields# 5. Create Comment model with nested support# 6. Add proper Meta options# 7. Add __str__ methods# 8. Add get_absolute_url methods# 9. Add custom properties (reading_time, comment_count)# 10. Test all models in admin

Exercise 2: Model Methods

Task: Add useful methods to models:

# Requirements:# 1. Article.increment_views()# 2. Article.get_related_articles()# 3. Category.get_popular_articles()# 4. Tag.get_related_tags()# 5. Comment.get_all_replies()# 6. UserProfile.get_article_count()# 7. Test all methods

Tài Liệu Tham Khảo

Previous: Bài 33: Deploying with Docker | Next: Bài 34.2: Views and Templates

#news-website

Comprehensive Project - News/Blog Website (Part 1)