So i am using perl CGI to create a table from arrays in my perl code. i also have HTML implemented in my perl file. I have the content printing out on the browser, but its printing on top of the HTML part of the web page. I want it to be lower so it will display in the actual HTML part of the .pl file. For a better understanding i will post a screenshot of how it loads on the browser.
Here is my perl code which prints out this data..
#!/usr/bin/perl -w
use CGI qw/:standard/;
use strict;
use warnings;
use JSON qw( decode_json );
use LWP::Simple 'get';
use Data::Dumper;
print "content-type:text/html; charset=utf-8\n\n";
my #sessionArr;
my #classArr;
my #timeArr;
my #adminArr;
my #profArr;
my #descArr;
my $i = 0;
my $myURL = "leaving URL out";
my $json = get($myURL);
die "Could not get $myURL!" unless defined $json;
my $decoded_json = decode_json ($json);
my #sessionID = #{ $decoded_json->{'items'} };
foreach my $d ( #sessionID ) {
$sessionArr[$i] = $d->{"sessionID"};
$i = $i + 1;
}
$i = 0;
my #class = #{ $decoded_json->{'items'} };
foreach my $d ( #class ) {
$classArr[$i] = $d->{"classField"};
$i = $i + 1;
}
$i = 0;
my #time = #{ $decoded_json->{'items'} };
foreach my $d ( #time ) {
$timeArr[$i] = $d->{"startTimeField"};
$i = $i + 1;
}
$i = 0;
my #usrcreater = #{ $decoded_json->{'items'} };
foreach my $d ( #usrcreater ) {
$adminArr[$i] = $d->{"leader"};
$i = $i + 1;
}
$i = 0;
my #professor = #{ $decoded_json->{'items'} };
foreach my $d ( #professor ) {
$profArr[$i] = $d->{"professorField"};
$i = $i + 1;
}
$i = 0;
my #description = #{ $decoded_json->{'items'} };
foreach my $d ( #description ) {
$descArr[$i] = $d->{"descriptionField"};
$i = $i + 1;
}
$i = 0;
foreach my $p ( #description ) {
$i = $i +1;
}
foreach my $i (0..$#sessionArr) {
print "<tr>\n";
print " ";
foreach my $ra (\#sessionArr, \#classArr, \#timeArr, \#adminArr, \#profArr, \#descArr) {
print "<td>$ra->[$i]</td>\n"
}
print "<h2></tr></h2>\n";
}
print qq(<!DOCTYPE html><head></head><body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>AU Study Sessions</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="../images/favicon.png">
<script src="../js/pace.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="preloader"></div>
<! -- ******************** MASTHEAD SECTION ******************** -->
<main id="top" class="masthead" role="main">
<div class="container">
<div class="logo"> <img src="../images/aulogo2.png" alt="logo">
</div>
<h1>View Study Sessions</h1>
<table>
<-- *****This is where i want my table to be displayed -->
</table>
<br>
<br>
Add a Study Session
<!--<a href="index.html#explore" class="scrollto">
<p>SCROLL DOWN TO EXPLORE</p>
<p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
</a> -->
</div><! --/container -->
</main><! --/main -->
<! -- ******************** FOOTER SECTION ******************** -->
<div class="container" id="explore">
<div class="section-title">
<h2>With Adelphi Study Sessions Website</h2>
<h4>You will be able to do the following</h4>
</div>
<section class="row features">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_01.png" alt="analytics-icon">
<div class="caption">
<h3>View Study Groups</h3>
<p>See the most up to date study sessions taking place on our garden city campus.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_02.png" alt="analytics-icon">
<div class="caption">
<h3>Add and create new study sessions</h3>
<p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_03.png" alt="analytics-icon">
<div class="caption">
<h3>See description of session</h3>
<p>The student who creates the study session will give a short description about what the study session will cover.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_04.png" alt="analytics-icon">
<div class="caption">
<h3>Available on campus</h3>
<p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
</section><! --/section -->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/easing.js"></script>
<script src="../js/nicescroll.js"></script>
</body>);
It seems that your code first generates the markup for the table (prints it) and then the rest of the web page's HTML. If this is the case, the following may be useful.
Here is HTML for a "web page", with a table. When displayed in a browser this will show the table, along with other contents, formatted and styled in whatever way it is set up.
<!DOCTYPE html>
<!-- metadata: links, styling, etc -->
<body>
<!-- ... some HTML ... -->
<table>
<tr> <td>a</td> <td>A</td> </tr>
<tr> <td>b</td> <td>B</td> </tr>
</table>
<!-- ... more HTML ... -->
</body>
</html>
You can generate this text from Perl by doing print "<!DOCTYPE html>\n" etc, line by line.
However, this is something else
<table>
<tr> <td>a</td> <td>A</td> </tr>
<tr> <td>b</td> <td>B</td> </tr>
</table>
<!DOCTYPE html>
<!-- metadata: head, links, styling, etc -->
<body>
<!-- ... some HTML ... -->
<!-- ... more HTML ... -->
</body>
</html>
When this is thrown at the browser none of the web page styling and other elements will be applied to the table. The browser will merely show the data, a A and b B, in a puritan tabular layout -- and then the (rest of the intended) web page. (Further, in your code I don't see the <table> tags printed so I would expect a browser to show one line with a A b B.)
It seems that this is happening in your code. It first prints the table, then the actual page. So it is generating the above markup, from the second example. Change your program so that the HTML markup for the table (that the prints generate) lands among the rest of HTML, where you need to place the table.
I hope this helps. For more detail, or if this is off the mark, please show your HTML and how it's made.
Given that the question was updated with full code here is a simple fix, needing only a very small change. PLease note that this is not a comment on how to generate HTML, nor a recommendation for writing it in this way.
After the table's data is printed, the HTML for the page is generated using
print qq(<!DOCTYPE html><head></head><body>
... HTML markup goes for screenfuls ...
</body>);
You are using the qq operator, which is a generic way to form double quoted strings. It can also use delimiters other than (), so you can say qq{...} etc. Part of the table at perlop
Customary Generic Meaning Interpolates
'' q{} Literal no
"" qq{} Literal yes
`` qx{} Command yes*
qw{} Word list no
...
<<EOF here-doc yes*
* unless the delimiter is ''.
Please see the link for the full table and the rest.
So your code is practically the same as
print "<!DOCTYPE html><head></head><body>
<head>
...
</body>";
except that in this version you'd have to escape double quotes anywhere in the text. Yet another way of doing this is by using here-doc.
The qq operator interpolates variables, and includes newlines. This means that the above is really
print "<!DOCTYPE html><head></head><body>\n";
print "\n";
print "<head>\n";
# ...
print "</body>\n";
I hope that now things are clear. Your qq(...) merely sends a very long string (with newlines), your HTML text -- which is equivalent to printing each line separately. You need to insert the table generation code into this.
Here is a simple way to change your code to do that. It is not good code but it should work with least changes to what you have. Break up your qq into two. The first qq(...); prints HTML up to the table. Then print the table (move the code that prints it). Then have another qq(...); print the rest.
# Print HTML up to where the table needs to be
print qq(<!DOCTYPE html><head></head><body>
...
<h1>View Study Sessions</h1>
);
# Now generate markup for the table
print "<table>\n";
foreach my $i (0..$#sessionArr) {
# rest of table-data printing code
}
print "</table>\n";
# Now resume generating the rest of your HTML
print qq(
<br>
<br>
Add a Study Session
... rest of your HTML
</body>
);
Please note: this is not good code. It is hard to review, modify, extend, and maintain. I'd still suggest that you do this first, to promptly see how a page is generated. Then reach out and find a better way to produce HTML out of Perl code. I don't use modules for that so cannot recommend any, but there is quite a bit out there.
Here's a rewrite that uses Template Toolkit ("TT") to build the HTML page and include the data from your JSON
There are many problems with your original HTML. Tags are unbalanced, and you have head-only elements within the body. I can't guarantee that this fixes everything but I can't spot any more errors. You should be careful to keep your HTML indented so that you can more easily spot unbalanced tags. It also obviates the need to comment the closing tags
I've included a block of code that shows you how to more easily extract arrays of the same field from each of a list of hashes. The variables aren't used, so please delete that code once you've understood the lesson
The templates for Template Toolkit are normally held in separate .tt files. In this case I've used the DATA file handle as it's more in keeping with the way you wrote your original code. But bear in mind that a TT template may contain include statements that refer to other separate files. For instance you could put your footer section in an external file and then [% INCLUDE footer.tt %] in your main template. But that is for the future
Note that Template Toolkit allows you to access Perl data structures directly. Anything that the template needs to use must be passed in the second parameter of the process methods call. In this case I have passed { json => $decoded_json } so that TT can now use the json identifier to refer to the hash that you have downloaded. Within the template, json.items is now the array of data (accessible as json.items.0, json.items.1 etc.) and here I have written [% FOREACH item IN json.items %] which declares a new TT variable item and assigns it to each element of the items array in turn
I hope all of that is clear
#!/usr/bin/perl
use utf8;
use strict;
use warnings 'all';
use CGI qw/:standard/;
use JSON qw( decode_json );
use LWP;
use Template;
use Data::Dumper;
use constant JSON_URL => 'http://example.com/json';
### This code uses a literal JSON data item. The live code should
### fetch the real data from the JSON_URL. The code to do this
### is here but has been commented out
=comment
my $json = do {
my $ua = LWP::UserAgent->new;
my $resp = $ua->get(JSON_URL);
unless ( $resp->is_success ) {
die sprintf "Could not retrieve JSON data: %s", $resp->status_line;
}
$resp->decoded_content;
};
=cut
my $json = <<END;
{
"items": [
{
"sessionID": "session1",
"classField": "class1",
"startTimeField": "start1",
"leader": "leader1",
"professorField": "prof1",
"descriptionField": "desc1"
},
{
"sessionID": "session2",
"classField": "class2",
"startTimeField": "start2",
"leader": "leader2",
"professorField": "prof2",
"descriptionField": "desc2"
}
]
}
END
my $decoded_json = decode_json($json);
### Note that these variables are unused. This is just an example
### of a better way to extract a list of values from an array of hashes
### Please remove this code before deploying
my $items = $decoded_json->{items};
my #sessionArr = map { $_->{sessionID} } #$items;
my #classArr = map { $_->{classField} } #$items;
my #timeArr = map { $_->{startTimeField} } #$items;
my #adminArr = map { $_->{leader} } #$items;
my #profArr = map { $_->{professorField} } #$items;
my #descArr = map { $_->{descriptionField} } #$items;
### All that needs to be done its to use CGI to print the HTTP
### header and invoke Template Toolkit to build an HTML page that
### includes the data from the JSON hash
print CGI->header(
-type => 'text/html',
-charset => 'utf-8',
);
my $tt = Template->new;
$tt->process(\*DATA, { json => $decoded_json } );
__DATA__
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>AU Study Sessions</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="../images/favicon.png">
<script src="../js/pace.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="preloader"></div>
<!-- ******************** MASTHEAD SECTION ******************* -->
<main id="top" class="masthead" role="main">
<div class="container">
<div class="logo">
<img src="../images/aulogo2.png" alt="logo">
</div>
<h1>View Study Sessions</h1>);
<table>
[% FOREACH item IN json.items %]
<tr>
<td>[% item.sessionID %]</td>
<td>[% item.classField %]</td>
<td>[% item.startTimeField %]</td>
<td>[% item.leader %]</td>
<td>[% item.professorField %]</td>
<td>[% item.descriptionField %]</td>
</tr>
[% END %]
<br/>
<br/>
Add a Study Session
<!--
<a href="index.html#explore" class="scrollto">
<p>SCROLL DOWN TO EXPLORE</p>
<p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
</a>
-->
</div> <!-- class="container" -->
</main>
<!-- ******************** FOOTER SECTION ******************** -->
<div class="container" id="explore">
<div class="section-title">
<h2>With Adelphi Study Sessions Website</h2>
<h4>You will be able to do the following</h4>
</div>
<section class="row features">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_01.png" alt="analytics-icon">
<div class="caption">
<h3>View Study Groups</h3>
<p>See the most up to date study sessions taking place on our garden city campus.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_02.png" alt="analytics-icon">
<div class="caption">
<h3>Add and create new study sessions</h3>
<p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_03.png" alt="analytics-icon">
<div class="caption">
<h3>See description of session</h3>
<p>The student who creates the study session will give a short description about what the study session will cover.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_04.png" alt="analytics-icon">
<div class="caption">
<h3>Available on campus</h3>
<p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
</div>
</div>
</div>
</section>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/easing.js"></script>
<script src="../js/nicescroll.js"></script>
</div> <!-- class="container" id="explore" -->
</body>
</html>
output
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>AU Study Sessions</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="../images/favicon.png">
<script src="../js/pace.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="preloader"></div>
<!-- ******************** MASTHEAD SECTION ******************* -->
<main id="top" class="masthead" role="main">
<div class="container">
<div class="logo">
<img src="../images/aulogo2.png" alt="logo">
</div>
<h1>View Study Sessions</h1>);
<table>
<tr>
<td>session1</td>
<td>class1</td>
<td>start1</td>
<td>leader1</td>
<td>prof1</td>
<td>desc1</td>
</tr>
<tr>
<td>session2</td>
<td>class2</td>
<td>start2</td>
<td>leader2</td>
<td>prof2</td>
<td>desc2</td>
</tr>
<br/>
<br/>
Add a Study Session
<!--<a href="index.html#explore" class="scrollto">
<p>SCROLL DOWN TO EXPLORE</p>
<p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
</a> -->
</div>
</main>
<!-- ******************** FOOTER SECTION ******************** -->
<div class="container" id="explore">
<div class="section-title">
<h2>With Adelphi Study Sessions Website</h2>
<h4>You will be able to do the following</h4>
</div>
<section class="row features">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_01.png" alt="analytics-icon">
<div class="caption">
<h3>View Study Groups</h3>
<p>See the most up to date study sessions taking place on our garden city campus.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_02.png" alt="analytics-icon">
<div class="caption">
<h3>Add and create new study sessions</h3>
<p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_03.png" alt="analytics-icon">
<div class="caption">
<h3>See description of session</h3>
<p>The student who creates the study session will give a short description about what the study session will cover.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../images/service_04.png" alt="analytics-icon">
<div class="caption">
<h3>Available on campus</h3>
<p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
</div>
</div><! --/thumbnail -->
</div><! --/col-sm-6-->
</section><! --/section -->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/easing.js"></script>
<script src="../js/nicescroll.js"></script>
</body>
</html>
There's a big problem with your sequencing of the HTML output that I'm sure you could see if you ran your program from the command line
The first thing your code does is send the HTTP header with
print "content-type:text/html; charset=utf-8\n\n";
That should be okay
Then you fetch some JSON data from the internet and decode it. That data must be an array of hashes, which you unpack into six separate arrays. That's unnecessary but it does no harm, and I can understand you choosing to do it that way if you're unfamiliar with Perl references
Right after that your loop starting with this line
foreach my $i (0..$#sessionArr) {
prints a number of <tr> elements, each with six <td> items whose contents come from your six arrays
That's the first thing your CGI code is sending back to the client after the Content-Type HTTP header. No <html> or <body> or even <table>. That's a bit wrong, but even so your browser does its best and displays the information with the missing elements defaulted
Then you send the document type declaration and the rest of the page, where you have put
and below here is just html
---this section is where im trying to get the data to display
which is really as important as the rest of the Perl code, and what I asked to see
Your Perl program will send the text in the order you print it. It won't know to insert your <tr> elements inside the appropriate <table>. As I said, you should be able to see what your code produces by running it from the command line
The usual solution to this is to use a template module. Template is the big one but there are many others
Of course you may just scatter print statements through your program in the correct order, but that will make your code much less intelligible
I hope that helps
I want to create a button that can switch between stylesheets (example below) and I would like for it to create a cookie so that the browser remembers and saves the setting.
<button id="style1">Light</button>
<button id="style2">Dark</button>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style1.css">
The simpler the code the better. Thank you!
You can use PHP to set and get the cookie and change the style based on that.
switch1.php
<?php
setcookie("s", "1");
header("Location: index.html");
?>
switch2.php
<?php
setcookie("s", "2");
header("Location: index.html");
?>
index.html
<link rel="stylesheet" type="text/css" href=
<?php
if isset($_COOKIE["s"]))
echo '"style' . $_COOKIE["s"] . '.css"';
else
echo '"style1.css"';
?>
>
<button id="style1">Light</button>
<button id="style2">Dark</button>
So I am trying to use the LightBox plugin. However I am querying my mysql database and displaying it with a img tag. But it seems to me that LightBox requires an 'a' tag. Does anyone know how to do so?
echo '<img id="database" src="data:image/jpeg;base64,'. base64_encode($image) .'" />';
I have tried:
echo '<a id="database" href="data:image/jpeg;base64,'. base64_encode($image) .'" />';
but nothing shows up if I do this. Otherwise using the img tag, everything displays fine.
Additional info: If it helps I am storing the images as a blob on a mysql database.
Thank you
Update 1:
echo '<a href="data:image/jpeg;base64,'. base64_encode($image) .'" data-lightbox="roadtrip"> <img id="database" src="data:image/jpeg;base64,'. base64_encode($image) .'" /><a/>';
This image now links to itself upon which is great! But still isn't right for Lightbox functionality. How I set up lightbox as par instructions:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="/var/www/html/jquery-1.11.3.min.js"> </script>
<title>Greeting Cards</title>
<link rel="stylesheet" href="/var/www/lightbox2-master/dist/css/lightbox.css">
</head>
<body>
<!--------Logo------------>
<div id="logo">
<a href="../../index.html" >
<img src="../../icon/icon.png" alt="Our logo picture" >
</a>
</div>
<!------------------------>
<h2>Greeting Cards</h2>
<!-------->
<?php
/* Getting the blobs from mysql database */
echo '<div id ="gallery">';
foreach ($images as $image) {
$image = WideImage::loadFromString($image)->resize(300, 300); //image resizing here
echo '<a href="data:image/jpeg;base64,'. base64_encode($image) .'" data-lightbox="roadtrip"> <img id="database" src="data:image/jpeg;base64,'. base64_encode($image) .'" /><a/>';
}
echo '</div>';
mysqli_close($con);
?>
<script src="/var/www/lightbox2-master/dist/js/lightbox.js"> </script>
</body>
</html>
Lightbox does not have support for base64-strings in the href-tag it seems. There are some suggestions using data-remote in this thread here: Lightbox using tags or <a href=[base64]>
Other than that there are other alternatives such as Fancybox, this can be found here:
http://fancybox.net
echo '<a href=""#><img id="database" src="data:image/jpeg;base64,'. base64_encode($image) .'" /><a/>';
Credit to Mike Phils.
This worked! And don't forget to link all your plugin files correctly! Hope this helps someone.
I am making a home appliance control device using arduino. I got this html code from the website. What is the code to get the value from the Arduino?
I think
$("#temperatureDisplay").load('temperature_display.php');
This part would be a receiving the value from the Arduino, but I am confusing. If I know what is code for receiving the value, how can I use if statement to change the background color with different value of output from Arduino?
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.0.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Weather Station</title>
</head>
<body>
<div class="data">
<div class="dataTitle">Temperature: </div>
<div id="temperatureDisplay">Waiting for data ...</div>
</div>
<script type="text/javascript">
setInterval(function()
{
$("#temperatureDisplay").load('temperature_display.php');
}, 1000);
</script>
</body>
</html>
This is php file and the data file is just number. This number is always changed with the Arduino.
<?php
$myFile = "temp_data.txt";
$fh = fopen($myFile, 'r');
$line = fgets($fh);
fclose($fh);
echo $line;
?>
I have a simple website, in which I've written the code that's about the header.
This is included in the index.html. Now that I want to add another .html file, how can I have the header related code, included into all the HTML files?
A simple copy paste will surely do the job, but is it a correct solution?
Developing in Ubuntu, using Sublime Text with H5BP and Compass.
I would use PHP:
// header.php
<?php
date_default_timezone_set('America/Los_Angeles');
function https(){
$sv = $_SERVER;
if(!isset($sv['HTTPS'])){
header("LOCATION:https://{$sv['SERVER_NAME']}{$sv['PHP_SELF']}"); die();
}
}
function http(){
$sv = $_SERVER;
if(isset($sv['HTTPS'])){
unset($_SERVER['HTTPS']);
header("LOCATION:http://{$sv['SERVER_NAME']}{$sv['PHP_SELF']}"); die();
}
}
$doc = "<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='put your site keywords here' />";
$main = " </head>
<body class='njs'>
<div id='head'>
<div id='menu'>
<nav class='tabs'>
<a href='index.php' id='hm'>Home</a>
<a href='page2.php' id='p2'>Page 2</a>
<a href='page3.php' id='p3'>Page 3</a>
<a href='page4.php' id='p4'>Page 4</a>
<a href='page5.php' id='p5'>Page 5</a>
<a href='page6.php' id='p6'>Page 6</a>
<a href='page7.php' id='p7'>Page 7</a>
</nav>
</div>
<div id='content'>";
?>
Now, put header.php in a restricted folder, in the same location as index.html for added security, then change index.html to index.php. Now index.php:
// index.php
<?php
include_once 'restricted/header.php'; http(); // could be https() for SSL
echo "$doc
<title>Whatever - Home</title>
<meta name='description' content='Whatever - Home' />
<style type='text/css'>
#import 'common.css'; #import 'index.css';
</style>
$main";
?>
<!-- put your content here -->
<!-- don't forget to close the `id='content'` div -->
</div>
</body>
</html>
You could also ajax to load in the header into the separate pages, if you didn't want to deal with php. Just have the header html in a separate file and do an ajax call on dom load and then apply the response to the container of the header in the page you are using.