0% menganggap dokumen ini bermanfaat (0 suara)

172 tayangan188 halaman

Modul Design Pemrograman Web

Modul Design & Pemrograman Web memberikan informasi tentang kriteria penilaian mata kuliah tersebut yang meliputi kehadiran, tugas, keaktifan, UTS, dan UAS. Modul tersebut juga menjelaskan konsep dasar web design seperti perencanaan website, desain halaman web dasar, dan template web.

Diunggah oleh

Hardi Anto

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PPT, PDF, TXT atau baca online di Scribd

0% menganggap dokumen ini bermanfaat (0 suara)

172 tayangan188 halaman

Modul Design Pemrograman Web

Diunggah oleh

Hardi Anto

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PPT, PDF, TXT atau baca online di Scribd

Modul

Design & Pemrograman Web

Dosen:
Achmad Zakki Falani, [Link]
Fakultas Ilmu Komputer
Universitas Narotama
NEXT

Kriteria Penilaian:

Kehadiran
Tugas
Keaktifan
NIlai UTS
Nilai UAS

:
:
:
:
:

10
15
15
30
30

%
%
%
%
%

BACK

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

Konsep Dasar Web Design

BACK

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

Bagaimana komentar Anda tentang Template Web berikut?...

BACK

Bagaimana komentar Anda tentang Template Web berikut?...

BACK

Bagaimana komentar Anda tentang Template Web berikut?...

BACK

Bagaimana komentar Anda tentang Template Web berikut?...

BACK

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

Dasar Skrip / Tag HTML

Soal (1)
Tuliskan Source Code dari tampilan berikut:

VIEW

BACK

Dasar Skrip / Tag HTML

Soal (2)
Tuliskan Source Code dari tampilan berikut:

VIEW

BACK

Dasar Skrip / Tag HTML

Soal (3)
Tuliskan Source Code dari tampilan berikut:

VIEW

BACK

Tugas (1)

Mencari artikel dengan tema Design Web

Pelajari dengan seksama artikel yang Anda dapatkan

BACK

Dasar Tag HTML

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

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.

Item</td>
Item</td>

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

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

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>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
BACK

Dasar Tag HTML

Soal (8)

Tuliskan Source Code dari tampilan berikut:

VIEW

BACK

Dasar Tag HTML

Soal (9)

Tuliskan Source Code dari tampilan berikut:

VIEW

BACK

Dasar Tag HTML

Soal (10)

Tuliskan Source Code dari tampilan berikut:

VIEW

BACK

Dasar Tag HTML

Images
Tag HTML untuk memasukkan gambar:
<img src=filename>

Catatan: img src=image source

BACK

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

Images & Body Background

<html>
<head>
<title>Latihan 25</title>
</head>
<body background=[Link]>
</body>
</html>

VIEW

BACK

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=[Link]>NIM</td>
<td background=[Link]>NAMA
LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>

VIEW

BACK

Images & Table

<html>
<head>
<title>Latihan 27</title>
</head>
<body>
<table border=10 cellspacing=10 cellpadding=10>
<tr>
<td><img src=[Link] width=200 height=200></td>
<td><img src=[Link] width=200 height=200></td>
<td><img src=[Link] width=200 height=200></td>
</tr>
<tr>
<td>[Link] 800 X 600</td>
<td>[Link] 800 X 600</td>
<td>[Link] 800 X 600</td>
</tr>
</table>
</body>
</html>

VIEW

BACK

Dasar Tag HTML

Soal (11)
Tuliskan Source Code dari tampilan berikut:

Filename:logo_unnar.gif
Size:250X250

VIEW

BACK

Dasar Tag HTML

Soal (12)
Tuliskan Source Code dari tampilan berikut:

Filename:[Link]
Size:7X30

VIEW

BACK

Dasar Tag HTML

Soal (13)
Tuliskan Source Code dari tampilan berikut:

Filename:[Link]
Size:300X400

Filename:[Link]
Size:300X400
VIEW

BACK

Dasar Tag HTML

Link
Tag Link pada HTML:
<a href=url/filename>..</a>

Catatan:
HREF=Hypertext REFerence
NEXT

PREVIEW

BACK

PREVIEW

BACK

Dasar Tag HTML

Link E-mail

<a href=[Link] to E-mail</a>

BACK

Dasar Tag HTML

Marquee

Marquee = Menampilkan objek dengan memberikan efek

berjalan.

BACK

Dasar Tag HTML

Marquee
Tag Marquee pada HTML:
<marquee behavior=>..</marquee>

BACK

