0% menganggap dokumen ini bermanfaat (0 suara)
14 tayangan

HTML Dasar

Diunggah oleh

marsupilami13666
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
14 tayangan

HTML Dasar

Diunggah oleh

marsupilami13666
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 33

BAGIAN 1

Instalasi dan Konfigurasi


Software

Belajar HTML dan PHP Page 1


Bagian

1
Instalasi dan Konfigurasi XAMPP

 Memperoleh Software Xampp


Software Xampp versi terbaru dapat anda peroleh disitus resmi Xampp :
https://www.apachefriends.org/. Dalam ebook ini penulis menggunakan Xampp
versi 3.2.2. versi inilah yang akan digunakan sebagai contoh instalasi dan
konfigurasi.

 Melakukan Instalasi dan Konfigurasi


Xampp
Sebelum kita mempelajari materi-,ateri yang terdapat dalam ebook ini, kita
perlu memasang software Xampp versi 3.2.2 terlebih dahulu, yang kita gunakan
sebagai server database pada saat memepelajari materi tentang akses database
melalui PHP. Pada ebook ini anda akan dibimbimng secara langsung untuk dapat
mempraktikkan setiap materi yang disampaikan.

Pratikum 1-1 : Melakukan Instalasi Xampp


 Download software Xampp disitus Https://www.apachefriends.org/

Belajar HTML dan PHP Page 2


 Instal Xampp

 Klik Next untuk melanjutkan pemasangan

 pada halaman ini kita disuruh untuk memilih komponen mana yang
akan kita instal. Beberpa pilihan yang terdapat pada gambar diatas,
kemudian klik next.

Belajar HTML dan PHP Page 3


 gambar diatas adalah pemilihan tempat direktori mana xampp akan


dipasangkan, kemudian klick next.

 Pada halaman selanjutnya, akan ada pilihan apakah Anda ingin


menginstal Bitnami untuk XAMPP, dimana nantinya dapat Anda
gunakan untuk install WordPress, Drupal, dan Joomla secara
otomatis. Pada langkah ini proses instalasi XAMPP akan dimulai.
Silakan klik tombol Next.

Belajar HTML dan PHP Page 4


 Setelah berhasil diinstal, akan muncul notifikasi untuk langsung
menjalankan control panel. Silakan klik Finish.

 Membuat Aplikasi “Hello Word”


Untuk memeriksa apakah software xampp yang terpasang di komputer and
sudah siap digunakan atau belum, Anda dapat membuat kode sederhana. Disini,
anda akan diajak mempratikkan cara pembuatan kode pemograman PHP untuk
pertama kalinya.
Pratikum 1-2 : Membuat Aplikasi “Hello Word”

Belajar HTML dan PHP Page 5


 Jalankan aplikasi notepad ++, sublime, atau text editor anda
 Tuliskan kode program, berikut ini :

 Simpan dengan nama file HelloWord.php didalam direktori C:\


Xampp\htdocs.
 Kemudian jalankan dengan chrome dan masukkan alamat berikut :
http://localhost/HelloWord.php.
 Jika semua berjalan mulus, maka anda akan melihat tampilan
seperti berikut :

Belajar HTML dan PHP Page 6


BAGIAN 2
PHP Essential

Belajar HTML dan PHP Page 7


Bagian

2
Mengenal PHP

Setelah anda memasang semua software yang diperlukan di komputer anda, pada
bagian 2 ini anda akan mulai mempelajari tentang :
 Gambaran global tentang aplikasi web
 Cara kerja PHP
 Kerangka program PHP
 Memberikan komentar pada kode PHP
 Menggabungkan kode PHP dengan kode HTML

Belajar HTML dan PHP Page 8


Catatan :
Pada saat mempelajari bagian ini anda dianggap telah mengetahui HTML. Bagi
anda yang belum tahu, anda dapat mempelajarinya pada ebook saya yang akan
datang.

 GAMBARAN GLOBAL APLIKASI WEB

Aplikasi web adalah aplikasi yang disimpan dan dieksekusi di lingkungan


web server. Setiap permintaan yang dilakukan oleh user melalui aplikasi klien
(web browser) akan direspon oleh aplikasi web dan hasilnya akan ditampilkan
kehadapan user kembali. Dengan aplikasi web, halaman yang tampil dilayar web
browser dapat bersifat dinamis, tergantung dari nilai data atau parameter yang
dimasukkan oleh user. Komunikasi antara web browser dan aplikasi web dapat
digambarkan seperti berikut.

