Como Criar um Blog no Laravel

O Laravel é um framework de aplicativos web em PHP com uma sintaxe expressiva e elegante. Possui uma vasta biblioteca de pacotes e gerencia grande parte do trabalho maçante na programação, permitindo que você se concentre na criatividade.

E um uso criativo para o Laravel é a construção de um blog pessoal. Este tutorial descreve como usar o Laravel para construir e publicar um blog na Kinsta.

Para uma visualização prévia do projeto, confira o código completo do projeto.

Pré-requisitos

Para seguir este tutorial, será necessário:

• Um servidor de internet. Este tutorial usa o XAMPP.
• Uma conta no GitHub, GitLab ou Bitbucket para publicar o código do seu aplicativo.
• O Laravel instalado.
• Uma conta MyKinsta ativa para hospedagem de aplicativos. Inscreva-se para uma avaliação gratuita, caso você ainda não tenha uma.

Certifique-se de que os serviços de módulo Apache e MySQL estejam em execução no Painel de Controle do XAMPP. Caso contrário, clique no botão Start de cada serviço na coluna Actions. Seu painel de controle XAMPP deve ser parecido com este:

Por padrão, MySQL/MariaDB é executado na porta 3306. Anote a porta caso você a altere.

Caso esteja utilizando um servidor web diferente do XAMPP, certifique-se de que está executando o Apache ou outro software de servidor e o servidor MariaDB está instalado em sua máquina local.

Início rápido com o phpMyAdmin

1. Com o MySQL e o Apache em execução, abra seu navegador.
2. Acesse o phpMyAdmin e cole http://localhost/phpmyadmin/. Ele deverá exibir o seguinte:

O phpMyAdmin é uma ferramenta de gerenciamento de banco de dados para MySQL e MariaDB.

Criando um novo projeto Laravel

Agora você pode começar a criar o blog usando o Laravel. Para este tutorial, usamos um computador com Windows.

1. Acesse o terminal ou a interface de linha de comando (CLI) da sua máquina.
2. Crie um projeto Laravel chamado blog usando o comando laravel new blog.
3. Abra o diretório blog do seu projeto com o comando cd blog.
4. Em seguida, abra o diretório em seu editor de código.
5. Para verificar se você criou o projeto com êxito, execute php artisan serve no terminal ou CMD.
6. Clique no endereço local exibido para servi-lo ao navegador. O navegador deve exibir a página padrão de boas-vindas do Laravel, conforme exibida abaixo:

Configure o banco de dados

Crie e configure o banco de dados retornando ao phpMyAdmin em seu navegador e criando um banco de dados chamado blog.

1. Para criar o banco de dados, acesse a aba Databases e digite “blog” no campo Create database.
2. Em seguida, clique em Create.

3. Em seguida, atualize a conexão do banco de dados no arquivo .env na raiz do projeto do blog. Altere DB_DATABASE e DB_PASSWORD para os valores que você criou.

Os detalhes da conexão devem ficar parecidos com estes:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=your-db-username
DB_PASSWORD=your-db-password

Os outros detalhes de conexão do banco de dados permanecem os mesmos do arquivo .env. Caso você altere qualquer valor de conexão, como, por exemplo, DB_PORT de 3306 para 3307 durante a configuração, certifique-se de atualizá-lo no arquivo .env.

Crie a tabela posts

Em seguida, crie um modelo do banco de dados e migre as alterações.

1. Em seu terminal, execute php artisan make:model Post -mc para criar um modelo chamado Post, uma tabela chamada posts, um arquivo de migração e um controlador.

2. Verifique o diretório database/migrations e abra o arquivo de migração que você acabou de criar. Ele tem o seguinte formato: YYYY_MM_DD_ID_create_posts_table.php.
3. No método up() do arquivo de migração, crie um schema com os atributos title, description e image.

public function up() {
  Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title')->nullable();
    $table->text('description')->nullable();
    $table->string('image')->nullable();
    $table->timestamps();
  });
}

4. Agora vá até o terminal e migre as alterações usando php artisan migrate, conforme mostrado abaixo:

