Pemrograman Berorientasi Obyek: Pertemuan-2

PEMROGRAMAN
BERORIENTASI OBYEK
PERTEMUAN-2
Semester-3
JURUSAN TEKNIK INFORMATIKA

PENGANTAR
PEMROGRAMAN WEB
Hyper Text Markup Language
HTML Dokumen HTML adalah sebuah bahsa markah yang digunkan untuk membuat sebuah halaman
web, menampilkan berbagai informasi di dalam sebuah penjelajah web internet dan
pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat
menghasilkan tampilan wujud yang terintegrasi. adalah file teks murni yang dapat dibuat dengan
editor teks sembarang (wikipedia)
HTML
Menyiapkan file .html =>buat file dengan nama index.html
1. <!DOCTYPE html>
2. <html>
3. <head>
Informasi tentang
4. <title></title>
Dokumen. html 5. </head>
Informasi yg 6. <body>
ditampilkan dalam 7. ………
8. </body>
browser web
9. </html>
Tag-tag dasar html
<html> <html> <html> <html>
….. <head> <head> <head>
….. ….. ….. <title> … </title>
</html> </head> </head> </head>
</html> <body> <body>
….. <p> Ini adalah paragraf.</P>
….. <p> Ini adalah paragraf.</p>
</body> <p> Ini adalah paragraf.</p>
</html> </body>
</html>
Paragraf
<P>… : untuk paragraf tidak harus diakhiri </p>, karena <p> tidak didefinisikan mempunyai tag akhir
Menjadi 3 paragraf Menjadi 3 paragraf Menjadi 1 paragraf
<html> <html> <html>

<head> <head> <head>
<title> … </title> <title> … </title> <title> … </title>
</head> </head> </head>
<body> <body> <body>
<p> Ini adalah paragraf.</P> <p> Ini adalah paragraf. Ini adalah paragraf
<p> Ini adalah paragraf.</p> <p> Ini adalah paragraf. Ini adalah paragraf
<p> Ini adalah paragraf.</p> <p> Ini adalah paragraf. Ini adalah paragraf
</body> </body> </body>
</html> </html> </html>
Mengganti baris
<br> : line break adalah untuk ganti baris, meskipun dalam satu paragraf
<html>
<head>
<title> … </title>
</head>
<body>
<p>
Memotong <br>baris<br>dalam suatu<br>paragraf, <br>gunakan tag br.
</p>
</body>
</html>
Heading
<hy>….</hy> : untuk heading (h1 Align heading=> mengatur letak heading

sampai dengan h6)
<html> <html>
<head> <head>
<title> … </title> <title> … </title>
</head> </head>
<body> <body>
<h1> heading 1</h1> <h1 align=“center”> heading 1</h1>
<h2> heading 2</h2> <p> Rata tengah
<h3> heading 3</h3> <h1 align=“right”> heading 2</h1>
<h4> heading 4</h4> <p> Rata kiri
<h5> heading 5</h5> <h1 align=“left”> heading 3</h1>
<h6> heading 6</h6> <p> Rata kanan
<p> </body>
Gunakan hanya untuk heading </html>
</p>
</body>
</html>
Komentar
 : Tag komentar yang disembunyikan
<html>
<head>
</head>
<body>
<!– Text ini tidak ditampilkan -->
<p>Ini paragraf yang ditampilkan.
</body>
</html>
Form Input => Field Text
<form>
….
</form>
<html>
<head>
</head>
<body>
<form>
Nama Depan :
<input type="text" name="firstname">
<br>
Nama Keluarga :
<input type="text" name="lastname">
</form>
</body>
</html>
Form Input => Dropdown box sederhana
Dropdown box adalah daftar yang bisa dipilih
<html> <form>
<head> <select>
<title> … </title> </select>
</head> </form>
<body>
Merek mobil yang dapat dipilih
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
Form Input => Text Area
<form>
….
Untuk menuliskan karakter yang tidak terbatas
</form>
<html>
<head>
</head>
<body>
<p>Ini contoh menggunakan text area untuk memasukan data berupa komentar, dll, bersifat mirip artikel
</p>
<form>
<textarea rows="10" cols="30">Hari ini ada penyemprotan disinspektan.</textarea>
</form>
</body>
</html>
Form Input => Field Input
Menambah sebuah form kedalam suatu page. Form berisi satu filed input dan
sebuah tombol submit
<html>
<head>
</head>
<body>
<form name="input" action="html_form_action.asp" method="get">
Masukan nama Anda:
<input type="text" name="FirstName" Value="Mickey">
<br>
<input type="submit" value="Submit">
</form>
<p>
Jika tombol submit di klik, maka anda akan mengirimkan data ke page baru yang disebut form_action.asp
</p>
</body>
</html>
Cascade Style Sheet
CSS CSS : Cascade Style Sheet
Feature baru html.4.0, ini muncul karena webpage terlalu dibebani oleh hal-hal berkaitan
dengan tampilan seperti font dan lain-lain
Jika kumpulan style ini dikelola secara terpisah, maka manajemen page menjadi lebih mudah dan
efesien
Aturan penggunaan CSS
Disusun oleh tiga bagian yaitu:

