Hektor Paris » PHP http://www.hektorparis.com Web developer & designer in New York City. Sat, 15 May 2010 07:01:42 +0000 en hourly 1 MySQL and jQuery Sliding Login Panel http://www.hektorparis.com/mysql-and-jquery-sliding-login-panel/ http://www.hektorparis.com/mysql-and-jquery-sliding-login-panel/#comments Wed, 16 Sep 2009 15:49:27 +0000 Hektor http://www.hektorparis.com/?p=783 Nice and Clean Sliding Login Panel built with jQueryThe Sliding Login Panel with jQuery (v 1.3.2) is easy to integrate and an extremely efficient way to allow users to login from any page throughout your website. Using the jQuery JS framework, the sliding panel works like a charm in Firefox, Safari, Opera, Chrome and even inferior browsers like IE6, IE7 and IE8!

The purpose of having a sliding login panel is to make your website user-friendly as well as practical, by providing a login and logout feature without redirecting users away from any content on your website. The Sliding Login Panel with jQuery overlaps content instead of shifting it down, and since all images are transparent that means you can retain the background content intact.

See Demo Here >>


Read Me
This tutorial will demonstrate how to create a login system using PHP, MySQL and the Sliding Login Panel with jQuery. If you don’t already have a MySQL database with an users table, below I will show you how to begin from scratch. To proceed with this tutorial you will need to have a Linux web hosting environment with a MySQL database accessible preferably via phpMyAdmin.

You will also need to download the Sliding_login_panel_jquery.zip file from here.

Create “Members” Table
Using phpMyAdmin create a “members” table to use for storing user accounts. The following SQL query will create a table with two fields to store an username and password. However, you can add more fields to log IP address, last login time, user verified, etc.

CREATE TABLE `members` (`members_id` SERIAL NOT NULL, `members_username` VARCHAR(65) NOT NULL, `members_password` VARCHAR(65) NOT NULL, PRIMARY KEY (`members_id`))
TYPE = MyISAM AUTO_INCREMENT = 1;

–
– Now dump data for table “members”
–

INSERT INTO `members`  VALUES (NULL, ‘hektor@myserver.com’, md5(‘testPW123′));

This SQL query will result in:

Members Table



Security
SQL injections are a common method that allow malicious access to your database. Such SQL injection attacks are the act of hackers using an HTML form to submit a MySQL statement that exploits raw processing of user input data. For example, a login form has two input fields, username and password, which are submitted to a MySQL SELECT query that returns matches found. However, an SQL injection will attempt to make the query behave differently.

SQL injection example:

1
2
3
4
5
6
7
$username = $_POST["username"]; //Suppose the input value is "hektor"
$query = "SELECT * FROM members WHERE username = 'hektor@myserver.com'"; //Valid SQL statement

//Now the same variable with an SQL injection
$username = "' OR 1'";
//The SQL query will be compromised and behave differently
$query = "SELECT * FROM member WHERE username = '' OR 1'" //SQL injection

By using the OR operand in conjunction with the single quote symbol (‘), the SQL query conditional statement ends the username string prematurely, resulting in a valid SQL statement that will always return true. The MySQL WHERE clause followed by the OR operand accompanied with a 1 alters the conditional statement to always return true. The consequences of using username = ” OR 1 will be that the entire members table will be selected by this SQL injection.

To prevent SQL injection attacks, use the mysql_real_escape_string() PHP function to escape special characters in a string for use in a SQL statement. The function escapes special characters while taking into account the current character set of the connection so that it is safe to place it in the mysql_query() function. A call to the MySQL library function mysql_real_escape_string() prepends backslashes to the following characters: \x00, \n, \r, \, ‘, “ and \x1a.

This function must always (with few exceptions) be used to make data safe before sending a query to MySQL.

1
2
3
4
5
//escape the string before assigning it to the variable
$username = mysql_real_escape_string($_POST["username"]); // ' OR 1'

//SELECT * FROM members WHERE members_username = '\' OR 1\''
$query = "SELECT * FROM members WHERE members_username = '$username'";



Create Database Configuration File
The next step is to create a database configuration file to connect to the member’s table and validate login attempts.

db_config.inc.php

1
2
3
4
5
6
7
8
//Define database connection
$hostname = "db.myserver.com";
$username = "hektor";
$password = "testPW123";
$dbname   = "sqldb";

mysql_connect($hostname, $username, $password) or die("Cannot connect: " .mysql_error());
mysql_select_db($dbname);



Create a Registration and Login Script
If you would like to retain the Sliding Login Panel’s default columns, member login and registration, you can process both using a single script.

login.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
session_start();

include("db_config.inc.php"); //establish DB connection

//capture all form fields and set as variables
foreach($_POST as $field => $value) { $$field = mysql_real_escape_string($value); }

//authenticate login attempts
if(isset($_POST["login"]))
{
  if(!empty($email))
  {
    $query = "SELECT * FROM members WHERE members_username = '" .$email ."' AND members_password = '" .md5($password) ."'";
    $find_user = mysql_query($query);

    if(mysql_num_rows($find_user) > 0)
    {
      $result = mysql_fetch_array($find_user);

      //register user session
      $_SESSION["user_sid"] = md5($result["members_username"]);

      //redirect authenticated users
      header("Location: login_success.php");
    }

    else
    {
      //implement your custom error handling method
      echo "Cannot validate your login credentials.";
    }
  }
}

