Practical PHP Tutorial - Home Page

Chapter 3


Home Page, first page.
Here is the plan:

  • A column in left side content comprising Logo and Navigation List
  • A right side container that has the page's main content
  • A footer that has immediate links
We are going to use Table Layout to achieve this. You can use relative, fluid or other layouts if you want. But for following the tutorial we are doing table layout. Lets start with the basic html syntax.
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Trading Center</title>
    <link href="/styles/style.css" rel="stylesheet" type="text/css">
    <script src="/scripts/jquery.js" type="text/javascript"></script>
    <script src="/scripts/script.js" type="text/javascript"></script>
  </head>
  <body>

  </body>
</html>
I hope you understand this syntax. Again, if you are not familiar with html, css or js, please learn basics of html, css and come back here. There are plenty of tutorials on web on those topics.

I am going to use a constraint using css that will ensure the content is centered in the page. Create a class in you style.css file with following setup.
.center-it {
  width: 1000px;
  margin: auto;
}
We can use this on any tag that we want horizontally centered on the screen. Put two div with this class in body.
<div class="center-it" id="main-container"></div>
<div class="center-it" id="div-footer"></div>

The first will be the main-container with menu and page's content. The second div will act as the footer.

Lets finish the main-container and come back to the footer. In the main-container, we are going to have a table layout. (Note: Table layouts are discouraged. The reason I use, it feels more faster way. If you are planning for platform-independent-display then, adapt fluid-layout). Declare a table inside the main-container. The table will be having a single row and two columns.
<table style="width:100%; margin-bottom: 50px;" id="page-holder">
  <tr style="vertical-align: top">
    <td style="width: 250px">
      <div id="div-header"></div>
      <div id="div-category"></div>
    </td>
    <td>
      <div id="div-cpanel"></div>
      <div id="div-menu"></div>
      <div id="div-page"></div>
    </td>
  </tr>
</table>
Line 1: In style, width 100% will fill the table into available area, horizontally; 50 pixel bottom margin will put a space between the main-container and the footer. You can also have a top-margin at footer, instead.
Line 2: First row. The vertical-align: top will ensure the contents start from top of the table, irrespective of the browsers initial value for the rows.
Line 3: First column. The fixed column of size 250 pixels. As I said in the start, this column contains the Logo (id-ed "div-header") and the Navigation List (id-ed "div-category").
Line 7: Second column. The main page's content: The control panel (div-cpanel) for handling the Log In system, second (div-menu) for search menu, and the third(div-page) our page's content.

We will come back to the footer page after we have enough pages(?).

Since this layout is going to be common for all the pages in our website, we are going to split the page into two: header and footer, in the next session.

So far, the code for the home page is as follows.
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Trading Center</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/script.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="center-it" id="main-container">
      <table style="width:100%; margin-bottom: 50px;" id="page-holder">
        <tr style="vertical-align: top">
          <td style="width: 250px">
            <div id="div-header"></div>
            <div id="div-category"></div>
          </td>
          <td>
            <div id="div-cpanel"></div>
            <div id="div-menu"></div>
            <div id="div-page"></div>
          </td>
        </tr>
      </table>
    </div>
    <div class="center-it" id="div-footer"></div>
  </body>
</html>

Comments

Post a Comment

Popular posts from this blog

How to construct a B+ tree with example

Image
A B+ tree contains n-1 search key values K1K2…….Kn-1 and have n pointers.   In a B+ tree the data are ordered  sequentially.  The leaf node may hold up to n pointers and must hold at least N/2 pointers. The root node must hold at least two pointers, unless the tree consists of only one node.  Now we construct a B+ tree. Construct a B+ tree for the following set of key values: (2,3,5,7,11,17,19,23,29,31) Assume that the tree is initially empty and values are added in ascending order. Construct a B+ tree where the pointer number is Four. Solution: When a node exceeds n-1 search key value then we split it into two nodes. First node contains (ceiling(n-1)/2) values.  2 nd node contains remaining node. Copy the smallest search key value of the second node to the parent node. Let's start, we know each node has N pointer and has N-1 search key values. In our example pointer number is 4, so the search key value is 4-1=3. So each node has 4 pointers and 3 search key value. The first node i
Read more

How to show only month and year fields in android Date-picker?

Image
Android default DatePicker show day/month/year fields but you have to customize this DatePicker as your requirements. Suppose that you want to show only month and year fields in android datepicker . To do this, you have to customize the Dialog DatePicker source code but it is not an easy task. In this tutorial I will show you a tricky way to solve this problem. Lets see how to show only month and year field in android DatePicker as a dialog.   Step to show only month and year fields in android date-picker: Some days ago I got this same problem and here I am trying to explain this in a sequential manner. I want to show a dialog datepicker when user click on an EditText. So if user click on EditText, A dialog datepicker will be invocked and it will show only month and year fields. To do this, at first we have to create a xml layout to hold the EditText fields. So create an android project and name it DatePickerExample. In the main.xml file just try to write this simple code.  main.xml
Read more

Visitor Counter Script Using PHP

Image
If you have noticed that many websites display their total numbers of visitors.In this tutorial I am going to explain you how to create a simple visitor counter using php. For this, 1) Create one table called “visitor_counter” in your database. 2) Create file named “counter.php”. Step1: Creating “visitor_counter” Table CREATE TABLE `visitor_counter` ( `counts` int(10) NOT NULL default '0' ) Step2: Creating “counter.php” File <?php  // Database Details $host="localhost"; $username="root"; $password=""; $db_name="test"; $tbl_name="visitor_counter"; // Connect to server and select database. mysql_connect("$host", "$username", "$password")or die("cannot connect to server "); mysql_select_db("$db_name")or die("cannot select DB");  $sql="SELECT * FROM $tbl_name"; $result=mysql_query($sql); $rows=mysql_fetch_array($result); $counter=$rows['counts']; // se
Read more