Пишем простой сайт заметок на PHP.

Есть много книг по PHP, SQL, HTML и т.д. Но читать их так скучно. Намного интересней изучать Web разработку сразу на примерах. В этой статье мы напишем достаточно простой сайт на PHP. Что то типа заметок или списка дел. Для хранения данных будем использовать SQL. Немного познакомиться с стилями CSS.

Подготовка.

Первое что вам потребуется : локальный веб-сервер , база данных и какой нибудь редактор кода (что бы упростить процес написания). Под винду я использовал связку MAMP и Visual Studio Code. MAMP — это бесплатная локальная серверная среда, которая может быть установлена под macOS и Windows всего за несколько кликов.

Если вы будете использовать MAMP домашняя папка проекта будет C:\MAMP\htdocs . Заменим файл index.html на стандартную рыбу и сразу сделаем расширение php ( index.php ). В VS Code можно быстро сделать рыбу командой html:5 . Так же создадим папки css, img, js. На этом с приготовления закончили , каркас проекта сделали.

Давайте подключим файл стилей :

<link rel="stylesheet" href="css/style.css">

А так будем использовать готовый набор с bootstrapcdn.com :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Создаем форму ввода :

<div class="container">
        <h1> Список дел </h1>
        #Создаем форму, метод отправки данных POST в add.php
        <form action="/add.php" method="post">
             # Поле ввода
            <input class="form-control" type="text" name="list" id ="list" placeholder="Введите текст заметки...">
             # Кнопка
            <button class="btn btn-danger" type="submit" name="send"> Добавить </button>
        </form>
    </div>

Добавим наши стили в файл style. Сейчас везде популярна темная тема, чем мы хуже :

# Зададим для тега Body цвет бэкграунда
body {background-color: #1c1c1c!important }

.container {
    margin-top: 50px;
    width: 50%!important;
}
# Для формы: цвет бэкграунда,цвет обводки, толщина и т.д
form {
    background: #232324;
    border: 3px solid #363636;
    border-radius: 10px;
    padding: 20px 10px;
}
#list --> id="list"
#list {
    width: 60%;
    float: left; # Обтекание по правому краю
    margin-right: 5%; # Отступ справа 
}
# Цвет заголовка
h1 {
    color: #d9d9d9;
} 

База данных, php и т.д.

Пора нам создать базу данных где мы будем хранить наши заметки. Я воспользовался phpMyAdmin , назовем базу скажем mytime . Так же нам нужно создать таблицу mydata с двумя полями : id — где мы будем указывать уникальный номер записи, data — где будет хранится сама запись.

Начиная с версии 5.1 в PHP существует удобный способ работы с базами данных — PHP Data Objects. Этот класс, сокращенно именуемый PDO. Будем пользоваться им для работы с базой данных. Создадим файл confdb.php где будем совершать подключение к базе.

<?php
$db = 'mysql:host=localhost;dbname=mytime'; # Задаем адрес и имя базы данных
$pdo = new PDO($db, 'root', 'root'); # Подключаемся
?>

Создаем файл add.php где будем добавлять заметки из форы :

<?php
$data = $_POST['list']; # Получаем данные за POST запроса
if ($data == '') {
    header('Location: /'); # Перенаправляем на главную страницу
}

require 'confdb.php' # Подключаем файл базы данных

$sql = 'INSERT INTO mydata(data) VALUES(:data)'; # Создаем запрос SQL
$query = $pdo->prepare($sql); # Подготавливаем к отправке
$query->execute(['data' => $data]); # Отправляем запрос подставляя значение переменной

header('Location: /');
?>

Значение id мы не передаем, у нас оно само вырастает при каждом добавлении в поле data. Теперь на главную станицу добавим отображение данных из базы.

</form>
        <?php
            require 'confdb.php';
            echo '<ul>';
            # Получаем данные из таблицы
            $query = $pdo->query('SELECT * FROM `mydata`');
            # В цикле выводим только поле data в список.
            while($tmp = $query->fetch(PDO::FETCH_OBJ)) {
                echo '<li><b>'.$tmp->data.'</b></li>';
            }
            echo '</ul>';
            ?>  

Удаление записей, немного красоты в списках.

Последний штрих, добавим кнопку удаления записи и создадим скрип самого удаления. Начнем с кнопки :

echo '<li><b>'.$tmp->data.'</b><a href="del.php?id='.$tmp->id.'"><button class="btn btn-danger"> Удалить</button></a></li>';

То есть кнопка по факту будет ссылкой которая отправляет GET запрос в del.php с id записи. Давайте создадим файл del.php :

<?php
require 'confdb.php';

$id = $_GET['id'];
$sql = 'DELETE FROM `mydata` WHERE `id` = ?';
$query = $pdo->prepare($sql);
$query->execute([$id]);

header('Location: /');

Ну а теперь немного украсим наш список и кнопку удаления :

ul {
    padding: 0 10px;
}
ul li {
    padding: 10px 10px;
    list-style: none;
    margin-bottom: 10px;
    margin-top: 10px;
    border: 1px solid silver;
    border-radius: 5px;
    color: #d9d9d9;
    background: #232324;
}