বাংলায় জ্যাঙ্গো

আসসালামুয়ালাইকুম,
আপনার জ্যাঙ্গো শেখা কেমন চলছে ? আশা করি আপনি জ্যাঙ্গো নিয়ে ছোটখাট অনেক কাজ করতে শিখেছেন। এখন আমরা একটি প্রজেক্ট করার মাধ্যমে আমাদের পূর্বের শেখাকে আরো মজবুত করব। কিভাবে একটি প্রজেক্ট শুরু করতে হয় তা আমি আগের পোষ্টে আলোচনা করেছি। আশা করি আপনার কাছে বিষয়টি বোধগম্য হয়েছে।

আমরা বর্তমান প্রজেক্টটি Django 2 এবং Python 3 ভার্সনে কোড করব। সম্পুর্ন প্রজেক্টের প্রতিটি ধাপে KanBan Board অনুসরন করার চেষ্টা করব ইনশাআল্লাহ।

গত পর্বে KanBan Board এ TODO লিষ্ট তৈরী করেছিলাম

 

সর্বপ্রথম আমাদের দোকানে যে পন্যগুলো থাকবে তার লিষ্ট তৈরী করা দরকার। এজন্য  Items কে In Progress এ নিয়ে গিয়ে আমাদের কাজ শুরু করব

আমাদের চেকলিষ্টের প্রথম কাজ start project and app শুরু করি।

প্রজেক্ট শুরু

প্রজেক্টের মডিউলের ভার্সন ম্যানেজ করার জন্য virtual environment তৈরী করি।

virtualenv dokan-env --python=python3

“dokan-env” হচ্ছে virtual environment এর নাম এবং  –python=python3 দ্বারা বলে দেয়া হয়েছে যে আমরা python3 ব্যাবহার করব। আপনার পিসিতে অবশ্যই python3 ইন্সটল করা থাকতে হবে।

Activate virtualenv

source dokan-env/bin/activate

install Django

pip install django==2

প্রজেক্ট শুরু করি

django-admin startproject dokan

app তৈরী করি

python manage.py startapp inventory

settings.py এ installed_apps এ ‘inventory’ যুক্ত করি।

আমাদের দোকানে কি কি পন্য থাকবে তার ডাটা ডাটাবেজে রাখার জন্য মডেল ক্লাস তৈরী করি।
inventory/models.py

from django.db import models

class Category(models.Model):
    name = models.CharField(max_length=50)

    def __str__(self):
        return self.name 


class Item(models.Model):
    name = models.CharField(max_length=150)
    category = models.ForeignKey(Category, on_delete=None)
    is_active = models.BooleanField(default=True)
    
    def __str__(self):
        return self.name

এডমিন প্যানেলে রেজিষ্টার করি
inventory/admin.py

from django.contrib import admin
from .models import Category, Item

admin.site.register(Category)
admin.site.register(Item)

মাইগ্রেট করি

python manage.py makemigrations
python manage.py migrate

superUser তৈরী করে এডমিন প্যানেলে লগিন করি এবং Category ও Item তৈরী করি।

Item List পেজ তৈরী

সবগুলো আইটেমের তালিকা দেখার জন্য একটি ভিউ তৈরী করি।
inventory/views.py

from django.shortcuts import render
from .models import Item

def item_list(request):
    all_items = Item.objects.all()
    context = {'all_items':all_items}
    return render(request, 'inventory/item_list.html', context)

settings.py এ TEMPLATES  এর ‘DIRS’: [‘templates’] যুক্ত করি।  ( বিস্তারিত )
প্রজেক্ট ডিরেক্টরীতে templates নামে একটি ডিরেক্টরী তৈরী করি এবং এর মধ্য আরেকটি inventory নামে ডিরেক্টরী তৈরী করি।

templates/inventory/item_list.html

  {% for item in all_items %}
        <p>{{item }}</p>
    {% endfor %}

inventory/urls.py

from django.urls import path
from .views import item_list


urlpatterns = [
    path('items/', item_list, name='item-list'),
]

