So guys I have been trying to create a simple CRUD app(T0-do app) using flask and Sqlite in python and I did get the output and everything works as expected ,but the table(database) is displayed in the same browser tab ,i want the user form and table to be in separate tab

class Todo(db.Model):
    sno = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(200), nullable=False)
    desc = db.Column(db.String(500), nullable=False)
    date_created = db.Column(db.DateTime, default=datetime.utcnow)

    def __repr__(self) -> str:
        return f"{self.sno} - {self.title}"

@app.route('/', methods=['GET', 'POST'])
def hello_world():
    if request.method=='POST':
        title = request.form['title']
        desc = request.form['desc']
        todo = Todo(title=title, desc=desc)
        db.session.add(todo)
        db.session.commit()
        
    allTodo = Todo.query.all() 
    return render_template('index.html', allTodo=allTodo)

@app.route('/show')
def products():
    allTodo = Todo.query.all()
    print(allTodo)
    return 'this is products page'

@app.route('/update/<int:sno>', methods=['GET', 'POST'])
def update(sno):
    if request.method=='POST':
        title = request.form['title']
        desc = request.form['desc']
        todo = Todo.query.filter_by(sno=sno).first()
        todo.title = title
        todo.desc = desc
        db.session.add(todo)
        db.session.commit()
        return redirect("/")
        
    todo = Todo.query.filter_by(sno=sno).first()
    return render_template('update.html', todo=todo)

@app.route('/delete/<int:sno>')
def delete(sno):
    todo = Todo.query.filter_by(sno=sno).first()
    db.session.delete(todo)
    db.session.commit()
    return redirect("/")

if __name__ == "__main__":
    app.run(debug=True, port=8000)

And this is my html code

    <div >
        <h2>Add a Todo</h2>
        <form action="/" method="POST">
            <div >
              <label for="title" >Todo Title</label>
              <input type="text"  name="title" id="title" aria-describedby="emailHelp"> 
            </div>
            <div >
              <label for="desc" >Todo Description</label>
              <input type="text"  name="desc" id="desc">
            </div>
            
            <button type="submit" >Submit</button>
          </form>
    </div>
    <div >
        <h2>Your Todos</h2>
        
                {% if allTodo|length == 0 %}
                   
                <div  role="alert">
                    No Todos found. Add your first todo now!
                  </div>
                    {% else %} 
                    <table >
                        <thead>
                          <tr>
                            <th scope="col">SNo</th>
                            <th scope="col">Title</th>
                            <th scope="col">Description</th>
                            <th scope="col">Time</th>
                            <th scope="col">Actions</th>
                          </tr>
                        </thead>
                        
                        <tbody>
              {% for todo in allTodo %}
              <tr>
                <th scope="row">{{loop.index}}</th>
                <td>{{todo.title}}</td>
                <td>{{todo.desc}}</td>
                <td>{{todo.date_created}}</td>
                <td>
                  <a href="/update/{{todo.sno}}" type="button" >Update</button>
                  <a href="/delete/{{todo.sno}}" type="button" >Delete</button>
                
                </td>
              </tr>
              
              {% endfor %}
            </tbody>
            </table>
              {% endif %}
               
           
    </div>

output:-I want this below table to appear in a new tab but not in the same tab as the form

CodePudding user response：

You need to have two separate templates and two separate routes. Seems as if you don't have a fundamental understanding of the Flask architecture. If you have the form and table in the same template, of course they're going to render on the same page.

Create a new template with the table code and have a new route that renders the new template.

CodePudding user response：

Make a copy of your index.html and rename it to show.html. Remove the first div container from this template. Replace the return in @app.route('/show') to the same as in '/' route and change the template to show.html. Navigate to 127.0.0.1:8000/show and you should see your table.