File Statik
Aplikasi
Aplikasi
CLient Web DBMS

Web Server

Seperti yang tampak pada gambar di atas bahwa aplikasi web dapat juga
digunakan untuk mengakses file-file yang bersifat statis (misal : dokumen HTML,
file gambar maupun file teks).
Berbeda dengan HTML dan kode pemograman client-side lainnya (misal :
JavaScript dan VbScript), kode dari aplikasi web tidak dapat dilihat atau dibaca
oleh user.

 SEKILAH TENTANG PHP

PHP adalah salah satu bahasa pemograman skrip yang dirancang untuk
membangun aplikasi web. Ketika dipanggil dari web browser, program yang
ditulis dengan PHP akan di-parsing didalam web server oleh interpreter PHP dan
diterjemahkan ke dalalm dokumen HTML, yang selanjutnya akan ditampilkan
kembali ke web browser. Karena pemrosesan program PHPdilakukan di
lingkungan web server, PHP dikatakan sebagai bahasa sisi server (server-side).
Oleh sebab itu, seperti yang telah dikemukakan sebelumnya, kode PHP tidak akan
terlihatpada saaat user memilih perintah ”View Source” pada web browser yang
mereka gunakan. Selain menggunakan PHP, aplikasi web juga dapat dibangun
dengan Java ( JSP-JavaServer Pages dan Servlet), Perl, maupun ASP (Active
Server Pages).

Belajar HTML dan PHP Page 9


 SINTAK PROGRAM PHP

PHP adalah bahsa yang dirancang untuk mudah diletakkan didalam kode
HTML. Banyak dijumpai kode PHP yang menyatu dengan kode HTML. Kode
PHP diawali dengan <?php Dan diakhiri dengan ?>. Dalam ebook ini kita akan
tetap menggunakan tag <?php dan ?> untuk menulis kode PHP.
Beikut ini contoh kode PHP yang sangat sederhana :

Adapun perintah echo didalam PHP digunakan untuk mencetak atau


mengambil suatu nilai, baik teks maupun numerik, ke layar web browser. Selain
echo, kita juga bisa menggukan perintah print, sehingga kode diatas juga bisa
ditulis sebagai berikut :

echo dan print juga memiliki bentuk penulisan yang lain, seperti
layaknya pemanggilan fungsi. Berikut ini bentuk lain tersebut.

Setiap perintah atau statement didalah kode PHP hasu diakhiri dengan titik
koma atau semi colon (;).

Hasil yang akan diberikan oleh kedua kode diatas adalah sama. Meskipun
demikin, penggunaan echo lebih banyak dgemari oleh programmer web.

 PRATIKUM MENGGUNAKAN ECHO DAN PRINT

 Buatlah sebuah direktori kerja dengan modul-PHP didalam C\xampp\


htdocs\.
 Jalankan aplikasi notepad++

Belajar HTML dan PHP Page 10


 Tuliskan kode berikut:

 Simpan kode diatas kedalam file dengan nama helloword.php dan


tempatkan ke direktori C:\xampp\htdocs\modul-php.
 Jalankan web browser dan masukkan alamat:
http://localhost/modul-PHP\helloword.php

 MENGGABUNGKAN KODE PHP DENGAM KODE HTML

Kode PHP dapay juga disisipkan kedalam kode HTML. Berikut ini contoh kode
yang dapat menunjukkan hal tersebut.

 PRAKTIKUM MENYISIPKAN KODE PHP DALAM HTML

 Jalankan aplikasi notepad++


 Tuliskan kode berikut:

Belajar HTML dan PHP Page 11


 simpan file dengan nama php-in-html.html
 jalankan web browser dan masukkan alamat :
http://localhost/modul-PHP/php-in-html.html

Keterangan :
Pada kode diatas, teks pada paragraf pertama berasal dari kode HTML
dan pada teks paragraf kedua kita menyisipkan kode PHP, dan setelah

Belajar HTML dan PHP Page 12


kode PHP ditutup kita juga membuat kode paragraf ketiga dengan
melanjutkan kode HTML kembali dan ditutup dengan HTML juga.