//register new users
if(isset($_POST["register"]))
{
  if(!empty($signup_email) && !empty($signup_password))
  {
    $insert_user = "INSERT INTO members(members_username, members_password) VALUES('" .$signup_email ."', '" .md5($signup_password) ."')";

    if(mysql_query($insert_user))
    {
      //implement your custom success method
      echo "User account created successfully";
    }

    else
    {
      //implement your custom error handling method
      die();
      echo mysql_error();
    }
  }

  else
  {
    //implement your custom error handling method
    echo "You must provide a valid email address and password.";
  }
}



Modify Sliding Login Panel
Now rename the input fields in the form to make it work with the login.php script.

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Login Form -->
<form class="clearfix" action="login.php" method="post">
<h1>Member Login</h1>
<label class="grey" for="log">Email:</label>
<input id="email" class="field" name="email" size="23" type="text" />
<label class="grey" for="pwd">Password:</label>
<input id="password" class="field" name="password" size="23" type="password" />
<input class="bt_login" name="login" type="submit" value="Login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>

<!-- Register Form -->
<form action="login.php" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Email:</label>
<input id="signup_email" class="field" name="signup_email" size="23" type="text" />
<label class="grey" for="email">Password:</label>
<input id="signup_password" class="field" name="signup_password" size="23" type="text" />
<label>A password will be e-mailed to you.</label>
<input class="bt_register" name="register" type="submit" value="Register" />
</form>


]]> http://www.hektorparis.com/mysql-and-jquery-sliding-login-panel/feed/ 0 Upload Multiple Images at Once using PHP http://www.hektorparis.com/upload-multiple-images-at-once-using-php/ http://www.hektorparis.com/upload-multiple-images-at-once-using-php/#comments Tue, 26 May 2009 01:12:41 +0000 Hektor http://www.hektorparis.com/?p=497 PHP and FancyUploadUsing PHP and FancyUpload you can select multiple files to upload at once. FancyUpload is a powerful and elegant Ajax file uploading script that is easy to setup and configure. What makes FancyUpload attractive to use for uploading files is that it’s server independent and completely styliable using CSS and XHTML, plus it uses MooTools to function across modern browsers.

The purpose of this tutorial is to show you how to use FancyUpload for uploading multiple images at once using PHP. Please note that FancyUpload is able to upload other file types as well. I recommend you visit their website to see other showcases.



About PHP File Upload
When posting form inputs of “file” type, PHP uses the global $_FILES array to upload a file from a client computer to the remote server. The $_FILES array contains the following parameters:

1
2
3
4
5
$_FILES["file"]["tmp_name"] // A temporary name designated by the server
$_FILES["file"]["name"] // Original filename
$_FILES["file"]["type"] // Mime-type, in this case "image-type"
$_FILES["file"]["size"] // File size in bytes
$_FILES["file"]["error"] // Error code information about failed upload



File Upload and Security
It is important to use an upload mechanism that prevents malicious users from performing any unauthorized task. The code below uses the move_uploaded_file($filename, $destination) function to ensure that the file designated by $filename is a valid upload file (meaning that it was uploaded via PHP’s HTTP POST upload mechanism).

If the file is valid, it will be moved to the $filename given by the $destination parameter. However, if $filename is not a valid upload file, then no action will occur, and move_uploaded_file() will return FALSE. If $filename is a valid upload file, but cannot be moved for some reason, no action will occur, and move_uploaded_file() will return FALSE. Additionally, a warning will be issued.

This sort of check is especially important if there is any chance that anything done with uploaded files could reveal their contents to the user, or even to other users on the same system.

1
2
3
4
5
6
7
8
9
10
11
12
13
/***BOF FILE UPLOAD***/

// Check that the images directory exists
if(file_exists($upload_directory))
{          
    // Upload file or return error message information
    if(!move_uploaded_file($_FILES['Filedata']['tmp_name'], $upload_directory .$_FILES['Filedata']['name']))
    {
        $error  = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
    }
}
       
/***EOF FILE UPLOAD***/



Before you Begin
Download the complete ActionScript and JavaScript source files, documentation and showcases from the FancyUpload website. The source code below is part of the “Photo Queue” showcase which is intended for uploading images only by restricting the file type.

Using FileZilla or your favorite FTP client, upload the decompressed “fancyupload” directory to your web server. Next, create a directory where you want to upload images and assign it file permissions 777. Now let’s begin!

FancyUpload version 3.0 features:
- Ability to select multiple files to upload at once
- Filter file by type
- A lot of possible Events to add your own behaviour
- Show and filter useful file information before the upload starts
- Limit uploads by file count, type or size
- Platform and server independent, just needs Flash 9+ (> 95% penetration)
- Graceful Degradation, since the element is replaced after the Flash is loaded successfully
- Cancel running uploads, add files during upload
- Everything is optional, documented and easy editable

Compatibility
Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 3+) with Adobe Flash 9 and 10 player.


Source Files:

CSS Stylesheet
/fancyupload/showcase/photoqueue/style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/**
 * FancyUpload Showcase
 *
 * @license     MIT License
 * @author      Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright   Authors
 */
 
/* CSS vs. Adblock tabs */
.swiff-uploader-box a {
    display: none !important;
}
 
/* .hover simulates the flash interactions */
a:hover, a.hover {
    color: red;
}
 
#demo-status {
    padding: 10px 15px;
    width: 420px;
    border: 1px solid #eee;
}
 
