Selasa, 12 Maret 2013

Mengenal Fungsi MAX_FILE_SIZE – Upload File

Assalamualaikum Warahmatullahi Wabarakatuh.

Selamat pagi, siang dan malam bagi semua pecinta dunia maya serta untuk yang sekedar lewat di websiter newbie. Pada kesempatan kali ini, websiter newbie akan berbagi sedikit mengenai upload file, akan tetapi tidak untuk menjelasakan bagaimana cara membuat fungsi upload file, karena sesuai dengan judul kali ini. Websiter newbie hanya berbagi tentang pengenalan dari fungsi MAX_FILE_SIZE pada form input html dari fungsi upload file. Kenapa websiter newbie membahas tentang masalah ini ? Akan websiter newbie jawab sendiri. hehehe… Karena itu bukan pertanyaan untuk para sahabat websiter newbie akan tetapi hanya sekedar alasan untuk membuat postingan kali ini. Okelah kalau begitu, tanpa panjang x lebar x tinggi lagi, websiter newbie akan menjelaskan dan bercerita mengenai hal tersebut.

Pada awalnya, hal ini terjadi pada salah seorang teman saya yang masih baru belajar tentang web (seorang websiter newbie) yang saat itu sedang mempelajari tentang upload file. Dan ketika saya melihat script yang dibuatnya saya merasa terheran – heran. Karena pada script itu terdapat script yang menyatakan besar maksimal file yang tidak sesuai dengan apa yang websiter newbie ketahui. Tag itu adalah:

<input type=”hidden” name=”batas” value=”2000000”>

Terlihat pada script diatas biasa saja, akan tetapi saya yakin teman saya ini telah mendapat tutorial untuk membuat upload file, karena sebelumnya saya juga telah mempelajari tentang hal itu(sekitar 1 tahun yang lalu dari teman saya) akan tetapi yang saya gunakan itu adalah:

<input type=”hidden” name=”MAX_FILE_SIZE” value=”2000000”>

Nah, kemudian saya berfikir. Apakah teman saya ini sengaja mengganti name dari script tersebut, karena memang dia kadang – kadang membuat suatu yang berbeda dengan tutorial(Membuat logika sendiri = Good). Kemudian hal tersebut saya tanyakan kepada seorang teman(senior) yang lebih paham masalah web. Akan tetapi hal tersebut tidak dipermasalahkannya karena hanya sebagai name dari inputan tersebut. Saya mengatakan o iya ya dan mengatakan pula(setelah mengingat), bahwasanya dulu ketika belajar tentang upload file saya telah menemukan hal tersebut dan mempunyai fungsi untuk membatasi size/kapasitas file yang dapat diupload dari klien. Akan tetapi karena saya hanyalah seorang newbie, dan saya merasa kalau saya itu kemungkinan lupa apa yang saya pelajari jadi saya mengakhiri tentang pembahasan tentang hal tersebut.

Akan tetapi, sebagai seorang newbie yang ingin tahu sekali, dan ingin mengingat hal yang dulunya saya lakukan tentang upload file. Maka setelah pulang dari sekolah(perbincangan dengan teman – teman diatas berlatar di sekolah) saya pun berniat membuktikan hal yang sebenarnya tentang masalah MAX_FILE_SIZE. Akhirnya setelah shalat isya saya menyiapkan diri untuk membuktikan kebenaran. Dan saya mulai dengan membuka notepad++ yang ada dilaptop saya, dan membuat dua buah file yaitu:

index.php dan proses.php

Penggunaan masing – masing file yaitu pada bagian index.php saya hanya menaruh script untuk htmlnya saja, yaitu sebuah inputan file yang isinya:

<html>
<head>
    <title>Upload</title>
</head>
<body>
    <form action="proses.php" method="post" enctype="multipart/form-data">
        <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
        <label>Pilih File:</label><br />
        <input type="file" name="file" />
        <input type="submit" name="upload" value="Upload" />
    </form>
</body>
</html>

Dan pada bagian proses saya akan melihat dan membuktikan apakah yang terjadi jika file yang akan saya upload melebihi kapasitas yang sudah saya tentukan dengan menggunakan MAX_FILE_SIZE pada bagian input. Script proses.php seperti dibawah ini:

<?php
$file_name = $_FILES['file']['name'];
$file_tmp = $_FILES['file']['tmp_name'];
$file_error = $_FILES['file']['error'];
$file_size = $_FILES['file']['size'];

echo "Nama File: ".$file_name."<br>Ukuran: ".$file_size."<br>Error: ".$file_error;
echo "<br /><br />";
$upload = move_uploaded_file($file_tmp,"hasil_upload/".$file_name);
if($upload)
    {
    echo "<b>Berhasil</b>";
    }
else{
    echo "<b>Gagal !</b>";
    }
?>

 

Okey, pada script diatas dapat dilihat bahwasanya saya hanya akan melihat hasilnya yaitu pada bagian name, error, dan ukurannya. 

Percobaan 1

Pada percobaan ini saya menngunggah file yang kapasitasnya kurang dari 2000000 bytes atau < 2MB. Dan hasilnya yaitu:

