Solved

Converting an HTML page to PHP

Posted on 2016-08-03
20
87 Views
Last Modified: 2016-08-16
Please take a look at this series of webpages and let me know the simplest way possible to convert them to PHP. The major advantage I believe would be that I could create a master menu bar that would be accessed by all the pages, so that if I made a change to it, they would all update themselves. Also, I would like to create a hit counter that would exclude any hits made by me, although I suppose that might require javascript as well.  Perhaps both of these outcomes would, I don't know.

www.dijitalrealm.com/JCMusic/Jukebox2.html

Thanks!
John
0
Comment
Question by:gabrielPennyback
  • 7
  • 4
  • 3
  • +3
20 Comments
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41741552
Hi John,
Well you can just save them all with a .PHP extension in a HTML editor like Dreamweaver or just plain notepad++ and they will work fine (provided your hosting server is a LINUX server OR supports PHP)

then later you can add the menu as an INCLUDE (php page) in the pages and you can have what you want...

same about the counter... you can add it..

You can find out more about INCLUDE in PHP pages & the counter if you Google it.

Thanks,
Prasadh

PS... I listened to the songs and they are good :)
0
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 62 total points
ID: 41741570
If you're new to PHP and want to learn the language, this article can help.  It covers all of the things you need to know in order to get started converting static HTML web sites to dynamic PHP web sites.
https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41741616
Thanks, guys. Prasadh, I'm on a Windows server but I'm pretty sure it handles PHP. I got a little education on SSI from another very similar question I asked last week, I learned how to create a standalone menu navbar file, but I don't know yet how to "call it" in the html?  I tried adding a suggested .htaccess line to my web.config file, but it doesn't seem to be working when I "call it" from within a given html page with this line "<!--#include virtual="menu.html" -->"

This is the .htaccess code I copied into my web.config file:
AddHandler server-parsed .html .htm

Open in new window


Any thoughts?

Thanks, John
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41741633
Hi John,
your website pages are not too complicated... so I suggest if you are on a windows server (and want to continue using it), you can use ASP includes... similar like a php include... or SSI

here instead of changing all files to .PHP pages, you can change them to .ASP pages

here is a link to w3schools explaining the basic ASP include

you can give it a try for eg. add new trial pages inside a different folder named "tryasp" and check it out... if it works fine... change all site pages.

thanks,
Prasadh
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41741638
PS: and you can consider renaming your HOME PAGE file as "default.asp" instead of "index.asp" (some servers have default.asp set as the default page ... default instead of index...)

if "index.asp" is working as the default home page... no need to change the file name
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41741666
Hi Prasadh, my impression was that I could do an include in a plain old HTML file. If that's correct, please take a look at these two pages and tell me how and where to write the include code in http://dijitalrealm.com/JCMusic/Jukebox3.html so that it activates the code in http://dijitalrealm.com/JCMusic/menu.html.

I'm told that if I was on a LInux server my .htaccess file should have this code: "AddHandler server-parsed .html .htm"  But since I'm not, I put it in my web.config file. Perhaps, that one line of code should be different when it's put in a web.config file?

The other thing is, when you say make my html file an ASP file, do you mean just save it that way without changing anything in it?

Thanks,
John
0
 
LVL 9

Accepted Solution

by:
Prasadh Baapaat earned 252 total points
ID: 41741689
As per my knowledge, directly including a HTML into and HTML file does not work... SSI is the best way to do it.

Here is a way to include HTML into HTML as explained on w3schools here

BUT I have never used it ... so I suggest we use the  ASP include in your case.

use below code so you can check if ASP include is working correctly on your server and if works for 1 set of pages... implement it for all pages.

save this file as "Jukebox.asp"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jukebox</title>

<link rel="stylesheet" type="text/css" media="all" href="css/navbar.css" >
    <script type="text/javascript" src="js/navbar.js"></script>

<style type="text/css">
body {background:url(images/GateAndMeadow.jpg) no-repeat #170a04; 
background-attachment:fixed; 
background-position:center; margin: 0 auto}
</style>

</head>

<body>
<div class="menubar">    
<div id="navbar">
<ul class="mlddm" params="3,-3,500,slide,150,h,1">
<!--#include file="menubar.inc"-->
</ul>
</div>		<!--end navbar-->
</div>    	<!--end menubar-->

<div class="box1"> 

<div class="content">

<div class="innerContent">
	<div class="style3" id="header">Songs</div>

	<div style="text-align:center; width:360px; margin:20px 0 0 0; color:#cb641a; font-style:italic; font-weight:bold; font-size:18px"> A little background ...</div> 
<p>Here are some songs by me ...
</div>
</div>
</div>

</body>
</html>

Open in new window


Save this file as "menubar.inc"

<li><a href="http://dijitalrealm.com/JCMusic/Jukebox2.html">home</a></li>
<li><a href="NoOneButYou.html">No One But You</a>
<li><a href="SweetLittleRomanticKisses.html">Sweet Little Romantic Kisses</a></li>
<li><a href="ManOfMyWords.html">A Man of My Words</a></li>
<li><a href="WhenGodWasYoung.html">When God Was Young</a></li>
<li><a href="GrandDesign.html">The Grand Design</a></li>
<li><a href="VisionOfLoveliness.html">Vision of Loveliness</a></li>
<li><a href="DistantSeas.html">Distant Seas</a></li>

Open in new window


In menubar include file we just have the list of links...

check it out on your server... it should work fine...

let me know the result
Prasadh
0
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 62 total points
ID: 41741747
On many modern servers, SSI only works in .shtml files. All you have to do is change the extension of your file from .html to .shtml and the <!--#include virtual="menu.html" --> statement should work. I ran into this myself recently. But I have a Linux server running Apache.

By the way, .htaccess files only work in Apache and if your server is Windows, your web server application is likely IIS. And you should never have to add a handler for .htm or .html. These are the most basic of web page files.
0
 
LVL 29

Assisted Solution

by:Olaf Doschke
Olaf Doschke earned 62 total points
ID: 41741916
I made the fun thought experiment to implement MVC pattern almost only with SSI, but you can also do it with PHP include and gain more advantages.

See The simplest CMS

I wouldn't really split into header/nav/detail/footer. A controller.php should rather load a template.php which would include a full HTML skeleton and includes the menu and page content at some place. This would mean one more level of indirection and the controller could switch templates depending on the section of your homepage. You could also switch between different controllers and let them inject the necessary parts of the page, that's more like template engines work.

Also, this approach using includes is not even OOP, all included code works in the same context as the initial PHP script and has access not only to superglobals but also local variables defined. That has its pros and cons but is easier to start with and good enough for smaller sites for which I intended this.

Bye, Olaf.
0
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 62 total points
ID: 41742299
A few examples...

Here is a skeleton HTML page, completely static code, "hardwired":
<!DOCTYPE html>
<!-- https://www.experts-exchange.com/questions/28945187/Centering-a-video-within-a-div.html -->
<!-- https://www.experts-exchange.com/questions/28961372/Converting-an-HTML-page-to-PHP.html -->
<html dir="ltr" lang="en-US">

<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<base href="http://dijitalrealm.com/Donna/" />

<style type="text/css">
#container {
    background-color:gray;
    vertical-align:top;
    width:50%;
    margin:auto;
    text-align:center;
}
.center {
    margin:auto;
    border:4px solid orange;
    width:35%;
}
</style>

<title>Crazy Pirate</title>

</head>

<body>
<div id="container">
<video class="center" controls autoplay>
  <source src="media/PirateEmma.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>

</body>
</html>

Open in new window


And here is the skeleton page wrapped in PHP.  As you can see, by switching back and forth from HTML to PHP we can create variables (strings of text) that are injected into the HTML.  Look for the "echo" statements.  It's still pretty close to "hardwired."
<!DOCTYPE html>
<!-- https://www.experts-exchange.com/questions/28945187/Centering-a-video-within-a-div.html -->
<!-- https://www.experts-exchange.com/questions/28961372/Converting-an-HTML-page-to-PHP.html -->
<html dir="ltr" lang="en-US">

<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<base href="http://dijitalrealm.com/<?php echo 'Donna'; ?>/" />

<style type="text/css">
#container {
    background-color:gray;
    vertical-align:top;
    width:50%;
    margin:auto;
    text-align:center;
}
.center {
    margin:auto;
    border:4px solid orange;
    width:35%;
}
</style>

<title><?php echo 'Crazy Pirate'; ?></title>

</head>

<body>
<div id="container">
<video class="center" controls autoplay>
  <source src="media/<?php echo 'PirateEmma.mp4'; ?>" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>

</body>
</html>

Open in new window


And here is another take on it, better organized and more susceptible to maintenance and enhancement.  In this design we run the PHP script at the top of the file, then use HEREDOC template notation to inject the PHP variables into the HTML template.  When we have our code organized this way we can get away from some of the hardwired nature of static HTML documents and let environmental and program logic determine the contents of our PHP variables.  The resulting web page becomes a living, breathing document.
<?php // demo/temp_gabriel_heredoc.php
/**
 * Demonstrate how to use PHP HEREDOC templates
 */
error_reporting(E_ALL);


// PERFORM DATABASE LOGIC, COMPUTATIONS, GENERATE ALL PHP VARIABLES, ETC
$basedir = 'Donna';
$title   = 'Crazy Pirate';
$video   = 'PirateEmma.mp4';


// USE HEREDOC NOTATION TO INJECT VARIABLES INTO THE HTML TEMPLATE
$template = <<<EOF
<!DOCTYPE html>
<!-- https://www.experts-exchange.com/questions/28945187/Centering-a-video-within-a-div.html -->
<!-- https://www.experts-exchange.com/questions/28961372/Converting-an-HTML-page-to-PHP.html -->
<html dir="ltr" lang="en-US">

<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<base href="http://dijitalrealm.com/$basedir/" />

<style type="text/css">
#container {
    background-color:gray;
    vertical-align:top;
    width:50%;
    margin:auto;
    text-align:center;
}
.center {
    margin:auto;
    border:4px solid orange;
    width:35%;
}
</style>

<title>$title</title>

</head>

<body>
<div id="container">
<video class="center" controls autoplay>
  <source src="media/$video" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>

</body>
</html>
EOF;

echo $template;

Open in new window


All three of these scripts produce the same HTML document, but the third one is best organized to take advantage of the power and flexibility of PHP.

I do not use Windows on my server, and I never would.  I use and recommend a LAMP stack.  The LAMP stack uses a file called .htaccess to control what gets parsed through PHP.  Because I work a lot with PHP, I parse all my HTML script files through PHP.  Here is the line from my .htaccess file:
AddHandler x-httpd-php .html .htm

Open in new window


If you haven't already done it, take a close look at the learning resources called out in the article for programmers who are new to PHP.  If you can find a local college that teaches PHP, you might want to sign up for an introductory course.  If you think you can learn PHP by copying  examples you find on the internet, just stop now and go outside to enjoy some other activity instead of PHP programming.  PHP requires structured learning, and without it, all you will ever create is brown sadness code, so please don't waste your time doing that.  Instead get into a structured learning environment of some sort - books, courses, tutors, whatever.  In a couple of months you will be able to work independently.  In a year or so, you will be able to build web applications at a near professional level.  But by all means, give yourself some time and learning structure so that simple examples (like these) can be gradually built up into components and applications.  And best of luck with the journey!  You will be joining other PHP programmers who collectively generate more than half of all internet message traffic.
0
Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 62 total points
ID: 41742817
greetings gabrielPennyback, , I have read your question and the comments here, , and Although you have gotten very much information in the comments, some of it sort of contradictory (like using ASP pages), and some views about the PHP of your site PAGE coming from the HTML there. My question is -
      "WHY do you want or need to have a server side functionality allowed by PHP for that Page"

I see no need for PHP in that page. and believe me, , there is SO MUCH to learn about using server side code operations, that it may take you a while to get any valued knowledge for having and using PHP (or any server side language) to do web site dynamic pages.

So why switch to PHP?

If I were you I would be more worried about making your page MOBIL responsive, I could see NO responsive width changes in that page at all, and there days, more people see pages on cell phone that any other device.
0
 
LVL 9

Assisted Solution

by:Prasadh Baapaat
Prasadh Baapaat earned 252 total points
ID: 41742915
Well some clarification here from my side... I have answered as per my knowledge and do not claim it is the BEST solution... it is ONE of the POSSIBLE SOLUTIONS to the question.

