Insert data in MySQL from Angular 2 web Application

Question

I'm starting to learn Angular 2, and i have to insert some data in a database using Ajax. I created a Angular 2 page to register some TV Series in the data base.

Follow the code of the form:

<form (submit)="cadastrarSerie()">
  <div class="form-group">
    <label for="inputNomeSerie">Nome da Serie:</label>
    <input name="inputNomeSerie" type="text" class="form-control" id="inputNomeSerie" [(ngModel)]="nome" required>
  </div>
  <div class="form-group">
    <label for="inputSinopseSerie">Sinopse:</label>
    <textarea name="inputSinopseSerie" class="form-control" rows="5" id="inputSinopseSerie" [(ngModel)]="sinopse" required></textarea>
  </div>
  <div class="form-group">
    <label for="inputTemporadaSerie">Temporadas:</label>
    <input name="inputTemporadaSerie" min="1" type="number" class="form-control" id="inputTemporadaSerie" [(ngModel)]="temporadas" required>
  </div>
  <div class="form-group">
    <label for="inputProdutoraSerie">Produtora da Serie:</label>
    <input name="inputProdutoraSerie" type="text" class="form-control" id="inputProdutoraSerie" [(ngModel)]="produtora" required>
  </div>
  <button type="submit" class="btn btn-default">Cadastrar</button>
</form>

Follow the code of the function that makes the requisition to a .php file, to insert in database:

  public nome:String;
  public sinopse:String;
  public temporadas:number;
  public produtora:String;
  public cadastrado:String;

  public cadastrarSerie(){
    if(this.nome.length>0 && this.sinopse.length>0 && this.temporadas>0 && this.produtora.length>0){
      let req = new XMLHttpRequest();
      req.onreadystatechange = function() {
        if(req.readyState === 4 && req.status==200){
          let x = JSON.parse(req.responseText);

        }
      }
      req.open("get","/cadastrarSerie.php?nome="+this.nome+"&sinopse="+this.sinopse+"&temporadas="+this.temporadas+"&produtora="+this.produtora,true);
      req.send();
    }
  }

And there the code of "cadastrarSerie.php" (registerSerie.php in english) that inserts on db:

<?php
if(isset($_GET['nome']) && isset($_GET["sinopse"]) && isset($_GET["temporadas"]) && isset($_GET["produtora"])){
    include "./Serie.php";
    $serie = new Serie(null,$_GET["nome"],$_GET["sinopse"],$_GET["temporadas"],$_GET["produtora"]) ;
    $serie->inserir();
    return true;
}else{
    return false;
}
?>

I know, the Angular is client-side, although the PHP is server-side, but i don't know how to make it work, i'm using 'ng serve' to start a HTTP server to test the angular 2 page.

How can i insert data on database? I have to use something like Xampp?

I think the code is OK, but my .php file isn't opening, i think i have to start some MySQL server or Apache server side by side with the 'ng serve', how can i do that? — Nathan Schroeder
– Nathan Schroeder, Commented Jul 3, 2018 at 1:06
It's better to put the code in the text way rather than in the image. — Shihe Zhang
– Shihe Zhang, Commented Jul 3, 2018 at 1:14
@NathanSchroeder use xampp to run the php code or something similar depending on your OS — Naguib Ihab
– Naguib Ihab, Commented Jul 3, 2018 at 1:18

Shoaeb · Accepted Answer · 2018-07-03 01:27:14Z

2

from the inputs you provided, it seems you need a server to host your .php files, unless it is served by a web server (xamp/wamp/lamp..etc), it wont work. you will need to install xampp and then move your php file into its www directory.

answered Jul 3, 2018 at 1:27

Shoaeb

9199 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Insert data in MySQL from Angular 2 web Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related