-
-
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 |
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 blog_post in posts: %}
{% if id == blog_post["id"]: %}
<div class="content">
<div class="card">
<h2>{{ blog_post["title"] }}</h2>
<h1>{{ blog_post["subtitle"] }}</h1>
<p>{{ blog_post["body"] }}</p>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in Nigeria.</p>
</footer>
</html>
I completed the challenge without including the Post class instance </> ☝️
i am having an issue where when i click on "Read", it is going to the post/1 or post/2 page, which is formatted, but none of the content (title or body) is appearing, and am pulling my hair out. Can anybody see where my issues are?:
MAIN.PY:
from flask import Flask, render_template
import requests
app = Flask(__name__)
blog_posts = requests.get("https://api.npoint.io/4370451396b51eb95e0a").json()
@app.route('/')
def home():
return render_template("index.html", posts=blog_posts)
@app.route("/post/<int:num>")
def get_post(num):
return render_template("post.html", post=blog_posts, ID=num)
if __name__ == "__main__":
app.run()
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('get_post', num=post['id']) }}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
</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"] == ID %}
<div class="content">
<div class="card">
<h2>{{post["title"]}}</h2>
<p>{{post["body"]}}</p>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</body>
<footer>
</footer>
</html>
@Storka72
In your post route your have: return render_template("post.html", post=blog_posts, ID=num)
In your post.html you have: {% for post in posts %}
, but you are not passing a "posts" parameter to that page!
NEAT Code Without any Torchers and If statements and EASY to Understand
from flask import Flask, render_template
import requests
api_endpoint = "https://api.npoint.io/c790b4d5cab58020d391"
api = requests.get(api_endpoint)
api_json_data = api.json()
app = Flask(__name__)
@app.route("/")
def flask_1():
return render_template("index.html", json_data=api_json_data)
@app.route("/read/<num>")
def flask_2(num):
num = int(num) - 1
return render_template("post.html", json_data=api_json_data, id_num=num)
if __name__ == "__main__":
app.run(debug=True)
#Index.HTML code
<!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 x in json_data: %}
<div class="content">
<div class="card">
<h2> {{x["title"]}} </h2>
<h3> {{x["subtitle"] }}</h3>
<a href="{{url_for('flask_2', num=x['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>{{json_data[id_num]["title"]}}</h1>
<h2>{{json_data[id_num]["body"]}}</h2>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥ in London.</p>
</footer>
</html>
Using index to get the post item
I think its more accurrate
#main.py
class Post:
def init(self, id, title, subtitle, body):
self.id = id - 1
self.title = title
self.subtitle = subtitle
self.body = body
#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>The Fake Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{posts[num].title}}</h2>
<h3>{{posts[num].subtitle}}</h3>
<p>{{posts[num].body}}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Mexico.</p>
</footer>
</html>
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>
it is way easier without introducing the post.py Class.
from flask import Flask, render_template
import requests
response = requests.get("https://api.npoint.io/c790b4d5cab58020d391")
info = response.json()
all_blogs = []
for blog in info:
all_blogs.append(blog)
app = Flask(name)
@app.route('/')
def home():
return render_template("index.html", blogs=all_blogs)
@app.route('/post/int:index')
def the_blog(index):
requested_post = None
for blogs in all_blogs:
if blogs["id"] == index:
requested_post = blogs
print(requested_post)
return render_template("post.html", post=requested_post)
if name == "main":
app.run(debug=True)
I have completed this task without writing anything in post.py file.
Here are my files,
main.py
import requests
from flask import Flask, render_template
app = Flask(name)
@app.route('/blog')
def home():
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
r = requests.get(blog_url)
blogs = r.json()
return render_template("index.html", blogs=blogs)
@app.route("/post/int:id")
def blog_post(id):
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
r = requests.get(blog_url)
blog = r.json()
return render_template('post.html', id=id, blog=blog)
if name == "main":
app.run(debug=True)
index.html
<title>Title</title>My Blog
Made with
post.html
<title>Title</title>My Blog
{{ blog[id-1]["title"] }}
{{ blog[id-1]["body"] }}
</div>
Made with
I think for sake of this project making a class of Post was not necessary instead I used a python list and in html with jinja I was able to use it as python list
- post.py
import requests
from pprint import pprint
N_P0INT_API = "https://api.npoint.io/c790b4d5cab58020d391"
class Post:
def __init__(self):
response = requests.get(url=N_P0INT_API)
self.data = response.json()
def display(self):
"""Display data content"""
pprint(self.data)
def get_all(self):
"""Return all posts"""
return self.data
def get_by_id(self, post_id):
"""Return only one post by ID
post_id : the ID of the post tou fetch
"""
for post in self.data:
if int(post_id) == post['id']:
return post
- main.py
from flask import Flask, render_template
from post import Post
post = ""
app = Flask(__name__)
@app.route('/')
def blog_endpoint():
return render_template("index.html", all_posts=post.get_all())
@app.route('/post/<post_id>')
def post_endpoint(post_id):
return render_template("post.html", post=post.get_by_id(post_id=post_id))
if __name__ == "__main__":
post = Post()
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 all_posts %}
<div class="content">
<div class="card">
<h2>{{ post['title'] }}</h2>
<p class="text">{{ post['subtitle'] }}</p>
<a href="{{ url_for('post_endpoint', post_id=post['id'] )}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in Seoul.</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>{{ post['title'] }}</h1>
<h2>{{ post['subtitle'] }}</h2>
<p>{{ post['body'] }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Seoul.</p>
</footer>
</html>
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>Just a blog post</h2>
<p class="text">Lorem ipsum dolor sit </p>
<a href="/post/1">Read</a>
</div>
</div>
<div class="content">
<div class="card">
<h2>Another blog post</h2>
<p class="text">Lorem ipsum dolor sit </p>
<a href="/post/2">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>
<div class="content">
<div class="card">
<h2>{{dict[number-1]["title"]}}</h2>
<p>{{dict[number-1]["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__)
@app.route('/')
def home():
return render_template("index.html")
@app.route('/post/<int:number>')
def post(number):
response = requests.get("https://api.npoint.io/7bdc6259ad459120c0cb")
return render_template("post.html", number=number, dict=response.json())
if __name__ == "__main__":
app.run(debug=True)
post.py
class Post:
pass
main.py
from flask import Flask, render_template
import requests
requests=requests
blog_URL='https://api.npoint.io/c790b4d5cab58020d391'
app = Flask(name)
@app.route('/')
def home():
all_post=requests.get(url=blog_URL).json()
return render_template("index.html",posts=all_post)
@app.route('/post/int:id')
def get_post(id):
all_post = requests.get(url=blog_URL).json()
return render_template("post.html", posts=all_post,id=id)
if name == "main":
app.run(debug=True)
index.html
<title>Title</title>My Blog
Made with
post.html
<title>Title</title>My Blog
{{post["title"]}}
{{post["body"]}}
{% endif %} {% endfor %}</div>
Made with
main.py
from flask import Flask, render_template
from post import Post
app = Flask(__name__)
@app.route('/')
def home():
blogs = Post()
return render_template("index.html", posts=blogs.posts)
@app.route('/post/<int:id>')
def get_post(id):
blogs = Post()
post = blogs.get_post(id)
return render_template("post.html", title=post['title'], body=post['body'])
if __name__ == "__main__":
app.run(debug=True)
post.py
import requests
class Post:
def __init__(self):
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
req = requests.get(blog_url)
all_posts = req.json()
self.posts = all_posts
def get_post(self, id):
for post in self.posts:
if post['id'] == id:
return post
index.html
{% 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', id=post['id'])}}">Read</a>
</div>
</div>
{% endfor %}
post.html
<div class="content">
<div class="card">
<h2>{{ title }}</h2>
<p>{{ body }}</p>
</div>
</div>
main.py
from flask import Flask, render_template from post import Post app = Flask(__name__) @app.route('/') def home(): blogs = Post() return render_template("index.html", posts=blogs.posts) @app.route('/post/<int:id>') def get_post(id): blogs = Post() post = blogs.get_post(id) return render_template("post.html", title=post['title'], body=post['body']) if __name__ == "__main__": app.run(debug=True)post.py
import requests class Post: def __init__(self): blog_url = "https://api.npoint.io/c790b4d5cab58020d391" req = requests.get(blog_url) all_posts = req.json() self.posts = all_posts def get_post(self, id): for post in self.posts: if post['id'] == id: return postindex.html
{% 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', id=post['id'])}}">Read</a> </div> </div> {% endfor %}
post.html
<div class="content"> <div class="card"> <h2>{{ title }}</h2> <p>{{ body }}</p> </div> </div>
This is exactly what I was trying to do.
Thanks. Nice Algorithm
### main.py
from flask import Flask, render_template
from post import Post
app = Flask(name)
c_post = Post()
@app.route('/')
def home():
posts = c_post.all_blog_post()
return render_template("index.html", posts=posts)
@app.route('/post/int:blog_id')
def read_blog(blog_id):
blog_post = c_post.ind_post(blog_id)
return render_template("post.html", blog_post=blog_post)
if name == "main":
app.run(debug=True)
### post.py
import requests
class Post:
def init(self):
self.posts = []
def all_blog_post(self):
url = "https://api.npoint.io/c790b4d5cab58020d391"
self.posts = requests.get(url).json()
return self.posts
def ind_post(self, post_id):
all_post_details = self.all_blog_post()
post = []
for p in all_post_details:
if p["id"] == post_id:
post.append(p)
return post
index.html
<title>Title</title>My Blog
Made with
post.html
<title>Title</title>My Blog
{{ blog_post[0]['title'] }}
{{ blog_post[0]['subtitle'] }}
{{ blog_post[0]['body'] }}
</div>
Made with
In main.py use your own url, as the solution url is incorrect and will give error.
Thanks, the solution code didn't work at first and was giving an error but after prining the posts, print(posts), I realised it has a different data than in the tutorial, so I changed your solution's URL with my url and it worked.
I had this challenge to use as less code in html as possible. But now realised the purpose of this challenge was to practice jinja :D so I am going to write it again using more jinja and also I like the way she used her post.py so am going to do it that way.
main.py
from flask import Flask, render_template
from post import Post
post = Post()
blog_title = post.get_data("title")
blog_subtitle = post.get_data("subtitle")
blog_body = post.get_data("body")
blog_id = post.get_data("id")
blogs_qty = len(blog_id)
print(blogs_qty)
app = Flask(__name__)
@app.route('/')
def home():
return render_template("index.html", title=blog_title, subtitle=blog_subtitle, blogs=blogs_qty)
@app.route('/post/<num>')
def blog_post(num): # (num) is a string when it comes from url_for() of Jinja from index.html
number = int(num) - 1
return render_template("post.html", title=blog_title[number],
subtitle=blog_subtitle[number], body=blog_body[number],
id=blog_id[number])
if __name__ == "__main__":
app.run(debug=True)
post.py
import requests
class Post:
def __init__(self):
response = requests.get("https://api.npoint.io/ec033ad7c14afde7ce19")
response.raise_for_status()
self.data = response.json()
def get_data(self, enq):
data_enquiry = [post[enq] for post in self.data]
return data_enquiry
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 range(blogs) %}
<div class="content">
<div class="card">
<h2>{{ title[0 + post] }}</h2>
<p class="text">{{ subtitle[0 + post] }} </p>
<a href="{{ url_for('blog_post', num=1+post) }}">Read</a> <!-- num=1 is a string -->
</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>My Blog {{ id }}</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 {{ id }}</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{ title }}</h1>
<h2>{{ subtitle }}</h2>
<p> {{ body }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
I made it a bit different, is it ok?
main.py
from flask import Flask, render_template
from post import Post
app = Flask(__name__)
@app.route('/')
def home():
post = Post()
return render_template("index.html", Post=post)
@app.route('/post/<n>')
def blog(n):
post = Post()
return render_template('post.html', n=n, Post=post)
if __name__ == "__main__":
app.run(debug=True)
post.py
import requests
class Post:
def __init__(self, url='https://api.npoint.io/c790b4d5cab58020d391'):
self.url = url
response = requests.get(self.url)
self.data = response.json()
def title(self, id_):
id_ = int(id_)
for article in self.data:
if article['id'] == id_:
return article['title']
def subtitle(self, id_: int):
id_ = int(id_)
for article in self.data:
if article['id'] == id_:
return article['subtitle']
def body(self, id_: int):
id_ = int(id_)
for article in self.data:
if article['id'] == id_:
return article['body']
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PaninoBlog</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(id_=1) }}</h2>
<p class="text">{{ Post.subtitle(id_=1) }}</p>
<a href="http://127.0.0.1:5000/post/1">Read</a>
</div>
</div>
<div class="content">
<div class="card">
<h2>{{ Post.title(id_=2) }}</h2>
<p class="text">{{ Post.subtitle(id_=2) }}</p>
<a href="http://127.0.0.1:5000/post/2">Read</a>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Aosta.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PaninoBlog</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 style="font-weight:bold">{{ Post.title(id_=n) }}</h2>
<h3 style="font-weight:normal">{{ Post.subtitle(id_=n) }}</h3>
<p>{{ Post.body(id_=n) }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Aosta.</p>
</footer>
</html>
Here is my solution. This also handles the IndexOfRanged error if the blog_id is not found and helps prevent unnecessary API requests .
main.py
from flask import Flask, render_template
import requests
URL = "https://api.npoint.io/c790b4d5cab58020d391"
all_posts = []
def get_all_posts():
response = requests.get(URL)
response.raise_for_status()
data = response.json()
for post in data:
all_posts.append(post)
app = Flask(__name__)
@app.route('/')
def home():
if not all_posts:
get_all_posts()
return render_template("index.html", all_posts=all_posts)
@app.route('/post/<int:post_id>')
def get_post(post_id):
if not all_posts:
get_all_posts()
try:
post = [post for post in all_posts if post['id'] == post_id][0]
except IndexError:
post = []
print(f"Not found id: {post_id}")
pass
return render_template("post.html", post=post)
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 all_posts %}
<div class="content">
<div class="card">
<h2>{{ post.title }}</h2>
<p class="text">{{ post.subtitle }}</p>
<a href="{{ url_for('get_post', post_id=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">
<div class="card">
{% if post %}
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
{% else %}
<div>No data found.</div>
{% endif %}
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
This is my solution, I used only one HTML file to render all blogs or one blog details by using if condition in HTML file:
server.py
from flask import Flask, render_template, url_for
import requests
app = Flask(__name__)
url = "https://api.npoint.io/5956e24d0b30106f8263"
response = requests.get(url=url)
response.raise_for_status()
blogs = response.json()
@app.route("/")
def blog_page():
return render_template("blog.html", blogs=blogs)
@app.route("/blog/<int:blog_id>")
def show_blog(blog_id):
index = blog_id - 1
print(blog_id)
return render_template("blog.html", blog=blogs[index],
blog_id=blog_id)
if __name__ == "__main__":
app.run(debug=True)
blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blogs</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="header">
<h1>Blogs</h1>
</div>
<div class="container">
{% if blog_id %}
<div class="card">
<h2>{{blog["title"]}}</h2>
<h4>{{blog["subtitle"]}}</h4>
<p>{{blog["body"]}}</p>
</div>
{% else %}
{% for blog in blogs %}
<div class="card">
<h2>{{blog.title}}</h2>
<h4>{{blog.subtitle}}</h4>
<a href="{{ url_for('show_blog', blog_id=blog.id) }}">Read</a>
</div>
{% endfor %}
{% endif %}
</div>
</body>
</html>
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>
Here is my solution, i didn't used classes and i am little worried because of that
`from flask import Flask, render_template
import requests
app = Flask(name)
@app.route('/')
def home():
blog_url = "https://api.npoint.io/6969388fe85a7eb7b062"
posts = requests.get(blog_url).json()
return render_template("index.html", all_posts=posts)
@app.route('/post/int:index')
def post(index):
blog_url = "https://api.npoint.io/6969388fe85a7eb7b062"
posts = requests.get(blog_url).json()
return render_template("post.html", all_posts=posts, post_number=index)
if name == "main":
app.run(debug=True)
`
Hey Guys, here is my simple solution without a "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", all_posts=data)
@app.route('/post/<int:index>')
def show_post(index):
for posts in data:
if posts['id'] == index:
return render_template("post.html", post=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 all_posts: %}
<div class="content">
<div class="card">
<h2>{{post.title}}</h2>
<p class="text">{{post.subtitle}}</p>
<a href="{{url_for('show_post', index=post.id)}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ from Rubia.</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>{{post.title}}</h1>
<h2>{{post.subtitle}}</h2>
<p>{{post.body}}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ from Rubia.</p>
</footer>
</html>
main.py
from flask import Flask, render_template
from post import Post
import requests
app = Flask(__name__)
blog_response = requests.get('https://api.npoint.io/c790b4d5cab58020d391').json()
blog_data = []
for post in blog_response:
blog_post = Post(post['id'], post['body'], post['title'], post['subtitle'])
blog_data.append(blog_post)
@app.route('/')
def home():
return render_template('index.html', blog=blog_data)
@app.route('/blog/<int:num_id>')
def get_post(num_id):
return render_template('post.html', blog=blog_data, num=num_id)
if __name__ == '__main__':
app.run(debug=True)
post.py
class Post:
def __init__(self, post_id, body, title, subtitle):
self.id = post_id
self.body = body
self.title = title
self.subtitle = subtitle
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 blog: %}
<div class="content">
<div class="card">
<h2>{{ post.title }}</h2>
<p class="text">{{ post.subtitle }}</p>
<a href="{{ url_for('get_post', num_id=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><a href="{{ url_for('home') }}">My Blog</a></h1></div>
</div>
{% for post in blog: %}
{% if num==post.id: %}
<div class="content">
<div class="card">
<h1>{{ post.title }}</h1>
<h2>{{ post.subtitle }}</h2>
<p>{{ post.body }}</p>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.py
class Post:
def init(self, post_id, title, subtitle, body):
self.post_id = post_id
self.title = title
self.subtitle = subtitle
self.body = body
main.py
from flask import Flask, render_template
from post import Post
import requests
Get blog data from API and create Post objects
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
response = requests.get(blog_url)
all_blogs = response.json()
all_blogs_posts = []
for data in all_blogs:
posts = Post(
post_id=data['id'],
title=data['title'],
subtitle=data['subtitle'],
body=data['body']
)
all_blogs_posts.append(posts)
Create Flask app and routes
app = Flask(name)
@app.route('/')
def home():
return render_template("index.html", all_blogs=all_blogs_posts)
@app.route('/post/int:index')
def post(index):
return render_template("post.html", index=index, all_blogs=all_blogs_posts)
if name == "main":
app.run(debug=True)
index.html
<title>Title</title>My Blog
Made with
post.html
<title>Title</title>My Blog
{{ blog['title'] }}
{{ blog['subtitle'] }}
{{ blog['body'] }}
{% endif %} {% endfor %}Made with
I've done it with out classes as well :)
MAIN.PY
from flask import Flask, render_template
import requests as rq
app = Flask(name)
@app.route('/')
def home():
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
response = rq.get(blog_url)
all_posts = response.json()
return render_template("index.html", posts=all_posts)
@app.route('/post/')
def get_post(id):
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
response = rq.get(blog_url)
all_posts = response.json()
return render_template("post.html",posts = all_posts, id=int(id))
if name == "main":
app.run(debug=True)
INDEX.HTML
3 Blogs with no relation at all
{{ blog_posts["title"] }}
{{ blog_posts["subtitle"] }}
{% endif %} {% endfor %} Read{{ blog_posts["title"] }}
{{ blog_posts["subtitle"] }}
{% endif %} {% endfor %} Read{{ blog_posts["title"] }}
{{ blog_posts["subtitle"] }}
{% endif %} {% endfor %} ReadMade with
POST.HTML
<title>Blogs</title>3 Blogs with no relation at all
{{ blog_posts["title"] }}
{{ blog_posts["body"] }}
{% endif %} {% endfor %} Go back</div>
Made with
MAIN.PY
`from flask import Flask, render_template
import requests
app = Flask(name)
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
response = requests.get(blog_url)
all_posts = response.json()
@app.route('/')
def home():
return render_template("index.html", posts=all_posts)
@app.route('/post/int:post_id')
def post(post_id):
print(type(post_id))
return render_template("post.html", posts=all_posts, post_id=post_id)
if name == "main":
app.run(debug=True)
`
INDEX.HTML
`
My Blog
<div class="card">
<h2>{{ blog_post.title }}</h2>
<p class="text"> {{ blog_post.subtitle }} </p>
<a href="{{ url_for('post', post_id=blog_post.id) }}">Read</a>
</div>
{% endfor %}
</div>
<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>
Made with
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 blog_post in posts %}
{% if blog_post.id == post_id %}
<div class="content">
<div class="card">
<h1>{{ blog_post.title }}</h1>
<h2>{{ blog_post.subtitle }}</h2>
<p>{{ blog_post.body }}</p>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
The only issue with Angela's solution I would have is if you had a site that had thousands or more blogs, that's a lot of objects to hold in memory in a variable.
index.html