PythonWeb AppApp DevelopmentHTMLMySQLCSSJavaScript

This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.

Creating a Signup Page

Step 1: Setting Up the Database

We'll be using MySQL as the back end. So log into MySQL from the command line, or if you prefer a GUI like MySQL work bench, you can use that too. First, create a database called BucketList. From the command line: 

Enter the required password and when logged in, execute the following command to create the database:

Once the database has been created, create  a table called tbl_user as shown:

We'll be using Stored procedures for our Python application to interact with the MySQL database. So, once the table tbl_user has been created, create a stored procedure called sp_createUser to sign up a user.

When creating a stored procedure to create a user in the tbl_user table, first we need to check if a user with the same username already exists. If it exists we need to throw an error to the user, otherwise we'll create the user in the user table. Here is how the stored procedure sp_createUser would look:

Step 2: Create a Signup interface

Navigate to the PythonApp/templates directory and create an HTML file called signup.html. Add the following HTML code to signup.html:

Also add the following CSS as signup.css to the static folder inside PythonApp.

In app.py add another method called showSignUp to render the signup page once a request comes to /showSignUp:

Save the changes and restart the server. Click on the Sign Up button on the home page and you should have the signup page as shown: 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

Step 3: Implement a Signup method 

Next, we need a server-side method for the UI to interact with the MySQL database. So navigate to PythonApp and open app.py. Create a new method called signUp and also add a route /signUp. Here is how it looks:

We'll be using jQuery AJAX to post our signup data to the signUp method, so we'll specify the method in the route definition.

In order to read the posted values we need to import request from Flask.

Using request we can read the posted values as shown below:

Once the values are read, we'll simply check if they are valid and for the time being let's just return a simple message:

Also import json from Flask, since we are using it in the above code to return json data.

Step 4: Create a Signup request

We'll be using jQuery AJAX to send the signup request to the Python method. Download and place jQuery inside PythonApp/static/js and add a link to it from the signup page. Once jQuery has been included, we'll add a jQuery POST request when the user clicks the Sign Up button.

So, let's attach the signup button click event as shown:

Save all the changes and restart the server. From the Sign Up page, fill in the details and click Sign Up. Check the browser console and you should have the below message:

Step 5: Call the MySQL Stored Procedure 

Once we have the name, email address and password, we can simply call the MySQL stored procedure to create the new user.

To connect with MySQL, we'll be using Flask-MySQL, which is a Flask extension. In order to get started with Flask-MySQL, install it using pip package manager:

Import MySQL inside app.py:

Earlier we defined our app as shown:

Along with that include the following MySQL configurations:

First, let's create the MySQL connection:

Once the connection is created, we'll require a cursor to query our stored procedure. So, using conn connection, create a cursor.

Before calling the create user stored procedure, let's make our password salted using a helper provided by Werkzeug. Import the module into app.py:

Use the salting module to create the hashed password.

Now, let's call the procedure sp_createUser:

If the procedure is executed successfully, then we'll commit the changes and return the success message. 

Save the changes and restart the server. Go to the signup page and enter the name, email address and password and click the Sign Up button. On successful user creation, you'll be able to see a message in your browser console.

Wrapping It Up

In this tutorial, we saw how to get started with creating a web application using Python Flask, MySQL and the Flask-MySQL extension. We created and designed the database tables and stored procedure, and implemented the signup functionality. In the next tutorial, we'll take this series to the next level by implementing sign-in functionality and some other features.

Source code from this tutorial is available on GitHub.

Do let us know your thoughts in the comments below! 

[출처] http://code.tutsplus.com/tutorials/creating-a-web-app-from-scratch-using-python-flask-and-mysql--cms-22972