Справочник телефонов на web-сервере.

---

31.07.2019

Всех приветствую. И так сегодня 11 июня 2019 года, и я начинаю проект онлайн телефонного справочника в своей организации. Давно эта идея витала в виде идеи, но я не решался её воплотить потому что не хватало знаний. Ну их всё еще конечно не хватает и приобретать буду по мере выполнения поставленной задачи. Суть в том, что я заведую телефонным справочником у себя в организации, и данный момент он существует в виде Excel файла. Это очень непрактично в плане мультидоступности как я бы сказал. Гораздо интереснее и безопаснее для самого контента если это будет web страница. В общем план такой – поднять виртуальную машину, на которой будет web сервер и база MySQL. Будет доступна главная Index страница для всех пользователей, а также дополнительная страница для администратора (edit.php), то есть меня, которая позволит вводить новые данные и редактировать уже существующие. Проект честно говоря для меня серьёзный, потому что придётся научится через PHP рулить базой MySQL, но будем пробовать узнавать новое вместе.

Начинаем мы с того что устанавливаем Ubuntu Server 18.04.2 на виртуальную машину. Задачи у сервера крайне скромные и поэтому ресурсов даём по минимуму:

CPU: одно ядро
RAM: 1024MB
Диск: 25GB
Как всегда, начинаем с того что обновим систему:
sudo apt update && sudo apt upgrade

Что будем ставить:
Web server: «Nginx»
СУБД: «MariaDB»
Управление БД: «phpMyAdmin»
FTP server: «vsftp»


Установим Nginx:
Добавим необходимые репозитории, где содержаться последние версии пакетов:
sudo su
add-apt-repository ppa:ondrej/php
add-apt-repository ppa:nginx/stable
apt update
apt install nginx -y
apt install php7.2-cli php7.2-fpm php7.2-curl php7.2-gd php7.2-mysql php7.2-mbstring zip unzip -y
Сделаем резерв конфиг файла nginx сайта по умолчанию:
mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.dist
Создадим свой:
nano /etc/nginx/sites-available/default

Вот с таким содержимым

server {
 listen 80;
 root /var/www/default;
 index index.php index.html index.htm;
 server_name example.com www.example.com;
 location / {
     try_files $uri $uri/ /index.html;
 }
 error_page 404 /404.html;
 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
    root /usr/share/nginx/www;
 }
 location ~ .php$ {
     try_files $uri =404;
     fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
     fastcgi_index index.php;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     include fastcgi_params;
     }
}

Напоминаю работу с редактором "nano":
CTRL+O – сохранить.
Затем CTRL+X – выход.

Далее создадим каталог сайта, который указали в конфиге выше, и в нём index.php.

mkdir /var/www/default
nano /var/www/default/index.php
Содержимое файла пока оставим пустое.

Ну а далее ставим MariaDB. Это собственно и есть MySQL в современной обвёртке. Казалось бы, а зачем вообще база данных для справочника телефонов организации, меня тут спросили. А дело в том, что нам надо реализовать занесение данных, которые будут отображаться на «php» странице, и это можно сделать через базу данных, за одно и изучить команды MySQL.

Установка MariaDB:
Добавляем репозиторий:
sudo apt-key adv --recv-keys --keyserver hkp://keyserver.ubuntu.com:80 0xF1656F24C74CD1D8
sudo add-apt-repository 'deb [arch=amd64,arm64,ppc64el] http://mirror.timeweb.ru/mariadb/repo/10.3/ubuntu bionic main'
Обновим данные:
apt update

Установка:
apt install mariadb-server mariadb-client -y
Во время установки нужно будет задать пароль для пользователя root, для доступа к БД.
Перезапускаем mysql:
/etc/init.d/mysql restart
и пробуем подключиться:
mysql -u root -p
жмём CTRL+D для выхода.

Хорошо мы установили обработчик баз данных. Теперь установим замечательный инструмент для управления этими базами данных – «phpMyAdmin». Переходим на сайт и копируем ссылку загрузки с кнопки:

