Modul 5
Membuat Formulir Pada Template
Disusun oleh
Sri Siska Wirdaniyati
JURUSAN STATISTIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS ISLAM INDONESIA
BAB I PENDAHULUAN
1.1 Koneksi pada PHP
Database merupakan sebuah media untuk menyimpan data-data secara terstruktur dan sistematis sesuai dengan kebutuhan. Database sering dikaitkan dengan hal-hal yang berbau website, karena hampir seluruh website yang memiliki data-data tertentu untuk diolah itu menggunakan database untuk menyimpan data-data tersebut.
Untuk Pemrograman PHP dengan menggunakan Database MySql, untuk mengkoneksikannya, dibutuhkan satu file php yang nantinya akan di-include-kan ke semua halaman yang nantinya anda buat. Salah satu contoh umum skrip
"Mysql_connect" digunakan untuk menghubungkan ke database didalamnya terdapat informasi username dan password mysql. "mysql_select_db" digunakan untuk memilih nama database yang akan diisikan data dari php (http://belajarsyntax.blogspot.com/2013/05/membuat - koneksi - database - mysql - dengan.html. 3 Juni 2013. 14:42)
1.2 Form dan Input
Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna
Form ini tidak dapat berbentuk nested dengan sintaks:
<FORM ACTION=”_url_” METHOD=”get|post” ENCYPE=””> </FORM
Atribut ACTION tempat menspesifikasikan URL yang akan digunakan sebagai pemproses field input form. URL adalah lokai dokumen yang akan melakukan proses terhadap input dari form. Sedangkan METHOD atribut yang digunakan untuk menyatakan bagaimana masukan-masukan berasal dari form
dikirimkan kepada program CGI.
Terdapat beberapa macam jenis masukan dalam satu formulir dibedakan sebagai berikut:
1. Text digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada
server. Nilai yang dimasukkan dapat berupa angka ataupun teks.
2. Radio menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih. 3. Check box menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang
dipilih.
4. List menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu.
5. Button digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan
form. Ada bermacam-macam button sebagai berikut:
Submit: digunakan untuk memanggil url, setelah input selesai dimasukkan.
Reset: digunakan untuk menginisialisasi setiap elemen form.
Button: digunakan untuk membuat form lebih interaktif, untuk memanggil script yang ada di dalam dokumen htmls.
7. Text area digunakan untuk memasukkan data dalam bentuk teks berupa
</select>
Value pada atribut size digunakan untuk menampilkan pilihan pada list lebih dari satu. Default adalah satu pilihan secara otomatis maka list berupa list box.
Tag Button
Pada setiap elemen dapat diberikan nama, dengan memberikan atribut Name, dengan value berupa string yang mendefinisikan nama elemen. Dalam pemrograman sering disebut nama variabel. Nama variabel tersebut sebaiknya mencerminkan fungsi dari variabel tersebut.
(https://ezhpe.files.wordpress.com/2012/05/form-dan-input-html.pdf. 3 Juni 2013.
BAB II
DESKRIPSI KERJA
Dalam praktikum kali ini, praktikan akan membuat formulir untuk daftar anggota dengan menggunakan template bertema Radio UNISI 104.75 FM yang terdiri dari Berada, Playlist, Event, Daftar Anggota, Data Anggota. Adapun langkah-langkah untuk membuat formulir dengan menggunakan template sebagai berikut:
1. Buka google dan download complete collection template.
2. Apabila complete collection template telah didownload dalam bentuk WinRAR ZIP, extract-lah terlebih dahulu menjadi folder dan letakkan di
htdocs pada apache2triad.
3. Buka folder complete collection template sehingga terdapat HTML dari index. 4. Klik index dengan open with Notepad ++ dan editindex seperti pada gambar
Gambar 2.1 Index
5. Buat database pada http://localhost/phpmyadmin/ dengan nama database
adalah lagu dan nama tabel adalah station dengan field, Type, Lenght, Collation, Attributes, Null, Default dan Extra seperti pada gambar 2.2 di bawah ini.
Gambar 2.2 Tabel station
6. Apabila database telah berhasil diciptakan, maka langkah selanjutnya adalah melakukan Export dengan icon dengan nama radio sehingga database
menjadi , dan letakkan pada folder complete collection template.
7. Buatlah koneksi.php untuk menghubungkan website dengan localhost seperti pada gambar 2.3 di bawah ini.
8. Buatlah input.php sebagai formulir untuk daftar anggota seperti gambar 2.4 di bawah ini.
9. Buatlah tampil.php untuk menampilkan hasil pemasukkan data melalui formulir yang telah dibuat seperti pada gambar 2.5 di bawah ini.
Gambar 2.5 Tampil.php
10. Buatlah foto.php untuk menampilkan foto yang telah dimasukkan oleh anggota seperti gambar 2.6 di bawah ini.
11. Buatlah delete.php untuk menghapus data dari database seperti gambar 2.7 di bawah ini.
Gambar 2.7 delete php
Gambar 2.8 Edit.php
BAB III PEMBAHASAN
Dalam Bab III tentang pembahasan praktikum ini, praktikan akan menjelaskan hasil dari deskripsi kerja dari formulir dan tabel hasil pengisian formulir. Untuk penyelesaian kasus kali ini, praktikan mengambil tema tentang Radio UNISI 104.75 FM dengan beberapa faktor sebagai berikut :
1. Radio UNISI 104.75 FM memiliki banyak pendengar, tetapi belum ada website tentang radio tersebut.
2. Radio UNISI 104.75 FM merupakan salah satu perusahaan musik yang memiliki informasi yang dapat disimpan di dalam komputer secara sistematik dan dapat memberikan informasi kepada pembaca website
Berdasarkan faktor tersebut, pembuatan formulir dalam website tentang Radio UNISI 104.75 FM memiliki tujuan dan fungsi sebagai berikut:
1. Untuk mengetahui jumlah anggota (pendengar) dari Radio UNISI 104.75 FM. 2. Untuk dijadikan sebagai salah satu referensi pendataan basis data dalam
website dengan menggunakan template.
Dalam penjelasan ini, praktikan akan menjelaskan tentang formulir dan tabel hasil pengisian formulir dengan menggunakan template dalam bentuk Mozila Firefork. Setiap penjelasan hasil praktikum, praktikan akan menampilkan hasil dari formulir dan tabel hasil pengisian formulir sebelum dimasukkan ke dalam
Gambar 3.2 Formulir setelah di dalam template
Data formulir untuk Daftar member Radio UNISI 104.75 FM merupakan salah satu cara untuk menjadi anggota pendengar Radio UNISI 104.75 FM. Formulir ini berisi kolom-kolom isian yang meliputi ID, Nama, Tanggal Lahir, Alamat, Jenis Kelamin, Deskripsi Diri dan upload Foto.
ID nama harus diisi dengan panjang maskimal 8 digit yang menggunakan
Primary Key. Apabila ID tidak dimasukkan dengan jumlah 8 digit, maka server
akan mengeluarkan output “Nomor anggota harus 8 digit”. Sedangkan kolom
nama boleh dimasukkan jumlah huruf dengan maksimal 20 karakter.
berubah ukuran apabila digeser. Alamat dan deskripsi diri boleh dimasukkan jumlah huruf maskimal 30 karakter.
Pada tanggal lahir terdapat kolom-kolom berisikan angka-angka untuk tanggal, bulan dan tahun. Tanggal berisikan dari angka 1 sampai 31, bulan berisikan dari angka 1 sampai 12, dan tahun berisikan dari angka 1970 sampai 2000. Sedangkan untuk jenis kelamin berisikan pilihan untuk pria atau wanita. Pada tanggal lahir ini menggunakan type berbentuk Date dan jenis kelamin berisikan type berbentuk Enum dengan lenghtadalah’0’,’1’.
Kolom foto berisikan nama dari foto yang akan di upload dengan jumlah nama foto maskimal 50 karakter. Icon Browse yang terletak di samping kolom berguna untukmencari letak dari foto yang akan di upload sehingga menampilkan nama foto pada kolom isian.
Pada bagian bawah isian kolom formulir terdapat icon Input Data dan
Reset. Icon Input Data digunakan untuk penghubung ke dalam database apabila praktikan mengklik setelah pengisian formulir. Secara otomatis, pengisian data formulir akan masuk ke dalam database. Sedangkan untuk icon Reset digunakan untuk menghapus semua pengisian data yang telah dilakukan. Reset ini hanya dapat untuk menghapus data di dalam formulir dan bukan untuk menghapus data di dalam database.
Apabila pengisian data formulir telah berhasil, maka server akan mengeluarkan output “Data anggota Radio UNISI telah berhasil ditambahkan”.
Hal ini berarti bahwa data pengisian formulir daftar member telah ada di dalam
database.
Gambar 3.4 Tabel hasil setelah di dalam template dan dimasukkan data Tabel hasil ini merupakan tampilan dari hasil pengisian formulir yang meliputi tabel No, ID, Nama, Tgl Lahir, Alamat, Jenis Kelamin, Deskripsi Diri dan Action. Tampilan untuk pengisian formulir ini diurutkan berdasarkan dari ID.
Action merupakan tabel kolom yang berisi Edit, Delete, dan Foto yang berguna sebagai proses untuk melakukan pengeditan, penghapusan dan melihat foto yang di upload.
Apabila tulisan Edit pada kolom Action diklik, maka server akan mengeluarkan formulir dari data yang ingin diedit dan mengeluarkan output “Data
pada kolom Action diklik, maka server secara otomatis akan menghapus data anggota dari tabel hasil pengisian formulir dan database pada localhost.
Gambar 3.5 Foto yang telah diupload
Apabila tulisan Foto pada Action diklik, maka server akan menampilkan hasil dari foto yang telah diupload. Tetapi apabila foto tidak diupload oleh praktikan ataupun anggota Radio UNISI 104.75 yang lain dan mengklik tulisan Foto, maka server akan mengeluarkan output “Foto anggota Radio UNISI 104.75
FM tidak tersedia”. Seluruh foto ini akan tersimpan pada folder images pada
BAB IV PENUTUP
Berdasarkan praktikum membuat formulir pada template dapat disimpulkan bahwa sebagai berikut:
1. Formulir mempermudah untuk mengetahui jumlah dari peminat suatu website
perusahaan atau bidang lainnya.
2. Setiap hasil pengisian formulir selalu masuk ke dalam database localhost
apabila telah dihubungkan dengan koneksi.
3. Template digunakan untuk mempermudah praktikan dalam membuat website
DAFTAR PUSTAKA
(http://belajarsyntax.blogspot.com/2013/05/membuat - koneksi - database - mysql - dengan.html. 3 Juni 2013. 14:42)
http://fajargumilang.wordpress.com/2012/07/11/sesi-6-teori-pemograman-web/. 3 Juni 2013. 14:45)
