Membuat Form dengan CGI Scripts

Formulir HTML Tutorial: Dasar / Menengah

Rekomendasi prasyarat pengetahuan: HTML dasar. Apa yang Anda akan belajar: bagaimana mendirikan sebuah bentuk HTML dan membuatnya berinteraksi dengan script sisi server.
oleh Hary Kurniadi


Form merupakan bagian penting dari desain Web karena mereka memungkinkan kita untuk mengumpulkan data dari pengunjung kami. Formulir dapat menambahkan interaktif ke halaman Web kami dan melakukan banyak fungsi yang berguna.

1. Membuat Form

Dalam rangka untuk menciptakan bentuk-bentuk, Anda harus tahu bagaimana untuk menempatkan elemen formulir di halaman Anda. Namun, ada satu bagian penting untuk menciptakan bentuk. Yang membuat karya formulir dengan sebuah script yang akan mengambil data yang dimasukkan oleh pengunjung dan proses dalam beberapa cara. Pilihan Anda script tergantung pada tujuan formulir Anda. Beberapa bentuk berinteraksi dengan JavaScript yang dikodekan ke dalam halaman Web dan dijalankan oleh browser pengunjung. Sebagian besar bentuk diproses oleh script yang merupakan penduduk di server jauh, namun. Ketika pengguna mengisi data-nya dan kemudian mengklik tombol submit, data dikirim ke alamat skrip yang dikodekan ke dalam tag form.

Script yang hasil formulir dikirim ke mungkin pada server yang sama dengan situs Web Anda, atau pada server lain. Sering, script adalah script CGI (Common Gateway Interface) yang ditulis dalam PERL, sebuah skrip (Active Server Pages) ASP atau PHP (Personal Home Page) script. Script dapat mengambil data yang diajukan oleh formulir dan menambahkannya ke database, kirimkan melalui email ke alamat yang ditunjukkan, atau kembali hasil pencarian berdasarkan input pengguna. Setiap script adalah unik dan ditulis untuk melakukan fungsi tertentu.

Bahkan jika host website Anda tidak menyediakan script pengolahan bentuk, Anda dapat menggunakan script remote-host untuk menambahkan bentuk-bentuk interaktif ke situs Anda tanpa harus mengetahui apapun CGI atau Perl.

Sering kali, ketika Anda mendaftar dengan layanan hosting untuk host situs Web Anda, mereka akan memberikan satu atau lebih script CGI terletak di server mereka untuk Anda gunakan. Jenis yang paling sering disediakan script CGI adalah pengolahan bentuk script yang akan mengambil informasi yang masukan oleh pengunjung ke situs Web dan email ke pemilik situs Web. Tuan rumah biasanya juga menyediakan petunjuk yang baik tentang cara untuk membuat bentuk anda bekerja dengan script mereka. Itu umumnya hanya masalah penambahan alamat yang benar dari script ke tag formulir Anda dan beberapa kolom formulir tersembunyi untuk membentuk. Bidang-bidang formulir tersembunyi tidak terlihat oleh pengunjung Anda. Mereka tidak menampilkan pada halaman Web Anda. Mereka hadir dalam kode HTML, meskipun, dan membawa informasi penting kembali ke script, seperti alamat email yang hasil formulir harus dikirim ke. Dalam kode HTML Anda, bidang formulir tersembunyi terlihat seperti ini:

<input type="hidden" name="your_email_address" value="me@myisp.com">
Membuat Formulir Anda dengan Script Remote-Host CGI Gratis

Hanya dalam kasus host tidak menyediakan script pengolahan bentuk, semua tidak hilang. Anda dapat menggunakan script yang disediakan bagi siapa saja untuk digunakan secara bebas, asalkan mereka bersedia untuk melihat iklan kecil. Ada script seperti yang tersedia, tapi saya akan menggunakan salah satu di http://www.response-o-matic.com sebagai contoh. Setelah Anda memahami proses membuat pekerjaan formulir Anda dengan satu script, maka akan mudah bagi Anda untuk membuatnya bekerja dengan orang lain.

