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

Uncategorized

১-৮ঃ Style যোগ করা

by , on
January 29, 2017

বাংলায় জ্যাঙ্গো ( python/django tutorail in Bangla) টিউটোরিয়াল সিরিজের আজকের পর্বে আপনাদেরকে স্বাগতম। আজ আমরা আমাদের পেজে style যোগ করে আমাদের ওয়েবসাইটকে রঙিন করে তুলবো।
প্রথমে settings.py ফাইলে নিচের লাইন যোগ করি

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

এটা দ্বারা আমরা জ্যাঙ্গ কে বোঝাচ্ছি যে, তোমার সকল static(css, js) ফাইল static নামের ডিরেক্টরিতে রাখা আছে।
এখন প্রজেক্ট ডিরেক্টরিতে (যেখানে manage.py ফাইল রয়েছে) static নামের ডিরেক্টরি তৈরি করি। এর মধ্যে style.css ফাইল তৈরী করি।
আমাদের html ফাইলকে বলে দিতে হবে যে আমরা কোথায় স্টাইল যোগ করেছি

templates/post_list.html ফাইল খুলে শুরুতে যোগ করি
{% load static %}
staticfiles নামের একটি template tag লোড করলাম। templatetag সম্পর্কে আমরা পরবর্তিতে জানবো। এটি যোগ করার মাধ্যমে আমরা static ব্যাবহার করতে পেরেছি এবং বলতে পেরেছি যে setting এ যে static url আছে তা ব্যাবহার কর ।

<head></head> এর মধ্যে যোগ করি

<link rel="stylesheet" href="{% static 'style.css' %}">

আমাদের post_list.html এর চেহারা হবে:

 

{% load static %}
<html>
   <head>
      <link rel="stylesheet" href="{% static 'style.css' %}">
   </head>
   <body>
      <h1>স্বাগতম বাংলায় জ্যাঙ্গো টিউটোরিয়াল এ </h1>
      <h2>সকল পোষ্ট তালিকা </h2>
      <ul>
      {% for post in post_list %}
         <li>{{ post.title }}</li>
         <br>
      {% endfor %} 
      </ul>
   </body>
</html>

আমরা “স্বাগতম বাংলায় জ্যাঙ্গো টিউটোরিয়াল এ” লেখার রং পরিবর্তন করব । লেখাটি আছে h1 ট্যাগ এর মধ্যে। সুতরাং,
static/style.css যোগ করি:
h1{color:blue}
এভাবে যা ইচ্ছা style যোগ করে আমাদের পেজকে সাজাতে পারি

Bootsrap যোগ করি
bootstrap হল html, css ও javascript ফ্রেমওয়ার্ক যা দিয়ে খুব সহজে ওয়েব ডিজাইন করা যায়। bootstrap পেজ থেকে bootstrap ডাউনলোড করি । ডাউনলোড ফাইল Extract করে css, fonts, js ফোল্ডার আমাদের static ডিরেক্টরিতে রাখি । এবার আমাদের templates/post_list.html এর <head></head> এর মধ্যে Bootstrap ফাইলের Link যোগ করি।

<head>
{% load static %}
   <link rel="stylesheet" href="{% static 'style.css' %}">
   <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
   <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>

পেজ রিলোড দিলে পরিবর্তন দেখতে পাবেন।


কিন্তু আমাদের আগের স্টাইল তো কাজ করছে না। এর কারন আমরা bootstrap যোগ করেছি সবার শেষে যার কারনে bootstrap প্রাধান্য পাচ্ছে। আমাদের নিজের স্টাইলকে প্রাধান্য দিতে চাইলে style.css সবার শেষে লিঙ্ক করতে হবে।
আমাদের পেজকে ইচ্ছামত bootstrap দিয়ে সাজিয়ে নিই

#templates/post_list.html

<html>
<head>
{% load static %}

   <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
   <script src="{% static 'js/bootstrap.min.js' %}"></script>
   <link rel="stylesheet" href="{% static 'style.css' %}">

</head>
<body>
   <div class="container">
      <div class="page-header page-header-custom">
         <h1 class="text-center">বাঙলায় জ্যাঙ্গো </h1>
      </div>
      <div class="jumbotron">
         <h2>সকল পোষ্ট তালিকা </h2>
         {% for post in post_list %}
              <h3>{{ post.pk }}-{{ post.title }}</h3>
         {% endfor %}
      </div>
    </div>
</body>
</html>

static/style.css

.page-header-custom{
    background-color: powderblue;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

 পূর্ববর্তী পোষ্ট                                                                               পরবর্তী পোষ্ট

Uncategorized

১-৭ঃ অনুশীলনী – ১

by , on
January 19, 2017

আজকের পর্বে আমরা খুব সহজ একটি  অনুশীলন করব। আমাদের কাজ হবে নতুন একটি Page তৈরি করা যেই পেজে আমাদের সমস্ত পোষ্টের লিস্ট দেখাবে। খুব সহজ কাজ, তাহলে শুরু করা যাক

# banglaidj/urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('home/', views.home, name='home'),
    path('post-list/', views.post_list, name='post-list')
]

 

