Angular

Cássio Agnaldo Onodera

caonodera@ifsp.edu.br
 Novo Projeto - CRUD

Neste novo projeto vamos criar um CRUD.

O que é um CRUD? São as iniciais de:

– C – Create
– R – Read
– U – Update
– D - Delete

Ou seja, vamos criar uma aplicação que realiza as quatro operações

básicas em um banco de dados.

Para isso, vamos usar o banco de dados MySql e a linguagem PHP.

Aconselhados instalar o XAMPP que fornece o MySQL e o PHP.

 Novo Projeto - CRUD

Instalação do XAMPP
Faça o download no site:
https://www.apachefriends.org/index.html
Faça a instalação do arquivo baixado.
Após a instalação, execute o XAMPP e inicialize (start) os serviços
Apache (PHP) e MySQL.
 Novo Projeto - CRUD

Depois que o XAMPP foi instalado, abra um navegador e verifique se o

servidor web Apache, instalado com o XAMPP está funcionando. Digite a
URL:
http://localhost

Vamos criar uma pasta para nosso

projeto no Apache/XAMPP.

Abra a pasta em que o XAMPP foi

instalado (c:\xampp) e dentro a pasta
\xampp\htdocs.

Dentro da pasta \htdocs crie uma pasta

chamada \crudAngular
 Novo Projeto - CRUD

Agora vamos criar o projeto no Angular. Abra o Prompt de Comandos.

. Entrar na pasta criada (....\Angular)

. Criar o projeto dentro da pasta
. No prompt, digite o comando:
ng new
. Vai perguntar o nome do projeto a ser criado.
Ex: crud
. Vai perguntar se deseja adicionar o arquivo de rota: responda Y
. Vai perguntar a folha de estilo, dê enter para escolher CSS
 Novo Projeto - CRUD

Conexão de banco com PDO

PDO (PHP Data Objects) é um módulo do PHP montado sob o paradigma

Orientado a Objetos que permite a padronização da comunicação com o
banco de dados relacional.

Inicialmente vamos criar um banco de dados:

1. Abra um navegador
2. Entre em http://localhost e clique em phpMyAdmin.
3. Clique na aba Base de Dados
4. Digite o nome do banco de dados: crudAngular com padrão UTF8_general_ci.
5. E clique no botão Criar.
 Novo Projeto - CRUD

Agora vamos criar uma tabela no banco de dados que criamos:

1. Clique em crudangular na árvore que aparece do lado esquerdo.
2. Clique na aba Estrutura
3. Digite o nome da tabela: usuarios e número de colunas: 4
4. E clique no botão Executar.
5. Na estrutura informe os campos:
Id, int, autoincremet, primary
Nome, varchar, 35
Usuario, varchar, 35
Senha, varchar, 20
6. Clique no botão Guarda
 Novo Projeto - CRUD

Agora vamos criar uma comunicação com o banco de dados utilizando a

estrutura do PDO.

Utilizando um editor de texto (Sublime Text, Notepadd++, etc), dentro da

pasta: c:\xampp\htdocs\crudAngular crie o arquivo conexao.php com o
conteúdo:

Abra em um navegador. Caso não consiga conectar com o banco,

será apresentada uma mensagem de erro.
 Novo Projeto - CRUD

Executando o Projeto

1. No Visual Studio Code, abra a pasta do projeto crud (Menu File/Open

Folder)
2. Abra um novo Terminal (o anterior foi fechado) com o menu Terminal / New
Terminal.
3. No Terminal, digite o comando:
ng serve

Utilizando um editor de texto (Sublime Text, Notepadd++, etc), dentro da

pasta: c:\xampp\htdocs\crudAngular crie o arquivo conexao.php com o
conteúdo:
 Novo Projeto - CRUD

Criando um Serviço para buscar informações no PHP/MySQL

1. Abra um segundo Terminal.
2. No Terminal, digite o comando:
ng g s services/apiService
3. Na pasta criada (\app\services) altere o arquivo api-service.service.ts:

O Angular não consegue

acessar o banco de dados
diretamente. Por isso, é
necessário o uso de uma
linguagem que consiga
acessar o banco de dados,
neste caso o PHP. O serviço
criado vai consumir a API
criada em PHP para
acessar os dados (fazer a
ponte entre o Angular e o
MySQL).
 Novo Projeto - CRUD

Criando um Serviço para buscar informações no PHP/MySQL

