AngularJS gyakorlás

Szerző: Sallai András
Copyright © Sallai András, 2021
Licenc: GNU Free Documentation License 1.3
Web: https://szit.hu

Háromszög területe

Háromszög területnek számítása alapból és magasságból.

<!DOCTYPE html>
<html lang="hu"ng-app="alkalmazas">
<head>
    <meta charset="utf-8">
    <title>Háromszög</title>
    <script src="lib/angular.js"></script>
    <script src="script.js"></script>
</head>
<body ng-controller="alkalmazasCtrl">
    <h1>Háromszögterület</h1>    
 
    <label>Alap</label>
    <input type="text" ng-model="alap"><br>
    <label>Magasság</label>
    <input type="text" ng-model="magassag"><br>
    <button ng-click="szamit($event)">Számít</button><br>
    <label>Terület</label>
    <input type="text" ng-model="terulet">
 
</body>
</html>

script.js

var alkalmazas = angular.module("alkalmazas", []);
alkalmazas.controller("alkalmazasCtrl", function($scope){
   $scope.szamit = function(evt) {
       var alap = Number($scope.alap);
       var magassag = Number($scope.magassag);
       var terulet = alap*magassag/2;
       console.log(terulet);
       $scope.terulet = terulet;
   }
});

Todo

Tömb lekérése

index.html

<!DOCTYPE html>
<html lang="hu" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>Todo</title>
 
</head>
<body ng-controller="appCtrl">
    <h1>Todo</h1>
 
    <ul>
        <li ng-repeat="todo in todos">
            {{todo}}
        </li>
    </ul>
 
    <script src="lib/angular.js"></script>
    <script src="script.js"></script>
 
</body>
</html>

script.js

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $http){
    getTodos($scope, $http);
});
 
var getTodos = function($scope, $http) {
    $http.post('php/kuld.php')
    .then(function(response){
        $scope.todos = response.data;
    });
}

kuld.php

<?php
 
echo '["első", "második", "harmadik"]';

Objektum tömbben

Dolgozó lekérése

index.html

<!DOCTYPE html>
<html lang="hu" ng-app="app">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body ng-controller="appCtrl">
    <h1>Dolgozók</h1>
 
    <table>
        <tr ng-repeat="dolgozo in dolgozok">
            <td>{{dolgozo.nev}}</td>
            <td>{{dolgozo.telepules}}</td>
            <td>{{dolgozo.fizetes}}</td>
        </tr>
    </table>
 
    <script src="lib/angular.js"></script>
    <script src="script.js"></script>
 
</body>
</html>

script.js

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $http) {
   lekerDolgozok($scope, $http); 
});
 
var lekerDolgozok = function($scope, $http) {
    $http.post('php/kuld.php')
    .then(function(response){
        $scope.dolgozok = response.data;
    });
}

kuld.php

<?php
 
echo <<<EOT
[
    {
        "nev" : "Nagy János",
        "telepules" : "Szolnok",
        "fizetes" : "8540000"
    },
    {
        "nev" : "Pete Mária",
        "telepules" : "Szeged",
        "fizetes" : "7540000"
    },
    {
        "nev" : "Random Katalin",
        "telepules" : "Szolnok",
        "fizetes" : "8440000"
    }
]
 
EOT;

bDolgozok

A dolgozók adatbázisból töltődnek automatikusan. Egy dolgozó hozzáadható az adatbázishoz.