Dasar Tag HTML

Marquee
Style Maquee:

ALTERNATE

SCROLL

SLIDE

BACK

Dasar Tag HTML

Marquee
Direction Maquee:

Down

Left

Right

BACK

PREVIEW

BACK

PREVIEW

BACK

PREVIEW

BACK

Dasar Tag HTML

Soal

Tuliskan Source Code dari tampilan berikut:

PREVIEW

BACK

Dasar Tag HTML

Soal

Tuliskan Source Code dari tampilan berikut:

PREVIEW

BACK

Dasar Tag HTML

Soal

Tuliskan Source Code dari tampilan berikut:

PREVIEW

BACK

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/email>

BACK

Dasar Tag HTML

Form
<html>
<head>
<title>Latihan 33</title>
</head>
<body>
<form name=mhs_baru method=post action=[Link]>

</form>
</body>
</html>

BACK

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

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

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

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

Dasar Tag HTML

Form

Textarea:
<textarea name=nama_input rows=ukuran_tinggi cols=ukuran_lebar>
</textarea>

BACK

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

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

Dasar Tag HTML

Soal (14)
Tuliskan Source Code dari tampilan berikut:
Catatan: Username dan Password panjang karakter = 10

BACK

Dasar Tag HTML

Soal (15)
Tuliskan Source Code dari tampilan berikut:
Catatan: Event submit terletak pada list

BACK

Dasar Tag HTML

Soal (16)
Tuliskan Source Code dari tampilan berikut:
Catatan: Tombol submit bertipe gambar

BACK

Dasar Tag HTML

Soal (17)
Tuliskan Source Code dari tampilan berikut:
Catatan: Nama dan Alamat tidak dapat ditulisi

BACK

Dasar Tag HTML

Soal (18)
Tuliskan Source Code dari tampilan berikut:
Catatan: NIM dan Nama tidak bisa mendapatkan set focus

BACK

END

Dasar Tag HTML

Tugas

Buatlah suatu home page yang berisi biografi Anda dengan menggunakan
notepad.
Berilah nama file dokumen html dengan NIM Anda.
misal: [Link]
Kirim melalui e-mail: zakki_falani@[Link]

catatan:
Apabila dokumen Anda ternyata terbuat dari Web Editor selain notepad,
maka tidak akan ada koreksi.
END

BACK

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

VIEW

BACK

Catatan:
*) Pemberian warna pada background dapat juga menggunakan kode
heksadesimal
VIEW

BACK

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

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

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

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

Bullet & Numbering

BACK

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

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

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

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

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

Dasar Tag HTML

Soal (4)

Tuliskan Source Code dari tampilan berikut:

VIEW

BACK

Dasar Tag HTML

Soal (5)

Tuliskan Source Code dari tampilan berikut:

VIEW

BACK

Dasar Tag HTML

Soal (6)

Tuliskan Source Code dari tampilan berikut:

VIEW

BACK

Dasar Tag HTML

Soal (7)

Tuliskan Source Code dari tampilan berikut:

VIEW

END

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.

CSS (Cascading Style Sheet)

Konsep:

Pewarisan (inheritance)
Selektor-Kontekstual (Contextual Selector)
Kelas (classes)

BACK

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

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

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>

Catatan: Untuk declaration color dapat juga menggunakan kode heksa

BACK

CSS Selektor-Kontekstual (Contextual Selector)

Text
<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>
Catatan: selector ini kesemuanya untuk bold+italic text

BACK

CSS (Cascading Style Sheet)

Perbedaan CSS pewarisan (inheritance) dengan
CSS Selektor-Kontekstual (Contextual Selector) !!!
Pewarisan (inheritance)
<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>

Selektor Kontekstual (Contextual Selector)

<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

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

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

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

CSS (Cascading Style Sheet)

