Untitled

<?php
    $host = "localhost";
    $user = "root";
    $pass = "";
    $database_name = "simple_app";
	$dsn = "mysql:host=$host;dbname=$database_name";
    $db = new PDO($dsn, $user, $pass);

	class DB{
		public static function query($sql, $arr){
			global $db;
			$sth = $db->prepare($sql);
			if($sth->execute($arr)){
				return 1;
			}
			return 0;
		}
	}

    if ( isset($_POST['action']) ) {
        if ( $_POST['action'] == 'add' ) {
			$sql = "INSERT INTO students (second_name, first_name) VALUES (:SN, :FN)";
			$arr = array(
				":SN" => $_POST['second_name'],
				":FN" => $_POST['first_name'],
			);
			DB::query($sql, $arr);
        } elseif ( $_POST['action'] == 'delete' ) {
			$sql = "DELETE FROM students WHERE id = :ID";
			$arr = array(
				":ID" => $_POST['id']
			);
			DB::query($sql, $arr);
        } elseif ( $_POST['action'] == 'update' ) {
			$sql = "UPDATE students SET second_name = :SN, first_name = :FN WHERE id = :ID";
			$arr = array(
				":SN" => $_POST['second_name'],
				":FN" => $_POST['first_name'],
				":ID" => $_POST['id']
			);
			DB::query($sql, $arr);
        }
    }
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Список учеников</title>

    <style type="text/css">
        .wrapper{
            width: 800px;
            margin: 0 auto;
        }
		table {
		width: 100%;
		border: 2px solid #cccccc;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-khtml-border-radius: 3px;
		border-collapse: collapse;
	   }
	   th {
		text-align: center;
		background: #cccccc;
		padding: 5px;
		border: 1px solid #cccccc;
	   }
	   td {
		text-align: center;
		padding: 5px;
		border: 1px solid #cccccc;
	   }
	   .update_form{
		display: none;
	   }
	   input[type="text"] {
			margin:5px;
		   border: 1px solid #cccccc;
		   border-radius: 3px;
		   -webkit-border-radius: 3px;
		   -moz-border-radius: 3px;
		   -khtml-border-radius: 3px;
		   background: #ffffff !important;
		   outline: none;
		   height: 30px;
		   width: 240px;
		   color: rgb(0, 0, 0);
		   padding: 2px;
		   font-size: 14px;
		   transition:.4s;
		}
		input[type="text"]:focus {
		  color: #000000;
		  border: 1px solid #000000;
		  transition:.4s;
		}
		input[type="submit"], input[type="button"]{
			margin:5px;
		   border: 1px solid #cccccc;
		   border-radius: 3px;
		   -webkit-border-radius: 3px;
		   -moz-border-radius: 3px;
		   -khtml-border-radius: 3px;
		   background: #ffffff;
		   outline: none;
		   height: 30px;
		   width: 240px;
		   color: rgb(0, 0, 0);
		   padding: 2px;
		   font-size: 14px;
		   transition:.4s;
		}
		input[type="submit"]:hover{
			background: #cccccc;
		}
		input[type="button"]:hover{
			background: #cccccc;
		}
		.update_form{
			text-align:center
			margin: 5px;

		}
		h1{
			width:100%;
			background: #cccccc;
			padding-top: 20px;
			padding-bottom: 20px;
			text-align: center;
			font-size: 24px;
			border-radius: 3px;
		   -webkit-border-radius: 3px;
		   -moz-border-radius: 3px;
		   -khtml-border-radius: 3px;
		}
    </style>
</head>
<body>
    <div class="wrapper">

        <h1>Список учащихся</h1>
        <?php
            $sql = "SELECT * FROM students WHERE 1";
            $statement = $db->query($sql);
			if($statement){
				$people = $statement->fetchAll();
			}

        ?>
        <table>
            <tr>
                <th>№ п/п</th>
                <th>Фамилия</th>
                <th>Имя</th>
                <th>Действия</th>
            </tr>
            <?php
                for ($i = 1; $i <= count($people); $i++) {
					$item = $people[$i-1];
            ?>
            <tr>
                <td><?php echo $i; ?></td>
                <td><?php echo $item['second_name']; ?></td>
                <td><?php echo $item['first_name']; ?></td>
                <td>
                    <form method="POST">
                        <input type="hidden" name="id" value="<?php echo $item['id']; ?>">
                        <input type="hidden" name="action" value="delete" />
                        <input type="submit" value="Удалить" />
                    </form>
					<input type = 'button' value = 'Изменить' class = 'show_edit'>
                </td>
            </tr>

            <tr class="update_form">
                <td colspan="4">
					<h3>Редактирование</h3>
                    <form method="POST">
                        <div>
                            Фамилия:
                            <input type="text" name="second_name" value = '<?php echo $item['second_name']; ?>'/>
                        </div>
                        <div>
                            Имя:
                            <input type="text" name="first_name" value = '<?php echo $item['first_name']; ?>'/>
                        </div>
                        <input type="hidden" name="action" value="update" />
						<input type="hidden" name="id" value="<?php echo $item['id']; ?>">
                        <input type="submit" value="Сохранить" />
						<input type="button" value="Отмена" class = 'hide_edit_block'/>
                    </form>
                </td>
            </tr>

            <?php
                }
            ?>
        </table>


        <h1>Добавление нового ученика</h1>

        <form method="POST">
            <div>
                Фамилия
                <input type="text" name="second_name"/>
            </div>
            <div>
                Имя
                <input type="text" name="first_name"/>
            </div>
            <input type="hidden" name="action" value="add"/>
            <input type="submit" value="Сохранить" />
        </form>
    </div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		jQuery(function($){
			$('.show_edit').click(function(){
				var work_with = $(this).parent().parent().next();
				if (work_with.css('display') == 'none'){
					work_with.css('display', 'inline');
				}
				else {
					work_with.css('display', 'none');
				}
			});
			$('.hide_edit_block').click(function(){
				var work_with = $(this).parent().parent().parent();
				work_with.css('display', 'none');
			});
		});
	</script>
</body>
</html>