Pemrograman Berorientasi Platform Pemrograman web dengan HTML CSS

Pemrograman Berorientasi Platform Pemrograman web dengan HTML, CSS, JS, PHP & My. SQL Ramos Somya, S. Kom. , M. Cs.

HTML Merupakan bahasa pemrograman / mark up language yang berfungsi untuk memformat / membuat halaman web. HTML menggunakan mark up tags untuk mendeskripsikan halaman web. Digunakan untuk memberi tahu web browser bagaimana menampilkan halaman web. Sebuah HTML file harus mempunyai ekstensi. htm atau. html. dapat dibuat menggunakan text editor (notepad, edit plus dsb).

Contoh HTML <html> <HEAD> <TITLE>Judul dokumen</TITLE> </HEAD> <body> <h 1>My First Heading</h 1> <p>My first paragraph</p> </body> </html>

Tag HTML Tag dibentuk oleh suatu kata (keyword) yang diapit oleh tanda kurung lancip (<tag>). Tag boleh ditulis dalam huruf kecil maupun kapital. Tag harus berpasangan, yaitu tag awal diikuti tag akhir, kecuali tag tunggal. <p> teks </p>, Penulisan tag tidak boleh tumpang tindih. <tag 1><tag 2> teks </tag 1></tag 2> → penulisan yang salah <tag 1><tag 2> teks </tag 2></tag 1> → penulisan yang benar

. . . Heading Tag Text Formating (Font Color, dll) Link Image List Frame Tabel Form

Heading Tag <hn>Judul paragraf</hn> n = 1, 2, 3, 4, 5, 6 (tingkat judul) Untuk menuliskan judul suatu paragraf.

Paragraph Tag <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.

Text Formating Tag <b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i> <u>Kalimat yang digarisbawahi</u>

. . . <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.

Break Line Tag Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) :

Font Size Tag Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color

Font Face Tag Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color

Font Color Tag Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color

Link Tag <a href="Link">Kata yang di-click</a> <a name="#Acuan">Kata yang dituju</a> Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda membentuk link ke URL/file/bagian dokumen lain.

Frame Tag Frame membagi layar dalam beberapa jendela, dimana masing layar menampilkan web page yang berbeda. Tag Dasar: <frameset>. . </frameset> <frame/> <noframes>. . </noframes> Basic Atributes - cols = “values” …. (value biasanya dituliskan dalam % menunjukkan besar pembagian area. - rows = “values” - name = “frame_name” - src = “frame_source(url)” - target = “frame_name”

List Tag List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada tiga macam list yang bisa anda tambahkan ke document HTML: 1. Unordered List (Bullet) 2. Ordered List (Numbering) 3. Definition List

Unordered List

Ordered List

Definition List Berbeda dengan ordered list dan unordered list, pada definition list tidak menggunakan tanda khusus (numbering maupun bulleting) pada item-item sebuah list. Definition list umumnya digunakan untuk sebuah artikel pada HTML yang isinya merupakan uraian umum mengenai suatu hal yang berkaitan dengan ilmu pendidikan dan ilmiah.

. . . Untuk membuat sebuah definition list, web designer dapat menggunakan tag <dl> (definition list) yang ditutup dengan tag </dl>. Berbeda dengan ordered maupun unordered list yang menggunakan tag <li>, maka pada definition list digunakan tag <dt> untuk memasukan item-item pada list yang bersangkutan diakhiri dengan tag </dt>. Kemudian jika ingin memasukan sub-item pada list tersebut maka dapat menggunakan tag <dd> dan </dd>.

Horizontal Tag <hr> membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : <hr />

Background Tag Digunakan untuk memberikan warna/image latar belakang pada elemen html Bisa ditempatkan pada elemen html seperti <body> <table> <tr> <td>, dll. . Tag yang digunakan Menggunakan warna: <body bgcolor="#000000"> <body bgcolor="rgb(0, 0, 0)"> <body bgcolor="black"> Menggunakan image: <body background="clouds. gif">

Image Tag img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="Nama. File. Gambar"> Atribut src digunakan untuk menentukan source dari image

Image Tag img src="Nama. File. Gambar"> Atribut src digunakan untuk menentukan source dari image yang akan ditampilkan. Image: ekstensi. GIF, . JPG, atau. PNG. Value lokasi image bisa merujuk ke absolute path src = ”c: /gambar/logo. gif” src = http: //www. google. co. id/intl/id_id/images/logo. gif Value lokasi image bisa juga merujuk ke relative path src=”images/logo. gif” src=”. . /images/logo. gif”

. . . Image juga bisa digunakan untuk menggantikan teks pada link Contoh : <a href=”http: //www. google. com”><img src=”logo. gif” border=” 0”></a> Perhatikan atribut border=” 0” digunakan untuk mengilangkan border pada image yang akan muncul secara otomatis bila image digunakan pada link

Table Tag <table> definisi tabel </table> Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td>data</td>

Cascading Style Sheet (CSS) • Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yg ada di situs kita sekaligus memformat ulang situs kita. • Menggunakan tag: <style>. . . </style>

Komponen CSS

<font id=“green”>Warna Hijau</font>

CSS Internal

CSS Inline

CSS Eksternal

Javascript Java Script itu adalah bahasa pemrograman, yang sering digunakan untuk membangun halaman web, sehingga lebih interaktif. Java Script adalah client side scripting. . Artinya semua instruksi dalam coding akan dijalankan dalam komputer client, bukan server.

Penggunaan Js Menampilkan tanggal Validasi form Mengatur tampilan web Proteksi web dll

Event dalam Js Event yang bisa dikenakan ke elemen HTML tu ada banyak. Misal : onload, onclick, onchange, onsubmit, dll. Semua bisa digunakan untuk memicu pemanggilan fungsi JS.

. . . <html> <head> </head> <body> <script type="text/javascript"> var tgl = new Date() var jam = tgl. get. Hours(); var menit = tgl. get. Minutes(); var detik = tgl. get. Seconds(); document. write(jam+": "+menit+": "+detik); </script> </body> </html>

Latihan Buatlah penerapan Javascript untuk melakukan validasi inputan user pada form HTML. Inputan kosong Inputan harus angka

PHP - My. SQL

Script Koneksi PHP - My. SQL mysql_connect ("hostname", "user", "pass"): koneksi ke My. SQL server. mysql_select_db("database name"): sama dengan My. SQL command USE; untuk memilih database yang akan digunakan. mysql_query("query"): digunakan untuk mengirim semua perintah/syntax My. SQL ke server. mysql_fetch_rows("results variable from query"): perintah untuk mengirimkan satu buah baris hasil query. mysql_fetch_array("results variable from query"): perintah untuk mengirimkan beberapa buah baris hasil query. mysql_error(): menunjukan pesan kesalahan.

Sintaks Koneksi $host = “localhost”; $user = “root”; $pass = “mysqlpass”; $connect = mysql_connect($host, $user, $pass); Atau $connect = mysql_connect(“localhost”, “root”, “mysqlpass”);

Terima Kasih