Membuat Formulir Pada Template

  Modul 5

Membuat Formulir Pada Template

  

Disusun oleh

Sri Siska Wirdaniyati

  

JURUSAN STATISTIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS ISLAM INDONESIA

YOGYAKARTA

2013

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 sebagai berikut : < ? p h p m y s q l _ c o n n e c t ( " l o c a l h o s t " , " r o o t " , " p a s s w o r d " ) ; m y s q l _ s e l e c t _ d b ( " n a m a _ d a t a b a s e " ) ; ? >

  "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

• 14:42)

  1.2 Form dan Input

  Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna

web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML.

Elemen/ TAG ini digunakan membatasi input. Dalam satu form dapat terdiri atas beberapa form, akan tetapi hanya satu form yang dapat dikirim ke server dalam satu saat.

  Form ini tidak dapat berbentuk nested dengan sintaks:

  <FOR M 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.

  6. Image digunakan sebagai pengganti button, berupa button yang berbentuk gambar.

7. Text area digunakan untuk memasukkan data dalam bentuk teks berupa memo.

  Setiap jenis masukan dalam form mempunyai tag-tag sendiri dengan masing-masing atributnya.

  Tag Text <input type=”text” name=”var1” size=# maxlength=#>

  Value pada atribut size menunjukkan besar text box. Value pada atribut maxlenght menunjukkan jumlah karakter maksimum yang ditampung.

  Tag Radio <input type=”radio”> Pilihan 1 <input type=”radio”> Pilihan 2 <input type=”radio”> Pilihan 3 Tag Checkbox <input type=”checkbox”> Pilihan 1 <input type=”checkbox”> Pilihan 2 <input type=”checkbox”> Pilihan Tag Select <select size=2> <option> Pilihan 1 <option> Pilihan 2 <option> Pilihan 3

  </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 <input type=”submit”> <input type=”reset”> Tag image <input type=”image” src=url_image”> Text Area <textarea cols=”55” rows=”5”></textarea> 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.

  

16:18)

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 edit index seperti pada gambar 2.1 di bawah ini.

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.

Gambar 2.3 Koneksi.php

8. Buatlah input.php sebagai formulir untuk daftar anggota seperti gambar 2.4 di bawah ini.

Gambar 2.4 Input.php

  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.

Gambar 2.6 foto.php

  11. Buatlah delete.php untuk menghapus data dari database seperti gambar 2.7 di bawah ini.

Gambar 2.7 delete php

  12. Buatlah edit.php untuk meng-edit data yang telah dimasukkan ke dalam database seperti gambar 2.8 di bawah ini.

Gambar 2.8 Edit.php

  13. Apabila semua langkah-langkah di atas telah selesai dilakukan, langkah selanjutnya adalah menampilkan formulir dalam bentuk website seperti pada

gambar 2.9 di bawah ini.Gambar 2.9 Website untuk formulir

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 template dan sesudah dimasukkan ke dalam template.

Gambar 3.1 Formulir sebelum di dalam templateGambar 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.

  Untuk alamat dan deksripsi diri, praktikan menggunakan Text area untuk memasukkan data dalam bentuk teks berupa memo sehingga kotak isian alamat dan deskripsi kerja terdapat tanda titik berbentuk segitiga. Tanda titik ini bisa 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 lenght adalah’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.3 Tabel hasil sebelum di dalam template dan dimasukkan dataGambar 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 anggota Radio UNISI telah berhasil diedit”. Sedangkan apanila tulisan Delete 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 complete collection template di htdocs.

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 daripada membuat website secara manual.

DAFTAR PUSTAKA

  

• 16:18)