Modul Kuliah CSS dan HTML

Pertemuan IPengenalan HTML dan membuat Tabel

Pendahuluan

HTML (Hyper Text markup Language) adalah bahasa markup utama untuk halaman web. Versi HTML terbaru saat ini adalah HTML 5. Untuk menulis sebuah script HTML, anda dapat menggunakan editor seperti Notepad++ (www.notepad-plus-plus.org) dan Geany (www.geany.org) yang kedua nya dapat di download secara gratis di situs nya masing-masing. Walaupun HTML dapat di tulis dengan menggunakan design software seperti Macromedia Dreamweaver, namun untuk pemula, tidak di sarankan, karena untuk mengetahui syntax html di perlukan latihan menulis syntax secara langsung. Selain itu, Notepad++ dan Geany adalah dua di antara Editor atau IDE yang kecil, ringan dan cepat. Anda dapat juga menggunakan Netbeans (www.netbeans.org), sebagai IDE yang besar dan lebih kompleks, terutama untuk mengerjakan file-file di dalam sebuah project. Html harus di tulis dengan menggunakan ekstension htm atau html, namun dapat juga di baca di sejumlah file script based server, seperti php dan asp, karena html juga dapat berfungsi sebagai bahasa yang di embed olech script pemrograman web berbasis server. Untuk dapat menjalankan html, di perlukan sebuah browser, yang saat ini anda dapat menggunakan hampir semua browser yang ada saat ini, seperti : Mozilla firefox, Opera, Internet Explorer, Chrome dan Safari. Banyak tag html memiliki syntax buka dan tutup berpasangan, seperti <body> </body>. Tanda / pada tag menandakan, bahwa tag tsb adalah tag penutup.

Mengenal syntax HTML 5.

Tanda * adalah syntax yang hanya ada di html 5 saja, bukan di html 4.01.

a. Nama : HTML 5 doctype Syntax : <!DOCTYPE html>* Fungsi : Untuk memulai html 5, tempat kan syntax tsb di baris paling awal.

b. nama : Tag HTML Syntax : <html></html> Fungsi : Untuk penanda awal script html.

c. Nama : Tag Head Sytnax : <head></head> Fungsi : Untuk bagian header script html. Di tempatkan di dalam tag html.

d. Nama : Tag Title Syntax : <title></title> Fungsi : Memberi Judul di atas browser. Di tempatkan di dalam tag head. Contoh : <title>HTML pertama ku </title>

e. Nama : Tag Body Syntax : <body></body> Fungsi : Untuk menandakan body dari script html 5.Di tempatkan di antara tag html, di bawah tag head.

http://www.notepad-plus-plus.org/

http://www.netbeans.org/

http://www.geany.org/

f. Nama : Tag header Syntax : <h1></h1> atau <h2></h2> atau <h3></h3>, dst. Fungsi : Untuk header sebuah kalimat. H1 besar, H2 agak kecil, dst semakin mengecil. Di tempatkan di dalam tag body.

HTML Pertama kuPada bagian di atas, anda telah mengenal sejumlah syntax html, selanjut nya kita akan menulis script html pertama kita, untuk membuat kalimat “Hello world” dengan judul di browser, “script html pertama ku”.

<!DOCTYPE html><html> <head> <title>Script html pertama ku</title> </head> <body> <h1>Hello World</h1> </body></html>

Membuat Tabel Tabel memiliki baris dan kolom. Terdapat sejumlah syntax html yang di pergunakan untuk membuat tabel, yaitu :

a. Nama : Tag table Syntax : <table></table> Fungsi : Untuk awalan membuat tabel.

b. Nama : Table head Syntax : <thead></thead> Fungsi : Untuk header tabel

c. Syntax : <th></th> Fungsi : Untuk menulis judul field

d. Syntax : <tr></tr> Fungsi : Untuk membuat baris.

e. Syntax : <td></td> Fungsi : Untuk membuat elemen cell di tabel.

f. Syntax : <tbody></tbody> Fungsi : Untuk tag body tabel

g. Syntax : <tfoot></tfoot> Fungsi : Untuk tag footer tabel.

Sejumlah parameter :

a. Syntax : <table border=”1”> Fungsi : Untuk memberi baris pada tabel. Semakin besar angka nya, akan semakin tebal baris tabel nya.

b. Syntax : <td colspan=”2”> fungsi : Agar sebuah cell memiliki lebar 2 kolom yang di jadikan 1. Nilai colspan dapat selain 2.

c. Syntax : <td rowspan=”2”> Fungsi : Agar sebauh cell memiliki lebar 2 baris yang di jadikan 1. Nilai rowspan dapat selain 2.

<!DOCTYPE html><html> <head> <title>Membuat Tabel</title> </head> <body> <table border="1"> <caption>Daftar Mahasiswa</caption> <thead> <th>No</th><th>Nim</th><th>Nama</th><th>Alamat</th> </thead> <tbody> <tr> <td>1</td><td>121151</td><td>Andika</td><td>Jakarta</td> </tr> <tr> <td>2</td><td>121152</td><td>Budiman</td><td>Semarang</td> </tr> <tr> <td>3</td><td>121153</td><td>Doni</td><td>Jakarta</td> </tr> <tr> <td>4</td><td>121154</td><td>Susan</td><td>Tangerang</td> </tr> </tbody> </table> </body></html>

Pertemuan IIOrder List, Paragraph, div, header,nav, article, footer dan aside

Order ListYaitu syntax untuk membuat list. Ada 2, yaitu Order List dan Unordered List :

Order List Syntax : <ol> <li>List Item 1</li> <li>List Item 2</li> </ol>Contoh :Nama-nama hewan :<ol> <li>Rusa</li> <li>Kambing</li> <li>Harimau</li> <li>Kucing</li> </ol>

Output :Nama-nama Hewan : Rusa Kambing Harimau Kucing

Attribute <ol> : Attribute : typeFungsi : Tipe penomoran. a | A | I | I | 1

a : a,b,c,d,e,... A : A,B,C,D,E, … i : i, ii, iii, iv, v, vi, … I : I, II, III, IV, V, VI, ...

Unorder List :Syntax : <ul> <li>List Item 1</li> <li>List Item 2</li> </ul>Contoh :Nama-nama hewan :<ul> <li>Rusa</li> <li>Kambing</li> <li>Harimau</li> <li>Kucing</li> </ul>

Output :Nama-nama Hewan :

RusaKambingHarimauKucing

Paragraph dan TeksTag-tag yang berhubungan dengan paragraph dan Teks :a. Syntax : <p> Fungsi : Membentuk paragraph

b. Syntax : <br> Fungsi : Membuat 1 baris ke bawah c. Syntax : <strong>kalimat</strong> atau <b>kalimat</b> Fungsi : Menebalkan kalimat

d. Syntax : <u>kalimat</u> Fungsi : Menggaris bawahi kalimat

e. Syntax : <i>kalimat</i> Fungsi : Meng italic kan kalimat

Contoh :Script<p> Belajar <b>html 5</b> adalah hal yang saya sukai, sehingga saya selalu <i>bersemangat</i> menghadiri kelas ini.</p><p> Selain <b>HTML 5</b>, kelas pemrograman 2 ini juga mempelajari <b><i>CSS</i></b>, yaitu script untuk memperindah tampilan html nya.</p> Output : Belajar html 5 adalah hal yang saya sukai, sehingga saya selalu bersemangat menghadiri kelas ini.

Selain HTML 5, kelas pemrograman 2 ini juga mempelajari CSS, yaitu script untuk memperindah tampilan html nya.

<div> <div> berfungsi untuk menempatkan class CSS di dalam html.Contoh :

<!DOCTYPE html><html> <head> <title>Membuat Tabel</title> <style =”text/css”> #baris { border : 1px solid; background-color:#A15E5E; text-align:center; padding:-80px -10px -20px 0; } </style> </head> <body> <div id="baris"> Bagian Atas </div> </body></html>

<header>Adalah elemen baru yang ada di html 5.

Syntax : <header>[content]</header>. Di letakkan di antara <body>.Fungsi : Untuk menyatakan header pada header sebuah web. Menggantikan peran <div>, yang dapat di gunakan di semua tempat. Membantu Bot untuk mencari header sebuah web, sehingga dapat meningkatkan SEO sebuah web.

<nav>Adalah elemen baru yang ada di html 5.

Syntax : <nav>[content]</nav>. Di letakkan di antara <body>.Fungsi : Untuk menyatakan blok navigator di sebuah web. Menggantikan peran <div>, yang dapat di gunakan di semua tempat.

<article>Adalah elemen baru yang ada di html 5.

Syntax : <article>[content]</article>. Di letakkan di antara <body>.Fungsi : Untuk menyatakan blok isi di sebuah web. Menggantikan peran <div>, yang dapat di gunakan di semua tempat.

<footer>Adalah elemen baru yang ada di html 5.

Syntax : <footer>[content]</footer>. Di letakkan di antara <body>.Fungsi : Untuk menyatakan blok footer di sebuah web, yang umum nya berada di bawah web. Footer dapat meningkatkan rank di SEO. Menggantikan peran <div>, yang dapat di gunakan di semua tempat.

<aside>Adalah elemen baru yang ada di html 5.

Syntax : <aside>[content]</aside>. Di letakkan di antara <body>.Fungsi : Untuk menyatakan blok di sisihkan di sebuah web, yang dapat di gunakan untuk menaruh iklan.

Pertemuan IIIMembuat Form

Sebuah form di perlukan untuk menampung inputan dari user dan html menyediakan sejumlah elemen untuk pembuatan form, yaitu :1. <input> Attribut Type dengan value : text | checkbox | radio | password | hidden | submit | reset | button | file | image a. Type=”text” Fungsi : Membentuk inputan text Attribut : name → Nama elemen. Nama elemen dapat berupa apa saja. value → Nilai default. Size → Ukuran panjang elemen