Selector : Elemen yang akan didefinisikan
Properti : Atribut yang akan dirubah
Value atau Nilai
Selector {property: value}

Style Sheet External:
Contoh berikut memasukan CSS ke dalam HTML
body {background-color: yellow}

h1 {font-size: 36pt} <!DOCTYPE html>
h2 {color: blue} <html>
p {margin-left: 50px} <head>
<link rel="stylesheet" type="text/css" href="ext1.css">
</head>
<body>
<h1>This Header is 36 pt</h1>
<h2>This Header is Blue</h2>
<p>This paragraph has a left margis of 50pixels</p>
</body>
</html>
Structured Query Language
SQL Adalah sebuah bahasa yang digunakan untuk mengakses data dalam basis data relasional.
Bahasa ini secara de facto merupakan bahasa standar yang digunakan dalam manajemen basis
data relasional. Saat ini hampir semua server basis data yang ada, mendukung bahasa ini untuk
melakukan manajemen datanya.
(Wikipedia)
Membuat Tabel Objek
Ini adalah contoh tebal “objek”
Primary Key : id_objek
Id ini tidak boleh sama “AUTO_INCREMENT”
Membuat Tabel Objek
Tabel berhasil dibuat
Memasukan data ke dalam tabel “objek”
Dengan menggunakan perintah SQL, lakukan input/insert data pada
tabel objek
INSERT INTO `objek`(`id_objek`, `nama_objek`, `lati`, `longi`)VALUES

(‘1', 'Masjid Agung Baeturrahim', '109.005841', '-7.252618'),
('2', 'Pasar Bumiayu', '109.005892', ' -7.254150'),
(‘3', 'Kantor Polisi Bumiayu', '109.007561', '-7.255745'),
(‘4', 'Universitas Peradaban', '109.025336', ' -7.281685');
Jika berhasil, maka akan

tampak sebagai berikut
Hypertext Preprocessor
PHP
bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan
pengembangan sebuah situs web dan bisa digunakan bersamaan dengan CSS dan HTML. PHP
diciptakan oleh Dr. Leonardo Bernart pertama kali tahun 1994. Pada awalnya PHP adalah
singkatan dari "Personal Home Page Tools". Selanjutnya diganti menjadi FI ("Forms Interpreter").
Sejak versi 3.0, nama bahasa ini diubah menjadi "PHP: Hypertext Preprocessor" dengan
singkatannya "PHP"
JavaSript
js JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. Javascript adalah sebuah
bahasa komputer atau kode pemrograman yang digunakan pada website agar website tersebut
menjadi lebih interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client side.
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape di bawah nama Mocha,
yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript

Pemrograman Berorientasi Obyek: Pertemuan-2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pemrograman Berorientasi Obyek: Pertemuan-2

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN

JURUSAN TEKNIK INFORMATIKA

Menjadi 3 paragraf Menjadi 3 paragraf Menjadi 1 paragraf

<html> <html> <html>

<hy>….</hy> : untuk heading (h1 Align heading=> mengatur letak heading

: Tag komentar yang disembunyikan

Dropdown box adalah daftar yang bisa dipilih

Disusun oleh tiga bagian yaitu:

Selector {property: value}

body {background-color: yellow}

INSERT INTO `objek`(`id_objek`, `nama_objek`, `lati`, `longi`)VALUES

Jika berhasil, maka akan

Anda mungkin juga menyukai