পাইথন ফ্লাস্ক এবং মাইএসকিউএল ব্যবহার করে একদম শুরু থেকে ওয়েব অ্যাপ্লিকেশন তৈরি

Bengali (বাংলা) translation by Syeda Nur-E-Royhan (you can also view the original English article)

এই সিরিজে আমরা পাইথন, ফ্লাস্ক এবং মাইএসকিউএল ব্যবহার করে একটি সাধারণ ওয়েব অ্যাপ্লিকেশন তৈরি করবো। এটি একটা সহজ ও সাধারণ বাকেট লিস্টের অ্যাপ্লিকেশন হবে যেখানে ব্যবহারকারীরা রেজিস্টার করবেন, সাইন ইন করবেন এবং তাদের নিজস্ব বাকেট লিস্ট তৈরি করবেন।

এই টিউটোরিয়ালে আমরা ধরে নিচ্ছি যে পাইথন প্রোগ্রামিং ল্যাঙ্গুয়েজ সম্পর্কে আপনার প্রাথমিক জ্ঞান রয়েছে। আমাদের অ্যাপ্লিকেশন তৈরির কাজে আমরা Flask নামের একটি পাইথন ওয়েব অ্যাপ্লিকেশন ফ্রেমওয়ার্ক ব্যবহার করবো। সাথে MySQL থাকবে ব্যাক এন্ড হিসেবে।

পাইথন ফ্লাস্কের পরিচিতি

ফ্লাস্ক হচ্ছে ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত একটি পাইথন ফ্রেমওয়ার্ক। অফিসিয়াল সাইট থেকে পাওয়া,

ফ্লাস্ক হচ্ছে ওয়ের্কজিউগ, জিনজা ২ এবং শুভাকাঙ্ক্ষার ভিত্তিতে তৈরি পাইথনের একটি মাইক্রোফ্রেমওয়ার্ক।

পাইথনের কথা ভাবলে কার্যত যে ফ্রেমওয়ার্কের কথা আমাদের মনে ভেসে উঠে সেটি হল জ্যাঙ্গো ফ্রেমওয়ার্ক। তবে নতুন নতুন পাইথন ব্যবহারকারীদের দৃষ্টিকোণ থেকে জ্যাঙ্গোর তুলনায় ফ্লাস্ক দিয়ে কাজ শুরু করা সহজ।

ফ্লাস্ক সেট আপ করা

ফ্লাস্ক সেট আপ করা বেশ সহজ এবং দ্রুত। pip প্যাকেজ ম্যানেজার দিয়ে আমাদের শুধুমাত্র জা করতে হবে তা হল:

pip install flask

ফ্লাস্ক ইন্সটল করা শেষ হয়ে গেলে FlaskApp নামে একটি ফোল্ডার তৈরি করুন। FlaskApp ফোল্ডারে চলে যান এবং app.py নামে একটি ফাইল খুলুন। flask মডিউল ইম্পোর্ট করুন এবং নিচে যেভাবে দেখানো আছে সেভাবে ফ্লাস্ক ব্যবহার করে একটি অ্যাপ তৈরি করুন:

from flask import Flask
app = Flask(__name__)

এখন মূল রুট / এবং সাথের রিকোয়েস্ট হ্যান্ডলারকে সংজ্ঞায়িত করুন:

@app.route("/")
def main():
    return "Welcome!"

এরপর, এক্সিকিউটেড ফাইলটি মূল প্রোগ্রাম কিনা দেখুন এবং অ্যাপটি চালু করুন:

if __name__ == "__main__":
    app.run()

পরিবর্তনগুলো সেভ করে রাখুন এবং app.py চালু করুন:

python app.py

আপনার ব্রাউজার http://localhost:5000/-এর দিকে তাক করুন এবং এতে করে স্বাগতম বার্তা পেয়ে যাবেন।

হোম পেইজ তৈরি করা

প্রথমে, অ্যাপ্লিকেশনটি যখন চালু করা হবে তখন আমাদের হোম পেইজে অন্যান্য ব্যবহারকারীদের যোগ করা সর্বশেষ কয়েকটি বাকেট লিস্ট আইটেম দেখানো হবে। কাজেই চলুন আমাদের অ্যাপ্লিকেশন ফোল্ডারে হোম পেইজটি যোগ করে দেই।

ফ্লাস্ক templates ফোল্ডারে টেম্পলেট ফাইল খুঁজে বেড়ায়। কাজেই PythonApp ফোল্ডারে চলে যান এবং templates নামে একটি ফোল্ডার তৈরি করুন। templates-এর ভিতরে index.html নামে একটি ফাইল তৈরি করুন। index.html ওপেন করুন এবং নিচের এইচটিএমএল যোগ করুন:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Python Flask Bucket List App</title>


    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">