4. Na pasta \app altere o arquivo app.module.ts:

 Novo Projeto - CRUD

Criando um Serviço para buscar informações no PHP/MySQL

5. Na pasta \app altere o arquivo api-service.service.ts:

Observe que o map está

dando erro.
Devemos instalar uma
biblioteca e importa-la para
que o map seja
reconhecido.
 Novo Projeto - CRUD

Criando um Serviço para buscar informações no PHP/MySQL

6. Em um terminal (powershell) digite o comando abaixo para importar a

biblioteca rxjs:
npm install rxjs-compat

7. Altere o arquivo api-service.service.ts para:

Observe que após importar a biblioteca

o erro desaparece.
 Novo Projeto - CRUD

Criando um Serviço para buscar informações no PHP/MySQL

Para que o serviço possa ser usado pelo projeto ele precisa ser injetado
dentro do app.module.ts.
8. Altere o arquivo app.module.ts para:
 Novo Projeto - CRUD

Criando um componente (tela) para manipular usuários.

1. Abra o terminal e digite o comando:

ng g c usuarios

Observe que a pasta \usuários foi criada com arquivos

html, css e ts.
 Novo Projeto - CRUD

Inserir um dado na tabela usuários.

1. Abra o phpMyAdmin no navegador

2. No banco de dados crudangular (criado anteriormente), abra a tabela
usuarios.
3. Clique na guia Insere e digite os dados de um usuário
4. Clique no botão Executar.
 Novo Projeto - CRUD
Programando o componente usuários para receber dados da api:

1. Altere o arquivo usuarios.componente.ts para:

Continua...
Novo Projeto - CRUD
 Novo Projeto - CRUD
Preparando o html para mostrar usuários (usando Bootstrap):
1. Altere o arquivo usuarios.componente.html para:
<div class="container mt-4">
<span class="titulo">API de Usuários</span>
<hr class="mb-4">

<div class="row">
<div class="col-lg-8 col-md-6 col-sm-12">
<button class="btn btn-success ml-2" data-toggle="modal" data-target="#modal">Adicionar</button>
<br><br>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
(input)="carregar($event.target.value)"
(change)="this.textoBuscar = $event.target.value"
placeholder="Pesquisar" aria-label="Pesquisar">
<a (click)="carregar(this.textoBuscar)" class="btn btn-outline-info my-2 my-sm-0" ><i class="fas fa-
search"></i></a>
</form>
</div>

</div>

Continua...
 Novo Projeto - CRUD

<table class="table table-striped ml-2">

<tr>
<td><b>Nome</b></td>
<td><b>Usuário</b></td>
<td><b>Senha</b></td>
<td><b>Ações</b></td>
</tr>
<tr *ngFor="let dado of lista">

<td>{{dado.nome}}</td>
<td>{{dado.usuario}}</td>
<td>{{dado.senha}}</td>
<td>
<a (click)="dadosEditar(dado.nome, dado.usuario, dado.senha, dado.id)" data-toggle="modal" data-
target="#modal" title="Editar Registro"><i class="far fa-edit text-info mr-2"></i></a>
<a (click)="excluir(dado.id)" title="Excluir Registro"><i class="far fa-trash-alt text-danger"></i></a>
</td>
</tr>
</table>

</div>

Continua...
 Novo Projeto - CRUD

Alterando o html do componente app

1. No arquivo app.componente.html substitua o código

<span>Welcome</span> por <span>API MySQL PDO</span>
2. Apague todo o trecho entre os códigos <div class=“content” role=“main”>
até </div> e mova o código <router-outlet></router-outlet> entre <div> e
</div>
 Novo Projeto - CRUD

Alterando o roteamento para que o componente usuário seja encontrado

1. Altere o arquivo app-routing.module.ts para:

 Novo Projeto - CRUD

Testando

1. Depois de gravar os arquivos, abra um navegador e digite a URL:

http://localhost:4200/usuarios

Observe que a renderização já foi feita, mas os dados ainda não foram
mostrados. Além disso o bootstrap não está sendo mostrado. Portanto, temos
que aplicar o bootstrap ao projeto.
 Novo Projeto - CRUD

Aplicando o bootstrap

1. Vamos aplicar o bootstrap ao index.html que é a chamada principal do

projeto. No o arquivo index.html antes o código abaixo antes do </head>:
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/5.11.2/css/all.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-

q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
 Novo Projeto - CRUD

Testando

1. Depois de gravar os arquivos, abra um navegador e digite a URL:

