django2

 আমি windows 10 use করি।এখন আমি আমার desktop এ djnagosite নামে একটা ফোল্ডার এ তোমার ইচ্ছামত নাম দিয়ে একটা ৩ পেইজের ওয়েবসাইট বানিয়ে দাও। আমি windows powershell and vs code editor ইউজ করতে চাই। একেবারে শূন্য থেকে খুব ভালো করে সহজ করে শিখিয়ে দাও কোডের ব্যাখ্যা সহ ।আমার লক্ষ্য django দিয়ে যেকোনো এডুকেশন ওয়েবসাইট এবং ই কমার্স যেন বানাতে পারি,এখন শুরু করো। কোন ভুল করবে না। একেবারে সঠিক তথ্য ও কোড দিবে যেন ভবিষ্যতে vps এ সাইট বানাতে পারি djnago দিয়ে

অবশ্যই। আমরা একদম শূন্য থেকে শুরু করব এবং এমনভাবে করব যেন আজকের ছোট ৩-পেজের সাইটটাই পরে ধীরে ধীরে Education Platform → Login → Course → Exam → Payment → E-commerce → VPS Deployment-এ রূপ দিতে পারো।

তুমি যেহেতু Windows 10 + PowerShell + VS Code ব্যবহার করতে চাও, আমরা আপাতত WSL বাদ দিয়ে Windows-এই কাজ করব। এটা Django শেখার জন্য সম্পূর্ণ ঠিক পথ। Django-এর বর্তমান 6.1 Windows 10-এ ব্যবহার করা যায় এবং Python 3.12–3.14 সমর্থন করে।

আজ আমরা বানাব:

Project: EduMagic
Folder: Desktop\djnagosite
Pages:

1. 🏠 Home
2. 📚 Courses
3. 📞 About

আর আমরা শিখব:

PowerShell → Virtual Environment → Django Project → Django App → URL → View → Template → CSS

এগুলোই Django-এর foundation।

---

🟢 STEP 1 — PowerShell খুলুন

Windows Start Menu থেকে PowerShell খুলুন।

তারপর লিখুন:

cd "$HOME\OneDrive\Desktop"

Enter চাপুন।

তারপর:

mkdir djnagosite

তারপর:

cd djnagosite

এখন দেখতে হবে:

PS C:\Users\newsp\OneDrive\Desktop\djnagosite>

আপনার Desktop যদি OneDrive-এর মধ্যে না থাকে, তাহলে cd "$HOME\Desktop" ব্যবহার করতে হবে। যেহেতু আপনার আগের Windows setup-এ Desktop OneDrive-এর মধ্যে ছিল, প্রথম command-টাই আগে চেষ্টা করুন।

---

🟢 STEP 2 — Python আছে কিনা পরীক্ষা

PowerShell-এ:

python --version

তোমার আগে Python 3.14.x ছিল, তাই এমন কিছু আসতে পারে:

Python 3.14.3

তারপর:

python -m pip --version

দুটো command-ই কাজ করলে আমরা পরের ধাপে যাব।

---

🟢 STEP 3 — Virtual Environment বানাব

এটা খুব গুরুত্বপূর্ণ।

আমরা পুরো কম্পিউটারে Django install করব না। এই project-এর জন্য আলাদা environment বানাব।

PowerShell:

python -m venv venv

কিছুক্ষণ লাগতে পারে।

তারপর activate:

.\venv\Scripts\Activate.ps1

সফল হলে PowerShell-এর শুরুতে এমন দেখাবে:

(venv) PS C:\Users\newsp\OneDrive\Desktop\djnagosite>

venv কী?

ধরো তোমার কম্পিউটারে ১০টা Django project আছে।

একটার Django/package version অন্যটার থেকে আলাদা হতে পারে।

venv প্রতিটি project-এর জন্য আলাদা Python environment তৈরি করে।

এটা professional Django development-এর খুব গুরুত্বপূর্ণ অভ্যাস।

---

🟢 STEP 4 — Django install

এখন venv active থাকা অবস্থায়:

python -m pip install --upgrade pip

তারপর:

python -m pip install Django

শেষ হলে পরীক্ষা:

python -m django --version

বর্তমান stable Django 6.1 হলে:

6.1

এর মতো দেখাবে। Django-এর official documentation-ও python -m django --version দিয়ে version পরীক্ষা করতে বলে।

---

🟢 STEP 5 — Django Project তৈরি

এখন সবচেয়ে গুরুত্বপূর্ণ command:

