[JavaScript] Menampilkan Gambar Sebelum Upload ( Preview Image )

JavaScript - bahasa pemograman client side ini sudah sangat populer dan banyak penggunanya, tidak hanya itu karena komunitynya yang cukup besar, sudah banyak sekali library-library pada javascript yang digunakan untuk mempermudah dalam coding.

dalam javascript kita bisa melakukan banyak hal, bahkan tanpa library sekalipun kita bisa melakukan hal menarik pada website kita dengan native javascript atau javascript default, tanpa library ataupun framework.

Menampilkan Gambar Sebelum Upload

salah satunya adalah menampilkan gambar sebelum di upload ke server, atau biasa disebut preview image ( Pratinjau Gambar ). kita bisa melakukan hal ini dengan mudah dengan native javascript.

1. Buatlah file HTML
2. sambungkan dengan file javascript kalian, ( jika scriptnya terpisah )
3. setelah itu buatlah 2 element, yaitu file input, dan preview image box
<input  id="input" type="file"  />

<img id="box" " style="width: 30%;height: 30%"/>


4. kalian bisa mengubah style kedua element tersebut sesuka kalian.
5. masukan script berikut ke file js kalian, atau ke dalam tag <script> di html
inputBox = document.getElementById("input"); // Mengambil elemen tempat Input gambar

inputBox.addEventListener('change',function(input){ // Jika tempat Input Gambar berubah

var box = document.getElementById("box"); // mengambil elemen box
var img = input.target.files; // mengambil gambar

var reader = new FileReader(); // memanggil pembaca file/gambar
reader.onload = function(e){ // ketika sudah ada
box.setAttribute('src',e.target.result); // membuat alamat gambar
}
reader.readAsDataURL(img[0]); // menampilkan gambar
}
); // manderser.blogspot.com


6. jalankan dan coba pilih, gambar.

jika terjadi error, periksa kembali kode yang di copy, atau kalau masih bingung silahkan bertanya di comment bawah

Semoga Bermanfaat

Perbedaan ASP Dengan PHP

WEB - Dalam dunia website programing sudah banyak sekali bahasa yang digunakan untuk membuat website seperti, HTML, CSS, PHP, JS dan masih banyak lagi yang mungkin belum banyak orang ketahui karena bahasa bahasa programing di atas sudah sangat terkenal dan paling banyak di pakai.

tapi disini kita tidak akan membahas semua bahasa pemograman web yang ada, kita hanya akan membahas dan membedakan bahasa pemograman ASP dan PHP yang terbilang hampir sama karena ASP juga bisa membuat aplikasi aplikasi web server seperti PHP.
dan masih banyak orang yang bingung dalam memilih bahasa ASP atau PHP.

kenapa ASP? dari sekian banyak bahasa pemograman kenapa hanya ASP yang kita bahas disini, 

itu karena ASP juga sudah cukup diketahui oleh para programmer programmer.

ASP (Active Server Pages)

ASP adalah singkatan dari Active Server Pages yang merupakan salah satu bahasa pemograman web untuk menciptakan halaman web yang dinamis. ASP merupakan salah satu produk tekhnologi yang disediakan oleh Microsoft.

dan juga ASP juga merupakan suatu jenis program yang bekerja dalam Microsoft (Windows) melalui IIS (Internet Information Server). ASP memerlukan server Microsoft untuk menjalankan website

Bahasa pemograman ASP lebih banyak mirip dengan syntax dan interface-nya pemrograman Visual Basic. Hal itu dikarenakan pada dasarnya Visual Basic adalah berkorelasi dengan produk dan program-program buatan Microsoft.

Contoh Penggunaan ASP 

<html>
<body>
<%
response.write("My first ASP script!")
%>
</body>
</html>

Kelebihan ASP (WikipediA) 

• Mudah dalam mempelajarinya.
• Mudah dikembangkan dari sistem yang telah dimiliki
• Tidak perlu kompilasi.
• Mudah menggabungkan dengan teknologi lain seperti CGI, DCOM, ActiveX dan lain-lain.
• Dengan ActiveX Data Object dan SQL pembuatan Web Data Base menjadi lebih mudah.
• Memberikan fasilitas keamanan seperti session Object, cookie, dan fasilitas transaksi online yang aman dengan protokol SSL, semua dapat dilakukan dengan sedikit kode tambahan.
• Kode ASP tidak dapat di lihat pada client, hal ini di sebabkan oleh karena jika server menerima request file asp, maka file tersebut diproses dahulu pada server dan yang di kirimkan adalah kode-kode HTML

PHP: Hypertext Prepocessor

PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994.

sama seperti ASP, PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. oleh karena itu Bahasa atau code yang terdapat di website PHP atau ASP tidak dapat di lihat oleh client atau pengguna.

Contoh Sederhana Penggunaan PHP

<?php
    echo "Halo dunia";
?>

Kelebihan PHP (WikiPedia)

• Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaannya.
• Web Server yang mendukung PHP dapat ditemukan di mana - mana dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.
• Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap membantu dalam pengembangan.
• Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak.
• PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.

Setelah mengetahui perbedaan dan kelebihan kelebihan bahasa pemograman ASP dan PHP, tentu masih banyak yang bertanya tanya untuk menggunakan yang mana, sebenarnya itu tergantung bahasa yang anda kuasai, jadi jangan sampai salah dalam memilih bahasa pemograman karena itu sangat mempengaruhi website.

bisa di bilang ASP merupakan bahasa pemograman premium karena untuk menggunakan database di ASP kita harus menggunakan MS-SQL yang harus kita beli dari microsoft itu sendiri, sedangkan php memiliki kebebasan dalam memilih database.

Pengertian ASP Secara Lengkap

ASP - bagi kalian yang sering ngoding dan membuat website, pasti tidak asing lagi dengan Bahasa pemograman yang satu ini. ASP sering di pakai pada pemograman web, karena menggunakan Bahasa program Visual Basic, ASP sangat mudah di pahami.

oleh karena itu sudah banyak sekali programmer yang menggunakan ASP, tapi bagi kalian yang ingin mengetahui lebih lanjut dan ingin belajar mengenai ASP, kalian harus tau dlu apa itu ASP dan perannya dalam Website.

ASP sama saja seperti Bahasa pemograman HTML, PHP, Dan lain lain. tapi ASP sering digunakan karena bisa membuat suatu halaman website menjadi dimanis.

Sama seperti PHP, ASP juga bisa Menanggapi permintaan pengguna atau data yang disampaikan dari bentuk HTML.
Akses data atau database dan mengembalikan hasil ke browser, Bisa menyesuaikan halaman Web untuk membuatnya lebih bermanfaat untuk pengguna individu.
Keuntungan menggunakan ASP bukan CGI dan Perl, adalah dari kesederhanaan dan kecepatan.
Menyediakan keamanan - karena kode ASP tidak dapat dilihat dari browser.
Pandai pemrograman ASP dapat meminimalkan lalu lintas jaringan.

Karena script ASP dijalankan di server, browser yang menampilkan file ASP tidak perlu mendukung scripting sama sekali!.

Pengertian ASP

Active Server Pages atau disingkat ASP adalah salah satu bahasa pemrograman web untuk menciptakan halaman web yang dinamis.

ASP merupakan salah satu teknologi yang dikembangkan oleh Microsoft yang merupakan tekhnologi server-side scripting dikeluarkan sekitar tahun 1996. Server side scripting artinya segala proses program dilakukan di sisi server sedangkan client hanya menerima output dalam bentuk HTML saja.

Sejarah ASP

ASP atau Active Server Pages adalah yang pertama yang pernah Microsoft server-side scripting bahasa yang digunakan untuk menghasilkan halaman yang dinamis dan interaktif. Awalnya, Microsoft menambahkan sebagai add-on untuk IIS (Internet Information Services) untuk Windows NT 4.0 tapi setelah keberhasilannya, Microsoft memasukkannya sebagai komponen bebas dari Windows Server setelah rilis Microsoft Windows 2000 Server.
Membangun halaman web menggunakan ASP sangat mudah, semua apa yang perlu Anda lakukan adalah untuk belajar dan efisien menggunakan berbagai ASP built-in-objek yang akan dibahas secara singkat kemudian. Setiap objek akan menyediakan Anda dengan berbagai fungsi yang sering digunakan yang dapat Anda gunakan untuk membuat halaman web dinamis dan interaktif. Misalnya, dalam ASP 2.0, ada enam built-in objek; Server objek, Sesi objek, objek Respon, objek Server, objek ASPError dan objek Aplikasi.
ASP atau aktif sebelumnya dikenal sebagai dbWeb dan itu dikembangkan oleh Software Engineering Aspek. Itu adalah pertama WDE (aplikasi Web Development Environment) yang menggabungkan fitur integrasi dari aplikasi web langsung ke web server. Album ini dirilis hampir setelah 9 bulan dari rilis WebObjects (oleh Apple). ASP diperkenalkan metode populer berbagai mengembangkan aplikasi web pada saat pengenalan sendiri. ASP, seperti sejarah berbicara, merupakan upaya untuk mencapai kinerja yang tinggi dibandingkan dengan memanggil script lainnya CGI eksternal atau program dieksekusi. Sebelum pengenalan ASP, aplikasi web yang digunakan untuk mengakses program dieksekusi eksternal atau skrip CGI.

