Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Modul Design & Pemrograman Web

Presentasi serupa


Presentasi berjudul: "Modul Design & Pemrograman Web"— Transcript presentasi:

1 Modul Design & Pemrograman Web
Dosen: Achmad Zakki Falani, S.Kom Fakultas Ilmu Komputer Universitas Narotama NEXT

2 Kehadiran : 10 % Tugas : 15 % Keaktifan : 15 % NIlai UTS : 30 %
Kriteria Penilaian: Kehadiran : 10 % Tugas : 15 % Keaktifan : 15 % NIlai UTS : 30 % Nilai UAS : 30 % BACK NEXT

3 Konsep Dasar Web Design
Perencanaan website Proses ini merupakan awal dalam merencanakan halaman web. Dimulai dengan mengumpulkan seluruh data serta informasi kemudian hasil akhirnya adalah sebuah “site map” lalu dimulai dengan merancang tata letak (LayOut) halaman, biasanya dilakukan mendesain tata letak halaman depan dan halaman kedua. Dalam mendesain halaman ini beberapa komponen penting biasanya masuk adalah content, rencana letak image, copyright/hak cipta (bagian footer), serta komponen website dan hal lain yang dianggap perlu (animasi, video, musik, dll). NEXT

4 Konsep Dasar Web Design
BACK NEXT

5 Konsep Dasar Web Design
Desain Halaman Web Dasar Berdasarkan hal diatas selanjutnya kita mulai melakukan desain web dengan menterjemahkan perencanaan ke dalam software desain, keahlian yang mesti diperdalam adalah typografi (kemampuan memilih font yang tepat), tata letak halaman (menguasai kemampuan membagi ruang halaman), pewarnaan (menguasai konsep warna dan pemilihan warna berdasarkan warna perusahaan dan teori pencampuran warna). Software yang digunakan salah satunya Adobe Photoshop, dengan mempelajari pembuatan tombol/navigasi, background, bekerja dengan teks, manipulasi gambar/image, dan khususnya memperdalam teknik – teknik desain website. BACK NEXT

6 Konsep Dasar Web Design
Bagaimana komentar Anda tentang Template Web berikut?... BACK NEXT

7 Konsep Dasar Web Design
Bagaimana komentar Anda tentang Template Web berikut?... BACK NEXT

8 Konsep Dasar Web Design
Bagaimana komentar Anda tentang Template Web berikut?... BACK NEXT

9 Konsep Dasar Web Design
Bagaimana komentar Anda tentang Template Web berikut?... BACK NEXT

10 Dasar Skrip / Tag HTML Pertanyaan mendasar dari web designer pemula:
Sulitkah pemrograman HTML?.... Apa yang dimaksud tag dalam HTML?... Bagaimana belajar dari Design Web yang sudah ada?... BACK NEXT

11 Dasar Skrip / Tag HTML <html> <head>
<title>Judul / Title</title> </head> <body> Isi / Content </body> </html> BACK NEXT

12 Dasar Skrip / Tag HTML Heading <html> <head>
<title>Latihan 01</title> </head> <body> <h1> Heading Point </h1> <h2> Heading Point </h2> <h3> Heading Point </h3> <h4> Heading Point </h4> <h5> Heading Point </h5> <h6> Heading Point </h6> Normal body text - 12 Point </body> </html> BACK NEXT

13 Dasar Skrip / Tag HTML Paragraf dan Break <html> <head>
<title>Latihan 02</title> </head> <body> Universitas Narotama Surabaya <br> Fakultas Ilmu Komputer <p> Jurusan Sistem Komputer & Sistem Informasi </body> </html> BACK NEXT

14 Dasar Skrip / Tag HTML HR (Horizontal Rule) <html> <head>
<title>Latihan 03</title> </head> <body> <h1>Universitas Narotama Surabaya</h1> <hr> </body> </html> BACK NEXT

15 Dasar Skrip / Tag HTML Font <html> <head>
<title>Latihan 04</title> </head> <body> <font face=verdana size=3 color=blue>Fakultas Ilmu Komputer</font> </body> </html> BACK NEXT

16 Dasar Skrip / Tag HTML Soal (1)
Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

17 Dasar Skrip / Tag HTML Soal (2)
Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

18 Dasar Skrip / Tag HTML Soal (3)
Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

19 Tugas (1) Mencari artikel dengan tema Design Web
Pelajari dengan seksama artikel yang Anda dapatkan BACK NEXT

20 Dasar Tag HTML Catatan:
Jika Anda ingin menambahkan komentar pada dokumen HTML,maka tulislah Tag <! >,misal: <!perubahan terakhir 27/6/96> NEXT

21 Dasar Tag HTML Table Salah satu cara yang paling kompak dan paling mudah dibaca dalam menampilkan item informasi adalah dengan tabel. Manfaat Tabel: Tabel dapat digunakan untuk menampilkan teks, link, grafik atau item lainnya yang dapat dikirimkan ke tempat lain manapun melalui halaman web. Tabel dapat digunakan untuk menyajikan informasi, atau bahkan dapat diperkuat dengan batas, warna, dan grafik sedemikian rupa, sehingga tabel itu sendiri menjadi item – item dekorasi. NEXT

22 Dasar Tag HTML Table <table> <tr>
<td>Columns Item</td> </tr> </table> Tabel dibentuk dari kiri atas, dan melintasi kolom - kolomnya. Setiap item diapit dengan tag <td></td>, dan setiap baris diapit dengan tag <tr></tr>. BACK NEXT

23 Dasar Tag HTML Table <html> <head>
<title>Latihan 17</title> </head> <body> <table> <tr> <td>Earth</td> <td>Air</td> </tr> <td>Fire</td> <td>Water</td> </table> </body> </html> BACK NEXT

