Lista de Exercícios Resolvidos: Java | Python | VisuAlg | Portugol | C | C# | VB.NET | C++
Você está aqui: Angular ::: Artigos e Tutorias ::: CRUD - CREATE, READ, UPDATE, DELETE

Tutorial Angular para iniciantes: Como criar uma aplicação que grava novos alunos em uma base de dados MySQL usando PHP como back-end - Versão Angular CLI

Quantidade de visualizações: 5842 vezes
Neste pequeno tutorial mostrarei como é possível usar o framework Angular para desenvolver um front-end que permite cadastrar alunos no banco de dados MySQL usando a linguagem PHP como back-end. É claro que você poderá trocar o PHP por Node.js ou qualquer linguagem do lado do servidor. O importante aqui é entender o processo de desenvolvimento.

Então, se você ainda não o fez, verifique se o Angular CLI está devidamente instalado e funcionando na sua máquina. Isso pode ser feito abrindo-se uma nova janela de terminal e disparando o comando:

c:\estudos_web>ng --version

Sua máquina deverá retornar algo parecido com:

Angular CLI: 11.2.1
Node: 14.15.4
OS: win32 x64

Obteve resultado semelhante? Então podemos prosseguir. Comece disparando o comando abaixo para criar uma nova aplicação Angular usando o Angular CLI:

c:\docs_osmar>cd c:\estudos_angular
c:\estudos_angular>ng new escola

Veja que pedi para o comando ng do Angular CLI criar um novo projeto com o nome escola (você pode escolher o nome que desejar). Aguarde alguns minutos até que o processo seja finalizado.

Criando a entidade Aluno, ou a classe Aluno, ou melhor ainda, o model Aluno

Como nossa aplicação vai gravar alunos na base de dados, nada melhor do que começar criando nossa entidade ou model Aluno. Vá até a pasta "C:\estudos_angular\escola\src\app" e crie um arquivo chamado aluno.ts com o seguinte conteúdo:

export class Aluno{
  id: number = 0;
  matricula: number;
  nome: string;
  curso: string;
  
