Implement API consumption with pagination for posts

controllers/SiteController.php

@@ -33,4 +33,57 @@ public function actionIndex(){
 	public function actionTest1(){
 		return $this->render('test1');
 	}
+
+    /**
+     * Displays Test Posts Francisco Girona
+     * @return array $posts
+     */
+    public function actionPosts(){
+
+        $url = 'https://jsonplaceholder.typicode.com/posts';
+
+        $context = stream_context_create([
+            'http' => [
+                'method'  => 'GET',
+                'timeout' => 5,
+                'header'  => "Accept: application/json\r\n",
+            ],
+            'ssl' => [
+                'verify_peer'      => true,
+                'verify_peer_name' => true,
+            ],
+        ]);
+
+        $raw = @file_get_contents($url, false, $context);
+
+        if($raw === false){
+            return $this->render('posts', [
+                'data' =>  [], 'error' => 'Failed to fetch data from the API'
+            ]);
+        }
+
+        $posts = json_decode($raw, true);
+
+        if(!is_array($posts)){
+            return $this->render('posts', [
+                'data' =>  [], 'error' => 'Invalid data format'
+            ]);
+        }
+
+        // Pagination
+        $totalPosts = count($posts);
+        $postsPerPage = 10;
+        $totalPages = ceil($totalPosts / $postsPerPage);
+        $currentPage = isset($_GET['page']) ? (int) $_GET['page'] : 1;
+
+        // Control Get Parameters page is not valid
+        if($currentPage < 1 || $currentPage > $totalPages){
+            return $this->render('posts', ['data' => [], 'error' => 'Invalid page number', 'totalPages' => $totalPages, 'currentPage' => $currentPage]);
+        }
+
+        $offset = ($currentPage - 1) * $postsPerPage;
+        $posts = array_slice($posts, $offset, $postsPerPage);
+
+        return $this->render('posts', ['data' => $posts, 'error' => '', 'totalPages' => $totalPages, 'currentPage' => $currentPage]);
+    }
 }

views/site/index.php

@@ -16,6 +16,9 @@
 	            <ul>
 		            <li><a href="<?=Url::to(['site/test1'])?>">Test 1 — Consume API</a></li>
 	            </ul>
+                <ul>
+		            <li><a href="<?=Url::to(['site/posts'])?>">Resolución — Test 1 - Francisco Girona</a></li>
+	            </ul>
 
 	            <p>If you have any questions or issues, feel free to send an email with your queries to <a href="mailto:asunyer@ooptimo.com">asunyer@ooptimo.com</a>, and we will try to assist you as soon as possible.</p>
             </div>

views/site/posts.php

@@ -0,0 +1,39 @@
+<?php
+
+/** @var yii\web\View $this */
+
+/** @var array $data */
+/** @var string|null $error */
+use yii\helpers\Url;
+use yii\helpers\Html;
+
+$this->title = 'Posts — JSONPlaceholder';
+$this->params['breadcrumbs'][] = $this->title;
+?>
+
+<?php if($error): ?>
+    <div class="alert alert-danger">
+        <?= Html::encode($error) ?>
+    </div>
+<?php endif; ?>
+
+<?php if($data): ?>
+    <div class="posts">
+        <h1>Posts</h1>
+    </div>
+<?php endif; ?>
+
+<?php foreach($data as $post): ?>
+    <article class="post">
+        <h2 class="post-title"><?= Html::encode($post['title']) ?></h2>
+        <p class="post-body"><?= Html::encode($post['body']) ?></p>
+    </article>
+<?php endforeach; ?>
+
+<?php if($totalPages > 1): ?>
+    <div class="pagination">
+        <?php for($i = 1; $i <= $totalPages; $i++): ?>
+            <a href="<?= Url::to(['site/posts', 'page' => $i]) ?>" class="pagination-link <?= $currentPage == $i ? 'active' : '' ?>" aria-label="Page <?= $i ?>" title="Page <?= $i ?>"><?= $i ?></a>
+        <?php endfor; ?>
+    </div>
+<?php endif; ?>

web/css/site.css

@@ -28,3 +28,44 @@ main > .container {
     margin-top: 5px;
     color: #999;
 }
+
+.posts {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.post {
+    margin: 0 auto 20px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.post-title {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    gap: 10px;
+}
+
+.pagination-link {
+    padding: 10px 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-decoration: none;
+}
+.pagination-link:hover {
+    background-color: #007bff;
+    color: #fff;
+}
+
+.pagination-link.active {
+    background-color: #007bff;
+    color: #fff;
+}