Showing Sample Finished Code

app.py

@@ -48,6 +48,54 @@ def get_article(id):
     article.content = markdown.markdown(article.content)
     return render_template('article.html', article=article)
 
+##########################################################
+# Start of new code
+##########################################################
+
+# DELETE
+@app.delete("/article/<int:id>")
+def delete_article(id):
+    article = Article.query.get_or_404(id)
+    db.session.delete(article)
+    db.session.commit()
+    return """
+    <div>
+        <div class="m-2 p-2 bg-success rounded">Successfully Deleted Article!</div>
+        <a href="/" class="btn btn-primary">Return Home</a>
+    </div>
+    """
+
+# CREATE
+@app.get("/article/new")
+def create_article_form():
+    return render_template("form_create.html")
+
+@app.post("/article")
+def create_article():
+    article = get_article_from_request(request)
+    db.session.add(article)
+    db.session.commit()
+    return render_template("articles_list.html", articles=get_articles())
+
+# UPDATE
+@app.get("/article/<int:id>/edit")
+def edit_article_form(id):
+    article = Article.query.get_or_404(id)
+    return render_template("form_edit.html", article=article)
+
+@app.put("/article/<int:id>")
+def edit_article(id):
+    existing_article = Article.query.get_or_404(id)
+    new_article_data = get_article_from_request(request)
+    existing_article.title = new_article_data.title
+    existing_article.content = new_article_data.content
+    db.session.commit()
+    return render_template("article_details.html", article=existing_article)
+
+##########################################################
+# End of new code
+##########################################################
+
 ##########################################################
 # End of Routes Section
 ##########################################################

templates/article.html

@@ -4,9 +4,9 @@
     <h1>{{ article.title }}</h1>
     <p>📅{{ article.date }}</p>
     <p>
-        <button class="btn btn-sm btn-warning">Edit</button>
-        <button class="btn btn-sm btn-danger">Delete</button>
+        <button hx-get="/article/{{article.id}}/edit" hx-target="#articlebody" class="btn btn-sm btn-warning">Edit</button>
+        <button hx-delete="/article/{{article.id}}" hx-target="#articlebody" class="btn btn-sm btn-danger">Delete</button>
     </p>
-    {{ article.content | safe }}    
+    {{ article.content | safe }}
 </div>
 {% endblock %}

templates/article_details.html

@@ -0,0 +1,7 @@
+<h1>{{ article.title }}</h1>
+<p>📅{{ article.date }}</p>
+<p>
+    <button hx-get="/article/{{article.id}}/edit" hx-target="#articlebody" class="btn btn-sm btn-warning">Edit</button>
+    <button hx-delete="/article/{{article.id}}" hx-target="#articlebody" class="btn btn-sm btn-danger">Delete</button>
+</p>
+{{ article.content | safe }}

templates/articles_list.html

@@ -0,0 +1,8 @@
+<div class="m-2 p-2 bg-success rounded">Successfully Created Article!</div>
+<button hx-get="/article/new" hx-target="#articlesarea" class="btn btn-lg btn-success">New Article</button>
+{% for article in articles %}
+<div class="container bg-body-tertiary rounded p-5 m-4">
+    <h2><a href="/article/{{ article.id }}">{{ article.title }}</a></h2>
+    <p>📅{{ article.date }}</p>
+</div>
+{% endfor %}

templates/form_create.html

@@ -1,4 +1,4 @@
-<form>
+<form hx-post="/article" hx-swap="outerHTML">
     <h2>New Article</h2>
     <div class="mb-3">
         <label for="title" class="form-label">Title</label>

templates/form_edit.html

@@ -1,4 +1,4 @@
-<form>
+<form hx-put="/article/{{article.id}}" hx-swap="outerHTML">
     <h2>Edit Article</h2>
     <div class="mb-3">
         <label for="title" class="form-label">Title</label>

templates/index.html

@@ -3,7 +3,7 @@
 <h1>Welcome to My Blog!</h1>
 
 <div id="articlesarea">
-    <button class="btn btn-lg btn-success">New Article</button>
+    <button hx-get="/article/new" hx-target="#articlesarea" class="btn btn-lg btn-success">New Article</button>
     {% for article in articles %}
     <div class="container bg-body-tertiary rounded p-5 m-4">
         <h2><a href="/article/{{ article.id }}">{{ article.title }}</a></h2>

templates/layout.html

@@ -10,7 +10,7 @@
     <title>My Blog</title>
 </head>
 
-<body>
+<body hx-boost="true">
     <nav class="navbar bg-body-tertiary mb-3">
         <div class="container-fluid">
             <a class="navbar-brand" href="/">My Blog</a>