  constructor(matricula: number, nome: string,
......


Veja que nosso model Aluno possui os atributos matricula, nome, curso e id (que é opcional na classe, pois será gerado automaticamente pela tabela no banco de dados MySQL.

O passo seguinte é criar o serviço que nos permitirá a comunicação com o servidor remoto, a saber: a página PHP que gravará os dados na base MySQL.

Criando o serviço aluno.service para a comunicação com o servidor remoto

Para criar o serviço que nos permitirá gravar os alunos na base de dados MySQL, abra uma janela de terminal (ou use a que você já tem aberta) e dispare o seguinte comando:

c:\escola>ng generate service cadastros/aluno --flat
CREATE src/app/cadastros/aluno.service.spec.ts (352 bytes)
CREATE src/app/cadastros/aluno.service.ts (134 bytes)

Note que este comando deve ser disparado dentro da pasta da sua aplicação. Agora, temos um arquivo aluno.service.ts dentro da pasta cadastros no diretório C:\estudos_angular\escola\src\app (o seu deve ser diferente, não se esqueça).

Assim, abra o arquivo aluno.service.ts e vamos modificá-lo para o seguinte código:

import {Injectable} from '@angular/core';

// precisamos do serviço HTTP para fazer a requisição AJAX
import {HttpClient, HttpErrorResponse, HttpParams} from '@angular/common/http';

// precisamos também do Observable, do map e catchError
import {Observable, throwError} from 'rxjs';
import {map, catchError} from 'rxjs/operators';

// precisamos também da classe Aluno
import {Aluno} from '../aluno';

@Injectable({
  providedIn: 'root'
})
export class AlunoService {
  // url base do endereço do serviço remoto
  baseUrl = 'http://localhost/servicos';
  // vetor de alunos já gravados
  alunos: Aluno[] = [];
  
  // vamos fazer uma injeção de dependência aqui
  constructor(private http: HttpClient){}

  // método que permite fazer uma requisição HTTP e gravar
  // o novo aluno
......


Há algumas importações importantes neste serviço: Injectable do '@angular/core', HttpClient, HttpErrorResponse e HttpParams do '@angular/common/http', Observable e throwError do 'rxjs', map e catchError do 'rxjs/operators' e, mais importante, a classe Aluno de '../aluno'. Em outras dicas em nosso site você aprenderá melhor sobre cada um desses imports.

No construtor da classe AlunoService nós fazemos uma injeção de dependência (DI) para um objeto HttpClient, que será usado para fazer uma requisição POST. Esta requisição ocorre no método cadastrar(), que recebe um objeto da classe Aluno e o fornece como JSON na requisição POST. Assim que o novo aluno é cadastrado na base de dados MySQL, este método retorna o novo aluno (como JSON) e nós o adicionamos a um vetor de alunos, que será exibido na tela de cadastro para indicar os alunos já cadastrados.

Antes de prosseguirmos, que diacho é esse erro "implicitly has an 'any' type"?

Se você tentar executar a aplicação agora, de imediato já notará duas mensagens de erro (ou pelo menos uma delas):

Error: src/app/app.component.ts:24:18 - error TS7006: Parameter 'f' implicitly has an 'any' type.
24 cadastrarAluno(f) {

Error: src/app/cadastros/aluno.service.ts:36:26 - error TS7053: Element implicitly has an 'any' type because expression of type '"dados"' can't be used to index type 'Object'.
Property 'dados' does not exist on type 'Object'.
36 this.alunos.push(res['dados']);

Se elas aparecem na sua versão do Angular, basta adicionar a linha

"noImplicitAny": false

no arquivo tsconfig.json na raiz da aplicação e o problema será resolvido.

Já estamos bem adiantados. Hora de escrever o código do app.component.ts

O Angular CLI já criou um arquivo app.component.ts. Abra-o e altere o seu código para a versão abaixo:

import {Component} from '@angular/core';

// importamos a classe Aluno
import {Aluno} from './aluno';
// importamos o serviço AlunoService
import {AlunoService} from './cadastros/aluno.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  alunos: Aluno[] = [];
  // criamos uma nova instância da classe Aluno
  aluno = new Aluno(0, '', '', 0);
  erro = '';
  sucesso = '';

  // fazemos uma injeção de dependência aqui
  constructor(private alunoService: AlunoService) {}
......


Neste arquivo temos uns imports importantes: Component do '@angular/core', Aluno de './aluno' e AlunoService de './cadastros/aluno.service'. Em seguida, dentro da anotação @Component nós temos as definições para o selector, o templateUrl e o styleUrls. Finalmente, na classe AppComponent, nós temos as declaramos de um vetor de Aluno[], um objeto da classe Aluno e algumas variáveis auxiliares.

No construtor dessa classe nós fazemos uma injeção de dependência (DI) para um objeto da classe AlunoService. Então temos o método cadastrarAluno(), que recebe o formulário HTML e o repassa para o método cadastrar() do aluno.service. Como retorno desse método nós obtemos a lista atualizada dos alunos já cadastrados nessa sessão (atenção: não estamos obtendo os alunos cadastrados anteriomente na base de dados MySQL. Isso será visto em outra parte do tutorial).

Já temos o app.component.ts, vamos complementar o app.component.html

Com o app.component.ts devidamente ajustado, vamos nos concentrar agora no app.component.html, que contém o formulário que nos permitirá cadastrar os alunos. Veja o código completo para ele:

<h3>Cadastrar Novo Aluno</h3>

<form #f="ngForm" name="cadastrarForm">
<table width="200" border="0" cellspacing="3" cellpadding="3">
    <tr>
      <td>Matrícula:</td>
      <td><input type="text" name="matricula" [(ngModel)]="aluno.matricula"></td>
    </tr>
    <tr>
      <td>Nome:</td>
      <td><input type="text" name="nome" [(ngModel)]="aluno.nome"></td>
    </tr>
    <tr>
      <td>Curso:</td>
      <td><input type="text" name="curso" [(ngModel)]="aluno.curso"></td>
......


Veja que fiz um código HTML bem simples, sem firulas. Depois que você entender todos os elementos, então você poderá formatar e deixar mais bonito. O importante é observar como usamos ngModel para ligar os campos do formulário aos atributos da classe Aluno. Coloquei também dois ngIf para mostrar as mensagens de sucesso e de erro, e, finalmente, um ngFor para percorrer e exibir os alunos já cadastrados durante essa sessão.

Vamos lá? Já podemos executar o exemplo. A partir da pasta raiz da aplicação, dispare o comando abaixo:

c:\estudos_angular\escola>ng serve --open

Depois de alguns segundos teremos o seguinte resultado:



Obteve o mesmo resultado? Que maravilha! Mas não podemos cadastrar alunos ainda, pois a parte do back-end ainda não foi desenvolvida. Mas isso é coisa simples.

Criando a tabela no banco de dados MySQL

Nosso front-end já está completo e rodando. Chegou a hora de nos concentrarmos no back-end. Inicialmente vamos criar a tabela na base de dados MySQL. Veja sua estrutura e o código SQL DDL para a sua criação:

CREATE TABLE `alunos` (
  `id` int(11) NOT NULL,
  `matricula` int(11) NOT NULL,
  `nome` varchar(100) NOT NULL,
......


Marque o campo id como chave primária e auto-incremento. Agora vamos ao código PHP, que mantive muito simples também, sem validações, o que deixo por sua conta.

A página PHP que recebe os alunos e os gravam na tabela MySQL

Segue abaixo o código completo para a página gravar_aluno.php, colocada no diretório "C:\xampp\htdocs\servicos" (fique atento ao endereço onde você vai colocá-la, seja na sua máquina local ou em um servidor remoto):

<?php
  // não deixe quebra de linha nos headers abaixo
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: POST, GET, 
    PUT, DELETE, OPTIONS');
  header('Access-Control-Allow-Headers: Origin, 
    X-Requested-With, Content-Type, Accept');
  header("Content-Type: application/json; charset=utf-8");

  // vamos obter os dados vindo do formulário
  // atenção: em um código real temos que validar
  $dados = file_get_contents("php://input");
  
  // a requisição foi post?
  if(isset($dados) && !empty($dados)){
    $request = json_decode($dados);
    $nome = $request->dados->nome;
    $matricula = $request->dados->matricula;
    $curso = $request->dados->curso;

    // vamos efetuar a conexão com o banco
    $con = new mysqli("localhost", "root",
      "osmar1234", "estudos");
......


Se você observar atentamente o nosso exemplo, verá que a aplicação Angular está rodando em http://localhost:4200 enquanto a página PHP estará rodando em http://localhost/servicos/gravar_aluno.php, ou seja, mesmo servidor mas portas diferentes. Dessa forma, a requisição AJAX feita a partir da aplicação Angular vai falhar, com a seguinte mensagem de erro:

Access to XMLHttpRequest at 'http://localhost/servicos/gravar_aluno.php' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Por essa razão, a página PHP contém os headers que liberam o acesso cross-site (de servidor diferente):

// não deixe quebra de linha nos headers abaixo
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
header("Content-Type: application/json; charset=utf-8");

Um outro detalhe interessante é o uso da função PHP file_get_contents("php://input") para receber o JSON enviado pela aplicação Angular. Programadores PHP vão achar isso uma "gambiarra", mas, atualmente, essa é a única forma de recebermos uma requisição POST usando JSON no PHP.

O restante do código é fácil de entender: criamos a conexão com o banco de dados, gravamos o aluno e retornamos um novo JSON contendo o novo aluno inserido. Note o uso de mysqli_insert_id() para obter o id do registro recém-inserido com o propósito de devolvermos o novo aluno com esse atributo já preenchido.

E agora o resultado final. Veja a imagem abaixo:



Conseguiu executar o exemplo também? Em outra dicas de Angular você encontra as demais partes do tutorial, a saber: listar, editar e excluir os alunos. Até lá e bons estudos.

Link para compartilhar na Internet ou com seus amigos:

PHP ::: Boletos Bancários, Arquivos de Remessa e Retornos do Banco ::: Caixa Econômica Federal - Banco 104

Boleto Bancário PHP - Como calcular o dígito verificador da conta corrente - Módulo 11 - Boleto Caixa Econômica CNAB240

Quantidade de visualizações: 1596 vezes
Nesta dica mostrarei, passo-a-passo, como calcular o dígito verificador da conta corrente para o boleto e arquivos de remessa da Caixa Econômica Federal (Banco 104) de acordo com o Manual de Leiaute de Arquivo Eletrônico Padrão CNAB 240 - Cobrança Bancária Caixa - SIGCB - Versão 67.118 v024 micro. Tenha certeza de verificar sua versão do manual antes de usar o código abaixo.

O Dígito Verificador da Conta é um código adotado pelo banco, em nosso caso a Caixa Econômica, para verificação da autenticidade do número da conta corrente, e tal número deverá ser calculado através do módulo 11.

Mostro abaixo o código completo para o cálculo do dígito verificador. Note que só precisamos informar o número da conta (sem o dígito) e o código se encarrega de calcular o dígito. Aqui eu informei o número da conta em uma variável, mas você pode modificar o código para que o valor venha de um formulário ou do banco de dados.

Eis o código PHP:

<?php
// função que recebe o número da conta e devolve
// o dígito verificador
function digitoVerificadorConta($conta){
  // primeiro vamos remover os espaços do número da conta
  $conta = trim($conta);
  // agora precisamos adicionar os zeros necessários
  // para completar 12 posições
  $conta = sprintf("%012d", $conta);
  // agora vamos definir os índices de múltiplicação
  $indices = "543298765432";
  // e aqui a soma da multiplicação coluna por coluna
  $soma = 0;
	
  // fazemos a multiplicação coluna por coluna agora
  for($i = 0; $i < strlen($conta); $i++){
   $soma = $soma + ((int)($conta[$i])) * 
......


Ao executar este código PHP nós teremos o seguinte resultado:

O dígito verificador para a conta 109990 é: 6

É importante observar que o dígito verificador da agência e também do par agência/conta são sempre informados pela Caixa, geralmente pela agência na qual nossos clientes possuem conta.


Java ::: Tratamento de Erros ::: Erros de Tempo de Execução

Tratamento de erros em Java - Como tratar o erro NoClassDefFoundError em seus programas Java

Quantidade de visualizações: 12214 vezes
A exceção (erro) NoClassDefFoundError acontece quando a Java Virtual Machine (JVM) ou uma instância de ClassLoader tenta carregar a definição de uma classe (como parte de uma chamada de método normal ou como parte da criação de uma nova instância usando a expressão new) e nenhuma definição de tal classe puder ser encontrada.

Antes de vermos uns exemplos, veja a posição da classe pública NoClassDefFoundError na hierarquia de classes da plataforma Java:

java.lang.Object
  java.lang.Throwable
    java.lang.Error
      java.lang.LinkageError
        java.lang.NoClassDefFoundError
Esta classe implementa a interface Serializable.

Veja que NoClassDefFoundError herda de Error e portanto, é uma das exceções lançadas como parte do funcionamento da JVM. Isso quer dizer que não podemos usar blocos try...catch para evitá-lo. A exceção é quando estamos tentando carregar uma instância de classe usando o ClassLoader.

Para provocar o erro NoClassDefFoundError só precisamos efetuar algumas das ações abaixo:

1) Fornecer um nome de classe que não existe (ou com diferenças entre minúsculas e maiúsculas do nome pretendido). Assim:

java MinhaClasse
......


Se a classe não existir no diretório atual ou em um arquivo jar, a mensagem de erro abaixo será exibido:

C:\java>java MinhaClasse
Exception in thread "main" 
java.lang.NoClassDefFoundError: MinhaClasse


2) Fornecer um nome de classe seguida por .class:

java MinhaClasse.class
......



Java ::: Tratamento de Erros ::: Passos Iniciais

Como usar try catch em Java - Aprenda a tratar erros em Java usando o bloco try...catch

Quantidade de visualizações: 39443 vezes
A forma mais comum de tratar e se recuperar de erros em uma aplicação Java é usando o bloco try...catch. Todo o código que apresenta a possibilidade de erros ou falhas é colocado em um bloco try. E o código a ser executado caso o erro ou falha aconteça é colocado em um bloco catch. Veja a sintáxe:

try{
  // código que pode provocar erros
}
catch(Tipo_Exceção nome){
......


A palavra-chave catch é seguida por uma declaração do tipo de exceção sendo lançada. É aqui que entram detalhes interessantes. Antes de tratar um erro, é preciso que você saiba qual erro estará tratando. Em Java temos três tipos de erros: runtime exceptions, checked exceptions e errors. Errors não precisam ser tratados com bloco try...catch, runtime exceptions (erros causados por códigos mal escritos ou mal testados) opcionalmente usam try...catch e checked exceptions (erros que fogem ao controle do programador) devem obrigatoriamente usar try...catch.

Vamos ver um exemplo do uso de try...catch:

import java.io.*;

public class Estudos{
  public static void main(String[] args){
    try{
      DataInputStream in = new DataInputStream(
        new BufferedInputStream(
          new FileInputStream("conteudo.txt")));
......


Neste trecho de código nós tentamos ler o conteúdo de um arquivo. O que aconteceria se o arquivo não existisse? O programa entraria em colapso. Além disso, todas as operações de entrada e saída (IO) estão suscetíveis a falhas externas. Por esta razão, o compilador nos força a usar try...catch nestas situações.

Neste exemplo podemos ver que o bloco catch é seguido por uma definição da classe IOException. No entanto, este trecho de código pode também disparar a exceção FileNotFoundException. Olhando a documentação vemos que FileNotFoundException herda de IOException, que por sua vez herda de Exception. Isso nos mostra que, se não estivermos certos de qual exceção será lançada, podemos usar a superclasse Exception e usarmos o método getMessage() ou demais métodos para obter maiores informações sobre o erro.

Vamos ver mais um exemplo de try...catch. Desta vez veremos como evitar uma exceção StringIndexOutOfBoundsException:

import java.util.*;

public class Estudos{
  public static void main(String[] args){
    String palavra = "Java";    

    Scanner in = new Scanner(System.in);
    
    System.out.print("Informe um inteiro: ");
    int indice = in.nextInt();
......


Compile, execute este código e forneça um inteiro maior que 3 para ver o resultado.


PHP ::: Fundamentos da Linguagem ::: Métodos, Procedimentos e Funções

Como usar funções e variáveis globais em PHP

Quantidade de visualizações: 38208 vezes
Por padrão, variáveis definidas a nível de página, ou seja, variáveis globais, não podem ser acessadas a partir de uma função. Veja um exemplo:

<?
  // variável global
  $usuario = "Osmar";
  
  function exibir(){
    echo $usuario; // acessa a variável gloal
......


Ao executar este exemplo teremos o seguinte resultado:

Notice: Undefined variable: usuario in 
xxx/estudos.php on line 6


Para contornar este problema, temos que empregar a palavra-chave global seguida pelo nome da variável global que queremos acessar. Veja:

<?
  // variável global
  $usuario = "Osmar";
  
  function exibir(){
    // permite acesso à variável global
......


Ao executarmos o código novamente, percebemos que o resultado é o esperado. Outra forma de acessar variáveis globais a partir de uma função é usando $GLOBALS. Veja:

<?
  // variável global
  $usuario = "Osmar";
  
  function exibir(){
    echo $GLOBALS['usuario']; // acessa a variável global
......



Delphi ::: Dicas & Truques ::: Rotinas de Conversão

Como converter uma string em um valor numérico de ponto-flutuante (com parte fracionária) em Delphi usando as funções StrToFloat(), TryStrToFloat() e StrToFloatDef()

Quantidade de visualizações: 24420 vezes
Em algumas situações precisamos converter strings em valores numéricos do tipo ponto-flutuante, ou seja, números que contenham uma parte fracionária. Isso acontece quando recebemos valores de caixas de texto e precisamos usuá-los em cálculos.

Vamos começar com a função StrToFloat() da unit SysUtils. Esta função recebe uma string representando um valor de ponto-flutuante válido e retorna um valor de ponto-flutuante. Veja o exemplo:

procedure TForm1.Button1Click(Sender: TObject);
var
  valor1, valor2, soma: Double;
begin
  // vamos receber as strings dos TEdits e converter
  // seus valores para números de ponto-flutuante
  // note que em Delphi, um valor de ponto-flutuante
  // é informado em caixas de texto usando vírgula. Ex: 7,3
  valor1 := StrToFloat(Edit1.Text);
......


Note que, se a string sendo convertida possuir um valor de ponto-flutuante inválido, uma exceção do tipo EConvertError será lançada. Podemos evitar isso usando a função TryStrToFloat(). Esta função recebe dois argumentos: a string a ser convertida e a variável do tipo Extended, Double ou Single que receberá o valor. O resultado será true se a conversão for feita com sucesso e false em caso contrário. Veja:

procedure TForm1.Button1Click(Sender: TObject);
var
  valor: Double;
begin
  // vamos tentar converter o valor da caixa de texto
  // em um valor de ponto-flutuante
......


Há ainda uma terceira possibilidade: usar a função StrToFloatDef(). Esta função funciona exatamente da mesma forma que StrToFloat(), exceto que agora, se houver um erro de conversão, um valor de ponto-flutuante padrão será retornado. Veja:

procedure TForm1.Button1Click(Sender: TObject);
var
  valor: Double;
begin
  // vamos converter o valor da caixa de texto
  // em um valor de ponto-flutuante. Se a conversão não puder
......


Para fins de compatibilidade, esta dica foi escrita usando Delphi 2009.


Desafios, Exercícios e Algoritmos Resolvidos de Delphi

Veja mais Dicas e truques de Delphi

Dicas e truques de outras linguagens

Quem Somos

Osmar J. Silva
Programador Freelancer
WhatsApp +55 (062) 98553-6711

Goiânia-GO
Programador Freelancer - Full Stack Developer, Professional Java Developer, PHP, C/C++, Python Programmer, wxWidgets Professional C++ Programmer, Freelance Programmer. Formado em Ciência da Computação pela UNIP (Universidade Paulista Campus Goiânia) e cursando Engenharia Civil pela PUC-Goiás. Possuo conhecimentos avançados de Java, Python, JavaScript, C, C++, PHP, C#, VB.NET, Delphi, Android, Perl, e várias tecnologias que envolvem o desenvolvimento web, desktop, front-end e back-end. Atuo há mais de 20 anos como programador freelancer, atendendo clientes no Brasil, Portugal, Argentina e vários outros paises.
Entre em contato comigo para, juntos, vermos em que posso contribuir para resolver ou agilizar o desenvolvimento de seus códigos.
José de Angelis
Programador Freelancer
WhatsApp +55 (062) 98243-1195

Goiânia-GO
Programador Freelancer - Formado em Sistemas de Informação pela Faculdade Delta, Pós graduado em Engenharia de Software (PUC MINAS), Pós graduado Marketing Digital (IGTI) com ênfase em Growth Hacking. Mais de 15 anos de experiência em programação Web. Marketing Digital focado em desempenho, desenvolvimento de estratégia competitiva, analise de concorrência, SEO, webvitals, e Adwords, Métricas de retorno. Especialista Google Certificado desde 2011 Possui domínio nas linguagens PHP, C#, JavaScript, MySQL e frameworks Laravel, jQuery, flutter. Atualmente aluno de mestrado em Ciência da Computação (UFG)
Não basta ter um site. É necessário ter um site que é localizado e converte usuários em clientes. Se sua página não faz isso, Fale comigo e vamos fazer uma analise e conseguir resultados mais satisfatórios..

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: Delphi
6º lugar: C
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2024 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 14 usuários muito felizes estudando em nosso site.