শিখুন প্রথম সি প্রোগ্রামিং!!

প্রোগ্রামিং করার জন্য দরকার একটা কম্পিউটার আর একটা কম্পাইলার। দুইটার মধ্যেই কি সদৃশ্য তাই না? দুটাই ক দিয়ে শুরু এবং “ম্প” যুক্ত বর্ণ রয়েছে।
আপনার একটা কম্পিউটার রয়েছে তা না হলে তো এ লেখাটা পড়তে পারতেন না, তাই না? এবার দরকার একটা কম্পাইলার। একটা সি কম্পাইলার। যে আমাদের কোড প্রোগ্রামিং এর কোড গুলোকে কম্পাইল করে দিবে।

কম্পাইলার কেন দরকার তা বলছি আগে। আমাদের আমরা যা লিখি কম্পিউটার তা পড়তে পারে না । কম্পিউটারের জন্য দরকার মেশিন ল্যাঙ্গুয়েজ। আমাদের সি প্রোগ্রামিংকে মেশিন ল্যাঙ্গুয়েজে পরিবর্তন করে দেয় এই কম্পাইলার। কম্পাইলার সম্পর্কে আরেকটু ধারণা নেওয়ার জন্য এ লেখাটা দেখা যেতে পারে। কম্পাইলার এবং IDE এবং এদের মধ্যে পার্থক্য

আমরা সি কোড লেখা ও কম্পাইল করার জন্য CodeBlocks IDE ব্যবহার করব । CodeBlocks ডাউনলোড করতে চাইলে নিচের লিঙ্ক এ গিয়ে codeblocks-12.11mingw-setup_user.exe টি ডাউনলোড করে নিন।

http://www.codeblocks.org/downloads/binaries

তারপর ইন্সটল করুন। ওপেন করুন। তাহলে নিচের মত দেখতে পারেবন।

ইন্সটল হলে আপনি কোড লেখার জন্য প্রস্তুত।

এখান থেকে Create New Project এ ক্লি করুন।

এখান থেকে Console Application সিলেক্ট করে Go তে ক্লি করুন।

এবার C সিলেক্ট করে Next এ ক্লিক করুন। Project Title বক্স এ আপনার প্রজেক্ট এর নাম দিন। যেমন hello. Folder to create project in বক্স থেকে আপনার প্রজেক্টটি কোন ফোল্ডারে সেভ করতে চান তা সিলেক্ট করুন। Next এ ক্লি করুন। এবার Finish এ ক্লি করুন।

এবার ডান পাশে আপনার workspace দেখতে পাবেন। ঐখানে আপনার প্রোজেক্ট গুলো দেখাবে। hello এর + চিহ্নতে ক্লিক করুন। তারপর Source এর + চিহ্নতে ক্লিক করুন এবং main.c এর উপর ক্লিক করুন। CodeBlocks একটা সিম্পল একটা কোড টেম্পলেট তৈরি করে প্রতি প্রজেক্টের জন্য, তা দেখাবে। যার মধ্যে লেখা থাকবেঃ

#include<stdio.h>
int main()
{
    printf("Hello world");
    return 0;
}

আমাদের কোডটি কম্পাইল এবং রান করতে হবে তার জন্য ফাইল মেনু থেকে Build এ ক্লিক করুন এবং Build and Run এ ক্লিক করুন। তাহলে আপনার সি প্রোগ্রামটি কম্পাইল হবে এবং রান হবে। এবং নিচের মত আউটপুট দিবেঃ

আপনি যদি উপরের প্রোগ্রামটি রান করাতে পারেন, তাহলে আপনাকে অভিনন্দন এবং স্বাগতম প্রোগ্রামিং এর মজার দুনিয়াতে। না করতে পারলে মন খারাপ করার দরকার নেই। আবার একটু চেষ্টা করুন প্রথম থেকে। তাহলেই হবে।

উপরের কোডে আমরা কি লিখছি তা এবার একটু ব্যাখ্যা করা যাক।

আমাদের প্রোগ্রামের প্রথম লাইন হচ্ছে #include<stdio.h> । include মানে হচ্ছে কোন কিছু যুক্ত করা। stdio এর পূর্ণরূপ হচ্ছে standard input output. stdio.h এর .h দিয়ে বুঝানো হয় এটা একটা header ফাইল। আর পুরো লাইন দিয়ে বুঝানো হয় যে standard input output কে যুক্ত কর। standard input output সম্পর্কে আরেকটু পরে বলব।

