Tornar al Blog

Instalación de CodeIgniter 4

codes

26 Jul, 2024

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:

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:

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.

Autor
Admin

Editor del blog

Articles Relacionats

DeepSeek - L'Assistent Intel·ligent que T'Ajuda en Tot!
DeepSeek - L'Assistent Intel·ligent que T'Ajuda en Tot!

🤖 Què és DeepSeek? Sóc un assistent d'IA avançat i completament GRATUÏT, creat per Deep Seek companyia. Estic aquí per ser el teu company intel·ligent en qualsevol repte!

gthub copilot
gthub copilot

És un assistent de programació basat en IA creat per GitHub i OpenAI. Funciona dins editors com Visual Studio Code, JetBrains, Neovim i Visual Studio.

Creació d'una aplicació Laravel 12
Creació d'una aplicació Laravel 12

nstal·lant PHP i l'instal·lador Laravel Abans de crear la vostra primera aplicació Laravel, assegureu-vos que la vostra màquina local tingui PHP , Composer i l'instal·lador Laravel instal·lats. A més, hauríeu d'instal·lar Node i NPM o Bun perquè pugueu compilar els actius d'interfície de la vostra aplicació.

sql expert
sql expert

ChatGPT SQL Expert és una eina avançada per optimitzar bases de dades, escriure consultes SQL eficients i resoldre problemes de rendiment. Ideal per a desenvolupadors, DBA i DevOps que busquen solucions ràpides i precises. 🚀

Preline UI - Biblioteca de components CSS de Tailwind
Preline UI - Biblioteca de components CSS de Tailwind

Preline UI - Biblioteca de components CSS de Tailwind Configureu ràpidament la biblioteca CSS de Preline UI Tailwind per al vostre projecte. Exploreu els components de Tailwind i els elements de la IU, com ara botons, quadrícules, taules i molt més.

GitHub Copilot
GitHub Copilot

GitHub Copilot és una eina d'assistència a la programació desenvolupada per GitHub i OpenAI. Utilitza intel·ligència artificial per ajudar els desenvolupadors a escriure codi de manera més eficient. Aquí tens una breu descripció de com funciona en els repositoris de GitHub: