Pesquisa de site

Como implantar um site HTML5 em um servidor LAMP no Ubuntu

Nos dois artigos anteriores desta série, explicamos como configurar o Netbeans em uma distribuição desktop Linux como um IDE para desenvolver aplicações web. Em seguida, adicionamos dois componentes principais, jQuery e Bootstrap, para tornar suas páginas compatíveis com dispositivos móveis e responsivas.

  • Como criar um projeto HTML5 básico no Ubuntu usando Netbeans – Parte 1
  • Como escrever um aplicativo compatível com dispositivos móveis usando JQuery e Bootstrap – Parte 2

Como você raramente lidará com conteúdo estático como desenvolvedor, agora adicionaremos funcionalidade dinâmica à página básica que configuramos na Parte 2. Para começar, vamos listar os pré-requisitos e abordá-los antes de prosseguir.

Pré-requisitos

Para testar uma aplicação dinâmica em nossa máquina de desenvolvimento antes de implantá-la em um servidor LAMP, precisaremos instalar alguns pacotes.

Como estamos usando um desktop Ubuntu para escrever esta série, presumimos que sua conta de usuário já foi adicionada ao arquivo sudoers e recebeu as permissões necessárias.

Instalando pacotes e configurando o acesso ao servidor de banco de dados

Observe que durante a instalação você pode ser solicitado a inserir uma senha para o usuário root do MySQL. Certifique-se de escolher uma senha forte e continue.

Ubuntu e derivados (também para outras distribuições baseadas em Debian):

sudo apt update && sudo apt install apache2 php php-common php-mysql mysql-server filezilla

Fedora/CentOS/RHEL e também para outras distribuições baseadas em RHEL):

sudo yum update && sudo yum install httpd php php-common php-mysql mysql-server filezilla

Quando a instalação for concluída, é altamente recomendável que você execute o comando mysql_secure_installation para proteger seu servidor de banco de dados.

sudo mysql_secure_installation

Você será solicitado a fornecer as seguintes informações:

  • Alterar a senha root? [S/n]. Se você já definiu uma senha para o usuário root do MySQL, você pode pular esta etapa.
  • Remover usuários anônimos? [S/n] s.
  • Proibir login root remotamente? [S/n] y (Como este é seu ambiente de desenvolvimento local, você não precisará se conectar remotamente ao seu servidor de banco de dados).
  • Remover banco de dados de teste e acesso a ele? [S/n] s
  • Recarregar tabelas de privilégios agora? [S/n] s.

Criando um banco de dados de amostra e carregando dados de teste

Para criar um banco de dados de amostra e carregar alguns dados de teste, faça logon no seu servidor de banco de dados:

sudo mysql -u root -p

Você será solicitado a inserir a senha do usuário root do MySQL.

No prompt do MySQL, digite

CREATE DATABASE tecmint_db;

e pressione Enter:

Agora vamos criar uma tabela:

USE tecmint_db;
CREATE TABLE articles_tbl(
   Id INT NOT NULL AUTO_INCREMENT,
   Title VARCHAR(100) NOT NULL,
   Author VARCHAR(40) NOT NULL,
   SubmissionDate TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY ( Id )
);

e preencha-o com dados de amostra:

INSERT INTO articles_tbl (Title, Author) VALUES ('Installing Filezilla in CentOS 7', 'Gabriel Canepa'), ('How to set up a LAMP server in Debian', 'Dave Null'), ('Enabling EPEL repository in CentOS 6', 'John Doe');

Adicionando links simbólicos no diretório do servidor Web

Como o Netbeans, por padrão, armazena projetos no diretório inicial do usuário atual, você precisará adicionar links simbólicos que apontem para esse local. Por exemplo,

sudo ln -s /home/ubuntu/NetBeansProjects/TecmintTest/public_html /var/www/html/TecmintTest

adicionará um link virtual chamado TecmintTest que aponta para /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Por esse motivo, ao apontar seu navegador para http://localhost/TecmintTest/, você realmente verá a aplicação que configuramos na Parte 2:

Configurando um FTP remoto e um servidor Web

Como você pode configurar facilmente um FTP e um servidor Web com as instruções fornecidas na Parte 9 – Instalar e configurar FTP seguro e servidor Web da série RHCSA no Tecmint, iremos não os repita aqui. Consulte esse guia antes de prosseguir.

Transformando nosso aplicativo em dinâmico

Você provavelmente pensará que não podemos fazer muito com os dados de amostra que adicionamos ao nosso banco de dados anteriormente, e você está certo, mas será o suficiente para aprender o básico sobre como incorporar o código PHP e os resultados das consultas a um banco de dados MySQL em suas páginas HTML5.

