Html table database to be displayed in a separate browser tab

Question:

So 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 class="container my-3">
        <h2>Add a Todo</h2>
        <form action="/" method="POST">
            <div class="mb-3">
              <label for="title" class="form-label">Todo Title</label>
              <input type="text" class="form-control" name="title" id="title" aria-describedby="emailHelp"> 
            </div>
            <div class="mb-3">
              <label for="desc" class="form-label">Todo Description</label>
              <input type="text" class="form-control" name="desc" id="desc">
            </div>
            
            <button type="submit" class="btn btn-dark">Submit</button>
          </form>
    </div>
    <div class="container my-3">
        <h2>Your Todos</h2>
        
                {% if allTodo|length == 0 %}
                   
                <div class="alert alert-dark" role="alert">
                    No Todos found. Add your first todo now!
                  </div>
                    {% else %} 
                    <table class="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" class="btn btn-outline-dark btn-sm mx-1">Update</button>
                  <a href="/delete/{{todo.sno}}" type="button" class="btn btn-outline-dark btn-sm mx-1">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

Asked By: tidersky

||

Answers:

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.

Answered By: Jdelacrix

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.

Categories: questions Tags: , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.