Hello Perl Monks. I found a solution for the last posts and for my new boilerplate perl issue and solution. I am coding two html default pages.
Every page has similarities but one can list and search, the other can login or be registered.
So, I will post a small solution code that i used for my server.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap
+/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery
+.min.js"></script>
<style>
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/Logo Title */
.header {
padding: 30px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 30px;
}
/* Page Content */
.content {padding:20px;}
form { margin: 0 auto;
text-align: center;
}
</style>
<body>
<div class="header">
</div>
<div class="content">
<form action="/cgi-bin/login.pl">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap
+/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery
+.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fo
+nt-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/Logo Title */
.header {
padding: 30px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 30px;
}
/* Page Content */
.content {padding:20px;}
form { margin: 0 auto;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav input[type=text] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: #000;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.google {
background: #dd4b39;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
.youtube {
background: #bb0000;
color: white;
}
.content {
margin-left: 75px;
font-size: 30px;
}
</style>
<body>
<!-- temp header -->
<div class="header">
</div>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<input type="text" placeholder="Search..">
</div>
<!-- Social Media -->
<div class="icon-bar">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="google"><i class="fa fa-google"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
<!-- Card Gallery Style-->
<div class="card">
<img src="img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</body>
</html>
These are html templating based.
I found this search in perl that i am reusing, instead make the wheel again.
#!/usr/bin/env perl
use strict;
use warnings;
use File::Find;
use CGI qw(:standard);
my $query = param("query");
print header();
print start_html();
print "n
For the query $query, these results were found:
n
n";
undef $/;find( sub
{
return if($_ =~ /^./);
return unless($_ =~ /.html/i);
stat $File::Find::name;
return if -d;
return unless -r; open(FILE, "< $File::Find::name") or return;
my $string = ;
close (FILE); return unless ($string =~ /Q$queryE/i);
my $page_title = $_;
if ($string =~ /<title>(.*?)</title>/is)
{
$page_title = $1;
}
print "<li><a href="$File::Find::name">$page_title</a></li>n";
},
'/home/username/public_html');print "
n";
print end_html();End
I hope that I can help here too. I am a learner as all here. This was a solution that I seek and found easily to my problem. Build a good website template boilerplate for my company.
Thank you all.