Hektor Paris 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 Javascript Form Validation Before Submit http://www.hektorparis.com/javascript-form-validation-before-submit/ http://www.hektorparis.com/javascript-form-validation-before-submit/#comments Fri, 11 Sep 2009 09:32:57 +0000 Hektor http://www.hektorparis.com/?p=771 Validate inputs using javascript before submitting the formClient-side form validation with Javascript is easy to implement and convenient to use as it allows you to verify input fields before submitting the data to a server-side script. Using Javascript to check required form fields is important in avoiding spam, blank submissions and to help you maintain data consistency.

Learn how to validate input fields in HTML forms using a single Javascript function that highlights empty required fields before sending the content off to a PHP script, for example.

See Demo

Required Fields
The validateForm() function below contains a list of conditional statements that check the value of each specified input. If a required field is empty, the CSS class for that input will change to highlight the field in red, then the variable “error” which begins as false, will be set to true to prevent form submission until all required fields are satisfied. Highlighted fields that have been filled out will return to the default CSS class upon re-validating the form. The function below also checks the general syntax of an email address. The input data must contain the @ symbol and a dot (.)

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
function validateForm() {
    var input = document.myForm;    // Your form name
    var error = false;              // No erros by default
   
    // Restore CSS classes to the default so that when the form is re-checked the UI updates
    input.inquiry.className = input.name.className = input.email.className = input.message.className = '';
    document.getElementById('inquiryLabel').className = document.getElementById('nameLabel').className =
    document.getElementById('emailLabel').className   = document.getElementById('messageLabel').className = 'label';
   
    if(input.inquiry.value == 'null') {
        input.inquiry.className = 'inputError';
        document.getElementById('inquiryLabel').className = 'errorLabel';
        input.inquiry.focus();
        error = true;
    }
   
    if(input.name.value == '') {
        input.name.className = 'inputError';
        document.getElementById('nameLabel').className = 'errorLabel';
        input.name.focus();
        error = true;
    }
   
    if(input.email.value.indexOf("@") > 0 && input.email.value.indexOf(".") > 2) {
        // Email address seems well formed
    }
   
    else {
        input.email.className = 'inputError';
        document.getElementById('emailLabel').className = 'errorLabel';
        input.email.focus();
        error = true;
    }
   
    if(input.message.value == '') {
        input.message.className = 'inputError';
        document.getElementById('messageLabel').className = 'errorLabel';
        input.message.focus();
        error = true;
    }
   
    // Submit form if after validation error = false
    if(!error) {
        document.myForm.submit();
    }
  }



Styling
The CSS classes are very simple and use the color red to highlight empty input fields.

1
2
3
4
5
6
7
8
9
10
11
12
13
.label {
    color:#000000;
 }
 
 .errorLabel {
    color:#FF0000;
    font-weight:bold;
 }
 
 .inputError {
    border:1px #FF0000 solid;
    background-color:#FFDDDD;
 }



HTML Form
The form below contains commonly used input types including text, textarea and select.

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
<form id="myForm" name="myForm" method="post" action="test.php">
 <fieldset id="content">
  <legend><b>Javascript Form Validation</b></legend>
  <table width="100%" cellspacing="0" cellpadding="0" border="0">
   <tr>
    <td align="right"><span class="required-field">*</span> Required</td>
   </tr>
   <tr>
    <td>
     <span id="inquiryLabel" class="label">Inquiry Type</span>
     <br />
     <select id="inquiry" name="inquiry_type">
      <option value="null" selected>Select</option>
      <option value="1">Support</option>
      <option value="2">Get a Quote</option>
     </select><span class="required-field">*</span>
    </td>
   </tr>
   <tr>
    <td>
     <span id="nameLabel" class="label">Full Name:</span>
     <br />
     <input id="name" name="ull_name" type="text" size="30" /><span class="required-field">*</span>
    </td>
   </tr>
   <tr>
    <td>
     Website:
     <br />
     <input id="url" name="website" type="text" size="30" />
    </td>
   </tr>
   <tr>
    <td>
     <span id="emailLabel" class="label">Email address:</span>
     <br />
     <input id="email" name="email_address" type="text" size="30" /><span class="required-field">*</span>
    </td>
   </tr>
   <tr>
    <td>
     <span id="messageLabel" class="label">Message:</span>
     <br />
     <textarea id="message" name="email_message" rows="5" cols="40"></textarea><span class="required-field">*</span>
    </td>
   </tr>
   <tr>
    <td align="center">
     <br />
     <input id="submit" type="button" value="Submit" onclick="validateForm()" />
    </td>
   </tr>
  </table>
 </fieldset>