Contoh : <input type="text" name="vnama" size=”20” value=””/>

b. Type=”checkbox” Fungsi : Membentuk inputan text checkbox Attribut : name → Nama elemen. Nama elemen dapat berupa apa saja.

Contoh : <input type="checkbox" name="vvb"/>VB.net <input type="checkbox" name="html"/>HTML dan CSS

c. Type=”radio” Fungsi : Membentuk inputan text radio Attribut : name → Nama elemen. Nama elemen dapat berupa apa saja. value → Nilai value

Contoh : <input type="radio" name="vkelamin" value="pria" />Pria <input type="radio" name="vkelamin" value="wanita" />wanita

Karena nilai name sama, yakni vkelamin, maka hanya dapat di pilih 1 elemen radio saja, pria/wanita, tidak bisa kedua nya.

d. Type=”password” Fungsi : Membentuk inputan password. Text akan menjadi bulatan hitam atau * Attribut : name → Nama elemen. Nama elemen dapat berupa apa saja. value → Nilai value default size → Ukuran text file Contoh : <input type="password" name="vpassword" value="" />

e. Type=”hidden” Fungsi : Membentuk inputan text, namun tidak terlihat oleh user. Berguna untuk mengirimkan nilai kepada script server-side, tetapi nilai nya tidak perlu di lihat user. Attribut : name → Nama elemen. Nama elemen dapat berupa apa saja. value → Nilai value default size → Ukuran text file

f. Type=”reset” Fungsi : Membentuk button reset. Untuk mereset nilai form yang sudah di masukkan.

Attribut : name → Nama elemen. Nama elemen dapat berupa apa saja. Value → Nilai value yang tampil di button

g. Type=”file” Fungsi : Untuk mengambil file dari komputer.

Attribut : name → Nama elemen. Nama elemen dapat berupa apa saja. value → Nilai value default size → Ukuran text file

Contoh : <input type="file" name="upload" />

h. Type=”submit” Fungsi : Membentuk button submit. Untuk tombol mengirim/submit data ke file server-side yang di tentukan di url elemen <form>.

Attribut : name → Nama elemen. Nama elemen dapat berupa apa saja. Value → Nilai value yang tampil di button Contoh : <input type="submit" name="kirim" value=”Submit” />

2. <form> Fungsi : Untuk menerima inputan dari elemen-elemen input yang akan di teruskan ke script server-side. Attribut : method = get | post . Tipe transfer data ke script server-side. action = “url” . Url ke script server-side. Enctype = ”multipart/form-data” | “application/x-www-form-urlencoded” | “text/plain”. Tipe form. Default nya adalah “application/x-www-form-urlencoded” dan cukup untuk banyak hal, kecuali file upload, butuh tipe ”multipart/form-data”. Name = nama form.

Contoh : <form method=”post” action=”kirim.php” > <input type=”text” name=”vnama” value=”” /> <input type=”submit” value=”submit” /> </form>

Contoh penerapan form : <!DOCTYPE html> <html> <head> <title>Membuat Form</title> </head> <body> <table>

<caption> Contoh Form</caption> <form method="post" action=”kirim.php” enctype=”multipart/form-data”>

<tr> <td>Nama</td><td>:</td><td><input type="text" name="vnama" size="25" /></td>

</tr> <tr> <td>Alamat</td><td>:</td><td><textarea rows="5" cols="29"></textarea></td> </tr> <tr> <td>Tempat/Tgl Lahir</td><td>:</td> <td><input type="text" name="vtempat" size="15"/>/

<select name="vtgl"> <option value="" selected="selected">--Pilih Tanggal--</option>

<option value="1">1</option> <option value="2">2</option> <option value="3">3</option>

<option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option>

<option value="9">9</option> <option value="10">10</option> </select> <select name="vbln"> <option value="" selected="selected">--Pilih Bulan--</option> <option value="1">Januari</option> <option value="2">Februari</option> <option value="3">Maret</option> <option value="4">April</option> <option value="5">Mei</option> <option value="6">Juni</option> <option value="7">Juli</option> <option value="8">Agustus</option> <option value="9">September</option> <option value="10">Oktober</option> <option value="11">Nopember</option> <option value="12">Desember</option>

</select> <select name="vthn"> <option value="" selected="selected">--Pilih Tahun--</option> <option value="1985">1985</option> <option value="1986">1986</option> <option value="1987">1987</option> <option value="1988">1988</option> </select> </td>

</tr> <tr> <td>Jenis Kelamin</td><td>:</td> <td><input type="radio" name="vkelamin" value="pria" />Pria <input type="radio" name="vkelamin" value="wanita" />wanita </td> </tr> <tr> <td>Jenis Workshop</td><td>:</td> <td><input type="checkbox" name="vvb"/>VB.net <input type="checkbox" name="html"/>HTML dan CSS <input type="checkbox" name="php"/>PHP <input type="checkbox" name="java"/>Java </td> </tr> <tr> <td>Upload foto</td><td>:</td><td><input type="file" name="upload"/></td> </tr> <tr> <td><input type="submit" value="OK" /> <input type="reset" value="Reset"></td> </tr>

</table> </body></html>

Pertemuan IVLink, Paragraf, Text dan Media

Linka. Syntax : <base> Fungsi : Untuk membentuk base link. Di letakkan di antara <head></head>. Link selanjut nya yang di bentuk oleh <a> akan mengikuti base tsb. Contoh :<!DOCTYPE html><html> <head> <title>Base</title> <base href="http://localhost/acct/" target="_blank"> </head> <body> <ol>Link Web <li><a href="Login.php">Login</a></li> <li><a href="Logout.php">Logout</a></li> </ol> </body></html>

b. Syntax : <a href=”url”>text</a> Fungsi : Untuk menuju ke sebuah url Contoh : <a href=”http://localhost/acct/simpan.htm”>simpan</a> Keterangan : Akan membentuk link simpan dan membuka halaman simpan.htm ketika mengklik link simpan.

Paragrafa. Syntax : <p> Fungsi : Untuk membuat paragraph Contoh : <p> Belajar HTML dan CSS itu menyenangkan, karena dapat mendesign tampilan web </p> Output : Akan menampilkan text tersebut dengan menjadikannya sebuah paragraf.

Texta. Syntax : <b> Fungsi : Membentuk text tebal Contoh : <b>Html 5</b> Output : Text Html 5 akan tercetak tebal.

b.Syntax : <i> Fungsi : Membentuk text miring/italic Contoh : <i>Html 5</i> Output : Text Html 5 akan tercetak miring.

c. Syntax : <u> Fungsi : Membentuk text garis bawah/underline Contoh : <i>Html 5</i> Output : Text Html 5 akan tercetak text yang di garis bawahi.

http://localhost/acct/simpan.htm

d. Syntax : <font> Fungsi : Untuk menggunakan font tertentu Contoh : <font size=”12”>Html 5 dan CSS 3 </font> Keterangan : Akan membentuk kalimat dengan ukuran size 12px. Untuk font, apakah ukuran dan type serta lainnya, dapat menggunakan CSS.

e. Syntax : <pre> Fungsi : Untuk menuliskan kalimat seperti yang tertera di antara syntax tsb, tanpa ada penambahan word wrap. <pre> di sebut pre formatted text. Contoh : <pre> Saya akan menonton pertandingan Sepak Bola antara Persija ISL dengan Persiba di GBK </pre> Keterangan : Akan membentuk kalimat di atas, seperti format di atas tsb, yaitu ada spasi nya dan terbentuk 2 baris.

f. Syntax : <hr> Fungsi : Untuk membentuk garis

Media (Image, Video dan Audio)a. Image Syntax : <img src=”gambar.jpg” width=”100” height=”100” alt=”Gambar Rumah” /> Fungsi : Untuk menampilkan image.

Attribut : alt : Menampilkan text, jika browser tidak mendukung untuk menampilkan image. height : Menentukan tinggi image width : Menentukan lebar image src : Lokasi file image

b. Audio Syntax : <audio src=”musik.mp3”></audio> Fungsi : Untuk memasang audio di website. Keterangan : Di perkenalkan oleh HTML 5. Kalimat di antara <audio></audio> akan muncul jika browser tidak mendukung html 5. Attribut : src : Lokasi file audio.video Syntax : <video src=”video.ogg”></video> Fungsi : Untuk memasang video di website Keterangan : Di perkenalkan oleh HTML 5. Kalimat di antara <audio></audio> akan muncul jika browser tidak mendukung html 5. Atribut : src : Lokasi file video. Width : Menentukan lebar video Height : Menentukan tinggi video

Pertemuan VCSS (1)

A.Perkenalan

CSS (Cascading Style Sheet) adalah script untuk membuat tampilan sebuah website menjadi menarik dan indah. Untuk menggunakan CSS, musti sudah mengenal html/xhtml terlebih dahulu, karena css di terapkan terhadap html. Html berfungsi untuk menampilkan isi sebuah halaman web (tulisan, border, tabel, frame,dll), sedangkan CSS berfungsi untuk memperindah atau memberikan gaya/Style terhadap isi halaman web tersebut. Contoh : Jika anda menulis sebuah paragraf, maka anda menggunakan html, namun jika anda ingin agar tulisan di paragraf tsb berwarna biru, italic dengan font Helvetica, maka dapat menggunakan CSS. Dalam hal ini, dapat juga menggunakan attribut pada elemen html, namun di sarankan agar kita menggunakan CSS, karena ada banyak feature lain yang html belum menyediakan untuk memperindah tampilan web, sedangkan CSS sudah menggunakan nya dan keunggulan CSS di banding html dalam hal memperindah halaman web, seperti dapat code lebih pendek, karena berlaku untuk semua elemen html. CSS versi terakhir adalah CSS3, yang draft nya sudah di publikasikan pada tahun 1999. Browser terbaru, baik itu dari Mozilla, Safari dan Opera, masih ada yang belum sepenuh nya mendukung CSS3, terutama Internet Explorer. B. Keuntungan dan kerugian penggunaan CSS 1. Keuntungan a. Menghemat waktu dan kode CSS dapat di gunakan di banyak elemen html, di banding jika menggunakan attribute dari elemen html, yang harus di tulis di setiap elemen.