#blog_post/views.py

------------------

def post_list(request):
    post_list = Post.objects.all()
    return render(request, 'post_list.html', {'post_list': post_list})

 

#templates/post_list.html

<html>
   <head></head>
   <body>
       <h1>স্বাগতম বাংলায় জ্যাঙ্গো টিউটোরিয়াল এর প্রথম টেমপ্লেট এ </h1>
       <ul>
       {% for post in post_list %}
           <li>{{ post.title }}</li>
       {% endfor %}
       </ul>
   </body>
</html>

ব্রাউজারে localhost:8000/post-list ঠিকানা প্রবেশ করি । আমাদের সকল পোষ্টের একটা লিস্ট দেখতে পাব

পূর্ববর্তি পোষ্ট                                                                                পরবর্তি পোষ্ট

১-৬ঃ Template কে Dynamic করা

by , on
January 7, 2017

index.html ফাইলে কিছু কোড লিখে ফেলি

<html> 
    <head></head> 
    <body> 
      <h1>স্বাগতম বাংলায় জ্যাঙ্গো টিউটোরিয়াল এর প্রথম টেমপ্লেট এ </h1>
      <h2>Hello, I am Harun Ur Rashid </h2> 
    </body> 
</html>

আমাদের পেজে Hello, I am Harun Ur Rashid । কিন্তু এটা তো আমরা টেমপ্লেটের মাঝে নিজের হাতে তৈরি করেছি। আমরা এখন চাচ্ছি views.py ফাইলে আমাদের নাম পরিবর্তন করব, স্বয়ংক্রিয় ভাবে টেমপ্লেটেও নাম পরিবর্তন হয়ে যাবে।

পুর্বেই বলেছিলাম যে render()  ফাংশন তিনটি প্যারামিটার গ্রহণ করে, এই তৃতীয় প্যারামিটারটিকে context variable বলে। context variable  হিসেবে Dictionary ব্যাবহার করা হয়। এটা অনেকটা পাইপ লাইনের মত কাজ করে । এই পাইপ লাইনের মাধ্যমে view থেকে template এ ডাটা পাঠানো যায়।

তাহলে আমাদের render() এর রূপ হবে

render(request, ‘index.html’, {} )

এখানে Dictionary টি কে আমরা নিজের মনের মত সাজাতে পারি

{

'name': “Harun Ur Rashid”

'district':”kushtia”

}

এখন view দেখতে হবে,

def home(request):
 	return render(request, 'index.html',{'name':”harun Ur Rashid”,'district':”kushtia”})

আবারও index.html ফাইলকে পরিবর্তন করি,

<html> 
    <head></head> 
    <body> 
      <h1>স্বাগতম বাংলায় জ্যাঙ্গো টিউটোরিয়াল এর প্রথম টেমপ্লেট এ </h1>
      <h2>Hello, I am {{ name }}</h2>
      <h2>My District is: {{ district }}</h2>
    </body>
</html>

আমরা টেমপ্লেট এর মধ্যে {{ }} চিহ্ন ব্যাবহার করেছি। একে জ্যাঙ্গো টেমপ্লেট ইঞ্জিন এর ভাষায় template variable বলা হয় । Variable এর ভ্যালু দেখার জন্য  {{ variable_name }} ব্যাবহার করা হয়।  অর্থাৎ,  Dictionary এর key এর ভ্যালু যদি সাধারন string, number হয় তাহলে {{ key_name }} ব্যাবহার করে লিখতে পারি। কিন্তু Dictionary এর key এর ভ্যালু যদি কন্ডিশন, লুপ ইত্যাদি হয় তাহলে {%  %} চিহ্ন ব্যাবহার করা হয়। একে Template Tag বলা হয়।    এভাবে আমরা ইচ্ছামত Dictionary এর key পরিবর্তন করে টেমপ্লেট এর Value পরিবর্তন করতে পারি ।

Template এ সকল পোষ্ট দেখানোঃ

এখন আমরা দেখব কিভাবে আমাদের এডমিন প্যানেল থেকে তৈরি করা সকল পোষ্ট আমাদের Template দেখানো যায় ।

প্রথমে views.py এর home() ভিউ দেখি। এই ভিউ এর মধ্যে ডাটাবেজে জমা হওয়া সকল পোষ্ট নিয়ে আসব। এরপর ভিউ থেকে টেমপ্লেটে এ পাঠিয়ে দেব।

from django.shortcuts import render
from .models import Post

def home(request):
    all_post = Post.objects.all()
    return render(request, 'index.html')