এখন localhost:8000/inventory/items এ গিয়ে সকল আইটেমগুলো দেখতে পাবেন।

Style যুক্ত করি

[ style যোগ করার বিস্তারিত টিউটোরিয়াল দেখুন এখানে ]

Bootstrap SB Admin 2  থিম ব্যাবহার করে আমরা আমাদের প্রজেক্ট ডিজাইন করব।

রুট ডিরেক্টরীতে ( যেখানে manage.py রয়েছে) static নামে একটি ডিরেক্টরী তৈরী করি। settings.py ফাইলে বলে দিই যে, আমাদের সকল static ফাইল ( html, css, js ) এই ডিরেক্টরীতে থাকবে।
settings.py

STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]

templates/base.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>My dokan</title>
    {% load staticfiles %}
    <!-- Bootstrap Core CSS -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="{% static 'vendor/metisMenu/metisMenu.min.css' %}" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="{% static 'dist/css/sb-admin-2.css' %}" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="{% static 'vendor/morrisjs/morris.css' %}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="http://www.banglai-django.com/">বাংলায় জ্যাঙ্গো</a>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">
                
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                        </li>
                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
            <!-- /.navbar-top-links -->

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        
                        <li>
                            <a href="{% url 'item-list' %}"><i class="fa fa-dashboard fa-fw"></i> Item List</a>
                        </li>
                        
                        <li>
                            <a href="#"><i class="fa fa-table fa-fw"></i> Tables</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-edit fa-fw"></i> Forms</a>
                        </li>
                        
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

        <div id="page-wrapper">
            <!-- Title Block -->
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">{% block pagetitle %}{% endblock %}</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- Container Block -->
            <div class="row">
            
                {% block container %}
                {% endblock %}
            </div>
            <!-- /.row -->

        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="{% static 'vendor/metisMenu/metisMenu.min.js' %}"></script>

    <!-- Morris Charts JavaScript -->
    <script src="{% static 'vendor/raphael/raphael.min.js' %}"></script>
    <script src="{% static 'vendor/morrisjs/morris.min.js' %}"></script>
    <script src="{% static 'data/morris-data.js' %}"></script>

    <!-- Custom Theme JavaScript -->
    <script src="{% static 'dist/js/sb-admin-2.js' %}"></script>

</body>

</html>

এখন item_list.html কে পরিবর্তন করে সুন্দর কাঠামো দান করি
templates/inventory/item_list.html

{% extends 'base.html' %}

{% block pagetitle %} All Items {% endblock %}

{% block container %}

<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Category</th>
                            <th>Is Active</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in all_items %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ item.name }}</td>
                                <td>{{ item.category }}</td>
                                <td>{{ item.is_active }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
    
{% endblock %}

localhost:8000/inventory/items/ এ গেলে নিচের চেহারা দেখতে পাবেন

আমরা আমাদের ১ম টার্গেট পূরন করতে পেরেছি। trello.com এ গিয়ে বোর্ড আপডেট করুন

GitHub এ কোড পুশ করা

[ git এবং GitHub সম্পর্কে জানতে জাকির হোসেন ভায়ের লেখাটি দেখুন ]

আমাদের এই প্রজেক্টটি গিটহাবে পুশ করব। github.com এ গিয়ে নতুন রিপজিটরী খুলুন

এখন কি করতে হবে, গিটহাব আমাদেরকে তা লিখেই দিয়েছে খুব সহজে

git init 
git add . 
git commit -m "Item list completed"
git remote add origin https://github.com/harunurkst/dokan.git
git push origin master

git remote add origin https://github.com/harunurkst/dokan.git এই লাইনটিতে আপনার রিপজিটরী url বাসান

কেমন লাগলো প্রজেক্টটি করতে? আশা করি ভাল লেগেছে। কমেন্টে আপনার অনুভুতি জানান। আগামি পর্বে প্রজেক্টের ২য় পর্ব দেখাবো ইনশাআল্লাহ।

Leave a Reply

Your email address will not be published. Required fields are marked *