Далее переходим в каталог куда хотим скачать архив:
cd /tmp
затем даём команду wget и подставляем ей адрес ссылки, скопированный из кнопки:
wget https://files.phpmyadmin.net/phpMyAdmin/4.9.0.1/phpMyAdmin-4.9.0.1-all-languages.zip
затем распакуем:
unzip phpMyAdmin-*.zip
Создадим каталог, в который нужно бюджет переместить содержимое архива:
mkdir /var/www/default/phpmyadmin
mv phpMyAdmin-4.9.0.1-all-languages/* /var/www/default/phpmyadmin/
Далее скопируем пример конфига phpMyAdmin и отредактируем его:
cp /var/www/default/phpmyadmin/config.sample.inc.php /var/www/default/phpmyadmin/config.inc.php
nano /var/www/default/phpmyadmin/config.inc.php
Тут нужно задать значение для параметра $cfg['blowfish_secret'].
Значением должен быть случайный набор симоволов, например:
$cfg['blowfish_secret'] = 'ldkflkaf88fa99sdjkdjlasflafkk33939rfklkaf034rnnkvkk';
CTRL+O – сохранить.
Затем CTRL+X – выход.

Сделаем пользователя и группу «www-data» владельцем файлов и папок:

chown -R www-data:www-data /var/www

Перезапускаем nginx и php-fpm:

/etc/init.d/nginx restart
/etc/init.d/php7.2-fpm restart

Теперь если у вас есть уже заготовленный сайт, самое время его скопировать в «/var/www/default/».
Для заливки файлов в каталог «/var/www/default/» лучше использовать FTP.

Поднимем FTP сервер:

Ставим vsftp и db-util.
sudo su
apt install vsftpd db5.3-util -y
Создадим папку и файл с нужными логинами и паролями, а также сразу зададим правильные разрешения на файл:
mkdir /etc/vsftpd
touch /etc/vsftpd/vsftpdusers
chmod 0600 /etc/vsftpd/vsftpdusers

Отредактируем файл, тут первая строчка – имя пользователя, вторая – пароль, дальше по аналогии можно добавить несколько пользователей – сперва имя, ниже пароль.

nano /etc/vsftpd/vsftpdusers

Содержимое

ftpuser
321

Захешируем наш файл и отредактируем разрешения на полученный:

db5.3_load -T -t hash -f /etc/vsftpd/vsftpdusers /etc/vsftpd/users.db
chmod 0600 /etc/vsftpd/users.db

Теперь сделаем резерв конфига vsftpd и создадим новый с таким же названием:

mv /etc/vsftpd.conf /etc/vsftpd.conf.dist
nano /etc/vsftpd.conf

Содержимое должно быть следующим:

Содержимое

listen=YES
anonymous_enable=NO
local_enable=YES
xferlog_enable=YES
user_sub_token=$USER
local_root=/var/www/
chroot_local_user=YES
hide_ids=YES
guest_enable=YES
guest_username=www-data
virtual_use_local_privs=YES
write_enable=YES
pasv_enable=YES
# Тут указываем реальный глобальный IP адрес если нужно
#pasv_address=4.3.2.1
pasv_max_port=20200
pasv_min_port=20400
pam_service_name=vsftpd.virtual
rsa_cert_file=/etc/ssl/certs/ssl-cert-snakeoil.pem
rsa_private_key_file=/etc/ssl/private/ssl-cert-snakeoil.key
ssl_enable=NO
connect_from_port_20=YES
xferlog_file=/var/log/vsftpd.log
xferlog_std_format=YES
idle_session_timeout=600
data_connection_timeout=120
ascii_upload_enable=YES
ascii_download_enable=YES
allow_writeable_chroot=YES
seccomp_sandbox=NO
local_umask=022

Обращаем внимание на:
local_root=/var/www/ - коревая папка, куда будут попадать пользователя, после подключения к серверу.
guest_username=www-data – имя реального пользователя, который будет виден системе, от его имени будут происходить все операции с файлами.
#pasv_address=1.2.3.4 – если у вас сервер за NAT, то тут нужно указать реальный, внешний адрес.

И остался последний шаг – создадим конфиг для pam.d, что бы наши виртуальные пользователи могли подключаться:
nano /etc/pam.d/vsftpd.virtual

Содержимое файла должно быть таким:

auth required pam_userdb.so db=/etc/vsftpd/users
account required pam_userdb.so db=/etc/vsftpd/users
session required pam_loginuid.so

Перезапускаем vsftpd, и можно пробовать подключаться.
/etc/init.d/vsftpd restart

Ну а далее, если вы всё-таки поднимаете сайт с ноля, то консоль сервера можно пока отложить. Как это сделать я ещё не знаю, но будем разбираться вместе.

И так, верстка странички:
В качестве основы будем использовать фреймворк mdbootstrap.com
Заходим на сайт и качаем «MDB-Free_4.8.2.zip»
Содержимое этого архива и есть заготовка сайта:
Я переименовал каталог в «telphp» и переместил из загрузок в рабочий каталог.

В моём случае – справочник — это таблица с шапкой в виде логотипа компании, ну и конечно нужно сделать чтобы при печати на бумагу всё было красиво.

Создадим базу данных:

Переходим на IP адрес сервера – <АДРЕС СЕРВЕРА>/phpmyadmin/
Авторизуемся через root и пароль который указали при установке MariaDB.


Жмём создать БД:

Создаём базу с именем «tel» c сопоставлением кодировки «utf8_general_ci» и далее создаём таблицу «teltable» с 11ю столбцами (у нас по задумке 10 столбцов в справочнике плюс одно поле для индекса):

Жмём вперёд и прописываем параметры для полей таблицы:


Жмём сохранить и наблюдаем готовую таблицу:

Может кто-то спросить, а зачем делать тип «VARCHAR» там, где только цифры, а потому что база не принимала 10и значное число номера мобильного телефона как число. И тип «binary» для текста пришлось применить чтобы сортировка по команде «order by» была корректная. Нам главное передать символы в переменную.

Теперь самое время поработать с «php» страницами:
Весь список «php» файлов в моём случае получился такой:


Вот так выглядит содержимое файла «index.php»

Вот так выглядит содержимое файла «edit.php»

Вот так выглядит содержимое файла «add.php»
add.php – это код обработки запроса на добавление данных в базу данных.

Вот так выглядит содержимое файла «configDB.php»
configDB.php – это код, в котором мы прописываем авторизацию для подключения к БД.

Вот так выглядит содержимое файла «ordbyfirma.php»
ordbyfirma.php - это страничка, которая отображает справочник с упорядочиванием по алфавиту столбца «подразделение».

А это модифицированный «edit.php» в который добавлена возможность удалить запись, посредством кода из «delete.php».

Вот так выглядит содержимое файла «delete.php».

Вот и готов справочник. Далее делаем всем ярлык с ссылкой на страничку и не забываем всем сказать что заголовки таблицы кликабельны.

При работе были использованы материалы из данных источников:
Как настроить веб сервер на Ubuntu 18.04 - www.mytechnote.ru
Изучение PHP PDO (базы данных) за час! Создание приложения «Список дел» - Канал Гоша Дударь