Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

PHP এবং MySQL দিয়ে একটি শপিং কার্ট তৈরি

by
Difficulty:AdvancedLength:LongLanguages:

Bengali (বাংলা) translation by Nazmul Shuvo (you can also view the original English article)

এই সপ্তাহের স্ক্রিনক্যাস্ট + টিউটোরিয়ালে, আমরা আপনাকে শেখাতে যাচ্ছি কিভাবে PHP এবং MySQL দিয়ে আপনার নিজের শপিং কার্ট তৈরি করবেন। আপনি দেখবেন যে, এটি আপনি হয়ত যতটা জটিল ভাবছেন এটি আসলে ততটা না।


স্ক্রিনক্যাস্ট দেখুন



ধাপ ১

চলুন এই ফোল্ডার স্ট্রাকচার দেখে শুরু করা যাকঃ


স্ট্রাকচার

  • reset.css - আপনি রিসেট এই লিংকে পাবেন
  • style.css - আমাদের নিজেদের css ফাইল যা HTML মার্কাপ স্টাইল করতে ব্যবহার করা হবে
  • connection.php - এই ফাইলটি আমাদের ডাটাবেজ কানেকশন তৈরি করবে
  • index.php - আমাদের শপিং কার্টের টেম্পলেট
  • cart.php - এই ফাইলটি আমাদের কার্টের প্রোডাক্টগুলি পরিবর্তনে সক্ষম করবে (যোগ করা, রিমুভ করা)
  • products.php - প্রোডাক্ট লিস্টিং পেইজ

ধাপ ২

আমরা html মার্কাপ দিয়ে শুরু করব এবং পরে এটি স্টাইল করব। তাই index.php খুলুন এবং নিচের কোড কপি/পেস্ট করুনঃ

আপনি যেমনটা দেখছেন, আমাদের পেইজে দুইটি কলাম আছেঃ মেইন কলাম এবং সাইডবার। চলুন CSS এ যাওয়া যাক। style.css খুলুন এবং নিচে দেখানো কোড টাইপ করুনঃ

এখানে আমাদের প্রোডাক্ট পেইজ এখন যেমন দেখানোর কথাঃ



সম্পূর্ণ স্ক্রিনক্যাস্ট



ধাপ ৩

আমাদের PHP/MySQL অংশে যাওয়ার আগে, আমাদের ডাটাবেজ তৈরি করা প্রয়োজন। তাই phpMyadmin খুলুন এবং নিচের ধাপগুলো অনুসরণ করুনঃ

  1. Privileges ট্যাব এ যান, add new user বাটনে ক্লিক করুন, এবং দেখানো সেটিংস ব্যবহার করুনঃ Username: tutorial; Host: localhost; Password: supersecretpassword; । এখন নিশ্চিত হোন যে Global privileges সেট করা হয়েছে; তারপর আমরা পরবর্তী ধাপে চলে যাচ্ছি।
  2. tutorials নামে একটি নতুন ডাটাবেজ তৈরি করুন।
  3. products নামে একটি টেবিল তৈরি করুন এবং ফিল্ড সংখ্যা ৪ এ সেট করুন। এখন ফিল্ডগুলি পূরণ করুন যাতে আপনার থাকেঃ id_integer - নিশ্চিত হোন যে এটি INT তে সেট করা আছে এবং প্রাইমারি হিসেবে মার্ক করা আছে (এটিকে auto_increment এ ও সেট করুন); name - VARCHAR ১০০ দৈর্ঘের সাথে তৈরি করুন; description - VARCHAR ২৫০ দৈর্ঘের; price - নিশ্চিত হোন যে এটি DECIMAL(2,6) এ সেট করা
  4. আপনার টেবিল কিছু সেম্পল প্রোডাক্ট দিয়ে পূরণ করুন

কিছু সময় সেভ করার জন্য, আমি আমার প্রোডাক্ট টেবিল এক্সপোর্ট করেছি যাতে আপনি সাধারণভাবে নিচের কোয়েরিগুলি চালাতে পারেনঃ





ধাপ ৪

