get blog on index page from API

This commit is contained in:
Jonas Leder 2021-04-12 19:45:30 +02:00
parent 4bd5f00820
commit 57798af4a2
3 changed files with 29 additions and 28 deletions

View file

@ -0,0 +1,26 @@
class BlogIndex extends HTMLElement {
constructor() {
super();
let xhr = new XMLHttpRequest();
let ul = document.createElement("ul");
xhr.onreadystatechange = () => {
if(xhr.readyState === 4 && xhr.status === 200){
let blog = JSON.parse(xhr.responseText);
blog.forEach((element) => {
this.innerHTML += `
<article class="breakWord">
<h2>${element["title"]}</h2>
<p breakWord>${element["content"]}</p>
<p class="center"><a href="/post.php?id=${element["id"]}"><button>Mehr lesen</button></a></p>
</article>
`;
});
this.appendChild(ul);
}
}
xhr.open("GET", "/API/getBlogElements.php?position=index");
xhr.send();
}
}
customElements.define("jl-blog_index", BlogIndex);

View file

@ -8,3 +8,4 @@ require("./ntpMenu");
require("./customElements/cookie");
require("./customElements/svgLoader");
require("./customElements/blogFooter");
require("./customElements/blogIndex");

View file

@ -21,33 +21,7 @@ getHeader("Jonas Leder", "home");
<div class="spacer"></div>
<h2>Blog</h2>
<div id="blog">
<?php
$result = $conn->query("SELECT * FROM posts order by id desc limit $homeMaxPost");
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$title = $row["title"];
$id = $row["id"];
$content = explode(" ", $row["content"]);
$contentNew = "";
if(count($content) > 800){
$temp = str_split($content, 800);
$contentNew = $temp[0];
$contentNew = $content . explode(" ", $temp[1])[0] . " ...";
} else {
$contentNew = $row["content"];
}
echo(<<<EOF
<article class="breakWord">
<h2>$title</h2>
<p breakWord>$contentNew</p>
<p class="center"><a href="/post.php?id=$id"><button>Mehr lesen</button></a></p>
</article>
EOF);
}
}
?>
</div>
<jl-blog_index id="blog"></jl-blog_index>
<div id="banner">
<h2>Banner</h2>
<a target="_blank" href="https://ipv6.he.net"><img src="<?php echo($heIMG); ?>" data-noPreview="true"></a>