http://localhost:4200/usuarios

Observe que o bootstrap

já está funcionando, mas
está centralizado. Vamos
alterar.
 Novo Projeto - CRUD

Alterando o html do componente app

1. No arquivo app.componente.html exclua os códigos <div class=“content”

role=“main”> e </div> :
 Novo Projeto - CRUD

Testando novamente

1. Depois de gravar os arquivos, abra um navegador e digite a URL:

http://localhost:4200/usuarios

Agora o bootstrap funcionou e as informações estão

distribuídas corretamente.
 Novo Projeto - CRUD

Agora vamos criar a API em PHP para buscar e listar os usuários do

banco de dados.

Utilizando um editor de texto (Sublime Text, Notepadd++, etc), dentro da

pasta: c:\xampp\htdocs\crudAngular crie o arquivo apiUsuarios.php com
o conteúdo:
<?php

include_once('conexao.php');

$postjson = json_decode(file_get_contents('php://input'), true);

//LISTAGEM DOS USUARIOS E PESQUISA PELO NOME E EMAIL

if($postjson['requisicao'] == 'listar'){

if($postjson['textoBuscar'] == ''){
$query = $pdo->query("SELECT * from usuarios order by id desc limit $postjson[start], $postjson[limit]");
}else{
$busca = $postjson['textoBuscar'] . '%';
$query = $pdo->query("SELECT * from usuarios where nome LIKE '$busca' or usuario LIKE '$busca' order by id desc
limit $postjson[start], $postjson[limit]");
} Continua ...
 Novo Projeto - CRUD

$res = $query->fetchAll(PDO::FETCH_ASSOC);

for ($i=0; $i < count($res); $i++) {

foreach ($res[$i] as $key => $value) {
}
$dados[] = array(
'id' => $res[$i]['id'],
'nome' => $res[$i]['nome'],
'usuario' => $res[$i]['usuario'],
'senha' => $res[$i]['senha'],
);
}

if($query){
$result = json_encode(array('success'=>true, 'result'=>$dados));

}else{
$result = json_encode(array('success'=>false));

}
echo $result;
}

?>
 Novo Projeto - CRUD

Testando a nota API em PHP

1. Depois de gravar o arquivo, abra um navegador e digite a URL:

http://localhost:4200/usuarios

Observe que temos usuários cadastrados na nossa tabela,

mas eles não foram listados.
 Novo Projeto - CRUD

Testando a nota API em PHP

2. Clique na página com o botão direito do mouse, e escolha a opção

Inspecionar
3. Clique na aba Console e observe o erro apresentado

Este erro ocorre nos

navegadores
quando é aberto
uma API sem uma
configuração
adequada.
 Novo Projeto - CRUD

Testando a nota API em PHP

4. Abra o arquivo conexao.php e altere para:

 Novo Projeto - CRUD

Testando a nota API em PHP

5. Grave e recarregue a página e verifique se os usuários apareceram

Agora os usuários
foram listados
corretamente.
Digite as iniciais de
um nome de usuário
e observe que a
busca já está
funcionando.
 Novo Projeto - CRUD
Criando uma janela modal para inserir e editar registro

1. Abra o arquivo usuarios.component.html e no final do arquivo digite o

código abaixo:
<!--CONTEUDO DA JANELA MODAL DE INSERIR E EDITAR -->
<div id="modal" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{title}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body">

<div class="form-group">
<label for="exampleInputEmail1">Nome</label>
<input type="text" class="form-control"
(input)="this.nome = $event.target.value" aria-describedby="emailHelp"
value="{{nome}}" placeholder="Seu nome" required />
</div>

Continua ...
 Novo Projeto - CRUD
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" (input)="this.usuario = $event.target.value"
value="{{usuario}}"
aria-describedby="emailHelp" placeholder="Seu email" required />

</div>
<div class="form-group">
<label for="exampleInputPassword1">Senha</label>
<input type="text" class="form-control" (input)="this.senha = $event.target.value"
value="{{senha}}"
placeholder="Senha" required />
</div>

</div>
<div class="modal-footer">
<button *ngIf="id === '' " type="button" class="btn btn-primary" (click)="cadastrar()">Salvar</button>

<button *ngIf="id > ’0’ " type="button" class="btn btn-primary" (click)="editar()">Editar</button>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>

</div>

</div>
</div>
</div>
 Novo Projeto - CRUD

Testando a janela modal

1. Grave e recarregue a página. Clique no botão Adicionar, clique em Fechar.

Depois clique no ícone Editar e clique em Fechar

Ao clicar em
Adicionar e Editar, a
janela modal é
aberta, mas as
funcionalidades
ainda não estão
funcionando.
 Novo Projeto - CRUD
Criando a função para cadastrar usuários
1. Abra o arquivo usuarios.component.ts e após a função carregar, digite
o código da função cadastrar:
cadastrar() {
if(this.nome !== '' && this.usuario !== '' && this.senha !== '') {
return new Promise(resolve => {
const dados = {
requisicao : 'add',
nome: this.nome,
usuario: this.usuario,
senha: this.senha
};
this.provider.Api(dados, 'apiUsuarios.php').subscribe(data => {
if(data['success']){
alert('Salvo com sucesso!');
window.location.reload();
} else {
alert('Erro ao salvar!');
}
});
});
} else {
alert('Preencha os campos!');
}
}
 Novo Projeto - CRUD

Agora vamos alterar API em PHP para inserir o usuário na tabela.

Utilizando um editor de texto, abra o arquivo apiUsuarios.php e inclua o

texto abaixo no final do arquivo:
} else if($postjson['requisicao'] == 'add'){
$query = $pdo->prepare("INSERT INTO usuarios SET nome = :nome, usuario = :usuario, senha = :senha ");
$query->bindValue("nome",$postjson['nome']);
$query->bindValue("usuario",$postjson['usuario']);
$query->bindValue("senha",$postjson['senha']);
$query->execute();

$id = $pdo->lastInsertId();

if($query) {
$result = json_encode(array('success'=>true, 'id'=>$id));
} else {
$result = json_encode(array('success'=>false));
}
echo $result;
}
 Novo Projeto - CRUD

