Как открыть базу данных в браузере

Обновлено: 07.07.2024

Чего мне всегда не хватало, так это аналога JSFiddle для SQLite. Онлайн-песочницы, в которой можно быстро проверить SQL-запрос и поделиться с другими.

Вот чего хотелось:

Возможность загрузить готовую базу, а не писать SQL для создания таблиц.

Подключать как локальные базы, так и удаленные (по url).

Сохранять базу и запросы в облаке.

Бесплатно и без регистрации.

Свежайшая версия SQLite.

В итоге сделал такую песочницу сам.

Реляционная база данных в браузере

Сначала покажу результат, потом расскажу, как все устроено:

SQLite в браузере

Абсолютно во всех браузерах — что мобильных, что десктопных — уже встроена отличная СУБД, которая реализует стандарт SQL-92 (и большой кусок более поздних стандартов) — SQLite. Логично было бы дать к ней доступ через API браузера.

В конце нулевых многие браузерные вендоры так думали. Тогда появился стандарт Web SQL, который поддержали Apple (Safari), Google (Chrome) и Opera (еще популярная тогда). А Mozilla (Firefox) — нет. В результате в 2010 Web SQL убили, и дальше хранение данных в браузере пошло по NoSQL-пути (Indexed Database, Cache API).

В 2019 году в проекте sql.js Офир Ложкин скомпилировал исходники SQLite в WebAssembly («родной» бинарный формат для браузера). Это полноценная СУБД SQLite, которая работает в браузере (благо, она небольшая — бинарник занимает 300+ Кб).

sql.js — идеальный движок для онлайн-песочницы. Его я и взял.

Загрузка базы из файла

Загрузка базы по URL

Загружаем файл с помощью fetch() , начитываем ответ в ArrayBuffer , а дальше как с обычным файлом:

Запросы к базе

Пожалуй, самая простая часть — sql.js предоставляет удобное API для запросов:

Экспорт базы в SQL-скрипт

Бинарный контент базы получить несложно — sql.js предоставляет отдельный метод:

Но мне хотелось сохранять не бинарник, а полный SQL, который создает схему и заполняет таблицы данными. Так результат можно посмотреть глазами и загрузить в PostgreSQL или другую СУБД.

Для экспорта базы в SQL я воспользовался алгоритмом питонячей утилиты sqlite-dump. Код довольно объемный, поэтому не буду приводить здесь (если интересно, подробности в dumper.js). Вкратце:

Получаем список таблиц из системной таблицы sqlite_schema , формируем запросы create table.

Для каждой таблицы получаем список столбцов из виртуальной таблицы table_info(name) .

Выбираем данные из каждой таблицы и формируем запросы insert into.

Получается вполне читаемый скрипт:

Сохранение в облаке

Базу и запросы нужно где-то хранить, чтобы можно было поделиться ссылкой на заполненную песочницу. Меньше всего хотелось пилить бекенд с авторизацией и хранилищем — пришлось бы сделать сервис платным, да и для людей лишняя головная боль с регистрацией.

К счастью, есть GitHub Gist API, который идеально подходит по всем критериям:

разрешен CORS (можно делать запросы с других доменов);

приятный интерфейс пользователя;

бесплатный и надежный.

Интеграция через обычный fetch() : GET на выборку гиста, POST на сохранение.

От пользователя требуется только указать гитхабовский API-токен. Удобно, что токену можно дать разрешение исключительно на работу с гистами — сделать что-то плохое в репозиториях по такому токену заведомо не получится.

Пользовательский интерфейс

Современные фронтенд-проекты переполнены тулингом и инфраструктурными штуками, а мне это совсем не интересно (я не js-разработчик). Поэтому сознательно не стал использовать UI-фреймворки и сделал все на ванильном html + css + js. Кажется, для небольшого проекта это вполне допустимо.

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

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

Хостится песочница на GitHub Pages, а деплой сводится к обычному git push . Поскольку этапа сборки нет, не пришлось даже настраивать GitHub Actions.

Резюме

Буду рад, если SQLite-песочница вам пригодится. Или, возможно, кому-то окажется полезен сам подход к созданию бессерверных проектов на JS + GitHub API. За конструктивную критику тоже буду благодарен, конечно ツ

Если интересно, как использовать SQLite на полную — подписывайтесь на канал @sqliter

От автора: опять заплутали, и не знаете, как зайти в MySQL? Не вы первый! Собирайте всех заблудившихся, и сейчас отправимся прямиком в гости к ней. К кому «к ней»? К самой популярной СУБД всемирной паутины!

Где в Денвере находится MySQL

Имеется в виду не столица штата Колорадо в США, а пакет программ для создания и тестирования приложений на PHP. В состав набора для «джентльменов» входит локальный сервер Apache, MySQL сервер и оболочка phpMyAdmin. Именно с помощью данного программного пакета чаще всего «новички» познают все тонкости работы с этой системой управления БД.

