In lesson nine of our CodeIgniter series, we’ll build a small image gallery that allows you to upload files, and automatically create thumbnails.
Catch Up
- Day 1: Getting Started With the Framework
- Day 2: Database Selecting Methods
- Day 3: Sending Emails
- Day 4: Newsletter Signup
- Day 5: CRUD
- Day 6: Login
- Day 7: Pagination
- Day 8: AJAX
- Day 9: File Uploading and Image Manipulation
Day 9: File Uploading and Image Manipulation
Other Viewing Options
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Burak Guzel
Burak Guzel is a full time PHP Web Developer living in Arizona, originally from Istanbul, Turkey. He has a bachelors degree in Computer Science and Engineering from The Ohio State University. He has over 8 years of experience with PHP and MySQL. You can read more of his articles on his website at PHPandStuff.com and follow him on Twitter here.
Join our newsletter!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
sir, i wanted to know if you can create 2 thumbnail with different height and width with ci. i have tried to do so by creating 2 different functions for thumbnail generation and then call it in main upload function but it didn’t work, can u plz provide the easy way for doing it.
is there any helper class from codeigniter to upload image via URL?
It would be great to see a multiple file upload example. Even the CI docs don’t adequately show this. Nice tutorial.
Don’t you need to use Flash to do that?
Why on earth would you need flash to upload multiple files? It’s not a prerequisite for ANYTHING! LOL.
jQUery can do that for you. Try searching for jQUery plugins that has multiple file uploads. you can do it with flash but its not a preruquisite. you can use every available technology.
download video link is dead any way you guys can get it going again?
Where a can find the sql file?
for create tables…
Thanks
the link is broken.. i would like to download it because my internet connection its not so great.. plz.
Quick bit of digging around got me the proper download link:
http://blip.tv/file/get/NETTUTS-CodeIgniterFromScratchDay9668.flv
Not Found
The requested URL /ci_series/gallery was not found on this server.
I get this error. can anybody help me?
Machhindra,
Check your htaccess that came with your CI source files for this tut. Chances are you renamed the folder the application is in, and that htaccess file is still referencing what the author named it.
Hi Adam,
I have same error with Machhindra.
Also, I have checked the folder name. However, I cannot correct it.
Is there any setting to use .htaccess file based on Windows?
jangan slakhan kami donk, kami takan brutal bila thejack bogor tak menjagalkami datang untuk mendukung sepenuhnya,, kami datang bukan untuk membuat onar,,
Hi everyone,
I have same error with Machhindra.
Also, I have checked the folder name. However, I cannot correct it.
Is there any setting to use .htaccess file based on Windows?
Have a good day!!!
Sorry guys!
I solved the problem.
I had to change httpd.conf file.
Hi,
I’ve been researching on how to upload images on the database then view In Codeigniter
Hi, Need to vew my table record from the dropdown list, any idea?
I’ve enjoyed the series so far, but I have a question about this one.
It seems that when I upload a picture, it one doesn’t work, and two when it redirects back to the gallery, it says link broken. It does it with both the code that I typed while going through the tutorial, and also the downloaded source code.
Any thoughts?
Hi all,
Does this image manipulation library supports animation gifs and thumbnails with animation?
Thanks a lot.
You’ve got Codeigniter Intellisense for Aptana – how did you get that? I’ve been searching forever without finding any info on how to get code completion for Codeigniter in Aptana Studio / Eclipse.
Isn’t supposed that models only should handle database interactions?
Even though I wasn’t particularly interested in file and image uploading, it was still useful to watch. You explained things like the .htaccess edit for removing index.php and some css tricks at the end.
At first my script wasn’t working and i checked all your code to find out that i had used a space instead of underscore somewhere; my editor doesn’t always show underscore properly. I like programming, but those little things can be so stressful..
Anyway, thanks for the tutorial!
Skinny controller- fat model? I dont agree with that, models should only handle database actions/params consistency, and controllers should have all of the business logic or am I wrong?
Agreed.
It’s pretty safe to say, however, once you become familiar with the framework and MVC in general, the “what goes where” becomes a bit of a personal preference based on one’s one coding philosophy. Or what when the next deadline is!
Personally, I’d prefer to have much skinnier models (remember you could easily have multiple tables you are referencing which could make these fatter), and then build my business logic in the controllers. That approach, if you think broadly enough, will allow for portability to other sites, with minimal effort.
Phew brilliant tutorial, thank you
@sosamy: thats what I like about CI as a framework, its loosely coupled so nobody has to follow any rigid path.
I personally like skinny Controller/ fat Model. Keeping one end skinny helps me follow whats going on in code when I go back to it months or years later! As to business logic written many times it should be in the Model but I haven’t grasped that concept yet:-) seems to me more the business logic runs across all MVC as a sum total including routing. Someone please correct me if I’m way off on that.
CI follows a MVC model, which at heart separate model (database) from the view (markup) with the controller (logic). Technically you could do logic in the views…but you wouldn’t because that’s the point of having a pattern in the first place.
All of the system files (routing, for example) build the MVC environment. You can’t simply have a single Controller file, Model file, and View file.
You can make skinny controllers simply by utilizing libraries in CI, or parsing out repetitive tasks to private methods within the same class.
hello.
Somebody could solve the problem of htacces? I changed the route of my folder of application, but she leaves the same error to me. Thanks
Can this model be used in a database??
For example to store the images in a database and then if called they can be displayed…
Are you talking about storing images in the a database via binary? Or simply the URL of the image in the database?
Great Tutorial,
CI is my first framework of choice, which over the coming weeks I hope to delv into. The more tutorials I watch on the subject, the more I notice(at least from a glancing view) CI is geared more towards the earlier php5 modules, which is great for people making the transition from php4 procedural…..Or maybe the tutor’s ive watched make it so.
For instance I have not seen many CI tutorials that deal with namespace’s, abstraction, static/public/private vars/methods etc, try/catches, please correct me if im wrong.
Also would’nt it be easier to set the parent div’s overflow to auto/hidden to deal with float problems? Ok it means an extra div but at what cost really?
I have tried several times to install Backendpro in my CodeIgniter but failed. Do any one of you have step by step screen shots images of Backendpro installation. Please help urgently.
I downloaded the source code and it does exactly the same as my own: nothing, it doesn’t give an error and doesn’t upload. I am using XAMPP, anyone a solution to my problem?
Thanks in advance
GM Sir,
I want to upload document file but cant upload so plz help me.
Regards
Mahesh
i need codeignitor to make the comment
Hi, I followed your tutorial and everything works fine until the part that .htaccess file added. I has been getting 500 internal server error so I cant display my images. I am using wamp and codeigniter 2.0.0. Thanks in advance.
Click on the small wamp icon on the right side of your windows taskbar > Apache > Apache Modules > (enable) rewrite_module.
this should get that working.
Nice series….
but got problem in removing index.php
tried every possible alternative, using latest codeigniter 2.0 did some changes like ci_x and __constructor
working when using index.php in the url, but when i removed index.php nothing happen… please tell me where i am doing wrong….
using wamp and windows 7… forget to tell :)
hello sir,
i have problems in uploading video files in ci rather than images…
do you have any suggestions how can i solve the problem?
where is the database? I need the database here, can you help me please?
why if i need to save my image in database? how?
When Im at the place where I define the construct,
function Gallery_model(){
parent::CI_model();
$this->gallery_path = realpath(APPPATH . ‘../images’);
}
I get the error ‘Call to undefined method CI_Model::CI_model()’
What did i do wrong?
Codeigniter has changed since this tutorial was made. I believe its a php5 matter.
try: parent::__construct();
keşke bu serinin türkçe altyazılı veya türkçe olarak da yayınlama şansınız olsaydı.
Altyazıya gerek yok bence zaten gayet açık yaptığı. Zaten çoğu kullandığı terim bilgisayar terimi olduğu için türkçemize girdi.
Hi, everyone!
I have a question. How can I delete some photos or files from that gallery and from my server?
Thanks!
u must use function “unlink()” for delete images or files from gallery
Thank you, very useful for understand the upload and image libraries. I didn’t know the powerful of codeigniter.
Hi!!
These are really high quality tutorial! Thanks Burak…
I wonder why librairiy names are not capitalized when you call them to load, as they are capitalized in the system folder?
Also, I know it’s not the tutorial’s purpose, but when you had to initialize the path_to_full image as an url, you made several changes in your config, but so quick!! In cases like that, please take a few seconds to explain what you’re doing because this can be a nightmare: .htaccess, setting the base url to empty…what?, hey?, where? Why? Ahh, fast rewind, again…uhhhh! Next time, just a few more words, please!!
Sorry, first question: found the answer in the user guide.
Download Link not w0rking :(
Thank you much for these amazing tutorials. I’ve made so much progress in the past 2 months with PHP and codeigniter, and that’s mostly thanks to you guys and the CI community. I do have one suggestion regarding the video tutorials though: a “pop-out video” button on the player. It would make it much easier to follow along. I guess you can always download the video to do that. But the standard player size is too small to see anything and full screen doesn’t allow for me to work at the same time. Just throwing it out there, something to think about. Again, thank you so much for taking the time to bring everyone up to speed with CI.
load->library(‘image_lib’);
$config['source_image'] = ‘images/1.jpg’;
$config['wm_text'] = ‘Copyright 2006 – John Doe’;
$config['wm_type'] = ‘text’;
$config['wm_font_path'] = ‘./system/fonts/tahoma.ttf’;
$config['wm_font_size'] = ’16′;
$config['wm_font_color'] = ‘ffffff’;
$config['wm_vrt_alignment'] = ‘bottom’;
$config['wm_hor_alignment'] = ‘center’;
$config['wm_padding'] = ’20′;
$this->image_lib->initialize($config);
if(!$this->image_lib->watermark()){
echo error_reporting(E_ALL);
}
}
}
Hello,
I am tried to write of images some text for protection with (WATERMARKING) but i have a problem.
The code displays me a number : 6143
load->library(‘image_lib’);
$config['source_image'] = ‘images/1.jpg’;
$config['wm_text'] = ‘Copyright 2006 – John Doe’;
$config['wm_type'] = ‘text’;
$config['wm_font_path'] = ‘./system/fonts/tahoma.ttf’;
$config['wm_font_size'] = ’16′;
$config['wm_font_color'] = ‘ffffff’;
$config['wm_vrt_alignment'] = ‘bottom’;
$config['wm_hor_alignment'] = ‘center’;
$config['wm_padding'] = ’20′;
$this->image_lib->initialize($config);
if(!$this->image_lib->watermark()){
echo error_reporting(E_ALL);
}
}
}
The folder must to have permission 777 ?
Please help me someone with a solution .
Thank you for quickly answer …
Like the email configuration, can I actually put them in a separate file in configs folder?
And also, I think this tutorial needs to be update as well, I tried using this, and it doesn’t work, even though I changed the CodeIgniter classes’ names to CI_{whichever class}.
It works very well for me with a standard CI 2.02. The only thing I had to do is to create images and thumbs folders :-)
… I work with easyphp 5.3.7.0
Thank you Burak and Jeff for these fantastic tutorials. I’m really learning a lot.
I’m having a bit of trouble with this one, though. I’m about halfway through, just testing the upload. It simply refreshes the page, as if it’s worked, but no image appears in my “images” folder. I’ve used print_r to check that the path’s correct, and I’ve tripled checked it against Burak’s code.
Any suggestions?
Apologies, I managed to get it to work. I wrote most of it out again. I’m not sure what I did wrong the first time, but I must’ve had a typo somewhere. Still, a bit scary without any error messages to guide me home!
thx friend for all your tutorials
its work ……thanks
Jeff and buak youguys rock! Iam a java dev and have now gone back to web devthanks to ci and yiur series! But i keep getting these videos cut off obmy tablet! Please fix the direct downloads.also i hope yiu can do one on ci and doctrine 2!thanks!
Sorry to bother but the video download link is down :(
And the video download is so much better than the flash video player!!
WARNING: if you decide to use Aptana Studio 3 and you don’t really know how to use it, it could delete all your project files. It just happened to me.
It actually didn’t delete the actual files but all the code in the files.
What kind of stupid editor would do such a thing ? Aptana of course !!
Here’s the download link…
http://blip.tv/file/get/NETTUTS-CodeIgniterFromScratchDay9959.m4v