django-admin startproject EduMagic .

শেষের . খুব গুরুত্বপূর্ণ।

এখানে:

EduMagic

হলো Django project-এর নাম।

. মানে:

বর্তমান djnagosite folder-এর মধ্যেই project তৈরি করো।

Django-এর official startproject command project structure তৈরি করে।

এখন folder structure হবে:

djnagosite
│
├── venv
│
├── manage.py
│
└── EduMagic
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    ├── asgi.py
    └── wsgi.py

এগুলোর কাজ কী?

File	কাজ
manage.py	Django project control করার command tool
settings.py	পুরো website-এর configuration
urls.py	কোন URL কোথায় যাবে
wsgi.py	traditional production server entry point
asgi.py	ASGI server entry point
__init__.py	Python package হিসেবে directory-কে চিহ্নিত করে

Django নিজেও এই project structure তৈরি করে।

---

🟢 STEP 6 — প্রথমবার Django চালাও

PowerShell:

python manage.py migrate

এটা Django-এর default database tables তৈরি করবে।

তারপর:

python manage.py runserver

তুমি এমন কিছু দেখতে পাবে:

Starting development server at http://127.0.0.1:8000/

Browser খুলে যাও:

http://127.0.0.1:8000/

Django-এর default page দেখতে পাবে।

এখন তুমি officially তোমার নিজের Django development server চালিয়ে ফেলেছ। 🎉

Django-এর official tutorial-এও python manage.py runserver ব্যবহার করা হয়। এবং মনে রাখবে—এই server development-এর জন্য, production VPS-এর জন্য নয়।

Server বন্ধ করতে:

CTRL + C

---

🟢 STEP 7 — VS Code-এ project খুলুন

PowerShell-এ নিশ্চিত হও তুমি এখানে:

C:\Users\newsp\OneDrive\Desktop\djnagosite

তারপর:

code .

VS Code খুলবে।

Explorer-এ দেখতে পাবে:

djnagosite
│
├── EduMagic
│
├── venv
│
└── manage.py

---

🟢 STEP 8 — Django App তৈরি

এখন আমরা project-এর ভিতরে একটি app বানাব।

PowerShell:

python manage.py startapp core

এখন structure:

djnagosite
│
├── core
│   ├── migrations
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
│
├── EduMagic
│
├── venv
│
└── manage.py

Project আর App-এর পার্থক্য

এটা এখন থেকেই ভালোভাবে বুঝে রাখো।

Project = পুরো website

App = website-এর একটি functional অংশ

ভবিষ্যতে আমাদের project এমন হতে পারে:

EduMagic
│
├── accounts       → Login/Register
├── courses        → Courses
├── exams          → MCQ/Exam
├── shop           → E-commerce
├── payments       → Payment
├── orders         → Orders
└── core           → Homepage/About/etc.

এটাই Django শেখার সময় সবচেয়ে গুরুত্বপূর্ণ architecture ধারণাগুলোর একটি।

---

🟢 STEP 9 — core app চালু করি

VS Code-এ খুলুন:

EduMagic/settings.py

এখানে:

INSTALLED_APPS = [

এর মধ্যে:

'core',

যোগ করো।

অর্থাৎ অংশটা হবে:

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

    'core',
]

এটা কেন?

Django-কে বলতে হবে:

আমার project-এর মধ্যে core নামে একটা app আছে।

---

🟢 STEP 10 — Templates folder বানাও

VS Code Explorer থেকে core folder-এর ভিতরে একটি folder তৈরি করো:

templates

তার ভিতরে:

core

তাহলে:

core
└── templates
    └── core

এখন core/templates/core এর মধ্যে ৩টি HTML file বানাও:

home.html
courses.html
about.html

---

🟢 STEP 11 — views.py

এখন:

core/views.py

পুরো file-এর পুরোনো code মুছে এটা বসাও:

from django.shortcuts import render


def home(request):
    return render(request, "core/home.html")


def courses(request):
    return render(request, "core/courses.html")


def about(request):
    return render(request, "core/about.html")

খুব সহজভাবে বুঝো

def home(request):

মানে Django-কে আমরা বলছি:

কেউ homepage চাইলে এই function চালাও।

তারপর:

return render(request, "core/home.html")

মানে:

home.html browser-এ দেখাও।

---

🟢 STEP 12 — core/urls.py তৈরি

core folder-এর ভিতরে নতুন file বানাও:

urls.py

পুরো code:

from django.urls import path
from . import views