</head>

<body>

    <div class="container">
        <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li role="presentation" class="active"><a href="#">Home</a>
                    </li>
                    <li role="presentation"><a href="#">Sign In</a>
                    </li>
                    <li role="presentation"><a href="showSignUp">Sign Up</a>
                    </li>
                </ul>
            </nav>
            <h3 class="text-muted">Python Flask App</h3>
        </div>

        <div class="jumbotron">
            <h1>Bucket List App</h1>
            <p class="lead"></p>
            <p><a class="btn btn-lg btn-success" href="showSignUp" role="button">Sign up today</a>
            </p>
        </div>

        <div class="row marketing">
            <div class="col-lg-6">
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>

            <div class="col-lg-6">
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>
        </div>

        <footer class="footer">
            <p>&copy; Company 2015</p>
        </footer>

    </div>
</body>

</html>

app.py ওপেন করুন এবং render_template ইম্পোর্ট করুন। এটি আমরা টেম্পলেট ফাইলগুলো রেন্ডার করার কাজে লাগাবো।

from flask import Flask, render_template

রেন্ডার করা টেম্পলেট ফাইল ফিরিয়ে নিতে মূল প্রক্রিয়াটি পরিবর্তন করুন।

def main():
    return render_template('index.html')

পরিবর্তনগুলো সেভ করে রাখুন এবং সার্ভার রিস্টার্ট দিন। আপনার ব্রাউজার http://localhost:5000/-এ তাক করুন। এখন আপনি নিচের স্ক্রিনটি পাবেন:

সাইন আপ পেইজ তৈরি করা

ধাপ ১: ডাটাবেজ সেট করা

আমরা ব্যাক এন্ড হিসেবে MySQL ব্যবহার করবো। কাজেই কমান্ড লাইন থেকে মাইএসকিউএলে লগইন করুন। অথবা আপনি চাইলে মাইএসকিউএল ওয়ার্ক বেঞ্চের মতো জিইউআই ব্যবহার করতে পারেন। প্রথমে, BucketList নামের একটি ডাটাবেজ তৈরি করুন। কমান্ড লাইন থেকে পাওয়া:

mysql -u <username> -p

প্রয়োজনীয় পাসওয়ার্ড প্রবেশ করান এবং লগইন করার পর ডাটাবেজ তৈরি করতে নিচের কমান্ড চালু করুন:

CREATE DATABASE BucketList;

একবার ডাটাবেজ তৈরি হয়ে গেলে নিচে যেভাবে দেখানো হয়েছে সেভাবে tbl_user নামে একটি টেবিল তৈরি করুন:

CREATE TABLE `BucketList`.`tbl_user` (
  `user_id` BIGINT NULL AUTO_INCREMENT,
  `user_name` VARCHAR(45) NULL,
  `user_username` VARCHAR(45) NULL,
  `user_password` VARCHAR(45) NULL,
  PRIMARY KEY (`user_id`));

মাইএসকিউএল ডাটাবেজের সাথে কাজ করার জন্য আমরা পাইথন অ্যাপ্লিকেশনে Stored procedures ব্যবহার করবো। কাজেই, একবার tbl_user টেবিলটি তৈরি হয়ে গেলে ব্যবহারকারীদের সাইন আপ করানোর জন্য sp_createUser নামে স্টোরড প্রসিডিউর তৈরি করুন।

