Cara menggunakan dimana menyimpan file php?

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Table of Contents Show

Langkah 1 - HTML Dasar
Langkah 2 - Menambahkan Formulir Unggahan File
Langkah 3 - Menambahkan CSS dan JS
Langkah 4 - Menangani Pengajuan Masukan File dengan PHP
Langkah 5 - Daftar File yang Diunggah
Langkah 6 - Fungsi Tambahan
Langkah 7 - Sentuhan CSS untuk Peningkatan Keterbacaan
Langkah 8 - Beralih Visibilitas File dengan jQuery
Langkah 9 - Ucapkan Selamat untuk Pekerjaan yang Dilakukan dengan Baik!
Dimana menyimpan file PHP?
Pada folder Apakah PHP harus di simpan agar dapat di akses?
Bagaimana cara menjalankan file PHP?
Apa itu file PHP?

Dalam tutorial ini, saya akan menunjukkan kepada Anda betapa mudahnya membuat sistem penyimpanan file online dengan PHP. Anda akan belajar cara mengunggah file dengan PHP dan mendaftarkannya dengan memindai folder "uploads".

Perkenalan

Pernahkah Anda berharap bahwa Anda memiliki tempat untuk mengunggah file saat di jalan? Bagaimana jika Anda menggunakan terminal publik atau komputer orang lain dan tidak dapat memasang perangkat lunak pihak ketiga apa pun untuk transfer file?
Bukankah cukup rapi untuk hanya membuka halaman di browser, dan mengunggah file Anda dengan mengklik sebuah tombol?

Ada banyak situs file hosting yang sudah ada di sekitar, tetapi dalam tutorial ini saya akan menunjukkan cara membuat sendiri. Inilah yang akan kita buat:

Langkah 1 - HTML Dasar

Mari kita mulai. Hal pertama yang kita butuhkan adalah dokumen HTML kosong. Saya menggunakan XHTML 1.0 Transitional dengan char set ISO-8859-1. Jika Anda suka, dan tidak memiliki karakter khusus, Anda dapat mengganti ini dengan char set UTF-8.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Online file storage</title>
</head>
<body>

</body>
</html>

Langkah 2 - Menambahkan Formulir Unggahan File

Ok, sekarang kita memiliki file HTML dasar, pada dasarnya kita tidak punya apapun :) Jadi mari tambahkan beberapa konten. Saya akan membungkus semua konten dalam elemen DIV untuk membantu memberi gaya halaman dengan CSS. Tag Fieldset dan Legend mungkin agak jarang, tetapi mereka adalah markup yang pasti untuk mengatur konten ke dalam grup.

Saya telah menambahkan field kata sandi yang akan kita gunakan untuk mengusir pengunggah yang tidak diinginkan, karena kita tidak ingin orang asing mengisi kuota file kita dengan sampah acak.

Perhatikan bahwa berbeda dengan elemen Form harian standar, yang satu ini memiliki enctype yang disetel ke multipart/form-data.
Ini diperlukan untuk mem-POST file dan harus ada di sini. Saya telah mengatur pengubah action untuk menunjuk ke file yang sama ini.
Apa itu artinya adalah setelah formulir dikirim, data formulir akan dikirim kembali ke halaman yang sama.

Field MAX_FILE_SIZE yang tersembunyi adalah untuk PHP dan menentukan ukuran maksimum (dalam byte) yang dapat kita kirimkan. Namun ini tidak akan menimpa pengaturan MAX_FILE_SIZE di file php.ini, jadi itu akan selalu menjadi salah satu yang menentukan ukuran maksimal.

<div id="container">
  <h2>Online File Storage</h2>
	
	<fieldset>
		<legend>Add a new file to the storage</legend>
		<form method="post" action="index.php" enctype="multipart/form-data">
		<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
		<p><label for="name">Select file</label><br />
		<input type="file" name="file" /></p>
		<p><label for="password">Password for upload</label><br />
		<input type="password" name="password" /></p>
		<p><input type="submit" name="submit" value="Start upload" /></p>
		</form>	
	</fieldset>
