DEV Community

Cover image for Week 1 - Getting Started with My Blog App
Jaylord Vhan Fabor
Jaylord Vhan Fabor

Posted on

Week 1 - Getting Started with My Blog App

They say that when you document your learning, struggles, and etc., you will gain knowledge more. So from this day, 15th of July, 2024, I decided to document my progress for learning Django by developing Blog App without using ChatGPT, Gemini, and other AI chatbots that can generate code.

These past few years, I've been creating applications with the help of ChatGPT for generating code for me, and the outcome was great, I was able to build the applications. however, I depend too much on ChatGPT and fail to deeply understand the concepts of programming. I feel that I do not know how to code from scratch and useless without the help of ChatGPT when developing applications. So from this point onward, I will do my best to read and understand from documentation to build this Simple Blog App.

This week, I started my journey of learning Django by creating a simple blog app. My goal is to document each step of the process and show my experiences and learnings.

Setting Up the Project

Step 1: Create a virtual Environment
First, I created a virtual environment to manage project dependencies:

python -m venv <myenv> 
source myenv/bin/activate # On Windows use `myenv\Scripts\activate`
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Django and Create New Django Project
Next, I installed django and create new project called blog_app

pip install django
# Create new django project
django-admin startproject blog_app
cd blog_app
Enter fullscreen mode Exit fullscreen mode

Create User's App

Step 1: Setting Up the App
I created first the, User authentication

# Either of the two
django-admin startapp user
python manage.py startapp user
Enter fullscreen mode Exit fullscreen mode

I then added the new app to the INSTALLED_APPS list in the settings.py.

Step 2: Creating User's Login and SignUp forms
I created forms.py file in the users app folder. I make use of the Django built-in AuthenticationForm and UserCreationForm by inheriting it to the custom class. I think this way, I can customize later the users information.

# user/forms.py
from django.contrib.auth.forms import AuthenticationForm, UserCreationForm
from django.forms.widgets import PasswordInput, TextInput
from django.forms.fields import EmailField
from django import forms


class LoginForm(AuthenticationForm):
    username = forms.CharField(widget=TextInput())
    password = forms.CharField(widget=PasswordInput())


class SignUpForm(UserCreationForm):
    username = forms.CharField(max_length=150, required=True)
    email = forms.EmailField(required=True)
    password1 = forms.CharField(widget=forms.PasswordInput, required=True)
    password2 = forms.CharField(widget=forms.PasswordInput, required=True)

    def save(self, commit=True):
        user = super().save(commit=False)
        user.email = self.cleaned_data["email"]
        if commit:
            user.save()
        return user
Enter fullscreen mode Exit fullscreen mode

Step 3: Create views.py
I then created a views for the home, login, logout and signup. I will not include how I created the html, css and javascript in this project. If you want to check I will link my Github repository below.

# user/views.py
from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.contrib.auth import logout, authenticate, login
from .forms import *
from django.contrib.auth.models import auth

# I use the decorator `login_required` in order for the application to navigate to the login page if the user has not login or sign up yet.
@login_required
def homeView(request):
    return render(request, "home.html")

def loginView(request):
    '''
    First, I initialized my custom LoginForm then it will check the request of the user. 
    The user will then input it's username and password. Then it will check if the form is valid then it will get the user's input credential and it will authenticate it by using the built-in Django `authenticate` method. It will then check if the user correctly input it's credential and it will call the `login` method of Django and redirect the user to the homepage.
    '''
    form = LoginForm()
    if request.method == "POST":
       form = LoginForm(request, data=request.POST)
        if form.is_valid():
            username = request.POST.get("username")
            password = request.POST.get("password")
            user = authenticate(request, username=username, password=password)
            if user is not None:
                auth.login(request, user)
                return redirect("user:home")
    return render(request, "login.html", {"form": form})

def signupView(request):
    '''
    We will get the request from the user and check if the form is valid the we wills ave the user information in our SignUpForm
    '''
    if request.method == "POST":
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect("user:login")
    else:
        form = SignUpForm()
    return render(request, "signup.html", {"form": form})

def logoutView(request):
    '''
    I use the Django built-in `logout` method to logut the user
    '''
    logout(request)
    return redirect("user:login")
Enter fullscreen mode Exit fullscreen mode

Step 4: Added a urls
I then added the urls for the user. First I added a home/empty urls in the blog_app/urls.py.

# blog_app/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("", include("user.urls", "user")),
    path("admin/", admin.site.urls),
]
Enter fullscreen mode Exit fullscreen mode

Then I added created a urls.py in the user directory.

# user/urls.py
from django.urls import path, include
from .views import *

app_name = "user"

urlpatterns = [
    path("", homeView, name="home"),
    path("signup/", signupView, name="sign-up"),
    path("login/", loginView, name="login"),
    path("logout/", logoutView, name="logout"),
]
Enter fullscreen mode Exit fullscreen mode

I created a variable app_name and assign the user. In this, as you can see in the views.py above, instead of templates/html.py I use user:login. I learned that with this, if the I will create a large-scale project, I can easily determine what app the function of views I redirect into.

Challenges and Learnings

This week, I encountered a few challenges, such as:

  • Understanding Django's project structure
  • Creating Django app and customizing forms

However, I learned a lot about the basics of Django and how to structure a project. I also realize the importance of reading the documentation thoroughly. Well, I still cannot stop using ChatGPT for asking questions for the error I encountered but I prompt it so that it won't give me an example code rather just plain explanations.

Next Week Goals

I plan to:

  1. Set up the admin panel for the Blog posts
  2. Create views and templates for listing and displaying blog posts
  3. Implement so that the user can post a blog.

Github - SimpleBlogApp

Stay tuned for next week's update!

Top comments (0)