Ada pula programmer yang lebih suka membuat kode HTML dalam sintak
PHP murni. Meskipun begitu penulis tidak menyarankan agar anda tidak
menggunakan gaya penulisan seperti ini karena berdasarkan pengalaman
tersebut ternayat terdapat kesalahan (kode lebih sulit untuk di-debug).
Berikut contoh sederhana yang menunjukkan kode HTML dapat ditulis
dalam kode PHP murni.

 PRATIKUM MENULIS HTML DALAM KODE PHP

 Jalankan aplikasi notepad++


 Tuliskan kode berikut :

 Simpan file dengan nama html-in-php.php


 Jalankan web browser dan masukkan alamat :
http://localhost/modul-PHP/html-in-php.php

Belajar HTML dan PHP Page 13


Keterangan :
Pada kode diatas semua tag HTML yang ada ditulis dalam bentuk string,
yang kemudian ditampilkan menggunakan perintah echo.’

 MEMBERIKAN KOMENTAR PADA KODE PHP

Komentar berfungsi untuk memberika n informasi kepada orang yang


membaca kode program yang kita buat, tapi baris-baris komentar tersebut akan
diabaikan oleh PHP (tidak ikut terkompilasi sebagai kode program).
Contoh :

PHP menyediakan beberapa cara untuk memasukkan komentar kedalam


baris kode program, yang semuanya diadopsi dari bahasa yang telah ada
sebelumnya seperti C/C++.

 GAYA BAHASA C

Jenis komentar milik bahasa C ini bisa berlaku untuk komentar yang
berjumlah dari satu baris. PHP juga memberlakukan jenis komentar seperti ini.
Contoh :

Belajar HTML dan PHP Page 14


 GAYA BAHASA C++

Berbeda dengan jenis sebelumnya, jenis komentar ini dibuat dengan