</form>

You will notice that the id tag for required fields is different from its name tag. Javascript utilizes the getDocumentById() method to manipulate the input’s CSS styling, however, your server-side script will use the name tag to process the data entered.

]]> http://www.hektorparis.com/javascript-form-validation-before-submit/feed/ 0 Microsoft is Trashing Your Freedom http://www.hektorparis.com/microsoft-is-trashing-your-freedom/ http://www.hektorparis.com/microsoft-is-trashing-your-freedom/#comments Wed, 26 Aug 2009 19:11:09 +0000 Hektor http://www.hektorparis.com/?p=752 Windows7Sins.orgThe Free Software Foundation (FSF) has recently launched  Windows7Sins.org, an informative website for computer users, outlining the reasons why Microsoft’s inferior software products are “treacherous” and how they’re “trashing” our freedom as computer users.

As Microsoft readies to release yet another version of its monopolistic Windows platform, the FSF has taken on the task of creating a case against Microsoft and its proprietary software. The case is compelling and thought provoking as it argues against the unethical business tactics employed by Microsoft to own you as a computer user and dictate how you conduct basic functions such as update

software, copy files, purchase computers, interact with other computer users, and manage digital media.

The FSF has mailed a letter to Fortune 500 companies arguing the reasons why their companies would benefit  ethically, technically and ultimately financially from switching from Microsoft’s monopoly to open source software solutions such as Linux and OpenOffice.

Click here to read the entire case against Microsoft and proprietary software.

]]> http://www.hektorparis.com/microsoft-is-trashing-your-freedom/feed/ 0 Wireless LAN Detection with NetStumbler http://www.hektorparis.com/wireless-lan-detection-with-netstumbler/ http://www.hektorparis.com/wireless-lan-detection-with-netstumbler/#comments Mon, 15 Jun 2009 06:59:26 +0000 Hektor http://www.hektorparis.com/?p=622 wireless-snifferNetStumbler is a powerful wireless network detection tool available free that can be used to install or troubleshoot a wireless network. When setting up, configuring or troubleshooting a wireless network, knowing detailed technical information such as possible conflicting channels and service set identifiers (SSIDs), can help you complete the job properly and more securely. NetStumbler uses 802.11 a,b,g networking standards, it is compatible with most wireless LAN adapters and runs on Windows 2000, Windows XP or better. Possible applications for NetStumbler include WLAN auditing, WLAN coverage verification, wardriving, antenna positioning and site surveying.

Antenna Positioning – When installing an antenna use NetStumbler to assist you in positioning and aiming the antenna to get the best coverage possible.

Site Survey – When installing or troubleshooting a wireless LAN, it is important to pick locations and channels in such a way that interference is minimized. A site survey typically includes finding out what existing items (microwave ovens, cordless phones, radio hams) are using the radio frequencies as the wireless LAN. A survey should done before installation of a new wireless LAN, and then subsequent surveys should be performed after installation. A full site survey requires special hardware such as an RF spectrum analyzer, but NetStumbler can also be used as part of a site survey.

Wardriving – Detect wireless LANs while moving, walking or in a vehicle, using a laptop or PDA (use of a GPS receiver is highly recommended).

Wireless Coverage Verification - Use NetStumbler to verify signal quality as well as extended coverage beyond the intended area.

Wireless LAN Auditing – Securing a wireless LAN from unauthorized or “rogue” access points setup independently by network users is a task common to network administrators. Using a laptop and walking around the office, an audit can be performed using NetStumbler to detect the presence of a risky exposure to the wireless LAN.


NetStumbler’s List View

The list view contains an item for each BSSID detected. A large amount of information is presented in the columns.