b. Web dapat di load lebih cepat Karena dapat mempersingkat kode, maka akan berpengaruh dengan halaman web yang dapat di load lebih cepat.

c. Mudah dalam perawatan Syntax CSS dapat di kumpulkan menjadi 1 file, yang berekstensi .css, oleh karena itu

mempermudah dalam perawatan.

d. Lebih powerful dari html dalam hal memberikan style CSS memang di rancang khusus untuk dapat di gunakan pada html yang berfungsi memperindah html. 2. Kerugian a. Browser Compatibility Masing-masing browser memiliki dukungan yang berbeda terhadap feature-feature CSS, terutama CSS3. IE, terutama IE6 di kenal memiliki dukungan yang lemah dan berbeda dengan browser-browser lain. Oleh karena itu, sering di jumpai sebuah web dapat tampil bagus di sebuah browser tertentu, namun tampil kurang bagus di browser yang lain nya.

C. Memulai menulis CSS Rumus CSS selector {property : value ;}

Contoh : h1 { color : red ; } h1 → selector color → Property value → value

D. Grouping selectorContoh : h1,h2,h3,h4 {color : red ; }Keterangan : color red, di terapkan pada h1,h2,h3 dan h4.

E. Penerapan Multiple propertiesContoh : h1 { color : #E97D7D; font-family : arial; }

F. Penerapan CSSCSS dapat di terapkan dengan 4 cara yang berbeda, yaitu :

1. Inline CSS Di tuliskan CSS pada elemen html nya. Contoh : <h1 style=”color:blue; font-size:15px;”> Belajar CSS </h1> 2. Embedded CSS Di letakkan di antara tag <head></head>

Contoh :<head> < style type=”text/css” media=screen> p {color : #E97D7D;} </style> </head> <body><p> Belajar Html dan CSS memang mengasyikkan</p>

3. External CSS Membuat file CSS menjadi sebuah file tersendiri dan file yang menggunakan CSS me link file CSS tsb. <link rel=”stylesheet” src=”utama.css” screen=”media”>

id dan classid → Di gunakan di dalam elemen html yang akan di beri style dan juga dapat menggunakan div. Pada css, id di tandai dengan # Rumus : - #id-name { property : value ; } - #html-element-name#id-name { property : value ; }

Contoh : <!DOCTYPE html><html><head> <title>CSS-Font1</title> <style> #judul { text-align:center;

color:#F45959;font-weight:light; text-decoration:underline;

text-transform : capitalize; } #kalimat { text-align:left; font-size : italic 20px arial; color : #3A3A95; } </style></head><body> <h1 id="judul"> Belajar HTML dan CSS itu mengasyikkan lho ...... </h1> <div id="kalimat"> Nama saya Budiman, saya senang sekali belajar html dan css, karena dengan itu saya dapat mendesign halaman web. Saya ingin menjadi seorang web designer handal. </div> </body> </html>

class → Di gunakan di dalam elemen html yang akan di beri style. Pada css, id di tandai dengan # Rumus : .class-name { property : value ; } html-element-name.class-name { property : value;} Di html di

Contoh :

<!DOCTYPE html><html><head> <title>CSS-Font1</title> <style> .judul { text-align:center;

color:#F45959;font-weight:light; text-decoration:underline;

text-transform : capitalize; } .kalimat { text-align:left; font-size : italic 20px arial; color : #3A3A95; } </style></head><body> <h1 class="judul"> Belajar HTML dan CSS itu mengasyikkan lho ...... </h1> <div class="kalimat"> Nama saya Budiman, saya senang sekali belajar html dan css, karena dengan itu saya dapat mendesign halaman web. Saya ingin menjadi seorang web designer handal. </div> </body> </html>

Kapan menggunakan id dan class ?Anda menggunakan class, ketika style di terapkan beberapa kali pada halaman yang sama. Contoh, menerapkan <p> dengan style yang sama.

Menggunakan id, jika hanya 1 element di sebuah halaman yang menerapkan hal tsb. Atau butuh id unik untuk sebuah bagian dengan menggunakan id pada tag <div>. Id juga dapat di manfaatkan pada javascript.

Feature-feature CSS 1. Texta. color Fungsi : Untuk memberi warna text Value : (warna)

Contoh :<p style=”color : blue”>belajar CSS</p>

b. text-align Fungsi : Untuk memberi text align Value : (center | left | right | justify )

Contoh :<p style=”text-align:right”>Belajar CSS</p>

c. text-decoration Fungsi : Untuk memberi text decoration kepada sebuah text Value : (overline | underline | line-through | blink ) overline : garis di atas text underline : garis di bawah text line-through : garis mencoret text blink : text kelap-kelip

Contoh : <p style=”text-decoration : underline”>Belajar HTML dan CSS </p>

d. text-transform Fungsi : Untuk mengubah kapitalisasi text. Value : (uppercase | lowercase | capitalize ) uppercase : Merubah text menjadi Huruf besar semua lowercase : Merubah text menjadi huruf kecil semua capitalize : Merubah menjadi huruf besar pada awal setiap text Contoh : <p style=”text-transform:uppercase;”>Belajar HTML dan CSS </p> Output : BELAJAR HTML DAN CSS

e. text-shadow Fungsi : Memberikan bayangan kepada text Value : Ukuran tiap sisi text untuk di beri shadow text-shadow : baris kolom bayangan warna Contoh : <p style=”text-shadow:1px 2px 2px blue;”> Belajar HTML dan CSS </p> 2. Font a. font-family Fungsi : Untuk memilih jenis font value : Tipe font, seperti : arial, georgia dan serif Contoh : <p style=”font-family:arial;”>Belajar HTML dan CSS</p>

b. font-size Fungsi : Untuk menentukan ukuran font

value : ukuran font, bisa dalam px atau em | xx-small | x-small | small | medium | large | x-large | xx-large Contoh : <p style=”font-size : 15px;”>Belajar HTML dan CSS </p>

c. font-style Fungsi : Untuk memberikan style kepada text value : italic | bold | normal | oblique | inherit Contoh : <p style=”font-size : bold;”>Belajar HTML dan CSS </p>

d. font-variant Fungsi : Untuk memberikan huruf besar dengan ukuran kecil / small-caps value : small-caps Contoh : <p style=”font-variant :small-caps;”>belajar HTML dan CSS </p>

e. font-weight Fungsi : Untuk menjadikan text menjadi lebih tebal atau lebih cerah value : normal | bold | bolder | lighter | Contoh : <p style=”font-weight : bold;”>Belajar HTML dan CSS </p>

g. Dapat juga di singkat, untuk penggunaan beberapa feature : Contoh : <p style="font :bold italic small-caps 40px arial ; color : red ;"> Belajar HTML dan CSS itu mengasyikkan lho ...... </p>

Pertemuan VICSS (2)

1. Background Seperti nama nya, background adalah feature css untuk mengatur background, apakah berupa image atau warna. Beberapa feature background adalah :

a. background-image Fungsi : Untuk menempatkan image sebagai background value : url (url_image); Contoh : <p style="background-image:url(algoritma.JPG); color :#F1F128">

Pakai Background Image buku Algoritma </p> b. background-position Fungsi : Untuk menentukan posisi background value : top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right | x-% y-% | Contoh : <p style="background-image:url(algoritma.JPG); background-position : center left;">

Pakai Background Image buku Algoritma </p>

c. background-color Fungsi : Untuk menentukan warna background value : color | transparent Contoh : <p style=”background-color : blue”> Menggunakan Background di CSS </p> d. background-size Fungsi : Untuk mengatur ukuran background value : length | % | auto | cover | contain Contoh : <p style=”background-size : auto”> Menggunakan Background di CSS </p>

e. background-repeat Fungsi : Untuk menjadikan perulangan atau tidak suatu image. Value : repeat | repeat-x | repeat – y | no-repeat Contoh : <p style=”background-repeat : no-repeat”> Menggunakan Background di CSS </p>

f. background Fungsi : Untuk menyingkat penggunaan feature dan value nya.

2. Border a. border-color Fungsi : Untuk memberi warna border value : color Contoh : <div style="border-color:red; border-style:solid;">

Belajar CSS dan HTML </div>

b. border-style Fungsi : Untuk memilih jenis border Value : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset Contoh : <div style="border-style:solid;">


c. border-bottom-style Fungsi : Untuk memilih jenis border bottom Value : border-style Contoh : <div style="border-bottom-style:solid;">


d. border-bottom-color Fungsi : Memberi warna border-bottom Value : border-color Contoh : <div style=”border-bottom-style : solid; border-bottom-color:blue; ”> Belajar CSS dan HTML </div>

e. border-bottom-width Fungsi : Memberi warna border-bottom Value : thin | medium | thick | length Contoh : <div style=”border-bottom-width : solid; border-bottom-color:blue; ”> Belajar CSS dan HTML </div>

f. border-bottom Fungsi : menyingkat feature border-bottom value : border-bottom-width border-style border-color Contoh : <div style=”border-bottom-width : solid; border-bottom-color:blue; ”> Belajar CSS dan HTML </div>

g. border-left-style Fungsi : Untuk memilih jenis border left Value : border-style Contoh : <div style="border-left-style:solid;">


h. border-left-color Fungsi : Memberi warna border-left Value : border-color Contoh : <div style=”border-left-style : solid; border-left-color:blue; ”> Belajar CSS dan HTML </div>

i. border-left-width Fungsi : Menentukan ketebalan garis border-left Value : thin | medium | thick | length Contoh : <div style=”border-left-width : solid; border-left-color:blue; ”> Belajar CSS dan HTML </div> j. border-left Fungsi : menyingkat feature border-left value : border-left-width border-style border-color Contoh : <div style=”border-left-width : solid; border-left-color:blue; ”> Belajar CSS dan HTML </div>

k. border-right-style Fungsi : Untuk memilih jenis border right Value : border-style Contoh : <div style="border-right-style:solid;">


l. border-right-color Fungsi : Memberi warna border-right Value : border-color Contoh : <div style=”border-right-style : solid; border-right-color:blue; ”> Belajar CSS dan HTML </div>

m. border-right-width Fungsi : Menentukan ketebalan garis border-left Value : thin | medium | thick | length Contoh : <div style=”border-right-width : solid; border-right-color:blue; ”> Belajar CSS dan HTML </div>

n. border-right Fungsi : menyingkat feature border-right value : border-right-width border-style border-color Contoh : <div style=”border-bottom-width : solid; border-right-color:blue; ”> Belajar CSS dan HTML </div>

o. border-top-style Fungsi : Untuk memilih jenis border top Value : border-style Contoh : <div style="border-top-style:solid;">


p. border-top-color Fungsi : Memberi warna border-top Value : border-color Contoh : <div style=”border-top-style : solid; border-top-color:blue; ”> Belajar CSS dan HTML </div>

m. border-top-width Fungsi : Menentukan ketebalan garis border-top Value : thin | medium | thick | length Contoh : <div style=”border-top-width : solid; border-top-color:blue; ”> Belajar CSS dan HTML </div>

q. border-top Fungsi : Menyingkat feature border-top value : border-top-width border-style border-color Contoh : <div style=”border-top-width : solid; border-top-color:blue; ”> Belajar CSS dan HTML </div>

r. box-shadow Fungsi : Membuat box dengan shadow value : inset || [length,length,length,length || <color>] none Contoh : <div style=”box-shadow : 2px 2px 10px 10px red;”> Belajar CSS dan HTML </div>

3. Positioning Feature untuk memposisikan elemen html.

a. position Fungsi : Untuk menyatakan tipe posisi. Feature ini harus di ikuti dengan feature left/top/right

Value : static → Posisi static relative → Posisi di hitung dari posisi awal absolute → Posisi dari ukuran lebar dan tinggi yang di setting fixed → Membetulkan posisi sebuah elemen ke sebuah titik halaman, tidak berhubungan dengan hal scrolling. Contoh : <div style=”position : relative; left :20px; top :10px”> Belajar CSS dan HTML itu menyenangkan </div> Keterangan : Posisi text akan di pindah ke kiri sebesar 20px dan tambah 10px dari top.

b. left Fungsi : Untuk memindahkan posisi dari sebelah kiri Value : auto | % | length Contoh : (sama dengan feature position)

c. left Fungsi : Untuk memindahkan posisi dari sebelah kiri Value : auto | % | length Contoh : (sama dengan feature position)

d. right Fungsi : Untuk memindahkan posisi dari sebelah kanan value : auto | % | length Contoh : <div style=”position : relative; right :20px; top :10px”> Belajar CSS dan HTML itu menyenangkan </div> e. top Fungsi : Untuk memindahkan posisi dari sebelah atas value : auto | % | length Contoh : <div style=”position : relative; right :20px; top :10px”> Belajar CSS dan HTML itu menyenangkan </div> f. z-index Fungsi : Untuk stack, apakah sebuah komponen di depan atau di belakang komponen lain. Value : auto | number

Contoh : <style> #depan { border:1px solid; background-color:#ECAFAF; width:200px; height : 200px; position :relative; left :125px; top :100px; z-index:2; } #belakang { border:1px solid; background-color:#ADD8E6; width:200px; height : 200px; position :relative; left :185px; top :-10px; z-index:1; } </style> </head> <body> <div id="depan"> Kotak ini Letak nya di depan </div> <div id="belakang"> Kotak ini Letak nya di belakang </div> </body>

Pertemuan VIICSS (3)

Pseudo class 1. :active Fungsi : Menunjuk elemen yang aktif

2. :visited Fungsi : visited link

3. :hover Fungsi : Elemen yang mouse melewati di atas nya

4. :link Fungsi : Link yang belum di kunjungi Contoh : a { font : arial } a:link { color : green; } a:visited { color : blue; } a:hover { text-decoration:none; color : red; font-weight : bold;} a:active { color : blue; text-decoration : underline; } a:hover, harus di tempatkan setelah a:link dan a:visited, karena cascading rules akan menyembunyikan efek dari a:hover rule . a:active harus di tempatkan setelah a:hover, karena warna aktif akan di terapkan ketika user akan menjalankan a:active dan a:hover pada elemen anchor.

UnitsAbsolute Measurement% : Percentagecm : centimeterin : inchmm : milimeterpt : point (1pt = 1/72 inch)pc : pica (1pc = 12 point)

Relative measurementem : 1em = current px : pixel dari layar

Colorscolor name : red, blue, green, dark greenrgb (x,y,z) : red = rgb (255,0,0)

Selector TypesUniversal : element apa saja Contoh : * { font : 12px arial;}

Type : element tertentucontoh : h2 { color : red ; text-decoration : underline; }

Grouping : Sejumlah elemen yang di grouping

Contoh : h1,h2,h3 { color : red;}

Class : Sejumlah Element yang berbeda tipe. Contoh : .warna { color : red; font-weight : bold;}

UI1. appearance Value : normal | inherit | window

2. cursor value : auto | crosshair | default | pointer | move | e-resize | text | wait

3. icon value : auto | inherit

Contoh Design 1 :<!DOCTYPE html> <html> <head> <title>Design 1</title> <style> .tengah_submit { text-align: center; } .table_login { width:350px; height:200px; border:1px solid #4F29D9; margin:auto; } </style> </head> <body> <table class="table_login"> <caption>FORM LOGIN</caption> <tr> <td>Username</td><td>:</td> <td><input type="text" name="vusername" size="20" /></td> </tr> <tr> <td>Password</td><td>:</td> <td><input type="password" name="vpassword" size="20" /></td> </tr>

<tr> <td colspan="3" class="tengah_submit"> <input type="submit" value="OK" /> <input type="reset" value="Reset" /> </td> </tr> </table> </body> Contoh Design 2 :

<!DOCTYPE html> <html> <head> <title>Design 1</title> <style> .tengah_submit { text-align: center; } table { width:400px; height:130px; border:1px solid #4F29D9; margin:auto; background-color:#ADD8E6; margin-top: 40px; } caption { background-color:#FFC0CB; border-right:1px solid; border-left:1px solid;

</html>

Output :

border-top:1px solid; }

body { background-color:#DCEBF0; } .text_style { font :14px arial; } .tombol { background-color:#EAC975; } .tombol:hover { background-color:#4D4D4D; cursor:pointer; color:#DC2F2F; } </style> </head> <body> <table> <caption>FORM LOGIN</caption> <tr> <td class="text_style">Username</td><td>:</td><td><input type="text" name="vusername" size="20" /></td> </tr> <tr> <td class="text_style">Password</td><td>:</td><td><input type="password" name="vpassword" size="20" /></td> </tr> <tr> <td colspan="3" class="tengah_submit"> <input type="submit" value="OK" class="tombol" /> <input type="reset" value="Reset" class="tombol"/> </td> </tr> </table> </body> </html>

Output :

PERTEMUAN IXMembuat Menu

Membuat Menu Menu di dalam sebuah website atau aplikasi adalah hal yang penting. Fungsi menu adalah untuk navigasi sebuah modul tertentu aplikasi. Berikut di tampilkan cara-cara pembuatan menu dan penjelasan yang di anggap perlu.

1. menu 1

Langkah-langkah nya : 1. Buat list menu di file html. Setiap menu, di mulai dengan pembuatan list. File html nya : <!DOCTYPE html> <html> <head> <title>Menu 1</title> <link rel="stylesheet" href="menu1.css" /> </head> <body> <div id="menuku"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Modul dan Source Code</a></li> <li><a href="#">Tugas dan Jawaban</a></li> <li><a href="#">Nilai</a></li> <li><a href="#">About</a></li> </ul> </div> </body> </html>

2. Buat CSS nya, sbb :

/* Id menuku, Membuat garis di atas menu, berwarna merah */ #menuku { border-top:2px solid red; }

/* Id menuku ul, Meletakkan menu */ #menuku ul { position:relative; top:-15px; left:-36px; }

/* Id menuku ul li, style untuk pilihan menu/ li display : inline, memungkinkan daftar menu di tampilkan ke samping */ #menuku ul li { display:inline; float:left; border:1px solid #999999; padding:5px 0px 5px 0px; background-color:#CCCCCC; font-size:15px; font-family: sans-serif; margin:0; }

/* Style untuk link */ #menuku ul li a:link { text-decoration: none; padding:5px; } /* Style untuk hover pada link */ #menuku ul li a:hover { color:#FFFF33; background-color:#336666; }

Output :

2. Membuat Menu 2

Langkah-langkah nya : 1. Buat html nya : <!doctype html"> <html> <head> <title>39</title> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <div id="menucase"> <div id="stylefour"> <ul> <li><a href="http://www.free-css.com/" class="current">CSS Templates</a></li> <li><a href="http://www.free-css.com/">CSS Layouts</a></li> <li><a href="http://www.free-css.com/">CSS Books</a></li> <li><a href="http://www.free-css.com/">CSS Menus</a></li>

<li><a href="http://www.free-css.com/">CSS Tutorials</a></li> <li><a href="http://www.free-css.com/">CSS Reference</a></li> <li><a rel="nofollow" target="_blank" href="http://www.13styles.com" title="13styles.com">13styles</a></li> </ul> </div> </div> </body> </html>

2. Buat CSS nya Tulis css dan beri nama file styles.css

h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; margin:0; padding:0;

}

hr { border:none; border-top:1px solid #CCCCCC; height:1px; margin-bottom:25px; }

#stylefour{ position:relative; display:block; height:39px; font-size:11px; font-weight:bold;

/* Image Background dengan repeat-x */background:transparent url(bgOFF.gif) repeat-x top left; font-family:Arial,Verdana,Helvitica,sans-serif; border-top:4px solid #B30000; }

#stylefour ul{ margin:0; padding:0; list-style-type:none; /* Menghilangkan noktah di li */width:auto; }

#stylefour ul li {

display:inline; /* Meletakkan li menyamping */float:left; margin:0;

}

#stylefour ul li a{ display:block; float:left; color:#666; text-decoration:none; padding:11px 20px 0 20px; height:23px;

/* Background berupa image garis */background:transparent url(bgDIVIDER.gif) no-repeat top right; }

/* Style untuk hover dan class a.current#stylefour ul li a:hover,#stylefour ul li a.current {

color:#B30000; background:#fff ; }

Output nya :

3. Membuat Menu dengan drow down

Terkadang kita membutuhkan menu dengan drop down, yaitu menu yang ada sub menu nya lagi di link tertentu dan sub menu tersebut akan muncul saat kita meng hover pointer mouse di link menu tertentu.

Langkah-langkah membuat nya :1. Buat html <!doctype html> <html> <head> <title>Menu Drop Down</title> <link rel="stylesheet" href="menu_drop_down.css" /> </head> <body> <ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a> <ul> <li><a href="">The Team</a></li> <li><a href="">History</a></li> <li><a href="">Vision</a></li> </ul> </li> <li><a href="">Products</a> <ul> <li><a href="">Cozy Couch</a></li>

<li><a href="">Great Table</a></li> <li><a href="">Small Chair</a></li> <li><a href="">Shiny Shelf</a></li> <li><a href="">Invisible Nothing</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Online</a></li> <li><a href="">Right Here</a></li> <li><a href="">Somewhere Else</a></li> </ul> </li> </ul> </body> </html>

Keterangan : Untuk membuat drop down, di butuhkan menulis <li> di bawah <li>. Jadi, di bawah <li> ada <li> kembali.

2. Tuliskan css nya ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; }

ul li { display: block; position: relative; float: left; /* Float ke kiri */ } li ul { display: none; } /* style pada ul sub menu */

ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; }

