article

Monday, January 31, 2022

AngularJS Select add Options with PHP MySQLi

AngularJS Select add Options with PHP MySQLi

Bootstrap 4.0 Version
https://getbootstrap.com/docs/4.0/getting-started/introduction/
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

angularjs CDN
https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `productname` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `products` (`id`, `productname`) VALUES
(1, 'Ipad'),
(2, 'Iphone'),
(3, 'Macbook'),
(4, 'Mac'),
(5, 'Dell Inspiron 15'),
(6, 'Mac Mini');

ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//index.html
<!DOCTYPE html>
<html lang="en" ng-app="appselect">
<head>
<meta charset="utf-8">
<title>AngularJS Select add Options with PHP MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="selectController" ng-init="fetch()">
<div class="container">
    <h1 class="page-header text-center">AngularJS Select add Options with PHP MySQLi</h1>
    <div class="row">
        <div class="col-md-6">
            <h3>Add new Product</h3>
            <input type="text" placeholder="Product Name" class="form-control" ng-model="newProduct.productname"><br>
            <button type="button" class="btn btn-primary" ng-click="add()"> Save</button>
        </div>
        <div class="col-md-6">
            <h3>Select Product</h3>
            <select ng-model="selectedproduct" ng-options="x.productname for x in products" class="form-control">
            </select>
            <hr>
            <p><b>You selected:</b> {{selectedproduct.productname}}</p>
            <p><b>ID:</b> {{selectedproduct.id}}</p>
        </div>
    </div>
     
    <div class="row">
        <h3>Product Table</h3>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Product ID</th>
                    <th>Product Name</th>
                <tr>
            </thead>
            <tbody>
                <tr ng-repeat="rs in products">
                    <td>{{ rs.id }}</td>
                    <td>{{ rs.productname }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="angular.js"></script>
</body>
</html>
angular.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//angular.js
var app = angular.module('appselect', []);
app.controller('selectController', function($scope, $http){
    $scope.fetch = function(){
        $http({
            method: 'GET',
            url: 'fetch.php',
        }).then(function (data){
            console.log(data)
            $scope.products = data.data; 
        },function (error){
            console.log(error, 'can not get data.');
        });
    }
 
    $scope.add = function(){
        console.log($scope.newProduct);
        $http({
            method: 'POST',
            url: 'add.php',
            data: $scope.newProduct
        }).then(function (data){
            console.log(data)
            $scope.newProduct = '';
            $scope.fetch();
        },function (error){
            console.log(error, 'can not get data.');
        });
    }
});
fetch.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
//fetch.php
<?php
    $conn = new mysqli('localhost', 'root', '', 'testingdb');
     
    $output = array();
    $sql = "SELECT * FROM products";
    $query=$conn->query($sql);
    while($row=$query->fetch_array()){
        $output[] = $row;
    }
 
    echo json_encode($output);
?>
add.php
?
1
2
3
4
5
6
7
8
9
10
11
12
//add.php
<?php
    $conn = new mysqli('localhost', 'root', '', 'testingdb');
     
    $data = json_decode(file_get_contents("php://input"));
 
    $productname = $data->productname;
 
    $sql = "INSERT INTO products (productname) VALUES ('$productname')";
    $conn->query($sql);
     
?>

Posted by ednalan at 6:51 PM . Under .

Related Post