Untuk mengirim script ke server Response-O-Matic untuk pengolahan, Anda harus menambahkan alamat script untuk tag form seperti ini:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post">
(Anda dapat menambahakan bentuk form lain disini, seperti misalnya tombol submif.)
</form>

Perhatikan metode = posting atribut dalam tag form. Beberapa script menggunakan metode = pos. Lainnya menggunakan metode = get. Pastikan untuk mengikuti instruksi untuk naskah Anda. Script Respon-O-Matic menggunakan metode = post.

Sekarang, ada satu hal lain Anda harus menambahkan untuk membentuk Anda untuk membuatnya bekerja dengan script tertentu. Itu adalah field tersembunyi yang memberitahu script mana untuk mengirim hasil formulir. Field tersembunyi dapat pergi ke mana saja Anda ingin selama itu adalah antara tag pembukaan dan penutupan bentuk. Sekarang kode HTML untuk form Anda terlihat seperti ini:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post">
<input type="hidden" name="your_email_address" value="you@yourisp.com">
(Your other form fields go here. Include your submit buttons at the end.)
</form>

Pastikan untuk mengganti alamat email Anda yang sebenarnya untuk bagian yang berwarna merah.
Menambahkan opsi Extra untuk Formulir Anda

Itu semua yang diperlukan untuk membuat pekerjaan formulir Anda dengan script Response-O-Matic. Mudah, bukan? Orang-orang di Response-O-Matic ingin menyediakan Anda dengan pilihan lebih dari ini, bagaimanapun, jadi, mereka menambahkan lebih banyak bidang opsional yang dapat ditambahkan untuk membentuk Anda jika Anda ingin.

Dua bidang opsional adalah bidang terlihat di mana pengunjung dapat mengetik nama dan alamat email. Jika Anda nama mereka nama-nama yang tepat yang Response-O-Matic menentukan, nama pengunjung dan alamat email akan ditempatkan di bagian "Dari" dari email yang dikirimkan kepada Anda. Hal ini membuat lebih mudah untuk menambahkan pengunjung ini ke buku alamat email Anda atau untuk mengirim mereka balasan. Jika Anda menambahkan dua field untuk formulir Anda, kode Anda akan terlihat seperti ini:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post">
<input type="hidden" name="your_email_address" value="you@yourisp.com">
Name: <input type="text" name="visitor_name">
Email Address: <input type="text" name="visitor_email_address">
(Your other form fields go here. Include your submit buttons at the end.)
</form>

Sisa dari bidang opsional semua field tersembunyi. Mereka memungkinkan Anda untuk menentukan hal-hal seperti subjek dari pesan email yang Anda terima, yang bidang pengunjung Anda harus mengisi sebelum bentuk akan menyerahkan, dan penampilan Terima Kasih halaman yang mengikuti pengiriman formulir. Misalnya, jika Anda ingin menentukan subjek email, Anda akan menambahkan sebuah bidang formulir tersembunyi bernama "email_subject_line". Kode Anda sekarang akan terlihat seperti ini:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post">
<input type="hidden" name="your_email_address" value="you@yourisp.com">
Name: <input type="text" name="visitor_name">
Email Address: <input type="text" name="visitor_email_address">
<input type="hidden" name="email_subject_line" value="Conference Reservation Form Response">
(Your other form fields go here. Include your submit buttons at the end.)
</form>

Tentu saja, Anda akan mengganti baris subjek Anda sendiri untuk bagian yang ada di hijau.

Berikut ini adalah grafik yang lengkap pada semua bidang yang tersedia untuk menyiapkan formulir Anda dengan script Response-O-Matic. Informasi lebih lanjut dapat diperoleh dengan mengunjungi situs Response-O-Matic di: http://www.response-o-matic.com.
Beberapa Hal yang Perlu Pikiran Ketika Bekerja dengan Form

