বিমমিল্লাহির রাহমানীর রাহীম
প্রথমে সবাইকে আমার সালাম এবং আন্তরিক শুভেচ্ছা জানিয়ে শুরু করছি আমার আজকের টিউন। আশা করছি আপনারা সবাই আল্লাহর রহমতে ভালোই আছেন। এবার আপনাদের জন্য PHP এবং Mysql এর বেসিক শেখার জন্য আমি কয়েক পর্বের টিউন নিয়ে হাজির হয়েছি । আজকের ১১ তম পর্বে আমি দেখাবো কিভাবে Bootstrap CSS ফ্রেমওয়ার্ক ব্যবহার করে PHP ও MySQL ব্যবহার করে আপনি সুন্দর একটি ডিকশোনারী ওয়েব অ্যাপ বানাবেন। আমি ৩ টি পর্বে আপনাদেরকে কোডগুলো বুঝিয়ে দিবো। আজকে এর ১ম পর্ব। আশা করি আপনারা আমার সকল টিউনেই সাথে থাকবেন। টিউনে যদি কোন প্রকার ভূল হয় বা বুঝতে অসুবিধা হয় তবে সরাসরি টিউমেন্টের মাধ্যমে আমাকে জানাবেন। সরাসরি টিউনে চলে যাচ্ছি :
প্রথমেই আপনার ওয়েব সার্ভার কনফিগারেশন করে নিন। এক্ষেত্রে আপনি আপনার হোস্টিং ব্যবহার করতে পারবেন। চাইলে আপনার নিজের পিসিতে Xampp বা wamp ব্যবহার করে সার্ভার তৈরী করে নিতে পারেন। আমি এ বিষয়টি নিয়ে ১ম পর্বে আলোচনা করেছি। আপনারা চাইলে আমার ১ম পর্ব দেখতে পারেন।
আপনার MySQL সার্ভার ঠিক মতো কাজ করছে কিনা চেক করে নিন। এবার আপনি একটি ডাটাবেইজ তৈরী করুন আজকের প্রজেক্ট এর জন্য। আমি আগের Techtunes ডাটাবেইজ ব্যবহার করেছি। এবার আপনি এখানে dictionary নামে একটি টেবিল তৈরী করে নিন। এবার dictionary টেবিলে id, word, bangla এবং pop নামে ৪ টি কলাম বানান। এখানে আমরা id ব্যবহার করবো সিরিয়াল নাম্বার ঠিক রাখার জন্য, word এ থাকবে আমাদের ইংরেজী শব্দ, bangla তে থাকবে এর বাংলা অর্থ এবং pop এ সেই ওয়ার্ডের parts of speech থাকবে। এখানে আমি sql ফাইলটিও দিয়ে দিচ্ছি।
-- phpMyAdmin SQL Dump
-- version 4.1.14
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Sep 26, 2015 at 10:58 AM
-- Server version: 5.6.17
-- PHP Version: 5.5.12
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `techtunes`
--
-- --- --- --- --- --- --- --- --- ---- ---- --- --- --- --- --- --- --- ---
--
-- Table structure for table `dictionary`
--
CREATE TABLE IF NOT EXISTS `dictionary` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`word` text COLLATE utf8_unicode_ci NOT NULL,
`bangla` text COLLATE utf8_unicode_ci NOT NULL,
`pop` text COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=20 ;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
ডাটাবেইজ এর কাজ শেষ। এবার আমরা PHP ফাইল নিয়ে কাজ করবো।
আশা করছি আপনারা সঠিক ভাবেই ডাটাবেইজ তৈরী করে নিয়েছেন। এবার আসি PHP ফাইল সম্পর্কে। এখানে আমরা মোট ৫ টি PHP ফাইল নিয়ে কাজ করবো। এখানে আমাদের যে ৫ টি PHP ফাইল নিয়ে কাজগুলো করবো :
আমরা এই ওয়েব অ্যাপসকে সুন্দর করে সাজানোর জন্য Bootstrap ব্যবহার করবো। আশা করি আপনারা Bootstrap সম্পর্কে জানেন। Bootstrap হচ্ছে সবচেয়ে বেশি ব্যবহৃত সম্পূর্ণ ফ্রি একটি CSS ফ্রেমওয়ার্ক। এর মাধ্যমে আপনি যদি CSS সম্পর্কে ভালো না জানেন তবুও খুব সুন্দর একটি সাইট বানাতে পারবেন বা একটি পেইজকে সাজাতে পারবেন। এর জন্য আরোও জানতে বা এর সম্পূর্ণ ব্যবহার জানতে আপনি Bootstrap এর অফিসিয়াল সাইট দেখতে পারেন। অনেক জনপ্রিয় সাইট এই CSS ব্যবহার করে থাকে। এই Bootstrap সকল ডিভাইসের জন্য ফ্রেন্ডলি। তাই প্রতিনিয়ত এর জনপ্রিয়তা বাড়ছে।
একটি সাধারণ Bootstrap ফ্রেমওয়ার্কে যে ফাইলগুলো থাকে :
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
রেসপন্সিভ এর জন্য bootstrap-responsive.css এবং bootstrap-responsive.min.css এই দুইটি CSS ফাইল অতিরিক্ত ব্যবহার করা হয়ে থাকে।
একটি সাধারণ html পেইজ যেভাবে হয়ে থাকে :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
আর একটি Bootstrap HTML পেইজ যে রকম হয়ে থাকে :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
ফাইলটিকে রেসপন্সিভ করার জন্য </head> ট্যাগের আগে নিচের দুইটি css কোড দিন।
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
এবার হয়ে গেলো একটি Bootstrap HTML ফাইল।
আশা করি সবাই আমার কথা বুঝতে পেরেছেন। সবাইকে ধন্যবাদ সাথে থাকার জন্য। আগামী কয়েকটি পর্বে আমি Bootstrap এর css ব্যবহার করে php ও MySQL দিয়ে একটি বাংলা ডিকশোনারী বানাবো। আশা করি আমার সাথেই থাকবেন ।
লেখায় কোন প্রকার ভূল ত্রুটি থাকলে ক্ষমা সুন্দর দুষ্টিতে দেখবেন। আর টিউন সম্পর্কে যদি আপনাদের কিছু বুঝতে কোন অসুবিধা হয় তবে টিউমেন্টের মাধ্যমে জানাবেন। আপনাদের একটি মতামত আমাকে সামনে আরও সুন্দর টিউন উপহার দিতে উৎসাহ প্রদান করবে। আর যে কথা না বললেই নয়, তা হলো লেখা কপি পেস্ট বর্জন করা। ৩-৪ ঘন্টা একটানা লিখার পর কপি পেস্ট করলে যে কোন লেখকের পুরো পরিশ্রম এর কোন মূল্যই থাকে না। সবাই ভালো থাকবেন। সকলের শুভ কামনা করে আজকের মতো এখানেই শেষ করছি। আল্লাহ হাফেজ।
আমি আতিকুর রহমান সোহেল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 31 টি টিউন ও 289 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 4 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
খুব সাধারণ একজন । প্রযুক্তিকে ভালবাসি, এর জন্য সব কিছুই করতে পারি । জীবনের লক্ষ্য হিসেবে প্রযুক্তিকেই বেছে নিয়েছি । জানি না কতটুকু সফল হবো । তবুও সারা দিন রাত চলে আমার লক্ষ্য অর্জনের অবিরন্ত প্রচেষ্ঠা । হয়তো একদিন হবে সফল , নয়তো বিফল । তবুও যতদিন থাকবো, প্রযুক্তিকে ভালোবাসবো...
![আসুন PHP তে SumirBD.Mobi সাইটের মতো Auto Upload / Grabber ডাউনলেড সাইট তৈরী করা শিখি [সম্পূর্ন টিউটোরিয়াল]](https://dnc.techtunes.io/tDrive/tuner/djopuzone/500204/IMG_20170630_015147-368x207.jpg "আসুন PHP তে SumirBD.Mobi সাইটের মতো Auto Upload / Grabber ডাউনলেড সাইট তৈরী করা শিখি [সম্পূর্ন টিউটোরিয়াল]")
সুন্দর হইছে 😀