Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

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

Presentasi serupa


Presentasi berjudul: "Modul Design & Pemrograman Web Dosen: Achmad Zakki Falani, S.Kom Fakultas Ilmu Komputer Universitas Narotama NEXT."— Transcript presentasi:

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

2 Kriteria Penilaian:  Kehadiran: 10 %  Tugas: 15 %  Keaktifan: 15 %  NIlai UTS: 30 %  Nilai UAS: 30 % NEXTBACK

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 NEXTBACK

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. NEXTBACK

6 Konsep Dasar Web Design  Bagaimana komentar Anda tentang Template Web berikut?... NEXTBACK

7 Konsep Dasar Web Design  Bagaimana komentar Anda tentang Template Web berikut?... NEXTBACK

8 Konsep Dasar Web Design  Bagaimana komentar Anda tentang Template Web berikut?... NEXTBACK

9 Konsep Dasar Web Design  Bagaimana komentar Anda tentang Template Web berikut?... NEXTBACK

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?... NEXTBACK

11 Dasar Skrip / Tag HTML Judul / Title Isi / Content NEXTBACK

12 Dasar Skrip / Tag HTML Heading Latihan 01 Heading Point Heading Point Heading Point Heading Point Heading Point Heading Point Normal body text - 12 Point NEXTBACK

13 Dasar Skrip / Tag HTML Paragraf dan Break Latihan 02 Universitas Narotama Surabaya Fakultas Ilmu Komputer Jurusan Sistem Komputer & Sistem Informasi NEXTBACK

14 Dasar Skrip / Tag HTML HR (Horizontal Rule) Latihan 03 Universitas Narotama Surabaya NEXTBACK

15 Dasar Skrip / Tag HTML Font Latihan 04 Fakultas Ilmu Komputer NEXTBACK

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

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

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

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

20 Dasar Tag HTML  Catatan: Jika Anda ingin menambahkan komentar pada dokumen HTML,maka tulislah Tag,misal: 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 Columns Item Columns Item Tabel dibentuk dari kiri atas, dan melintasi kolom - kolomnya. Setiap item diapit dengan tag, dan setiap baris diapit dengan tag. NEXTBACK

23 Dasar Tag HTML Table Latihan 17 Earth Air Fire Water NEXTBACK

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. NEXTBACK

25 Dasar Tag HTML Table Latihan 18 Daftar Nama Siswa NIM NAMA LENGKAP Nur Qomari NEXTBACK

26 Dasar Tag HTML Table (kolom bewarna) Latihan 19 Daftar Nama Siswa NIM NAMA LENGKAP Nur Qomari NEXTBACK

27 Dasar Tag HTML Table Latihan 20 Daftar Nama Siswa NIM NAMA LENGKAP Nur Qomari NEXTBACK

28 Dasar Tag HTML Table Latihan 21 Daftar Nama Siswa NIM & NAMA LENGKAP Nur Qomari NEXTBACK

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

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

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

32 Dasar Tag HTML  Images Tag HTML untuk memasukkan gambar: Catatan: img src=image source NEXTBACK

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. NEXTBACK

34 Dasar Tag HTML  Images Latihan 22 NEXTBACK

35 Dasar Tag HTML  Images Latihan 23 Images Center NEXTBACK

36 Dasar Tag HTML  Images Latihan 24 Images Border NEXTBACK

37 Dasar Tag HTML  Images & Body Background Latihan 25 NEXTBACK VIEW

38 Dasar Tag HTML  Images & Table Latihan 26 Daftar Nama Siswa

NIM NAMA LENGKAP Nur Qomari NEXTBACK VIEW

39 Dasar Tag HTML  Images & Table Latihan 27 Wallpaper1.JPG 800 X 600 Wallpaper2.JPG 800 X 600 Wallpaper3.JPG 800 X 600 NEXTBACK VIEW

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

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

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

43 Dasar Tag HTML Link Tag Link pada HTML: …….. Catatan: HREF=Hypertext REFerence NEXT

44 Dasar Tag HTML Link URL Latihan 28 Yahoo Google PREVIEW NEXTBACK

45 Dasar Tag HTML Link File Latihan 29 Latihan 27 Latihan 28 PREVIEW NEXTBACK

46 Dasar Tag HTML Link Send to NEXTBACK

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

48 Dasar Tag HTML Marquee Tag Marquee pada HTML: …….. NEXTBACK

49 Dasar Tag HTML Marquee Style Maquee:  ALTERNATE ALTERNATE  SCROLL SCROLL  SLIDE SLIDE NEXTBACK