Berikut adalah beberapa poin tambahan untuk diingat ketika menciptakan bentuk-bentuk:

Semua elemen formulir Anda, termasuk field tersembunyi Anda bentuk, HARUS antara pembuka dan tag penutup bentuk dalam rangka untuk bekerja. Hanya satu set tag bentuk bentuk itu diperbolehkan.

Jika Anda menggunakan meja untuk tata letak elemen form Anda, ada baiknya jika Anda meletakkan seluruh tabel dalam bentuk tag. Dengan cara itu Anda tidak akan memiliki elemen benar bersarang.

Setiap pengolahan bentuk skrip CGI ditulis sedikit berbeda. Nama-nama yang mereka berikan kepada yang mirip kolom formulir tersembunyi mungkin berbeda, dan jumlah yang diperlukan bidang formulir tersembunyi dapat bervariasi. Karena itu, ketika Anda mengubah script CGI yang Anda kirimkan hasil bentuk, Anda juga harus mengubah bidang formulir tersembunyi Anda serta alamat script yang ada di tag form. Pastikan untuk mengetik nama field tersembunyi persis seperti instruksi menunjukkan. Nama-nama adalah case sensitif.

Pastikan bahwa Anda memberi setiap bidang lain Anda membentuk sebuah nama deskriptif yang akan Anda mengenali kapan Anda menerima email yang memberitahukan Anda bagaimana pengunjung Anda untuk membentuk Anda menanggapi

Read more

Generating Files dengan JavaScript

Ketika membangun sebuah aplikasi web, Anda seringkali harus memberikan pengguna kemampuan untuk men-download bagian dari data sebagai file. Ini bisa menjadi cadangan pengaturan konfigurasi, laporan, atau bagian lain dari informasi yang dihasilkan secara dinamis.

Solusi yang biasa untuk masalah ini akan memiliki script ekspor khusus yang memilih dari database dan membangun file yang Anda butuhkan. Namun, seperti kita akan membuktikan di tutorial singkat ini, ada cara lain.

Kami akan membuat sebuah plugin jQuery yang, dikombinasikan dengan script php sederhana, dapat menghasilkan setiap jenis file tekstual, dan membuatnya tersedia untuk di-download. Anda akan memulai download dari front end Anda JavaScript dengan hanya menyediakan isi file, dan meninggalkan sisanya untuk plugin.

HTML

Kita akan mulai dengan meletakkan sebuah halaman HTML sederhana dengan textarea dan tombol download, sehingga kita dapat menunjukkan plugin di tempat kerja.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>Generating files with JS &amp; PHP | Tutorialzine Demo</title>

<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<header>
<h1>Generating Files with JavaScript</h1>
<h2><a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">&laquo; Read and download on Tutorialzine</a></h2>
</header>

<form action="./" method="post">
<textarea></textarea>
<a href="#" class="blueButton" id="download">Download</a>
</form>

<footer>Another cool example: <a href="#" id="downloadPage">download this page.</a> <b>To download the source code, visit <a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">Tutorialzine.com</a></b></footer>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="assets/js/jquery.generateFile.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

Halaman menggunakan DOCTYPE HTML5, seperti kita menggunakan beberapa tag yang didefinisikan oleh standar. Untuk itu untuk bekerja di IE, kita juga perlu menyertakan script HTML5 memungkinkan di bagian kepala.

Sebelum tag penutup tubuh, kita menambahkan perpustakaan jQuery, plugin generateFile kita akan menulis dalam sekejap, dan file script.js yang mendengarkan acara dan memicu download file.

download.php

if(empty($_POST['filename']) || empty($_POST['content'])){
exit;
}

// Sanitizing the filename:
$filename = preg_replace('/[^a-z0-9-_.]/i','',$_POST['filename']);

// Outputting headers:
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');

echo $_POST['content'];

