MODUL KEAHLIAN GANDA Direktorat Jenderal
advertisement
MODUL KEAHLIAN GANDA Mata Pelajaran Reakayasa Perangkat Lunak Sekolah Menengah Kejuruan (SMK) Kelompok Kompetensi F PEMROGRAMAN WEB Penulis: Abd. Munif Direktorat Jenderal Guru dan Tenaga Kependidikan Kementrian Pendidikan dan Kebudayaan Tahun 2017 i Penulis: 1. ABD Munif,. S.T., Emai: [email protected] Penelaah: 1. Sierra Maulida Asrin, S.T [081562783394], Email : [email protected] 2. Abdul Haliq, S.Pd., M.Pd., [085341259862] Email : [email protected] 3. Alun Sujjada, S.Kom., M.T [081805040468] Email : [email protected] Ilustrator : 1. Sierra Maulida Asrin, S.T [081562783394] Email : [email protected] 2. Faizal Reza Nurzeha, A.Md. [085242177945] Email : [email protected] Layouter : 1. Syamsul Hidayat, A.Md. [081355598663] Email : [email protected] Copyright ©2017 Lembaga Pengembangan dan Pemberdayaan Pendidikan Tenaga Kependidikan Bidang Kelautan Perikanan Teknologi Informasi dan Komunikasi. Hak Cipta Dilindungi Undang-Undang Dilarang mengkopi sebagian atau keseluruhan isi buku ini untuk kepentingan komersial tanpa izin tertulis dari Kementrian Pendidikan Kebudayaan. ii iii KATA SAMBUTAN Peran guru profesional dalam proses pembelajaran sangat penting sebagai kunci keberhasilan belajar siswa. Guru profesional adalah guru yang kopeten membangun proses pembelajaran yang baik sehingga dapat menghasilkan pendidikan yang berkualitas. Hal ini tersebut menjadikan guru sebagai komponen yang menjadi fokus perhatian pemerintah pusat maupun pemerintah daerah dalam peningkatan mutu pendidikan terutama menyangkut kopetensi guru. Pengembangan profesionalitas guru melalui program Pembinaan Karir merupakan upaya peningkatan kompetensi untuk semua guru. Sejalan dengan hal tersebut, pemetaan kopetensi guru telah dilakukan melalui uji kompetensi guru (UKG) untuk kompetensi pedagogik dan profesional pada akhir tahun 2015. Hasil UKG menunjukan peta kekuatan dan kelemahan kompetensi guru dalam penguasaan pengetahuan. Peta kompetensi guru tersebut dikelompokan menjadi 10 (sepuluh) kelompok kompetensi. Tindak lanjut pelaksanaan UKG diwujudkan dalam bentuk pelatihan guru paska UKG melalui program Pembinaan Karir. Tujuannya untuk meningkatkan kompetensi guru sebagai agen perubahaan dan sumber belajar utama bagi peserta didik. Program Pembinaan Karir dilaksanakan melalui pola tatap muka, daring (online) dan campuran (blended) tatap muka dengan online. Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK), Lembaga Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan Kelautan Perikanan Teknologi Informasi dan Komunikasi (LP3TK KPTK) dan Lembaga Pengembangan dan Pemberdayaan Kepala Sekolah (LP2KS) merupakan Unit Pelaksana Teknis di lingkungan Direktorat Jendral Guru dan Tenaga Kependidikan yang bertanggung jawab dalam mengembangkan perangkat dan melaksanakan peningkaan kompetensi guru sesuai dengan bidangnya. Adapun perangkat pembelajaran yang dikembangkan tersebut adalah modul untuk program Pembinaan Karir muka dan iv tatap online untuk semua mata pelajaran dan kelompok kompetensi. Dengan modul ini diharapkan program memberikan sumbangan yang sangat besar dalam peningkatan kualitas kompetensi guru. Mari kita sukseskan program ini untuk mewujudkan Guru Mulia Karena Karya. Jakarta, Februari 2017 Direktur Jendral Guru dan Tenaga Kependidikan Sumarna Surapranata, Ph.D NIP. 195908011985031002 v KATA PENGANTAR Profesi guru dan tenaga kependidikan harus dihargai dan dikembangkan sebagai profesi yang bermartabat sebagaimana diamanatkan Undang-Undang Nomor 14 Tahun 2005 tentang Guru dan Dosen. Hal ini dikarenakan guru dan tenaga kependidikan merupakan tenaga profesional yang mempunyai fungsi, peran, dan kedudukan yang sangat penting dalam mencapai visi pendidikan 2025 yaitu “Menciptakan Insan Indonesia Cerdas dan Kompetitif”. Untuk itu guru dan tenaga kependidikan yang profesional wajib melakukan pengembangan keprofesian berkelanjutan. Buku pedoman Pedoman Penyusunan Modul Diklat Pengembangan Keprofesian Berkelanjutan Bagi Guru dan Tenaga Kependidikan untuk institusi penyelenggara program pengembangan keprofesian berkelanjutan merupakan petunjuk bagi penyelenggara pelatihan di dalam melaksakan pengembangan modul yang merupakan salah satu sumber belajar bagi guru dan tenaga kependidikan. Buku ini disajikan untuk memberikan informasi tentang penyusunan modul sebagai salah satu bentuk bahan dalam kegiatan pengembangan keprofesian berkelanjutan bagi guru dan tenaga kependidikan. Pada kesempatan ini disampaikan ucapan terima kasih dan penghargaan kepada berbagai pihak yang telah memberikan kontribusi secara maksimal dalam mewujudkan buku ini, mudah-mudahan buku ini dapat menjadi acuan dan sumber inspirasi bagi guru dan semua pihak yang terlibat dalam pelaksanaan penyusunan modul untuk pengembangan keprofesian berkelanjutan. Kritik dan saran yang membangun sangat diharapkan untuk menyempurnakan buku ini di masa mendatang. Makassar, Februari 2017 Kepala LPPPTK KPTK Gowa Sulawesi Selatan, Dr. H. Rusdi, M.Pd, NIP 19650430 199103 1 004 vi vii DAFTAR ISI KATA SAMBUTAN ............................................................................................ iv KATA PENGANTAR ........................................................................................... vi DAFTAR ISI ....................................................................................................... viii DAFTAR TABEL ............................................................................................... xvi PENDAHULUAN .................................................................................................. 1 A. Latar Belakang ........................................................................................... 1 B. Tujuan ........................................................................................................ 2 C. Peta Kompetensi ........................................................................................ 2 D. Ruang Lingkup Penggunaan Modul ............................................................ 3 E. Saran Cara Penggunaan Modul .................................................................. 5 Perangkat Pengembangan Aplikasi Web ............................................................. 9 A. Tujuan Pembelajaran ................................................................................... 9 B. Indikator Pencapaian Kompetensi .............................................................. 9 C. Uraian Materi .............................................................................................. 9 D. Aktifitas Pembelajaran .............................................................................. 11 E. Latihan Soal.............................................................................................. 12 F. Rangkuman .............................................................................................. 12 G. KUNCI JAWABAN .................................................................................... 13 H. Umpan Balik dan Tindak Lanjut ................................................................ 13 Membuat Dokumen HTML ................................................................................. 17 A. Tujuan Pembelajaran ................................................................................. 17 B. Indikator Pencapaian Kompetensi ............................................................ 17 C. Uraian Materi ............................................................................................ 17 D. Aktifitas Pembelajaran .............................................................................. 20 E. Latihan Soal.............................................................................................. 27 F. Rangkuman .............................................................................................. 27 G. Umpan Balik dan Tindak Lanjut ................................................................ 28 Mengatur Tampilan Dokumen HTML dengan CSS ............................................ 31 A. Tujuan Pembelajaran ................................................................................ 31 viii B. Indikator Pencapaian Kompetensi ............................................................ 31 C. Uraian Materi ............................................................................................ 31 1. Definisi CSS......................................................................................... 31 2. Cara Menerapkan CSS dalam HTML ................................................... 32 D. Aktifitas Pembelajaran .............................................................................. 34 E. Latihan Soal ............................................................................................. 38 F. Rangkuman .............................................................................................. 39 G. Umpan Balik dan Tindak Lanjut ................................................................ 39 Mengenal Dasar Pemrograman PHP ................................................................. 43 A. Tujuan Pembelajaran ................................................................................. 43 B. Indikator Pencapian Kompetensi .............................................................. 43 C. Uraian Materi ............................................................................................ 43 1. Pengenalan PHP dan Web Dinamis..................................................... 43 2. Prinsip-prinsip Dasar Bahasa pemrograman PHP................................ 44 3. Tipe Data ............................................................................................. 46 4. Variabel ............................................................................................... 47 5. Operator .............................................................................................. 48 6. Struktur Kontrol .................................................................................... 49 7. Memasukan kode PHP kedalam Dokumen HTML ............................... 50 D. Aktifitas Pembelajaran .............................................................................. 51 E. Latihan Soal ............................................................................................. 57 F. Kunci Jawaban ......................................................................................... 58 G. Rangkuman .............................................................................................. 58 H. Umpan Balik dan Tindak Lanjut ................................................................ 59 Mengenal Fungsi dan Array dalam PHP. ........................................................... 63 A. Tujuan Pembelajaran ................................................................................. 63 B. Indikator Pencapaian Kompetensi ............................................................ 63 C. Uraian Materi ............................................................................................ 63 1. Fungsi .................................................................................................. 63 2. Array .................................................................................................... 64 D. Aktifitas Pembelajaran .............................................................................. 64 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman .............................................................................................. 71 G. Umpan Balik ............................................................................................. 71 Operasi File pada pemrograman PHP ............................................................... 77 A. Tujuan Pembelajaran ................................................................................. 77 B. Indikator Pencapaian Kompetensi ............................................................ 77 ix C. Uraian Materi ............................................................................................ 77 1. Menggunakan File................................................................................ 77 2. Menulis ke File ..................................................................................... 78 3. Upload File ........................................................................................... 78 D. Aktifitas Pembelajaran .............................................................................. 79 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman .............................................................................................. 81 G. Umpan Balik ............................................................................................. 82 Penanganan Form Pada PHP ............................................................................ 85 A. Tujuan Pembelajaran ................................................................................ 85 B. Indikator Pencapaian Kompetensi ............................................................ 85 C. Uraian Materi ............................................................................................ 85 1. POST ................................................................................................... 85 2. GET ..................................................................................................... 86 D. Aktifitas Pembelajaran .............................................................................. 86 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman .............................................................................................. 90 G. Umpan Balik ............................................................................................. 90 H. Kunci jawaban .......................................................................................... 90 Mengenal Dasar Pemrograman JavaScript ........................................................ 94 A. Tujuan Pembelajaran ................................................................................. 94 B. Indikator Pencapaian Kompetensi ............................................................ 94 C. Uraian Materi ............................................................................................ 94 1. Pengertian JavaScript .......................................................................... 94 2. Fungsi JavaScript dalam Pemrograman Web ...................................... 94 D. Aktifitas Pembelajaran .............................................................................. 96 1. Pengenalan Pemrograman JavaScript ................................................. 96 2. Pengenalan Event dan Objek Window ................................................. 99 E. Tugas / Studi Kasus ..................................... Error! Bookmark not defined. F. Rangkuman ............................................................................................ 101 G. Umpan Balik ........................................................................................... 102 Membuat Koneksi Database MySQL ............................................................... 107 A. Tujuan Pembelajaran .............................................................................. 107 B. Indikator Pencapaian Kompetensi .......................................................... 107 C. Uraian Materi .......................................................................................... 107 1. Pengertian MySQL ............................................................................. 107 2. PhpMyAdmin ...................................................................................... 108 x 3. Koneksi MySQL pada PHP ................................................................ 108 D. Aktifitas Pembelajaran: Membuat database melalui PhpMyAdmin .......... 109 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 110 G. Umpan Balik ........................................................................................... 111 Operasi Database............................................................................................ 115 A. Tujuan Pembelajaran ............................................................................. 115 B. Indikator Pencapaian Kompetensi .......................................................... 115 C. Uraian Materi .......................................................................................... 115 1. Objek Database ................................................................................. 115 2. SQL (Structure Query Language) ...................................................... 115 3. DLL (Data Definition Language) ......................................................... 116 4. DML (Data Manipulation Langeage)................................................... 116 D. Aktifitas Pembelajaran ............................................................................ 116 1. Membuat Database............................................................................ 116 2. Membuat Tabel .................................................................................. 117 3. Memasukan Data ............................................................................... 117 4. Menyeleksi Data ................................................................................ 118 5. Mengupdate Data .............................................................................. 118 6. Menghapus Data................................................................................ 119 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 120 G. Umpan Balik ........................................................................................... 120 MEMBANGUN FRONT END WEB MENGGUNAKAN FRAMEWORK BOOTSTRAP .................................................................................................. 123 A. Tujuan Pembelajaran ............................................................................. 123 B. Indikator Pencapaian Kompetensi .......................................................... 123 C. Uraian Materi .......................................................................................... 123 1. Definisi Front-End Web ...................................................................... 123 2. Desain Web ....................................................................................... 123 3. Bootstrap Web Framework ................................................................ 125 4. Cara Menggunakan Bootstrap ........................................................... 125 D. Aktifitas Pembelajaran ............................................................................ 126 1. Mendesain Halaman Home, Caruosel dan Menu ............................... 126 2. Mendesain Dashboard Admin ............................................................ 129 3. Mendesain Form Artikel ..................................................................... 131 4. Mendesain Halaman Signin ............................................................... 132 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 133 G. Umpan Balik ........................................................................................... 133 xi Membangun Back-end Application dengan konsep MVC menggunakan framework Code Igniter .................................................................................... 138 A. Tujuan Pembelajaran .............................................................................. 138 B. Indikator Pencapaian Kompetensi .......................................................... 138 C. Uraian Materi .......................................................................................... 138 1. Definisi Back-End Web....................................................................... 138 2. Codeigniter......................................................................................... 138 3. Alur Proses Codeigniter ...................................................................... 139 3. Arsitektur MVC (Model View Control) ................................................. 140 D. Aktifitas Pembelajaran ............................................................................ 141 1. Instalasi Codeigniner .......................................................................... 141 2. Controller dan View ............................................................................ 142 3. Model ................................................................................................. 145 4. Membangun form tambah artikel pada halaman admin: ..................... 149 5. Membangun form update artikel pada halaman admin: ...................... 150 6. Membangun perintah untuk hapus artikel ........................................... 151 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 151 Membangun Sistem Autentikasi ....................................................................... 154 A. Tujuan Pembelajaran .............................................................................. 154 B. Indikator Pencapaian Kompetensi .......................................................... 154 C. Uraian Materi .......................................................................................... 154 D. Aktifitas Pembelajaran ............................................................................ 155 1. Identifikasi Kasus ............................................................................... 155 2. Membangun Sistem authentifikasi ...................................................... 155 </body> ....................................................................................................... 156 </html> ....................................................................................................... 156 E. Studi Kasus ................................................. Error! Bookmark not defined. F. Rangkuman ............................................................................................ 158 G. Umpan Balik ........................................................................................... 158 EVALUASI ......................................................................................... 160 PENUTUP ............................................................................................... 165 A. Kesimpulan ............................................................................................. 165 B. Tindak lanjut ........................................................................................... 165 DAFTAR PUSTAKA ...................................................................................... 167 GLOSARIUM ....................................................................................... 169 xii xiii DAFTAR GAMBAR Gambar 1. Peta kedudukan Modul Pemrograman web dinamis ........................... 2 Gambar 2. Peta materi pokok dan Kegiatan Pembelajaran .................................. 4 Gambar 3. Struktur materi pmrograman web dinamis .......................................... 4 Gambar 4. Web browser Mozile firefox .............................................................. 10 Gambar 5. Mekanisme kerja protokol HTTP ...................................................... 11 Gambar 6. Struktur penulisan CSS .................................................................... 32 Gambar 7. Lembar kerja desain layout halaman web ........................................ 38 Gambar 8. Alur request-response web dinamis. ................................................ 44 xiv xv DAFTAR TABEL Tabel 1. Peta kompetensi modul PKB guru RPL Grade 6 pemrograman web ...... 3 Tabel 2. Contoh alamat URL .............................................................................. 11 Tabel 3. Operator aritmetika dalam PHP............................................................ 48 Tabel 4. Operator relasional dalam PHP ............................................................ 48 Tabel 5. Operator logika dalam PHP .................................................................. 49 Tabel 6. Ragam mode fungsi fopen() ................................................................. 77 xvi xvii PENDAHULUAN A. Latar Belakang Guru dan tenaga kependidikan wajib melaksanakan kegiatan pengembangan keprofesian secara berkelanjutan agar dapat melaksanakan tugas profesionalnya. Program Pengembangan Keprofesian Berkelanjutan (PKB) adalah pengembangan kompetensi Guru dan Tenaga Kependidikan yang dilaksanakan sesuai kebutuhan, bertahap, dan berkelanjutan untuk meningkatkan profesionalitasnya. PKB sebagai salah satu strategi pembinaan guru dan tenaga kependidikan diharapkan dapat menjamin guru dan tenaga kependidikan mampu secara terus menerus memelihara, meningkatkan, dan mengembangkan kompetensi sesuai dengan standar yang telah ditetapkan. Pelaksanaan kegiatan PKB akan mengurangi kesenjangan antara kompetensi yang dimiliki guru dan tenaga kependidikan dengan tuntutan profesional yang dipersyaratkan. Di dalam pelaksanaan diklat yang dilaksanakan oleh PPPPTK/LPPPTK KPTK diperlukan suatu modul yang berfungsi sebagai salah satu sumber belajar guru. Modul Diklat PKG Guru Rekayasa Perangkat Lunak (RPL) Level 6 Pemrograman Web Dinamis”ini dapat digunakan oleh guru dan tenaga kependidikan dan sebagai acuan untuk memenuhi tuntutan kompetensinya, sehingga guru dapat melaksanakan tugasnya secara professional sesuai dengan standar yang telah ditetapkan. Modul ini mempelajari tentang bagaimana membangun aplikasi web dinamis. Materi dalam modul ini mencakup dua hal yaitu dasar aplikasi web dan teknlogi pengembangan web dinamis. Melalui modul ini guru bermain peran sebagai web programmer yang merupakan salah satu job tittle di dunia industri Teknologi informasi. Programmer mempunyai tanggung jawab terhadap pembuatan kode program yang dapat dijalankan sehingga membentuk aplikasi untuk membantu proses bisnis dalam suatu organisasi. Penguasaan teknik dan ketrampilan dalam 1 membuat kode program berbasis web akan berpengaruh pada kesuksesan dalam implementasi aplikasi sistem informasi. B. Tujuan Tujuan disusunnya modul diklat PKB Guru RPL Level 1 ini adalah memberikan pengetahuan, ketrampilan dan sikap kepada guru atau peserta diklat tentang merancang sistem basis data dengan benar melalui aktifitas observasi dan praktikum. Setelah mempelajari modul ini diharapkan guru dapat: “Membangun Aplikasi Web dinamis”. Secara khusus tujuan penyusunan modul ini adalah: 1. Memberikan pemahaman tentang teknologi aplikasi web dinamis. 2. Memberikan pengetahuan cara pemrograman web dinamis. 3. Memberikan petunjuk tentang interaksi basis data dalam web dinamis. 4. Memberikan arahan tentang membangun front-end dan back-end dalam pengembangan web dinamis. C. Peta Kompetensi Modul ini merupakan modul ke-6 dari 10 modul yang dikembangkan. Berdasarkan struktur jenjang diklat PKB Modul pemrograman web dinamis ini termasuk dalam jenjang Dasar. Modul ini akan digunakan untuk Program Pengembangan Keprofesian Berkelanjutan (PKB) bagi guru-guru produktif Sekolah menengah Kejuruan pada paket keahlian Rekayasa Perangkat Lunak. Gambar 1. Peta kedudukan Modul Pemrograman web dinamis 2 Tabel 1. Peta kompetensi modul PKB guru RPL Grade 6 pemrograman web Standar kompetensi Kompetensi Kompetensi Inti Kompetensi Guru Indikator pencapaian Utama Guru (KIG) Keahlian (KGK) Kompetensi Profesional 1. Menguasai 1.3. Membangun web 1.3.1. Menganalisis teknologi materi, struktur, dinamis. dalam mengembangkan konsep dan pemrograman web pola pikir dinamis keilmuan yang 1.3.2. Menyajikan proses kerja mendukung aplikasi melalui struktur mata pelajaran kontrol percabangan dan yang diampu pengulangan. 1.3.3. Membuat kode program dalam bentuk fungsi 1.3.4. Mengolah data melalui operasi file 1.3.5. Membuat koneksi basis data pada web dinamis 1.3.6. Membuat front end application pada web dinamis 1.3.7. Menguji autentikasi user pada web dinamis. 1.3.8. Memanipulasi data pada web dinamis 1.3.9. Membangun back end application pada web dinamis D. Ruang Lingkup Penggunaan Modul Modul ini terdiri dari empat pembahasan utama (materi pokok). Setiap materi pokok terdapat beberapa kegiatan pembelajaran guna untuk mencapai kompetensi yang telah ditentukan, dalam setiap kegiatan pembelajaran terdapat keterkaitan yang mendukung atau menunjang pemahaman konsep dan praktik dalam setiap kegiatan pembelajaran yang dilakukan. Berikut merupakan peta Kegiatan Pembelajaran dalam mencapai kompetensi. Angka dalam tanda kurung menunjukan capaian dari indikator esensial yang telah ditetapkan untuk setiap Kegiatan Pembelajaran. 3 Gambar 2. Peta materi pokok dan Kegiatan Pembelajaran Dari setiap kegiatan pembelajaran memuat tentang materi tentang web dinamis, berikut merupakan peta konsep dari materi web dinamis. Gambar 3. Struktur materi pemrograman web dinamis 4 E. Saran Cara Penggunaan Modul Modul ini terdiri dari empat materi pokok dan sembilan Kegiatan Pembelajaran. Peserta diklat dapat mempalajari sesuai dengan urutan topik mulai topik 1 sampai topik 4 dan Kegiatan Pembelajaran 1 sampai Kegiatan Pembelajaran 9. Untuk setiap Kegiatan Pembelajaran urutan yang harus dilakukan oleh peserta diklat dalam mempelajari modul ini adalah : 1. Membaca tujuan pembelajaran sehingga memahami target atau goal dari Kegiatan Pembelajaran tersebut. 2. Membaca indikator pencapaian kompetensi sehingga memahami obyek yang akan dijadikan kriteria pengukuran untuk mencapai tujuan pembelajaran. 3. Memaca uraian materi pembelajaran sehingga memiliki pengetahuan, ketrampilan dan sikap terhadap kompetensi yang akan dicapai 4. Melakukan aktifitas pembelajaran dengan urutan atau kasus permasalahan sesuai dengan contoh. 5. Mengerjakan latihan soal atau tugas dengan mengisi lembar kerja yang telah disediakan. 6. Menjawab pertanyaan dalam umpan balik yang akan mengukur tingkat pencapaian kompetensi melalui penilaian diri. Modul ini menggunakan beberapa dukungan perangkat yang yang harus disediakan. Peserta dapat menggunakan perangkat yang dimiliki tetapi harus memenuhi standart spesifikasi yang telah ditetapkan. Hal ini bertujuan agar setiap kegiatan pembelajaran yang dilakukan dapat berjalan dengan semestinya.Perangkat-perangkat yang digunakan dalam kegiatan pembelajaran modul ini adalah: 1. Personal Computer (PC) yang sudah terinstal OS windows 7 atau lebih. 2. Perangkat Lunak (software)** Mozilla Firefox versi 40.0.3 Sublime Text 3 XAMPP versi 5.5.28 3. Source code** Codeigniter versi 3.0.1 Bootstrap versi 3.3.5 5 Keterangan: tanda dua asterik (**) menunjukan bahwa perangkat tersebut akan disediakan dan tersimpan dalam keping CD. Struktur folder dan file dalam CD diperlihatkan dalam gambar di bawah ini: Perangkat pemrograman web dinamis (folder) | |___ Software Installer (folder) | | | |___ Firefox Setup 40.0.3 (file) | |___ Sublime Text Build 3083 Setup (file) | |___ xampp-win32-5.5.28-0-VC11-installer (file) | |___ Source code (folder) | |___ demo (file) |___ bootstrap-3.3.5-dist (file) |___ CodeIgniter-3.0.1 (file) 6 7 8 Perangkat Pengembangan Aplikasi Web A. Tujuan Pembelajaran Melalui observasi peserta diklat dapat menganalisis perangkat-perangkat yang digunakan untuk pengembangan aplikasi web sesuai dengan kebutuhan. B. Indikator Pencapaian Kompetensi Menganalisis perangkat-perangkat untuk pengembangan aplikasi web. C. Uraian Materi 1. Web Client (Browser) Web Client atau biasa disebut dengan browser atau peramban adalah perangkat lunak yang digunakan untuk mengakses web server dengan mengirimkan pesan permintaan (request) HTTP dan mengolah response HTTP yang dihasilkan. Web browser yang berjalan pada desktop atau laptop komputer adalah paling umum dari perangkat lunak web client (browser), tetapi masih ada bentuk lain dari perangkat lunak web client dan tentu tidak dibahas dalam modul ini karena bukan menjadi fokus materi. Web browser berfungsi untuk meminta dan menampilkan informasi yang diminta dari web server, informasi yang diminta dapat berupa file maupun dokumen HTML. Permintaan oleh browser akan ditampilkan berupa halaman web dalam client area di browser. Beberapa browser yang paling umum dan sering digunakan antara lain: Mozilla Firefox Google Chrome Microsoft Internet Explorer Opera Safari Netscape Navigator Dibawah ini merupakan gambar dari software browser Mozilla Firefox. 9 Gambar 4. Web browser Mozilla firefox 2. Web Server Web server merupakan perangkat lunak dalam server yang berfungsi menerima permintaan (request) melalui HTTP dari client yaitu browser dan mengirimkan kembali response HTTP yang pada umumnya akan berbentuk dokumen HTML atau file. Web server menyimpan dokumen web sehingga dapat diakses oleh user atau client melalui internet. Berikut beberapa contoh web server: Apache (Berjalan di Linux dan Windows) Microsoft Internet Information Service (IIS) (Berjalan di Windows) Tomcat (Berjalan di Linux dan Windows) 3. HTTP HTTP (HyperText Transfer Protocol) adalah standart protokol komunikasi,protokol jaringan lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan menggunakan hipermedia. Penggunaannya banyak pada pengambilan sumber daya yang saling terhubung dengan tautan, yang disebut dengan dokumen hypertext. HTTP standar sekarang adalah (HTTP 1.1). Contoh cara kerja HTTP 10 Gambar 5. Mekanisme kerja protokol HTTP 4. URL URL (Uniform/Universal Resource Locator) merupakan suatu alamat untuk mengakses resource (file). Berikut merupakan contoh URL: Tabel 2. Contoh alamat URL Contoh URL Nama Skema Tipe Resource ftp://ftp.example.org/pub/file.txt ftp File didalam FTP Sever telnet://host.example.org telnet Telnet Sever mailto:[email protected] mailto Mailbox https://source.example.org/sec.txt https File dalam web server file:///C:/temp/localFile.txt file File dalam direktori hardisk lokal D. Aktifitas Pembelajaran Dalam kegiatan ini peserta diklat akan melakukan analisis ragam perangkat lunak web browser dan web server. Bentuklah kelompok diskusi setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan cermat dan teliti. 1. Pilih tiga perangkat web browser (misal mozilla firefox, google chrome dan Internet explorer pada laptop atau komputer yang telah tersedia. 2. Amatilah fungsi-fungsi atau fitur-fitur yang ada dalam ketiga web browser tersebut. Catat hasilnya pada LK 1.1 11 3. Dari hasil pada langkah 3 buatlah tabel dalam bentuk cek list yang menjelaskan perbedaan atau persamaan fitur-fitur perangkat web browser. Tentukan setidaknya 5 parameter atau kriteria (fitur) dan jelaskan deskripsi, fungsi atau kegunaan fitur-fitur tersebut. Catat hasilnya pada LK 1.2. 4. Pilih tiga perangkat web server (misal apache, Microsoft IIS, tomcat dll) kemudian pasang perangkat tersebut pada laptop atau komputer yang telah tersedia. 5. Amati fungsi-fungsi atau fitur-fitur yang ada dalam ketiga web server tersebut. Catat hasilnya pada LK 1.3 6. Dari hasil pada langkah 5 buatlah tabel dalam bentuk cek list yang menjelaskan perbedaan atau persamaan fitur-fitur perangkat web server. Tentukan setidaknya 5 parameter atau kriteria (fitur) dan jelaskan deskripsi, fungsi atau kegunaan fitur-fitur tersebut. Catat hasilnya pada LK 1.4. 7. Diskusi dan komunikasikan hasilnya dalam kelompok dan buatlah kesimpulan. 8. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor. E. Latihan Soal 1. Matikan server apache dan copy file demo.html didalam local disc saudara misal dalam disc E:\lalu buka browser anda dan akses file demo.html tersebut dengan URL file:///E:/demo.html di browser anda. Amati yang terjadi! Jelaskan mengapa file demo.html tersebut bisa dibuka tanpa menjelankan server apache! 2. Jelaskan mengapa dibutuhkan web server untuk mengakses file aplikasi web! Sedangkan untuk mengakses file dapat secara langsung dengan membuka file dalam direktori disc local tanpa server. F. Rangkuman Web client (browser) adalah perangkat lunak yang digunakan untuk mengakses web server dengan mengirimkan pesan permintaan (request) HTTP dan 12 mengolah response HTTP yang dihasilkan. Web server merupakan perangkat lunak dalam server yang berfungsi menerima permintaan (request) melalui HTTP dari client yaitu browser dan mengirimkan kembali response HTTP. HTTP (HyperText Transfer Protocol) adalah standar protokol komunikasi,protokol jaringan lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan menggunakan hipermedia. URL (Uniform/Universal Resource Locator) merupakan suatu alamat untuk mengakses resource (file). G. KUNCI JAWABAN 1. Ada beberapa macam tipe URL untuk mengakses sebuah file, seperti https, ftp, telnet dan salah satunya adalah skema file. Untuk mengakses sebuah file dalam direktori lokal kita dapat menggunakan alamat seperti file:///E:/demo.html. Browser bisa memproses di sisi-client, akan tetapi untuk pemrograman server-side scripting (seperti PHP) tidak akan bisa di proses dalam sisi client, karena pemrograman PHP hanya bisa diproses di sisi server. 2. Dalam teknologi web, terdapat dua sisi pemrograman, yaitu client-side scripting (JavaScript) dan server-side scripting (PHP). Pada client-side scripting program diproses oleh browser dan server-side diproses pada sisi server. Saat mengengembangkan web dinamis kita tidak akan bisa terlepas dari yang namanya server-side scripting, maka dari itu web server diperlukan untuk memproses program pada sisi-server seperti pemrograman PHP H. Umpan Balik dan Tindak Lanjut 1. Apakah saudara memahami tentang gambaran global aplikasi web? 2. Apakah saudara sudah memahami apa itu web client dan web server? 3. Apakah saudara sudah bisa melakukan instalasi dan menggunakan web client maupun web server? 4. Apakah anda sudah dapat mengakses sebuah url dengan browser baik dalam direktori lokal maupun server lokal? 13 5. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Perangkat Pengembangan Aplikasi” ini, silahkan mengisi tabel 1 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 1. Tindak Lanjut IPK 14 Hasil yang didapat Rencana Tindak Lanjut 15 16 Membuat Dokumen HTML A. Tujuan Pembelajaran Melalui praktikum peserta diklat dapat memformat dokumen web menggunakan tag-tag HTML B. Indikator Pencapaian Kompetensi Memformat dokumen web menggunakan tag-tag HTML. C. Uraian Materi Dalam semua jenis dokumen, struktur sangat penting untuk mempermudah pembaca dalam memahami dan mencari pesan atau informasi yang disampaikan melalui dokumen web. Struktur tersebut juga akan mempermudah penulis dalam mengelola informasi seperti memperbarui, menambah atau menghapusnya. 1. Definisi HTML HTML yang merupakan singkatan dari HyperText Markup Language adalah bahasa markup yang terdiri dari seperangkat tag-tag dan digunakan untuk mendeskripsikan dokumen atau halaman web. Dokumen HTML tersebut terdiri dari tag-tag HTML yang menjelaskan berbagai ragam jenis isi dokumen yang berbeda-beda. 2. Strukur HTML 1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> </head> <body> <h1>Ini adalah heading</h1> <p>Ini adalah sebuah paragraf</p> <p>Ini adalah paragraf lain</p> </body> </html> 17 a. DOCTYPE deklarasi mendefinisikan jenis dokumen menjadi HTML. b. Teks antara <html> dan </ html> menggambarkan sebuah dokumen HTML. c. Teks antara <head> dan </ head> memberikan informasi tentang dokumen. d. Teks antara <title> dan </ title> memberikan judul untuk dokumen. e. Teks antara <body> dan </ body> menggambarkan isi halaman yang terlihat dalam browser. f. Teks antara <h1> dan </ h1> menggambarkan sebuah judul. g. Teks antara <p> dan </ p> menggambarkan sebuah paragraf. 3. Tag HTML Tag HTML adalah kata kunci (nama tag) dikelilingi oleh kurung sudut: <Nama tag>konten </ Nama tag> Tag HTML biasanya datang berpasangan seperti <p> dan </ p>. Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir. Tag akhir ditulis seperti tag awal, tetapi dengan garis miring sebelum nama tag. Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup. 18 4. Elemen HTML Elemen HTML ditulis dengan awal tag, dengan akhir tag, dengan konten di antara: <Tagname> konten </ tagname> HTML elemen adalah segalanya dari tag awal sampai tag akhir: <P> Pertama saya HTML paragraf. </ P> Contoh beberapa elemen HTML Formatting beserta fungsinya: No 1. ELEMEN <h1></h1> FUNGSI CONTOH Membuat heading (judul) <h1> Judul dengan ukuran mulai dari Heading</h1> <h1> sampai <h7> 2. <p></p> Membuat paragraph <p>Ini Paragraf</p> 3. <b></b> Cetak Tebal (bold) <b>Tebal</b> 4. <i></i> Cetak Miring (italic) <i>Miring</i> 5. <u></u> Garis bawah (underline) <u>Garis Bawah</u> 6. <hr> Garis Horizontal <hr> 7. <sub></sub> Subscript H<sub>2</sub>O 8. <sup></sup> Superscript 5<sup>2</sup>=25 9. <del></del> Menghapus text <del>Kesalahan</del> 10. <mark></mark> Memberikan highlight <mark>Teks (background warna) pada Color</mark> teks 11. <ul></ul> Membuat list berbentuk <ul> menu <li>Kopi</li> <li>Teh</li> <li>Es Campur</li> </ul> 12. <ol></ol> Membuat list berbentuk <ol> urutan <li>Kopi</li> <li>Teh</li> <li>Es Campur</li> </ol> 19 5. Atribut HTML Elemen HTML dapat memiliki atribut. Atribut memberikan informasi tambahan tentang elemen. Atribut selalu ditentukan dalam tag awal. Atribut datang dalam nama / nilai pasangan seperti: name = “value” 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <htmllang=”id”> <head> <title>Judul Hamalan</title> </head> <body> <h1>Ini adalah heading</h1> <p>Ini adalah sebuah paragraf</p> </body> </html> 6. HTML Editor Untuk menuliskan tag-tag HTML dapat menggunakan perangkat lunak teks editor seperti notepad atau sublime text. Sublime Text adalah aplikasi text editor yang dapat digunakan untuk membuka file apapun, namun secara umum programmer menggunakannya untuk menulis kode. Sublime Text mendukung sejumlah bahasa pemrograman diantaranya C, C++, C#, PHP, CSS, HTML, ASP dan banyak lagi. Salah satu keunggulan Sublime Text adalah mendukung Syntax Highlighter. Syntax Highlighter adalah fitur dari teks editor untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, font sesuai dengan kategori. Fitur Syntax Highlighter mempermudah penggunanya di dalam menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup. D. Aktifitas Pembelajaran Dalam kegiatan ini peserta diklat akan melakukan pemformatan dokumen web menggunakan tag-tag HTML. Bentuk kelompok diskusi setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan cermat dan teliti. Pelajarilah dengan tekun agar mendapatkan hasil yang maksimal. 1. Pasang dan konfigurasi perangkat teks editor (Notepad++, Sublime Text dll). 20 2. Buat dokumen atau halaman web dengan tampilan dalam web browser seperti terlihat dibawah ini. 2.1. Pemformatan teks HTML 21 22 23 2.2. Bekerja dengan Hyperlink Keterangan : Empire "http://www.empireonline.com" Metacritic "http://www.metacritic.com" Rotten Tomatoes http://www.rottentomatoes.com Variety http://www.variety.com Apabila di klik home maka akan mengarah ke halaman home. 24 2.3. Bekerja dengan gambar 2.4. Bekerja dengan tabel 2.5. Bekerja dengan Form 25 2.6. 26 Bekerja dengan Audio dan Video 3. Diskusi dengan kelompok tentang tag-tag HTML apa saja yang telah digunakan dan tag-tag apa saja yang belum diterapkan. Tuliskan dalam lembar kerja 2.1.seluruh tag-tag tersebut, beserta kegunaan atau fungsinya dan contoh penulisannya. 4. Komunikasikan hasilnya dalam kelompok dan buatlah kesimpulan. 5. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor. E. Latihan Soal Buatlah website sekolah sederhana, simpan dalam folder dengan nama studikasus1-1. Sepesifikasi dari website tersebut adalah sebagai berikut! Terdapat tiga halaman utama, halaman home, halaman profil dan halaman kontak. Dalam website tersebut terdapat sebuah logo dalam setiap halamannya. Halaman home berisi tentang berita/artikel tentang informasi sekolah. Halaman profil berisi tentang deskripsi sekolah, visi dan misi berupa teks dan sebuah video. Halaman kontak berisi sebuah form untuk pengiriman pesan oleh pengunjung. Dari tiga halaman tersebut terdapat sebuah menu yang diberi link yang dapat mengubungkan antara halaman satu dengan halaman lain. Saudara tidak perlu terfokus/berkonsentrasi pada harfiah isi dari website, baik teks, gambar, video. Diperbolehkan menggunakan standar mendemontrasikan elemen seperti lorem ipsum atau yang lain sesuai keinginan saudara agar pengerjaan bisa berjalan dengan cepat dan tidak banyak membuang waktu, yang terpenting adalah penggunaan tag-tag HTML dan website dapat berjalan dengan benar. F. Rangkuman HTML adalah markup language untuk mendeskripsikan dokumen web (halaman web).HTML singkatan HyperText Markup Language, sebuah bahasa markup 27 adalah seperangkat tag markup.Dokumen HTML dijelaskan oleh tag HTML, setiap tag HTML menjelaskan isi dokumen yang berbeda, Tag HTML biasanya datang berpasangan seperti <p> dan </ p>. Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir. Tag akhir ditulis seperti tag awal, tetapi dengan garis miring sebelum nama tag. Tag awal sering disebut tag pembuka, tag akhir sering disebut tag penutup. Elemen HTML ditulis dengan awal tag, dengan akhir tag, dengan konten di antara HTML, elemen HTML adalah segalanya dari tag awal sampai tag akhir. G. Umpan Balik dan Tindak Lanjut 1. Apakah anda memahami tag, elemen dan atribut dalam HTML? 2. Apakah anda sudah bisa menulis dan membaca dokumen HTML? 3. Apakah anda sudah memahami tag-tag HTML beserta mengetahui fungsinya? 4. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Membuat Dokumen HTML” ini, silahkan mengisi tabel 2 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 2. Tindak Lanjut IPK 28 Hasil yang didapat Rencana Tindak Lanjut 29 30 Mengatur Tampilan Dokumen HTML dengan CSS A. Tujuan Pembelajaran Melalui praktikum peserta didik dapat menuliskan CSS dalam dokumen atau halaman HTML dengan benar. B. Indikator Pencapaian Kompetensi Menuliskan CSS dalam dokumen atau halaman HTML dengan benar. C. Uraian Materi 1. Definisi CSS CSS singkatan Cascading Style Sheets, CSS mendefinisikan bagaimana elemen HTML yang akan ditampilkan. CSS Bekerja dengan mengaitkan aturan dengan elemen HTML, aturan-aturan ini yang nantinya mengatur bagaimana elemen ditampilkan. Dalam menggunakan sebuah CSS terdapat dua unsur, yaitu selector dan declaration. Selector: Merupakan merupakan penunjuk elemen yang akan diatur style-nya. Declaration: Merupakan deklarasi bagaimana sebuah elemen ditata. Dalam deklarasi terdapat dua unsur yaitu property dan value. Property menunjuk aspek elemen yang ingin diubah, misal font, warna, lebar. Sedangkan value adalah pengaturan yang digunakan untuk property yang dipilih. Contoh jika anda ingin menentukan property font-family, maka value-nya adalah arial, consolas, calibri. 31 Gambar 6. Struktur penulisan CSS Dalam CSS juga terdapat cara lain dalam mendefinisikan sebuah selector, yaitu id selector dan class selector. id selector id digunakan untuk mendefinisikan style pada elemen yang unik dan hanya bisa digunakan sekali dalam satu elemen. Cara mendefinisikan: #header { color: red } Contoh cara mengakses: <div id=”header”> class selector class digunakan untuk mendefinisikan style pada elemen yang serupa, dan bisa digunakan beberapa kali untuk beberapa elemen. Cara mendefinisikan: .body { text-align: center } Cara mengakses: <div class=”body”> 2. Cara Menerapkan CSS dalam HTML Terdapat tiga cara atau pendekatan dalam menerapkan style sheet dalam dokumen HTML. Tiga cara tersebut adalah inline, internal dan eksternal. Inline Dengan cara ini kita bisa menerapkan style per-tag melalui atribut style. Contoh: <p style=”color:red;>ini adalah sebuah paragraf<p> Internal 32 Dengan cara ini, keseluruhan aturan style didefinisikan ke dalam satu blok dalam dokumen HTML kemudian digunakan dalam elemen-elemen HTML. Contoh: <!DOCTYPE html> <html> <head> <title>Using Internal CSS</title> <style type="text/css"> body { font-family: arial; background-color: rgb(185,179,175);} </style> </head> <body> <h1>Potatoes</h1> </body> </html> Eksternal Seluruh pendefinisian style diletakan di file yang ber-ekstensi CSS dan dikaitkan dengan dokumen HTML. Contoh: <!DOCTYPE html> <html> <head> <title>Using eksternal CSS</title> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <body> <h1>From Garden to Plate</h1> <p>A <i>potager</i> is a French term for an ornamental</p> </body> </html> File style.css body{ font-family: Arial, Verdana, sans-serif;} h1, h2 { color: #ee3e80;} p{ color: #665544;} 33 D. Aktifitas Pembelajaran Dalam kegiatan ini peserta diklat akan melakukan pemformatan dokumen web menggunakan tag-tag HTML dan CSS. Sebelum melakukan aktifitas pembelajaran, berdoalah terlebih dahulu kemudian bentuklah kelompok diskusi dengan anggota yang berbeda dari sebelumnya. Setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan tekun dan teliti. 1. Buat folder dalam derektori C:\xampp\htdocs dengan Nama topik 1-2 dan kemudian dalam folder tersebut buat folder dengan nama CSS. 2. Buat dokumen atau halaman web dengan tampilan dalam web browser seperti terlihat dibawah ini 2.1. Latihan 1.40 (menggunakan eksternal CSS) dengan ketentuan : body dengan nama font: Arial, Verdana, sans-serif. Heading 1 dan heading 2 dengan warna: #ee3e80. Teks Paragraf dengan warna: #665544. 2.2. Latihan 1.41 (menggunakan internal CSS) dengan ketentuan: Body dengan nama font arial dan warna latar belakang rgb (185,179,175) h1 menggunakan warna rgb (255,255,255) 2.3. Latihan 1-43 (menggunakan internal CSS) 34 2.4. Latihan 1.44. 2.5. Latihan 1-45. 2.6. Latihan 1-46 pengaturan warna dengan CSS 35 36 2.7. Latihan 1-47. 2.8. Latihan 1-48 mendesain teks dengan CSS 2.9. Latihan 1-49 membuat teks Box dengan CSS. 2.10. Latihan 1-50 2.11. Latihan 1-51 Mempercantik Tabel dan Form 2.12. Latihan 1-52. 2.13. Latihan 1-53 Membuat Layout Web 37 2.14. Latihan 1-54 Membuat Galery Gambar 3. Komunikasikan hasilnya dalam kelompok dan buatlah kesimpulan. 4. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor E. Latihan Soal 1. Buatlah sebuah layout website sekolah seperti dibawah ini, gunakan tagtag HTML yang telah anda pelajari untuk membentuk setiap komponen yang diperlukan oleh website dan gunakan CSS untuk mendesain layout dan mengatur tampilan website. simpan file HTML dan CSS dalam folder studi-kasus1-2 Gambar 7. Lembar kerja desain layout halaman web 38 F. Rangkuman CSS merupakan salah satu teknologi dalam aplikasi web, CSS memiliki peran menjadikan tampilan aplikasi web (dokumen HTML) menjadi lebih menarik dan bagus. Dengan konsep yang telah dimiliki CSS kita dapat membuat sebuah frontend aplikasi web dengan bagus dengan mudah karena terdapat banyak sekali cara dan fitur yang dimiliki CSS. G. Umpan Balik dan Tindak Lanjut 1. Apakah saudara sudah mengetahui gimana cara-cara CSS dalam mengatur dokumen HTML? 2. Apakah saudara sudah mengrtahui apa itu selektor, declaration, property dan velue dalam CSS? 3. Apakah saudara mengerti perbedaan selektor id dan selektor class dalam CSS? 4. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Mengatur Tampilan Dokumen HTML dengan CSS” ini, silahkan mengisi tabel 3 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 3. Tindak Lanjut IPK Hasil yang didapat Rencana Tindak Lanjut 39 40 41 42 Mengenal Dasar Pemrograman PHP A. Tujuan Pembelajaran 1. Melalui observasi peserta diklat dapat memahami kerangka kerja pemrograman PHP. 2. Melalui praktikum diharapkan peserta didik dapat menerapkan struktur kontrol percabangan dan perulangan dalam pemrograman PHP. B. Indikator Pencapian Kompetensi 1. Memahami kerangka kerja pemrograman PHP. 2. Menerapkan struktur kontrol percabangan dan perulangan dalam pemrograman PHP. C. Uraian Materi 1. Pengenalan PHP dan Web Dinamis PHP adalah bahasa pemrograman komputer Server-side scripting yang diciptakan khusus untuk menciptakan konten web dinamis. Server-side scripting adalah script program yang berjalan di sisi server, PHP akan diparsing didalam web server oleh interpreter dan diterjemehkan dalam bentuk HTML dan akhirnya akan ditampilkan oleh browser yang dibuka oleh user. Berikut merupakan alur request-response web dinamis. 43 Gambar 8. Alur request-response web dinamis. 2. Prinsip-prinsip Dasar Bahasa pemrograman PHP a) Case Sensitivity Bahasa permrograman PHP adalah bahasa permograman yang case sensitive, semisal kita menggunakan nama sebuah variabel $nama, $NAMA dan $NaMa maka semua tipe data tersebut terdefinisi secara berbeda. b) Struktur Utama, Statement dan Semicolon Kode PHP diawali dengan tag <?php dan diakhiri dengan ?>.Statement atau pernyataan adalah kumpulan dari kode PHP untuk melakukan sesuatu. Setiap selesai membuat sebuah pernyataan harus diakhiri dengan semicolon atau tanda titik koma ; <?php echo ‚halo dunia‛; ?> 44 c) Komentar Komentar berfungsi untuk memberikan informasi bagi seorang yang ingin menbaca kode yang telah anda buat, komentar akan diabaikan oleh PHP Execution, artinya komentar tidak akan memberikan efek apa-apa bagi kode lain yang telah anda buat. Contoh: $x = 17;// menyimpan 17 dalam variavle x Anda dapat menggunakan cara seperti ini apabila mempunyai komentar lebih satu baris. /* Ini adalah komentar yang lebih dari Satu baris */ d) Identifier Identifier adalah sebuah pengenal, dalam PHP identifier digunakan untuk memberi nama sebuah variabel, fungsi, konstanta atau class. Untuk membuat nama dari sebuah variabel harus diawali dengan tanda dollar ($). Contoh: $bill $head_count $MaximumForce $_underscore $_int Berikut contoh penamaan variabel yang salah: $not valid $| $3wa Penamaan sebuah fungsi tidaklah case-sensitive. Berikut contoh penamaan fungsi yang benar: list_all_user deleteFile GET_ALL Untuk penamaan class juga menggunakan standar aturan penamaan indentifier PHP. Berikut contoh penamaan class pada PHP. Person Account Konstanta adalah identifier yang memiliki sebuah nilai, nilai tersebut dapat berupa boolean, integer, double, dan string. Sebuah konstanta didefinisikan menggunakan define(). Contoh: define(‘PUBLISHER’, ‚O’Reilly & Associets‛); echo PUBLISHER; 45 e) Keywords atau Reserved Words Keywords adalah kata yang sudah digunakan oleh PHP, artinya kata tersebut sudah tidak bisa kita gunakan lagi untuk mendefinisikan sebuah identifier baik sebuah variabel, fungsi, konstanta atau class. Berikut berupakan reserved words dalam PHP: 3. Tipe Data PHP menyediakan empat tipe data untuk menyimpan sebuah nilai, berikut merupakan empat tipe data dalam PHP: a) Integer Integer adalah sebuah tipe data yang merepresentasikan bilangan bulat atau utuh, positif maupun negatif dan bukan pecahan. Contoh 1, 2 dan -256 46 b) Float-Point Number Float disebut disebut sebagai bilangan pecahan atau sering juga disebut degan bilangan real yang mengandung angka desimal dibelakang koma. Contoh 3.14 0.017 c) Strings Tipe data string adalah untuk menyimpan sebuah untaian kalimat, dalam PHP tipe data string diekspresikan diapit oleh petik tinggal atau petik ganda. Contoh: ‘Ini adalah data string’ atau ‚ini adalah tipe data string‛ d) Boolean Bolean adalah tipe data yang merepresentasikan nilai kebenaran (truth value). Contoh: if ($found) { echo ‚data telah ditemukan‛; } Maksud dari kode diatas adalah jika variabel $found berisi “true” maka akan dilakukan ekskusi kode echo ‚data telah ditemukan‛; e) Array Array adalah variabel yang menyimpan sekelompok nilai, yang dapat diidentifikasikan berdasarkan posisi index-nya atau dengan identifikasi nama (string). Contoh: 4. Variabel Variabel dalam PHP diidentifikasikan dengan tanda dollar ($). Contoh: 47 Kita juga dapat mengganti sebuah nilai variabel dengan jenis atau tipe data yang berbeda. 5. Operator Dalam PHP operator dibagi menjadi 4 yaitu, assigment operator, aritmatika operator, relasional operator dan logic operator. Assigment operator adalah operator yang digunakan untuk memasukan sebuah nilai kedalam sebuah variabel. Assignment operator ditandai dengan “=”. Untuk aritmatika operator dalam daftar berikut: Tabel 3. Operator aritmatika dalam PHP Operator Keterangan + Penjumlahan - Pengurangan * Perkalian / Pembagian ++ Menambah nilai sebesar 1 -- Mengurangi nilai sebesar 1 Operator relasional adalah operator yang digunakan untuk membandingkan dua buah nilai, hasil operasi akan menghasilkan nilai true atau false. Berikut merupakan contoh operator relasional: Tabel 4. Operator relasional dalam PHP Operator 48 Keterangan $i == $u Memeriksa apakah $i sama dengan $u $i != $u Memeriksa apakah $i tidak sama dengan $u $i < $u Memeriksa apakah $i kurang dari $u $i > $u Memeriksa apakah $i lebih dari $u $i <= $u Memeriksa apakah $i kurang dari sama dengan $u $i >= $u Memeriksa apakah $i lebih dari sama dengan $u Sedangkan operator logika adalah operator yang digunakan untuk mengoprasikan dua buah operand yang bertipe boolean, Operator logika adalah sebagai berikut: Tabel 5. Operator logika dalam PHP Operator && Keterangan Logika AND || Logika OR ! Logika NOT 6. Struktur Kontrol Struktur kontrol adalah sintaks yang digunakan untuk mengatur proses kerja aplikasi/program. Struktur kontrol terbagi menjadi dua yaitu percabangan atau perulangan. a) Percabangan Percabangan digunakan untuk menentukan kode mana yang akan dijalankan, percabangan diawali dengan pengecekan parameter untuk diseleksi. Pada percabangan terdapat beberapa sintak yang bisa digunakan. If, If digunakan untuk mengecek ekspresi, apabila ekspresi bernilai true maka pernyataan akan di eksekusi. if (ekspresi) pernyataan Atau apabila saat ekspresi bernilai false ingin terdapat penyataan yang di eksekusi maka bisa menggunakan if else if (ekspresi) pernyataan else pernyataan Atau kita bisa menggunakan elseif apabila memiliki banyak ekspresi atau ekspresi if (ekspresi) pernyataan elseif (ekspresi) pernyataan elseif (ekspresi) pernyataan else pernyataan Selain if kita bisa menggunakan switch ketika memiliki banyak kondisi 49 switch ($menu) { case ‘sop’: pernyataan break; case ‘soto’: pernyataan break; case ‘sate’: pernyataan break; case ‘bakso’: pernyataan break; } b) Perulangan Saat membangun sebuah aplikasi web, anda akan menjumpai banyak kasus untuk melakukan perulangan terhadap statement-statement tertentu. Dalam proses perulangan PHP menyediakan kode untuk melakukan perulangan, antara lain while, do-while, for dan foreach. Struktur penulisan while: while (ekspresi){ pernyataan } Struktur penulisan do-while: do { pernyataan } while (ekspresi); Struktur penulisan for: for (inisialisasi; ekspresi; increment/decrement) { pernyataan } Struktur penulisan foreach: for ($array as $current) { pernyataan } 7. Memasukan kode PHP kedalam Dokumen HTML Perintah echo dalam PHP berguna untuk mencetak nilai ke layar browser, selain menggunakan echo anda juga menggunakan print. Berikut contoh kode php yang sederhana: 50 <?php echo‚halo dunia‛; ?> Ada beberapa cara dalam mengekspresikan kode PHP dalam sebuah dokumen HTML, yaitu dengan menyisipkan PHP dalam HTML atau HTML dalam PHP. Berikut merupakan contoh PHP dalam HTML: <!DOCTYPE html> <html> <head> <title>PHP dalam HTML</title> </head> <body> <p>Script PHP pertama saya.</p> <?php echo ‚halo dunia‛;?> </body> </html> Contoh HTML dalam PHP: <?php echo‚<html>‛; echo‚<head>‛; echo‚<title>PHP dalam HTML</title>‛; echo‚</head>‛; echo‚<body>‛; echo‚<p>Script PHP pertama saya.</p>‛; echo‚</body>‛; echo‚</html>‛; ?> D. Aktifitas Pembelajaran Dalam kegiatan ini peserta diklat akan melakukan latihan membuat dokumen web dan pengformatan dokumen pemrograman PHP. Bentuk kelompok diskusi setiap kelompok terdiri dari 3-4 orang yang saling bertanggung jawab terhadap perkerjaannya masing-masing. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan teliti. 1. Buat folder dalam derektori C:\xampp\htdocs dengan Nama topik2-1. 2. Tuliskan kode program dibawah ini kemudian tampilkan hasilnya pada web browser dan analisis hasilnya. 2.1. Latihan 2-1 Mengekspresikan PHP dalam dokumen HTML C:xampp/htdocs/topik2-1/latihan2-1.php 1 2 <!DOCTYPE html> <html> 51 3 4 5 6 7 8 9 10 11 <head> <title>PHP dalam HTML</title> </head> <body> <?phpecho"Kalimat yang ditulis melalui kode PHP"; ?> <p> Kalimat yang ditulis melalui HTML </p> <?phpecho"Kalimat yang ditulis melalui kode PHP"; ?> </body> </html> Amati bagaimana sebuah kalimat bisa tampil dalam browser, apa perbedaan menampilkan hanya melalui HTML dan bila menggunakan script PHP, jelaskan analisa anda! 2.2. Latihan 2-2 Pendefinisian Variabel C:xampp/htdocs/topik2-1/latihan2-2.php 1 2 3 4 5 6 <?php $kata="Helo dunia"; $angka_int=5; $angka_float=3.14; $found=true; ?> Hapus tanda dolar ($) kemudian jalankan lagi, analisis dan jelaskan apa yang terjadi! 2.3. Latihan 2-3. C:xampp/htdocs/topik2-1/latihan2-3.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Demo Variabel</title> </head> <body> <?php echo"<h1>Demo Variabel</h1>"; $angka=100; echo"ini adalah nilai angka ".$angka."<br>"; $angka_2=$angka+2; echo"ini adalah hasilnya apabila angka + 2 = ".$angka_2; ?> </body> </html> Amati hasil kode diatas, lalu simpulkan! 2.4. Latihan 2-4 Menggunakan Operator C:xampp/htdocs/topik2-1/latihan2-4.php 1 2 3 4 5 6 7 8 52 <!DOCTYPE html> <html> <head> <title>Demo opetor</title> </head> <body> <?php $penambahan=5+5; 9 10 11 12 13 14 15 16 17 18 19 20 $pengurangan=5-2; $perkalian=5*5; $pembagian=10/2; $sisa_bagi=30%4; echo"5 + 5 = ".$penambahan."<br>"; echo"5 - 2 = ".$pengurangan."<br>"; echo"5 * 5 = ".$perkalian."<br>"; echo"10 / 2 = ".$pembagian."<br>"; echo"30 % 4 = ".$pembagian."<br>"; ?> </body> </html> Amati hasil kode diatas, lalu simpulkan! 2.5. Latihan 2-5. C:xampp/htdocs/topik2-1/latihan2-5.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title>Demo operator</title> </head> <body> <?php $x=5; echo"nilai dari x adalah ".$x."<br>"; $x+=4; echo"hasil dari operasi x += 4 adalah ".$x."<br>"; echo"karena x += 4 itu memiliki maksud x = x + 4"; ?> </body> </html> Ganti operator “+=” dengan: “-=”, “*=”, “/=”, “%=”. Amati hasil operator tersebut lalu simpulkan! 2.6. Latihan 2-6 Penggunaan Struktur Kontrol Percabangan C:xampp/htdocs/topik2-1/latihan2-6.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Percabangan if</title> </head> <body> <?php $a=10; $b=5; if($a>$b){ echo"cetak kata apabila a > b"; } ?> </body> </html> Ganti nilai dalam variabel $a dan $b, amati hasilnya dan simpulkan! 53 2.7. Latihan 2-7. C:xampp/htdocs/topik2-1/latihan2-7.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Percabangan if else</title> </head> <body> <?php $nama="abdul munif"; if($nama=="abdul munif"){ echo"nama = ".$nama; }else{ echo"nama bukan abdul munif, tapi ".$nama; } ?> </body> </html> Ganti string “abdul munif” dalam variabel $nama dengan nama anda, amati hasilnya dan simpulkan! 2.8. Latihan 2-8. C:xampp/htdocs/topik2-1/latihan2-8.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <head> <title>Percabangan if-elseif dan operator logika</title> </head> <body> <?php $a=10; $b=11; $c=12; $d=12; if($a<=$b&&$c==$d){ echo"a kurang dari b dan c sama dengan d"; }elseif($a>=$b&&$c==$d){ echo"a lebih dari b dan c sama dengan d"; }elseif($a==$b&&$c>=$d){ echo"a sama dengan b dan c lebih dari sama dengan d"; }else{ echo"definisikan sendiri hasilnya!"; } ?> </body> </html> Ganti nilai dalam variabel $a, $b, $c dan $d, Analisa hasilnya dan simpulkan! 2.9. Latihan 2.9 C:xampp/htdocs/topik2-1/latihan2-9.php 1 2 3 4 54 <!DOCTYPE html> <html> <head> <title>Seleksi switch</title> 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 </head> <body> <?php $i=0; if($i==0){ echo" i setara dengan o"; } elseif($i==1){ echo"i setara dengan 1"; } elseif($i==2){ echo"i setara dengan 2"; } // Ekuivalen dengan pendekatan switch echo"<br>"; switch($i){ case0; echo" i setara dengan o"; break; case1; echo" i setara dengan 1"; break; case3; echo" i setara dengan 2"; break; } ?> </body> </html> Ganti nilai dalam variabel $i, Analisa hasilnya dan simpulkan! 2.10. Latihan 2-10 Penggunaan Struktur Kontrol Perulangan C:xampp/htdocs/topik2-1/latihan2-10.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title>Perulangan do-while</title> </head> <body> <?php $i=0; do{ echo"$i<br>"; $i++;//increment counter } while($i<10); ?> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.11. Latihan 2-11 C:xampp/htdocs/topik2-1/latihan2-11.php 1 2 <!DOCTYPE html> <html> 55 3 4 5 6 7 8 9 10 11 12 13 14 <head> <title>Perulangan while</title> </head> <body> <?php $i=0; while($i<10){ echo"halo dunia <br>"; $i=$i+1;//increment counter } ?> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.12. Latihan 2.12 perulangan menggunakan for. C:xampp/htdocs/topik2-1/latihan2-12.php 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head> <title>Perulangan for</title> </head> <body> <?php $x=10; for($i=0;$i<=$x;$i++){ echo"$i "; } ?> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.13. Latihan 2-13 perulangan dengan menggunakan foreach. C:xampp/htdocs/topik2-1/latihan2-13.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html> <head> <title>Perulangan foreach</title> </head> <body> <?php $biodata=array("nama"=>"abdul munif", "alamat"=>"malang", "jabatan"=>"direktur" ); foreach($biodataas$value){ echo$value."<br>"; } ?> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 56 3. Komunikasikan hasil praktikum pada langkah 2 dalam kelompok dan buatlah kesimpulan. 4. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor. E. Latihan Soal Buatlah sebuah folder dengan nama studi-kasus2-1 sebagai tempat penyimpanan file dibawah ini. 1. Buatlah sebuah program menyimpan suhu air (data integer) dalam derajat celcius dalam sebuah variabel dan menuliskan wujud air kedalam browser sebagai barikut: Jika suhu air <= 0 derajat maka dibrowser tercetak kata “beku”. Jika suhu air > 0 dan kurang dari 100 derajat maka di browser tercetak kata “cair”. Jika suhu air >= 100 maka tercetak “uap”. 2. Buatlah sebuah program yang menyimpan data jumlah anak ayam (tipe data integer) dan menampilkan hasil seperti dibawah ini di layar browser. Misal kita menyimpan data jumlah anak ayam sejumlah 5, Maka dilayar browser akan tercetak: Anak ayam turun 5 Mati satu tinggal 4 Mati satu tinggal 3 Mati satu tinggal 2 Mati satu tinggal induknya Gunakan perulangan dan percabangan untuk membuat program ini! 57 F. Rangkuman PHP adalah basaha pemrograman komputer Server-side scripting yang diciptakan khusus untuk menciptakan konten web dinamis. PHP akan diparsing didalam web server oleh interpreter dan diterjemahkan dalam bentuk HTML dan akhirnya akan ditampilkan oleh browser. PHP menyediakan empat tipe data untuk menyimpan sebuah nilai, yaitu Integer, Floating-Point Number, String dan Booleans. Dalam PHP, variabel diidentifikasikan dengan diawali tanda dollar ($), dan operator dibagai menjadi empat yaitu operator assignment, operator aritmatika, operator relasional dan operator logika. PHP juga menyediakan sebuah sintaks untuk mengatur proses kerja aplikasi/program yaitu percabangan dan perulangan. Percabangan digunakan untuk menentukan alur kode mana yang akan dijalankan dan perulangan digunakan untuk melakukan proses perulangan terhadap statement-statement tertentu. G. Kunci Jawaban 1. 58 2. H. Umpan Balik dan Tindak Lanjut 1. Apakah anda sudah memahami alur request-response web dinamis? 2. Apakah anda memahami kerangka program PHP? 3. Apakah anda sudah memahami apa itu tipe data, variabel dan operator pada PHP? 4. Apakah anda sudah mampu membuat program dalam bentuk struktur kontrol percabangan dan perulangan dengan PHP? 5. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Mengenal Dasar Pemrograman PHP” ini, silahkan mengisi tabel 4 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 4. Tindak Lanjut IPK Hasil yang didapat Rencana Tindak Lanjut 59 60 4. 61 62 Mengenal Fungsi dan Array dalam PHP A. Tujuan Pembelajaran Melalui praktikum peserta diklat dapat menerapkan fungsi dan array dalam pemrograman PHP B. Indikator Pencapaian Kompetensi Menerapkan fungsi dan array dalam pemrograman PHP. C. Uraian Materi 1. Fungsi Fungsi adalah sekumpulan blok program yang didefinisikan dengan nama tertentu dan berfungsi untuk melaksanakan tugas-tugas yang spesifik. Mendefinikan sebuah fungsi function [&] nama_fungsi([parameter[, ...]]) { List pernyataan } Berikut merupakan jenis fungsi: a) Fungsi yang tidak mengembalikan nilai Fungsi ini menjalankan script yang ada dalam blok fungsi. Contoh: Function cetak_kata() { echo ‚mencetak sebuah kata‛; } b) Fungsi dengan parameter Fungsi yang memungkinkan kita untuk memasukan informasi untuk diproses dalam fungsi. Contoh: Function cetak_nama($nama) { echo ‚halo ‛ .$nama; } Variabel $nama akan diproses dalam fungsi cetak_nama 63 c) Fungsi yang mengembalikan nilai (return value) Function jumlah($nilai1, $nilai2) { $total = $nilai1 + $nilai2; return $total; } 2. Array Array adalah koleksi data yang disimpan secara bersama dalam sebuah tipe data array, dan dapat diakses menggunakan index-nya, terdapat dua jenis array: a) Array index numeric Array jenis ini memiliki index dengan tipe numeric, terurut dari nol (0) kecil hingga ke terbesar. Contoh: $address = array(‚gresik‛, ‚surabaya‛, ‚malang‛); b) Aray index asosiatif Array dengan index yang kita definisikan dengan nama tertentu. Contoh: $indonesia = array(‚presiden‛ => ‚jokowi, ‚ibukota‛ => ‚jakarta‛ ‚benua‛ => ‚asia‛ ); D. Aktifitas Pembelajaran Dalam kegiatan ini peserta diklat akan menerapkan fungsi dan array menggunakan pemrograman PHP. Bentuk kelompok diskusi setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan teliti. 1. Buat folder dalam derektori C:\xampp\htdocs dengan Nama topik2-2. 2. Tuliskan kode program dibawah ini kemudian tampilkan hasilnya pada web browser dan analisis hasilnya. 64 2.1. Latihan 2-14 Membuat Fungsi Sederhana C:xampp/htdocs/topik2-2/latihan2-14.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head> <title>Fungsi</title> </head> <body> <?php function mySum($a,$b){ $total=$a+$b; return$total; } $myNumber=0; echo"sebelum fungsi ".$myNumber."<br />"; $myNumber= mySum(7,5); echo"setelah fungsi ".$myNumber."<br />"; ?> </body> </html> dijalankan, nilai dari myNumber adalah dijalankan, nilai dari myNumber adalah Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.2. Latihan 2-15 Argumen fungsi. C:xampp/htdocs/topik2-2/latihan2-15.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title>Argumen fungsi</title> </head> <body> <?php function print_teks($teks,$bold=true){ echo$bold?'<b>'.$teks.'</b>':$teks; } print_teks('Indonesiaku'); echo"<br>"; print_teks('Indonesiaku',false); ?> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.3. Latihan 2-16 Fungsi greeting. C:xampp/htdocs/topik2-2/latihan2-16.php 1 2 3 4 5 6 7 <!DOCTYPE html> <html> <head> <title>Fungsi Greeting</title> </head> <body> <?php 65 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 function ShowGreeting($jam){ echo'Sekarang Pukul '.$jam.'.00'; if(($jam>=00.01)&&($jam<=10.00)){ echo' : Selamat Pagi'; } if(($jam>=10.01)&&($jam<=14.59)){ echo' : Selamat Siang'; } if(($jam>=15.00)&&($jam<=18.59)){ echo' : Selamat Sore'; } if(($jam>=19.00)&&($jam<=23.59)){ echo' : Selamat Malam'; } if(($jam==00.00)){ echo' : Selamat Malam'; } } ShowGreeting(12.00); ?> </body> </html> Ganti nilai argumen dalam fungsi ShowGreeting sesuai keinginan anda dalam format jam, amati hasilnya dan simpulkan! 2.4. Latihan 2-17 Passing Argumen dalam Fungsi C:xampp/htdocs/topik2-2/latihan2-17.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html> <head> <title> Passing Argumen </title> </head> <body> <?php function byval($bil){ $bil--; } function byref(&$bil){ $bil--; } $input=4; echo"Nilai awal = ".$input."<br/>"; byval($input); echo"by value = ".$input."<br/>"; byref($input); echo"by reference = ".$input; ?> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 66 2.5. Latihan 2-18 Menggenerate Tabel Menggunakan Fungsi C:xampp/htdocs/topik2-2/latihan2-18.php <!DOCTYPE html> <html> <head> <title> Generate Sel Tabel </title> </head> <body> <?php function myTabel($baris,$kolom){ echo"<table border=50>"; for($i=1;$i<=$baris;$i++){ echo"<tr height = 50>"; for($j=1;$j<=$kolom;$j++){ echo"<td width=50></td>"; } echo"</tr>"; } echo"</table>"; } myTabel(5,5); ?> </body> </html> Ganti nilai argumen dalam fungsi myTabel, analisa hasilnya dan simpulkan! 2.6. Latihan 2-19 Fungsi Built-in PHP C:xampp/htdocs/topik2-2/latihan2-19.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> </html> <head> <title>Fungsi Built-in</title> </head> <body> <?php $name="Iswanul Umam"; echostrpos($name,"U"); echo"<br><br>"; $stringAwal="Saya suka belajar PHP"; echo$stringAwal."<br>"; echo"Hasil setelah menggunakan fungsi srt_replace: <br>"; $stringAkhir=str_replace("Saya","Kamu",$stringAwal); echo$stringAkhir; echo"<br><br>"; $karakter="Belajar web dinamis dengan PHP"; echo$karakter."<br>"; $panjangKarakter=strlen($karakter); echo"Panjang karakternya adalah ".$panjangKarakter; echo"<br><br>"; echo"Sekarang tanggal ".date("Y/m/d")."<br>"; echo"Sekarang tanggal ".date("Y.m.d")."<br>"; echo"Sekarang tanggal ".date("Y-m-d")."<br>"; echo"Sekarang hari ".date("l"); ?> </body> </html> 67 2.7. Latihan 2-20 Menyimpan Data dalam Array C:xampp/htdocs/topik2-2/latihan2-20.php 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> </html> <head> <title>Menyimpan data dalam array</title> </head> <body> <?php $mobil=array("Volvo","BMW","Toyota"); echo"Saya memiliki ".$mobil[0].", ".$mobil[1]." dan ".$mobil[2]."."; ?> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.8. Latihan 2-21 Menampilkan Data Array C:xampp/htdocs/topik2-2/latihan2-21.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> </html> <head> <title>Array</title> </head> <body> <?php $mobil=array("Volvo","BMW","Toyota"); $totalData=count($mobil); echo"Mengekstrak data dalam array menggunakan perulangan for <br>"; for($x=0;$x<$totalData;$x++){ echo$mobil[$x]; echo"<br>"; } echo"Mengekstrak data dalam array menggunakan perulangan foreach <br>"; foreach($mobilas$value){ echo$value."<br>"; } echo"Mengekstrak data dalam array menggunakan perulangan foreach dengan meenampilkan index <br> "; foreach($mobilas$key=>$value){ echo$key." ".$value."<br>"; } ?> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.9. Latihan Array 2-22 Index Asosiatif C:xampp/htdocs/topik2-2/latihan2-22.php 1 2 3 4 68 <!DOCTYPE html> </html> <head> <title>Array Index Asosiatif</title> </head> 5 6 7 8 9 10 11 12 13 14 15 16 <body> <?php $umur=array("Munif"=>"30","Umam"=>"21","Alvan"=>"3"); echo"Umur Munif ".$umur['Munif']." tahun."; echo"<br><br>"; foreach($umuras$x=>$x_value){ echo"Umur ".$x." adalah ".$x_value; echo"<br>"; } ?> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.10. Latihan 2-23 Fungsi Built-in untuk Array C:xampp/htdocs/topik2-2/latihan2-23.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 39 30 31 <!DOCTYPE html> </html> <head> <title>Fungsi Built-in Array</title> </head> <body> <?php //fungsi built-in untuk array $mobil=array("Volvo","BMW","Toyota"); foreach($mobilas$value){ echo$value." "; } sort($mobil); echo"<br><strong>Data setelah di sorting:</strong><br>"; foreach($mobilas$value){ echo$value." "; } echo"<br>"; $umur=array("Peter"=>"35","Ben"=>"37","Joe"=>"43"); echo"<br>"; foreach($umuras$key=>$value){ echo$key." ".$value."<br>"; } arsort($umur); echo"<strong>Data setelah di arsort:</strong><br>"; foreach($umuras$key=>$value){ echo$key." ".$value."<br>"; } ?> </body> </html> Terapkan juga fungsi biult-in ksort(), rsort(), asort() dan krsort(). Amati hasilnya dan simpulkan! 69 2.11. Latihan 2-24 Array Multidimensi C:xampp/htdocs/topik2-2/latihan2-24.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <!DOCTYPE html> </html> <head> <title>Array Multidimensi</title> </head> <body> <?php //array multidimensi $mobil=array( array("Volvo",22,18), array("BMW",15,13), array("Jaguar",5,2), array("Lamborgini",17,15) ); echo$mobil[0][0].": masih tersisa: ".$mobil[0][2].".<br>"; echo$mobil[1][0].": masih tersisa: ".$mobil[1][2].".<br>"; echo$mobil[2][0].": masih tersisa: ".$mobil[2][2].".<br>"; echo$mobil[3][0].": masih tersisa: ".$mobil[3][2].".<br>"; for($row=0;$row<4;$row++){ echo"<p><b>Index Row $row</b></p>"; echo"<ul>"; for($col=0;$col<3;$col++){ echo"<li>".$mobil[$row][$col]."</li>"; } echo"</ul>"; } ?> </body> </html> ".$mobil[0][1].", terjual: ".$mobil[1][1].", terjual: ".$mobil[2][1].", terjual: ".$mobil[3][1].", terjual: Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 3. Komunikasikan hasil praktikum pada langkah 2 dalam kelompok dan buatlah kesimpulan. 4. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor. E. Latihan Soal Buatlah folder dengan nama studi-kasus2-2 untuk menyimpan file studi kasus dibawah ini. 1. Buatlah sebuah fungsi yang digunakan untuk menerima sebuah bilangan rill yang merupakan jari-jari sebuah lingkaran dan menghasilkan sebuah luas lingkaran berdasarkan jari-jari tersebut! 70 2. Buatlah sebuah fungsi untuk perhitungan fibonacci, dimana inputan pada fungsi digunakan untuk menunjukan bilangan kesekian dari deret tersebut! 3. Buatlah sebuah fungsi untuk perhitungan nilai pangkat, dengan inputan x (bilangan yang dikuadratkan) dan inputan y (bilangan pangkat)! F. Rangkuman Fungsi adalah sekumpulan blok program yang didefinisikan dengan nama tertentu dan berfungsi untuk melaksanakan tugas-tugas yang spesifik. Secara garis besar terdapat tiga macam fungsi dalam PHP, yaitu fungsi yang tidak mengembalikan nilai, fungsi dengan parameter yang memungkin kita untuk memasukan informasi untuk diproses dalam fungsi, dan fungsi yang mengembalikan nilai (return value). Array adalah koleksi data yang disimpan secara bersama dalam sebuah tipe data array, dan dapat diakses menggunakan index-nya, terdapat dua jenis array yaitu array index numerik dan array index asosiatif, array index numerik memiliki index tipe numerik terurut dari bilangan nol (0) sampai dengan bilangan sampai jumlah terbesar, sedangkan array index asosiatif adalah array yang index-nya didefinisikan dengan nama tertentu. G. Kunci Jawaban 1. Program membuat fungsi untuk menghitung lingkaran <?php function luaslingkaran($jari2){ return 3.14 * $jari2 * $jari2; } echo luaslingkaran(4.5); ?> 71 2. Program deret fibonacci <?php function fibonacci($deret){ $sekarang=1; $sebelum=0; for ($i=0; $i<$deret; $i++) { $output = $sebelum + $sekarang; echo " $output"; $sebelum = $sekarang; $sekarang = $output; } } echo fibonacci(10); ?> 3. Progam Pangkat menggunakan fungsi dengan parameter x sebagai bilangan dan y sebagai pangkat. <?php function pangkat($x,$y){ $hasil = 1; for ($i=0; $i<$y; $i++) { $hasil = $hasil * $x; } return $hasil; } echo pangkat(3,3); ?> H. Umpan Balik dan Tindak Lanjut 1. Apakah anda sudah memahami fungsi dan array dalam bahasa PHP? 2. Apakah anda sudah mampu membuat fungsi dan array dalam bahasa PHP untuk memecahkan sebuah masalah dalam program? 3. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Mengenal Fungsi dan Array dalam PHP” ini, silahkan mengisi tabel 5 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! 72 Tabel 5. Tindak Lanjut IPK Hasil yang didapat Rencana Tindak Lanjut 73 74 75 76 Operasi File pada pemrograman PHP A. Tujuan Pembelajaran Melalui praktikum peserta diklat dapat menerapkan operasi file dalam pemrograman PHP. B. Indikator Pencapaian Kompetensi Menerapkan operasi file dalam pemrograman PHP. C. Uraian Materi 1. Menggunakan File File dapat dijadikan alternatif untuk menyimpan data yang dimasukan melalui form. File juga dapat digunakan untuk menyimpan data-data yang digunakan untuk keperluan konfigurasi sistem. PHP menyediakan fitur untuk membaca, merubah dan menyimpan file. Sebelum mengakses sebuah file kita harus membuka dulu file yang akan diproses. PHP menyediakan fungsi built-in untuk membuka sebuah file yaitu fopen(). Bentuk penggunaan fungsi fopen() adalah sebagai berikut: $file_handler = fopen(nama_file,Mode); Mode yang bisa kita isikan dengan kode seperti dalam tabel dibawah ini: Tabel 6. Ragam mode fungsi fopen() Mode Keterangan r Membuka file untuk proses read(membaca) r+ Membuka file untuk proses read dan penulisan w Membuka file untuk proses write(penulisan) w+ Membuka file untuk proses penulisan dan pembacaan a Membuka file untuk proses appending(penambah data) a+ Membuka file untuk proses pembaca dan penambah data 77 Setelah membuka file dan memproses dengan mode yang ada pada daftar diatas, maka kita harus menutup sebagai tahapan terakhir dengan fungsi fclose($file_handler).Contoh: $sourNamaFile =‛testFile.txt‛; $sourFileHandle = fopen($sourNamaFile, ‘w’) or die (‚can’t open file‛); fclose($sourFileHandle) 2. Menulis ke File fwrite () adalah fungsi yang digunakan untuk menulis ke file. Parameter pertama fwrite () berisi nama file untuk menulis dan parameter kedua adalah string yang akan ditulis. fwrite($nama_file, ‘string’) 3. Upload File Upload adalah menyimpan file dari direktori lokal komputer client ke dalam server. Banyak sekali metode dalam upload file, seperti mengirim file foto dari komputer client kedalam sistem agar tampil dalam sebuah halaman web. Form upload memiliki karakteristik/ciri-ciri daripada form biasa, yang membedakan adalah: Selain terdapat method dan action pada atribut form juga ditambahkan enctype=‛multipart/form-data‛ Tag <input> harus di set dengan atribut type=‛file‛ Untuk menerima file kita dapat menggunakan beberapa script seperti $_FILES[nama_field][atribut], berikut adalah isi atributnya: tmp_name = berisi path temporary tempat file haril proses upload disimpan dalam server. name = berisi path asli dari file yang diupload user. Proses upload pada PHP adalah berada pada penerapan fungsi built-in yaitu: move_uploaded_file() atau copy() yang berfungsi memindahkan dari folder temporary ke folder tujuan upload. 78 D. Aktifitas Pembelajaran Dalam kegiatan ini peserta diklat akan menerapkan operasi file menggunakan pemrograman PHP. Bentuk kelompok diskusi setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan tekun dan teliti. 1. Buat folder dalam direktori C:\xampp\htdocs dengan Nama topik2-3. 2. Tuliskan kode program dibawah ini kemudian tampilkan hasilnya pada web browser dan analisis hasilnya. 3.1. Latihan 2-25 Membuka dan Membaca File C:xampp/htdocs/topik2-3/latihan2-25.php 1 2 3 4 5 <?php $myfile=fopen("kamus.txt","r")ordie("Unable to open file!"); echofread($myfile,filesize("kamus.txt")); fclose($myfile); ?> C:xampp/htdocs/topik2-3/kamus.txt 1 2 3 4 5 6 AJAX = Asynchronous JavaScript and XML <br> CSS = Cascading Style Sheets <br> HTML = Hyper Text Markup Language <br> PHP = PHP Hypertext Preprocessor <br> SQL = Structured Query Language <br> SVG = Scalable Vector Graphics <br> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 3.2. Latihan 2-26 Menuliskan Data ke File C:xampp/htdocs/topik2-3/latihan2-26.php 1 2 3 4 5 6 7 8 9 10 11 <?php $myfile=fopen("newfile.txt","w")ordie("Unable to open file!"); $txt="Abdul Munif\n"; fwrite($myfile,$txt); $txt="Iswanul Umam\n"; fwrite($myfile,$txt); $txt="VEDC Malang\n"; fwrite($myfile,$txt); fclose($myfile); echo"Silahkan anda cek newfile.txt"; ?> C:xampp/htdocs/topik2-3/newfile.txt Amati hasil dari kode tersebut, buka file newfile.txt yang tadinya kosong, analisa hasilnya dan simpulkan! 79 3.3. Latihan 2-27 Upload File Tulis kode dibawah ini dan simpan dengan nama latihan2-27.html dan upload.php dalam folder topik2-3 yang telah kita buat tadi, buat sebuah folder dengan nama uploads dalam folder topik2-3. Lalu jalankan melalui browser! C:xampp/htdocs/topik2-3/latihan2-27.php 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head> <title>Upload file</title> </head> <body> <formaction="upload.php"method="post"enctype="multipart/form-data"> Pilih gambar yang akan diupload: <inputtype="file"name="fileToUpload"id="fileToUpload"> <inputtype="submit"value="Upload Gambar"name="submit"> </form> </body> </html> C:xampp/htdocs/topik2-3/upload.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 80 <?php $target_dir="uploads/"; $target_file=$target_dir.basename($_FILES["fileToUpload"]["name"]); $uploadOk=1; $imageFileType=pathinfo($target_file,PATHINFO_EXTENSION); // Untuk mengecek file merupakan gambar atau tidak if(isset($_POST["submit"])){ $check=getimagesize($_FILES["fileToUpload"]["tmp_name"]); if($check!==false){ echo"Format file gambar (".$check["mime"].")<br>"; $uploadOk=1; }else{ echo"Format file bukan gambar.<br>"; $uploadOk=0; } } // Mengecek apabila file sudah ada dalam server if(file_exists($target_file)){ echo"Maaf file ini sudah ada dalam direktori<br>"; $uploadOk=0; } // Untuk mengecek ukuran file if($_FILES["fileToUpload"]["size"]>500000){ echo"Maaf, file anda terlalu besar.<br>"; $uploadOk=0; } // Format gambar yang di izinkan untuk di uplaod if($imageFileType!="jpg"&&$imageFileType!="png"&&$imageFileType!="jpeg" &&$imageFileType!="gif"){ echo"Maaf, hanya ekstensi JPG, JPEG, PNG & GIF yang di izinkan.<br>"; 30 31 32 33 34 35 36 37 38 39 40 41 42 43 $uploadOk=0; } /* Apabila $uploadOk bernilai 0, maka syarat file yang diupload belum terpenuhi dan proses pemindahan file tidak dilakukan */ if($uploadOk==0){ echo"Maaf, file anda tidak terupload.<br>"; /* Aabila semua berjalan dengan baik, maka proses upload akan dilakukan */ }else{ if(move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],$target_file)){ echo"File gambar ".basename($_FILES["fileToUpload"]["name"])." berhasil diupload."; }else{ echo"Maaf, terjadi kesalahan saat proses upload file.<br>"; } } ?> Dimanakah posisi file setelah proses upload berhasil dilakukan! Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 4. Komunikasikan hasil praktikum pada langkah 2 dalam kelompok dan buatlah kesimpulan. 5. Buatlah Laporan kemudian komunikasikan hasil laporan dan pembahasan dengan tutor. E. Latihan Soal Buat folder dengan nama studi-kasus2-3 untuk menyimpan file studi kasus dibawah ini. 1. Buat sebuah form untuk mengupload sebuah dokumen dengan tipe PDF (Portable Document Format) kedalam sebuah server dengan ketentuan maksimal ukuran file adalah 2MB yang bisa diproses. 2. Buat sebuah form untuk mendownload sebuah dokumen dengan tipe PDF (Portable Document Format) kedalam sebuah server dengan ketentuan maksimal ukuran file adalah 2MB yang bisa diproses. F. Rangkuman PHP menyediakan fitur untuk membaca, merubah dan menyimpan file, PHP menyediakan fungsi built-in untuk melakkukan operasi terhadap suatu file, seperti untuk membuka sebuah file yaitu menggunakan fopen() atau pada proses upload pada PHP menggunakan fungsi built-in 81 move_uploaded_file()untuk memindahkan dari folder temporary ke folder upload. G. Umpan Balik dan Tindak Lanjut 1. Apakah anda sudah memamahi pemetaan file dengan menggunakan PHP? 2. Apakah anda sudah mampu mengoprasikan file dengan PHP seperti menulis dan membaca file dengan PHP? 3. Apakah anda sudah bisa membuat proses upload file dengan menggunakan PHP? 4. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Operasi File pada Pemrograman PHP” ini, silahkan mengisi tabel 6 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 6. Tindak Lanjut IPK 82 Hasil yang didapat Rencana Tindak Lanjut 83 84 Penanganan Form Pada PHP A. Tujuan Pembelajaran Melalui praktikum peserta diklat dapat menerapkan pengelolaan data menggunakan Form dalam pemrograman PHP. B. Indikator Pencapaian Kompetensi Menerapkan pengelolaan data menggunakan Form dalam pemrograman PHP. C. Uraian Materi Pemrosesan form (form processing) merupakan operasi mendasar pada aplikasi web. Dalam konteks pengembangan aplikasi web dinamis, langkah ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukan dari user, tentu diperlukan sekali form isian dan cara pemrosesannya. Begitu pula halnya ketika administrator ingin masuk ke sistem, tentu memerlukan suatu antarmuka penghubung. Intinya, keberadaan form dan pemrosesannya mutlak diperlukan dalam membangun aplikasi web yang interaktif. Form adalah antarmuka (user interface) agar user dapat berkomunikasi dengan sistem aplikasi. Setiap permintaan dari user disebut dengan request dan setiap hasil dari pemrosesan oleh server disebut dengan response. Form dalam aplikasi web menggunakan tag <form> dan diakhiri dengan </form>. Dimana tag tersebut memiliki beberapa atribut antara lain adalah action dan method. Action digunakan untuk mendefinisikan tujuan pengiriman data dari form, dan method digunakan untuk mendefinisikan metode pengiriman apa yang akan kita gunakan. Method dalam atribut terdapat dua macam yaitu: 1. POST <form action="proses.php" method="POST"> <input type="text" name="name"> <input type="submit"> </form> 85 Untuk membaca variabel dalam metode POST dapat menggunakan variabel super global $_POST[“nama_variabel”] 2. GET <form action="proses.php" method="GET"> <input type="text" name="name"> <input type="submit"> </form> Untuk membaca variabel dalam metode GET dapat menggunakan variabel super global $_GET[“nama_variabel”] Ada beberapa komponen field yang dapat digunakan dalam form antara lain adalah: o <input>, untuk inputan dalam bentuk field isian text, radio button, check box, file, password, submit dan button. o <textarea>, untuk jenis inputan dalam bentuk multi baris. o <option>, untuk jenis inputan pilihan (combo box). D. Aktifitas Pembelajaran Dalam kegiatan ini peserta diklat akan menerapkan pengelolaan data menggunakan form dalam pemrograman PHP. Bentuk kelompok diskusi setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan teliti. 1. Buat folder dalam direktori C:\xampp\htdocs dengan Nama topik2-4. 2. Tuliskan kode program dibawah ini kemudian tampilkan hasilnya pada web browser dan analisis hasilnya. 2.1. Latihan 2-28 Penggunaan metoda GET C:xampp/htdocs/topik2-4/latihan2-28.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 86 <!DOCTYPE HTML> <html> <head> <title>Metode GET</title> </head> <body> <form action="<?php $_SERVER['PHP_SELF'];?>" method="GET"> Name: <input type="text" name="name"><br> E-mail: <input type="text" name="email"><br> <input type="submit"> </form> <?php if(isset($_GET['name'])){ echo '<br>Hallo, ' . $_GET['name']; } if(isset($_GET['email'])){ 17 18 19 20 21 22 23 24 25 26 27 28 echo '<br>Your email, ' . $_GET['email']; } if(isset($_REQUEST['name'])){ echo '<br>Method, ' . $_SERVER['REQUEST_METHOD']; } if(isset($_REQUEST['email'])){ echo '<br>Method, ' . $_SERVER['REQUEST_METHOD']; } ?> </body> </html> C:xampp/htdocs/topik2-4/proses.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?php if(isset($_GET['name'])){ echo 'Hallo, ' . $_GET['name']; } if(isset($_GET['email'])){ echo 'Your email, ' . $_GET['email']; } if(isset($_REQUEST['name'])){ echo '<br />Method, ' . $_SERVER['REQUEST_METHOD']; } if(isset($_REQUEST['email'])){ echo '<br />Method, ' . $_SERVER['REQUEST_METHOD']; } ?> Ganti action “<?php $_SERVER['PHP_SELF'];?>” menjadi “proses.php”, Amati kode tersebut, analisis hasilnya dan simpulkan! 2.2. Latihan 2-29 Penggunaan metoda POST. C:xampp/htdocs/topik2-4/latihan2-29.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE HTML> <html> <head> <title>Metode POST</title> </head> <body> <form action="<?php $_SERVER['PHP_SELF'];?>" method="POST"> Name: <input type="text" name="name"><br> E-mail: <input type="text" name="email"><br> <input type="submit"> </form> <?php if(isset($_POST['name'])){ echo '<br>Hallo, ' . $_POST['name']; } if(isset($_POST['email'])){ echo '<br>Your email, ' . $_POST['email']; } 87 20 21 22 23 24 25 26 27 2.3. if(isset($_REQUEST['name'])){ echo '<br>Method, ' . $_SERVER['REQUEST_METHOD']; } if(isset($_REQUEST['email'])){ echo '<br>Method, ' . $_SERVER['REQUEST_METHOD']; } ?> </body> </html> Latihan 2-30 Penggunaan masukan Radio Button. C:xampp/htdocs/topik2-4/latihan2-30.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2.4. <!DOCTYPE HTML> <html> <head> <title>Inputan Radio Buttons</title> </head> <body> <form action="<?php $_SERVER['PHP_SELF'];?>" method="POST"> Jenis Kelamin : <input type="radio" name="sex" value="Pria">Pria <input type="radio" name="sex" value="Wanita">Wanita <input type="submit"> </form> <?php if(isset($_POST['sex'])){ echo $_POST['sex']; } ?> </body> </html> Latihan 2-31 Penggunaan masukan seleksi C:xampp/htdocs/topik2-4/latihan2-31.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 88 <!DOCTYPE HTML> <html> <head> <title>Inputan Seleksi</title> </head> <body> <form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST"> Pekerjaan <select name="job"> <option value="Mahasiswa">Mahasiswa</option> <option value="ABRI">ABRI</option> <option value="PNS">PNS</option> <option value="Swasta">Swasta</option> </select><br> <input type="submit"> </form> <?php if(isset($_POST['job'])){ echo $_POST['job']; 20 21 22 23 2.5. } ?> </body> </html> Latihan 2-32 Penggunaan masukan Data Check Box C:xampp/htdocs/topik2-4/latihan2-32.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <head> <title>Data Checkbox</title> </head> <body> <form action="<?php $_SERVER['PHP_SELF'];?>" method="POST"> Hobi <input type="checkbox" name="hobby[]" value="Membaca">Membaca <input type="checkbox" name="hobby[]" value="Olahraga">Olahraga <input type="checkbox" name="hobby[]" value="Menyanyi">Menyanyi <input type="submit"> </form> <?php if(isset($_POST['hobby'])){ foreach ($_POST['hobby'] as $key => $val) { echo $key . '->' . $val . '<br>'; } } ?> </body> </html> 3. Komunikasikan hasil praktikum pada langkah 2 dalam kelompok dan buatlah kesimpulan. 4. Buatlah Laporan kemudian komunikasikan hasil laporan dan pembahasan dengan tutor. E. Latihan Soal 1. Idenifikasi perbedaan metode POST dan GET dalam form, dan jelaskan saat yang tepat menggunakan metode POST dan saat yang tepat menggunakan metode GET! 2. Buatlah dua halaman web (Interface) yang terdiri dari: 1) halaman 1 (entry curriculum vitae). 2) Halaman 2(konfirmasi data) berisi detail data, tombol kirim data, tombol edit data). Komponen atau obyek-obyek form yang digunakan meliputi input text, radio buttom, check box, command buttom, combo box, tabel dll. Data 89 meliputi Nama, alamat tanggal lahir, jenis kelamin (radio buttom), kompetensi yang diminati (check box), riwayat pendidikan, foto. F. Rangkuman Pemrosesan form (form processing) merupakan operasi mendasar pada aplikasi web. Form adalah antarmuka (user interface) agar user dapat berkomunikasi dengan sistem aplikasi. Setiap permintaan dari user disebut dengan request dan setiap hasil dari pemrosesan oleh server disebut dengan respons. Form dalam aplikasi web menggunakan tag <form> dan diakhiri dengan </form>. G. Kunci jawaban Idenifikasi perbedaan metode POST dan GET dalam form: Medote POST tidak menampikan nilai variabel pada URL sedangkan metode GET menampilkan nilai variabel yang dikirim. Metode GET dibatasi panjang string sedangkan metode POST tidak. Metode POST digunakan untuk mengirim data yang bersifat rahasia sedangkan metode GET digunakan untuk mengirim data yang bersifat tidak rahasia. Metode POST lebih aman daripada metode GET. H. Umpan Balik dan Tindak Lanjut 1. Apakah saudara sudah bisa membuat form dan memahami cara kerjanya? 2. Apakah saudara memahami metode POST dan GET dalam form? 3. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Penangan Form pada PHP” ini, silahkan mengisi tabel 7 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! 90 Tabel 7. Tindak Lanjut IPK Hasil yang didapat Rencana Tindak Lanjut 91 92 93 Mengenal Dasar Pemrograman JavaScript A. Tujuan Pembelajaran 1. Melalui diskusi peserta diklat dapat membedakan tag javascript sesuai fungsi dan kegunaannya. 2. Melalui praktikum peserta diklat dapat menerapkan pemrograman javascript (event, object windows) B. Indikator Pencapaian Kompetensi 1. Membedakan tag javascript sesuai fungsi dan kegunaannya 2. Menerapkan pemrograman javascript (event, object windows) C. Uraian Materi 1. Pengertian JavaScript JavaScript adalah bahasa pemograman web yang bersifat Client-Side Programming Language. Client-Side Programming Language adalah tipe bahasa pemograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox. Jenis bahasa pemograman Client-Side berbeda dengan bahasa pemograman Server Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di sisi server.Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor, dan web browser. JavaScript memiliki fitur: high-level programming language, client-side, loosely tiped, dan berorientasi objek. 2. Fungsi JavaScript dalam Pemrograman Web JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web server. 1. ECMAScript 5 JavaScript adalah bahasa pemrograman yang dibuat mengikuti spesifikasi standar yang disebut ECMA Script dan saat ini versi termodern 94 dari ECMA Script adalah versi 5. Sebagian besar browser modern sudah mendukung ECMA Script 5 walaupun tidak ada implementasi yang 100% sama. 2. Testing Environment Untuk menjalankan kode program dalam modul, kita menggunakan JavaScript console yang ada di browser Mozilla Firefox. Kebanyakan kode kita tulis sebagai embedded script dalam blok <script> </script> dalam file html kecuali jika ada keterangan bahwa kode tersebut harus ditulis dalam file .js yang terpisah. Berikut ini contoh file html untuk embedded script. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Contoh</title> </head> <body> <script> //kode </script> </body> </html> Berikut ini contoh file html untuk memuat file .js eksternal. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Contoh</title> </head> <body> <script src="file_js.js"></script> <script> //kode lain </script> </body> </html> Dalam dasar teori ini tidak dijelaskan tentang pemrograman, karena semua konsep dasar konsep dasar pemrograman pada hakekatnya adalah sama dan mengacu pada paradigmanya, untuk materi tentang dasar-dasar pemrograman seperti perulangan, percabangan, fungsi dan lain-lain sudah dijelaskan pada bagian pemrograman PHP, 95 bahasa pemrograman JavaScript dan PHP memiliki kesamaan paradigma pemrograman. Akan tetapi pada latihan-latihan akan diimplementasikan tentang dasar-dasar pemrograman web menggunakan bahasa pemrograman javascript. D. Aktifitas Pembelajaran 1. Pengenalan Pemrograman JavaScript Dalam kegiatan ini peserta diklat akan menerapkan dasar pemrograman javascript pada dokumen web. Bentuk kelompok diskusi setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan teliti. 1. Buat folder dalam derektori C:\xampp\htdocs dengan Nama topik2-5. 2. Tuliskan kode program dibawah ini kemudian tampilkan hasilnya pada web browser dan analisis hasilnya. 2.1. Latihan 2-33 Dasar Pemrograman JavaScript C:xampp/htdocs/topik2-4/latihan2-33.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 96 <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Variabel, Array dan Objek dalam JavaScript</title> </head> <body> <scripttype="text/javascript"> console.log('----------- Demo Variabel -------------'); varnama; nama="Iswanul Umam"; varmotor="Harley"; harga=2000000; produk="Japan"; console.log(nama) console.log(motor) console.log(harga) console.log(produk) console.log('----------- Demo Array -------------'); varinfo=['Iswanul Umam',21, 'State University of Malang']; console.log(info); console.log('Nama saya : ' +info[0]); console.log('Umur saya : ' +info[1]); console.log('Kampus saua: ' +info[2]); console.log('----------- Demo Objek -------------') varmobil={ merek: 'Honda', asal: 'Japan' }; console.log(mobil); console.log('Nama marek ' +mobil['merek']); 32 33 34 35 console.log('Asal Produksi ' +mobil['asal']); </script> </body> </html> Lakukan langkah-langkah berikut: Buka menu Mozilla Firefox Pilih menu Developer Pilih Web Console(tombol alternatif ctrl + shift + k) Hasil: Ganti script console.log menjadi document.write amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.2. Latihan 2-34 eksternal CSS C:xampp/htdocs/topik2-4/myJS.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 vara=5; functioncheck(n){ console.log('---------'); if(n>0){ console.log(n+ ' lebih dari nol'); }else{ console.log(n+ ' tidak lebih dari nol'); }; if(n>a){ console.log(n+ ' lebih besar dari ' +a); }elseif(n<a){ console.log(n+ ' kurang dari ' +a); }else{ console.log(n+ ' sama dengan ' +a); }; } check(-2); 97 C:xampp/htdocs/topik2-4/latihan2-29.html 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Percabangan dengan File Eksternal</title> </head> <body> <scriptsrc="myJS.js"type="text/javascript"> </script> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.3. Latihan 2-35 Perulangan menggunakan while C:xampp/htdocs/topik2-4/latihan2-30.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Perulangan While</title> </head> <body> <scripttype="text/javascript"> vara=[]; vari=0; while(i<4){ a.push(i) i++; } console.log(a); </script> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.4. Latihan 2-36 Penggunaan Fungsi C:xampp/htdocs/topik2-4/latihan2-31.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 98 <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Fungsi</title> </head> <body> <script type="text/javascript"> Functionn luasLingkaran(r){ Function get_pi(){ return Math.PI*r; } Return 2*get_pi(); } Var result=luasLingkaran(10); 16 17 18 console.log(result); </script> </body> </html> 2.5. Latihan 2-37 Penggunaan Fungsi getElement C:xampp/htdocs/topik2-4/latihan2-32.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Fungsi getElement</title> </head> <body> <pid="intro">Halo Dunia!</p> <p>Ini contoh mendemonstrasikan <b>getElementById</b> method!</p> <pid="demo"></p> <script type="text/javascript"> var myElement=document.getElementById("intro"); document.getElementById("demo").innerHTML= "Teks dari paragraf intro adalah "+myElement.innerHTML; </script> </body> </html> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2.6. Latihan 2-38 Pengunaan Fungsi built-in date C:xampp/htdocs/topik2-4/latihan2-33.html 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Fungsi bulit-in Date</title> </head> <body> <p id="demo"></p> <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script> </body> </html> 3. Komunikasikan hasil praktikum pada langkah 2 dalam kelompok dan buatlah kesimpulan. 4. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor. 2. Pengenalan Event dan Objek Window Bacalah seluruh langkah dibawah ini kemudian lakukan dengan teliti. 99 1. Gunakan folder C:\xampp\htdocs\topik2-5 untuk menyimpan file latihan. 2. Tuliskan kode program dibawah ini kemudian tampilkan hasilnya pada web browser dan analisis hasilnya 2.1. Latihan 2-39 Menampilkan alert C:xampp/htdocs/topik2-4/latihan2-39.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 2.2. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2.3. <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Alert</title> </head> <body> <p>Klik tombol untuk menampilkan kotak alert:</p> <button onclick="myFunction()">Coba tekan</button> <script type="text/javascript"> Function myFunction(){ alert("Halo, saya kotak alert!"); } </script> </body> </html> Latihan 2-40 menampilkan jendela konfirmasi C:xampp/htdocs/topik2-4/latihan2-35.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Confirm</title> </head> <body> <p>Klik tombol untuk menampilkan kotak confirm.</p> <button onclick="myFunction()">Coba tekan!</button> <p id="demo"></p> <script type="text/javascript"> function myFunction(){ var x; if(confirm("Tekan tombol!")==true){ x="Kamu menekan OK!"; }else{ x="Kamu menekan Cancel!"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html> Latihan 2-41 mendemonstrasikan kotak prompt C:xampp/htdocs/topik2-4/latihan2-36.html 1 100 <!DOCTYPE html> 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <head> <meta charset="utf-8"> <title>Promt</title> </head> <body> <p>Klik tombol untuk mendemonstrasikan kotak prompt.</p> <button onclick="myFunction()">Coba tekan!</button> <p id="demo"></p> <script type="text/javascript"> function myFunction(){ var person=prompt("Masukan nama anda","Nama anda"); if(person!=null){ document.getElementById("demo").innerHTML= "Hello "+person+"! Bagaimana kabar anda?"; } } </script> </body> </html> 3. Amati setiap kode program diatas, analisis hasilnya dan buatlah kesimpulan! 4. Komunikasikan hasil praktikum pada langkah 3 dalam kelompok dan buatlah kesimpulan!. 5. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor!. E. Latihan Soal Buatlah folder dengan nama studi-kasus2-4 untuk menyimpan file studi kasus dibawah ini. 1. Buatlah sebuah program kalkulator dengan javascript yang melakukan operasi penambahan, pengurangan, pembagian dan perkalian dua bilangan. Bilangan di inputkan melalui form, dan hasil akan tertampil pada objek window alert ketika di klik tombol hitung! F. Rangkuman JavaScript adalah bahasa pemograman web yang bersifat Client-Side Programming Language. Client-Side Programming Languageadalah tipe bahasa pemograman yang pemrosesannya dilakukan oleh client.Jenis bahasa pemograman Client-Side berbeda dengan bahasa pemograman Server Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di sisi server.Untuk menjalankan JavaScript, kita hanya 101 membutuhkan aplikasi text editor, dan web browser.JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web server. JavaScript adalah bahasa pemrograman yang dibuat mengikuti spesifikasi standar yang disebut ECMA Script dan saat ini versi termodern dari ECMA Script adalah versi 5. G. KUNCI JAWABAN 1. Program Kalkulator 102 H. Umpan Balik dan Tindak Lanjut 1. Apakah saudara memahami tentang dasar-dasar permograman javascript? 2. Apakah sudara sudah mampu menjelankan semua latihan-latihan dengan benar? 3. Apakah saudara memahami tentang event, objek windows pada javascript? 4. Apakah saudara mempu memahami perbedaan confirm, alert dan prompt pada javascript? 5. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Mengenal Dasar Pemrograman JavaScript” ini, silahkan mengisi tabel 8 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 8. Tindak Lanjut IPK Hasil yang didapat Rencana Tindak Lanjut 103 104 105 106 Membuat Koneksi Database MySQL A. Tujuan Pembelajaran 1. Melalui praktikum peserta diklat dapat membuat basis data MySQL menggunakan fitur-fitur pada PhpMyAdmin 2. Melalui praktikum peserta diklat dapat membuat koneksi database dengan ekstensi MySQLi B. Indikator Pencapaian Kompetensi 1. Membuat basis data MySQL menggunakan fitur-fitur pada PhpMyAdmin. 2. Membuat koneksi basis data dengan ekstensi MySQLi C. Uraian Materi 1. Pengertian MySQL MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system) atau DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (L), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan L. MySQL adalah sebuah implementasi dari sistem manajemen basis data relasional (RDBMS) yang didistribusikan secara gratis dibawah lisensi L (General Public License). Setiap pengguna dapat secara bebas menggunakan MySQL, namun dengan batasan perangkat lunak tersebut tidak boleh dijadikan produk turunan yang bersifat komersial. MySQL sebenarnya merupakan turunan salah satu konsep utama dalam basis data yang telah ada sebelumnya; SQL (Structured Query Language). SQL adalah sebuah konsep pengoperasian basis data, terutama untuk pemilihan atau seleksi dan pemasukan data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis. Kehandalan suatu sistem basis data (DBMS) dapat diketahui dari Cara kerja pengoptimasiannya dalam melakukan proses perintah-perintah SQL yang dibuat oleh pengguna maupun program-program aplikasi yang 107 memanfaatkannya. MySQL mendukung operasi basis data transaksional maupun operasi basis data non-transaksional. Pada modus operasi nontransaksional, MySQL dapat dikatakan unggul dalam hal unjuk kerja dibandingkan perangkat lunak basis data kompetitor lainnya. Namun pada modus non-transaksional tidak ada jaminan atas reliabilitas terhadap data yang tersimpan, karenanya modus non-transaksional hanya cocok untuk jenis aplikasi yang tidak membutuhkan reliabilitas data seperti aplikasi blogging berbasis web (wordpress), CMS, dan sejenisnya. Untuk kebutuhan sistem yang ditujukan untuk bisnis sangat disarankan untuk menggunakan modus basis data transaksional, hanya saja sebagai konsekuensinya unjuk kerja MySQL pada modus transaksional tidak secepat unjuk kerja pada modus non-transaksional. 2. PhpMyAdmin PhpMyAdmin merupakan sebuah database menajemen berbasis web, phpMyAdmin merupakan perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui (World Wide Web). phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain. Pada diklat ini kita akan menggunakan dukungan phpMyAdmin untuk mengoperasikan basis data MySQL. 3. Koneksi MySQL pada PHP Untuk melakukan koneksi database MySQL, PHP 5 menyediakan tiga fungsi untuk melakukan koneksi, yaitu: Ekstensi MySQL Ekstensi MySQLi (“i” singkatan improved) PDO (PHP Data Objects) Pada versi sebelumnya PHP menggunakan ekstensi MySQL, namun ekstensi tersebut sekarang sudah ditinggalkan karena terdapat kekurangan dan fitur-fitur banyak diperbaiki pada ekstensi MySQLi atau PDO. 108 MySQLi adalah ekstensi yang paling sering digunakan untuk melakukan koneksi database MySQL karena script tergolong mudah dan simpel, akan tetapi MySQLi memiliki kekurangan yaitu hanya bisa bekerja dengan database MySQL saja, berbeda dengan PDO yang bisa bekerja dengan 12 sistem basis data yang berbeda. Pada modul ini akan diberikan contoh bagaimana membuat koneksi dengan database MySQL dengan ekstensi MySQLi. D. Aktifitas Pembelajaran: Membuat database melalui PhpMyAdmin Dalam kegiatan ini peserta diklat akan membuat basis data pada MySQL menggunakan fitur PhpMyAdmin dan membuat koneksi basis data dengan ekstensi MySQLi menggunakan script PHP. Bentuk kelompok setiap kelompok terdiri dari 3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan teliti. 1. Aktifkan apache server dan database menggunakan XAMPP control. 2. Buka browser dan masukan alamat url: http://localhost/dashboard/ 3. Klik menu phpMyAdmin Pilih menu database. 4. Buat database dengan nama database_demo. 5. Buat folder dalam direktori C:\xampp\htdocs dengan nama topik3-1, 6. Tulis kode dibawah ini dan simpan dengan nama latihan3-1.php dan simpan dalam folder topik3-1 C:xampp/htdocs/topik3-1/latihan3-1.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php $servername="localhost"; $username="root"; $password=""; // Membuat koneksi $conn=new mysqli($servername,$username,$password); // Mengecek koneksi if($conn->connect_error){ die("Koneksi gagal: ".$conn->connect_error); } echo"Koneksi berhasil!"; $conn->close(); ?> 7. Jalankan melalui web browser. Amati dan analisa hasilnya. 109 8. Tulis kode dibawah ini dan simpan dengan nama latihan3-2.php dalam folder topik3-1 yang telah kita buat tadi. Lalu jalankan melalui browser! C:xampp/htdocs/topik3-1/latihan3-2.php 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php $servername="localhost"; $username="root"; $password=""; // Membuat koneksi $conn= mysqli_connect($servername,$username,$password); // Mengecek koneksi if(!$conn){ die("Koneksi gagal: ". mysqli_connect_error()); } echo"Koneksi berhasil!"; mysqli_close($conn); ?> 9. Komunikasikan hasil praktikum dalam kelompok dan buatlah kesimpulan. 10. Buatlah Laporan dan komunikasikan hasil dan pembahasan dengan tutor. E. Latihan Soal 1. Rubahlah isi string dalam variabel $servername, $username dan $password dengan nilai yang berbeda pada latihan diatas, Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 2. Buat database dengan nama : database_pegawai, dan tabel dengan nama BioData (NIP, Nama, Alamat, TglLahir, pendidikan, foto,dll) seperti dalam kegiatan pembelajaran 7. F. Rangkuman MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system). MySQL adalah sebuah implementasi dari sistem manajemen basisdata relasional (RDBMS) yang didistribusikan secara gratis dibawah lisensi L (General Public License). PhpMyAdmin merupakan sebuan database menajemen berbasis web, phpMyAdmin merupakan perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui (World Wide Web). PhpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain. Untuk melakukan koneksi database MySQL, PHP 5 menyediakan tiga fungsi 110 untuk melakukan koneksi, yaitu: 1) Ekstensi MySQL 2) Ekstensi MySQLi (“i” singkatan improved) 3) PDO (PHP Data Objects) G. Umpan Balik dan Tindak Lanjut 1. Apakah saudara sudah bisa mengelola database MySQL melalui web database menejemen (PhpMyAdmin)? 2. Apakah saudara sudah bisa melakukan koneksi database MySQL dengan PHP? 3. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Membuat Koneksi Database MySQL” ini, silahkan mengisi tabel 9 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 9. Tindak Lanjut IPK Hasil yang didapat Rencana Tindak Lanjut 111 112 113 114 Operasi Database A. Tujuan Pembelajaran Melalui praktikum peserta didik dapat menerapkan fungsi-fungsi pengelolaan basis data seperti membuat tabel, memasukkan, mengambil, memperbarui dan menghapus data menggunakan script PHP. B. Indikator Pencapaian Kompetensi Menerapkan fungsi-fungsi pengelolaan basis data menggunakan script PHP. C. Uraian Materi 1. Objek Database a) Basis Data (database): Basis data adalah kumpulan data yang saling berhubungan dan diorganisasikan sedemikian rupa untuk keperluan tertentu. b) Tabel: Tabel adalah himpunan elemen-elemen data yang diorganisasikan menggunakan model kolom vertikal dan baris horizontal. Tabel juga merupakan ekuivalensi dari sebuah entitas dalam Entity Relationship Diagram (ERD). c) Field dan Record. Sebuah tabel dapat terdiri dari satu atau beberapa field (atau kolom) dan baris (atau row) d) Primary Key. Primary key atau unique key adalah suatu nilai di basis data yang digunakan untuk mengidentifikasi keunikan baris-baris di dalam tabel. e) Relationship. Relationship adalah asosiasi antara beberapa entitas (atau tabel). Relasi antar tabel bertujuan untuk mendefinisikan keterhubungan satu tabel dengan tabel lainnya. 2. SQL (Structure Query Language) SQL (atau query language) adalah sebuah bahasa yang digunakan untuk melakukan request informasi dari basis data. Bahasa ini dikembangkan oleh DBMS. Konstruksi SQL berbentuk atas kombinasi relational-algebra dan 115 relational-calculus. SQL terdiri dari beberapa komponen, dua diantaranya yang sangat fundamental adalah DDL (Data Definition Language) dan DML (Data Manipulation Language). 3. DLL (Data Definition Language) DLL menyediakan perintah-perintah untuk mendefinisikan, memodifikasi dan menghapus skema relasi, misalnya tabel, view, prosedur dan fungsi. Contoh perintah DLL adalah: CREATE, ALTER, DROP 4. DML (Data Manipulation Language) DML Menyediakan perintah-perintah untuk manambah, memodifikasi, menghapus, dan mengambil data dari database. Contoh perintah DML: INSERT, SELECT, DELETE, UPDATE. D. Aktifitas Pembelajaran 1. Membuat Database Kegiatan Pembelajaran 2 mendefinisikan database dan memanipulasi data pada database melalui pemrograman PHP. Buat folder dalam derektori C:\xampp\htdocs dengan nama topik3-2, kemudian tulis kode dibawah ini dan simpan dengan nama latihan3-3.php dalam folder topik3-2 yang telah anda buat tadi. Lalu akses jalankan melalui browser! C:xampp/htdocs/topik3-2/latihan3-3.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php $servername="localhost"; $username="root"; $password=""; $conn= mysqli_connect($servername,$username,$password); if(!$conn){ die("Koneksi gagal: ". mysqli_connect_error()); } // Create database $sql="CREATE DATABASE db_diklat"; if(mysqli_query($conn,$sql)){ echo"Database berhasil dicipkatan"; }else{ echo"Error saat menciptakan database: ". mysqli_error($conn); } mysqli_close($conn); ?> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 116 2. Membuat Tabel Tulis kode dibawah ini dan simpan dengan nama latihan3-4.php dalam folder topik3-1 yang telah kita buat tadi. Lalu jalankan melalui browser! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 C:xampp/htdocs/topik3-2/latihan3-4.php <?php $servername="localhost"; $username="root"; $password=""; $dbname="db_diklat"; // Membuat koneksi $conn= mysqli_connect($servername,$username,$password,$dbname); // Mengecek koneksi if(!$conn){ die("Koneksi gagal: ". mysqli_connect_error()); } // sql to create table $sql="CREATE TABLE siswa ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, nama_awal VARCHAR(30) NOT NULL, nama_akhir VARCHAR(30) NOT NULL, email VARCHAR(50) )"; if(mysqli_query($conn,$sql)){ echo"Tabel siswa berhasil diciptakan"; }else{ echo"Error saat membuat tabel: ". mysqli_error($conn); } mysqli_close($conn); ?> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 3. Memasukan Data Tulis kode dibawah ini dan simpan dengan nama latihan3-5.php dalam folder topik3-2 yang telah kita buat tadi. Lalu jalankan melalui browser! C:xampp/htdocs/topik3-2/latihan3-5.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <?php $servername="localhost"; $username="root"; $password=""; $dbname="db_diklat"; // Memciptakan koneksi $conn= mysqli_connect($servername,$username,$password,$dbname); // Mengecek koneksi if(!$conn){ die("Gagal melakukan koneksi: ". mysqli_connect_error()); } $sql="INSERT INTO siswa (nama_awal, nama_akhir, email) VALUES ('Iswanul', 'Umam', '[email protected]')"; if(mysqli_query($conn,$sql)){ echo"Data baru berhasil dimasukan"; }else{ echo"Error: ".$sql."<br>". mysqli_error($conn); } 117 20 21 mysqli_close($conn); ?> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan, Kemudian masukanlah 5 data lagi, nama dan email sesuai keinginan anda! 4. Menyeleksi Data Tulis kode dibawah ini dan simpan dengan nama latihan3-6.php dalam folder topik3-2 yang telah kita buat tadi. Lalu jalankan melalui browser! C:xampp/htdocs/topik3-2/latihan3-6.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <?php $servername="localhost"; $username="root"; $password=""; $dbname="db_diklat"; // Menciptakan koneksi $conn= mysqli_connect($servername,$username,$password,$dbname); // Mengecek koneksi if(!$conn){ die("Koneksi gagal: ". mysqli_connect_error()); } $sql="SELECT id, nama_awal, nama_akhir FROM siswa"; $result= mysqli_query($conn,$sql); if(mysqli_num_rows($result)>0){ // output data setiap baris while($row= mysqli_fetch_assoc($result)){ echo"id: ".$row["id"]." Nama: ".$row["nama_akhir"]."<br>"; } }else{ echo"Database kosong"; } mysqli_close($conn); ?> ".$row["nama_awal"]." Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 5. Mengupdate Data Tulis kode dibawah ini dan simpan dengan nama latihan3-7.php dalam folder topik3-2 yang telah kita buat tadi. Lalu jalankan melalui browser! C:xampp/htdocs/topik3-2/latihan3-7.php 1 2 3 4 5 6 7 8 9 10 118 <?php $servername="localhost"; $username="root"; $password=""; $dbname="db_diklat"; // Menciptakan koneksi $conn= mysqli_connect($servername,$username,$password,$dbname); // Megnecek koneksi if(!$conn){ die("Koneksi gagal: ". mysqli_connect_error()); 11 12 13 14 15 16 17 18 19 20 } $sql="UPDATE siswa SET nama_akhir='Ramli' WHERE id=2"; if(mysqli_query($conn,$sql)){ echo"Data berhasil di update"; }else{ echo"Error saat meng-update data: ". mysqli_error($conn); } mysqli_close($conn); ?> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! 6. Menghapus Data Tulis kode dibawah ini dan simpan dengan nama latihan3-8.php dalam folder topik3-2 yang telah kita buat tadi. Lalu jalankan melalui browser! C:xampp/htdocs/topik3-2/latihan3-8.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?php $servername="localhost"; $username="root"; $password=""; $dbname="db_diklat"; // Mencipkatan koneksi $conn= mysqli_connect($servername,$username,$password,$dbname); // mengecek koneksi if(!$conn){ die("Koneksi gagal: ". mysqli_connect_error()); } // sql untuk menghapus data $sql="DELETE FROM siswa WHERE id=3"; if(mysqli_query($conn,$sql)){ echo"Data berhasil dihapus"; }else{ echo"Erros saat menghapus data: ". mysqli_error($conn); } mysqli_close($conn); ?> Amati hasil dari kode tersebut, analisa hasilnya dan simpulkan! E. Latihan Soal 1. Buatlah folder dengan Nama studi-kasus3-2 untuk menyimpan file studi kasus dibawah ini. 2. Dengan basis data yang telah dibuat pada studi kasus kegiatan belajar 9 (database_pegawai) buat tabel dengan nama BioData dengan atribut: NIP, Nama, Alamat, TglLahir, pendidikan, foto, dll (Kegiatan pembelajaran 7) 119 3. Tampilkanlah data dalam database yang telah anda buat tadi dalam browser, tampilan berupa tabel yang dibuat melalui tag HTML. Desainlah semenarik mungkin tabel tersebut. F. Rangkuman Basis data adalah kumpulan data yang saling berhubungan dan diorganisasikan sedemikian rupa untuk keperluan tertentu. Tabel adalah himpunan elemenelemen data yang diorganisasikan menggunakan model kolom vertikal dan baris horizontal. Tabel juga merupakan ekuivalensi dari sebuah entitas dalam Entity RelationshipDiagram (ERD). Sebuah tabel dapat terdiri dari satu atau beberapa field (atau kolom) dan baris (atau row). Primary key atau unique key adalah suatu nilai di basis data yang digunakan untuk mengidentifikasi keunikan baris-baris di dalam tabel. Relationship adalah asosiasi antara beberapa entitas (atau tabel). Relasi antar tabel bertujuan untuk mendefinisikan keterhubungan satu tabel dengan tabel lainnya. SQL (atau query langeage) adalah sebuah bahasa yang digunakan untuk me-request informasi dari basisdata. Bahasa ini dikembangkan oleh DBSM. Konstruksi SQL berbentuk atas kombinasi relational-algebra dan relational-calculus.SQL terdiri dari beberapa komponan, dua diantaranya yang sangat fundamental adalah DDL (Data Definition Language) dan DML (Data Manipulation Language).DLL menyediakan perintah-perintah untuk mendefinisikan, memodifikasi dan menghapus skema relasi, misalnya tabel, view, prosedur dan fungsi.Contoh perintah DLL adalah: CREATE, ALTER, DROP. DML Menyediakan perintah-perintah untuk manambah, memodifikasi, menghapus, dan mengambil data dati database.Contoh perintah DML: INSERT, SELECT, DELETE, UPDATE. G. Umpan Balik dan Tindak Lanjut 1. Apakah saudara mampu membuat database di MySQL melalui kode PHP? 2. Apakah saudara mengetahui cara meciptakan tabel pada database? 3. Apakah saudara bisa memasukkan, mengambil, mengupdate dan menghapus data pada database? 120 4. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Operasi Database” ini, silahkan mengisi tabel 10 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 10. Tindak Lanjut IPK Hasil yang didapat Rencana Tindak Lanjut 121 122 MEMBANGUN FRONT END WEB MENGGUNAKAN FRAMEWORK BOOTSTRAP A. Tujuan Pembelajaran Melalui praktikum peserta diklat dapat menerapkan Framework Bootstrap dalam membangun front-end web application. B. Indikator Pencapaian Kompetensi Menerapkan Framework Bootstrap dalam membangun front-end web application. C. Uraian Materi 1. Definisi Front-End Web Front-End web adalah bagian utama dari sebuah web site yang berinteraksi langsung dengan pengguna atau pengunjung situs. Segala sesuatu yang dilihat ketika melakukan navigasi dalam sebuah halaman web, baik dari font, warna, menu, dan segala yang menyangkut aspek desain yang nantinya menjadi user interface dari aplikasi web adalah hasil penggabungan dari fungsi HTML, CSS, dan JavaScript dikontrol oleh browser pada komputer. Front-end developer harus menguasai tiga bahasa utama: HTML, CSS, dan Javascript. Selain itu front-end developer juga harus terbiasa menggunakan framework seperti Bootstrap, Foundation, Backbone, AngularJS, dan EmberJS untuk membantu membuat layout tetap sempurna ketika dibuka menggunakan perangkat apapun, juga penggunakan library seperti jQuery dan LESS, sehingga proses pengembangan menjadi lebih mudah dan efisien. 2. Desain Web Desain web merupakan bagian terpenting dalam pembangunan sebuah halaman web, dalam desain web yang baik, unsur estetika yang harus diperhatikan adalah warna, tata letak, dan layout. Ketiga unsur tersebut dapat diatur menggunakan CSS, seperti mengatur warna background, warna huruf, bentuk menu, letak menu dan lain sebagainya. Dalam membangun 123 sebuah web yang bagus, ada beberapa prinsip-prinsip desain yang harus diperhatikan: Proximity Prinsip, yang pertama ini berkaitan dengan kelengkapan dari sebuah field. Ini menjadi hal yang wajib dimiliki website. Kelengkapan akan menentukan bagaimana tampilan website mampu membuat pengunjung tertarik dan semakin nyaman berkunjung. Clarity, Layaknya sebuah toko konvensional, desain website juga mengusung hal yang sama. Desain website sebaiknya mampu menyampaikan pesan yang tidak perlu disampaikan melalui kata-kata. Clarity ini berarti sebuah website harus mempunyai kejelasan untuk apa website tersebut dibuat. Oleh karena itu, ada perbedaan khusus antara toko online dengan website yang menyediakan berita. Alignment Prinsip, yang satu ini memang tidak berkaitan langsung dengan desain website. Akan tetapi, pengaruh terhadap sebuah desain website sangat kuat. Aligment adalah kerapian dalam tulisan. Tulisan yang rapi akan mampu menarik minat pengunjung sehingga diharapkan pengunjung betah membaca konten yang ada di sebuah website. Contrast, Seperti awal tujuan pembuatan website, menarik menjadi kunci utama. Dengan membuat desain website yang menarik, pengunjung akan merasa nyaman membaca serta menjelajah website. Dalam hal ini, kenyamanan bisa ditunjukkan dengan menerapkan prinsip contrast. Ini berhubungan dengan kombinasi warna yang dipakai oleh seorang desainer website. Inilah yang menjadi alasan kenapa pemilihan warna sangat penting dalam proses mendesain sebuah website. Consistency, Ini adalah prinsip yang terakhir yang tak kalah penting dengan empat prinsip sebelumya. Prinsip ini berarti sebuah website harus mengusung kesan konsisten dalam tema yang diangkat. Selain membuat website menarik, consistency akan mempermudah pebisnis online dalam hal branding juga. 124 3. Bootstrap Web Framework Bootstrap adalah sebuah framework HTML, CSS dan JavaScript yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersamasama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya. Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah. 4. Cara Menggunakan Bootstrap Untuk menggunakan Boostrap pada aplikasi kita, tentunya kita harus memiliki Bootstrap terlebih dahulu. Buka website resmi Bootstrap, http://getbootstrap.com/ dan klik tombol “Download Bootstrap” untuk memulai download Bootstrap. Atau anda bisa meng-copy file bootstrap yang sudah disediakan dalam CD modul ini. Selesai download, anda akan memiliki file bootstrap.zip yang berisi file-file yang dibutuhkan untuk menggunakan Bootstrap. Ekstrak file tersebut sehingga sekarang kita memiliki file seperti berikut: isi dari masing-masing direktori yaitu: 1. Direktori “css” memiliki enam buah file di dalamnya, yaitu: bootstrap.css bootstrap.min.css bootstrap.min.css.map bootstrap-theme.css bootstrap-theme.css.map bootstrap-theme.min.css 2. Direktori “fonts” memiliki lima buah file di dalamnya, yaitu: 125 glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff glyphicons-halflings-regular.woff2 3. Direktori “js” memiliki tiga buah file di dalamnya, yaitu: bootstrap.js bootstrap.min.js npm.js D. Aktifitas Pembelajaran 1. Mendesain Halaman Home, Carousel dan Menu Buat folder dalam direktori C:\xampp\htdocs dengan nama topik4-1, copy file bootstrap.rar yang ada dalam CD kedalam forder topik4-1 dan ekstrak file, copy juga folder image dan style yang ada dalam CD paste satu folder dengan file bootstrap. Sehinga diperoleh file seperti gambar dibawah ini didalam folder topik4-1. kemudian tulis kode dibawah ini dan simpan dengan nama home.html dan dalam folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan melalui browser! C:xampp/htdocs/topik4-1/home.html 1 2 3 4 5 126 <!DOCTYPE html> <html lang="en"> <head> <title>Nama Proyek</title> <meta charset="utf-8"> 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 35 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link href="style/carousel.css" rel="stylesheet"> <style> .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 100%; margin: auto; } </style> </head> <body> <!-- CAROUSEL --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"role="listbox"> <div class="item active"> <img src="images/gambar1.jpg" alt="Chania"> <div class="carousel-caption"> <h2>Judul Gambar 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p> </div> </div> <div class="item"> <img src="images/gambar2.jpg" alt="Flower"> <div class="carousel-caption"> <h2>Judul Gambar 2</h2> <p>Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="item"> <img src="images/gambar3.jpg" alt="Flower"> <div class="carousel-caption"> <h2>Judul Gambar 3</h2> <p>Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p> </div> </div> <!-- Left and right controls --> <a class="left carousel-control"href="#myCarousel"role="button"data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control"href="#myCarousel"role="button"dataslide="next"> <span class="glyphicon glyphicon-chevron-right"aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div><!-- carousel-inner --> </div><!-- AKHIR SCRIPT CAROUSEL --> <div class="container"> <div> <br> 127 75 76 77 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed"data-toggle="collapse"datatarget="#navbar"aria-expanded="false"aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Nama Proyek</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profil</a></li> <li><a href="#">Kontak</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" ariahaspopup="true" aria-expanded="false">Menu lain <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Galery</a></li> <li><a href="#">Video</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div><!--/.container-fluid --> </nav> </div> <div class="row"> <div class="col-sm-8 blog-main"> <div> <h2>Blog post</h2> <p>December 23, 2015 by <a href="#">Iswanul Umam</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div><!-- /.blog-post --> <nav> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav> </div><!-- /.blog-main --> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">Januari 2015</a></li> <li><a href="#">Februari 2015</a></li> <li><a href="#">Maret 2015</a></li> <li><a href="#">April 2015</a></li> 128 <li><a href="#">Mei 2015</a></li> <li><a href="#">Juni 2015</a></li> <li><a href="#">Juli 2015</a></li> <li><a href="#">Augustus 2015</a></li> <li><a href="#">September 2015</a></li> <li><a href="#">Oktober 2015</a></li> <li><a href="#">November 2015</a></li> <li><a href="#">Desember 2015</a></li> </ol> </div> <div> <h4>Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ol> </div> </div><!-- /.blog-sidebar --> </div><!-- /.row --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> Jalankan pada browser dan tampilkan hasilnya. 2. Mendesain Dashboard Admin kemudian tulis kode dibawah ini dan simpan dengan nama dashboard.html, simpan dalam folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan melalui browser! C:xampp/htdocs/topik4-1/dashboard.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dashboard Admin</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link href="style/dashboard.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed"datatoggle="collapse"data-target="#navbar"aria-expanded="false"ariacontrols="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 129 23 24 25 26 27 28 29 30 31 32 33 34 35 35 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 7 <a class="navbar-brand"href="#">Nama Proyek</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Setting</a></li> <li><a href="#">Logout</a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <liclass="active"><ahref="#">Artikel<spanclass="sronly">(current)</span></a></li> <li><ahref="#">Kontak</a></li> <li><ahref="#">Pesan</a></li> </ul> <ulclass="nav nav-sidebar"> <li><ahref="">User</a></li> <li><ahref="">Setting</a></li> </ul> </div> <divclass="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <h1class="page-header">Dashboard</h1> <h2class="sub-header">Artikel</h2> <buttontype="submit"class="btn btn-success">Buat baru</button> <divclass="table-responsive"> <tableclass="table table-striped"> <thead> <tr> <thwidth="5%">#</th> <thwidth="40%">Judul</th> <thwidth="45%">Konten</th> <thwidth="5%">Aksi</th> <thwidth="5%"></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Lorem</td> <td>ipsum</td> <td><buttontype="submit"class="btn btn-info">Update</button></td> <td><buttontype="submit"class="btn btn-danger">Hapus</button></td> </tr> <tr> </tbody> </table> </div> </div> </div> </div> </body> </html> Jalankan pada browser dan tampilkan hasilnya. 130 3. Mendesain Form Artikel Tulis kode dibawah ini dan simpan dengan nama form_artikel.html di folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan melalui browser! C:xampp/htdocs/topik4-1/form_artikel.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 35 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> <title>Dashboard Admin</title> <!-- Bootstrap core CSS --> <linkrel="stylesheet"href="css/bootstrap.min.css"> <linkhref="style/dashboard.css"rel="stylesheet"> </head> <body> <navclass="navbar navbar-inverse navbar-fixed-top"> <divclass="container-fluid"> <divclass="navbar-header"> <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"datatarget="#navbar"aria-expanded="false"aria-controls="navbar"> <spanclass="sr-only">Toggle navigation</span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <aclass="navbar-brand"href="#">Nama Proyek</a> </div> <divid="navbar"class="navbar-collapse collapse"> <ulclass="nav navbar-nav navbar-right"> <li><ahref="#">Setting</a></li> <li><ahref="#">Logout</a></li> </ul> </div> </div> </nav> <divclass="container-fluid"> <divclass="row"> <divclass="col-sm-3 col-md-2 sidebar"> <ulclass="nav nav-sidebar"> <liclass="active"><ahref="#">Artikel <spanclass="sronly">(current)</span></a></li> <li><ahref="#">Kontak</a></li> <li><ahref="#">Pesan</a></li> </ul> <ulclass="nav nav-sidebar"> <li><ahref="">User</a></li> <li><ahref="">Setting</a></li> </ul> </div> <divclass="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <h1class="page-header">Dashboard</h1> <h2class="sub-header">Terbitkan Artikel</h2> <form> <divclass="form-group"> 131 52 53 55 56 57 58 59 60 61 62 63 64 65 <label>Judul Artikel</label> <inputtype="text"class="form-control"placeholder="Judul artikel"> </div> <divclass="form-group"> <label>Konten</label> <textareaclass="form-control"rows="12"></textarea> </div> <buttontype="submit"class="btn btn-primary">Simpan</button> <buttontype="submit"class="btn btn-danger">Cancel</button> </form> </div> </body> </html> Jalankan pada browser dan tampilkan hasilnya. Buat pula form update dengan cara seperti form artikel, bedanya hanya pada button, save as file form artikel, ubah judul “Terbitkan Artikel” Menjadi “Update Artikel” dan ubah button “Simpan” menjadi “update. Simpan dengan nama form_update.html 4. Mendesain Halaman Signin Tulis kode dibawah ini dan simpan dengan nama signin.html, simpan dalam folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan melalui browser! C:xampp/htdocs/topik4-1/signin.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> <title>Signin</title> <!-- Bootstrap core CSS --> <linkrel="stylesheet"href="css/bootstrap.min.css"> <linkhref="style/signin.css"rel="stylesheet"> </head> <body> <divclass="container"> <formclass="form-signin"> <h2class="form-signin-heading">Silahkan masuk</h2> <labelfor="inputEmail"class="sr-only">Alamat Email</label> <inputtype="email"id="inputEmail"class="form-control"placeholder="Alamat Email"requiredautofocus> <labelfor="inputPassword"class="sr-only">Password</label> <inputtype="password"id="inputPassword"class="formcontrol"placeholder="Password"required> <divclass="checkbox"> <label> <inputtype="checkbox"value="remember-me"> Ingat saya </label> </div> <buttonclass="btn btn-lg btn-primary btn-block"type="submit">Sign in</button> </form> 132 29 30 </div><!-- /container --> </body> </html> E. Latihan Soal 1. Buatlah sebuah halaman kontak untuk pengunjung website yang didalamnya terdapat sebuah form untuk mengirimkan sebuah pesan oleh pengunjung website kedalam admin web. Desainlah sesuai dengan tema pada latihan, anda bisa memanfaatkan kode-kode yang ada pada latihan! Simpan dengan nama kontak.html dalam folder topik4-1 2. Buatlah sebuah antarmuka pada dashboard admin untuk menampilkan pesan yang dikirim melalui halaman kontak. Anda bisa memodifikasi halaman dashboard artikel. 3. Simpan dengan nama pesan.html dalam folder topik4-1 F. Rangkuman Front-End web adalah bagian utama dari sebuah web site yang berinteraksi langsung dengan pengguna atau pengunjung situs. Segala sesuatu yang dilihat ketika melakukan navigasi dalam sebuah halaman web, baik dari font, warna, menu, dan segala yang menyangkut aspek desain yang nantinya menjadi user interface dari aplikasi web adalah hasil penggabungan dari fungsi HTML, CSS, dan JavaScript dikontrol oleh browser pada komputer. Desain web merupakan bagian terpenting dalam pembangunan sebuah halaman web, dalam desain web yang baik, unsur estetika yang harus deperhatikan adalah warna, tata letak, dan layout. Selain itu juga ada prinsipprinsip yang harus diperhatikan dalam mendesain sebuah web yaitu: Proximity Prinsip, Clarity, Alignment Prinsip Contrast,Consistency G. Umpan Balik dan Tindak Lanjut 1. Apakah saudara mampu mendesain tampilan dan layout web yang bagus dan menarik dalam membangun front-end web application? 2. Apakah saudara memahami apa itu front-end framework Bootstrap? 3. Apakah saudara mengetahui cara menggunakan Bootstrap? 133 4. Apakah saudara mengetahui fitur-fitur dan keunggulan Bootstrap web framework? 5. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Membangun Front-End Web Menggunakan Framework Bootstrap ” ini, silahkan mengisi tabel 11 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 11. Tindak Lanjut IPK 134 Hasil yang didapat Rencana Tindak Lanjut 135 136 137 Membangun Back-end Application dengan konsep MVC menggunakan framework CodeIgniter A. Tujuan Pembelajaran 1. Melalui praktikum peserta diklat dapat membangun Back-end Application pada web dinamis dengan dukungan web framework PHP Code Igniter. 2. Melalui praktikum menerapkan prinsip-prinsip MVC (Model, View, Controller) dalam membangun Back-end Application. B. Indikator Pencapaian Kompetensi 1. Membangun Back-end Application pada web dinamis dengan dukungan web framework PHP Code Igniter. 2. Menerapkan prinsip-prinsip MVC (Model, View, Controller) C. Uraian Materi 1. Definisi Back-End Web Back-End web adalah bagian utama dari sebuah web site yang berfokus pada pemrograman sisi server dan database. Segala fitur yang ada pada web dinamis seperti mengambil data, memasukan data, menghapus data dan mengupdate data adalah dibangun pada bagian back-end development. Back-end developer minimal harus menguasai pemrograman sisi-server seperti PHP, ASP, python atau bisa juga dan menguasai Database Management System (DBSM) seperti MySQL, Oracle, PostgreSQL atau yang lain. Back-end Developer harus memiliki pengetahuan tentang HTML karena untuk membangun sebuat web tidak akan bisa lepas dari yang namanya HTML meskipun fokus pekerjaan bukan pada bagian front-end. Back-end developer minimal harus menguasai pemrograman sisi-server seperti PHP. 2. Codeigniter CodeIgniter merupakan toolkit atau framework untuk membangun aplikasi web dinamis menggunakan PHP. Tujuannya adalah membuat pengembangan proyek menjadi lebih cepat dibandingkan dengan menulis 138 kode dari awal (scratch). CodeIgniter menyediakan kumpulan library untuk tugas-tugas yang sering dilakukan (commonly needed task) dan sangat mudah untuk mengakses library yang tersedia di CodeIgniter. Dengan menggunakan CodeIgniter, pengembangan cukup fokus pada pengembangan projek dan meminimalisir jumlah kode yang akan ditulis, CodeIgniter sendiri dibangun menggunakan konsep Model-View-Controller. Framework adalah desain struktur dasar yang dapat digunakan kembali (reuseable) yang terdiri dari abstract class dan concreate class di pemrograman berorientasi objek. 3. Alur Proses Codeigniter Alur-alur proses codeigniter adalah sebagai berikut: Index.php berfungsi sebagai pengendali awal, menginisialisasi sumber daya utama yang dibutuhkan CodeIgniter. Router memeriksa paket HTTP request untuk menentukan aksi apa yang harus dilakukan oleh sistem. Jika cache tersedia, maka halaman langsung dikirim ke browser, eksekusi sistem yang normal akan dilewati. Security: Sebelum Application Controller dieksekusi, paket HTTP request dan semua data yang dikirimkan pengguna akan disaring terlebih dahulu oleh Security Class. Application Controller menginisialisasi model, library utama, helpers dan semua sumber daya yang dibutuhkan untuk setiap request. Antar muka aplikasi (view) yang sudah disiapkan dikirimkan ke browser. Jika caching diaktifkan, maka view akan disimpan sementara untuk request yang sama berikutnya. 139 3. Arsitektur MVC (Model View Controller) Konsep MVC adalah konsep pemisahan antara logic dengan tampilan dan database. Manfaat konsep ini adalah, membuat coding logic lebih simple, karena sudah di pisah dengan code untuk tampilan dan membuat programmer dapat bekerja secara terpisah dengan designer. Programmer mengerjakan logic, sedangkan designer berkutat dengan design dan tampilan. CodeIgniter menggunakan pendekatan Model-View-Controller, yang bertujuan untuk memisahkan logika dan presentasi. Model Model berhubungan dengan data dan interaksi ke database atau webservice. Model juga merepresentasikan struktur data dari aplikasi yang bisa berupa basis data maupun data lain, misalnya dalam bentuk file teks, file XML maupun web service. Biasanya di dalam model akan berisi class dan fungsi untuk mengambil, melakukan update dan menghapus data website. Sebuah aplikasi web biasanya menggunakan basis data dalam menyimpan data, maka pada bagian Model biasanya akan berhubungan dengan perintah-perintah query SQL. View View berhubungan dengan segala sesuatu yang akan ditampilkan ke end-user. Bisa berupa halaman web, rss, javascript dan lain-lain. Kita harus menghindari adanya logika atau pemrosesan data di view. Di dalam view hanya berisi variabel-variabel yang berisi data yang siap ditampilkan. View dapat dikatakan sebagai halaman website yang dibuat dengan menggunakan HTML dan bantuan CSS atau JavaScript. Di dalam view jangan pernah ada kode untuk melakukan koneksi ke basis data. View hanya dikhususkan untuk menampilkan data-data hasil dari model dan controller Controller Controller bertindak sebagai penghubung data dan view. Didalam Controller inilah terdapat class-class dan fungsi-fungsi yang memproses permintaan dari View ke dalam struktur data di dalam Model. Controller juga tidak boleh berisi kode untuk mengakses basis 140 data karena tugas mengakses data telah diserahkan kepada model. Tugas controller adalah menyediakan berbagai variabel yang akan ditampilkan di view, memanggil model untuk melakukan akses ke basis data, menyediakan penanganan kesalahan/error, mengerjakan proses logika dari aplikasi serta melakukan validasi atau cek terhadap input. D. Aktifitas Pembelajaran 1. Instalasi CodeIgniter 1. Copy file CodeIgniter-3.0.1 yang ada dalam CD kedalam C:\xampp\htdocs 2. Ekstrak file CodeIgniter-3.0.1 3. Rename nama folder Codeigniter-3.0.1 menjadi myproyek 4. Akses direktori tersebut melalui browser dengan URL http://localhost/myproyek/ 5. Jalankan program dan tampilkan hasilnya. 6. Analisis struktur folder CodeIgniter Application Berisi folder dan file yang berkaitan dengan aplikasi yang akan kita buat, kita akan berkerja pada direktori application ini. Berikut merupakan folder dan file yang ada dalam direktori application. 141 System Berisi file-file CodeIgniter dan konfigurasinya, kita tidak akan mengubah apapun dalam folder ini, karena dalam folder ini berisi file-file inti CodeIgniter. User_guide Berisi file dokumentasi atau tutorial CodeIgniter yang dapat diakses melalui browser. Kita dapat mengaksesnya dengan http://localhost/myproyek/user_guide/ 2. Controller dan View Membangun view sama seperti membangun HTML biasa. Folder views berisi file HTML yang telah pertama kali dibuat. File HTML menggunakan tag-tag standard dan merupakan web statis. Kegiatan pembelajaran berikutnya akan memodifikasi file tersebut sehingga menjadi dokumen web dinamis. Langkah-langkah yang dapat dilakukan adalah sebagai berikut : 1. Buka file home.html pada folder topik4-1, ubah beberapa script menjadi seperti dibawah ini, save as dengan nama home.php dalam folder views CodeIgniter. C:xampp/htdocs/myproyek/application/controllers/Web.php 1 2 142 <!DOCTYPE html> <htmllang="en"> <head> 3 4 5 6 7 8 9 10 11 12 13 14 15 <title>Nama Proyek</title> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> <linkrel="stylesheet"href="<?phpecho base_url()?>/assets/css/bootstrap.min.css"> <linkrel="stylesheet"href="<?phpecho base_url()?>/assets/style/carousel.css"> <linkrel="stylesheet"href="<?phpecho base_url()?>/assets/style/blog.css"> <style> .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 100%; margin: auto; } </style> ... kode lanjutan ... <scriptsrc="<?phpecho base_url()?>/assets/js/jquery.min.js"></script> <scriptsrc="<?phpecho base_url()?>/assets/js/bootstrap.min.js"></script> <scriptsrc="<?phpecho base_url()?>/assets/js/docs.min.js"></script> 166 167 168 Petunjuk: Nomor dengan warna merah adalah kode yang perlu diubah. 2. Copy folder assest dalam CD dan paste dalam direktori myproyek yang telah kita buat tadi. Folder assets berisikan file CSS, JavaScript, dan Gambar dari web yang kita bangun. 3. ubah beberapa konfigurasi dalam CodeIgniter Seperti dibawah ini, pada file autoload.php, aktifkan helper url! 143 $autoload['helper'] = array('url'); Tambahkan url pada array helper seperti code diatas. 4. Masuk pada direktori controllers, buat file baru dengan nama Web.php, dan tulis code dibawah ini dalam file tersebut. C:xampp/htdocs/myproyek/application/controllers/Web.php 1 2 3 4 5 6 7 8 9 10 <?php defined('BASEPATH')ORexit('No direct script access allowed'); class Web extends CI_Controller { publicfunction index() { $this->load->view('home'); } } 5. ubah default controller yang awalnya controller welcome menjadi controller web. $route['default_controller'] = 'welcome'; ubahlah menjadi $route['default_controller'] = 'web'; Untuk merubah controller yaitu melalui file routers.php yang ada dalam folder config. 144 6. Jalankan web dengan mengakses myproyek dengan URL http://localhost/myproyek 7. Jalankan program di web browser tampilkan dan analisa hasilnya Petunjuk : Apabila browser menunjukan kesalahan error, berarti terjadi kesalahan pada konfigurasi CodeIgniter Apabila browser sudah menampillkan hasil tapi tampilan masih acak-acakan berarti terjadi kesalahan dalam penulisan kode HTML dan PHP. 3. Model Sebelum membuat class model, kita membuat database terlebih dahulu. Database merupakan media penyimpanan data web yang nantinya akan kita olah. 1. Langkah pertama buatlah database dengan nama myproyek melalui, kemudian buat sebuah tabel artikel dengan field id, judul dan konten. 2. Masukan beberapa data dalam tabel tersebut 3. Masuk ke konfigurasi database pada CodeIgniter dan ubah beberapa konfigurasi menjadi seperti dibawah ini. 145 C:xampp/htdocs/myproyek/application/config/database.php ... kode php sebelum ... 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 $db['default']=array( 'dsn' =>'', 'hostname'=>'localhost', 'username'=>'root', 'password'=>'', 'database'=>'myproyek', 'dbdriver'=>'mysqli', 'dbprefix'=>'', 'pconnect'=>FALSE, 'db_debug'=>(ENVIRONMENT !=='production'), 'cache_on'=>FALSE, 'cachedir'=>'', 'char_set'=>'utf8', 'dbcollat'=>'utf8_general_ci', 'swap_pre'=>'', 'encrypt'=>FALSE, 'compress'=>FALSE, 'stricton'=>FALSE, 'failover'=>array(), 'save_queries'=>TRUE ); 4. Buat file web_model.php dalam folder models, tulis kode dibawah ini dalam file tersebut! C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 7 8 9 10 11 146 <?phpif(! defined('BASEPATH'))exit('No direct script access allowed'); class Web_model extends CI_Model { publicfunction get_data_artikel(){ $query=$this->db->query("SELECT * FROM artikel"); foreach($query->result()as$data){ $artikel[]=$data; } return$artikel; } } 5. Buka Web.php pada controllers, ubah kode menjadi dibawah ini. C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 7 8 9 10 11 12 <?php defined('BASEPATH')ORexit('No direct script access allowed'); class Web extends CI_Controller { publicfunction index() { $this->load->model('web_model'); $data['artikel']=$this->web_model->get_data_artikel(); $this->load->view('home',$data); } } 6. Buka home.php pada folder views, ubah kode menjadi seperti dibawah ini. C:xampp/htdocs/myproyek/application/ 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 ... kode sebelum ... <divclass="col-sm-8 blog-main"> <?phpforeach($artikelas$data_artikel):?> <div> <h2><?phpecho$data_artikel->judul;?></h2> <p><?phpecho$data_artikel->waktu;?> <ahref="#">Iswanul Umam</a></p> <p><?phpecho$data_artikel->konten;?></p> </div><!-- /.blog-post --> <?phpendforeach?> <nav> <ulclass="pager"> <li><ahref="#">Previous</a></li> <li><ahref="#">Next</a></li> </ul> </nav> </div><!-- /.blog-main --> ... kode sesudah ... by 7. Akses web dengan URL http://localhost/myproyek 8. Jalankan program di web browser tampilkan dan analisa hasilnya.. 4. Membangun web dinamis (halaman admin), Langkah-langkah yang dilakukan untuk mebangun web dinamis anatra lain adalah sebagai berikut: 1. Buka file dashboard.html, ubah beberapa kode program menjadi seperti dibawah ini. Simpan dengan nama dashboard.php dalam folder views! C:xampp/htdocs/myproyek/application/ 1 <!DOCTYPE html> 147 2 3 4 5 6 7 8 9 10 11 <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> <title>Dashboard Admin</title> <!-- Bootstrap core CSS --> <linkhref="<?phpecho base_url()?>/assets/css/bootstrap.min.css"rel="stylesheet"> <linkhref="<?phpecho base_url()?>/assets/style/dashboard.css"rel="stylesheet"> </head> <body> ... kode sesudah ... 2. Buat controller Admin.php dalam folder controllers, tulis kode dibawah ini! C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 7 8 9 10 <?php defined('BASEPATH')ORexit('No direct script access allowed'); class Admin extends CI_Controller { publicfunction index(){ $this->load->model('web_model'); $data['artikel']=$this->web_model->get_data_artikel(); $this->load->view('dashboard',$data); } } 4. Buka kembali file dashboard.php, ubah kode seperti dibawah ini, kode ini digunakan untuk menampilkan data yang ada dalam database yang telah disimpan dalam sebuah tipe data array. C:xampp/htdocs/myproyek/application/ 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 50 148 ... kode sebelum ... <divclass="table-responsive"> <tableclass="table table-striped"> <thead> <tr> <thwidth="5%">#</th> <thwidth="20%">Judul</th> <thwidth="60%">Konten</th> <thwidth="5%">Aksi</th> <thwidth="5%"></th> </tr> </thead> <?php$nomer=1;?> <tbody> <?phpforeach($artikelas$data_artikel):?> <tr> <td><?phpecho$nomer;?></td> <td><?phpecho$data_artikel->judul;?></td> <td><?phpecho$data_artikel->konten;?></td> <td><ahref=""class="btn btn- 51 52 53 54 55 56 57 info">Update</a></td> <td><ahref=""class="btn danger">Hapus</a></td> </tr> <tr> <?php$nomer++?> <?phpendforeach?> </tbody> </table> </div> ... kode sesudah ... btn- 5. Akses web dengan URL http://localhost/myproyek/index.php/admin 6. Jalankan program tampilkan dan analisa hasilnya 4. Membangun form tambah artikel pada halaman admin: 1. Buka file form_artikel.html, ubah beberapa kode seperti dibawah ini, simpan dengan nama form_artikel.php dalam folder application views! C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 7 8 9 10 52 53 54 55 56 57 58 59 60 <!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> <title>Dashboard Admin</title> <!-- Bootstrap core CSS --> <linkhref="<?phpecho base_url()?>/assets/css/bootstrap.min.css"rel="stylesheet"> <linkhref="<?phpecho base_url()?>/assets/style/dashboard.css"rel="stylesheet"> </head> ... kode antara ... <formaction="<?phpecho base_url()?>index.php/admin/do_tambah"method="POST"> <divclass="form-group"> <label>Judul Artikel</label> <inputtype="text"name="judul"class="formcontrol"placeholder="Judul artikel"> </div> <divclass="form-group"> <label>Konten</label> <textareaname="konten"class="formcontrol"rows="12"></textarea> </div> <buttontype="submit"class="btn btn-primary">Simpan</button> <buttontype="submit"class="btn btn-danger">Cancel</button> </form> 2. Tambahkan kode seperti dibawah ini dalam class Admin (file Admin.php) 149 3. Jalankan program dan tampilkan serta analisis hasilnya ! 5. Membangun form update artikel pada halaman admin: 1. Buka file form_update.html, ubah beberapa kode seperti dibawah ini, simpan dengan nama form_update.php dalam folder application views! C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 7 8 9 10 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 <!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> <title>Dashboard Admin</title> <!-- Bootstrap core CSS --> <linkhref="<?phpecho base_url()?>/assets/css/bootstrap.min.css"rel="stylesheet"> <linkhref="<?phpecho base_url()?>/assets/style/dashboard.css"rel="stylesheet"> </head> ... kode antara ... <?phpforeach($artikelas$data_artikel):?> <formaction="<?phpecho base_url()?>index.php/admin/do_update"method="POST"> <divclass="form-group"> <inputname="id"type="hidden"class="formcontrol"value="<?phpecho$data_artikel->id;?>"> </div> <divclass="form-group"> <label>Judul Artikel</label> <inputname="judul"type="text"class="formcontrol"placeholder="Judul Artikel"value="<?phpecho$data_artikel>judul;?>"> </div> <divclass="form-group"> <label>Konten</label> <textareaname="konten"class="formcontrol"rows="12"><?phpecho$data_artikel->konten;?></textarea> </div> <label> </label> <buttontype="submit"class="btn btn-info">Update</button> <buttontype="submit"class="btn btn-danger">Cancel</button> </form> <?phpendforeach?> 2. Tambahkan kode seperti dibawah ini dalam class Admin (file Admin.php) C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 150 publicfunction update_artikel($id){ $this->load->model('web_model'); $data['artikel']=$this->web_model->get_for_update($id); $this->load->view('form_update',$data); } 6 7 8 9 10 11 12 13 publicfunction do_update(){ $judul =$_POST['judul']; $konten =$_POST['konten']; $id =$_POST['id']; $this->load->model('web_model'); $this->web_model->update_artikel($judul,$konten,$id); redirect(base_url()."index.php/admin"); } 3. Jalankan program dan tampilkan serta analisis hasilnya ! 6. Membangun perintah untuk hapus artikel 1. Tambahkan kode seperti dibawah ini dalam class Admin (file Admin.php) C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 publicfunction do_hapus($id){ $this->load->model('web_model'); $this->web_model->hapus_artikel($id); redirect(base_url()."index.php/admin"); } 2. Jalankan program dan tampilkan serta analisis hasilnya ! E. Latihan Soal Rancanglah sebuah halaman kontak yang nantinya berfungsi untuk pengiriman pesan oleh pengunjung web kepada admin, pesan dikirim melalui form halaman kontak, dan semua pesan yang dimasukan akan muncul dalam bentuk daftar pada halaman admin! Untuk antarmuka dari halaman kontak dan admin anda dapat menggunakan hasil dari studi kasus pada Kegiatan Pembelajaran pertama. F. Rangkuman Back-End web adalah bagian utama dari sebuah web site yang berfokus pada pemrograman sisi server dan database. Segala fitur yang ada pada web dinamis seperti mengambil data, memasukan data, menghapus data dan mengupdate data adalah dibangun pada bagian back-end development. Seorang back-end developer minimal menguasai pemrograman sisi server seperti PHP dan DBMS seperti MySQL. 151 H. Umpan Balik dan Tindak Lanjut 1. Apakah saudara memahami konsep arsitektur MVC(Model View Controller)? 2. Apakah saudara memahami apa itu back-end Application? 3. Apakah saudara mengetahui cara menggunakan framework CodeIgnniter? 4. Apakah saudara mengetahui fitur-fitur dan keunggulan CodeIgniter web framework? 5. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Membangun Back-End Application dengan Konsep MVC Menggunakan Framework CodeIgniter ” ini, silahkan mengisi tabel 12 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 12. Tindak Lanjut IPK 152 Hasil yang didapat Rencana Tindak Lanjut 153 Membangun Sistem Autentikasi A. Tujuan Pembelajaran Melalui praktikum diharapkan peserta diklat dapat menerapkan sistem autentikasi pada aplikasi atau dokumen web. B. Indikator Pencapaian Kompetensi Menerapkan sistem autentikasi pada aplikasi atau dokumen web C. Uraian Materi Autentikasi adalah proses dalam rangka validasi user pada saat memasuki sistem, nama dan password dari user di cek melalui proses yang mengecek langsung ke daftar mereka yang diberikan hak untuk memasuki sistem tersebut. Autorisasi ini di set up oleh administrator, web master atau pemilik situs (pemegang hak tertinggi atau mereka yang ditunjuk di sistem tersebut). Untuk proses ini masing-masing user akan di cek dari data yang diberikannya seperti nama, password serta hal-hal lainnya yang tidak tertutup kemungkinannya seperti jam penggunaan, lokasi yang diperbolehkan. Autentikasi merupakan suatu langkah untuk menentukan atau menginformasi bahwa seseorang adalah autentik atau asli. Melakukan autentikasi terhadap sebuah objek adalah melakukan konfirmasi terhadap kebenarannya. Sedangkan melakukan autentikasi terhadap seseorang biasanya adalah untuk memverifikasi identitasnya. Pada suatu sistem komputer, autentikasi biasanya terjadi pada saat login atau permintaan akses. Dalam aplikasi Web dibutuhkan mekanisme yang dapat melindungi data dari pengguna yang tidak berhak mengaksesnya, misalnya sebuah situs Web yang berisikan foto-foto keluarga dan hanya dapat diakses sesama anggota keluarga. Mekanisme ini dapat diimplementasikan dalam bentuk sebuah proses login yang biasanya terdiri dari tiga buah tahapan yaitu : identifikasi, Autentikasi dan otorisasi. Proses Autentikasi pada prinsipnya berfungsi sebagai kesempatan pengguna dan pemberi layanan dalam proses pengaksesan resource. Pihak 154 pengguna harus mampu memberikan informasi yang dibutuhkan pemberi layanan untuk berhak mendapatkan resourcenya. Sedang pihak pemberi layanan harus mampu menjamin bahwa pihak yang tidak berhak tidak akan dapat mengakses resource ini. D. Aktifitas Pembelajaran 1. Identifikasi Kasus Pada Kegiatan Pembelajaran yang ke-12, telah dijelaskan bagaimana membangun sebuah halaman admin, akan tetapi aplikasi tersebut masih belum sempurna, karena semua user tanpa terkecuali bisa mengakses halaman tersebut, hal ini menjadi masalah karena seharusnya halaman admin hanya bisa diakses oleh pihak-pihak yang memiliki kewenangan saja. Pada Kegiatan Pembelajaran kali ini kita akan membangun sebuah system autentikasi, yang memberi batasan terhadap user untuk bisa mengakses halaman admin. User yang bisa mengakses halaman admin harus login terlebih dahulu dengan memasukan username dan password. 2. Membangun Sistem authentifikasi 1. Buka file autoload.php pada folder config, aktifkan libraries session! $autoload['libraries'] = array('database', 'session'); 2. Buat tabel pada database myproyek dengan nama akun dengan field id, username dan email. 3. Buat class controller Login, tulis kode dibawah ini dan simpan dengan nama Login.php C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php defined('BASEPATH')ORexit('No direct script access allowed'); class Login extends CI_Controller { publicfunction index(){ $this->load->view('login'); } publicfunction validasi_user(){ $username=$_POST['username']; $password=md5($_POST['password']); $this->load->model('akun_model'); $query=$this->akun_model->verifikasi_data($username,$password); if($query->num_rows()>0){ $data_user=array( 155 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 'username'=>$username, 'logged_in'=>TRUE ); $this->session->set_userdata($data_user); redirect('admin'); }else{ header('location:'. base_url().'index.php/login/gagal_login'); } } publicfunction gagal_login(){ echo"Password atau username salah, Silahkan periksa kembali!"; } } 4. Buka file login.html, tuliskan kode dibawah ini, kemudian simpan dengan nama login.php C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 156 <!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> <title>Signin</title> <!-- Bootstrap core CSS --> <linkhref="<?phpecho base_url()?>/assets/css/bootstrap.min.css"rel="stylesheet"> <linkhref="<?phpecho base_url()?>/assets/style/signin.css"rel="stylesheet"> </head> <body> <divclass="container"> <formclass="form-signin"action="<?phpecho base_url()?>index.php/login/validasi_user"method="POST"> <h2class="form-signin-heading">Silahkan masuk</h2> <labelfor="text"class="sr-only">Alamat Email</label> <inputname="username"type="text"id="username"class="formcontrol"placeholder="Username"requiredautofocus> <labelfor="inputPassword"class="sr-only">Password</label> <inputname="password"type="password"id="inputPassword"class="formcontrol"placeholder="Password"required> <divclass="checkbox"> <label> <inputtype="checkbox"value="remember-me"> Ingat saya </label> </div> <buttonclass="btn btn-lg btn-primary btn-block"type="submit">Sign in</button> </form> </div><!-- /container --> </body> </html> 5. Buat class Akun_model, tuliskan code dibawah ini, simpan dengan nama Akun_model.php C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 7 8 9 10 <?phpif(! defined('BASEPATH'))exit('No direct script allowed'); class Akun_model extends CI_Model { publicfunction verifikasi_data($username,$password){ $this->db->where('username',$username); $this->db->where('password',$password); $query=$this->db->get('akun'); return$query; } } access 6. Buka controller admin, tambahkan kode fungsi dibawah ini! C:xampp/htdocs/myproyek/application/ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 publicfunction__construct(){ parent::__construct(); $this->is_logged_in(); } publicfunction is_logged_in (){ $logged_in=$this->session->userdata('logged_in'); if(!isset($logged_in)||$logged_in!=TRUE){ echo"Kamu tidak memiliki izin unntuk mengakses halaman ini, Silahkan login terlebih dahulu! "; die(); } } publicfunction logout(){ $session=$this->session->userdata('logged_in'); if($session!=TRUE){ header('location:'. base_url().'index.php/login'); }else{ $this->session->sess_destroy(); header('location:'. base_url().'index.php/login'); } } 7. Jalankan program pada web browser tampilkan dan analisis hasilnya.! E. Latihan Soal Lakukan pengujian sistem autentikasi yang telah anda bangun, coba kunjungi URL: http://localhost/myproyek/index.php/admin tanpa login terlebih dahulu, apabila halaman admin masih bisa diakses tanpa login berarti sistem masih gagal, dan apabila halaman admin sudah tidak bisa diakses, berarti sistem autentikasi telah berhasil dibangun. 157 F. Rangkuman Autentikasi adalah proses dalam rangka validasi user pada saat memasuki sistem, nama dan password dari user di cek melalui proses yang mengecek langsung ke daftar mereka yang diberikan hak untuk memasuki sistem tersebut. Autentikasi merupakan suatu langkah untuk menentukan atau mengonfirmasi bahwa seseorang adalah autentik atau asli. Melakukan autentikasi terhadap sebuah objek adalah melakukan konfirmasi terhadap kebenarannya. Dalam aplikasi Web dibutuhkan mekanisme yang dapat melindungi data dari pengguna yang tidak berhak mengaksesnya, Proses Autentikasi pada prinsipnya berfungsi sebagai kesempatan pengguna dan pemberi layanan dalam proses pengaksesan resource. Pihak pengguna harus mampu memberikan informasi yang dibutuhkan pemberi layanan untuk berhak mendapatkan resourcenya. Sedang pihak pemberi layanan harus mampu menjamin bahwa pihak yang tidak berhak tidak akan dapat mengakses resource ini. G. Umpan Balik dan Tindak Lanjut 1. Apakah anda sudah mampu membangun sistem autentikasi? 2. Apakah anda sudah mengetahui manfaat sistem autentikasi? 3. Setelah saudara melakukan kegiatan pembelajaran untuk modul “Membangun Sistem Autentikasi” ini, silahkan mengisi tabel 13 secara jujur dan sesuai dengan kemampuan yang telah anda dapatkan! Tabel 13. Tindak Lanjut IPK 158 Hasil yang didapat Rencana Tindak Lanjut 159 EVALUASI 1. Berikut ini adalah jenis browser yang digunakan untuk mengakses sebuah halaman web site, kecuali: A. B. C. D. Mozilla Firefox Bootstrap Internet Explorer Google Chrome 2. Berikut ini adalah contoh perangkat lunak yang berfungsi sebagai web server kecuali? A. B. C. D. Apache Internet Information Service (IIS) Internet Explorer (IE) Apache Tomcat 3. Jika anda ingin mengubah warna latar belakang pada halaman web site menjadi warna biru dengan menggunakan tag HTML, manakah diantara tag berikut ini yang paling tepat? A. B. C. D. <body bgcolor=”blue”> <body background=”blue”> <body backgroundcolor=”blue”> <body backcolor=”blue”> 4. Kode HTML <img src=””></img> adalah berfungsi untuk A. B. C. D. Menyisipkan gambar kedalam halaman web site Memberi bingkai pada gambar Membuat gambar dapat bergerak Tidak ada jawaban yang benar 5. Contoh salah satu penerapan tag HTML adalah <a href=”kirimemail.html”> Kirim Email </a>, apakah fungsi dari tag tersebut? E. F. G. H. Membuat hyperlink Membuat hyperlink Membuat hyperlink Membuat hyperlink yang berfungsi untuk menampilkan halaman lain. yang berfungsi untuk memanggil alamat email. yang berfungsi untuk mengunduh sebuah file. yang berfungsi untuk mengunggah sebuah file. 6. Salah satu cara untuk menggunakan script CSS (Cascading Style Sheet) adalah dengan cara external. Manakah script yang paling tepat untuk mengimplementasikan cara tersebut? A. B. C. D. 160 <a href=”style.css” type=”text/css” rel=”stylesheet”> <script type=”text/css” src=”style.css”> <link href=”text/css” file=”style.css” rel=”stylesheet”> <link href=”style.css” type=”text/css” rel=”stylesheet”> 7. Perhatikan script css berikut ini dengan seksama! Manakah diantara kode berikut ini yang tepat untuk membuat huruf menjadi tebal dengan memanfaatkan script css tersebut? A. B. C. D. <div class=”cetakTebal”>Cetak Tebal</div> <div=”cetakTebal”>Cetak Tebal</div> <div id=”cetakTebal”>Cetak Tebal</div> <div id=”{cetakTebal}”>Cetak Tebal</div> 8. Manakah bahasa pemrograman berikut ini yang menggunakan komunikasi server side dalam pemrosesannya? A. B. C. D. PHP, JavaScript dan ASP.Net Bootstrap, CodeIgniter, JQuery ASP.Net, PHP, JSP CodeIgniter, AngularJS, Backbone 9. Berikut ini adalah penamaan variabel dalam PHP yang diperbolehkan kecuali: A. B. C. D. $_nama $2nama $namaLengkap $for_nama 10. Dalam membangun back-end application, Pemrograman yang digunakan untuk mengkomunikasikan antara user dengan server dan database adalah . ... A. Server-side Scripting B. Client-side Scripting C. Database Server D. HTTP Server 11. Manakah diantara script PHP berikut ini yang berfungsi untuk melakukan perulangan sebanyak 100 kali dengan baik dan benar? A. B. 161 D. C. 12. Kode program dari JavaScript yang berfungsi untuk mengambil sebuah value dari input form adalah… A. B. C. D. document.write() document.getElementByVal() document.getElementById().value document.getValue() 13. Selain menggunakan “if then else” untuk mengatasi permasalahan kondisi percabangan pada JavaScript dapat juga menggunakan…. A. B. C. D. for… while… do while switch 14. Pada web dinamis, terdapat pemisahan antara layout web dengan konten web, hal ini yang menjadikan web dapat bekerja secara efisien. Hal itu disebabkan karena . . . . . . A. Saat konten berjumlah sangat banyak, tidak akan terjadi kesulitan saat pengelolaan atau memanipulasi data B. Saat konten berjumlah sangat banyak, Halaman akan diskses secara cepat dan ringan C. Database Server Data yang diminta dari server hanya data konten, sehingga web bekerja secara cepat D. Data yang diminta dari server hanya data konten, sehingga web bekerja secara cepat 15. Sistem autentikasi digunakan untuk pengkategorian user dalam pengaksesan atau pengelolaan aplikasi web. Hal tersebut perlu dilakukan karena . . . . . . A. Untuk memberian batasan pengunjung dan pengelola web, sehingga web dapat beroprasi secara semestinya B. Untuk memberikan hak akses kepada pengunjung sehingga pengunjung dapat mengunjungi web tanpa mengelolanya C. Untuk memberikan hak akses kepada pengunjung sehingga web dapat dikelola dengan baik D. Untuk memberikan kebebasan kepada pengunjung sehinggadapat mengakses web tanpa terganggu oleh system 162 16. Script PHP yang berfungsi untuk menghitung panjang karakter adalah.. A. B. C. D. strlength() strlen() length() len() 17. Jika ada script echo substr("ALUN SUJJADA",0,4); Maka output yang dihasilkan adalah… A. B. C. D. JADA ALUN 4 16 18. Jika ada script echo dihasilkan adalah…. A. 2 B. 5 C. 3 D. 4 strpos("SUJJADA","A"); Maka output yang 19. Manakah diantara pernyataan berikut ini yang paling tepat? A. CodeIgniter adalah framework untuk mempermudah pembuatan web dinamis berbasi Java. B. CodeIgniter adalah framework yang menerapkan konsep MVC (Model, View, Controller) C. CodeIgniter adalah sebuah web framework yang digunakan untuk pembuatan desain front-end D. Model pada CodeIgniter tidak diperbolehkan menuliskan fungsi untuk mengakses database. 20. Inti dari proses upload pada PHP adalah berada pada penerapan fungsi builtin yaitu move_uploaded_file() atau copy(). Script tersebut berfungsi untuk . . . A. B. C. D. Memindahkan dari folder temporary ke folder tujuan upload Memindahkan dari folder temporary ke folder tujuan download Memindahkan dari folder temporary ke folder tujuan server Memindahkan dari folder temporary ke folder tujuan direktori local 163 164 PENUTUP A. Kesimpulan Pemrograman web dinamis merupakan salah satu modul dari sepuluh modul diklat PKB. Modul grade 6 ini digunakan untuk pelatihan guru kejuruan Rekayasa Perangkat Lunak untuk jenjang diklat tingkat lanjut. Melalui modul ini peserta diklat diharapkan mampu memiliki kompetensi dalam membuat aplikasi berbasis web dinamis. Proses pembuatan aplikasi web dinamis diawali dengan pemahaman tentang perangkat-perangkat yang dibutuhkan untuk mengembangkan aplikasi web melalui aktifitas pembelajaran observasi dan analisis. Dalam ketrampilan mengembangkan dasar yaitu aplikasi pembuatan web kode dinamis program ini dibutuhkan HTML. Teknik pengembangan web dinamis menggunakan server side scripting berbasis bahasa pemrograman PHP dengan menggabungkan CSS dan pemrograman java script. Pengembangan front end aplikasi menggunakan framework bootstrap. Pengembangan back-end aplikasi menggunakan model MVC dan data disimpan dalam database MySQL. studi kasus aplikasi yang dijadikan contoh untuk pengembangan adalah publikasi artikel. Dalam aplikasi tersebut pengguna dapat melihat dan mencari artikel sedangkan untuk mengedit, menambah dan menghapus artikel melalui proses authentifikasi user. B. Tindak lanjut Modul diklat PKB guru RPL grade 6 ini memberikan kepada peserta didik pengetahuan dan ketrampilan dasar dalam mengembangkan aplikasi berbasi web. Dalam implementasi pengembangan aplikasi menggunakan penggabungan teknik web dinamis dasar dan pemrograman framework. Untuk menghasilkan aplikasi yang berkualitas, efektifitas dan efesiensi dalam pengembangan serta kompleksitas aplikasi yang tinggi dibutuhkan pemahaman, ketrampilan dan seni dalam pengembangan proyek aplikasi berbasis web. Modul diklat selanjutnyaakan memberikan pemahaman dan ketrampilan tentang manajeman proyek sistem informasi berbasis web. 165 166 DAFTAR PUSTAKA Duckett, Jon. (2011). HTML & CSS: Design and Build Websites. Canada: John Wiley & Sons, Inc. Jackson, Jeffrey C. (2007). Web Technologies: A Computer Sciense Perspective. United States of America: Pearson Prentice Hall. Kevin Tatroe, Peter Maclntyre and Rasmus Lerdorf. (2013). Programming PHP: Creating Dynamic Web Pages. United State of America: O’Reilly. Noxon, Robin. (2014). Learning PHP, MySQL, JavaScript, CSS & HTML5: A Step-By-Step Guide to Creating Dynamic Websites. United States of America: O’Reilly. https://id.wikipedia.org/wiki/XAMPP http://www.w3schools.com/ http://ihsanatkia.com/featur-lebih-dari-package-sublime-text/ http://www.htmlandcssbook.com/code-samples/ http://www.duniailkom.com/tutorial-belajar-javascript-pengertian-dan-fungsijavascript-dalam-pemograman-web/ https://id.wikipedia.org/wiki/MySQL https://id.wikipedia.org/wiki/PhpMyAdmin 167 168 GLOSARIUM Address bar Browser Back-end Client-side CSS Content Download FTP Front-end Home Page HTML A : Kotak tempat penginputan alamat web lainnya pada web browser. B : Software yang digunakan untuk menelusuri dan menampilkan informasi dari web server, seperti Internet Explorer, Opera, Mozilla Firefox, dan Safari. : Berkaitan dengan alur program web dinamis. C : Operasi/kegiatan yang dilakukan di client dan tidak melibatkan server. Operasi yang terjadi hanya di browser, tidak ada permintaan data, verifikasi data ke server. : (Cascading Style Sheets): Bahasa yang direkomendasikan W3C (World Wide Web Consortium) untuk mendefiniskan style (seperti jenis, ukuran, warna huruf, dan lain-lain) pada dokumen web. : Isi sebuah website yang mencakup, teks, gambar, atau media-media lainnya. Content harus dibedakan dari layout. Yang disebut kemudian berhubungan dengan bagaimana sebuah halaman web ditampilkan. D : Transfer file atau informasi dari komputer lain ke komputer kita. Dalam istilah web, download berarti transfer file dari server web ke klien web. F : File Transfer Protocol, yaitu protokol yang memungkinkan seseorang mentransfer file dari satu komputer ke komputer lainnya. FTP biasa digunakan untuk menransfer file web kita ke komputer server atau penyedia hosting. : Berkaitan dengan user interface/tampilan website. H : Halaman pertama dari situs web. : HyperText Markup Language. HTML merupakan bahasa yang digunakan untuk mendefinisikan sejumlah bagian dari sebuah dokumen web dalam bentuk tag, sehingga browser dapat mengetaui bagaimana menampilkan dokumen web tersebut 169 yang mencakup, link, text, gambar dan media-media lainnya seperti video dan audio. HTTP Hypertext : Kependekan dari Hypertext Transfer Protocol, yaitu aturan-aturan yang digunakan untuk menghubungkan dan mengirimkan dokumendokumen hypertext seperti web. : Tanda atau penunjuk ke dokumen lain web Hyperlink sinonim dengan hotlink, anchortext, atau link. : Hypertext adalah teks yang bisa di-klik. Javascript J : Bahasa pemrograman sisi-client. Hyperlink Login Logout Link Password L : Otorisasi yang dilakukan oleh seorang user untuk masuk ke halaman pribadi dengan memasukkan username dan password di dalam sebuah jaringan komputer (termasuk internet). : Keluar dari otorisasi (login). : Koneksi hypertext antar halaman-halaman web. Sinonim dengan hotlink atau hyperlink. P : Kode rahasia yang digunakan oleh pengguna untuk dapat mengotorisasikan username yang dia miliki untuk dapat memasuki sebuah halaman pribadi di jaringan komputer (termasuk internet) PHP Server : Server-side : Sistem Autentikasi Site : : Script : 170 Bahasa pemrograman sisi-server S Sebuah komputer yang bertugas melayani pembagian serta pengolahan informasi yang diperlukan oleh Client. Server biasanya di kendalikan oleh seorang admin. Operasi/kegiatan yang dilakukan di server dalam konteks hubungan server-client. Sebagai contoh saat mengakses sebuah halaman web di komputer menggunakan browser, browser adalah client yang mengirim permintaan kepada server. Kemudian server merespon permintaan client. Sebelum merespon permintaan client lebih dulu terjadi kegiatan di server, seperti menerjemahkan permintaan client, memproses, memilih data dan sebagainya. Memiliki makna yang sama dengan system login. Sinonim dengan halaman web atau website. Dalam bahasa Indonesia, kita sering menyebutnya situs atau situs web. Adalah kumpulan perintah yang disusun dalam bahasa komputer tertentu (Java, VisualBasic, CGI/Perl) untuk melakukan sebuah program interaktif atau animasi dalam sebuah webpage. URL Upload User Website Website Dinamis Web Programmer Web Desainer Web Developer Web Master Web Statis WWW Web Client Web server U : Uniform Resource Locator, yaitu alamat dokumen atau sumber-sumber lain di internet. URL menyajikan informasi tentang bagaimana sebuah server serta alamat-alamat file lainnya diakses. : Kegiatan mentransfer atau mengirim suatu file ke komputer lain. : Pemakai atau pengguna dalam komputer (termasuk internet). W : Sekumpulan halaman-halaman web (web page), gambar, video atau aset-aset digital lainnya yang disimpan pada satu atau lebih web server, biasanya dapat diakses melalui internet. : Website yang dapat dirubah-ubah konponen maupun kontennya dan terkoneksi dengan database. : Seseorang yang perkerjaannya membuat website, akan tetapi terfokus pada membuat alur program website tersebut. : Seseorang yang pekerjaannya membuat website, akan terfokus pada tampilan atau desain. : Seseorang yang pekerjaannya membua website. : Seseorang yang melakukan kegiatan manajeman website untuk memastikan bahwa website tersebut dapat berfungsi dengan baik. : Website yang tidak dapat dirubah komponen maupun kontennya. : World Wide Web, Layanan internet berbasis hiperteks yang digunakan untuk menelusuri sumbersumber di internet. : Biasa disebut dengan browser atau perambaan adalan perangkat lunak yang digunakan untuk mengakses web server dengan mengirimkan pesan permintaan (request) HTTP dan mengolah response HTTP yang dihasilkan : Merupakan perangkat lunak dalam server yang berfungsi menerima permintaan (request) melalui HTTP dari client yaitu browser dan mengirimkan kembali response HTTP yang pada umumnya akan berbentuk dokumen HTML atau file. 171 HTTP (HyperText Transfer Protocol) adalah standart protokol komunikasi, protokol jaringan lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan menggunakan hipermedia. URL (Uniform/Universal Resource Locator) merupakan suatu alamat yang digunakan untuk mengakses resource (file) yang berada pada jaringan intranet maupun internet. HTML (Hyper Text Markup Language) adalah Sebuah bahasa markup yang terdiri dari seperangkat kode-kode (tag markup) yang digunakan untuk mendeskripsikan dokumen web (halaman web). CSS (Cascading Style Sheets), CSS mendefinisikan bagaimana elemen HTML yang akan ditampilkan. CSS Bekerja dengan mengaitkan aturan denga elemen HTML, aturan-aturan ini yang nantinya mengatur bagaimana elemen ditampilkan. Client-Side Programming Languageadalah merupakan salah satu tipe bahasa pemograman yang pemrosesannya dilakukan oleh client (user, pengguna). Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chromedan Mozilla Firefox. Salah satu contoh Bahasa permograman jenis ini adalah Java script. Server-side Programming Languageadalah merupakan salah satu tipe Bahasa permograman yang hasil programnya (script program) berjalan di sisi server. Salah satu contoh Bahasa permograman ini adalah PHP. Dokumen PHP akan diparsing didalam web server oleh interpreter dan diterjemehkan dalam bentuk HTML dan akhirnya akan ditampilkan oleh browser yang dibuka oleh user. Front-End Web adalah bagian utama dari sebuah web site yang berinteraksi langsung dengan pengguna atau pengunjung situs. Segala sesuatu yang dilihat ketika melakukan navigasi dalam sebuah halaman web, baik dari font, warna, menu, dan segala yang menyangkut aspek desain yang nantinya menjadi user interface dari aplikasi web adalah hasil penggabungan dari fungsi HTML, CSS, dan JavaScript dikontrol oleh browser pada komputer. PHP adalah basaha bahasa pemrograman komputer Server-side scripting yang diciptakan khusus untuk menciptakan konten web dinamis Identifier adalah sebuah pegenal, dalam PHP identifier digunakan untuk memberi nama sebuah variabel, fungsi, konstanta atau class. Bootstrap adalah sebuah framework HTML, CSS dan Java Script yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersamasama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh 172 halaman web yang dikembangkan senada dengan komponenkomponen lainnya. Autentikasi adalah proses dalam rangka validasi user pada saat memasuki sistem, nama dan password dari user di cek melalui proses yang mengecek langsung ke daftar mereka yang diberikan hak untuk memasuki sistem tersebut. SQL (Structure query language) adalah sebuah bahasa yang digunakan untuk me-request informasi dari basisdata. Bahasa ini dikembangkan oleh DBSM. Konstruksi SQL berbentuk atas kombinasi relational-algebra dan relational-calculus.SQL terdiri dari beberapa komponan, dua diantaranya yang sangat fundamental adalah DDL (Data Definition Language) dan DML (Data Manipulation Language). 173
