MODUL PEMROGRAMAN WEB

MODUL PEMROGRAMAN WEB

Disusun untuk pelatihan workshop pemrograman web Oleh: Aritha Handrico, Fauzi Aziz, Khairi Lestari, Novreni Anggraini, R. Sahroni. Pekanbaru, 21 Mei 2011

Teknik Informatika UIN SUSKA RIAU

DAFTAR ISI Bab I : Pengenalan

3

Bab II: Instalasi

9

Bab III: HTML

19

Bab IV: CSS

24

Bab V : Database

39

Bab VI: PHP

48

2|Page

BAB I PENGENALAN A.INTERNET 1.Pengertian Internet Internet dapat diartikan sebagai jaringan komputer luas dan besar yang mendunia, yaitu menghubungkan pemakai komputer dari suatu negara ke negara lain di seluruh dunia, dimana di dalamnya terdapat berbagai sumber daya informasi dari mulai yang statis hingga yang dinamis dan interaktif. 2. Sejarah internet Berikut sejarah kemunculan dan perkembangan internet. Sejarah intenet dimulai pada 1969 ketika Departemen Pertahanan Amerika, U.S. Defense Advanced Research Projects gency(DARPA) memutuskan untuk mengadakan riset tentang bagaimana caranya menghubungkan sejumlah computer sehingga membentuk jaringan organik. Program riset ini dikenal dengan nama ARPANET. Pada 1970, sudah lebih dari 10 komputer yang berhasil dihubungkan satu sama lain sehingga mereka bisa saling berkomunikasi dan membentuk sebuah jaringan. Tahun 1972, Roy Tomlinson berhasil menyempurnakan program e-mail yang ia ciptakan setahun yang lalu untuk ARPANET. Program e-mail ini begitu mudah sehingga langsung menjadi populer. Pada tahun yang sama, icon @juga diperkenalkan sebagai lambing penting yang menunjukkan "at" atau "pada". Tahun 1973, jaringan komputer ARPANET mulai dikembangkan ke luar Amerika Serikat. Komputer University College di London merupakan komputer pertama yang ada di luar Amerika yang menjadi anggota jaringan Arpanet. Pada tahun yang sama, dua orang ahli komputer yakni Vinton Cerf dan Bob Kahn mempresentasikan pebuah gagasan yang lebih besar, yang menjadi cikal bakal pemikiran internet. Ide ini dipresentasikan untuk pertama kalinya di Universitas Sussex. Hari bersejarah berikutnya adalah tanggal 26 Maret 1976, ketika Ratu Inggris berhasil 3|Page

mengirimkan e-mail dari Royal Signals and Radar Establishment di Malvern. Setahun kemudian, sudah lebih dari 100 komputer yang bergabung di ARPANET membentuk sebuah jaringan atau network. Pada 1979, Tom Truscott, Jim Ellis dan Steve Bellovin, menciptakan newsgroups pertama yang diberi nama USENET. Tahun 1981 France Telecom menciptakan gebrakan dengan meluncurkan telpon televisi pertama, dimana orang bisa saling menelpon sambil berhubungan dengan video link. Karena komputer yang membentuk jaringan semakin hari semakin banyak, maka dibutuhkan sebuah protokol resmi yang diakui oleh semua jaringan. Pada tahun 1982 dibentuk Transmission Control Protocol atau TCP dan Internet Protokol atau IP yang kita kenal semua. Sementara itu di Eropa muncul jaringan komputer tandingan yang dikenal dengan Eunet, yang menyediakan jasa jaringan komputer di negara-negara Belanda, Inggris, Denmark dan Swedia. Jaringan Eunet menyediakan jasa e-mail dan newsgroup USENET.Untuk enyeragamkan alamat di jaringan komputer yang ada, maka pada tahun 1984 diperkenalkan sistem nama domain, yang kini kita kenal dengan DNS atau Domain Name System. Komputer yang tersambung dengan jaringan yang ada sudah melebihi 1000 komputer lebih. Pada 1987 jumlah komputer yang tersambung ke jaringan melonjak 10 kali lipat manjadi 10.000 lebih. Tahun

1988,

Jarko

Oikarinen

dari

Finland

menemukan

dan

sekaligus

memperkenalkan IRC atau Internet Relay Chat. Setahun kemudian, jumlah komputer yang saling berhubungan kembali melonjak 10 kali lipat dalam setahun. Tak kurang dari 100.000 komputer kini membentuk sebuah jaringan. Tahun 1990 adalah tahun yang paling bersejarah, ketika Tim Berners Lee menemukan program editor dan browser yang bias menjelajah antara satu komputer dengan komputer yang lainnya, yang membentuk jaringan 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 telah tumbuh menjadi 3000 alamat halaman, dan untuk pertama kalinya virtual-shopping atau eretail muncul di internet. Dunia langsung berubah. Di tahun yang sama Yahoo! didirikan, yang juga sekaligus kelahiran Netscape Navigator 1.0. 3. Manfaat internet 4|Page

