Nov 20, 2014

Create Stylish Bootstrap 3 Social Media Icons | How-To Guide

Posted by VP Tags: , , Be the first to comment!
twitter-bootstrap-3-social-media-icons

Hi, I’m going to show you how to create bootstrap 3 social media icons without images. Yes! We are going to use an icon font library called Font Awesome. It is a scalable vector icon font which is supported by all modern browsers and IE version of 8 or above. It can be used to add social media buttons (ex., Login with Facebook button) or social media icons for websites without images. Also it’s fully compatible with Twitter Bootstrap 3 and we’ll see how to use it for adding social media icons in bootstrap websites.

Nov 10, 2014

How to upload files in php

Posted by VP Tags: , , Be the first to comment!
how to upload files in php

File upload using PHP is a much discussed topic in web. It is one of the vulnerable spot of any website, and its security will be breeched if not handled properly. So understanding how to upload files in php in a secure way is a must for anyone who wants to learn php web development. No worries. Here is the way you can upload files using php more securely by providing appropriate filters.

Before starting, just make sure if your web server allows file uploading. Check for this line in the server's php.ini file.

file_uploads = On

If it is not set, then set it to 'On'.

How to Upload Files in PHP Securely

First let's create the html form for uploading the file. Add a file input and a submit button to the form. The file input is made especially to aid file uploading process, which comprises of a text box and a browse button. The user should click on the browse button to choose the file for uploading and the name of the selected file will be displayed in the nearby textbox.

We have to set the html form attributes, method="post" and enctype="multipart/form-data". The enctype stands for encryption type and should be set to "multipart/form-data" to upload files in php.

Here goes the html code for our php file upload form.

<form action="file_upload.php" name="uploadform" method="post" enctype="multipart/form-data">
    <input type="file" name="txt_filename" />
    <input type="submit" name="submit" value="Upload File" />
</form>

Next we'll move on to the PHP file upload script part. PHP does uses an associative array called "$FILES" where it stores all the information about the file selected by the user in the file input. Here are the properties of the array.

  1. $_FILES['file']['tmp_name'] - the temporary path of the uploaded file on the web server.
  2. $_FILES['file']['name'] - it's the actual name of the uploaded file.
  3. $_FILES['file']['size'] - uploaded file size in bytes.
  4. $_FILES['file']['type'] - MIME type of the uploaded file (ie, file extensions type).
  5. $_FILES['file']['error'] - if there is any error in the file uploading process, then the error code will be stored here.

As I said earlier in this article, we have to make sure the user uploads the proper file and not some malicious exe files or codes. So your php file upload script should always keep a check on the type of files that should be allowed for uploading by a user. For this tutorial sake, I'll set filters such as,

  1. The uploaded file type should be plain text or pdf files.
  2. The file size should not exceed 100KB.

Note: I'm just using these conditions for this tutorial purpose, but you can set your own filters like allowing only image files for uploading (eg., in case of user avatar field). The php image uploader script will be the same as the file upload code given in this tutorial, except that you have to check against the mime types of the images.

Here is the php script for file upload.

<?php
$submit = $_POST['submit'];

//check if form submitted
if ($submit=="Upload File")
{
    //get file name
    $filename = $_FILES["txt_filename"]["name"];

    //set target directory
    $target_path = "uploads/";
    
    //upload file
    if($filename!="")
    {
        //check if file type is of text or pdf, and of size less than 100KB
        if ((($_FILES["txt_filename"]["type"] == "application/pdf") || ($_FILES["txt_filename"]["type"] == "text/plain")) && ($_FILES["txt_filename"]["size"] <= 100000))
        {
            move_uploaded_file($_FILES["txt_filename"]["tmp_name"],($target_path . $_FILES["txt_filename"]["name"]));
            echo "File Uploaded Successfully!";
        }
        else
        {
            echo "Error!";
        }
    }
}
?>

As you can see in the code, we used the conditions, $_FILES["txt_filename"]["type"]=="application/pdf" to check for the pdf file and $_FILES["txt_filename"]["type"]=="text/plain" to check for text file.

Here is the list of some other MIME types you can use for checking the different file extensions.

  1. image/jpeg - "*.jpeg"
  2. image/jpg - "*.jpg"
  3. image/gif - "*.gif"
  4. image/tiff - "*.tiff"
  5. image/png - "*.png"
  6. text/html - "*.html"
  7. text/css - "*.css"
  8. text/xml - "*.xml"
  9. text/json - "*.json"
  10. application/excel - "*.excel"
  11. audio/mp3 - "*.mp3"
  12. audio/wav - "*.wav"
  13. video/mpeg - "*.mpeg"
  14. application/zip - "*.zip"

We have used a php function move_uploaded_file(), which is to move the file from temporary directory to the target directory. Save the above piece of code in a separate php file and set the html form's action attribute to point to this file and you are done.

Hope now you have an idea on how to upload files in php in a more proper way. As I have said before, always handle the uploading process with care without compromising your website's security.

If you find this secure and simple PHP File Upload Tutorial useful a Twitter tweet or Facebook share will be appreciated.

Oct 28, 2014

How to Create Login Form in CodeIgniter, MySQL and Twitter Bootstrap

Posted by VP Tags: , , , Be the first to comment!

Hi I'm back with another CodeIgniter MySQL Tutorial. In this post, we'll see How to Create Login Form in CodeIgniter and MySQL Database. For UI Design purpose, we'll use Twitter Bootstrap 3 CSS Framework. Twitter Bootstrap has ready to use HTML Form Components which we use to style our codeigniter login form in seconds.

How to Create Bootstrap Accordion Menu

Posted by VP Tags: , , Be the first to comment!
bootstrap-accordion-menu

Hi, in this tutorial we'll see how to create Bootstrap Accordion Menu with example. Accordion is one of the important components of Twitter Bootstrap3 Framework, and is a stacked list of items such as windows, buttons, labels, thumbnails etc which can be expanded and collapsed though only one accordion window will be visible at a time.

Sep 22, 2014

Image Lightbox Effect with jQuery

Posted by VP Tags: , , , Be the first to comment!
Image-Lightbox-effect-jquery

LightBox is a popup window that is used to open image, html contents & other multimedia stuffs. In this tutorial I will show you how to add such lightbox effect to images with jQuery plugin, FancyBox. FancyBox plugin lets you produce clean and elegant lightbox effect with smooth animations. Download the latest version of the plugin here, extract the contents and move the folder 'source' to your working folder.

Sep 11, 2014

Stylish Bootstrap Sidebar Menu

Posted by VP Tags: , , Be the first to comment!
Bootstrap-Sidebar-Menu-Tutorial

Earlier in one of our tutorials we've discussed about Creating Bootstrap Horizontal Navbar. In this tutorial we'll see How to Create Bootstrap Sidebar Menu. The Sidebar Menu or otherwise called as Vertical Navigation Menu is a list of menu items or links, stacked vertically. It can be placed left or right hand side of the website. Apart from the appearance, it is very similar to horizontal menu and is used to provide easy way of navigation through the website.

Aug 31, 2014

How to Add Stunning 3D CSS Photo Frame Effect to Images

Posted by VP Tags: , , Be the first to comment!
css-photo-frame-effect-border

Hi, we’ll see how to add a stunning 3D CSS Photo Frame Border Effect to Images on mouse hover in this tutorial. Adding some fancy border effects to images will spice up the look of the images used in website. Doing so doesn't need any image processing software’s like Photoshop. With CSS3, now we can add such image border effects easily with few lines of code.

Contact Form

Name

Email *

Message *