08 Django ই কমার্স সাইট ডিজাইন
০৯ GUIDE 9: ই কমার্স সাইট ডিজাইন
০১ মডিউল ০১: ডিজাইন ও ডাটা স্ট্রাকচার
01 Config Project and Apps
প্রথমত,
ধাপ ১: স্টার্টিং ম্যান্ডেটরি ধাপ/কাজগুলো[এনভায়রনমেন্ট সেটাপ]
-
Desktop > ECommerce Django ডিরেক্টরি/ফোল্ডারে, কমান্ড কোড দিন –
python -m venv
- source bin/activate
- pip install django
- django-admin startproject config (তাহলে config নামে একটি ফোল্ডার(প্রজেক্ট) তৈরি হবে, যে ফোল্ডার এর ভিতর manage.py ফাইল থাকবে এবং config নামে আরও একটি ফোল্ডার তৈরি হবে) [এখন সব ঠিকঠাক আছে কিনা তা চেক করতে চাইলে প্রজেক্ট সার্ভার রান করার কমান্ডো দিন: python manage.py runserver ব্যাস,এখন http://127.0.0.1:8000 এ ঢুকলেই দেখবে যে django সাকসেসফুলি রান হয়ে প্রজেক্ট স্টার্ট হবে.]
- config ফোল্ডারের(প্রজেক্টের) নাম চেঞ্জ করে src করা
- cd src
- python manage.py startapp ecom [code . কমান্ডের মাধ্যমে vscode ওপেন করা ]
- src(প্রজেক্ট)এর ভেতর templates নামে একটা ফোল্ডার ক্রিয়েট করব, যেখানে home.html ফাইলে টেমপ্লেট তৈরি করব। (এই টেমপ্লেটটি-ই পরবর্তীতে আমরা ইউজ করব।)
- src(প্রজেক্ট) এর ভেতর static নামে আরো একটা ফোল্ডার ক্রিয়েট করব, যেখানে css ও image নামে আরো দুইটি ফোল্ডার তৈরি করব ওইসব রাখার জন্য।
- এছাড়াও, src>templates ফোল্ডারের ভিতর ecom নামে আরো একটি ফোল্ডার তৈরি করে সেখানে store.html, cart.html ও checkout.html নামে তিনটা ফাইল তৈরি করব।
*** প্রত্যেকটা এইচটিএমএল ফাইলের ভিতরে একটা করে h1 হেডিং টাইটেল যুক্ত করব যাতে ফাইলটি রান করলে দেখতে সুবিধা হয়।
দ্বিতীয়ত,
ধাপ ০২: ব্যাসিক কনফিগারেশন & বেসিক টেস্টিং
➡️# src > config > settings.py ফাইল সেটিংঃ Installed Apps লিস্টের শেষে (৩৩ নং লাইনে) “ecom” নামে এপস এর নাম যুক্ত করে দেব। এবং templates লিস্ট (৫৮ নং লাইনে) Dir এর ভিতরে লিখুন BASE_DIR / ‘templates’ ।
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'ecom', # এই লাইন নতুন ভাবে যুক্ত করা হয়েছে ]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
➡️# এরপর, src > ecom > views.py ফাইল যে কোন আইডিএলই যেমন- vscode এ খুলুন । লিখুন-
from django.shortcuts import render # Create your views here. def store(request): context = {} return render(request,'ecom/store.html', context) def cart(request): context = {} return render(request,'ecom/cart.html', context) def checkout(request): context = {} return render(request,'ecom/checkout.html', context)
➡️# src/config/urls.py ফাইলে গিয়ে path এর পর কমা দিয়ে include লেখাটুকু যুক্ত করুন(/ফাংশনকে ইম্পোর্ট করুন) ।
আর, urlpattern লিস্টে নিচে নতুন করে আপাদত যুক্ত করব- path(”, include(‘blog.urls’)) । [এখানে ecom হচ্ছে এপস এর নাম আর urls হচ্ছে সেখানকার ফাংশনের নাম।]
তাহলে, urls.py ফাইলটা (১)আপডেট করায় নিম্নরূপ/এমন হবে-
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('ecom.urls'))
]
➡️# এখন, এপ্স এর ভিতর অর্থাৎ src > ecom ফোল্ডার এর ভেতর urls.py নামে একটি ফাইল তৈরী করে নেব। যা নিম্নরূপ/এমন হবে–
from django.urls import path
from . import views
urlpatterns = [
path('', views.store, name = 'store' ),
path('cart/', views.cart, name = 'cart' ),
path('checkout/', views.checkout, name = 'checkout' ),
]
➡️# এবার সার্ভার রান করে কি হয় দেখতে পারব। –
python manage.py runserver
((( মাইগ্রেশন করার দরকার পড়লে, সার্ভার রান করার আগে নিম্নোক্ত কম্যান্ড কোড দিয়ে মাইগ্রেশন করে নেব-
python manage.py makemigrations python manage.py migrate
)))
ব্যাস এখন থেকে প্রজেক্ট সার্ভার রান পর কি কোন পেজ যেমন localhost:8000/cart বা http://127.0.0.1:8000/cart এ ঢুকলেই দেখবে যে django সাকসেসফুলি রান হয়ে প্রজেক্ট স্টার্ট হবে।
ধাপ ০৩: d
02 Inheriting Main Template + 03 Design Main Template + 04 Design Store Template
এখন আমার স্ট্যাটিক ফাইলগুলোকে config করে নিব। এজন্য static > css ফোল্ডারের ভেতর style.css নামে একটি ফাইল তৈরি করব। এখন, style.css এ আপাদত টেস্টিং এর জন্য উদাহরণস্বরূপ লিখব-
body{
backgroud-color: antiquewhite;
}
এবং store.html এ গিয়ে আপাদত টেস্টিং এর জন্য উদাহরণস্বরূপ লিখব-
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}
<h1>Store</h1>
<img src="{%static images/cart.png %}" alt="">
এখন, src> config > settings.py এ যেখানে STATIC_URL আছে সেখানের নিচের লাইনে লিখব-
STATICFILES_DIRS = [
BASE_DIR / 'static'
]
আবার,
src>templates এর ভেতর base নামে আরও একটি ফোল্ডার তৈরি করব যেখানে main.html নামে ফাইল ক্রিয়েট করব। সেখানে boostrap থেকে কোড কপি করে এডিট করে নিম্নরূপ কোড লিখব-
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/style.css' %}
<title>E Com Store</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'store' %}">Store</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
< a href="" class="btn btn-warning">login</a>
<a href="{% url 'cart' %}"
<img src="{% static 'images/cart.png' %} alt="" id="cart-icon"
</a>
</div>
<p id="cart-total">0</p>
</div>
</div>
</nav>
{% block content %}
{% endblock content %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
ফাইনালি, style.css এর লেখা গুলো কেটে store.html এ গিয়ে (আগের লেখা সব কেটে) নতুন করে লিখব-
{% extends 'base/main.html' %}
{% load static %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="https://placehold.co/650x350" alt="" class="thumbnail">
<div class="box-element.product"</div>
<h2 class="h6">Product</h2>
<button class="btn btn-outline-secondary add-btn">Add to cart</button>
<a href=""#" class="btn btn-outline-success">View</a>
<h4 style="display: inline-block; float: right">$20</h4>
</div>
<div class="col-lg-4">
<img src="https://placehold.co/650x350" alt="" class="thumbnail"> <div class="box-element.product"</div>
<h2 class="h6">Product</h2>
<button class="btn btn-outline-secondary add-btn">Add to cart</button>
<a href=""#" class="btn btn-outline-success">View</a>
<h4 style="display: inline-block; float: right">$20</h4>
</div>
<div class="col-lg-4">
<img src="https://placehold.co/650x350" alt="" class="thumbnail"> <div class="box-element.product"</div>
<h2 class="h6">Product</h2>
<button class="btn btn-outline-secondary add-btn">Add to cart</button>
<a href=""#" class="btn btn-outline-success">View</a>
<h4 style="display: inline-block; float: right">$20</h4>
</div>
{% endblock content %}
05 Design Cart Page
এখন, cart.html এ,
{% extends 'base/main.html' %}
{% load static %}
{% block content %}
{% endblock content %}
06 Design Checkout Page Part 1
এখন,
07 Design Checkout Page Part 2
এখন,
08 Data Structure for Product
এখন,
![02 জ্যাংগো Architecture পার্ট ০১: (Environment setup ও File Structure[Project, Apps])](https://porageducation.com/wp-content/uploads/2024/09/2-Virtual-Environment-ও-Django-Project.jpg)