এর পরের লাইন হচ্ছে int main(), এটিকে বলা হয় মেইন ফাংশন। আমরা যখন প্রোগ্রামটি রান করাবো তখন এ মেইন ফাংশন থেকে কাজ করা শুরু করবে। তাই সব প্রোগ্রামে একটি (এবং কেবল একটি) মেইন ফাংশন থাকতে হয়। মেইন ফাংশনের শুরুতে দ্বিতীয় বন্ধনী দিয়ে শুরু করতে হয়। মেইন ফাংশন শেষও করতে হয় একটি দ্বিতীয় বন্ধনী দিয়ে।
মেইন ফাংশন এর দ্বিতীয় বন্ধনী এর ভেতর প্রথম লাইন লিখছি আমরা printf(“Hello world!”);
এখানে printf() হচ্ছে একটি ফাংশন। printf এর মানে হচ্ছে print formatted। এটি একটি লাইব্রেরী ফাংশন যাকে স্ট্যান্ডার্ড আউপুট ফাংশন বলে। printf() এর কাজ হচ্ছে কনসোলে/স্ক্রিনে কিছু প্রিন্ট করা। ডবল কোটেশন চিহ্নের ভেতরে আমরা যা লিখব তা-ই স্ক্রিনে সে প্রিন্ট করবে। আমরা প্রথমেই যে একটি লাইন লিখছি #include<stdio.h> । printf() ফাংশনটি কিভাবে কোন কিছু প্রিন্ট করে তা লেখা রয়েছে এই stdio.h ফাইলে।

এর পর আমরা আরেকটি লাইন লিখছি return 0; আমরা বলছি যে main হচ্ছে একটা ফাংশন। প্রত্যক ফাংশন এর একটা return মান থাকতে হয়। যা ফাংশন এর কাজ শেষে কিছু একটা রিটার্ন করে। return 0 মানে শূন্য রিটার্ন করা। এ সম্পর্কে পরে আরো বিস্তারিত জানা যাবে যখন আমরা ফাংশন নিয়ে পড়ব।

printf(“Hello world!”); বা return 0; এ গুলোকে বলে স্টেটমেন্ট (Statement)। প্রতিটি স্টেটমেন্টের শেষে একটি করে সেমিকোলন (;) দিতে হয়। আমরা যদি সেমিকোলন না দিয়ে থাকি তাহলে কম্পাইলারে ভুল দেখাবে এবং প্রোগ্রামটি রান হবে না। প্রোগ্রামিং এর শুরুর দিকে অনেকেই সেমিকোলন দিতে ভুলে যায়,তখন কম্পাইল এরর (compile error) দেখায়, পরে কোথায় ভুল হয়েছে খুজে বের করার চেষ্টা করে। একটু খেয়াল করে কোড লিখলে এসব ছোটখাটো ভুল গুলো সহজেই এড়ানো যায়।

এবার এ প্রোগ্রামটি নিজে নিজে লিখতে চেষ্টা করুন। Hello world! এর পরিবর্তে আপনার নাম বা ইচ্ছে মত কিছু দিয়ে রান করার চেষ্টা করুন।

সমস্যা এবং সমাধানঃ

কোড ব্লক একটা IDE. এটার সাথে আমাদের কম্পাইলার লাগে। যেটা আমাদের সি প্রোগ্রাম গুলোকে কম্পাইল করবে। যদি কম্পাইলার ইন্সটল না থাকে, তাহলে নিচের মত ইরর দেখাবে।

Environment Error Can’t fild compiler executable in your configurd search path for “GNU GCC” compiler

এ জন্য আমাদের Codeblocks with Mingw সহ ডাউনলোড করে ইন্সটল করতে হবে। ডাউনলোড পেইজে গিয়ে codeblocks-x.x.x mingw-setup.exe টা ডাউনলোড করে ইন্সটল করে নিলেই এ সমস্যার সমাধান হবে।

ফ্রিতে নিন Smart Tube - Professional Video Blogger Template!!!

আস্সালামুআলাইুম...
হ্যালো বন্ধুরা !
আমি ছাদিকুর রহমান, আজ আমি আপনাদের সামনে এমন একটি প্রিমিয়াম থীম নিয়ে হাজির হলাম।
থিমটি সম্পূর্ণ Responsive থীম।
👉আর অবশ্য এই থীমটি আমি আপনাদেরকে ফ্রীতে দিচ্ছি।

                                                            থিমটির পরিচয়:

         Name: Smart Tube - Professional Video Blogger Template

Current Version: V1.0

Developer:  MS Design

Size: 30.7 KB