Перед тем, как зайти в MySQL через браузер, нужно запустить локальный сервер, затем в адресной строке набрать localhost, и в появившемся окне «Ура, заработало!» в разделе утилиты выберите phpMyAdmin.

После нажатия на ссылку перейдете в интерфейс этой оболочки для работы с СУБД. Или можно сразу в адресной строке браузера указать путь к ней: //localhost/Tools/phpmyadmin/index.php

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

После чего окажетесь там-же (в phpMyAdmin).

Проходим к базам данных через «лабиринт»

Мы с вами отправимся в «дремучий» лес, и постараемся через него «пробраться» к серверу баз. Не подумайте, что мы от кого-то прячемся, просто сейчас мы будем действовать, как настоящие веб-разработчики. Поехали!

Перед тем, как зайти в MySQL через командную строку, следует выяснить, где находится главная директория сервера баз данных. Если вы используете СУБД в «чистом» виде без «примесей» (вне «джентльменского» набора), то корневая папка сервера расположена здесь: C:\Program Files\MySQL\MySQL Server 5.5\bin\mysql.exe

Если вы используете Денвер, то искомый фал находится по этому пути: Z:\usr\local\mysql-5.5\bin\mysql.exe,

где Z – это виртуальный диск, который создается после запуска локального веб-сервера. У вас он может быть под другим именем (точнее, буквой).

Нас интересует именно файл mysql.exe. Запустим его на выполнение, указав имя сервера баз данных, пароль и пользователя, под которым зайдем в MySQL.

Как включить MySQL через командную строку: заходим в «Пуск», среди стандартных программ выбираем «Командная строка». Запускаем утилиту, и с этого момента опишем всю процедуру «хождения» в дремучем лесу пошагово, чтобы вся группа «заблудившихся» не потерялась еще раз Стартуем:

В черное окно CMD (командной строки) вводим путь, где хранится исполняемый файл MySQL, а рядом указываем имя пользователя СУБД и пароль. Так как у нас локальный сервер, то мы вводим после идентификатора u имя пользователя root без пароля.

На самом деле это неправильно, и для каждого пользователя сервера MySQL должен быть установлен пароль. Более подробно все вопросы безопасности СУБД мы рассмотрим в одной из наших следующей публикации.

Вот весь кусок «кода»: Z:\usr\local\mysql-5.5\bin\mysql.exe -u root

Если все прошло успешно, то ниже в окне командной строки должна появиться информация о версии запущенного сервиса, год выпуска и другая «ненужная» для нас информация.

Теперь, чтобы проверить правильность подключения, введем после оператора mysql> запрос, который отобразит все базы данных хранящиеся на сервере. Код запроса:

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

Я расскажу, как подключиться к удаленной базе данных MySQL, какие существуют способы, а также опишу некоторые типичные ошибки.

Подключение через панель управления TimeWeb

Чтобы подключиться удаленно к MySQL, необходимо для начала открыть сайт хостинга и авторизоваться в личном кабинете. В панели управления следует выбрать раздел «Базы данных MySQL», через него и будем проводить операции. В новом открывшемся окне находим ссылку «Добавить доступ» напротив того сервера, к которому планируется подключиться. Для разрешения доступа к подсети /24 меняем последний актет IP-адреса на знак %.

При установлении соединения используем имя сервера или его IP-адрес. Данная информация доступна на главной странице в разделе «Информация о сервере». Порт указываем 3306, имя пользователя будет тем же, что и название базы данных. Вводим пароль и устанавливаем соединение.

phpMyAdmin

phpMyAdmin – программное средство, предоставляющее веб-интерфейс для работы с сервером MySQL. Подключиться к базе можно, открыв раздел «Базы данных MySQL» в панели управления хостингом. Находим на странице ссылку «phpMyAdmin» и жмем по ней для подключения. Если она недоступна, значит, пользователем был превышен лимит доступных БД. Увеличить его можно сменой тарифа.

Соединение через SSH туннель

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

Подключение в Windows

В данной ОС соединение по SSH протоколу можно осуществить с помощью специальных программ для управления базами данных. Например, PuTTY (бесплатная программа) или SecureCRT (платное ПО, но с пробной версией на 30 дней).

Мы для работы выбрали PuTTY. Скачиваем установщик с официального сайта и устанавливаем приложение . Запускаем программу, затем переходим в раздел «Session». В поле «Host Name» вводим свой домен или указываем его IP-адрес.

Далее переходим в категорию «Connection», открываем вкладку «SSH», затем «Tunnels». В поле «Source Port» указываем значение 3306, в «Destination» вбиваем localhost:3306, потом жмем на кнопку «Add» для добавления порта в список. И только потом жмем кнопку «Open» для установления соединения с хостом.

Логин и пароль те же самые, которые используются для входа в панель управления. При подключении используем имя пользователя и пароль, выданные при создании базы данных. Адрес сервера - 127.0.0.1, порт для подключения 3306.

