Melhorando o blog - colocando imagens destacadas - Saldaris Consultoria - Serviços de tecnologia e desenvolvimento de sistemas

Para tornar o blog mais visualmente atrativo, vamos implementar um sistema de upload de imagens no CodeIgniter 4. Isso permitirá que cada post tenha uma imagem destacada associada.

Atualizando a Tabela de Posts

Primeiro, precisamos adicionar um campo imagem à tabela posts. Para isso, criamos uma nova migration com o comando:

php spark migrate:create AddImagemToPosts

Isso criará um arquivo dentro do diretório app/Database/Migrations/. Edite o arquivo e adicione a nova coluna:

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class AddImagemToPosts extends Migration
{
    public function up()
    {
        $this->forge->addColumn('posts', [
            'imagem' => ['type' => 'VARCHAR', 'constraint' => 255, 'null' => true],
        ]);
    }

    public function down()
    {
        $this->forge->dropColumn('posts', 'imagem');
    }
}

Agora, execute a migração para aplicar a alteração no banco de dados:

php spark migrate

Atualizando o Model

Precisamos permitir que o campo imagem seja manipulado pelo Model. No arquivo app/Models/PostModel.php, adicione imagem à lista de allowedFields:

protected $allowedFields = ['titulo', 'conteudo', 'autor', 'imagem', 'created_at', 'updated_at'];

Modificando o Controller para Suportar Upload

No app/Controllers/AdminPostController.php, alteramos o método criar() para processar o upload da imagem:

public function criar()
{
    $model = new PostModel();
    $file = $this->request->getFile('imagem');

    if ($file && $file->isValid() && !$file->hasMoved()) {
        $novoNome = $file->getRandomName();
        $file->move('uploads/posts/', $novoNome);
    } else {
        $novoNome = null;
    }

    $model->insert([
        'titulo'   => $this->request->getPost('titulo'),
        'conteudo' => $this->request->getPost('conteudo'),
        'autor'    => session()->get('usuario_logado'),
        'imagem'   => $novoNome
    ]);

    return redirect()->to('/admin/posts')->with('sucesso', 'Post criado com sucesso!');
}

O mesmo ajuste deve ser feito no método atualizar() para permitir alterar a imagem:

public function atualizar($id)
{
    $model = new PostModel();
    $file = $this->request->getFile('imagem');
    $post = $model->find($id);

    if ($file && $file->isValid() && !$file->hasMoved()) {
        $novoNome = $file->getRandomName();
        $file->move('uploads/posts/', $novoNome);
    } else {
        $novoNome = $post['imagem'];
    }

    $model->update($id, [
        'titulo'   => $this->request->getPost('titulo'),
        'conteudo' => $this->request->getPost('conteudo'),
        'imagem'   => $novoNome
    ]);

    return redirect()->to('/admin/posts')->with('sucesso', 'Post atualizado com sucesso!');
}

Modificando os Formulários de Criação e Edição

No formulário de criação (app/Views/admin/posts/novo.php), adicione um campo para upload de imagens:

<h1>Novo Post</h1>
<form action="<?= site_url('admin/posts/criar') ?>" method="post" enctype="multipart/form-data">
    <label>Título:</label>
    <input type="text" name="titulo" required><br>
    <label>Conteúdo:</label>
    <textarea name="conteudo" required></textarea><br>
    <label>Imagem:</label>
    <input type="file" name="imagem"><br>
    <button type="submit">Salvar</button>
</form>

No formulário de edição (app/Views/admin/posts/editar.php), adicione a opção de trocar a imagem:

<h1>Editar Post</h1>
<form action="<?= site_url('admin/posts/atualizar/'.$post['id']) ?>" method="post" enctype="multipart/form-data">
    <label>Título:</label>
    <input type="text" name="titulo" value="<?= esc($post['titulo']) ?>" required><br>
    <label>Conteúdo:</label>
    <textarea name="conteudo" required><?= esc($post['conteudo']) ?></textarea><br>
    <label>Imagem:</label>
    <input type="file" name="imagem"><br>
    <?php if ($post['imagem']) : ?>
        <img src="<?= base_url('uploads/posts/'.$post['imagem']) ?>" width="150"><br>
    <?php endif; ?>
    <button type="submit">Atualizar</button>
</form>

Exibindo as Imagens nos Posts

No template do blog (app/Views/blog/lista.php), exibimos a imagem destacada se ela estiver definida:

<?php foreach ($posts as $post) : ?>
    <article>
        <?php if ($post['imagem']) : ?>
            <img src="<?= base_url('uploads/posts/'.$post['imagem']) ?>" width="200">
        <?php endif; ?>
        <h2><a href="<?= site_url('blog/post/' . $post['id']) ?>"><?= esc($post['titulo']) ?></a></h2>
        <p><?= esc(substr($post['conteudo'], 0, 150)) ?>...</p>
    </article>
<?php endforeach; ?>

Conclusão

Agora os posts podem ter imagens destacadas, tornando o blog mais dinâmico e atrativo. No próximo post, vamos melhorar a validação e o feedback do formulário de contato.

Se você ou sua empresa precisa de suporte para desenvolvimento com CodeIgniter 4, a Saldaris Consultoria pode ajudar. Entre em contato pelo formulário no final da página para saber mais sobre nossos serviços.