urlpatterns = [
    path("", views.home, name="home"),
    path("courses/", views.courses, name="courses"),
    path("about/", views.about, name="about"),
]

এখানে:

path("", views.home)

মানে:

/

মানে homepage।

আর:

path("courses/", views.courses)

মানে:

/courses/

আর:

path("about/", views.about)

মানে:

/about/

Django-তে URLconf-এর মাধ্যমে URL-কে view-এর সঙ্গে map করা হয়।

---

🟢 STEP 13 — Main urls.py

এখন:

EduMagic/urls.py

পুরো file replace করো:

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


urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("core.urls")),
]

এখানে:

path("", include("core.urls"))

মানে:

মূল website-এর URL handling core.urls থেকে নাও।

---

🟢 STEP 14 — Homepage বানাই

এখন:

core/templates/core/home.html

পুরো file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>EduMagic - Learn Smarter</title>

    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #f4f7fb;
            color: #1f2937;
        }

        nav {
            background: #172554;
            padding: 18px 40px;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 25px;
            font-weight: bold;
        }

        .hero {
            text-align: center;
            padding: 100px 20px;
            background: white;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .hero p {
            font-size: 20px;
            color: #64748b;
        }

        .button {
            display: inline-block;
            margin-top: 25px;
            padding: 14px 25px;
            background: #2563eb;
            color: white;
            text-decoration: none;
            border-radius: 8px;
        }

        .section {
            max-width: 1000px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

<body>

    <nav>
        <a href="/">EduMagic</a>
        <a href="/courses/">Courses</a>
        <a href="/about/">About</a>
    </nav>

    <section class="hero">
        <h1>Learn Smarter with EduMagic</h1>

        <p>
            Build your knowledge. Improve your skills. Create your future.
        </p>

        <a class="button" href="/courses/">
            Explore Courses
        </a>
    </section>

    <section class="section">
        <h2>Welcome to EduMagic</h2>

        <p>
            EduMagic is a simple educational website built with Django.
            This project will grow into a complete learning platform.
        </p>
    </section>

</body>
</html>

---

🟢 STEP 15 — Courses page

core/templates/core/courses.html

পুরো code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Courses - EduMagic</title>

    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #f4f7fb;
            color: #1f2937;
        }

        nav {
            background: #172554;
            padding: 18px 40px;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 25px;
            font-weight: bold;
        }

        .container {
            max-width: 1000px;
            margin: 60px auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 40px;
        }

        .courses {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .card {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        }

        .card h2 {
            margin-top: 0;
        }

        .price {
            font-weight: bold;
            font-size: 20px;
        }

        @media (max-width: 700px) {
            .courses {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>

    <nav>
        <a href="/">EduMagic</a>
        <a href="/courses/">Courses</a>
        <a href="/about/">About</a>
    </nav>

    <div class="container">

        <h1>Our Courses</h1>

        <div class="courses">

            <div class="card">
                <h2>Mathematics</h2>

                <p>
                    Learn mathematics from basic concepts
                    to advanced problem solving.
                </p>

                <p class="price">৳500</p>
            </div>

            <div class="card">
                <h2>Higher Mathematics</h2>

                <p>
                    Build strong foundations in algebra,
                    geometry and calculus.
                </p>

                <p class="price">৳700</p>
            </div>

            <div class="card">
                <h2>ICT</h2>

                <p>
                    Learn important ICT concepts with
                    practical examples.
                </p>

                <p class="price">৳600</p>
            </div>

        </div>

    </div>

</body>
</html>

---

🟢 STEP 16 — About page

core/templates/core/about.html

পুরো code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>About - EduMagic</title>

    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #f4f7fb;
            color: #1f2937;
        }

        nav {
            background: #172554;
            padding: 18px 40px;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 25px;
            font-weight: bold;
        }

        .container {
            max-width: 800px;
            margin: 70px auto;
            padding: 40px;
            background: white;
            border-radius: 12px;
        }

        h1 {
            margin-top: 0;
        }
    </style>
</head>

<body>

    <nav>
        <a href="/">EduMagic</a>
        <a href="/courses/">Courses</a>
        <a href="/about/">About</a>
    </nav>

    <div class="container">

        <h1>About EduMagic</h1>

        <p>
            EduMagic is a learning platform created with Django.
        </p>

        <p>
            Our goal is to make quality educational content
            easier to access for students.
        </p>

        <p>
            This website is currently a learning project.
            Later it can grow into a complete education
            and e-commerce platform.
        </p>

    </div>

</body>
</html>

---

🟢 STEP 17 — এবার website চালাও

VS Code-এর Terminal অথবা PowerShell-এ:

python manage.py runserver

Browser:

Home

http://127.0.0.1:8000/

Courses

http://127.0.0.1:8000/courses/

About

http://127.0.0.1:8000/about/

এখন তোমার ৩-পেজ Django website তৈরি। 🎉

---

🧠 এখন সবচেয়ে গুরুত্বপূর্ণ: আমরা কী শিখলাম?

তোমার website-এর architecture এখন:

djnagosite
│
├── venv
│
├── manage.py
│
├── EduMagic
│   ├── settings.py
│   ├── urls.py
│   ├── asgi.py
│   └── wsgi.py
│
└── core
    ├── views.py
    ├── urls.py
    ├── models.py
    ├── admin.py
    │
    └── templates
        └── core
            ├── home.html
            ├── courses.html
            └── about.html

সবচেয়ে গুরুত্বপূর্ণ flow:

Browser
   ↓
URL
   ↓
urls.py
   ↓
views.py
   ↓
template
   ↓
HTML
   ↓
Browser

উদাহরণ:

http://127.0.0.1:8000/courses/

যাবে:

EduMagic/urls.py
       ↓
core/urls.py
       ↓
views.courses()
       ↓
courses.html
       ↓
Browser

এটাই Django-এর মূল ধারণাগুলোর একটি।

---

🔥 কিন্তু এখানে এখনো Django-এর আসল শক্তি ব্যবহার করিনি

এখন আমাদের HTML-এর courseগুলো hard-coded:

<h2>Mathematics</h2>
<p>৳500</p>

বাস্তব Education/E-commerce site-এ তুমি এভাবে ১০০টা course লিখবে না।

আমরা পরে Django Model + Database ব্যবহার করব।

তখন হবে:

Database
   ↓
Course Model
   ↓
Django View
   ↓
Template
   ↓
Browser

তখন তুমি Django Admin থেকে:

Course Name
Price
Description
Image
Category
Video
PDF
Published

যোগ করতে পারবে।

এটাই তোমার ভবিষ্যৎ Education site-এর foundation।

---

🎯 তোমার Django শেখার Roadmap

আমি তোমাকে এভাবেই এগিয়ে নিতে চাই:

Level 1 — আজ

Python environment
Django project
Django app
URLs
Views
Templates
HTML

Level 2

CSS
Static files
Template inheritance
Navbar
Reusable layout

Level 3

Models
Database
SQLite
Migrations
Django Admin
CRUD

Level 4

Course system
Categories
Teachers
Students
Course details

Level 5

User registration
Login
Logout
Password
Profile
Permissions

Level 6

Education platform
Video courses
PDF/e-books
Enrollment
Subscriptions
MCQ exams
Results

Level 7

E-commerce
Products
Cart
Orders
Checkout
Payment integration
Digital delivery

Level 8

PostgreSQL
Environment variables
Security
Static files
Media files

Level 9 — VPS

Ubuntu
Gunicorn
Nginx
PostgreSQL
Domain
SSL/HTTPS
Firewall
Backups

Django-এর production deployment-এর ক্ষেত্রে development runserver ব্যবহার করা উচিত নয়; production-এ WSGI/ASGI-compatible server এবং proper deployment setup দরকার।

---

⚠️ একটা জিনিস এখন থেকেই মনে রাখবে

আমরা Windows-এ development করছি:

Windows 10
   ↓
PowerShell
   ↓
VS Code
   ↓
Django
   ↓
SQLite

পরে একই Django project VPS-এ যাবে:

Windows development
        ↓
Git
        ↓
Ubuntu VPS
        ↓
Python venv
        ↓
Django
        ↓
PostgreSQL
        ↓
Gunicorn
        ↓
Nginx
        ↓
HTTPS
        ↓
Your Domain

অর্থাৎ আজ Windows-এ শেখা কোনো wasted work হবে না।

আর database-এর ক্ষেত্রে শেখার জন্য SQLite যথেষ্ট; Django default হিসেবে SQLite ব্যবহার করে, আর production-এর জন্য Django PostgreSQL-কে সুপারিশ করে।

এখন তোমার কাজ শুধু একটাই:

উপরের STEP 1 → STEP 17 একদম ধারাবাহিকভাবে করো। কোথাও error হলে সেই error-এর পুরো PowerShell output এখানে paste করো। আমরা error-এর জায়গা থেকেই পরের step নেব—একসাথে অনেক নতুন জিনিসে যাব না।