ডাটাবেজ থেকে ডাটা এক্সট্রাক্ট শুরু করার আগে, আমি আমার index.php কে প্রোডাক্ট লিস্ট এবং কার্টের জন্য একটি টেম্পলেট হিসেবে তৈরি করেছি। তাই নিচে দেখানো কোড আপনার index.php পেইজের উপরে যোগ করুনঃ

  1. session_start() - এটি পরবর্তীতে ব্যবহারের জন্য; এটি প্রকৃতপক্ষে আমাদেরকে সেশন ব্যবহারে সমর্থন দিবে (এটা অত্যাবশ্যক যে অন্য কোন ডেটা ব্রাউজারে প্রেরিত হওয়ার আগে session_start লেখা হয়)।
  2. দ্বিতীয় লাইনে, আমরা connection.php অন্তর্ভুক্ত করেছি যা ডাটাবেজের সাথে সংযোগ স্থাপন করবে (আমরা এটির সাথে সেকেন্ডের মধ্যে ডিল করব)। আর একটি বিষয়ঃ include এবং require এর মধ্যে পার্থক্য এই যে আপনি যদি require ব্যবহার করেন এবং ফাইল খুজে না পাওয়া যায়, তবে স্ক্রিপ্ট এক্সিকিউশন সমাপ্ত হবে। আপনি যদি "include" ব্যবহার করেন, স্ক্রিপ্ট কাজ চালিয়ে যাবে।
  3. আপনার সাইটের প্রতিটা ফাইলের জন্য সম্পূর্ণ html কোড (css লিংক, js লিংক) কপি করার পরিবর্তে, আপনি শুধু একটি ফাইলের মধ্যে তাদের সবটা সম্বন্ধযুক্ত করতে পারেন।  প্রথমে, আমি চেক করবো GET ভেরিয়েবল কল করার জন্য "page set" আছে কিনা। যদি না থাকে, আমি _pages নামে একটি নতুন ভেরিয়েবল তৈরি করব। যদি GET ভেরিয়েবল পেইজগুলি কল করার জন্য প্রথমে সেট করা থাকে, আমি নিশ্চিত হতে চাই যে আমি যে ফাইলটি অন্তর্ভুক্ত করতে চাচ্ছি তা একটি ভ্যালিড পেইজ।

এটি কার্যকর করতে, আমাদের ফাইলটি অন্তর্ভুক্ত করতে হবে; index.php তে "main" id'র div এর মধ্যে এই লাইনটি যোগ করুনঃ

এখন এখানে আমাদের কমপ্লিট index.php আছেঃ


চলুন MySQL এর সাথে সংযোগ তৈরি করি। connections.php খুলুন এবং নিচে দেখানো অংশ টাইপ করুনঃ


ধাপ ৫

এখন সময় প্রোডাক্ট পেইজের জন্য মার্কাপ লেখার। তাই এগিয়ে যান এটি খুলুন এবং নিচে দেখানো অংশ টাইপ করুনঃ

চলুন পেইজটি এক ঝলক দেখা যাকঃ


আপন যেমনটা দেখছেন, এটি দেখতে খুবই বাজে। তাই চলুন এক্সট্রা CSS যোগ করার মাধ্যমে এটি স্টাইল করি।

ওকেঃ চলুন আর একবার দেখা যাকঃ


অনেক ভালো দেখাচ্ছে, আপনার কি মনে হয়? নিচে আপনি কমপ্লিট style.css কোড পাবেনঃ


ধাপ ৬

ডাটাবেজ থেকে আমাদের প্রোডাক্ট এক্সট্রাক্ট এর পূর্বে, চলুন আমাদের টেবিল থেকে শেষ ২টি সারি সরিয়ে ফেলি (আমরা এটি ব্যবহার করেছিলাম শুধুমাত্র আমাদের টেবিলটি কেমন দেখাবে তা দেখার জন্য)। এটি রিমুভ করুনঃ

অসাধারণ। এখন যেখানে টেবিলের সারিগুলি ছিলো সেই স্থানে, নিচে দেখানো PHP কোড টাইপ করুনঃ

  1. চলুন, প্রথমে প্রোডাক্টগুলি পেতে করতে SELECT ব্যবহার করি, তারপর আমরা ডাটাবেজ থেকে প্রতিটি সারি লুপ করি এবং পেইজের একটি টেবিলের সারিতে এটি echo করি।
  2. আপনি দেখতে পাবেন এঙ্কর একই পেইজে লিংক করা (যখন ব্যবহারকারী এঙ্করে ক্লিক করবে এটির প্রোডাক্ট কার্ট/সেশনে যোগ হয়ে যাবে)। আমরা শুধু কিছু এক্সট্রা ভেরিয়েবল পাস করব যেমন প্রোডাক্টের id ।

আপনি যদি একটি add to cart লিংক এ হোভার করেন, আপনি দেখতে পাবেন যে, পেইজের তলায়, প্রোডাক্ট এর id পাস হয়েছে।



ধাপ ৭