Column Description
MAC The text contains the BSSID for wireless devices. The icon shows the signal strength as reported in the last scan: Gray means the item was not detected, or a colored icon ranging from red to green reports the signal strength. A lock appears in the icon if encryption is enabled on the network. For devices on a wired network segment, the icon shows a T-shaped network cable and the MAC address is displayed.
SSID The reported SSID. This may be blank for access points that report their existence but not their SSID. For wired network items, the SSID is assumed to be the SSID that was associated when the item was discovered.
Name The device’s name. This is reported rarely and only if “Query APs for names” is configured.
Chan All the channels that the device has been seen on. The most recent one is listed first. Before the channel number may be a star (*), which means you are associated with the device, or a plus (+) which means that you were associated with it at some point.
Speed The maximum reported bandwidth for the device (this is not the actual bandwidth). If you are using an 802.11b device, it may misreport the bandwidth of 802.11g networks as 11Mbps. Some devices are capable of 108Mbps but only report 54Mbps.
Vendor The vendor assigned to the MAC, which may not be the actual equipment manufacturer.
Type “AP” for a BSS, “Peer” for an IBSS.
Encryption The word “WEP” will appear on an encrypted network, regardless of whether it is really using WEP.
SNR The current Signal to Noise ratio, either in dB or arbitrary RSSI units.
Signal+ The highest seen Signal value.
Noise- The lowest seen Noise value.
SNR+ The highest seen SNR value.
IP, Subnet The IP configuration of the object, if available.
Latitude, Longitude, Distance If you are using a GPS receiver, this indicates the estimated position of the object. This position is currently the location where the strongest signal was seen, which is never the actual location. Distance is measured from your current position to the object’s estimated position.
First Seen The time or date when the object was first discovered.
Last Seen The most recent time or date when the object was seen.
Signal The current Signal level, either in dB or arbitrary RSSI units.
Noise The current Noise level, in dB. Not supported by all devices.
Flags The 802.11 capability flags, in hexadecimal.
Beacon The 802.11 beacon interval, in Kµs.


NetStumbler Video – Watch this video by SecurityTube to learn more about how NetStumbler works.


Download NetStumbler

]]> http://www.hektorparis.com/wireless-lan-detection-with-netstumbler/feed/ 0 How to Resize Multiple Images at Once http://www.hektorparis.com/resize-multiple-images-at-once-using-photoshop/ http://www.hektorparis.com/resize-multiple-images-at-once-using-photoshop/#comments Sat, 06 Jun 2009 02:26:21 +0000 Hektor http://www.hektorparis.com/?p=591 Image Size in Photoshop CS3Using custom Actions and Image Processor in Photoshop CS3 you can automate image resizing to save time.

In this tutorial you will see how easy it is to create an Action in Photoshop to resize multiple images and even apply filters.



Before you begin
Please note that to automate image resizing, all your “raw” images have to be the same dimension, meaning width and height is the same for all files to be processed. Pixel dimensions are proportionate to the image size of the input file and any variation in dimensions may output an undesirable distorted new image.

About Actions

Actions in Photoshop are a sequence of steps which you record one by one as you edit an image. An action can then be played back on a single file or a batch of files to apply—menu commands, palette options, tool actions, and so on. You can record, edit, customize, and batch-process actions, and you can manage groups of actions by working with action sets.

About Image Processor

Image Processor in Photoshop converts and processes multiple files. You can do any of the following in the Image Processor:

- Convert a set of files to either JPEG, PSD, or TIFF format; or convert files simultaneously to all three formats.
- Process a set of camera raw files using the same options.
- Resize images to fit within specified pixel dimensions.
- Embed a color profile or convert a set of files to sRGB and save them as JPEG images for the web.
- Include copyright metadata into the converted images.
- Works with Photoshop (PSD), JPEG, and camera raw files.

Let’s begin!

Organize the image files to be resized by placing them in a “source” folder if you havent’ already done so. Launch Photoshop then go to:

Window->Actions or use keyboard shortcut Alt+F9

Show Actions



This will activate the Actions palette in your Workspace so you can begin building an Action.

Click Create New Action from the Action palette and give it an unique name that describes the purpose of this Action.

Create new action

Create Action

This will create an Action set under the Default Actions folder of the Actions palette.

Photoshop Action


Next, open a “raw” sample image from your “source” folder and from the Actions palette, click Record

Record Action


As the name implies, the Record function will create a record of all operations performed on the image you’ve opened. It is this set of “steps” in form of an action that will be used by Image Processor to resize your images. Next, go to the Image menu and click Image Size, specify the desired Width and Height and click OK

Image Size menu


Image Size window


If you would like to apply any filters, click the Filter menu and proceed to edit the image knowing that any filters you use will be recorded and applied to subsequent images. After you finish editing the image, click Stop from Actions palette to halt further recording of operations. Close the image without saving any changes.

Stop Action


Go to File->Scripts->Image Processor…

Scripts Menu


