View demoDownload source

Here’s an implementation of a contact form with PHP and jQuery. Usually, one would only want the message posted by the user to be sent to an email address. This script does that and also saves all these messages in the database for the admin to keep track of them.

The table to store this data is the following:

CREATE TABLE CONTACT(
pk_contact 	INT UNSIGNED NOT NULL auto_increment,
name			VARCHAR(120) NOT NULL,
email 			VARCHAR(120) NOT NULL,
website		VARCHAR(120) NOT NULL DEFAULT "",
message		VARCHAR(300) NOT NULL,
added_date 	TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
primary key(pk_contact)
)type=innodb DEFAULT CHARACTER SET utf8	COLLATE utf8_general_ci;

We will keep track of the name, email, website (optional), the message, and the date when the message was sent. Feel free to change the limits of the fields, but don’t forget to change them as well in the PHP files.

We use jQuery for the front end, and AJAX for submitting the form. All the validations are done on the server side, and the user will be notified when one of the fields is not correct. If the message is inserted into the database, an email is sent to the admin, notifying him about a new message.
We provide two CSS templates for the contact form.

Concerning the installation, all you need to do is run the database script (db_main_script.sql) and configure your database connection in config.php:

define('DB_SERVER', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'ContactForm');

You can also configure the email parameters in this file, like the Email Message Subject.

View demoDownload source

This application aims to show you who your first follower was in twitter. It’s done with PHP and jQuery and of course it uses the twitter API. Two of the available API methods are used : statuses/show and followers/ids. Note that the rate limit is 150 requests per hour (you can increase this) so it might happen that it stops working in some point of time :( For this reason I don’t provide a demo page, but you can download the application, and install it locally or in your web site and give it a try. Anyway, the purpose of this post is just to show you how to do it!

Download source

Here’s an easy way to translate your web site using PHP. The idea is to have several files for each language you want to provide. Each one of these files have the name of the ISO code and the txt extension. For this demo I only use the german language as an alternative to the default language of the site – english. The content of these files are the words / sentences with their translation in the form:

word=translation

The PHP class provided will parse this file, create an array which maps both word and it’s translation pair. You just need to insert the following in your php code :

$translate = new Translator($outputlanguage);//$outputlanguage: ISO code (example: de,en,...) --> these are the names of each file

$translate->__('word to translate');

An example:

<h2><?php $translate->__('Registration'); ?></h2>

and in your de.txt file we would have:

Registration=Registrierung

View demoDownload source

I was wondering how to get images from a site the same way like Digg or Facebook do, where it is only necessary to provide a link, and images get automatically uploaded to your server and resized. So, I decided to create a script that does exactly that and share it here.

This PHP script uses two php classes that I found on the web. One of them I have already used before in the “jQuery Image Cropper with Uploader” and the “Dynamic jQuery Image Gallery with Uploader“, the class.upload from verot . The other is a PHP html DOM Parser that can be found here.

In order to make this work, I had to change some few lines of code in verot’s class, so that URLs can be used to get images.  The DOM Parser is untouched. I also created a file (index.php) where both scripts are called. I first parse the URL, search for images and pass the url of the image to the class.upload script, which then uploads the image to a local directory (images/) and resizes it. In this script, the image size is changed to a width of 150 pixels but the ratio is kept. However, you can change these values and configure it the way you want. Take a look at the documentation of the class.upload so that you know what you can change. Also, you can specify how many images you want to save / display per request.

For the demo which has this blog as “target”, I have configured that only a restricted amount of images are saved and shown. Besides, you might notice that sometimes it displays more images than other times. This is caused by the limited amount of memory configured in the php.ini file (memory_limit), so you might wanna change this value to a proper one if you want to use this script. Again, on verot’s web site, in the forums,  there are some good calculations giving an idea of a suitable value.

View demoDownload source

My next Twitter API experiment: Get the theme’s colors from any Twitter account!

With this PHP and jQuery code you can call the Twitter API and request the RGB color and the background image from a given user. In the provided demonstration you just have to input the username and hit enter – the theme will get loaded. Hover over the color rows to obtain the hexadecimal color values.

Not much said:

View demoDownload source

Today I was playing around with the Twitter API and created this little “widget” using jQuery and PHP. I know, there are already plenty of them, but I wanted to improve some details.

Some of the features are:

• You can get your most recent 100 followers or friends
• Followers or friends are shown in sets of 25 per widget page
• The images of the users are preloaded (unlike in Twitter)
• You can navigate through the set
• You can refresh the entire set
• More information on the user can be seen using a tooltip when hovering over his picture

You can configure and use this in your website to show your followers or friends with some interesting information about them (name, number of followers, number of friends).

A reason why 100 followers or friends are loaded in the beginning is the restriction the Twitter API is giving in the number of results per request. So, in order not to make several requests which would take quite some time, I just get 100. However, you can always click the link to the entire list in the end of the pagination.

The tooltip is created using qTip.

View demoDownload source

Here’s an updated version of the Image Cropper. The upload button was replaced by an overlay on the image. There are also some extra functionalities :

• invert the picture colors
• rotate the image
• sepia
• transforms an image into greyscale

see the DEMO
download the source code here

Please check the updated version here!

Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want to show how to integrate the class.upload and uploadify with the Jcrop script.

The idea is that the user uploads a picture,  selects which area to crop and saves it under a specific directory.
The process then creates two images, one 100×100 and a thumbnail of 50×50. You can easly change the script to create the amount of pictures and sizes you need!

The example here is limited to .jpg images and no more than 800 kb. If you want to add more file types and increase the size, you can configure it when you call the uploadify script (index.php):

'fileExt'         : '*.jpg',
'sizeLimit'      : '819200',//max size bytes - 800kb

and in upload.php:

$handle->file_max_size = '819200'; // max size

Note that an usual error is due to the configuration of the “memory_limit” in php.ini. You should increase this value if you expect to upload larger images.

see the DEMO
download the source code here
Please check the updated version here!

Here’s an updated version of the PHP Login System. You can check the old version here.

The following was added:

1. Registration fields:

• email confirmation
• password confirmation
• country
• recaptcha

Email confirmation and password confirmation are configurable fields. By default they are shown, but if you wish to remove one or both of them you have to set it in the file constants.php:

define("REPEAT_EMAIL",true);
define("REPEAT_PASSWORD",true);

2. Table fields:

• the user ip,
• number of logins of a user,
• flag is_admin
• flag is_blocked
• new table – Country table

3. dbcontroller class sanitizes user input data

4. Edit Account Area

5. Admin Area – incomplete (for next version)

For now just the list of users is shown and a world map indicating where the users come from.  You can delete Users and set them as Admins. If there are no users to list, no map is shown. Also the User seeing the panel is not shown.
Note that in the demo you will not be able to see the admin part – for admin reasons :)

