Angular 2 CRUD rest button did not work.

[mhr92]

Hello, I'm using angular cli 1.4.3, npm 5.4.2, node 6.11.3.

I create CRUD using angular 2 and rest API. It can read the db but the button for create , read, update and delete did not work. When I click the button it will give this error:

GET http://localhost/Rest%20API/product/read.php60 404 (Not Found)

Failed to load http://localhost/Rest%20API/product/read.php60: No 'Access Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 404.

ERROR Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers, …}

Here the code:

app.component,ts

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

enableProdMode();

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
// properties for child components
title="Read Products";

product_id;
// properties used to identify what views to show
show_read_products_html=true;
show_create_product_html=false;
show_read_one_product_html=false;
show_update_product_html=false;
show_delete_product_html=false;

// show the 'create product form'
showCreateProduct($event){

	// set title
	this.title=$event.title;

    // hide all html then show only one html
    this.hideAll_Html();
    this.show_create_product_html=true;
}

// show products list
showReadProducts($event){
    // set title
    this.title=$event.title;
 
    // hide all html then show only one html
    this.hideAll_Html();
    this.show_read_products_html=true;
}

// hide all html views
hideAll_Html(){
    this.show_read_products_html=false;
    this.show_read_one_product_html=false;
    this.show_create_product_html=false;
    this.show_update_product_html=false;
    this.show_delete_product_html=false;
}

// show details of a product
showReadOneProduct($event){

    // set title and product ID
    this.title=$event.title;
    this.product_id=$event.product_id;
 
    // hide all html then show only one html
    this.hideAll_Html();
    this.show_read_one_product_html=true;
}

// show the 'update product form'
showUpdateProduct($event){

    // set title and product ID
    this.title=$event.title;
    this.product_id=$event.product_id;
 
    // hide all html then show only one html
    this.hideAll_Html();
    this.show_update_product_html=true;
}