from .models import Post  দ্বারা আমরা models.py ফাইলের Post  ক্লাসটি views.py ফাইলে import করলাম। আমরা যখন এডমিন প্যানেল থেকে নতুন নতুন Post তৈরি করছিলাম তখন আসলে Post ক্লাসে object তৈরি করছিল। এক একটি পোষ্ট আসলে এক একটি object. তাহলে সকল পোষ্ট আনতে হলে পাইথনের ভাষায় সকল objects নিয়ে আসতে হবে। Post.objects.all() দিলে সকল পোষ্ট লিস্ট আকারে চলে আসবে। এখানে Post হচ্ছে  models.py এর  Post ক্লাস । এখন এই পোষ্ট এর লিস্ট কে একটি variable এর মধ্যে জমা করলাম। আমরা প্রিন্ট করে দেখতে পারি  all_post  এর মধ্যে কি জমা হয়েছে । নিচের লাইনে লিখুন print(all_post)। পেজটি রিলোড দিয়ে টার্মিনালে লক্ষ করি

<QuerySet [<Post: my first post>, <Post: My 2nd post>]>

অর্থাৎ, all_post  একটি QuerySet ( Post.objects.all() কে Query বলে) যার মধ্যে লিস্ট আছে । লিস্টের মধ্যে লক্ষ করি , প্রতিটি পোষ্টের টাইটেল দেখাচ্ছে। model.py এর def __str__() ম্যাথড দ্বারা আমরা এই টাইটেল কে রিটার্ন করতে বলেছিলাম।

আমরা ফর লুপের মাধ্যমে প্রতিটা পোষ্ট আলাদা করে ফেলতে পারি ।

def home(request):
    all_post = Post.objects.all()
    for post in all_post:
        print(post)

    return render(request, 'index.html')

আমাদের Post ক্লাসের মধ্যে title ও description  ফিল্ড আছে। print(post.title), print(post.description) দিয়ে মজা দেখুন। প্রিতিবার কোড পরিবর্তন করার পর পেজ রিলোড দিতে ভোলা চলবে না।

from .models import Post


def home(request):
    all_post = Post.objects.all()
    return render(request, 'index.html', {'all_post_list': all_post})
# index.html

<html>
<head></head>
<body>
    <h1>স্বাগতম বাংলায় জ্যাঙ্গো টিউটোরিয়াল এর প্রথম টেমপ্লেট এ </h1>

    {% for post in all_post_list %}
       {{ post }}
    {% endfor %}
</body>
</html>

পরবর্তী পোষ্ট >>

Uncategorized

১ – ৫ঃ Url এবং Template ব্যাবহার করা

by , on
January 5, 2017

আমরা এতক্ষণে সাইট পরিচালক হিসেবে ব্লগ পোষ্ট করা শিখে ফেলেছি। কিন্তু আমার পোষ্ট তো আমি সবাই কে দেখাতে চাই। এখন আমরা দেখব আমাদের পোষ্ট কিভাবে দর্শকের সামনে পরিবেশন করতে পারি।

একটা উদাহরণ দেয়া যাক। আমরা রেস্টুরেন্ট এ খাবার খেতে গেলে আমাদের সামনে খাবার পরিবেশন করা হয়। এর পেছনে কয়েকটা ধাপ থাকে। প্রথম ধাপে বাজার থেকে মাছ মাংশ চাউল ইত্যাদি কিনে আনা হয়। দ্বিতীয় ধাপে সেগুল রান্না করা হয় এবং তৃতীয় ধাপে আমাদের সামনে পরিবেশন করা হয় মাজাদার খাবার।
আমাদের সাইটেও একই ব্যাপার । আমরা তিনটি ধাপে কাজ করব। প্রথম ধাপে আমরা আমাদের কাঁচামাল গুল সংগ্রহ করব যেটা জমা থাকে এ। দ্বিতীয় ধাপে এই কাঁচামালগুলোকে রান্না করা হবে view.py এ । তৃতীয় ধাপে সেগুল পরিবেশন করা হবে template এ যেমনঃ index.html, contact.html ইত্যাদি।

banglai-django-view-from-model

আমাদের model.py তো ইতমধ্যে তৈরি করে ফেলেছি। এখন রান্না করার পালা। আমাদের এপ এর মধ্যে view.py ফাইলটি টেক্সট এডিটরে খুলে ফেলি। প্রথম লাইনে লেখা আছে

from django.shortcuts import render

এর কাজ আমরা একটু পরেই দেখতে পাব।

রান্নাঘরে যেমন ভাত রান্নার জন্য এক চুলা, মাংশ রান্নার জন্য আলাদা চুলা থাকে তেমনি আমরা আমাদের ভিন্ন ভিন্ন অংশ দেখানোর ভিন্ন ফাংশন ব্যাবহার করব।

