The FlaskForm application - JorgeFrancoIbanez/FlaskForm GitHub Wiki

This application only allow to insert via data into Mysql via flask and flask-Mysql.

#Project structure Just need a structure like:

|
|--static/
|---- css/
|------ form.css
|---- js/
|------ form.css
|------ jquery-1.11.2.js
|--templates/
|---- base.html
|---- form.html
|---- index.html
|--__init__.py

##Setting up Mysql

###Create a table We need to create a table called "data". create table data (id INT NOT NULL AUTO_INCREMENT, name VARCHAR (45) NOT NULL, color VARCHAR (45) NOT NULL, animal VARCHAR (45) NOT NULL, PRIMARY KEY(id));

###Storage procedure

Let's create a MySQL stored procedure to add items to the data table.

DELIMITER $$ CREATE DEFINER=root@localhost PROCEDURE sp_createData( IN user_name VARCHAR(45), IN user_color VARCHAR(45), IN user_animal VARCHAR(45) ) BEGIN insert into data ( name, color, animal ) values ( user_name, user_color, user_animal ); END$$ DELIMITER ;

• The procedure allow us to pass data trough flask and Mysql using the data posted.

##Create a Method for the Stored Procedure

@app.route('/form',methods=['POST','GET'])
def form():
    try:
        _name = request.form['inputName']
        _color = request.form['inputColor']
        _animal= request.form['inputAnimal']

Assign to the variables the data in the inputs of the html.

         # validate the received values
        if _name and _color and _animal:

            # All Good, let's call MySQL
            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_createData',(_name,_color,_animal))
            data = cursor.fetchall()

After a simple validation to know if the variables are empty or not, let's call the procedure we made before.

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

If the procedure finish his job without any exception it will return a json with that will be display in the next section, if not returns an error.

        else:
            return json.dumps({'html':'<span>Enter the required fields</span>'})
    
    except Exception as e:
        return json.dumps({'error':str(e)})
    finally:
        cursor.close()
        conn.close()

Finally it close the connection with the database.

##Let's create an interface

For this project and the benefit of the wiki, in the frontend, I only going to explain the form.js file assuming that you have some knowledge of HTML.

###form.js $('#btnform').click(function(){ $.ajax({ url: '/form', data: $('form').serialize(), type: 'POST', success: function(response){ console.log($('form').serialize()); console.log(response); toastr"success" }, error: function(error){ console.log($('form').serialize()); console.log(error); toastr"error" } }); });

• This function POST the information inserted in the form as a JSON via ajax. It will display a pop-up of success or error.