স্মার্ট টিউব পেশাদার ভিডিও ব্লগার টেম্পলেট! আপনি যদি একটি স্মার্ট এবং প্রতিক্রিয়াশীল ভিডিও ব্লগার টেম্পলেট খুঁজছেন, তবে স্মার্ট টিউব ব্লগার টেম্পলেটটি ভাল নির্বাচন করা হবে। এটি একটি ভিডিও ব্লগের জন্য অত্যন্ত অনুকূলিত। আপনি যদি ব্লগার প্ল্যাটফর্মের সাথে একটি ভিডিও ভাগ করে নেওয়ার সাইট চালিয়ে যাচ্ছেন তবে স্মার্ট টিউব টেম্পলেট দিয়ে আপনার ব্লগটিকে আরও পেশাদার করুন। এখন আসুন এর কয়েকটি দুর্দান্ত বৈশিষ্ট্য পরীক্ষা করে দেখি।

থীম ছবিঃ-

Video not playing on the mobile device solution

Go to Theme > Customize > Advanced > Add CSS

now copy and paste below code and save

@media screen and (max-width:960px){
#myvideo {height:auto;float: none;}
}

টেমপ্লেট বৈশিষ্ট্য:-

• 
  

  Powerful Admin Panel
• 
  

  Responsive Design (Test)
• 
  

  Google Testing tool Validator
• 
  

  SEO Optimized
• 
  

  Ads Ready
• 
  

  Well Documentation
• 
  

  Unlimited Home Layout Box
• 
  

  Big frame Player
• 
  

  Related Posts
• 
  

  Custom 404 page
• 
  

  And Much More...

           DEMO                                                                                     FREE DOWNLOA

আশা করি আপনাদের ভাল লেগেছে...।
ধন্যবাদ সবাইকে...

সবাই ভালো থাকবেন ধন্যবাদ

আমার সাইট ভিজিট কারার অনুরুধ রইল।

আমার fb : Sadikur Rahman Mejan

কিভাবে Add করবেন Back to Top Button With Smooth Scrolling ?

আস্সালামুআলাইুম...
হ্যালো বন্ধুরা !

আমি ছাদিকুর রহমান, আজ আমি আপনাদের সামনে এমন একটি  বিষয় নিয়ে হাজির হলাম কিভাবে আপনারা Add করবেন Back to Top Button With Smooth Scrolling.

ব্লগারে শীর্ষে ফিরে আসুন - সম্ভবত এটিতে টিউটোরিয়াল সম্পর্কে ইন্টারনেটে অনেকগুলি স্প্ল্যাটার রয়েছে যা কীভাবে ব্লগটিতে শীর্ষে কী কী ইনস্টল করবেন এবং এই সময়ে আমি টিউটোরিয়াল সম্পর্কে টিপস ভাগ করব।

নিজেই উপরে ফিরে আসা বোতামটির ভূমিকা এবং কার্যকারিতাটি বেশ গুরুত্বপূর্ণ যা দর্শনার্থীদের পক্ষে কেবল একটি বোতামে ক্লিক করে মেনজস্ক্রোল পৃষ্ঠার শীর্ষে যেতে চায়। দ্রষ্টব্য: কোনও বিদ্যমান টেমপ্লেট যদি উপরে বোতামে ফিরে আসে তবে দয়া করে প্রথমে এটি সরান।

এখানে কীভাবে ইনস্টলেশন করবেন:

1 - Login to Blogger Dashboard> select blogs> select Templates> then click the Edit HTML, save the following code after the <head> or before </ head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

যদি ইতিমধ্যে আপনার টেম্পলেটে ফন্টউইউজ যুক্ত হয় তবে এটিকে উপেক্ষা করুন।

2 - আগে সিএসএস সংরক্ষণ করুন ]]></b:skin> or </style>

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3 - নীচের JQuery এবং এইচটিএমএল আগে সংরক্ষণ করুন </body>

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

4 - এর পরে টেমপ্লেটটি সংরক্ষণ করুন এবং ফলাফল দেখুন।

কিভাবে Add করবেন Demo and Download button in Blogger ?

আস্সালামুআলাইুম...
হ্যালো বন্ধুরা !
আমি ছাদিকুর রহমান, আজ আমি আপনাদের সামনে এমন একটি  বিষয় নিয়ে হাজির হলাম কিভাবে আপনারা Add করবেন Demo and Download button in Blogger ।