ul li a:hover { background: #617F8A; }

li:hover ul /* Hover pada ul sub menu */ { display: block; position: absolute; }

li:hover li /* Hover pada li sub menu */ { float: none; font-size: 11px; } li:hover a { background: #617F8A; } li:hover li a:hover { background: #95A9B1; }

Output :

PERTEMUAN X dan PERTEMUAN XIMembuat Template Website

Sebuah Template di bentuk oleh html dan css dan terkadang grafis. Pada kesempatan kali ini, kita akan mencoba untuk membuat template sebuah website dan akan menjadi 2 pertemuan untuk membahas dan mempraktekan pembuatan template ini. Template yang akan kita buat adalah salah satu template dari situs www.freecsstemplates.org, yang bernama variant color.Gambar template sbb :

Langkah-langkah pembuatan sbb :1. Mengetahui bagian dari template. Template di atas terdiri dari bagian : a. Header. Terdiri dari menu dan title atau logo b. Menu utama. Yang terletak di sebelah kanan, yang ada judul “Welcome to variant

color”. c. Sidebar. Yang terletak di sebelah kiri. Yang di atas nya ada tulisan : “Search Here” d. Footer. Bagian bawah template yang ada wana hitam nya. Footer untuk menuliskan foot

note,seperti copyright.

http://www.freecsstemplates.org/

2. Menulis kode html nya. a. Tulis struktur dasar kode html, yaitu tag html,head,title dan body, berikut tag penutup nya. b. Tulis content masing-masing bagian, sebagai contoh, logo dengan kalimat variant color dan ada kalimat tag di bawah nya. Logo juga dapat berupa image. c. Insert class dan div pada html di atas. class dan div juga dapat di lakukan bersamaan dengan langkah (b). d. Tulis css nya.

Script html nya <!DOCTYPE html> <html> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Web Design and Programming</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="menu-wrapper"> <div id="menu"> <ul>

<li class="current_page_item"><a href="#">Homepage</a></li> <li><a href="#">Blog</a></li>

<li><a href="#">Photos</a></li> <li><a href="#">About</a></li> <li><a href="#">Links</a></li> <li><a href="#">Contact</a></li>

</ul> </div>  </div> <div id="header-wrapper"> <div id="header"> <div id="logo"> <h1><a href="#">Web development class </a></h1> <p>Diligent, Smart, Enthusiast and Creative</p> </div> </div> </div> <div id="wrapper">

<div id="page"> <div id="content"> <div class="post"> <h2 class="title"><a href="#">Welcome to Our Class </a></h2>

<p class="meta"><span class="date">March 15, 2012</span><span class="posted">Posted by <a href="#">Someone</a></span></p>

<div style="clear: both;"> </div> <div class="entry"> <p>Apaan aja yang penting ke baca. Html dan css wow, keren banget ya ... siip lah oh iya

php dan java script juga keren tuch. Ane mau terus belajar gituan gan, biar jadi web developer jago.

</p> <p class="links"><a href="#">Read More</a> | <a href="#">Comments</a></p> </div> </div> <div class="post"> <h2 class="title"><a href="#">Studying html and css</a></h2>

<p class="meta"><span class="date">March 13, 2012</span><span class="posted">Posted by <a href="#">Someone</a></span></p> <div style="clear: both;"> </div> <div class="entry"> <p>Studying html and css is so interesting, because it learn about how to design website page including website template. I want to master html and css, so i can design a website very nice and i also want to very good in web programming, so javascript and php are i have to learn too. </p> <p class="links"><a href="#">Read More</a> | <a href="#">Comments</a></p> </div> </div> <div style="clear: both;"> </div> </div>  <div id="sidebar"> <ul> <li> <h2>Search Here:</h2> <div id="search" > <form method="get" action="#"> <div>

<input type="text" name="s" id="search-text" value="" /> <input type="submit" id="search-submit" value="" />

</div> </form> </div> <div style="clear: both;"> </div> </li> <li>

<h2>Tools</h2> <p>Below are tools that i want to master to become world class web developer.</p>

</li>

<li> <h2>Categories</h2> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Java Script</a></li> <li><a href="#">Mysql</a></li> <li><a href="#">GIMP</a></li> </ul> </li> <li> <h2>Blogroll</h2> <ul> <li><a href="#">Aliquam libero</a></li> <li><a href="#">Consectetuer adipiscing elit</a></li> <li><a href="#">Metus aliquam pellentesque</a></li> <li><a href="#">Suspendisse iaculis mauris</a></li> <li><a href="#">Urnanet non molestie semper</a></li> <li><a href="#">Proin gravida orci porttitor</a></li> </ul> </li> </ul> </div>  <div style="clear: both;"> </div> </div>  </div> <div id="footer"> <p>Copyright (c) 2012 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> </div>  </body> </html>

CSS nya :

/* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */

body { margin: 0;

padding: 0; background: #FFFFFF;

font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #3B3B3B;

} h1, h2, h3 {

margin: 0px; padding: 0px; letter-spacing: -2px; text-transform: uppercase; font-family: 'Coda', cursive; font-weight: normal; color: #3B3B3B;

}

h1 { font-size: 2em; }

h2 { font-size: 2.4em;

}

h3 { font-size: 1.6em;

}

p, ul, ol { margin-top: 0; line-height: 180%;

}

ul, ol { }

a { text-decoration: none; color: #E74E37;

}

a:hover { }

/* Header */

#header-wrapper { background: #ACD7E0; border-bottom: 5px solid #87B4BE;

}

#header { clear: both; width: 1000px; margin: 0px auto;

}