From the Image Processor window in step 1 click Select Folder… to specify the source folder containing the “raw” images to be processed. In step 2 click the second radio button to activate and click the Select Folder… button to specify the destination folder for your resized images. Next, in step 3 select the output File Type for your images. In this example I am saving all images as JPG with a high quality of 11 (maximum quality is 12). Finally, click the Run Action checkbox and from the second dropdown menu adjacent to Default Actions select the name of the Action you created earlier. Begin the automation process by clicking Run.

Image Processor window


Photoshop will now apply the set of Actions you’ve recorded in form of Image Resize and Filters (if any) to your “source” folder images and output JPGs to your specified “destination” folder, leaving the originals untouched.

]]> http://www.hektorparis.com/resize-multiple-images-at-once-using-photoshop/feed/ 0 Botticelli’s La Primavera http://www.hektorparis.com/botticellis-la-primavera/ http://www.hektorparis.com/botticellis-la-primavera/#comments Wed, 03 Jun 2009 06:06:00 +0000 Hektor http://www.hektorparis.com/?p=560 Botticelli's La PrimaveraLa Primavera (c. 1482), an Early Renaissance masterpiece by Sandro Botticelli, is a captivating illustration of Greek mythology icons that restarted my interest in the ancient Greek and Roman legends. I was fortunate enough to receive a canvas print of La Primavera from Eddie Shabot, owner of ArtMaster Galleri and co-founder of Tatoot.

Born Alessandro Di Mariano Filipepi in 1445 Florance, Italy; Botticelli or Il Botticelli (“The Little Barrel”) was an Early Renaissance artist whose resume includes portraits for the powerful Medici family and wall frescoes in the Sistine Chapel of the Vatican.


Botticelli’s most famous masterpieces though are La Primavera and The Birth of Venus (c. 1485). They are among the most recognizable paintings of Florentine art.

La Primavera

Hermes and the Three Graces in Botticelli's La Primavera


Housed at the Uffizi Gallery of Florence in Italy, La Primavera (spring in Italian) is a tempera painting (measuring 80″ x 124″) that is assumed to have been painted for Lorenzo di Pierfrancesco de’ Medici c.1482. La Primavera masterfully illustrates in life-size the gathering of key Greek mythology gods in a Garden of Eden type scenario, that is open to interpretation.

Hermes, god of fortune and messenger to Zeus, stands in the far-left holding his caduceus with which he impedes a god of wind from hovering above the gathering. The Three Graces who are goddesses of grace, beauty and joy, stand next to Hermes while holding hands and dancing in a circle.


Cupid, Venus, Chloe and Zephyrus


Eros, god of love, is center-top depicted as a plump infant (though he is sometimes shown as a handsome youth) holding his bow and arrow. Below Eros is Aphrodite, goddess of beauty, shown in full dress as opposed to being nude which is how she is typically illustrated, as is the case with Botticelli’s The Birth of Venus. Adjacent to Aphrodite is Flora, goddess of flowers and the season of spring, wearing an elaborate dress decorated with flowers. Next to last is the Nymph Chloris who is associated with spring, flowers and new growth, trying to avoid being kidnapped by Zephyros, god of the west wind.

Download high resolution (2000×1419 pixels)

Botticelli’s La Primavera: Myths or Fingerprints?

I found this YouTube video in which  Gombrich, Hope, Dempsey and others explore the meaning and provenance of Botticelli’s La Primavera. Enjoy!

]]> http://www.hektorparis.com/botticellis-la-primavera/feed/ 0 Dell Latitude E5500 Impression http://www.hektorparis.com/dell-latitude-e5500-impression/ http://www.hektorparis.com/dell-latitude-e5500-impression/#comments Thu, 28 May 2009 06:52:54 +0000 Hektor http://www.hektorparis.com/?p=542 My Dell Latitude E5500The Dell Latitude E5500 is a functional, stylish and budget-friendly laptop great for everyday practical use. Dell Latitude computers are corporate class laptops designed and engineered for mobility, performance and reliability while maintaining essential features such as portability, battery life and commonality.

I am a repeat customer of the Dell brand, especially the Latitude family, for the simple reason that even the most economical Latitude laptop is well-equipped to perform daily tasks such as Internet, email, photo editing, web development, multimedia and more.

The design of this model laptop is appealing because, in the case of my E5500, the black body frame is esthetically pleasing, the keyboard layout is practical and it’s not too different from my old C840 (R.I.P), computer ports are conveniently located so they can be easily accessed from either side without having to reach behind the LCD.