#demo-status .progress {
    background: url(../../assets/progress-bar/progress.gif) no-repeat;
    background-position: +50% 0;
    margin-right: 0.5em;
    vertical-align: middle;
}
 
#demo-status .progress-text {
    font-size: 0.9em;
    font-weight: bold;
}
 
#demo-list {
    list-style: none;
    width: 450px;
    margin: 0;
}
 
#demo-list li.validation-error {
    padding-left: 44px;
    display: block;
    clear: left;
    line-height: 40px;
    color: #8a1f11;
    cursor: pointer;
    border-bottom: 1px solid #fbc2c4;
    background: #fbe3e4 url(assets/failed.png) no-repeat 4px 4px;
}
 
#demo-list li.file {
    border-bottom: 1px solid #eee;
    background: url(assets/file.png) no-repeat 4px 4px;
    overflow: auto;
}
#demo-list li.file.file-uploading {
    background-image: url(assets/uploading.png);
    background-color: #D9DDE9;
}
#demo-list li.file.file-success {
    background-image: url(assets/success.png);
}
#demo-list li.file.file-failed {
    background-image: url(assets/failed.png);
}
 
#demo-list li.file .file-name {
    font-size: 1.2em;
    margin-left: 44px;
    display: block;
    clear: left;
    line-height: 40px;
    height: 40px;
    font-weight: bold;
}
#demo-list li.file .file-size {
    font-size: 0.9em;
    line-height: 18px;
    float: right;
    margin-top: 2px;
    margin-right: 6px;
}
#demo-list li.file .file-info {
    display: block;
    margin-left: 44px;
    font-size: 0.9em;
    line-height: 20px;
    clear
}
#demo-list li.file .file-remove {
    clear: right;
    float: right;
    line-height: 18px;
    margin-right: 6px;
}

Javascript and MooTools
/fancyupload/showcase/photoqueue/script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/**
 * FancyUpload Showcase
 *
 * @license     MIT License
 * @author      Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright   Authors
 */
 
window.addEvent('domready', function() { // wait for the content
 
    // our uploader instance
 
    var up = new FancyUpload2($('demo-status'), $('demo-list'), { // options object
        // we console.log infos, remove that in production!!
        verbose: true,
 
        // url is read from the form, so you just have to change one place
        url: $('form-demo').action,
 
        // path to the SWF file
        path: '../../source/Swiff.Uploader.swf',
 
        // remove that line to select all files, or edit it, add more items
        typeFilter: {
            'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
        },
 
        // this is our browse button, *target* is overlayed with the Flash movie
        target: 'demo-browse',
 
        // graceful degradation, onLoad is only called if all went well with Flash
        onLoad: function() {
            $('demo-status').removeClass('hide'); // we show the actual UI
            $('demo-fallback').destroy(); // ... and hide the plain form
 
            // We relay the interactions with the overlayed flash to the link
            this.target.addEvents({
                click: function() {
                    return false;
                },
                mouseenter: function() {
                    this.addClass('hover');
                },
                mouseleave: function() {
                    this.removeClass('hover');
                    this.blur();
                },
                mousedown: function() {
                    this.focus();
                }
            });
 
            // Interactions for the 2 other buttons
 
            $('demo-clear').addEvent('click', function() {
                up.remove(); // remove all files
                return false;
            });
 
            $('demo-upload').addEvent('click', function() {
                up.start(); // start upload
                return false;
            });
        },
 
        // Edit the following lines, it is your custom event handling
 
        /**
         * Is called when files were not added, "files" is an array of invalid File classes.
         *
         * This example creates a list of error elements directly in the file list, which
         * hide on click.
         */
        onSelectFail: function(files) {
            files.each(function(file) {
                new Element('li', {
                    'class': 'validation-error',
                    html: file.validationErrorMessage || file.validationError,
                    title: MooTools.lang.get('FancyUpload', 'removeTitle'),
                    events: {
                        click: function() {
                            this.destroy();
                        }
                    }
                }).inject(this.list, 'top');
            }, this);
        },
 
        /**
         * This one was directly in FancyUpload2 before, the event makes it
         * easier for you, to add your own response handling (you probably want
         * to send something else than JSON or different items).
         */
        onFileSuccess: function(file, response) {
            var json = new Hash(JSON.decode(response, true) || {});
 
            if (json.get('status') == '1') {
                file.element.addClass('file-success');
                file.info.set('html', '<strong>Image was uploaded:</strong> ' + json.get('width') + ' x ' + json.get('height') + 'px, <em>' + json.get('mime') + '</em>)');
            } else {
                file.element.addClass('file-failed');
                file.info.set('html', '<strong>An error occured:</strong> ' + (json.get('error') ? (json.get('error') + ' #' + json.get('code')) : response));
            }
        },
 
        /**
         * onFail is called when the Flash movie got bashed by some browser plugin
         * like Adblock or Flashblock.
         */
        onFail: function(error) {
            switch (error) {
                case 'hidden': // works after enabling the movie and clicking refresh
                    alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
                    break;
                case 'blocked': // This no *full* fail, it works after the user clicks the button
                    alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
                    break;
                case 'empty': // Oh oh, wrong path
                    alert('A required file was not found, please be patient and we fix this.');
                    break;
                case 'flash': // no flash 9+ :(
                    alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
            }
        }
 
    });
 
});