24 Dasar Tag HTML Table Table Properties:
BORDER = akan memberikan garis pembatas pada tabel. CELLSPACING = akan menset jarak dalam piksel antara batas dalam dan batas luar. CELLPADDING= akan menset jarak dalam piksel antara batas dalam dan teksnya. ALIGN = penjajaran rata kanan, kiri atau tengah. BGCOLOR = akan memberikan efek warna pada tabel. ROWSPAN = untuk menset jumlah baris ke bawah. COLSPAN = untuk menset jumlah kolom ke kanan. WIDTH = untuk menset batas lebar / panjang tabel. HEIGHT = untuk menset batas tinggi tabel. BACK NEXT

25 Dasar Tag HTML Table <html> <head>
<title>Latihan 18</title> </head> <body> <h3>Daftar Nama Siswa</h3> <table border=1 cellpadding=3 cellspacing=3> <tr> <td align=center>NIM</td> <td align=center>NAMA LENGKAP</td> </tr> <td> </td> <td>Nur Qomari</td> </table> </body></html> BACK NEXT

26 Table (kolom bewarna) <html>
Dasar Tag HTML Table (kolom bewarna) <html> <head> <title>Latihan 19</title> </head> <body> <h3>Daftar Nama Siswa</h3> <table border=1 cellpadding=3 cellspacing=3> <tr bgcolor=silver> <td align=center>NIM</td> <td align=center>NAMA LENGKAP</td> </tr> <tr> <td> </td> <td>Nur Qomari</td> </table> </body></html> BACK NEXT

27 Dasar Tag HTML Table <html> <head>
<title>Latihan 20</title> </head> <body> <h3 align=center>Daftar Nama Siswa</h3> <table border=1 cellpadding=3 cellspacing=3 align=center> <tr bgcolor=silver> <td align=center>NIM</td> <td align=center>NAMA LENGKAP</td> </tr> <tr> <td> </td> <td>Nur Qomari</td> </table> </body></html> BACK NEXT

28 Dasar Tag HTML Table <html> <head>
<title>Latihan 21</title> </head> <body> <h3 align=center>Daftar Nama Siswa</h3> <table border=1 cellpadding=3 cellspacing=3 align=center> <tr bgcolor=silver> <td align=center colspan=2> NIM & NAMA LENGKAP </td> </tr> <tr> <td> </td> <td>Nur Qomari</td> </table></body></html> BACK NEXT

29 Dasar Tag HTML Soal (8) Tuliskan Source Code dari tampilan berikut:
VIEW BACK NEXT

30 Dasar Tag HTML Soal (9) Tuliskan Source Code dari tampilan berikut:
VIEW BACK NEXT

31 Dasar Tag HTML Soal (10) Tuliskan Source Code dari tampilan berikut:
VIEW BACK NEXT

32 Dasar Tag HTML Images Tag HTML untuk memasukkan gambar:
<img src=filename> Catatan: img src=image source BACK NEXT

33 Dasar Tag HTML Images Images Properties:
HSPACE = memberikan spasi di kanan dan di kiri gambar. VSPACE = memberikan spasi di atas dan di bawah gambar. WIDTH = untuk menset batas lebar / panjang gambar. HEIGHT = untuk menset tinggi gambar. BORDER = memberikan garis batas yang mengelilingi gambar. BACK NEXT

34 Dasar Tag HTML Images <html> <head>
<title>Latihan 22</title> </head> <body> <img src=test.gif width=400 height=300> </body> </html> BACK NEXT

35 Dasar Tag HTML Images <html> <head>
<title>Latihan 23</title> </head> <body> <h2 align=center>Images Center</h2> <center> <img src= test.jpg width=400 height=300> </center> </body> </html> BACK NEXT

36 Dasar Tag HTML Images <html> <head>
<title>Latihan 24</title> </head> <body> <h2 align=center>Images Border</h2> <center> <img src= test2.jpg width=400 height=300 border=1> </center> </body> </html> BACK NEXT

37 Dasar Tag HTML Images & Body Background <html> <head>
<title>Latihan 25</title> </head> <body background=bg.gif> </body> </html> VIEW BACK NEXT

38 Dasar Tag HTML Images & Table <html> <head>
<title>Latihan 26</title> </head> <body> <h3>Daftar Nama Siswa</h3> <table border=1 cellpadding=3 cellspacing=3> <tr align=center> <td background=bg2.gif>NIM</td> <td background=bg2.gif>NAMA LENGKAP</td> </tr> <tr> <td> </td> <td>Nur Qomari</td> </table> </body></html> VIEW BACK NEXT

39 Dasar Tag HTML Images & Table <html> <head>
<title>Latihan 27</title> </head> <body> <table border=10 cellspacing=10 cellpadding=10> <tr> <td><img src=photo1.jpg width=200 height=200></td> <td><img src=photo2.jpg width=200 height=200></td> <td><img src=photo3.jpg width=200 height=200></td> </tr> <td>Wallpaper1.JPG 800 X 600</td> <td>Wallpaper2.JPG 800 X 600</td> <td>Wallpaper3.JPG 800 X 600</td> </table> </body> </html> VIEW BACK NEXT

40 Dasar Tag HTML Soal (11) Tuliskan Source Code dari tampilan berikut:
Filename:logo_unnar.gif Size:250X250 VIEW BACK NEXT

41 Dasar Tag HTML Soal (12) Tuliskan Source Code dari tampilan berikut:
Filename:bg2.gif Size:7X30 VIEW BACK NEXT

42 Dasar Tag HTML Soal (13) Tuliskan Source Code dari tampilan berikut:
Filename:photo1.gif Size:300X400 Filename:photo2.gif Size:300X400 VIEW BACK NEXT

43 Dasar Tag HTML Link Tag Link pada HTML:
<a href=url/filename>……..</a> Catatan: HREF=Hypertext REFerence NEXT

44 Dasar Tag HTML Link URL <html> <head>
<title>Latihan 28</title> </head> <body> <a href=http://yahoo.com>Yahoo</a> <p> <a href=http://google.com>Google</a> </body> </html> BACK NEXT PREVIEW

45 Dasar Tag HTML Link File <html> <head>
<title>Latihan 29</title> </head> <body> <a href=latihan_27.html>Latihan 27</a> <p> <a href=latihan_28.html>Latihan 28</a> </body> </html> BACK NEXT PREVIEW

