Как развернуть веб-сайт HTML5 на сервере LAMP в Ubuntu

В двух предыдущих статьях этой серии мы объяснили, как настроить Netbeans в дистрибутиве Linux для настольных компьютеров в качестве IDE для разработки веб-приложений. Затем мы добавили два основных компонента: jQuery и Bootstrap, чтобы сделать ваши страницы мобильными и адаптивными.

Как создать базовый проект HTML5 в Ubuntu с использованием Netbeans — часть 1
Как написать мобильное приложение с использованием JQuery и Bootstrap — часть 2

Поскольку вы, как разработчик, редко будете иметь дело со статическим контентом, теперь мы добавим динамические функции к базовой странице, которую мы настроили в Части 2. Для начала давайте перечислим предпосылки и рассмотрим их, прежде чем двигаться дальше.

Предварительные условия

Чтобы протестировать динамическое приложение на нашей машине разработки перед его развертыванием на сервере LAMP, нам необходимо установить несколько пакетов.

Поскольку для написания этой серии мы используем рабочий стол Ubuntu, мы предполагаем, что ваша учетная запись пользователя уже добавлена в файл sudoers и ей предоставлены необходимые разрешения.

Установка пакетов и настройка доступа к серверу БД

Обратите внимание, что во время установки вам может быть предложено ввести пароль для пользователя root MySQL. Убедитесь, что вы выбрали надежный пароль, а затем продолжайте.

Ubuntu и производные (также для других дистрибутивов на основе Debian):

sudo apt update && sudo apt install apache2 php php-common php-mysql mysql-server filezilla

Fedora/CentOS/RHEL, а также для других дистрибутивов на основе RHEL):

sudo yum update && sudo yum install httpd php php-common php-mysql mysql-server filezilla

После завершения установки настоятельно рекомендуется запустить команду mysql_secure_installation, чтобы защитить сервер базы данных.

sudo mysql_secure_installation

Вам будет предложено ввести следующую информацию:

Изменить пароль root? [Да/нет]. Если вы уже установили пароль для пользователя root MySQL, вы можете пропустить этот шаг.
Удалить анонимных пользователей? [Да/нет] да.
Запретить удаленный вход в систему root? [Да/нет] y (Поскольку это ваша локальная среда разработки, вам не нужно будет удаленно подключаться к серверу БД).
Удалить тестовую базу данных и доступ к ней? [Да/нет] да
Обновить таблицы привилегий сейчас? [Да/нет] да.

Создание образца базы данных и загрузка тестовых данных

Чтобы создать образец базы данных и загрузить тестовые данные, войдите на сервер БД:

sudo mysql -u root -p

Вам будет предложено ввести пароль для пользователя root MySQL.

В командной строке MySQL введите

CREATE DATABASE tecmint_db;

и нажмите Ввод:

Теперь создадим таблицу:

USE tecmint_db;
CREATE TABLE articles_tbl(
   Id INT NOT NULL AUTO_INCREMENT,
   Title VARCHAR(100) NOT NULL,
   Author VARCHAR(40) NOT NULL,
   SubmissionDate TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY ( Id )
);

и заполните его примерами данных:

INSERT INTO articles_tbl (Title, Author) VALUES ('Installing Filezilla in CentOS 7', 'Gabriel Canepa'), ('How to set up a LAMP server in Debian', 'Dave Null'), ('Enabling EPEL repository in CentOS 6', 'John Doe');

Добавление символических ссылок в каталог веб-сервера

Поскольку Netbeans по умолчанию сохраняет проекты в домашнем каталоге текущего пользователя, вам потребуется добавить символические ссылки, указывающие на это место. Например,

sudo ln -s /home/ubuntu/NetBeansProjects/TecmintTest/public_html /var/www/html/TecmintTest

добавит программную ссылку под названием TecmintTest, указывающую на /home/gabriel/NetBeansProjects/TecmintTest/public_html.

По этой причине, когда вы направите свой браузер на http://localhost/TecmintTest/, вы фактически увидите приложение, которое мы настроили в Части 2:

Настройка удаленного FTP и веб-сервера

Поскольку вы можете легко настроить FTP и Веб-сервер, следуя инструкциям, приведенным в Части 9 «Установка и настройка безопасного FTP и веб-сервера серии RHCSA в Tecmint», мы не повторяйте их здесь. Пожалуйста, обратитесь к этому руководству, прежде чем продолжить.

Превращаем наше приложение в динамическое