PHP Image Upload Script
/fancyupload/showcase/script.php
Note: This script has been modified from its original form and I’ve commented out lines 39 through 58 to disable the showcase’s test mode and implemented code for production mode.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
/**
     * Swiff.Uploader Example Backend
     *
     * This file represents a simple logging, validation and output.
     *  *
     * WARNING: If you really copy these lines in your backend without
     * any modification, there is something seriously wrong! Drop me a line
     * and I can give you a good rate for fancy and customised installation.
     *
     * No showcase represents 100% an actual real world file handling,
     * you need to move and process the file in your own code!
     * Just like you would do it with other uploaded files, nothing
     * special.
     *
     * @license     MIT License
     *
     * @author      Harald Kirschner <mail [at] digitarald [dot] de>
     * @copyright   Authors
     *
     */
   
   
    /**
     * Only needed if you have a logged in user, see option appendCookieData,
     * which adds session id and other available cookies to the sent data.
     *
     * session_id($_POST['SID']); // whatever your session name is, adapt that!
     * session_start();
     */
   
    // Request log
   
    /**
     * You don't need to log, this is just for the showcase. Better remove
     * those lines for production since the log contains detailed file
     * information.
     */
   
    /*$result = array();
   
    $result['time']  = date('r');
    $result['addr']  = substr_replace(gethostbyaddr($_SERVER['REMOTE_ADDR']), '******', 0, 6);
    $result['agent'] = $_SERVER['HTTP_USER_AGENT'];
   
    if(count($_GET))   { $result['get'] = $_GET; }
    if(count($_POST))  { $result['post'] = $_POST; }
    if(count($_FILES)) { $result['files'] = $_FILES; }
   
    // we kill an old file to keep the size small
    if(file_exists('script.log') && filesize('script.log') > 102400) { unlink('script.log'); }
   
    $log = @fopen('script.log', 'a');
   
    if($log)
    {
        fputs($log, print_r($result, true) . "\n---\n");
        fclose($log);
    }*/
   
   
    // Validation
   
    $error = false;
       
       // NOTE: You need to create a directory if it doesn't already exist
       // Specify directory path for your images directory
    $upload_directory  = $_SERVER['DOCUMENT_ROOT'] ."/fancyupload/uploads/";
   
    if(!isset($_FILES['Filedata']) || !is_uploaded_file($_FILES['Filedata']['tmp_name'])) { $error = 'Invalid Upload'; }
   
    /**
     * You would add more validation, checking image type or user rights.
     *
     */
   
    if(!$error && $_FILES['Filedata']['size'] > 2 * 1024 * 1024) { $error = 'Please upload only files smaller than 2Mb!'; }
    else if(!$error && !($size = @getimagesize($_FILES['Filedata']['tmp_name']))) { $error = 'Please upload only images, no other files are supported.'; }
    else if(!$error && !in_array($size[2], array(1, 2, 3, 7, 8))) { $error = 'Please upload only images of type JPEG, GIF or PNG.'; }
    else if(!$error && ($size[0] < 25) || ($size[1] < 25)) { $error = 'Please upload an image bigger than 25px.'; }
    else if(!$error && file_exists($upload_directory .$_FILES['Filedata']['tmp_name'])) { $error = $_FILES["Filedata"]["name"] ." already exists."; }  
   
   
    // Processing
   
    /**
     * Its a demo, you would move or process the file like:
     *
     * move_uploaded_file($_FILES['Filedata']['tmp_name'], '../uploads/' . $_FILES['Filedata']['name']);
     * $return['src'] = '/uploads/' . $_FILES['Filedata']['name'];
     *
     * or
     *
     * $return['link'] = YourImageLibrary::createThumbnail($_FILES['Filedata']['tmp_name']);
     *
     */
   
    if($error) { $return = array('status' => '0', 'error' => $error); }
   
    else
    {
        $return = array('status' => '1', 'name' => $_FILES['Filedata']['name']);
   
        // Our processing, we get a hash value from the file
        $return['hash'] = md5_file($_FILES['Filedata']['tmp_name']);
   
        // ... and if available, we get image data
        $info = @getimagesize($_FILES['Filedata']['tmp_name']);
       
        /***BOF FILE UPLOAD***/
       
        // Specify directory path for your images directory
        $upload_directory  = $_SERVER['DOCUMENT_ROOT'] ."/fancyupload/images/";
       
        // Check that the images directory exists
        if(file_exists($upload_directory))
        {          
            // Upload file or return error message information
            if(!move_uploaded_file($_FILES['Filedata']['tmp_name'], $upload_directory .$_FILES['Filedata']['name']))
            {
                $error  = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
            }
        }
       
        /***EOF FILE UPLOAD***/
   
        if($info)
        {
            $return['width']  = $info[0];
            $return['height'] = $info[1];
            $return['mime']   = $info['mime'];
        }
   
    }
   
   
    // Output
   
    /**
     * Again, a demo case. We can switch here, for different showcases
     * between different formats. You can also return plain data, like an URL
     * or whatever you want.
     *
     * The Content-type headers are uncommented, since Flash doesn't care for them
     * anyway. This way also the IFrame-based uploader sees the content.
     */
   
    if (isset($_REQUEST['response']) && $_REQUEST['response'] == 'xml')
    {
        // header('Content-type: text/xml');
   
        // Really dirty, use DOM and CDATA section!
        echo '<response>';
        foreach ($return as $key => $value) { echo "<$key><![CDATA[$value]]></$key>"; }
        echo '</response>';
    }
   
    else
    {
        // header('Content-type: application/json');
        echo json_encode($return);
    }

