PEMROGRAMANWEB DIANANGGRAINI HENDRIYANA
DAFTAR ISI Modul 1 HTML ........................................................................................................................ 1 1. Pendahuluan..................................................................................................................... 1 1.1 Pengertian HTML .............................................................................................................. 2 1.2 Text Editor......................................................................................................................... 2 2. Struktur Dasar HTML ........................................................................................................ 3 3. Tag HTML ......................................................................................................................... 5 4. Table................................................................................................................................. 8 5. Form HTML....................................................................................................................... 11 Modul 2 CASCADING STYLE SHEETS ................................................................................. 14 1. Pengertian CSS ................................................................................................................ 14 2. CSS Pada Dokumen HTML ............................................................................................. 14 3. Penulisan CSS ................................................................................................................. 15 4. CSS Pada Dokumen HTML ............................................................................................. 16 5. Padding, Margin Dan Border ............................................................................................ 18 Modul 3 Javascript................................................................................................................. 21 1. Definisi Javascript ............................................................................................................ 21 2. Variabel dan Tipe Data ..................................................................................................... 22 3. Operator ........................................................................................................................... 23 4. Struktur Kontrol ................................................................................................................ 23 5. Perulangan ....................................................................................................................... 24 6. Function ........................................................................................................................... 26 7. Dynamic HTML ................................................................................................................ 26 Modul 4 PHP ........................................................................................................................... 28 1. Pengenalan PHP............................................................................................................... 28 2. Webserver ........................................................................................................................ 28 3. Menjalankan Project Latihan ............................................................................................ 30 4. Deklarasi Variabel ............................................................................................................ 32 5. Tipe Data ......................................................................................................................... 33 6. Operator ........................................................................................................................... 34 Pemrograman Web | HTML i
Modul 5 Seleksi Kondisi ........................................................................................................ 36 1. Seleksi Kondisi ................................................................................................................. 36 2. Perintah IF ....................................................................................................................... 36 3. Perintah IF dan ELSE ....................................................................................................... 37 4. Perintah IF Majemuk ........................................................................................................ 39 5. Perintah SWITCH ............................................................................................................. 40 Modul 6 Perulangan .............................................................................................................. 42 1. Perulangan ....................................................................................................................... 42 2. Perintah FOR ................................................................................................................... 43 3. Perintah WHILE ............................................................................................................... 44 4. Perintah DO WHILE ......................................................................................................... 46 5. Perintah FOREACH ......................................................................................................... 47 Modul 7 Get & Post ................................................................................................................ 50 1. Metode Get ...................................................................................................................... 50 2. Metode Post ..................................................................................................................... 54 Modul 8 Session & Cookie .................................................................................................... 57 1. Definisi Session ................................................................................................................ 57 1.1 Memulai Session dengan PHP ......................................................................................... 58 1.2 Membuat dan Mengakses Session dengan PHP .............................................................. 58 1.3 Menghapus Session dengan PHP .................................................................................... 59 2. Definisi Cookie ................................................................................................................. 60 2.1 Memulai Cookie dengan PHP .......................................................................................... 60 2.2 Mengakses Cookie dengan PHP ...................................................................................... 62 2.3 Menghapus Cookie dengan PHP ..................................................................................... 62 Modul 9 PHP & MySQL .......................................................................................................... 63 1. Koneksi Database MySQL dengan PHP .......................................................................... 63 2. Memasukan Data ke MySQL dengan PHP ....................................................................... 66 3. Menampilkan dan di MySQL dengan PHP ....................................................................... 69 4. Mengubah Data pada MySQL dengan PHP ..................................................................... 71 5. Menghapus Data di MySQL dengan PHP ........................................................................ 74 Pemrograman Web | HTML ii
MODUL 1 HTML Tujuan Praktikum Mahasiswa mampu mengenal Bahasa pemrograman web Mahasiswa mampu memahami HTML Mahasiswa mampu mengimplementasikan tag dan atribut HTML 1. Pendahuluan Pada dasarnya web merupakan sekumpulan komputer yang saling terkoneksi dan berkomunikasi dengan lainnya. Komputer-komputer dalam satu jaringan yang saling terkoneksi terdiri dari computer server dan client. Server menyediakan informasi yang tersedia yang dapat diakses atau di request sesuai dengan client. Komunikasi yang memanfaatkan jaringan internet, sehingga client dapat meminta permohonnan atau request dari server melalui browser merupakan pembuatan aplikasi dengan bahasa script yang dinamakan dengan Pemrograman Web. Dalam memperlajari pemrograman web, terdapat beberapa script yang dibutuhkan dalam membangun suatu halaman website, antara lain: a. HTML (Hyper Text Markup Language) b. CSS (Cascading Style Sheets) c. Java Script d. PHP e. Database Pemrograman Web | HTML 1
1.1. Pengertian HTML HTML atau kepanjangan Hyper Text Markup Language merupakan script untuk menyusun dokumen-dokumen web. Dokumen HTML disimpan dalam fortmat teks yang didalamnya terdapat elemen-elemen yang memerintahkan browser untuk mengeksekusi perintah-perintah dari script html tersebut. HTML termasuk dalam bahasa pemrograman gratis, tidak dimiliki oleh siapapun, dikembangkan oleh berbagai pengembang di seluruh dunia atau merupakan bahasa yang dikembangkan bersama-sama secara global. Adapun versi dari HTML sekarang sudah mencapai versi ke – 5. Tabel berikut merupakan versi HTML. Tabel 1. Pengembangan versi HTML Dokumen HTML berkerja menggunakan IDE (Integrated Development Environment) editor teks apapun dengan ekstensi file ( .html ). Dokumen HTML memiliki beberapa elemen yang dikelilingi oleh tag teks yang dimulai dengan simbol ( < ) dan diakhiri dengan sebuah simbol ( > ) yang memerintahkan web browser untuk mengeksekusi perintah pada dokumen HTML tersebut. 1.2. Text Editor Dalam membuat sebuah halaman web dibutuhkan IDE (Integrated Development Environment) berupa text editor yang dapat mengelola script yang dilakukan untuk mengembangkan perngakat lunak website. Text editor yang dapat dipergunakan dalam pembelajaran pemrograman web ini dapat menggunakan pilihan sebagai berikut: Pemrograman Web | HTML 2
1. Notepad Notepad adalah aplikasi text editor yang sudah ada didalam instalasi os windows anda masing-masing. Yang perlu diperhatikan jika menggunakan notepad sebagai text editor, yakni extension type file dituliskan langsung dan pemilihan save as type adalah All Files. 2. Notepad++ Notepad++ adalah sebuah penyunting teks dan penyunting kode sumber yang berjalan di sistem operasi Windows. Notepad++ menggunakan komponen Scintilla untuk dapat menampilkan dan menyuntingan teks dan berkas kode sumber berbagai bahasa pemrograman. 3. Sublime Text Text editor yang terbilang masih baru yang sangat mudah digunakan, penampilan simple namun enak dipandang. Sublime text adalah aplikasi berbayar tapi anda dapat mendownload versi demo-nya (meskipun versi demo tapi tidak ada batasan dalam penggunaannya). 4. Visual Studio Code Visual Studio Code adalah editor yang bersifat opensource yang dapat berjalan dari desktop serta mendukung script untuk JavaScript, naskah dan Node.js dan memiliki array beragam ekstensi yang tersedia untuk bahasa lain antara lain C++, C#, Python dan PHP. Editor ini adalah fitur lengkap lingkungan pengembangan terpadu (IDE) dirancang untuk pengembang yang bekerja dengan teknologi cloud yang terbuka Microsoft. Visual Studio Code juga dapat berkerja secara lintas platform, kode Editor ringan, yang dapat digunakan oleh siapa saja untuk membangun aplikasi untuk Web. 2. Struktur Dasar HTML Berikut merupakan struktur dasar HTML ditunjukan pada syntak berikut. 1. <html> 2. <head> 3. <title>Judul Halaman</title> 4. </head> 5. <body> 6. Blok berisi konten web 7. 8. </body> 9. </html> Pemrograman Web | HTML 3
Keterangan: 1. Tag HTML secara default dimulai dari <html> pada baris 1 dan diakhiri dengan tag </html> pada baris ke-9. 2. Tag HEAD dimulai pada bari ke-2 sampai dengan abris ke-4 merupakan tag kepala sebelum badan yang akan terlebih dulu dieksekusi sebelum tag badan. 3. Tag TITLE terdapat pada baris ke-3 merupakan tag judul yang muncul pada titlebar dari sebuah browser. 4. Tag BODY pada baris ke-5 sampai dengan baris ke-8 merupakan badan suatu halaman web berfungsi untuk menampilkan isi konten pada halaman web. Gambar 1. Struktur Dasar HTML disimpan dengan ektensi .html disimpan pada direktori atau folder yang telah ditentukan. Selanjutnya buka jendela explorer dan buka file dengan ekstensi .html tadi menggunakan browser, hasil output pada gambar 1 ditunjukan sebagai berikut: 1 2 3 Gambar 1.1 Output Struktur Dasar HTML Keterangan: 1. Bagian yang ditunjukan pada nomor 1 ialah judul halaman web menggunakan tag title. 2. Bagian yang ditunjukan pada nomor 2 ialah URL web atau lokasi penyimpanan file html. 3. Bagian yang ditunjukan pada nomor 3 ialah isi konten pada halaman web diapit diantara tag body. Pemrograman Web | HTML 4
3. Tag HTML Kode yang terdapat dalam HTML disebut dengan tag. Tag dalam HTML dituliskan dengan symbol ( < ), ( > ) dan ( / ). Tag dituliskan berpasangan, jika tidak menggunakan tanda garis miring( / ) setelah penulisan namanya, disebut sebagai tag pembuka. Namun, jika menggunakan tanda garis miring ( / ) sebelum nama tag, maka disebut sebagai tag penutup. Tag bersifat insensitive yaitu tidak dibedakan antara jenis penulisan dengan huruf besar, huruf kecil dan campuran tidak masalah akan tetapi standar tag ditulisakan dalam huruf kecil. 3.1. Tag HTML Dasar Tag Deskripsi <html> Dokumen HTML. <body> Mendefinisikan isi/badan suatu dokumen. <h1>-<h6> heading ke 1 s/d heading ke 6. Mendefinisikan sebuah paragraph. <p> Menyisipkan sebuah line break. <br> Sebuah garis horizontal. <hr> Komentar dalam kode sumber HTML. <!--> 3.2. Tag Format Text Dasar Tag Deskripsi <b> Untuk menebalkan teks. <i> Untuk memiringkan teks. <u> Untuk memberikan garis dibawah teks. <big> Untuk teks yang lebih besar. <small> Untuk membuat teks yang lebih kecil. <strong> Untuk membuat teks tebal. <sub> Untuk membuat teks yang posisinya lebih ke bawah. <sup> Untuk membuat teks yang posisinya lebih ke atas. Pemrograman Web | HTML 5
3.3. Tag Output Komputer Tag Deskripsi <code> Menampilkan teks kode computer. <kbd> Menampilkan teks dari keyboard. <samp> Menampilkan teks contoh kode komputer. <var> Menampilkan sebuah variabel. <pre> Menampilkan teks preformatted. 3.4. Tag Citation, Quotation dan Definisi Tag Deskripsi <abbr> Menampilkan suatu kependekan. <acronym> Menampilkan suatu singkatan. <blockquote> Menampilkan quotation panjang. Menampilkan quotation pendek. <q> Menampilkan suatu kutipan. <cite> Menampilkan suatu istilah. <dfn> 3.5. Tag Entitas Karakter Tag Deskripsi Menampilkan spasi kosong. Menampilkan symbol kurang dari ( < ). < Menampilkan symbol lebih dari ( > ). > Menampilkan symbol and ( & ). & Menampilkan symbol tanda petik atau kutip ( “ ). " × Menampilkan symbol perkalian ( × ). Menampilkan symbol pembagian ( ÷ ). ÷ Pemrograman Web | HTML 6
3.6. Tag List Deskripsi Mendefinisikan sebuah list ordered dengan angka/huruf. Tag Mendefinisikan sebuah list unordered dengan bullets. <ol> Mendefinisikan sebuah isi data dalam list. <ul> Mendefinisikan sebuah list definisi. <li> Mendefinisikan sebuah istilah list definisi. <dl> Mendefinisikan sebuah keterangan list definisi. <dt> <dd> Contoh penggunaan tag HTML ditunjukan pada script HTML berikut: 1. <html> 2. <head> 3. <title>Pemrograman WEB</title> 4. </head> 5. <body> 6. <h1>Praktikum Pemrograman WEB</h1> 7. 8. <!-- Baris ini merupakan komentar dan tidak akan di eksekusi oleh browser --> 9. 10. <p>HTML atau kepanjangan <b>Hyper Text Markup Language</b> merupakan <i>s cript</i> untuk menyusun <u>dokumen-dokumen</u> web. </p> 11. 12. <p> 13. Pemahaman dasar website, antara lain [Penggunaan Unorder List]: 14. <ul> 15. <li>HTML</li> 16. <li>CSS</li> 17. <li>JavaScript</li> 18. </ul> 19. </p> 20. 21. <hr> 22. 23. <p> 24. Pemahaman dasar website, antara lain [Penggunaan Order List]: 25. <ol> 26. <li>HTML</li> 27. <li>CSS</li> 28. <li>JavaScript</li> 29. </ol> 30. </p> 31. 32. <p> 33. Contoh penggunaan Looping 34. <pre> Pemrograman Web | HTML 7
35. for i = 1 to 10 36. print i 37. 38. next i 39. </p> </pre> 40. 41. </body> 42. </html> 43. Output dari script tersebut ditunjukan pada gambar berikut: Gambar 1. 2 Output Tag HTML Sederhana 4. Table Elemen table digunakan untuk membuat data yang ditampilkan secara multidimensi terdiri atas baris dan kolom. Selain itu juga tabel berfungsi untuk menampilkan tampilan konten pada Pemrograman Web | HTML 8
halaman web menjadi terstruktur, rapi dan memiliki tampilan yang nyaman untuk dipandang. Berikut merupakan tags yang terdapat pada tabel ditunjukan pada sebagai berikut: Tag Deskripsi <table> Mendefinisikan sebuah tabel. Header tabel. <th> Baris pada tabel. <tr> Kolom pada tabel. <td> Nilai atribut untuk satu atau lebih kolom dalam sebuah tabel. <col> Head pada tabel. <thead> Badan pada tabel. <tbody> Footer pada tabel. <tfoot> Tabel dibawah ini merupakan layout tabel yang memiliki 3 baris dan 3 kolom dan masing masing baris terdapat 2 kolom dan 3 kolom. Baris 1, Kolom 1 Baris 1, Kolom 2 Baris 1, Kolom 3 Baris 2, Kolom 1 Baris 2, Kolom 2 Baris 3, Kolom 1 Baris 3, Kolom 2 Baris 4, Kolom 1 Baris 4, Kolom 2 Baris 5, Kolom 2 Untuk membuat tabel sesuai dengan layout diatas dapat ditulis dengan bahasa HTML sebagai berikut: 1. <html> 2. <head> 3. <title>Pemrograman Web - Table</title> 4. </head> 5. <body> 6. <h3>Pembuatan TABLE</h3> 7. <table border=\"1\"> 8. <tr> 9. <td>Baris 1, Kolom 1</td> 10. <td>Baris 1, Kolom 2</td> 11. <td>Baris 1, Kolom 3</td> 12. </tr> 13. <tr> 14. <td colspan=\"2\" align=\"center\">Baris 2, Kolom 1</td> Pemrograman Web | HTML 9
15. <td>Baris 2, Kolom 2</td> 16. </tr> 17. <tr> 18. <td>Baris 3, Kolom 1</td> 19. <td colspan=\"2\" align=\"center\">Baris 3, Kolom 1</td> 20. </tr> 21. <tr> 22. <td rowspan=\"2\" colspan=\"2\" align=\"center\">Baris 4, Kolom 1</td> 23. <td>Baris 4, Kolom 2</td> 24. </tr> 25. <tr> 26. <td>Baris 5, Kolom 2</td> 27. </tr> 28. </table> 29. </body> 30. </html> 31. Hasil syntax pada HTML diatas ditunjukan pada gambar 5. berikut: Gambar 1.3 Output Pembuatan Tabel Pemrograman Web | HTML 10
5. Form HTML Pada sebuah website pada umumnya terdapat suatu inputan yang digunakan untuk memasukan suatu data sebagai informasi, maka diperlukan sebuah fungsi untuk menangai hal tersebut. Pada HTML fungsi yang bertugas untuk menerima inputan dari client atau pengunjung situs website dinamakan form. Tabel berikut merupakan tags pada HTML yang digunakan untuk berkerja dengan form, antara lain: Tag Deskripsi <form> Bagian awal Form untuk input dari pengunjung. <input> Field input. <textarea> Field input dengan jenis multi-line. <label> Label inputan. <option> Pilihan dalam drop-down box <select> Sebuah list yang dapat dipilih (drop-down box) pada option. <radio> List yang dapat dipilih hanya satu buah pilihan dari berbagai pilihan. <button> Tombol berupa aksi yang akan dilakukan pada form. Script berikut merupakan penggunaan tags form yang digunakan untuk melakukan register atau pendaftaran pada sebuah website. 1. <html> 2. <head> 3. <title>Pemrograman Web - Table</title> 4. </head> 5. <body> 6. <h3>Pembuatan FORM</h3> 7. <form action=\"#\"> 8. <table> 9. <tr> 10. <td>Nama</td> 11. <td>: </td> 12. <td><input type=\"text\" name=\"nama\"></td> 13. </tr> 14. <tr> 15. <td>Jenis Kelamin</td> 16. <td>:</td> 17. <td> 18. <select name=\"jenis_kelamin\"> 19. <option value=\"Laki-Laki\">Laki-Laki</option> 20. <option value=\"Perempuan\">Perempuan</option> 21. </select> Pemrograman Web | HTML 11
22. </td> 23. </tr> 24. <tr> 25. <td>Alamat</td> 26. <td>:</td> 27. <td> 28. <textarea name=\"alamat\" cols=\"30\" rows=\"5\"></texta rea> 29. </td> 30. </tr> 31. <tr> 32. <td>Hobi</td> 33. <td>:</td> 34. <td> 35. <input type=\"checkbox\" name=\"hobi\" value=\"Membaca\" >Membaca 36. <input type=\"checkbox\" name=\"hobi\" value=\"Travelin g\">Traveling 37. <input type=\"checkbox\" name=\"hobi\" value=\"Bermain Musik\">Bermusik 38. </td> 39. </tr> 40. <tr> 41. <td>Jurusan</td> 42. <td>:</td> 43. <td> 44. <input type=\"radio\" name=\"jurusan\" value=\"Teknik I nformatika\">Teknik Informatika 45. <input type=\"radio\" name=\"jurusan\" value=\"Sistem I nformasi\">Sistem Informasi 46. <br> 47. <input type=\"radio\" name=\"jurusan\" value=\"Rekayasa Perangkat Lunak\">Rekayasa Perangkat Lunak 48. <input type=\"radio\" name=\"jurusan\" value=\"Teknik K omputer\">Teknik Komputer 49. </td> 50. </tr> 51. <tr> 52. <td>Password</td> 53. <td>:</td> 54. <td> 55. <input type=\"password\" name=\"password\"> 56. </td> 57. </tr> 58. <tr> 59. <td colspan=\"3\"> 60. <button>SIMPAN</button> 61. </td> 62. </tr> 63. </table> Pemrograman Web | HTML 12
64. </form> 65. </body> 66. </html> 67. Output yang dihasilkan pada script diatas ditunjukan pada gambar berikut: Gambar 1.4 Output Pembuatan Form Pemrograman Web | HTML 13
MODUL 2 CASCADING STYLE SHEETS Tujuan Praktikum Mahasiswa memahami pengertian dasar Cascading Syle Sheets (CSS) Mahasiswa memahami kegunaan dari CSS Mahasiswa mampu mengimplementasikan penerapan CSS pada sebuah web Mahasiswa dapat memahami padding, margin dan border pada CSS. 1. Pengertian CSS Cascading Syle Sheets disingkat CSS merupakan bahasa yang digunakan untuk mengatur tampilan atau desain pada suatu dokumen atau halaman website. Selain membuat tampilan atau desain yang membuat tampilan website menarik, CSS juga dapat membuat pengembangan halaman menjadi jauh lebih efisien dari segi pembuatan code karena dapat menghilangkan atau meringkas atribut yang ada pada tags HTML. CSS juga didukung oleh browser. 2. CSS Pada Dokumen HTML CSS memiliki dua element yang digunakan sebagai penanda format tampilan yaitu selector dan deklarator. Deklarator berisi perintah CSS untuk menentukan format tampilan dari sebuat element pada halaman web, sedangkan selector adalah perintah property atau atribut yang berfungsi menempatkan format tampilan dari deklarator pada halaman web. Perbedaan antara selector dan deklarator terhilat pada script berikut yang digunakan untuk memodifikasi heading <h1> sebagai berikut: Pemrograman Web | CSS 14
1. <style type=\"text/css\"> 2. h1 3. { 4. font-size: 14pt; 5. color : blue; 6. } 7. </style> Pada contoh diatas merupakan penggunaan modifikasi pada tag heading <h1>. Selector pada script ditasa ditunjukan pada baris ke-2 yaitu h1. Sedangkan h1 memiliki property atau atribut yang digunakan sebagai detail dari atribut yang dimilikinya antara lain font-size dan color terletak pada baris ke-4 dan ke-5. Serta masing-masing property tersebut memiliki value atau nilai yang merepresentasikan property tersebut h1 memiliki ukuran tulisan sebesar 14point dan memiliki warna dengan nilai blue. 3. Penulisan CSS Sama seperti HTML, CSS memiliki aturan penulisan yaitu: 1. Setiap statement harus memiliki selector dan deklarator, Deklarator harus dibuat setelah selektor yang dimulai dengan buka kurung kurawal ( { ) dan diiakhiri dengan kurung kurawal tutup ( } ). 2. Properti dari deklarator untuk memisahkan antar baris menggunakan titik koma ( ; ). 3. Setiap propoerti memiliki nama yang diikuti oleh titik dua ( : ) serta value atau nilai dari property tersebut. 4. Proporti memungkinkan untuk menamping lebih dari satu nilai. 5. Spasi dapat digunakan untuk memudahkan mengubah atau memperbaharui file css pada sebuah website. 6. Komentar atau blok yang digunakan untuk menandai sebuah script tanpa diekseskusi diawalai dengan tanda ( /* ) dan diakhiri dengan tanda ( */ ). Bentuk umum penuisan CSS ialah sebagai berikut: 1. Nama Selector 2. { 3. /* Bentuk umum penulisan CSS)*/ 4. Nama Properti-1 : Value Properti-1; 5. Nama Properti-2 : Value Properti-2; 6. ... 7. Nama Properti-n : Value Properti-n; 8. } Pemrograman Web | CSS 15
Selector biasanya berupa tag HTML, id dan class. Penggunaan id menggunakan tanda ( # ) didepan nama selector dan class menggunakan tanda titik ( . ) didepan nama selector. Contoh penggunaanya terdapat pada script berikut. 1. <style type=\"text/css\"> 2. h1 { color : blue ; } /* selector HTML */ 3. #teks { color :green; } /* selector id */ 4. .warna { color : red; } /* selector class */ 5. </style> Deklarator berisi mengenai aturan-aturan CSS yang teridiri dari properti dan nilainya dipisahkan oleh tanda titik dua ( : ). 4. CSS Pada Dokumen HTML Terdapat 3 teknik yang digunakan untuk menerapakan CSS apda dokumen HTML, yaitu: 1. External Style Sheet External Style Sheet merupakan CSS yang disimpan pada suatu file dengan ekstensi file .css yang disimpan dalam suatu sub folder atau direktori tertentu yang masih sama dengan root atau foler project web. Tag link digunakan untuk mengidentifikasikan file css yang akan digunakan pada dokumen HTML yang terletak diantara tag HEAD. Bentuk umum tag link untuk menginisialisasikan dokumen css sebagai berikut: <link rel=\"stylesheet\" type=\"text/css\" href=\"nama_file.css\" /> Contoh penggunaan CSS menggunakan metode external style sheet, pertama buatkan file css terlebih dahulu misalkan dengan nama file style.css dengan script seperti dibawah ini. 1. h3 2. { 3. color: red; 4. } Script diatas mengunakan selector h3, dengan properti color digunakan untuk melakukan perubahan warna yang secara umum berwarna hitam menjadi merah. Untuk menambahkan css pada dokumen HTML ditunjukan pada script dibawah ini. 1. <html> 2. <head> 3. <title>Implementasi CSS</title> Pemrograman Web | CSS 16
4. <link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\"> 5. </head> 6. <body> 7. <h3>Cascading Style Sheets</h3> 8. </body> 9. </html> Baris ke-4 menunjukan penggunaan external style sheet yang menujuk file css dengan nama file style.css berada pada folder css. Pemisahan folder ini bertujuan untuk memudahkan pengembang untuk melakukan perbaikan, selain itu juga selain folder css memungkinkan folder lain lebih tersusun misalkan jiga akan menginclude berupa image atau gambar. Output yang dihasilkan pada scipt diatas ialah ditunjukan pada gambar 2.1. Gambar 2.1 Penggunaan External Style Sheet 2. Internal Style Sheet Internal Style Sheet dibuat tanpa menggunakan file css dari luar namaun pada dokume HTML itu sendiri. Script berikut akan merubah warna pada heading 3 sama pada contoh sebelumnya. 1. <html> 2. <head> 3. <title>Implementasi CSS</title> 4. <style type=\"text/css\"> 5. h3 6. { 7. color: red; 8. } 9. </style> 10. </head> Pemrograman Web | CSS 17
11. <body> 12. <h3>Cascading Style Sheets</h3> 13. </body> 14. </html> Pada scipt diatas, internal style sheet ditunjukan pada baris ke-4 sampai dengan baris ke-9 menggunakan tag style. 3. Inline Style Sheet Inline Style Sheet menuliskan sintak secara langsung pada html yang akan diubah secara langsung pada tag HTML. Penggunaan inline sheet pada script modifikasi header dibawah ini. 1. <html> 2. <head> 3. <title>Implementasi CSS</title> 4. </head> 5. <body> 6. <h3 style=\"color: red;\">Cascading Style Sheets</h3> 7. </body> 8. </html> Penggunaan inline style sheet ditunjukan pada baris ke-6 secara langsung ditambahkan pada tag h3. 5. Padding, Margin dan Border Pada CSS dikenal sebuah istilah “Box Model” yang digunakan untuk membuat design layout suatu halaman website. Terdapat empat bagian pada box model yaitu content, padding, border dan margin yang ditunjukan pada gambar 2.2 Box Model. Pemrograman Web | CSS 18
Gambar 2.2 Box Model Gambar 2.2 diatas menunjukan bentuk umum halaman sebuah website. CSS menggunakan konsep ini dalam mengatur tag HTML. Keberadaan jenis box model ini berguna untuk layout atau tata letak halaman website. Content pada gambar tersbut menunjukan text ataupun image yang akan muncul pada suatu halaman. Padding menentukkan jarak komponen body ke border atau ukuran jarak bagian dalam. Border digunakan untuk menggunakan garis tepi dari komponen dan margin ialah ukuran jarak bagian luar atau ukuran jarak sesusdah border. Contoh pernggunaan script box model. 1. <html> 2. <head> 3. <title>Implementasi CSS</title> 4. <style type=\"text/css\"> 5. div { 6. background-color:lightblue; 7. width: 300px; 8. border: 10px solid blue; 9. padding: 20px; 10. margin: 20px; 11. } 12. </style> 13. </head> 14. <body> 15. <h3 style=\"color: red;\">Cascading Style Sheets</h3> 16. Pemrograman Web | CSS 19
17. 18. <div> 19. Pada CSS dikenal sebuah istilah “Box Model” yang digunakan unt uk membuat design layout suatu halaman website. Terdapat empat bagian pada box model yaitu content, padding, border dan margin 20. </div> 21. </body> 22. </html> 23. Hasil yang akan ditampilakan pada script diatas ditunjukan pada gambar 2.3 Output Box Model. Gambar 2.3 Output Box Model Pemrograman Web | CSS 20
MODUL 3 JAVASCRIPT Tujuan Praktikum Mahasiswa mampu memahami konsep dasar Javascript Mahasiswa mampu mengimplementasikan penggunaan Javascript 1. Definisi Javascript Javascript menyediakan fasilitas pemrograman berbasi objek (bukan berorientasi objek) yang berada pada sisi client dan disimpan pada browser. Javascript dapat digunakan untuk membuat website lebih dinamis dan interaktif. Selain itu, javascript juga dapat berfungsi untuk menangani event handler aksi user, membaca, menulis & memanipulasi tag HTML dan melakukan validasi data. Javascript bersifat sequential yang artinya kode akan dieksekusi dari atas sampai kebawah secara berurutan. Pada pemrograman web, kode javascript dapat disisipkan dengan dua cara yaitu Embed Embed merupakan cara penyisipan kode javascript di dalam dokumen HTML. Perintah yang digunakan adalah sebagai berikut. <script type=\"text/javascript\"> ... </script> Pemrograman Web | Javascript 21
Linked / File Eksternal Linked atau file eksternal merupakan cara penyisipan kode javascript di luar dokumen HTML. Javascript akan dibuatkan satu file terpisah dengan HTML. Untuk menghubungkan dokumen HTML dan JS dengan memanggil file JS nya didalam dokumen HTML yang diletakkan pada bagian HEAD. Berikut kode program untuk memanggil file JS di dokumen HTML <script type=\"text/javascript\" src=\"script.js\"></script> 2. Variable dan Tipe Data Variable pada javascript bersifat case sensitive. Aturan penamaan variable pada javascript adalah harus diawali dengan huruf atau underscore, bukan reserved keyword dari javascript dan tidak menggandung karakter tanda baca atau karakter untuk operasi pada script. Varible pada javascript terbagi menjadi dua yaitu variable global yang dapat diakses oleh semua fungsi dan variable local yang hanya dapat diakses oleh fungsi itu sendiri. Deklarasi variable adalah sebagai berikut. var namavariabel = nilai; namavariabel = nilai; Berikut tipe data yang digunakan pada javascript No Tipe Data Deskripsi 1 var flag = true; 2 i = 2; Boolean 3 i = 3.5; Numerik Integer 4 nama = “user” ; Numerik Float String Pemrograman Web | Javascript 22
3. Operator Berikut merupakan operator pada javascript No Operator Deskripsi 1 + - * / % ++ -- Aritmatika 2 = += -= *= /= %= Assignment 3 == != > < >= <= Perbandingan 4 && || ! Logika 5 + (konkatenasi) String 6 [ekspresi] ? [aksiA] : [aksiB] Kondisi 4. Struktur Kontrol Struktur control merupakan salah satu dasar dari logika pemrograman yang harus dipahami. Struktur kontrol memberikan satu atau lebih kemungkinan dengan aksi yang berbeda beda. Pada javascript terdapat beberapa statement struktur kontrol diantaranya adalah IF, IF-ELSEIF-ELSE dan Switch Case. - IF Statement IF statement hanya memberikan satu kemungkinan kondisi, dimana jika kondisi terpenuhi maka akan bernilai TRUE dan jika tidak terpenuhi maka tidak akan menghasilkan nilai apapun. 1. <script type=\"text/javascript\"> 2. var i = 2; 3. if (i>0) { 4. document.write(i + \": positif\" + \"<br />\"); 5. } 6. </script> - IF-ELSEIF-ELSE Statement IF ELSE IF dan ELSE Statement memberikan satu atau lebih kemungkinan kondisi, dimana jika kondisi pertama tidak terpenuhi maka akan dilanjut pengecekan ke kondisi berikutnya sampai kondisi terpenuhi. Pemrograman Web | Javascript 23
1. <script type= \"text/javascript\"> 2. var i = 1; 3. if (i>0) { 4. document.write(\"positif\"); 5. } else if (i==0) { 6. document.write(\"nol\"); 7. } else { 8. document.write(\"negatif\"); 9. } 10. </script> - Switch - Case Switch - Case merupakan bentuk lain dari percabangan. Case digunakan untuk penulisan kode yang lebih efisien dan lebih mudah untuk dibaca. Kode program penggunaan case adalah sebagai berikut. 1. <script type=\"text/javascript\"> 2. var bil=2; 3. switch (bil) { 4. case \"0\" : document.write(\"nol\");break; 5. case \"1\" : document.write(\"satu\");break; 6. default : document.write(\"dua\"); 7. } 8. </script> 5. Perulangan Selain struktur kontrol, perulangan juga merupakan dasar logika pemrograman yang wajib untuk dipahami. Perulangan digunakan untuk mengulang proses atau perintah yang sama sampai batas yang ditentukan. Pada javascript terdapat tiga jenis perulangan yaitu while, do- while dan for Pemrograman Web | Javascript 24
- While While akan memeriksa terlebih dahulu expression diawal iterasi, apakah expression tersebut TRUE or FALSE. Jika bernilai TRUE maka aksi dalam loop akan dijalankan sampai batas yang ditentukan dan bernilai FALSE. 1. <script type=\"text/javascript\"> 2. var i = 0; 3. while (i<6) { 4. document.write(i+ \"<br />\"); 5. i++; 6. } 7. </script> - Do – While Do-While akan mengeksekusi aksi terlebih dahulu baru melakukan pengecekan expressionnya. Perulangan dalam Do-While akan berhenti jika suatu expression bernilai TRUE dan akan berjalan terus atau melakukan loop jika expression bernilai FALSE. 1. <script type=\"text/javascript\"> 2. var i=0; 3. do { 4. document.write(i+ \"<br />\"); 5. i++; 6. } while (i<6); 7. </script> Pemrograman Web | Javascript 25
- For Perulangan for merupakan jenis metode perulangan (iterasi) sudah diketahui jumlah statement pengulangannya yang telah ditentukan diawal pendifinisiannya. 1. <script type=\"text/javascript\"> 2. for (i=1;i<=7;i++) { 3. document.write( 4. \"<h\" + i + 5. \">Header \" + i + 6. \"</h\" + i + \">\" 7. ); 8. } 9. </script> 6. Function Function merupakan sekumpulan instruksi yang dilakukan yang menghasilkan suatu nilai balikan. Function juga dapat disebut sebagai modul atau sub program. Function mempunyai parameter sebagai masukan data. Contoh penggunaan function pada javacript adalah sebagai berikut. 1. <script type=\"text/javascript\"> 2. function tambah(bil) { 3. var hasil=1; 4. hasil += bil; 5. return hasil; 6. } 7. document.write(tambah(5)); 8. </script> 7. Dynamic HTML Dynamic HTML merupakan gabungan dari HTML + CSS + Javascript. Dynamic HTML dapat melakukan manipulasi dokumen web dengan cara pengubag isi elemen HTML (teks atau gambar) dan pengubah elemen visual seperti warna, ukuran , letak dan lainnya. Cara mengakses objek elemen (tag) HTML pada javacript adalah sebagai berikut. document.getElementByID(“namaIDHTML”); Pemrograman Web | Javascript 26
- Memanipulasi Isi Memanipulasi isi merupakan perintah untuk mengubah isi teks ataupu gambar menggunakan javascript. // Mengubah Isi Teks obj.innerText obj.innerHTML // Mengubah Gambar obj.src - Memanipulasi Visual Mengakses property dari objek style document.getElementById(\"namaID\").style.styleProperty styleProperty adalah tag style CSS document.getElementById(\"namaID\").style.fontSize Mengubah warna - obj.style.color - obj.style.backgroundColor Mengubah ukuran - obj.style.width - obj.style.height Mengubah posisi - obj.style.top - obj.style.left Menyembunyikan tampilan - obj.style.visibility - obj.style.display Pemrograman Web | Javascript 27
MODUL 4 PHP Tujuan Praktikum Mampu memahami pemrograman web dengan PHP Mampu memahami penggunaan array pada PHP Mampu memahami penggunaan struktur percabangan pada PHP Mampu memahami penggunaan struktur perulangan pada PHP 1. Pengenalan PHP PHP merupakan salah satu bahasa pemrograman berdasarkan server-side yang banyak digunakan oleh developer untuk mengembagkan suatu sistem informas. PHP merupakan singkatan dari PHP: Hypertext Preprocessor dan bersifat open source. Script PHP biasa diletakan dimanapun didalam dokumen yang diawali dengan simbol ( <?php ) dan diakhiri dengan simbol ( ?> ) serta dokumen php berekstensi ( *.php). Setiap statement dalam php diakhiri dengan tanda titik koma ( ; ). Kode PHP dikompilasi dan diproses oleh web server, kemudian hasilnya baru ditampilkan oleh browser (kode PHP-nya sendiri tidak terlihat jika source page dibuka dari browser). Karena bersifat server-side, maka diperlukan webserver (Apache), PHP Server dan database MySQL yang terintegrasi menjadi satu. Salah satu tools yang digunakan pada webserver ini ialah XAMPP yang dapat dijalan pada sistem operasi windows. 2. Webserver Untuk mendapatkan aplikasi webserver yang digunakan ialah XAMPP dapat mengunjungi url berikut ini www.apachefriends.org/download.html sampai terdapat jenis versi bergantung dari Pemrograman Web | PHP 28
sistem operasi yang digunakan. Gambar 4.1 berikut merupakan tampilan yang untuk halaman untuk mengunduh XAMPP. Gambar 4.1 Halaman Download Webserver XAMPP Pada proses installasi tentukan directory atau folder yang akan digunakan untuk menginstall aplikasi webserver xampp, pada umumnya tempat penyimpanan installasi webserver xampp terdapat alamat [Drive]:\\xampp\\htdocs, contohnya jika diinstall pada drive C sehingga alamatnya C:\\xampp\\. Setelah webserver terinstall, maka akan tersusun file pada tempat direktori penyimpanan installasi webserver yang ditunjukan pada gambar berikut: 1 2 Gambar 4.2 Direktori Installasi Webserver XAMPP Pemrograman Web | PHP 29
Keterangan gambar 4.2 ialah sebegai berikut: 1. Terdapat folder bernama htdocs, fungsi folder ini digunakan sebagai tempat penyimpanan file project web. Setiap project web dibuat folder terpisah pada htdocs contohnya akan membuat project dengan nama Latihan, maka buatkan folder latihan di dalam direktori htdocs tersebut. 2. Folder mysql, folder ini bertugas sebagai pengelolaan database mysql. Dalam folder tersebut terdapat folder bernama data, fungsi folder data tersebut ialah sebagai tempat penyimpanan database mysql pada project web yang digunakan. 1.1. Sintaks PHP Script PHP bisa diletakkan di manapun dalam dokumen, dimulai dengan tanda ( <?php ) dan diakhiri dengan tanda ( ?> ). Dokumen PHP disimpan dengan ekstensi “.php”, dimana file ini bisa menyimpan tag HTML. Berikut adalah contoh script PHP untuk menampilkan text “Hello World!”. 1. <?php 2. echo \"Hello World!\"; 3. ?> Simpan file tersebut dengan nama index.php pada sub folder penyimpanan webserver yang sudah dipaparkan pada sub 4.1, installasi webserver terinstall pada drive C:\\xampp\\ serta keterangan pada gambar 4.2 file script php disimpan pada folder htdocs atau C:\\xampp\\htdocs. Pada kasus ini filde disimpan pada sub folder dengan nama latihan. Sebelum mengcompline atau menjalankan script tersebut terdapat langkah yang perlu dilakukan untuk memulai webserver pada sub materi 4.3. 3. Menjalankan Project Latihan Webserver perlu di jalankan terlebih dahulu melalui aplikasi menu pada sistem operasi komputer dengan nama XAMPP, setelah aplikasi dipanggil akan tampil jendela xampp yang terdapat pada gambar 4.3 jendala xampp sebagai berikut: Pemrograman Web | PHP 30
1 2 Gambar 4.3 Jendela XAMPP Keterangan pada gambar 4.3 Jendela xampp: 1. Tombol pada module Apche pada mula nya terdapat tombol start, untuk memulai webserver maka klik tombol start. 2. Tombol pada module MySQL digunakan jika project web yang digunakan bekerja dengan database MySQL. Klik pada tombol start jika sudah mulai bekerja menggunakan database. Setelah memulai menjalankan webserver, langkah selanjutnya mulai membuka browser yang digunakan untuk menjalankan project latihan web. Pada browser ketikan dengan format berikut : localhost/[nama_folder_project_web]. Pada kasus ini maka kita dapat menuliskan format tersebut pada url browser menjadi localhost/latihan, sehingga script pada sub materi 4.2 dapat terlihat sebagai berikut: Gambar 4.4 Script latihan yang dijalankan pada browser Pemrograman Web | PHP 31
4. Deklarasi Variebel Pada pemrograman php, variabel dimulai dengan tanda “$” dan diikuti dengan nama variabel. Tipe data ditentukan ketika nilai dimasukkan kedalam variabel tersebut. Aturan-aturan untuk variabel php adalah sebagai berikut: 1. Sebuah variabel dimulai dengan tanda “$”, diikuti oleh nama variabel. 2. Sebuah nama variabel harus mulai dengan huruf atau karakter garis bawah “_”. 3. Sebuah nama variabel tidak boleh dimulai dengan angka. 4. Sebuah nama variabel hanya bisa mengandung karakter alpha-numeric dan garis bawah (A- z, 0-9, dan _) 5. Nama-nama variabel adalah case-sensitive, yaitu huruf besar dan huruf kecil mempengaruhi perbedaan variabel ($a dan $A adalah dua variabel yang berbeda) Berikut merupakan script php penerapan pada deklarasi variabel. 1. <?php 2. $text = \"Semangat Pagii..\"; 3. 4. echo \"Hello World!\"; 5. echo \"<br>\"; 6. echo \"Variabel text : \",$text; 7. ?> 8. Output yang dihasilkan dari script diatas ditampilkan pada gambar berikut. Gambar 4.5 Tampilan Script Menggunakan Deklarasi Variabel Pemrograman Web | PHP 32
5. Tipe Data Tipe data pada PHP lebih fleksibel, tidak perlu mendefinisikan jenisnya ketika mendefinisikan pertama kali. Terdapat 6 Tipe data dasar yang dapat diakomodasi di PHP, ditunjukan pada tabel berikut: Tabel 4.1 Tipe Data PHP Tipe Data Contoh Penjelasan Integer 1234 Nilai bilangan bulat Double 3.14 Nilai Pecahan String “Pemrograman Web” Kumpulan karakter Boolean False / True Salah satu nilai true atau false Object - Instabcec daru class Array - Larik. Contoh penggunaan tipe data ditunjukan pada script berikut: 1. <?php 2. // Penggunaan Tipe Data 3. $harga = 15000; 4. $qty = 4; 5. $diskon = 0.25; 6. 7. $potongan = $harga* $qty * $diskon; 8. $total = ($harga* $qty) - $potongan; 9. 10. echo \"Potongan : \",$potongan;echo \"<br>\"; 11. echo \"Total Harga : \",$total;echo \"<br>\"; 12. ?> Output yang dihasilkan ialah sebagai berikut: Gambar 4.6 Tampilan Script Penggunaan Tipe Data PHP Pemrograman Web | PHP 33
6. Operator Sebuah bahasa pemrograman juga wajib untuk mampu mengolah nilai operator (Variable atau konstanta yang dioperasikan) menggunakan operator, antara lain Operator Aritmatika, Operator Perbandingan, Operator Logika dan Operator String. 1. Operator Aritmatika Operator ini digunakan untuk melakukan perhitungan matematis, ditampilkan pada tabel berikut: Tabel 4.2 Operator Aritmatika Operator Aritmatika Deskripsi + Penjumlahan - Pengurangan / Pembagian * % Perkalian ++ Sisa Pembagian -- Increment Decrement 2. Operator Perbandingan Operator perbandingan digunakan untuk menghasilkan 2 nilai yang hasil akhirnya adalah nilai true dan false. Operator ini sangat berguna dalam pemrograman karena bisa menentukan alur pemrograman. Operator perbandingan di PHP ditampikan pada tabel berikut: Tabel 4.3 Operator Perbandingan Operator Perbandingan Deskripsi == Sama dengan != Tidak sama dengan > Lebih besar >= Lebih besar atau sama dengan < <= Lebih Kecil Lebih kecil atau sama dengan Pemrograman Web | PHP 34
3. Operator Logika Operator yang digunakan untuk menyusun ekspresi atau ungkapan logika. Hasil operasi ini akan didapatkan nilai satu jika benar dan nol jika salah. Tabel 4.4 Operator Logika Operator Logika Deskripsi AND atau && Kedua ekspresi bernilai true OR atau || Salah satu ekspresi bernilai true XOR ! Ekslusive OR Negasi 4. Operator String Operator string digunakan untuk menggabungkan teks, simbol yang digunakan untuk menggabungkan teks ialah ( . ). Pemrograman Web | PHP 35
MODUL 5 SELEKSI KONDISI Tujuan Praktikum Mampu memahami penggunaan struktur percabangan pada PHP Mampu memahami penggunaan perintah if tunggal Mampu memahami penggunaan perintah if dan else Mampu memahami penggunaan perintah if majemuk Mampu memahami penggunaan perintah switch 1. Seleksi Kondisi Seleksi kondisi merupakan salah satu struktur kontrol pada bahasa pemrograman yang merupakan inti dari logika pemrograman. Mekenisme statement seleksi kondisi menjelasakan apakah akan melakukan instruksi sebuah statement atau tidak bergantung dari kondisi yang telah ditentukan sebelumnya. Pada bahasa pemrograman PHP, terdapat jenis seleksi kondisi yaitu kondisi if, kondisi if.. else, kondisi if majemuk dan switch. 2. Perintah IF Kondisi (if…) merupakan seleksi kondisi yang paling sederhana, sering digunakan dan terdapat pada semua bahasa pemrograman. Statement if hanya akan menjalankan 1 aksi, jika kondisi bernilai true dan tidak akan melakukan aksi jika bernilai false. Bentuk umum perintah if ialah sebagai berikut: Pemrograman Web | Seleksi Kondisi 36
1. if (kondisi) 2. { 3. statement-1; 4. statement-2; 5. ... 6. } Perhatikan pada script php berikut ini: 1. <?php 2. //Seleksi Kondisi IF 3. $i = 1; 4. if ($i>0) { 5. echo $i.\" merupakan bilangan positif\"; 6. } 7. ?> Perintah if pada script diatas ditunjukan pada baris ke-4, yaitu variabel $i = 1 di olah diproses jika memenuhi kondisi lebih besar dari pada nilai 0 maka akan memberikan output berupa bilangan positif. Berikut merupakan output yang dihasilkan ditunjukan pada gambar 5.1. Gambar 5.1. Output Perintah IF Persoalan berikutnya bagaimana jika variabel $i bernilai lebih kecil 0? maka tidak ada statement yang untuk menangai kondisi tersebut. Oleh karena itu, diperlukan alternatif kondisi lainnya yaitu perintah if dan else. 3. Perintah IF dan ELSE Kondisi (if.. else..) disebut juga dengan seleksi kondisi ganda karena memilki statement else yang digunakan sebagai alternatif jika kondisi bernilai false. Apabila kondisi pertama bernilai true, Pemrograman Web | Seleksi Kondisi 37
maka statement pertama akan dijalankan. Sedangkan jika kondisi false, maka statement kedua yang akan dijalankan. Bentuk umum perintah (if.. else..) ialah sebagai berikut: 1. if (kondisi) 2. { 3. statement-1; 4. } 5. else 6. { 7. statement-2; 8. } Berikut merupakan penggunaan script pada perintah if dan else untuk menentukan bilangan bulat terhadap suatu variabel $i yang sudah ditentukan sebelumnya. 1. <?php 2. //Seleksi Kondisi IF-ELSE 3. $i = -1; 4. if ($i>0) { 5. echo $i.\" merupakan bilangan positif <br />\"; 6. } 7. else{ 8. echo $i.\" merupakan bilangan negatif <br />\"; 9. } 10. ?> Scipt diatas memiliki kondisi jika nilai $i bernilai lebih besar 0 (baris ke-4) akan mengeksekusi statement ke-1 yang ditunjukan pada baris ke-5. Sedangkan jika kondisi $i tidak tepenuhi maka akan menujuk statement ke-2 yang ditunjukan pada baris ke-8. Output yang dihasilkan ditunjukan pada gambar 5.2. Gambar 5.2. Output Perintah IF-ELSE Pemrograman Web | Seleksi Kondisi 38
4. Perintah IF Majemuk Perintah if majemuk atau disebut juga bersarang merupakan multi-kondisi yang memilki lebih dari dua kondisi atau n kondisi (hingga kondisi tak hingga). Jika kondisi pertama nilai kebenarannya bernilai false, maka akan berpindah pada kondisi kedua. Namun jika kondisi kedua tetap bernilai false kondisinya, maka akan berpindah pada kondisi ketiga begitu seterusnya hingga ditemukan kondisi bernilai true. Bentuk umum perintah if majemuk ialah sebagai berikut: 1. if (kondisi-1) 2. { 3. statement-1; 4. } 5. elseif (kondisi-2) 6. { 7. statement-2; 8. } 9. else { 10. statement-3; 11. } Berikut merupakan script yang digunakan pada perintah manjemuk if majemuk untuk menentukan bilangan positif, bilangan nol dan bilangan negative dari sebuah variabel $i yang telah ditentukan nilainya. 1. <?php 2. //Seleksi Kondisi IF Majemuk 3. $i = -8; 4. if ($i>0) { 5. echo $i.\" merupakan bilangan positif\"; 6. } else if ($i==0) { 7. echo $i.\" merupakan bilangan nol\"; 8. } else { 9. echo $i.\" merupakan bilangan negatif\"; 10. } 11. ?> Pada script diatas nilai variabel i bernilai -8 (baris ke-3). Kondisi pertama pada baris ke-4 menunjukan jika nilai i lebih besar dari nol, maka akan mengeksekusi statement pertama yang ditunjukan pada baris ke-5 mengeularkan output berupa bilangan positif. Kondisi kedua pada baris ke-6 nilai i sama dengan 0 merupakan alternatif pilihan kondisi pertama (baris ke-4) tidak terpenuhi akan mengeksekusi statement ke-2 dengan output bilangan nol yang ditunjukan pada baris ke-7. Jika kondisi pertama dan kedua tidak terpenuhi maka statement ke-n akan diekseskusi Pemrograman Web | Seleksi Kondisi 39
yang ditunjukan pada baris ke-9. Output tersebut akan menghasilkan pesan bilangan negative jika nilai i diisi dengan nilai -8 yang ditunjukan pada gambar 5.3. Gambar 5.3. Output Perintah IF Majemuk 5. Perintah SWITCH Seleksi kondisi terakhir yaitu switch yang penggunaannya sama dengan perintah if namun perbedaannya pada switch di bagi menjadi beberapa case, setelah itu masing-masing case disesuaikan dengan kondisinya. Jika salah satu case bernilai bernilai true, maka statement pada case tersebut yang akan dilakukan. Sedangkan jika salah akan mencari case berikutnya dan jika tidak ditemukan sampai bernilai true, maka akan diberikan statement defaultnya. Bentuk umum perintah switch ialah sebagai berikut: 1. switch($variabel) { 2. case kondisi-1 : 3. statement-1;break; 4. case kondisi-2 : 5. statement-2;break; 6. case kondisi-n : 7. statement-n;break; 8. break; 9. [default : statement default;] 10. } Script berikut merupakan implementasi penggunaan switch untuk menentukan nama bilangan terhadap nilai variabel yang telah ditentukan nilainya. 1. <?php 2. //Penggunaan switch untuk menentukan bilangan 3. $bil=2; 4. switch ($bil) { Pemrograman Web | Seleksi Kondisi 40
5. case 0 : 6. echo $bil.\" ialah Nol\"; 7. break; 8. 9. case 1 : 10. echo $bil.\" ialah Satu\"; 11. break; 12. 13. case 2 : 14. echo $bil.\" ialah Dua\"; 15. break; 16. } 17. ?> default : echo \"bilangan lainnya\"; Penjelasan script diatas pada baris ke-3 dilakukan inisialiasasi varibel $bil dengan nilai 2. Pembagian case disesuaikan berdasarkan kondisi yang diberikan ditunjukan pada baris ke-4. Baris ke-4 menunjukan jika kondisi dengan variabel $bil sesuai dengan nilai yang telah diberikan maka akan menujuk pada case yang memilki nilai tertentu, pada baris ke-5 nilai case 0 maka akan mengekseskusi statemen 1 di baris ke-6, baris ke-8 nilai case 1 maka akan mengekseskusi statemen 2 di baris ke-9, baris ke-11 nilai case 2 maka akan mengekseskusi statemen 3 di baris ke-12, dan jika tidak ditemukan nilai case maka akan diberikan statement nilai umum atau nilai default yang dtitunjukan pada baris ke-15. Berikut merukan output yang dihasilkan pada script tersebut pada gambar 5.4. Gambar 5.3. Output Perintah Switch Pemrograman Web | Seleksi Kondisi 41
MODUL 6 PERULANGAN Tujuan Praktikum Mampu memahami penggunaan struktur perulangan pada PHP Mampu memahami penggunaan perintah for pada PHP Mampu memahami penggunaan perintah while pada PHP Mampu memahami penggunaan perintah do while pada PHP Mampu memahami penggunaan perintah foreach pada PHP 1. Perulangan Perulangan atau disebut dengan looping merupakan salah satu struktur kontrol seperti seleksi kondisi namun secara mekanisme berbeda dengan seleksi kondisi. Perulangan akan mengeksekusi statement yang akan terus menerus dijalankan secara berulangan selama kondisi berinilai true dan akan berhenti apabila kondisi bernilai false. Contoh pengunaan perulangan ialah akan mencetak sebuah kalimat “Hello Pemrograman Web” sebanyak 100 kali, secara manual akan mencetak menggunakan perintah echo sebanyak 100kali dan terdapat 100 baris sedangkan dengan looping atau perulangan akan meringkas script menjadi sekali statement pada kalimat tersebut dengan kondisi cetak kalimat sampai dengan 100kali. Konsep perulangan akan memudahkan dalam mengeksekusi statement yang digunakan secara berulang dibandingankan dengan secara manual sehingga lebih efisien dan efektif dalam pembuatan script PHP. Terdapat beberapa metode perulangan atau looping yang digunakan pada bahasa pemrograman PHP antara lain for, while, do while dan foreach. Pemrograman Web | Perulangan 42
2. Perintah FOR Perulangan for merupakan jenis metode perulangan (iterasi) sudah diketahui jumlah statement pengulangannya yang telah ditentukan diawal pendifinisiannya. Bentuk umum perintah for ialah sebagai berikut: 1. for(nilai_awal; syarat_terjadinya_loop; inc_atau_dec) 2. { 3. statement-1; 4. statement-2; 5. ... 6. statement-n; 7. } Penjelasan pada bentuk perintah for diatas pada baris pertama merupkan kondisi yang terpenuhu dengan jumlah perulangan yang telah ditentukan. Nilai awal merupakan inisialiasi nilai dimulainya perulangan yang disimpan dalam sebuah variabel. Syarat terjadinya loop ialah keadaan varibel tersebut akan tetap diulang. Increment atau decrement merupakan nilai kenaikan atau nilai penurunan terhadap nilai awal sampai dengan terjadinya loop. Script berikut merupakan penggunana perintah for untuk menampilan sebuah bilangan mulai dari 1 sampai dengan 10 bilangan. 1. <?php 2. //Perulangan FOR 3. for ($i=1; $i <= 10; $i++) { 4. echo \"Bilangan ke - $i<br>\"; 5. } 6. ?> Script diatas efektif dan efisien dibandingkan dengan menggunakan manual dengan cara menampilkan bilangan 1 sampai dengan 10 menggunakan echo. Dengan menggunakan looping dapat menghemat pengkodean secara ringkas cukup dengan 3 baris yang ditunjukan pada baris ke-3 sampai dengan baris ke-5 atau bisa 2 baris jika penutup atau end loop ditempatkan langsung pada baris ke-3. Pada baris ke-3 nilai awal yang diidentifikasikan ialah 1 yang ditampung pada variabel $i. Syarat terjadinya looping untuk menampilkan bilangan tersebut ialah nilai variabel $i lebih kecil atau sama dengan 10, Statement pada baris ke-4 yang menampilkan bilangan ke-i akan tetap dieksekusi jika nilainya lebih kecil atau sama dengan 10 dan akan keluar dari looping atau stop jiga nilai $i akan lebih dari pada nilai 10. Blok yang terakhir menggunakan increment Pemrograman Web | Perulangan 43
karena nilai $i akan terus meningkata atau bertambah sampai dengan syarat yang telah ditentukan. $i++ merupakan singkatan dari $i = $i + 1. Output yang dihasilkan pada script diatas ditunjukan pada gambar 5.1 sebagai berikut: Gambar 5.1 Output Perulangan FOR. 3. Perintah WHILE Perulangan while mirip dengan for, namun untuk menentukan kondisinya hanya dengan menggunakan operator perbandingan atau ekspresi tertentu sebagai batas perulangannya. Pada while, selama kondisi perulangan bernilai true maka akan melakuakan eksesusi statement tersebut. Bentuk umum perintah while ialah sebagai berikut: 1. while (kondisi) { 2. statement-1; 3. statement-2; 4. ... 5. statement-n; 6. } Bentuk umum perintah while pada baris pertama menunjukan kondisi atau ekspresi tertentu untuk mengeksekusi statement 1 sampai dengan statement ke-n yang ditunjukan pada baris ke- 2 sampai dengan baris ke-5 jika bernilai true namun tidak akan menjalakan perulangan jika tidak memenuhi kondisi atau ekspresi yang telah diberikan pada baris pertama tersebut. Hal yang perlu diingat dalam penggunaan while, inisialisasi sebagai nilai awal di tematkan sebelum menggunakan while dan increment atau decrement terletak pada badan while. Pemrograman Web | Perulangan 44
Sama halnya seperti pada contoh penggunaan for sebelumnya, script berikut merupakan penggunaan while untuk menampilkan sebuah bilangan dari 1 sampai dengan 10 bilangan. 1. <?php 2. //Peulangan While 3. echo \"<h3>Perulangan While</h3>\"; 4. $i= 1; 5. while ($i <= 10) { 6. echo \"Bilangan ke - $i<br>\"; 7. $i++; 8. } 9. ?> Penggunaan while pada script diatas diawali dengan identifikasi variabel $i sebagai nilai awal yaitu diberikan sebuah nilai 1. Blok while dimulai pada baris ke-4 dengan syarat kondisi nilai variabel $i lebih kecil atau sama dengan 10 maka akan dilakukan statement pada baris ke-5 dan ke-6. Statement pertama pada baris ke-5 menunjukan output atau keluaran yang akan ditampilkan pada browser berupa sebuah bilangan dari 1 sampai dengan 10 sedangkan statement kedua pada baris ke-6 ditujukan untuk melakukan increment atau peningkatan bilangan yang ditulisakan dengan $i++ atau sama pengertiannya dengan $i = $i+1 jika tidak disertakan batas pada increment maka bilangan tidak akan bertamah dan akan melakukan looping atau perulangan secara terus menerus atau tanpa henti yang disebut juga infinite loop. Output yang dihasilakan pada script diatas ditunjukan pada gambar 5.2. Gambar 5.2 Output Perulangan While. Pemrograman Web | Perulangan 45
4. Perintah DO WHILE Berbeda halnya dengan perintah while, perintah do while memiliki mekanisme akan mengeksekusi statement terlebih dahulu setelah itu akan mengecek kondisi atau ekspresi pada perulangan tersebut selama bernilai true dan akan keluar dari perulangan atau stop jika kondisi atau ekspresi bernilai false. Bentuk umum perintah do while ialah sebagai berikut: 1. do { 2. statement-1; 3. statement-2; 4. ... 5. statement-n; 6. } while (kondisi); Blok perulangan pada do while ditunjukan dimulai pada baris ke-1 sampai dengan baris ke- 6. Statemen yang berada pada blok perulangan pada baris ke-2 sampai dengan baris ke-5 akan dieksekusi terlebih dahulu setelah itu dicek nilai kondisi atau ekspresi yang beralaku pada perulangan tersbut di baris ke-6. Contoh penggunaan do while untuk menampilkan suatu bilangan dari 1 sampai dengan 10 ditunjukan pada script berikut. 1. <?php 2. //Peulangan do while 3. echo \"<h3>Perulangan Do While</h2>\"; 4. $i = 1; 5. do { 6. echo \"Bilangan ke - $i<br>\"; 7. $i++; 8. } while ($i <= 10); 9. ?> While dan do while perlu memberikan inisialisasi nilai awal sebelum dilakukan eksekusi perulangan. Nilai awal disimpan pada variabel $i pada baris ke-4 dengan nilai 4, setelah itu langsung dilakukan pengeksekusian pada statemen pertama di baris ke-6 untuk menampilkan suatu bilangan ke-i atau bilangan 1 sampai dengan 10. Statement kedua yang ada pada baris ke-7 digunakan sebagai incerement atau peningkatan nilai bilangan $i yang bertingkat mulai dari nilai 1 sampai dengan 10, setelah nilai $i melebihi nilai 10 maka tidak akan melakukan pengulangan atau berhenti dari perulanan tersebut. Berikut merupakan output yang dihasilakan dari script diatas ditunjukan pada gambar 5.3. Pemrograman Web | Perulangan 46
Gambar 5.3 Output Perulangan Do While. 5. Perintah FOREACH Metode perulangan foreach ini merupakan jenis perulangan yang paling berbeda dari perulangan sebelumnya karen perulangan foreach berguna untuyk memecah isi dari tipe data array atau dapat menyederhanakan nilai array agar dapat dibaca dengan mudah. Bentuk umum foreach ialah sebagai berikut. 1. foreach ($variable as $key => $value) { 2. # code... 3. } Bentuk umum penulisan foreach menggunakan key atau index. untuk mengambil kunci array tersebut, namun dapat juga mengambil nilainya secara langsung. Setiap element pada array tersebut akan di tempatkan pada variabel $value. Sebelum masuk pada perulangan foreach akan sedikit mengulas penggunaan array. Array merupakan struktur data yang berisi sekimpulan data dan memiliki indeks. Tujuan indeks pada array ini digunakan untuk mengakses nilai array. Contoh penggunaan array pada kasus bahasa pemrograman yang memiliki 3 buah data antara lain C++, PHP dan Java. 3 buah data tersebut akan disimpan pada variabel $pemrograman sehingga dapat divisualisasikan data tersebut berserta indeks pada tabel 5.1 data array. Pemrograman Web | Perulangan 47
Search