6. New CSS

7. Some other small details in the php code.

For the next version I am planning to :

• add all admin functions
• improve and improve ….

To use the recaptcha you need to get a public/private key here . Then you need to define them in constants.php:

define("PUBLICKEY","XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
define("PRIVATEKEY","XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

In order to use the demo for those who have registered in the previous version’s demo, you need to register again (in the demo login system), since I had to set up another database for it.

Hope you like it. Any suggestions or improvements are welcome!

DEMO

Download the source code here

1. uploadify
2. ad-gallery
3. class.upload.php

click on the image to see a demo

It’s easy to find a lot of good image galleries out there, a lot of upload scripts and thumbnail generators. But I found it hard to find one script that includes them all, so I decided to try to integrate them in one, which is actually what is interesting to have in a site. I basically put them together and added one or two functions to the whole thing, and added some Ajax script to load the pictures.
So now, besides being able to see the gallery, which is pretty cool by the way, you can upload multiple image files (for this demo just jpg and gif, although you can configure what you want) next to it and have them added to the gallery on the fly, after the upload is finished (you can click on “last uploads” in the demo to see the last images). If you don’t want that the images are loaded immediatly after you upload them, then just remove the onAllComplete option in the innitialization of the uploadify plugin, in index.html.
Because this is a demo I limited the pictures size that you can upload to 500kb, and you can just upload 5 at a time. Of course then you can configure this as you like.
For the thumbs and images generator, I use the class.upload.php script  (very nice work), and I call it in the file uploadify.php. There you can configure the way you want your pictures to be generated, both original and thumbnail (for example the sizes, the filenames, the maximum size, if you want that pictures with the same name are replaced …). For this script I generate a hash for the name of the files, which will be always different. You can change that if you want… Remember that the folder where the pictures are stored (images and images/thumbs) should have the right permissions in order for you to upload your files.

I would suggest that you take a look at the possible configurations for each one of the scripts that I used:

• for the class.upload.php here
• for the uploadify here
• for the ad-gallery here

see the DEMO

download source code here

You can find more jQuery Image Galleries here

If you have any suggestions for this script, or if you find some bugs please let me know.