Modul 5. Membuat Formulir Pada Template. Disusun oleh. Sri Siska Wirdaniyati JURUSAN STATISTIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Modul 5 Membuat Formulir Pada Template

Disusun oleh

Sri Siska Wirdaniyati

JURUSAN STATISTIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS ISLAM INDONESIA YOGYAKARTA 2013 1

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 datadata 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 : "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

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.

2

Form ini tidak dapat berbentuk nested dengan sintaks:

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.

3

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 Value pada atribut size menunjukkan besar text box. Value pada atribut maxlenght menunjukkan jumlah karakter maksimum yang ditampung. Tag Radio Pilihan 1 Pilihan 2 Pilihan 3 Tag Checkbox Pilihan 1 Pilihan 2 Pilihan Tag Select <select size=2> Pilihan 1 Pilihan 2 Pilihan 3 4

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 Tag image Text Area 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. 16:18)

5

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.

6

7

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 menjadi

7.

dengan nama radio sehingga database

, dan letakkan pada folder complete collection template.

Buatlah koneksi.php untuk menghubungkan website dengan localhost seperti pada gambar 2.3 di bawah ini.

Gambar 2.3 Koneksi.php

8

8.

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

Gambar 2.4 Input.php 9

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

10

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.

11

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.

12

Gambar 2.9 Website untuk formulir

13

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 template 14

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

15

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 data 16

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 anggota Radio UNISI telah berhasil diedit”. Sedangkan apanila tulisan Delete

17

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.

18

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.

19

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) (https://ezhpe.files.wordpress.com/2012/05/form-dan-input-html.pdf. 3 Juni 2013. 16:18)

20