Secara umum ada banyak manfaat yang dapat diperoleh apabila seseorang mempunyai akses 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 untuk melintasi, mengabil dan menyediakan sumber informasi diidentifikasi dengan inform resource identify (URI) termasuk sebuah halamn web, gambar atau bagian lain dari kontak web 1. 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 buka 5|Page

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 bar 2. Macam-macam web browser a. Microsoft Internet Explorer b. Opera c. Mozila Firefox d. Google chrome e. Mac safari f. Dll

C. EDITOR 1. Notepad Notepad adalah Program bawaan dari Windows yang biasa digunakan untuk menulis keterangan-keterangan yang penting dari program aplikasi seperti halnya lisensi program atau yang lainnya pada umumnya orang mengatakan notepad adalah sebuat text editor standar. 2. Notepad ++

6|Page

Notepad + + adalah editor kode sumber pengganti dan Notepad gratis yang mendukung beberapa bahasa. Berjalan di lingkungan MS Windows, penggunaannya diatur oleh GPL License. Berdasarkan komponen mengedit kuat Scintilla, Notepad + + ditulis dalam C + + dan menggunakan murni Win32 API dan STL yang menjamin kecepatan eksekusi lebih tinggi dan ukuran program yang lebih kecil. Dengan mengoptimalkan rutinitas sebanyak mungkin tanpa kehilangan keramahan pengguna, Notepad + + adalah berusaha untuk mengurangi emisi karbon dioksida dunia. Bila menggunakan power CPU kurang, PC dapat throttle ke bawah dan mengurangi konsumsi daya, sehingga dalam lingkungan yang lebih hijau. 3. Macromedia Dreamweaver Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web. Dreamweaver MX dalam hal ini digunakan untuk web desain.dreamweaver MX mengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitasfasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode Javascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver. Teknologi Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan memformat ulang HTML bila kita menginginkannya. Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat

7|Page

melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu download halaman web.>

D. APLIKASI TAMBAHAN Pemograman internet kali ini kita akan menggunakan aplikasi tambahan yaitu XAMPP. Xampp merupakan seingkatan dari X (empat system operasi apapun), Apache, MySQL, PHP, Perl. Xampp merupakan tool yang menyediakan paket peranngkat lunak kedalam sebuah paket. Dalam paketnya sudah terdapat Apache (web server), MySQL (Database), PHP (Server Side Scription), Perl, FTP server, Php MyAdmin dan berbagai pustaka bantuan lainya. Dengan menginstal aplikasi ini maka tidak perlu lagi melakukan instalasi dan konfigurasi web server Apach, PHP dan MySQL secara manual. XAMPP akan menginstal dan mengonfigurasi secara Otomatis Untuk Andadilakukan penulis.

8|Page

BAB II INSTALASI A. 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>

9|Page

Pilih I Agree

Disini akan ada pemilihan tempat penginstalan, biasanya c:\program files\Notepad ++, jika anda ingin memilih menginstal ditemat lain silahkan pili browse, ketika telah selesai tekan Next> dan kemudian tekan Install.

Maka proses install akan berlangsung, ketika install telah selesai maka tekan finish dan otomatis layar Notepad++ akan terbuka.

10 | P a g e

C. DREAMWEAVER Klik dabel pada file Dreamweaver8-en.exe dan tunggu beberapa saaat maka proses instalasi akan dimulai.

Tekan Next> untukmelanjutkan instalasi. Setelah itu beri ceklis pada pilihan “I Accept the term—“ dan tekan Next untuk melanjutkan istalasi.

11 | P a g e

Pada layar selanjutnya kita akan diberikan pilihan tempat penginstalan c:\program files\ dereamweaver, kemudian pilih next> untuk melanjutkan , pada layar selanjutnya juga pilih Next> untuk melanjukan.

Pada Layar ini Tekan Install, maka proses Instalasi akan berjalan hingga selesai,

12 | P a g e

Ketika telah selesai, tekan Finish. Ketika memulai Menggunakan Dreamweaver maka akan ada pilihan untuk menggunakan Full dengan sarat memasukan serial nuber, jika telah selesai 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 basis package. 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 dengan pilihan bahasa yang Anda pakai. Pilih saja English

Langkah kedua akan muncul tampilan meminta menutup semua aplikasi lain sebelum menginstall XAMPP. Anda bisa menurutinya atau tidak juga tidak masalah, asalkan tidak terlalu banyak aplikasi komputer yang Anda jalankan, sehingga tidak membuat Anda 13 | P a g e

bingung ataupun komputer Anda lambat karena banyaknya memori komputer yang terpakai.

Jendela berikutnya yang muncul adalah pemilihan tempat/lokasi file XAMPP. Saya sarankan 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, Anda centang semua pilihan sehingga paket yang terinstall nantinya cukup lengkap. 14 | P a g e



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