src/
 |-lib/angular.js
 |-php/
 |  |-includes/
 |  |   |-config.php
 |  |   |-database.php
 |  |   `-mariadb.php
 |  |-hozzaad.php
 |  `-kuld.php
 |-index.html
 `-script.js

HTML és CSS

index.html

<!DOCTYPE html>
<html lang="hu" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>bDolgozók</title>
    <link rel="stylesheet" href="style.css">
</head>
<body ng-controller="appCtrl">
    <div id="container">
        <h1>Dolgozók</h1>
        <table>
            <tr>
                <td>Név</td>
                <td>Település</td>
                <td>Fizetés</td>
            </tr>
            <tr>
                <td><input type="text" ng-model="nev"></td>
                <td><input type="text" ng-model="telepules"></td>
                <td><input type="text" ng-model="fizetes"></td>
            </tr>
        </table>
        <button ng-click="hozzaadDolgozo()">Hozzáad</button>
        <table id="dolgozok">
            <tr ng-repeat="dolgozo in dolgozok">
                <td>{{dolgozo.nev}}</td>
                <td>{{dolgozo.telepules}}</td>
                <td>{{dolgozo.fizetes}}</td>
            </tr>
        </table>
    </div>
 
    <script src="lib/angular.js"></script>
    <script src="script.js"></script>
 
</body>
</html>

style.css

#container {
    margin: 5%;
    padding: 15px;
    background-color: orange;
}
 
input {
    width: 70px;
}
 
table#dolgozok {
    border-collapse: collapse;
}
 
table#dolgozok, table#dolgozok td {
    margin-top: 5px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

JavaScript

script.js

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $http) {
   lekerDolgozok($scope, $http);
   $scope.hozzaadDolgozo = function(evt) {
       var nev = $scope.nev;
       var telepules = $scope.telepules;
       var fizetes = $scope.fizetes;
       var dolgozo = {
        nev: nev, 
        telepules: telepules, 
        fizetes: fizetes
        };
       $scope.dolgozok.push(dolgozo);       
       hozzaadDolgozo($scope, $http, dolgozo);
   }
});
 
var lekerDolgozok = function($scope, $http) {
    $http.post('php/kuld.php')
    .then(function(response){
        $scope.dolgozok = response.data;
    });
}
 
var hozzaadDolgozo = function($scope, $http, dolgozo) {
    $http.post('php/hozzaad.php', {
        data: dolgozo
    })
    .then(function(response){
        console.log(response.data);
    });
}

PHP

php/kuld.php

<?php
 
include 'includes/database.php';
 
echo json_encode(lekerDolgozok());

php/hozzaad.php

<?php
 
include 'includes/database.php';
 
$json_data = file_get_contents('php://input');
$data = json_decode($json_data);
$dolgozo = $data->data;
 
echo hozzaadDolgozo($dolgozo);

php/includes/database.php

<?php
 
include 'mariadb.php';
 
function lekerDolgozok() {
    $conn = connectDb();
    $sql = <<<EOT
    select * from dolgozok
EOT;
 
    $res = mysqli_query($conn, $sql);
    $data_r = array();
    while($row = mysqli_fetch_assoc($res)) {
        array_push($data_r, $row);
    }
    closeDb($conn);
    return $data_r;
}
 
function hozzaadDolgozo($dolgozo) {
    $conn = connectDb();
    if(!$conn) {
        error_log('Nincs kapcsolat');
    }
    $sql = <<<EOT
    insert into dolgozok
    (nev, telepules, fizetes)
    values
    (?, ?, ?)
EOT;
 
    $beszurasOk = false;
    if($stmt = mysqli_prepare($conn, $sql)) {
        mysqli_stmt_bind_param($stmt, "ssd", 
            $dolgozo->nev, 
            $dolgozo->telepules,
            $dolgozo->fizetes
            );
        mysqli_stmt_execute($stmt);
        error_log(mysqli_stmt_error($stmt));
        mysqli_stmt_close($stmt);
        $beszurasOk = true;
    }else {
        error_log('Hiba a beszúrás során!');
    }
    closeDb($conn);
    return $beszurasOk;
}

php/includes/mariadb.php

<?php
include 'config.php';
 
function connectDb() {
    global $db;
    $conn = mysqli_connect(
        $db['host'], 
        $db['user'], 
        $db['pass'],
        $db['name']
        );
    if(!$conn) {
        die('Hiba! A kapcsolódás sikertelen!');
    }
    return $conn;
}
 
function closeDb($conn) {
    mysqli_close($conn);
}

php/includes/config.php

<?php
 
$db['host'] = 'localhost';
$db['user'] = 'bdolgozok';
$db['pass'] = 'titok';
$db['name'] = 'bdolgozok';