Versi ASP
Microsoft telah merilis berbagai versi ASP. Berikut ini adalah versi ASP dirilis oleh ASP.
ASP Versi 1: itu didistribusikan dengan Microsoft IIS 3.0 (Desember 1996)
ASP Versi 2: itu didistribusikan dengan Microsoft IIS 4.0 (September 1997)
ASP Versi 3: itu didistribusikan dengan Microsoft IIS 5.0 (November 2000)
Versi saat ini dari ASP 3.0 tersedia di IIS 6.0 dan juga IIS 7.0 pada Microsoft Windows Server 2008.

Keuntungan ASP

• Mudah dalam mempelajarinya.
• Mudah dikembangkan dari sistem yang telah dimiliki
• Tidak perlu kompilasi.
• Mudah menggabungkan dengan teknologi lain seperti CGI, DCOM, ActiveX dan lain-lain.
• Dengan ActiveX Data Object dan SQL pembuatan Web Data Base menjadi lebih mudah.
• Memberikan fasilitas keamanan seperti session Object, cookie, dan fasilitas transaksi online yang aman dengan protokol SSL, semua dapat dilakukan dengan sedikit kode tambahan.
• Kode ASP tidak dapat di lihat pada client, hal ini di sebabkan oleh karena jika server menerima request file asp, maka file tersebut diproses dahulu pada server dan yang di kirimkan adalah kode-kode HTML

Contoh Penggunaan ASP

Untuk menggunakan ASP di HTML, kita bisa memasukan TAG khusus. Seperti ini :

<html>
<body>
<%
response.write("My first ASP script!")
%>
</body>
</html>

Dan untuk pembelajaran ASP lebih lanjut kalian bisa mempelajarinya dari Tutorial ASP


Semoga Bermanfaat

Cara Membuat Tag Div Menjadi FullScreen Di Html

Web - bagi kalian yang sering membuat website menggunakan HTML, tentu saja kalian sering mengalami masalah saat mendesainnya menggunakan css, dan banyak sekali masalah dalam desain web yang di alami pemula (newbie). karena pemula adalah calon professional, maka pemula tersebut harus belajar dan mendalami Bahasa pemograman web seperti CSS.

dan salah satu masalah yang cukup membingungkan di CSS adalah, saat kita ingin membuat website dengan tampilan yang full screen. dan jika kita lihat, setelah kita membuat sebuah tag dengan width dan height 100%, maka tag div tersebut akan terpotong atau tidak full screen.

tentu saja masalah kecil tersebut akan membingungkan bagi kita yang belum tau. dan untuk membuat tag div menjadi full screen di website kita hanya perlu sedikit memodifikasi CSS pada tag body.

Cara Membuat Tag Div Menjadi FullScreen Di Html

1. buka file CSS websitenya
2. setelah itu, di Style Body kita tambahkan ;
margin:0;
3. sehingga akan menjadi seperti ini
body {
 margin:0;
}
4. kemudian simpan file tersebut dan coba buka kembali webnya

jika masih belum fullscreen periksa width/height style tag Divnya, apakah sudah 100% atau belum.

Untuk membuat sebuah Tag Div menjadi FullScreen, kita harus menghilangkan Margin yang ada pada body, bukan artinya kita harus mengtiadakan margin di body. yang harus kita lakukan adalah membuat marginya menjadi 0 agar tag div tersebut dapat menjadi full screen

Semoga Bermanfaat

Cara Memperindah / Desain Form Dengan CSS

Form - Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingan data dan lain sebagainya.

membuat Form dalam HTML biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web.

tapi dalam membuat form di html dengan tampilannya yang default akan terlihat hampa dan tidak akan terlihat indah dan rapi. oleh karena itu kita perlu memodifikasi atau mendesain form html tersebut dengan css.

Cara Memperindah Form Dengan CSS

1. Buatlah Form pada HTML
2. setelah form di buat, tambahkan kode berikut dalam tag Text Box
class="textfield"


3. sehingga Dalam tag Text Box akan Terlihat Seperti ini
<input class="textfield" type="text" placeholder="ManDerser.Blogspot.Com" name="username"required="required" />


4. Sama Dengan text box tambahkan class pada tag button dengan nama yang berbeda, seperti
<input class="buttonform" type="submit" name="submit" value="Tombol" />


5. setelah mensetting form, kita harus mendesainnya dengan css.
6. pada css kita menambahkan .textfield dan .buttonform untuk mendesain form tersebut
7. Setelah itu, tambahkan tampilan pada text box dan button tersebut, seperti
.textfield {
 width: 300px;
 height: 40px;
 font-family: "Arial Black", Gadget, sans-serif;
 color: #000;
 border: 1px double #09F;
}
.textfield:hover {
 width: 300px;
 height: 40px;
 font-family: "Arial Black", Gadget, sans-serif;
 color: #000;
 border: 1px double #09F;
 background-color: #CCC;
}
.buttonform {
 font-family: "Arial Black", Gadget, sans-serif;
 color: #FFF;
 background-color: #09F;
 width: 150px;
 height: 65px;
 font-size: 18px;
}
.buttonform:hover {
 font-family: "Arial Black", Gadget, sans-serif;
 color: #FFF;
 background-color: #333;
 width: 150px;
 height: 65px;
 font-size: 18px;
 border: 2px solid #09F;
}
</style>


8. jika ingin tampilan yang berbeda, kalian bisa mendesainnya dengan sendiri

Jika ingin menambahkan input lainnya, kalian bisa menambahkan tag class yang berbeda

Lihat DEMO untuk Style CSS Form di atas

jika form tidak berubah pada saat sudah di masukan style, periksa kembali nama dari tag class input tersebut.

Semoga Bermanfaat

Cara Membuat Link Terbuka Di Tab Baru Secara Otomatis

HTML - saat kita menaruh link di sebuah HTML atau konten website, akan sangat berguna jika link tersebut otomatis terbuka di tab baru, karena jika ada pengunjung yang ingin meng-click link tersebut maka akan sangat ribet jika harus click kanan dan membuka link tersebut di tab baru secara manual.

dan juga pengunjung tidak akan langusng meninggalkan halaman sebelumnya karena adanya tab baru yang di buka dari sebuah link, dan tidak akan mengganti halaman selanjutnya.

dan untuk membuat sebuah link yang jika di click akan membuka tab baru secara otomatis, sangatlah mudah karena di dalam HTML sudah di sediakan code khusus untuk membuat sebuah link terbuka di tab baru. dan cara ini sudah sangat sering di pakai untuk membuka link di tab baru, karena sangat simple dan sangat mudah di gunakan.

  kode tersebut adalah target='_blank', yang berfungsi membuat sebuah link yang jika di click akan membuka tab baru secara otomatis

Cara Membuat Sebuah Link Terbuka Di Tab Baru

1. Buatlah sebuah link, Dan dalam HTML link tersebut akan nampak seperti ini
   
href="http://manderser.blogspot.com/">ManDerser</a>


2. Untuk membuat Link tersebut terbuka di tab baru secara otomatis, kita hanya perlu menambahkan
   
target='_blank'


3. Dan sepenuhnya codenya akan menjadi seperti ini
   
<a href="http://manderser.blogspot.com/" target='_blank'>ManDerser</a>

dan disini ada satu cara yang dimana jika kita menggunakannya maka seluruh link yang ada di html tersebut akan terbuka di tab baru secara otomatis, dan kita hanya perlu menambahkan 1 tag yang bisa membuka seluruh link di tab baru secara otomatis.

Cara Membuat Seluruh Link Di HTML Terbuka Di Tab Baru

1. Buka File HTML kalian
2. masukan Tag berikut dalam <head></head> ( Taruh di bawah <head> )
<base target='_blank' />


3. Setelah itu kalian bisa coba membuka salah satu link, maka link tersebut akan terbuka di tab baru secara otomatis

Jika terjadi error atau link tidak terbuka di tab baru saat kalian memasukan tag tersebut, kalian bisa periksa kembali kode yang kalian masukan di dalam link tersebut, kemungkinan ada sesuatu yang salah.

Semoga Bermanfaat