Your SlideShare is downloading. ×
MODUL   PEMROGRAMAN   WEB                                    Disusun untuk pelatihan workshop                             ...
DAFTAR ISIBab I : Pengenalan                3Bab II: Instalasi                 9Bab III: HTML                     19Bab IV...
BAB I                                      PENGENALANA.INTERNET1.Pengertian Internet       Internet dapat diartikan sebaga...
mengirimkan e-mail dari Royal Signals and Radar Establishment di Malvern. Setahunkemudian, sudah lebih dari 100 komputer y...
Secara umum ada banyak manfaat yang dapat diperoleh apabila seseorangmempunyaiakses ke internet .Berikut ini sebagian dari...
c. Addres Bar. Ini adalah kontak dibagian atas jendela browser anda yang menampilkan      seluruh URL atau alamat situs.  ...
Notepad + + adalah editor kode sumber pengganti dan Notepad gratis yangmendukung beberapa bahasa. Berjalan di lingkungan M...
melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitasbrowser, maupun perkiraan waktu download h...
BAB II                                      INSTALASIA. NOTEPAD  Untuk Notepad kita tidak perlu melakukan instalasi lagi, ...
Disini akan ada pemilihan tempat penginstalan, biasanya c:program filesNotepad ++, jikaanda ingin memilih menginstal ditem...
C. DREAMWEAVERKlik dabel pada file Dreamweaver8-en.exe dan tunggu beberapa saaat maka prosesinstalasi akan dimulai.Tekan N...
Pada layar selanjutnya kita akan diberikan pilihan tempat penginstalan c:program filesdereamweaver, kemudian pilih next> u...
Ketika telah selesai, tekan Finish. Ketika memulai Menggunakan Dreamweaver maka akanada pilihan untuk menggunakan Full den...
bingung ataupun komputer Anda lambat karena banyaknya memori komputer yangterpakai.Jendela berikutnya yang muncul adalah p...
   Create a XAMPP dekstop icon --> akan menampilkan icon XAMPP di halaman dekstop        komputer Anda       Create an A...
Proses intalasi sedang berjalan, tunggu sampai selesai. Sebagai catatan, gambar yang sayapakai adalah XAMPP versi 1.7.0, t...
Instalasi awal selesai, tekan tombol Finish. Tunggu langkah selanjutnya.    Setelah selesai maka aka nada keluar jendela p...
Setelah Instalasi selesai, maka kita akan dihadapkan pilihan untuk memulai Xampp controlpanel, pada layar ini kita akan me...
BAB III                                         HTML    HTML (Hyper Text Markup Language) adalah standar bahasa yang digun...
Catatan :         Tag <!....> menyatakan komentar, isi teks di dalamnya tidak akan diproses dan    dapat diletakkan di man...
4. Checkbox    5. Submit, tombol yang digunakan untuk mengirimkan data yang di inputkanPembuatan form dimulai dengan mengg...
Daftar Tag Pada HTMLTag            Deskripsi fungsiBasic<!DOCTYPE>     Mendefinisikan tipe dokumen<html>         Mendefini...
Images<img />        Mendefinisikan sebuah gambar<map>          Mendefinisikan gambar map<area />       Mendefinisikan are...
BAB IV                               CSS (Cascading Style Sheets)    Pengertian         Cascading Style Sheets (CSS) merup...
font-family:"Times New Roman";font-size:20px;}Styles Dapat Menyelesaikan Permasalahan Yang BesarHTML tidak dibuat untuk me...
Setiap deklarasi akan berisi property and a value. property adalah atribut dari style yang inginkamu ubah. Dan setiap atri...
Selektor id menggunakan atribut "id" pada HTML, dan didefinisikan dengan tanda "#" padaCSS.ContohHTML : <div id="header">P...
mengedit 1 file css saja.setiap halaman harus memberi link ke file css dengan menggunakan tag<link>. Didalam tag <link> ma...
Margin dan padding merupakan hal yang mirip tetapi berbeda. Fugsi nya sama-sama untuk             memberi jarak darisatu e...
Berikut tabel lengkap tentang selektor pada CSS.       Selector                Example               Example description  ...
    Dimension                 Margin                         Table        Font                      Padding          ...
border-style          Sets the style of the four borders                                    1border-top            Sets al...
list-style-type    Specifies the type of list-item marker                              1Margin PropertiesProperty         ...
Sets the minimum number of lines that must be left at the bottom oforphans                                                ...
Make Your Personal Website!   Untuk membuat sebuah website personal yang sederhana pertama kamu mesti paham dulukonsep dar...
</html>    Penjelasan : href="webstyle.css" adalah nama file css yang kita gunakan.2. Selanjutnya pada bagian body, bagi h...
Gambar: template web personal dengan css4. Kemudian beri tulisan pada file HTML kamu   <div id="header"><h2>WEB Personal<h...
</table>      </form>   </div>6. Percantik header dengan menambahkan koding berikut yang bertujuan mengubah format h2 yang...
BAB V                                       DATABASE    A. Pendahuluan               1.1Database        Database / basis d...
   Memiliki sistem sekuriti yang cukup baik dengan verifikasi host, username ,        password.               1.4Instalas...
   Menggunakan Browser (GUI)               a. Menggunakan Command Prompt (Console)Salah satu cara menjalankan program mys...
Terlihat beberapa database pada mysql.    5. Untuk keluar dari mysql bisa menggunakan Perintah exit atau q.               ...
Pada browser lebih mudah untuk mengakses database dan lain-lainnya. Disan juga        terlihat database apa saja yang ada ...
    Menggunakan Database.         Menghapus Database.         Membuat Tabel.         Melihat Struktur Tabel.         ...
6.       Alter table nama_tabel change               Mengganti nama filed         nama_field_lama nama_field_baru         ...
where=kondisi;    b. QuerySelect digunakan untuk menampilkan data pada table dalam database kita. Penggunaanperintah selec...
_       : Menyatakansuatu karakter tunggal.Standart ISO mendefenisikan lima fungsi agregat, yaitu :COUNT : mengirim jumlah...
BAB VI                                          PHP6.1 Dasar-Dasar Pemrograman PHP6.1.1 Aturan Penulisan Skrip PHP        ...
5. Menulis tag HTML dengan PHP  6. Setiap statement php diakhiri dengan tanda ( ;) petik koma.6.1.2 Variabel dan Tipe Data...
Dalam php terdapat tipe data dasar yaitu:    1. Integer, untuk data yang berisi angka. Data tersebut dapat digunakan untuk...
=         Mengisi nilai yang ada di           $data = 10 + 2;                            sebelah kanan operator           ...
sebelah kanan lebih kecil dari atau                                sama dengan yang di sebelah kiri, selain               ...
a. IF        IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat. Carapenulisannya adalah sebagai berik...
Statement SWITCH digunakan untuk membandingkan suatu variabel denganbeberapa nilai serta menjalankan statement tertentu ji...
ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statemantekspresi3 menunjukkan pertambahan nilai untuk...
Fungsi ini berguna untuk memilih atau mengaktifkan database, seperti dalamprogram klien mysql pakai USE . format penulisan...
Keterangan :        mysql_connect(hostname, username, password);         Untuk melakukan koneksi ke server database MySQL...
6.2.4 Redirect (Pengalihan Halaman)        Redirect (pengalihan halaman) adalah teknik untuk mengalihkan alamat atau halam...
59 | P a g e
Upcoming SlideShare
Loading in...5
×

Modul pemrograman web

3,605

Published on

ini adalah E-buk pemograman web yang telah diselesaikan bersma-sama, Arita handriko, Fauzi azis, khairi lestari, novrenia angraini dan R.syahroni

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,605
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
552
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Modul pemrograman web"

  1. 1. MODUL PEMROGRAMAN WEB Disusun untuk pelatihan workshop pemrograman web Oleh: Aritha Handrico, Fauzi Aziz, Khairi Lestari, Novreni Anggraini, R. Sahroni. Pekanbaru, 21 Mei 2011Teknik Informatika UIN SUSKA RIAU
  2. 2. DAFTAR ISIBab I : Pengenalan 3Bab II: Instalasi 9Bab III: HTML 19Bab IV: CSS 24Bab V : Database 39Bab VI: PHP 482|Page
  3. 3. BAB I PENGENALANA.INTERNET1.Pengertian Internet Internet dapat diartikan sebagai jaringan komputer luas dan besar yang mendunia,yaitu menghubungkan pemakai komputer dari suatu negara ke negara lain di seluruhdunia, dimana di dalamnya terdapat berbagai sumber daya informasi dari mulai yang statishingga yang dinamis dan interaktif.2. Sejarah internet Berikut sejarah kemunculan dan perkembangan internet. Sejarah intenet dimulaipada 1969 ketika Departemen Pertahanan Amerika, U.S. Defense Advanced ResearchProjects gency(DARPA) memutuskan untuk mengadakan riset tentang bagaimana caranyamenghubungkan sejumlah computer sehingga membentuk jaringan organik. Program risetini dikenal dengan nama ARPANET. Pada 1970, sudah lebih dari 10 komputer yang berhasildihubungkan satu sama lain sehingga mereka bisa saling berkomunikasi dan membentuksebuah jaringan. Tahun 1972, Roy Tomlinson berhasil menyempurnakan program e-mail yang iaciptakan setahun yang lalu untuk ARPANET. Program e-mail ini begitu mudah sehinggalangsung menjadi populer. Pada tahun yang sama, icon @juga diperkenalkan sebagailambing penting yang menunjukkan "at" atau "pada". Tahun 1973, jaringan komputerARPANET mulai dikembangkan ke luar Amerika Serikat. Komputer University College diLondon merupakan komputer pertama yang ada di luar Amerika yang menjadi anggotajaringan Arpanet. Pada tahun yang sama, dua orang ahli komputer yakni Vinton Cerf danBob Kahn mempresentasikan pebuah gagasan yang lebih besar, yang menjadi cikal bakalpemikiran internet. Ide ini dipresentasikan untuk pertama kalinya di Universitas Sussex.Hari bersejarah berikutnya adalah tanggal 26 Maret 1976, ketika Ratu Inggris berhasil3|Page
  4. 4. mengirimkan e-mail dari Royal Signals and Radar Establishment di Malvern. Setahunkemudian, sudah lebih dari 100 komputer yang bergabung di ARPANET membentuksebuah jaringan atau network. Pada 1979, Tom Truscott, Jim Ellis dan Steve Bellovin,menciptakan newsgroups pertama yang diberi nama USENET. Tahun 1981 France Telecommenciptakan gebrakan dengan meluncurkan telpon televisi pertama, dimana orang bisasaling menelpon sambil berhubungan dengan video link. Karena komputer yangmembentuk jaringan semakin hari semakin banyak, maka dibutuhkan sebuah protokolresmi yang diakui oleh semua jaringan. Pada tahun 1982 dibentuk Transmission ControlProtocol atau TCP dan Internet Protokol atau IP yang kita kenal semua. Sementara itu diEropa muncul jaringan komputer tandingan yang dikenal dengan Eunet, yang menyediakanjasa jaringan komputer di negara-negara Belanda, Inggris, Denmark dan Swedia. JaringanEunet menyediakan jasa e-mail dan newsgroup USENET.Untuk enyeragamkan alamat dijaringan komputer yang ada, maka pada tahun 1984 diperkenalkan sistem nama domain,yang kini kita kenal dengan DNS atau Domain Name System. Komputer yang tersambungdengan jaringan yang ada sudah melebihi 1000 komputer lebih. Pada 1987 jumlahkomputer yang tersambung ke jaringan melonjak 10 kali lipat manjadi 10.000 lebih. Tahun 1988, Jarko Oikarinen dari Finland menemukan dan sekaligusmemperkenalkan IRC atau Internet Relay Chat. Setahun kemudian, jumlah komputer yangsaling berhubungan kembali melonjak 10 kali lipat dalam setahun. Tak kurang dari100.000 komputer kini membentuk sebuah jaringan. Tahun 1990 adalah tahun yang palingbersejarah, ketika Tim Berners Lee menemukan program editor dan browser yang biasmenjelajah antara satu komputer dengan komputer yang lainnya, yang membentukjaringan itu. Program inilah yang disebut www, atau Worl Wide Web. Tahun 1992,komputer yang saling tersambung membentuk jaringan sudah melampaui sejuta komputer,dan di tahun yang sama muncul stilah surfing the internet. Tahun 1994, situs internet telahtumbuh menjadi 3000 alamat halaman, dan untuk pertama kalinya virtual-shopping atau e-retail muncul di internet. Dunia langsung berubah. Di tahun yang sama Yahoo! didirikan,yang juga sekaligus kelahiran Netscape Navigator 1.0.3. Manfaat internet4|Page
  5. 5. Secara umum ada banyak manfaat yang dapat diperoleh apabila seseorangmempunyaiakses ke internet .Berikut ini sebagian dari apa yang tersedia di internet:1. Informasi untuk kehidupan pribadi :kesehatan, rekreasi, hobby, pengembangan pribadi, rohani, sosial.2. Informasi untuk kehidupan profesional/pekerja :sains, teknologi, perdagangan, saham, komoditas, berita bisnis, asosiasi profesi, asosiasi bisnis, berbagai forum komunikasi. Satu hal yang paling menarik ialah keanggotaan internet tidak mengenal batas negara, ras, kelas ekonomi, ideologi atau faktor faktor lain yang biasanya dapat menghambat pertukaran pikiran. Internet adalah suatu komunitas dunia yang sifatnya sangat demokratis serta memiliki kode etik yang dihormati segenap anggotanya. Manfaat internet terutama diperoleh melalui kerjasama antar pribadi atau kelompok tanpamengenal batas jarak dan waktu. Untuk lebih meningkatkan kualitas sumber daya manusia di Indonesia, sudah waktunya para profesional Indonesia memanfaatkan jaringan internet dan menjadi bagian darimasyarakat informasi dunia.B.WEB BROWSER Web browser atau internet browser adalah sebuah aplikasi perangkat lunak untukmelintasi, mengabil dan menyediakan sumber informasi diidentifikasi dengan informresource identify (URI) termasuk sebuah halamn web, gambar atau bagian lain dari kontakweb1. Rincian web browser a. Menu Bar adalah bagian menu-menu yang dimiliki oleh web browser seperti home, edit, view dll b. Status bar. Ini adalah kontak dibagian bawah jendela browser, status bar menampilkan segala informasi tergantung dengan apa yang kita lakukan pada saat menggunakan web browser contohnya seperti kecepatan beban URL dari alamat yang sedang kita buka5|Page
  6. 6. c. Addres Bar. Ini adalah kontak dibagian atas jendela browser anda yang menampilkan seluruh URL atau alamat situs. d. Tittle bar. Bar judul yang berada dibagian paling atas jendela browser dan akan terlihat judul halaman web dibagian ini, misalnya akan terlihak “google” ketika sedang mebuka www.google.com e. Toolbar Ikon. Toolbar dan Ikon perusahaan browser yang ada dibagian atas kanan jendela browser dan dibawah title bar, pada bagian inilah kita akan melihat tombol back, home, refresh dll f. Display Windows. Jendela display hanyalah istilah mewah untuk ruang kerja browser karna ini merupakan frame dimana kita akan melihat halaman website. g. Scroll Bar. Jika ketika kita membuka situs web dan harus melakukan naik turun dengan scoll kebawah atau keatas, maka kita telah menggunakan scroll bar2. Macam-macam web browser a. Microsoft Internet Explorer b. Opera c. Mozila Firefox d. Google chrome e. Mac safari f. DllC. EDITOR1. Notepad Notepad adalah Program bawaan dari Windows yang biasa digunakan untukmenulis keterangan-keterangan yang penting dari program aplikasi seperti halnya lisensiprogram atau yang lainnya pada umumnya orang mengatakan notepad adalah sebuat texteditor standar.2. Notepad ++6|Page
  7. 7. Notepad + + adalah editor kode sumber pengganti dan Notepad gratis yangmendukung beberapa bahasa. Berjalan di lingkungan MS Windows, penggunaannya diaturoleh GPL License. Berdasarkan komponen mengedit kuat Scintilla, Notepad + + ditulisdalam C + + dan menggunakan murni Win32 API dan STL yang menjamin kecepataneksekusi lebih tinggi dan ukuran program yang lebih kecil. Dengan mengoptimalkanrutinitas sebanyak mungkin tanpa kehilangan keramahan pengguna, Notepad + + adalahberusaha untuk mengurangi emisi karbon dioksida dunia. Bila menggunakan power CPUkurang, PC dapat throttle ke bawah dan mengurangi konsumsi daya, sehingga dalamlingkungan yang lebih hijau.3. Macromedia Dreamweaver Macromedia Dreamweaver adalah sebuah HTML editor profesional untukmendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kitamenyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukaibekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweavermambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat bergunadalam peningkatan kemampuan dan pengalaman kita dalam mendesain web. Dreamweaver MX dalam hal ini digunakan untuk web desain.dreamweaver MXmengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, daneditor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kodeJavascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver. TeknologiDreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlumemformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untukmembersihkan dan memformat ulang HTML bila kita menginginkannya. Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yangmemudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat7|Page
  8. 8. melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitasbrowser, maupun perkiraan waktu download halaman web.>D. APLIKASI TAMBAHAN Pemograman internet kali ini kita akan menggunakan aplikasi tambahan yaituXAMPP. Xampp merupakan seingkatan dari X (empat system operasi apapun), Apache,MySQL, PHP, Perl. Xampp merupakan tool yang menyediakan paket peranngkat lunakkedalam sebuah paket. Dalam paketnya sudah terdapat Apache (web server), MySQL(Database), PHP (Server Side Scription), Perl, FTP server, Php MyAdmin dan berbagaipustaka bantuan lainya. Dengan menginstal aplikasi ini maka tidak perlu lagi melakukaninstalasi dan konfigurasi web server Apach, PHP dan MySQL secara manual. XAMPP akanmenginstal dan mengonfigurasi secara Otomatis Untuk Andadilakukan penulis.8|Page
  9. 9. BAB II INSTALASIA. NOTEPAD Untuk Notepad kita tidak perlu melakukan instalasi lagi, karna pada windows telah tersedia ketika kita telah menginstas OS, dan cara membukanya ialah: pilih Start > All Programs > accessories > Notepad maka secara otomatis Notepad akan muncul dilayar anda.B. Notepad ++ Klik dabel pada file .exe Notepad ++ maka proses instalasi akan dimulai. Pilih bahasa Inggris dan tekan Ok Pilih Next> Pilih I Agree9|Page
  10. 10. Disini akan ada pemilihan tempat penginstalan, biasanya c:program filesNotepad ++, jikaanda ingin memilih menginstal ditemat lain silahkan pili browse, ketika telah selesai tekanNext> dan kemudian tekan Install.Maka proses install akan berlangsung, ketika install telah selesai maka tekan finish danotomatis layar Notepad++ akan terbuka.10 | P a g e
  11. 11. C. DREAMWEAVERKlik dabel pada file Dreamweaver8-en.exe dan tunggu beberapa saaat maka prosesinstalasi akan dimulai.Tekan Next> untukmelanjutkan instalasi. Setelah itu beri ceklis pada pilihan “I Accept theterm—“ dan tekan Next untuk melanjutkan istalasi.11 | P a g e
  12. 12. Pada layar selanjutnya kita akan diberikan pilihan tempat penginstalan c:program filesdereamweaver, kemudian pilih next> untuk melanjutkan , pada layar selanjutnya juga pilihNext> untuk melanjukan.Pada Layar ini Tekan Install, maka proses Instalasi akan berjalan hingga selesai,12 | P a g e
  13. 13. Ketika telah selesai, tekan Finish. Ketika memulai Menggunakan Dreamweaver maka akanada pilihan untuk menggunakan Full dengan sarat memasukan serial nuber, jika telahselesai pilih continue untuk melanjutkan menggunakan aplikasi ini.D. XAMPP Cari file Xampp-win32-x.x.x.exe dengan cara mendownload di situs resmi mereka.Sesuai anjuran penyedia XAMPP, untuk pengguna baru disarankan memakai XAMPP basispackage. Disini kita pilih yang .EXE karena ini paket yang paling mudah untuk dinstall,Anda tinggal menjalankan file .EXE tersebut. Setelah menjalankan file xampp-win32-1.7.2.exe, Anda akan dihadapkan denganpilihan bahasa yang Anda pakai. Pilih saja English Langkah kedua akan muncul tampilan meminta menutup semua aplikasi lainsebelum menginstall XAMPP. Anda bisa menurutinya atau tidak juga tidak masalah, asalkantidak terlalu banyak aplikasi komputer yang Anda jalankan, sehingga tidak membuat Anda13 | P a g e
  14. 14. bingung ataupun komputer Anda lambat karena banyaknya memori komputer yangterpakai.Jendela berikutnya yang muncul adalah pemilihan tempat/lokasi file XAMPP. Sayasarankan sesuai default saja di c:xampp. Jangan dimasukkan ke folder "Program Files"("C:Program Files"), dikarenakan akan adanya masalah permission folder.Jendela selanjutnya akan memunculkan setting instalasi. Untuk memudahkan saja, Andacentang semua pilihan sehingga paket yang terinstall nantinya cukup lengkap.14 | P a g e
  15. 15.  Create a XAMPP dekstop icon --> akan menampilkan icon XAMPP di halaman dekstop komputer Anda  Create an Apache Friends XAMPP folder in the start menu --> akan membuat folder XAMPP bisa diakses dari menu start windows Anda  Service section akan menginstall untuk ketiga layanan / service yang dibutuhkan, silakan centang semua.15 | P a g e
  16. 16. Proses intalasi sedang berjalan, tunggu sampai selesai. Sebagai catatan, gambar yang sayapakai adalah XAMPP versi 1.7.0, tetapi pada kenyataannya proses instalasi tidaklah jauhberbeda dikarenakan masih versi yang cukup dekat.16 | P a g e
  17. 17. Instalasi awal selesai, tekan tombol Finish. Tunggu langkah selanjutnya. Setelah selesai maka aka nada keluar jendela pilih untuk membuka Xampp Control Panel dan tekan Yes. Maka akan terbuka layar Control Panel dari Aplikasi Xampp dan aktifkan Apache dan MySql dengan menekan tombol start. Maka aplikasi Xampp telah siap digunakan.17 | P a g e
  18. 18. Setelah Instalasi selesai, maka kita akan dihadapkan pilihan untuk memulai Xampp controlpanel, pada layar ini kita akan mengaktifkan Apache dan MySQL dengan menekan satartpada tombol pilihan, ketika langkah ini telah selesai, maka proses instalasi telah selesai.18 | P a g e
  19. 19. BAB III HTML HTML (Hyper Text Markup Language) adalah standar bahasa yang digunakan untukmenampilkan dokumen web. Dokumen HTML disebut sebagai markup language karenamengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu tekstersebut dalam suatu dokumen dan tanda-tanda atau kode tersebut di kenal dengan TAGtertentu. Dokumen HTML disebut sebagai hypertext, ini berarti suatu dokumen tidak harusdibaca secara berurutan dari atas ke bawah. Dokumen dapat dibaca langsung menuju ketopik tertentu secara langsung dalam dokumen dengan menggunakan teks penghubung. Struktur dokumen HTML Dokumen HTML diawal dengan tag <HTML> dan diakhiri dengan tag </HTML>. Setiapdokumen HTML terdiri dari dua bagian utama yakni:  Bagian kepala, yang diawali dengan tag <HEAD> dan diakhiri dengan tag </HEAD>.Merupakan tempat untuk menuliskan judul halaman web dan script (program kecil).  Bagian badan/isi, yang diawali dengan tag <BODY> dan diakhiri dengan tag</BODY>. Merupakan tempat untuk menuliskan informasi yang akan di tampilkan padabrowser. Berikut ini adalah struktur dari setiap dokumen HTML: <HTML> <HEAD> <! Bagian kepala HTML> <TITLE>tempat untuk menempatkan judul halaman web </TITLE></HEAD><BODY>tempat untuk menuliskan informasi </BODY> </HTML>19 | P a g e
  20. 20. Catatan : Tag <!....> menyatakan komentar, isi teks di dalamnya tidak akan diproses dan dapat diletakkan di mana saja.Atribut pada tagSetiap tag memiliki atribut yang berguna untuk memberi aturan pada tag yang kitagunakan. Misalnya pada tag <table> dapat kita tambah atribut align untuk mementukanapakah tabel berada di tengah (center) di kiri atau dikanan. Contoh : <table align="center">Format teksTeks pada dokumen html dapat di ubah formatnya misalnya menebalkan, memberi garisbawah dan tulisan miring, menggati font, font size, font color dll. Berikut contohpenggunaan tag HTMLnya.contoh <b>teks tebal</b> hasil : teks tebal<i>teks miring</i> hasil : teks miring<u>garis bawah</u> hasil : garis bawah<font face="verdana" color ="red" size="12">merah</font> hasil : merahMembuat tabelUntuk membuat tabel yang perlu diketahui adalah tag <table> <tr> dan <td><table> <tr> <!-- baris pertama --> <td> Kolom 1 </td> <!-- kolom pertama pada baris pertama --> <td> Kolom 2 </td> <!-- kolom kedua pada baris pertama --> </td> <!--akhir dari baris pertama --> <tr> <!-- baris kedua --> <td> nama </td> <!-- kolom pertama pada baris kedua --> <td> alamat </td> <!-- kolom kedua pada baris kedua --> </td> <!--akhir dari baris kedua --></table> <!--akhir dari tabel -->Setiap tag pembuka baik itu <tr> <td> harus ditutup dengan tag penutup </tr> </td>Membuat formUntuk input user biasanya web browser menyediakan sebuah form input yang terdiri dari 1. Input tipe teks, contoh 2. Input tipe radio, contoh 3. Combo box/select list contoh20 | P a g e
  21. 21. 4. Checkbox 5. Submit, tombol yang digunakan untuk mengirimkan data yang di inputkanPembuatan form dimulai dengan menggunakan tag <form action="" method=""> danditutup dengan tag </form>Diantara tag <form> dan </form> disisipkan inputan yang diinginkan lihat contoh berikut. <form action="kirim.php" method=POST> Nama <input type="text" size="24" name="nm"/> <br> <!--input berupa teks--> Jenis kelamin <input type="radio" name="jkel" value="pria"/> Pria <input type="radio" name="jkel" value="wanita"/> Wanita <br> <!--input berupa radio--> Jurusan <select name="jur"> <option> TIF</option> <option> TI</option> <option> TIF</option> </select><br> Aktif <input type="checkbox" value="T"/> Tidak <input type="checkbox" value="Y"/> YA <br><input type="submit" value="simpan"/> </form>Link dan imageUntuk membuat link, kita menggunakan tag anchor <a> dan memberi atribut href untukmemberikan link yang ingin ditulis. Misalnya ingin memberi link ke google.com<a href="google.com">Situs Google </a>Sedangkan untuk membuat gambar kita menggunakan tag <img> dengan memberi atribut srcuntuk source file dari gambar.<img src="buku.png"/>Untuk memberikan link pada gambar. <a href="google.com"> <img src="logo.png"/></a>.Secara default gambar yang diberi link akan memiliki border disekeliling gambar. Untukmenghapuskan border tersebut dapat dengan cara memberikan atribut border dengan nilai 0.<img src="logo.png" border="0"/>.21 | P a g e
  22. 22. Daftar Tag Pada HTMLTag Deskripsi fungsiBasic<!DOCTYPE> Mendefinisikan tipe dokumen<html> Mendefinisikan dokumen HTML<body> Mendefinisikan dokumen body HTML<h1> to <h6> Mendefinisikan heading HTML<p> Mendefinisikan paragraf<br /> Memberikan enter/baris baru<hr /> Mendefinisikan sebuah garis lurus<!--...--> Mendefinisikan KomentarFormatting<b> Mendefinisikan teks tebal<big> Mendefinisikan teks besar<blockquote> Mendefinisikan sebuah kutipan panjang<center> Membuat teks menjadi rata tengah<code> Mendefinisikan sebuah teks kode<font> Mendefinisikan font, color, and size for text<i> Mendefinisikan teks garis miring<q> Mendefinisikan sebuah kutipan pendek<s> Mendefinisikan sebuah teks yang dicoret<samp> Mendefinisikan contoh kode komputer<small> Mendefinisikan sebuah teks kecil<strike> Mendefinisikan sebuah teks yang dicoret<strong> Defines strong text<sub> Mendefinisikan teks dibawah contoh : H2<sup> Mendefinisikan teks diatas contoh : H2<u> Garis bawahForms<form> Mendefinisikan sebuah form HTML untuk inputan user<input /> Mendefinisikan sebuah input<textarea> Mendefinisikan sebuah teks area<button> Mendefinisikan sebuah tombol<select> Mendefinisikan combobox/select list (drop-down list)<optgroup> Mendefinisikan grup option<option> Mendefinisikan pilihan yang tedapat pada combobox (select)<label> Mendefinisikan label pada elemen input22 | P a g e
  23. 23. Images<img /> Mendefinisikan sebuah gambar<map> Mendefinisikan gambar map<area /> Mendefinisikan area didalam gambar mapLinks<a> Mendefinisikan sebuah anchor /link. contoh <a href="fb.com">klik</a><link /> Mendefinisikan hubungan antara dokumen dan sumber eksternalLists<ul> Mendefinisikan unordered list. contoh : ● satu ● dua<ol> Mendefinisikan ordered list. contoh : 1. Satu 2. Dua<li> Mendefinisikan item dari list<dir> Mendefinisikan direktori listTables<table> Mendefinisikan sebuah tabel<th> Mendefinisikan cell header pada tabel<tr> Mendefinisikan baris pada tabel<td> Mendefinisikan cell/kolom pada tabel<thead> Grup konten header pada tabel<tbody> Grup konten body pada tabel<tfoot> Grup konten footer pada tabelStyles<style> Mendefinisikan informasi style pada dokumen<div> Mendefinisikan bagian-bagian dokumen<span> Mendefinisikan bagian-bagian dukumenMeta Info<head> Mendefinisikan informasi pada dokumen<title> Mendefinisikan judul dokumen<meta> Mendefinisikan metadata dukumen HTML<base /> Defines a default address or a default target for all links on a page<basefont /> Deprecated. Defines a default font, color, or size for the text in a pageProgramming<script> Mendefinisikan script sisi klien Defines an alternate content for users that do not support client-side<noscript> scripts<applet> Deprecated. Defines an embedded applet<object> Defines an embedded object<param /> Defines a parameter for an object23 | P a g e
  24. 24. BAB IV CSS (Cascading Style Sheets) Pengertian Cascading Style Sheets (CSS) merupakan suatu teknologi yang digunakan untukmemperindah tampilan halaman situs web dan aplikasi yang berbasis web. Cascading StyleSheets (CSS) digunakan oleh designer web pages untuk medefinisikan warna, huruf dan layoutdan aspek-aspek lain dari halaman yang dipresentasikan. Dengan Cascading Style Sheets (CSS),para pengembang web dengan mudah mengubah secara keseluruhan warna dan tampilan yangada di aplikasi yang dibuatnya, sekaligus memformat ulang web tanpa usaha yang sulit. Sintaks Cascading Style Sheets (CSS) sederhana dan menggunakan keywords dalambahasa Inggris untuk menspesifikasikan nama dari setiap style property. Sebuah style sheetterdiri dari sebuah list dari rule yang ada. Setiap rule terdiri dari sebuah selector dan declarationblock. Setiap deklarasi yang terdapat pada declaration block, dipisahkan oleh titk koma (;),sedangkan deklarasi itu sendiri terdiri dari property, tanda titik dua ( : ) dan nilai.Apa yang seharusnya sudah diketahuiSebelum mempelajari CSS, seharusnya kamu sudah memahami tentang :  HTML / XHTML.Apa itu CSS?  CSS singkatan dari Cascading Style Sheets  Styles berarti bagaimana menampilkan elemen HTML  Styles ditambahkan ke HTML 4.0 untuk memecahkan masalah  External Style Sheets dapat menghemat banyak pekerjaan  External Style Sheets diletakkan di dalam file CSSContoh CSSbody{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{24 | P a g e
  25. 25. font-family:"Times New Roman";font-size:20px;}Styles Dapat Menyelesaikan Permasalahan Yang BesarHTML tidak dibuat untuk mengatur format dari dokumen. Kalaupun ada itupun hanya yangpenting-penting saja seprti mempertebal, align, mengganti warna dari teks, dan kita harusmengatur format teks tersebut secara manual (satu persatu).HTML lebih mengarah untuk mendefinisikan content dari dokumen,seprti:<h1>This is a heading</h1><p>This is a paragraph.</p>Pada html, apabila kita ingin memberi warna merah pada setiap tag <a>. maka caranya yaitudengan memberikan tag <font>,dan menspesifikasikan atribut warna nya apa, <fontcolor="red">merah</font>, hal ini menjadi mimpi buruk bagi developer, karena mereka harusmenambahkan tag font dan atribut colornya setiap ingin mengubah warna dari sebuah teks.Untuk menyelesaikan masalah tersebut, the World Wide Web Consortium (W3C) membuat CSS.Pada HTML 4.0, semua format dokumen (CSS) bisa dihilangkan dari dokumen HTML, dandipisahkan menjadi 1 dokumen CSS yang terpisah.Pada saat ini semua browser sudah support CSS.CSS Menghemat Banyak Pekerjaan!CSS mendefinisikan BAGAIMANA elemen HTML akan ditampilkan.Biasanya file css disimpan di luar dari dokumen HTML/ external .css files. External style sheetsmemungkinkan kita untuk mengganti tampilan layout dari semua halaman website. Denganhanya mengedit 1 file CSS saja, menakjubkan bukan!Syntax CSSAturan dari CSS sangat lah simpel, aturan ini memiliki 2 bagian utama : selector (yangdigunakan untuk menyeleksi bagian mana yang mau di format), dan 1 atau lebih declarations(isi dari format css, bisa menggati warna, ukuran font dll):Selector diatas akan menyekesi semua tag h1 dan menggati ukuran font menjadi 12px danwarnanya menjadi biru. Hanya dengan 1 baris kode tersebut secara ajaib semua teks yangberada pada tag <h1> akan berubah secara otomatis.25 | P a g e
  26. 26. Setiap deklarasi akan berisi property and a value. property adalah atribut dari style yang inginkamu ubah. Dan setiap atribut akan memiliki nilai, misalnya property font-size: memiliki nilai 12pixel.Contoh CSSDeklarasi CSS selalu diakhiri dengan semicolon/titik koma (;), dan deklarasi dari grup property(apabila ada banyak property) berada didalam tanda kurung siku {},:p {color:red;text-align:center;}Untuk membuat CSS lebih mudah dibaca,kita dapat memisahkan property pada setiap bari,seperti berikut:Contohp{color:red;text-align:center;}Komentar pada CSSKomentar digunakan untuk menjelaskan kode yang dibuat, dan sangat berguna ketika kamuingin mengedit source codenya. Komentar tidak akan dibaca oleh browser.Komentar CSS diawali dengan "/*", dan diakhiri dengan "*/", seperti ini:/*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;}Id (#) and class (.) SelectorsUntuk mengatur style pada elemen HTML, CSS mengijinkan kita untuk membuat sendiriselektor yang sering disebut "id" and "class".id SelectorId selector digunnakan untuk mengatur style untuk 1 element tunggal yang unik.26 | P a g e
  27. 27. Selektor id menggunakan atribut "id" pada HTML, dan didefinisikan dengan tanda "#" padaCSS.ContohHTML : <div id="header">Pada file CSS nya #header { properti yang ingin diberikan} Jangan memmulai nama ID dengan angka/nomor! Karena tidak akan berkerja padaMozilla/Firefox.class SelectorClass selektor digunakan untuk menspesifikasikan style dari kumpulan element-element HTML(group elements). Tidak seperti selektor id, selektor class lebih sering digunakan padabeberapa elemen.Selektor class menggunakan atribut "class" pada HTML, dan didefinisikan dengan tanda "."pada CSS.Pada contoh berikut, semua elemen HTML dengan class="center" akan menjadi rata tengah:Example.center {text-align:center;}Kamu juga dapat menspesifikasikan elemen mana yang ingin dirubah. Misalnya kita hanya inginmelakukan perubahan pada teks yang berada pada tag <p> dengan class center.Pada contoh berikut, semua elemen p dengan class="center"akan menjadi rata tengah:Examplep.center {text-align:center;} Jangan memulai nama class dengan angka/nomor! Karena ini hanya suport pada internetexplorer.Ketika browser membaca style sheet, maka browser akan memformat document berdasarkanstyle sheet tersebut.Tiga cara memasukkan CSSAda 3 cara untuk memasukkan style sheet kedalam dokumen HTML:  External style sheet  Internal style sheet  Inline styleExternal Style SheetExternal style sheet idealnya digunakan untuk mengatur format bebarapa dokumen HTML.dengan external style sheet, kita dapat mengubah format seluruh halaman web dengan27 | P a g e
  28. 28. mengedit 1 file css saja.setiap halaman harus memberi link ke file css dengan menggunakan tag<link>. Didalam tag <link> masukkan koding berikut:<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>External style sheet dapat ditulis dengan menggunakan teks editor apa saja.didalam file csstidak tedapat tag HTML. Style sheet seharusnya disimpan dengan ekstensi .css.contoh dari filestyle sheet seperti berikut:hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");} Jangan gunakan spasi antara property value dan unitsnya! contoh "margin-left:20 px" antar20 dan px ada spasi (seharusnya "margin-left:20px") ini bekerja di IE, tetapi tidak di Firefox atauOpera.Internal Style SheetInternal style sheetdigunakan ketika sebuah dokumen memiliki style yang unik. Kamumendefinisikan style sheetdibagian <head> pada halaman HTML, dengan menggunakan tag<style>,seprti ini:<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>Inline StylesUntuk menggunakan inline styes sheet, kita menggunakan attibut style pada elemen tag HTM Lyang ingin diubah style nya. Atribut style dapat berisi : CSS property. contoh berikutmenunjukkan bagaimana cara meriubah warna left margin dari paragraf:<p style="color:sienna;margin-left:20px">This is a paragraph.</p>Margin dan Padding pada CSS28 | P a g e
  29. 29. Margin dan padding merupakan hal yang mirip tetapi berbeda. Fugsi nya sama-sama untuk memberi jarak darisatu elemen ke elemen lainnya untuk merapikan dokumen. Agar lebih jelas lihat gambar. Contoh padding : Padding-left:10px; Padding-top:10px; Elemen2 yang berisi isi teksteks teks teks tekks tk tek kase tksteks teks Padding-right:10px;Padding-bottom:10px; Contoh Margin : margin-left:10px; margin-top:10px; Elemen2 yang berisi isi teksteks teks teks tekks tekks tekks tekks tksteks teks margin-bottom:10px; margin-right:10px; Jelaslah bahwa padding memberikan jarak antara border dan content ( isi dari elemen tersebut). Sedangkan margin memberikan jarak antara border elemen dengan bagian luar dari elemen Kita juga dapat melakukan seperti ini - padding:25px 50px 75px 100px; artinya :  top padding 25px  right padding 50px  bottom padding 75px  left padding 100px - padding :25px; berarti semua padding baik top bottom left right bernilai 25px; Selektor pada CSS Di dalam CSS, selectors merupakan pola yang digunakan untuk menseleksi elemen yang ingin dirubah style nya. 29 | P a g e
  30. 30. Berikut tabel lengkap tentang selektor pada CSS. Selector Example Example description CSS .intro Selects all elements with class="intro" 1 #firstname Selects the element with id="firstname" 1 * Selects all elements 2element p Selects all <p> elements 1element,element div,p Selects all <div> elements and all <p> elements 1element element div p Selects all <p> elements inside <div> elements 1 Selects all <p> elements where the parent is a <div>element>element div>p 2 element Selects all <p> elements that are placed immediately afterelement+element div+p 2 <div> elementsattribute] [target] Selects all elements with a target attribute 2attribute=value] [target=_blank] Selects all elements with target="_blank" 2 Selects all elements with a title attribute containing theattribute~=value] [title~=flower] 2 word "flower" Selects all elements with a lang attribute value startingattribute|=language] [lang|=en] 2 with "en" a:link Selects all unvisited links 1:visited a:visited Selects all visited links 1:active a:active Selects the active link 1:hover a:hover Selects links on mouse over 1 input:focus Selects the input element which has focus 2 letter p:first-letter Selects the first letter of every <p> element 1 line p:first-line Selects the first line of every <p> element 1 Selects every <p> elements that is the first child of its child p:first-child 2 parent:before p:before Insert content before every <p> element 2 p:after Insert content after every <p> element 2 Selects every <p> element with a lang attribute value language) p:lang(it) 2 starting with "it" CSS Properties CSS Property Groups  Background  Generated content  Positioning  Border and outline  List  Print 30 | P a g e
  31. 31.  Dimension  Margin  Table  Font  Padding  TextCSS propertis digunakan untuk mengatur propertis dari halaman seperti background , font,margin halaman, padding dll. (lebih lengkap di : http://w3schools.comBackground PropertiesProperty Description CSSbackground Sets all the background properties in one declaration 1 Mengatur apakah background akan tetap (tidak bergerak) ketika dibackground-attachment scrool. Atau bergerak. Contoh: 1 background-attachment: fixed; Sets the background color of an element. Contoh :background-color 1 Background-color : #efefef; Sets the background image for an element. Contoh :background-image 1 background-image: url(images/distroonline.com_02a.gif); Sets the starting position of a background image.background-position 1 background-position:center; Sets how a background image will be repeated. Contoh :background-repeat 1 Background-repeat: repeat-x;Border and Outline PropertiesProperty Description CSS Sets all the border properties in one declaration. Contoh:border 1 Border: 1px #000000 solid;border-bottom Sets all the bottom border properties in one declaration 1border-bottom-color Sets the color of the bottom border 1border-bottom-style Sets the style of the bottom border 1border-bottom-width Sets the width of the bottom border 1border-color Sets the color of the four borders 1border-left Sets all the left border properties in one declaration 1border-left-color Sets the color of the left border 1border-left-style Sets the style of the left border 1border-left-width Sets the width of the left border 1border-right Sets all the right border properties in one declaration 1border-right-color Sets the color of the right border 1border-right-style Sets the style of the right border 1border-right-width Sets the width of the right border 131 | P a g e
  32. 32. border-style Sets the style of the four borders 1border-top Sets all the top border properties in one declaration 1border-top-color Sets the color of the top border 1border-top-style Sets the style of the top border 1border-top-width Sets the width of the top border 1border-width Sets the width of the four borders 1outline Sets all the outline properties in one declaration 2outline-color Sets the color of an outline 2outline-style Sets the style of an outline 2outline-width Sets the width of an outline 2Dimension PropertiesProperty Description CSSheight Sets the height of an element 1max-height Sets the maximum height of an element 2max-width Sets the maximum width of an element 2min-height Sets the minimum height of an element 2min-width Sets the minimum width of an element 2width Sets the width of an element 1Font PropertiesProperty Description CSSfont Sets all the font properties in one declaration 1 Specifies the font family for textfont-family 1font-size Specifies the font size of text 1font-style Specifies the font style for text 1 Specifies whether or not a text should be displayed in a small-capsfont-variant 1 fontfont-weight Specifies the weight of a font 1List PropertiesProperty Description CSSlist-style Sets all the properties for a list in one declaration 1list-style-image Specifies an image as the list-item marker 1 Specifies if the list-item markers should appear inside or outside thelist-style-position 1 content flow32 | P a g e
  33. 33. list-style-type Specifies the type of list-item marker 1Margin PropertiesProperty Description CSSmargin Sets all the margin properties in one declaration 1margin-bottom Sets the bottom margin of an element 1margin-left Sets the left margin of an element 1margin-right Sets the right margin of an element 1margin-top Sets the top margin of an element 1Padding PropertiesProperty Description CSSpadding Sets all the padding properties in one declaration 1padding-bottom Sets the bottom padding of an element 1padding-left Sets the left padding of an element 1padding-right Sets the right padding of an element 1padding-top Sets the top padding of an element 1Positioning PropertiesProperty Description CSSbottom Sets the bottom margin edge for a positioned box 2 Specifies which sides of an element where other floating elementsclear 1 are not allowedclip Clips an absolutely positioned element 2cursor Specifies the type of cursor to be displayed 2display Specifies the type of box an element should generate 1float Specifies whether or not a box should float 1left Sets the left margin edge for a positioned box 2overflow Specifies what happens if content overflows an elements box 2position Specifies the type of positioning for an element 2right Sets the right margin edge for a positioned box 2top Sets the top margin edge for a positioned box 2visibility Specifies whether or not an element is visible 2z-index Sets the stack order of an element 2Print PropertiesProperty Description CSS33 | P a g e
  34. 34. Sets the minimum number of lines that must be left at the bottom oforphans 2 a page when a page break occurs inside an elementpage-break-after Sets the page-breaking behavior after an element 2page-break-before Sets the page-breaking behavior before an element 2page-break-inside Sets the page-breaking behavior inside an element 2 Sets the minimum number of lines that must be left at the top of awidows 2 page when a page break occurs inside an elementTable PropertiesProperty Description CSSborder-collapse Specifies whether or not table borders should be collapsed 2border-spacing Specifies the distance between the borders of adjacent cells 2caption-side Specifies the placement of a table caption 2 Specifies whether or not to display borders and background on emptyempty-cells 2 cells in a tabletable-layout Sets the layout algorithm to be used for a table 2Text PropertiesProperty Description CSScolor Sets the color of text 1direction Specifies the text direction/writing direction 2letter-spacing Increases or decreases the space between characters in a text 1line-height Sets the line height 1text-align Specifies the horizontal alignment of text 1text-decoration Specifies the decoration added to text 1text-indent Specifies the indentation of the first line in a text-block 1text-shadow Specifies the shadow effect added to text 2text-transform Controls the capitalization of text 1unicode-bidi 2vertical-align Sets the vertical alignment of an element 1white-space Specifies how white-space inside an element is handled 1word-spacing Increases or decreases the space between words in a text 134 | P a g e
  35. 35. Make Your Personal Website! Untuk membuat sebuah website personal yang sederhana pertama kamu mesti paham dulukonsep dari website tersebut. Umumnya website dibagi menjadi3 bagian, Header, Content, danFooter. HEADER CONTETNT FOOTER Untuk membagi halaman web menjadi 3 bagian (header, content, footer). Bisamenggunakan tag <table>, namun hal ini tidak disarankan, karena akan sulit untuk kedepannyaapabila ingin membuat website 3 colom atau membuat bagian baru lagi di halaman web. Cara lain yaitu dengan menggunakan CSS. Pada tahap ini akan dijelaskan step by stepmembuat web personal dengan css. 1. Pertama sediakan sebuah file html yang memuat link file css. Save dengan nama personal.html <html> <head> <title>Personal WEB</title> </head> <link href="webstyle.css" rel="stylesheet" type="text/css"/> <body leftmargin="0" topmargin="0" marginwidth="0"marginheight="0"> </body>35 | P a g e
  36. 36. </html> Penjelasan : href="webstyle.css" adalah nama file css yang kita gunakan.2. Selanjutnya pada bagian body, bagi halaman menjadi 3 bagian dengan cara memberi tag <div> <body leftmargin="0" topmargin="0" marginwidth="0"marginheight="0"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </body>Fungsi tag <div> adalah untuk membagi halaman menjadi beberapa bagian. Pada masing-masing <div> diberi id agar bisa di seleksi pada file css.3. Buat file css simpan dengan nama "webstyle.css", (letakkan difolder yang sama dengan file personal.html). buka file css tersebut dan masukkan koding berikut. #header { Width:90%; height:50px; Padding: 10px 5% 10px 5%; Background-color : #efeffe; } Coba save file css kemudian buka personal.html. Lanjutkan dengan mengetik koding berikut #footer { Width:100%; height:50px; Padding: 10px 0 5px 0; Text-align:center; Font-size:12px; Color:#ffffff; Background-color : #3f3f3f; } Kemudian berikan property untuk id content di file css. #content{ Width:1000px; height:450px; margin:auto; border-left: 3px #efefff solid; border-right: 3px #efefff solid; } Oke silahkan buka file html kamu dan lihat hasilnya akan seperti ini.36 | P a g e
  37. 37. Gambar: template web personal dengan css4. Kemudian beri tulisan pada file HTML kamu <div id="header"><h2>WEB Personal<h2></div> <div id="content">Isi dari web ini dapat berupa artikel dan lain lain</div> <div id="footer">© WEB Personal 2011<br> Workshop Pemrograman WEB</div> Simpan dan refresh file personal.html kamu.5. Pada bagian content kita akan membuat sebuah form inputan yang akan digunakan ketika mempelajari php. Lihat koding berikut. <div id="content"> <form name="form1" action=""> <table> <tr> <td width="120px">Nama </td> <td><input type="text" name="nama"></td></tr> <tr> <td>Jenis Kelamin </td> <td><input type="radio" name="jkel" value="Pria"> Pria <input type="radio" name="jkel" value="Wanita"> Wanita</td></tr> <tr> <td>Jurusan </td> <td> <select name="jurusan"> <option>T Informatika</option> <option> T Industri </option> <option> Matematika </option> <option> Sis Informasi </option> <option> T Elektro </option> </select> </td></tr> <tr><td> </td> <td><input type="submit" name="submit" value="submit"></td></tr>37 | P a g e
  38. 38. </table> </form> </div>6. Percantik header dengan menambahkan koding berikut yang bertujuan mengubah format h2 yang ada didalam tag <div id="header"> pada file css #header h2 { font-family : tahoma, verdana, serif; font-size: 18px; color : #e33; } Hasil WEB Personal38 | P a g e
  39. 39. BAB V DATABASE A. Pendahuluan 1.1Database Database / basis data, adalah kumpulan informasi yang disimpan di dalamkomputer secara sistematik sehingga dapat diperiksa menggunakan suatu programkomputer untuk memperoleh informasi dari basis data tersebut. 1.2Structured Query Language (SQL) SQL ( Structured Query Language ) adalah bahasa standar yang digunakan untukmengakses server database . Semenjak tahun 70-an bahasa ini telah dikembangkan olehIBM, yang kemudian diikuti dengan adanya Oracle, Informix dan Sybase. Denganmenggunakan SQL, proses akses database menjadi lebih user-friendly dibandingkandengan misalnya dBase ataupun Clipper yang masih menggunakan perintah – perintahpemrograman murni. Beberapa Software yang menggunakan SQL adalah Oracle, MS SQL,dan MySql. Dan pada modul ini akan membahas dan menggunakan software Mysql. 1.3MySql Mysql adalah suatu perangkat lunak database relasi (Relational DatabaseManagement System, atau RDBMS) yang juga merupakan server database multi user.Sebagaimana database system yang lain, mysql juga dikenal hirarky server dengandatabase-database. Tiap-tiap database memiliki tabel-tabel. Tiap tabel memiliki field-field.Dalam Workshop ini kita menggunakan MySQL sebagai SQL server karena berbagaikelebihannya, antara lain :  Source MySQL dapat diperoleh dengan mudah dan gratis.  Pengaksesan database dapat dilakukan dengan mudah.  Bekerja pada berbagai platform. (tersedia berbagai versi untukberbagai sistem operasi).  Memiliki jenis kolom yang cukup banyak sehingga memudahkan konfigurasi.39 | P a g e
  40. 40.  Memiliki sistem sekuriti yang cukup baik dengan verifikasi host, username , password. 1.4InstalasiTerlampir di Modul Bab I intalasi Xampp dimana mysql langsung terintegrasi di aplikasixampp. B. Penggunaan Aplikasi 2.1Menjalankan Program Mysql. Sebelum menjalankan mysql terlebih dahulu harus menjalankan service Aphace dandan mysql, setelah itu mysql bisa digunakan. Untuk menjalakan service tersebut bisadilakukan dengan double-click pada icon xampp control panel yang tampil di desktopsecara default setelah proses installasi aplikasi xampp. Setelah itu klik star pada apachedan mysql seperti di gambar :Setelah kedua service running maka program mysql sudah bisa di jalankan. Untukmenjalankan program Mysql pada xampp di Sistem Operasi Windows ada 2 cara :  Menggunakan Command Prompt (Console)40 | P a g e
  41. 41.  Menggunakan Browser (GUI) a. Menggunakan Command Prompt (Console)Salah satu cara menjalankan program mysql adalah dengan menggunakan CommandPrompt Pada OS berbasis Windows dengan cara berikut : 1. Buka jendela Command Prompt, Start > Program > Accessories > Command Prompt 2. Pindah ke folder dimana kita menginstall xammp, contoh folder berada di C:xamppmysqlbin dengan cara mengetikan cd “C:xamppmysqlbin” 3. Setelah Berada di direktori bin ketikan mysql –uroot -u : User root : username adalah root jika pada Command Prompt sudah keluar mysql> ,berarti sudah berhasil masuk ke dalam mysql tersebut. 4. Melihat seluruh database dengan cara mengetikan show databases;41 | P a g e
  42. 42. Terlihat beberapa database pada mysql. 5. Untuk keluar dari mysql bisa menggunakan Perintah exit atau q. b. Menggunakan Browser (GUI)Cara kedua untuk mengakses mysql pada OS Windows adalah dengan menggunakanBrowser seperti, Firefox, Chrome, Opera . dan IE. Adapun cara untuk mengakses mysqladalah sebagai berikut : 1. Buka Browser (firefox/chrome/opera/IE) 2. Pada location ketikan http://localhost/phpmyadmin/42 | P a g e
  43. 43. Pada browser lebih mudah untuk mengakses database dan lain-lainnya. Disan juga terlihat database apa saja yang ada pada mysql. 3. Jika ingin melihat/menggunakan database cukup dengan menklik database yang tersedia pada sisi kanan browser. C. Structured Query Language (SQL) 3.1Data Definition Language (DDL)DDL adalah perintah yang digunakan untuk mendefinisikan objek pada database sepertitable, field dan lain-lain. Perintah dari kelompok DDL antara lain :  Membuat (Create) Database.43 | P a g e
  44. 44.  Menggunakan Database.  Menghapus Database.  Membuat Tabel.  Melihat Struktur Tabel.  Menghapus Tabel.  Modifikasi Struktur Tabel. a. DatabaseNo Perintah Fungsi1. create database nama_database; Membuat Database2. Show database; Melihat database yang tersedia3. Use nama_database; Menggunakan database4. Drop database nama_database; Menghapus database b. TableNo Perintah Fungsi1. create table nama_table ( Membuat table nama_field tipe(panjang), nama_field2 tipe(panjang) );2. Drop table nama_table; Menghapus table3. Desc nama_table; Melihat struktur table4. Alter table nama_table add Menambah field baru nama_field tipe(panjang);5. Alter table nama_table modify Mengganti tipe field nama_field tipedata_baru;44 | P a g e
  45. 45. 6. Alter table nama_tabel change Mengganti nama filed nama_field_lama nama_field_baru tipe_databaru;7. Alter table nama_table drop Mengahapus field nama_field; 3.2Data Manipulation Language (DML) DML digunakan untuk memanipulasi data yang terdapat pada database. Perintah-perintah pada DML mencangkup :Manipulasi:  INSERT: mengisi (1 record) data ke tabel  DELETE: menghapus isi table  UPDATE: updating dataQuery:  SELECT: menampilkan data tertentu a. ManipulasiNo Perintah Fungsi1. insert into nama_table values Input data ke dalam table (isi_data); atau insert into nama_table (nama_field) values (isi_data);2. delete from nama_table where Menghapus isi dari teable dengan kondisi; kondisi tertentu.3. Delete from nama_table; Menghapus semua isi pada table4. update nama_table set Mengupdate isi dari salah satu data tertentu. nama_field = isi data baru45 | P a g e
  46. 46. where=kondisi; b. QuerySelect digunakan untuk menampilkan data pada table dalam database kita. Penggunaanperintah select adalah sebagai berikut:select nama_field from nama_table;atauselect * from nama_table;penggunaan karakter * mereferensikan semua nama field pada table.Kegunaan fungsi pada perintah select :Select Berkorespondensi dengan operasi projeksi aljabar relasional.From Menspesifikasikan daftar relasi (tabel) yang digunakanWhere Berkoresponsi dengan predikat seleksi aljabar relasi berisi predikatatribut Relasi yang muncul pada klausa from.Group by Membentuk kelompokkelompok baris dengan nilai kolom yang samaHaving Menyaring kelompok kelompok yang memenuhi suatu syarat (kondisi).Order by Menspesifikasikan urutan keluaranOperator perbandingan yang diperbolehkan : = Samadengan < Lebih kecil daripada > Lebih besar daripada <= Lebih kecil atau samadengan >= Lebih besar atau samadengan <> Tidak samadengan (!=)SQL mempunyai dua simbol khusus untuk pencocokan, yaitu :% : Menyatakan sembarang barisan nol karakter atau lebih (wildcard).46 | P a g e
  47. 47. _ : Menyatakansuatu karakter tunggal.Standart ISO mendefenisikan lima fungsi agregat, yaitu :COUNT : mengirim jumlah yang kolom tertentunya bernilaiSUM : mengirim jumlah total dari nilainilaidi kolom tertentuAVG : mengirim rataan dari nilainilaidi kolom tertentu.MIN : mengirim nilai terkecil di kolom tertentuMAX : mengirim nilai terbesar di kolom tertentu.47 | P a g e
  48. 48. BAB VI PHP6.1 Dasar-Dasar Pemrograman PHP6.1.1 Aturan Penulisan Skrip PHP Dalam penulisan skrip PHP ada berbagai macam aturan yang diberlakukandiantaranya adalah : 1. Skrip PHP harus diapit dengan tanda <?php … ?> atau <? … ?> atau <script language=”PHP”>…</script> 2. Menulis Komentar Penulisan Komentar dapat ditulis dengan awalan // atau awalan # atau /*….. */ Contoh : 3. Penulisan tag PHP dengan HTML 4. Penulisan skrip PHP tanpa HTML48 | P a g e
  49. 49. 5. Menulis tag HTML dengan PHP 6. Setiap statement php diakhiri dengan tanda ( ;) petik koma.6.1.2 Variabel dan Tipe Data Variabel adalah suatu tempat untuk menyimpan data dan sewaktu‐waktu datatersebut dapat digunakan atau ganti dengan data lain. PHP bersifat case sensitive yangmembedakan dan huruf kecil untuk nama variabel. Skrip yang digunakan :$nama_variabel = nilai_variabel;Aturan penulisan nama variabel yang benar:1. Variabel selalu diawali oleh tanda $, lalu diikuti dengan nama variabel yang diinginkan.2. Hanya ada tiga jenis karakter yang dapat digunakan untuk nama variabel, yaitu huruf, angka dan garis bawah.3. Karakter pertama sebuah nama variabel setelah tanda $ harus berupa huruf atau garis bawah.4. Jika nama variabel lebih dari satu kata, jangan ada spasi antara keduanya.49 | P a g e
  50. 50. Dalam php terdapat tipe data dasar yaitu: 1. Integer, untuk data yang berisi angka. Data tersebut dapat digunakan untuk operasi matematika. 2. String, untuk data yang berisi karakter, tipe data ini tidak digunakan untuk operasi matematika. 3. Array, untuk data yang berkelompok. Array memiliki nama variabel yang sama. Definisi lain dari array adalah kumpulan variabel yang memiliki tipe data yangsama. 4. Float/ double, untuk data yang berupa pecahan desimal. Untuk menangani operasi matematika dengan nilai pecahan. 5. Objek, digunakan dengan statement fuction.6.1.3 Operator Aritmatika Simbol Operator Fungsi Operator Contoh Penggunaan + Melakukan penjumlahan $jumlah = 2 + 4 ‐ Melakukan pengurangan $kurang = 4 – 3 * Melakukan perkalian $kali = 4 * 2 / Melakukan pembagian $hasilbagi = 10 / 2 % Menghasilkan sisa pembagian $sisabagi = 10 % 36.1.4 Operator Assignment Simbol Operator Fungsi Operator Contoh Penggunaan50 | P a g e
  51. 51. = Mengisi nilai yang ada di $data = 10 + 2; sebelah kanan operator ke variabel yang terletak di sebelah kiri operator += Menambahkan nilai yang $data = 10; ada di sebelah kanan $data += 2; operator ke variabel yang terletak di sebelah kiri operator dan hasilnya akan disimpan ke variabel itu juga ‐= s.d.a, untuk mengurangkan $data = 14; $data -= 2; *= s.d.a, untuk mengalikan $data = 4; $data *= 3; /= s.d.a, untuk membagi $data = 24; $data /= 2; %= s.d.a, untuk sisa bagi $data = 36; $data %= 24;6.1.5 Operator Perbandingan Simbol Operator Fungsi Operator == Bernilai true atau 1 jika dua kondisi yang dibandingkan sama, selain itu bernilai false atau 0 <> Bernilai true atau 1 jika dua kondisi yang dibandingkan tidak sama, selain itu bernilai false atau 0 > Bernilai true atau 1 jika nilai yang di sebelah kiri lebih besar dari yang di sebelah kanan, selain itu bernilai false atau 0 < Bernilai true atau 1 jika nilai yang di sebelah kanan lebih kecil dari yang di sebelah kiri, selain itu bernilai false atau 0 >= Bernilai true atau 1 jika nilai yang di sebelah kiri lebih besar dari atau sama dengan yang di sebelah kanan, selain itu bernilai false atau 0 <= Bernilai true atau 1 jika nilai yang di51 | P a g e
  52. 52. sebelah kanan lebih kecil dari atau sama dengan yang di sebelah kiri, selain itu bernilai false atau 06.1.6 Operator Logika Simbol Operator Fungsi Operator Contoh Penggunaan && Bernilai 1 jika kedua $data1 && $data2 kondisi memiliki nilai 1, selain itu bernilai 0 || Bernilai 0 jika kedua $data1 || $data2 kondisi memiliki nilai 0, selain itu bernilai 1 Xor Bernilai 1 jika kedua kondisi sama $data1 Xor $data2 dan 0 jika keduanya tidak sama ! Menghasilkan nilai yang berlawanan. !$data2 Jika 1 akan menjadi 0, sedangkan 0 akan menjadi 16.1.7 Array Contoh :6.1.8 Percabangan52 | P a g e
  53. 53. a. IF IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat. Carapenulisannya adalah sebagai berikut:if (syarat) { statement }atau: if (syarat) { statement } else { statement lain }atau: if (syarat pertama) { statement pertama } elseif (syarat kedua) { statement kedua }else { statement lain } b. SWITCH53 | P a g e
  54. 54. Statement SWITCH digunakan untuk membandingkan suatu variabel denganbeberapa nilai serta menjalankan statement tertentu jika nilai variabel sama dengan nilaiyang dibandingkan. Struktur Switch adalah sebagai berikut:switch (variabel) case nilai: statement case nilai: statemant case nilai: statement . . .6.1.9 Perulangan a. WHILE Bentuk dasar dari statement While adalah sebagai berikut:while (syarat) { statement } Arti dari statemant While adalah memberikan perintah untuk menjalankanstatement dibawahnya secara berulang-ulang, selama syaratnya terpenuhi. b. FOR Cara penulisan statement FOR adalah sebagai berikut:for (ekspresi1; ekspresi2 ; ekspresi3) statementekspresi1 menunjukkan nilai awal untuk suatu variabel54 | P a g e
  55. 55. ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statemantekspresi3 menunjukkan pertambahan nilai untuk suatu variabel6.2 Pemrograman Database dengan PHP Dalam mengkoneksikan PHP ke database MySQL, dapat dilakukan beberapa fungsiberikut ini : a. mysql_connect() mysql_connect () digunakan untuk melakukan koneksi ke server database MySQL.Format penulisan : mysql_connect(nama_host, nama_user, password);Jika parameter nama host tidak dideklarasikan, otomatis akan berisi localhost. Koneksi kedatabase akan secara otomatis terputus pada saat script program selesai dieksekusiseluruhnya, kecuali diberikan perintah fungsi mysql_close(). Fungsi mysql_connect() akanmenghasilkan nilai true jika koneksi berhasil dilakukan dan nilai false jika gagal. b. mysql_pconnect() Fungsi mysql_pconnect() juga digunakan untuk membangun akses ke database, samadengan fungsi mysql_connect(). Sedikit perbedaannya adalah jika menggunakan fungsimysql_pconnect(), koneksi tidak akan terputus meskipun program telah selesai dieksekusi. c. mysql_create_db() Fungsi mysql_create_db() digunakan untuk membuat sebuah database. Biasanyauntuk sebuah aplikasi digunakan sebuah database. Sebuah database akan berisi beberapatabel. Format penulisan : mysql_create_db(“nm_database”); d. mysql_select_db()55 | P a g e
  56. 56. Fungsi ini berguna untuk memilih atau mengaktifkan database, seperti dalamprogram klien mysql pakai USE . format penulisannya: mysql_select_db(database,pengenal_hub) Dalam hal ini database adalah nama database yang digunakan, sedang pengenal_hubadalah pengenal yang diperoleh dari pemanggilan fungsi mysql_connect(). e. mysql_query() PHP tidak menyediakan fungsi khusus untuk membuat tabel dengan field-fieldnya,sehingga untuk membuat tabel data tetap menggunakan sintaks dari program databaseMySQL yang digunakan, kemudian sintaks dioperasikan menggunakan fungsimysql_query(). Sehingga fungsi mysql_query() adalah menjalankan perintah query yangterdapat di MySQL. f. mysql_db_query() Fungsi ini berfungsi untuk menjalankan suatu permintaan terhadap suatu databaseformat penulisan : mysql_db_query(database,permintaan,pengenal_hub)Dalam hal ini pengenal_hub menyatakan pengenal yang didapat dari fungsimysql_connect(), sedangkan adalah nama database yang dipergunakan dan permintaanadalah perintah SQL.6.2.1 Koneksi PHP ke Database Untuk mengakses database dan tabel MySQL, harus dilakukan koneksi terlebihdahulu. Skrip yang digunakan adalah :56 | P a g e
  57. 57. Keterangan :  mysql_connect(hostname, username, password); Untuk melakukan koneksi ke server database MySQL sesuai dengan nama host, user dan password yang disediakan.  mysql_select_db(databasename); Untuk memilih sebuah database di dalam server database MySQL.6.2.2 Input Data Proses input data adalah suatu proses untuk memasukkan data ke dalam tabel. Perintah SQL yang akan digunakan adalah:INSERT INTO tablename (field1, field2, …) VALUES (data1, data2,…)Contoh Skrip:6.2.3 Menampilkan Data Untuk melihat hasil data yang telah dimasukkan ke database, maka akan ditampilkan ke browser. Perintah SQL yang akan digunakan adalah:SELECT * FROM tablename;Contoh Script :57 | P a g e
  58. 58. 6.2.4 Redirect (Pengalihan Halaman) Redirect (pengalihan halaman) adalah teknik untuk mengalihkan alamat atau halaman web secara otomatis. Perintah untuk redirect adalah:header("location:filename");6.2.5 Edit Data Proses edit data adalah suatu proses untuk mengubah data yang ada dalam tabel. Untuk dapat mengubah data, terlebih dahulu harus ditampilkan data yang akan diubah. Perintah SQL yang akan digunakan adalah:SELECT * FROM tablename WHERE keyfield=$id;Selanjutnya mengubah data ke dalam tabel dengan perintah SQL berikut:UPDATE tablename SET field1=$data1, field2=$data2, … WHEREkeyfield=$id;6.2.6 Delete Data Proses delete data adalah suatu proses untuk menghapus data yang ada dalam tabel.Untuk dapat menghapus data, digunakan perintah SQL berikut:DELETE FROM tablename WHERE keyfield=$id;58 | P a g e
  59. 59. 59 | P a g e

×