XHTML Markup
/fancyupload/showcase/photoqueue/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<form action="../script.php" method="post" enctype="multipart/form-data" id="form-demo">
 
    <fieldset id="demo-fallback">
        <legend>File Upload</legend>
        <p>
            This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
            If this part is not changed, something must be wrong with your code.
        </p>
        <label for="demo-photoupload">
            Upload a Photo:
            <input type="file" name="Filedata" />
        </label>
    </fieldset>
 
    <div id="demo-status" class="hide">
        <p>
            <a href="#" id="demo-browse">Browse Files</a> |
            <a href="#" id="demo-clear">Clear List</a> |
            <a href="#" id="demo-upload">Start Upload</a>
        </p>
        <div>
            <strong class="overall-title"></strong><br />
            <img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" />
        </div>
        <div>
            <strong class="current-title"></strong><br />
            <img src="../../assets/progress-bar/bar.gif" class="progress current-progress" />
        </div>
        <div class="current-text"></div>
    </div>
 
    <ul id="demo-list"></ul>
 
</form>

Note that the “enctype” attribute for the form specifies the content-type to use when submitting the form. The “multipart/form-data” is used when a form requires binary data, like the contents of a file, to be uploaded.

Putting it all together
Modify /fancyupload/showcase/photoqueue/index.html to include all Javascript and CSS files necessary for FancyUpload to work properly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FancyUpload Photo Queue Showcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools.js"></script>
<script type="text/javascript" src="../../source/Swiff.Uploader.js"></script>
<script type="text/javascript" src="../../source/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="../../source/Lang.js"></script>
<script type="text/javascript" src="../../source/FancyUpload2.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
 body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
 }
</style>
</head>
<body>
 <br />
 <div style="width:500px; margin-left:auto; margin-right:auto;">
 <h3>Upload Multiple Images at Once using PHP and FancyUpload</h3>
 <form action="../script.php" method="post" enctype="multipart/form-data" id="form-demo">

    <fieldset id="demo-fallback">
        <legend>File Upload</legend>
        <p>
            This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
            If this part is not changed, something must be wrong with your code.
        </p>
        <label for="demo-photoupload">
            Upload a Photo:
            <input type="file" name="Filedata" />
        </label>
    </fieldset>

    <div id="demo-status" class="hide">
   <p>
    <a href="#" id="demo-browse">Browse Files</a> &nbsp; | &nbsp;
    <a href="#" id="demo-clear">Clear List</a> &nbsp; | &nbsp;
    <a href="#" id="demo-upload">Start Upload</a>
   </p>
        <div>
            <strong class="overall-title"></strong><br />
            <img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" />
        </div>
        <div>
            <strong class="current-title"></strong><br />
            <img src="../../assets/progress-bar/bar.gif" class="progress current-progress" />
        </div>
        <div class="current-text"></div>
    </div>

    <ul id="demo-list"></ul>

</form>
 </div>
</body>
</html>

Note: You will need to include the MooTools.Lang.js Javascript for FancyUpload to work properly. For my installation I chose to put the file in /fancyupload/source/Lang.js to maintain consistency by keeping all source files in the same directory.

FancyUpload is a creation of Harald Kirschner and is available free under the MIT License.

]]> http://www.hektorparis.com/upload-multiple-images-at-once-using-php/feed/ 0 How to Install FCKeditor in osCommerce http://www.hektorparis.com/how-to-install-fckeditor-in-oscommerce/ http://www.hektorparis.com/how-to-install-fckeditor-in-oscommerce/#comments Mon, 18 May 2009 06:57:08 +0000 Hektor http://www.hektorparis.com/?p=415 fckeditor-in-oscommerceLearn how to install WYSIWYG editor FCKeditor in osCommerce to use for product descriptions.

FCKeditor is a web-based HTML text editor with similar functions as desktop applications like MS Word (see demo),  making it useful for creating esthetically pleasing product descriptions in osCommerce.

FCKeditor is compatible with IE 5.5+, Firefox 1.5+, Safari 3.0+, Opera 9.50+, Chrome, Camino 1.0+, Apple, Linux and Windows.



Read Me

Before you begin work I recommend you backup your osCommerce database and that for any modifications you implement, instead of overwriting the original source code you should comment it out, this way you can revert changes in case you “FCKup” ha, ha, ha.

Pre-Installation

Download the latest version of FCKeditor for free.

Decompress the FCKeditor file to your catalog’s admin directory.

Create a directory in your catalog’s root directory titled “userfiles” and within this directory create four more sub-directories titled “file”, “image”, “flash” and “media”.

Using FileZilla or your favorite FTP client upload the directories you’ve created, catalog/admin/fckeditor/ and catalog/userfiles/ to your server.

Change read and write permissions to 777 for these directories:

catalog/userfiles/
catalog/userfiles/file
catalog/userfiles/media
catalog/userfiles/image
catalog/userfiles/flash

If you’re using FileZilla right click on each directory and select “File Attributes” (or “File Permissions” in some versions).

Install FCKeditor for Products Description

Open catalog/admin/categories.php

Find Around Line 541

1
2
3
4
echo tep_draw_textarea_field('products_description[' .$languages[$i]['id'] .']', 'soft', '70', '15',
(isset($products_description[$languages[$i]['id']])
? stripslashes($products_description[$languages[$i]['id']])
: tep_get_products_description($pInfo->products_id, $languages[$i]['id'])));

Replace With

1
2
3
4
5
6
/***BOF FCKeditor v2.6.4***/
echo tep_draw_fckeditor('products_description[' .$languages[$i]['id'] .']', '600', '420',
(isset($products_description[$languages[$i]['id']])
? stripslashes($products_description[$languages[$i]['id']])
: tep_get_products_description($pInfo->products_id, $languages[$i]['id'])));
/***EOF FCKeditor v2.6.4***/

The tep_draw_fckeditor() function returns an instance of FCKeditor to replace the native content editing textarea field created by the tep_draw_textarea_field() function. You can change the width and height values (‘600′, ‘420′) to fit your workspace.

Open catalog/admin/includes/functions/html_ouput.php

Around Line 13
Insert the following include_once() just before this comment   // The HTML href link wrapper function

1
2
3
/***BOF FCKeditor v2.6.4***/
include_once("fckeditor/fckeditor.php");
/***EOF FCKeditor v2.6.4***/

Find Around Line 245

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function tep_draw_textarea_field($name, $wrap, $width, $height, $text = '', $parameters = '', $reinsert_value = true) {
  global $HTTP_GET_VARS, $HTTP_POST_VARS;
 
  $field = '<textarea name="' . tep_output_string($name) . '" wrap="' . tep_output_string($wrap) . '" cols="' . tep_output_string($width) . '" rows="' . tep_output_string($height) . '"';
 
  if (tep_not_null($parameters)) $field .= ' ' . $parameters;
 
  $field .= '>';

  if ( ($reinsert_value == true) && ( (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) || (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) ) ) {
   if (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) {
    $field .= tep_output_string_protected(stripslashes($HTTP_GET_VARS[$name]));
   } elseif (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) {
        $field .= tep_output_string_protected(stripslashes($HTTP_POST_VARS[$name]));
     }
  }
 
  elseif (tep_not_null($text)) {
        $field .= tep_output_string_protected($text);
  }
   
  $field .= '</textarea>';
   
  return $field;
}

After the Function Above Add

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/***BOF FCKeditor v2.6.4***/
////
// Output a form textarea field using FCKeditor v2.6.4
function tep_draw_fckeditor($name, $width, $height, $text) {
$oFCKeditor = new FCKeditor($name);
$oFCKeditor->BasePath = "/admin/fckeditor/";
$oFCKeditor->Width  = $width;
$oFCKeditor->Height = $height;
$oFCKeditor->Config["SkinPath"] = $oFCKeditor->BasePath ."editor/skins/silver/";
$oFCKeditor->Value = $text;

$editor = $oFCKeditor->Create($name);

return $editor;
}
/***EOF FCKeditor v2.6.4***/

The tep_draw_fckeditor() function returns an instance of FCKeditor using parameters $name, $width, $height and inserts $text into the editor’s body. The $oFCKeditor->BasePath variable is self-explanatory, it defines the directory path for FCKeditor relative to the html_output.php file. This object variable is then used to customize the configuration options for the editor to use a “Silver” skin & which you can change if you’d like.

Open catalog/admin/fckeditor/editor/filemanager/connectors/php/config.php and configure this file by specifying the following values.

Find at Line 27

1
2
3
4
// SECURITY: You must explicitly enable this "connector". (Set it to "true").
// WARNING: don't just set "$Config['Enabled'] = true ;", you must be sure that only
// authenticated users can access this file or use some kind of session checking.
$Config['Enabled'] = true;

Find at Line 36

1
2
3
4
5
// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Useful if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = '/YOUR/SERVERS/ABSOLUTE/PATH/TO/USERFILES/';

To specify the absolute directory path to “userfiles” go to osCommerce->Tools->Server Info, scroll down to “Environtment” and copy the “DOCUMENT_ROOT” variable value. Paste it for $Config['UserFilesAbsolutePath'] and append “/userfiles/” at the end of the absolute path. For example, if your website is hosted on a Linux environment your absolute path might look like “/home/content/user/public_html” and you will append “/userfiles/” after “public_html” to complete the full path.

Find at Line 127 & 128

1
2
$Config['QuickUploadPath']['File'] = $Config['UserFilesPath'] ;
$Config['QuickUploadAbsolutePath']['File'] = $Config['UserFilesAbsolutePath'] ;

Replace With

1
2
$Config['QuickUploadPath']['File'] = $Config['UserFilesPath'] .'file/';
$Config['QuickUploadAbsolutePath']['File'] = $Config['UserFilesAbsolutePath'] .'file/';

Find at Line 134 & 135

1
2
$Config['QuickUploadPath']['Image'] = $Config['UserFilesPath'] ;
$Config['QuickUploadAbsolutePath']['Image'] = $Config['UserFilesAbsolutePath'] ;

Replace With

1
2
$Config['QuickUploadPath']['Image'] = $Config['UserFilesPath'] .'image/';
$Config['QuickUploadAbsolutePath']['Image'] = $Config['UserFilesAbsolutePath'] .'image/';

Find at Line 141 & 142

1
2
$Config['QuickUploadPath']['Flash'] = $Config['UserFilesPath'] ;
$Config['QuickUploadAbsolutePath']['Flash']= $Config['UserFilesAbsolutePath'] ;

Replace With

1
2
$Config['QuickUploadPath']['Flash'] = $Config['UserFilesPath'] .'flash/';
$Config['QuickUploadAbsolutePath']['Flash'] = $Config['UserFilesAbsolutePath'] .'flash/';

Find at Line 148 & 149

1
2
$Config['QuickUploadPath']['Media'] = $Config['UserFilesPath'] ;
$Config['QuickUploadAbsolutePath']['Media'] = $Config['UserFilesAbsolutePath'] ;

Replace With

1
2
$Config['QuickUploadPath']['Media'] = $Config['UserFilesPath'] .'media/';
$Config['QuickUploadAbsolutePath']['Media'] = $Config['UserFilesAbsolutePath'] .'media/';

These fixes allow FCKeditor to upload files, images, flash and media to their directories in “userfiles” and allow the “browse server” button in the “Insert/Edit” window to list files previously uploaded.


FCKeditor Installation Complete
Test the installation by going to osCommerce->Catalog->Categories / Products, select a product and click “Edit” from the right column. You should see an instance of FCKeditor in place for the products description.

fckeditor-products-description


]]> http://www.hektorparis.com/how-to-install-fckeditor-in-oscommerce/feed/ 0 US States List in Select Menu with PHP http://www.hektorparis.com/us-states-list-in-select-menu-with-php/ http://www.hektorparis.com/us-states-list-in-select-menu-with-php/#comments Sat, 18 Apr 2009 19:21:36 +0000 Hektor http://www.hektorparis.com/?p=345 us_states_listCreating a dynamically generated select menu with PHP has some advantages, such as tidier code,  consistency and form validation. The purpose of this tutorial is to show you a quicker way to generate select menu <options> without spending a lot of time hand coding a list that, in this case, may contain 50 entries.

Before the greatest thing since sliced bread, that would be PHP, a select menu list of the states would’ve looked like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>US States List in Select Menu with PHP</title>
</head>
<body>
 <form name="us_states" method="post" action="us_states_list.php">
  <select name="us_states">
   <option value="">Select State</option>
   <option value="AL">Alabama</option>
   <option value="AK">Alaska</option>
   <option value="AZ">Arizona</option>
   <option value="AR">Arkansas</option>
   <option value="CA">California</option>
   <option value="CO">Colorado</option>
   <option value="CT">Connecticut</option>
   <option value="DE">Delaware</option>
   <option value="DC">District Of Columbia</option>
   <option value="FL">Florida</option>
   <option value="GA">Georgia</option>
   <option value="HI">Hawaii</option>
   <option value="ID">Idaho</option>
   <option value="IL">Illinois</option>
   <option value="IN">Indiana</option>
   <option value="IA">Iowa</option>
   <option value="KS">Kansas</option>
   <option value="KY">Kentucky</option>
   <option value="LA">Louisiana</option>
   <option value="ME">Maine</option>
   <option value="MD">Maryland</option>
   <option value="MA">Massachusetts</option>
   <option value="MI">Michigan</option>
   <option value="MN">Minnesota</option>
   <option value="MS">Mississippi</option>
   <option value="MO">Missouri</option>
   <option value="MT">Montana</option>
   <option value="NE">Nebraska</option>
   <option value="NV">Nevada</option>
   <option value="NH">New Hampshire</option>
   <option value="NJ">New Jersey</option>
   <option value="NM">New Mexico</option>
   <option value="NY">New York</option>
   <option value="NC">North Carolina</option>
   <option value="ND">North Dakota</option>
   <option value="OH">Ohio</option>
   <option value="OK">Oklahoma</option>
   <option value="OR">Oregon</option>
   <option value="PA">Pennsylvania</option>
   <option value="RI">Rhode Island</option>
   <option value="SC">South Carolina</option>
   <option value="SD">South Dakota</option>
   <option value="TN">Tennessee</option>
   <option value="TX">Texas</option>
   <option value="UT">Utah</option>
   <option value="VT">Vermont</option>
   <option value="VA">Virginia</option>
   <option value="WA">Washington</option>
   <option value="WV">West Virginia</option>
   <option value="WI">Wisconsin</option>
   <option value="WY">Wyoming</option>
  </select>
  <p><input name="submit" type="submit" value="Submit" /></p>
 </form>
</body>
</html>



