Walk Lightly on this PLANET and yet leave such a FOOTPRINT that cannot be erased for thousands of Years..!!!
Visit Codstech for Cyber Security related Posts !

Visitors

Sunday, January 5, 2014

Setting up Code for the file PHP template

Refer PHP , HTML  & Creating web sites

Back to  Creating a PHP web site - Starting from scratch
================================================

Lessons - 2

Setting up Code for the file

We have created a main folder php_site , and created 2 sub folders under it namely ,  includes & variables . Also created 2 files index.html & style.css .

 Refer Lesson - 1 : How to Create a PHP Website Template from Scratch to know more . We are now going to write  code for the created files.

Step - 1


  • Open the index.html file .
Now open the index.html file . Write the code as given below ;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<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="description" content="" />
 <meta name="keywords" content="" />
 <meta name="author" content="" />
 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
 <title>Programming Blog</title>
 </head>
 
                    <body>
 
                                         <div id="wrapper">
 
<div id="header"> ....................................................................................................(1)
 </div> <!-- end #header -->
 
<div id="nav"> .........................................................................................................(2)
 </div> <!-- end #nav -->
 
<div id="content"> ...................................................................................................(3)
 </div> <!-- end #content -->
 
<div id="sidebar"> ...................................................................................................(4)
 </div> <!-- end #sidebar -->
 
<divid="footer"> ......................................................................................................(5)
 </div> <!-- end #footer -->
 
                                         </div> <!-- End #wrapper --> 
                    </body>
 </html>

Refer the above given code thoroughly , and note each and every sections like head , meta , title , body & div tags . Refer the Basic structure of HTML also to know more about HTML tags .

(Note that , I am giving numbers 1 to 5 to understand that , we are adding some more codes , in that places).

Step - 2

  •  Open up the style.css file .
Next , open up the style.css file and add the divs we will be using. I have added very basic styling so you can see the site and get the idea of what we are doing. Remember that you can use your own styling when creating your website to suit your needs.
body {
background-color:#f1f1f1;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}
 
#wrapper {
width:960px;
background-color:#f8f8f8;
margin:0 auto;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
 
#header {
width:960px;
height:135px;
margin:0 auto;
margin-bottom:25px;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
}
 
#header h2 {
padding:10px;
}
 
#nav {
width:960px;
height:40px;
border-bottom:1px solid #ccc;
}
 
#nav a {
display:inline;
padding:10px;
text-decoration:none;
background-color:#f1f1f1;
}
 
#nav a:hover {
background-color:#bababa;
height:80px;
}
 
#content {
width:675px;
float:left;
padding:10px;
}
 
#sidebar {
width:200px;
float:right;
margin-bottom:25px;
}
 
#sidebar a {
text-decoration:none;
}
 
#sidebar li {
list-style:none;
}
 
#footer {
clear:both;
width:960px;
height:135px;
border-top:1px solid #ccc;
}
 
#footer p {
padding:10px;
}

Step - 3

  • Open up the index.html file .
Now we will need to add some content to our index.html file.

I have filled in the header area with an H2 tag for the website header title.
I will also be adding the links in the nav area, as well as some text in the content area, sidebar, and footer.
(Note that , I am giving numbers 1 to 5 to understand that , we are adding some more codes , in that places).

The final index.html file now looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>PHP Template by Priyada</title>

</head>

                <body>

                                <div id="wrapper">

<div id="header"> ...................................................................................................................(1)

                <h2>PHP Template by Programming Blog</h2>

</div> <!-- end #header -->

<div id="nav">

                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Portfolio</a>
                <a href="#">Contact</a>

</div> <!-- end #nav -->

<div id="content">

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>

<h3>Paragraph Element</h3>

<p>

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web. Web hosts are companies that provide space on a server owned or leased for use by clients, as well as providing Internet connectivity, typically in a data center. Web hosts can also provide data center space and connectivity to the Internet for other servers located in their data center, called colocation, also known as Housing in Latin America or France.-------------(1st paragraph)

</p>

<p>

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web. Web hosts are companies that provide space on a server owned or leased for use by clients, as well as providing Internet connectivity, typically in a data center. Web hosts can also provide data center space and connectivity to the Internet for other servers located in their data center, called colocation, also known as Housing in Latin America or France.-------------(2nd paragraph)

</p>

<h3>Another Heading Starting Point</h3>

<p>

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web. Web hosts are companies that provide space on a server owned or leased for use by clients, as well as providing Internet connectivity, typically in a data center. Web hosts can also provide data center space and connectivity to the Internet for other servers located in their data center, called colocation, also known as Housing in Latin America or France.-------------(3rd paragraph)

</p>

<p>

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web. Web hosts are companies that provide space on a server owned or leased for use by clients, as well as providing Internet connectivity, typically in a data center. Web hosts can also provide data center space and connectivity to the Internet for other servers located in their data center, called colocation, also known as Housing in Latin America or France.-------------(4th paragraph)

</p>

</div> <!-- end #content -->

<div id="sidebar">

<h3>Navigation</h3>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>

<h3>Box Two</h3>
                <li><a href="#">Link Here</a></li>
                <li><a href="#">Link Here</a></li>
                <li><a href="#">Link Here</a></li>
                <li><a href="#">Link Here</a></li>
                <li><a href="#">Link Here</a></li>

<h3>Box Three</h3>
                <li><a href="#">Link Here</a></li>
                <li><a href="#">Link Here</a></li>
                <li><a href="#">Link Here</a></li>
                <li><a href="#">Link Here</a></li>
                <li><a href="#">Link Here</a></li>

</div> <!-- end #sidebar -->

<div id="footer">
                <p>Copyright &copy 2010 <a href="http://programming-bca-mca.blogspot.in/">Programming blog/PHP Template</a></p>
</div> <!-- end #footer -->

                                </div> <!-- End #wrapper -->

                </body>

</html>

  • Now we will start converting our template to PHP .

Step - 4 (a)


We will need to take a brief look at the html code we have and decide which areas will be sliced. We will be removing specific areas from the index.html file and placing them into the php files we have created inside the includes folder.

The includes folder is here .


When we open the includes folder , we can see 4 files there ;



Let’s start with the top of the html document on the header. Select the header div and cut it from the document. Then open your includes folder, and the header.php file we created and add the code to the header.php .
That is ,open the index.html file , then cut the below given portion (see step - 3  and no (1) in the code , above) .

Code 4(a1)

<div id="header">

                <h2>PHP Template by Programming Blog</h2>

</div> <!-- end #header -->






Make sure this area has now been removed completely from the index.html file and placed into the header.php file (which is in the includes folder). 

** : Open  includes folder .
** : Click on header.php file to paste the above code . The header.php we already saved is given below : 

 
And after pasting the Code 4(a1) , here , we will get the header.php file as ,




In place of this code, we will now add the following to the index.html file.


<?php include('includes/header.php'); ?>

Now , the index.html (given is the corresponding portion only) will look like this:
(Make a note that the header area has now been replaced with our php include function that is calling our external header.php file)



And compare step - 3  and no (1) in the code , with this above given code .

Step - 4 (b)

Next let’s move to the nav div. The same as above, we are going to copy and cut that piece of code and place it into our nav.php file that is located inside of the includes folder.
(Will write the stpes here in detail )

Step - 4 (c)

Now it is time to do the sidebar. Copy and cut the sidebar div and place it into the sidebar.php file we created that is located inside the includes folder.
(Will write the stpes here in detail )

Step - 4 (d)

We will again do the same thing for the footer area. Copy and cut the footer div and place it into the footer.php file we created in the same includes folder.
(Will write the stpes here in detail )


Now that our index.html is properly sliced, we can rename the index.html file to index.php
Note that we have created this template ..

This step is good for anyone with a lot of content and pages. Instead of having to edit the sidebar on every page of your site you can now just edit the sidebar.php file and it will reflect on all of your pages. This makes it a lot easier to keep up with large portions of website material.

Progressing >>>>

A more easy for a normal user is ,

Posted by
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)