Posts

How to: Date Format

If you're gonna display this date format in your page, it will look so elementary: 2010-10-20. So we got to have a format for this one.
How to: Date Format with PHP
Date Format


Step 1: Prepare your database configuration file.
Step 2: Create and put this code inside your index.php file.

<?php
include 'config_open_db.php';

// to format the date, we used the date_format function
// we also label the column as formatted_date 'coz if not, we will have to access the data
// in this way: date_format(date_created,'%M %d, %Y')
$sql = "select title, date_format(date_created,'%M %d, %Y') as formatted_date from articles";
$rs = mysql_query( $sql ) or die( 'Database Error: ' . mysql_error());
while( $row = mysql_fetch_array( $rs ) ){
extract( $row );
echo "<h4>$title</h4>";
echo "Created on " . $formatted_date. "< hr />";
}
?>

you should have something like this:

Date Format
Step 3: If you also want to display the time just change %M %d, %Y to %M %d, %Y %r. You should have something like this.
Date Format With Time Specified
For more date format patter strings, look here.

How To: Read More Link

Creating a Read More link saves space in your page especially if you want to display a list of articles. It is much better than displaying the whole content of an article.

How To: Read More Link
Read More Link

Step 1: Prepare your database configuration file.

Step 2: Create your index.php file. You should have these codes.

<?php
include 'config_open_db.php'; // For database connection

// SUBSTR function in the query is used to shorten the output of the content
$sql = "select id, title, SUBSTR( body, 1, 300 ) as body from articles";
$rs = mysql_query( $sql ) or die( 'Database Error: ' . mysql_error());
while( $row = mysql_fetch_array( $rs ) ){
    extract( $row ); // to have variable names the same with column names
    echo "<h4>$title</h4>";
    echo "$body";
    // Link to the page where the reader can read the whole article
    echo "...[<a href='read_news.php?page_id=$id'>Read More</a>]";
}
?>

How To Create Zebra Striped Tables

Zebra striped tables look good. It guides the user’s eyes when looking into your rows of data. This one useful when you have long list of data, making your app more user friendly.

How To Create Zebra Striped Tables

Zebra Striped Table

DOWNLOAD SOURCE CODE LIVE DEMO

Step 1: Prepare your database configuration file. (I have config_open_db.php). As for the table structure, we can have the following:

CREATE TABLE `users` (
   `id` int(11) not null auto_increment,
   `firstname` varchar(32) not null,
   `lastname` varchar(32) not null,
   `email` varchar(32),
   `username` varchar(32) not null,
   `password` varchar(32) not null,
   PRIMARY KEY (`id`)
)

Step 2: Create styles folder and inside it is the style.css file. We will have this code:

th {
    padding: 5px;
    background-color: #999999;
}

td {
    padding: 5px;
}

.odd-row {
    background-color: #E3E3E3;
}

.even-row {
    background-color: #D1D1D1;
}

Step 3: Create index.php file, inside the index.php file, you should have these codes:

<html>
    <head>
    <title>How To Create Zebra Striped Table</title>
    <link href='styles/style.css' type='text/css' rel='stylesheet' />
    </head>
<body>
<?php
//to be connected to the database
include 'config_open_db.php'; 

//query your data
$sql = 'select * from users';
$rs = mysql_query ( $sql );

echo "<table border='0' cellpadding = '2'>";
echo "<tr>"; // Create the table headings
    echo "<th>Firstname</th>";
    echo "<th>Lastname</th>";
    echo "<th>Email</th>";
    echo "<th>Username</th>";
echo "</tr>";

//Set the background color of your first row
$bg=1; 

while ( $row = mysql_fetch_array( $rs ) ){

    //this is the condition on what will be the bg color of a row
    //at the same time, changing the value of $bg for the next loop
    //in this way, our table will have alternate row color
    //that makes it "Zebra Striped"
    if( $bg == 1){
        echo "<tr class='odd-row'>";
        $bg=2;
    }else{
        echo "<tr class='even-row'>";
        $bg=1;
    }
    
    echo "<td>{$row['firstname']}</td>";
    echo "<td>{$row ['lastname']}</td>";
    echo "<td>{$row['email']}</td>";
    echo "<td>{$row['username']}</td>";
    echo "</tr>";
    
}

echo "</table>";
?>

</body>
</html>

I have a follow up post for this one: How To Highlight Table Row OnMouseOver
:)

Home jQuery

How To Use jQuery Lightbox With A Database? Step by Step Guide!

Today I'm gonna show you how to use Lightbox while getting photo information from your database.

I think this is great if you wanna have something like a dynamic photo gallery in your site.

How To Use Lightbox With A Database

Step 1: Prepare your Database. We’ll have something like this:

CREATE TABLE IF NOT EXISTS `photos` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(32) NOT NULL,
  `description` text NOT NULL,
  `filename` varchar(32) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `photos`
--

INSERT INTO `photos` (`id`, `title`, `description`, `filename`) VALUES
(1, 'Mt. Batulao', 'Mt. Batulao''s New Trail', 'Mt-Batulao.jpg'),
(2, 'Mt. Polis', 'A few klicks outside Bontoc going up to Mt Polis', 'Mt-Polis.jpg'),
(4, 'Chocolate Hills 1', 'The wonderful chocolate hills', 'chocolatehills-1.jpg');