Text
<html>
<head>
<title>CSS_04</title>
<style type=text/css>
h3 { color:#009900 }
</style>
</head>
<body>
<h3>Fakultas Ilmu Komputer</h3>
</body>
</html>

BACK

CSS (Cascading Style Sheet)

Text
<html>
<head>
<title>CSS_05</title>
<style type=text/css>
h2 { color:#009900 }
h3 { color:#FF3333 }
</style>
</head>
<body>
<h2>Sistem Informasi</h2>
<br>
<h3>Sistem Komputer</h3>
</body>
</html>
BACK

CSS (Cascading Style Sheet)

Text

text-decoration:
- underline (tampil garis dibawah text)
- overline (tampil garis diatas text)
- line-trough (tampil garis melalui
text)
- none (non-efek)

<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

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

CSS (Cascading Style Sheet)

Soal (1)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (2)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (3)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

END

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-weight:
font-size:14px;
- normal
font-weight:bold;
- bold
}
</style>
</head>
<body>
<i>Universitas Narotama Surabaya</i>
</body>
</html>
NEXT

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

CSS (Cascading Style Sheet)

Text

font-variant:
small-caps (mengganti semua
[Link]-case dengan [Link]-case)
none (tanpa efek)

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

Catatan: font-variant tidak berlaku pada browser Netscape

BACK

CSS (Cascading Style Sheet)

Text

text-transform:
capitalize ([Link] huruf besar)
uppercase (Semua kar. huruf besar)
lowercase (Semua kar. Huruf kecil)

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

BACK

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

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

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

CSS (Cascading Style Sheet)

Body
<html>
<head>
<title>CSS_16</title>
<style type=text/css>
body
{ background-image:
url([Link]);
}
</style>
</head>
<body>
</body>
</html>

BACK

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

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

CSS (Cascading Style Sheet)

Soal (4)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (5)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (6)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

END

CSS (Cascading Style Sheet)

Link
Link Properties:

A:link
A:hover
A:active

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

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>
PREVIEW

BACK

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>
PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (7)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (8)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Kursor Link

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (9)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

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

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

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

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

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

CSS (Cascading Style Sheet)

Soal (FORM_01)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (FORM_02)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

END

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>
<tr>
<td>04102001</td><td>Lukmanul Khakim</td>
</tr>
<tr>
<td>04102002</td><td>Indra Cahyo</td>
</tr>
</table>
</body></html>

Catatan: Untuk declaration solid dapat juga menggunakan kode heksa

BACK

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>
<tr>
<td>04102001</td><td>Lukmanul Khakim</td>
</tr>
<tr>
<td>04102002</td><td>Indra Cahyo</td>
</tr>
</table>
</body></html>

BACK

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>
<tr>
<td>04102001</td><td>Lukmanul Khakim</td>
</tr>
</table></body></html>

Catatan: deklarasi border tidak berlaku pada selector <TR>

BACK

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>04102001</td><td>Lukmanul Khakim</td>
</tr></table>
</body></html>
Catatan: deklarasi padding tidak berlaku pada selector <TR>

BACK

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>04102001</td><td>Lukmanul Khakim</td>
</tr></table>
</body></html>
Catatan: deklarasi padding tidak berlaku pada selector <TR>

BACK

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>04102001</td><td>Lukmanul Khakim</td>
</tr></table>
</body></html>
Catatan: deklarasi padding tidak berlaku pada selector <TR>

BACK

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>04102001</td><td>Lukmanul Khakim</td>
</tr></table>
</body></html>
BACK

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>04102001</td><td>Lukmanul Khakim</td>
</tr></table>
</body></html>
BACK

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>04102001</td><td>Lukmanul Khakim</td>
</tr></table>
</body></html>
BACK

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>04102001</td><td>Lukmanul Khakim</td>
</tr></table>
</body></html>
BACK

CSS (Cascading Style Sheet)

Soal (10)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (11)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (12)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (13)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet)

Soal (14)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

PREVIEW

BACK

CSS (Cascading Style Sheet) Classes

Penulisan
<style type=text/css>
.variable { deklarasi }
</style>

Catatan: bagian deklarasi harus diawali dengan tanda . (titik)

BACK

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>
PREVIEW

BACK

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>
PREVIEW

BACK

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>
PREVIEW

BACK

Pengenalan PHP
Penulisan script PHP diawali dengan:

<?php ?>, atau

<? .. ?>,atau
<script language=PHP>.</script>

BACK

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

Pengenalan PHP

HTML & PHP:

<html>
<head>
<title>Latihan-01</title>
</head>
<body>
<?php
echo Hallo PHP,aku akan menaklukanmu!!!;
?>
</body>
</html>
BACK

Pengenalan PHP

Komentar pada PHP

Komentar merupakan penjelasan

yang menerangkan maksud dari
skrip agar skrip tersebut dapat
mudah dipahami.

BACK

Pengenalan PHP

Komentar pada PHP

Tanda komentar PHP:

// , berada dalam satu baris

/../, digunakan apabila pemberian komentar lebih dari satu

baris.

BACK

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

Pengenalan PHP

Variabel:

Suatu tempat untuk menyimpan data.

Data yang disimpan sewaktu bisa kita
panggil atau diganti dengan data lain.

BACK

Pengenalan PHP
Variabel Pada PHP:
Mendefinisikan [Link] dengan
memilih sebuah kata
Bersifat case sensitif
Di awali tanda $
Contoh:
$hari=senin;
$tgl=30;
Catatan:
tidak ada pendeklarasian khusus pada [Link]

BACK

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

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

Pengenalan PHP
Operator Aritmatika: digunakan untuk perhitungan
Simbol
Operator

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

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 += 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.
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=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 kecil dari yang di sebelah kanan (selain ini akan bernilai
FALSE atau 0).

$a=12;
$b=10;
$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;
$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.

BACK

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

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

BACK

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

BACK

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

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

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;
break;
default:
echo Berarti \$a < 10;
}
?>
BACK

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