চলুন এঙ্কর কার্যকর করতে আমাদের পেইজের উপরে নিচে দেখানো কোড যোগ করিঃ

  1. যদি GET ভেরিয়েবল এর কল করা একশন সেট করা থাকে এবং এর ভ্যালু হয় ADD, আমরা কোড এক্সিকিউট করব।
  2. আমরা নিশ্চিত করব যে GET ভেরিয়েবল দ্বারা পাস করা id একটি integer
  3. যদি প্রোডাক্টের id কার্ট SESSION এ থাকে, আমরা শুধু এর পরিমাণ ১ করে বৃদ্ধি করব
  4. id যদি সেশনে না থাকে, আমাদের নিশ্চিত করা প্রয়োজন যে GET ভেরিয়েবল দ্বারা পাস হওয়া id টি ডাটাবেজে উপস্থিত। যদি এটি থাকে, আমরা মূল্য বাগিয়ে নিবো এবং এটির সেশন তৈরি করব। যদি না থাকে, আমরা ম্যাসেজ কল করার জন্য একটি ভেরিয়েবল সেট করব যা আমাদের এরর ধরে রাখবে।

চলুন দেখে নেই সেই ম্যাসেজ ভেরিয়েবল সেট করা আছে নাকি এবং এটি পেইজে echo করি (এই কোডটি H1 পেইজ টাইটেল এর আন্ডারে টাইপ করুন):

এখানে আপনি কমপ্লিট products.php পেইজ দেখতে পাচ্ছেন।

এখানে এরর ম্যাসেজ যদি প্রোডাক্টের id ইনভ্যালিড হয়ে থাকে 



ধাপ ৮

চলুন index.php তে ফিরে যাই এবং সাইডবার তৈরি করি। নিচে দেখানো কোড যোগ করুনঃ

  1. প্রথমে আমরা দেখবো সেশন কার্ট সেট করা কিনা। যদি না হয়, আমরা ম্যাসেজ প্রদর্শন করব, ব্যবহারকারীকে সতর্ক করতে যে কার্ট টি খালি।
  2. পরবর্তীতে আমরা একটি mysql SELECT তৈরি করব, কিন্তু আমরা সিলেক্ট করব শুধুমাত্র ঐ প্রোডাক্টগুলি যা সেশনেও বিদ্যমান। এটি সম্পন্ন করতে, আমরা ব্যবহার করব foreach ফাংশন। তাই আমরা সেশনের মাধ্যমে লুপিং করছি এবং  SELECT এ প্রোডাক্ট id যোগ করছি। পরবর্তীতে, আমরা SELECT থেকে লাস্ট কমা রিমুভের জন্য একটি substr ফাংশন ব্যবহার করতে যাচ্ছি।
  3. শেষে আমরা ডাটা ব্রাউজারে আউটপুট করব।

নিচের ছবিটি এক নজর দেখুনঃ



যেহেতু index.php সকল ফাইলগুলির জন্য একটি টেমপ্লেট ফাইল, সাইডবার cart.php তেও ভিসিবল হবে। এটি অসাধারণ নয় কি?!


ধাপ ৯

ফাইনালি, cart.php খুলুন এবং নিচে দেখানো কোড টাইপের মাধ্যমে শুরু করুনঃ

কোডগুলি index.php এবং products.php এর অনুরূপ, তাই আমি সবকিছু আবার ব্যাখ্যা করতে যাচ্ছি। আপনার লক্ষ করা উচিত যে একটি ফর্মে পরিমাণ প্রদর্শনের পরিবর্তে, এখন এটি একটি ইনপুট বক্স হিসেবে প্রদর্শিত হচ্ছে (যাতে আমরা পরিমাণ পরিবর্তন করতে পারি)। তাছাড়া টেবিলটি একটি form ট্যাগে মোড়ানো। আইটেমগুলির টোটাল মূল্য পেতে আমরা নির্দিষ্ট করা প্রোডাক্ট (সেশন থেকে) id এর মূল্যের সাথে পরিমাণ গুন করব। এটি প্রতিটা লুপে করা হয়।

নোটঃ ইনপুট একটি array, key প্রোডাক্টের id, এবং কোয়ান্টিটি হচ্ছে পরিমাণের ভ্যালু।



ধাপ ১০

শেষ ধাপে আমাদের যা করতে হবে তা হল ফর্মটি কার্যকর করা। তাই চলুন এই কোড cart.php পেইজের উপরে যোগ করি।

  1. প্রথমে আমরা দেখবো ফর্ম সাবমিটেড হয়েছিল কিনা। যদি এটি সাবমিট করা হয়ে থাকে এবং ইনপুটের ভ্যালু 0 হয়ে থাকে, আমরা সেশনটি আনসেট করব।
  2. যদি ভ্যালু অন্য কোন ভ্যালু হয়, আমরা সেই ভ্যালুর জায়গায় সেটি পরিমাণে সেট করব।

এখানে কমপ্লিট cart.php


আমি আশা করি আপনি এই টিউটোরিয়ালটি উপভোগ করেছেন। আপনার যদি কোন প্রশ্ন থেকে থাকে, আরো গভীরে যেতে ভিডিও টিউটোরিয়ালটি দেখতে ভুলবেন না!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.