The same HTML output can be possible using an array() and the good ol’ echo function in PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>US States List in Select Menu with PHP</title>
</head>
<body>
 <form name="us_states" method="post" action="us_states_list.php">
  <?php
    // Credit for the USA states list as a PHP array belongs to DZone Snippets, thanks mates!
    // http://snippets.dzone.com/posts/show/1038
    $us_states = array('AL'=>"Alabama",  
            'AK'=>"Alaska",  
            'AZ'=>"Arizona",  
            'AR'=>"Arkansas",  
            'CA'=>"California",  
            'CO'=>"Colorado",  
            'CT'=>"Connecticut",  
            'DE'=>"Delaware",  
            'DC'=>"District Of Columbia",  
            'FL'=>"Florida",  
            'GA'=>"Georgia",  
            'HI'=>"Hawaii",  
            'ID'=>"Idaho",  
            'IL'=>"Illinois",  
            'IN'=>"Indiana",  
            'IA'=>"Iowa",  
            'KS'=>"Kansas",  
            'KY'=>"Kentucky",  
            'LA'=>"Louisiana",  
            'ME'=>"Maine",  
            'MD'=>"Maryland",  
            'MA'=>"Massachusetts",  
            'MI'=>"Michigan",  
            'MN'=>"Minnesota",  
            'MS'=>"Mississippi",  
            'MO'=>"Missouri",  
            'MT'=>"Montana",
            'NE'=>"Nebraska",
            'NV'=>"Nevada",
            'NH'=>"New Hampshire",
            'NJ'=>"New Jersey",
            'NM'=>"New Mexico",
            'NY'=>"New York",
            'NC'=>"North Carolina",
            'ND'=>"North Dakota",
            'OH'=>"Ohio",  
            'OK'=>"Oklahoma",  
            'OR'=>"Oregon",  
            'PA'=>"Pennsylvania",  
            'RI'=>"Rhode Island",  
            'SC'=>"South Carolina",  
            'SD'=>"South Dakota",
            'TN'=>"Tennessee",  
            'TX'=>"Texas",  
            'UT'=>"Utah",  
            'VT'=>"Vermont",  
            'VA'=>"Virginia",  
            'WA'=>"Washington",  
            'WV'=>"West Virginia",  
            'WI'=>"Wisconsin",  
            'WY'=>"Wyoming");
   
    // Create the <select> tag and set a default <option> with an empty value      
    echo '<select name="us_states">' ."\n";
    echo '   <option value="">Select State</option>' ."\n";
   
    // Using the foreach function is much better than using the for function to get the array elements.
    // Instead of writing $us_states[$i] as is the case with the for function, you can make each element
    // a variable and assign it its corresponding value
    foreach($us_states as $option => $value)
    {
        echo '   <option value="' .$option .'"';
       
        // If you're validating your form using the same page, this will append "selected" to
        // the <option> after you submit the form. Else just closes the <option>
        echo ($_POST["us_states"] == $option) ? " selected>" : ">";
       
        echo $value ."</option>" ."\n";
    }
   
    echo "  </select>" ."\n";
  ?>
  <p><input name="submit" type="submit" value="Submit" /></p>
 </form>
</body>
</html>

See Demo here.


You can take advantage of dynamically generated HTML by PHP to output just about anything and I recommend it whenever possible.

]]> http://www.hektorparis.com/us-states-list-in-select-menu-with-php/feed/ 0 Website template using PHP http://www.hektorparis.com/website-layout-using-php/ http://www.hektorparis.com/website-layout-using-php/#comments Sat, 11 Apr 2009 22:44:39 +0000 Hektor http://www.hektorparis.com/?p=239 webpage_template1Many times I’ve had to take over a website and update or redesign it. There is nothing more stressful than repetitious work especially when you’re dealing with a website for which the layout was poorly planned and implemented. I recommend creating a template-based website that is easy to maintain and keeps consistency throughout. In this tutorial I will show you how to create a master header with dynamic <title> and <meta> tags as well as a static footer to insert into as many pages as you need to create.



A typical web page might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Page</title>
<meta name="description" content="This is my page" />
<meta name="keywords" content="keyword 1, keyword 2" />
<link type="text/css" href="style.css" />
</head>
<body>
 <div id="header">
  <div id="menu">
   <ul>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
   </ul>
  </div>
 </div>
 <div id="content">
  The quick smart fox jumped over the lazy dog.
 </div>
 <div id="footer">mysite.com</div>
</body>
</html>

Now assume that you need to rename a menu option or insert new header tags. You will spend a lot of time making the same update to all pages that need updating. That’s a lot of work and this method of implementation is prone to inconsistency and mistakes. A better solution would be to create a template in which you insert the header and footer as separate files so you can make updates to these files only once.

header.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
    echo "<title>";
   
    $page = $_SERVER['REQUEST_URI']; //capture the file name
   
    //create a list of all your pages and let the switch() function match the $page variable with the proper title
    switch($page)
    {
        case "/index.php": echo "Home Page";
            break;
        case "/page1.php": echo "Page 1";
            break;
        case "/page2.php": echo "Page 2";
            break;
        //And so forth
    }
   
    echo "</title>" ."\n";
   
    //for the description and keywords meta tags you can use array elements that contain arrays with you meta tags information
    $tags_array = array("/index.php" => array("This is the hompage", "keyword 1, keyword 2"),
                        "/page1.php" => array("This is page 1", "keyword 1, keyword 2"));
   
    //since the meta tag information is within an array you have to use the foreach() function to match the $page variable
    //with the corresponding file name and echo the proper description and keywords. the description will always be in
    //the 0 element of the array and the keywords in element 1
    foreach($tags_array as $file => $properties)
    {
        if($file == $page)
        {
            echo '<meta name="description" content="' .$properties[0] .'" />' ."\n";
            echo '<meta name="keywords" content="' .$properties[1] .'" />' ."\n";
        }
    }
?>
<link type="text/css" href="style.css" />
</head>
<body>
 <div id="header">
  <div id="menu">
   <ul>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
   </ul>
  </div>
 </div>

page.php

1
2
3
<div id="content">
  The quick smart fox jumped over the lazy dog.
 </div>

footer.php

1
2
3
<div id="footer">mysite.com</div>
</body>
</html>

template.php

1
2
3
4
5
<?php include("header"); ?>
 <div id="content">
  The quick smart fox jumped over the lazy dog.
 </div>
<?php include("footer"); ?>

By creating a template-based website you isolate elements that makeup the web page so they can be easily updated. Using PHP to dynamically generate page titles and meta tags will allow you to create SEO friendly web pages that contain only relevant information.

]]> http://www.hektorparis.com/website-layout-using-php/feed/ 0