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

Transkripsi

1 Modul 5 Membuat Formulir Pada Template Disusun oleh Sri Siska Wirdaniyati JURUSAN STATISTIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS ISLAM INDONESIA YOGYAKARTA

2 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 : <?php mysql_connect("localhost","root","password"); mysql_select_db("nama_database");?> "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 ( - koneksi - database - mysql - dengan.html. 3 Juni :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

3 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. 6. Image digunakan sebagai pengganti button, berupa button yang berbentuk gambar. 3

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

5 </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. ( 3 Juni :18) 5

6 BAB II DESKRIPSI KERJA Dalam praktikum kali ini, praktikan akan membuat formulir untuk daftar anggota dengan menggunakan template bertema Radio UNISI 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 7

8 Gambar 2.1 Index 5. Buat database pada 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

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

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

12 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

13 Gambar 2.9 Website untuk formulir 13

14 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 FM dengan beberapa faktor sebagai berikut : 1. Radio UNISI FM memiliki banyak pendengar, tetapi belum ada website tentang radio tersebut. 2. Radio UNISI 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 FM memiliki tujuan dan fungsi sebagai berikut: 1. Untuk mengetahui jumlah anggota (pendengar) dari Radio UNISI 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

15 Gambar 3.2 Formulir setelah di dalam template Data formulir untuk Daftar member Radio UNISI FM merupakan salah satu cara untuk menjadi anggota pendengar Radio UNISI 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

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

17 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

18 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 yang lain dan mengklik tulisan Foto, maka server akan mengeluarkan output Foto anggota Radio UNISI FM tidak tersedia. Seluruh foto ini akan tersimpan pada folder images pada complete collection template di htdocs. 18

19 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

20 DAFTAR PUSTAKA ( - koneksi - database - mysql - dengan.html. 3 Juni :42) 3 Juni :45) ( 3 Juni :18) 20