MODUL PRAKTIKUM Web Programming JURUSAN TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI MAULANA MALIKIBRAHIM MALANG Jl. 50 Malang (65144) Telp : 0341-551354, Faks : 0341-572533 i PENYUSUN Agung Teguh Wibowo Almais, M.T ii KATA PENGANTAR Pemrograman web sangat dipengaruhi oleh perubahan dan perkembangan teknologi web. Saat ini perubahan dan perkembangan tersebut berlangsung dengan sangat cepat. Dalam periode waktu yang amat singkat berbagai teknologi web baru bermunculan.
Situasi ini memerlukan respon yang cepat dan bijaksana dari dunia pendidikan ranah Teknologi Informasi. Ketersediaan waktu pembelajaran yang terbatas di satu sisi dan materi belajar yang melimpah disisi lain memerlukan pengelolaan materi belajar secara tepat. Pedoman praktikum ini disusun sebagai jawaban terhadap situasi tersebut. Selain itu, dengan perubahan susunan mata kuliah dalam kurikulum tahun 2014 memerlukan pembaharuan atas materi pembelajaran selama ini.
Dalam perkuliahan Pemrograman Web, usaha ini dilakukan dengan antara lain memperbaharui Modul Praktikum lama yang isinya sudah tertinggal teknologi web. Modul praktikum ini disusun sebagai panduan bagi mahasiswa yang mengambil mata kuliah Pemrograman Web. Dalam modul praktikum ini dibahas mengenai praktek berbagai bahasa web yang penting untuk mengembangkan situs web, termasuk diantaranya HTML, CSS, Javascript, dan PHP. Selain itu, ada penerapan berbagai konsep yang sangat penting bagi desainer web untuk mengembangkan situs web yang profesional dan memenuhi berbagai standar web.
Diantara konsep- konsep tersebut adalah prinsip dasar desain web, CRUD, dan pengenalan framework. Dengan banyaknya materi yang perlu dipelajari, kurang tepat jika satu materi dibahas secara menyeluruh dan mendalam. Dengan alasan tersebut, materi praktikum disini disusun sedemikian rupa sehingga mahasiswa akan mengetahui berbagai teknologi yang mendasari web saat ini. Keberhasilan menguasai pengetahuan dan teknologi web yang dipraktekkan dalam pedoman praktikum ini sangat tergantung kepada usaha setiap mahasiswa untuk mengembangkannya lebih jauh, bukannya berhenti mempelajari setelah menyelesaikan praktikum Pemrograman Web ini.
Di sisi lain, pedoman praktikum ini disusun semudah tetapi selengkap mungkin dengan harapan mahasiswa dapat mengikuti kegiatan praktikum dengan mudah tetapi memperoleh banyak pengetahuan yang diperlukan. Akhir kata, seperti kata pepatah, Tiada Gading yang Tak Retak. Demikian pula dengan modul praktikum ini, tentunya memiliki berbagai kekurangan. Untuk itu, kami mengharapkan saran dan masukan yang positip untuk meningkatkan kualitas pedoman praktikum ini.
Dengan kualitas yang iii baik sebagai konsekuensi logisnya mahasiswa akan memperoleh materi pembelajaran praktikum yang berkualitas pula yang pada akhirnya meningkatkan kualitas diri mereka sebagai generasi intelektual penerus yang diharapkan bangsa dan negara ini. Demikian sedikit pemikiran kami sebagai penulis modul praktikum ini. Semoga modul ini berguna dan bermanfaat bagi mahasiswa maupun dosen pengampu mata kuliah Pemrogaman Web. Mari kita bersama-sama memajukan kualitas diri kita masing-masing dengan bekerja keras sesuai bidang kita masing-masing demi masa depan yang cerah Universitas Islam Negeri Maulana Malik Ibrahim Malang kita khususnya Jurusan Teknik Informatika Fakultas Sains dan Teknologi.
Malang, April 2018 Penulis Agung Teguh WA iv DAFTAR ISI JUDUL. ii KATA PENGANTAR. iii DAFTAR ISI. 1 MODUL 2 HTML Form.
4 MODUL 3 CASCADING STYLE SHEETS (CSS). 17 MODUL 4 Java Scripts I. 29 MODUL 5 Java Scripts 2 (jQuery). 36 MODUL 6 Java Scripts (AJAX).
44 MODUL 7 Pengenalan PHP. 53 MODUL 8 MATERI PHP LANJUT PART 2. 58 MODUL 9 KONEKSI PHP DENGAN MySQL. 62 MODUL 10 Bahasa PHP dan MySQL.
66 v MODUL 1 HTML Tujuan 1. Mahasiswa dapat membuat desain Web menggunakan HTML 2. Mahasiswa dapat mengerti dasar dari pemrograman Web. HTML (Hypertext Markup Language) adalah bahasa format dari tag XML(Extended Markup Language) yang digunakan sebagai standar tampilan dari halaman Web.
HTML dapat diterima sebagai tampilan halaman Web setelah melalui proses interpretasi dari Web browser. Selain itu HTML memiliki struktur yang fleksibel, tanpa lojik serta toleran terhadap kesalahan. Standar Minimum elemen HTML: Document Type Declaration (DTD) Head Body <DTD> <html> <head> <!—Terdiri dari elemen-elemen yang mendeklarasikan konten sebagai pendukung ingkungan seperti title, meta dokumen, CSS, Java Script --> </head> <body> <!—Terdiri dari elemen-elemen yang diinterpretasikan sebagai tampilan web --> </body> </html> 1. DTD Sebagai standar versi dokumen W3C yang digunakan sebagai representasi setiap elemen pada dokumenWeb, Contoh: · <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.org/TR/html4/loose.dtd"> · <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.org/TR/xhtml1 /DTD/xhtml1 - transitional.dtd"> Standar tipe dokumen tersebut dapat digunakan untuk validasi elemen halaman Web.
Meta Dokumen Elemen meta sebagai identitas dari halaman Web yang biasa terdiri dari owner, keywords, l a y o u t, ataupun inisialisasi proses seperti r e f r e s h. Contoh: · <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> · <meta name="owners" content="myWeb" /> Teknik Informatika UIN Maulana Malik Ibrahim Malang | Web Programming Practicum 1 · <meta name="keywords" content="Sistem Informasi, Jurnal, Publikasi Ilmiah" /> · <meta name="layout" content="main" /> · <meta HTTP-EQUIV="REFRESH" content="0; url=/myweb/myurl"> 1. Elemen HTML Jenis-jenis elemen data yang akan ditampilkan pada halaman Web seperti: Form, Text, Image, Table, Drop-Box, Button dan lainnya. Contoh: · Title, Ditampilkan pada header browser <title>Praktikum Pemrograman Web</title> Text <h1>Selamat Datang Di Website Kami!</h1> <h2>Web Ini Adalah Tutorial Pemrograman Web</h2> <h3>Praktikum Pemrograman Web</h3> <p> <a href="http://uin-malang.id"> Teknik Informatika UIN Malang </a> </span> link for your success way </p> Image <img src="images/myphoto.jpg" width="180" height="200" alt="photo"/> Form <form method="POST" action="response2.jsp" enctype="multipart/form-data"> Drop-Box <select name="My Lab"> <option value=’CC’>Lab.
Praktikum Computer Vision</option> <option value=’SI’> Lab. Sistem Informasi </option> <option value=’CAI’> Lab. Computing & AI </option> </select> File Browser <input type="file" name="upload" value="" width="200" /> Table <table border="1" width="10"> <thead> <tr> <th>NIM</th> <th>Mahasiswa</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>Ani Rahmawati </td> </tr> <tr> <td>124</td> <td>Budi Susilo</td> </tr> </tbody> </table> Teknik Informatika UIN Maulana Malik Ibrahim Malang | Web Programming Practicum 2 List Bidang Minat: <ol> <li>Sistem Informasi <ul> <li>Data Warehousing </li> <li>Enterprise Architecture </li> </ul> </li> <li>Multimedia <ul> <li>Komputer Grafik </li> <li>Machinema </li> </ul> </li> </ol> 1. Instruksi Praktek Buat file form1.html Kopikan setiap kode script html sebagaimana diatas Amati yang terjadi pada browser dengan melakukan refresh pada setiap perubahan kode Aktifkan plugin firebug pada browser Mozilla atau chrome, kemudian lakukan inspeksi sambil melakukan perubahan-perubahan kode HTML 1.
Jawablah pertanyaan berikut: 1. Lakukanlah perubahan pada kode HTML sesuai keinginan anda, Pernakah terjadi error ketika adakesalahan kode? 2. Cobalah ubah nilai meta refresh <meta HTTP-EQUIV="REFRESH" content="5; url=http://google.id"> apa yang terjadi?, maka jelaskan apa diantara kegunaan meta dokumen? 3. Jelaskan fungsi tag HTML pada Table: thead, tbody, tr, th serta td! 1.
Tugas I Dengan menggunakan HTML buatlah desain form HTML, sebagai berikut: Teknik Informatika UIN Maulana Malik Ibrahim Malang | Web Programming Practicum 3 MODUL 2 HTML Form Tujuan 3. Mahasiswa mampu membuat form pada dokumen HTML 4. Mahasiswa memahami cara penggunaan dari fasilitas Form pada halaman dokumen HTML 5. Mahasiswa mampu menginputkan field sesuai dengan kegunaan Overview Salah satu fasilitas yang disediakan oleh dokumen HTML memungkinkan kita untuk melakukan “interaksi lebih” terhadap halaman dokumen tersebut.
Semisal, kemampuan dokumen HTML mampu menyediakan fasilitas yang dapat menerima masukkan atau isian data dari user. Data isian user ini nantinya akan dapat diproses lebih lanjut menjadi informasi yang dibutuhkan oleh user maupun oleh pemilik situs tersebut. Teknik pengisian ini dilakukan menggunakan elemen Form. Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan.
Contohnya proses pengiriman data, browse, hapus, penyuntingan data dan lain sebagainya.1 Menu Form Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingan data dan lain sebagainya. Cara penulisan form dalam html adalah. Teknik Informatika UIN Maulana Malik Ibrahim Malang | Web Programming Practicum 4 Pada penulisan form "nama form" adalah nama form yang sedang digunakan, method adalah metode atau cara yang digunakan untuk menyimpan data ke server sedangkan action adalah alamat atau bisa juga file lain yang digunakan untuk memproses input dari form kedalam server.2 Jenis-jenis media input dalam Form Pada bagian form tersedia kontrol-kontrol input yang digunakan untuk masing- masing keperluan dalam memasukan data input.
Dan kontrol form terdiri dari : 2.1 Kontrol Berupa Text Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan menggunakan dua buah elemen:textarea dan input. textarea digunakan untuk masukan teks yang terdiri dafi beberapa baris, sementara inputdigunakan untuk masukan teks yang hanya satu baris. Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya langsung memasukkan tag-nya saja: <textarea> </textarea> selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag untuk mendapatkan nilai masukan standar: <textarea> Contoh isi textarea </textarea> Gambar 2.1 Contoh Penggunaan Elemen TextArea Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan menggunakan properti height danwidth. Walaupun dapat mengisikan teks dengan banyak sekaligus, textarea tentunya tidak dapat digunakan untuk seluruh kasus pengisian data.
Seringkali kita Teknik Informatika UIN Maulana Malik Ibrahim Malang | Web Programming Practicum 5 menginginkan pengguna hanya mengisikan data singkat, tanpa isi teks yang banyak. Untuk jenis masukan seperti itu, kita dapat menggunakan elemen input: <input type="text"> yang akan menghasilkan elemen masukan seperti berikut: Gambar 2.2 Contoh Penggunaan Elemen Input Perhatikan juga bahwa kita menggunakan atribut type pada elemen ini untuk menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data yang dapat kita isikan, dan browser akan menyesuaikan jenis masukan teks yang ada, sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang dapat diisikan pada atribut type yaitu: 1.2 Kontrol Berupa Radio Button Radio button di gunakan untuk menyatakan pilihan yang bersifat tunggal, umumnya pada web di gunakan untuk kelengkapan pertanyaan seperti pada pendaftaran online, biasanya pertanyaan itu adalah pilihan untuk menyetakan jenis kelamin , agama, ataupun sebagainya.
Radio Button ini akan sering kita temui saat kita berselancar di dunia maya yang terkait dengan proses input data seperti pendaftaran dll. Radio button dibuat dalam HTML dengan menggunakan elemen input, dengan atribut type bernilai : code`radio`: <input type="radio" name="sex" value="pria">Pria<br><input type="radio" name="sex" value="wanita">Wanita Teknik Informatika UIN Maulana Malik Ibrahim Malang | Web Programming Practicum 6 dalam pembuatan elemen radio button, kita juga wajib menambahkan dua atribut lainnya, yaitu name dan value. Atribut name digunakan untuk memberitahukan browser bahwa radio button dengan atribut name yang sama adalah merupakan kumpulan radio button yang sama, sehingga pengguna tidak boleh memilih dua buah pilihan pada radio button tersebut. Atribut value digunakan untuk menyimpan nilai yang ingin kita kirimkan ke server.3 Contoh Penggunaan Elemen Radio Button 2.3 Kontrol Berupa Checkbox Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan, pada input type checked box Anda dapat memilih satu atau beberapa pilihan, atau tidak memilih sama sekali.
Pilihan ini biasanya dipakai untuk memasukkan data yang sifatnya opsional. Anda dapat menggunakan “Checkbox” pada atribut. Input checkbox adalah sebuah masukan untuk memilih sesuatu opsi/ pilihan. Jika dipilih maka pengguna akan men-check (mencentang) dan jika tidak memilih akan dibiarkan saja.
Elemen ini sama seperti radio button, dibuat dengan elemen input yang nilai atribut type-nya berisikancheckbox. <input type="checkbox" name="day" value="senin">Senin<br><input type="checkbox" name="day" value="selasa">Selasa<br><input type="checkbox" name="day" value="rabu">Rabu Seperti yang dapat dilihat, atribut name dan value juga wajib dimiliki oleh checkbox, dengan alasan yang sama untuk radio button.4 Contoh Penggunaan Elemen Checkbox Meskipun dapat memberikan pilihan nilai kepada pengguna, radio button maupun checkbox sangat tidak ideal untuk digunakan pada pilihan yang memiliki nilai yang sangat banyak. Misalnya, pilihan negara yang ditinggali oleh pengguna dari ratusan Teknik Informatika UIN Maulana Malik Ibrahim Malang | Web Programming Practicum 7 negara yang ada di dunia akan jika ditampilkan pada radio button akan menyebabkan daftar yang dipaparkan sangat banyak dan sulit dibaca oleh pengguna. Dalam kasus seperti ini lebih baik kita menggunakan dropdown list.4 Dropdown list Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen, yaitu select dan option.
Elemenselect membungkus seluruh elemen option yang ada, untuk membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari dropdown yang diinginkan. Perhatikan kode di bawah: <select name="country"> <option value="indonesia">Indonesia</option> <option value="malaysia">Malaysia</option> <option value="filipina">Filipina</option> <option value="vietnam">Vietnam</option> </select> yang akan menghasilkan: Gambar 2.5 Contoh Penggunaan Elemen Dropdown dan jika ingin memungkinkan pengguna memilih beberapa pilihan kita dapat menambahkan atribut multiple pada elemen select: <select name="country" multiple> <option value="indonesia">Indonesia</option> <option value="malaysia">Malaysia</option> <option value="filipina">Filipina</option> <option value="vietnam">Vietnam</option> </select> Teknik Informatika UIN Maulana Malik Ibrahim Malang | Web Programming Practicum 8 Gambar 2.6 Contoh Penggunaan Elemen Dropdown dengan Pilihan Banyak 2.