Instalación de CodeIgniter 4

Para instalar un nuevo proyecto de CodeIgniter 4 y configurar un panel de control gratuito para administrar tu tabla posts con CRUD, sigue estos pasos:

Para instalar un nuevo proyecto de CodeIgniter 4 y configurar un panel de control gratuito para administrar tu tabla posts con CRUD, sigue estos pasos:

1. Instalación de CodeIgniter 4

Requisitos previos

  • PHP 7.4 o superior
  • Composer

Instalación

  1. Abre una terminal y navega al directorio donde deseas instalar el nuevo proyecto.
  2. Ejecuta el siguiente comando para instalar CodeIgniter 4 usando Composer:
composer create-project codeigniter4/appstarter codeigniter-4
  1. Navega al directorio del proyecto recién creado:
cd codeigniter-4

2. Configuración del entorno

  1. Copia el archivo .env de ejemplo:
cp env .env
  1. Abre el archivo .env y ajusta las configuraciones necesarias, como la conexión a la base de datos:
database.default.hostname = localhost
database.default.database = postslar11
database.default.username = root
database.default.password = ""
database.default.DBDriver = MySQLi

3. Instalar un Panel de Control Gratuito

Un panel de control gratuito y popular para CodeIgniter es AdminLTE. Puedes integrarlo fácilmente en tu proyecto.

Descargar AdminLTE

  1. Descarga AdminLTE desde AdminLTE GitHub.
  2. Extrae los archivos descargados en la carpeta public/adminlte de tu proyecto.

4. Configurar el Panel de Control

Crear un layout base

  1. Crea un nuevo archivo en app/Views/layouts/admin.php con el contenido de AdminLTE:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Admin Panel</title>
    <link rel="stylesheet" href="<?= base_url('adminlte/plugins/fontawesome-free/css/all.min.css') ?>">
    <link rel="stylesheet" href="<?= base_url('adminlte/dist/css/adminlte.min.css') ?>">
    <script src="<?= base_url('adminlte/plugins/jquery/jquery.min.js') ?>"></script>
    <script src="<?= base_url('adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
    <script src="<?= base_url('adminlte/dist/js/adminlte.min.js') ?>"></script>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="<?= base_url('/') ?>" class="brand-link">
            <span class="brand-text font-weight-light">Admin Panel</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <li class="nav-item">
                        <a href="<?= base_url('posts') ?>" class="nav-link">
                            <i class="nav-icon fas fa-th"></i>
                            <p>Posts</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <?= $this->renderSection('content') ?>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <strong>Footer</strong>
    </footer>
</div>
</body>
</html>

Crear un controlador y vistas para posts

  1. Crea un controlador en app/Controllers/Posts.php:
<?php

namespace App\Controllers;

use App\Models\PostModel;
use CodeIgniter\Controller;

class Posts extends Controller
{
    public function index()
    {
        $model = new PostModel();
        $data['posts'] = $model->findAll();

        echo view('layouts/admin', [
            'content' => view('posts/index', $data)
        ]);
    }

    public function create()
    {
        echo view('layouts/admin', [
            'content' => view('posts/create')
        ]);
    }

    public function store()
    {
        $model = new PostModel();
        $data = [
            'title' => $this->request->getPost('title'),
            'category_id' => $this->request->getPost('category_id'),
            'excerpt' => $this->request->getPost('excerpt'),
            'content' => $this->request->getPost('content'),
            'img' => $this->request->getPost('img'),
            'url' => $this->request->getPost('url')
        ];
        $model->save($data);
        return redirect()->to('/posts');
    }

    public function edit($id)
    {
        $model = new PostModel();
        $data['post'] = $model->find($id);

        echo view('layouts/admin', [
            'content' => view('posts/edit', $data)
        ]);
    }

    public function update($id)
    {
        $model = new PostModel();
        $data = [
            'title' => $this->request->getPost('title'),
            'category_id' => $this->request->getPost('category_id'),
            'excerpt' => $this->request->getPost('excerpt'),
            'content' => $this->request->getPost('content'),
            'img' => $this->request->getPost('img'),
            'url' => $this->request->getPost('url')
        ];
        $model->update($id, $data);
        return redirect()->to('/posts');
    }

    public function delete($id)
    {
        $model = new PostModel();
        $model->delete($id);
        return redirect()->to('/posts');
    }
}
  1. Crea un modelo en app/Models/PostModel.php:
