CODEWITHSUNDEEP
pythonmysqlflask
dlphra_02
dlphra_02

Reputation: 1

Mysql Database with Flask (Page keeps Refreshing)

I am new to python and flask. I have been working with MySQL.python connector to connect to the database with flask. The issues that i am having, is trying to take the input data from the webpage and have it appear in MySQL. From everything I have learned so far is using the (details = request.form) to pull data from the HTML and insert it into a variable and running code like that. When I press submit on the webpage, it refreshes it and no data has been added to the database.

If you all can help, it will be much appreciated.

from flask import Flask, render_template, request, flash, redirect, url_for
from flask_mysqldb import MySQL
import mysql.connector
app = Flask(__name__)


conn= mysql.connector.connect (
host = 'localhost' ,
user = 'root',
password = '',

database = 'db_randolph',)

if (conn):                                               # this connects to the database and has a if statment that says if it workds or not. 
    print ("Connected Successfully")
else:
    print ("Connection Not Established")


mycursor = conn.cursor()



mysql = MySQL(app)

@app.route('/ADD', methods=['GET', 'POST'])
def test_Artist ():
    if request.method == 'POST':
        details = request.form
        artist_name = details['artist_name']
        ablum_name = details['ablum_name']
        song_name = details[ 'song_name']
        cur = mysql.connection.cursor()
        artist = "INSERT INTO p_artist(artist_name) VALUES (%s)"  # this is the add screen for the site and it will flash a message when complete. When things are submitted the page refresh with submitting things to the database. 
        song = "INSERT INTO p_track_name(track_name) VALUES (%s)"
        ablum = "INSERT INTO p_ablum(ablum_name) VALUES (%s)"
        mycursor.commit(artist, artist_name)
        mycursor.commit(song, song_name)
        mycursor.commit(ablum, ablum_name)
        mycursor.close()
        Flash("The infomation has suscessfully been inserted into database")
        return redirect( "home.html")

    return render_template('add.html')


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

<!DOCTYPE html> 
<html> 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> music Page </title>
<style> 
Body {
  font-family: Calibri, Helvetica, sans-serif;
  background-color: pink;
}
button { 
       background-color: #4CAF50; 
       width: 100%;
        color: orange; 
        padding: 15px; 
        margin: 10px 0px; 
        border: none; 
        cursor: pointer; 
         } 
 form { 
        border: 3px solid #f1f1f1; 
    } 
 input[type=text], input[type=password] { 
        width: 100%; 
        margin: 8px 0;
        padding: 12px 20px; 
        display: inline-block; 
        border: 2px solid green; 
        box-sizing: border-box; 
    }
 button:hover { 
        opacity: 0.7; 
    } 
  .cancelbtn { 
        width: auto; 
        padding: 10px 18px;
        margin: 10px 5px;
    } 
      
   
 .container { 
        padding: 25px; 
        background-color: lightblue;
    } 
</style> 
<title> Artist Table Database</title>
</head>  
<body>  


    <p><a href="http://localhost:5000/Delete_Ablum">Delete Ablum</a></p>
  
    <p><a href="http://localhost:5000/Delete_Artist">Delete Artist</a></p>
  
    <p><a href="http://localhost:5000/Delete_Songs">Delete Artist</a></p>

    <p><a href="http://localhost:5000/Home">Home</a></p>

    <center> <h1> Add Artist, Name, Song and Ablum Infomation </h1> </center> 
    <form>
        <div class="container"> 
            <label>Artist Name: </label> 
            <input type="text" placeholder="Artist Name" name="artist_name" >
            <label>Artist Ablum : </label> 
            <input type="text" placeholder="Enter Ablum Name" name="ablum_name">
            <label> Song </label>
            <input type="text" placeholder="Enter Song" name="song_name" >
            <button type="submit">Enter Artist Infomation</button> 
            <input type="checkbox" checked="checked"> Remember me 
            <button type="button" class="cancelbtn"> Cancel</button> 
            Forgot <a href="#"> password? </a> 
        </div> 
    </form>  
 <table> 

 </table>   
    
</body>   
</html>

Upvotes: 0

Views: 79

Answers (1)

Theorist
Theorist

Reputation: 177

You haven't specified that the form method is 'POST', from what I can tell, form invokes the 'GET' method (You can check this by printing request.method), ergo, the 'if request.method == 'POST':' isn't met, go to your tag and add this:

<form action = "/add" method = "POST">

Then try it again.

Also, you might want to add an id to your button, like this

<button type="submit" id = "submit" class="btn btn-primary">Submit</button>

Just in-case you would like to use JavaScript for something.

Upvotes: 0

Related Questions