Configurando um Servidor Local para Desenvolvimento Web

Painel de Controle do XAMPP

Após a instalação, podemos usar o Painel de controle do XAMPP para realizar algumas ações como iniciar ou parar os servidores e até mesmo modificar as configurações.

Iniciando e parando os servidores

Para iniciar um servidor em específico, clique no botão Start próximo a ele. Para parar um servidor rodando, podemos usar o botão Stop. Vamos iniciar o Apache clicando em seu botão Start.


Dependendo das configurações de seu sistema, a inicialização do Apache pode falhar. Neste caso, verifique se não há outro software escutando as portas 80 e 443. Outros web servers, como o IIS podem estar usando estas portas, assim como o Skype ou outro serviço de rede. Feche ou altere a configuração desses programas e tente novamente. Caso o problema persista procure alterar as configurações do Apache no XAMPP para que ele escute portas diferentes e lembre-se de considerar essa mudança para o restante do tutorial.

Iniciando um servidor como um Serviço do Windows

Por padrão nenhum dos servidores no XAMPP são instalados como Serviços do Windows. Isso significa que a única maneira de usarmos estes servidores é iniciando-os manualmente pelo Painel de Controle do XAMPP.

Se quisermos rodar estes servidores como Serviços do Windows sempre que sistema for iniciado, devemos abrir o Painel de Controle do XAMPP como administrador e parar o servidor clicando em Stop.

Uma vez parado, podemos clicar no X vermelho próximo ao servidor que queremos instalar como Serviço do Windows. Por exemplo, para que instalemos o Apache como Serviço do Windows, clicamos no X correspondente, na coluna Service, e confirmamos clicano em Yes no próximo diálogo.

Se a instalação ocorrer com êxito, o servidor agora exibirá um “check” verde, indicando que agora ele está rodando como Serviço do Windows.

Note que ainda podemos parar e iniciar os servidores usando os botões no Painel de Controle do XAMPP, mas agora como Serviços.

Integrando o XAMPP com o PhpStorm

Agora que instalamos o XAMPP e executamos seus componentes, precisamos informar ao nosso IDE onde estes componentes estão armazenados e como eles estão configurados.

Integrando o executável do PHP

Vamos começar registrando o executável PHP do XAMPP no PhpStorm. Em um projeto PHP podemos fazê-lo através das configurações em File → Settings (Shift + Cmd/Ctrl + S) e acessando Project Settings → PHP lá.

Com o IntelliJ IDEA e o PhpStorm podemos registrar vários interpretadores PHP diferentes, de acordo com a necessidade de seu projeto. Todos os interpretadores PHP registrados são mostrados no campo Interpreter:

Podemos adicionar o interpretador instalado com o XAMPP clicando no botão de navegar (), que nos leva à janela de interpretadores (Interpreters).

  1. No painel da esquerda clique em Adicionar (“+” verde).
  2. No campo Name, insira um nome para identificar esta instalação, por exemplo: PHP no XAMPP.
  3. No campo PHP Home, especifique o diretório onde o executável PHP está. Como instalamos o XAMPP em c:\xamppo diretório home para o PHP deve ser C:\xampp\php. Podemos inserir manualmente esse caminho no campo ou usar o botão de navegar para encontrar esse caminho na árvore de diretórios de seu sistema.
  4. O IDE verifica se o diretório especificado contém um executável PHP, detecta sua versão e o exibe neste painel.

Agora podemos gravar esta configuração clicando em OK e selecionar este o interpretador que acabamos de criar para nosso projeto:


Nosso IntelliJ IDEA ou PhpStorm agora pode usar a instalação feita pelo XAMPP.

Integrando o depurador

O PhpStorm oferece um podereso depurador no qual podemos configurar breakpoints e variáveis podem ser inspecionadas em tempo de execução. Para mais informações sobre depuração leia os seguintes artigos (em inglês):

Integrando o servidor Apache

A interação entre o IntelliJ IDEA ou o PhpStorm com servidores Web, FTP e outros é suportada através do plugin embutido Remote Hosts Access, que é habilitado por padrão no IntelliJ IDEA e no PhpStorm. O IDE acessa os servidores usando os parâmetros das configurações de acesso a servidores registrados. Essas configurações são criadas e gerenciadas na página Project Settings → Deployment no painel de configurações.

Acesse File → Settings no menu principal para abrir as configurações e selecione Deployment.


Neste painel, clique em Adicionar (Add, o “+” verde) para adicionar um novo servidor. No diálogo Add Server podemos especificar um nome para nosso servidor XAMPP e selecionar o tipo de deployment. Para o servidor Apache do XAMPP, selecione o tipo Local or mounted folder.

Após clicar em OK, devemos especificar o diretório raiz para web do Apache (C:\xampp\htdocs) e a URL do servidor web, http://localhost. Veja que estas configurações podem ser diferentes dependendo de como você configurou o servidor Apache do XAMPP no arquivo de configurações C:\xampp\apache\conf\httpd.conf.

Usando o botão Open podemos verificar se as configurações de URL estão corretas. Uma vez feito, podemos visualizar a homepage do XAMPP.

Integrando o servidor MySQL

O IntelliJ IDEA e o PhpStorm proveem a possibilidade de conectar ao servidor MySQL do XAMPP usando a ferramenta de banco de dados embutida. Antes de mais nada, certifique-se que o servidor MySQL esteja rodando a partir do Painel de Controle do XAMPP:

Em seguida, a partir do menu principal acesse View → Tool Windows → Database para exibir o painel de Banco de Dados (Database). Você também pode sempre acessá-lo pela margem direita do IDE.

Abrindo o painel de bancos de dados, podemos criar uma nova conexão ou fonte de dados (Data Source) usando o menu de contexto. O IDE usa drivers JDBC para se conectar aos bancos de dados. Para MySQL podemos usar o driver MySQL Connector, que não é instalado jundo com o PhpStorm mas com um clique (em Download MySQL driver files na parte de baixo da janela de configuração) o IDE faz o download automaticamente do driver correto da internet.

Agora devemos configurar nossa conexão. Mantenha os campos Host com localhost e Port com 3306. A URL de banco de dados, necessária para o driver,  é preenchida automaticamente. Se desejar futuramente, você pode já declarar um schema (database) para que o PhpStorm conecte-se diretamente a ele. Devemos também especificar o usuário e senha para o MySQL. Na instalação padrão do XAMPP são configurados como root (usuário) e senha em branco; preencha os campos User e Password com esses dados. Lembre-se que é recomendado alterar usuário e senha após a instalação do XAMPP. Isso pode ser feito através de http://localhost/security/xamppsecurity.php.

Usando o botão Test Connection, podemos verificar se as configurações estão corretas e ter certeza que o PhpStorm, ou IntelliJ IDEA, podem se conectar ao MySQL.

Agora podemos criar tabelas, executar consultas SQL, atualizar dados e muito mais. Veja este post de blog (em inglês) para mais informação.

Observação

Se for a primeira vez que estiver utilizando uma senha no PhpStorm ou IntelliJ IDEA, o IDE lhe dará a opção de guardar todas as senhas com uma “senha mestra”. Basta seguir os diálogos e configurar uma senha única para acessar qualquer serviço protegido que configure de agora em diante.