Modul v2
Diunggah oleh
Syam SuryadiModul v2
Diunggah oleh
Syam SuryadiModul Praktikum
PHP DAN MYSQL
ARYSESPAJAYADI, ST., MT.
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS SEMBILANBELAS NOVEMBER KOLAKA
KOLAKA
2018
MODUL PRAKTIKUM
PRAKTIKUM I
Tujuan :
a. Mahasiswa mengetahui pengertian HTML dan struktur dokumen HTML
b. Mahasiswa mengetahui tag-tag HTML umum yang banyak digunakan.
c. Mahasiswa mengerti cara penggunaan tag untuk heading.
d. Mahasiswa mengerti cara penggunaan tag untuk Paragraf.
e. Mahasiswa mengerti cara penggunaan tag untuk Blockquote.
f. Mahasiswa mengerti cara penggunaan tag untuk Preformatted Text.
g. Mahasiswa mengerti cara penggunaan tag untuk Begin Row (BR).
h. Mahasiswa mengerti cara penggunaan tag untuk Ukuran font.
i. Mahasiswa mengerti cara penggunaan tag untuk Jenis Font.
j. Mahasiswa mengerti cara penggunaan tag untuk Link
Pengertian HTML
HTML adalah bahasa untuk memarkup (memformat). HTML memberitahu Web Browser
bagaimana cara menampilkan konten. HTML memisahkan "konten" (kata-kata, gambar, audio,
video dan lainnya) dari "Penampilan" (Definisi dari tipe konten dan instruksi bagaimana tipe
konten tersebut harus ditampilkan). HTML menggunakan beberapa elemen yang telah didefinisikan
untuk mengidentifikasi tipe-tipe konten. Element-elemen memiliki satu atau lebih "tag" yang
memiliki atau mengekspresikan konten. Tatag diawali dan diakhiri dengan kurung siku, dan tag
"penutup" (tag yang menandakan akhir dari konten) diawali dengan garis miring.
Struktur Dokumen HTML
<HTML>
<HEAD>
<TITLE>Selamat. datang di Homepage Saya </TITLE>
</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil
karya saya yang pertama.
</BODY>
</HTML>
Keterangan :
Tag <Title> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada
pojok kiri atas ( title bar ) browser. Ketika orang akan mem-bookmark web Anda, maka judul
inilah yang akan disimpan
Untuk melihat hasilnya, silahkan jalankan browser Favorit anda, seperti contoh di bawah ini
digunakan Mozilla Firefox.
1. Heading
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML.
Heading berbeda dengan Tag <Title> yang tidak bisa muncul dalam halaman web. HTML
menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.
Contoh :
<HTML>
<HEAD>
<TITLE> Headings </TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1 </H1>
<H2>Heading Level 2 </H2>
<H3>Heading Level 3 </H3>
<H4>Heading Level 4 </H4>
<H5>Heading Level 5 </H5>
<H6>Heading Level 6 </H6>
</BODY>
</HTML>
2. Paragraf
Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf dan
paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf dengan
attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri,
CENTER untuk rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN="right">
Beberapa tahun yang lalu, seorang hartawan meninggal
dunia sedangkan ia tidak memiliki ahli waris. Kepada
pengacaranya, ia meninggalkan dua buah surat yang
disegel. Yang sebuah berisi permintaan agar
jenazahnya dikuburkan pada jam empat dini hari .
Surat yang kedua belum diketahui isinya karena
disampulnya tertulis pesan agar dibuka seusai
pemakaman jenazah
<P ALIGN="center">
Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul empat
dini hari. Karena tidak lazimnya waktu pemakaman pada jam
tersebut, yang ikut. mengantar jenazahnya hanya empat orang
kawannya yang paling setia
<P ALIGN="left">
Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa
terkejutnya pengacara ketika membaca isinya, ialah wasiat bahwa
seluruh harta warisan {yang bernilai lebih dari 800.000 pound)
dibagi rata kepada orang-orang yang mengantarkan jenazahnya ke
pemakaman. Dengan demikian, yang berhak memperoleh harta yang
banyak itu hanya empat orang, sebagai imbalan bagi kesetiaan
mereka. Sumber humor, kisah dan pepatah
</P>
</BODY>
</HTML>
3. Blockquote
Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini
browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan teks
bentuk huruf miring.
Contoh :
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Sesuatu yang tidak perlu dicoba</H3>
<BLOCKQUOTE>
Sesuatu yang kelihatan mengasyikkan tetapi sebenarnya lebih banyak
menambah masalah pada remaja adalah narkoba, seks, alcohol dan
merokok. Jangan sekali-kali mencoba kalau tidak ingin masalah baru
</BLOCKQUOTE>
</BODY>
</HTML>
4. Preformatted Text
Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang anda ketikkan
dalm dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu
seperti yang terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Contoh :
<HTML>
<HEAD>
<TITLE>Preformatted Text</TITLE>
</HEAD>
<BODY>
<PRE>
Edisi yang lalu dibahas tentangmembuat billing system untuk warnet
yang dapat langsung mencetak tagihan.
Kali ini diulas bagaimana menyimpan setiap transaksi dalam
database agar bisa diperoleh beberapa laporan secara periodic.
</PRE>
</BODY>
</HTML>
5. Begin Row (BR)
Tag ini digunakan unluk menulis teks pada baris berikutnya. Tag (BR) membuatbaris baru tanpa
memberi baris kosong di bawahnya.
Contoh :
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P>Banyak cara yang dapat digunakan untuk melakukan instalasi
FreeBSD. Namun ada tiga cara yang paling sering dilakukan,yaitu :
<BR>Instalasi melalui FTM
<BR>Instalasi melalui CDROM
<BR>Instalasi melalui partisi DOS
</BODY>
</HTML>
6. Ukuran Font
Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE>
memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh :
<HTML>
<HEAD>
<TITLE>Ukuran Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font 1</FONT>
<FONT SIZE=2>Ukuran font 2</FONT>
<FONT SIZE=3>Ukuran font 3</FONT>
<FONT SIZE=4>Ukuran font 4</FONT>
<FONT SIZE=5>Ukuran font 5</FONT>
<FONT SIZE=6>Ukuran font 6</FONT>
<FONT SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>
7. Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi
dengan string jenis font seperti Arial, Times New Roman, Verdana, dsb.
Contoh :
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE = ‘’Arial’’>Arial, contoh AC MILAN <P>
<FONT FACE = ‘’Verdana’’>Verdana, contoh Persebaya <P>
<FONT FACE = ‘’Times New Roman’’>Times New Roman, contoh Indonesia
<P>
</BODY>
</HTML>
8. Warna Font
Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan.Untuk memberi nilai
pada atribut color ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red,Blue,
Yellow, White, dsb. Sedangkan cara keduaadalah dengan menggunakan nilai RGB (Red, Green,
Blue) dari suatu warna,misalnya FF0000 untuk Red, 00FF00 untuk Green dan 0000FF untuk Blue.
Contoh :
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR = “red”>Sulawesi Tenggara<P>
<FONT COLOR = “#FF0000”>tetap Sulawesi Tenggara kan?<P>
<FONT COLOR = “#00FF00”>Ini baru Indonesia<P>
</BODY>
</HTML>
9. Link
Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen
HTML lain digunakan perintah <A HREF = ‘’nama_dokumen’’> Teks padabrowser </A>.
Anda juga dapat membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama
anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME
pada tag <A>.Misalnya <A NAME = ‚’Bugs’’</A>. Cara melakukan link ke bagian tersebut adalah
<A HREF=’’nama_anchor’’>teks pada browser</A>.
Contoh :
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY>
<A NAME=”lengkap”>Pemain-pemain AC Milan menurut abjad</A>
<BLOCKQUOTE>
<P>Abbiati,<A HREF=”#abbiati”>info lengkap<A>
<P>Anyala
<P>Ambrosini
<P>Albertini
<P>Boban
<P>
<A HREF=”linktujuan.html”>kalo mau tahu lagi klik disini </A>
</BLOCKQUOTE>
<P><A NAME=”abbiati”>Abbiati</A>
<BLOCKQUOTE>
<P>Kiper ketiga Timnas Italia runner up Euro 2000
<BR>Kiper utama U-21 juara piala Eropa U-21
<BR>Kiper utama AC Milan Juara Seri-A 1998-1999
</BLOCKQUOTE>
<P><A HREF=”#lengkap”>KEMBALI KE ATAS </A>
</BODY></HTML>
<HTML>
<HEAD>
<TITLE>Link tujuan</TITLE>
</HEAD>
<BODY>
<P ALIGN=”center’’> Maaf, hanya sedikit
<BR>Chamot
<BR>Dida
<BR>Shechenko
<BR><A HREF=’’link.html’’>kembali</A>
</BODY>
</HTML>
PRAKTIKUM II
Tujuan :
a. Mahasiswa mampu menggunakan HTML tingkat lanjut.
b. Mahasiswa mengetahui penggunaan tag untuk ordered list
c. Mahasiswa mengetahui penggunaan tag untuk unordered list
d. Mahasiswa mengetahui penggunaan tag untuk memasukkan grafik/gambar dalam halaman web.
e. Mahasiswa mengetahui penggunaan tag untuk membuat Tabel.
f. Mahasiswa mengetahui penggunaan tag untuk Form dan Input yang meliputi form
textbox,Form checkbox dan Form Radio Button.
g. Mahasiswa mampu mengelolah tabel pada halaman web, meliputi pengaturan Align dan
Width,Cellspacing dan cellpadding,Colspan dan rowspan, pemberian warna dan border dari
tabel.
h. Mahasiswa mengetahui penggunaan tag untuk pengaturan form Submit dan reset.
1. Ordered List
Ordered List digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara
berurut. Ordered List dimulai dengan menggunakan tag <OL> dan diakhiri </OL>. Untuk
menyatakan tiap bagiannya digunakan tag <LI> dimana tag ini tidak menggunakan penutup.
Contoh :
<HTML>
<HEAD>
<TITLE>Ordered List</TITLE>
</HEAD>
<BODY>
Empat besar pemain termahal di dunia
<OL>
<LI>Luis Figo
<LI>Hernan Crespo
<LI>Christian Vieri
<LI>Nicolas Anelka
</OL>
</BODY>
</HTML>
Ketika menggunakan perintah ordered list maka default penomoran adalah 1,2,3,…………., anda
bisa mengubah nomor tersebut menggunakan atribut TYPE pada tag <OL>
TYPE = 1; daftar berurut dengan nomor 1,2,3 (defaut)
TYPE I ; daftar berurut dengan menggunakan bilangan Romawi Besar (I,II,III,IV,....)
TYPE i ; daftar berurut dengan menggunakan bilangan Romawi Kecil (i,ii,iii,iv, .......)
TYPE A ; daftar berurut dengan menggunakan abjad besar ( A, B, C, .......)
TYPE a ; daftar berurut dengan menggunakan abjad kecil ( a, b, c, .......)
Selain mengubah jenis penomoran, HTML juga menyediakan perintah untuk menentukan nilai
awal penomoran. Atribut yang digunakan adalah START = n, dimana n adalah nilai awal
penomoran.
Contoh :
<HTML>
<HEAD>
<TITLE>OL dengan atribut</TITLE>
</HEAD>
<BODY>
<OL TYPE=A>
<LI>Daftar empat pemain termahal dunia
<OL TYPE=I>
<LI>Luis Figo
<LI>Hernan Crespo
<LI>Christian Vieri
<LI>Nicolas Anelka
</OL>
<LI>Urutan lima sampai delapan
<OL TYPE=1 START=5>
<LI>Denilson
<LI>Gebriel Batigol
<LI>Ronaldo
<LI>Amoroso
</OL>
</OL>
</BODY>
</HTML>
2. Unordered List
Berbeda dengan Ordered List, dalam unordered list tidak dijumpai urutan dalam suatu daftar.
Setiap bagian dari unordered list ditandai dengan tanda bullet. Tanda bullet menjadi default dalam
unordered list.Untuk membuat daftar dengan tanda ini digunakan tag awal <UL> dan tag akhir
</UL>. Sama seperti ordered list, untuk tiap-tiap bagian digunakan <LI> tanpa tag penutup.
Contoh:
<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY> Empat besar Seri-A Liga Indonesia
<UL>
<LI>PSM Makassar
<LI>Pupuk Kaltim
<LI>Persikota
<LI>Persija Pusat
</UL>
</BODY>
</HTML>
Selain default anda bullet, anda bisa menggunakan tanda cakram/disk, lingkaran, atau kotak.
Caranya dengan menggunakan atribut TYPE pada tag <UL>.
Contoh:
<HTML>
<HEAD>
<TITLE>UL dengan atribut</TITLE>
</HEAD>
<BODY>
Klub sepakbola di Jawa Timur
<UL TYPE=square>
<LI>Mitra Surabaya
<LI>Persebaya
<LI>Persija Jember
<LI>Persija Pusat
</UL>
</BODY>
</HTML>
3. Grafik dalam Halaman Web
Biasanya orang menggunakan garnbar unluk memperindah situsnya. HTML menyediakan tag
<IMG> untuk menampilkan gambar dalam halaman web. Dari berbagai macam format gambar
ada, hanya beberapa saja yang bisa dipergunakan dalam membuat halaman web. Format gambar
yang paling sering digunakan adalah GIF dan JPEG Format penulisannya adalah: <IMG SRC =
“file_gambar” ALT = "nama_alternalif">
Atribut SRC digunakan untuk menentukan sumber gambar Atribut ALT berfungsi sebagai teks
pengganti gambar untuk browser yang tidak bisa mendukung grafik, atau pada pihak client
sengaja mematikan fasilitas pemanggilan gambar.
Contoh :
<HTML>
<HEAD>
<TITLE>Grafik dalam halaman web</TITLE>
</HEAD>
<BODY>
<P ALIGN=”left”>www.usn.ac.id</P>
<P ALIGN=”left”><IMG SRC=”logousn.JPG” ALT=”KAMPUS USN
KOLAKA”></P>
</BODY>
</HTML>
Beberapa atribut pada tag <IMG> yang biasa digunakan dalam halaman-halaman web.
• BORDER : memberikan suatu border atau batas pada gambar , default-nya = 0
• HEIGHT, WIDTH : menentukan tinggi dan lebar suatu gambar dalam ukuran pixel
• HSPACE, VSPACE : menentukan jarak spasi horizontal dan spasi vertikal antara
gambar-gambar denqan objek di sekitarya
• ALIGN : mengatur peralatan gambar terhadap ob|ek di sekelilingnya. Nilainya bisa
berupa LEFT, CENTER, RIGHT, BOTTOM, TOP dan MIDDLE
Contoh:
<HTML>
<HEAD>
<TITLE>Atribut IMG</TITLE>
</HEAD>
<BODY>
<P>USN Kolaka, VSPACE = 20
<BR>
<IMG SRC="logousn.JPG" WIDTH="270" HEIGTH="70" ALT="radiokampus
ITB" BORDER="2" HSPACE="20" VSPACE="20"><BR>
www.usn.ac.id, HSPACE=20</P>
<P>Jl. Pemuda Kolaka<IMG SRC="logousn.JPG" WIDTH="203" HEIGHT="60"
ALT="Kampus" HSPACE="20">Kolaka,HSPACE=20 <BR>
</P>
</BODY>
</HTML>
4. Table
Tabel banyak digunakan karena dapat menampilkan informasi dalam bentuk yang ringkas dan
mudah dibaca. Untuk membuat tabel digunakan tag awal <TABLE> mewakili beberapa bagian
penting, yaitu :
<CAPTION> ……..</CAPTION> digunakan untuk membentuk judul tabel.Judul tabel ini akan
terletak diluar tabel, bisa dibagian atas atbagian bawah tabel;
<TH> ……..</TH> berfungsi untuk meletakkan judul tabel dibagian paling atas atau paling kiri
dari suatu tabel;
<TD>…….</TD> digunakan sebagai tempat menulis data atau informasi dalam tabel.
Table ALIGN dan WIDTH
Peralatan horizontal tabel menggunakan atribut ALIGN. ALIGN dapat bernilai LEFT untuk
peralatan kiri, CENTER untuk peralatan tengah dan RIGHT untuk peralatan di kanan. Sedangkan
untuk peralatan vertikal menggunakan atribut VALIGN. VALIGN dapat bernilai TOP untuk
peralatan atas,MIDDLE untuk peralatan ditengah dan BOTTOM untuk peralatan di bawah.
Lebar tabel biasanya diatur menggunakan atribut WIDTH. Nilai WIDTH dapat dinyatakan dengan
persen (%) yang menyatakan lebar tabel dalam persentase atau dinyatakan dengan pixel yang
berarti ukuran sesungguhnya dari tabel.
Table CELLSPACING dan CELLPADDING
Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua
buah sel. CELLPADDING berfungsi untuk mengatur jumlah spasi yang terdapat diantara
batas/border dengan isi atau teks didalam sel tersebut.
Table COLSPAN dan ROWSPAN
Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi satu
kolom. Sedangkan ROWSPAN digunakan un;uk menggabungkan beberapa baris menjadi satu.
Table COLOR
Anda bisa rnemberi wama pada tabel. Selain warna latar belakang, bolder tabel bisa juga
ditentukan warnanya. Untuk latar belakang digunakan atribut BGCOLOR, sedangkan untuk
memberi warna pada border gunakan atribut BORDERCOLOR.
5. Form dan Input
Tag <FORM> dan <INPUT>digunakan bersama-sama untuk meminta masukan dari user untuk
kemudian dikirim ke server. Tag <FORM> membuat kerangkanya sedangkan tag <INPUT>
menyediakan elemen antar muka dengan user .
Anda terlalu sering menjumpai situs yang menyediakan buku tamu bagi pengunjungnya. Formulir
tersebut dibuat dengan menggunakan elemen form dan input. Standar penulisan form adalah:
<FORM METHOD = "POST/GET’’ ACTION = "URL">
………………
………………
</FORM>
Atribut METHOD memiliki dua nilai POST dan GET. Metode GET mengirimkan data pada server
dengan cara meletakkan data pada bagian akhir URL (Uniform Resources Locator) yang ditunjuk.
Metode POST mengirimkan datanya secara terpisah. Jika data masuk banyak, lebih disarankan
untuk menggunakan metode POST. Atribut ACTION berisi URL dari program yang dipanggil oleh
form tersebut.
Form TEXTBOX
Textbox merupakan salah satu jeniskontrol untuk memasukkan data. HTML menyediakan tag
<INPUT> dengan atribut TYPE=’’text’’ untuk membuat kotak input. JikaTYPE diberi nilai
tersebut, atribut VALUE untuk memberi nilai suatu input, dan atribut SIZE untuk menentukan
batas terpanjang sebuah masukan. Nilai VALUE juga menjadi tulisan yang tampak pada browser.
Anda bisa menyembunyikan masukan yang ditulis user dengan memberi TYPE=’’password’’.
Masukan akan menjadi karakter ‘’*’’.
From CHECKBOX
Selain atribu TYPE bernilai text dan password, Anda bisa memberi nilai atribut TYPE dengan
Checkbox yang digunakan untuk memberi user pilihan. Dengan menggunakan checkbox, user bisa
memilihsalahsatu pilihan, lebih dari satu pilihan, atau tidak memilih semua pilihan.
From RADIO BUTTON
Jika atribut TYPE=’’checkbox’’diganti dengan TYPE=’’radio’’, maka user harus memilih salah
satu pilihan yang tersedia.User tidak bisa memilih kurang atau lebih darisatupilihan. Atribut
CHECKED memberi tanda bahwa pilihan tersebut sedang diaktifkan.
Form SUBMIT dan RESET
Setiap form harus memiliki minimal tombol submit atau tombol reset. Lebih baik jika keduanya
digunakan bersama. Kedua tombal diatas dibuat dengan menggunakan atribut TYPE=’’submit’’
dan dan TYPE="reset". Tombol submit digunakan ketika user telah selesai mengisi formulir dan
ingin mengirimkan ke server. Sedangkan tombol reset digunakan ketika user ingin menghapus
semua masukan yang telah ditulis.
Praktikum III
Tujuan:
1. Memahami pengertian HTML 5
2. Memahami pengertian CSS3
3. Memperkenalkan scrip HTML 5
4. Memperkenalkan scrip CSS3
PENGERTIAN HTML 5
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari
Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari
HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada
tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama
pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung
teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh
mesin.
HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web
Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis
dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML
4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-
beda oleh banyak perangkat lunak pembuat web.
Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology
Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika
Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara
HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan
WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri
Kelompok Kerja Pengembangan XHTML 2.0.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru
mencuat pada April 2010 setelah CEOApple Inc., Steve Jobs, mengatakan bahwa dengan
pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau
menyaksikan konten apapun di web."
Fitur baru di HTML5
Pada bagian ini, Anda akan menemukan beberapa fitur baru yang besar yang HTML5
tawarkan. Pertama anda akan belajar tentang elemen semantik baru yang bertujuan untuk memberi
maknake berbagai bagian dari suatu halaman Web modern: headers, footers, navigation bars,
sidebars, dan sebagainya.
Unsur-unsur semantik baru yang disediakan HTML5 adalah:
<article>
Unsur <article> digunakan untuk mendefinisikan item independen pada halaman yang dapat
didistribusikan sendiri, seperti sebuah berita, posting blog, atau komentar.
<section>
Elemen ini merupakan bagian dari sebuah dokumen atau aplikasi, seperti bab atau bagian dari
sebuah artikel atau tutorial. Misalnya, bagian Anda baca sekarang bisa dikelilingi oleh elemen
<section> di HTML5.
<nav>
Ini adalah wadah untuk link navigasi utama pada halaman Web
<aside>
Elemen baru ini dapat digunakan untuk menandai sebuah sidebar atau beberapa konten lainnya
yangdianggap agak terpisah untuk konten sekitarnya. Contohnya adalah iklan
<hgroup>
Dalam beberapa kasus, halaman, artikel, atau bagian mungkin memerlukan lebih dari satu pos,
seperti di mana Anda memiliki judul dan subjudul.
<canvas>
Unsur ini adalah salah satu aspek yang paling penting dariHTML5 karena memfasilitasi produksi
grafik, permainan interaktif,aplikasi paint, dan grafis lain dengan cepat tanpa memerlukan plug-in
eksternal sepertiAdobe Flash.
<audio> dan <video>
Kedua unsur ini memungkinkan Developer Web untuk memasukkan konten multimedia tanpa
bergantung padapengguna untuk memiliki browser tambahan plug-in diinstal.
PENGERTIAN CSS3
Sebelum Anda dapat menguasai CSS, tentunya Anda harus memahami terlebih dahulu pengertian
dari CSS itu sendiri. Anda akan mengetahui sejarah singkat lahirnya CSS, kegunaannya, dan cara
penggunaannya. Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan
CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web. Tujuannya adalah
mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet Explorer (IE), karena pada
masa itu kedua browser saling bersaing mengembangkan TAG sendiri untuk mengatur tampilan
web.
CSS level 1 mendukung pengaturan tampilan dalam hal:
1. Font (jenis, ketebalan),
2. Warna teks, latar belakang, dan elemen lainnya,
3. Text attributes, misalnya spasi antar baris, kata, dan huruf,
4. Posisi text, gambar, tabel, dan elemen lainnya,
5. Marjin, border, dan padding.
Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS2
(CSS level 2) – yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua
atribut dari CSS 1, serta diperluas dengan penekanan pada International accesibility and capability
khususnya media-specific CSS.
Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3 dimulai pada
tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS 3 ini sampai sekarang masih terus
dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.
HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS
merupakan kelebihan tersendiri.
Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan scriptyang telah
embedded dengan HTML. Anda cukup menggunakan aplikasi notepad++ untuk menciptakan script
CSS sendiri.
Manfaat dari CSS:
1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia
5. XHTML,
6. Digunakan dalam hampir semua web browser.
Sintaks & Penempatan Kode CSS
Sintaks CSS terdiri dari tiga bagian:
o Selector
o Property
o value
Selectoradalah elemen atau tag HTML yang akan di-definisi-kan. Propertyadalah atribut yang akan
diganti dengan “nilai” tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (:) dan
keduanya diapit oleh tanda kurung kurawal ({).
Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:
selector { property: value}
Contoh 1:
p { color:black }
Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (“). Untuk
memberikan lebih dari satu _property bagi suatu _property, pisahkan setiap kombinasi
“property:value” dengan tanda titik koma (;). Untuk membuat definisi gaya lebih mudah dibaca,
definisi tiap property dapat dilakukan per baris. Sehingga sintaksnya menjadi :
selector { property1: value; property2: “value_value”; … }
Contoh 2:
p { text-align:center; font-family:“sans serif” }
Aturan-aturan yang berlaku dalam sintaks CSS:
1. Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2),
2. Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil,
3. Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma
4. (;) untuk membatasi properti yang satu dengan yang lain (contoh 2),
5. Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma
(,).
Contoh :
h1,h2,h3 {color:green}
Class selector
Dengan menggunakan class selector, Anda dapat mendefinisikan perbedaan style untuk tag elemen
html yang sama. Class dibuat dengan tanda titik kemudian diikuti dengan nama kelasnya
.namakelas{ }
Contoh 3:
Misalkan Anda ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang
lain rata kiri. Maka:
p.right {text-align: right}
dan
p.left {text-align: left}
Aturan Class selector:
1. Jangan memberi nama class dengan angka,
2. Jika memberikan nama class lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik
(“)
ID Selector
Aturan penamaan ID:
1. Dapat mengandung huruf, angka, atau karakter garis bawah,
2. Karakter pertama harus berupa huruf atau karakter garis bawah,
3. Diawali dengan tanda #,
4. Jangan memberi nama id sama dengan value,
5. Jangan memberi nama id dengan tag html kemudian diikuti tanda #.
Contoh 4:
<html>
<head>
<style type = "text/css">
<!--
#tebal { font-weight : bold;
color : blue; }
#miring { font-style : italic;
color: pink; }
-->
</style>
</head>
<body>
<h1>Contoh</h1>
<h2 id = "miring">
Selamat Belajar
CSS
</h2>
<h3 id = "tebal">
Saya baru pertama kali belajar CSS
</h3>
</body>
</html>
Penempatan kode CSS dalam HTML
Ada tiga cara penempatan kode CSS dalam HTML:
1. Internal CSS
Metode penulisan kode CSS langsung dalam file HTML.
Contoh:
<html>
<head>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Menguak Rahasia CSS</p>
</body>
</html>
2. Eksternal CSS
Memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file
HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut.
Eksternal style ditulis di text editor lain dengan ekstention .css.
Contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css”href=”test.css”/>
</head>
<body>
<h3>Menguak Rahasia CSS</h3>
</body>
</html>
3. Inline CSS
Penulisan kode CSS dalam tag HTML.
Contoh:
nama File : inline.html
<html>
<head>
</head>
<p style=”background: red; color: black;”>Menguak Rahasia CSS</p>
</body>
</html>
Contextual Selectors
Contextual Selectors digunakan jika style akan digunakan dalam situasi tertentu, misalnya saja jika
elemen HTML yang digunakan merupakan sebuah kombinasi. Misalnya saja jika kita akan
membuat semua table data mempunyai align center , font arial, dan huruf berwarna orange.
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Maka digunakan contextual selectors
Table tr td{ color: orange;
font-family: arial; Text-
align:center;}
Contoh:
<html>
<head>
<style type="text/css">
table tr td{color:orange;
font- family:arial;text-
align:center;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Cinta</td>
<td>Bahagia</td>
</tr>
<tr>
<td colspan=2
align=center>Sedih</td
>
</tr>
</table>
</body>
</html>
PENGENALAN TAG-TAG HTML5
Tag Deskripsi
<!--…→ Mendefinisikan sebuah komentar
<!DOCTYPE> Mendefinisikan tipe dokumen
<a> Mendefinisikan sebuah hyperlink
<abbr> Mendefinisikan sebuah singkatan
<address> Mendefinisikan informasi kontak untuk pemilik atau penulis dokumen/artikel
<area> Mendefinisikan area didalam sebuah gambar
<article> Mendefinisikan artikel
<aside> Mendefisikan isi selain dari konten utama
<audio> Mendefinisikan suara/music
<b> Mendefinisikan cetak tebal dalam teks (bold)
<base> Menentukan URL dasar/target untuk semua URL relatif dalam dokumen
<bdi> Membatasi bagian teks yang mungkin memiliki format baca berbeda dengan teks
diluarnya
<bdo> Mengganti arah teks saat ini
<blockquote> Mendefinisikan sebuah bagian yang dikutip dari sumber lain
<body> Mendefinisikan tubuh dokumen
<br> Mendefinisikan perintah untuk ganti satu baris
<button> Mendefinisikan tombol yang dapat di-klik
<canvas> Digunakan untuk menggambar grafis melalui script
<caption> Mendefinisikan caption untuk tabel
<cite> Mendefinisikan judul suatu objek
<code> Mendefinisikan suatu teks berupa kode-kode computer
<col> Menentukan properties dari kolom didalam element <colgroup>
<colgroup> Menentukan kelompok satu atau lebih kolom dalam format sebuah tabel
<command> Mendefinisikan sebuah tombol komando (command button)
<datalist> Menentukan daftar pilihan standar untuk kontrol input
<dd> Mendefinisikan deskripsi sebuah item yang ada pada definition list
<del> Mendefinisikan efek strikethrough pada kalimat teks
<details> Mendefinisikan detail tambahan yang dapat ditampil-sembunyikan oleh user
<dfn> Mendefinisikan definition term
<div> Mendefinisikan section dalam dokumen
<dl> Mendefinisikan sebuah definition list
<dt> Mendefinisikan istilah (term) dalam definition list
<em> Mendefinisikan efek emphasized pada teks
<embed> Mendefinisikan sebuah aplikasi eksternal / plugins
<fieldset> Mengelompokkan elemen-elemen yang mirip dalam bentuk form
<figcaption> Mendefinisikan caption untuk elemen <figure>
<figure> Menentukan sebuah konten mandiri
<footer> Mendefinisikan sebuah footer pada dokumen atau section
<form> Mendefinisikan sebuah form untuk input user
<h1> to <h6> Mendefinisikan heading untuk HTML
<head> Mendefinisikan informasi yang terkait dengan dokumen
<header> Menentukan pengenalan awal halaman web atau kelompok dari elemen navigasi
untuk dokumen
<hgroup> Mengelompokkan elemen <h1> sampai <h6> ketika heading memiliki multiple
level
<hr> Mendefinisikan sebuah penanda perubahan tematik dalam konten
<html> Mendefinisikan akar dari dokumen HTML
<i> Mendefinisikan efek italic pada teks
<iframe> Mendefinisikan sebuah frame
<img> Mendefinisikan sebuah gambar
<input> Mendefinisikan sebuah kontrol input
<ins> Mendefinisikan teks yang telah dimasukkan dalam dokumen (diikuti efek
underline)
<keygen> Mendefinisikan sebuah key generator untuk form
<kbd> Mendefinisikan input dari keyboard (format teks)
<label> Mendefinisikan label untuk elemen <input>
<legend> Mendefinisikan sebuah caption untuk elemen <fieldset>, <figure> dan <details>
<li> Mendefinisikan daftar item
<link> Mendefinisikan relasi diantara dokumen dan sebuah sumber eksternal,
kebanyakan digunakan untuk merelasikan kepada CSS
<map> Mendefinisikan sebuah gambar yang dapat berfungsi sebagai client-side map
<mark> Mendefinisikan sebuah teks yang disorot/ditandai
<menu> Mendefinisikan sebuah daftar/menu
<meta> Mendefinisikan sebuah metadata tentang dokumen HTML
<meter> Mendefinisikan pengukur untuk ukuran skalar dalam kisaran yang diketahui
<nav> Mendefinisikan link navigasi
<noscript> Mendefinisikan sebuah konten alternatif untuk pengguna yang telah
menonaktifkan script pada browser atau memiliki browser yang tidak mendukung
script tersebut
<object> Mendefinisikan objek yang melekat di dalam dokumen HTML, contohnya file
multimedia
<ol> Mendefinisikan numbered list
<optgroup> Mengelompokkan opsi-opsi yang terkait ke dalam bentuk drop-down
<option> Mendefinisikan sebuah pilihan dalam bentuk drop-down
<output> Mendefinisikan sebuah hasil dari kalkulasi/perhitungan
<p> Mendefinisikan sebuah paragraph
<param> Mendefinisikan sebuah parameter untuk objek
<pre> Mendefinisikan teks yang belum ditentukan formatnya
<progress> Mendefinisikan sebuah perkembangan jalannya proses
<q> Mendefinisikan sebuah kalimat kutipan (quote)
<rp> Mendefinisikan apa yang harus ditampilkan apabila browser tidak mensupport tag
<ruby>
<rt> Mendefinisikan penjelasan atau cara baca dari karakter Asia timur ( <ruby> )
<ruby> Menentukan sebuah penulisan huruf Asian (kanji, mandarin, dll)
<s> Menentukan teks yang tidak lagi benar, akurat atau relevan (diikuti efek
strikethrough)
<samp> Mendefinisikan sampel output dari program computer (format teks)
<script> Mendefinisikan sebuah script
<section> Mendefiniskan section dalam dokumen
<select> Mendefinisikan sebuah list dalam bentuk drop-down
<small> Mendefinisikan teks yang lebih kecil (format teks)
<source> Mendefinisikan sumber elemen media yang beruntun ( <video> dan <audio> )
<span> Mendefinisikan section dalam dokumen
<strong> Mendefinisikan teks penting (format teks)
<style> Menyimpan info style sebuah dokumen
<sub> Mendefinisikan teks subsricpt
<summary> Mendefinisikan heading untuk bagian <detail>
<sup> Mendefinisikan teks superscript
<table> Mendefinisikan sebuah tabel
<tbody> Mengelompokkan bagian tubuh (body) dari tabel HTML
<td> Mendefinisikan sebuah cell dalam tabel
<textarea> Mendefinisikan kontrol input yang terdiri dari banyak baris
<tfoot> Mengelompokkan bagian footer dari tabel HTML
<th> Menentukan dalam tabel bahwa didalam tag <th> adalah header tabel
<thead> Mengelompokkan bagian header dari tabel HTML
<time> Mendefinisikan waktu (24 jam) atau tanggal dalam format Gregorian
<title> Mendefinisikan judul dokumen
<tr> Mendefinisikan sebuah baris dalam tabel
<track> Mendefinisikan subtitle dari elemen multimedia ( <audio> dan <video> )
<ul> Mendefinisikan bulleted list
<var> Mendefinisikan sebuah variable
<video> Mendefinisikan video atau film
<wbr> Mendefinisikan ganti baris ketika teks dirasa terlalu panjang
Penjelasan tag <video>
Pada versi HTML sebelumnya, tidak disertai oleh tag <video>. Apabila ingin memasukkan video
ke dalam sebuah web masih harus menggunakan plugins tambahan yang biasa disebut flash
player. Kelebihan di dalam tag <video> adalah dalam browser tidak perlu menggunakan flash
player, dan buffering menjadi lebih ringan karena fasilitasnya sudah di backing oleh kode HTML
sendiri.
Atribut Opsional :
Attribute Value Description
autoplay autoplay Menentukan bahwa video akan
mulai berputar otomatis
controls controls Menentukan kontrol video
yang akan ditampilkan
(Contoh: tombol play/pause
height pixels Mengeset tinggi dari video
player
loop loop Menentukan bahwa video akan
berputar kembali meski video
telah habis
muted muted Menentukan bahwa output
suara akan di mute /
dihilangkan
poster URL Menentukan gambar yang
akan tampil ketika video
masih belum berputar
preload auto metadata none Menentukan jika dan
bagaimana kapan video ini
harus menjalani proses loading
ketika halaman terbuka
src URL Menentukan alamat URL dari
mana sumber video
width pixels Mengeset lebar dari video
player
Contoh kode tag <video>
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" >
<source src="bbb.mp4" type="video/mp4" />
<source src="bbb.ogg" type="video/ogg" />
<source src="bbb.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
Output yang akan muncul dalam browser
<video width="320" height="240" controls="controls" >
ATTRIBUT OPSIONAL
Penjelasan tag <audio>
Digunakan untk memasukkan audio, misalnya lagu kedalam halaman web. Pada HTML5, hal itu
dipermudah dengan tag <audio>, ketika di generasi sebelumnya (HTML 4.01) memasukkan audio
ke dalam web masih harus menggunakan flash.
Atribut opsional :
Attribute Value Description
autoplay autoplay Menentukan bahwa video akan
mulai berputar otomatis
controls controls Menentukan kontrol video
yang akan ditampilkan
(Contoh: tombol play/pause
loop loop Menentukan bahwa video akan
berputar kembali meski video
telah habis
preload auto metadata none Menentukan jika dan
bagaimana kapan video ini
harus menjalani proses loading
ketika halaman terbuka
src URL Menentukan alamat URL dari
mana sumber video
Contoh tag <audio>
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="multimedia/song.ogg" type="audio/ogg" />
<source src="multimedia/song.mp3"
type="audio/mp3" /> Your browser does not support
the audio element.
</audio>
</body>
</html>
Output yang akan muncul dalam browser
Sintaks-sintaks yang berlaku pada CSS3
Introduction Sintaks-sintaks CSS3 terbagi menjadi “modul-modul”. Beberapa dari modul yang
paling penting dalam CSS3 adalah
1. Selectors
2. Box Model
3. Backgrounds and Borders
4. Text Effects
5. 2D/3D Transformations
6. Animations
7. Multiple column Layout
8. User Interface
Kenyataannya, saat ini spesifikasi CSS3 sendiri masih dalam pengembangan oleh W3C (World
Wide Web Consortium).Namun banyak dari property baru CSS3 telah diimplementasikan ke
dalam browser- browser terbaru saat ini.
CSS3 Borders Dengan CSS3, kamu dapat membuat border dengan bentuk yang tak selalu kotak,
menambahkan efek shadow dalam objek, dan menggunakan gambar sebagai border tanpa
menggunakan program desain seperti Photoshop.
Di bagian ini akan mempelajari tentang border properties seperti ini:
o border-radius
o border-shadow
o border-image
Internet Explorer 9 hanya support dua dari properties border terbaru
Firefox membutuhkan prefix –moz- untuk menampilkan border-image
Chrome dan Safari membutuhkan prefix –webkit- untuk menampilkan border-image
Opera membutuhkan prefix –o- untuk menampilkan border-image
Property dari fasilitas borders
Property Description Values
border-image Sebuah wadah untuk mensetting -source: none|image;
seluruh property dari border- -slice: number| % | fill;
image -width: number | % | auto;
-outset: length | number;
-repeat: stretch | repeat | round;
border-radius Sebuah wadah untuk mensetting seluruh length
dari 4 ujung-ujung border (radius) %
box-shadow Menempelkan satu atau lebih efek h-shadow v-shadow blur
bayangan pada border spread color inset
Contoh-contoh implementasi border dalam CSS3
CSS3 Rounded Corners CSS3 Box Shadow
<!DOCTYPE HTML >
<!DOCTYPE HTML > <html>
<html> <head>
<head> <style type="text/css">
<style type="text/css"> div
div { width:300px;
{ height:100px;
border:2px solid #a1a1a1; background-color:yellow;
padding:10px 40px; -moz-box-shadow: 10px 10px
background:#dddddd; 5px #888888; /* Firefox 3.6
width:300px; and earlier */
border-radius:25px; box-shadow: 10px 10px 5px
-moz-border-radius:25px; /* #888888;
Firefox 3.6 and earlier */ }
} </style>
</style> </head>
</head> <body>
<body>
<div>Dengan CSS3, kita bisa <div></div>
membuat border yang tidak selalu </body>
berbentuk kotak dengan </html>
mudah.</div>
</body>
</html>
CSS3 border-image
<!DOCTYPE HTML >
<html>
<head>
<style type="text/css">
div
{
border-
width:15px;
width:250px;
padding:10px
20px;
}
#round
{
-moz-border-image:url(images/border.png)
30 30 round; /* Firefox */
-webkit-border-
image:url(images/border.png) 30
30 round;
/* Safari and Chrome */
-o-border-image:url(images/border.png) 30
30 round; /* Opera */
border-
image:url(images/border.png) 30
30 round;
}
#stretch
{
-moz-border-image:url(images/border.png)
30 30 stretch; /* Firefox */
-webkit-border-
image:url(images/border.png
) 30 30 stretch; /* Safari
and Chrome */
-o-border-image:url(images/border.png) 30
30 stretch; /* Opera */
border-
image:url(images/border.png) 30
30 stretch;
}
</style>
</head>
<body>
<div id="round">Border ini
hasil dari pengulangan bagian
dari gambar yang
tersedia.</div>
<br />
<div id="stretch">Kalau disini,
bordernya ditarik hingga
memenuhi tempat yang
tersedia.</div>
<p>Dari gambar inilah border terbuat:</p>
<img src="images/border.png" />
</body>
</html>
CSS3 Background
CSS3 memiliki beberapa background porperties baru disbanding dengan versi sebelumnya yang
memungkinkan kita dalam maksimalisasi kontrol dari elemen background
Di sesi ini kita akan mempelajari :
o background-size
o background-origin
Pada Firefox 3.6 dan sebelumnya tidak men support fasilitas background-origin dan memerlukan
prefix–moz- untuk men support fasilitas background-property
Safari 4 sendiri memerlukan prefix –webkit- untuk bisa support fasilitas diatas
Internet Explorer 9, Firefox 4, Chrome, Safari 5 dan Opera telah support fasilitas background
Property dari fasilitas background
Property Description Values
background-clip Menentukan area pewarnaan border-box
dari background images padding-box content-box
background- Menentukan letak dari border-box
origin background images padding-box content-box
background-size Menentukan ukuran dari panjang
background images persentase
cover
contain
Contoh implementasi background-size
<!DOCTYPE HTML >
<!DOCTYPE HTML >
<html>
<html>
<head>
<head>
<style type="text/css">
<style type="text/css">
body
div
{
{
background:url(images/img_flwr.gif
background:url(img_flwr.
); background-size:80px 60px;
gif); background-
-moz-background-size:80px 60px;
size:100% 100%;
/* Firefox 3.6 */
-moz-background-size:100%
background-repeat:no-repeat;
100%; /* Firefox 3.6 */
padding-top:40px;
background-repeat:no-repeat;
}
}
</style>
</style>
</head>
</head>
<body>
<body>
<p>
<div>
Hasil dari pengubahan ukuran
Hasil dari percobaan
dari gambar menjadi lebih kecil
background menggunakan salah
</p>
satu gambar yang telah
<p>Original image: <img
disediakan sebelumnya. Untuk
src="images/img_flwr.gif"
merubah properties
alt="Flowers" width="224"
background, coba ubah nilai
height="162" /></p>
persen dari klausa
</body>
</html> background-size. Karena pada
klausa background-repeat
diisi dengan no- repeat, maka
pada web hanya akan tampak
satu (tunggal) gambar.
</div>
</body>
</html>
CSS3 background-origin
Fasilitas background origin menentukan posisi area untuk sebuah gambar yang akan dijadikan
background (background-image). Background-image dapat ditempatkan di dalam area content-box,
padding-box atau border-box
Contoh impelentasi background-origin
<!DOCTYPE HTML >
<html>
<head>
<style type="text/css">
div{
border:5px solid black;
padding:55px;
background-image:url('images/bintang.png');
background-repeat:no-repeat;
background-position:left;
}
#div1{
background-origin:border-box;
}
#div2{
background-origin:content-box;
}
#div3{
background-origin:padding-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
Sesi background-origin, dalam area ini gambar akan tampil di area
border-box, dimana background image akan menempel pada border.
Itulah maksud dari istilah border-box.
</div>
<p>background-origin:content-box:</p>
<div id="div2">
Sesi background-origin, dalam area ini gambar akan tampil di area
content-box, dimana background image akan muncul dibelakang
teks/content yang ditulis.
</div>
<p>background-origin:padding-box:</p>
<div id="div3">
Sesi background-origin, dalam area ini gambar akan tampil di area
padding-box, dimana ada ruang antara border dengan content,
disanalah yang disebut dengan area padding- box.
</div>
</body>
</html>
Contoh output pada implementasi background-origin
CSS3 Transform
Dengan CSS3 transform, kita bisa Memindah memperbesar atau memperkecil, membelokkan,
memutar dan merenggangkan element scale, turn, spin, and stretch elements.
Bagaimana Cara kerjanya?
Sebuah efek Transformasi yang memungkinkan sebuah elemen berubah bentuk, ukuran dan
posisinya.
Browser yang mendukung
Internet Explorer 9 membutuhkan awalan -ms-.
Firefox membutuhkan awalan -moz-.
Chrome and Safari membutuhkan awalan -webkit-.
Opera membutuhkan awalan -o-.
Transformasi 2D
Pada Bagian ini anda akan belajar tentang transformasi 2D dengan beberapa metode :
o translate()
o rotate()
o scale()
o skew()
o matrix()
Metode translate()
Dengan metode translate() , element berpindah dari posisi awal tergantung dari paremeter yang
diberikan untuk posisi kiri (sumbu - X) dan untuk posisi atas (sumbu – Y)
Contoh
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
nilai translate(50px,100px) memindahkan elemen sejauh 50 pixels dari kiri ke kanan dan 100 pixels
dari atas ke bawah.
Metode rotate() (Memutar)
Dengan metode rotate() method, elemen diputar sesuai dengan derajat yang diberikan searah jarum
jam . Nilai negatif diperbolehkan dan akan memutar berbalik arah jarum jam.
Contoh
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
Nilai rotate(30deg) memutar elemen sejauh 30 drajat searah jarum jam.
Metode scale()
Dengan Metode scale()kita bisa memperbesar atau memperkecil ukuran elemen, sesuai dengan
parameter yang diberikan untuk lebar (Sumbu – X) dan tinggi(Sumbu-Y):
Contoh
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
Nilai scale(2,4) Merubah ukuran Lebar elemen menjadi dua kali ukuran awal dan ukuran tinggi
empat kali ukuran awal.
Metode skew()
Dengan metode skew(), elemen berbelok sesuai dengan sudut yang diberikan, sesuai dengan
parameter yang diberikan untuk horisontal(Sumbu-X) dan vertikal(Sumbu-Y)
Contoh
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
Nilai skew(30deg,20deg) membelok elemen 30 derajat untuk sumbu X dan 20 derajat untuk sumbu
Y.
Metode matrix()
Metode matrix()mengkombinasikan semua transformasi 2D menjadi satu.
Metodematrik meminta 6 parameter,mengandung fungsi matematika , yang mengijinkan anda untuk
: rotate, scale, move (translate), dan skew elemen.
Contoh
bagaimana carnya untuk memutar sebuah elemen div 30 derajat menggunakan metode matrix, ,
menggunakan metode matrik:
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and
Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
Metode-metode Transformasi 2D
fungsi Deskripsi
matrix(n,n,n,n,n,n) Mendefinisikansebuah transformasi 2D, menggunakan matrix dengan 6 nilai
translate(x,y) Mendefinisikansebuah transformasi 2D, memindahkan elemen sejauh sumbu-X
dan sumbu-Y
translateX(n) Mendefinisikansebuah transformasi 2D, Memindahkan elemen sejauh sumbu-X
translateY(n) Mendefinisikansebuah transformasi 2D, Memindahkan elemen sejauh sumbu-Y
scale(x,y) Mendefinisikansebuah transformasi 2D, Merubah lebar dan panjang elemen
scaleX(n) Mendefinisikansebuah transformasi 2D, Merubah lebar elemen
scaleY(n) Mendefinisikansebuah transformasi 2D, Merubah panjang elemen
rotate(angle) Mendefinisikansebuahrotasi 2D, yang derajatnya ditetapkan pada
parameternya
skew(x-angle,y- Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-X
angle) dan sumbu-Y
skewX(angle) Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-X
skewY(angle) Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-Y
Efek Text
CSS3 menyediakan beberapa fitur text baru.
Pada bagian ini anda akan belajar tentang properti text di bawah ini:
o text-shadow
o word-wrap
Internet Explorer belum mendukung properti text-shadow.
Firefox, Chrome, Safari, dan Opera mendukung properti text-shadow.
Semua bowser utama mendukung properti word-wrap.
Bayangan Text di CSS3
Di CSS3,properti text-shadow. di gunakan untuk bayangan text.
Kamu bisa menetapkan bayangan horisontal dan vertical panjang bayangan dan warna bayangan :
Contoh
Menambahkan sebuah bayangan kesebuah header:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
CSS3 Word Wrapping
Jika suatu tulisan terlalu panjang untuk suatu area,tulisan akan meluas keluar area:
Paragraf ini berisi kata
yang sangat panjang :
Iniadalahkatayangsangatsangatsangaatsangatsangatpanjang.
Kata yang sangat
panjang akan
keluar area.
Di CSS3,properti word-wrap mengijinkan anda untuk memaksa tulisan untuk tidak keluar area
sejauh jika itu berarti membagi tulisan di tengah-tangah kata :
Paragraf ini berisi kata
yang sangat panjang :
Iniadalahkatayangsangats
angatsangaatsangatsangat
panjang.
Kata yang sangat
panjang akan
keluar area.
Kode CSS nya seperti di bawah ini :
p {word-wrap:break-word;}
Properti Text Yang Baru
Properti Deskripsi
hanging-punctuation Menetapkan apakah sebuah karakter tanda baca boleh
diletakkan diluar kotak.
punctuation-trim Memungkinkan apakah karakter tanda baca akan
dipotong
text-align-last Mendeskripiskan baris terakhir dari sebuah area atau
baris kanan sebelum memaksa untuk di potong ketika
tulisan rata tengah "justify"
text-emphasis Memberikan tanda empasis, dan warna bagian depan
dari tanda empasis untuk elemen text
text-justify Menetapkan metode justification digunakan ketika text
rata tengah "justify"
text-outline Menetapkan garis luar text “outline”
text-overflow Menetapkan apa yang akan terjadi ketika text
ditimpa(overflows) elemen
text-shadow Menambahkan bayangan ke text
text-wrap Menetapkan pemotongan text untuk text yang panjang
agar tidak keluar batas atau kotak
word-wrap Melakukan pemotongan kalimat yang panjang dan
memindahnya baris.
PRAKTIKUM IV
Tujuan:
1. Memahami cara membuat Halaman Depan
2. Memahami cara membuat Single Post
3. Memahami cara membuat Galeri Video
4. Memahami cara membuat Aplikasi Desktop
1. MEMBUAT HALAMAN DEPAN
Pada bab ini kita akan langsung mengimplementasikan sintaks-sintaks yang sudah kita bahas
sebelumnya menjadi sebuah web statis yang bisa dikembangkan menjadi web dinamis. Untuk
mengimplementasikan HTML5, pada tutorial ini kita akan memakai Mozilla Firefox 8.0 yang telah
support dengan HTML5.
1. Membuat File index.html
Kita akan mencoba membuat file index.html untuk membuat halaman depan, seperti biasa yang
telah dibahas sebelumnya dimana pembuatan file html dilakukan atau diketik pada text editor
kemudian disimpan dalam format .html
Adapun contoh sintaks file htmlnya sebagai berikut :
<!DOCTYPE HTML>
<html>
<head>
<meta http=equiv=”Content-Type” content=”text/html;
charset=utf=8”>
<title>Belajar HTML</title>
</head>
<body>
</body>
</html>
2. Membuat File style.css
Selanjutnya, yang kita lakukan adalah membuat file style.css. File inilah yang menjadi tempat kita
untuk menampung model dan property desain layout yang kita buat di file .html. Sama dengan
membuat index.html, cuman dalam format simpannya .css Kemudian, simpan dengan nama style.css
pada direktori yang sama dengan index.html.
Setelah kedua file tersebut kita simpan, kita akan menghubungkan keduanya. Buka file index.html,
tambahkan sintaks berikut di dalam tag <head>.
<link rel="stylesheet" href="style.css" type="text/css">
Sehingga, penampakan kode pada index.html adalah sebagai berikut
<!DOCTYPE HTML>
<html>
<head>
<meta http=equiv=”Content-Type” content=”text/html;
charset=utf=8”>
<title>Belajar HTML</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>
3. Menentukan Layout di File index.html
Langkah selanjutnya kita akan membuat layout pada index.html tanpa menggunakan metode Slicing
pada Photoshop. Sehingga kita langsung melakukan pengkodean pada index.html. Pertama, kita
tentukan dahulu seperti apa layout yang akan kita buat. Misal kita akan buat layout seperti contoh
berikut
Header
Main Menu
Content Sidebar
Footer 1 Footer 2 Footer 3
Contoh Layout
Sehingga, kita tambahkan sintaks berikut diantara tag <body></body>.
<div id="wrapper">
<div id="container">
<header>HEADER</header> <!--HTML5 -->
<nav>MENU</nav> <!--HTML5 -->
<div id="content">CONTENT</div>
<div id="sidebar">SIDEBAR</div>
<footer> <!--HTML5 -->
<div id="column">KOLOM 1</div>
<div id="column">KOLOM 2</div>
<div id="column">KOLOM 3</div>
</footer>
</div>
</div>
Tag <div id=“wrapper”> kita gunakan untuk membungkus seluruh elemen layout diatas menjadi
satu. <header> adalah pengganti <div id=“header”> pada HTML5. Begitu juga tag <nav> untuk
menggantikan <div id=“menu”>. Sementara untuk content dan sidebar kita masih menggunakan tag
<div>. Tag <footer> pun demikian, dirancang untuk mengganti <div id=“footer”>
4. Memberi Style pada index.html
Setelah layout diatas selesai kita buat, kita tambahkan styling pada layout tersebut. Pindah ke tab
style.css, tambahkan style berikut untuk masing-masing elemen
#wrapper{ width:960px; margin:auto; border:#F00 1px solid;
}
Buka file index.html melalui browser.
Uji Coba File di Browser Mozilla Firefox
Pada gambar border yang kita beri pada #wrapper sudah terlihat. Ini tandanya file html dan css
keduanya telah tergabung.
Selanjutnya kita tambahkan style untuk elemen-elemen yang lain pada file style.css.
header{ height:120px; width:960px; float:left; background:#CCC;
}
Nav{
Height:40px; width:960px; float:left; background:#333;
}
#wrapper #content{ width:620px; float:left; padding:10px;
}
#wrapper #sidebar{ width:300px; float:left; padding:10px;
}
footer{ float:left; background:#CCC; width:960px;
}
footer #column{width:300px; padding:10px; float:left;
}
Penjelasan dari properti yang digunakan tersebut sebagai berikut
Width & Height : Menentukan Lebar dan Tinggi dari suatu elemen.
Float : Menempelkan sebuah elemen ke kanan atau ke kiri objek sebelumnya.
Apabila menggunakan float, objek yang kita buat setelah kita memakai elemen ini akan menempel
persis diatas elemen yang di-float. Untuk itu kita gunakan properti clear:both;
Background : Untuk memberi background pada sebuah elemen, bisa berupa warna atau
gambar.
Padding : Jarak antara tepi elemen dengan konten di dalamnya
Layout yang Siap dikembangkan
5. Merubah Desain Basic Layout
a. Memberikan Background Gambar pada Header
Kemudian, kita akan menambahkan sebuah gambar pada header dan menjadikannya sebagai
background pada header. Kita ganti isi dari properti #header{} dan isi dari #wrapper{} menjadi
seperti berikut
#wrapper{ width:960px; margin:auto;
}
header{ height:120px; width:960px; float:left;
background:url(images/header.jpg);
background-size:960px 120px; /* CSS3 */
}
Hasilnya menjadi seperti berikut
Header yang telah diganti
6. Membuat Menu
Selanjutnya yang kita akan membuat menu standar hanya dengan CSS. Kita akan menggunakan
elemen html ul (unordered list) atau ol (ordered list). Keduanya sama saja, karena pada akhirnya
bullet dan nomor yang ada tidak akan kita tampilkan. Ubah isi <nav></nav> menjadi seperti
berikut
<nav> <!-- HTML 5 -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Artikel</a>
<ul class="submenu">
<li><a href="#">Sains</a></li>
<li><a href="#">Bola</a></li>
</ul>
</li>
<li><a href="video.html">Video</a></li>
<li><a href="kontak.html">Kontak</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</nav>
Kemudian kita ganti dan tambah style nav{} dengan style seperti berikut
nav{
width:958px; float:left; overflow:auto; background:#DFDFDF;
border:#AAAAAA 1px solid;
}
nav ul{
list-style:none; float:left; overflow:auto; margin:0px;
padding:0px;
}
nav ul li{
display:block;
padding:5px 10px 5px 10px;
float:left;
margin:0px;
border-right:#AAAAAA 1px solid;
}
nav ul li .submenu{
display:none;
}
nav ul li:hover .submenu{ display:block; margin:0px; width:100px;
position:absolute; margin-top:5px;
border:#AAAAAA 1px solid;
background:#DFDFDF;
margin-left:-11px;
}
nav ul li:hover .submenu li{ display:block; width:89px;
padding:5px; float:left; border:none;
}
nav ul li:hover{
background:#EDEDED;
}
nav ul li a{
color:#000000;
text-decoration:none;
}
nav ul li a:hover{
text-decoration:underline;
}
Sehingga kita akan menghasilkan halaman seperti berikut.
Navigation Menu
7. Menentukan Konten
Selanjutnya kita akan isi konten dengan beberapa artikel. Disini kita akan membuat layout artikel
seperti berikut.
Featured Image Judul
Potongan Artikel
[Read More]
Sebelumnya, copykan beberapa file gambar yang telah tersedia yang akan digunakan sebagai
Featured Image tersebut. Buat direktori images pada direktori tempat anda membuat file index.html
dan style.css. Buat juga direktori fonts untuk menempatkan webfont yang akan kita gunakan. Lalu
salin gambar dan font ke direktori masing-masing. Pastikan juga anda sudah menyailn beberapa
artikel yang sudah tersedia. Lalu tambahkan kode berikut didalam tag <div id=“content”></div>
<div id="content">
<div id="single">
<div id="featured-image"
style="background:url(images/1.jpg)"> </div>
<h2>Dosen dan Mahasiswa Rutin Gelar Tauziah di Mushollah Kampus
USN-Kolaka</h2>
Kolaka (20/3/2017) Ada yang sedikit berbeda dengan aktivitas
keseharian di Universitas Sembilanbelas November Kolaka (USN-
Kolaka), Sulawesi Tenggara. Para pejabat baik pegawai struktural,
fungsional dan staf serta para mahasiswa di lembaga perguruan
tinggi tersebut, setiap hari disela jam kerja kantor tepatnya
jelang shalat dhuhur dan ashar secara rutin gelaran tauziah agama
bertempat di Mushollah Ulil Albab Kampus USN-Kolaka. [...]
<div id="more"><a href="article-1.html">Baca
Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/2.jpg)"> </div>
<h2>15 Tim Perwakilan Tiga Kabupaten Debat Kompetisi Bahasa
Inggris di USN Kolaka</h2>
Kolaka (27/2/2017) Sedikitnya 15 Tim mewakili utusan sekolah
menengah atas (SMA/Sederajat) dari tiga kubapaten yaitu Kabupaten
Kolaka, Kolaka Utara (Kolut), dan Kolaka Timur (Koltim) mengikuti
kegiatan Debat Kompetisi Bahasa Inggris yang dilaksanakan Himpunan
Mahasiswa Program Studi (HMPS) Bahasa Inggris, Fakultas Keguruan
dan Ilmu Pendidikan (FKIP) Universitas Sembilanbelas November
Kolaka. [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/3.jpg)"> </div>
<h2>Kejurnas 2017 Mendatang, Karate USN Kolaka Incar Medali
Emas</h2>
Kolaka (21/2/2017) Setelah sukses persembahkan medali emas dalam
kejuaran nasional (Kejurnas) Karate beberapa waktu lalu, dan
Seleksi Daerah (Selekda) Ikatan Nasional Karatedo Indonesia
(INKAI) Sultra yang berlangsung pada 18-19 Februari 2017 lalu,
kini Unit Kegiatan Mahasiswa (UKM) Karate Universitas
Sembilanbelas November Kolaka bertekad mengulang torehan atas
raihan medali emas pada iven nasional Kejurnas Karate di Jakarta,
Maret mendatang. [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/4.jpg)"> </div>
<h2>Aneka Beasiswa Kurang Mampu USN Kolaka</h2>
Kolaka (7/2/2017) Universitas Sembilanbelas November Kolaka (USN-
Kolaka) Sulawesi Tenggara tahun 2017 ini, kembali mendapat
kepercayaan dalam kerjasama pemberian dana bantuan pendidikan,
khusus bagi mahasiswa kurang mampu. Dana bantuan beasiswa
tersebut, kali ini berasal dari pihak Bank Rakyat Indonesia (BRI)
Cabang Kolaka. [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/5.jpg)"> </div>
<h2>Kuota Bidik Misi Meningkat, USN Kolaka Jamin Pengelolaan
SNMPTN Berkualitas</h2>
KOLAKA – Rektor Universitas Negeri Sembilanbelas November (USN)
Kolaka Azhari menjamin proses pengelolaan Seleksi Nasional Masuk
Perguruan Tinggi Negeri (SNMPTN) tahun ini berkualitas. [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div></div>
8. Memberi Style pada Konten
Pada awalnya, font yang kita gunakan adalah font standar apabila kita tidak menggantinya. Maka
kita gunakan CSS3 Webfont. Letakkan tag berikut pada bagian paling atasfile CSS kita.
@font-face{
font-family:"Cuprum";
src:url("fonts/Cuprum.otf");
font-weight:normal;
}
@font-face{
font-family:"Calibri"; src:url("fonts/calibri.ttf"); font-
weight:normal;
}
body{
font-family:Calibri;
}
Selanjutnya kita tambahkan style pada konten dengan menghapus #content{} dan
menggantinya dengan seluruh tag berikut.
#wrapper #content{ width:620px; float:left; padding:10px;
}
#wrapper #content #single{
margin:5px;
border:#DFDFDF 1px solid;
padding:5px; font-size:13px; float:left; overflow:auto;
}
#wrapper #content #single #featured-image{
width:150px;
height:150px;
-moz-background-size:450px 150px; /* CSS3 Mozilla Firefox */
background-size:450px 150px; /* CSS3 Other Browser */ background-
position:center;
float:left; overflow:auto; margin-right:5px;
}
#wrapper #content #single h2{
margin:0px;
font-family:Cuprum; font-size:18px; padding:5px; border:#DFDFDF
1px solid; background:#EEEEEE;
margin-bottom:10px;
}
#wrapper #content #single #more a{
float:right;
overflow:auto;
padding:2px 10px 2px 10px; background:#CF6; border:#FF9933 1px
solid;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px; margin-bottom:10px; margin-right:10px;
margin-top:10px;
text-align:center;
text-decoration:none;
color:#000000;
}
#wrapper #content #single #more a:hover{
background:#BD5;
color:#093;
border:#CC6600 1px solid;
}
Sehingga dari kedua tammbahan CSS diatas, maka akan kita dapatkan hasil sebagai berikut
Konten
9. Membuat Text Header
Text Header biasanya digunakan untuk menuliskan nama web kita. Pada modul ini, akan kita beri
judul USN-News.ac.id. Kita ganti tag isi dari tag header dengan tag berikut
<header>USN-News.ac.id</header>
Kemudian ganti style <header> menjadi seperti berikut
header{ height:100px; width:940px; float:left;
background:url(images/header.jpg); background-size:960px 120px;
padding:20px 0px 0px 20px;
font-family:Cuprum; font-style:italic; font-size:32px;
font-weight:bold;
color: #DFDFDF;
text-shadow:#000 2px 2px 1px;
}
Sehingga akan kita dapatkan hasil sebagai berikut
10. Membuat Sidebar
Sidebar biasanya diisi dengan beberapa aksesoris yang menambah fungsionalitas sebuah web. Tidak
jarang juga sidebar menjadi tempat untuk memasang link ke situs-situs yang mendukung web
tersebut. Misal plugin Facebook Like, plugin Tweet, dan sebagainya.
Kali ini yang akan kita tampilkan pada sidebar adalah
a. Popular Post
b. Commented Post
c. Audio Streaming
Pada umumnya setiap elemen pada sidebar kita kenal dengan Widget. Masing-masing widget
diwakili oleh tag <li>. Sehingga perlu kita tuliskan kode berikut diantara <div id=“sidebar”></div>
<li class="widget">
<h2>Popular Post</h2>
<ul>
<li><a href="#">Dosen dan Mahasiswa Rutin Gelar Tauziah di
Mushollah Kampus USN-Kolaka</a></li>
<li><a href="#">15 Tim Perwakilan Tiga Kabupaten Debat Kompetisi
Bahasa Inggris di USN Kolaka</a></li>
<li><a href="#">Kejurnas 2017 Mendatang, Karate USN Kolaka Incar
Medali Emas</a></li>
</ul
</li>
<li class="widget">
<h2>Commented Post</h2>
<ul>
<li><a href="#">Dosen dan Mahasiswa Rutin Gelar Tauziah di
Mushollah Kampus USN-Kolaka</a></li>
<li><a href="#">15 Tim Perwakilan Tiga Kabupaten Debat Kompetisi
Bahasa Inggris di USN Kolaka</a></li>
<li><a href="#">Kejurnas 2017 Mendatang, Karate USN Kolaka Incar
Medali Emas</a></li>
</ul>
</li>
<li class="widget">
<h2>Audio Streaming</h2>
<audio id="audio" src="sounds/sound.mp3" controls></audio></li>
Selanjutnya, kita tambahkan styling pada file style.css, kita hapus bagian #wrapper #sidebar{} dan
kita ganti dengan kode berikut
#wrapper #sidebar{
width:300px;
float:left;
padding:10px;
}
#wrapper #sidebar .widget{
list-style:none;
}
#wrapper #sidebar .widget ul{
list-style:none;
margin-left:-40px;
}
#wrapper #sidebar .widget li a{
color:#446500;
text-decoration:none;
}
#wrapper #sidebar .widget li a:hover{
text-decoration:underline;
}
11. Membuat Footer dengan Tiga Kolom
Selanjutnya akan kita berikan beberapa elemen pada footer yaitu Dukungan, Kontak, dan Hubungan
dengan Jejaring Sosial. Kita tambahkan kode berikut diantara <div id=“footer”></div>
<div id="column">
<h2>Dapatkan Bantuan dan Dukungan</h2>
Untuk mendapatkan petunjuk atau dukungan dari kami,
kunjungi situs <a href="http://support.usn-news.ac.id">support.
usn-news.ac.id</a> dan submit form anda.
</div>
<div id="column">
<h2>Hubungi Kami</h2> Jl.
Pemuda<br>
Kolaka 93511 Sulawesi Tenggara<br>
(+62405) 232323
</div>
<div id="column">
<h2>Temukan Kami di ...</h2>
<a href="http://facebook.com/usn-newsaccess">Facebook</a><br>
<a href="http://twitter.com/usn-newsaccess">Twitter</a>
</div>
Terakhir, kita ganti isi dari #footer dan kita tambahkan kode berikut pada style.css
footer{ float:left;
background:#333333;
width:960px;
color:#BBBBBB;
}
footer #column{
width:300px;
padding:10px;
float:left;
font-size:14px;
}
footer #column h2{
margin:0px;
margin-bottom:10px; font-
family:Cuprum; font-
size:18px; color:#FFFFFF;
font-weight:bold;
}
footer #column a{
font-weight:bold;
color:#0099CC;
text-decoration:none;
}
footer #column a:hover{
text-decoration:underline;
}
Sehingga kita dapatkan hasil output seperti berikut
Selanjutnya, kita percantik tampilan web tersebut dengan menambahkan background dan memberi
border pada web utama. Kopikan file background yang telah disediakan ke directori /images. Kita
ganti tag body sampai ke header di style.css dengan kode berikut
body{
font-family:Calibri;
background:url(image
s/bg.jpg);
background-
attachment:fixed;
background-
position:center;
}
#wrapper{
width:980px;
margin:auto;
}
#container{ padding:10px;
background:#FFFFFF;
float:left;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
header{
height:100px;
width:938px;
border:#DFDFDF 1px solid;
float:left;
background:url(images/header.jpg);
background-size:960px 120px;
padding:20px 0px 0px 20px;
font-family:Cuprum;
font-style:italic; font-
size:32px; font-
weight:bold; color:#090;
text-shadow:#000 2px 2px; /* CSS3 */
}
Jangan lupa mengganti judul yang dari awal masih “Belajar HTML”. Misalnya kita ganti judul
menjadi
:: USN-News Access :: Deliver News Fastly ::
Sehingga kita dapatkan hasil sebagai berikut
2. MEMBUAT SINGLE POST
Membuat halaman single post pada dasarnya tidak terlalu sulit. Kita cukup menyalin dari file
index.html, lalu kita rename menjadi article-1.html. Lalu kita ganti seluruh isi elemen dari <div
id=“content”></div> menjadi seperti berikut
<div id="single">
<div id="thumbnail-image"
style="background:url(images/1.jpg)"> </div>
<h2>Dosen dan Mahasiswa Rutin Gelar Tauziah di Mushollah Kampus
USN-Kolaka</h2>
<p>Kolaka (20/3/2017) Ada yang sedikit berbeda dengan aktivitas
keseharian di Universitas Sembilanbelas November Kolaka (USN-
Kolaka), Sulawesi Tenggara. Para pejabat baik pegawai struktural,
fungsional dan staf serta para mahasiswa di lembaga perguruan
tinggi tersebut, setiap hari disela jam kerja kantor tepatnya
jelang shalat dhuhur dan ashar secara rutin gelaran tauziah agama
bertempat di Mushollah Ulil Albab Kampus USN-Kolaka.</p>
<p>Gelar tauziah (ceramah agama) sudah menjadi agenda rutin
dilaksanakan di kampus USN-Kolaka. Kegiatan tersebut, difasilitasi
Unit Kerohanian atau Lembaga Dakwah Kampus (LDK). Selain diisi
ceramah agama oleh para Mubaliqh yang ada di Kabupaten Kolaka dan
luar Kolaka, juga menjadwalkan para pejabat, dosen dan mahasiswa
untuk memberikan kuliah tujuh menit (kultum) dengan pembacaan al-
quran dan hadis-hadis Rasulullah SAW.</p>
<p>Pengurus Mushollah Ulil Albab USN-Kolaka, Saleh Sutrisna,
S.Ag., M.A melalui Kassubag Kerjasama dan Humas, Takwa mengatakan
bahwa kegiatan dimensi keagamaan yang dilakukan di mushollah
kampus, sesungguhnya menjadi kewajiban kita sebagai umat muslim
dimana saja kita berada atau berpijak melakoni kehidupan. “Kita
sangat bersyukur dengan adanya fasilitas peribadatan, mushollah
kampus, sehingga waktu shalat tiba maka semua yang beragama Islam
dapat menunaikan kewajibannya menghambakan diri pada Allah SWT,
“ujarnya.</p>
<p>Keberadaan mushollah kampus, lanjut Saleh Sutrisna bukan hanya
tempat beribadah atau sholat saja melainkan banyak manfaat yang
bisa diraih. “Kegiatan keagamaan lainnya jauh sebelum berdiri
mushollah ini telah rutin kita adakan di kampus USN-Kolaka.
Bahkan, kita terus berupaya menanamkan nilai-nilai religi sebagai
bekal penghambaan, dan semata mencari ridho Allah SWT. Sebagai
contoh bahwa kita senantiasa memakmurkan mushollah kampus dengan
sholat berjamaah yang diikuti seluruh warga kampus khususnya
beragama Islam. Selain itu, kita juga berupaya mengamalkan
pembacaan hadis-hadis rasulullah SAW dengan melibatkan para dosen,
mahasiswa dan staf secara bergilir untuk memberikan kultum.
Sedangkan untuk kigiatan tauziah agama oleh para Mubaliqh,
berlangsung setiap hari Kamis dengan materi ceramah yang telah
kita susun, diantaranya tentang ketauhidan, syariat, hukum-hukum
Islam, dan beberapa tema mendasar lainnya, “tandasnya.</p>
<p>Ustadz H. Muzakkir Arif, Lc alumni Bahrain, Timur Tengah dalam
kesempatan mengisi ceramah di Mushollah Ulil Albab USN-Kolaka,
Kamis (16/3) lalu menguraikan pentingnya kita memahami ilmu
ikhlas. Menurutnya, ada beberapa kaidah syarat diterimanya amal.
Kaidah pertama, sesungguhnya Allah tidak menerima suatu amal
kecuali ikhlas (HR. Imam Bukhari), dan sebesar apapun amal jika
tidak ikhlas maka tidak diterima oleh Allah, sesungguhnya setiap
amal tergantung niatnya. Kaidah kedua, niat ikhlas adalah ucapan
dalam hati. “Niatkan segala sesuatu karena Allah, contoh saya niat
berwudhu lillahi ta’ala atau saya niat shalat lillahi ta’ala,
“kata Muzakkir.</p>
<p>Kaidah ketiga, bahwa kalimat ridho Allah adalah satu kebaikan
dari Allah yang mencakup dan bisa digantikan dengan kalimat-
kalimat lain, seperti (ampunan Allah, kebahagiaan dari Allah).
“Saya mau shalat untuk mendapatkan rezeki, saya mau belajar untuk
menjadi sukses. QS. An-Nahal: 97 bahwa barang siapa yang beramal
shalih baik laki-laki maupun perempuan dalam keadaan beriman, maka
pasti akan kami berikan kepadanya kehidupan yang baik dan akan
kami beri balasan dengan pahala yang lebih baik dari apa yang
telah mereka kerjakan, “urai Ustadz Muzakkir Arif yang juga
kandidat doktor UIN Makassar. (Sumber: Kasubbag Kerjasama dan
Humas USN-Kolaka)</p>
</div></div>
Lalu kita tambahkan tag berikut pada file style.css
#wrapper #content #single #thumbnail-image{
width:620px;
height:310px;
-moz-background-size:620px 310px; /* CSS3 Mozilla
Firefox */ background-size:620px 310px; /* CSS3 Other
Browser */ background-position:center;
margin-bottom:10px;
}
Sehingga kita dapatkan hasil single-post sebagai berikut
3. MEMBUAT GALERI VIDEO
Salah satu fitur baru pada HTML5 adalah embedded video tanpa menggunakan plugin pihak ketiga.
Dalam hal ini adalah Flash Player. Pada bab ini kita akan membuat galeri video dengan
memanfaatkan tag <video> pada HTML5.
1. Halaman video.html
Halaman ini berisi seperti playlist, yaitu berisi daftar link-link video yang akan dimainkan. Pada
halaman ini kita hanya akan membuat link-link yang menuju ke halaman detail video.
Pertama kita salin halaman index.html, kemudian mengganti namanya menjadi video.html. Kita
ganti isi dari <div id=“content”></div> pada video.html menjadi seperti berikut
<div id="content">
<div id="single" style="width:580px;">
<h2>Galeri Video</h2>
<p>
<h2 class="video-title"><a href="video-1.html">The Boss Baby
(2017)</a></h2>
Uploaded on June 2017, 2099 views.
</p>
<p>
<h2 class="video-title"><a href="video-2.html">Zootopia
(2016)</a></h2>
Uploaded on Juni 2017, 39 views.
</p>
<p>
<h2 class="video-title"><a href="video-3.html">The Fate of the
Furious (2017)</a></h2>
Uploaded on Juni 2017, 3 views.
</p>
</div></div>
Kemudian tambahkan CSS berikut pada file style.css
#wrapper #content #single h2.video-title{
border:none;
}
#wrapper #content #single h2.video-title a{
color:#5f8f00;
text-decoration:none;
font-size:16px;
font-weight:normal;
}
#wrapper #content #single h2.video-title a:hover{
text-decoration:underline;}
Sehingga kita dapatkan hasil sebagai berikut
Halaman Galeri Video
2. Halaman video-1.html
Selanjutkan kita akan membuat halaman detail video, kita salin juga file index.html menjadi video-
1.html. Kemudian ganti seluruh elemen di dalam <div id=“content”></div> menjadi seperti
berikut
<div id="content">
<div id="single" style="width:580px;">
<h2> The Boss Baby (2017)</h2>
<video controls="controls">
<source src="videos/ The Boss Baby (2017).mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
Sehingga kita dapatkan tampilan single video seperti berikut
Video dengan Format MP4 pada Firefox
4. MEMBUAT APLIKASI DESKTOP
Pada saat ini Teknologi Web (HTML, CSS, Javascript) bukan hanya dapat digunakan untuk
membuat Aplikasi yang dijalankan sebagai Website saja. Dengan bantuan tools seperti NW.js kita
bahkan dapat membuat Aplikasi Desktop yg berdiri sendiri tanpa adanya Web Browser
(Firefox/Chrome).
NW.js adalah sebuah tools yg dikembangkan dari pendahulunya yaitu Node-Webkit. Konsepnya
adalah menjalankan aplikasi HTML 5 pada sebuah window browserless yaitu sebuah web browser
tanpa menubar yg terintegrasi dengan Webkit (Chrome Engine) dan NodeJS. Aplikasi HTML 5
adalah sebuah aplikasi web yg dapat Anda tulis dengan bahasa pemrograman HTML, CSS dan
Javascript atau mungkin juga ditambah dengan berbagai library seperti JQuery dan Bootstrap.
Dengan terintegrasinya NodeJS disini, maka segala kemampuan server side programming dan
segala bentuk manipulasi diluar web browser dapat dilakukan. Namun demikian selain hanya
menjalankan HTML 5 sebagai aplikasi desktop dengan sedikit trik yg akan kita bahas, kita dapat
juga membundle aplikasi HTML 5 ini menjadi sebuah file *.exe yg portable. Dalam kata lain kita
dapat membuat aplikasi windows executable seperti “aplikasiku.exe”.
Baiklah kita langsung saja dengan bagaimana cara membuat aplikasi desktop menggunakan tools
NW.js ini. Pertama download dulu NW.js di website resminya http://nwjs.io. Downloadlah sesuai
dengan arsitektur sistem operasi Anda 32/64 bit. Sebagai catatan jika Anda membuatnya
menggunakan versi 64bit maka aplikasi Anda tidak akan dapat berjalan pada sistem operasi
Windows 32bit. Tetapi jika Anda menggunakan versi 32bit maka aplikasi Anda dapat berjalan
dikeduanya yaitu Windows 64bit dan juga 32bit. Setelah terdownload extractlah isi file zipnya
dengan program kompresi file Anda, disini saya extract di “c:/nwjs”.
Buatlah sebuah folder yaitu direktori yg akan dijadikan direktori project aplikasi web Anda. disini
saya membuat direktori “c:/nwjs/aplikasiku”. Lalu saya masuk ke direktori aplikasiku dan membuat
file dengan nama “package.json” dan saya mengisinya dengan kode konfigurasi sebagai berikut;
{
"name": "Halo Dunia",
"main": "index.html",
"window": {
"width": 1024,
"height": 768
}
}
name adalah nama dari Aplikasi, sedangkan main adalah file utama yg akan dipanggil pertama kali
ketika aplikasi dijalankan. Disini file utamanya saya isikan dengan “index.html” maka saya
membuat file ini juga di direktori aplikasiku. Berikut ini isi kode html sederhana di index.html;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aplikasiku</title>
</head>
<body>
<h1>Halo Dunia</h1>
</body>
</html>
Setelah itu saya akan mencoba untuk merunning aplikasi ini dengan menggunakan nw.exe. Caranya
buka Command Prompt Anda lalu masuklah ke direktori nwjs.
cd c:/nwjs
Setelah itu ketik perintah berikut;
nw aplikasiku
Jika berhasil maka aplikasi Anda akan berjalan dengan baik. Perlu diketahui bahwa nw.exe dapat
merunning sebuah aplikasi web dengan memanggil nama foldernya atau memanggil 1 file zip
(pengganti folder) yg berisi file-file web, selama di dalam folder/zip tersebut ada package.json yg
memberitahu dimana file utama yg akan dipanggil pertama kali disimpan.
Terakhir saya akan memberikan trik untuk membuat aplikasi Anda menjadi sebuah file *.exe,
sehingga aplikasi ini menjadi portable dan dapat Anda copy ke komputer lain dan untuk
menjalankannya cukup dengan membuka aplikasiku.exe. Caranya pertama silakan kompres file
package.json dan index.html menjadi sebuah file zip, misalnya diberi nama aplikasiku.zip. Lalu
copy file tersebut ke “c:/nwjs/aplikasiku.zip”. Lalu ketikan perintah berikut;
copy /b nw.exe+aplikasiku.zip aplikasiku.exe
Maka kedua file tersebut akan menyatu menjadi sebuah file *.exe yaitu aplikasiku.exe. Jadi
sekarang Anda dapat dengan mudah menjalankan aplikasi web Anda menjadi sebuah aplikasi
desktop cukup dengan melakukan double click pada aplikasiku.exe.
Catatan, mungkin Anda masih bingung jika NW.js dapat membundle dan merunning aplikasi web
tanpa menggunakan web server seperti Apache. Maka bagaimana caranya Anda dapat membuat
aplikasi yg berhubungan dengan database. Apakah dengan NW.js kita dapat menulis/menyisipkan
PHP didalam HTML? jawabannya adalah tidak bisa. Yg dapat ditulis disini adalah aplikasi HTML5
yaitu dengan teknologi HTML, CSS, Javascript dan tidak ada interpreter PHP di dalamnya. Untuk
berhubungan dengan database Anda dapat menggunakan;
1. NodeJS API
Nama NW.js berasal dari penggabungan antara NodeJS dan Webkit. Webkit adalah runtimenya web
browser Chrome yg memiliki kemampuan menampilkan dan menjalankan aplikasi web. Sedangkan
NodeJS adalah sebuah Javascript platform yg memungkinkan Javascript dapat dijadikan sebagai
Server Side Programming dan berhubungan dengan database. Dengan menggunakan NodeJS maka
Anda dapat membundle jadi satu aplikasi Anda karena di NW.js terdapat interpreter NodeJS
didalamnya.
2. Web Service API
Memanggil Server Side API yg ditulis dengan bahasa pemrograman server side terpisah sama saja
seperti Anda memanggil API ketika Anda membuat aplikasi mobile Android/iOS. Jadi dengan
metode ini Anda bisa tetap menggunakan bahasa server side kesukaan Anda misalnya PHP, ASP
ataupun Ruby. Adapun secara teknis Anda dapat memanggil Web Service API menggunakan
metode AJAX pada Javascript.
PRAKTIKUM V
Tujuan:
1. Memahami pengertian PHP
2. Memperkenalkan scrip PHP
3. Mampu memanfaatkan variable
Pengertian PHP
Pada bab ini Anda akan dikenalkan dengan PHP sebagai salah satu server side programming,
pengertian server side programming dan client side programming.
Tentang Client Side dan Server Side Programming
PHP atau merupakan singkatan rekursif dari PHP : Hypertext Preprocessor adalah suatu bahasa
pemrograman yang termasuk kategori server side programming. server side programming
adalah jenis bahasa pemrograman yang nantinya script/program tersebut akan dijalankan oleh
server. Selanjutnya hasil pengolahan script/program tersebut akan dikirim ke client sebagai output.
Sebagai gambaran dari server side programming adalah sebagai berikut ini.
Misalkan Anda ingin membuat script/program untuk menjumlahkan dua buah bilangan dengan
menggunakan PHP. Andaikan Anda telah membuat form untuk input kedua bilangan dan
membuat script PHP untuk mengolah penjumlahan kedua bilangan. Dalam hal ini, keduanya (form
dan script PHP) sama-sama diupload ke server.
Selanjutnya misalkan ada seorang user yang ingin menjumlahkan dua bilangan, maka user tadi
akan mengakses ke server. Apa yang diakses? Tentunya form input bilangan yang akan
dijumlahkan. Dalam hal ini posisi si user adalah sebagai client. Setelah si user mengisi bilangan
pada form, selanjutnya dia mensubmitnya. Kemana mensubmitnya? Karena Anda tadi membuat
script PHP dan form input telah diarahkan ke script PHP tersebut, maka data input akan disubmit
ke server untuk diolah menggunakan script PHP yang telah Anda buat tadi. Setelah input diolah
(dijumlahkan), maka hasilnya akan kembali dikirim ke client sebagai output sehingga
si user mengetahui hasil penjumlahan dua bilangan yang diinputkan melalui form tadi.
Penjelasan detail tentang cara mengkaitkan antara form dan script PHP sebagai pengolahnya akan
dijelaskan di bab tentang pemrosesan form.
Selain server side programming, ada juga client side programming. Jenis programming ini
merupakan kebalikan dari server side programming. Untuk client side programming,
script/program akan diproses di dalam client sendiri.
Untuk menggambarkan client side programming, kita ambil contoh kasus yang sama dengan
sebelumnya yaitu script menjumlahkan dua bilangan. Misalkan Anda membuat form input untuk
memasukkan dua bilangan, serta script untuk menjumlahkannya. Selanjutnya keduanya
ditaruh/diupload ke server. Misalkan ada user yang ingin menjumlahkan dua bilangan, maka dia
akan mengakses ke server form input.
Karena Anda menggunakan script pengolah berjenis client side programming, maka script
tersebut juga akan terakses oleh si user. Biasanya script ini diletakkan dalam satu halaman yang
sama dengan form. Oleh karena itu bila si user mengakses form, maka script juga otomatis
akan terakses. Setelah si user memasukkan bilangan ke dalam form, lalu dia mensubmitnya.
kemana submitnya? submit ini tidak ditujukan ke server melainkan ke client itu sendiri dan
diolah oleh script yang ikut terakses tadi. Kemudian hasilnya ditampilkan sebagai output.
Salah satu contoh bahasa pemrograman web yang berjenis client side programming adalah
Javascript.
Untuk melihat perbedaan yang kentara antara bahasa pemrograman web yang berjenis server side
programming dan client side programming adalah bisa atau tidaknya script/program itu
ditampilkan ke dalam browser ketika mengaksesnya. Apa maksudnya?
Cobalah akses suatu halaman situs yang di dalamnya terdapat Javascript, misalnya
http://detik.com. Ketika Anda lihat source halaman web tersebut (klik kanan, klik View Page
Source pada Firefox atau klik nanan, klik View Source pada IE), maka dapat Anda lihat isi
kode script Javascriptnya, yang biasanya ditandai dengan
<script type="text/javascript" language="javascript">
dan diakhiri dengan tanda
</script>
Mengapa kode Javascript itu bisa terlihat? karena script itu nantinya akan diproses oleh komputer
client, sehingga kode itu ibaratnya harus didownload terlebih dahulu ke dalam client.
Selanjutnya bandingkan ‘penampakannya’ bila Anda mengakses script PHP, misalkan script yang
telah saya buat untuk percobaan dibawah ini. Ketika Anda lihat dibrowser, maka yang tampil
adalah hanyalah berupa teks pesan saja. Dan apabila Anda lihat sourcenya, maka tidak tampak
perintah-perintah yang berupa kode PHP. Padahal isi dari script test.php ini adalah sebagai
berikut:
<?php
echo "Hello apa kabar?<br />";
echo "Terimakasih atas kepercayaan Anda pada Ary Sespajayadi
sebagai pembimbing belajar PHP Anda";
?>
Mengapa bisa demikian? Ya… karena script test.php ini telah dijalankan atau diproses di server
dan bukan di client. Dalam hal ini client hanya menerima output hasil pengolahan script di server.
Mudah-mudahan dari uraian di atas Anda sudah bisa membedakan apa itu server side
programming dan client side programming.
Praktik
Buat web page dengan script PHP dengan bentuk tampilan sebagai berikut:
Source Code
<html>
<head>
<title>Prak1</title>
</head>
<body>
<?php
//Printah PRINT, PRINTF dan ECHO untuk mencetak data
print("<u>Praktikum PHP</u><br>");
printf("<i>USN KOLAKA</i><br>");
echo "<b>SULAWESI TENGGARA</b>";
?>
</body>
</html>
Praktik
Buat web page dengan menggunakan script PHP dengan tampilan sebagai berikut:
Source Code:
<html>
<head>
<title>Prak1</title>
</head>
<body>
<U>KWITANSI PEMBAYARAN</U><br>
<?php
$nama="MAHASISWA";
$stb = "031012";
$alm = "Jl. Pemuda";
$kota = "Kolaka";
$bpp = 1000000;
$spp = 600000;
printf("Nama : <b>%s</b> <br>",$nama);
printf("Stambuk : <b>%s</b> <br>",$stb);
printf("Alamat : <b>%s</b> <br>",$alm);
printf("Kota : <b>%s</b> <br>",$kota);
printf("Pambayaran : <b>Rp %d</b> <br>",$bpp + $spp);
?>
</body>
</html>
PRAKTIKUM VI
Tujuan: Setelah selesai mengikuti praktikum ini praktikan diharapkan mampu menerapkan
berbagai statemen Kondisi IF, ELSE dan ELSEIF.
Pernyataan bersyarat digunakan untuk melakukan tindakan yang berbeda berdasarkan pada kondisi
yang berbeda.
o if statement – Digunakan untuk mengeksekusi beberapa kode hanya jika kondisi tertentu
adalah benar.
o if…else statement -Digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode
lain jika kondisi salah.
o if…else if….else statement – Digunakan untuk memilih salah satu dari banyak blok kode yang
akan dieksekusi.
o switch statement – menggunakan pernyataan ini untuk memilih salah satu dari banyak blok
kode yang akan dieksekusi
Statement IF
Gunakan jika pernyataan untuk mengeksekusi beberapa kode hanya jika kondisi tertentu adalah
benar.
Syntax :
if (kondisi)
kode akan di eksekusi if kondisinya benar;
Contoh: berikut akan menampilkan “Selamat berakhir pekan yang bagus!” jika saat ini adalah hari
jumat :
<html>
<body>
<?php
$d=date(“D”);
if ($d==”Fri”)
echo “Have a nice weekend!”;
?>
</body>
</html>
Perhatikan bahwa tidak if .. else .. dalam sintaks ini. Kode ini dijalankan hanya jika kondisi tertentu
adalah benar.
Statement If … Else
Gunakan if …. else untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi
adalah palsu.
Syntax :
if (kondisi)
kode akan di eksekusi if kondisinya benar;
else
kode akan di eksekusi if kondisinya salah;
Contoh : berikut akan menampilkan “Selamat berakhir pekan yang bagus!” jika saat ini hari Jumat,
jika tidak maka akan menampilkan “Have a nice day!”:
<html>
<body>
<?php
$d=date(“D”);
if ($d==”Fri”)
echo “Have a nice weekend!”;
else
echo “Have a nice day!”;
?>
</body>
</html>
Jika lebih dari satu baris harus dijalankan jika kondisi benar / salah, baris harus dikurung di dalam
kurung kurawal:
<html>
<body>
<?php
$d=date(“D”);
if ($d==”Fri”)
{
echo “Hello!<br />”;
echo “Have a nice weekend!”;
echo “See you on Monday!”;
}
?>
</body>
</html>
Statement If…Elseif…Else
Gunakan If.. Elseif…Else untuk memilih salah satu dari beberapa blok kode yang akan dieksekusi.
Syntax :
if (kondisi)
kode akan di eksekusi if kondisinya benar;
elseif (kondisi)
kode akan di eksekusi if kondisinya benar;
else
kode akan di eksekusi if kondisinya salah;
Contoh : berikut akan menampilkan “Selamat berakhir pekan yang bagus!” jika saat ini adalah hari
Jumat, dan “Memiliki Minggu bagus!” jika saat ini hari Minggu. Jika tidak itu akan menampilkan
“Have a nice day!”:
<html>
<body>
<?php
$d=date(“D”);
if ($d==”Fri”)
echo “Have a nice weekend!”;
elseif ($d==”Sun”)
echo “Have a nice Sunday!”;
else
echo “Have a nice day!”;
?>
</body>
</html>
Praktik :
Buat web page menggunakan script PHP untuk menampilkan tanggal selanjutnya konversi ke
format penulisan tanggal Indonesia.
Format penulisan tanggal di PHP adalah sebagai berikut:
date("w = l = D, d, m = M = F, Y = y")
Tampilannya:
1 = Monday = Mon, 01, 11 = Nov = November, 2016 = 04
Keterangan:
w = Kode hari dalam seminggu dalam bentuk angka
l = Mana hari yang lengkap (panjang)
D = Mana hari yang pendek
d = Hari dalam sebulan (tanggal)
m atau n = Bulan dalam bentuk angka
M = Nama Bulan pendek
F = Nama Bulan
Y = Tahun 4 Digit
y = Tahun 2 Digit
Jam: 01:06:43
Format di atas : date("h:i:s")
Layout tampilannya sebagai berikut:
Source Code
<html>
<head>
<title>Kondisi2</title>
</head>
<body>
<?php
$tgl=date("l, d F Y");
//menentukan kode hari dalam bentuk angka
$kd_hari=date("w");
//mencari kode bulan dalam bentuk angka
$kd_bln=date("m");
print("<b>Format Inggris</b><br>");
printf("Date : %s <br><br>\n", $tgl);
print("<b>Konversi ke format Indonesia</b> <br>\n");
//mencari nama hari
if ($kd_hari=="01")
$hari="Senin";
elseif ($kd_hari=="02")
$hari="Selasa";
elseif ($kd_hari=="03")
$hari="Rabu";
elseif ($kd_hari=="04")
$hari="Kamis";
elseif ($kd_hari=="05")
$hari="Jumat";
elseif ($kd_hari=="06")
$hari="Sabtu";
else
$hari="Minggu";
//mencari nama bulan
if ($kd_bln=="01")
$bulan="Januari";
elseif ($kd_bln=="02")
$bulan="Februari";
elseif ($kd_bln=="03")
$bulan="Maret";
elseif ($kd_bln=="04")
$bulan="April";
elseif ($kd_bln=="05")
$bulan="Mei";
elseif ($kd_bln=="06")
$bulan="Juni";
elseif ($kd_bln=="07")
$bulan="Juli";
elseif ($kd_bln=="08")
$bulan="Agustus";
elseif ($kd_bln=="09")
$bulan="September";
elseif ($kd_bln=="10")
$bulan="Oktober";
elseif ($kd_bln=="11")
$bulan="Nopember";
else
$bulan="Desember";
printf("Tanggal : %s, %s %s %s", $hari, date("d"), $bulan,
date("Y"));
?>
</body>
</html>
PRAKTIKUM VII
Tujuan: Setelah mengikuti praktikum ini praktikan dapat membuat fungsi dan menerapkannya ke
dalam web page.
(Fungsi dengan parameter (argumen) dan pemanfaatan variabel global)
o Buatlah web page menggunakan script PHP untuk mencari data terbesar dan terkecil dari
sekumpulan data. Gunakan fungsi dengan beberapa argumen dan penggunakan fungsi-fungsi
bawaan PHP.
o Layout tampilan sebagai berikut:
Source Code
<HTML>
<HEAD>
<TITLE>Fungsi 1</TITLE>
</HEAD>
<BODY>
<?php
//fungsi mencari nilai terkecil
function terkecil()
{
//Menentukan variabel jum_arg secara global
global $jum_arg;
$jum_arg = func_num_args();
//jika argumen tidak ada
if ($jum_arg == 0)
return 0;
//tentukan minimum argumen yang pertama
$minim = func_get_arg(0);
//proses pencarian data minimum
for ($i = 1; $i < $jum_arg; $i++)
{
$bilangan = func_get_arg($i);
if ($minim > $bilangan)
$minim = $bilangan;
}
//nilai kembalian fungsi
return $minim;
}
//fungsi mencari nilai terbesar
function terbesar()
{
//menentukan variabel jum_arg secara global
global $jum_arg;
//mencari jumlah argumen
$jum_arg = func_num_args();
//jika jumlah argumen kosong
if ($jum_arg == 0)
return 0;
//tentukan nilai maksimum argumen yang pertama
$maks = func_get_arg(0);
//proses mencarian data maksimum
for ($i = 1; $i < $jum_arg; $i++)
{
$bilangan = func_get_arg($i);
if ($maks < $bilangan)
$maks = $bilangan;
}
//nilai kembalian fungsi
return $maks;
}
//cetak data untuk minimum
print("Data : 1, 2, 5, 9, 6 <br>");
print("Data terbesar = ");
print(terbesar(1, 2, 5, 9, 6));
printf("<br>Jumlah Data = %d <br>",$jum_arg);
print("<br><BR>\n");
//cetak data untuk maksimum
print("Data : 10, 20, 50, 5, 90, 7, 70 <br>");
print("Data terkecil = ");
print(terkecil(10, 20, 50, 5, 90, 7, 70));
printf("<br>Jumlah Data = %d <br>",$jum_arg);
?>
</BODY>
</HTML>
Keterangan
func_num_args(): Untuk mencari jumlah argumen dari fungsi
func_get_arg($i): Untuk mengambil nilai argumen ke-I dari fungsi
(Fungsi Rekurisi)
Buatlah web page memanfaatkan fungsi rekursi untuk menghitung kombinasi C nm dimana
m!
C nm =
( m − n)! n!
m! = 1 x 2 x 3 x ….x m = m (m-1)!
n! = 1 x 2 x 3 x … x n = n(n-1)!
0! = 1
Layout Tampilan
Source Code
<HTML>
<HEAD>
<TITLE>fungsi Rekursi</TITLE>
</HEAD>
<BODY>
<?php
function faktorial($m)
{
if ($m == 0)
return 1;
else
return $m * faktorial($m - 1);
}
$combinasi=faktorial(6) / (faktorial(4)*faktorial(2));
printf("2! = %d <BR>\n", faktorial(2));
printf("6! = %d <BR>\n", faktorial(6));
printf("4! = %d <br>",faktorial(4));
printf("Combinasi dari 6 dan 2 = %d <br>", $combinasi);
?>
</BODY>
</HTML>
PRAKTIKUM VIII
Tujuan:
1. Memahami pengertian SQL
2. Memahami konsep Insert Data dengan PHP
3. Memahami Koneksi PHP ke MySQL
4. Memahami Konsep Menampilkan Data, update data, hapus data MySQL dengan PHP
Pengertian SQL
Pada bab ini Anda akan diperkenalkan dengan SQL atau structured query languange. SQL
adalah suatu statement atau pernyataan atau perintah standart yang digunakan untuk keperluan
administrasi database.
Ada banyak software database yang mendukung SQL ini. Software batabase ini disebut juga SQL
based DBMS (Database Management System). Beberapa di antaranya adalah MySQL, Oracle,
MS. Access, MS. SQL, SQL Server dll.
Bab pengenalan SQL ini diberikan karena mulai bab selanjutnya materi kursus terkait dengan
penggunaan database, dalam hal ini software database yang digunakan adalah MySQL. Mengapa
MySQL yang digunakan? Ya… karena MySQL adalah DBMS yang bersifat free alias gratis
namun kehandalannya tidak kalah dengan DBMS yang tidak free.
Tentang Database
Database ibaratnya suatu wadah yang digunakan untuk menyimpan data. Supaya mudah
diatur data-data itu disimpan dalam sebuah tabel.
Database ibaratnya seperti sebuah lemari kabinet. Dalam lemari kabinet terdapat beberapa laci
yang di dalamnya terdapat beberapa dokumen file atau data. Laci inilah yang diumpamakan
tabel dari database dan dokumen file atau data yang tersimpan dalam laci ibaratnya
merupakan data atau record dari database.
Di dalam sebuah database bisa terdapat lebih dari satu tabel.
Pada sebuah tabel, terdapat unsur yaitu kolom dan baris, seperti halnya tabel-tabel umum
yang Anda kenal. Kolom pada database disebut juga field, dan barisnya disebut record.
Tentang PhpMyAdmin
Terkadang dalam mengatur atau pengadministrasian database sangatlah repot. Misalnya
membuat database, membuat tabel, mengubah struktur tabel, menyimpan data ke database,
mengedit data, menghapus data dsb.
Nah… khusus MySQL terdapat software khusus yang dapat dipergunakan untuk
pengadministrasian database supaya mudah dilakukan. Software ini bernama PhpMyAdmin.
Software ini merupakan web based software yang dijalankan melalui URL:
http://localhost/phpmyadmin atau http://127.0.0.1/phpmyadmin
Apabila Anda menggunakan AppServ atau XAMPP maka ketika dipanggil URL di atas akan
langsung masuk ke PhpMyAdmin.
Catatan:
Sebelum masuk ke PhpMyAdmin biasanya kita disuruh memasukkan username dan password.
Username dan password ini sesuai dengan yang pernah kita masukkan sewaktu proses
instalasi AppServ.
Tampilan PhpMyAdmin
Membuat Database
Untuk membuat database baru dengan PhpMyAdmin, caranya adalah isikan nama database yang
akan Anda buat ke dalam bagian kotak CREATE NEW DATABASE lalu klik tombol CREATE.
Bisa juga membuat database dengan mengklik SQL, kemudian ketik database lalu go
Sebagai contoh silakan Anda buat database dengan nama: ‘perpustakaan’
Tips: sebaiknya nama database jangan mengandung spasi.
Bisa juga dengan menggunakan syntax SQL
Membuat Tabel
Setelah database dibuat, selanjutnya kita bisa membuat tabel. Untuk membuat tabel baru
dalam database yang telah kita buat caranya ketikkan nama tabel yang akan dibuat pada bagian
CREATE NEW TABLE ON DATABASE XXX. ‘XXX’ di sini merupakan nama
databasenya.
Selain itu masukkan pula jumlah fieldnya. Oleh karena itu sebaiknya sebelum proses pembuatan
tabel hendaknya Anda rancang terlebih dahulu nama-nama fieldnya sesuai yang dibutuhkan.
Dalam contoh ini andaikan kita akan membuat tabel ‘kategori_buku’
Tips: seperti halnya membuat nama database, untuk nama tabel juga sebaiknya jangan gunakan
spasi.
Untuk tabel ‘kategori_buku’ misalnya kita desain seperti di bawah ini:
Tabel : kategori_buku
Field : kode_kat varchar(5) PRIMARY
nama_kat varchar(20) KEY
Keterangan:
Dalam tabel ‘kategori buku’ terdapat 2 buah field yaitu ‘kode_kat’ dan ‘nama_kat’. Field
‘kode_kat’ nanti berisi kode kategori dari buku-buku yang tersimpan dalam
perpustakaan dan ‘nama_kat’ merupakan penjelasan yang berisi nama kategori terkait dengan
kode kategorinya. Misalnya kode kategori buku ‘X10’ itu merupakan kode kategori untuk
buku tentang ‘MATEMATIKA’.
Varchar merupakan tipe data dari fieldnya. Tipe data ini harus dimiliki setiap field yang akan
dibuat. Tipe data ini menentukan jenis atau sifat data yang akan disimpan dalam field tersebut.
Terdapat beberapa tipe data yang bisa dipilih, yaitu
Varchar bila datanya berbentuk karakter (maks 255 karakter)
Int bila datanya berbentuk bilangan bulat
Float bila datanya berbentuk bilangan real
Text bila datanya berbentuk karakter (size nya lebih besar dari varchar)
Date bila datanya berbentuk tanggal (th-bln-tgl)
Time bila datanya berbentuk waktu (jam:menit:detik)
Blob bila datanya berupa file
Catatan:
Khusus untuk varchar harus diberikan lebar size yang diinginkan, misalnya suatu field bertipe
varchar(5). Maksud 5 di sini adalah banyak karakter yang bisa disimpan dalam field tersebut
adalah 5 buah.
PRIMARY KEY adalah fitur yang ada dalam DBMS yang dapat digunakan untuk menjamin
bahwa sebuah data itu tunggal. Dalam contoh di atas PRIMARY KEY diberikan pada field ‘Kode
Kategori’. Tentu kita tahu bahwa suatu kode kategori buku itu bersifat tunggal atau tidak
boleh ada kode yang sama, seperti halnya kode karyawan atau kode mahasiswa. Bila suatu
field sudah dijadikan PRIMARY KEY maka tidak mungkin ada data yang sama pada field
tersebut. Apabila kita masukkan kode yang sama, maka akan ditolak oleh sistem.
OK… setelah kita rancang tabelnya, kita bisa membuatnya. Berikut ini caranya:
1. Isikan nama tabel di kotak CREATE NEW TABLE ON DATABASE … Dalam kasus ini
masukkan ‘kategori_buku’
2. Masukkan jumlah field dari tabel yang akan dibuat pada NUMBER OF FIELDS Dalam kasus
ini masukkan ‘2’
3. Klik GO
Setelah itu masukkan nama-nama field dan tipe datanya nya pada form yang muncul berikutnya
Menunjukkan primary key telah dipilih pada field ‘kode_kat’
Sebagai latihan coba Anda buat lagi tabel ‘tabel_buku’ dengan field sebagai berikut
kode_buk varchar(10) PRIMARY
u
judul_buk text KEY
u
kode_kat varchar(5)
pengarang varchar(30)
penerbit varchar(30)
thn_terbit int
Tabel di atas dibuat dalam database ‘perpustakaan’. Dengan demikian terdapat 2 tabel dalam
database ‘perpustakaan’.
Memasukkan Data/Record ke Tabel
Untuk memasukkan sebuah record ke tabel, perintah SQL nya adalah berikut ini
INSERT INTO nama_tabel (field1, field2, …) VALUES (data1, data2, ..);
Sebagai contoh misalkan kita akan memasukkan record kode kategori: ‘X001’ dan nama
kategori: ‘MAJALAH’ ke tabel ‘kategori_buku’, maka perintahnya
INSERT INTO kategori_buku (kode_kat, nama_kat) VALUES (‘X001’, ‘MAJALAH’);
Catatan Penting:
Khusus field yang bertipe VARCHAR, TEXT, DATE, TIME, dan BLOB, value yang akan
dimasukkan ke tabel harus diapit dengan tanda petik tunggal, misal ‘X001’. Namun untuk
field bertipe data bilangan (INT, FLOAT) tanpa menggunakan tanda petik.
Dimanakah kita menuliskan perintah SQLnya? Ya… caranya adalah klik terlebih dahulu nama
database yang kita gunakan pada kolom sebelah kiri dari PhpMyAdmin, dalam hal ini klik pada
nama database ‘perpustakaan’
Lalu klik table kategori_buku, pilih tombol SQL pada menu atas PhpMyAdmin. Kemudian tulis
perintah SQL pada kotak ‘RUN SQL QUERY/QUERIES ON DATABASE’
Selanjutnya klik GO.
Anda dapat menuliskan perintah atau query SQL lebih dari satu sekaligus.
Untuk melihat record yang telah tersimpan ke dalam tabel, caranya klik nama tabel yang mau
dilihat recordnya pada sisi kiri PhpMyAdmin
Lalu klik menu BROWSE pada bagian atas PhpMyAdmin
Selanjutnya akan muncul semua record yang telah disimpan pada tabel tersebut
Sebagai latihan coba masukkan record-record berikut ini ke dalam tabel masing-masing
menggunakan query SQL.
Tabel ‘kategori_buku’
Kode Kategori Nama Kategori
X002 REFERENSI
X003 SURAT KABAR
X004 JURNAL ILMIAH
Tabel ‘tabel_buku’
Kode Buku Judul Buku Kode Pengarang Penerbit Th. Terbit
Kategori
B001 Pemrograman X002 Mr. X PT. A 2003
Pascal
B002 Pemrograman X002 Mr. Y PT. A 2004
PHP
B003 Kompas (Edisi X003 - - 2006
X 2006)
B004 Sains X004 - LIPI 2008
Matematika
(Edisi XI
B005 2008) (Edisi X001
Tempo - PT. B 2008
XI 2008
Mengedit Record
Apabila Anda ingin mengedit record, perintah SQL nya adalah:
UPDATE nama_tabel SET field1 = value, field2 = value, … [WHERE syarat]
Dalam hal ini WHERE merupakan syarat yang bersifat optional. Bila WHERE tidak diberikan,
maka proses update data diberikan ke semua record.
Contoh:
Perintah SQL untuk mengedit tahun terbit buku berkode ‘B001’ menjadi 2010. UPDATE
tabel_buku SET thn_terbit = 2010 WHERE kode_buku = ‘B001’;
Perintah SQL untuk mengedit tahun terbit buku berkode ‘B002’ menjadi 2004 sekaligus
mengedit kode kategorinya menjadi ‘X002’.
UPDATE tabel_buku SET thn_terbit = 2004, kode_kat = ‘X002’ WHERE kode_buku =
‘B002’;
Perintah SQL untuk mengubah judul buku yang diterbitkan oleh PT. A pada tahun 2003 menjadi
‘XXX’.
UPDATE tabel_buku
SET judul_buku = ‘XXX’
WHERE thn_terbit = 2003 AND penerbit = ‘PT. A’;
Catatan:
Selain operator logika AND, Anda juga bisa menggunakan OR sebagai operator logika
‘atau’.
Perintah SQL untuk mengubah nama penerbit menjadi PT. C dari semua buku yang tahun
terbitnya di atas 2004.
UPDATE tabel_buku SET penerbit = ‘PT. C’ WHERE thn_terbit > 2004;
Catatan:
Untuk operator relasional, Anda bisa menggunakan tanda =, >, >=, <=, <> (tidak sama
dengan)
Perintah SQL untuk mengubah tahun terbit buku menjadi 2005 semuanya
UPDATE tabel_buku SET thn_terbit = 2005;
Menghapus Record
Sebuah record atau beberapa record dapat dihapus dari tabel dengan perintah SQL DELETE
FROM nama_tabel [WHERE syarat];
Contoh:
Perintah SQL untuk menghapus data buku yang berkode ‘B001’ DELETE FROM tabel_buku
WHERE kode_buku = ‘B001’;
Perintah SQL untuk menghapus data buku dari penerbit PT. A yang tahun terbitnya 2004
DELETE FROM tabel_buku WHERE penerbit = ‘PT. A’ AND thn_terbit = 2004;
Tentang SQL SELECT
Perintah SELECT digunakan untuk mencari data atau menampilkan data pada field-field tertentu.
Sintaksnya adalah:
SELECT field1, field2, … FROM nama_tabel [WHERE syarat ] [ORDER BY field DESC|ASC];
Keterangan:
ORDER BY digunakan untuk mensorting hasil data yang ditampilkan berdasarkan field tertentu
baik secara DESCENDING atau ASCENDING.
Contoh:
Perintah SQL untuk menampilkan data (kode buku dan judul buku) dari buku yang minimal terbit
pada tahun 2003.
SELECT kode_buku, judul_buku
FROM tabel_buku
WHERE thn_terbit >= 2003;
Perintah SQL untuk menampilkan data (untuk semua field) dari buku yang diterbitkan oleh PT. A
SELECT *
FROM tabel_buku
WHERE penerbit = ‘PT. A’;
Perintah SQL untuk menampilkan data (kode buku, judul buku, tahun terbit) yang diurutkan
berdasarkan tahun terbit mulai dari yang paling terbaru sampai dengan terlama.
SELECT kode_buku, judul_buku, thn_terbit
FROM tabel_buku
ORDER BY thn_terbit DESC;
Perintah SQL untuk menampilkan data (kode buku, judul buku dan nama kategori buku)
dari buku yang diterbitkan oleh PT. A pada tahun 2003.
Untuk hal ini, kita harus bekerja di dalam 2 buah tabel sekaligus. Kode buku dan judul buku
diperoleh dari tabel ‘tabel_buku’, sedangkan nama kategori diperoleh dari tabel
‘kategori_buku’.
Kedua tabel saling berhubungan karena masing-masing terdapat field bernama ‘kode kategori’
atau ‘kode_kat’.
SELECT tabel_buku.kode_buku, tabel_buku.judul_buku, kategori_buku.nama_kat
FROM tabel_buku, kategori_buku
WHERE tabel_buku.kode_kat = kategori_buku.kode_kat AND tabel_buku.penerbit = ‘PT. A’
AND tabel_buku.thn_terbit = 2003;
Perintah SQL untuk menampilkan kode buku dan judul buku, yang judul bukunya
mengandung kata ‘MATEMATIKA’
SELECT kode_buku, judul_buku
FROM tabel_buku
WHERE judul_buku LIKE ‘%MATEMATIKA%’;
Perintah SQL untuk menampilkan kode buku dan judul buku, yang kata depan judul bukunya
adalah ‘MATEMATIKA’
SELECT kode_buku, judul_buku
FROM tabel_buku
WHERE judul_buku LIKE ‘MATEMATIKA%’;
Perintah SQL untuk menampilkan kode buku dan judul buku, yang judul bukunya
berakhiran dengan kata ‘MATEMATIKA’
SELECT kode_buku, judul_buku
FROM tabel_buku
WHERE judul_buku LIKE ‘%MATEMATIKA’;
Penggunaan Aggregate Function
Anda juga bisa menggunakan function yang sudah disediakan oleh MySQL, seperti AVG() untuk
menghitung rata-rata nilai, MAX() untuk menghitung nilai maksimum, MIN() untuk mencari
nilai minimum, COUNT() untuk menghitung cacah data, SUM() untuk menjumlahkan nilai dari
beberapa data.
Contoh:
Perintah SQL untuk mencari jumlah buku yang ada di dalam database: SELECT
count(kode_buku) FROM tabel_buku;
Perintah SQL untuk mencari jumlah buku yang memiliki kode kategori ‘X002’:
SELECT count(kode_buku) FROM tabel_buku WHERE kode_kat = ‘X002’;
Konsep INSERT Data dengan PHP
Setelah Anda mengenal beberapa bentuk perintah SQL untuk memanipulasi atau mengolah data
di MySQL, pada bab ini Anda akan diperkenalkan bagaimana menerapkan konsep
tersebut yang terintegrasi dengan script PHP.
Pada bab ini terlebih dahulu akan diperkenalkan bagaimana konsep inserting data ke MySQL
melalui PHP.
Koneksi PHP ke MySQL
Sebelum kita membahasnya lebih lanjut tentang inserting data, terlebih dahulu akan
disinggungkan tentang bagaimana caranya melakukan koneksi dari PHP ke MySQL.
Perintah PHP untuk koneksi ke MySQL adalah:
mysql_connect(‘nama host’, ‘nama user’, ‘password’);
mysql_select_db(‘nama db’); Keterangan:
Nama Host : nama komputer di mana MySQL nya berada, kalo berada di komputer itu
sendiri maka nama hostnya: ‘localhost’, bisa juga diberi nomor IP dari komputernya.
• Nama User : nama user yang memiliki hak akses ke MySQL nya
• Password : password dari nama user yang punya hak akses ke MySQL
• Nama DB : nama database yang akan dipilih
Contoh:
Berikut ini adalah script untuk melakukan koneksi ke MySQL dengan nama host:
localhost, user : root, password: root, dan nama database:
contoh
<?php
mysql_connect('localhost', 'root', 'root');
mysql_select_db('contoh'); ?>
Sebaiknya script di atas kita simpan dalam file script tersendiri, misalkan koneksi.php.
Selanjutnya script tersebut kita includekan ke dalam script lain yang di dalamnya terdapat
query-query SQL.
Menjalankan Query SQL di PHP
Setelah kita melakukan koneksi dari PHP ke MySQL, selanjutnya kita bisa menjalankan query
melalui script PHP.
Untuk menjalankan query SQL di PHP, kita gunakan perintah mysql_query(query);
Contoh:
Berikut ini contoh script PHP untuk menjalankan query SQL untuk insert data ke table MySQL
<?php
include "koneksi.php";
$query = "INSERT INTO namaTabel(field1, field2) VALUES(value1,
value2) ";
mysql_query($query);
?>
Selanjutnya akan dibahas bagaimana mengimplementasikan konsep inserting data ke MySQL
melalui script PHP yang diintegrasikan dengan form input
Konsep Menampilkan Data, update data, hapus data MySQL dengan
PHP
Membuat koneksi database dan membuat perintah (Tambah, Edit , Delete)
Di suatu WEB proses tampil data, input, update dan delete. Atau dalam bahasa biasa di sebut
CRUD (Create, Read, Update, Delete) yang merupakan proses pemrograman dasar khususnya yang
berkaitan dengan database. Untuk pemrograman bebasis WEB proses CRUD ini dapat dilakukan
dengan kode script PHP, baik dalam proses CRUD maupun untuk mehubungkan database dengan
program PHP yang kita buat.
Di pertemuan kali ini kita akan membahas tentang koneksi database menggunakan mysql improve
dimana di setiap perintahnya akan di awali dengan fungsi kata mysqli Disamping itu kita juga akan
mempelajari dan membuat sebuah form untuk Tampil, Tambah, Edit dan Delete. Kita akan
mencoba membuat form siswa di mana form tersebut di fasilitasi perintah tambah,edit dan delete.
Terlebih dahulu buatlah database, dalam contoh ini saya menggunakan phpMyAdmin.
1. Buatlah database dengan nama kampus.
Bisa juga menggunakan SQL dengan mengetik syntax database sebagai contoh :
2. Buat tabel dengan nama mahasiswa dan isikan 4 untuk jumlah kolom yang akan dibuat.
3. Kemudian isikan ke 4 kolom yang telah dibuat tadi seperti berikut. Klik go
Bisa juga menggunakan SQL dengan mengetik syntax database sebagai contoh :
4. Jika sudah save dan isikan sejumlah data pada tabel siswa tersebut, Apabila langkah-langkah
membuat database sudah selesai, langkah selanjutnya adalah membuat file koneksi kedatabase dan
form - form yang diperlukan.
5. Terlebh dulu kita buat file yang mengoneksikan database ke file php dengan cara menuliskan
kode script dibawah ini simpan dengan nama konek.php di (xampp/htdoc/mahasiswa/konek.php).
<?php
$db_host = "127.0.0.1";
$db_usn = "root"; //nama username
$db_pwd = ""; //password jika tidak ada bisa di kosongi
seperti contoh
$db_name = "kampus"; //nama database
$db_link = mysqli_connect($db_host,$db_usn,$db_pwd,$db_name);
if (!$db_link){
echo 'Tidak dapat terhubung ke database';
}
?>
CATATAN :
Disini saya menggunkan mysqli (MySQL Improve Extension) karena extensi ini dapat digunakan
untuk mengakses MySQL versi 4.1 keatas. Karena jika menggunakan extensi mysql_connect versi
ini sudah usang sejak PHP Versi 5.5.0. Jadi sebagai gantinya, kita dianjurkan untuk menggunakan
extensi pengganti, yaitu mysqli ( MySQL Improve Extension ).
6. Selanjutnya adalah membuat file yang akan menampilkan data dari tabel mahasiswa simpan
dengan nama mahasiswa.php di (xampp/htdoc/mahasiswa/mahasiswa.php).
untuk membuat tabel yang menampilkan data seperti di atas, di bawah ini merupakan kode
scriptnya.
<?php
include('konek.php');
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Untitled Document</title>
</head>
<body bgcolor="#CCCCCC">
<?php
$sql = 'select * from mahasiswa';
$query = mysqli_query($db_link,$sql);
?>
<h2><strong><p align="center">Data Mahasiswa USN
Kolaka</p></strong></h2>
<table width="807" border="1" cellpadding="0" cellspacing="0"
align="center">
<!--DWLayoutTable-->
<tr>
<td width="112" height="29" align="center" valign="middle"
bgcolor="#00FFFF">NIM</td>
<td width="176" align="center" valign="middle"
bgcolor="#00FFFF">Nama</td>
<td width="252" align="center" valign="middle"
bgcolor="#00FFFF">Alamat</td>
<td width="134" align="center" valign="middle"
bgcolor="#00FFFF">Kelas</td>
<td width="133" align="center" valign="middle"
bgcolor="#00FFFF"><a href="tambah.php">TAMBAH</a></td></tr>
<?php
while($data = mysqli_fetch_array($query)){
?>
<tr>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['nim']; ?></td>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['nama']; ?></td>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['alamat']; ?></td>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['kelas']; ?></td>
<td p align="center" bgcolor="#FFFFFF">
<a href="edit.php?ni=<?php echo $data['nim'];?>" title="Edit
Mahasiswa ini"> || edit || </a>
<a href="delete.php?ni=<?php echo $data['nim'];?>"
onclick="return confirm('Yakin mau di hapus?');">|| hapus ||</a>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>
7. Selanjutnya kita buat form untuk tambah data kita simpan dengan nama tambah.php di
(xampp/htdoc/mahasiswa/tambah.php).
berikut kode script untuk membuat form tambah data di atas.
<body bgcolor="#CCCCCC">
<h2><p align="center">TAMBAH DATA</p></h2>
<form method="post" action="aksi.php">
<table width="546" border="0" cellpadding="0" cellspacing="0"
align="center" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="189" height="20"> </td>
<td width="26"> </td>
<td width="331"> </td>
</tr>
<tr>
<td height="27" align="right" valign="middle">NIM</td>
<td align="center" valign="top">:</td>
<td valign="middle"><label>
<input name="nim" type="text" size="10">
</label></td>
</tr>
<tr>
<td height="27" align="right" valign="middle">Nama</td>
<td align="center" valign="top">:</td>
<td valign="middle"><label>
<input type="text" name="nama">
</label></td>
</tr>
<tr>
<td height="27" align="right" valign="middle">Alamat</td>
<td align="center" valign="top">:</td>
<td valign="middle"><label>
<input name="alamat" type="text" size="50">
</label></td>
</tr>
<tr>
<td height="27" align="right" valign="middle">Kelas</td>
<td align="center" valign="top">:</td>
<td valign="middle"><label>
<select name="kelas">
<option selected="selected">--Pilih--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</label></td>
</tr>
<tr>
<td height="42"> </td>
<td> </td>
<td><input type="submit" name="ttambah" value="TAMBAH"></td>
</tr>
</table>
</form>
</body>
CATATAN :
<form method="post" action="aksi.php"> disini terlihat di tag action nilainya sama dengan
aksi.php, file tersebut merupakan file untuk menangkap data yang di tambahkan dan
memasukkannya ke database.
untuk itulah di catatan tambah.php kita harus membuat file dengan nama aksi.php disimpan di
(xampp/htdoc/mahasiswa/aksi.php). Dan di bawah ini merupakan kodoe scriptnya.
<?php
include('konek.php');
if(isset($_POST['ttambah'])){ //['ttambah'] merupakan name dari
button di form tambah
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$kelas = $_POST['kelas'];
$sql = 'insert into mahasiswa (nim,nama,alamat,kelas)
values ("'.$nim.'","'.$nama.'","'.$alamat.'","'.$kelas.'")';
$query = mysqli_query($db_link,$sql);
if($query){
header('location: mahasiswa.php'); //kode ini supaya
jika data setelah ditambahkan form kembali menuju tabel data
mahasiswa
}
else{
echo 'Gagal';
}
}
?>
8. Setelah membuat file untuk tambah data selanjutnya kita buat untuk update data, buat dan
simpan dengan nama edit.php di (xampp/htdoc/mahasiswa/edit.php).
berikut kode script untuk membuat form edit.php data di atas, tapi terlebih dahulu kita buka file
mahasiswa.php dan perhatikan kode di bawah ini yang akan di tambah sedikit kode lagi.
sebelumnya =>
<tr>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['nim']; ?></td>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['nama']; ?></td>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['alamat']; ?></td>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['kelas']; ?></td>
<td p align="center" bgcolor="#FFFFFF">
|| edit || || hapus ||
</td>
</tr>
setelahnya =>
<tr>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['nim']; ?></td>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['nama']; ?></td>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['alamat']; ?></td>
<td p align="center" bgcolor="#FFFFFF"><?php echo
$data['kelas']; ?></td>
<td p align="center" bgcolor="#FFFFFF">
<a href="edit.php?ni=<?php echo $data['nim'];?>" title="Edit
mahasiswa ini"> || edit || </a>
<a href="delete.php?ni=<?php echo $data['nim'];?>"
onclick="return confirm('Yakin mau di hapus?');">|| hapus ||</a>
</td>
</tr>
Sesudah itu buka edit.php dan tambahkan kode berikut :
<body bgcolor="#CCCCCC">
<h2>
<p align="center">EDIT DATA
<?php
include('konek.php');
if(isset($_GET['ni'])){
$ni = $_GET['ni'];
$query = mysqli_query($db_link,'select * from
mahasiswa where nim = "'.$ni.'"');
$data = mysqli_fetch_array($query);
$nama = $data['nama'];
$alamat = $data['alamat'];
$kelas = $data['kelas'];
}
else{
$nama = '';
$alamat = '';
$kelas = '';
}
?>
</p></h2>
<form method="post" name="frm" action="aksi.php">
<table width="546" border="0" cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF" align="center">
<!--DWLayoutTable-->
<tr>
<td width="189" height="20"> </td>
<td width="26"> </td>
<td width="331"> </td>
</tr>
<tr>
<td height="27" align="right" valign="middle">NIM</td>
<td align="center" valign="top">:</td>
<td valign="middle">
<input type="text" name="nim" value="<?php echo $_GET['ni'];
?>" readonly="readonly">
</td>
</tr>
<tr>
<td height="27" align="right" valign="middle">Nama</td>
<td align="center" valign="top">:</td>
<td valign="middle"><label>
<input type="text" name="nama" value="<?php echo $nama; ?>">
</label></td>
</tr>
<tr>
<td height="27" align="right" valign="middle">Alamat</td>
<td align="center" valign="top">:</td>
<td valign="middle"><label>
<input name="alamat" type="text" size="50" value="<?php echo
$alamat; ?>">
</label></td>
</tr>
<tr>
<td height="27" align="right" valign="middle">Kelas</td>
<td align="center" valign="top">:</td>
<td valign="middle"><label>
<input name="kelas" type="text" size="50" value="<?php
echo $kelas; ?>">
</label></td>
</tr>
<tr>
<td height="42"> </td>
<td> </td>
<td><input type="submit" name="tedit" value="EDIT"></td>
</tr>
</table>
</form>
CATATAN :
<form method="post" action="aksi.php"> sama seperti di form tambah disini juga terdapat tag yang
sama dengan nilai atribut sama dengan aksi.php berguna untuk menangkap editan data yang sudah
dilakukan user dan menampilkannya ke mahasiswa.php
jadi kita buka file aksi.php dan tambahkan kode script berikut sebelum tag tutup php ?> kodenya
adalah.
if(isset($_POST['tedit'])){
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$kelas = $_POST['kelas'];
$nim = $_POST['nim'];
$sql = 'update mahasiswa set nama="'.$nama.'",
alamat="'.$alamat.'", kelas="'.$kelas.'" where nim="'.$nim.'"';
$query = mysqli_query($db_link,$sql);
if($query){
header('location: mahasiswa.php');
}
else{
echo 'Gagal';
}
}
Cobalah fungsi update tersebut pada salah satu data, maka data yang di edit hasilnya sebagai berikut
:
9. Langkah terakhir yaitu kita buat fungsi delete, buka lembar baru simpan dengan nama delete.php
di (xampp/htdoc/mahasiswa/delete.php).
tuliskan kode script untuk delete.php seperti berikut :
<?php
include('konek.php');
$ni = $_GET['ni'];
$sql = 'delete from mahasiswa where nim="'.$ni.'"';
$query = mysqli_query($db_link,$sql);
header('location: mahasiswa.php');
?>
Sebelum itu buka mahasiswa.php tambahkan kode berikut pada tombol hapus hingga menjadi
seperti berikut
<a href="delete.php?ni=<?php echo $data['nim'];?>" onclick="return
confirm('Yakin mau di hapus?');">|| hapus ||</a>
CATATAN :
1. onclick="return confirm('Yakin mau di hapus?'); adalah kode script untuk menambahkan
pesan/message box untuk meyakinkan user data ingin di hapus atau tidak.
2. header('location: mahasiswa.php'); untuk langsung mengarahkan tampilan ke tabel mahasiswa
ketika sudah terhapus.
jika sudah selesai semua mengenai pembuatan hapus maka jika dijlankan akan tampil seperti
berikut :
pertama :
kedua : muncul message box dan jika memilih OK maka datanya akan dihapus.
ketiga : data pada nim nomer 1 akan hilang
Demikianlah tahapan pembuatan perintah CRUD yang terkonek dengan database mysql, ini
merupakan penjelasan dasar mengenai PHP. Dan semoga dari penjelasan singkat ini berguna bagi
para mahasiswa.
Anda mungkin juga menyukai
- MODUL BELAJAR Muatan Lokal (Web Design)Belum ada peringkatMODUL BELAJAR Muatan Lokal (Web Design)8 halaman
- Materi - 8 - Pengenalan - HTML - Revisi 3Belum ada peringkatMateri - 8 - Pengenalan - HTML - Revisi 3124 halaman
- Adoc - Pub Modul Desain Web Teori Praktik HTML Css Dan JavascBelum ada peringkatAdoc - Pub Modul Desain Web Teori Praktik HTML Css Dan Javasc10 halaman
- Pengelolaan Yang Efektif Untuk Kreator Konten: Podcast Kreator Konten, #10Dari EverandPengelolaan Yang Efektif Untuk Kreator Konten: Podcast Kreator Konten, #10Belum ada peringkat
- Pendekatan sederhana untuk komunikasi profesional: Panduan praktis untuk komunikasi profesional dan strategi komunikasi bisnis tertulis dan interpersonal terbaikDari EverandPendekatan sederhana untuk komunikasi profesional: Panduan praktis untuk komunikasi profesional dan strategi komunikasi bisnis tertulis dan interpersonal terbaikBelum ada peringkat
