Untitled

Файл index.php:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
    </script>
    <link href="https://fonts.googleapis.com/css?
    family=Lato:700i|Song+Myung" rel="stylesheet">
    <?php
    require "db.php";
    require_once "functions/functions.php";
    $blocks = getBlocks(3, $id);//по сути нам на данной странице оба
    аргумента не нужны, написано чтобы не было ошибки, нужно для другого

    if(isset($_POST["add_skill_btn"])) {
    if(trim($_POST["skill_name"]) == '') {
    echo "Wrong skill";
    } else {
    $skill_name = htmlspecialchars($_POST["skill_name"]);
    $skill = R::dispense('skills');//фреймворк Red Bean php создаёт таблицу
    $skill->name = $_POST["skill_name"];
    R::store($skill);//фреймворк Red Bean php сохраняет таблицу
    }
    }
    ?>
    <script>
    $(document).ready(function () {
    $('#first').on('click', function() {
    $('#goals').hide();
    $('#skills').toggle(200);
    });
    $('#second').on('click', function() {
    $('#skills').hide();
    $('#goals').toggle(200);
    });
    });
    </script>
    </head>
    <body>
    <div id="aside">
    <div id="first">
    <h2 class="titles">Skills</h2>
    </div>
    <div id="second">
    <h2 class="titles">Goals</h2>
    </div>
    </div>

    <div id="skills">
    <form method="post" name="skill_form">
    <button type="submit" id="add_skill_btn"
    name="add_skill_btn">ADDSKILL</button>
    <input type="text" id="add_skill_input" name="skill_name" placeholder="
    New skill?">
    </form>

    <div id="kill_zone"><!--рабочая область-где все блоки со скиллами-->

    <?php
    for ($i = 0; $i < count($blocks); $i++) {

    echo '<a href="#">
    <div class="skill_block">
    <h2>'.$blocks[$i]["name"].'</h2>
    </div>
    </a>';
    }
    ?>
    </div>

    </div>

    <div id="goals">
    <div><h2>Here is another text</h2></div>
    </div>

    </body>
    </html>

    Файл style.css:

    body {
    margin: 0px;
    background-color: #002338;
    }

    a {
    text-decoration: none;
    }

    #aside{
    height: 729px;
    width: 15%;
    float: left;
    background-color: rgba(18,18,18,0.92);
    }

    #first {
    text-align: center;
    box-shadow: 0px 2px 16px 17px rgba(74,51,50,1);
    margin: 40px auto;
    height: 120px;
    width: 150px;
    background-color: #57110a;
    }

    #second {
    text-align: center;
    box-shadow: 0px 2px 16px 17px rgba(96,99,24,1);
    margin: 100px auto;
    height: 120px;
    width: 150px;
    background-color: #57531c;
    }

    .titles {
    padding-top: 45px;
    font-family: 'Ubuntu', sans-serif;
    }

    #skills {
    width:85%;
    height: 729px;
    float: right;
    background-color: #002338;
    display: none;
    }

    #goals {
    width:85%;
    height: 729px;
    float: right;
    background-color: #002338;
    display: none;
    }

    #add_skill_btn {
    margin: 15px;
    float: right;
    width: 75px;
    height: 65px;
    border: 1px solid #868686;
    border-radius: 5px;
    background-color: #02acc8;
    box-shadow: inset 0px 0px 27px 10px rgba(50, 50, 50, 0.59);
    font-weight: 700;
    font-size: 1.2em;
    color: #303231;
    }

    #add_skill_input {
    margin: 20px -5px;
    float: right;
    height: 50px;
    width: 150px;
    border: 1px solid #868686;
    border-radius: 5px;
    background-color: #02acc8;
    box-shadow: inset 0px 0px 27px 10px rgba(50, 50, 50, 0.59);
    font-size: 1.3em;
    font-weight: 800;
    letter-spacing: 2px;
    }
    input::-webkit-input-placeholder {
    color: #4f5150;
    }

    #kill_zone {
    width: 85%;
    margin-left: 5%;
    margin-right: 5%;
    height: auto;
    margin-top: 150px;
    }

    .skill_block {
    width: 216px;
    height: 170px;
    background-color: bisque;
    border: 10px solid #ADA7A7;
    border-radius: 15px;
    box-shadow: inset 0px 0px 25px 9px #ADA7A7;
    text-align: center;
    box-sizing: border-box;
    float: left;
    margin-left: 90px;
    margin-top: 50px;
    }

    .skill_block h2 {
    font-weight: normal;
    font-size: 2em;
    font-family: 'Song Myung', serif;
    color: rgba(18,18,18,0.92);
    margin-top: 50px;
    }

    Файл functions.php :
    <?php
    require_once "connect.php";

    function getBlocks ($limit, $id) {
    global $mysqli;
    connectDB();

    $result = $mysqli->query("SELECT * FROM `skills` ORDER BY `id` ASC");
    closeDB();

    if(!$id)
    return resultToArray($result);
    else
    return $result->fetch_assoc();
    }

    function resultToArray ($result) {
    $array = array();
    while (($row = $result->fetch_assoc()) != false)
    $array[] = $row;
    return $array;
    }

    Файл db.php:
    <?php
    require "libs/rb-mysql.php";
    R::setup('mysql:host=localhost;dbname=General_project','root', '' );