indexu.com » Tutorial

Setting up new mysql database with cpanel

dody — Tue, 15 Jun 2010 22:06:24 +0000

Today I will show you a basic instruction how to setup a new mysql database for your indexu directory by using cpanel.

1) Open cpanel page, usually something like www.domain.com:2082, then enter your username and password that are provided by your hosting account.

2) Click on manage mysql database

3) Create a new mysql database

4) Create a new user name. Enter username and password.

5) Before you can use the database, you need to assign user to get access the database

6) Give the user all privilege

That’s it. Now you have mysql ready to use with indexu. Form this example it will be:
MYSQL username: indexute_dody
MYSQL password: poi0982
MYSQL host: localhost
MYSQL database name: indexute_indexudir

Show listing in two columns or more

dody — Tue, 15 Jun 2010 02:15:38 +0000

Bored to have listing in single column? I will show you how to make listing in multiple columns.

Edit rows.html, clean the codes and replace with:

  <%if $number % 2 eq 1%>
    <div class="row_nl">
  <%/if%>
 
  <div class="row_item myrow">
    <img src="http://open.thumbshots.org/image.aspx?url=<%$url%>" alt="<%$title%>" style="border:1px solid #777;">
    <h3><a href="<%$url%>" name="link_<%$link_id%>"><%$title%></a></h3>
    <p><%$description%></p>
    <p><a href="<%$url%>" name="link_<%$link_id%>"><%$url%></a> - <a href="<%$site_url%>/<%$detail_page_url%>"><%t%>details<%/t%></a></p>
    <p>Google PR <img src="<%$site_url%>/googlepr.php?link_id=<%$link_id%>" alt="" /></p>
  </div>
 
  <%if $number % 2 eq 0%>
    </div>
  <%/if%>

Then add these 2 css classes to construct the layout.

.row_nl {
  clear:both;
  width:100%;
  margin-bottom: 10px;
}
 
.row_item {
  margin-right:10px;
  display:inline;
  width:285px;
  float:left;
}

Show category listing as list of images

dody — Mon, 14 Jun 2010 07:47:48 +0000

In this tutorial I will show you how to create an alternative category listing in front page where the categories will be listed as a series of images.

1) Prepare the image files. Create a folder called ‘cat‘ in template folder. Then put the images files here.

2) Edit category image file for each categories with admin panel or phpmyadmin. Put the filename of image file you have prepared for each categories.

3) Edit index.html, add the following code where you want to put this category list.
You can change $item_per_row value as you desire.

<%php%>
  global $dbConn, $indexu;
 
  $item_per_row = 4;
 
  $img_path = $indexu->config['site_url'].'/themes/'.$indexu->config['active_theme'].'/cat';
 
  $query = "select name, image
            from idx_category
            where parent_id = '0'";
  $result = $dbConn->Execute($query);
 
  $limit = $result->RecordCount();
  $i=0;
 
  while ($row = $result->FetchRow()) {
    $i++;
 
    if ($i % $item_per_row == 1) {
      print "";
    }
 
    $url = SEOReplace($row['name']).'/';
    print "
           $img_path/{$row['image']}' title='{$row['name']}' alt='{$row['name']}' />
";
 
    if ($i % $item_per_row == 0 || $i==$limit) {
      print "
";
    }
  }
<%/php%>

4) Add the following css classes into css file, usually style.css

.cat_nl {
  clear:both;
  width:100%;
  margin-bottom: 10px;
}
 
.cat_item {
  margin-right:10px;
  display:inline;
}

Adding dynamic gmap with navigation and zooming

dody — Mon, 14 Jun 2010 00:34:12 +0000

As many of you request how to replace the static gmap image with dynamic gmap which allow navigation and zooming, I made some test how to do this for the easiest way.

Ok. This is the easiest way. We only need to change the template files. Actually only 2 files.

Edit header.html, usually we use

<body>

but now we need to add onload call to js to load gmap only when detail page is accessed.

<%php%>
global $page_identifier;
 
if ($page_identifier=='detail.php') {
  print '';
}
else {
  print "";
}
<%/php%>

Edit detail_link.html, add the div container to show the map, it must have id gmapnav_canvas.

<h3>Location Map</h3>
<div id="gmapnav_canvas" style="width: 640px; height: 400px;text-align:center;margin: 20px;"></div>

Next, the last step is to construct the js code for google map. Edit detail_link.html, you can put the code at the of this file.

<%php%>
 
  $api_key = "";
 
  global $dbConn;
  $query = "select * from idx_link where link_id = '{$_REQUEST['linkid']}' limit 1";
  $result = $dbConn->Execute($query);
 
  $address  = $result->Fields("address");
  $city  = $result->Fields("city");
  $zip  = $result->Fields("zip");
  $state  = $result->Fields("state");
  $country  = $result->Fields("country");
 
  $loc = urlencode("$address, $city, $state, $zip, $country");
 
  $api_req = 'http://maps.google.com/maps/geo?q='.$loc.'&key='.$api_key.'&sensor=false&output=csv';
 
  $api_result = file_get_contents($api_req);
  $arr = explode(',',$api_result);
 
  if ($arr[0]=='200') {
    $latlng = $arr[2].','.$arr[3];
 
    $gmap_js = "
    
    
    ";
  }
 
  print $gmap_js;
<%/php%>