/* Logo */

#logo { margin: 0px; padding: 30px 0px; color: #000000;

}

#logo h1, #logo p { margin: 0; padding: 0;

}

#logo h1 { margin: 0px; padding: 0px; text-transform: lowercase; font-size: 3.8em; color: #589DAC;

}

#logo p { margin: 0px; padding: 0px; text-transform: uppercase; font-family: 'Coda', cursive; color: #3B3B3B;

}

#logo p a { color: #3B3B3B; }

#logo a { border: none; background: none; text-decoration: none; color: #589DAC;

}

/* Search */

#search { width: 320px; height: 60px; padding: 0px;

}

#search form { margin: 0px; padding: 0px;

}

#search fieldset { margin: 0; padding: 0; border: none;

}

#search-text { width: 250px; outline: none; background: #F5F0E7; border: 1px solid #D7D0C0; padding: 10px; text-transform: lowercase; font: normal 14px Arial, Helvetica, sans-serif; color: #454545;

}

#search-submit { width: 62px; height: 22px; display: none; border: none; color: #FFFFFF;

}

/* Menu */

#menu-wrapper { overflow: hidden; height: 55px; background: url(images/img01.gif) repeat-x left top;

}

#menu { width: 1000px; height: 55px; margin: 0px auto; padding: 0px;

}

#menu ul { margin: 0; padding: 0px; list-style: none; line-height: normal;

}

#menu li { float: left; border-right: 1px solid #FFBAAD;

}

#menu a { display: block; letter-spacing: 1px; line-height: 55px; padding: 0px 30px; text-decoration: none; text-align: center; text-transform: uppercase; font-family: 'Coda', cursive; font-size: 12px; font-weight: normal; color: #3B3B3B; border: none;

}

#menu a:hover, #menu .current_page_item a { background: url(images/img02.gif) repeat-x left top; text-decoration: none; color: #FFFFFF;

}

#menu .current_page_item a { }

/* Page */

#page { overflow: hidden; width: 1000px; margin: 0px auto; padding: 30px 0px;

}

/* Content */

