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'];
}
}`
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent