How to include Perl into shtml files - html

Hi I am trying to include a perl script within my shtml file. Unfortunately when I do my script doesnt seem to run but instead it just displays the content of the script.
The code I am using is as follows:
test.shtml:
<html>
<title> business home page </title>
<body>
</br>
<!--#echo var="DATE_LOCAL" -->
<br />
<!--#include virtual="hello.pl"-->
</body>
</html>
hello.pl:
#!C:/Sun/WebServer6.1/bin/https/perl/perl
print "Content-type:text/html\n\n";
print "Hello World!";
I am not sure what I am doing wrong. Incase you all wanted to know the server I am using is Sun One WebServer 6.1 (OS = Windows XP). Thanks for your responses!

The de facto standard SSI directive for executing dynamic content within an SSI page is
<!--#exec cgi="hello.pl"-->
That works with Apache mod_include and at least a few other web servers that support SSI. No idea if it will work on your platform, but give it a shot.

Try getting rid of the first print statement in your Perl program, which sets the content-type header. That's not a useful thing to do in the body of an HTML page, which is where your SSI is located.
SSI is a rather quaint technology these days, even if it is occasionally useful, so if you are serious about learning web programming then this is not an area where you should spend much time.

Related

Using SSI in HTMLs imported using c:import in jsps

I have a bunch of htmls in the webserver context (outside the application context) in the htdocs area. These htmls use SSI to call other htmls.
Here's the problem:
When I use c:import to call the main html into the jsp, the secondary htmls inside the main html don't render / are not processed.
Is there a way to get the main html to "compile" and then return to the jsp?
JSP codes:
<c:import url="<%=/folder/Header.html%>"
HTML server side logic that needs to be processed:
<!--#include virtual="/abc/xyz.html" -->
<!--#if expr='"$Category" = "someCategory"' -->
<!--#echo var="pageTitle" -->
The prototypes were given as all htmls, so everything was in the web context and all files worked fine. The issue is moving the top layer to JSP and keeping the rest of the layers as HTML. (Its a requirement)
Any solutions /thoughts/ ideas would be welcome! Thanks for your asssistance!
Wave
EDIT: Ok, I'm getting the Header.html in an iFrame because that will initiate a new HTTP request (and thus have access to the SSI logic).
<iframe id="testSSI" src ="http://somesite.com/subfolder/testssi_1.html?pageTitle=Applications" frameborder="0" width="800px" height="300"></iframe>
The parameters are sent in the URL and I've managed to extract the control parameters using js.
My query has reduced to this:
How can I access this js value "Applications" in the SSI logic? Is it possible to set is as an environment variable? That could be pulled by the SSI logic.. I realise that the Js will run after the SSI is done, but hoping someone here would be able to help.
Thanks!
Thanks, got it done.
I accessed the parameter in SSI by using the QUERY_STRING environment variable.
Example of html call:
http://somesite.com/subfolder/testssi_1.html?Applications
Example of how i retrieved the value:
<!--#set var="pageTitle" value="$QUERY_STRING" -->
<!--#if expr=" ${pageTitle} = Program " -->
do something
<!--#else -->
do something else
<!--#endif -->
The objective here:
We use a JAVA framework. But Marketing wanted content to be editable by them in a separate process.This way, they can change the content frequently with out the intervention on the jsp / java team. (Eg. change header look and feel, add new links, etc)
Hope this helps someone out later. :)
Wave
Edit: In the example above -> "Applications" will take the logic to the else section..
In addition, to send name value pairs:
http://somesite.com/subfolder/testssi_1.html?name=Applications&app=Demo
you can reference them as:
<!--#if expr=" ${QUERY_STRING} = /name=Applications/ " -->
AND
<!--#if expr=" ${QUERY_STRING} = /app=Demo/ " -->

Perl script wont run; just displays actual code in the browser

I am new to Perl and am having trouble getting my scripts to run properly. Where am I supposed to put the actual Perl scripts in order for them to run correctly? I am testing everything out on my lap top and am trying to call a script from a html page and all I get is the actual script (code) itself displayed in my web browser as opposed to the information that the code is designed to produce. Therefore, I figure I am supposed to put the Perl file somewhere else? Currently I have the Perl script and the HTML file in the same directory. Any help would be greatly appreciated! See below:
<head>
<title>Student Web Page</title>
</head>
<body>
<h1>WELCOME! You have reached Kito's Student Web Page</h1>
<br />
<p>To run the folloiwing applications, click on the appropriate line:</p>
<form ACTION="first.pl" METHOD="get">
<p>
<input TYPE="submit" VALUE="Step 5 - Perl Environment Variables">
</p>
</form>
#!c:\perl\bin\perl.exe -w
use strict;
print "Content-type: text/html\n\n";
print "<HTML><HEAD><TITLE>Environment Variables</TITLE></HEAD><BODY>";
foreach (keys %ENV) {
print "<BR><FONT COLOR=green>$_</FONT> is set to <FONT COLOR=red>$ENV{$_}</FONT>";
}
print "</BODY></HTML>";
You need to configure your webserver to execute the CGI file. How this is done depends on the webserver and operating system.
Some examples:
http://www.thesitewizard.com/archive/addcgitoapache.shtml
Under linux with apache install the mod_cgi module. Under windows with IIS install activestate perl.

Call one html file from another

I want to call one html page fron another in a div.
I tried using
<include file="NavigationTree.html" />
and
<? include("/starfix/pages/NavigationTree.html"); ?>
But it doesn't work.
Am I doing something wrong or do i need to do it some other way?
You may want to consider using Server Side Includes (SSI).
You would place your HTML snippet into a separate file, such as NavigationTree.html, and then you would simply reference it in your web pages by using:
<!--#include virtual="NavigationTree.html" -->
SSI is supported by all the popular web servers, including Apache, IIS and lighttpd.
Note that if you are using a shared host, you may have to use the .shtml, .stm, or .shtm extension for SSI to work. If you have root access to your web server, it can be easily configured to enable SSI for any extension, including html.
This is not possible in pure HTML.
The former is a notation I have never seen before, it is not HTML, maybe it works in some specific server-side templating language.
The latter is PHP. It should work but you need to bear in mind include() works with absolute paths inside the server's file system.
You should specify a relative path:
<? include("./NavigationTree.html"); // will work if it's in the same directory ?>
or an absolute one that will probably look something like this:
<? include("/path/to/your/www/dir/starfix/pages/NavigationTree.html"); ?>
(ask your admin for the absolute path to your web root)
You can maybe also do a HTTP include:
but that's unwise because it tends to be slow, and generates a second request on each page request.
You can also use SSI as outlined by #Daniel.
You could also use jQuery for this,
e.g.
<div id="yourDiv" />
<script>
$("#yourDiv").load("NameOfYourPageToReadFrom.ext #NameOfDivToReadFrom");
</script>
This puts the contents of the 'NameOfDivToReadFrom' DIV in the called file ''NameOfYourPageToReadFrom' into the loaded DIV ('yourDiv') in your current file.
Remember to add the definition to the header part of your html.
e.g.
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
You can use an iframe for that, e.g.:
<iframe width="500" height="300" frameborder="no" scrolling="no" marginheight="0" marginwidth="0"
src="http://www.example.com/page.html"></iframe>

How can I use templates to generate static web pages?

I want to add one HTML file into another.
For example: I have header.html and footer.html
Now I am trying to create aboutus.html where I want to add these two HTML files
there is no dynamic code in these file except JavaScript.
How can I do this without using any scripting language except JavaScript and CSS?
Server Side Includes (SSI) exist for this particular functionality. However, you need to have the server configured for such includes. Apache supports it. Not sure about other web servers.
or Server Side Includes (SSI), all embedding is done there on the server side...
In the case of web sites with no dynamic content but have common elements, I generate the final pages on my development machine using Perl's Template Toolkit and upload the resulting static HTML files to the server. Works beautifully.
For example:
header.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>[% title %]</title>
<link rel="stylesheet" href="/site.css" type="text/css">
<meta name="description" content="[% description %]">
<meta name="keywords" content="[% keywords.join(',') %]">
</head>
<body>
<div id="banner">
<p>Banner</p>
</div>
footer.html
<address>
Last update:
[%- USE date -%]
[%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%]
</address>
</body>
</html>
aboutus.html
[%- INCLUDE header.tt.html
title = 'About Us'
description = 'What we do, how we do it etc.'
keywords = 'rock, paper, scissors'
-%]
<h1>About us</h1>
<p>We are nice people.</p>
You can now use tpage or ttree to build your pages.
The only way to do this on the client side without javascript is to use frames or iframes. If you want to use javascript, you can use AJAX. Most javascript frameworks provide corresponding convenience methods (e.g. jQuery's load function).
Obviously there are many server side solutions, including the popular SSI extension for apache (see other posts).
I'm not entirely sure what it is you want but an entirely client side method of doing it would be to embed them with the <object> tag.
<html>
<head>
<title>About Us</title>
</head>
<body>
<object data="header.html"><!--Something to display if the object tag fails to work. Possibly an iFrame--></object>
<!--Content goes here...-->
<object data="footer.html"></object>
</body>
</html>
I do not think that this would work if either header.html or footer.html have javascript that accesses the parent document. Getting it to work the other way might be possible though.
Check out ppk's website (quirksmode.org), and go to the javascript archives,
(http://quirksmode.org/js/contents.html). He uses an ajax function he wrote called sendRequest (found at http://quirksmode.org/quirksmode.js). Since IE9+ plays nice with standards, I've simplified it some:
function sendRequest(url,callback,postData) {
var req = new XMLHttpRequest();
if (!req) return;
var method = (postData) ? "POST" : "GET";
req.open(method,url,true);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
if (postData)
req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.onreadystatechange = function () {
if (req.readyState != 4) return;
if (req.status != 200 && req.status != 304) {
// alert('HTTP error ' + req.status);
return;
}
callback(req);
}
if (req.readyState == 4) return;
req.send(postData);
}
Then use the sendRequest function by wrapping the setFooter, setHeader functions and any other content functions around it.
why not use php or any other side scripting language?
doing this with javascript will not all users allow to watch your page.
Whilst this can be done with JS in a number of ways (AJAX, iframe insertion) it would be a very bad idea not to do this within the mark-up directly or (much) better on the server side.
A page reliant on JS for it's composition will not be fully rendered on a significant proportion of user's browsers, and equally importantly will not be correctly interpreted by google et al, if they like it at all.
You can do it, but please, please, don't.
Obviously header.html and footer.html are not html files -- with full fledged headers etc. If you have just html snippets and you want to include them so you can create different pages - like aboutus.html, terms.html, you have a couple of options:
Use a framework like Rails - which allows you to use layouts and partials. [** heavy **]
Write a simple tool that will generate all the files by concat-ing the appropriate files.
I assume you are doing this to avoid duplicating header and footer content.
Another way would be using ajax to include the remote html files.
Framesets would be the way to do this without any script or serverside influences.
<frameset rows="100,*,100">
<frame name="header" src="header.html" />
<frame name="content" src="content.html" />
<frame name="footer" src="footer.html" />
</frameset>
HTML5 framesets:http://www.w3schools.com/tags/html5_frameset.asp
This is a very dated solution, most web hosts will support server side includes or you could use php to include your files
http://php.net/manual/en/function.include.php
Cheers

Common Header / Footer with static HTML

Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?
Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.
There are three ways to do what you want
Server Script
This includes something like php, asp, jsp.... But you said no to that
Server Side Includes
Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.
Client Side Include
This solutions has you calling back to the server after page has already been loaded on the client.
JQuery load() function can use for including common header and footer. Code should be like
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
You can find demo here
Since HTML does not have an "include" directive, I can think only of three workarounds
Frames
Javascript
CSS
A little comment on each of the methods.
Frames can be either standard frames or iFrames. Either way, you will have to specify a fixed height for them, so this might not be the solution you are looking for.
Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect. Off the top of my head however I can think of two ways:
Full-blown AJAX request, which requests the header/footer and then places them in the right place of the page;
<script type="text/javascript" src="header.js"> which has something like this in it: document.write('My header goes here');
Doing it via CSS would be really an abuse. CSS has the content property which allows you to insert some HTML content, although it's not really intended to be used like this. Also I'm not sure about browser support for this construct.
The simplest way to do that is using plain HTML.
You can use one of these ways:
<embed type="text/html" src="header.html">
or:
<object name="foo" type="text/html" data="header.html"></object>
You can do it with javascript, and I don't think it needs to be that fancy.
If you have a header.js file and a footer.js.
Then the contents of header.js could be something like
document.write("<div class='header'>header content</div> etc...")
Remember to escape any nested quote characters in the string you are writing.
You could then call that from your static templates with
<script type="text/javascript" src="header.js"></script>
and similarly for the footer.js.
Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.
you can do this easily using jquery. no need of php for such a simple task.
just include this once in your webpage.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>
The best solution is using a static site generator which has templating/includes support. I use Hammer for Mac, it is great. There's also Guard, a ruby gem that monitors file changes, compile sass, concatenate any files and probably does includes.
The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.
HTML frames, but it is not an ideal solution. You would essentially be accessing 3 separate HTML pages at once.
Your other option is to use AJAX I think.
You could use a task runner such as gulp or grunt.
There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html>
<html>
<body>
##include('./header.html')
##include('./main.html')
</body>
</html>
an example of a gulp task:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('html', function() {
return gulp.src(['./src/html/views/*.html'])
.pipe(fileInclude({
prefix: '##',
basepath: 'src/html'
}))
.pipe(gulp.dest('./build'));
});
You can try loading them via the client-side, like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="headerID"> <!-- your header --> </div>
<div id="pageID"> <!-- your header --> </div>
<div id="footerID"> <!-- your header --> </div>
<script>
$("#headerID").load("header.html");
$("#pageID").load("page.html");
$("#footerID").load("footer.html");
</script>
</body>
</html>
NOTE: the content will load from top to bottom and replace the content of the container you load it into.
No. Static HTML files don't change. You could potentially do this with some fancy Javascript AJAXy solution but that would be bad.
Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.
The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.