#content { float: right; width: 600px;

}

.post { margin-bottom: 15px;

}

.post-bgtop { }

.post-bgbtm { }

.post .title { height: 38px; margin-bottom: 10px;

padding: 12px 0 0 0px; }

.post .title a { border: none; color: #E74E37;

}

.post .meta { margin-bottom: 30px; padding: 5px 0px 15px 0px; text-align: left; font-weight: normal;

}

.post .meta .date { float: left;

}

.post .meta .posted { float: right;

}

.post .meta a { }

.post .entry { padding: 0px 0px 20px 0px; text-align: justify;

}

.links { height: 30px; padding: 30px 0px 0px 0px; font-size: 14px; font-weight: normal; color: #1C1C1C;

}

/* Sidebar */

#sidebar { float: left; width: 340px; margin: 0px; padding: 30px 0px 0px 0px; color: #787878;

}

#sidebar ul { margin: 0; padding: 0;

list-style: none; }

#sidebar li { margin: 0; padding: 0;

}

#sidebar li ul { margin: 0px 0px; padding-bottom: 50px;

}

#sidebar li li { border-bottom: 1px dashed #D4D18B; margin: 0px 0px; padding: 5px 0px; border-left: none;

}

#sidebar li li a { color: #3B3B3B;

}

#sidebar li li span { display: block; padding: 0; font-size: 11px; font-style: italic;

}

#sidebar h2 { padding-bottom: 20px; font-size: 1.8em; color: #E74E37;

}

#sidebar p { margin: 0px 0px 40px 0px; padding: 0px; text-align: justify;

}

#sidebar a { border: none;

}

#sidebar a:hover { text-decoration: underline;

}

/* Footer */

#footer { height: 50px; margin: 0 auto; padding: 0px 0 15px 0; background: #2F3739; font-family: Arial, Helvetica, sans-serif;

}

#footer p { margin: 0; padding-top: 20px; line-height: normal; font-size: 10px; text-transform: uppercase; text-align: center; color: #A0A0A0;

}

#footer a { color: #8A8A8A;

}

PERTEMUAN XIIPHP (1)

Pengenalan PHP, pemisahan template dan struktur aplikasi Blog

Pengenalan PHP PHP (PHP:Hypertext Preprocessor) adalah sebuah bahasa pemrograman yang umum di gunakan untuk pengembangan web yang di jalankan dalam sebuah browser dan di terjemahkan oleh Web Server. Web Server adalah sebuah perangkat keras atau perangkat lunak yang menyediakan layanan akses kepada pengguna melalui protokol komunikasi HTTP atau HTTPS atas file-file yang terdapat pada suatu situs web.

PHP di dalam penggunaan nya untuk pembuatan web, juga bekerja sama dengan html,css dan javascript serta database dalam proses pembuatan nya, yang peran PHP sendiri adalah untuk pemrograman di sisi server, yaitu pemrograman yang di ekseskusi script nya oleh web server, sementara untuk design, di gunakan html,css,java script dan grafis.

Menggunakan PHP Untuk menggunakan PHP, kita perlu menginstall Web Server dengan feature dapat mengakses PHP. Beberapa Web Server yang di gunakan oleh PHP, yaitu : Apache, IIS,Xitami dan Nginx. Untuk menggunakan database, kita dapat menggunakan sejumlah database yang dapat bekerja sama dengan PHP, beberapa di antara nya adalah : MySQL,Postgre SQL dan SQL Server. Kita juga dapat menggunakan software bundle instalasi PHP dan lingkungan nya, yaitu Xampp, yang di dalam nya langsung terinstall dan terkonfigurasi apache, mysql , proftpd , phpmyadmin,dll.

Pada modul ini, kita akan membahas PHP, terutama yang berhubungan dengan script html dan CSS pada bab 1 - 4.

Syntax dasar Contoh :1. Mencetak kata Hello World

<?php echo “Hello World”;?>

2. Mencetak kata Hello World di dalam halaman web <!doctype html> <html> <head>

<title>PHP Pertama ku</title> </head> <body>

<?php echo “Hello World”; </body> </html>

VariabelVariabel di dalam php di awali dengan tanda “$”. Beberapa syarat penulisan variabel di dalam PHP, yaitu :a. Di awali oleh sebuah huruf atau under score , di ikuti oleh huruf atau nomor.b. Tidak mengandung spasi.c. Dapat langsung di beri nilai.

Contoh :$nama=”Akhmad Sofwan”;

Direktori Dokumen Direktori Dokumen, karena kita menggunakan Lampp adalah /opt/lampp/htdocs.

Kita meletakkan file php di dalam direktori ini. Template yang kita buat pada bab X dan XI, juga di letakkan di folder ini. Cukup dengan merubah ekstensi file dari .html menjadi .php, dari index.html menjadi index.php.

Memotong file template Template terdiri dari header, side, content dan footer. Tujuan kita membelah template adalah untuk

memudahkan di dalam pembuatan aplikasi, sehingga di tiap tiap file php, kita cukup memasukkan file header.php, sidebar.php dan footer.php di dalam file content yang isi nya berbeda-beda, dengan perintah include, contoh : <?php include (“header.php”); ?>

header.php

Kita potong file index.php menjadi header.php, dari awal file hingga remark 

 <!DOCTYPE html> <html> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Web Design and Programming</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="menu-wrapper">

<div id="menu"> <ul>

<li class="current_page_item"><a href="#">Homepage</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Photos</a></li> <li><a href="#">About</a></li> <li><a href="#">Links</a></li> <li><a href="#">Contact</a></li>

</ul> </div> 

</div> <div id="header-wrapper">

<div id="header"> <div id="logo">

<h1><a href="#">Web development class </a></h1> <p>Diligent, Smart, Enthusiast and Creative</p>

</div> </div>

</div> 

sidebar.php File index.php di potong dari <div id=”sidebar”> hingga comment <- end #sidebar -->

<div id="sidebar"> <ul> <li> <h2>Search Here:</h2>

<div id="search" > <form method="get" action="#"> <div> <input type="text" name="s" id="search-text" value="" /> <input type="submit" id="search-submit" value="" /> </div> </form> </div> <div style="clear: both;"> </div>

</li> <li>

<h2>Tools</h2> <p>Below are tools that i want to master to become world class web developer.</p>

</li> <li> <h2>Categories</h2> <ul> <li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Java Script</a></li> <li><a href="#">Mysql</a></li> <li><a href="#">GIMP</a></li>

</ul> </li> <li> <h2>Blogroll</h2> <ul>

<li><a href="#">Aliquam libero</a></li> <li><a href="#">Consectetuer adipiscing elit</a></li> <li><a href="#">Metus aliquam pellentesque</a></li> <li><a href="#">Suspendisse iaculis mauris</a></li> <li><a href="#">Urnanet non molestie semper</a></li> <li><a href="#">Proin gravida orci porttitor</a></li>

</ul> </li>

</ul> </div> <div style="clear: both;"> </div> </div>

 </div>

<- end #sidebar --> content.php

Di potong dari index.php dari <div id=”page”> hingga sebelum <div id=”footer”>

<div id="page"> <div id="content"> <div class="post"> <h2 class="title"><a href="#">Welcome to Our Class </a></h2>


<div style="clear: both;"> </div> <div class="entry"> <p>Apaan aja yang penting ke baca. Html dan css wow, keren banget ya ... siip lah oh iya


</p> <p class="links"><a href="#">Read More</a>    |

    <a href="#">Comments</a></p> </div> </div> <div class="post"> <h2 class="title"><a href="#">Studying html and css</a></h2> <p class="meta"><span class="date">March 13, 2012</span><span

class="posted">Posted by <a href="#">Someone</a></span></p> <div style="clear: both;"> </div> <div class="entry"> <p>Studying html and css is so interesting, because it learn about how to design website

page including website template. I want to master html and css, so i can design a website very nice and i also want to very good in web programming, so javascript and php are i have to learn too.


    <a href="#">Comments</a></p> </div> </div>

<div style="clear: both;"> </div> </div>

Footer.php Di potong dari <div id=”footer”> hingga ke bawah.

<div id="footer"> <p>Copyright (c) 2012 Sitename.com. All rights reserved. Design by <a

href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> </div>  </body> </html>

File yang sering di ubah-ubah dan menjadi nama file yang berbeda, adalah content.php. Untuk membentuk hingga menjadi template yang utuh, kita perlu memasukkan file header.php, sidebar.php dan footer.php ke dalam content.php, seperti berikut :

<?php include("header.php"); ?> <div id="page">

<div id="content"> <div class="post">

<h2 class="title"><a href="#">Welcome to Our Class </a></h2> <p class="meta"><span class="date">March 15, 2012</span><span class="posted">Posted

by <a href="#">Someone</a></span></p> <div style="clear: both;"> </div> <div class="entry"> <p>Apaan aja yang penting ke baca. Html dan css wow, keren banget ya ... siip lah oh iya



    <a href="#">Comments</a></p> </div> </div> <div class="post"> <h2 class="title"><a href="#">Studying html and css</a></h2>


<div style="clear: both;"> </div> <div class="entry"> <p>Studying html and css is so interesting, because it learn about how to design website

page including website template. I want to master html and css, so i can design a website very nice and i also want to very good in web programming, so javascript and php are i have to learn too.


    <a href="#">Comments</a></p> </div>

</div> <div style="clear: both;"> </div> </div>

 <?php include("sidebar.php"); ?> <?php include("footer.php"); ?> Membuat Blog Kita sudah punya template yang sudah di potong-potong menjadi sejumlah file, header.php,

sidebar.php,content.php dan footer.php. Template tersebut kita hendak pergunakan untuk membuat Blog, sesuai dengan bentuk template yang sudah kita buat itu.

Struktur Blog

