incorporate HTML coding in a Perl program

Anonymous Monk has asked for the wisdom of the Perl Monks concerning the following question:

I have found an HTML script which implements a dropdown list. I would like to incorporate the script into a Perl program so that I can create variables in Perl that can be interpolated in the HTML construction. I have tried using a HERE doc but the Perl coding shows up on the HTML page. Is this possible?

  

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: red;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#percent_cover">Percent Cover</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>


<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content"
+);
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>
[download]

Comment on incorporate HTML coding in a Perl program Download Code

Replies are listed 'Best First'.
Re: incorporate HTML coding in a Perl program by marto (Cardinal) on Apr 21, 2017 at 18:41 UTC
Consider using a templating system, such as HTML::Template (see Using HTML::Template from the tutorials section), or consider something more modern such as Mojolicious/Mojolicious::Lite (lots of great learning resources here.	[reply]
Re: incorporate HTML coding in a Perl program by NetWallah (Canon) on Apr 21, 2017 at 20:02 UTC
Why does my Perl CGI script showing up as plain text in the browser? http://stackoverflow.com/questions/14792978/perl-apache-perl-script-displayed-as-plain-text and many other useful links show up on a google search. ...Disinformation is not as good as datinformation. Don't document the program; program the document.	[reply]
Re: incorporate HTML coding in a Perl program (updated) by haukex (Archbishop) on Apr 21, 2017 at 18:59 UTC
I have tried using a HERE doc but the Perl coding shows up on the HTML page. If I'm understanding this correctly, then note that you can't just stick Perl code into an HTML file. You need to write a Perl script that outputs HTML, and the web server needs to support executing that Perl script, and you need to set it up properly for the Perl script to be executed. Depending on your web hosting provider this can often be easy, but sometimes requires a few steps. I recommend you look at whatever documentation your web hosting provider has for information on running CGI scripts, or if you can't find enough information, contact their support. There are also resources like the CGI Programming Tutorials on this site. Update: Hmm, re-reading your question, maybe what you have instead looks something like this? `#!/usr/bin/perl use warnings; use strict; use CGI; # ... perl code ... print <<END_HERE_DOC; <select name="blah"> # ... perl code in here doc ... </select> END_HERE_DOC # ... perl code ...` [download] If so, then you probably just need to get a hang of interpolating things correctly, and Corion's advice applies: show us your code (How do I post a question effectively?), reduced down to as little as possible to reproduce the problem (Short, Self-Contained, Correct Example), and also consider using something like Template::Toolkit.	[reply] [d/l]
Re: incorporate HTML coding in a Perl program by Corion (Patriarch) on Apr 21, 2017 at 18:36 UTC
This is very possible. You haven't shown us the relevant Perl code, so I can only give relatively general advice. The best approach is to use one of the many templating systems and keep your HTML in a file separate from your Perl code. See for example Template::Toolkit	[reply]