Testando a inclusão de um usuário

1. Grave e recarregue a página. Clique no botão Adicionar, preencha os

dados de um usuários e clique em Salvar.

Verifique se o novo
usuário cadastrado
aparece na lista.
 Novo Projeto - CRUD

Criando a função para transferir os dados do usuário para a janela

modal.
1. Abra o arquivo usuarios.component.ts e após a função cadastrar,
digite o código da função dadoseditar:

dadosEditar(nome: string, usuario: string, senha: string, id: string) {

this.title = 'Editar Usuário';
this.nome = nome;
this.usuario = usuario;
this.senha = senha;
this.id = id;
}
 Novo Projeto - CRUD

Testando a função dadosEditar

1. Grave e recarregue a página. Clique no ícone Editar e verifique se os dados

do usuário estão aparecendo na janela Modal.

Observe que ainda

não é possível
gravar as alterações
dos dados do
usuário.
Observe também
que no lugar do
botão Salvar,
apareceu o botão
Editar.
 Novo Projeto - CRUD
Criando a função para gravar as alterações dos dados do usuário.
1. Abra o arquivo usuarios.component.ts e após a função dadoseditar,
digite o código da função editar:
editar() {
if(this.nome !== '' && this.usuario !== '' && this.senha !== '') {
return new Promise(resolve => {
const dados = {
requisicao : 'editar',
nome: this.nome,
usuario: this.usuario,
senha: this.senha,
id: this.id
};
this.provider.Api(dados, 'apiUsuarios.php').subscribe(data => {
if(data['success']){
alert('Alterações gravadas com sucesso!');
window.location.reload();
} else {
alert('Erro na gravação das alterações!');
}
});
});
} else {
alert('Preencha os campos!');
}
}
 Novo Projeto - CRUD

Agora vamos alterar API em PHP para gravar a alteração do usuário na

tabela.
Utilizando um editor de texto, abra o arquivo apiUsuarios.php e inclua o
texto abaixo no final do arquivo:

} else if($postjson['requisicao'] == 'editar'){

$query = $pdo->prepare("UPDATE usuarios SET nome = :nome, usuario = :usuario, senha = :senha WHERE id = :id ");
$query->bindValue("nome",$postjson['nome']);
$query->bindValue("usuario",$postjson['usuario']);
$query->bindValue("senha",$postjson['senha']);
$query->bindValue("id",$postjson['id']);
$query->execute();

if($query) {
$result = json_encode(array('success'=>true, 'id'=>$id));
} else {
$result = json_encode(array('success'=>false));
}
echo $result;

}
 Novo Projeto - CRUD

Testando a alteração de dados de um usuário

1. Grave e recarregue a página. Clique no ícone Editar, altere alguns dados e