// show 'are you sure?' prompt to confirm deletion of a record
showDeleteProduct($event){
 
    // set title and product ID
    this.title=$event.title;
    this.product_id=$event.product_id;
 
    // hide all html then show only one html
    this.hideAll_Html();
    this.show_delete_product_html=true;
}

}
`

product.php (Rest API)

`<?php
class Product{

// database connection and table name
private $conn;
private $table_name = "products";

// object properties
public $id;
public $name;
public $description;
public $price;
public $category_id;
public $category_name;
public $created;

// constructor with $db as database connection
public function __construct($db){
    $this->conn = $db;
}

// read products
function read()
{

// select all query
$query = "SELECT
            c.name as category_name, p.id, p.name, p.description, p.price, p.category_id, p.created
        FROM
            " . $this->table_name . " p
            LEFT JOIN
                categories c
                    ON p.category_id = c.id
        ORDER BY
            p.created DESC";

// prepare query statement
$stmt = $this->conn->prepare($query);

// execute query
$stmt->execute();

return $stmt;
}

// create product
function create(){

// query to insert record
$query = "INSERT INTO
            " . $this->table_name . "
        SET
            name=:name, price=:price, description=:description, category_id=:category_id, created=:created";

// prepare query
$stmt = $this->conn->prepare($query);

// sanitize
$this->name=htmlspecialchars(strip_tags($this->name));
$this->price=htmlspecialchars(strip_tags($this->price));
$this->description=htmlspecialchars(strip_tags($this->description));
$this->category_id=htmlspecialchars(strip_tags($this->category_id));
$this->created=htmlspecialchars(strip_tags($this->created));

// bind values
$stmt->bindParam(":name", $this->name);
$stmt->bindParam(":price", $this->price);
$stmt->bindParam(":description", $this->description);
$stmt->bindParam(":category_id", $this->category_id);
$stmt->bindParam(":created", $this->created);

// execute query
if($stmt->execute()){
    return true;
}else{
    return false;
}
}

// used when filling up the update product form
function readOne(){

// query to read single record
$query = "SELECT
            c.name as category_name, p.id, p.name, p.description, p.price, p.category_id, p.created
        FROM
            " . $this->table_name . " p
            LEFT JOIN
                categories c
                    ON p.category_id = c.id
        WHERE
            p.id = ?
        LIMIT
            0,1";

// prepare query statement
$stmt = $this->conn->prepare( $query );

// bind id of product to be updated
$stmt->bindParam(1, $this->id);

// execute query
$stmt->execute();

// get retrieved row
$row = $stmt->fetch(PDO::FETCH_ASSOC);

// set values to object properties
$this->name = $row['name'];
$this->price = $row['price'];
$this->description = $row['description'];
$this->category_id = $row['category_id'];
$this->category_name = $row['category_name'];
}

// update the product

function update(){

// update query
$query = "UPDATE
            " . $this->table_name . "
        SET
            name = :name,
            price = :price,
            description = :description,
            category_id = :category_id
        WHERE
            id = :id";

// prepare query statement
$stmt = $this->conn->prepare($query);

// sanitize
$this->name=htmlspecialchars(strip_tags($this->name));
$this->price=htmlspecialchars(strip_tags($this->price));
$this->description=htmlspecialchars(strip_tags($this->description));
$this->category_id=htmlspecialchars(strip_tags($this->category_id));
$this->id=htmlspecialchars(strip_tags($this->id));

// bind new values
$stmt->bindParam(':name', $this->name);
$stmt->bindParam(':price', $this->price);
$stmt->bindParam(':description', $this->description);
$stmt->bindParam(':category_id', $this->category_id);
$stmt->bindParam(':id', $this->id);

// execute the query
if($stmt->execute()){
    return true;
}else{
    return false;
}
}

// delete the product

function delete(){

// delete query
$query = "DELETE FROM " . $this->table_name . " WHERE id = ?";

// prepare query
$stmt = $this->conn->prepare($query);

// sanitize
$this->id=htmlspecialchars(strip_tags($this->id));

// bind id of record to delete
$stmt->bindParam(1, $this->id);

// execute query
if($stmt->execute()){
    return true;
}

return false;
 
}

// search products

function search($keywords){

// select all query
$query = "SELECT
            c.name as category_name, p.id, p.name, p.description, p.price, p.category_id, p.created
        FROM
            " . $this->table_name . " p
            LEFT JOIN
                categories c
                    ON p.category_id = c.id
        WHERE
            p.name LIKE ? OR p.description LIKE ? OR c.name LIKE ?
        ORDER BY
            p.created DESC";

// prepare query statement
$stmt = $this->conn->prepare($query);

// sanitize
$keywords=htmlspecialchars(strip_tags($keywords));
$keywords = "%{$keywords}%";

// bind
$stmt->bindParam(1, $keywords);
$stmt->bindParam(2, $keywords);
$stmt->bindParam(3, $keywords);

// execute query
$stmt->execute();

return $stmt;
}

// read products with pagination

public function readPaging($from_record_num, $records_per_page){

// select query
$query = "SELECT
            c.name as category_name, p.id, p.name, p.description, p.price, p.category_id, p.created
        FROM
            " . $this->table_name . " p
            LEFT JOIN
                categories c
                    ON p.category_id = c.id
        ORDER BY p.created DESC
        LIMIT ?, ?";

// prepare query statement
$stmt = $this->conn->prepare( $query );

// bind variable values
$stmt->bindParam(1, $from_record_num, PDO::PARAM_INT);
$stmt->bindParam(2, $records_per_page, PDO::PARAM_INT);

// execute query
$stmt->execute();

// return values from database
return $stmt;
}

// used for paging products
public function count(){
$query = "SELECT COUNT(*) as total_rows FROM " . $this->table_name . "";

$stmt = $this->conn->prepare( $query );
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);

return $row['total_rows'];
}

}`