Para poder trabalhar e rodar o projeto, você irá precisar do Git instalado em sua máquina, do XAMPP (pois o PHP foi utilizado para a "componentização" de algumas partes do projeto) e de um editor de texto (Recomendo o Visual Code por conta de sua fácil integração com o Git)
Se você chegou até aqui, parabéns você não é um imbecil e esta lendo a documentação (Continue assim) 👍
Então vamos lá...
Irei dividir esta sessão em alguns tópicos, são eles:
- Instalar o Visual Code;
- Instalar o Git;
- Instalar o XAMPP;
- Clonar o projeto;
Se nesta altura do campeonato você ainda não instalou o Visual Code na sua máquina, eu desejo do fundo do meu coração que você se foda!
Caso você seja um primata e ainda não tenha instalado, então clica aqui pra baixar essa porra e sugiro que você reveja a aula 02 do Diegão para aprender a configurar o ambiente para que você possa programar de forma mais "confortável", o PDF está AQUI.
Basta clicar AQUI e você será redirecionado para a páginas de downloads do git. A instalação não tem segredos, só ir clicando em "next"...
Só efetuar o download do instalador e ir clicando em "next", não tem mistério.
*PRESTE MUITA ATENÇÃO AQUI, SEU ANIMAL*
Você vai precisar clonar o projeto dentro do Apache do XAMPP para rodar a aplicação, pois como já dito anteriomente está sendo utilizado o PHP em algumas partes do código.
"ain mas como eu vou saber qual é a pasta do XAMPP?"
Bom, se você não foi um cabaço e não alterou o local de instalação padrão do XAMPP, basta copiar a linha abaixo:
C:\xampp\htdocs
Caso você tenha alterado, (novamente eu desejo que você se foda) basta localizar onde o XAMPP está instalado e navegar até a pasta htdocs.
Após estar dentro da pasta htdocs, clique em qualquer lugar com o botão direito do mouse e procure a seguinte opção Git Bash Here conforme a imagem abaixo:
Logo depois de clicar nessa opção, o terminal do git será aberto, conforme a imagem abaixo:
Bom, depois disso basta colar este comando abaixo:
git clone https://github.com/GabrielPrata/projetoDiegao.git
Caso o você esteja usando o Git na sua máquina pela primeira vez e o comando não funcione, pode ser que você tenha que inserir seu e-mail para poder começar a usasr a ferramenta. Caso isso realmente aconteça pesquise no Google como fazer isso, pois eu estou com preguiça de ensinar um marmanjo com 20 anos nas costas no segundo ano de sistemas a como configurar o Git 👍
E pronto pequeno imbecil, agora basta abrir a pasta do projeto no Visual Code e ser feliz! 🥰😄
Se você não foi um arrombado e seguiu os passos anteriores, toda vez que você fizer uma alteração no projeto, o visual code irá exibir para você quais foram os arquivos que foram alterados e quais foram as alterações feitas. Para ver as alterações, basta procurar por este ícone no menu esquerdo do seu Visual Code:
No meu caso está com 22 alterações pois usei como exemplo um projeto do meu trampo...
Após clicar no ícone, serão exibidos todos os arquivos alterados e o que foi alterado em cada um deles, conforme o exemplo: (áreas circuladas em vermelho)
Ain Prata mas como eu faço o Commit com as alterações?
Calma sua anomalia, antes por questões de padronização há alguns prefixos utilizados para saber o que foi feito no projeto. Irei citar apenas alguns que são os mais utilizados e que provavelmente apenas eles serão utilizados no projeto. São eles:
- [wip] --> Utilizado quando uma funcionalidade ainda não concluída.
- [fix] --> Utilizado para a correção de bugs e quando finalizamos alguma funcionalidade
- [style] --> Utilizado quando apenas o estilo da aplicação foi alterada
Agora sim você esta apto a subir um commit para o projeto, jovem primata 🎉🐵
Para subir um commit com o Visual Code é simples, após clicar no simbolo já mostrado acima uma caixa de texto será aberta e abaixo dela um botão esctrito "Commit".
Basta escrever com a respectiva semântica o que foi feito e enviar o commit, conforme a imagem abaixo: (Novamente, irei usar um exemplo do meu trampo rs)
Após escrever o que foi feito, basta clicar no botão de Commit e você irá perceber que os arquivos alterados irão sumir da fila. Em seguida clique em Sync Changes para sincronizar a sua máquina com o repositório aqui do GitHub.
E pronto, as alterações foram salvas!
Sessão 3: Como utlizar o Materialize, atualizar o projeto e reaproveitar funcionalidades já implementadas ⚙
Bom, para facilitar a vida miserável de vocês irei deixar aqui alguns macetes do Materialize (Framework CSS utilizado no desenvolvimento). Minha primeira dica é:
Uma das grandes vantagens do Materialize é a caralhada de coisas já prontas que eles oferecem na documentação deles. Então LEIAM A DOCUMENTAÇÃO!
Formulários, Corrséis, Collapsibles, Modals, Botões, tabela de cores, exemplos do sistema de grid, já esta TUDO pronto.
Então vamos aprender a como criar uma nova página para o projeto...
Antes de mais nada, sempre utilize como padrão a página Home, busque todas as referências nela.
Sempre crie seus arquivos como .php, para poder incluir a navbar e o rodape em sua página (estes que já estão prontos).
Hurdur como faço para incluir a navbar e o rodapé????
Bom, seu acéfalo eu já falei para você usar a página home como referência, basta inserir estas linhas no seu HTML:
O exemplo refere-se a navbar, para o rodapé basta você fazer este include no final da página (sempre dentro da tag "body")
Para que o Materialize seja chamado na sua página, você precisa incluir o arquivo .css, o arquivo .js e também chamar o JQuery para a página, segue o exemplo abaixo:
Os arquivos de importação usados são:
- materialize.css
- materialize.min.js
- style.css
- https://code.jquery.com/jquery-3.7.0.min.js
Crie uma folha de estilo (um arquivo .css, animal) para a página que você fazer, por questões de otimização e organização (e também porque eu não quero nenhum arrombado zaralhando meu css). O arquivo style.css contém algumas configurações globais, então importe ele também além da sua folha de estilo.
Agora iremos abordar o init.js, tenha muito cuidado ao mexer nele, seu fodido!
Caso você precise adicionar um novo elemento a uma página que utlize de JQuery, basta chamá-lo no arquivo init.js localizado dentro do diretório js:
Localização do arquivo
Ain Prata mas como que eu faço pra adicionar um novo elemento nesse arquivo?
Bom, filhote de cruz credo, sempre que tu for pegar alguma coisa dentro do Materialize, na página do elemento procure por essa sessão:
Normalmente, os elementos que utlizam o JQuery estão dentro da aba de JavaScript. (Não me lembro se há um ou outro perdido, então presta atenção pra depois não vir falar "ain não ta funcionando tal coisa").
Normalmente estão dentro dessa sessão
Bom, o que isso quer dizer? Isso quer dizer seu jumento que você precisa incluir a chamada da função JQuery para que a funcionalidade funcione conforme o esperado. Voltando para a sessão Initialization, você vai incluir a linha em destaque dentro do arquivo init.js.
E pronto! A função JQuery foi chamada para o elemento "modal" no exemplo acima. Novamente TENHA CUIDADO AO MEXER NESSA PORRA DESSE ARQUIVO pois ele é utilizado em todo o projeto, se você fizer merda nele, você vai enfiar o projeto todo no cu!
Para pegar o corpo do elemento, basta olhar a documentação pois nela há muitos exemplos de como implementar cada funcionalidade (é só dar CRTL + C/ CTRL + V, burro) no HTML e colar na sua página. Vale lembrar que todo esse lance do init.js é apenas para elementos que utilizem o JQuery, para os que não usam bastam apenas adicionar os elementos HTML como os inputs, por exemplo, que eles já puxam toda a formatação sozinhos ou adicionar as classes CSS, como nos botões. Agora iremos abordar essas classses CSS...