Instalación de CodeIgniter 4

Created at: 2024-07-26 13:42:12 | Updated at: 2024-07-26 13:42:12

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

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.

No valid image directory found or the category is not valid for the gallery.

Back to Posts
Instalación de CodeIgniter 4

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.