Keterangan :1. Content : Berisi modul tulisan blog. a. Comment : Berisi comment dari content.2. Sidebar : Menu di samping blog. a. Categories : Daftar categories pada sidebar. b. Blogroll : Daftar Blogroll / List 3. About me : Profil mengenai diri.

Struktur Panel Admin

Blog

About meSidebarContent

CommentCategories Blogroll

Admin

Categories

Entry Display

Home Blogroll

Entry Display

Content

Entry

Display

Edit Delete Edit Delete

Edit Delete

LogoutVerifikasi Comment

Keterangan :1. Panel Admin memiliki 5 menu, yaitu : Home, Categories, Blogroll, Logout dan Content. 2. Modul categories dapat melakukan : Entry, Display, Edit dan Delete.3. Modul Blogroll dapat melakukan : Entry, Display, Edit dan Delete.

4. Modul Content dapat melakukan : Entry, Display, Edit dan Delete.

Pertemuan XIII PHP (2)

Modifikasi Template, Struktur Tabel dan Database serta Pengolahan Data 1.Modifikasi Template Untuk membuat aplikasi Sistem Blog, kita dapat memodifikasi template yang kita buat sebelum

nya, sehingga menjadi template yang kita butuhkan. Hal-hal yang perlu di modifikasi adalah :- Header. Dengan memodif menu dan logo.- Sidebar. Dengan menambah daftar menu atau tampilan yang di perlukan.- Footer. Dengan merubah text pada footer, sehingga sesuai dengan keinginan kita.

Template yang kita pergunakan pada kali ini, juga dapat di gunakan untuk membuat aplikasi yang berbeda, dengan memodifikasi bagian-bagian yang perlu di modif, terutama jika bentuk dasar template sama, namun jika bentuk dasar template berbeda atau banyak yang di ubah, maka patut di pikirkan untuk membuat template baru yang berbeda, karena usaha yang di perlukan untuk memodif cukup besar, sehingga tidak berbeda jauh dengan membuat baru dari awal.

2. Modifikasi Header Kita perlu menu dengan Drop Down, oleh karena itu, menu yang sudah di buat kita perlu replace.Pada header.php. Modif lah dengan langkah-langkah sbb :

a. Gantilah menu nya dengan script html sbb :<div id="menunya">

<ul> <li><a href="">Home</a></li> <li><a href="">Contact me</a></li> </ul> </div>

b Taruhlah link css nya di header.php, di antara <head></head>. <link href="css/menu_drop_down.css" rel="stylesheet" type="text/css" media="screen" />

c. Isi dari menu_drop_down.css adalah sbb :

#menunya { width:1000px; background:#33CCFF; margin:auto; } #menunya ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; }

#menunya ul li{ display: block; position: relative; float: left; }

#menunya li ul { display: none; }

#menunya ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; }

#menunya ul li a:hover { background: #617F8A; }

#menunya li:hover ul { display: block; position: absolute; top:35px; left:0px; }

#menunya li:hover li { float: none; font-size: 11px; }

#menunya li:hover a { background: #617F8A; } #menunya li:hover li a:hover { background: #95A9B1; } /*Hover di menu dan sub menu */

Title dan text header juga dapat di ubah dengan mudah.

3. Modifikasi footer Modifikasi footer.php, mudah saja, yaitu dengan mengubah teks nya.

Untuk modifikasi sidebar.php dan content.php, kedua file tersebut berhubungan dengan isi database, oleh karena ini modifikasi kedua file ini kita skip terlebih dahulu. Untuk content.php, file ini sering berbeda-beda, tergantung isi file yang kita akses. 4. Requirement Blog

Requirement Blog adalah kemampuan blog sesuai dengan keinginan dan harapan kita. Requirement Blog nya adalah sbb :

a. Blog dapat login ke administrator, dengan memasukkan username dan password. b. Kategori dan Blogroll dapat di tampilkan secara terbatas, max 6 buah di sidebar.

c. User dapat mengisi comment pada tiap-tiap content. Sebelum comment di tampilkan di Blog, comment perlu di moderasi oleh admin di panel administrator.

5. Design Tabel Tabel yang di gunakan adalah :

Nama Database : blogNama Tabel : blogroll

No Field Type Keterangan

1 Id Int (4) PK

2 nama_url Varchar (30)

3 link_url Varchar (40) Nama Tabel : comment


1 id Int (4) PK

2 id_kategori Int (4) FK (Tabel Kategori)

3 nama Varchar (20)

4 email Varchar (20)

5 pesan Varchar (200)

6 Konfirmasi Varchar (1)

Nama Tabel : content


1 id Int (4) PK

2 header_content Varchar (200)

3 content Varchar (600)

4 kategori Varchar (30)

5 tanggal Varchar (20)

Nama Tabel : kategoriNo Field Type Keterangan

1 id int (4) PK

2 kategori varchar (4)

3 link varchar (100) Database yang di pergunakan adalah Mysql dan kita dapat menggunakan phpmyadmin untuk

membuat database dan tabel.

6. Pemrograman Database dengan PHP

a. Koneksi DatabaseMySql mendukung banyak Database, seperti :- dBase- FireBird- PostgreSQL- MySQL

Kita menggunakan Mysql pada kali ini sebagai database yang di hubungkan dengan Mysql. Jika anda menggunakan Xampp, maka MySQL akan di masukkan secara default, sebagai database yang di dukung, di lengkapi dengan PHPMyadmin, yaitu software management Mysql.

b.Menghubungkan MysqlUntuk menghubungkan Mysql dengan dari script PHP, pertama-tama kita harus mengetahui terlebih dahulu nama server, username dan password dari Mysql yang kita pergunakan. Untuk server, default nya adalah localhost, username adalah root, sebagai username tertinggi yang memiliki hak akses tertinggi.

Contoh :server : localhostusername : rootpassword : apaantuchnama database : mhs

c. Syntax-Syntax :i. Syntax : mysql_connect(“server”,”username”,”password”); Fungsi : Menghubungkan database Contoh : mysql_connect(“localhost”,”root”,”apaantuch”);

ii. Syntax : mysql_select_db(“nama_database”); Fungsi : Menggunakan database tertentu. Contoh : mysql_select_db(“mhs”);

iii. Syntax : mysql_query(“query”); Fungsi : Menjalankan query Contoh : mysql_query(“select * from mahasiswa”);

iv. Syntax : mysql_num_rows(“query_yang_dijalankan”); Fungsi : Menghitung jumlah record yang di hasilkan dari perintah select Contoh : $hasil=mysql_query(“select * from mahasiswa”); $jumlah=mysql_num_rows($hasil);

v. Syntax : mysql_affected_rows() Fungsi : Untuk menghitung jumlah record yang berubah dari query delete, update, insert atau

update Contoh : $hasil=mysql_query(“delete * from mahasiswa where nim='1110100105' ”); $jumlah=mysql_affected_rows();

7. Pengolahan Data Pengolahan Data dalam hal ini adalah entry, update dan edit categories, blogroll dan Content, yang

di lakukan di Administrator Room, dan entrian nya dapat di tampilkan di Blog. Untuk mengolah data di Administrator room, kita perlu membuat template Administrator room terlebih dahulu termasuk menu di dalam nya. Untuk template ini, tidak penulis tampilkan di sini source code nya, karena pembuatan nya hampir sama dengan pembuatan template blog yang sudah di jelaskan pada pertemuan X,XI dan XII. Anda dapat membuat template yang di gunakan di Blog ataupun membuat template sendiri yang baru dan berbeda dengan yang di Blog untuk Administrator Room ini.

a. Entry Kategori. i. Membuat Form. Membuat tampilan form, nama file entry_kategori.php. <?php include ("header_admin.php");?> <table> <form method="post" action="simpan_kategori.php"> <tr> <td>Kategori</td><td>:</td><td><input type="text" name="vkategori" size="30" /></td> </tr> <tr> <td>Link</td><td>:</td><td><input type="text" name="vlink" size="90" /></td> </tr> <tr> <td colspan="3"><input type="submit" value="OK" /> <input type="reset" value="Reset" /> </td> </tr> </form> </table> </div> <?php include ("footer_admin.php");?>

ii. Membuat file simpan_kategori.php, yaitu file untuk menyimpan data yang di input kan ke tabel kategori. Langkah-langkah nya sbb : a. Buat file konfigurasi database, dengan nama db.php. <?php $hubung=mysql_connect("localhost","root","opansan"); if (!$hubung) { die ("Tidak terhubung ke Mysql"); } else {

$hubung_db=mysql_select_db("blog"); if (! $hubung_db) { die("Tidak terhubung ke Database"); } }

b. Buat file simpan_kategori.php, yaitu file untuk menyimpan data entryan, dengan menggunakan file db.php di atas. <?php // Menggunakan file db.php include ("db.php"); // Menangkap inputan dari form $xkategori=$_POST["vkategori"]; // SQL untuk insert ke table $query_insert="insert into kategori (kategori) values ('$xkategori')"; // Running SQL di atas $hasil_insert=mysql_query("$query_insert"); // Jika insert berhasil di lakukan if ($hasil_insert) { // Cetak kalimat echo "Data berhasil di insert"; } else { // Cetak Kalimat echo "Data gagal di insert"; } ?>

PERTEMUAN XIV PHP (3)

Tampil dan Edit Data

Pada pertemuan XIII, kita sempat membahas entry data, kali ini kita akan membahas tampil, edit dan hapus data, untuk data yang di entry dan akan mengolah data di modul kategori.

1.Tampil data kategori di panel Administrator Algoritma tampil data : a. Include file koneksi db b. Membuat tabel untuk menampilkan data c. Query tampil data di tabel kategori dan ekseskusi query d. Menampilkan hasil query dengan while

Untuk algoritma di atas, dapat di tuliskan source code sbb : Nama file : display_kategori.php Folder : blog/admin/kategori

<?php include ("../header_admin.php");?> <?php include ("../db.php");?> <table border='1'> <tr> <th>No</th><th>Kategori</th><th>Link</th><th>Option</th> </tr> <?php

