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

----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)

Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br 
----------------------------------------------------------------------

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

----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)

Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br 
----------------------------------------------------------------------

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
  cadastrar(aluno: Aluno): Observable<Aluno[]> {
    const dados = {
      nome: aluno.nome, matricula: aluno.matricula, 
      curso: aluno.curso,
    };

    return this.http.post(`${this.baseUrl}/gravar_aluno.php`, {dados: aluno})
      .pipe(map((res) => {
        // adiciona o novo aluno no vetor de alunos
        this.alunos.push(res['dados']);
        // e o retorna para o chamador deste método
        return this.alunos;
      }),
      
      catchError(this.tratarErro));
  }

  private tratarErro(error: HttpErrorResponse) {
    // vamos mostrar o erro no console
    console.log(error);

    // e vamos matar a aplicação aqui, pois não há mais nada
    // a fazer
    return throwError('Houve um erro: ' + error);
  }
}

----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)

Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br 
----------------------------------------------------------------------

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) {}

  // aqui temos o método que permitirá cadastrar um novo aluno
  cadastrarAluno(f) {
    this.alunoService.cadastrar(this.aluno)
      .subscribe(
        (res: Aluno[]) => {
          // recebemos a lista atualizada de alunos
          this.alunos = res;

          // enviamos um ok para o formulário
          this.sucesso = 'Aluno cadastrado com sucesso.';

          // finalmente resetamos o formulário
          f.reset();
        },
        (err) => this.erro = err
      );
  }
}

----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)

Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br 
----------------------------------------------------------------------

<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>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><button (click)="cadastrarAluno(f)">Gravar</button></td>
    </tr>
  </table>
</form>

<div *ngIf="erro" class="alert alert-danger">{{erro}}</div>
<div *ngIf="sucesso" class="alert alert-success">{{sucesso}}</div>

<ul *ngFor="let aluno of alunos; let i = index;">
    <li>{{i + 1}}; {{aluno.matricula}}; {{aluno.nome}}; {{aluno.curso}}</li>
</ul>

----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)

Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br 
----------------------------------------------------------------------

CREATE TABLE `alunos` (
  `id` int(11) NOT NULL,
  `matricula` int(11) NOT NULL,
  `nome` varchar(100) NOT NULL,
  `curso` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

----------------------------------------------------------------------
Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar)

Este código foi útil? Paga um cafezinho pra mim :-(
PIX: osmar@arquivodecodigos.com.br 
----------------------------------------------------------------------

<?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");
   
    // conexão efetuada com sucesso?
    if($con->connect_errno){
      echo "Não foi possível efetuar a conexão: " . 
        $mysqli->connect_error;
      exit(); // vamos sair daqui 
    }   
  
    // comando sql
    $query = "INSERT INTO alunos(id, matricula, nome, 
      curso) VALUES (null, '$matricula', '$nome', '$curso')";

    // vamos disparar o comando sql
    if(mysqli_query($con, $query)){
      http_response_code(201);
      $aluno = [
        'matricula' => $matricula,
        'nome' => $nome,
        'curso' => $curso,
        'id' => mysqli_insert_id($con)
      ];
  
      // vamos retornar o aluno recém cadastrado
      echo json_encode(['dados'=>$aluno]);
    }
    else{
      http_response_code(422);
    }
  }
?>