BACK

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

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

BACK

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

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

BACK

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

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

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

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

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

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

BACK

PHP & MySQL

Studi Kasus:

Membuat File Koneksi

Menampilkan Data pada MySQL dengan PHP
Form, method: Post & Get

BACK

Finish
Sekian Materi Design & Pemrograman Web.

Untuk Pengembangan Selanjutnya,

Terserah Anda

Silahkan sharing ilmu bersama:

ym: zakki_falani@[Link]
END

Anda mungkin juga menyukai

Ebook Intel XDK Bahasa Indonesia PDF
50% (2)
Ebook Intel XDK Bahasa Indonesia PDF
157 halaman
Rps - Pemrograman Web Revisi
Belum ada peringkat
Rps - Pemrograman Web Revisi
27 halaman
Panduan Presentasi Video Produk
Belum ada peringkat
Panduan Presentasi Video Produk
4 halaman
Dasar Pemrograman Flash Game
100% (66)
Dasar Pemrograman Flash Game
236 halaman
Modul Pemrograman Web Dasar
Belum ada peringkat
Modul Pemrograman Web Dasar
146 halaman
RPS Pemrograman Web 2022
Belum ada peringkat
RPS Pemrograman Web 2022
7 halaman
0 - RPS Pemrograman Berbasis Web
Belum ada peringkat
0 - RPS Pemrograman Berbasis Web
6 halaman
Pemrograman Database PDF
Belum ada peringkat
Pemrograman Database PDF
104 halaman
Dasar Dasar Sistem Informasi
100% (1)
Dasar Dasar Sistem Informasi
55 halaman
Desain Game Mobile dengan Unity 3D
Belum ada peringkat
Desain Game Mobile dengan Unity 3D
272 halaman
Menulis Surat Dinas PDF
Belum ada peringkat
Menulis Surat Dinas PDF
100 halaman
Wireframe & Prototype Desain Web 2023
Belum ada peringkat
Wireframe & Prototype Desain Web 2023
8 halaman
Game Edukasi Ular Tangga Mobile
100% (3)
Game Edukasi Ular Tangga Mobile
143 halaman
Panduan PHP untuk Pemula
Belum ada peringkat
Panduan PHP untuk Pemula
136 halaman
ACC KELOMPOK 3 MODUL INOVASI RegA VII SARJANA TERAPAN Rev 02
Belum ada peringkat
ACC KELOMPOK 3 MODUL INOVASI RegA VII SARJANA TERAPAN Rev 02
43 halaman
Praktikum Akhir Pemrograman Web
Belum ada peringkat
Praktikum Akhir Pemrograman Web
70 halaman
Panduan OOP C# untuk Aplikasi Fleksibel
100% (1)
Panduan OOP C# untuk Aplikasi Fleksibel
220 halaman
Web Design & Programming SMK
100% (1)
Web Design & Programming SMK
177 halaman
Pelatihan CodeIgniter: MVC dan OOP
Belum ada peringkat
Pelatihan CodeIgniter: MVC dan OOP
12 halaman
(PHP) Menjadi Webmaster Dalam 30 Hari
Belum ada peringkat
(PHP) Menjadi Webmaster Dalam 30 Hari
586 halaman
MATERI Pengenalan Fundamental UI - UX
Belum ada peringkat
MATERI Pengenalan Fundamental UI - UX
21 halaman
MODULPRAKTIKUM Web 2 Cetak by Dedih
Belum ada peringkat
MODULPRAKTIKUM Web 2 Cetak by Dedih
107 halaman
DTS HTML CSS Advanced Material - BHS
Belum ada peringkat
DTS HTML CSS Advanced Material - BHS
122 halaman
Belajar Bootstrap
Belum ada peringkat
Belajar Bootstrap
10 halaman
Ebook Membuat Aplikasi Mobile Dengan QT SDK Versi 2 by Iqbal
Belum ada peringkat
Ebook Membuat Aplikasi Mobile Dengan QT SDK Versi 2 by Iqbal
204 halaman
Laporan Coding JSS - Raka Teo Endrawan - E1J021067
Belum ada peringkat
Laporan Coding JSS - Raka Teo Endrawan - E1J021067
17 halaman
Pertemuan 02 - PART 2 Junior Web Developer VSGA DTS 2022
Belum ada peringkat
Pertemuan 02 - PART 2 Junior Web Developer VSGA DTS 2022
40 halaman
Edisi Perdana PHP Indonesia Female Team
Belum ada peringkat
Edisi Perdana PHP Indonesia Female Team
112 halaman
Dasar Sistem Informasi
Belum ada peringkat
Dasar Sistem Informasi
32 halaman
HTML untuk Pemula
Belum ada peringkat
HTML untuk Pemula
179 halaman
Tutorial PHP
100% (1)
Tutorial PHP
158 halaman
Modul-Design Web
Belum ada peringkat
Modul-Design Web
159 halaman
Atribut Tabel HTML dan Penggunaannya
Belum ada peringkat
Atribut Tabel HTML dan Penggunaannya
18 halaman
Modul Web Pert-2
Belum ada peringkat
Modul Web Pert-2
14 halaman
Modul 3 Menerapkan Format Tabel Pada Halaman Web
100% (2)
Modul 3 Menerapkan Format Tabel Pada Halaman Web
17 halaman
Cover Dan Isi Lengkap Web Pro 20 33
Belum ada peringkat
Cover Dan Isi Lengkap Web Pro 20 33
14 halaman
Pertemuan 1 Web
Belum ada peringkat
Pertemuan 1 Web
23 halaman
Web Design 1
Belum ada peringkat
Web Design 1
74 halaman
Modul I-HTML
Belum ada peringkat
Modul I-HTML
8 halaman
Laporan Resmi Modul 2
0% (1)
Laporan Resmi Modul 2
12 halaman
Materi Tabel
Belum ada peringkat
Materi Tabel
8 halaman
Belajar Web Programming - 1
Belum ada peringkat
Belajar Web Programming - 1
32 halaman
Panduan Tabel HTML untuk Pemula
Belum ada peringkat
Panduan Tabel HTML untuk Pemula
19 halaman
Laporan Resmi Modul Ii: Praktikum Web I
Belum ada peringkat
Laporan Resmi Modul Ii: Praktikum Web I
8 halaman
Pemerograman Web #2
Belum ada peringkat
Pemerograman Web #2
16 halaman
Panduan Dasar HTML dan Tag Penting
Belum ada peringkat
Panduan Dasar HTML dan Tag Penting
4 halaman
Panduan Tabel HTML untuk Siswa
Belum ada peringkat
Panduan Tabel HTML untuk Siswa
31 halaman
Belajar Dasar Pemrograman Web HTML
Belum ada peringkat
Belajar Dasar Pemrograman Web HTML
29 halaman
W1 2 HTML
Belum ada peringkat
W1 2 HTML
90 halaman
Bahan Ajar 4
Belum ada peringkat
Bahan Ajar 4
35 halaman
Panduan Dasar HTML
Belum ada peringkat
Panduan Dasar HTML
37 halaman
Makalah Designt Website
Belum ada peringkat
Makalah Designt Website
17 halaman
Modul HTML 5 Programming
Belum ada peringkat
Modul HTML 5 Programming
29 halaman
Membuat Web Dengan Dreamweaver
100% (30)
Membuat Web Dengan Dreamweaver
52 halaman
Laporan Praktikum Modul 1
Belum ada peringkat
Laporan Praktikum Modul 1
9 halaman
UTS - NOVIA KRISNA ISTIFARAH - 180312613017 - Off I PDF
Belum ada peringkat
UTS - NOVIA KRISNA ISTIFARAH - 180312613017 - Off I PDF
15 halaman
Materi 1 Pak Ari Pambudi
Belum ada peringkat
Materi 1 Pak Ari Pambudi
139 halaman
Bab 5. Membuat Web Statis Menggunakan HTML Dan CSS
Belum ada peringkat
Bab 5. Membuat Web Statis Menggunakan HTML Dan CSS
8 halaman
Modul HTML Dasar
Belum ada peringkat
Modul HTML Dasar
13 halaman
Tag HTML untuk Formulir dan Elemen
Belum ada peringkat
Tag HTML untuk Formulir dan Elemen
14 halaman