Proses intalasi sedang berjalan, tunggu sampai selesai. Sebagai catatan, gambar yang saya pakai adalah XAMPP versi 1.7.0, tetapi pada kenyataannya proses instalasi tidaklah jauh berbeda dikarenakan masih versi yang cukup dekat.

16 | P a g e

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

Setelah Instalasi selesai, maka kita akan dihadapkan pilihan untuk memulai Xampp control panel, pada layar ini kita akan mengaktifkan Apache dan MySQL dengan menekan satart pada tombol pilihan, ketika langkah ini telah selesai, maka proses instalasi telah selesai.

18 | P a g e

BAB III HTML HTML (Hyper Text Markup Language) adalah standar bahasa yang digunakan untuk menampilkan dokumen web. Dokumen HTML disebut sebagai markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks tersebut dalam suatu dokumen dan tanda-tanda atau kode tersebut di kenal dengan TAG tertentu. Dokumen HTML disebut sebagai hypertext, ini berarti suatu dokumen tidak harus dibaca secara berurutan dari atas ke bawah. Dokumen dapat dibaca langsung menuju ke topik tertentu secara langsung dalam dokumen dengan menggunakan teks penghubung. Struktur dokumen HTML Dokumen HTML diawal dengan tag dan diakhiri dengan tag . Setiap dokumen HTML terdiri dari dua bagian utama yakni:  Bagian kepala, yang diawali dengan tag dan diakhiri dengan tag . Merupakan tempat untuk menuliskan judul halaman web dan script (program kecil).  Bagian badan/isi, yang diawali dengan tag dan diakhiri dengan tag . Merupakan tempat untuk menuliskan informasi yang akan di tampilkan pada browser. Berikut ini adalah struktur dari setiap dokumen HTML: <TITLE>tempat untuk menempatkan judul halaman web tempat untuk menuliskan informasi

19 | P a g e

Catatan : Tag menyatakan komentar, isi teks di dalamnya tidak akan diproses dan dapat diletakkan di mana saja. Atribut pada tag Setiap tag memiliki atribut yang berguna untuk memberi aturan pada tag yang kita gunakan. Misalnya pada tag dapat kita tambah atribut align untuk mementukan apakah tabel berada di tengah (center) di kiri atau dikanan. Contoh :
Format teks Teks pada dokumen html dapat di ubah formatnya misalnya menebalkan, memberi garis bawah dan tulisan miring, menggati font, font size, font color dll. Berikut contoh penggunaan tag HTMLnya. contoh teks tebal hasil : teks tebal teks miring hasil : teks miring garis bawah hasil : garis bawah merah hasil : merah Membuat tabel Untuk membuat tabel yang perlu diketahui adalah tag
dan Membuat form Untuk 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 contoh 20 | P a g e

4. Checkbox 5. Submit, tombol yang digunakan untuk mengirimkan data yang di inputkan Pembuatan form dimulai dengan menggunakan tag dan ditutup dengan tag Diantara tag dan disisipkan inputan yang diinginkan lihat contoh berikut. Nama
Jenis kelamin Pria Wanita
Jurusan <select name="jur">
Aktif Tidak YA

Link dan image Untuk membuat link, kita menggunakan tag anchor dan memberi atribut href untuk memberikan link yang ingin ditulis. Misalnya ingin memberi link ke google.com Situs Google Sedangkan untuk membuat gambar kita menggunakan tag dengan memberi atribut src untuk source file dari gambar. Untuk memberikan link pada gambar. . Secara default gambar yang diberi link akan memiliki border disekeliling gambar. Untuk menghapuskan border tersebut dapat dengan cara memberikan atribut border dengan nilai 0. .

21 | P a g e

Daftar Tag Pada HTML Tag Basic
to

Formatting
<s> <samp> <strike> Forms <button> <select> <optgroup> <option> <label> 22 | P a g e Deskripsi fungsi Mendefinisikan tipe dokumen Mendefinisikan dokumen HTML Mendefinisikan dokumen body HTML Mendefinisikan heading HTML Mendefinisikan paragraf Memberikan enter/baris baru Mendefinisikan sebuah garis lurus Mendefinisikan Komentar Mendefinisikan teks tebal Mendefinisikan teks besar Mendefinisikan sebuah kutipan panjang Membuat teks menjadi rata tengah Mendefinisikan sebuah teks kode Mendefinisikan font, color, and size for text Mendefinisikan teks garis miring Mendefinisikan sebuah kutipan pendek Mendefinisikan sebuah teks yang dicoret Mendefinisikan contoh kode komputer Mendefinisikan sebuah teks kecil Mendefinisikan sebuah teks yang dicoret Defines strong text Mendefinisikan teks dibawah contoh : H2 Mendefinisikan teks diatas contoh : H2 Garis bawah Mendefinisikan sebuah form HTML untuk inputan user Mendefinisikan sebuah input Mendefinisikan sebuah teks area Mendefinisikan sebuah tombol Mendefinisikan combobox/select list (drop-down list) Mendefinisikan grup option Mendefinisikan pilihan yang tedapat pada combobox (select) Mendefinisikan label pada elemen input Images <img /> <map> <area /> Links <a> <link /> Lists <ul> <ol> <li> <dir> Tables <table> <th> <tr> <td> <thead> <tbody> <tfoot> Styles <style> <div> Meta Info <head> <title> <meta> <base /> <basefont /> Programming <script> Mendefinisikan sebuah gambar Mendefinisikan gambar map Mendefinisikan area didalam gambar map Mendefinisikan sebuah anchor /link. contoh <a href="fb.com" rel="nofollow">klik</a> Mendefinisikan hubungan antara dokumen dan sumber eksternal Mendefinisikan unordered list. contoh : ● satu ● dua Mendefinisikan ordered list. contoh : 1. Satu 2. Dua Mendefinisikan item dari list Mendefinisikan direktori list Mendefinisikan sebuah tabel Mendefinisikan cell header pada tabel Mendefinisikan baris pada tabel Mendefinisikan cell/kolom pada tabel Grup konten header pada tabel Grup konten body pada tabel Grup konten footer pada tabel Mendefinisikan informasi style pada dokumen Mendefinisikan bagian-bagian dokumen Mendefinisikan bagian-bagian dukumen Mendefinisikan informasi pada dokumen Mendefinisikan judul dokumen Mendefinisikan metadata dukumen HTML Defines a default address or a default target for all links on a page Deprecated. Defines a default font, color, or size for the text in a page <applet rel="nofollow"> <object> Mendefinisikan script sisi klien Defines an alternate content for users that do not support client-side scripts Deprecated. Defines an embedded applet Defines an embedded object <param /> Defines a parameter for an object <noscript> 23 | P a g e BAB IV CSS (Cascading Style Sheets) Pengertian Cascading Style Sheets (CSS) merupakan suatu teknologi yang digunakan untuk memperindah tampilan halaman situs web dan aplikasi yang berbasis web. Cascading Style Sheets (CSS) digunakan oleh designer web pages untuk medefinisikan warna, huruf dan layout dan aspek-aspek lain dari halaman yang dipresentasikan. Dengan Cascading Style Sheets (CSS), para pengembang web dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di aplikasi yang dibuatnya, sekaligus memformat ulang web tanpa usaha yang sulit. Sintaks Cascading Style Sheets (CSS) sederhana dan menggunakan keywords dalam bahasa Inggris untuk menspesifikasikan nama dari setiap style property. Sebuah style sheet terdiri dari sebuah list dari rule yang ada. Setiap rule terdiri dari sebuah selector dan declaration block. 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 diketahui Sebelum 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 CSS Contoh CSS body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { 24 | P a g e font-family:"Times New Roman"; font-size:20px; } Styles Dapat Menyelesaikan Permasalahan Yang Besar HTML tidak dibuat untuk mengatur format dari dokumen. Kalaupun ada itupun hanya yang penting-penting saja seprti mempertebal, align, mengganti warna dari teks, dan kita harus mengatur format teks tersebut secara manual (satu persatu). HTML lebih mengarah untuk mendefinisikan content dari dokumen,seprti: <h1>This is a heading</h1> This is a paragraph. Pada html, apabila kita ingin memberi warna merah pada setiap tag <a>. maka caranya yaitu dengan memberikan tag ,dan menspesifikasikan atribut warna nya apa, merah, hal ini menjadi mimpi buruk bagi developer, karena mereka harus menambahkan 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, dan dipisahkan 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 sheets memungkinkan kita untuk mengganti tampilan layout dari semua halaman website. Dengan hanya mengedit 1 file CSS saja, menakjubkan bukan! Syntax CSS Aturan dari CSS sangat lah simpel, aturan ini memiliki 2 bagian utama : selector (yang digunakan 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 dan warnanya menjadi biru. Hanya dengan 1 baris kode tersebut secara ajaib semua teks yang berada pada tag <h1> akan berubah secara otomatis. 25 | P a g e Setiap deklarasi akan berisi property and a value. property adalah atribut dari style yang ingin kamu ubah. Dan setiap atribut akan memiliki nilai, misalnya property font-size: memiliki nilai 12 pixel. Contoh CSS Deklarasi 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: Contoh p { color:red; text-align:center; } Komentar pada CSS Komentar digunakan untuk menjelaskan kode yang dibuat, dan sangat berguna ketika kamu ingin 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 (.) Selectors Untuk mengatur style pada elemen HTML, CSS mengijinkan kita untuk membuat sendiri selektor yang sering disebut "id" and "class". id Selector Id selector digunnakan untuk mengatur style untuk 1 element tunggal yang unik. 26 | P a g e Selektor id menggunakan atribut "id" pada HTML, dan didefinisikan dengan tanda "#" pada CSS. Contoh HTML : <div id="header"> Pada file CSS nya #header { properti yang ingin diberikan} Jangan memmulai nama ID dengan angka/nomor! Karena tidak akan berkerja pada Mozilla/Firefox. class Selector Class selektor digunakan untuk menspesifikasikan style dari kumpulan element-element HTML (group elements). Tidak seperti selektor id, selektor class lebih sering digunakan pada beberapa 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 ingin melakukan perubahan pada teks yang berada pada tag dengan class center. Pada contoh berikut, semua elemen p dengan class="center"akan menjadi rata tengah: Example p.center {text-align:center;} Jangan memulai nama class dengan angka/nomor! Karena ini hanya suport pada internet explorer. Ketika browser membaca style sheet, maka browser akan memformat document berdasarkan style sheet tersebut. Tiga cara memasukkan CSS Ada 3 cara untuk memasukkan style sheet kedalam dokumen HTML:  External style sheet  Internal style sheet  Inline style External Style Sheet External style sheet idealnya digunakan untuk mengatur format bebarapa dokumen HTML .dengan external style sheet, kita dapat mengubah format seluruh halaman web dengan 27 | P a g e 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 css tidak tedapat tag HTML. Style sheet seharusnya disimpan dengan ekstensi .css.contoh dari file style 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" antar 20 dan px ada spasi (seharusnya "margin-left:20px") ini bekerja di IE, tetapi tidak di Firefox atau Opera. Internal Style Sheet Internal style sheetdigunakan ketika sebuah dokumen memiliki style yang unik. Kamu mendefinisikan 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 Styles Untuk menggunakan inline styes sheet, kita menggunakan attibut style pada elemen tag HTM L yang ingin diubah style nya. Atribut style dapat berisi : CSS property. contoh berikut menunjukkan bagaimana cara meriubah warna left margin dari paragraf: This is a paragraph. Margin dan Padding pada CSS 28 | P a g e 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-bottom:10px; Padding-right:10px; Contoh Margin : margin-top:10px; margin-left:10px; Elemen2 yang berisi isi teksteks teks teks tekks tekks tekks tekks tksteks teks margin-right:10px; margin-bottom: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 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 2 element p Selects all elements 1 element,element div,p Selects all <div> elements and all elements 1 element element div p Selects all elements inside <div> elements 1 element>element div>p Selects all elements where the parent is a <div> element 2 element+element div+p Selects all elements that are placed immediately after 2 <div> elements attribute] [target] Selects all elements with a target attribute attribute=value] [target=_blank] Selects all elements with target="_blank" attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower" 2 attribute|=language] [lang|=en] Selects all elements with a lang attribute value starting with "en" 2 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 element 1 line p:first-line Selects the first line of every element 1 child p:first-child Selects every elements that is the first child of its parent 2 p:before Insert content before every element 2 p:after Insert content after every element 2 p:lang(it) Selects every element with a lang attribute value starting with "it" 2 :before language) CSS Properties CSS Property Groups  Background  Generated content  Positioning  Border and outline  List  Print 30 | P a g e 2 2  Dimension  Margin  Table  Font  Padding  Text CSS propertis digunakan untuk mengatur propertis dari halaman seperti background , font, margin halaman, padding dll. (lebih lengkap di : http://w3schools.com Background Properties Property Description CSS background Sets all the background properties in one declaration 1 background-attachment Mengatur apakah background akan tetap (tidak bergerak) ketika di scrool. Atau bergerak. Contoh: background-attachment: fixed; 1 background-color Sets the background color of an element. Contoh : Background-color : #efefef; 1 background-image Sets the background image for an element. Contoh : background-image: url(images/distroonline.com_02a.gif); 1 background-position Sets the starting position of a background image. background-position:center; 1 background-repeat Sets how a background image will be repeated. Contoh : Background-repeat: repeat-x; 1 Border and Outline Properties Property Description CSS border Sets all the border properties in one declaration. Contoh: Border: 1px #000000 solid; 1 border-bottom Sets all the bottom border properties in one declaration 1 border-bottom-color Sets the color of the bottom border 1 border-bottom-style Sets the style of the bottom border 1 border-bottom-width Sets the width of the bottom border 1 border-color Sets the color of the four borders 1 border-left Sets all the left border properties in one declaration 1 border-left-color Sets the color of the left border 1 border-left-style Sets the style of the left border 1 border-left-width Sets the width of the left border 1 border-right Sets all the right border properties in one declaration 1 border-right-color Sets the color of the right border 1 border-right-style Sets the style of the right border 1 border-right-width Sets the width of the right border 1 31 | P a g e border-style Sets the style of the four borders 1 border-top Sets all the top border properties in one declaration 1 border-top-color Sets the color of the top border 1 border-top-style Sets the style of the top border 1 border-top-width Sets the width of the top border 1 border-width Sets the width of the four borders 1 outline Sets all the outline properties in one declaration 2 outline-color Sets the color of an outline 2 outline-style Sets the style of an outline 2 outline-width Sets the width of an outline 2 Dimension Properties Property Description CSS height Sets the height of an element 1 max-height Sets the maximum height of an element 2 max-width Sets the maximum width of an element 2 min-height Sets the minimum height of an element 2 min-width Sets the minimum width of an element 2 width Sets the width of an element 1 Property Description CSS font Sets all the font properties in one declaration 1 Font Properties font-family Specifies the font family for text 1 font-size Specifies the font size of text 1 font-style Specifies the font style for text 1 font-variant Specifies whether or not a text should be displayed in a small-caps font 1 font-weight Specifies the weight of a font 1 Property Description CSS list-style Sets all the properties for a list in one declaration 1 list-style-image Specifies an image as the list-item marker 1 list-style-position Specifies if the list-item markers should appear inside or outside the 1 content flow List Properties 32 | P a g e list-style-type Specifies the type of list-item marker 1 Margin Properties Property Description CSS margin Sets all the margin properties in one declaration 1 margin-bottom Sets the bottom margin of an element 1 margin-left Sets the left margin of an element 1 margin-right Sets the right margin of an element 1 margin-top Sets the top margin of an element 1 Padding Properties Property Description CSS padding Sets all the padding properties in one declaration 1 padding-bottom Sets the bottom padding of an element 1 padding-left Sets the left padding of an element 1 padding-right Sets the right padding of an element 1 padding-top Sets the top padding of an element 1 Positioning Properties Property Description CSS bottom Sets the bottom margin edge for a positioned box 2 clear Specifies which sides of an element where other floating elements are not allowed 1 clip Clips an absolutely positioned element 2 cursor Specifies the type of cursor to be displayed 2 display Specifies the type of box an element should generate 1 float Specifies whether or not a box should float 1 left Sets the left margin edge for a positioned box 2 overflow Specifies what happens if content overflows an element's box 2 position Specifies the type of positioning for an element 2 right Sets the right margin edge for a positioned box 2 top Sets the top margin edge for a positioned box 2 visibility Specifies whether or not an element is visible 2 z-index Sets the stack order of an element 2 Description CSS Print Properties Property 33 | P a g e orphans Sets the minimum number of lines that must be left at the bottom of 2 a page when a page break occurs inside an element page-break-after Sets the page-breaking behavior after an element 2 page-break-before Sets the page-breaking behavior before an element 2 page-break-inside Sets the page-breaking behavior inside an element 2 widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element 2 Property Description CSS border-collapse Specifies whether or not table borders should be collapsed 2 border-spacing Specifies the distance between the borders of adjacent cells 2 caption-side Specifies the placement of a table caption 2 empty-cells Specifies whether or not to display borders and background on empty 2 cells in a table table-layout Sets the layout algorithm to be used for a table 2 Property Description CSS color Sets the color of text 1 direction Specifies the text direction/writing direction 2 letter-spacing Increases or decreases the space between characters in a text 1 line-height Sets the line height 1 text-align Specifies the horizontal alignment of text 1 text-decoration Specifies the decoration added to text 1 text-indent Specifies the indentation of the first line in a text-block 1 text-shadow Specifies the shadow effect added to text 2 text-transform Controls the capitalization of text 1 Table Properties Text Properties unicode-bidi 2 vertical-align Sets the vertical alignment of an element 1 white-space Specifies how white-space inside an element is handled 1 word-spacing Increases or decreases the space between words in a text 1 34 | P a g e Make Your Personal Website! Untuk membuat sebuah website personal yang sederhana pertama kamu mesti paham dulu konsep dari website tersebut. Umumnya website dibagi menjadi3 bagian, Header, Content, dan Footer. HEADER CONTETNT FOOTER Untuk membagi halaman web menjadi 3 bagian (header, content, footer). Bisa menggunakan tag <table>, namun hal ini tidak disarankan, karena akan sulit untuk kedepannya apabila 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 step membuat 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 </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 masingmasing <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 Gambar: template web personal dengan css 4. 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 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 </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 Personal 38 | P a g e BAB V DATABASE A. Pendahuluan 1.1Database Database / basis data, adalah kumpulan informasi yang disimpan di dalam komputer secara sistematik sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh informasi dari basis data tersebut. 1.2Structured Query Language (SQL) SQL ( Structured Query Language ) adalah bahasa standar yang digunakan untuk mengakses server database . Semenjak tahun 70-an bahasa ini telah dikembangkan oleh IBM, yang kemudian diikuti dengan adanya Oracle, Informix dan Sybase. Dengan menggunakan SQL, proses akses database menjadi lebih user-friendly dibandingkan dengan misalnya dBase ataupun Clipper yang masih menggunakan perintah – perintah pemrograman 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 Database Management System, atau RDBMS) yang juga merupakan server database multi user. Sebagaimana database system yang lain, mysql juga dikenal hirarky server dengan database-database. Tiap-tiap database memiliki tabel-tabel. Tiap tabel memiliki field-field. Dalam Workshop ini kita menggunakan MySQL sebagai SQL server karena berbagai kelebihannya, 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  Memiliki sistem sekuriti yang cukup baik dengan verifikasi host, username , password. 1.4Instalasi Terlampir di Modul Bab I intalasi Xampp dimana mysql langsung terintegrasi di aplikasi xampp. B. Penggunaan Aplikasi 2.1Menjalankan Program Mysql. Sebelum menjalankan mysql terlebih dahulu harus menjalankan service Aphace dan dan mysql, setelah itu mysql bisa digunakan. Untuk menjalakan service tersebut bisa dilakukan dengan double-click pada icon xampp control panel yang tampil di desktop secara default setelah proses installasi aplikasi xampp. Setelah itu klik star pada apache dan mysql seperti di gambar : Setelah kedua service running maka program mysql sudah bisa di jalankan. Untuk menjalankan program Mysql pada xampp di Sistem Operasi Windows ada 2 cara :  Menggunakan Command Prompt (Console) 40 | P a g e  Menggunakan Browser (GUI) a. Menggunakan Command Prompt (Console) Salah satu cara menjalankan program mysql adalah dengan menggunakan Command Prompt 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:\xampp\mysql\bin dengan cara mengetikan cd “C:\xampp\mysql\bin” 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 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 menggunakan Browser seperti, Firefox, Chrome, Opera . dan IE. Adapun cara untuk mengakses mysql adalah sebagai berikut : 1. Buka Browser (firefox/chrome/opera/IE) 2. Pada location ketikan http://localhost/phpmyadmin/ 42 | P a g e 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 seperti table, field dan lain-lain. Perintah dari kelompok DDL antara lain :  Membuat (Create) Database. 43 | P a g e  Menggunakan Database.  Menghapus Database.  Membuat Tabel.  Melihat Struktur Tabel.  Menghapus Tabel.  Modifikasi Struktur Tabel. a. Database No Perintah Fungsi 1. create database nama_database; Membuat Database 2. Show database; Melihat database yang tersedia 3. Use nama_database; Menggunakan database 4. Drop database nama_database; Menghapus database b. Table No 1. Perintah create table nama_table ( Fungsi Membuat table nama_field tipe(panjang), nama_field2 tipe(panjang) ); 2. Drop table nama_table; Menghapus table 3. Desc nama_table; Melihat struktur table 4. Alter table nama_table add Menambah field baru nama_field tipe(panjang); 5. Alter table nama_table modify nama_field tipedata_baru; 44 | P a g e Mengganti tipe field 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. Perintahperintah pada DML mencangkup : Manipulasi:  INSERT: mengisi (1 record) data ke tabel  DELETE: menghapus isi table  UPDATE: updating data Query:  SELECT: menampilkan data tertentu a. Manipulasi No 1. Perintah insert into nama_table values Fungsi 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 table 4. update nama_table set Mengupdate isi dari salah satu data nama_field = isi data baru 45 | P a g e tertentu. where=kondisi; b. Query Select digunakan untuk menampilkan data pada table dalam database kita. Penggunaan perintah select adalah sebagai berikut: select nama_field from nama_table; atau select * 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 digunakan Where Berkoresponsi dengan predikat seleksi aljabar relasi berisi predikat atribut Relasi yang muncul pada klausa from. Group by Membentuk kelompokkelompok baris dengan nilai kolom yang sama Having Menyaring kelompok kelompok yang memenuhi suatu syarat (kondisi). Order by Menspesifikasikan urutan keluaran Operator 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 _ : Menyatakansuatu karakter tunggal. Standart ISO mendefenisikan lima fungsi agregat, yaitu : COUNT : mengirim jumlah yang kolom tertentunya bernilai SUM : mengirim jumlah total dari nilainilaidi kolom tertentu AVG : mengirim rataan dari nilainilaidi kolom tertentu. MIN : mengirim nilai terkecil di kolom tertentu MAX : mengirim nilai terbesar di kolom tertentu. 47 | P a g e BAB VI PHP 6.1 Dasar-Dasar Pemrograman PHP 6.1.1 Aturan Penulisan Skrip PHP Dalam penulisan skrip PHP ada berbagai macam aturan yang diberlakukan diantaranya 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 HTML 48 | P a g e 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 data tersebut dapat digunakan atau ganti dengan data lain. PHP bersifat case sensitive yang membedakan 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 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 yang sama. 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 % 3 6.1.4 Operator Assignment Simbol Operator 50 | P a g e Fungsi Operator Contoh Penggunaan = ‐= Mengisi nilai yang ada di sebelah kanan operator ke variabel yang terletak di sebelah kiri operator Menambahkan nilai yang ada di sebelah kanan operator ke variabel yang terletak di sebelah kiri operator dan hasilnya akan disimpan ke variabel itu juga s.d.a, untuk mengurangkan *= s.d.a, untuk mengalikan /= s.d.a, untuk membagi %= s.d.a, untuk sisa bagi += $data = 10 + 2; $data = 10; $data += 2; $data = 14; $data -= 2; $data = 4; $data *= 3; $data = 24; $data /= 2; $data = 36; $data %= 24; 6.1.5 Operator Perbandingan Simbol Operator == <> > < >= <= 51 | P a g e 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 di sebelah kanan lebih kecil dari atau sama dengan yang di sebelah kiri, selain itu bernilai false atau 0 6.1.6 Operator Logika Simbol Operator && Fungsi Operator Bernilai 1 kondisi memiliki itu bernilai 0 || Bernilai 0 kondisi memiliki itu bernilai 1 kedua selain jika nilai 0, kedua selain Contoh Penggunaan $data1 && $data2 $data1 || $data2 Xor Bernilai 1 jika kedua kondisi sama dan 0 jika keduanya tidak sama $data1 Xor $data2 ! Menghasilkan nilai yang berlawanan. Jika 1 akan menjadi 0, sedangkan 0 akan menjadi 1 !$data2 6.1.7 Array Contoh : 6.1.8 Percabangan 52 | P a g e jika nilai 1, a. IF IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat. Cara penulisannya 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. SWITCH 53 | P a g e Statement SWITCH digunakan untuk membandingkan suatu variabel dengan beberapa nilai serta menjalankan statement tertentu jika nilai variabel sama dengan nilai yang 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 menjalankan statement dibawahnya secara berulang-ulang, selama syaratnya terpenuhi. b. FOR Cara penulisan statement FOR adalah sebagai berikut: for (ekspresi1; ekspresi2 ; ekspresi3) statement ekspresi1 menunjukkan nilai awal untuk suatu variabel 54 | P a g e ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statemant ekspresi3 menunjukkan pertambahan nilai untuk suatu variabel 6.2 Pemrograman Database dengan PHP Dalam mengkoneksikan PHP ke database MySQL, dapat dilakukan beberapa fungsi berikut 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 ke database akan secara otomatis terputus pada saat script program selesai dieksekusi seluruhnya, kecuali diberikan perintah fungsi mysql_close(). Fungsi mysql_connect() akan menghasilkan nilai true jika koneksi berhasil dilakukan dan nilai false jika gagal. b. mysql_pconnect() Fungsi mysql_pconnect() juga digunakan untuk membangun akses ke database, sama dengan fungsi mysql_connect(). Sedikit perbedaannya adalah jika menggunakan fungsi mysql_pconnect(), koneksi tidak akan terputus meskipun program telah selesai dieksekusi. c. mysql_create_db() Fungsi mysql_create_db() digunakan untuk membuat sebuah database. Biasanya untuk sebuah aplikasi digunakan sebuah database. Sebuah database akan berisi beberapa tabel. Format penulisan : mysql_create_db(“nm_database”); d. mysql_select_db() 55 | P a g e Fungsi ini berguna untuk memilih atau mengaktifkan database, seperti dalam program klien mysql pakai USE . format penulisannya: mysql_select_db(database,pengenal_hub) Dalam hal ini database adalah nama database yang digunakan, sedang pengenal_hub adalah 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 database MySQL yang digunakan, kemudian sintaks dioperasikan menggunakan fungsi mysql_query(). Sehingga fungsi mysql_query() adalah menjalankan perintah query yang terdapat di MySQL. f. mysql_db_query() Fungsi ini berfungsi untuk menjalankan suatu permintaan terhadap suatu database format penulisan : mysql_db_query(database,permintaan,pengenal_hub) Dalam hal ini pengenal_hub menyatakan pengenal yang didapat dari fungsi mysql_connect(), sedangkan adalah nama database yang dipergunakan dan permintaan adalah perintah SQL. 6.2.1 Koneksi PHP ke Database Untuk mengakses database dan tabel MySQL, harus dilakukan koneksi terlebih dahulu. Skrip yang digunakan adalah : 56 | P a g e 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. Peri ntah 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 ditampilka n ke browser. Perintah SQL yang akan digunakan adalah: SELECT * FROM tablename; Contoh Script : 57 | P a g e 6.2.4 Redirect (Pengalihan Halaman) Redirect (pengalihan halaman) adalah teknik untuk mengalihkan alamat atau halam an 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. Un tuk dapat mengubah data, terlebih dahulu harus ditampilkan data yang akan diubah. Perint ah 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', … WHERE keyfield='$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 | P a g e </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/modul-pemrograman-web151652876618995" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "MODUL PEMROGRAMAN WEB"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"> Copyright © 2024 ADOC.PUB. All rights reserved. About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy Sign In Email Password Remember me Forgot password? Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

Kolom 1 Kolom 2
nama alamat

Setiap tag pembuka baik itu
harus ditutup dengan tag penutup

MODUL PEMROGRAMAN WEB

Recommend Documents

to