1 

Percobaan 2 

Pada percobaan ini saya menngunggah file yang kapasitasnya lebih dari 2000000 bytes atau > 2MB. Dan hasilnya yaitu:

2

Kesimpulan:

Pada dua percobaan diatas terlihat terjadi perbedaan pada bagian Error, sedangkan apabila nilai error dari file yang akan kita upload bukan 0 (nol), maka proses upload akan gagal. Maka dari itu hal ini berpengaruh terhadap proses upload yang kita buat. Untuk kesimpulan yang lainnya mungkin sahabat newbie dapat menarik kesimpulan sendiri.

Dan itulah yang menjadi dasar websiter newbie untuk membuat postingan ini, dan semoga bermanfaat bagi semunya. Dan dalam membuat postingan ini websiter newbie dalam keadaan sadar dengan sebenar – benarnya.. hahaha.

Seperti membuat surat kuasa saja. Okelah sekian dan terima kasih.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Kamis, 28 Februari 2013

Mengubah Alamat “Localhost” – Server Lokal

ubah localhost

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada kesempatan kali ini, websiter newbie akan berbagi sedikit tips dan trik yang InsyaAllah dapat menambah ilmu kawan – kawan semua. Sesuai dengan judul diatas, kali ini akan newbie bagikan sebuah trik untuk mengubah alamat “localhost” server yang kita gunakan.

Karena Tidak selamanya kita menggunakan localhost sebagai alamat server kita, alangkah enaknya jika kita dapat memodifikasinya, ya karena mungkin saja untuk mengelabui teman – teman kita yang melihat kita sedang berinternetan ria di server lokal kita. Akan tetapi seoalh – olah sedang berselancar diinternet sebagainmana biasanya.

Tanpa berpanjang lebar lagi, silahkan simak langkah – langkah dibawah ini:

  1. Jika server dalam keadaan aktif, stop dulu [conoth: xampp distop]
  2. Masuk ke folder “C:\Windows\System32\drivers\etc
  3. Buka file yang bernama “host” yang bertipekan file dengan teks editor [misal: notepad]
  4. kemudian tambahkan script berikut ini pada bagian paling bawah
    127.0.0.1    www.situsku.com
  5. Setelah selesai, simpan
  6. Start lagi server [contoh: xampp di start

Penjelasan:

  • www.situsku.com merukan situs yang sama dengan situs localhost, jadi apabila Anda membuka situs www.situsku.com maka akan dibawa menuju localhost, atau yang sebenarnya adalah 127.0.0.1.
  • Jadi, hanya dengan menambahkan kode seperti diatas, Anda dapat bermain – main dengan alamat server local Anda. Dan tidak hanya satu situs saja, tetapi Anda juga dapat membuat banyak, silahkan dibuat sesuka hati.

Screenshot Pengeditan: 

contoh notepad

Itulah sedikit tips dan trik dari websiter newbie dan semoga dapat bermanfaat.

Wassalamualaikum Warahmatullahi Wabarakatuh

Selasa, 26 Februari 2013

Dasar – Dasar HTML – Bagian 1

dasar html img
Pengenalan HTML
HTML merupakah kependekan dari Hypertext Markup Language yang dimana HTML ini merupakan pembangun dari sebuah website. Jadi tampilan website yang kita lihat tersebut struktur pembangun utamanya adalah HTML. Kemudian HTML itu merupakan “Client Side Scripting” yaitu bekerja pada bagian klien, atau bisa kita terjemahkan  bahwa apa yang kita lihat didalam sebuah web browser, maka kita dapat pula melihat sintaksnya pada web browser tersebut yaitu dengan cara melihat Source Codenya (Ctrl+U). Lain halnya dengan PHP atau ASP yang merupakan “Server Side Scripting”, yaitu server melakukan pengolahan data terlebih dahulu sebelum memberikan hasilnya kepada klien atau sebelum ditampilkan pada web browser.

Senin, 25 Februari 2013

Membuat Postingan Blog Secara Offline – Windows Live Writer

blog

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada kesempatan kali ini, Websiter Newbie akan berbagi sedikit, karena yang sedikit lama – lama bisa menjadi bukit. Seperti kata banyak pepatah tuh. Langsung saja kepermasalahan, ini newbie dapat dari pengalaman newbie sendiri saat baru – baru bergelut dibidang ngeblog, namanya juga masih newbie jadi pengetahuan masih sangatlah dangkal. Oleh sebab itu tidak salah kalo newbie berbagi hal yang masih kecil dulu, diantaranya tentang cara membuat postingan blog secara offline, seperti saat newbie membuat postingan ini. Kenapa perlu membuat postingan secara offline ? Nah, ini mempunyai banyak manfaat, diantaranya kita bisa membuat banyak postingan diblog tanpa harus langsung mempunyai koneksi internet, jadi apabila telah ada koneksi, kita tinggal memposting postingan yang telah kita buat sebelumnya. Jadi ini untuk menghemat biaya serta waktu juga, bila kita bayangkan untuk membuat sebuah postingan kita harus pergi ke warnet setiap saat, berapa banyak uang yang akan kita habiskan dan tentu waktu kita tidak akan terbuang dengan sia – sia.

Newbie rasa kata pengantar diatas cukup untuk menjelaskan tentang manfaat dan tujuan newbie membuat postingan kali ini. Jangan terlalu panjang dan lebar, nanti bisa jadi luas. Langsung saja yang merasakan kenikmatan ngeblog dengan Windows Live klik link dibawah. Dan setelah didownload silahakan diinstall, disana akan ada beberapa pilihan pengistalan aplikasi, pilih saja Windows Live Writer atau kalo mau yang lainnya silahkan. Newbie gak akan marah.

Tapi untuk install ini membutuhkan koneksi internet dan kita dapat menambahkan plugin yang lainnya untuk memperindah, seperti Cool Motion dan banyak lagi yang lainnya.

 

Download

 

Catatan:

Sebenarnya banyak sekali aflikasi lain yang digunakan untuk membuat postingan blog secara offline, dan banyak blog – blog lain yang membahasnya. Akan tetapi, dengan aflikasi tersebut newbie tidak merasa nyaman dan sering sekali aflikasi itu tidak bisa dijalankan dan rumit untuk dipahami penggunaannya. Akan tetapi dengan Windows Live ini newbie sangatlah nyaman menggunakannya dan penggunaannya pun sangatlah mudah. Ini bukan promo lo kawan, tapi newbie hanya berbagi pengalaman saja. Pengalaman adalah guru yang paling baik, seperti kata orang bijak. :)