$query_tampil_kategori="select * from kategori order by id"; $hasil_tampil_kategori=mysql_query("$query_tampil_kategori");

$no=1; while ($row = mysql_fetch_array($hasil_tampil_kategori,MYSQL_ASSOC)) { echo "<tr>";

echo "<td>$no</td>"; echo "<td>$row[kategori]</td>"; echo "<td>$row[link]</td>"; ?> <td><a href='http://localhost/blog/admin/kategori/tampil_edit_kategori.php'>Edit</a> |

Delete </td>

<?php echo "</tr>"; $no++;

} ?>

</table> </div> <?php include ("../footer_admin.php");?>

Output :

Gambar XIV.1 Tampil Kategori

2. Edit data kategori Jika di klik edit, pada tampilan kategories, maka akan muncul form edit, yang berisi data-data

kategori yang berdasarkan id edit dan siap untuk di edit. Tampilan form edit kategori sama dengan tampilan entry, namun text input nya sudah berisi data, jika memang mengandung data. Tampilan edit sbb :

Gambar XIV.2 Form edit Kategori

Algoritma tampil data : a. Include file koneksi db b. Menangkap variabel id dengan perintah $xid=$_GET['id']; c. Query tampil data di tabel kategori dan filter id. d. Menampilkan form update kategori yang sama dengan entri kategori, namun memiliki value yang berasal dari query di point c di atas. e. Jika tombol OK di tekan, maka akan mengirimkan variabel di form tsb yang berisi data ke file update_kategori.php. File update_kategori.php di taruh di

Source code form edit adalah sbb : <?php // Meload file header/header_admin.php include ("../header_admin.php");

// Meload file konfigurasi database / db.php include ("../db.php");

if (isset($_GET['id'])) { $xid=$_GET['id']; }

// Menampilkan query kategori berdasarkan id $query_cari="select * from kategori where id='$xid'"; // Eksekusi query $hasil_cari=mysql_query($query_cari); // Menangkap hasil query $row=mysql_fetch_array($hasil_cari); ?> <table> <form method="post" action="update_kategori.php"> <tr> <td>Kategori</td><td>:</td> <td><input type="text" name="vkategori" size="30" value="<?php echo $row['kategori'];?>"/> </td> </tr> <tr> <td>Link</td><td>:</td><td><input type="text" name="vlink" size="90" value="<?php echo $row['link'];?>"/> </td> </tr> <tr> <input type="hidden" name="vid" size="90" value="<?php echo $xid;?>"/> <td colspan="3"><input type="submit" value="OK" /> <input type="reset" value="Reset" /></td> </tr> </form> </table> </div>

// Meload file footer / footer_admin.php <?php include ("../footer_admin.php");?> Jika tombol OK di form atas di update, maka akan menjalankan file untuk mengupdate perubahan

data . File yang bertugas untuk mengupdate adalah update_kategori.php, seperti yang di tuliskan di form (<form method="post" action="update_kategori.php"> ).Algoritma dan source code dari update_kategori.php adalah :a. Load konfigurasi database/db.phpb. Menangkap variabel dari form c. Menjalankan query updated. Jika berhasil atau gagal di update, tampilkan pesan untuk masing-masing kondisi update.

<?php // Loading db.php include ("../db.php"); // Menangkap variabel dari form edit $xkategori=$_POST["vkategori"]; $xlink=$_POST["vlink"]; $xid=$_POST["vid"]; // Query Update $query_update="update kategori set kategori='$xkategori',link='$xlink' where id='$xid'"; $hasil_update=mysql_query("$query_update");

if ($hasil_insert) { echo "Data berhasil di update"; } else { echo "Data gagal di update"; } ?>

PERTEMUAN XVDelete Data, Menampilkan Data di Blog dan membuat form user friendly

1. Delete data kategori

Gambar XV.1 Tampil data kategori

Pada gambar di atas, terdapat link delete. Link tsb akan menghapus record yang di pilih, jika di klik.Source code tampilan di atas ada di pertemuan XIV. Jika link delete di klik, maka akan menjalankan file untuk menghapus data pada record tsb, yang file tsb bernama delete_kategori.php. Algoritma dan source code delete_kategori.php adalah sbb :a. Loading file db.phpb. Jika ada data dari variabel id, maka buat variabel $xid untuk menampung variabel id tsb.c. Jalankan query deleted. Jika berhasil atau gagal, maka tampilkan pesan, sesuai dengan kondisi nya (berhasil atau gagal).

<?php include ("../db.php"); if (isset($_GET['id'])) { $xid=$_GET['id']; } $query_delete="delete from kategori where id='$xid'"; $hasil_delete=mysql_query("$query_delete"); if ($hasil_delete) { echo "Data berhasil di delete"; } else { echo "Data gagal di delete"; } ?>

2. Menampilkan data kategori di Blog Data yang sudah di input di panel Administrator, maka akan di tampilkan pada blog. Sampai saat ini, kita sudah mengolah data untuk tabel kategori, yang data kategori di tampilkan di bagian samping kiri dari blog. Untuk modul Blogroll, penanganan nya juga sama dengan Kategori, baik untuk input, delete dan edit data. Kita akan menaruh script php untuk menampilkan data kategori. Script php untuk tampil kategori di file sidebar.php adalah sbb : <h2>Categories</h2> <ul> <?php $query_tampil_kategori="select * from kategori order by id"; $hasil_tampil_kategori=mysql_query("$query_tampil_kategori"); while ($row = mysql_fetch_array($hasil_tampil_kategori,MYSQL_ASSOC)) {

echo "<li>$row[kategori] </li>"; } ?> </ul>

3. Membuat form entry content yang user friendly Dunia Web Development berkembang pesat, termasuk ke dalam teknik pembuatan form yang tidak hanya agar dapat berfungsi untuk menampung data entrian, namun juga memperhatikan unsur keindahan dan user friendly nya. Berikut adalah pembuatan form entry content dengan menggunakan fckeditor dan plugin Javascript Framework Jquery, datepicker. Fckeditor adalah plugin javascript yang dapat kita gunakan untuk membuat text editor dengan feature-feature pengolahan kata, seperti Aplikasi Word, anda dapat mendownload file nya dan mencari tahu lebih lanjut informasi Ckeditor di di www.ckeditor.com. Jquery adalah sebuah framework Javascript dan juga memiliki UI yang daapt langsung di pergunakan oleh web developer. Untuk memproleh file jquery dan jqueryui, serta mendapatkan informasi lebih lanjut, anda dapat mengakses situs nya di www.jquery.com dan www.jqueryui.com.

Gambar XV.2 : Penggunaan Ckeditor

http://www.jqueryui.com/

http://www.jquery.com/

4. Instalasi dan pemakaian Ckeditor Langkah-langkah Instalasi.a. Download file ckeditor di www.ckeditor.com/download. File berbentuk file compress.b. Extract file tsb, yang hasil extract nya berbentuk folder dan taruh di direcori utama dari aplikasi anda, misal : /opt/lampp/htdocs/blog.c. Pada file header admin (header_admin.php), letakkan tag javascript untuk mengakses file javascript Ckeditor, misal : <script type="text/javascript" src="http://localhost/blog/ckeditor/ckeditor.js"></script>d. Terdapat beberapa penggunaan Ckeditor, pada kali ini kita menggunakan Ckeditor pada elemen textarea di html. Load class ckeditor di textarea tsb. Misal :<textarea class="ckeditor" name="vcontent" rows="6" cols="35"></textarea>e. Ckeditor siap di gunakan.

5. Instalasi dan pemakaian Plugin Datepicker dari JqueryUIa. Download jquery dari situs www.jquery.com. b. Download jqueryui dari situs www.jqueryui.comc. Download jqueryui custom css nya di bagian demo dari situs www.jqueryui.comd. Load javascript dan css nya di bagian header admin (file : header_admin.php) Misal : <link rel="stylesheet" href="http://localhost/blog/admin/css/jquery-ui-1.8.19.custom.css" /> <script type="text/javascript" src="http://localhost/blog/javascript/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://localhost/blog/javascript/jquery-ui-.8.19.custom.min.js"> </script>e. Pada file entry content (Mis :entry_content.php), tuliskan script Javascript berikut, untuk meload class datepicker pada sebuah element input text di html. <script type="text/javascript"> $(document).ready(function() { $('#id_tanggal').datepicker(); }); </script> f. Pada element input text tanggal, beri id='id_tanggal' agar input text dapat me load class datepicker. Misal : <input type="text" name="vtanggal" id="id_tanggal" />7. Datepicker sudah berfungsi.

Gambar XV.3 : Penggunaan Datepicker dari jqueryui

http://localhost/blog/javascript/jquery-ui-.8.19.custom.min.js



http://www.jquery.com/

http://www.ckeditor.com/download

6.Penutup

Demikianlah materi pemrograman II. Namun pembuatan Blog yang menjadi contoh dari materi ini belumlah jadi, karena keterbatasan pertemuan, yang hanya di batasi 14 pertemuan saja. Namun, materi yang ada ini, sedikit banyak sudaah memberikan pengetahuan kepada mahasiswa mengenai html,css dan php dan mengintegrasikan ketiga script tsb ke dalam pembuatan sebuah aplikasi sederhana. Di dalam materi ini juga sudah tercakup konsep dan contoh pembuatan CRUD (Create-Read-Update-Delete) dengan menggunakan Database Mysql.

7. Referensi - Free Web master Tutorials, www.quackit.com, (Februari, 2012) - Free CSS Templates, www.Freecsstemplates.org (April,2012) - Free CSS Menu, www.free-css.com (April, 2012)

http://www.free-css.com/

http://www.Freecsstemplates.org/

http://www.quackit.com/

Modul Kuliah CSS dan HTML

Documents

Transcript of Modul Kuliah CSS dan HTML