Apa ini script PHP tidak hanya menambahkan beberapa header di atas pernyataan echo. Plugin kita sedang membangun harus lulus dua parameter bersama dengan permintaan POST: nama file dan konten. Script akan mencetak isi file, sedangkan tiga pengaturan header yang akan memaksa kotak file download muncul (bukan dari browser Anda hanya membukanya).

Untuk menggunakan plugin Anda perlu untuk meng-upload file ini di suatu tempat di server Anda dan lulus URL-nya ke plugin kita akan coding berikutnya.


jQuery

Seperti yang Anda lihat di bagian sebelumnya, plugin kami telah mengeluarkan permintaan POST untuk download.php. Pilihan alami untuk membuat permintaan akan dengan menggunakan AJAX. Namun, ada kelemahan untuk menggunakan metode ini - tidak memicu dialog download file muncul.

Jadi apa yang kita butuhkan adalah sebuah sekolah sedikit lebih lama. Kami akan secara dinamis menciptakan iframe tersembunyi dan menulis suatu bentuk untuk itu, yang kemudian kita akan menyerahkan melalui POST. Atribut aksi titik formulir untuk download.php, sehingga dialog file download akan muncul, persis seperti yang kita butuhkan untuk.

Sekarang mari kita meletakkan kode jQuery yang melakukan hal ini:

assets/jquery.generateFile.js

(function($){

// Creating a jQuery plugin:

$.generateFile = function(options){

options = options || {};

if(!options.script || !options.filename || !options.content){
throw new Error("Please enter all the required config options!");
}

// Creating a 1 by 1 px invisible iframe:

var iframe = $('<iframe>',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');

var formHTML = '<form action="" method="post">'+
'<input type="hidden" name="filename" />'+
'<input type="hidden" name="content" />'+
'</form>';

// Giving IE a chance to build the DOM in
// the iframe with a short timeout:

setTimeout(function(){

// The body element of the iframe document:

var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE

body = $(body);

// Adding the form to the body:
body.html(formHTML);

var form = body.find('form');

form.attr('action',options.script);
form.find('input[name=filename]').val(options.filename);
form.find('input[name=content]').val(options.content);

// Submitting the form to download.php. This will
// cause the file download dialog box to appear.

form.submit();
},50);
};

})(jQuery);

Dalam waktu kurang dari 50 baris (dengan komentar dilucuti) fragmen di atas tidak apa yang kita butuhkan. Ini menciptakan iframe tersembunyi dengan bentuk di dalamnya.

Perhatikan fungsi setTimeout () . Tanpa itu kita tidak dapat mengakses elemen dokumen dari iframe di Internet Explorer. Dengan cara ini, kita memberikan waktu untuk membangun DOM dan membuatnya tersedia untuk kita.

Dan di sini adalah bagaimana menggunakan plugin ini:

assets/script.js

$(document).ready(function(){

$('#download').click(function(e){

$.generateFile({
filename : 'export.txt',
content : $('textarea').val(),
script : 'download.php'
});

e.preventDefault();
});

$('#downloadPage').click(function(e){

$.generateFile({
filename : 'page.html',
content : $('html').html(),
script : 'download.php'
});

e.preventDefault();
});

});

Ketika memanggil $. GenerateFile, Anda harus lulus nama file (harus sesuatu yang deskriptif), isi teks, dan jalan menuju download.php. Seperti yang dapat Anda lihat pada contoh di atas, kita bisa menghasilkan berbagai jenis file, asalkan adalah teks.

Dengan plugin yang sederhana ini selesai!

kesimpulan

Anda dapat menggunakan kode ini untuk menambahkan fitur ekspor ke aplikasi web atau meningkatkan area tertentu dari situs Anda dengan fungsi download. Hal ini bahkan mungkin untuk menghasilkan file doc dan spreadsheet jika Anda mengikuti format XML Microsoft Office. Bagian yang terbaik adalah bahwa semuanya dilakukan dengan JavaScript dan Anda dapat dengan mudah menggabungkan berbagai sumber data.

Demo Download

Read more