Inhaltsverzeichnis

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. Der Code zum Anzeigen der IDE sieht dann beispielhaft so aus: 

!DOCTYPE html>
<html>
 
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Embedded-Test</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
 
    <link rel="preload" href="lib/monaco-editor/dev/vs/editor/editor.main.js" as="script">
    <link rel="preload" href="lib/monaco-editor/dev/vs/editor/editor.main.nls.de.js" as="script">
 
    <link rel='stylesheet' type='text/css' media='screen' href='assets/fonts/fonts.css'>
    <link rel='stylesheet' type='text/css' media='screen' href='css/editor.css'>
    <link rel='stylesheet' type='text/css' media='screen' href='css/bottomdiv.css'>
    <link rel='stylesheet' type='text/css' media='screen' href='css/run.css'>
    <link rel='stylesheet' type='text/css' media='screen' href='css/icons.css'>
    <link rel='stylesheet' type='text/css' media='screen' href='css/databaseExplorer.css'>
    <link rel='stylesheet' type='text/css' media='screen' href='css/embedded.css'>
    <script src="lib/jquery/jquery-3.3.1.js"></script>
    <script src="lib/pako/pako.js"></script>
    <script src="lib/zip.js/zip.min.js"></script>
    <script src="lib/markdownit/markdownit.min.js"></script>
    <script src="lib/monaco-editor/dev/vs/loader.js"></script>
 
    <script type="module" src="js/embedded/EmbeddedStarter.js"></script>
 
    <script>window.javaOnlineDir = "";</script>
 
</head>
 
<body>
    <h1>Erstes Beispiel</h1>
 
    <div class="sql-online" style="width: calc(100% - 10px); height: 600px; margin-left: 5px" data-sql-online="{
        'id': 'abcd',
        'databaseURL': '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>

So sieht die Embedded-IDE dann aus: