Integration in eigene Webseiten

A. Integration in ein <iframe>-Tag

Die einfachste Art und weise, um die Embedded SQL-IDE in eigene Webseiten einzubinden, besteht darin, ein <iframe>-Tag zu verwenden:

<iframe srcdoc="<script>window.jo_doc = window.frameElement.textContent;</script><script src='https://embed.learn-sql.de/include/js/includeide/includeIDE.js'></script>" width="100%" height="300" frameborder="0">
{  'id': 'abcd',
   'databaseURL': 'https:embed.learn-sql.de/include/assets/databases/world1.sqLite' }
<script type="plain/text" title="Programm.sql">
select * from fluss;
</script>
</iframe>
</html>

Das funktioniert auch dann, wenn die Programmdateien auf einem anderen Server liegen als die Seite, in der die Embedded SQL-IDE angezeigt wird (insbesondere also in Moodle- oder Mebis-Kursen). Einen Generator für den Wrapper-Code sowie alle Dateien, die Sie fürs Selbst-Hosten benötigen, finden Sie auf dieser Seite.

Falls Sie einen eigenen Server besitzen, auf dem Sie Dateien zum Download ablegen können, möchte ich Sie bitten, nicht die Adresse https://embed.learn-sql.de zu verwenden, die im obigen Skript zu sehen ist, sondern die Dateien selbst zu hosten, da die Bandbreite meines Servers begrenzt ist. Alle dazu notwendigen Dateien finden Sie auf dieser Seite.

B. Integration ohne <iframe>-Tag

Die Integration ohne <iframe>-Tag ist performanter, da sie die Datenbankoperationen in einen Webworker verlagern kann. Sie funktioniert aber nur dann, wenn die Programmdateien (Downloadquelle ebenfalls hier) von derselben Domain abrufbar sind wie die Webseite, in der die Embedded SQL-IDE angezeigt werden soll.

In folgenden Beispiel liegen die Programmdateien relativ zur html-Datei im Verzeichnis sql-ide. Dies wird der sql-ide durch Setzen der Variable window.javaOnlineDir mitgeteilt. Das Attribut databaseURL muss nur gesetzt werden, wenn beim Start der sql-ide-Kästen eine SQLite-Datenbank vorab geladen werden soll.

<!DOCTYPE html>
<html>
 
<head>
    <meta charset='utf-8'>
    <title>Embedded-Test</title>
 
    <link rel="preload" href="sql-ide/lib/monaco-editor/dev/vs/editor/editor.main.js" as="script">
    <link rel="preload" href="sql-ide/lib/monaco-editor/dev/vs/editor/editor.main.nls.de.js" as="script">
 
    <link rel='stylesheet' type='text/css' media='screen' href='sql-ide/assets/fonts/fonts.css'>
    <script src="sql-ide/lib/jquery/jquery-3.3.1.js"></script>
    <script src="sql-ide/lib/pako/pako.js"></script>
    <script src="sql-ide/lib/zip.js/zip.min.js"></script>
    <script src="sql-ide/lib/markdownit/markdownit.min.js"></script>
    <script src="sql-ide/lib/monaco-editor/dev/vs/loader.js"></script>
 
    <!-- Falls sich die Programmdateien relativ zur Html-Datei in einem Unterverzeichnis befinden: -->
    <script>window.javaOnlineDir = "sql-ide/";</script>
 
  <script type="module" crossorigin src="sql-ide/sql-ide-embedded.js"></script>
  <link rel="stylesheet" href="sql-ide/sql-ide-embedded.css">
</head>
 
<body>
    <h1>Erstes Beispiel</h1>
 
    <div class="sql-online" style="width: calc(100% - 10px); height: 300px; margin-left: 5px" data-sql-online="{
        'id': 'abcd',
        'databaseURL': 'sql-ide/assets/databases/world1.sqLite'
    }">
        <script type="text/plain" title="Test1.sql" data-type="sql">
select * from fluss;
select land.Name, kontinent.Name from land, kontinent
where land.KNR = kontinent.KNR
        </script>
    </div>
 
</body>
 
</html>

Inhaltsverzeichnis

Integration in eigene Webseiten

A. Integration in ein <iframe>-Tag

B. Integration ohne <iframe>-Tag

So sieht die Embedded-IDE dann aus: