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.

Tervek

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

bdolgozok.sql

CREATE DATABASE bdolgozok;
 
CREATE TABLE dolgozok (
    az INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    nev VARCHAR(50),
    telepules VARCHAR(50),
    fizetes DOUBLE
);
 
INSERT INTO dolgozok
(az, nev, telepules, fizetes)
VALUES
(1, 'Nagy János', 'Szolnok', 8540000),
(2, 'Pete Mária', 'Szeged', 7540000),
(3, 'Random Katalin', 'Szolnok', 8440000),
(5, 'Pente László', 'Szeged', 7560000),
(6, 'Demó János', 'Hatvan', 8950000);

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';