Jumat, 28 Oktober 2011

PHP

PHP adalah singkatan dari Hypertext Pre Processor.

PHP dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memprogram situs web dinamis.
Dengan PHP, kita dapat membuat berbagai macam aplikasi berbasis web, mulai dari halaman web yang sederhana, hingga ke halaman web yang kompleks yang membutuhkan koneksi ke database.


Kelebihan PHP dari Bahasa Pemrograman Lain
  1. Bahasa Pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaannya

  2. Web server yang mendukung PHP dapat ditemukan dimana-mana dari mulai Apache, IIS, lighttpd, dan lainnya

  3. Dalam sisi pengembang lebih mudah, karena banyaknya milis-milis dan developer yang siap membantu dalam pengembangan

  4. Dalam sisi pemahaman, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak

  5. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah sistem

Contoh Sederhana Menulis sebuah teks dengan PHP


<!--contoh1.php-->
<html>
<head>
<title>Contoh Sederhana</title>
</head>

<body>
<?php print("Ini contoh PHP... <b>by Anissa Siti Rahma</b>");?>
</body>
</html>

Contoh di atas disimpan dengan nama contoh1.php (dengan ekstensi .php).
Untuk merunning sebuah file php, kita tidak dapat melakukannya dengan langsung menjalankan pada web browser.

Langkah yang harus kita lakukan untuk menjalankan sebuah file php, yaitu:
  1. Menginstall xampp

  2. Menyimpan file php dengan ekstensi .php

  3. Memindahkan file php ke dalam folder htdocs di dalam xampp (C:/Program Files/xampp/htdocs)

  4. Buka web browser

  5. Ketikkan localhost/nama_file.php pada url web browser (pada contoh ketikkan : localhost/contoh1.php

Dengan mengikuti langkah di atas, barulah file php yang telah dibuat akan dapat dijalankan,
dari contoh di atas akan tampil seperti di bawah :


Dalam menulis atau mencetak sebuah teks dengan php, ada beberapa fungsi yang dapat digunakan, yaitu echo, print, dan printf.
Ketiga fungsi tersebut memiliki kelebihan dan kekurangan tersendiri, berikut akan dijelaskan perbedaan antara printf dan echo :


Masing-masing fungsi memiliki kelebihan dan kekurangan masing-masing, untuk penggunaannya, tergantung dari kita sendiri, fungsi mana yang ingin kita gunakan.

Menggunakan POST dan GET
PHP dapat digunakan untuk mengentri dan menampilkan data. Dalam hal ini, fungsi yang digunakan yaitu POST atau GET.

Cara penulisan metode POST, yaitu:
<form method="POST" action="process.php">
Nama:<input type="text" name="nama">
echo$_POST[nama];

Cara penulisan metode GET, yaitu:
<form method="GET" action="process.php">
Nama:<input type="text" name="nama">
echo$_GET[nama];

Penulisan kedua fungsi tersebut pada dasarnya sama, hanya saja berbeda pada penulisan POST dan GET. Bila kita ingin menggunakan GET, maka kita hanya perlu mengganti semua yang tertulis POST dengan GET.

Contoh Input Form
Untuk membuat sebuah input form, maka kita membuat 2 file, yaitu file html dan file php itu sendiri.

File html Input Form "LPD.html"
<html>
<head>
<title>Contoh Pemasukkan Data</title>
</head>

<body>
<FORM ACTION="salam.php" METHOD="POST">
Input nama:<br>
<INPUT TYPE="text" NAME="nama_pemakai"><br>
<INPUT TYPE="submit" Value="Kirim">
</FORM>
</body>
</html>

File php "salam.php"
<html>
<head>
<title>Latihan Menampilkan Variabel</title>
</head>

<body>
<?php
$nama_pemakai=$_POST["nama_pemakai"];
print("Selamat Belajar,<b>&nama_pemakai</b>");
?>
</body>
</html>

Seperti contoh sebelumnya, kedua file tersebut dimasukkan ke dalam htdocs. Lalu kita jalankan melalui web browser dengan cara sebelumnya. Pada contoh di atas, misal kita memasukkan ke dalam folder yang diberi nama ica. Maka pada url kita ketikkan : localhost/ica/LPD.html

Maka akan dihasilkan:


Lalu pada form Input Nama, masukkan teks bebas, sebagai contoh nama penulis, Anissa Siti Rahma


Maka akan muncul seperti di bawah :



Contoh tersebut adalah contoh dengan menggunakan POST. Bila kita menggunakan GET, maka perbedaan terletak pada URL. Pada contoh di atas, url setelah kita masukkan nama menjadi localhost/ica/salam.php, bila kita ganti fungsi input dengan menggunakan GET, maka nama inputan juga akan tertera pada URL menjadi :
localhost/ica/salam.php?nama_pemakai=Anissa+Siti+Rahma

Selengkapnya...

Senin, 24 Oktober 2011

HTML

HTML adalah singkatan dari Hyper Text Markup Language.

HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarangan, dan dokumen yang dihasilkan disebut dengan web page.

Ada 2 cara membuat sebuah web page, yaitu dengan HTML editor (seperti HTML Validator) atau dengan editor teks biasa (misalnya notepad).


Penamaan Dokumen
Penammaan dokumen ini dapat dengan sembarang nama, kemudian ditambahkan ekstensi .htm atau .html

Elemen HTML

Elemen-elemen HTML ditandai dengan menggunakan tag.

Tag HTML ditandai dengan kurung kiri (<), nama tag, dan kurung kanan (>).

Tag umumnya berpasangan, sebagai contoh, bila terdapat tag <H1> maka harus diakhiri dengan tag </H1>.

Tag akhiran berisi nama tag yang sama dengan tag awal namun ditambahkan tanda garis miring (/).

Namun, ada juga beberapa tag yang tidak berpasangan, seperti <br>.

Elemen Dasar HTML
Elemen dasar yang dibutuhkan dalam membuat sebuah halaman HTML, yaitu:

<html> ... </html> , setiap dokumen html harus diawali dan diakhiri dengan tag ini

<head> ... </head> , bagian ini berisi informasi tentang dokumen html. Informasi minimal yang harus dimasukkan pada bagian ini yaitu judul halaman html, yang ditandai dengan tag <title> ... </title> ...

<body> ... </body> , bagian ini merupakan bagian terbesar dalam dokumen html. Elemen ini berisi dokumen apa saja yang akan ditampilkan pada browser

Contoh Dasar :

<!--contoh1.html-->
<html>
<head>
<title>Html Pertama</title>
</head>

<body>
Ini homepage pertama... <b>by Anissa Siti Rahma</b>
</body>
</html>

Contoh di atas kita tulis pada notepad dan disimpan dengan nama contoh1 dengan ekstensi .html, bila dijalankan pada web browser, maka akan tampil seperti di bawah ini:




Contoh di atas merupakan contoh dasar penulisan sebuah web page menggunakan html.

Biasanya, dalam menulis sebuah dokumen, terdapat perbedaan antara judul dan isi dari dokumen tersebut. Html menyediakan tag yang berfungsi untuk memberikan tampilan yang berbeda-beda untuk judul-judul pada penulisan dokumen, yang kita kenal dengan heading.
yaitu:

<H1> ... </H1>
<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>
untuk melihat perbedaan dari masing-masing heading, dapat kita tes dengan menuliskan source code di bawah ini :

Contoh Heading :

<!--contoh2.html-->
<html>
<head>
<title>Perbedaan Heading</title>
</head>

<body>
<H1>Heading ke-1</H1>
<H2>Heading ke-2</H2>
<H3>Heading ke-3</H3>
<H4>Heading ke-4</H4>
<H5>Heading ke-5</H5>
<H6>Heading ke-6</H6>
</body>
</html>

Contoh di atas kembali kita simpan dengan ekstensi .html dan hasil yang tampil ketika dijalankan pada web browser yaitu :

dengan adanya heading ini, kita tidak perlu repot-repot mengatur ukuran setiap judul. Hanya dengan menggunakan tag header, judul dokumen secara otomatis sesuai dengan penulisan judul yang kita inginkan.

Namun, bila kita menginginkan pengaturan tersendiri terhadap teks yang akan dituliskan (misalnya ingin mengatur warna dan font tulisan), kita dapat menggunakan tag <font> ... </font>

Untuk mengatur jenis tulisan, pada tag tersebut ditambahkan elemen face = "..." , untuk mengatur warna tulisan tambahkan elemen color = "..." , dan untuk mengatur ukuran tulisan tambahkan elemen size = "...".
Untuk lebih jelasnya, kita langsung masuk ke contoh,

Contoh Font :

<!--contoh3.html-->
<html>
<head>
<title>Contoh Font</title>
</head>

<body>
Ini tulisan yang tidak diubah<br>
<font face="Consolas" color="red" Size="4">Ini adalah tulisan yang telah diubah</font>
</body>
</html>

Hasil tampilan pada web browser yaitu:


Terlihat perbedaan warna, jenis tulisan, dan ukuran tulisan pada contoh di atas.


Membuat TABEL pada HTML
Dengan HTML kita dapat juga membuat sebuah tabel. Kita dapat menggunakan tag <table>...</table> untuk membuat sebuah tabel.
Tag-tag yang digunakan dalam tag table yaitu
<tr>...</tr> , untuk membuat baris
<td>...</td> , untuk membuat kolom
untuk lebih jelas, kita dapat langsung melihat contoh pembuatan tabel dengan HTML

Contoh Membuat Tabel :


<!--Contoh4.html-->
<html>
<head>
<title>Membuat Tabel</title>
</head>

<body>
Ini adalah tabel<br>
<table border="1">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>


Tampilan program di atas pada web browser yaitu:



border digunakan untuk membuat border pada tabel, value atau nilai yang diisikan pada border menunjukkan ketebalan dari border (pembatas) tabel tersebut. Semakin besar value border, maka border tabel akan semakin tebal.
Selain border, terdapat banyak fungsi lainnya dalam sebuah tabel, salah satunya yaitu untuk memberikan background atau warna pada tabel.
Hal tersebut dilakukan dengan menuliskan background (untuk memasukkan gambar pada background tabel) atau dengan bgcolor (untuk memberikan warna background pada tabel.

Contoh Warna Background Tabel :

<!--Contoh5.html-->
<html>
<head>
<title>Mengubah background tabel</title>
</head>

<body>
Ini adalah tabel dengan background gambar<br>
<table border="1" background="River Sumida.bmp">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>

<br>Ini adalah tabel dengan background warna<br>
<table border="1" bgcolor="blue">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>

Tampilan program di atas pada web browser yaitu:



Memasukkan Gambar dalam dokumen HTML
Dalam membuat sebuah halaman web, bagaikan sayur tanpa garam bila kita tidak memasukkan gambar-gambar ke dalamnya. HTML menyediakan fasilitas agar kita dapat memasukkan sebuah gambar ke dalam dokumen html. Elemen yang digunakan yaitu <img src="nama_gambar.ekstensigambar" tanpat menggunakan tag akhir.
Langsung dapat kita lihat pada contoh program.

Contoh Memasukkan Gambar


<!--Contoh6.html-->
<html>
<head>
<title>Memasukkan Gambar</title>
</head>

<body>
Ini adalah sebuah gambar :<br>
<img src="Zapotec.bmp">
<br><br>
Dan ini adalah gambar dengan ukuran tertentu :<br>
<img src="Zapotec.bmp width="50" length="50">
</body>
</html>


Tampilan program di atas pada web browser yaitu:



Pada contoh di atas, gambar pertama menampilkan gambar dengan ukuran asli dari gambar tersebut, namun pada gambar kedua, kita menentukan sendiri ukuran dari gambar tersebut dengan menambahkan width="..." (untuk mengukur panjang gambar dan length="..." (untuk mengukur tinggi gambar) di dalam tag <img src="...">

Mengatur posisi gambar
Untuk mengatur posisi sebuah gambar kita dapat menggunakan fungsi align="posisi".
Posisi di atas dapat diisi sebagai bottom (gambar di bawah teks), middle (gambar di antara teks), top (gambar di atas teks), left (gambar di ujung kiri), dan right (gambar di ujung kanan). Posisi di atas berurut-urut dapat di lihat dengan program di bawah ini:

Contoh Posisi Gambar

<!--Contoh7.html-->
<html>
<head>
<title>Menentukan Posisi Gambar</title>
</head>

<body>
<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="bottom">
di bagian bawah teks
</p>

<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="middle">
di bagian tengah teks
</p>

<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="top">
di bagian atas teks
</p>

<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="left">
di ujung kiri teks
</p><br>

<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="right">
di ujung kanan teks
</p>
</body>
</html>

Hasil penentuan posisi gambar tersebut dapat dilihat pada web browser seperti berikut:



Membuat Link
Untuk membuat sebuah link, kita dapat menggunakan tag <a href="link destination"> dan diakhiri dengan tag </a>. Tag awal dan tag akhir ini diletakkan di bagian awal dan bagian akhir dari teks yang akan digunakan sebagai link. Selain teks, dapat juga digunakan gambar sebagai sebuah link.
Link digunakan untuk melompat ke halaman web lainnya atau dapat juga melompat ke sebuah dokumen atau file tertentu yang kita inginkan.

Contoh LINK

<!--Contoh8.html-->
<html>
<head>
<title>Membuat LINK</title>
</head>

<body>
Teks ini adalah sebuah link... =>
<a href="contoh3.html">masuk ke contoh 3&lt/a>
<br><br>
Gambar ini juga adalah sebuah link... =>
<a href="Contoh4.html><img

src="Zapotec.bmp">&lt/a>
</body>
</html>

Pada web browser akan terlihat seperti berikut :



Jika teks "masuk ke contoh 3" di klik, maka akan masuk ke halaman web Contoh3.html
Dan jika gambar tersebut di klik, maka akan masuk ke halaman web Contoh4.html

Menggerakkan teks atau gambar
Untuk menggerakkan sebuah teks atau gambar dapat digunakan <marquee>...</marquee>.
Titik-titik (...) di antara kedua tag diisi dengan teks atau gambar yang akan digerakkan.

Contoh Menggerakkan teks atau gambar


<!--Contoh9.html-->
<html>
<head>
<title>Menggerakkan Teks atau Gambar</title>
</head>

<body>
<marquee>Teks ini bergerak</marquee>
<br><br>
<marquee><img src="Zapotec.bmp"></marquee>
</body>
</html>

Contoh di atas akan menghasilkan teks dan gambar yang akan

bergerak seperti teks bergerak di bawah ini :
Teks ini bergerak

Selengkapnya...

 
It's My World - Blogger Templates, - by Templates para novo blogger Displayed on lasik Singapore eye clinic.