50 Dasar Tag HTML Marquee Direction Maquee:  Down  Left  Right  Up NEXTBACK

51 Dasar Tag HTML Marquee Latihan 30 Universitas Narotama Surabaya NEXTBACK PREVIEW

52 Dasar Tag HTML Marquee Latihan 31 Universitas Narotama Surabaya NEXTBACK PREVIEW

53 Dasar Tag HTML Marquee Latihan 32 Universitas Narotama Surabaya NEXTBACK PREVIEW

54 Dasar Tag HTML Soal  Tuliskan Source Code dari tampilan berikut: NEXTBACK PREVIEW

55 Dasar Tag HTML Soal  Tuliskan Source Code dari tampilan berikut: NEXTBACK PREVIEW

56 Dasar Tag HTML Soal  Tuliskan Source Code dari tampilan berikut: NEXTBACK PREVIEW

57 Dasar Tag HTML Form Awal formulir ditandai dengan Tag, dan berisi dua kata kunci: METHOD dan ACTION. NEXTBACK

58 Dasar Tag HTML Form Latihan 33 ……………… NEXTBACK

59 Form Input Text: Latihan 34 Form Mahasiswa NIM Nama Lengkap Dasar Tag HTML NEXTBACK

60 Form Radio Button: Latihan 35 Jenis Kelamin: Laki-laki Perempuan Dasar Tag HTML NEXTBACK

61 Form Check Box: Latihan 36 Fakultas Ilmu Komputer: Sistem Informasi Sistem Komputer Dasar Tag HTML NEXTBACK

62 Dasar Tag HTML Form Drop-down List: … NEXTBACK

63 Dasar Tag HTML Form Drop-down List: Latihan 37 Level: Standart Professional NEXTBACK

64 Dasar Tag HTML Form Textarea: NEXTBACK

65 Dasar Tag HTML Form Textarea: Latihan 38 Alamat: NEXTBACK

66 Dasar Tag HTML Form Button: Catatan: type=submit, akan mendefinisikan sebagai tombol untuk menyerahkan umpan balik. type=reset, akan mendefinisikan tombol untuk menghapus isi formulir. NEXTBACK

67 Form Button: Latihan 39 Alamat: Dasar Tag HTML NEXTBACK

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

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

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

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

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

73 Dasar Tag HTML Tugas  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 Latihan 05 Text Alignment Set in the centre of the window Back to Normal Align to Right Align to Left NEXTBACK

75 Dasar Tag HTML Style pada Font …… Tag ini untuk membuat bold (tebal).….. Tag ini untuk membuat italic (miring) ….. Tag ini untuk membuat underline (garis bawah) ….. Tag ini untuk membuat huruf dengan efek mesin ketik (font Courier) NEXTBACK

76 Dasar Tag HTML Style pada Font Latihan 07 If you set words in bold If you set words in italic If you set words in underline If you set words in typewriter NEXTBACK VIEW

77 Dasar Tag HTML Background Latihan 08 Catatan: *) Pemberian warna pada background dapat juga menggunakan kode heksadesimal NEXTBACK VIEW

78 Dasar Tag HTML  Catatan: Browser akan mengabaikan spasi yang berlebihan. Sehingga Anda dapat membuat spasi sekehendak hati Anda untuk memudahkan pembacaan kode Anda. Latihan 09 Words1 Words2 NEXTBACK

79 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 NEXTBACK

80 Dasar Tag HTML  Bullet & Numbering Latihan 10 Daftar Fakultas: Fakultas Ekonomi Fakultas Hukum Fakultas Ilmu Komputer Fakultas Teknik Sipil Catatan: ul = unordered list li = list item NEXTBACK

81 Dasar Tag HTML  Bullet & Numbering Latihan 11 Daftar Fakultas: Fakultas Ekonomi Fakultas Hukum Fakultas Ilmu Komputer Fakultas Teknik Sipil NEXTBACK

82 Dasar Tag HTML  Bullet & Numbering Latihan 12 Daftar Fakultas: Fakultas Ekonomi Fakultas Hukum Fakultas Ilmu Komputer Fakultas Teknik Sipil NEXTBACK

83 Dasar Tag HTML  Bullet & Numbering Latihan 12 Daftar Fakultas: Fakultas Ekonomi Fakultas Hukum Fakultas Ilmu Komputer Fakultas Teknik Sipil NEXTBACK

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 NEXTBACK

