Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
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 CLIQuantidade de visualizações: 5893 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, curso: string, id?: number) { this.matricula = matricula; this.nome = nome; this.curso = curso; } } 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 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); } } 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) {} // 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 ); } } 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> </tr> <tr> <td> </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> 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, `curso` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 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"); // 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); } } ?> 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: | |
C++ ::: STL (Standard Template Library) ::: Vector C++ |
Como retornar uma referência ao primeiro elemento de um vector C++ usando a função front()Quantidade de visualizações: 6457 vezes |
O primeiro elemento em um contêiner STL vector do C++ pode ser acessado por meio da função front(). Como esta função é sobrecarregada, temos duas opções:reference front(); const_reference front() const; #include <iostream> #include <vector> using namespace std; int main(int argc, char *argv[]){ // um vector vazio que conterá inteiros vector<int> valores; // vamos inserir três elementos valores.push_back(54); valores.push_back(13); valores.push_back(87); // vamos obter o valor do primeiro elemento do vector // Note que front() pode ser usada dos dois lados // de uma operação de atribuição int valor = valores.front(); cout << "Primeiro elemento: " << valor << endl; // vamos alterar o valor do primeiro elemento valores.front() = 102; // vamos testar o resultado cout << "Primeiro elemento: " << valores.front() << endl; system("PAUSE"); // pausa o programa return EXIT_SUCCESS; } Note que aqui nós usamos: int valor = valores.front(); int& valor = valores.front(); valor = 102; Observe agora o seguinte trecho de código: int valor = valores.front(); // o primeiro elemento é 54 valores.front() = 20; cout << "Primeiro elemento: " << valor << endl; Aqui nós acessamos o valor do primeiro elemento, guardarmos-o na variável valor e atribuímos o valor 20 à valores.front(). Porém, ao imprimirmos a variável valor o seu conteúdo ainda é 54. De fato, o que gostaríamos é que uma alteração em valores.front() afetasse também a variável valor. Assim: int& valor = valores.front(); // o primeiro elemento é 54 valores.front() = 20; cout << "Primeiro elemento: " << valor << endl; const int& valor = valores.front(); // o primeiro elemento é 54 valores.front() = 20; valor = 300; // esta linha não compila cout << "Primeiro elemento: " << valor << endl; Agora o efeito que queríamos é alcançado. Alterações em valores.front() afetam a variável valor, mas, não podemos alterar valor diretamente, já que esta variável é uma referência constante agora. |
Delphi ::: VCL - Visual Component Library ::: TListBox |
Como retornar a quantidade de itens em uma TListBox do Delphi usando a propriedade Items.CountQuantidade de visualizações: 12836 vezes |
Em algumas situações nós precisamos obter a quantidade de itens em uma TListBox. Isso pode ser feito por meio da propriedade Count do objeto Items, uma instância da classe TStrings. Esta propriedade contém um valor inteiro que representa a quantidade de elementos na ListBox. Veja:procedure TForm1.Button1Click(Sender: TObject); var quant: Integer; begin // vamos adicionar dois itens na TListBox ListBox1.Items.Add('Item 1'); ListBox1.Items.Add('Item 2'); // vamos obter a quantidade de itens quant := ListBox1.Items.Count; // exibe o resultado ShowMessage('Quantidade de elementos: ' + IntToStr(quant)); end; É possível também obter a quantidade de itens em uma TListBox acessando a propriedade Count da classe TCustomListBox. Esta propriedade é herdada pela classe TListBox. Veja: quant := ListBox1.Count; Para fins de compatibilidade, esta dica foi escrita usando Delphi 2009. |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como retornar o tamanho de uma string em JavaScript usando a propriedade length do objeto StringQuantidade de visualizações: 10804 vezes |
Em várias situações nós precisamos obter a quantidade de caracteres, ou seja, o tamanho de uma palavra, frase ou texto em JavaScript. Para isso nós podemos usar a propriedade length do objeto String. A propriedade length do objeto String da linguagem JavaScript nos retorna um valor inteiro representando a quantidade de caracteres na string, incluindo espaços em branco e pontuações. Veja o código JavaScript completo para o exemplo: <!doctype html> <html> <head> <title>Estudos JavaScript</title> </head> <body> <script type="text/javascript"> // vamos declarar uma nova string var frase = "JavaScript é bom demais"; // agora vamos obter o tamanho da string var tam = frase.length; // e mostramos o resultado window.alert("Esta string possui " + tam + " caracteres."); </script> </body> </html> Ao abrir esta página HTML no navegador nós teremos uma mensagem window.alert() com o seguinte conteúdo: Esta string possui 23 caracteres. |
C ::: Desafios e Lista de Exercícios Resolvidos ::: Arrays e Matrix (Vetores e Matrizes) |
Exercícios Resolvidos de C - Declarar um vetor de 10 elementos e usar o laço for para solicitar ao usuário que informe os valores dos elementos do vetorQuantidade de visualizações: 13749 vezes |
Exercício Resolvido de C - Declarar um vetor de 10 elementos e usar o laço for para solicitar ao usuário que informe os valores dos elementos do vetor Pergunta/Tarefa: Escreva um programa C que declara um vetor (array) de 10 elementos do tipo int. Em seguida use um laço for para solicitar ao usuário que informe 10 valores inteiros e armazene tais valores nos elementos do vetor: Dica: Use a função scanf() para obter a entrada do usuário. Resposta/Solução: Veja abaixo a resolução completa para esta tarefa: #include <stdio.h> #include <stdlib.h> int main(int argc, char *argv[]) { // vamos declarar um vetor de 10 inteiros int valores[10]; int i; // agora vamos solicitar ao usuário que informe os 10 valores para // os elementos do vetor. O mais recomendável neste caso é usar um // laço for que repetirá 10 vezes e, a cada repetição, solicitaremos // um valor for(i = 0; i < 10; i++){ printf("Informe o valor %d: ", (i + 1)); scanf("%d", &valores[i]); } // para finalizar vamos exibir os valores informados pelo usuário e // presentes nos elementos do vetor printf("\nOs valores informados foram:\n"); for(i = 0; i < 10; i++){ printf("O valor %d foi: %d\n", (i + 1), valores[i]); } system("PAUSE"); return 0; } |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como retornar a diferença em dias entre duas datas usando JavaScriptQuantidade de visualizações: 18282 vezes |
Nesta dica mostrarei como podemos usar a linguagem JavaScript para calcular a quantidade de dias, ou seja, a diferença de dias entre duas datas. Note que o truque é subtrair um objeto Date de outro objeto Date. Veja o código JavaScript completo para o exemplo: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Estudos JavaScript</title> </head> <body> <script type="text/javascript"> function diferencaDias(data1, data2){ var dif = Date.UTC(data1.getYear(),data1.getMonth(),data1.getDate(),0,0,0) - Date.UTC(data2.getYear(),data2.getMonth(),data2.getDate(),0,0,0); return Math.abs((dif / 1000 / 60 / 60 / 24)); } // datas no formato ano/mês/dia document.write("A diferença de dias é: " + diferencaDias(new Date(2007, 0, 10), new Date(2007, 0, 20)) + " dias."); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: A diferença de dias é: 10 dias. |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
Java - Como retornar a quantidade de palavras em uma string Java usando um objeto da classe StringTokenizer |
Códigos Fonte |
Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
1º lugar: Java |