5. Acesse o phpMyAdmin em seu navegador, onde você verá a tabela posts:

Como criar controladores

Adicionar visualizações e controladores implementa sua lógica de negócios no conjunto do banco de dados. As visualizações são as interfaces de usuário que exibem os objetos de dados do modelo. Os controladores gerenciam o fluxo de execução dos dados entre o modelo e as visualizações.

1. Antes de criar os arquivos Blade, execute npm install, seguido de npm run dev no seu terminal. O primeiro comando instala os pacotes npm necessários. O segundo inicia um servidor de desenvolvimento do Vite.
2. Vá até o diretório app/Http/Controllers, abra o arquivo PostController.php e crie um método controlador index. O método controlador renderiza um texto simples no navegador. Para fazer isso, adicione o seguinte código à classe PostController:

public function index() {
  $post = "Laravel Tutorial Series One!";
  return view('posts.index', ['post'=>$post]);
}

Esse método passa $post como uma variável de contexto para a seção views do template index do Blade. $post contém texto para ser exibido, que neste caso é “Laravel Tutorial Series One!”. Você substituirá isso com o loop das publicações mais tarde.

3. No diretório resources/views, crie dois novos diretórios: layouts e posts.
4. No diretório layouts, crie um arquivo app.blade.php. Outros arquivos Blade herdarão deste.
5. Copie este código em app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog</title>
  <!-- Styles →
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<!-- Navbar →
<header>
  <nav class="navbar bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="{{ route('posts.index') }}">Mini-Blog</a>
    </div>
  </nav>
</header>

<!-- Body -->
<body>
  @yield('content')
</body>

<!-- Footer -->
<footer class="footer mt-auto py-3 bg-dark">
  <div class="container d-lg-flex justify-content-between">
    <span class="text-light">Mini-Blog © 2023</span>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"  integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</html>

Ao empregar este código HTML, você está importando a versão 5.2.3 do Bootstrap e o Vite para agrupar os recursos de JavaScript e CSS. A página gerada tem um cabeçalho com uma barra de navegação e um rodapé com os scripts chamados embaixo. No corpo da página, o conteúdo dinâmico é renderizado a partir de outros arquivos Blade com o auxílio da diretiva @yield('content').

O diretório posts contém os arquivos do Blade para implementar operações de criação e leitura.

6. No diretório posts, crie um arquivo Blade chamado index.blade.php e adicione o seguinte código:

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <h1>Blog list</h1>
  </div>
  <hr>
  <p>The Blog 1 - {{ $post }}</p>
</div>
@endsection

Esse código se estende do arquivo app.blade.php na página de layouts. Quando é renderizado no navegador, ele exibe o conteúdo de cada publicação do blog, juntamente com a barra de navegação e o rodapé herdados do arquivo app.blade.php na pasta layouts. Entre as tags de seção, o conteúdo do controlador é passado para ser renderizado no navegador quando o aplicativo é executado.

7. Defina a rota no diretório routes. A definição da rota permite o carregamento automático pelo RouteServiceProvider no diretório App/Providers. O RouteServiceProvider é a classe responsável pelo carregamento dos arquivos de rota do aplicativo.
8. No arquivo routes/web.php, importe PostController usando use AppHttpControllersPostController.
9. Então defina a rota adicionando Route::resource('posts', PostController::class); ao arquivo routes/web.php.
10. Com o servidor de desenvolvimento do Vite ainda em execução, use php artisan serve para executar o aplicativo em seu terminal.
11. Com seu navegador, abra http://127.0.0.1:8000/posts para ver a nova lista de artigos do blog.

Essa página deve se parecer assim:

Na próxima seção, definiremos os métodos do controlador para exibir todas os artigos, criar uma publicação e armazenar uma publicação. Em seguida, vamos adicionar suas rotas e criar os arquivos Blade nas seções correspondentes.

Crie a página de artigos do blog

Crie artigos de blog inserindo um título, adicionando uma descrição e carregando uma imagem. Em seguida, exiba seus artigos em ordem sequencial.

1. No diretório app/Models, abra o arquivo Post.php.
2. Na classe Post abaixo do bloco de código use HasFactory;, adicione protected $fillable = ['title', 'description', 'image'];.

