Working With HTML Templates

Share This:

If you like my work show support on my Patreon
So you just downloaded a really cool HTML Template, and your ready to use it. You spend an hour examining the code and modifying it. But are you modifying it correctly. After you know that you have no idea what the future of your website will hold and you may want to add more content to it in the future. You can save one a backup of a blank page of the template for future backups. But then what if you want to add an item to the menu which will need to be added to each page. This is where PHP can come in handy. Lets modify this template in a way that will make your life easier and be able to issue updates fast. Let observer a template.

Before we get started I must say to do what I will be talking about in this tutorial you will need a basic understanding of MySQL and PHP.


<html>
<head>
<title>My Template</title>
<link src="some.css" type="text/css" />
<script src="some.js" type="text/javascript"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./">Home</a></li>
<li><a href="otherpage.html"</li>
</ul>
</header>
<div id="main">
<h1 id="mymain">Hello World</h1>
<p>My content</p>
<img src="image.png" alt="Some Image" />
</div>
<div id="login">
<form>
Username: <input type="text" />
Password: <input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</body>
</html>

First what we will do is make several other directories. These directories can be what ever you want them to be but I usually make mine look like the following.

  • core
  • includes
  • js
  • css
  • widgets
  • images




So to do this we will issue the following commands in Windows, Mac or Linux


mkdir core
mkdir includes
mkdir js
mkdir css
mkdir widgets
mkdir images

Now we move all of our css files to the css directory, our images to the images directory our javascript to the js directory. We can do this by using the following commands.

Move the files inside of Windows


move *.js js
move *.css css
move *.png images

Move the files inside of Mac or Linux


mv *.js js
mv *.css css
mv *.png images

Now lets rename our template.html file to index.php

Rename the template.html to index.php inside of Windows

ren template.html index.php

Rename the template.html to index.php inside of Mac or Linux

mv template.html index.php

Now we can open index.php up in our text editor and start to cut portions of our code out. Lets start from the top and work our way down.

First we will cut the following

<title>My Template</title>
<link src="some.css" type="text/css" />
<script src="some.js" type="text/javascript"></script>

And we will paste it into another file called head.php and we will put the head.php file into the includes directory.

Now lets take the following

<header>
<nav>
<ul>
<li><a href="./">Home</a></li>
<li><a href="otherpage.html"</li>
</ul>
</header>

And we will past the above into another file called menu.php and we will save it in the includes directory.

Now we will take the following

<div id="login">
<form>
Username: <input type="text" />
Password: <input type="password" />
<input type="submit" value="Login" />
</form>
</div>

And we will paste it into a file called login.php and we will save it in the widgets directory.

Now lets create a MySQL database. To do this we will access our MySQL command line and type the following.

CREATE TABLE website (id INT(10) MEDIUMINT NOT NULL AUTO_INCREMENT, title VARCHAR(30) content TEXT PRIMARY KEY (id));

Now that we have our table created we will take the portion of our index.php file that has the id=”main” and place that into our MySQL database. Like so


INSERT INTO website (title,content) VALUES ('Home','<div id="main"><h1 id="mymain">Hello World</h1><p>My content</p><img src="image.png" alt="Some Image" /></div>');

Now we should have an index.php file that has the following contents.

<html>
<head>
</head>
<body>
</body>
</html>

Now lets connect all of our other code back to the file. To do this we will make our index.php file look like the following.

<html>
<head>
<?php include 'includes/head.php'; ?>
</head>
<body>
<?php
include 'includes/menu.php';
include 'widgets/login.php';
?>
</body>
</html>

Now lets create a PHP file that will connect to our MySQL database. We will call this file db.php and it will be stored in our core directory.


<?php
/*Define constant to connect to database */
DEFINE('DATABASE_USER', 'dbuser'); //Change dbuser to the user name of the database
DEFINE('DATABASE_PASSWORD', 'dbpassword'); //change dbpassword for the password of the database
DEFINE('DATABASE_HOST', 'localhost'); //90% of the time it is localhost or 127.0.0.1
DEFINE('DATABASE_NAME', 'dbname'); //change dbname to the name of the database name
// Make the connection:
$database = @mysqli_connect(DATABASE_HOST, DATABASE_USER, DATABASE_PASSWORD,
DATABASE_NAME);
if (!$database) {
trigger_error('Could not connect to MySQL: ' . mysqli_connect_error());
}
?>

Now lets create a file called init.php and put it into our core directory. In this file we will have the following code.


<?php
include 'core/db.php';
$sql="SELECT * FROM website WHERE id=1";
$show = mysqli_query($database,$sql);
$rows = mysqli_fetch_assoc($show);
?>

Now lets go back to our index.php file and modify it some more. So it will look like the following.


<?php include 'core/init.php'; ?>
<html>
<head>
<?php include 'includes/head.php'; ?>
</head>
<body>
<?php
include 'includes/menu.php';
<?php echo $rows['content'];?>
include 'widgets/login.php';
?>
</body>
</html>

Now lets modify our head.php file to make it look like the following.

<title>My Template <?php echo $rows['title']; ?></title>
<link src="some.css" type="text/css" />
<script src="some.js" type="text/javascript"></script>

Now lets save everything and upload all of our work to our LAMP Server. And test out everything. The template should look exactly the same. And creating additional pages can be very easy. We would pretty much just insert more data into our mysql database and write another PHP script that will SELECT the row in the database that has the id of 2 and it will display that data instead.