-
-
Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet"> | |
<link rel="stylesheet" href="../static/css/styles.css"> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<div class="top"> | |
<div class="title"><h1>My Blog</h1></div> | |
</div> | |
{% for post in all_posts: %} | |
<div class="content"> | |
<div class="card "> | |
<h2>{{ post.title }}</h2> | |
<p>{{ post.subtitle }}</p> | |
<a href="{{ url_for('show_post', index=post.id) }}">Read</a> | |
</div> | |
</div> | |
{% endfor %} | |
</div> | |
</body> | |
<footer> | |
<p>Made with ♥️ in London.</p> | |
</footer> | |
</html> |
from flask import Flask, render_template | |
from post import Post | |
import requests | |
posts = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json() | |
post_objects = [] | |
for post in posts: | |
post_obj = Post(post["id"], post["title"], post["subtitle"], post["body"]) | |
post_objects.append(post_obj) | |
app = Flask(__name__) | |
@app.route('/') | |
def get_all_posts(): | |
return render_template("index.html", all_posts=post_objects) | |
@app.route("/post/<int:index>") | |
def show_post(index): | |
requested_post = None | |
for blog_post in post_objects: | |
if blog_post.id == index: | |
requested_post = blog_post | |
return render_template("post.html", post=requested_post) | |
if __name__ == "__main__": | |
app.run(debug=True) |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet"> | |
<link rel="stylesheet" href="../static/css/styles.css"> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<div class="top"> | |
<div class="title"><h1>My Blog</h1></div> | |
</div> | |
<div class="content"> | |
<div class="card"> | |
<h1> {{ post.title }}</h1> | |
<h2> {{ post.subtitle }}</h2> | |
<p> {{ post.body }}</p> | |
</div> | |
</div> | |
</div> | |
</body> | |
<footer> | |
<p>Made with ♥️ in London.</p> | |
</footer> | |
</html> |
class Post: | |
def __init__(self, post_id, title, subtitle, body): | |
self.id = post_id | |
self.title = title | |
self.subtitle = subtitle | |
self.body = body |
anonberry, I also did it without the Post class. It looks like a good practice, but complicates the implementation in my eyes. I did it this way (with help of chatGPT, as always :D ). I especially liked learning about the next() function thanks to chatGPT solution. Looks useful when searching for a single match as it saves memory and handles errors out of the box, thanks to its second parameter, when no match is found (None).
from flask import Flask, render_template import requests app = Flask(__name__) # Function to fetch blog posts from the API def fetch_blog_posts(): try: response = requests.get('https://api.npoint.io/7b983f7605c621e43e8b') response.raise_for_status() # Raises an exception if the status code is not 200 return response.json() # Return the JSON response except requests.exceptions.RequestException: return [] # Return an empty list if there's an error @app.route('/') def home(): # Fetch the blog posts once blog_posts = fetch_blog_posts() return render_template("index.html", posts=blog_posts) @app.route('/post/<int:post_id>') def post(post_id): # Fetch the blog posts once blog_posts = fetch_blog_posts() # Find the specific post by ID post = next((item for item in blog_posts if item['id'] == post_id), None) if post: return render_template('post.html', post=post) # Render the post template with the specific post else: return "Post not found", 404 # Handle the case where the post doesn't exist if __name__ == "__main__": app.run(debug=True)```
I feel the same way and completely agree with this post. There’s no reason to use classes and complicate things unnecessarily for this simple exercise. Plus, ChatGPT introduced me to next(), which is really useful!
main.py
`from flask import Flask, render_template from post import Post app = Flask(__name__) @app.route('/') def home(): posts = Post() all_blogs = posts.get_post() return render_template("index.html", posts=all_blogs) @app.route("/post/<int:number>") def get_blog(number): posts = Post() all_blogs = posts.get_post() return render_template("post.html", posts=all_blogs, num=number) if __name__ == "__main__": app.run(debug=True)`
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet"> <link rel="stylesheet" href="../static/css/styles.css"> </head> <body> <div class="wrapper"> <div class="top"> <div class="title"><h1>My Blog</h1></div> </div> <div class="content"> <div class="card"> <h2>{{ posts[0]["title"] }}</h2> <p class="text">{{ posts[0]["subtitle"] }} </p> <a href="{{ url_for('get_blog', number=1) }}">Read</a> </div> </div> <div class="content"> <div class="card"> <h2>{{ posts[1]["title"] }}</h2> <p class="text">{{ posts[1]["subtitle"] }} </p> <a href="{{ url_for('get_blog', number=2) }}">Read</a> </div> </div> </div> </body> <footer> <p>Made with ♥️ in India.</p> </footer> </html>
Post.py
import requests BLOG_URL = "https://api.npoint.io/c10781c59f247ee64d13" class Post: def get_post(self, index=None): response = requests.get(BLOG_URL) all_posts = response.json() if index is not None: return [all_posts[index]] return all_posts
Post.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet"> <link rel="stylesheet" href="../static/css/styles.css"> </head> <body> <div class="wrapper"> <div class="top"> <div class="title"><h1>My Blog</h1></div> </div> <div class="content"> <div class="card"> <h1>{{ posts[num-1]["title"] }}</h1> <h2>{{ posts[num-1]["subtitle"] }}</h2> <p>{{ posts[num-1]["body"] }}</p> </div> </div> </div> </body> <footer> <p>Made with ♥️ in India.</p> </footer> </html>
nice bro
Without "Post" class.
main.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
data = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()
@app.route('/')
def home():
return render_template("index.html", posts=data)
@app.route('/post/<blog_id>')
def read_post(blog_id):
return render_template("post.html", blog_id=int(blog_id), posts=data)
if __name__ == "__main__":
app.run(port=8000, debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in posts%}
<div class="content">
<div class="card">
<h2>{{post['title']}}</h2>
<p class="text">{{post['subtitle']}} </p>
<a href="{{url_for('read_post', blog_id=post['id'])}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ .</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
{% for post in posts: %}
{% if post['id'] == blog_id: %}
<h2>{{post['title']}}</h2>
<h2>{{post['subtitle']}}</h2>
<p>{{post['body']}}</p>
{% endif%}
{% endfor %}
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ .</p>
</footer>
</html>
Solution:
main.py
from flask import Flask, render_template
import requests
app = Flask(name)
@app.route('/')
def home():
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
blog_response = requests.get(blog_url)
blog_jason = blog_response.json()
return render_template("index.html", blog_post=blog_jason)
@app.route('/post/int:num')
def post(num):
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
blog_response = requests.get(blog_url)
blog_jason = blog_response.json()
return render_template("post.html", blog_post=blog_jason, id=num)
if name == "main":
app.run(debug=True)
index.html
<title>Title</title>My Blog
{{ post["title"] }}
{{ post["subtitle"] }}
{% endif %} {% endfor %} Read{{ post["title"] }}
{{ post["subtitle"] }}
{% endif %} {% endfor %} Read{{ post["title"] }}
{{ post["subtitle"] }}
{% endif %} {% endfor %} ReadMade with
post.html
<title>Title</title>My Blog
{{ post["title"] }}
{{ post["subtitle"] }}
{{ post["body"] }}
{% endif %} {% endfor %} </div>
Made with
I found a bug when I pasted code copied from the main source. The bug occurred in two HTML files.
Original:
index.html:
`
{{ post.title }}
{{ post.subtitle }}
`post.html:
`
{{ post.title }}
{{ post.subtitle }}
{{ post.body }}
`In VSCode, a yellow warning appears right before the double curly braces ({{). When I deleted the braces and manually retyped {{ again, the program worked perfectly.
Does anyone know what caused this bug?
I'm using VSCode on macOS Sequoia 15.1.1.
The screen displays 3 cards with the following content:
`
{{ post.title }}
{{ post.subtitle }}
{{ post.body }}
`
from flask import Flask, render_template
import requests
app = Flask(name)
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
all_posts = requests.get(url=blog_url).json()
@app.route('/')
def home():
return render_template(template_name_or_list='index.html', posts=all_posts)
@app.route('/post/')
def post(num):
print(all_posts)
filtered_posts = [post for post in all_posts if str(post['id']) == num]
print(filtered_posts)
return render_template(template_name_or_list='post.html', posts=filtered_posts)
if name == "main":
app.run(debug=True)
****
server.py
import requests
from flask import Flask, render_template
app = Flask(name)
@app.route('/')
def home():
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
response = requests.get(blog_url)
all_posts = response.json()
return render_template("index.html",posts = all_posts)
@app.route('/blog/')
def get_post(num):
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
response = requests.get(blog_url)
all_posts = response.json()
return render_template("post.html", posts=all_posts,number = int(num))
if name == "main":
app.run(debug=True)
index.html
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in posts %}
<div class="content">
<div class="card">
<h2>{{post["title"]}}</h2>
<p class="text"> {{post["subtitle"]}} </p>
<a href="{{ url_for('get_post', num = post['id'])}}">Read</a>
</div>
</div>
{% endfor %}
</div>
Made with
post.html
My Blog
<div class="content">
<div class="card">
<h2>{{posts[number-1]["title"]}}</h2>
<p>{{posts[number-1]["body"]}}</p>
</div>
</div>
Made with
Mine as below
main.py
from flask import Flask
from post import Post
app = Flask(__name__)
post = Post()
@app.route('/')
def home():
return post.home()
@app.route('/post/<int:blog_id>')
def get_post(blog_id):
return post.render(blog_id)
if __name__ == "__main__":
app.run(debug=True)
post.py
import requests
from flask import render_template
class Post:
def __init__(self):
self.blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
self.blog_data = self.all_posts()
def render(self, blog_id):
for blog in self.blog_data:
if blog['id'] == blog_id:
return render_template("post.html", **blog)
def all_posts(self):
return requests.get(self.blog_url).json()
def home(self):
return render_template("index.html", blogs=self.blog_data)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for blog in blogs %}
<div class="content">
<div class="card">
<h2>{{blog['title']}}</h2>
<p class="text">{{blog['subtitle']}}</p>
<a href="{{ url_for('get_post', blog_id=blog['id']) }}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{ title }}</h1>
<h2>{{ subtitle }}</h2>
<p>{{ body }}</p>
<div class="back">
<a href="{{ url_for('home') }}">Home</a>
</div>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
I got stuck a bit I tried to use an if in the blog template to get the post id to match the post id passed thought the URL...
couldn't get it to work. Peeked at the sollution which imports posts but that was not addressed yet and there had to be an other way... ended up with the following and working:
main.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
def get_blog():
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
blog_response = requests.get(blog_url)
all_posts = blog_response.json()
return all_posts
@app.route('/')
def home():
return render_template("index.html", posts=get_blog())
@app.route('/post/<blog_id>')
def post(blog_id):
blog_entry=get_blog()[(int(blog_id) - 1)]
return render_template("post.html", post=blog_entry)
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for blog_post in posts %}
<div class="content">
<div class="card">
<h2>{{ blog_post["title"] }}</h2>
<p class="text">{{ blog_post["subtitle"] }}</p>
<a href="{{ url_for('post', blog_id=blog_post['id']) }}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ post['title'] }}</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{ post['title'] }}</h2>
<p>{{ post['body'] }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
I did not use the post.py file, I took a simpler route for me:
main.py
import requests
app = Flask(__name__)
blog_posts = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()
@app.route('/')
def home():
return render_template("index.html", blog=blog_posts)
@app.route('/post/<id>')
def get_post(id):
adjusted_id = int(id) -1
post = blog_posts[adjusted_id]
return render_template("post.html", post=post)
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in blog: %}
<div class="content">
<div class="card">
<h2>{{post["title"]}}t</h2>
<p class="text">{{post["subtitle"]}} </p>
<a href="{{ url_for('get_post', id=post['id'])}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
post.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{post["title"]}}</h2>
<p>{{post["body"]}}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
main.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
posts = requests.get("http://api.npoint.io/c790b4d5cab58020d391").json()
@app.route('/')
def home():
return render_template("index.html", posts=posts)
@app.route('/post/<int:post_id>')
def get_posts(post_id):
return render_template("post.html", posts=posts, id=post_id)
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in posts %}
<div class="content">
<div class="card">
<h2>{{ post["title"] }}</h2>
<p class="text">{{ post["subtitle"] }}</p>
<a href="post/{{post['id']}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
{% for post in posts %}
{% if post["id"] == id %}
<div class="card">
<h1>{{ post["title"] }}</h1>
<h2>{{ post["subtitle"] }}</h2>
<p>{{ post["body"] }}</p>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
couldnt really figure out how to integrate the class into my code but what ive done stil works
from flask import Flask, render_template
import requests
app = Flask(name)
@app.route('/')
def home():
blogs_endpoint = "https://api.npoint.io/c790b4d5cab58020d391"
all_posts = requests.get(blogs_endpoint).json()
return render_template("index.html" , posts=all_posts)
@app.route("/post/<blog_id>")
def get_post(blog_id):
blogs_endpoint = "https://api.npoint.io/c790b4d5cab58020d391"
all_posts = requests.get(blogs_endpoint).json()
return render_template("post.html", post=all_posts[int(blog_id) - 1])
if name == "main":
app.run(debug=True)
My Blog
Made with
My Blog
{{post["title"]}}
{{ post["subtitle"] }}
{{post["body"]}}
</div>
Made with
I don't know what is the use of post.py file in this project? If we can do this without that file as I did. Below is the complete project code
main.py
from flask import Flask, render_template import requests app = Flask(__name__) url = 'https://api.npoint.io/c790b4d5cab58020d391' response = requests.get(url) all_posts = response.json() @app.route('/') def home(): return render_template("index.html", posts=all_posts) @app.route('/post/<int:post_id>') def blog(post_id): return render_template("post.html", post_id=post_id, posts=all_posts) if __name__ == "__main__": app.run(debug=True)
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet"> <link rel="stylesheet" href="../static/css/styles.css"> </head> <body> <div class="wrapper"> <div class="top"> <div class="title"><h1>My Blog</h1></div> </div> {% for post in posts: %} <div class="content"> <div class="card"> <h2>{{ post['title'] }}</h2> <p class="text"> {{ post['subtitle'] }} </p> <a href=" {{ url_for('blog', post_id=post['id']) }}">Read</a> </div> </div> {% endfor %} <!-- <div class="content">--> <!-- <div class="card">--> <!-- <h2>Another blog post</h2>--> <!-- <p class="text">Lorem ipsum dolor sit </p>--> <!-- <a href="#">Read</a>--> <!-- </div>--> <!-- </div>--> </div> </body> <footer> <p>Made with ♥️ in London.</p> </footer> </html>
post.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet"> <link rel="stylesheet" href="../static/css/styles.css"> </head> <body> <div class="wrapper"> <div class="top"> <div class="title"><h1>My Blog</h1></div> </div> {% for post in posts: %} {% if post['id'] == post_id: %} <div class="content"> <div class="card"> <h1> {{ post['title'] }}</h1> <h2> {{ post['subtitle'] }}</h2> <p>{{ post['body'] }}</p> </div> </div> {% endif %} {% endfor %} </div> </body> <footer> <p>Made with ♥️ in London.</p> </footer> </html>
I loved your approach
thanks for sharing it
anonberry, I also did it without the Post class. It looks like a good practice, but complicates the implementation in my eyes. I did it this way (with help of chatGPT, as always :D ).
I especially liked learning about the next() function thanks to chatGPT solution. Looks useful when searching for a single match as it saves memory and handles errors out of the box, thanks to its second parameter, when no match is found (None).