tbl_user টেবিলে ব্যবহারকারী তৈরি করার জন্য স্টোরড প্রসিডিউর তৈরি করতে হলে প্রথমে দেখে নিতে হবে একই username ব্যবহারকারী ইতোমধ্যে আছে কি না। যদি থেকে থাকে তাহলে ব্যবহারকারীকে এরর দেখানো হবে। আর না থাকলে আমরা ইউজার টেবিলে নতুন এই ব্যবহারকারীকে যুক্ত করবো। স্টোরড প্রসিডিউর sp_createUser দেখতে এমন হবে:

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`(
    IN p_name VARCHAR(20),
  IN p_username VARCHAR(20),
	IN p_password VARCHAR(20)
)
BEGIN
	if ( select exists (select 1 from tbl_user where user_username = p_username) ) THEN
	
		select 'Username Exists !!';
	
	ELSE
	
		insert into tbl_user
		(
			user_name,
			user_username,
			user_password
		)
		values
		(
			p_name,
			p_username,
			p_password
		);
	
	END IF;
END$$
DELIMITER ;

ধাপ ২: একটি সাইন আপ ইন্টারফেস তৈরি করুন

PythonApp/templates ডিরেক্টরিতে চলে যান এবং signup.html নামে একটি এইচটিএমএল ফাইল তৈরি করুন। signup.html-এ নিচের এইচটিএমএল কোড যোগ করে দিন:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Python Flask Bucket List App</title>

   
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
    <link href="../static/signup.css" rel="stylesheet">
   
  </head>

  <body>

    <div class="container">
      <div class="header">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" ><a href="main">Home</a></li>
            <li role="presentation"><a href="#">Sign In</a></li>
            <li role="presentation" class="active"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Python Flask App</h3>
      </div>

      <div class="jumbotron">
        <h1>Bucket List App</h1>
        <form class="form-signin">
        <label for="inputName" class="sr-only">Name</label>
        <input type="name" name="inputName" id="inputName" class="form-control" placeholder="Name" required autofocus>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password" required>
        
        <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Sign up</button>
      </form>
      </div>

      

      <footer class="footer">
        <p>&copy; Company 2015</p>
      </footer>

    </div>
  </body>
</html>

সেই সাথে নিচের CSS signup.css হিসেবে PythonApp-এর ভিতরে স্থায়ী ফোল্ডার হিসেবে যুক্ত করুন।

body {
  padding-top: 40px;
  padding-bottom: 40px;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/showSignUp-এ কোন আবেদন আসলে সাইন আপ পেইজটি রেন্ডার করার জন্য app.py-তে showSignUp নামে আরেকটি প্রক্রিয়া যোগ করুন:

@app.route('/showSignUp')
def showSignUp():
    return render_template('signup.html')

পরিবর্তনগুলো সেভ করে রাখুন এবং সার্ভার রিস্টার্ট দিন। হোম পেইজের সাইন আপ বাটনে ক্লিক করুন এবং আপনার সাইন আপ পেইজটি তাহলে এমন দেখাবে:

ধাপ ৩: একটি সাইন আপ প্রক্রিয়া প্রয়োগ করুন

এরপর, মাইএসকিউএল ডাটাবেজের সাথে কাজ করতে আমাদের ইউআই-এর জন্য একটি সার্ভার-সাইড প্রক্রিয়া লাগবে। কাজেই PythonApp-এ চলে যান এবং app.py ওপেন করুন। signUp নামে একটি নতুন প্রক্রিয়া তৈরি করুন এবং সাথে একটি রুট /signUp যোগ করুন। দেখুন কেমন দেখা যায়:

@app.route('/signUp')
def signUp():
    # create user code will be here !!

signUp প্রক্রিয়াতে আমাদের সাইন আপ ডাটা পোস্ট করার জন্য জেকোয়েরি অ্যাজাক্স ব্যবহার করবো। কাজেই আমরা রুটের সংগায় প্রক্রিয়াটি নির্দিষ্ট করে দিবো।

@app.route('/signUp',methods=['POST'])
def signUp():
    # create user code will be here !!

পোস্ট করা ভ্যালুগুলো পড়ার জন্য আমাদের ফ্লাস্ক থেকে request ইম্পোর্ট করতে হবে।

from flask import Flask, render_template, request

request ব্যবহার করে আমরা নিচে যেভাবে দেখানো হয়েছে সেভাবে পোস্ট করা ভ্যালুগুলো দেখতে পারবো।

@app.route('/signUp',methods=['POST'])
def signUp():

    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']

একবার ভ্যালুগুলো পড়া হয়ে গেলে, আমরা শুধুমাত্র তথ্যগুলো যাচাই করে নিব এবং এই সময়ের জন্য একটি সাধারণ বার্তা পাঠিয়ে দিবো:

@app.route('/signUp',methods=['POST'])
def signUp():

    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']

    # validate the received values
    if _name and _email and _password:
        return json.dumps({'html':'<span>All fields good !!</span>'})
    else:
        return json.dumps({'html':'<span>Enter the required fields</span>'})

সেই সাথে ফ্লাস্ক থেকে json ইম্পোর্ট করা হবে যেহেতু আমরা json ডাটা ফিরিয়ে নেওয়ার জন্য এটিকে উপরের কোডে ব্যবহার করছি।

from flask import Flask, render_template, json, request

ধাপ ৪: একটি সাইন আপ রিকোয়েস্ট তৈরি করুন

আমরা পাইথন প্রক্রিয়ায় সাইন আপ রিকোয়েস্ট পাঠানোর জন্য জেকোয়েরি অ্যাজাক্স ব্যবহার করবো। jQuery ডাউনলোড করুন এবং PythonApp/static/js-এর ভিতরে স্থাপন করুন। সাইন আপ পেইজ থেকে এখানে একটি লিঙ্ক যোগ করুন। জেকোয়েরি যোগ করা হয়ে গেলে ব্যবহারকারী যখন Sign Up বাটন ক্লিক করবেন তখন একটি জেকোয়েরি POST রিকোয়েস্ট যোগ করবো।

কাজেই, যেভাবে দেখানো হয়েছে সেভাবে সাইন আপ বাটন ক্লিক ইভেন্টটি যুক্ত করে দেই:

$(function() {
    $('#btnSignUp').click(function() {

        $.ajax({
            url: '/signUp',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

সবগুলো পরিবর্তন সেভ করুন এবং সার্ভার রিস্টার্ট করুন। সাইন আপ পেইজ থেকে বিস্তারিত লিখুন এবং সাইন আপে ক্লিক করুন। ব্রাউজার কনসোল দেখুন। সেখানে নিচের বার্তাটি থাকবে:

{"html": "<span>All fields good !!</span>"}

ধাপ ৫: মাইএসকিউএল স্টোরড প্রসিডিউর কল করুন

একবার আমরা name, email address এবং password পেয়ে গেলে সহজেই মাইএসকিউএল স্টোরড প্রসিডিউরে কল করে নতুন ইউজার তৈরি করা যাবে।

মাইএসকিউএলের সাথে যুক্ত হতে হলে আমরা ফ্লাস্ক এক্সটেনশন ফ্লাস্ক-মাইএসকিউএল ব্যবহার করবো। Flask-MySQL দিয়ে কাজ শুরু করতে চাইলে pip প্যাকেজ ম্যানেজার ব্যবহার করে এটিকে ইন্সটল করুন:

pip install flask-mysql

app.py-এর ভিতরে মাইএসকিউএল ইম্পোর্ট করুন:

from flask.ext.mysql import MySQL

এর আগে আমরা আমাদের অ্যাপটিকে নিচের মতো করে ডিফাইন করেছিলাম:

app = Flask(__name__)

তার সাথে নিচের মাইএসকিউএল কনফিগারেশন যোগ করুন:

mysql = MySQL()

# MySQL configurations
app.config['MYSQL_DATABASE_USER'] = 'jay'
app.config['MYSQL_DATABASE_PASSWORD'] = 'jay'
app.config['MYSQL_DATABASE_DB'] = 'BucketList'
app.config['MYSQL_DATABASE_HOST'] = 'localhost'
mysql.init_app(app)

প্রথমে, মাইএসকিউএল সংযোগ স্থাপন করে নিন:

conn = mysql.connect()

একবার সংযোগ স্থাপন হয়ে গেলে আমাদের স্টোরড প্রসিডিউর কোয়েরি করার জন্য একটি cursor লাগবে। কাজেই, conn সংযোগ ব্যবহার করে একটি কার্সর তৈরি করে ফেলুন।

cursor = conn.cursor()

ইউজার তৈরির স্টোরড প্রসিডিউর চালু করার আগে ওয়ের্কজিউগের সরবরাহকৃত সহায়তাকারী ব্যবহার করে পাসওয়ার্ডটিকে সাংকেতিক করে ফেলি। app.py-এর ভিতরে মডিউলটি ইম্পোর্ট করুন:

from werkzeug import generate_password_hash, check_password_hash

সাংকেতিক মডিউল ব্যবহার করে হ্যাশড পাসওয়ার্ড তৈরি করুন।

_hashed_password = generate_password_hash(_password)

এখন, চলুন sp_createUser প্রসিডিউর চালু করি:

cursor.callproc('sp_createUser',(_name,_email,_hashed_password))

প্রক্রিয়াটি যদি সফলভাবে চালু হয় তাহলে আমরা পরিবর্তনগুলো ধরে রাখবো এবং এই সাফল্য বার্তা জানিয়ে দিবো।

data = cursor.fetchall()

if len(data) is 0:
    conn.commit()
    return json.dumps({'message':'User created successfully !'})
else:
    return json.dumps({'error':str(data[0])})

পরিবর্তনগুলো সেভ করুন এবং সার্ভার রিস্টার্ট করুন। সাইন আপ পেইজে যান এবং name, email address এবং password প্রবেশ করান। তারপর সাইন আপ বাটনে ক্লিক করুন। সফলভাবে ইউজার তৈরি করা হলে আপনি আপনার ব্রাউজার কনসোলে একটি বার্তা দেখতে পাবেন।

{"message": "User created successfully !"}

সমাপ্তি টানা

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

এই টিউটোরিয়ালের সোর্স কোড গিটহাবে পাওয়া যাবে।

নিচের কমেন্টে আপনাদের মতামত জানাতে ভুলবেন না!