Step 2: Download Lightbox here.

Step 3: Unzip it on your web directory.

Step 4: Prepare your database configuration file for database connection. Create config_open_db.php file and place the following code.

<?php
$host = "your host";
$db_name = "your database name";
$username = "your database username";
$password = "your database password";

$conn = new PDO("mysql:host=" . $host . ";dbname=" . $db_name, $username, $password);
?>

Step 5: Create a images folder, we’ll assume that your photos are stored here. You can download and use some photos for free from Unsplash.

Step 6: We’ll have the following codes on our index.php file.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>How To Use jQuery Lightbox With A Database</title>

        <link rel="stylesheet" type="text/css" href="js/css/jquery.lightbox-0.5.css" media="screen" />
    </head>
<body>

<div>You may click the images below.</div>
<div id="gallery"> <!-- id to detect images for lightbox -->

<?php
include 'config_open_db.php'; // Database Connection
$sql = "select * from photos"; // Query the photos
$stmt = $conn->prepare( $sql );
$stmt->execute();

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ // Loop through the records
    $file_name = $row['filename'];
    $title = $row['title'];
    $description = $row['description'];

    // We will append the $file_name variable to href and src attributes
    // to identify what image is being selected/shown
    // The rel='lightbox[philippines]' <a> attribute is
    // needed to use lightbox for set of images
    // It should be stored under one name, we gave the name 'philippines'
    // we also included the title and decription on the title attribute
    // so it will be shown on the overlay
    echo "<a href='images/$file_name' rel='lightbox[philippines]' title='$title - $description'>";
        echo "<img src='images/$file_name' width='150' height='100' />";
    echo "</a> ";
}
?>
</div>

<div class='back-link'>
    <a href='https://www.codeofaninja.com/2010/10/how-to-use-lightbox-with-database.html'>Back to tutorial page</a>
</div>

<script type="text/javascript" src="js/js/jquery.js"></script>
<script type="text/javascript" src="js/js/jquery.lightbox-0.5.js"></script>

<script type="text/javascript">
// script to activate lightbox
$(function() {
    $('#gallery a').lightBox();
});
</script>

</body>
</html>

There are also lots of things that you can configure in jQuery Lightbox such as overlay background color, opacity, navigation behavior, button images, border size, resize speed, keyboard navigation, and etc.

You can find that in jquery.lightbox-0.5.js file in the js/ directory.

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

Thank you for learning from our post about: How To Use jQuery Lightbox With A Database? Step by Step Guide!

Sample Use of JavaScript Confirm Pop Up Boxes

I'm gonna give you an example on how to use JavaScript confirm pop up boxes to delete a database record.

JavaScript Confirm Pop Up Box

File Name: index.php

<html>
<head>
<title>Sample Use of JavaScript Confirm Pop Up Boxes</title>
<script type='text/javascript'>
function delete_user( id ){
var answer = confirm('Are you sure you want to delete this record?');
if ( answer ){ //if user clicked ok
window.location = 'index.php?action=delete&id=' + id;
} //you can add else here
}
</script>
</head>
<body>
<p>
<?php
    if($_REQUEST['action']=='delete'){
    include 'config_open_db.php'; //for database connection
        $sql = "DELETE FROM users WHERE id = {$_REQUEST['id']}";
        mysql_query ( $sql ) or die('Database Error: ' . mysql_error());
        echo "User Deleted!";
      }
   ?>
</p>

<a href='#' onclick="delete_user( 3 );">Delete</a>

</body>
</html>
Here's how it works:

1. When you run this code, you will see a delete link.

2. After clicking that link, a JavaScript Pop Up Box will appear saying ""Are you sure you want to delete this record?".

3. If you click on "Cancel", nothing will happen aside from the box will disappear.

4. If you click on "OK", the page will be redirected to itself together with the parameters "action" and "id", it is on this part window.location = 'index.php?action=delete&id=' + id;

5. It will then evaluate our PHP script to delete the record from the database.


Home CakePHP

CakePHP Naming Conventions

CakePHP requires us to follow certain convention. In this way, we will have very uniform system development, have free functionality, and save time over tracking configuration files! :)

1. Create a Model 
  • directory: app/models/
  • filename: post.php 
  • classname: Post
  • extension: class Post extends AppModel

The filenames of models are always singular. And its classnames are CamelCased.

2. Create a Controller 
  • directory: app/controllers/
  • filename: posts_controller.php
  • classname: PostsController
  • extension: class PostsController extends AppController

The filename of a controller is always plural followed by an underscore then the word "controller" (_controller). Classnames are also CamelCased.

3. Creat a View
  • directory: app/views/posts/
  • filename: hello_world.ctp

You will create another view directory for each of your models. In this case, we created a directory called "posts" under app/views/ directory. Filenames are saved with the extension .ctp (I believe its "cake template page"). They are also named after the method/function (action) inside your controller.

If you have more than one word object (ex. Sponsored Member), you may use underscores to name it. In my case, I will name it "sponsored_member".

Model: sponsored_member.php
View: app/views/sponsored_members
Controller: sponsored_members_controller.php