যেমনঃ def post_list() পোষ্ট এর লিস্ট দেখানোর জন্য ,

def home() প্রথম পাতা দেখানোর জন্য ব্যাবহার করতে পারি।

আমাদের প্রথম উদ্দ্যেশ্য হচ্ছে প্রথমপাতা তৈরি করা যেখানে দর্শক আমাদের সকল পোষ্ট দেখতে পাবে।

তাহলে আমরা আমাদের প্রথম ভিউ তৈরি করে ফেলি

def home(request):

      return render()

আমরা home নামে একটা ফাংশন ডিক্লেয়ার করেছি যেটা প্যারামিটার হিসেবে request কে নেবে । অর্থাৎ, এই ফাংশন ইউজার এর আবদার( request) গ্রহণ করে ব্যাবহারকারীকে কিছু রিটার্ন করে দেবে। আমরা ব্যাবহারকারীকে একটা html পেজ দেখাতে চাই । html পেজ দেখানোর জন্য render() ফাংশনটি ব্যাবহার করা যেতে পারে। render() ফাংশনটি তিনটি প্যারামিটার গ্রহণ করে request, template এর  নাম, একটা পাইপলাইন যেটার মাধ্যমে কোন তথ্য ভিউ থেকে টেম্পলেট এ পাঠানো যায়।

def home(request):
    return render(request, 'index.html')

এখন আমরা index.html ফাইলটি তৈরি করব। প্রজেক্ট ডিরেক্টরিতে একটি templates ( আপনি যে কোন নাম ব্যাবহার করতে পারেন ) নামে নতুন ডিরেক্টরি তৈরি করি ।

banglai-django-tree-template

এর মধ্যে  index.html ফাইলটি তৈরি করি।

আমরা যে আমাদের Template ফাইল templates নামের ডিরেক্টরিতে রাখছি, এত বড় সাহস পেলাম কোথায়। এখন আমাদের settings ফাইলে বলে দেয়া দরকার যে, ” বস, আমরা টেম্পলেট ফাইলের কথা বললেই আপনি বুঝে নেবেন সেটা templates এর মধ্যে আছে।

আমাদের settings.py ফাইলটি খুলে নিচের অংশটি খুঁজে বের করি।

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['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',
],
},
},
]

এখানে ‘DIRS’:[] লিস্টের মধ্যে ‘templates’ যুক্ত করি

‘DIRS’:[‘templates’ ]

index.html ফাইলের মধ্যে আপনি যা ইচ্ছে তাই লিখে রাখতে পারেন।

আমাদের ভিউ তৈরি করা শেষ। এখন আমরা চাচ্ছি যে দর্শক যদি localhost:8000/home লিখে তাহলে আমরা আমাদের এই ভিউ দর্শকের সামনে হাজির করব। আমাদের সেটিং ডেরেক্টরির ( banglaidj) মধ্যে যে urls.py আছে তা খুলুন । প্রথমে এই ফাইলের মধ্যে আমাদের এপ এর ভিউ import করি

from blog_post import views

এখানে urlpatterns এর মধ্যে path() ফাংশন আছে। আরও একটি নতুন path() ফাংশন নিই। path() ফাংশন প্রথম প্যারামিটার হিসেবে url structure গ্রহণ করে। পরবর্তি প্যারামিটারে যে ভিউ দেখাতে চাই তাঁর নাম এবং তৃতীয় প্যারামিটার হিসেবে url এর নাম যাতে পরবর্তিতে এই নাম ধরে ডাক দিলে সে হাজির হয়ে যায়। পুরো ঠিকানা লেখার দরকার হবে না।

সুতরাং আমাদের urls.py হবেঃ

from django.urls import path
from django.contrib import admin
from blog_post import views

urlpatterns = [
  path('admin/', admin.site.urls),
  path('home/', views.home, name='home')
]

আমরা চাচ্ছি visitor www.banglaidjango.com/home টাইপের কোন url প্রবেশ করালে আমরা আমাদের
home টা দেখাবো। r এর অর্থ raw। এর পড়ে একটা string থাকবে। url রিকুয়েস্ট  স্ট্রিং এর মধ্যে home খুঁজতে
থাকবে। ঠিক home লেখাটি মিলে গেলে পরবর্তি ভিউ এ রিকুয়েস্ট পাঠিয়ে দেবে।

path('contact/', views.contact, name='contact-list'),
path('posts/', views.all_posts, name='all-posts')

এভাবে আমরা ইচ্ছামত url তৈরি করতে পারি।

আপনার ব্রাউজারে গিয়ে লিখুন http://localhost:8000/home/

হুররে……………… আমাদের টেমপ্লেট হাজির হয়েছে

banglai-django-first-template

পরবর্তি পোষ্টঃ টেমপ্লেটকে ডায়নামিক করুন >>