<?php

namespace App\Models;

use CodeIgniter\Model;

class PostModel extends Model
{
    protected $table = 'posts';
    protected $primaryKey = 'id';
    protected $allowedFields = ['title', 'category_id', 'excerpt', 'content', 'img', 'url'];
}
  1. Crea las vistas en app/Views/posts/:

index.php

<?= $this->extend('layouts/admin') ?>

<?= $this->section('content') ?>
<div class="container">
    <h1>Posts</h1>
    <a href="<?= base_url('posts/create') ?>" class="btn btn-primary">Add Post</a>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Title</th>
                <th>Category ID</th>
                <th>Excerpt</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($posts as $post): ?>
                <tr>
                    <td><?= esc($post['title']) ?></td>
                    <td><?= esc($post['category_id']) ?></td>
                    <td><?= esc($post['excerpt']) ?></td>
                    <td>
                        <a href="<?= base_url('posts/edit/'.$post['id']) ?>" class="btn btn-warning">Edit</a>
                        <a href="<?= base_url('posts/delete/'.$post['id']) ?>" class="btn btn-danger">Delete</a>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<?= $this->endSection() ?>

create.php

<?= $this->extend('layouts/admin') ?>

<?= $this->section('content') ?>
<div class="container">
    <h1>Add Post</h1>
    <form action="<?= base_url('posts/store') ?>" method="post">
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" class="form-control" id="title" name="title">
        </div>
        <div class="form-group">
            <label for="category_id">Category ID</label>
            <input type="text" class="form-control" id="category_id" name="category_id">
        </div>
        <div class="form-group">
            <label for="excerpt">Excerpt</label>
            <input type="text" class="form-control" id="excerpt" name="excerpt">
        </div>
        <div class="form-group">
            <label for="content">Content</label>
            <textarea class="form-control" id="content" name="content"></textarea>
        </div>
        <div class="form-group">
            <label for="img">Image</label>
            <input type="text" class="form-control" id="img" name="img">
        </div>
        <div class="form-group">
            <label for="url">URL</label>
            <input type="text" class="form-control" id="url" name="url">
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>
<?= $this->endSection() ?>

edit.php

<?= $this->extend('layouts/admin') ?>

<?= $this->section('content') ?>
<div class="container">
    <h1>Edit Post</h1>
    <form action="<?= base_url('posts/update/'.$post['id']) ?>" method="post">
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" class="form-control" id="title" name="title" value="<?= esc($post['title']) ?>">
        </div>
        <div class="form-group">
            <label for="category_id">Category ID</label>
            <input type="text" class="form-control" id="category_id" name="category_id" value="<?= esc($post['category_id']) ?>">
        </div>
        <div class="form-group">
            <label for="excerpt">Excerpt</label>
            <input type="text" class="form-control" id="excerpt" name="excerpt" value="<?= esc($post['excerpt']) ?>">
        </div>
        <div class="form-group">
            <label for="content">Content</label>
            <textarea class="form-control" id="content" name="content"><?= esc($post['content']) ?></textarea>
        </div>
        <div class="form-group">
            <label for="img">Image</label>
            <input type="text" class="form-control" id="img" name="img" value="<?= esc($post['img']) ?>">
        </div>
        <div class="form-group">
            <label for="url">URL</label>
            <input type="text" class="form-control" id="url" name="url" value="<?= esc($post['url']) ?>">
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>
<?= $this->endSection() ?>

5. Configurar las Rutas

Asegúrate de que tienes las rutas configuradas en app/Config/Routes.php:

$routes->get('/posts', 'Posts::index');
$routes->get('/posts/create', 'Posts::create');
$routes->post('/posts/store', 'Posts::store');
$routes->get('/posts/edit/(:segment)', 'Posts::edit/$1');
$routes->post('/posts/update/(:segment)', 'Posts::update/$1');
$routes->get('/posts/delete/(:segment)', 'Posts::delete/$1');

Resumen

  1. Instala CodeIgniter 4 y configúralo.
  2. Integra AdminLTE como el panel de control.
  3. Crea el controlador, modelo y vistas para manejar el CRUD de posts.
  4. Configura las rutas necesarias.

Con estos pasos, tendrás un nuevo proyecto de CodeIgniter 4 con un panel de control basado en AdminLTE y funcionalidades CRUD para tu tabla posts.

Anterior laravel blog Tots els posts Següent php alternatives