85 Dasar Tag HTML  Bullet & Numbering Latihan 13 Daftar Fakultas: Fakultas Ekonomi Fakultas Hukum Fakultas Ilmu Komputer Fakultas Teknik Sipil Catatan: ol = ordered list NEXTBACK

86 Dasar Tag HTML  Bullet & Numbering Latihan 14 Daftar Fakultas: Fakultas Ekonomi Fakultas Hukum Fakultas Ilmu Komputer Fakultas Teknik Sipil NEXTBACK

87 Dasar Tag HTML  Bullet & Numbering Latihan 15 Daftar Fakultas: Fakultas Ekonomi Fakultas Hukum Fakultas Ilmu Komputer Fakultas Teknik Sipil NEXTBACK

88 Dasar Tag HTML  Bullet & Numbering Latihan 16 Daftar Fakultas: Fakultas Ekonomi Fakultas Hukum Fakultas Ilmu Komputer Fakultas Teknik Sipil NEXTBACK

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

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

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

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

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) NEXTBACK

95 CSS (Cascading Style Sheet) Ketentuan Mendasar  Penulisan script CSS terletak diantara tag …  Perintah CSS terdiri dari dua elemen dasar, yaitu: selector dan declaration. ….. selector { declaration } …….. NEXTBACK

96 CSS (Cascading Style Sheet) Tag Komentar …… …aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */ ………………… NEXTBACK

97 CSS Pewarisan (inheritance) Text CSS_01 b { color:lime } Universitas Narotama Surabaya Fakultas Ilmu Komputer Catatan: Untuk declaration color dapat juga menggunakan kode heksa NEXTBACK

98 CSS Selektor-Kontekstual (Contextual Selector) Text CSS_01 b,i { color:blue; text-decoration:underline; } Universitas Narotama Surabaya Fakultas Ilmu Komputer Catatan: selector ini kesemuanya untuk bold+italic text NEXTBACK

99 CSS (Cascading Style Sheet) Perbedaan CSS pewarisan (inheritance) dengan CSS Selektor-Kontekstual (Contextual Selector) !!! CSS Inheritance b { color:blue; text-decoration:underline } i { color:blue; text-decoration:underline } Universitas Narotama Surabaya Fakultas Ilmu Komputer Selektor-Kontekstual b,i { color:blue; text-decoration:underline; } Universitas Narotama Surabaya Fakultas Ilmu Komputer

100 CSS (Cascading Style Sheet) Aturan CSS berdasarkan case to case CSS_01 Universitas Narotama Surabaya Fakultas Ilmu Komputer TIDAK EFEKTIF NEXTBACK