46 Dasar Tag HTML Link E-mail
<a href=mailto:nama_ >Send to </a> BACK NEXT

47 Dasar Tag HTML Marquee Marquee = Menampilkan objek dengan memberikan efek berjalan. BACK NEXT

48 Dasar Tag HTML Marquee Tag Marquee pada HTML:
<marquee behavior=…>……..</marquee> BACK NEXT

49 Dasar Tag HTML Marquee Style Maquee: ALTERNATE SCROLL SLIDE BACK NEXT

50 Dasar Tag HTML Marquee Direction Maquee: Down Left Right Up BACK NEXT

51 Dasar Tag HTML Marquee <html> <head>
<title>Latihan 30</title> </head> <body> <marquee behavior=alternate direction=up>Universitas Narotama Surabaya</marquee> </body> </html> BACK NEXT PREVIEW

52 Dasar Tag HTML Marquee <html> <head>
<title>Latihan 31</title> </head> <body> <marquee behavior=alternate width=100>Universitas Narotama Surabaya</marquee> </body> </html> BACK NEXT PREVIEW

53 Dasar Tag HTML Marquee <html> <head>
<title>Latihan 32</title> </head> <body> <marquee behavior=alternate width=100 scrolldelay=500> Universitas Narotama Surabaya </marquee> </body> </html> BACK NEXT PREVIEW

54 Dasar Tag HTML Soal Tuliskan Source Code dari tampilan berikut: BACK
NEXT PREVIEW

55 Dasar Tag HTML Soal Tuliskan Source Code dari tampilan berikut: BACK
NEXT PREVIEW

56 Dasar Tag HTML Soal Tuliskan Source Code dari tampilan berikut: BACK
NEXT PREVIEW

57 Dasar Tag HTML Form Awal formulir ditandai dengan Tag <FORM>, dan berisi dua kata kunci: METHOD dan ACTION. <form name=nama_form method=post/get action=nama_file/ > BACK NEXT

58 Dasar Tag HTML Form <html> <head>
<title>Latihan 33</title> </head> <body> <form name=mhs_baru method=post action=proses.php> ……………… </form> </body> </html> BACK NEXT

59 Dasar Tag HTML Form Input Text:
<input name=nama_input type=text size=lebar_input maxlength=kar._maks.> <html> <head> <title>Latihan 34</title> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20 maxlength=8><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> BACK NEXT

60 Dasar Tag HTML Form Radio Button:
<input name=nama_input type=radio checked> <html> <head> <title>Latihan 35</title> </head> <body> <form name=form_jeniskelamin> Jenis Kelamin:<br> <input name=gender type=radio checked> Laki-laki<br> <input name=gender type=radio> Perempuan </form> </body> </html> BACK NEXT

61 Dasar Tag HTML Form Check Box:
<input name=nama_input type=checkbox checked> <html> <head> <title>Latihan 36</title> </head> <body> <form name=form_fak> Fakultas Ilmu Komputer:<br> <input name=si type=checkbox checked> Sistem Informasi<br> <input name=sk type=checkbox> Sistem Komputer </form> </body> </html> BACK NEXT

62 Dasar Tag HTML Form Drop-down List: <select name=nama_list>
<option value=nama_opsi1>…</option> <option value=nama_opsi2>…</option> <option value=nama_opsi3>…</option> </select> BACK NEXT

63 Dasar Tag HTML Form Drop-down List: <html> <head>
<title>Latihan 37</title> </head> <body> <form name=list> Level:<br> <select name=level> <option value=stand>Standart</option> <option value=prof>Professional</option> </select> </form> </body> </html> BACK NEXT

64 Dasar Tag HTML Form Textarea:
<textarea name=nama_input rows=ukuran_tinggi cols=ukuran_lebar> </textarea> BACK NEXT

65 Dasar Tag HTML Form Textarea: <html> <head>
<title>Latihan 38</title> </head> <body> <form name=alamat> Alamat:<br> <textarea name=alamat rows=4 cols=40> </textarea> </form> </body> </html> BACK NEXT

66 Dasar Tag HTML Form Button:
<input type=submit/reset value=caption> Catatan: type=submit, akan mendefinisikan sebagai tombol untuk menyerahkan umpan balik. type=reset, akan mendefinisikan tombol untuk menghapus isi formulir. BACK NEXT

67 Dasar Tag HTML Form Button: <html> <head>
<title>Latihan 39</title> </head> <body> <form name=frm_submit method=post action=latihan_39.html> Alamat:<br> <textarea name=alamat rows=4 cols=40> </textarea><br> <input type=submit value=Kirim>   <input type=reset value=Reset> </form> </body> </html> BACK NEXT

68 Dasar Tag HTML Soal (14) Tuliskan Source Code dari tampilan berikut:
Catatan: Username dan Password panjang karakter = 10 BACK NEXT

69 Dasar Tag HTML Soal (15) Tuliskan Source Code dari tampilan berikut:
Catatan: Event submit terletak pada list BACK NEXT

70 Dasar Tag HTML Soal (16) Tuliskan Source Code dari tampilan berikut:
Catatan: Tombol submit bertipe gambar BACK NEXT

71 Dasar Tag HTML Soal (17) Tuliskan Source Code dari tampilan berikut:
Catatan: Nama dan Alamat tidak dapat ditulisi BACK NEXT

72 Dasar Tag HTML Soal (18) Tuliskan Source Code dari tampilan berikut:
Catatan: NIM dan Nama tidak bisa mendapatkan set focus BACK END

73 Dasar Tag HTML Tugas catatan:
Buatlah suatu home page yang berisi biografi Anda dengan menggunakan notepad. Berilah nama file dokumen html dengan NIM Anda. misal: html Kirim melalui catatan: Apabila dokumen Anda ternyata terbuat dari Web Editor selain notepad, maka tidak akan ada koreksi. END