</div>

Jika kita membuka file di browser, sekarang kita akan memiliki formulir html yang membosankan dan polos. Ini akan mengirimkan konten ke dirinya sendiri tetapi tidak akan tahu apa yang harus dilakukan dengannya.

Kita membutuhkan tempat untuk menampilkan file yang telah kita unggah; jadi tambahkan html berikut di dalam div kontainer di bawah fieldset pertama.

<fieldset>
	<legend>Previousely uploaded files</legend>
	<ul id="menu">
		<li><a href="">All files</a></li>
		<li><a href="">Documents</a></li>
		<li><a href="">Images</a></li>
		<li><a href="">Applications</a></li>
	</ul>
	
	<ul id="files">
	</ul>
</fieldset>

Perhatikan bahwa unordered list dengan id "files" adalah kosong. Jangan khawatir tentang itu sekarang karena kita akan mengisi bagian itu dengan file di server.

Langkah 3 - Menambahkan CSS dan JS

Saya menggunakan jQuery untuk menciptakan kemampuan untuk mengubah visibilitas jenis file tertentu tanpa harus me-refresh halaman.
Ini murni opsional dan menghapus JS akan agak mempercepat pemuatan halaman. Jadi mari kita tambahkan baris berikut ke HEAD dari file HTML.

<style type="text/css" media="all"> 
	@import url("style/style.css");
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

Saya memuat jQuery dari sumber eksternal saat runtime. Sekali lagi jika Anda suka, Anda dapat mengubah ini sehingga file diambil dari sumber lokal dengan baris ini.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

Memuat file langsung dari code.jquery.com memastikan bahwa kita menggunakan versi terbaru dan menghemat bandwidth kita pada setiap pemuatan halaman, tetapi jika server code.jquery.com akan mati atau terlalu penuh, kita mungkin tidak mendapatkan file-nya ketika kita membutuhkannya.

Buat folder baru yang disebut style dan buat file CSS baru di dalamnya dengan nama style.css. Ini akan menjadi file yang memberi tahu browser bagaimana kita ingin halaman itu dilihat. Ada cukup banyak CSS di sini, tetapi cukup sederhana bagi siapa saja untuk diikuti.

Sekarang halaman akan terlihat seperti berikut ini.

@CHARSET "ISO-8859-1";

body
{
	background-color: #cddcec;
	font-family: "Arial";
	font-size: 11px;
}

div#container
{
	width: 600px;
	margin: 0px auto;
	border: 1px solid #e6eef6;
	background-color: #ffffff;
}

div#container h2
{
	background-color: #4b75b3;
	margin: 0px;
	padding: 8px;
	font-family: "Arial";
	font-weight: normal;
	border: 1px solid #3564a9;
}

div#container fieldset
{
	margin: 20px;
	border: 1px solid #98b9d0;
}

ul#menu
{
	list-style-type: none;
	margin: 4px;
	padding: 0px;
}

ul#menu li
{
	float: left;
	margin: 4px;
}

ul#menu li.active
{
	background-color: #98b9d0;
	border-left: 1px solid #3564a9;
	border-top: 1px solid #3564a9;
	border-bottom: 1px solid #e6eef6;
	border-right: 1px solid #e6eef6;
}

ul#menu li a
{
	text-decoration: none;
	font-size: 10px;
	padding: 2px;
	color: #3564a9;
}

ul#files
{
	list-style-type: none;
	margin: 40px 0px 0px 0px;
	padding: 0px;
}

ul#files li
{
	background-color: #fff7c0;
	border-bottom: 1px solid #efefef;
	padding: 2px;
	margin-bottom: 1px;
}

Apa yang seharusnya kita miliki sekarang diilustrasikan dalam gambar berikut.

Langkah 4 - Menangani Pengajuan Masukan File dengan PHP

Mari kita mulai sisi PHP dari tutorial dengan membuat kelas Settings. Di kelas ini kita dapat menyimpan kata sandi pengunggahan serta path file untuk folder unggahan.
Kita kemudian dapat memasukkan kelas ke halaman kita dan menggunakan nilai-nilai itu ketika diperlukan.
Anda dapat menulis file PHP dengan cukup banyak alat yang sama yang Anda gunakan untuk menulis HTML dan CSS, ingatlah untuk menyimpan file dengan akhiran .php.

<?php
/**
 * Class Settings holds the upload settings
 *
 */
class Settings
{
	static $password = "mypassword";
	static $uploadFolder = "uploads/";
}
?>

Tanpa melangkah lebih jauh ke dalam Object Oriented Programming (OOP), apa yang dilakukan oleh kodenya adalah menciptakan kelas baru dengan jenis nilai yang dapat diakses tanpa instansiasi kelas.
Kita sekarang dapat mengakses nilai-nilai itu hanya dengan memanggil Settings::$password; dan Settings::$uploadFolder; Ini juga tempat di mana Anda dapat mengubah kata sandi kapan pun Anda mau.
Tanda <?php dan ?> menandakan wal dan akhir segmen kode PHP. Segmen-segmen ini dapat ditulis di dalam halaman html normal dan server akan menafsirkannya ketika halaman diminta.

Ok, sekarang kita masuk ke bisnis. Dalam file html yang telah kita kerjakan, mari tambahkan hal-hal berikut ke bagian paling atas file. Ya, sebelum tag <head>.

<?php 
//Load the settings
require_once("settings.php");

$message = "";

Pertama-tama kita memberi tahu interpreter PHP untuk memasukkan file pengaturan kita. Saya juga menyiapkan variabel $message baru. Kemudian saya akan menulis informasi proses ke dalam variabel ini dan menampilkannya kepada pengguna.

//Has the user uploaded something?
if(isset($_FILES['file']))
{

Jika formulir telah dikirimkan dengan sebuah file, array $_FILE harus memiliki nilai dengan kunci yang kita gunakan sebagai nama field masukan file.

	$target_path = Settings::$uploadFolder;
	$target_path = $target_path . time() . '_' . basename( $_FILES['file']['name']);

Di sini kita mendapatkan path ke folder unggahan yang ditentukan dalam pengaturan. Pada Baris 2, kita menambahkan (menggabungkan) nama file yang diunggah ke path target.
Perhatikan juga bahwa saya telah menambahkan timestamp server saat ini ke awal nama file. Ada dua alasan untuk saya melakukan ini.
Pertama digunakan untuk menyimpan tanggal dan kedua itu akan memastikan bahwa semua file memiliki nama yang berbeda.
Kita harus menggunakan database di belakang aplikasi ini, penambahan waktu akan ada di sana, dan kita bisa serialisasi nama file dan menyimpan nama asli hanya di tabel database,
tetapi jika tidak ada database, kita bisa menggunakan solusi ini.

	//Check the password to verify legal upload
	if($_POST['password'] != Settings::$password)
	{
		$message = "Invalid Password!";
	}
	else
	{

Jika pengajuan dilakukan tanpa memberikan kata sandi atau jika kata sandi yang diberikan adalah sesuatu selain yang ditentukan dalam pengaturan, kita tidak akan menangani file dan hanya mengembalikan pesan yang menunjukkan kata sandi palsu.

		//Try to move the uploaded file into the designated folder
		if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
		    $message = "The file ".  basename( $_FILES['file']['name']). 
		    " has been uploaded";
		} else{
		    $message = "There was an error uploading the file, please try again!";
		}
	}
}

Ok, jadi kata sandinya benar, sekarang apa? Sekarang kita "menyimpan" file tersebut. Saya katakan simpan dalam tanda kurung karena file sebenarnya sudah ada di server; itu hanya di folder sementara.
Jadi untuk membuat file dapat diakses dan memastikan server tidak akan menghapusnya ketika yang sementara dihapus, kita harus memindahkannya ke beberapa lokasi yang aman. Saya telah menggunakan fungsi move_uploaded_file.
Fungsi ini membutuhkan dua argumen. Pertama adalah nama sementara dari file yang ditetapkan secara otomatis oleh server, dan yang lainnya adalah path target yang kita tetapkan sebelumnya.
Fungsi mengembalikan nilai Boolean yang menunjukkan operasi yang sukses. Sekali lagi kita menetapkan nilai pesan untuk memberi tahu pengguna apa yang terjadi.

if(strlen($message) > 0)
{
	$message = '<p class="error">' . $message . '</p>';
}

Dan itulah cara mudah untuk mengunggah file ke server dengan PHP! Di sini saya baru saja memeriksa apakah ada sesuatu yang telah ditulis ke dalam variabel message (panjang lebih dari 0) dan memformatnya sehingga kita dapat memberinya gaya dengan CSS.

Langkah 5 - Daftar File yang Diunggah

/** LIST UPLOADED FILES **/
$uploaded_files = "";

//Open directory for reading
$dh = opendir(Settings::$uploadFolder);

Hal pertama yang harus dilakukan adalah membuat handle folder. Yang dibutuhkan hanyalah satu perintah. Variabel uploaded_file adalah di mana kita akan menulis nama folder dalam format HTML.

//LOOP through the files
while (($file = readdir($dh)) !== false) 
{

Di sini kita melakukan perulangan melalui file-file di folder. Asalkan kita bisa membaca file selanjutnya di folder ke dalam variabel file kita melakukannya dan melanjutkan. Setelah kita melewati semua file, fungsi mengembalikan false dan mengakhiri perulangan.

	if($file != '.' && $file != '..')
	{

Tanda '.' dan '..' juga dikembalikan oleh fungsi ini jadi kita harus memastikan bahwa kita tidak berusaha melakukan apa pun dengan itu.

		$filename = Settings::$uploadFolder . $file;
		$parts = explode("_", $file);

Kita menambahkan nama file ke path folder unggahan dan menyimpannya sebagai variabel nama file. Lalu kita explode nama file di karakter '_'.
Fungsi ini mengembalikan array string yang memisahkan string asli setiap kali ada sebuah '_'.
Karena ada salah satu karakter tersebut, kita akan menerima array dengan bagian timestamp sebagai sel 1 dan nama file asli sebagai sel 2.

		$size = formatBytes(filesize($filename));
		$added = date("m/d/Y", $parts[0]);
		$origName = $parts[1];

Sekarang kita memiliki nilai timestamp sebagai string itu sendiri, kita dapat memformatnya menjadi tanggal dan menyimpan nama file asli sebagai variabelnya sendiri.
Fungsi filesize yang disediakan oleh PHP mengembalikan ukuran file dalam byte saja, jadi kita akan memformatnya menjadi bentuk yang lebih mudah dibaca dengan fungsi formatBytes, yang dibahas sedikit.

		$filetype = getFileType(substr($file, strlen($file) - 3));
        $uploaded_files .= "<li class=\"$filetype\"><a href=\"$filename\">$origName</a> $size - $added</li>\n";

Ketika mengunggah file ke server, PHP menyediakan kita dengan informasi jenis file, tetapi karena kita tidak memiliki tempat untuk menyimpan informasi itu, kita harus mencoba untuk mendapatkan jenis file dengan fungsi kustom.
Saya memberikan tiga karakter terakhir dari nama file sebagai parameter untuk fungsi getFileType (ditampilkan nanti). Saya menggunakan variabel filetype untuk menata file yang berbeda dengan CSS.
Semua yang tersisa sekarang adalah menghasilkan string HTML dan menambahkannya ke dalam variabel uploaded_files dan menutup handle folder.

	}
}
closedir($dh);

if(strlen($uploaded_files) == 0)
{
	$uploaded_files = "<li><em>No files found</em></li>";
}

Jika tidak ada file yang ditemukan, atur var upload_files untuk menampilkan sebuah pesan.

Kita juga harus menunjukkan string uploaded_files di suatu tempat; jadi tambahkan baris ini di dalam <ul> dengan id 'files'.

<?php echo $uploaded_files; ?>

Langkah 6 - Fungsi Tambahan

Fungsi getFileType mencoba menebak jenis file apa dengan membaca karakter terakhir dari namanya. Ini tidak akan berfungsi dengan ekstensi seperti .jpeg dan .tiff.
Untuk membuatnya lebih universal, kita harus membaca substring dimulai pada tanda titik dan pergi ke akhir nama file.
Tapi kemudian jika namanya adalah sesuatu seperti my.new.car.pic, kita akan mendapatkan new.car.pic sebagai ekstensinya.
Jadi untuk membuat ini benar-benar bekerja kita harus menemukan tanda titik terakhir dalam nama dan mengambil substring dari sana.
Namun untuk ruang lingkup tutorial ini ini cukup dekat.

function getFileType($extension)
{
	$images = array('jpg', 'gif', 'png', 'bmp');
	$docs 	= array('txt', 'rtf', 'doc');
	$apps 	= array('zip', 'rar', 'exe');
	
	if(in_array($extension, $images)) return "Images";
	if(in_array($extension, $docs)) return "Documents";
	if(in_array($extension, $apps)) return "Applications";
	return "";
}

Fungsi selanjutnya ini memformat byte menjadi format yang lebih mudah dibaca. Hanya matematika dasar -- tidak lebih. Fungsi itu sendiri dari komentar fungsi di PHP.net.

function formatBytes($bytes, $precision = 2) { 
    $units = array('B', 'KB', 'MB', 'GB', 'TB'); 
   
    $bytes = max($bytes, 0); 
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024)); 
    $pow = min($pow, count($units) - 1); 
   
    $bytes /= pow(1024, $pow); 
   
    return round($bytes, $precision) . ' ' . $units[$pow]; 
} 
?>

Dan itu untuk bagian PHP. Hanya beberapa JS dan CSS dan kita semua sudah selesai.

Langkah 7 - Sentuhan CSS untuk Peningkatan Keterbacaan

Apa yang kita miliki sejauh ini akan terlihat seperti:

Tetapi untuk memanfaatkan fungsi getFileType dan nama kelas yang dikembalikan, saya telah menambahkan baris CSS berikutnya ke dalam file style.css.

ul#files li a
{
	text-decoration: none;
	color: #3564a9;
	padding: 2px 25px;
	background-position: left;
	background-repeat: no-repeat;
}

ul#files li.Documents a
{
	background-image: url('../images/text.jpg');
}

ul#files li.Images a
{
	background-image: url('../images/picture.jpg');
}

ul#files li.Applications a
{
	background-image: url('../images/zip.jpg');
}

p.error
{
	background-color: #fff7c0;
	border-bottom: 1px solid #efefef;
	font-weight: bold;
	color: #ff0000;
	padding: 6px;
}

Saya menugaskan ikon untuk setiap jenis file. Ikon yang saya gunakan berasal dari koleksi megah yang ditemukan di http://www.famfamfam.com.
Sekarang apa yang seharusnya kita miliki adalah seperti ini.

Ah, jauh lebih baik.

Langkah 8 - Beralih Visibilitas File dengan jQuery

Untuk menyelesaikan sedikit, mari tambahkan beberapa fungsi tambahan dengan JavaScript. Buat folder baru bernama "js" dan di folder itu buat file baru, filestorage.js.
Kemudian tambahkan baris berikut ke akhir halaman HTML tepat sebelum tag </body>.

<script src="js/filestorage.js" />

Ini dianggap praktik yang baik untuk menyertakan jenis file js ini di bagian paling akhir halaman untuk memungkinkan Document Object Model (DOM) dimuat terlebih dahulu.

function HideFiles(selector)
{
	//show all files
	if(selector === "All files")
	{
		$("#files > li").show();
		return true;
	}
	else
	{
		//show only the selected filetype
		$("#files > li").hide();
		$("#files > li." + selector).show();
		return true;
	}	
}

Fungsi HideFiles melakukan dua hal. Jika selektor parameter sama dengan 'All files', fungsi akan melewati semua <li> -item yang ada di dalam <ul> file dan membuatnya terlihat.
Namun, jika beberapa parameter lain diberikan, fungsi menyembunyikan semuanya dan kemudian hanya menampilkan yang dengan nama kelas yang sama dengan parameter.

function prepareMenu()
{ 
	$("#menu li").click( 
		function () {            
			$("#menu li").each(
				function(){
					$(this).removeClass("active");
				}
			);
			$(this).addClass("active");
			HideFiles($(this).children().html());
	    return false;
	});

	//Select the first as default
	$("#menu li:first").click();
}

Fungsi prepareMenu menambahkan fungsi ke event onClick pada menu <li>.
Setelah klik, hapus kelas 'active' dari semuanya dan kemudian tambahkan ke salah satu yang diklik dan panggil fungsi HideFiles dengan teks di dalam elemen <li> yang diklik.
Akhirnya, kita memanggil event onClick pada elemen menu pertama untuk memastikan itu dipilih sebagai default ketika halaman dimuat.

$(document).ready(function()
{
	prepareMenu();
});

Jangan lupa untuk memanggil fungsi prepareMenu ketika halaman dimuat. Ini dapat dilakukan dengan mudah dengan memanggilnya di dalam event document ready seperti yang ditunjukkan di atas.
Sekarang menu "buttons" harus berfungsi dan setelah mengklik mereka daftar file harus berubah.

Langkah 9 - Ucapkan Selamat untuk Pekerjaan yang Dilakukan dengan Baik!

Itu saja! Anda sekarang harus memiliki penyimpanan file online yang berfungsi.
Cukup ingat untuk membuat "uploadFolder," dan ubah CHMOD-nya untuk memungkinkan modifikasi. Instruksi untuk ini dapat ditemukan di seluruh web dan langsung dari penyedia hosting Anda.

Ini telah menjadi tutorial untuk para pemula. Mudah-mudahan itu cukup mendalam tanpa TERLALU jelas.

Terima kasih telah membaca dan berikan komentar jika Anda memiliki pertanyaan.

Ikuti kami di Twitter, atau berlangganan Feed RSS NETTUTS untuk tutorial dan artikel pengembangan web harian lainnya.

Dimana menyimpan file PHP?

File php yang akan dijalankan harus berada di dalam folder C:\xampp\htdocs, baik itu di dalam folder tersebut, atau folder-folder dibawahnya.

Pada folder Apakah PHP harus di simpan agar dapat di akses?

Sebagaimana telah dijelaskan sebelumnya, bahwa file script php harus diletakkan dalam folder htdocs agar dapat dieksekusi oleh server. Dalam keperluan membuat project, maka perlu membuat folder project misal dengan nama "belajar-php" di dalam folder htdocs, sehingga direktori menjadi c:\xampp\htdocs\belajar-php.

Bagaimana cara menjalankan file PHP?

Untuk menjalankan file php, silahkan buka web browser seperti mozilla firefox, chrome, internet explorer atau web browser lain. Kemudian ketik url http://localhost/tutorial/ lalu enter, jika semua sudah benar maka akan tampil seperti gambar di bawah ini.

Apa itu file PHP?

PHP adalah singkatan dari Hypertext Preprocessor, yaitu bahasa pemrograman yang sebenarnya mirip dengan JavaScript dan Python. Perbedaannya adalah, PHP sering kali digunakan untuk komunikasi sisi server, sedangkan JavaScript bisa digunakan untuk frontend dan backend.