Wassalamualaikum Warahmatullahi Wabarakatuh.

Membuat Menu Dropdown Sederhana - CSS

css_dropdown_menu

Assalamualaikum Warahmatullahi Wabarakatuh.

Mulai Tutorial

Langkah pertama tentunya kita buat dulu markup htmlnya, seperti dibawah ini.

<ul class=”menu”>

<li><a href=””>Menu 1</a>

<ul>

<li><a href=””>Menu 1.1</a></li>

<li><a href=””>Menu 1.2</a></li>

<li><a href=””>Menu 1.3</a></li>

</ul>

</li>

<li><a href=””>Menu 2</a>

<ul>

<li><a href=””>Menu 2.1</a></li>

<li><a href=””>Menu 2.2</a></li>

<li><a href=””>Menu 2.3</a></li>

</ul>

</li>

<li><a href=””>Menu 3</a></li>

<li><a href=””>Menu 4</a></li>

</ul>

Dan hasilnya adalah seperti dibawah ini.

clip_image002

Setelah itu, kita akan mulai bermain – main dengan CSS. Yang tentunya ini yang menjadi dasar dari pembuatan sebuah menu dropdown.

Sekarang kita akan memberikan style kepada class=”menu” diatas.

.menu{

list-style:none;

font:normal 13px Arial,Sans-Serif;

margin:0;

padding:0;

}

Maksud dari style diatas yaitu kita memberikan list-style=”none” kepada tag “UL” yang mempunyai class=”menu” untuk menghilangkan listnya, kemudian begitu pula dengan style yang lainnya saya yakin sahabat Newbie sudah mengerti. Sehingga hasilnya seperti dibawah ini.

clip_image004

Lanjut untuk memberikan style seperti dibawah ini.

.menu li{

display:block;

float:left;

margin-left:1px;

position:relative;

}

Sehingga hasilnya seperti dibawah ini.

clip_image006

Selanjutnya.

.menu ul{

padding:0;

margin:0;

float:none;

position:absolute;

}

Sehingga hasilnya seperti dibawah ini.

clip_image008

Nah, sampai disini hasilnya sudah hampir terlihat, tapi perjanan belum berakhir. Kita lanjutkan dengan style dibawah ini.

.menu li a{

display:block;

padding:5px 15px;

background:black;

color:white;

white-space:nowrap;

border-top:1px solid white;

}

Hasilnya dibawah ini.

clip_image010

Nah, langkah terakhir adalah kita menyembunyikan semua sub menu yang ada, kemudian memunculkannya ketika menunya terpilih.

Untuk menghilangkan sub menu kita berikan style seperti dibawah ini.

.menu ul{

display:none;

}

Hasilnya.

clip_image012

Dan inilah yang terpenting, untuk memunculkan sub menu ketika menu dipilih. Lihat style dibawah ini.

.menu li:hover ul{

display:block;

}

Maksud dari style diatas adalah ketika kursor berada diatas “li” maka apabila pada tag “li” terdapat tag “ul” (sub menu). Maka akan diberikan display=”block” (ini digunakan untuk memunculkannya). Dan alhasil seperti dibawah ini.

clip_image014

Nah, selamat mencoba sahabat Websiter Newbie. Maaf, saya tidak terlalu menjelaskan panjang lebar, karena saya ingin sahabat Newbie memahami dengan pemahaman sahabat Newbie sendiri, karena itu lebih baik. Dan melatih logika sahabat Newbie. Silahkan tinggalkan komentar jika berkenan. Kalo tidak ya gak papa sih :)

Wassalamualaikum Warahmatullahi Wabarakatuh.

 

Copyright @ 2013 Websiter Websiter Newbie.