Esse código protege os atributos do seu modelo contra atribuições em massa.

3. No arquivo app/Http/Controllers/PostController.php, importe o modelo Post usando use AppModelsPost;.
4. Substitua os métodos de controle index e create criados anteriormente na classe PostController pelo código abaixo:

// Show all posts
public function index() {
  $posts = Post::orderBy('created_at', 'desc')->get();
  return view('posts.index', ['posts' => $posts]);
}
    
// Create post
public function create() {
  return view('posts.create');
}

No método index que você acabou de criar, o aplicativo PHP busca todos os artigos, coloca-as em ordem cronológica e as armazena na variável posts. Na visualização de retorno, os artigos passam para o arquivo index.blade.php como uma variável de contexto no diretório views/posts. O método create retorna um arquivo create.blade.php e o coloca no diretório views/posts se um usuário tentar fazer uma nova publicação.

5. Crie um método controlador store usando o código abaixo (para armazenar os artigos do blog no banco de dados). Adicione esse código à classe PostController abaixo dos métodos de controle index e create.

// Store post
public function store(Request $request) {
  // validations
  $request->validate([
    'title' => 'required',
    'description' => 'required',
    'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
  ]);

  $post = new Post;

  $file_name = time() . '.' . request()->image->getClientOriginalExtension();
  request()->image->move(public_path('images'), $file_name);

  $post->title = $request->title;
  $post->description = $request->description;
  $post->image = $file_name;

  $post->save();
  return redirect()->route('posts.index')->with('success', 'Post created successfully.');
}

O método store gerencia as solicitações do cliente relacionadas aos dados em seu corpo, de modo que ele recebe request como argumento. Em seguida, você valida os campos usados ao criar uma publicação e gera uma instância post a partir do modelo Post. Daí os dados de campo inseridos são atribuídos à instância criada e salvos. A página é redirecionada para a visualização index com um flash de texto que diz: “Post created successfully.” (“Publicação criada com sucesso.”).

Adicione rotas às suas publicações

Para registrar as rotas no arquivo web.php:

1. No diretório routes na raiz do seu projeto, abra o arquivo web.php.
2. Registre as rotas dos métodos do controlador substituindo o código existente por este:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;

Route::resource('/', PostController::class)->names([
  'index' => 'posts.index',
  'create' => 'posts.create',
  'store' => 'posts.store',
  'show' => 'posts.show',
]);

Esse controlador usa essas rotas para criar, armazenar e exibir seus objetos de dados.

Crie arquivos Blade

Para criar as visualizações, retorne à classe PostController:

1. No diretório resources/views/posts, crie um arquivo Blade chamado create.blade.php e adicione o código abaixo:

@extends('layouts.app')
@section('content')
<div class="container">
  <h1>Add Post</h1>
  <section class="mt-3">
    <form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
      @csrf
      <!-- Error message when data is not inputted -->
      @if ($errors->any())
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
      <div class="card p-3">
        <label for="floatingInput">Title</label>
        <input class="form-control" type="text" name="title">
        <label for="floatingTextArea">Description</label>
        <textarea class="form-control" name="description" id="floatingTextarea" cols="30" rows="10"></textarea>
        <label for="formFile" class="form-label">Add Image</label>
        <img src="" alt="" class="img-blog">
        <input class="form-control" type="file" name="image">
      </div>
      <button class="btn btn-secondary m-3">Save</button>
    </form>
  </section>
    
</div>
@endsection

Nesse código, o create.blade.php herda o conteúdo do app.blade.php no diretório layouts usando @extends('layouts.app'). Esse conteúdo inclui um cabeçalho, uma barra de navegação e um rodapé. Após adicionar o texto Add Post na tag h1, você criou um formulário com o método post que contém a ação {{route('posts.store')}}.

O código enctype="multipart/form-data" permite o upload de imagens, e o csrf protege o formulário de ataques cross-site. Em seguida, as mensagens de erro exibem entradas de campo inválidas e usam field attributes para criar etiquetas e entradas para o formulário.

2. Agora, substitua o código no arquivo index.blade.php pelo código abaixo para exibir todas as publicações do blog:

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="titlebar">
    <a class="btn btn-secondary float-end mt-3" href="{{ route('posts.create') }}" role="button">Add Post</a>
    <h1>Mini post list</h1>
  </div>
    
  <hr>
  <!-- Message if a post is posted successfully -->
  @if ($message = Session::get('success'))
  <div class="alert alert-success">
    <p>{{ $message }}</p>
  </div>
  @endif
         @if (count($posts) > 0)
    @foreach ($posts as $post)
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-2">
              <img class="img-fluid" style="max-width:50%;" src="{{ asset('images/'.$post->image)}}" alt="">
            </div>
            <div class="col-10">
              <h4>{{$post->title}}</h4>
            </div>
          </div>
          <p>{{$post->description}}</p>
          <hr>
        </div>
      </div>
    @endforeach
  @else
    <p>No Posts found</p>
  @endif
</div>
@endsection

Esse código cria um botão Add Post (Adicionar Publicação). Quando clicado, ele cria uma publicação e passa todos os dados para o corpo da página. A condição if verifica se existem dados no banco de dados. Caso existam dados, são passados. Caso contrário, ela exibe “No Posts found.” (“Nenhuma publicação encontrada.”).

Crie a estrutura das suas páginas

Agora você pode executar seu aplicativo usando php artisan serve para criar e exibir as publicações do blog. Abra <a href="http://127.0.0.1:8000">http://127.0.0.1:8000</a >, e a página deverá ficar parecida com esta:

Se você adicionar uma publicação, ela ficará assim:

Implantando seu blog Laravel na Kinsta

Para implementar e testar seu aplicativo Laravel usando o serviço de Hospedagem de Aplicativos da Kinsta:

1. Crie um arquivo .htaccess.
2. Envie o código para um repositório.
3. Crie um banco de dados.
4. Configure um projeto no MyKinsta.
5. Crie e implante seu blog.

Crie um arquivo .htaccess

Na pasta raiz do projeto, crie um arquivo chamado .htaccess e adicione o seguinte código:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>

Esse código redireciona as solicitações do aplicativo para public/index.php na implantação.

Envie seu código para um repositório

Crie um repositório para o seu projeto e publique o código. Você pode usar o GitHub, GitLab ou Bitbucket para hospedar seu código e implantá-lo no MyKinsta.

Configure o banco de dados em seu painel MyKinsta

Para criar um banco de dados no MyKinsta:

1. Clique no botão Adicionar serviço e selecione Banco de dados.
2. Insira os detalhes do seu banco de dados conforme mostrado abaixo. Observe que, para que sua implantação seja bem-sucedida, você deve deixar o Nome de usuário do banco de dados como valor padrão.

Os detalhes incluem Nome do banco de dados, Nome de exibição, Tipo do banco de dados, Versão, Nome de usuário do banco de dados, Local do centro de dados e Tamanho. Esta demonstração usa MariaDB para o banco de dados e o Tamanho é Db3 (1CPU / 4GB RAM / 10GB de espaço em disco, 65 USD/mês). Você pode escolher o tipo e o tamanho do banco de dados que atenda às suas necessidades específicas.

3. Clique em Continuar.
4. Confirme o custo mensal e o método de pagamento e, em seguida, clique em Criar banco de dados.

Configure o projeto no MyKinsta

Para implantar seu aplicativo no MyKinsta:

1. Clique no Painel de controle.
2. Clique em Adicionar serviço e selecione Aplicativo, conforme mostrado abaixo:

O MyKinsta redireciona você para a página Adicionar aplicativo.

1. Na seção Selecionar branch, selecione o repositório do GitHub e marque a opção Adicionar implantação no commit.
2. Em Detalhes básicos, insira o nome do aplicativo e selecione o local do centro de dados para o seu aplicativo.
3. Como o Laravel precisa de uma chave de aplicativo durante a implantação, no card Variáveis de ambiente, adicione uma APP_KEY como Chave 1. Você pode usar a APP_KEY definida em seu arquivo .env local ou usar um gerador on-line de chaves do Laravel para obter uma.
4. Clique em Continuar.
5. Selecione os recursos de build (CPU e RAM) para o seu aplicativo. Esta demonstração usa a máquina de build padrão (1CPU / 4 GB de RAM) – 0,02USD / minuto.
6. Deixe marcado o botão de seleção Configurar imagem do contêiner automaticamente.
7. Clique em Continuar.
8. Na página Configurar seus processos, você pode alterar o tamanho do pod e a instância do seu aplicativo selecionando as respectivas caixas. Esta demonstração usa os valores padrão.
9. Clique em Continuar.
10. Por fim, clique no botão Confirmar método de pagamento para iniciar a implantação do aplicativo. Ao clicar nesse botão, também, você será direcionado à página Detalhes da implantação para visualizar o andamento da implantação.

Execute o build e implante seu aplicativo

Com o banco de dados e o aplicativo hospedados, conecte o banco de dados ao seu aplicativo e execute o build para realizar a implantação.

Para conectar o banco de dados, use as conexões externas do seu banco de dados hospedado. Na aba Informações do seu banco de dados hospedado, você verá Conexões externas, conforme mostrado abaixo:

1. Na página Configurações do aplicativo implantado, acesse o card Variável de ambiente.
2. Clique em Adicionar variável de ambiente para adicionar as conexões externas do seu banco de dados hospedado com o valor correspondente. Use as mesmas variáveis que você tem em seu arquivo .env.

Esta captura de tela é útil se você considerar marcar as variáveis <code>env</code> que editou manualmente, para diferenciá-las das outras.

APP_URL é a URL do seu aplicativo hospedado, e DB_CONNECTION é mysql.

1. Vá para a página Configurações do seu aplicativo.
2. No card Buildpack, adicione PHP e Node.js como Buildpacks. Como este é um aplicativo PHP, você deve adicionar o Buildpack PHP por último.
3. Clique em Implantar agora para refazer a build do seu aplicativo.

Em seguida, adicione um processo que migrará o banco de dados.

1. Vá até a aba Processos na página do aplicativo hospedado.
2. Selecione Criar processo no card Processos de execução.
3. Insira Migração como o nome, Worker em segundo plano como o tipo, e php artisan migrate --force como um comando start. Você pode deixar o tamanho do pod e as instâncias com os valores padrão.
4. Selecione Continuar para criar o processo. Essa ação aciona um novo build e reimplanta o aplicativo.
5. Na aba Domínios do seu aplicativo, clique no link do aplicativo. Você pode ver que agora ele está instalado e em execução.
6. Observe que o aplicativo de blog implantado na MyKinsta não exibe nenhuma publicação. Crie uma nova publicação inserindo seu título, adicionando uma descrição e escolhendo uma imagem.

Resumo

O Laravel facilita o desenvolvimento rápido de um blog simples. Seu rápido carregamento de páginas, sólida arquitetura de controladores e segurança eficaz tornam o aprimoramento do desempenho de um aplicativo uma tarefa fácil. Enquanto isso, o MyKinsta permite que você lance e disponibilize seus aplicativos web de maneira ágil e eficiente. O modelo flexível de preços do MyKinsta é baseado no uso, eliminando custos ocultos.

Quando a Kinsta hospeda seu aplicativo Laravel, ele é executado na Google Cloud Platform no nível Premium, tornando-o o mais rápido possível. A Kinsta também inclui proteção e mitigação de DDoS de nível corporativo com o Cloudflare e firewalls avançados para manter os agentes mal-intencionados afastados, e muito mais.

Comece agora mesmo a avaliação gratuita da Hospedagem de Aplicativos para otimizar o desenvolvimento e a hospedagem dos seus aplicativos web!

Marcia Ramos Kinsta

Sou o líder da equipe editorial na Kinsta. Sou um entusiasta de código aberto e adoro programar. Com mais de 7 anos de experiência em redação e edição técnica para a indústria de tecnologia, adoro colaborar com pessoas para criar conteúdos claros e concisos e melhorar fluxos de trabalho.

• LinkedIn