I have not given any contradictory information regarding ASP pages... If we look at the question and further replies... John asked how he can convert HTML to PHP... I checked his page code and there was nothing in it that would not run if the pages were simply saved with a different extension like PHP or ASP.

ASP was suggested as the server is a windows server... I do not have any preference for which language someone should use... everyone uses whatever he knows and is comfortable with.

the code I gave is very simple to implement... without making too many changes in his Pages, CSS or JS and will achieve the goal in least efforts using a simple free tool like Notepad ++ or him requiring to learn any new additional things.

I think of solving the problem at hand first and then educating the person asking question...

I am not taking comments personally... its a just a clarification of why I answered what I answered :)
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41743457
I'm a feeling a little guilty because you've all given this so much thought, and as Ray has suggested I really need to do the grunt work of actually learning the basics before I even bother you all with questions like this!

What almost worked for me was the info at http://www.w3schools.com/howto/howto_html_include.asp. It included the menu perfectly but for some reason blocked the body background image.

Prasadh, moving over to an area in which I am a little more adept, thank you for the affirmation about the songs!

John
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41743761
I disagree with you, slick. Just the simple fact you'd not have 6 copies of the menu in every HTML page makes it worth using an include mechanism. You're right, that this can be done by SSI, too, but doing it in PHP gives rise to more capabilities for the future. As the pages are quite similar, the templating could be data driven and then it would become quite easy to add another song via just a record of a pages table with song file name, picture file name and the lyrics, as these three are the major changing components, only. To get a data driven website MySQL/PHP is a good choice.

Bye, Olaf.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41744381
@Olaf Doschke  and @gabrielPennyback

Olaf , I agree 200% with your saying -
"doing it in PHP gives rise to more capabilities for the future. As the pages are quite similar, the templating could be data driven"
and
"data driven website MySQL/PHP is a good choice"

But I can not see as -
    "it would become quite easy"
if you do not know anything about serverside programming , , and the very extensive SQL operations for a using any database.

I'm all for using server side programming, but I was just wondering if the time and effort needed to learn it, is needed just to do a menu?

there are php tutorials like w3schools at -
     http://www.w3schools.com/php/

but web page building needs knowledge in HTML, CSS, JAVASCRIPT, PHP, SQL SYNTAX, and maybe add on knowledge like JQUERY and BOOTSTRAP, plus the relationship of how all of these work together on a page.

gabrielPennyback, don't mean to be discouraging, it's great you want to learn, but it ain't no over night sensation to learn PHP site building.

You might want to spend time creating your music, The songs on you site I listened to were worth hearing!
0
 
LVL 29

Expert Comment

by:Olaf Doschke
ID: 41744481
Well, the way I described it in my simplest CMS the main PHP ingredient is just the include and the major work rather is defining routing via .htaccess rewrite rules. It wouldn't even be a major concern to do a controller.php or index.php that isn't hidden by URL rewriting.

So you don't have to learn everything to start using PHP, MySQL usage also can be done in a later step. Also, you don't need to start your first PHP driven page data-driven or driven by bootstrap and Javascript also is unnecessary to start with. Besides that Gabriel already managed HTMLand  CSS enough to build this page as it is.

The hosting could already allow PHP, so there also is no big need to setup and configure anything.

Bye, Olaf.
0
 
LVL 9

Assisted Solution

by:Prasadh Baapaat
Prasadh Baapaat earned 252 total points
ID: 41744485
HI John,
did you try out my code and make the test pages?

because in all the discussion... it is unclear if your problem has been solved or not.

Thanks,
Prasadh
0
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 62 total points
ID: 41744938
What almost worked for me was the info at http://www.w3schools.com/howto/howto_html_include.asp. It included the menu perfectly but for some reason blocked the body background image.
It sounds to me as if we need to be unblocking the background image. Does your menu happen to have a white background? Can you post a link to the page with the blocked background. This could be the easiest solution.
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41758545
Thank you all. I'm a little overwhelmed by all of this and I wanted all of you to share in the points. If I left anybody out, please forgive me.

Prasadh, I think I actually got your http://www.w3schools.com/howto/howto_html_include.asp. solution to work, which was why I chose several of your posts so that you would get the most points. I hope it worked out for everybody.

Thanks,
John
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41758570
Thank You John :)
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now