Another noticeable improvement in the E5500 is that it befits the definition of a laptop, meaning you can place it on your lap for an extended period of time without it burning you. Better heat dissipation is complimented by a decrease in weight, compared to my C840 which weighed nearly 10 lbs, my configuration is about 4 lbs lighter.

If I could change anything about the E5500, I would improve the clonky keyboard,  offer Ambient sensor software for Windows XP, cover up the dock port at the base to protect it from shit gettin’ all up in there, upgrade to an UltraSharp LCD and install better speakers.

My Dell Latitude E5500

Processor: Intel Core 2 Duo P8600 (2.40GHz, 3M L2 Cache, 1066MHz FSB)
Operating System: Microsoft Windows XP Professional
BIOS Version/Date: A11, 4/15/2009
Hard Drive: 80GB, 5400 RPM, 9.5 WD-ML160
LCD: 15.4 inch Wide Screen WXGA+ Anti-glare LCD Panel
Graphics: Mobile Intel® Graphics Media Accelerator 4500MHD
Memory: 2.0GB, DDR2-800 SDRAM, 1 DIMM
Optical Device: 24X CD-RW/DVD w/ Cyberlink PowerDVD
Wireless LAN: Dell Wireless 1397 802.11b/g Mini Card
Battery: 6 Cell Battery
AC Adapter: 90W A/C Adapter (3-pin)

]]> http://www.hektorparis.com/dell-latitude-e5500-impression/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 WD My Book 1 Terabyte HD Review http://www.hektorparis.com/wd-my-book-essential-edition-1-terabyte-hd-review/ http://www.hektorparis.com/wd-my-book-essential-edition-1-terabyte-hd-review/#comments Tue, 12 May 2009 08:08:12 +0000 Hektor http://www.hektorparis.com/?p=386 western-digital-my-book-essential-edition-1-terabyteA dear friend of mine got me a present that will sure last me for a long time. I received a Western Digital My Book Essential Edition 1 terabyte external hard drive. It is sleek, black, has a neon blue LED in the front and it’s easy to carry or fit in just about any space the size of a typical paperback book. I am happy with how simple it is to use My Book.

It works out of the box which includes the hard drive, an USB 2.0 cable and AC adapter. No waste of CD’s with product utilities because all the software you need comes pre-installed on the drive itself (good idea). The hard drive is also “smart” enough to be energy efficient and power on and off with my computer. With a prestigious brand name like Western Digital I know from experience this product is built to last, will pay for itself and will work every time.

The drive’s pre-installed WD Application Installer is a bundle of four programs including:


Google Desktop, Picasa and the Google Toolbar

Memeo AutoBackup (30 day trial) which is a one-time setup, backup application that allows you to preserve your data files with around-the-clock protection. Features include multiple destination backup and simple, intuitive file recovery.

Memeo AutoSynch (30-day trial) which safeguards your files using encryption with its simple, flexible sync plan setup and allows you to keep your latest work with you at all times.

And Copy Application Software which is a standard utility that allows you to back up the valuable software included on My Book to your internal drive.

wd-my-book-essential-edition-setup-software



My Book is compatible with Windows 2000/XP/Vista and Macintosh OS X 10.4.8+ and can only be used via USB. It is recommended that you have the latest service pack for Windows or Software Updates from Apple to enjoy your My Book out of the box. Since My Book is compatible with Windows and Macintosh the drive is preformatted as a single FAT32 partition. According to the User’s Manual the FAT32 file system has a maximum individual file size of 4 GB and the device cannot create partitions larger than 32 GB in Windows 2000/XP, but this limitation can be overcome by reformatting the drive to NTFS file system using the Disk Management utility.

Whether you’re a student, professional or occasional computer user, and especially if you’re a business owner, I strongly recommend you consider making a habit of backing up your files. I worked in IT for 5 years and I know firsthand the frustration and economic impact of data loss. Unfortunately hardware has a lifetime that may exceed its expectations or fail prematurely, but in case shit happens you should always have a backup, if anything for piece of mind. Fortunately for consumers and the IT industry the manufacturing costs of mass storage drives and devices are low enough that you can purchase a 1 TERABYTE (1,000 gigabytes) hard drive for less than $100 bux.

]]> http://www.hektorparis.com/wd-my-book-essential-edition-1-terabyte-hd-review/feed/ 0