Save Molecule from JSME to Server

Q

How to save molecules created in JSME editor to the Web server?

✍: FYIcenter.com

A

If you want to save the molecule structure created in the JSME editor to the backend Web server, you need write JavaScript code to extract the molecule data and send it as HTML form parameters.

1. Create a new HTML document, save-molecule.html, to present the JSME editor and the form:

<html>
<!-- save-molecule.html Copyright (c) FYIcenter.com. All rights reserved. -->
<head>
<title>Create and Save Molecule</title>
<script type="text/javascript" src="jsme/jsme.nocache.js"></script>
<script>
  function jsmeOnLoad() {
    jsmeObj = new JSApplet.JSME("jsme_container", "380px", "340px");
  }
  function convert() {
    var smiles = jsmeObj.smiles(); 
    var sdf = jsmeObj.molFile(); 
    var svg = jsmeObj.getMolecularAreaGraphicsString(); 
    document.getElementsByName("smiles")[0].value = smiles;
    document.getElementsByName("sdf")[0].value = sdf;
    document.getElementsByName("svg")[0].value = svg;
  }
</script>
</head>
<body>

<p>Create a molecule in the editor:</p>
<div id="jsme_container"></div>

<p><button type="button" onclick="convert()">
  Convert the molecule to text formats:</button>
</p>

<form action="save-molecule.php" method="post">
  SMILES:<br/>
  <input type="text" name="smiles" value="" size="62"/><br/>
  Mol/SDF:<br/>
  <textarea name="sdf" rows="10" cols="60"></textarea><br/>
  SVG:<br/>
  <textarea name="svg" rows="10" cols="60"></textarea><br/>
  <input type="submit" value="Save"/>
</form>

</body>
</html>

2. Create PHP script, save-molecule.php, to process data submitted from the form.

<html>
<!-- save-molecule.php Copyright (c) FYIcenter.com. All rights reserved. -->
<head>
<title>Molecule Data Received</title>
</head>
<body>
<p>Here is the molecule data recevied on the server: 
</p>
<pre>
<?php 
  $smiles = $_REQUEST["smiles"]; 
  $sdf = $_REQUEST["sdf"];
  $svg = $_REQUEST["svg"];
  
  echo("\nSMILES:\n$smiles\n");
  echo("\nSDF:\n$sdf\n");
  echo("\nSVG:\n$svg\n");
?>
</pee>
</body>
</html>

3. Copy both save-molecule.html and save-molecule.php to the Web server:

fyicenter$ sudo cp save-molecule.* /var/www/html/jsme 

4. Test JSME editor page on the Apache Web server by opening "http://localhost/jsme/save-molecule.html" URL in a Web browser.

5. Select the "benzene ring" icon from the JSME editor menu and click a location inside the editor. You see a benzene ring molecule created.

6. Click "Convert" button below the editor. You see molecule's SMILES string, Mol/SDF and SVG representations populated in the form.

7. Click "Save" button below the form. You see molecule's SMILES string, Mol/SDF and SVG representations received on the server and echoed back to the browser.

Save Molecule from JSME to Server
Save Molecule from JSME to Server

 

JSME Molecule Editor Options

What Is JSME JavaScript API

JSME JavaScript API

⇑⇑ JSME FAQ

2020-05-18, 350👍, 0💬