Primeiramente, precisaremos alterar a extensão do documento principal da nossa aplicação para .php em vez de html:

mv /var/www/html/TecmintTest/index.html /var/www/html/TecmintTest/index.php

Então vamos abrir o projeto no Netbeans e começar a fazer algumas modificações.

1. Adicione uma pasta ao projeto chamada includes onde armazenaremos aplicativos php backend.

2. Crie um arquivo chamado dbconnection.php dentro de includes e insira com o seguinte código:

<?php
    $host = "localhost";
    $username = "root";
    $password = "MyFancyP4ssw0rd";
    $database = "tecmint_db";

    //Establish a connection with MySQL server
    $mysqli = new mysqli($host, $username, $password,$database);

    /* Check connection status. Exit in case of errors. */
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    $mysqli -> query("SET character_set_results = 'utf8', character_set_client = 'utf8', character_set_connection = 'utf8', character_set_database = 'utf8', character_set_server = 'utf8'");

    $records = array();
    $query = "SELECT Title, Author, SubmissionDate FROM articles_tbl;";
    $result = $mysqli->query($query) or die($mysqli->error);
    $data = array();

    while ( $row = $result->fetch_assoc() ){
        $data[] = json_encode($row);
    }
    echo json_encode( $data );
?>

conforme indicado na imagem a seguir:

Este arquivo será usado para conectar-se ao servidor de banco de dados, consultá-lo e retornar os resultados dessa consulta em uma string semelhante a JSON para ser consumida pelo aplicativo frontend com uma ligeira modificação.

Observe que normalmente você usaria arquivos separados para executar cada uma dessas operações, mas optamos por incluir toda essa funcionalidade em um arquivo por questão de simplicidade.

3. Em index.php, adicione o seguinte trecho logo abaixo da tag de abertura body. Essa é a maneira jQuery de chamar um aplicativo PHP externo quando o documento da web está pronto, ou em outras palavras, cada vez que ele carrega:

<script>
    $(document).ready(function(){
        $.ajax({
            url: 'includes/dbconnection.php',
            datatype: 'json',
            type: 'POST',
            success: function(data){
                var output = $.parseJSON(data);
                for(var i =0;i < output.length;i++)
                {
                  var item = output[i];
                  $("#title").append("<br>"+item.Title);
                  $("#author").append("<br>"+item.Author);
                  $("#submissiondate").append("<br>"+item.SubmissionDate);
                }
            }}
        );
    });
</script>

4. Agora, adicione um ID exclusivo (o mesmo que dentro do loop for acima) a cada linha no div com uma classe row no parte inferior de index.php:

<div class="row">
    <div class="col-md-4" id="title" style="text-align: center"><strong>Titles</strong></div>
    <div class="col-md-4" id="author" style="text-align: center"><strong>Authors</strong></div>
    <div class="col-md-4" id="submissiondate" style="text-align: center"><strong>Published on:</strong></div>
</div>

Se você clicar agora em Executar Projeto, deverá ver isto:

Isso é essencialmente o mesmo que as informações retornadas quando executamos a consulta no prompt do cliente MySQL anteriormente.

Implantando em um servidor LAMP usando Filezilla

Inicie o Filezilla no menu Dash e insira o IP do servidor FTP remoto e suas credenciais. Em seguida, clique em Quickconnect para conectar-se ao servidor FTP:

Navegue até /home/gabriel/NetBeansProjects/TecmintTest/public_html/, selecione seu conteúdo, clique com o botão direito sobre ele e selecione Upload.

Isto, é claro, pressupõe que o usuário remoto indicado em Nome de usuário tenha permissões de gravação no diretório remoto. Quando o upload for concluído, aponte seu navegador para o local desejado e você deverá ver a mesma página de antes (observe que não configuramos o banco de dados MySQL local para o host remoto, mas você pode fazer isso facilmente seguindo as etapas de no início deste tutorial).

Resumo

Neste artigo, adicionamos funcionalidades dinâmicas à nossa aplicação web usando jQuery e um pouco de JavaScript. Você pode consultar a documentação oficial do jQuery para obter mais informações, o que será muito útil se você decidir escrever aplicativos mais complexos. Concluindo, também implantamos nosso aplicativo em um servidor LAMP remoto usando um cliente FTP.

Estamos entusiasmados em ouvir sua opinião sobre este artigo – sinta-se à vontade para entrar em contato conosco através do formulário abaixo.