74 Dasar Tag HTML Text Alignment <html> <head>
<title>Latihan 05</title> </head> <body> <h1 align=center>Text Alignment</h1> <p align=center>Set in the centre of the window <p>Back to Normal <p align=right>Align to Right <p align=left>Align to Left </body> </html> BACK NEXT

75 Dasar Tag HTML Style pada Font <b>……</b>
Tag ini untuk membuat bold (tebal) <i>.…..</i> Tag ini untuk membuat italic (miring) <u>…..</u> Tag ini untuk membuat underline (garis bawah) <tt>…..<tt> Tag ini untuk membuat huruf dengan efek mesin ketik (font Courier) BACK NEXT

76 Dasar Tag HTML Style pada Font <html> <head>
<title>Latihan 07</title> </head> <body> <b>If you set words in bold</b> <p> <i>If you set words in italic</i> <p> <u>If you set words in underline</u> <p> <tt>If you set words in typewriter</tt> </body> </html> VIEW BACK NEXT

77 Dasar Tag HTML Background <html> <head>
<title>Latihan 08</title> </head> <body bgcolor=blue> </body> </html> Catatan: *) Pemberian warna pada background dapat juga menggunakan kode heksadesimal VIEW BACK NEXT

78 Dasar Tag HTML Catatan: Browser akan mengabaikan spasi yang berlebihan. Sehingga Anda dapat membuat spasi sekehendak hati Anda untuk memudahkan pembacaan kode Anda. <html> <head> <title>Latihan 09</title> </head> <body> <h2>Words1  Words2</h2> </body> </html> BACK NEXT

79 Variasi bullet pada HTML:
Dasar Tag HTML Bullet & Numbering Variasi bullet pada HTML: Disc, memberikan efek lingkaran (default) Square, memberikan efek persegi empat Circle, memberikan efek lingkaran yang transparan BACK NEXT

80 Dasar Tag HTML Bullet & Numbering <html> <head>
<title>Latihan 10</title> </head> <body> <h3>Daftar Fakultas: <ul type=disc> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ul> </h3> </body> </html> Catatan: ul = unordered list li = list item BACK NEXT

81 Dasar Tag HTML Bullet & Numbering <html> <head>
<title>Latihan 11</title> </head> <body> <h3>Daftar Fakultas: <ul type=square> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ul> </h3> </body> </html> BACK NEXT

82 Dasar Tag HTML Bullet & Numbering <html> <head>
<title>Latihan 12</title> </head> <body> <h3>Daftar Fakultas: <ul type=circle> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ul> </h3> </body> </html> BACK NEXT

83 Dasar Tag HTML Bullet & Numbering <html> <head>
<title>Latihan 12</title> </head> <body> <h3>Daftar Fakultas: <ul type=circle> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ul> </h3> </body> </html> BACK NEXT

84 Dasar Tag HTML Bullet & Numbering Daftar bernomor pada HTML:
i adalah angka romawi kecil, misal: i,ii,iii,iv,dst I adalah angka romawi besar, misal: I,II,III,IV,dst a adalah huruf kecil, misal: a,b,c,d,dst A adalah huruf kapital, misal: A,B,C,D,dst 1 adalah angka dalam standar, misal: 1,2,3,4,dst BACK NEXT

85 Dasar Tag HTML Bullet & Numbering <html> <head>
<title>Latihan 13</title> </head> <body> <h3>Daftar Fakultas: <ol type=A> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ol> </h3> </body> </html> Catatan: ol = ordered list BACK NEXT

86 Dasar Tag HTML Bullet & Numbering <html> <head>
<title>Latihan 14</title> </head> <body> <h3>Daftar Fakultas: <ol type=a> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ol> </h3> </body> </html> BACK NEXT

87 Dasar Tag HTML Bullet & Numbering <html> <head>
<title>Latihan 15</title> </head> <body> <h3>Daftar Fakultas: <ol type=I> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ol> </h3> </body> </html> BACK NEXT

88 Dasar Tag HTML Bullet & Numbering <html> <head>
<title>Latihan 16</title> </head> <body> <h3>Daftar Fakultas: <ol type=i> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ol> </h3> </body> </html> BACK NEXT

89 Dasar Tag HTML Soal (4) Tuliskan Source Code dari tampilan berikut:
VIEW BACK NEXT

90 Dasar Tag HTML Soal (5) Tuliskan Source Code dari tampilan berikut:
VIEW BACK NEXT

91 Dasar Tag HTML Soal (6) Tuliskan Source Code dari tampilan berikut:
VIEW BACK NEXT

92 Dasar Tag HTML Soal (7) Tuliskan Source Code dari tampilan berikut:
VIEW END

93 CSS (Cascading Style Sheet)
Manfaat: Memperindah tampilan halaman website. Mempermudah mengubah secara keseluruhan warna dan tampilan. Memformat ulang situs Anda secara cepat. Menghemat kode dan waktu dalam mendesain tampilan website. NEXT

94 CSS (Cascading Style Sheet)
Konsep: Pewarisan (inheritance) Selektor-Kontekstual (Contextual Selector) Kelas (classes) BACK NEXT

95 CSS (Cascading Style Sheet)
Ketentuan Mendasar Penulisan script CSS terletak diantara tag <HEAD>…</HEAD> Perintah CSS terdiri dari dua elemen dasar, yaitu: selector dan declaration. <HTML> <HEAD> <TITLE>…..</TITLE> <STYLE TYPE=text/css> selector { declaration } </STYLE> </HEAD> <BODY> …….. </BODY> </HTML> BACK NEXT

96 CSS (Cascading Style Sheet)
Tag Komentar <html> <head> <title>……</title> <style type=text/css> …aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */ </style> </head> <body> ………………… </body> </html> BACK NEXT

97 CSS Pewarisan (inheritance)
Text <html> <head> <title>CSS_01</title> <style type=text/css> b { color:lime } </style> </head> <body> Universitas Narotama Surabaya <br> <b>Fakultas Ilmu Komputer</b> </body> </html> BACK NEXT Catatan: Untuk declaration color dapat juga menggunakan kode heksa

98 CSS Selektor-Kontekstual (Contextual Selector)
<html> <head> <title>CSS_01</title> <style type=text/css> b,i { color:blue; text-decoration:underline; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT Catatan: selector ini kesemuanya untuk bold+italic text

99 CSS (Cascading Style Sheet)
Perbedaan CSS pewarisan (inheritance) dengan CSS Selektor-Kontekstual (Contextual Selector) !!! Pewarisan (inheritance) Selektor Kontekstual (Contextual Selector) <html> <head> <title>CSS Inheritance</title> <style type=text/css> b { color:blue; text-decoration:underline } i { color:blue; text-decoration:underline } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> <html> <head> <title>Selektor-Kontekstual</title> <style type=text/css> b,i { color:blue; text-decoration:underline; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html BACK NEXT

100 CSS (Cascading Style Sheet)
Aturan CSS berdasarkan case to case <html> <head> <title>CSS_01</title> </head> <body> Universitas Narotama Surabaya <br> <b style=color:lime> Fakultas Ilmu Komputer </b> </body> </html> TIDAK EFEKTIF BACK NEXT

101 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_02</title> <style type=text/css> i { color:#ff3333 } </style> </head> <body> Universitas Narotama Surabaya <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT

102 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_03</title> <style type=text/css> u { color:#3333CC } </style> </head> <body> Universitas Narotama Surabaya <br> <u>Fakultas Ilmu Komputer</u> </body> </html> BACK NEXT

103 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_04</title> <style type=text/css> h3 { color:# } </style> </head> <body> <h3>Fakultas Ilmu Komputer</h3> </body> </html> BACK NEXT

104 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_05</title> <style type=text/css> h2 { color:# } h3 { color:#FF3333 } </style> </head> <body> <h2>Sistem Informasi</h2> <br> <h3>Sistem Komputer</h3> </body> </html> BACK NEXT

105 CSS (Cascading Style Sheet)
text-decoration: underline (tampil garis dibawah text) overline (tampil garis diatas text) line-trough (tampil garis melalui text) none (non-efek) Text <html> <head> <title>CSS_07</title> <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT

106 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_08</title> <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; font-size: 28px; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT

107 CSS (Cascading Style Sheet)
Soal (1) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

108 CSS (Cascading Style Sheet)
Soal (2) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

109 CSS (Cascading Style Sheet)
Soal (3) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW

110 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_09</title> <style type=text/css> i { color:blue; text-decoration:underline; font-family:Tahoma; font-size:14px; font-weight:bold; } </style> </head> <body> <i>Universitas Narotama Surabaya</i> </body> </html> font-weight: normal bold NEXT

111 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_10</title> <style type=text/css> p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-style:italic; } </style> </head> <body> <p>Universitas Narotama Surabaya</p> </body> </html> BACK NEXT

112 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_11</title> <style type=text/css> p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-variant:small-caps; } </style> </head> <body> <p>Universitas Narotama Surabaya</p> </body> </html> font-variant: small-caps (mengganti semua kar.lower-case dengan kar.upper-case) none (tanpa efek) BACK NEXT Catatan: font-variant tidak berlaku pada browser Netscape

113 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_12</title> <style type=text/css> p { color:blue; font-family:Tahoma; text-transform:lowercase; } </style> </head> <body> <p>UNIVERSITAS NAROTAMA SURABAYA</p> </body> </html> text-transform: capitalize (Kar.pertama huruf besar) uppercase (Semua kar. huruf besar) lowercase (Semua kar. Huruf kecil) BACK NEXT

114 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_13</title> <style type=text/css> p { color:blue; font-family:Tahoma; letter-spacing:10px; } </style> </head> <body> <p>UNIVERSITAS NAROTAMA</p> </body> </html> letter-spacing = mengendalikan jumlah spasi antar karakter BACK NEXT

115 CSS (Cascading Style Sheet)
Text <html> <head> <title>CSS_14</title> <style type=text/css> p { color:blue; font-family:Tahoma; text-indent:30px; } </style> </head> <body> <p>UNIVERSITAS NAROTAMA</p> </body> </html> text-indent = membuat indent untuk awal paragraf BACK NEXT

116 CSS (Cascading Style Sheet)
Body <html> <head> <title>CSS_15</title> <style type=text/css> body { background-color:blue; } </style> </head> <body> </body> </html> BACK NEXT

117 CSS (Cascading Style Sheet)
Body <html> <head> <title>CSS_16</title> <style type=text/css> body { background-image: url(bg.jpg); } </style> </head> <body> </body> </html> BACK NEXT

118 CSS (Cascading Style Sheet)
Catatan: Nilai list-style-type: disc -> efek lingkaran circle -> efek persegi empat square -> efek lingkaran yang transparan decimal -> 1,2,3,…dst lower-roman -> i,ii,iii,…dst upper-roman -> I,II,III,…dst lower-alpha -> a,b,c,…dst upper-alpha -> A,B,C,…dst None -> Tanpa Efek BACK NEXT

119 CSS (Cascading Style Sheet)
Bullet & Numbering <html> <head> <title>CSS_17</title> <style type=text/css> li { list-style-type:square; font-weight:bold; } </style> </head> <body> <h3>Fakultas Ilmu Komputer</h3> <ol> <li>Sistem Informasi</li> <li>Sistem Komputer</li> </ol> </body> </html> BACK NEXT

120 CSS (Cascading Style Sheet)
Soal (4) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

121 CSS (Cascading Style Sheet)
Soal (5) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

122 CSS (Cascading Style Sheet)
Soal (6) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW

123 CSS (Cascading Style Sheet)
Link Link Properties: A:link A:hover A:active NEXT

124 CSS (Cascading Style Sheet)
Link Definisi style link: A:link -> memberikan efek pada saat normal (unlink) A:hover -> memberikan efek pada saat mouse pointer diatas object A:active -> memberikan efek setelah event click BACK NEXT

125 CSS (Cascading Style Sheet)
Link <html> <head> <title>CSS_18</title> <style type=text/css> a { color: #000000; /* kode warna hitam */ text-decoration: none; } a:hover { color : #FF9900; /* kode warna orange */ text-decoration : underline; } </style> </head> <body> <a href=#>Link 1</a> <br><br> <a href=#>Link 2</a> </body> </html> BACK NEXT PREVIEW

126 CSS (Cascading Style Sheet)
Link <html> <head> <title>CSS_19</title> <style type=text/css> a { color: #000000; } /* kode warna hitam */ a:hover { color : #FF9900; } /* kode warna orange */ a:active { color: #006699; } /* kode warna biru */ </style> </head> <body> <a href=#>Link 1</a><br><br> <a href=#>Link 2</a> </body> </html> BACK NEXT PREVIEW

127 CSS (Cascading Style Sheet)
Soal (7) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

128 CSS (Cascading Style Sheet)
Soal (8) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

129 CSS (Cascading Style Sheet)
Kursor Link BACK NEXT PREVIEW

130 CSS (Cascading Style Sheet)
Soal (9) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

131 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_01</title> <style type=text/css> input { background:yellow; } </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> Catatan: untuk selector input berlaku pada, <input type=radio>, <input type=checkbox>, <input type=submit> & <inputy type=button> BACK NEXT

132 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_02</title> <style type=text/css> input { background:yellow; border: 1px solid red;} </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> BACK NEXT

133 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_03</title> <style type=text/css> input { background:yellow; border: 1px solid red; color: blue; } </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> BACK NEXT

134 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_04</title> <style type=text/css> select { background:yellow; border: 1px solid red; color: blue; } </style> </head> <body> <form> Program Studi:<br> <select name=prodi> <option value=SK>Sistem Komputer</option> <option value=SI>Sistem Informasi</option> </select> </form> </body> </html> BACK NEXT

135 CSS (Cascading Style Sheet)
Form <html> <head> <title>Form_05</title> <style type=text/css> textarea { background:yellow; border: 1px solid red; color: blue; } </style> </head> <body> <form> Alamat:<br> <textarea name=alamat cols=30 rows=5></textarea> </form> </body> </html> BACK NEXT

136 CSS (Cascading Style Sheet)
Soal (FORM_01) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

137 CSS (Cascading Style Sheet)
Soal (FORM_02) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW

138 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_20</title> <style type=text/css> table { border: 1px solid black; } </style> </head> <body> <table> <tr> <td>NIM</td><td>NAMA</td> </tr> <td> </td><td>Lukmanul Khakim</td> <td> </td><td>Indra Cahyo</td> </table> </body></html> BACK NEXT Catatan: Untuk declaration solid dapat juga menggunakan kode heksa

139 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_21</title> <style type=text/css> table { background-color: cyan; border: 1px solid orange; } </style> </head> <body> <table> <tr> <td>NIM</td><td>NAMA</td> </tr> <td> </td><td>Lukmanul Khakim</td> <td> </td><td>Indra Cahyo</td> </table> </body></html> BACK NEXT

140 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_22</title> <style type=text/css> tr {background-color: blue; color:white; text-align:center;} </style> </head> <body> <table> <tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <td> </td><td>Lukmanul Khakim</td> </table></body></html> BACK NEXT Catatan: deklarasi border tidak berlaku pada selector <TR>

141 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_23</title> <style type=text/css> td {background-color: blue; color:white; padding-left: 15px; </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT Catatan: deklarasi padding tidak berlaku pada selector <TR>

142 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_24</title> <style type=text/css> td {background-color: blue; color:white; padding-top: 10px;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT Catatan: deklarasi padding tidak berlaku pada selector <TR>

143 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_25</title> <style type=text/css> td {background-color: blue; color:white; padding-bottom: 10px;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT Catatan: deklarasi padding tidak berlaku pada selector <TR>

144 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_26</title> <style type=text/css> td {background-color: blue; color:white; border-bottom: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT

145 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_27</title> <style type=text/css> td {background-color: blue; color:white; border-top: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT

146 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_28</title> <style type=text/css> td {background-color: blue; color:white; border-right: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT

147 CSS (Cascading Style Sheet)
Table <html> <head> <title>CSS_29</title> <style type=text/css> td {background-color: blue; color:white; border-left: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT

148 CSS (Cascading Style Sheet)
Soal (10) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

149 CSS (Cascading Style Sheet)
Soal (11) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

150 CSS (Cascading Style Sheet)
Soal (12) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

151 CSS (Cascading Style Sheet)
Soal (13) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

152 CSS (Cascading Style Sheet)
Soal (14) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW

153 CSS (Cascading Style Sheet) Classes
Penulisan <style type=text/css> .variable { … deklarasi … } </style> BACK NEXT Catatan: bagian deklarasi harus diawali dengan tanda . (titik)

154 CSS (Cascading Style Sheet) Classes
Text <html> <head> <title>Kelas_01</title> <style type=text/css> .text { font-family:tahoma; font-size: 16px; color: #006699; font-weight: bold; } </style> </head> <body> <a class=text>Universitas Narotama Surabaya</a> </body> </html> BACK NEXT PREVIEW

155 CSS (Cascading Style Sheet) Classes
Link <html> <head> <title>Kelas (LINK)</title> <style type=text/css> .link { font-family:tahoma; color:#0000FF; text-decoration:underline;} .link:hover,.link:active { font-family:tahoma; color:#FF9900;text-decoration:underline; } </style> </head> <body> <a href=# class=link>Link 1</a><br><br> <a href=# class=link>Link 2</a> </body> </html> BACK NEXT PREVIEW

156 CSS (Cascading Style Sheet) Classes
Form <html> <head> <title>Kelas_Form</title> <style type=text/css> .inputbox1 { background:silver; border: 1px dotted red;color: blue;} .inputbox2 { background:silver; border: 1px solid blue;color: red;} </style> </head> <body> <h2>Form Mahasiswa</h2> <form> <br> NIM: <br> <input type=text name=nim size=20 class=inputbox1><br> Nama: <br> <input type=text name=nama size=40 class=inputbox2> </form> </body></html> BACK NEXT PREVIEW

157 Pengenalan PHP Penulisan script PHP diawali dengan:
<?php ……………… ?>, atau <? …………….. ?>,atau <script language=PHP>…….</script> BACK NEXT BACK. NEXT.", "width": "800" }

158 Pengenalan PHP Fungsi Perintah echo!!!
echo,print atau printf berfungsi untuk menampilkan sesuatu dilayar browser sekaligus menjalankan tag HTML. <?php echo “dicetak ke browser dengan echo”; echo “<br>”; print “dicetak ke browser dengan print”; print “<br>”; printf “dicetak ke browser dengan printf”; printf “<hr>”; ?> BACK NEXT

159 Pengenalan PHP HTML & PHP: <html> <head>
<title>Latihan-01</title> </head> <body> <?php echo “Hallo PHP,aku akan menaklukanmu!!!”; ?> </body> </html> BACK NEXT

160 Pengenalan PHP Komentar pada PHP Komentar merupakan penjelasan
yang menerangkan maksud dari skrip agar skrip tersebut dapat mudah dipahami. BACK NEXT

161 Pengenalan PHP Komentar pada PHP Tanda komentar PHP:
// , berada dalam satu baris /*…..*/, digunakan apabila pemberian komentar lebih dari satu baris. BACK NEXT

162 Pengenalan PHP Komentar pada PHP <?php
//perintah echo untuk menampilkan sesuatu pada layar browser. /* Tag <br> merupakan tag HTML yang berfungsi untuk melakukan pergantian baris. */ ?> BACK NEXT

163 Pengenalan PHP Variabel: Suatu tempat untuk menyimpan data.
Data yang disimpan sewaktu bisa kita panggil atau diganti dengan data lain. BACK NEXT

164 Pengenalan PHP Variabel Pada PHP:
Mendefinisikan var.cukup dengan memilih sebuah kata Bersifat case sensitif Di awali tanda $ Contoh: $hari=“senin”; $tgl=30; Catatan: tidak ada pendeklarasian khusus pada var.PHP BACK NEXT

165 Pengenalan PHP Menampilkan Var. PHP: <html> <head>
<title>Latihan-02</title> </head> <body> <?php $i=“Universitas Narotama”; echo $i; ?> </body> </html> BACK NEXT

166 Pengenalan PHP Menampilkan Var. PHP: <html> <head>
<title>Latihan-02</title> </head> <body> <?php $angka1=10; $angka2=2; $hasil=$angka1+$angka2; echo $hasil; ?> </body> </html> BACK NEXT

167 Pengenalan PHP Operator Aritmatika: digunakan untuk perhitungan Simbol
Fungsi Operator Contoh Penggunaan + Melakukan Penjumlahan $jumlah = 2+4; - Melakukan Pengurangan $kurang = 4-3; * Melakukan Perkalian $kali = 4*2; / Melakukan Pembagian $bagi=10/2; % Menghasilkan sisa pembagian $sisa=10%3; $sisa berisi 1 BACK NEXT

168 Pengenalan PHP Operator Assignment:Digunakan untuk mengisi variabel yang terletak di sebelah kiri operator dengan nilai yang ada di sebelah kanan operator. Simbol Operator Fungsi Operator Contoh Penggunaan = Mengisikan nilai yang disebelah kanan operator ke variabel yang terletak di sebelah kiri operator. $data=10+2; berapapun nilai $data sebelumnya, sekarang $data telah terisi 12. += Menambahkan nilai yang di sebelah kanan operator ke variabel yang disebelah kiri dan hasilnya akan disimpan di variabel tersebut juga. Nilai awal $data misalkan 12. $data += 10; $data sekarang berisi 22. -= Mengurangkan nilai yang di sebelah kanan operator ke variabel yang disebelah kiri dan hasilnya akan disimpan di variabel tersebut juga. Nilai awal $data misalkan 22. $data sekarang berisi 12. *= Mengalikan nilai yang di sebelah kiri operator dengan variabel yang disebelah kanan dan hasilnya akan disimpan di variabel tersebut juga. Nilai awal $data misalnya= 15. $data *= 2; $data sekarang berisi 30. /= Membagi nilai yang di sebelah kiri operator dengan variabel yang disebelah kanan dan hasilnya akan disimpan di variabel tersebut juga. Nilai awal $data misalnya= 12. $data /= 6; $data sekarang berisi 2. %= Membagi nilai yang di sebelah kiri operator dengan variabel yang disebelah kanan kemudian sisa pembagian disimpan di variabel tersebut juga. Nilai awal $data misalnya= 10. $data %= 7; $data sekarang berisi 3. BACK NEXT

169 BACK NEXT Simbol Operator Fungsi Operator Contoh ==
Akan bernilai TRUE atau 1 bila dua kondisi yang dibandingkan memiliki nilai yang sama, selain itu bernilai FALSE atau 0. $a=10; $b=10; $a==$b, akan bernilai TRUE atau 1, karena keduanya memiliki nilai yang sama. <> Akan bernilai TRUE atau 1 hanya jika dua kondisi yang dibandingkan memiliki nilai yang tidak sama (selain ini bernilai FALSE atau 0). $a<>$b, akan bernilai FALSE atau 0, karena kedua nilainya tidak sama. > Akan bernilai TRUE atau 1 hanya jika nilai yang disebelah kiri lebih besar dari yang disebelah kanan (selain ini akan bernilai FALSE atau 0). $a=12; $a>$b, akan bernilai TRUE atau 1, karena nilai $a lebih besar dibandingkan nilai $b. < Akan bernilai TRUE atau 1 hanya jika nilai yang disebelah kiri lebih kecil dari yang di sebelah kanan (selain ini akan bernilai FALSE atau 0). $a<$b, akan bernilai FALSE atau 0, karena nilai $a lebih besar dibandingkan nilai $b. >= Akan bernilai TRUE atau 1 hanya jika nilai yang disebelah kiri lebih besar atau sama dengan dari yang disebelah kanan (selain ini akan bernilai FALSE atau 0). $a=11; $a>=$b, akan bernilai TRUE atau 1, karena nilai $a lebih besar dibandingkan niali $b. Juga jika $a=10, nilai tetap akan bernilai TRUE. <= Akan bernilai TRUE atau 1 hanya jika nilai yang disebelah kiri lebih kecil atau sama dengan dari yang disebelah kanan (selain ini akan bernilai FALSE atau 0). $a<=$b, akan bernilai FALSE atau 0, karena nilai $a lebih besar dibandingkan niali $b. Juga jika $a=10, nilai tetap akan bernilai TRUE. BACK NEXT

170 Pengenalan PHP Operator Logika:
Berguna untuk menggabungkan dua kondisi atau lebih. && atau AND, simbol dari operator AND. Hasilnya akan bernilai 1 atau TRUE jika kedua kondisi memiliki nilai 1., selain ini hasil akan bernilai 0 atau FALSE. || atau OR, simbol dari operator OR. Hasilnya akan bernilai 0 jika kedua kondisi memiliki nilai 0, selain ini hasil akan bernilai 1 atau TRUE. XOR, operator xor akan menghasilkan nilai 1 atau TRUE jika kedua kondisi sama dan 0 atau FALSE bila keduanya tidak sama. !, simbol dari operator NOT, akan menghasilkan nilai yang berlawanan. Jika 1 (TRUE) ,akan menjadi 0 (FALSE), sedangkan 0 (FALSE) akan menjadi 1 (TRUE). BACK NEXT

171 Pengenalan PHP Kalimat Bersyarat: If (syarat/kondisi) { …….aksi………; }
BACK NEXT

172 Pengenalan PHP Jika memiliki dua syarat,
Nilai syarat yang satu berlawanan dengan yang lain If (syarat/kondisi) { …….aksi………; } Else BACK NEXT

173 Pengenalan PHP Kalimat Bersyarat: <?php $a=10; $b=12; if ($b>$a)
{ echo “Nilai \$b lebih besar dari \$a”; } else { echo “Nilai \$b tidak lebih besar dari \$a”; } ?> BACK NEXT

174 Pengenalan PHP Kalimat Bersyarat: Switch (….kondisi…) {
case …..syarat1…: ….aksi……; break; case …..syarat2…: ………….. default: ………….aksi apabila semua syarat tidak terpenuhi……. } BACK NEXT

175 Pengenalan PHP Kalimat Bersyarat: <?php $a=5;
Echo “\$a bernilai $a <br>”; Switch ($a) { case $a=10: echo “Berarti \$a = 10”; break; case $a>10: echo “Berarti \$a > 10”; default: echo “Berarti \$a < 10”; } ?> BACK NEXT

176 Pengenalan PHP Perulangan (While) While(….syarat….) { ………aksi…….; }
BACK NEXT

177 Pengenalan PHP Perulangan (While) $angka=9;
Echo “Bil. Ganjil antara 10 hingga 30: <br>”; While($angka < 29) { $angka += 2; echo “$angka <br>”; } BACK NEXT

178 Pengenalan PHP Perulangan (For)
For (nilai awal,syarat perulangan, pola penambahan) { ………aksi……….; } BACK NEXT

179 Pengenalan PHP Perulangan (For) <?php $angka = 10; $cek = 1;
Echo “Bil. Genap antara 10 hingga 30: <br>”; For ($cek=1;$cek<10;$cek++) { $angka += 2; echo “$angka <br>”; } ?> BACK NEXT

180 Pengenalan PHP Array Seperti halnya variabel, array berfungsi juga sebagai penyimpan data, akan tetapi array mampu menyimpan lebih dari satu data. BACK NEXT

181 Pengenalan PHP Array <?php
$bulan=array(“Januari”,”Februari”,”Maret”,”April”); Echo “Musim hujan biasanya terjadi pada bulan: <br> ”; //akses array Echo “$bulan[0] <br>”; Echo “$bulan[1] <br>”; Echo “$bulan[2] <br>”; ?> BACK NEXT

182 Pengenalan PHP Include() & Require()
Require(), digunakan untuk merefensi file yang berisikan variabel dan fungsi global yang digunakan pada seluruh bagian dari script utama. Include(), digunakan untuk menyisipkan kode script atau tag HTML pada program utama. BACK NEXT

183 Pengenalan MySQL MySQL (My Stucture Query Language)
Jenis Perintah MySQL terbagi: DDL (Data Definition Language) bentuk bahasa yang digunakan untuk melakukan pendefinisian data. DML (Data Manipulation Language) operasi input,edit,hapus serta melihat data. BACK NEXT

184 Pengenalan MySQL MySQL (My Stucture Query Language)
DDL (Data Definition Language): CREATE DATABASE data; CREATE TABLE nama_tabel; SHOW TABLES; ALTER TABLE nama_tabel_lama RENAME nama_tabel_baru; ALTER TABLE nama_tabel CHANGE field_lama field_baru type_data (panjang) BACK NEXT

185 Pengenalan MySQL MySQL (My Stucture Query Language)
DML (Data Manipulation Language): SELECT nama_field FROM nama_tabel INSERT INTO nama_tabel (field1,field2,…) VALUES (nilai1,nilai2,…) UPDATE nama_tabel SET field1=nilai1,…. DELETE FROM nama_tabel WHERE field1=nilai1 BACK NEXT

186 Pengenalan MySQL MySQL (My Stucture Query Language) Implementasi MySQL
dengan PhpMyAdmin BACK NEXT

187 PHP & MySQL Studi Kasus: Membuat File Koneksi
Menampilkan Data pada MySQL dengan PHP Form, method: Post & Get BACK NEXT

188 Finish Terserah Anda… Sekian Materi Design & Pemrograman Web.
Untuk Pengembangan Selanjutnya, Terserah Anda… Silahkan sharing ilmu bersama: ym: END


Download ppt "Modul Design & Pemrograman Web"

Presentasi serupa


Iklan oleh Google