menggunakan double slash (//) dan hanya berlaku untuk satu baris.
Contoh :

 GAYA UNIX-SHELL

Berbeda dengan jenis sebelumnya, jenis komentar ini jarang digunakan


oleh para programmer PHP. Komentar jenis ini dibuat dengan cara membubuhkan
tanda # didepannya.
Contoh :

 PRAKTIKUM MENULIS KOMENTAR DALAM KODE PHP

 Jalankan aplikasi notepad++


 Tuliskan kode berikut:

 Jalankan web browser dan masukan alamat:


http://localhost/HelloWord.php

Belajar HTML dan PHP Page 15


Keterangan :
Anda bisa lihat bahwa dianggap sebagai perintah program hanyalah baris
k-2. Baris ke-1, ke-3, dan baris ke-4 tidak akan ikut dieksekusi karena
merupakan komentar program. Pada baris ke-1, komentar dibuat
menggunakan tanda //, baris ke-3 dibuat menggunakan /* dan */, baris ke-
4 menggunakan #.

Belajar HTML dan PHP Page 16


BAGIAN 3
Tipe Data, Variabel, dan
Operator

Belajar HTML dan PHP Page 17


Bagian

3
Tipe Data, Variabel, dan Operator

Pada bagian sebelumnya, anda sudah mempelajari tentang konsep dasar aplikasi
web yang ditulis menggunakan PHP serta langkan-langkah pembuatan program
PHP yang dipadu dengan kode HTML. Dalam bagian ini kita akan melanjutkan
pembahasan dengan materi-materi berikut :

 Pengelompokan tipe data dalam PHP


 Pengenalan dan penggunaan variabel
 Pengenalan dan penggunaan operator

Belajar HTML dan PHP Page 18


 PENGELOMPOKAN TIPE DATA

PHP mendukung delapan tipe nilai data. Empat nilai skalar (single-value):
integer, floating-point, string, dan bolean; dua nilai koleksi: array dan objek.
Sisanya adalah tipe khusus: resource dan NULL;

Catatan :
Sebelum anda mempelajari tentang penggunaan variabel, anda harus
memahami tipe data terlebih dahulu.

Integer
Integer adalah tipe data yang mempresentasikan bilangan utuh atau bulat,
seperti 12, 14, 2022, dan sebagainya. Rentang yang diperbolehkan adalah dari -2,
147, 483, 648 sampai +2, 147, 483, 647.

Nilai literal dari tipe integer dapat ditulis dalam bentuk desimal (basis 10),
oktal (basis 8), maupun heksadesimal (basis 16).

Contoh integer dapat ditulis dalam bentuk desimal:

Contoh integer dapat ditulis dalam bentuk oktal:

Contoh integer dapat ditulis dalam bentuk heksadesimal:

Floating-Point
Floating-point number (seing juga dinamakan dengan bilangan real)
adalah tipe data yanng mempresentasikan nilai-nilai numerik dalam bentuk
pecahan atau mengandung angka desimal dibelakang koma. Floating-Point
selarasa dalam PHP dengan tipe double dalam bahasa C, biasanya berada dalam
rentang 1.7E dan 1.7E+308 dengan 15 digit akurasi.

Belajar HTML dan PHP Page 19


Bilangan floatring-point dapat ditulis dalam notasi normal dan notasi sains
(scientific).

Contoh :

Floating-point sering merupakan representasi “kira-kira” dari suatu


bilangan. Sebagai contoh, 3.5 secara aktual dipresentasikan dengan nilai
3.4999999999.

String
PHP mendukung dua tipe string yaitu yang diapit oleh petik ganda dan
tungga. Dalam pembuatan web, string merupakan tipe data yang kerap kali
dijumpai dalam berbagai kasus.

Contoh :

Srting yang diapit oleh petik ganda juga dapat mendukung escape sequence, yaitu
beberapa karakter yang dianggap sebagai satu karakter, yang digunakan untuk
merepresentasikan kedudukan karakter tertentu.

Escape sequense Karakter yang direpresentasikan


\” Double quotes
\n Newline
\r Carriage return
\t Tab
\\ Blackslash
\$ Dollar sign
\{ Left brace
\} Right brace
\[ Left bracket
\] Right bracket
\0 sampai \777 Karakter ASCII yang direpresentasikan dengan
nilai oktal
\x0 sampai \xFF Karakter ASCII yang direpresantasikan dengan
nilai heksadesimal.

Belajar HTML dan PHP Page 20


Boolean
Tipe boolean digunakan untuk merepresentasikan nilai kebenaran (truth
value). Nilai yang mungkin diamsukkan ke dalam variabel boolean adalah true
dan false. Tipe ini biasanya dijumpai pada pendefenisian kondisi baik dalam
struktur pemilihan maupun pengulangan.

Dalam PHP, berikut ini adalah nilai-nilai false :

 Keyword false

 integer

 floating-point o.o

 String kosong (“”) dan string “o”

 objek yang tidak memiliki nilai atau fungsi

 Nilai Null

Array
Array adalah variabel yang menyimpan sekelompok nilai, yang dapat
diindentifikasi berdasarkan posisinya (nomor, dangan o sebagai indeks
pertamanya) atau dengan nama (bertipe string) yang telah didefenisikan
sebelumnya.

Belajar HTML dan PHP Page 21


Berikut ini konstruksi untuk membentuk suatu array:

Terdapat beberapa cara untuk mengakses nilai array melalui blok pengulangan,
namun yang paling lazim adalah dengan menggunakan struktur pengulangan
foreach.

Objek
PHP mendukung objek-oriented programming (OOP), yang dapat
memudahkan dalam proses debugging, maintenance, dan penggunaan ulang kode
(reuseable code). Dalam OOP, kelas merupakan unit terpenting. Kelas adalah
suatu definisi dari struktur yang memiliki properti dan metode (fungsi). Dalam
PHP, kelas didefenisikan menggunakan kata kunci Class.

Contoh :

Sekali kelas didefenisikan, anda dapat membentuk objek dengan menggunakan


kata kunci new. Properti dan metode dapat diakses melalui operator -.

Anda dapat memeriksa suatu nilai atau variabel apakah berbentuk objek atau
bukan dengan fungsi is_object().

Belajar HTML dan PHP Page 22


 Pengenalan Variabel dan Cara Pembuatannya
Variabel adallah suatu pengenal didalam program yang mempresentasikan
nilai atau data tertentu. Dengan memasukkan nilai kedalam variabel , maka anda
dapat mengacu variabel tersebut dari tempat lain dalam kode program yang anda
buat.
Dalam PHP, variabel didefenisikan dengan cara memberi tanda $ (dollar)
didepannya. Berikut adalah langkah-langkah yang diperlukan dalam memberi
variabel dalam PHP.

1. Tulis nama variabel yang anda butuhkan:

2. Tempatkan tanda variabel didepan nama variabel berikut:

3. Gunakan tanda (=) setelah nama variabel untuk menambahkan nilai


literal ke dalam variabel tersebut:

4. Memasukan nilai ke dalam variabel adalah sebuah perintah, maka


anda harus mengakhiri dengan tanda semicolon (;):

Berbeda dengan bahasa pempgraman lainnya, PHP tidak perlu


mendeklarasikan terlebih dahulu variabel yang telah dibuat, seperti contoh berikut
ini :

seperti yang anda lihat pada kode diatas:

Belajar HTML dan PHP Page 23


 Pada baris pertama variabel $x menyimpan nilai string.
 Pada baris kedua variabel $x menyimpan nilai integer.
 Pada baris ketiga variabel $x menyimpan nilai floating-point.
 Pada baris keempat variabel $x menyimpan nilai boolean.
 Pada baris kelima variabel $x menyimpan nilai array.

 Pratikum Membuat dan Menggunakan Variabel


 Jalankan notepad++
 Tuliskan kode berikut :

 Simpan file dengan nama variabel1.php


 Jalankan web browser dan masukan http://localhost/modul-
PHP/variabel1.php

Belajar HTML dan PHP Page 24


Keterangan :
seperti yang tampak pada kode diatas ketika anda ingin memasukan nilai
bertipe string kedalam suatu variabel, anda hars mengapit nilai tersebut dengan
tanda petik ganda (“”). Sedangkan untuk data dengan tipe floating-point
(bilangan riil) dan integer (bilangan bulat) andak tidak perlu menggunakan tanda
petik.
Dalam PHP, tanda titik (.) digunakan untuk menyambung teks atau string.
Adapun <br/> yang terdapat pada kode diatas adalah tag HTML yang berguna
untuk baris.

Belajar HTML dan PHP Page 25


BAGIAN 4
Contoh Pembuatan Database

Belajar HTML dan PHP Page 26


Bagian

4
Contoh Pembuatan Database

Pada bagian ini kita dituntut untuk melakukan praktek agar lebih bisa memahami
penempatan-penempatan yang sudah dipelajari.

 Pembuatan koneksi ke database


 Pembuatan aplikasi
 Pembuatan desain tampilan web

Belajar HTML dan PHP Page 27


 PEMBUATAN KONEKSI KE DATABASE
Pada kali ini kita akan membuat bentuk koneksi ke database dengan
sederhana, dan bisa anda kembangkan sesuai dengan keinginan anda. Berikut
contoh koneksi.
 Buka aplikasi notepad++
 Tuliskan kode beriut

 Simpan file ke dalam folder gate dengan nama inc.koneksidb.php


 Buka web browser dan masukan alamat
http://localhost/gate/librari/inc.koneksidb.php

Keterangan :
Dapat dilihat pada tampilan diatas bahwasannya koneksi kita ke
database sudak berfungsi dan bisa kita lanjutkan dengan
pembuatan database agar tidak terjadi kegagalan proses
pembuatan aplikasi.

Belajar HTML dan PHP Page 28


 PEMBUATAN DATABASE
Untuk pembuatan databse anda harus mengetikkan kode database yang ada
ke dalam http://localhost/phpmyadmin/. Berikut kode database yang harus
diketik :
 Buka aplikasi notepad++
 Tuliskan kode berikut

Belajar HTML dan PHP Page 29


Belajar HTML dan PHP Page 30
Belajar HTML dan PHP Page 31
 Setelah mengetikkan kode tersebut silahkan anda simpan file
dengan nama dbjembatan.sql

Belajar HTML dan PHP Page 32


 Lalu akses http://localhost/phpmyadmin/, dan kemudian anda pilih
tab import dan cari file yang anda simpa tadi dbjembatan.sql lalu
kirim.
 Jika anda terlalu sulit untuk mengetikkan kode database diatas
anda bisa akses blog kita dengan alamat
http://informationsystemtech.blogspot.com/
 Pilih link download untuk aplikasi sesuai dengan buku.

Keterangan :

Pada kode diatas adalah merupakan kode database yang akan kita
panggil nantinya pada sistem aplikasi yang akan kita buat, dan
merupakan wadah atau tempat kita akan melakukan penyimpanan dan
akses data yang baru maupun yang lama.

Belajar HTML dan PHP Page 33

Anda mungkin juga menyukai