modul 6 form html - Yogi Adi Nugroho
advertisement
MODUL 6 FORM HTML 6.1. PENGANTAR FORM Sebelum memulai materi tentang FORM, cobalah jawab pertanyaan dibawah ini , Apakah kalian memiliki alamat email ? Apakah kalian sudah memiliki akun Facebook!? Jika jawabannya ya, maka dapat dipastikan, kalian pasti sudah berkenalan dengan FORM dalam HTML. Untuk memiliki alamat email ataupun akun di facebook, langkah pertama yang harus kalian lakukan adalah mendaftarkan diri kalian dengan mengisi data diri lewat sebuah form registrasi. Inilah yang dimaksud dengan FORM dalam HTML. Bila didefinisikan, form html merupakan bagian dari dokumen yang digunakan untuk menginput atau memasukan data. Kalian akan melengkapi form dengan cara menginput data pada element form, seperti dengan memasukan text, memilih item menu, dan lain sebagainya sebelum mengirimkan form tersebut untuk di proses. 6.2. PENULISAN FORM Sama halnya seperti sintaks html, form juga memiliki identifier agar bisa dikenal oleh browser. Untuk menggunakan form html, sintaks yang digunakan yaitu <form>…</form>. Form memiliki beberapa property, yaitu : Name, merupakan property yang berfungsi untuk memberi nama pada form html. Action, merupakan property yang berfungsi untuk menentukan halaman yang akan memproses form yang di isi. Method, merupakan property yang berfungsi untuk menentukan metode pengiriman data formulir, apakah dengan menggunakan post atau get. Elemen-elemen pada form juga memiliki properti yang harus digunakan agar nantinya halaman yang memproses data bisa membedakan informasi yang di input. Property yang digunakan pada elemen form yaitu : Name, merupakan property yang berfungsi untuk memberi nama pada elemen form Value, merupakan property yang berfungsi untuk menuliskan data atau kata pada element form sebelum element form tersebut di isi oleh user. Value biasa digunakan pada form edit data user, dimana sebelumnya, user sudah menginput data, kemudian data tersebut akan di edit. Dibawah ini adalah aturan penulisan form html : <html> <body> <form name=”formulir” action=”proses.php” method=”post”> <input type=”text” name=”nama” value=””> </form> </body> </html> 6.3. TIPE ELEMENT FORM Kalian akan berinteraksi dengan form menggunakan element form. Tipe-tipe element yang dikenal oleh form html adalah sebagai berikut : a) Input Elemen input merupakan elemen yang paling sering digunakan dalam form. Elemen ini dibuka dengan menggunakan tag <input>. Tag input tidak memerlukan sintaks penutup. Elemen input memiliki beberapa tipe, tipe ini sendiri dideklarasikan dengan cara di tambahkan didalam tag input, contohnya <input type=””>. Text Tipe text digunakan bila kalian ingin memasukan data berupa tulisan, angka ataupun symbol kedalam form. Elemen bertipe text biasa digunakan untuk mengisi data nama lengkap. Penulisan tag text yaitu : <input type=”text” name=”nama” id=”nama”> 1 Check Box Input berupa check box biasa digunakan untuk pertanyaan yang bertipe multi answer atau boleh dijawab lebih dari satu jawaban, contohnya pertanyaan tentang makanan favorit atau hobi. Untuk menginput user, tag yang digunakan yaitu : <input type=”checkbox” name=”main_bola” > Main Bola Property “checked=checked” dapat kalian gunakan untuk memberikan pilihan awal, dimana sebelum user memilih checkbox, checkbox tersebut sudah di isi terlebih dahulu. Radio Button Radio Button digunakan untuk pertanyaan berupa pilihan, hanya ada satu jawaban yang dapat dijawab. Contoh penggunaan radio button adalah pada pertanyaan tentang gender user. Tag yang digunakan yaitu : <input type=”radio” name=”gender” value=”pria” > Pria <input type=”radio” name=”gender” value=”wanita”> Wanita Yang harus diperhatikan dalam membuat radio button adalah property name harus sama serta harus disertakan dengan property value. Bila kalian ingin membuat pertanyaan tentang pilihan gender, maka yang harus kalian lakukan adalah membuat dua buah radio button dengan property name yang sama (dalam kasus ini, bisa di isi dengan name=”gender”) lalu sertakan juga properti value, satu di isi dengan value=”pria” dan satu lagi value=”wanita”. Property “checked=checked” dapat kalian gunakan untuk memberikan pilihan awal, dimana sebelum user memilih radio, radio tersebut sudah di isi terlebih dahulu. Tombol Submit Tombol Submit digunakan sebagai tombol yang bila diklik akan memerintahkan form untuk melakukan proses pengiriman data ke halaman yang dituju. Secara default, teks yang tertulis pada tombol submit adalah kata “submit”. Untuk menggantinya dengan kata lain, kalian bisa menggunakan property value. Tag yang digunakan yaitu : <input type=”submit” value=”Daftar” > Tombol Reset Tombol Reset digunakan untuk mereset (mengosongkan) form yang telah di isi. Sama seperti tombol submit, property value dapat digunakan untuk mengubah teks yang tertulis pada tombol reset. Tag yang digunakan yaitu : <input type=”reset” value=”Reset” > Password Input password digunakan untuk input yang berupa password. Teks apapun yang ditulis pada form input password, karakternya akan diubah menjadi symbol, sehingga user tidak bisa melihat teks apa yang dituliskan. Tag yang digunakan yaitu : <input type=”password” name=”pass” > b) Text Area Hampir sama dengan elemen form bertipe text, Text Area juga digunakan untuk menginput data berupa tulisan, angka ataupun symbol kedalam form. Perbedaannya ada pada lebar dan tinggi area input nya. Text area biasa digunakan untuk memasukan alamat lengkap user. Property yang biasa digunakan dalam textarea yaitu sebagai berikut : Name, merupakan property yang berfungsi untuk memberi nama textarea. Cols, merupakan property yang digunakan untuk menentukan lebar dari textarea. Rows, merupakan property yang digunakan untuk menetukan tinggi dari textarea. 2 Tag yang digunakan yaitu : <textarea name=”alamat” cols=”20” rows=”5”></textarea> c) Select Elemen Select digunakan untuk pilihan yang berupa dropdown kebawah. Elemen select biasa digunakan untuk menginput data berupa pilihan kota, tanggal lahir, dan lain sebagainya. Property yang biasa digunakan dalam element select yaitu : Name, merupakan property yang berfungsi untuk memberi nama elemen select. Size, merupakan property yang digunakan untuk menentukan berapa banyak pilihan yang ditampilkan dalam elemen select. Didalam elemen select, terdapat elemen option yang digunakan untuk menuliskan pilihan-pilihan pada elemen select. Tag yang digunakan untuk elemen select dan option yaitu sebagi berikut : <select name=”negara” size=”2”> <option> Indonesia <option> Italia <option> Inggris </select> <!--Dreamweaver Tips --> Untuk memasukan elemen input dreamweaver, kalian bisa menggunakan cara dibawah ini : 1. Arahkan mouse kalian ke Insert Bar. 2. Click tab Forms. 3. Pilih jenis input yang ingin kalian gunakan. Untuk jenis input berupa password dan elemen input berupa select, dianjurkan untuk dengan menuliskan sintaks secara manual. 3 LATIHAN - Buatlah dua buah halaman web, berikan nama index.html untuk halaman pertama dan registrasi.html untuk halaman kedua. Letakan kedua halaman web tersebut didalam satu folder !!! - Sintaks halaman index.html dan registrasi.html bisa kalian lihat pada halaman 5 dan 6 Tampilan home.html akan menjadi seperti dibawah ini ! - Tampilan registrasi.html akan menjadi seperti dibawah ini : - Print screen layar dengan cara menekan tombol prtsc / syseq pada keyboard, lalu buka aplikasi paint (Start All Programs Accessories Paint), tekan ctrl+v (paste) - Kirimkan file index.html, registrasi.html beserta print screen layarnya ke alamat email [email protected] 4 - Pada halaman index.html, tuliskan sintaks dibawah ini ! Berikan tanda sebagai pendanda bahwa kalian sudah mengetikan sintaks pada section yang bersangkutan. <html> <head> <title>LATIHAN FORM DALAM HTML</title> </head> <body> <table width="100%" border="1"> <tr> <td colspan="2" height="100px" align="center"> HEADER </td> </tr> <tr> <td valign="top" width=”200px”> <a href="index.html"> Home </a> <br> <a href="registrasi.html">Registrasi</a> </td> <td> <h1 align="center">WELCOME TO FACESCHOOL</h1> <p align="center"> The first Indonesian high school networking. </p> <div align="right"> <a href="registrasi.html"> Register now </a> <br> be able to connect to entier Indonesian High School Student !!! </div> </td> </tr> <tr> <td align="center" colspan="2"> <font size="3"> &copy; 2010 --- Indonesian High School Student Community </font> </td> </tr> </table> </body> </html> 5 - Pada halaman registrasi.html, tuliskan sintaks dibawah ini ! <html> <head> <title>LATIHAN FORM DALAM HTML</title> </head> <body> <form name="formulir" action="" method="post"> <table width="100%" border="1"> <tr> <td colspan="2" height="100px" align="center"> HEADER </td> </tr> <tr> <td valign="top" width="200px"> <a href="index.html"> Home </a> <br> <a href="registrasi.html">Registrasi</a> </td> <td> <div align="center"> <font size="+2"> Pendaftaran Account Baru <br> <b>FACESCHOOL</b> <i>The first Indonesian high school network.</i> </font> </div> <table align="center" width="700px" border="1"> <tr> <td> Nama Lengkap </td> TIPE INPUT TEXT <td> <input type="text" name="nama"> </td> </tr> <tr> <td> Gender </td> TIPE INPUT RADIO BUTTON <td> <input type="radio" name="gender"> Pria <input type="radio" name="gender"> Wanita </td> </tr> <tr> <td> Hobi </td> TIPE INPUT CHECK BOX <td> <input type="checkbox" name="main_bola"> Pria <br> <input type="checkbox" name="bulutangkis"> Wanita <br> <input type="checkbox" name="musik"> Musik <br> </td> </tr> <tr> <td> Nomor HP </td> TIPE INPUT TEXT <td> <input type="text" name="hp"> </td> </tr> 6 <tr> <td> Kota Sekarang </td> <td> <select name="kota" size="1"> <option> Jakarta <option> Depok <option> Bogor TIPE SELECT <option> Bekasi <option> Aceh <option> Bandung <option> Jayapura <option> Solo </select> </td> </tr> <tr> <td> Alamat </td> TIPE TEXT AREA <td> <textarea name="alamat" cols="20" rows="5"></textarea> </td> </tr> <tr> <td> Sekolah </td> TIPE INPUT TEXT <td> <input type="text" name="sekolah"> </td> </tr> <tr> <td> Username </td> TIPE INPUT TEXT <td> <input type="text" name="username"> </td> </tr> <tr> <td> Password </td> TIPE INPUT PASSWORD <td> <input type="password" name="password"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Daftar"> <input type="reset" value="Reset"> </td> TIPE INPUT TOMBOL SUBMIT DAN RESET </tr> </table> </td> </tr> <tr> <td align="center" colspan="2"> <font size="2"> &copy; 2010 --- Indonesian High School Student Community </font> </td> </tr> </table> </form> </body> </html> 7 MODUL 7 VALIDASI JAVASCRIPT 6.4. PENGANTAR JAVASCRIPT Javascript merupakan bahasa pemrograman berbasis web di sisi client yang diimplementasikan sebagai bagian dari browser untuk menyediakan kemudahan dalam penggunaan dan tampilan website serta membuat sebuah website menjadi dinamis. Sebagai sebuah bahasa pemrograman, javascript memiliki karakteristik dinamis dan tidak membutuhkan banyak sintaks untuk dideklarasikan (tentu saja hal ini tergantung dari algoritma kita dalam mendefinisikan suatu kasus). 6.5. DASAR PEMROGRAMAN JAVASCRIPT Javascript terlalu luas untuk dipelajari dalam beberapa pertemuan. Pada materi ini, yang akan dibahas adalah bagian kecil dari javascript. Kita akan menggunakan javascript untuk membantu kita dalam memvalidasi form yang telah kita buat pada modul 6. Sebelum melangkah lebih jauh, kita awali langkah kita dengan mempelajari bagaimana menggunakan dan mendeklarasikan javascript dalam dokumen html. Sama seperti CSS yang telah kita pelajari pada modul 3, penulisan sintaks Javascript dapat dilakukan lewat dua cara, yaitu disatukan dengan dokumen HTML dan dideklarasikan pada sebuah dokumen khusus ber-extensi “.js”, contoh: “koding_javascript.js” a. Sintaks javascript dideklarasikan didalam dokumen HTML. (internal javascript) Untuk deklarasi dengan cara menuliskannya dalam dokumen HTML, caranya yaitu dengan menggunakan tag <script type=”text/javascript”> … </script> Tag <script type=”text/javascript”> … </script> diletakan ditengah tag <head> </head>, hal ini agar browser segera menjalankan sintaks javascript segera setelah halaman web di akses, sehingga javascript dapat berjalan di seluruh halaman web. Contoh deklarasi sintaks-nya adalah sebagai berikut : <html> <head> <script type="text/javascript"> .... </script> </head> <body> Isi halaman web </body> </html> b. Sintaks javascript dideklarasikan pada dokumen ber-extensi “.js” (external javascript) Terkadang, sintaks javascript yang kita deklarasikan digunakan di lebih dari satu halaman. Untuk kasus seperti ini, ada baiknya kalian mendeklarasikan sintaks javascript pada sebuah dokumen ber-extensi “.js”, hal ini dimaksudkan agar kalian nantinya tinggal memanggil dokumen yang berisi deklarasi javascript yang akan digunakan, kalian tidak perlu lagi mendeklarasikan ulang sintaks javascript yang akan digunakan. Tag yang digunakan untuk memanggil dokumen javascript bila kalian mendeklarasikannya dalam dokumen ber-extensi “.js” adalah sebagai berikut : <html> <head> <script type="text/javascript" src="file.js"></script> </head> <body> Isi halaman web </body> </html> 8 6.6. JAVASCRIPT UNTUK VALIDASI FORM Untuk beberapa kasus, validasi form adalah hal yang penting. Sebagai contoh, bila kita mengunjungi sebuah website yang mengharuskan pengunjungnya untuk melakukan pendaftaran online contohnya seperti facebook.com atau yahoomail.com, terdapat beberapa field atau bagian yang harus di isi, contoh nya seperti nama serta email dari registran biasanya wajib di isi dalam sebuah form pendaftaran online. Form tersebut tidak akan memproses data yang diinput bila field nama serta email dari registran tidak diisi. Disinilah javascript akan menjalankan fungsinya, javascript akan membantu kita memvalidasi form registran dengan mengecek field-field mana saja yang belum terisi, bila field tersebut tidak memenuhi syarat, javascript tidak akan memberikan izin kepada form untuk lanjut ke tahap pemrosesan data. Untuk memudahkan kita dalam melakukan validasi form dengan javascript, kita dapat menggunakan sebuah library yang didalamnya sudah didefinisikan fungsi-fungsi untuk melakukan validasi. Dengan adanya library ini, kita tinggal memanggil nama fungsi serta tipe input yang divalidasi. Salah satu library yang dapat melakukan hal ini yaitu gen_validator yang saat ini sudah masuk ke versi-31. Kalian bisa mendownload gen_validator ini di website javascript-coder.com dengan alamat http://www.javascript-coder.com/html-form/javascript-form-validation.phtml. 6.3.1 STRUKTUR PENULISAN gen_validator Gambaran struktur penulisan gen_validator dapat kalian lihat pada sintaks dibawah ini : <html> <head> // 1. PANGGIL LIBRARY gen_validator DENGAN METODE external javascript </head> <body> <form> <table> <form name=”2.nama_formulir” action=”” method=”post”> FIELD FORM VALIDASI </form> </table> </form> </body> <!-- METODE internal javascript --> <script language=”javascript” type=”text/javascript”> // 3. DEFINISIKAN VARIABEL DAN MENENTUKAN NAMA FORM YANG DIVALIDASI // 4. DEFINISIKAN FIELD MANA YANG AKAN DIVALIDASI DAN TIPE VALDIASI YANG DIGUNAKAN </script> </html> Terdapat empat langkah yang harus kalian lakukan untuk menggunakan gen_validator pada form yang kalian buat, yaitu : 1. Memanggil library gen_validator Untuk memanggil library gen_validator, tuliskan sintaks dibawah ini ! <head> <script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script> </head> Untuk sintaks seperti diatas, PASTIKAN file gen_validator.js berada 1 folder dengan file html yang kalian gunakan untuk valiadasi. 2. Definiskikan nama formulir Pada modul “6. FORM”, kalian telah belajar tentang cara membuat sebuah form HTML, salah satu point penting ketika kalian membuat sebuah form HTML adalah memberikan nama form tersebut untuk membedakan sebuah form dengan form lainnya. Nama form dalam gen_validator nantinya akan digunakan untuk mendefinisikan form mana yang akan divalidasi oleh gen_validator. (perhatikan baris sintaks ke 4 pada sintaks dibawah ini) 9 1 <body> 2 <form> 3 <table> 4 <form name=”nama_formulir” action=”” method=”post”> 5 FIELD FORM VALIDASI 6 </form> 7 </table> 8 </form> 9 </body> Untuk langkah ke-3 dan ke-4, kalian harus mendefinisikannya dengan menggunakan metode internal javascript yang diletakan pada bagian bawah halaman website, setelah sintaks </html> . Perhatikan sintaks dibawah ini !. 1 </html> 2 <script language=”javascript” type=”text/javascript”> 3 var validasi = new Validator(“nama_form”); 4 validasi.addValidation(“nama_field”, “jenis_validasi”, “pesan”); 5 </script> 3. Definisikan variable dan tentukan nama form yang divalidasi. Agar script javasript tahu form mana yang akan divalidasi, kalian harus mendefinisikan terlebih dahulu nama form yang akan di validasi dengan mengetikan sintaks dibawah ini! (baris sintaks ke-3) var abcd = new Validator(“nama_form”); - abcd merupakan sebuah variabal yang nantinya akan digunakan untuk memanggil perintah pembuatan validator baru. new Validator(“nama_form”) Nama variabel bisa kalian isi dengan kata apapun, yang harus di perhatikan, jika lebih dari satu kata, kata tersebut tidak boleh dipisahkan dengan spasi, kalian bisa menggati spasi dengan symbol “_”, contohnya validasi_formulir. - nama_form merupakan nama dari form yang akan divalidasi. Bila kalian telah membuat sebuah form seperti tampak pada sintaks dibawah ini : <form name=”formulir” action=”” method=”post”> maka nama form bisa kalian isi dengan formulir var abcd = new Validator(“formulir”); dibawah ini adalah contoh sintaks untuk mendefinisikan variabel dan form yang diganakan : var validasi_pendaftaran = new Validator(“formulir”); 4. Definiskan field yang akan divalidasi serta tipe validasinya Setelah membuat sebuah variabel yang akan digunakan untuk menyimpan perintah pembuatan variabel baru, langkah selanjutnya adalah menggunakan variabel tersebut dalam sintaks yang digunakan untuk mendefinisikan field yang akan divalidasi beserta tipe validasinya dan pesan yang ditampilkan bila field yang diisi tidak memenuhi syarat. (baris sintaks ke-4) nama_variabel.addValidation(“nama_field”, “jenis_validasi”, “pesan”); - nama variabel merupakan variabel yang telah kalian buat pada langkah ke-3 addValidation (ditulis dengan huruf “a” kecil dan “V” besar) merupakan tag yang digunakan untuk menambahkan validasi baru. Nama field adalah nama dari elemen form yang kalian gunakan pada form yang akan divalidasi. <input type=”text” name=”nama_elemen” id=”nama”> 10 - JENIS VALIDASI required req maxlen=??? maxlength=??? Jenis Validasi. Terdapat beberapa jenis validasi yang dapat kalian gunakan sebagai persyaratan bagi user yang menginput data pada suatu elemen form. Jenis-jenis validasi dapat dilihat pada tabel dibawah ini : KETERANGAN Field harus di isi, tidak boleh kosong minlen=??? minlength=??? alphanumeric / alnum alphanumeric_space / alnum_s num numeric dec decimal alpha alphabetic alpha_s alphabetic_space email lt=??? lessthan=??? Mengecek jumlah karakter maksimal yang diinput. Contoh : jika jumlah karakter input yang diizinkan adalah sebanyak 25 karakter, maka jika user menginput lebih besar dari 25 karakter, pesan error akan ditampilkan. Mengecek jumlah karakter minimal yang diinput. Contoh : jika jumlah karakter input yang diizinkan adalah sebanyak 6 karakter, maka jika user menginput kurang dari 6 karakter, pesan error akan ditampilkan. Mengecek apakah data yang diinput merupakan jenis input huruf alphabet dan angka atau bukan. Contoh : bila user menginput jenis input selain huruf alphabet dan angka (a b c d e, 1 2 3 4 dst), maka pesan error akan ditampilkan. Hanya mengizinkan input berupa huruf alphabet, angka dan spasi. Contoh input yang benar : nama user 123 Contoh input yang salah : nama_user_123 Bila format input berupa karakter selain alphabet, angka dan spasi (contoh : “_”, “*”, “#”, “@”), maka pesan error akan ditampilkan. Hanya mengizinkan input berupa angka. Bila yang diinput adalah karakter huruf alphabet atau karakter apapun selain angka, maka pesan error akan ditampilkan Mengizinkan input berupa angka decimal. Hanya mengizinkan input berupa huruf alphabet saja. Bila yang diinput karakter spesial ataupun angka, pesan error akan ditampilkan. Hanya mengizinkan input berupa huruf alphabet dan karakter spasi. Contoh : nama user The field is an email field and verify the validity of the data. Mengeset nilai input maksimal. Contoh, bila kalian ingin mengeset nilai maksimal yang bisa dimasukan oleh user adalah 1000, maka kalian bisa menggunakan “lessthan=1000”. Bila user menginput 1001, pesan error akan ditampilkan. Mengeset nilai input minimal. Contoh, bila kalian ingin mengeset nilai minimal yang bisa dimasukan oleh user adalah 10, maka kalian bisa menggunakan “gt=1000”. Bila user menginput angka 9, pesan error akan ditampilkan. Validasi ini digunakan untuk memvalidasi jenis elemen bertipe select atau option. Biasanya, list seleksi pertama akan menampilkan pilihan “- - - Pilih - - -” atau pilihan sejenis itu untuk menandakan bahwa user harus memilih salah satu pilihan. Untuk mencegah user tidak melakukan pilihan, kalian bisa menggunakan jenis validasi dontselect agar pesan error ditampilkan bila pilihan masih berupa “- - - Pilih - - -”. Gunakan “dontselect=0” untuk melakukan hal ini. Validasi ini digunakan untuk memvalidasi jenis element bertipe check box. Pesan error akan ditampilkan bila user memberikan tanda centang pada check box yang telah kita definisikan sebagai check box yang tidak boleh diisi. Gunakan “donselectchk=on” untuk melakukan hal ini. Validasi ini digunakan untuk memvalidasi jenis element bertipe check box. Pesan error akan ditampilkan bila user memberikan tidak memberikan tanda centang pada check box yang telah kita definisikan sebagai check box yang harus diisi. Gunakan “shouldselchk=on” untuk melakukan hal ini. Validasi ini digunakan pada jenis elemen bertipe radio button. Pesan error akan ditampilkan bila user tidak memilih satupun pilihan radio button yang disediakan. gt=??? greaterthan=??? dontselect=?? dontselectchk shouldselchk selone_radio - Pesan, merupakan teks yang akan ditampilkan bila input yang dimasukan oleh user tidak memenuhi syarat. 11 TIPS gen_validator Secara default, pesan error yang ditampilkan oleh gen validator akan ditampilakn satu-persatu, perhatikan gambar dibawah ini ! Terdapat tiga pilihan tampilan error yang dapat kalian gunakan, 1. Single view (default), tampilannya seperti gambar diatas ! 2. Error Together in message box, pesan error akan ditampilkan seperti gambar dibawah ini ! Untuk menampilan pesan error seperti gambar diatas, tambahkan sintaks dibawah ini setelah sintaks definisi variabel. frmvalidator.EnableMsgsTogether(); Contoh (perhatikan baris sintaks ke-5): 1 </html> 2 <script language=”javascript” type=”text/javascript”> 3 var validasi = new Validator(“nama_form”); 4 frmvalidator.EnableMsgsTogether(); 5 validasi.addValidation(“nama_field”, “jenis_validasi”, “pesan”); 6 </script> 3. Error Together on Page Itself,pesan error ditampilkan langsung di halaman website. Untuk menampilan pesan error seperti diatas, lakukan langkah dibawah ini ! 1. Tambahkan sintaks dibawah ini pada cell tabel bagian bawah, tepat sebelum tombol “submit” <div id='myform_errorloc' class='error_strings'></div> (perhatikan baris ke-3) 2. Tambahkan sintaks dibawah ini setelah sintaks definisi variabel frmvalidator.EnableOnPageErrorDisplaySingleBox(); frmvalidator.EnableMsgsTogether(); (perhatikan baris ke-16 dan 17) Contoh : 1. 2. 3. 4. 5. 6. 7. 8. 9. 10 11 12 13 14 15 16 17 18 19 <tr> <td colspan=”2”> <div id='myform_errorloc' class='error_strings'></div> </td> </tr> <tr> <td colspan=”2”> <input type=”submit” value=”Submit”> </td> </tr> </table> </form> </html> <script language=”javascript” type=”text/javascript”> var validasi = new Validator(“nama_form”); frmvalidator.EnableOnPageErrorDisplaySingleBox(); frmvalidator.EnableMsgsTogether(); validasi.addValidation(“nama_field”, “jenis_validasi”, “pesan”); </script> 12 LATIHAN 6.7. Download file javascript_form.zip di alamat http://www.javascript-coder.com/html-form/javascript_form.zip 6.8. Buat sebuah folder yang nantinya akan digunakan sebagai tempat menyimpan project kalian. 6.9. Extract file javascript_form.zip lalu copy file gen_validatorv31.js kedalam folder project yang tadi telah kalian buat. 6.10. Buatlah sebuah form yang divalidasi dengan javascript dengan kriteria sebagai berikut : NAMA FIELD TIPE ELEMEN KRITERIA Text Tidak boleh kosong Nama lengkap Radio button, pilihan : Harus pilih salah satu Gender 6.11. Pria 6.12. Wanita Text 6.13. Input berupa angka, Nomor HP tidak boleh selain angka 6.14. Maksimal 20 digit Button Submit Submit Button Reset Reset 6.15. Tampilan form nantinya akan tampil seperti gambar dibawah ini ! 6.16. Simpan dengan nama pendaftaran_javascript.html, letakan didalam folder project yang tadi telah kalian buat. 6.17. Sintaks file pendaftaran_javascript.html dapat kalian lihat pada halaman 7 13 - Berikan tanda sebagai pendanda bahwa kalian sudah mengetikan sintaks pada section yang bersangkutan. <html> <head> <script language="javascript" src="gen_validatorv31.js" type="text/javascript"></script> </head> <body> <form name="formulir" action="" method="post"> <table> <tr> <td colspan="2"> FORMULIR PENDAFTARAN </td> </tr> <tr> <td> Nama Lengkap </td> <td> <input type="text" name="nama"> </td> </tr> <tr> <td> Gender </td> <td> <input type="radio" name="gender" value="pria">Pria <input type="radio" name="gender" value="wanita">Wanita </td> </tr> <tr> <td> Handphone </td> <td> <input type="text" name="hp"> </td> </tr> <tr> <td> <input type="submit" value="Submit"> </td> <td> <input type="reset" value="reset"> </td> </tr> </table> </form> <script language="javascript" type="text/javascript"> var validasi = new Validator("formulir"); validasi.EnableMsgsTogether(); validasi.addValidation("nama","req","Nama harus di isi"); validasi.addValidation("gender", "selone_radio", "Silahkan pilih gender"); validasi.addValidation("hp", "req", "Nomor HP harus di isi"); validasi.addValidation("hp", "num", "Nomor HP harus angka"); </script> </body> </html> 14 TUGAS - Kerjakan dalam berkelompok, 1 kelompok maksimal 5 orang. Buatlah sebuah form yang divalidasi dengan javascript dengan kriteria dibawah ini NAMA ELEMEN TIPE ELEMEN KRITERIA Text Tidak boleh kosong nama_lengkap Radio Button, dengan pilihan : Harus pilih salah satu gender - Pria - Wanita Check Box, dengan pilihan hobi - Sepak Bola - Bulutangkis - Musik Text - Input harus angka hp - Tidak boleh selain angka Select / Option, Bila pilihan masih kota dengan pilihan : - - - Pilih - - - - - Pilih - - Tampilkan pesan error. - Jakarta - Bogor - Depok - Tangerang - Bekasi textarea alamat Text Tidak boleh kosong sekolah - Tidak boleh kosong username - Maksimal 10 karakter Password - Tidak boleh kosong password - Minimal 6 karakter Button Submit Daftar Button Reset Reset - Tampilan form nantinya akan menjadi seperti gambar dibawah ini : 15 MODUL 8 XAMPP 1. INSTALASI XAMPP Pada MODUL 9, kalian akan mengenal bahasa pemrograman berbasis web, PHP. Untuk dapat meng-compile (menjalankan) PHP di komputer kalian, kalian membutuhkan sebuah software tambahan yang berfungsi untuk membuat komputer kalian bekerja layaknya server. Salah satu software freeware (gratis) yang dapat kalian gunakan yaitu XAMPP. XAMPP sendiri merupakan akronim dari X yang berarti dapat melakukan komunikasi antar platform, Apache HTTP Server, MySQL, PHP dan Perl. Untuk mendownload XAMPP, kalian dapat mengunjungi website http://www.apachefriends.org/en/xampp.html. Setelah kalian mendownload XAMPP, lakukan langkah-langkah dibawah ini untuk menginstall XAMPP pada komputer kalian : 2. Buka aplikasi xampp-win32-1.7.3.exe yang telah kalian download dari website apachefriends.org. 3. Pada destination folder, tentukan lokasi penyimpanan XAMPP kalian, setelah itu klik tombol Install. 4. Proses Instalasi XAMPP akan dijalankan 5. Setelah proses copy file pada instalasi XAMPP selesai, kalian akan di hadapkan pada pertanyaan “Should I add shortcut to……. Desktop ?“, tekan tombol “Y” pada keyboard kalian, lalu tekan “Enter”. 6. Pada pertanyaan “Sould I locate...”, tekan tombol “Y” pada keyboard kalian, lalu tekan “Enter” 7. Pada pertanyaan “Should I make a portable....”, tekan tombol “n” pada keyboard kalian, lalu tekan tombol “Enter” 16 8. Proses instalasi telah selesai, tekan sembarang tombol untuk melanjutkan ke halaman berikutnya. 9. Pada layar “You should correct....”, tekan sembarang tombol untuk melanjutkan ke halaman berikutnya. 10. Pada pertanyaan "Please Choose (1 – 7 / x) : ”, tekan tombol “x” pada keyboard kalian, lalu tekan “Enter” 2. MENJALANKAN XAMPP Selah melakukan instalasi, jalankan xampp pada komputer kalian sehingga komputer kalian dapat bekerja layaknya server. Lakukan langkah-langkah dibawah ini ! Click Start → All Programs → XAMPP for Windows → XAMPP Control Panel Windows Control Panel akan ditampilkan 17 Click tombol start pada Apache dan MySQL, sehingga statusnya berubah menjadi Running Bila status nya sudah Running, maka komputer kalian sudah dapat menjalankan PHP. 18 MODUL 9 PENGANTAR PHP 1. PENGANTAR PHP PHP pada awalnya merupakan singkatan dari Personal Home Page, namun pada perkembangannya, setelah PHP 3.0 dirilis, singkatan PHP diubah menjadi sebuah akronim berulang, PHP : Hypertext Preprocessor. Untuk membuat sebuah website dinamis, script PHP disisipkan dalam sintaks dokumen HTML untuk kemudian diterjemahkan oleh webserver dengan module PHP yang berfungsi layaknya kamus untuk kemudian hasil terjemahannya ditulis kembali kedalam dokumen HTML sehingga komputer client tidak akan melihat kode sumber PHP karena telah di terjemahkan terlebih dahulu oleh web server kedalam sintaks HTML. 2. DASAR PEMROGRAMAN PHP Modul ini memiliki keterbatasan, PHP memiliki cukup banyak sintaks identifier (tanda pengenal). Waktu satu semester tidak akan cukup untuk membahas kesemua identifier dalam PHP. Untuk itu, dalam modul ini, yang akan dibahas hanyalah sekilas tentang bahasa pemrograman PHP. Kalian diharapkan dapat aktif mencari materi yang dibutuhkan untuk memperkaya pemahaman kalian tentang bahasa pemrograman PHP. 2.1 SINTAKS DASAR PHP SINTAKS DASAR PHP HTML ESCAPING Ketika server menerima suatu file, maka web server tersebut akan mencari tags pembuka “<?php ?>” yang merupakan identifier bagi web server untuk membedakan mana yang merupakan sintaks PHP dan mana yang merupakan sintaks HTML. Baris-baris kode PHP nantinya akan diletakan dalam tag “<?php … ?>”. dibawah ini adalah contoh penggunaan bahasa PHP dalam sebuah halaman web. HTML ESCAPING <html> <body> Teks ini akan diabaikan oleh web server. <br> <?php echo“teks ini akan diproses oleh web server <br>”; ?> Teks ini juga di abaikan oleh server </body> </html> OUTPUT PADA BROWSER Teks ini akan diabaikan oleh server Teks ini akan diproses oleh server Teks ini juga diabaikan oleh server 19 PEMISAHAN INSTRUKSI Untuk memisahkan instruksi atau perintah PHP yang satu dengan perintah lainnya, digunakan tanda titik koma (“;”). Contoh penulisan pemisah instruksi dalam PHP dapat kalian lihat pada sintaks dibawah ini : PEMISAHAN INSTRUKSI <?php echo “Ini teks pertama, jangan lupa pemisah titik koma! <br>”; echo “Ini teks kedua, jangan lupa pemisah titik koma! <br>”; echo “Ini teks ketiga”; ?> OUTPUT PADA BROWSER Ini teks pertama, jangan lupa pemisah titik koma ! Ini teks kedua, jangan lupa pemisah titik koma ! Ini teks ketiga MENCETAK OUTPUT Untuk mencetak output dari input yang telah kalian tuliskan, kalian dapat menggunakan sintaks echo(). Dibawah ini adalah contoh penggunaan sintaks echo dan print MENCETAK OUTPUT DENGAN ECHO() <?php echo “teks ini dicetak dengan menggunakan sintaks echo <br>”; ?> OUTPUT PADA BROWSER Teks ini dicetak dengan menggunakan sintaks echo KOMENTAR Bila kalian sedang mengerjakan sebuah project, terkadang kalian perlu untuk menuliskan keterangan untuk menjelaskan kegunaan dari fungsi yang didekarasikan agar orang lain atau bahkan agar kalian sendiri tidak lupa akan apa yang kalian tulis. Sintaks atau penanda yang digunakan untuk menuliskan komentar dalam halaman PHP yaitu tanda garis miring dua kali bila komentarnya hanya terdiri dari satu baris (// komentar ) dan garis miring satu kali di ikuti oleh tanda bintang lalu di akhir dengan tanda bintang di ikuti oleh garis miring satu kali ( /* komentar */ ). Lihat contoh dibawah ini : KOMENTAR PADA SINTAKS <?php // Komentar hanya satu baris /* Komentar Lebih dari satu baris */ echo “hanya teks ini yang tercetak pada browser” ?> OUTPUT PADA BROWSER Hanya teks ini yang tercetak pada browser Web server akan menganggap semua tulisan yang ada pada sintaks (//) dan (/* */) sebagai sebuah komentar pada koding yang kalian tulis, sehingga tidak akan diproses dan tidak akan di cetak pada halaman browser. 20 2.2 VARIABEL Dalam sebuah bahasa pemrograman, khususnya PHP, variabel merupakan suatu hal yang penting untuk digunakan, karena variabel digunakan untuk menampung data baik itu data berupa input maupun output. Untuk mendeklarasikan variabel, kalian cukup menuliskan karakter dolar (‘ $ ’) lalu diikuti dengan nama variabel. Nama variabel ini bersifat Case Sensitive, artinya bila kalian mendeklarasikan variabel dengan nama “ $abc ”, maka untuk memanggil variabel tersebut, kalian harus menuliskan “ $abc ”, bila kalian menuliskan “ $AbC”, “ $abC ” atau penulisan lainnya yang berbeda dengan dekarasi awal, maka variabel tersebut tidak akan terpanggil. Contoh penulisan variabel: VARIABEL <?php $a = “Selamat datang”; echo “$a”; ?> OUTPUT PADA BROWSER Selamat datang Terdapat beberapa peraturan yang harus kalian penuhi dalam mendeklarasikan sebuah variabel, yaitu - Case Sensitive - Nama variabel hanya terdiri dari huruf Alfabet (A – Z / a - z), angka (1 - 9) dan underscore (“ _ “) - Nama variabel Tidak Boleh diawali dengan angka. - Nama variabel Tidak Boleh mengandung karakter khusus seperti @, #, %, dll. - Nama variabel Tidak Boleh mengandung karakter spasi (“ “). 2.3 TIPE DATA Jika kita berbicara tentang komputer, maka kita juga berbicara tentang data, karena pada dasarnya, tugas komputer adalah mengolah data, komputer tidak dapat melakukan tindakan apapun bila tidak ada data yang di input kedalam sistem. Dalam PHP, terdapat delapan tipe data yang dapat digunakan, yaitu Boolean, Integer, Float, String, Array, Object, Resources, Null. Namun dalam modul ini, tidak akan dibahas kedelapan tipe data diatas, yang akan dibahas hanyalah tipe data Integer, String, Null. TIPE DATA INTEGER Tipe data integer merupakan deretan angka yang ditulis didalam sebuah set kelompok deret angka, contoh : A = {…, -2, -1, 0, 1, 2, …}. Contoh penulisan tipe data integer dapat kalian lihat pada sintaks dibawah ini ! TIPE DATA INTEGER <?php $a = 123; // Angka desimal $b = -123; // Angka negatif ?> TIPE DATA STRING String merupakan tipe data yang dapat digunakan untuk menyimpan barisan karakter. Untuk menuliskan string, kalian dapat menggunakan tanda petik ganda ( “…” ) Contoh penulisan String : TIPE DATA STRING <?php echo “Ini contoh penulisan string”; ?> 21 Ini contoh penulisan string OUTPUT PADA BROWSER TIPE DATA NULL Tipe data null digunakan untuk memberikan nilai kosong pada sebuah variable. Contoh penulisan tipe data null dapat kalian lihat pada sintaks dibawah ini : TIPE DATA NULL <?php $jumlah = null; ?> 2.4 OPERATOR Operator adalah symbol yang mengolah nilai pada operan dan menghasilkan satu nilai baru. Setiap operator akan mengolah data dengan satu cara tertentu. OPERATOR ARITMATIKA Operator aritmatika digunakan untuk menghitung aritmatika dasar. OPERATOR + Penambahan - Pengurangan * Pengalian / Pembagian % Modulus ++ Increment -- Decrement OPERATOR = += -= *= /= .= %= OPERATOR == != > < >= <= KETERANGAN CONTOH x=2 x+2 x=2 5-x x=4 x*5 15/5 5/2 5%2 10%8 10%2 x=5 x++ x=5 x-- HASIL 4 3 20 3 2.5 1 2 0 x=6 x=4 ASSIGNMENT OPERATORS CONTOH SAMA ARTINYA DENGAN x=y x+=y x-=y x*=y x/=y x.=y x%=y x=y x=x+y x=x-y x=x*y x=x/y x=x.y x=x%y OPERATOR PERBANDINGAN KETERANGAN Adalah sama dengan Adalah tidak sama dengan Adalah lebih besar dari Adalah lebih kecil dari Adalah lebih besar sama dengan Adalah lebih kecil sama dengan CONTOH 5==8 (Bernilai Salah) 5!=8 (Bernilai Benar) 5>8 (Bernilai Salah) 5<8 (Bernilai Benar) 5>=8 (Bernilai Salah) 5<=8 (Bernilai Benar) 22 OPERATOR LOGIS (LOGICAL OPERATOR) OPERATOR && Dan KETERANGAN CONTOH || Atau (x < 10 && y > 1) Bernilai benar x=6 y=3 ! Bukan (x==5 || y==5) Bernilai salah x=6 y=3 x=6 y=3 !(x==y) Bernilai benar 2.5 STRUKTUR KONTROL Untuk berkomunikasi dengan komputer, dibutuhkan struktur kontol agar si komputer paham apa yang kita inginkan. Dalam PHP, terdapat beberapa struktur kontrol yang dapat kita gunakan, beberapa diantaranya yaitu if, else, else if dan while. IF Struktur konrol IF merupakan satu dari banyak fitur penting dalam sebuah bahasa pemrograman. Struktur IF dapat membuat suatu kondisi kapan suatu potongan atau bagian sintaks harus di eksesusi. Struktur IF dapat kalian lihat pada sintaks dibawah ini. STRUKTUR IF if(kondisi) { statement } CONTOH PENGGUNAAN IF $a = 2; $b = 3; if($a < $b) { echo “variabel A lebih kecil dibanding variabel B”; } OUTPUT PADA BROWSER Variabel A lebih kecil dibanding variabel B ELSE Terkadang kalian ingin membuat sebuah pernyataan yang akan ditampilkan bila kondisi IF tidak terpenuhi. Untuk kasus seperti ini, kalian dapat menggunakan kondisi ELSE. STRUKTUR IF if(kondisi) { Statement bila kondisi terpenuhi } else { Statement bila kondisi tidak terpenuhi } 23 CONTOH PENGGUNAAN ELSE $a = 5; $b = 6; if($a > $b) { echo “variabel A lebih besar dibanding variabel B”; } else { echo “variabel B yang lebih besar !!!”; } OUTPUT PADA BROWSER Variabel B yang lebih besar ELSEIF Kondisi ELSEIF digunakan untuk sebuah kondisi dimana kalian memberikan beberapa pilihan kepada program yang kalian buat. STRUKTUR IF if(kondisi_1) { Statement bila kondisi 1 terpenuhi } elseif(kondisi_n) { Statement bila kondisi n terpenuhi } CONTOH PENGGUNAAN ELSE $a = 5; $b = 5; if($a < $b) { echo “variabel A lebih KECIL dibanding variabel B”; } elseif ($a == $b) { echo “nilai variabel A dan B adalah sama”; } elseif ($a > $b) { echo “variabel A lebih BESAR dibanding variabel B”; } OUTPUT PADA BROWSER nilai variabel A dan B adalah sama 24 WHILE Kondisi WHILE merupakan kondisi LOOP (berulang) yang paling simpel yang bisa kita gunakan dalam PHP. Untuk lebih jelasnya tentang WHILE, perhatikan barisan sintaks dibawah ini ! STRUKTUR WHILE while(kondisi) { statement } CONTOH PENGGUNAAN WHILE $a = 0; while($a <= 4) { echo “Cetak variabel”; $a++; } OUTPUT PADA BROWSER Cetak Cetak Cetak Cetak variabel variabel variabel variabel 2.6 PENANGANAN METHOD FORM POST DAN GET Kalian sudah mempelajari tentang FORM dalam HTML pada modul 6. Dalam FORM HTML, terdapat sebuah property bernama METHOD yang berfungsi untuk menentukan metode pengiriman data formulir yang telah di isi. Kali ini, kita akan mencoba untuk menangkap variabel-variabel yang telah dikirimkan oleh formulir tersebut dengan menggunakan fungsi POST dan GET dari PHP. $_GET PENULISAN VARIABEL GET <?php $_GET[“nama_field_pada_form”]; ?> Variabel $_GET digunakan untuk menangkap data dari form yang menggunakan metode bertipe method=”get”. Informasi yang dikirimkan dengan metode pengiriman $_GET dapat dilihat oleh semua pengunjung, karena variabel yang dikirimkan di tuliskan pada address bar browser. Contoh penggunaan variabel $_GET : SINTAKS PADA FORM DENGAN METHOD GET (register.html) <form action=”proses.php” method=”get”> Nama : <input type=”text” name=”nama”> <br> Usia : <input type=”text” name=”usia”> <br> <input type=”submit”> </form> Saat user meng-click tombol sumbit, alamat web pada address bar browser akan tampak seperti pada alamat web dibawah ini URL PADA ADDRESS BAR http://proses.php?nama=yogiadi&usia=22 25 Setelah URL terisi dengan variabel nama dan usia, maka kita dapat menggunakan varabel $_GET untuk menangkap informasi dari URL tersebut. Yang harus kalian pahami, nama dari field pada form secara otomatis akan dijadikan ID pada variabel $_GET. MENANGKAP INFORMASI DARI URL (hasil_registrasi.php) Selamat datang <?php echo $_GET[“nama”]; ?> <br /> Kamu berusia <?php echo $_GET[“usia”]; ?> tahun! $_POST PENULISAN VARIABEL POST <?php $_GET[“nama_field_pada_form”]; ?> Variabel $_POST digunakan untuk menangkap data dari form yang menggunakan metode bertipe method=”get”. Berbeda dengan metode pengiriman GET, informasi yang dikirimkan dengan metode pengiriman POST tidak dapat dilihat oleh user. Contoh penggunaan variabel $_POST : SINTAKS PADA FORM DENGAN METHOD POST (register.html) <form action=”proses.php” method=”post”> Nama : <input type=”text” name=”usia: /> Usia : <input type=”text” name=”usia”> <input type=”submit”> </form> Saat user meng-click tombol sumbit, alamat web pada address bar browser akan tampak seperti pada alamat web dibawah ini URL PADA ADDRESS BAR http://proses.php Untuk menggunakan variabel $_POST untuk menangkap data dari form yang telah diisi sebelumnya, kalian dapat menuliskan sintaks $_POST di ikuti 26 dengan nama dari field yangn secara otomatis akan dijadikan ID pada variabel $_POST. MENANGKAP INFORMASI DARI URL (hasil_register.php) Selamat datang <?php echo $_POST[“nama”]; ?> <br /> Kamu berusia <?php echo $_POST[“usia”]; ?> tahun! 27 MODUL 10 PHPMYADMIN Database merupakan sebuah system yang digunakan untuk mengelola, menyimpan, dan menerima sejumlah data yang besar dengan mudah. Dalam dunia komputer, dikenal sebuah model aplikasi yang digunakan untuk mengelola data dalam komputer, yaitu Database Management System (DBMS). PHP MYADMIN merupakan sebuah software gratis yang ditulis dengan bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL. MySQL sendiri merupakan sebuah Sistem manajemen database relasional (RDBMS) yang berjalan layaknya sebuah server yang menyediakan akses ke database. A. MENJALANKAN PHPMYADMIN Untuk menjalankan PHPMYADMIN, pastikan kalian telah menjalankan Modul Apache dan MySQL pada XAMPP Control Panel Application kalian. Buka browser kalian, lalu ketik alamat localhost/phpmyadmin Halaman utama PHPMYADMIN akan ditampilkan 10.2 Daftar nama database Bagian ini berisi daftar nama database yang sudah terdaftar pada phpmyadmin. 10.3 Membuat database baru Bagian ini berisi form yang digunakan untuk membuat database baru pada phpmyadmin. 28 10.4 Menu utama PHPMYADMIN Database Menu ini berisi semua database yang sudah terdaftar pada PHPMYADMIN. SQL Menu ini berisi form yang dapat kalian gunakan untuk menuliskan sintaks QUERY SQL yang nantinya akan diproses oleh aplikasi PHPMYADMIN. Status Berisi informasi status serta statistik PHPMYADMIN yang berjalan pada server. Variable Berisi daftar variabel yang digunakan untuk menyimpan setting variabel yang digunakan oleh PHPMYADMIN. Charset Berisi daftar set PHPMYADMIN. karakter yang dapat digunakan dalam aplikasi Engines Privilage Berisi daftar pengguna yang sudah terdaftar dan diizinkan untuk mengakses aplikasi PHPMYADMIN. Process Export Merupakan menu yang digunakan untuk mengekport ( mengambil ) data dari aplikasi PHPMYADMIN untuk kemudian didownload oleh user dengan format file sesuai dengan pilihan user. Import Merupakan menu yang digunakan untuk mengimport (memasukan) data dari aplikasi PHPMYADMIN lewat sebuah file dengan format yang ditentukan. B. MEMBUAT DATABASE BARU Untuk membuat database baru dalam PHPMADMIN, lakukan langkah-langkah dibawah ini : Buka halaman PHPMYADMIN di browser kalian dengan mengetikan localhost/phpmyadmin address bar. Perhatikan pada section MySQL Localhost Tuliskan nama database kalian pada form yang telah disediakan, lalu klik tombol Create. 29 Bila sukses, halaman dibawah ini akan ditampilkan : Untuk membuat tabel, kalian bisa menggunakan form Create new table on database, lalu klik tombol GO untuk membuat tabel baru. C. MENGELOLA DATABASE Setelah membuat database baru, selanjutnya kalian harus mengelola database tersebut. Pada intinya. sebuah database memiliki beberapa ta bel yang dapat kita hubungkan sehingga setiap tabel bisa saling terhubung dan bertukar data. Dibawah ini adalah contoh database relationship dari siswa, pelajaran dan nilai. - Membuat Tabel Baru Untuk membuat tabel baru, lakukan langkah-langkah dibawah ini : 1. Pilih database yang akan kalian kelola pada daftar nama database 2. Pada form create new table on database, tuliskan nama serta jumlah field yang nantinya akan dibuat didalam database, setelah itu klik tombol GO 3. Pada halaman berikutnya, kalian harus mengisi daftar field yang akan dimasukan dalam database. 30 KETERANGAN BEBERAPA BARIS MENU NAMA MENU KETERANGAN Field Textbox untuk menentukan nama filed yang akan dibuat. Type Dropdown menu yang digunakan untuk menentukan tipe data dari field yang dibuat, dibawah ini adalah beberapa jenis tipe data dalam MYSQL JENIS KETERANGAN INT Merupakan jenis data yang hanya dapat dimasukan dengan input berupa angka VARCHAR Merupakan jenis data yang dapat diinput dengan jenis input text berupa huruf alphabet, angka, ataupun karakter khusus. TEXT Merupakan jenis data yang dapat diinput dengan jenis input text berupa huruf alphabet, angka, ataupun karakter khusus. TIMESTAMP Fungsi yang secara otomatis akan mengupdate tanggal serta jam input data kedalam database. Length/Values1 Panjang data / karakter dari Field NULL Pengaturan apakah data yang diinput kedalam field boleh kosong atau harus diisi. AI Singkatan dari Auto Increment. Fungsi ini hanya dapat digunakan pada data bertipe Integer / Angka. Auto Increment berfungsi untuk menambahkan data secara ototatis dari angka terakhir. 4. Setelah mengisi daftar field yang akan dimasukan, tekan tombol SAVE yang terdapat dibagian bawah halaman web. 5. Bila sukses, pada halaman berikutnya akan ditampilkan daftar nama field yang telah ditambahkan pada database kalian. 31 - Menghapus Tabel Untuk menghapus sebuah tabel, lakukan langkah-langkah dibawah ini : 1. Pilih database yang akan kalian kelola pada daftar nama database 2. Pada menu utama PHPMYADMIN, klik menu Structure 3. Klik icon yang bergambar tanda Silang yang terdapat pada tabel yang akan kalian hapus. 4. Windows konfirmasi penghapusan tabel akan ditampilkan, klik tombol OK 32 MODUL 11 SQL DATABASE MANAGEMENT SYSTEM Setelah pada modul sebelumnya kalian telah mengetahui cara menggunakan PHPMYADMIN, pada modul ini, kita akan membahas tentang Database Management System dengan menggunakan bahasa SQL. SQL sendiri merupakan singkatan dari Structure Query Language yang merupakan standard bahasa pemrograman database yang didesain untuk mengelola data dalam Relational Database Management System. Karena keterbatasan waktu penyampaian materi, pada modul ini kalian hanya akan membahas cara menyeleksi, menginput, mengupdate dan menghapus data dengan menggunakan bahasa SQL 1. Menyeleksi Data Untuk menyeleksi data dari MySQL, kalian dapat menggunakan sintaks SELECT. Struktur sintaks SELECT dapat kalian lihat pada barisan sintaks dibawah ini : SINTAKS SQL SELECT nama_kolom_xxx, nama_kolom_xxx FROM nama_tabel NAMA TABEL : tbl_siswa id_siswa nama_siswa tanggal_lahir alamat hp 1 Andika W. 12051987 Depok 0218775585 2 Siti Rahimah 24041988 Kali Sari 0218888888 SINTAKS SQL SELECT nama_siswa, alamat FROM tbl_siswa HASIL SELEKSI nama_siswa alamat Andika W. Depok Siti Rahimah Kali Sari 33 2. Menginput Data Untuk menginput data dari database MySQL, kalian dapat menggunakan sintaks INSERT. SINTAKS SQL INSERT INTO nama_tabel VALUES ('data_field_1','data_field_2', … 'data_field_n') NAMA TABEL : tbl_siswa id_siswa nama_siswa tanggal_lahir alamat hp 1 Andika W. 12051987 Depok 0218775585 2 Siti Rahimah 24041988 Kali Sari 0218888888 SINTAKS SQL INSERT INTO tbl_siswa VALUES ('3','Yogi Adi N', '090488', 'Pekayon','0218776677') HASIL INSERT id_siswa nama_siswa tanggal_lahir alamat hp 1 Andika W. 12051987 Depok 0218775585 2 Siti Rahimah 24041988 Kali Sari 0218888888 3 Yogi Adi N 09041988 Pekayon 0218776677 3. Mengupdate Data Untuk mengupdate atau memperbaharui data dari database MySQL, kalian dapat menggunakan sintaks UPDATE. SINTAKS SQL UPDATE nama_tabel SET field_1 = 'isi_update_1', field_2 = 'isi_filed_2', field_n = 'isi_field_n' WHERE nama_field = data_yang_di_update 34 NAMA TABEL : tbl_siswa id_siswa nama_siswa tanggal_lahir alamat hp 1 Andika W. 12051987 Depok 0218775585 2 Siti Rahimah 24041988 Kali Sari 0218888888 3 Yogi Adi N 09041988 Pekayon 0218776677 SINTAKS SQL UPDATE tbl_siswa SET nama_siswa = ‘Anton Raharja’ WHERE id_siswa = 1 HASIL UPDATE id_siswa nama_siswa tanggal_lahir alamat hp 1 Anton Raharja 12051987 Depok 0218775585 2 Siti Rahimah 24041988 Kali Sari 0218888888 3 Yogi Adi N 09041988 Pekayon 0218776677 3. Menghapus Data Untuk menghapus data dari database MySQL, kalian dapat menggunakan sintaks DELETE. SINTAKS SQL DELETE FROM nama_tabel WHERE nama_field = data_yang_di_delete NAMA TABEL : tbl_siswa id_siswa nama_siswa tanggal_lahir alamat hp 1 Andika W. 12051987 Depok 0218775585 2 Siti Rahimah 24041988 Kali Sari 0218888888 3 Yogi Adi N 09041988 Pekayon 0218776677 SINTAKS SQL DELETE FROM tbl_siswa WHERE id_siswa = 1 HASIL DELETE id_siswa nama_siswa tanggal_lahir alamat hp 2 Siti Rahimah 24041988 Kali Sari 0218888888 3 Yogi Adi N 09041988 Pekayon 0218776677 35 TUGAS Perhatikan table data dibawah ini ! table_sekolah id_sekolah nama_sekolah alamat akreditas S001 SMA Cerdas Indonesia Pekayon Amat Baik S002 SMA Garuda Angkasa Kalisari Cukup S003 SMA N 1212 Cijantung Amat Baik S004 SMA N 1201 Depok Baik 2. Tuliskan sintaks SQL untuk mengupdate akreditas sekolah dengan id_sekolah S002 sehingga akreditas sekolah menjadi Amat Baik (data akan berubah menjadi seperti tampak pada gambar dibawah ini: ) S002 SMA Garuda Angkasa Kalisari Amat Baik 3. Tuliskan sintaks SQL untuk menambahkan data baru kedalam tabel_sekolah dengan keterangan sebagai berikut id_sekolah : S005 nama_sekolah : SMA Plus Budi Dharma alamat : Bogor akreditas : Amat Baik (data yang dimasukan akan tampak seperti tabel dibawah ini :) S005 SMA Garuda Angkasa Kalisari Amat Baik 4. Tuliskan sintaks SQL untuk menghapus sekolah “SMA Garuda Angkasa” dari database ! ( data akan berubah menjadi seperti tampak pada gambar dibawah ini: ) id_sekolah nama_sekolah alamat akreditas S001 SMA Cerdas Indonesia Pekayon Amat Baik S003 SMA N 1212 Cijantung Amat Baik 36 S004 SMA N 1201 Depok Baik 5. Tuliskan sintaks SQL untuk menyeleksi data dari tabel_sekolah sehingga hasil seleksi akan tampak seperti gambar dibawah ini ! nama_sekolah akreditas SMA Cerdas Indonesia Amat Baik SMA Garuda Angkasa Cukup SMA N 1212 Amat Baik SMA N 1201 Baik 37