ব্লগারে ডেমো এবং ডাউনলোড বোতাম যুক্ত করুন - আমরা একটি সহজ এবং নিরাময় ডেমো তৈরি করার সাথে সাথে অনুসরণ করুন এবং কিছু CSS3 ব্যবহার করে বোতাম ডাউনলোড করুন। হোভারে একটি অনন্য এবং সাধারণ প্রভাব অর্জন করতে সিএসএস ডেমো এবং ডাউনলোড বোতামগুলি সীমানা-ব্যাসার্ধ, বক্স-ছায়া, লিনিয়ার-গ্রেডিয়েন্টস, জেড-ইনডেক্স এবং ট্রানজিশন সহ সিএসএস হভার ইফেক্ট ব্যবহার করবে। এই পোস্টে আমি একটি টিউটোরিয়াল ভাগ করব কিভাবে ব্লগারদের জন্য প্রতিক্রিয়াশীল সিএসএস ডেমো এবং ডাউনলোড বোতাম যুক্ত করুন। এই টিউটোরিয়ালটি তাদের ব্লগার টেমপ্লেট এবং ওয়ার্ডপ্রেস থিম সম্পর্কে ব্লগিংয়ে সহায়তা করতে পারে। ডেমো এবং ডাউনলোড বোতামগুলি সিএসএস দিয়ে মাউস হোভার ইফেক্ট সহ তৈরি করা হয়েছে। দুটি আইকন হ'ল ফন্টওয়েজ থেকে নেওয়া। সুতরাং এই টিউটোরিয়ালটি শুরু করার আগে আপনার অবশ্যই আপনার ব্লগে ফন্টউইউজ যুক্ত করতে হবে।

Here’s how it will work: using a combination of HTML and CSS, i will create two separate pieces. These include the main button and two smaller eye and download icon. The eye and download icon used from fontawesme icon.

আপনি যদি নিজের ওয়েবসাইট বা ব্লগস্পট ব্লগের জন্য একটি সাধারণ তবে সুন্দর সিএসএস 3 ডেমো এবং ডাউনলোড বোতাম সন্ধান করেন তবে এই টিউটোরিয়ালটি আপনাকে সহায়তা করবে। এই টিউটোরিয়ালে আমি সম্পূর্ণরূপে সিএসএস এবং এইচটিএমএল বেস ডেমো এবং ব্লগারটির জন্য ডাউনলোড বোতাম ভাগ করেছি। আপনি যদি কোনও ব্লগার টেম্পলেট বা ওয়ার্ডপ্রেস থিমগুলি ভাগ করে নেওয়ার সাইট চালনা করেন তবে আপনার অবশ্যই দুটি সাধারণ বোতাম যুক্ত করতে হবে এবং সেগুলি ডেমো এবং ডাউনলোড বোতাম। এই দুটি বোতামটি টেমপ্লেট ভাগ করে নেওয়ার সাইটের জন্য সবচেয়ে গুরুত্বপূর্ণ।


এই টিউটোরিয়ালটি সিএসএস 3 এবং এইচটিএমএল দ্বারা তৈরি করা সিএসএস 3 অ্যানিমেশন প্রভাব সহ সুন্দর সিএস 3 ডেমো এবং ডাউনলোড বোতামগুলির একটি দুর্দান্ত সংগ্রহ এবং এই বোতামগুলি ব্লগার টেম্পলেট বা ওয়ার্ডপ্রেস থিমগুলি ভাগ করে নেওয়ার সাইটগুলি চালানো লোকদের সহায়তা করে। বোতামগুলির উপর প্রভাব সিএসএস রূপান্তর এবং সীমান্ত-নীচের বৈশিষ্ট্যগুলি ব্যবহার করে তৈরি করা হয়। মূলত দুটি গ্রেডিয়েন্ট ব্যবহৃত হয়, একটি সিএসএস 3 ট্রানজিশন এবং অন্যটি প্রভাবটিকে আরও সুন্দর করার জন্য হোভারের সীমানা-নীচে।


এবার টিউটোরিয়াল শুরু করিঃ-

Before starting this tutorial please take a backup of you template for safety.

First go to Blogger Dashboard > Template > Edit HTML and put the below code before </style> tag.

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

Save the Template.

Now use the below HTML Code in every post in html tab where you want share Demo and Download button.

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

ফলাফল:-

                   DEMO                                          DOWNLOAD

আশা করি আপনাদের ভাল লেগেছে...।
ধন্যবাদ সবাইকে...

সবাই ভালো থাকবেন ধন্যবাদ

আমার সাইট ভিজিট কারার অনুরুধ রইল।

আমার fb : Sadikur Rahman Mejan