101 CSS (Cascading Style Sheet) Text CSS_02 i { color:#ff3333 } Universitas Narotama Surabaya Fakultas Ilmu Komputer NEXTBACK

102 CSS (Cascading Style Sheet) Text CSS_03 u { color:#3333CC } Universitas Narotama Surabaya Fakultas Ilmu Komputer NEXTBACK

103 CSS (Cascading Style Sheet) Text CSS_04 h3 { color:# } Fakultas Ilmu Komputer NEXTBACK

104 CSS (Cascading Style Sheet) Text CSS_05 h2 { color:# } h3 { color:#FF3333 } Sistem Informasi Sistem Komputer NEXTBACK

105 CSS (Cascading Style Sheet) Text CSS_07 b,i { color:blue; text-decoration:underline; font-family:Tahoma; } Universitas Narotama Surabaya Fakultas Ilmu Komputer NEXTBACK text-decoration: - underline (tampil garis dibawah text) - overline (tampil garis diatas text) - line-trough (tampil garis melalui text) - none (non-efek)

106 CSS (Cascading Style Sheet) Text CSS_08 b,i { color:blue; text-decoration:underline; font-family:Tahoma; font-size: 28px; } Universitas Narotama Surabaya Fakultas Ilmu Komputer NEXTBACK

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

108 CSS (Cascading Style Sheet)  Soal (2) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: NEXTBACK 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 CSS_09 i { color:blue; text-decoration:underline; font-family:Tahoma; font-size:14px; font-weight:bold; } Universitas Narotama Surabaya NEXT font-weight: - normal - bold

111 CSS (Cascading Style Sheet) Text CSS_10 p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-style:italic; } Universitas Narotama Surabaya NEXTBACK

112 CSS (Cascading Style Sheet) Text CSS_11 p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-variant:small-caps; } Universitas Narotama Surabaya NEXTBACK font-variant: small-caps (mengganti semua kar.lower-case dengan kar.upper-case) none (tanpa efek) Catatan: font-variant tidak berlaku pada browser Netscape

113 CSS (Cascading Style Sheet) Text CSS_12 p { color:blue; font-family:Tahoma; text-transform:lowercase; } UNIVERSITAS NAROTAMA SURABAYA NEXTBACK text-transform: capitalize (Kar.pertama huruf besar) uppercase (Semua kar. huruf besar) lowercase (Semua kar. Huruf kecil)

114 CSS (Cascading Style Sheet) Text CSS_13 p { color:blue; font-family:Tahoma; letter-spacing:10px; } UNIVERSITAS NAROTAMA NEXTBACK letter-spacing = mengendalikan jumlah spasi antar karakter

115 CSS (Cascading Style Sheet) Text CSS_14 p { color:blue; font-family:Tahoma; text-indent:30px; } UNIVERSITAS NAROTAMA NEXTBACK text-indent = membuat indent untuk awal paragraf

116 CSS (Cascading Style Sheet) Body CSS_15 body { background-color:blue; } NEXTBACK

117 CSS (Cascading Style Sheet) Body CSS_16 body { background-image: url(bg.jpg); } NEXTBACK

118 CSS (Cascading Style Sheet) NEXTBACK 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

119 CSS (Cascading Style Sheet) Bullet & Numbering CSS_17 li { list-style-type:square; font-weight:bold; } Fakultas Ilmu Komputer Sistem Informasi Sistem Komputer NEXTBACK

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

121 CSS (Cascading Style Sheet)  Soal (5) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: NEXTBACK 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 NEXTBACK

125 CSS (Cascading Style Sheet) Link CSS_18 a { color: #000000; /* kode warna hitam */ text-decoration: none; } a:hover { color : #FF9900; /* kode warna orange */ text-decoration : underline; } Link 1 Link 2 NEXTBACK PREVIEW

126 CSS (Cascading Style Sheet) Link CSS_19 a { color: #000000; } /* kode warna hitam */ a:hover { color : #FF9900; } /* kode warna orange */ a:active { color: #006699; } /* kode warna biru */ Link 1 Link 2 NEXTBACK PREVIEW

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

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

129 CSS (Cascading Style Sheet) Kursor Link NEXTBACK PREVIEW

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

131 CSS (Cascading Style Sheet) Form Form_01 input { background:yellow; } Form Mahasiswa NIM Nama Lengkap NEXTBACK Catatan: untuk selector input berlaku pada,,, &

132 CSS (Cascading Style Sheet) Form Form_02 input { background:yellow; border: 1px solid red;} Form Mahasiswa NIM Nama Lengkap NEXTBACK

133 CSS (Cascading Style Sheet) Form Form_03 input { background:yellow; border: 1px solid red; color: blue; } Form Mahasiswa NIM Nama Lengkap NEXTBACK

134 CSS (Cascading Style Sheet) Form Form_04 select { background:yellow; border: 1px solid red; color: blue; } Program Studi: Sistem Komputer Sistem Informasi NEXTBACK

135 CSS (Cascading Style Sheet) Form Form_05 textarea { background:yellow; border: 1px solid red; color: blue; } Alamat: NEXTBACK

136 CSS (Cascading Style Sheet)  Soal (FORM_01) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: NEXTBACK 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 CSS_20 table { border: 1px solid black; } NIM NAMA Lukmanul Khakim Indra Cahyo NEXTBACK Catatan: Untuk declaration solid dapat juga menggunakan kode heksa

139 CSS (Cascading Style Sheet) Table CSS_21 table { background-color: cyan; border: 1px solid orange; } NIM NAMA Lukmanul Khakim Indra Cahyo NEXTBACK

140 CSS (Cascading Style Sheet) Table CSS_22 tr{background-color: blue; color:white; text-align:center;} NIM NAMA Lukmanul Khakim NEXTBACK Catatan: deklarasi border tidak berlaku pada selector

141 CSS (Cascading Style Sheet) Table CSS_23 td {background-color: blue; color:white; padding-left: 15px; NIM NAMA Lukmanul Khakim NEXTBACK Catatan: deklarasi padding tidak berlaku pada selector

142 CSS (Cascading Style Sheet) Table CSS_24 td {background-color: blue; color:white; padding-top: 10px;} NIM NAMA Lukmanul Khakim NEXTBACK Catatan: deklarasi padding tidak berlaku pada selector

143 CSS (Cascading Style Sheet) Table CSS_25 td {background-color: blue; color:white; padding-bottom: 10px;} NIM NAMA Lukmanul Khakim NEXTBACK Catatan: deklarasi padding tidak berlaku pada selector

144 CSS (Cascading Style Sheet) Table CSS_26 td {background-color: blue; color:white; border-bottom: 1px solid red;} NIM NAMA Lukmanul Khakim NEXTBACK

145 CSS (Cascading Style Sheet) Table CSS_27 td {background-color: blue; color:white; border-top: 1px solid red;} NIM NAMA Lukmanul Khakim NEXTBACK

146 CSS (Cascading Style Sheet) Table CSS_28 td {background-color: blue; color:white; border-right: 1px solid red;} NIM NAMA Lukmanul Khakim NEXTBACK

147 CSS (Cascading Style Sheet) Table CSS_29 td {background-color: blue; color:white; border-left: 1px solid red;} NIM NAMA Lukmanul Khakim NEXTBACK

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

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

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

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

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

153 CSS (Cascading Style Sheet) Classes Penulisan.variable { … deklarasi … } NEXTBACK Catatan: bagian deklarasi harus diawali dengan tanda. (titik)

154 CSS (Cascading Style Sheet) Classes Text Kelas_01.text { font-family:tahoma; font-size: 16px; color: #006699; font-weight: bold; } Universitas Narotama Surabaya NEXTBACK PREVIEW

155 CSS (Cascading Style Sheet) Classes Link Kelas (LINK).link { font-family:tahoma; color:#0000FF; text-decoration:underline;}.link:hover,.link:active { font-family:tahoma; color:#FF9900;text-decoration:underline; } Link 1 Link 2 NEXTBACK PREVIEW

156 CSS (Cascading Style Sheet) Classes Form Kelas_Form.inputbox1 { background:silver; border: 1px dotted red;color: blue;}.inputbox2 { background:silver; border: 1px solid blue;color: red;} Form Mahasiswa NIM: Nama: NEXTBACK PREVIEW

157 Pengenalan PHP Penulisan script PHP diawali dengan: , atau  ……. NEXTBACK

158  Fungsi Perintah echo!!! echo,print atau printf berfungsi untuk menampilkan sesuatu dilayar browser sekaligus menjalankan tag HTML. Pengenalan PHP NEXTBACK

159  HTML & PHP: Latihan-01 Pengenalan PHP NEXTBACK

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

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

162  Komentar pada PHP Pengenalan PHP NEXTBACK

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

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

165 Menampilkan Var. PHP: Latihan-02 Pengenalan PHP NEXTBACK

166 Menampilkan Var. PHP: Latihan-02 Pengenalan PHP NEXTBACK

167 Pengenalan PHP Operator Aritmatika: digunakan untuk perhitungan NEXTBACK Simbol Operator Fungsi OperatorContoh 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

168 Pengenalan PHP Operator Assignment:Digunakan untuk mengisi variabel yang terletak di sebelah kiri operator dengan nilai yang ada di sebelah kanan operator. NEXTBACK Simbol OperatorFungsi OperatorContoh 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 += 10; $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.

169 Simbol Operator Fungsi OperatorContoh ==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=10; $b=10; $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; $b=10; $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 besar atau sama dengan dari yang disebelah kanan (selain ini akan bernilai FALSE atau 0). $a=11; $b=10; $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=11; $b=10; $a<=$b, akan bernilai FALSE atau 0, karena nilai $a lebih besar dibandingkan niali $b. Juga jika $a=10, nilai tetap akan bernilai TRUE. NEXTBACK

170 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). Pengenalan PHP NEXTBACK

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

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

173 Kalimat Bersyarat: $a) { echo “Nilai \$b lebih besar dari \$a”; } else { echo “Nilai \$b tidak lebih besar dari \$a”; } ?> Pengenalan PHP NEXTBACK

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

175 Kalimat Bersyarat: 10: echo “Berarti \$a > 10”; break; default: echo “Berarti \$a < 10”; } ?> Pengenalan PHP NEXTBACK

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

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

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

179 Perulangan (For) Pengenalan PHP NEXTBACK

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

181 Array Pengenalan PHP NEXTBACK

182 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. Pengenalan PHP NEXTBACK

183 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. Pengenalan MySQL NEXTBACK

184 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) Pengenalan MySQL NEXTBACK

185 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 Pengenalan MySQL NEXTBACK

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

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

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


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

Presentasi serupa


Iklan oleh Google