Предупреждаем, что если вы уже устанавливали сервер баз данных MySQL на своем компьютере, то соединение через порт 3306 будет недоступно. Надо будет указать другое значение, например 3307.

Подключение в Linux

В ОС Linux никакого дополнительного ПО устанавливать не придется, можно все провести через командную строку «Терминал». Перед тем как подключиться к MySQL удаленно, нужно создать SSH-туннель. Вводим вот такую команду:

Потом в конфигурационном файле MySQL потребуется изменить параметр, отвечающий за удаленное подключение. Открываем в «Терминале» файл, дав вот такую команду:

Далее комментируем нужную нам строку. В итоге она должна выглядеть вот таким образом:

Сохраняем изменения, потом перезапускаем MySQL вот такой командой:

Далее будет запрошен пароль для входа в панель управления хостингом, вводим его. Для подключения к удаленному серверу MySQL необходимо создать пользователя, и делается это вот такой командой:

Так мы создадим пользователя с неограниченным доступом ко всем базам на указанном сервере. Потом проверяем подключение утилитой telnet. Если сервер запрос не отклонил, значит, пора приступать к подключению. Для этого можно задать команды вот таких типов:

Как проверить соединение с базой данных MySQL

Для проверки подключения к базе данных MySQL во всех ОС используем утилиту telnet. Нужно просто открыть командную строку и набрать в ней вот такую команду:

Если соединение установится, то настройка туннеля прошла успешно, можно приступать к подключению. Если нет, рекомендуем тщательно проверить все настройки.

Распространенные проблемы и ошибки при подключении к MySQL

Как подключиться к MySQL удаленно, если возникают какие-то ошибки? Трудности обычно возникают при наличии запрещающих правил. Проверить, существуют ли такие, можно вот таким запросом:

Если таковые обнаружатся, добавим разрешающее правило. Для этого надо ввести соответствующую команду, она должна выглядеть примерно вот так:

Есть еще возможность открыть доступ для определенного IP-адреса, и это куда более безопасный способ. Для этого потребуется ввести такой запрос:

Если же появляется ошибка типа «Client does not support autentification protocol request by server; consider upgrading MySQL client» , это значит, что установленный клиент не поддерживает требуемый сервером протокол.

Ошибка «1045 невозможно подключиться к серверу MySQL» возникает при попытке подключиться удаленно к базам данных через phpMyAdmin. Причиной тому может быть неправильно введенный логин или же отсутствие пароля у пользователя или его неправильная смена.

Заключение

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

Существует 4 способа подключения к базе данных MySql:

Способ 1 — Через PhpMyAdmin

Далее выбираем нужную базу данных и нажимаем «Перейти».

Еще 2 способа подключения к PhpMyAdmin на странице Как перейти в PhpMyAdmin.

Способ 2 — Через консоль

Для подключения к базе данных MySql через консоль, нужно набрать следующую команду:

mysql -hYou_Server -uUser_Name -pPassword

You_Server — хост с MySql, обычно это IP сервера. Если подключаемся с локального сервера, параметр можно опустить.
User_Name — имя пользователя MySql.
Password — пароль MySql.

Если вы все сделали правильно, должно быть так:

Способ 3 — Подключение с помощью PHP

Для подключения к базе данных через PHP, нужно выполнить следующий код:

<?php
$conn = mysqli_connect('localhost', 'admin', 'pass', 'db');
if (!$conn) die('Ошибка: невозможно подключиться: ' . mysqli_error());
>

echo 'Подключились к базе.<br>';

$result = mysqli_query($conn, 'SELECT id FROM table limit 1');

где, функция mysql_connect состоит из:

localhost — имя хостинга;
admin — имя пользователя (для входа в MySql);
pass — пароль (для входа в MySql);
db — имя базы данных, к которой подключаемся.
Функция mysql_query — нужна для выбора вашего запроса к базе данных. Где table пишем название таблицы, limit 1 указываем количество строк. В представленном примере выбираем столбец ID из базы данных книг (Ставим ID, если данный параметр указан в таблице).
Функция mysql_fetch_row — нужна для извлечения строк из SQL-запроса, который мы только что создали.
Функция mysql_close — нужна для того, чтобы закрыть соединение.

Способ 4 — Подключение к базе данных удаленно

Для того чтобы подключиться к базе данных MySql удаленно, нужно выполнить следующие действия:

С помощью панели управления хостингом, в разделе «Главное» заходим в «Базы Данных».

Далее выбираете нужную базу данных и нажимаете «Пользователи».

Затем выбираем нужного пользователя (в данном случае он один) и нажимаем «Изменить».

Ставим галочку напротив графы «Удаленный доступ» и нажимаем «Ок».
Также нужно обратиться в поддержку хостинга и сообщить ip адрес, с которого будут происходить подключения к бд, иначе данная настройка работать не будет.

Готово! Теперь вы сможете подключаться к базе данных удаленно (чтобы подключиться удаленно через PHP, смотрите предыдущий способ, представленный выше).

Читайте также: