Tampilkan postingan dengan label CODING. Tampilkan semua postingan

upload limit Pesan "Request Entity Too Large"

Juli 31, 2024 By SNH NET , , 0 Comments

 Pesan "Request Entity Too Large" biasanya terjadi karena ukuran file yang diunggah melebihi batas yang diizinkan oleh server. Untuk mengatasi masalah ini di server Apache dan PHP, Anda perlu mengkonfigurasi beberapa pengaturan di file konfigurasi PHP (php.ini) dan file konfigurasi Apache (httpd.conf atau .htaccess).

Berikut adalah langkah-langkah yang dapat Anda lakukan untuk menyelesaikan masalah ini:

1. Mengubah Pengaturan php.ini

  1. Temukan file php.ini:

    • File php.ini biasanya terletak di folder instalasi PHP. Jika Anda menggunakan XAMPP, file ini berada di folder C:\xampp\php.

  2. Edit php.ini:

    • Buka file php.ini dengan editor teks seperti Notepad.
    • Cari parameter berikut dan ubah nilainya sesuai dengan kebutuhan Anda. Pastikan nilai yang Anda tetapkan cukup besar untuk file yang akan diunggah:
      ini
      upload_max_filesize = 100M
post_max_size = 100M
    • Simpan perubahan dan tutup file php.ini.

2. Mengubah Pengaturan httpd.conf atau .htaccess

  1. Edit httpd.conf:

    • Buka file httpd.conf dengan editor teks. File ini biasanya berada di C:\xampp\apache\conf.
    • Tambahkan atau edit directive berikut untuk mengizinkan ukuran unggahan yang lebih besar:
      apache
      <IfModule mod_php7.c>
    php_value upload_max_filesize 100M
    php_value post_max_size 100M
</IfModule>
    • Simpan perubahan dan tutup file httpd.conf.

  2. Menggunakan .htaccess (alternatif jika Anda tidak ingin mengedit httpd.conf):

    • Buat atau edit file .htaccess di direktori root proyek Anda (misalnya C:\xampp\htdocs\upload-ai).
    • Tambahkan baris berikut ke file .htaccess:
      apache
      php_value upload_max_filesize 100M
php_value post_max_size 100M

3. Restart Apache

Setelah mengubah pengaturan di php.ini dan httpd.conf atau .htaccess, Anda perlu merestart server Apache agar perubahan dapat diterapkan. Anda bisa melakukannya melalui XAMPP Control Panel dengan menghentikan dan memulai kembali modul Apache.

4. Memperbaiki Kode PHP untuk Menangani Unggahan

Pastikan kode PHP Anda menangani unggahan file dengan benar. Berikut adalah contoh sederhana upload.php yang diperbaiki:

php
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_FILES['upload_file']) && $_FILES['upload_file']['error'] == 0) {
        $upload_dir = 'uploads/';
        $uploaded_file = $upload_dir . basename($_FILES['upload_file']['name']);
        
        if (move_uploaded_file($_FILES['upload_file']['tmp_name'], $uploaded_file)) {
            echo "File uploaded successfully.";
        } else {
            echo "Uploading file failed.";
        }
    } else {
        echo "No file was uploaded or there was an error uploading the file.";
    }
} else {
    echo "Invalid request method.";
}
?>

5. Uji Kembali Unggahan

Setelah melakukan semua langkah di atas, coba unggah kembali file dengan ukuran besar untuk memastikan semuanya berfungsi dengan benar.

Dengan mengikuti langkah-langkah tersebut, masalah "Request Entity Too Large" dan kesalahan undefined index pada file upload di PHP seharusnya dapat teratasi.

 Read more

upload ukuran 5gb xampp

Juli 31, 2024 By SNH NET , , 0 Comments


Untuk mengubah kode agar dapat mengunggah file hingga 5 GB menggunakan jQuery AJAX dan PHP, Anda perlu memastikan beberapa hal:

  1. Pengaturan di PHP:

    • Ubah pengaturan upload_max_filesize dan post_max_size di file php.ini agar mendukung ukuran file besar.
    • Pastikan max_execution_time cukup tinggi untuk menghindari timeout selama pengunggahan file besar.

  2. Kode JavaScript dan HTML:

    • Tidak perlu perubahan signifikan di JavaScript atau HTML kecuali Anda ingin menambahkan validasi ukuran file di sisi klien.

Berikut adalah langkah-langkah detailnya:

1. Ubah Pengaturan di PHP

Edit file php.ini dan tambahkan atau ubah baris berikut:

ini
upload_max_filesize = 5G
post_max_size = 5G
max_execution_time = 6000
max_input_time = 6000

Setelah mengubah php.ini, pastikan untuk me-restart server web Anda (misalnya, Apache atau Nginx) agar perubahan diterapkan.

2. Validasi Ukuran File di Sisi Klien (Opsional)

Anda dapat menambahkan validasi ukuran file di sisi klien untuk memastikan file tidak lebih besar dari 5 GB sebelum diunggah.

Kode Lengkap dengan Validasi Ukuran File

html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Upload File dengan Progress Bar menggunakan jQuery AJAX di PHP</title>
	<link href="style.css" rel="stylesheet">
	<link href="progress-bar.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body id="top">

	<header id="header">
		<div class="content">
			<h1>Demo</h1>
			<p>Upload File dengan Progress Bar<br />
			menggunakan jQuery AJAX di PHP</p>
			<ul class="actions">
				<!-- Form upload file -->
				<form id="uploadForm" enctype="multipart/form-data">
					<input type="file" name="file" id="fileInput">
					<input type="submit" name="submit" value="UPLOAD"/>
				</form>
				
				<!-- Progress bar -->
				<div class="progress">
					<div class="progress-bar"></div>
				</div>
				
				<!-- Menampilkan status upload (sukses/gagal) -->
				<div id="uploadStatus"></div>
				
			</ul>
			<small><a href="http://codingan.com/upload-file-dengan-progress-bar-menggunakan-jquery-ajax-di-php">Tutorial</a></small><br><br>
		</div>
	</header>

</body>

<script>
$(document).ready(function(){
    // upload file via AJAX
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();
        var file = $('#fileInput')[0].files[0];
        var maxSize = 5 * 1024 * 1024 * 1024; // 5 GB
        
        if(file.size > maxSize){
            alert('File terlalu besar. Ukuran maksimum adalah 5 GB.');
            return false;
        }
        
        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = ((evt.loaded / evt.total) * 100);
                        $(".progress-bar").width(percentComplete + '%');
                        $(".progress-bar").html(percentComplete.toFixed(2) + '%');
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: 'upload.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            beforeSend: function(){
                $(".progress-bar").width('0%');
                $('#uploadStatus').html('<img src="loading.gif"/>');
            },
            error: function(){
                $('#uploadStatus').html('<p style="color:#EA4335;">Upload file gagal, silakan coba lagi.</p>');
            },
            success: function(resp){
                if(resp == 'ok'){
                    $('#uploadForm')[0].reset();
                    $('#uploadStatus').html('<p style="color:#28A74B;">File berhasil diupload!</p>');
                }else if(resp == 'err'){
                    $('#uploadStatus').html('<p style="color:#EA4335;">Silakan pilih file yang valid untuk diupload.</p>');
                }
            }
        });
    });
	
    // memvalidasi file
    $("#fileInput").change(function(){
        var allowedTypes = [
            'application/pdf', 'application/msword', 'application/vnd.ms-office', 
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 
            'image/jpeg', 'image/png', 'image/jpg', 'video/mp4', 'image/gif', 
            'application/x-iso9660-image', 'application/vnd.rar'
        ];
        
        var file = this.files[0];
        var fileType = file.type;
        if(!allowedTypes.includes(fileType)){
            alert('Silakan pilih file yang valid (PDF/DOC/DOCX/JPEG/JPG/PNG/GIF/ISO/RAR).');
            $("#fileInput").val('');
            return false;
        }
    });
});
</script>

</html>

upload.php Contoh Sederhana

Berikut adalah contoh sederhana untuk upload.php:

php
<?php
if(isset($_FILES['file']['name'])){
    /* Nama file */
    $filename = $_FILES['file']['name'];

    /* Lokasi penyimpanan */
    $location = 'uploads/' . $filename;

    /* Ekstensi file */
    $file_extension = pathinfo($location, PATHINFO_EXTENSION);
    $file_extension = strtolower($file_extension);

    /* Ekstensi file yang diizinkan */
    $valid_ext = array("pdf","doc","docx","jpeg","jpg","png","gif","iso","rar","mp4");

    /* Memeriksa apakah file valid */
    if(in_array($file_extension,$valid_ext)){

        /* Pindahkan file ke lokasi */
        if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
            echo "ok";
        }else{
            echo "err";
        }

    }else{
        echo "err";
    }
}
?>

Dengan pengaturan ini, Anda harus bisa mengunggah file hingga 5 GB menggunakan jQuery AJAX dan PHP. Pastikan bahwa server Anda memiliki cukup ruang penyimpanan dan bandwidth untuk menangani file sebesar itu.



 Read more

tombol style css

Juli 27, 2024 By SNH NET , , , 0 Comments

 

Cara Mempercantik Button pada HTML dengan Bootsrap 4 Dengan Mudah – Setelah sebelumnya saya membahas tentang input pada form yang menggunakan bootstrap juga. Pada postingan kali ini saya akan membahas tentang membuat tampilan button lebih bagus dan berwarna menggunakan bootstrap. Selain itu akan saya bahas macam-macam button pada bootstrap mulai dari warna tombol/button, button outline, button group vertical, button spinner/tombol loading, input group button, dll.

Baca juga :

Macam-macam Form Input pada HTML dan Bootstrap

Seperti yang sudah sobat tahu, bootstrap sudah menyediakan banyak macam/jenis tombol yang bisa digunakan hanya tinggal memanggil kelasnya saja. Namun sebenarnya kita bisa saja membuat cssnya sendiri namun tentunya itu cukup memakan waktu jika kita membutuhkan banyak jenis tombol. Oleh karena itu banyak developer yang menggunakan bootstrap. Biasanya jika sobat mendownload template gratis juga pasti menggunakan bootstrap juga namun karena banyak yang belum tahu tentang cara penggunaan atau fitur-fitur apa saja yang ada pada bootstrap menjadikan banyak programmer baru yang tidak menggunakan fitur-fitur ini yang sebenarnya programmer tersebut membutuhkan untuk pengembangan aplikasinya atau malah bikin sendiri cssnya dan memakan banyak waktu belum tentu juga hasilnya lebih bagus dari bawaan bootstrap ini.

Sebelum membuat project ini tentunya kita harus memasykkan dulu librari css dan jsnya. Karena keperluan demo jadi saya menggunakan css dan js online. Jika untuk keperluan development maka sangat dianjurkan untuk mendownloadnya terleboh dahulu. Atau sobat bisa download bersama dengan project ini pada akhir postingan. Css dan js kita tuliskan pada tag <head>…</head>, kodenya adalah sebagai berikut

Berikut adalah macam-macam tombol yang ada pada bootstrap :

1. Button Style (Warna)

Ada banyak macam-macam warna yang telah disediakan oleh bootstrap, contoh penulisan kodenya adalah sebagai berikut

Tampilan

2. Warna Border

Selain warna pada buttonnya ada juga yang hanya mengganti warna bordernya saja. Contoh penggunaanya adalah sebagai berikut

Tampilan :

3. Button Size

Standar dari bootstrap ada 3 macam ukuran yaitu kecil, sedang dan besar. Untuk ukuran sedang itu adalah ukuran defaultnya. Cara penulisan kodenya adalah sebagai berikut

Tampilan :

4. Buttom Elements

Penggunaan button ini sebenarnya hanya mengganti nama classnya saja. Untuk elemennya bisa apa saja seperti input, button, span, p, a, dll dan nanti akan menghasilkan tampilan yang sama. Cara penggunaannya adalah sebagai berikut :

Tampilan :

5. Block Button

Jika sobat ingin width dari button tersebut mengikuti formnya maka sobat bisa menggunakan cara ini. Block button membuat tombol mengikuti besar parentnya. Ada 3 macam besar block button yaitu kecil, sedang dan besar. Cara penggunaannya adalah sebagau berikut

Tampilan :

6. Button States

Ada 3 macam status button, yaitu normal, active, dan disabled. Cara penulisannya adalah sebagai berikut

Tampilan :

7. Spinner Button

Spinner button merupakan tombol dengan icon loading di dalamnya. Cara penggunaanya adalah sebagai berikut

Tampilan :

8. Button Group

Dalam button group jumlahnya bisa berapa saja dan ukurannya ada 3 macam yaitu kecil, sedang dan besar. Untuk kodenya adalah sebagai berikut

Tampilan :

9. Nesting Button

Nesting button merupakan tombol bertingkat dan cara penggunaannya adalah sebagai berikut

Tampilan :

10. Button Toolbar

Button toolbar biasa digunakan pada header aplikasi sobat cara penggunaannya adalah sebagau berikut

Tampilan :

11. Button Group Vertikal

Seperti namanya, button ini tidaklah horizontal seperti biasanya namun vertikal atau menurun ke bawah, cara penulisannya adalah sebagai berikut

Tampilan :

 

12. Input Group Button

Sebenarnya jenis ini sudah saya jelaskan pada postingan sebelumnya tentang Form Input. Namun karena ini merupakan gabungan dari form input dan button jadinya saya masukkan juga dalam postingan ini. Cara penggunaannya adalah sebagai berikut

Tampilannya :

 

13. Button dengan Icon

Jika ingin menggunakan button dengan icon maka sobat perlu menambahkan librari fontawesome terlebih dahulu. Sebenarnya librari untuk menampilkan icon tidak hanya fontawesome namun pada contoh kali ini saya menggunakan fontawesome. Jika sobat belum memasukkan librari ini tentu icon tidak akan muncul berapa kali pun mencoba itu akan percuma. Untuk librarinya bisa sobat download pada website resminya disini. Disitu juga telah disediakan macam-macam icon yang bisa sobat gunakan tentunya menyesuaikan dengan versi dan jenisnya. Jika sobat mendownload yang Free maka tidak akan bisa menggunakan icon dengan versi Pro. Untuk contoh librari saya

Pada contoh diatas saya menggunakan css online, jika sobat menggunakan untuk development maka sobat perlu mendownloadnya terlebih dahulu pada website resminya atau pada akhir postingan ini. Contoh penggunaannya adalah sebagai berikut

Hasilnya :

 

Sekian postingan saya tentang cara mempercantik tombol pada HTML menggunakan Bootstrap dengan mudah. Jika ada kesalahan penulisan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Sampai bertemu lagi pada postingan saya lainnya.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :


Sampai jumpa pada postingan saya selanjutnya..

sumber : dewakomputer.com


 Read more
Langganan: Postingan (Atom)