verifique se os dados alterados foram gravados.
 Novo Projeto - CRUD

Criando a função para excluir usuário.

1. Abra o arquivo usuarios.component.ts e após a função editar, digite o

código da função excluir:
excluir(idusu:string) {
return new Promise(resolve => {
const dados = {
requisicao : 'excluir',
id: idusu
};
this.provider.Api(dados, 'apiUsuarios.php').subscribe(data => {
if(data['success']){
alert('Excluído com sucesso!');
window.location.reload();
} else {
alert('Erro ao excluir!');
}
});
});

}
 Novo Projeto - CRUD

Alterando a API em PHP para excluir usuário.

Utilizando um editor de texto, abra o arquivo apiUsuarios.php e inclua

o texto abaixo no final do arquivo:

}else if($postjson['requisicao'] == 'excluir'){

$query = $pdo->query("DELETE from usuarios where id = '$postjson[id]' ");

if($query){
$result = json_encode(array('success'=>true));

}else{
$result = json_encode(array('success'=>false));

}
echo $result;
}
 Novo Projeto - CRUD

Testando a exclusão de um usuário

1. Grave e recarregue a página. Clique no ícone Excluir e verifique se o

usuário foi excluído.
 Novo Projeto - CRUD

Templates em Bootstrap

No site bootsnipp você pode encontrar diversos templates para Bootstrap para
suas aplicações. Abra uma nova aba em seu navegador e entre em:

http://bootsnipp.com/tags

Vamos escolher o template para nossa tela de login. Clique em login:

 Novo Projeto - CRUD

Templates em Bootstrap

Role a tela e veja os diversos templates que podem ser utilizados para sua tela
de login.

Você poderia utilizar qualquer um, mas vamos utilizar o template abaixo
(sugerimos que use o mesmo). Clique sobre ele.
 Novo Projeto - CRUD

Templates em Bootstrap

Depois que selecionou o template desejado, será apresentado a tela abaixo

onde você ver o Preview, o código HTML e o código CSS para usar em seu
projeto.

Vamos retornar ao
Visual Code que
depois utilizaremos
os códigos CSS e
HTML.
 Novo Projeto - CRUD

Criando uma tela de Login

1. No powershell digite o comando

ng g login

2. Para indicar a rota, abra o arquivo app-routing.module.ts e altere para:

 Novo Projeto - CRUD

Criando uma tela de Login

3. Agora que o componente login foi criado, retorna a página do bottsnip,

copie o código CSS e cole dentro do arquivo login.componente.css:
 Novo Projeto - CRUD

Criando uma tela de Login

4. Retorne a página do bottsnip, copie o código HTML e cole dentro do

arquivo login.componente.html:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<body>
<div id="login">
<h3 class="text-center text-white pt-5">Login form</h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<h3 class="text-center text-info">Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="text" name="password" id="password" class="form-control">
</div>

Continua...
 Novo Projeto - CRUD

Criando uma tela de Login

Continuando...

<div class="form-group">
<label for="remember-me" class="text-
info"><span>Remember me</span> <span><input id="remember-me" name="remember-
me" type="checkbox"></span></label><br>
<input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
</div>
<div id="register-link" class="text-right">
<a href="#" class="text-info">Register here</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
 Novo Projeto - CRUD

Criando uma tela de Login

5. Vamos testar se a tela está aparecendo (ainda sem funcionalidade). Abra

um navegador e entre na url:

http://localhost:4200/login
 Novo Projeto - CRUD

Traduzindo/ajustando a tela:

1. Inicialmente remova a linha abaixo do arquivo login.componente.html :

<h3 class="text-center text-white pt-5">Login form</h3>
2. Neste arquivo vamos traduzir algumas palavras. Faça as alterações:
<div class="form-group">
<label for="username" class="text-info">Usuário:</label><br>
<input type="email" name="usuario" id="usuario" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Senha:</label><br>
<input type="password" name="senha" id="senha" class="form-control">
</div>
<div class="form-group">
<label for="remember-me" class="text-info"><span>Me lembre</span> <span>
<input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
<input type="submit" name="submit" class="btn btn-info btn-md" value="Logar">
</div>
<div id="register-link" class="text-right">
<a href="#" class="text-info">Cadastre</a>
</div>
 Novo Projeto - CRUD

Traduzindo/ajustando a tela:

3. Carregue a página novamente e observe como ficaram as alterações

http://localhost:4200/login