Pemrograman Web
Overview HTML Basis Data PHP ASP Java, JDBC dan JSP JavaScript
HTML
TIK TIK.PR02.024.01 Membuat dokumen dengan HTML sesuai spesifikasi Menerapkan dasar-dasar pembuatan web statik dasar
HTML World Wide Web Pengenalan HTML Tag Apa itu WWW? Proses request page Pengenalan HTML Sejarah HTML Tag Apa itu tag? Format tag
HTML Editor HTMl Notepad FrontPage
HTML Cascading Style Sheet Eksternal Style Sheet <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Internal Style Sheet <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> Inline Style Sheet <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
HTML (Contd) Gambar Tipe-tipe file gambar – GIF, JPEG, PNG <img src=“”>
HTML (Contd) Logical Tag Table <em> … </em> Style tag <font>…</font>, <style>…</style>, <i>…</i> Table Kolom : <td> … </td> Baris : <tr> … </tr> <table>…</table>
HTML (Contd) Frame Frameset Target Frame Iframe
HTML (Contd) Format Teks Heading <h1>…</h1> hingga <h6>…</h6>
HTML (Contd) Paragraph <p> … </p>
HTML (Contd) Kutipan <Blockquote>…</Blockquote>
HTML (Contd) Link <a href = “”> … </a>
HTML (Contd) List Ordered List <ol> … </ol>
HTML (Contd) Unordered List <ul> … </ul>
HTML (Contd) Definition List <dl> … </dl>
Basis Data
TIK TIK.PR02.021.01 Menerapkan basis data
Basis Data Terminologi Manipulasi Data Definisi Basis data, DBMS, Query, Table, Record, Primary Key, Foreign Key, Data Manipulation Language, Data Definition Language Manipulasi Data Select SELECT * FROM buku WHERE harga > 100.00 ORDER BY judul Insert INSERT INTO tabelSaya (kolomA, kolomB, kolomC) values (‘nilaiA’, ‘nilaiB’, ‘nilaiC’) Update UPDATE tabelSaya set kolomA = ‘updateA’, kolomB = ‘updateB’ WHERE kolomC = ‘C’ Delete DELETE tabelSaya WHERE kolomA = ‘A’
Basis Data Mengabungkan tabel (Join) SELECT NmAkhirPem, NmAwalPem FROM PemilikBrgAntik, BarangAntiks WHERE NoPenj = NoPem AND Barang= 'Kursi‘ Menghilangkan record yang sama (Distinct) SELECT DISTINCT NoPenj, NmAkhirPem, NmAwalPem FROM BarangAntiks, PemilikBrgAntik WHERE NoPenj = NoPem ORDER BY NmAkhirPem, NmAwalPem, NoPem
Basis Data (Contd) Subquery SELECT Own.NmAkhirPem Nama Akhir, Ord.Pes_Pem Barang Pesanan FROM Pesanan ord, PemilikBrgAntik own WHERE Ord.NoPem= own.NoPem AND Ord.Pes_pem in (SELECT Barang FROM BarangAntik) Data Definition Language Perintah untuk membuat table CREATE TABLE tabelSaya (kolom1 INT UNSIGNED, kolom2 VARCHAR (50), PRIMARY KEY (kolom1, kolom2) ) View CREATE VIEW ANTVIEW AS SELECT Pes_Pem FROM Pesanan;
Basis Data Stored Procedure dan Trigger Stored Procedure : sekumpulan query yang disimpan dalam file Trigger :
Basis Data Fungsi Agregasi Sum, Avg, Max, Min, Count Contoh : SELECT MIN(Bonus) FROM TabelKaryawan WHERE Jabatan = 'Manager';
PHP
TIK TIK.PR02.021.01 Menerapkan basis data TIK.PR02.028.01 Menerapkan dasar-dasar pembuatan web statik lanjut TIK.PR04.003.01 Membuat halaman web dinamis lanjut TIK.PR04.006.01 Menerapkan dasar validasi unjuk kerja situs web TIK.PR04.007.01 Mengintegrasikan sebuah basis data dengan sebuah situs web TIK.PR08.009.01 Membuat program aplikasi web berbasis PHP
PHP Pengenalan PHP Variabel, Tipe data dan Operator Instalasi Apache atau IIS Instalasi PHP di Linux atau Windows Variabel, Tipe data dan Operator Variable $pajak = 0.0875; Variabel global $_ENV, $_COOKIES, $_GET, $_POST float, integer, string, array Array : $Warna[“satu”] = “merah”; atau $Warna[0] = "merah"; Operator penugasan, pembandingan, logika
PHP (Contd) Pemrograman PHP Inisialisasi Variabel $gaji = 2000000; printf (“Gaji semula = %d <BR>\n”, $gaji); $gaji = “Tiga Juta Rupiah”; printf (“Gaji semula = %s <BR>\n”, $gaji); Menangani Input dan Output $fp = @fopen('file.txt', 'at') Aliran kontrol If…else, switch For, while
PHP (Contd) Ekspresi Reguler Pembuatan fungsi ereg (pola, sumber) Contoh : function nama_func ($arg_1, $arg_2, ..., $arg_n) { echo "Contoh fungsi.\n"; return $retval; }
PHP (Contd) Kelas dan Objek Pembuatan Kelas pada PHP 5 Membuat Objek Contoh Pembuatan Kelas : <?php class myPHP5Class { public $my_variable; public function my_method($param) { echo "Hello, you called my_method($param)!\n"; echo "The value of my variable is: "; echo "$this->my_variable}\n"; } }?> Membuat Objek $var = new myPHP5Class()
PHP (Contd) Pemrograman Form Contoh kode : <FORM method="POST" action=" perhitungan.php"> <!— Beberapa elemen form berada di sini --> <INPUT type="submit" value="Hitung"> </FORM> Method : $_POST, $_GET Debugging Kesalahan Sintaks, Semantik dan Logika Pesan Kesalahan : Level kesalahan: pesan_kesalahan nama_berkas baris_kesalahan
PHP (Contd) Aplikasi Basis Data Perangkat Basis data MySql Pembuatan basis data dan tabel Menghubungkan basis data Pemrograman basis data
Java, JDBC dan JSP
Java, JDBC dan JSP TIK.PR02.005.01 Menulis program dasar TIK.PR02.006.01 Menulis program lanjut TIK.PR02.009.01 Mengoperasikan bahasa pemrograman berorientasi obyek TIK.PR02.010.01 Menggunakan library atau komponen-komponen pre-exiting TIK.PR02.012.01 Mengkompilasi dan menjalankan sebuah aplikasi TIK.PR02.013.01 Menulis dan mengkompilasi kode program sesuai dengan kebutuhan TIK.PR08.011.01 Membuat program aplikasi web berbasis JSP TIK.PR08.012.01 Membuat program aplikasi berbasis JAVA
Java, JDBC dan JSP Pengetahuan Umum mengenai Java Program Java public class Hello { public static void main(String[] args) { System.out.println(“Hello, World!”); } Proses Kompilasi Souce code Compiler Byte code Intepreter Program berjalan Library
Java, JDBC dan JSP Tipe data Method, Variabel dan Kelas angka, konstan, string, array, tipe primitif Tipe primitif : int, char, byte, short, boolean int a[] = new int[3] int a[][] = new int[3][3] Method, Variabel dan Kelas public class RekeningTabungan { public RekeningTabungan(double bunga) { sukuBunga = bunga; } private double sukuBunga;
Java, JDBC dan JSP Flow Kontrol Applet for, while, do…while, switch…case Applet Program Java yang berjalan di browser Contoh : import java.applet.Applet; public kelas ContohApplet extends Applet { public void paint(Graphics g) {} } <applet>…</applet>
Java, JDBC dan JSP Swing Komponen Swing Contoh : import javax.swing.*; public class FrameTest extends Frame { public static void main(String[] args) {} } Komponen Swing JLabel, JTextField, JButton, JCheckBox, JComboBox, JPanel
Java, JDBC dan JSP JLabel Menampilkan teks pada Frame
Java, JDBC dan JSP JTextField Tempat memasukkan input atau menampilkan teks
Java, JDBC dan JSP JButton Menghasilkan event ketika diklik
Java, JDBC dan JSP JCheckBox Menghasilkan nilai True atau False
Java, JDBC dan JSP JComboBox Disebut juga DropDownList
Java, JDBC dan JSP Socket Endpoint dari link komunikasi 2 arah Paket java.net
Java, JDBC dan JSP (Contd) Apa itu JDBC? Koneksi dengan SQL Server 2000 Class.forName() java.sql.*; Operasi Basis data Menampilkan data Memasukkan data Menghapus data Mengubah data
Java, JDBC dan JSP (Contd) Keuntungan JSP Halaman JSP Kode jsp, kode java, file .class JSP Cookies Data yang dikirim web server ke browser client Cookie(java.lang.String nama, java.lang.String nilai) JSP Session Digunakan untuk menyimpan data session.setAttribute("username",username);
Java, JDBC dan JSP (Contd) Aplikasi Web dengan Server Komponen JSP Perintah <%@ nama_perintah [nama_atribut=”nilai_atribut” ...] %> Element Scripting <%=exp%> Aksi <tagname [attr=”valew” attr=”value”...]>...</tag-name> Instalasi JDK Tomcat
ASP dan ASP .NET
ASP dan ASP .NET TIK.PR02.014.01 Melakukan debugging program TIK.PR08.010.01 Membuat program aplikasi web berbasis ASP
ASP dan ASP .NET Pengenalan .NET Pengenalan ASP dan ASP .NET Dapat digunakan untuk membuat aplikasi computer-based dan web-based Pengenalan ASP dan ASP .NET
ASP .NET Pemrograman Control <%@ Control Language="VB" %> Data event dan Event delegate Session dan Cookies Cookies adalah teks kecil yang mengiringi request dari halaman web Response.Cookies("userName").Value = "mike" Session adalah periode waktu user berinteraksi dengan halaman web
ASP .NET Trace dan Debugging Keamanan ASP .NET <%@ Page Trace="true" %> Class Systems.Diagnostic Keamanan ASP .NET Menghubungkan data dengan ADO .NET Objek Connection SQLConnection, OleDbConnection, OracleConnection
ASP .NET Caching Pengaturan traffic pada halaman web Refreshing Memaksa sebuah halaman redirect Client Pull Halaman yang tidak merespon
ASP Sintaks ASP Procedure sub vbproc(num1,num2) <% kode %> Procedure Contoh : sub vbproc(num1,num2) response.write(num1*num2) end sub VBScript Bahasa default untuk scripting di ASP
ASP ASP Response Object, Menampilkan output server ASP Request Object Memperoleh informasi dari user ASP Server Object Mengakses property dan method server Session dan Cookies <%Response.Cookies("nama_awal")="Alex" %>
ASP Komponen ASP ASP AdRotator Menampilkan gambar yang berbeda ketika user memasuki atau me-refresh halaman ASP BrowserCap Mendapatkan informasi mengenai browser ASP ContentLinking Membuat sistem navigasi yang mudah ASP ContentRotator Menampilkan HTML content string yang berbeda tiap kali user memasuki atau me-refresh halaman yang berbeda
Javascript
TIK TIK.PR04.006.01 Menerapkan dasar validasi unjuk kerja situs web
Javascript Pemrograman Javascript Javascript dan HTML Variabel dan Tipe data Penggunaan Variabel dan Literal var sum; objectName={property:value} Operator Assignment, Arimatika, Logika, String
Javascript Dates dan Math Objek date Manipulasi tanggal dan waktu Penggunaan dan manipulasi Date var myDate=new Date() Objek Math Melakukan fungsi matematika Penggunaan Math sin(), cos(), min(x,y)
Javascript (Contd) Objek Window Apa itu Objek Window? Method alert(), close(), confirm() Event Handler onBlur, onError, onLoad Dialog Box alert(), confirm(), prompt() Status Bar Message Browser menampilkan pesan pada pengguna Manipulasi Window window.close(), window.open()
Javascript (Contd) Objek Dokumen Menyatakan isi dari window atau form Dynamic document Flow Control if, if/else, switch for, for/in, while, do/while, break, continue
Javascript (Contd) Frame Validasi data untuk Form HTML Frame Script dengan Frame Setiap frame memiliki objek window yang berbeda Window.parent, window.top Validasi data untuk Form Objek Form Menggambarkan form dalam HTML Pengujian untuk fields tertentu Validasi data numerik isNan(), parseInt(), parseFloat() Validasi data string Regular Expression