How To Implement Auto Rename On Your Upload Website Using PHP-MySQL

in #utopian-io7 years ago (edited)

What Will I Learn?

  • You will learn how to auto rename any file you has uploaded on your web
  • You will learn how to create uploade action
  • You will learn how to connect your web to database
  • You will learn how to show data on your database to your web page

Requirements

  • you must understand basic of PHP programming
  • you must know about SQL query
  • you must know how to implement bootstrap desain

Difficulty

  • Basic

Tutorial Contents

this time we will make the auto rename action when you upload your file to a web, the point is file will continue in sequence based on ID, so we will easy when we want to find a file that we have uploaded.

  • the first step you should do is create a database where the file storage we have uploaded.
    image
    you can directly create via the MySQL GUI

  • then we will create a main page, type the script below and save it with the name main.php.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAagagfs8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crosorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-4">
<br/><br/><br/>
<form action="action.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
<div class="form-group">
<p><h2><span class="label label-warning">SELECT PICTURE :</span> </h2><br/><br/><input type='file' name='filegbr' id='Filegambar'></p>   
</div>
<div class="form-group">
<input type="submit" name="Submit" value="Upload" />
</div>
</form>
</div>
<div class="col-md-4"></div>
</div>
</body>
</html>
<body background="background.jpg">
  • the above code will display image like this
    image

  • I will explain a bit of the script function above.

  • this is the script link for the design of our web page<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwegxhjVME1fgjWPGmkzs7" crosorigin="anonym">make sure you are online while running php file above.

  • then, this is the script that will take us to the action.php page when pressing the upload button.

<form action="action.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
  • and this works to add a background image on our web page
<body background="background.jpg">
  • then for the action we will create a file with action.php name
  • type the code below and then I will explain at the bottom later.
 <html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hghfhDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<?php
include "connect.php";
$namafile= $_FILES['filegbr']['name'];
{ $jenis_gambar=$_FILES['filegbr']['type']; 
$namafolder="gambar/"; 
if (!empty($_FILES["filegbr"]["tmp_name"]))
    if($jenis_gambar=="image/jpeg" || $jenis_image=="image/jpg" || $jenis_image=="image/gif" || $jenis_gambar=="image/png")
    { $lampiran = $foldername . databasename($namafile);  
        if (move_uploaded_file($_FILES['filegbr']['tmp_name'], $draft)) 
        {$query_insert = "INSERT INTO datapic (img)
            VALUES ('$filename')";
            $insert = mysql_query($query_insert);
            $data = "SELECT id,img from datapic order by id desc limit 1";
            $bacadata = mysql_query($data);
            $select_result = mysql_fetch_array($readdata);          
            $id    = $select_result['id'];
            $img = $select_result['img'];
                if ($insert)
                {
                $updatename = "UPDATE datapic SET new_name = CONCAT(id, '-',img)";
                $rename     = mysql_query($update_name);        
                $dash = '-';                
                rename($draft,$foldername.$id.$dash.$img);}
                else
            echo"
            <br/><br/><h2><span class='label_label-succes'>image has been saved</span></h2> <br/>
            FIRST NAME : $img <br/>
            NEW NAME: $newname <br/>
            <img src='$namafolder$newname' height='300'>";  
        } else {echo "image failed to upload";}
   } else {echo "wrong format. Harus .jpg .gif .png";}
} else {echo "you not select iamge to upload";}
?>
</div><div class="col-md-4"></div></div></body></html>
<body background="background.jpg">
  • This section serves to insert data into the database:
{$query_insert = "INSERT INTO datapic (img)
            VALUES ('$namafile')";
            $insert = mysql_query($query_insert);
            $data = "SELECT id,img from datapic order by id desc limit 1";
            $bacadata = mysql_query($data);
            $select_result = mysql_fetch_array($bacadata);          
            $id    = $select_result['id'];
            $img = $select_result['img'];
  • this is the main function that will make auto rename on the file we upload:
$bacanm = "SELECT newname from datapic order by id desc limit 1";
$baca   = mysql_query($bacanm);
$select_result = mysql_fetch_array($baca);          
$newname    = $select_result['newname'];
  • then we will create a script that works to connect our web with the database we have created.
<?php
$host = "localhost";
$username = "root";
$password = "";
$databasename = "rename";
$connection = mysql_connect($host, $username, $password);
mysql_select_db($databasename, $connection) ;
?>
  • customize the name of your database in this section.
    $databasename = "rename";
  • okay, all the script has been made, then we try to run the web we have created.
  • type the file name in your browser's search field.
    image
    select one image as an experiment

  • then press the upload button, it will look like the picture below.
    image
    names have been changed by adding IDs automatically and will continue in sequence

  • then we see whether the image has been saved to the database.
    image
    the image we upload has entered into the database

  • oke the tutorial is done, please try.


THANK'S FOR VOTE, COMMENT, AND FOLLOW


Curriculum



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Your contribution cannot be approved because it does not follow the Utopian Rules.

  • Low quality post
  • Mixing Turkish and English
  • Not original content

It is very similar to http://www.bayuajie.com/blog/2016/06/script-php-form-dengan-upload-image/ and possibly another source

You can contact us on Discord.
[utopian-moderator]