Blood Group Survey WebApp

#webdev #beginners #tutorial #python

Hello 👋 , this is my first Blog.

This Flask application allows users to input their name, age, blood group, and quantity of blood they are willing to donate. The data is stored in a SQLite database. A notification is displayed to the user after they submit their response.

Prerequisites :

Basic Knowledge of Python
Flask, SQLAlchemy and Plyer

Dive in :

Let's dive into how you could make a simple Python survey app with minimal coding as a beginner. Dependencies are Flask Framework which allows Python to interact with the Web world, SQLAlchemy to store all the data and Plyer to notify the user.

Let's start by creating some Python Code for storing data and then move onto Python and HTML :

Requirements are the Person's Name, Blood Group, Age and Quantity of blood donated, so firstly we will create a class that connects to SQLAlchemy to create a table for the same.

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///data.db'
db = SQLAlchemy()

#creation of database
db = SQLAlchemy(app)
with app.app_context():
    db.create_all()

class Response(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50))
    age = db.Column(db.Integer)
    blood_group = db.Column(db.String(5))
    quantity = db.Column(db.Integer)

Now we need to create a route such that an HTML file is loaded as soon as the webpage is loaded. We need to create a route using Flask Framework using GET and POST methods to retrieve information/data between the webpage, Python and our database. Blood groups are defined so that only valid entries are taken into consideration.

#Global Variable
blood_groups = ['A+', 'A-', 'B+', 'B-', 'O+', 'O-', 'AB+', 'AB-']
@app.route('/', methods=['GET', 'POST'])
def home():  
    db.create_all()
    if request.method == "POST" and 'submit' in request.form: 
        blood_group = request.form['blood_group']
        Name=request.form['Name']
        Age= int(request.form['Age'])
        Quantity= int(request.form['Quantity'])
        if Age<18:
            return redirect('/')     
        else:
            response = Response(blood_group=blood_group, name=Name, age=Age, quantity=Quantity)
            db.session.add(response)
            db.session.commit()
            #Notification Block goes here       
            return redirect('/')   
    return render_template('home.html', blood_groups=blood_groups)

As you can see we have just created a simple route that redirects us to the file name home.html we are using a POST method to retrieve the data, the same method should be used in the HTML file.

<form class="form" action="#" method="POST">
      <h1>Blood Group Survey</h1>
      <h3>Enter Name</h3>
      <input type="text" name ="Name" required>
      <h3>Age</h3>
      <input type="text" name ="Age" required>
      <h3>Quantity Of Blood</h3>
      <input type="text" name ="Quantity" required>
      <h3>Please select your blood group:</h3>
      <select id="blood_group" name="blood_group"><br>
        {% for group in blood_groups %}
        <option value="{{ group }}" >{{ group }}</option>
        {% endfor %}
      </select>
      <input class="button" type="submit" value="submit" name= "submit">
</form>

Now we just need to create a notification block using Python and Plyer which can be imported. This provides desktop notifications to the user for better interactiveness.

            #plyer notification
            notification.notify(
                title='Entry Added',
                message='Respond Successfully Addded',
                app_name='Blood Donation Survey',
            )

CSS can also be added to make it look better. The code uploaded on GitHub consists of CSS and all the integration required and a step-by-step guide in the Readme file to do so.