মডিউল ৩.১ : কিভাবে প্রজেক্ট এর মধ্যে স্ট্যাটিক ফাইল নিয়ে কাজ করতে হয়

আজকে থেকে আমরা একটা নতুন টপিক সম্পর্কে জানবো সেটা হচ্ছে কিভাবে স্ট্যাটিক ফাইল নিয়ে outer প্রজেক্ট ফোল্ডার এ কাজ করতে হয়। Inner প্রজেক্ট ফোল্ডার এ রেখেও কাজ করা যায় তবে বেস্ট প্রাকটিস হচ্ছে outer প্রজেক্ট ফোল্ডার এ কাজ করা।

তবে সবার আগে জানতে স্ট্যাটিক ফাইল কি?

স্ট্যাটিক ফাইল বলতে একটা ওয়েবসাইট এর images, css, জাভাস্ক্রিপ্ট ফাইল গুলা কে বোঝানো হয়। ধরো তুমি তোমার ওয়েবসাইট এ কিছু ইমেজ ইউজ করতে চাচ্ছো যেটা তোমার কোনো প্রজেক্ট ফোল্ডার থেকে আসবে এই টাইপ ইমেজ কে আমরা বলি স্ট্যাটিক ইমেজ আর যদি কোনো ইমেজ ডাটাবেজ থেকে আসে সেটাকে আমরা বলি ডাইনামিক ইমেজ বা মিডিয়া ফাইল। যেহেতু আমরা ডাটাবেজ নিয়ে কাজ শুরু করি নাই তাই আমরা স্ট্যাটিক ফাইল নিয়েই আলোচনা করবো।

স্ট্যাটিক ফাইল কে দুই ভাবে ইউজ করা যায়

১. আউটার প্রজেক্ট ফোল্ডার এর মধ্যে

২. অ্যাপ এর মধ্যে

আজকে আমরা দেখবো outer প্রজেক্ট ফোল্ডার এর মধ্যে থেকে কিভাবে স্ট্যাটিক ফাইল নিয়ে কাজ করা যায়। সেজন্যে নতুন একটা প্রজেক্ট তৈরী করি আসো, নাম দিলাম project_4। সেখানে একটা ফোল্ডার তৈরি করো স্ট্যাটিক ফোল্ডার নামে আর তার মধ্যে তোমার পছন্দের কিছু ইমেজ রাখো সাথে css,js ফাইল ও রাখতে পারো, নিচের মত করে।

তুমি যদি নরমালি static এর মধ্যের ইমেজ কে img ট্যাগ ইউজ করে চুপিচুপি দেখতে চাও, django তোমাকে দেখতেই দিবে না। সেজন্য আমাকে ফার্স্ট এ django এর settings.py কে বলে দিয়ে আসতে হবে যে আমাদের স্ট্যাটিক ফোল্ডার কোনটা।

এখানে দুইটা জিনিস আছে (settings.py)

১. STATIC_URL :

অর্থাৎ যদি কেউ তোমার ওয়েবসাইট এর স্ট্যাটিক ইমেজ কে আলাদা করে দেখতে চায় তাইলে url এর শুরুটা কেমন হবে সেটা বলতে হবে এখানে।

২. STATICFILES_DIRS :

আমাদের স্ট্যাটিক ফোল্ডার এর লোকেশন এখানে বলে দিতে হবে। BASE_DIR মানে হচ্ছে আমাদের outer প্রজেক্ট ফোল্ডার এর লোকেশন আর তার মধ্যেই থাকবে স্ট্যাটিক ফোল্ডার টি।

আমাদের সেটিংস এর কাজ শেষ এখন আমরা টেমপ্লেট এর মধ্যে আসি।

বেশ কয়েক ভাবে আমরা স্ট্যাটিক ইমেজ কে শো করাতে পারি।

মেথড ১:

বেস্ট প্রাকটিস। অর্থাৎ তুমি ফোল্ডার এর নাম রাখবা static আর settings.py এ নিচের মত করে করবা আর html ফাইল এ নিচের মত করে কাজ করতে হবে।

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR/'static',
]

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <img src ="{%static 'bird1.jpeg' %}" alt = "Bird Image 1" />
</body>
</html>

অর্থাৎ আমাকে স্ট্যাটিক ট্যাগ টা উপরের মতো করে লোড করতে হবে আর তারপর {% static 'bird1.jpeg' %} এভাবে দিতে হবে

মেথড ২ :

তুমি যদি চাও যে না static না অন্য কোনো নাম দিবা যেমন : files তাইলে settings.py এ নিচের মত করে কাজ করতে হবে।

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <img src ="{%static 'bird1.jpeg' %}" alt = "Bird Image 1" />
</body>
</html>

<img src ="{% static 'bird1.jpeg' %}" alt = "Bird Image 1" />

Previousমডিউল ৩ : অ্যাডভান্স জ্যাংগো টেম্পলেট এবং স্ট্যাটিক ফাইলস Nextমডিউল ৩.২ : কিভাবে এপ্প এর মধ্যে স্ট্যাটিক ফাইল নিয়ে কাজ করতে হয়

Last updated 1 year ago

<!DOCTYPE html> {% load static %} <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src ="{%static 'bird1.jpeg' %}" alt = "Bird Image 1" /> </body> </html>