Вы, вероятно, подумаете, что мы мало что можем сделать с образцами данных, которые мы добавили в нашу базу данных ранее, и вы правы, но этого будет достаточно, чтобы изучить основы встраивания PHP-кода и результаты запросов к БД MySQL. на ваших страницах HTML5.

Прежде всего нам нужно будет изменить расширение основного документа нашего приложения на .php вместо html:

mv /var/www/html/TecmintTest/index.html /var/www/html/TecmintTest/index.php

Затем давайте откроем проект в Netbeans и начнем вносить некоторые изменения.

1. Добавьте в проект папку с именем includes, в которой мы будем хранить серверные приложения PHP.

2. Создайте файл с именем dbconnection.php внутри includes и вставьте в него следующий код:

<?php
    $host = "localhost";
    $username = "root";
    $password = "MyFancyP4ssw0rd";
    $database = "tecmint_db";

    //Establish a connection with MySQL server
    $mysqli = new mysqli($host, $username, $password,$database);

    /* Check connection status. Exit in case of errors. */
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    $mysqli -> query("SET character_set_results = 'utf8', character_set_client = 'utf8', character_set_connection = 'utf8', character_set_database = 'utf8', character_set_server = 'utf8'");

    $records = array();
    $query = "SELECT Title, Author, SubmissionDate FROM articles_tbl;";
    $result = $mysqli->query($query) or die($mysqli->error);
    $data = array();

    while ( $row = $result->fetch_assoc() ){
        $data[] = json_encode($row);
    }
    echo json_encode( $data );
?>

как показано на следующем изображении:

Этот файл будет использоваться для подключения к серверу базы данных, выполнения запроса и возврата результатов этого запроса в виде строки в формате JSON, которая будет использоваться клиентским приложением с небольшими изменениями.

Обратите внимание, что обычно для выполнения каждой из этих операций используются отдельные файлы, но для простоты мы решили включить все эти функции в один файл.

3. В index.php добавьте следующий фрагмент сразу под открывающим тегом body. Это способ вызова внешнего приложения PHP с помощью jQuery, когда веб-документ готов, или, другими словами, каждый раз, когда он загружается:

<script>
    $(document).ready(function(){
        $.ajax({
            url: 'includes/dbconnection.php',
            datatype: 'json',
            type: 'POST',
            success: function(data){
                var output = $.parseJSON(data);
                for(var i =0;i < output.length;i++)
                {
                  var item = output[i];
                  $("#title").append("<br>"+item.Title);
                  $("#author").append("<br>"+item.Author);
                  $("#submissiondate").append("<br>"+item.SubmissionDate);
                }
            }}
        );
    });
</script>

4. Теперь добавьте уникальный идентификатор (такой же, как в цикле for выше) к каждой строке в div с row класса в начале нижняя часть index.php:

<div class="row">
    <div class="col-md-4" id="title" style="text-align: center"><strong>Titles</strong></div>
    <div class="col-md-4" id="author" style="text-align: center"><strong>Authors</strong></div>
    <div class="col-md-4" id="submissiondate" style="text-align: center"><strong>Published on:</strong></div>
</div>

Если вы теперь нажмете Запустить проект, вы увидите следующее:

По сути, это то же самое, что и информация, возвращаемая ранее, когда мы запускали запрос из командной строки клиента MySQL.

Развертывание на сервере LAMP с помощью Filezilla

Запустите Filezilla из меню Dash и введите IP удаленного FTP-сервера и свои учетные данные. Затем нажмите Быстрое подключение, чтобы подключиться к FTP-серверу:

Перейдите к /home/gabriel/NetBeansProjects/TecmintTest/public_html/, выберите его содержимое, щелкните его правой кнопкой мыши и выберите Загрузить.

Это, конечно, предполагает, что удаленный пользователь, указанный в Имя пользователя, должен иметь права на запись в удаленный каталог. Когда загрузка завершится, укажите в браузере нужное место, и вы увидите ту же страницу, что и раньше (обратите внимание, что мы не настроили локальную базу данных MySQL на удаленном хосте, но вы можете легко сделать это, выполнив действия, описанные в разделе начало этого урока).

Краткое содержание

В этой статье мы добавили динамическую функциональность в наше веб-приложение с помощью jQuery и небольшого количества JavaScript. Вы можете обратиться к официальной документации jQuery для получения дополнительной информации, которая будет очень полезна, если вы решите писать более сложные приложения. В заключение мы также развернули наше приложение на удаленном сервере LAMP с помощью FTP-клиента.

Мы рады услышать ваше мнение об этой статье – не стесняйтесь обращаться к нам, используя форму ниже.