BAB 2. Membuat Halaman Web Sederhana. Materi

Transkripsi

1 BAB 2 Membuat Halaman Web Sederhana Materi Membuat Halaman Web PHP Membuat Halaman Web PHP dalam HTML Membuat Halaman Web PHP dengan Tag-tag HTML Membuat Halaman Web PHP dengan Javascript

2 SESI / PERKULIAHAN KE 2 I. Standar Kompetensi Mahasiswa dapat membuat Halaman Web Dinamis dengan bahasa pemrograman PHP dan MySQL. II. Kompetensi Dasar Mahasiswa dapat membuat sebuah halaman web PHP sederhana III. Indikator 1. Mampu membuat halaman web PHP sederhana 2. Mampu membuat halaman web PHP sederhana di dalam HTML 3. Mampu membuat halaman web PHP sederhana menggunakan tag tag dalam HTML 4. Mampu membuat halaman web PHP sederhana dengan Javascript IV. Materi Ajar 1. Membuat Halaman Web PHP 2. Membuat Halaman Web PHP dalam HTML 3. Membuat Halaman Web PHP dengan Tag-tag HTML 4. Membuat Halaman Web PHP dengan Javascript

3 V. Deskripsi Pada pertemuan ini anda akan diberikan materi tentang bagaimana membuat sebuah halaman web PHP secara sederhana, penggunaan PHP di dalam HTML, penerapan penggunaan Tag-tag HTML pada PHP, dan penggunaan Javascript di dalam PHP. Hal ini bertujuan agar pada pertemuan berikutnya Anda sudah dapat membuat sebuah halaman web meskipun masih sederhana. VI. Bahan Bacaan Abdul Kadir Dasar Pemrograman Web Dinamis Menggunakan PHP. Yogyakarta : Andi. Kasiman Peranginangin Aplikasi Web dengan PHP dan MySQL. Yogyakarta : Andi. Lembaga Sertifikasi Profesi Telematika Modul Web Programming. Jakarta : LSP Telematika Indonesia. VII. Pertanyaan Kunci 1. Bagaimana cara menggunakan PHP di dalam HTML atau HTML di dalam PHP? 2. Bagaimana cara menggunakan Tag-tag HTML dalam PHP?

4 VIII. Tugas Buatlah beberapa contoh halaman web berikut ini kemudian jadikanlah satu paket dengan mengkaitkan satu sama lain sehingga menjadi satu keutuhan sebuah web dengan menggunakan link relatif : a. Contoh Halaman Web PHP didalam HTML dengan menampilkan kodingnya dibagian bawah b. Contoh Halaman Web PHP dengan tag tag HTML : Heading, Paragraf, dan List dengan menampilkan kodingnya dibagian bawah c. Contoh Halaman Web PHP menggunakan Javascript dengan menampilkan kodingnya dibagian bawah Disimpan dalam folder nama_anda_bab2 ( contoh : Angga_BAB2 ) dan dibakar dalam bentuk CD.

5 MEMBUAT HALAMAN WEB PHP SEDERHANA A. PENDAHULUAN Bab ini akan memberikan gambaran tentang pembuatan web secara sederhana, penerapan PHP dalam HTML, penggunaan Tag-tag HTML dalam PHP, dan penerapan Javascript di dalam PHP. B. URAIAN MATERI 2.1 Membuat Halaman Web PHP Setelah mengerti konsep dasar PHP yang Anda peroleh pada pertemuan atau bab sebelumnya tentang pengenalan PHP, proses installasi dan konfigurasi perangkat lunak XAMPP, maka Anda dapat menggunakan editor teks ( seperti : notepad atau notepad++ ) untuk membuat sebuah program PHP. Mengawali pembuatan program dengan PHP, alangkah baiknya jika Anda memulainya dengan program yang sederhana terlebih dahulu. Untuk membuat program yang sederhana, Anda perlu catat baik-baik dan mengingat langkah-langkah berikut : 1. Jalankan XAMPP Control Panel pada Start Apache-nya. 2. Simpan File notepad program PHP Anda dengan ekstensi.php 3. Letak penyimpanan file berada di C://xampp/htdocs/ Cara menjalankan, buka browser Anda. Kemudian ketikkan URL : localhost/nama_folder/nama_file.php

6 Setelah membaca catatan tersebut, silahkan Anda memulai pembuatan halaman web sederhana dengan PHP berikut ini : a. Bukalah editor text Anda, kemudian ketikkan kode program berikut ini : Gambar 2.1 Kode program PHP Sederhana b. Simpan file notepad tersebut dengan nama latihan1.php. Buatlah sebuah folder baru dengan nama belajardidalam folder htdocs. Gambar 2.2 Penyimpanan File PHP c. Ubahlah Save as Type menjadi All File atau All Type ( tidak semua editor text perlu mengubah ini ) kemudian tekan tombol save. d. Pastikan file program Anda telah tersimpan dengan baik dan benar. Cara mengkoreksinya antara lain : 1) Jika file notepad telah tersimpan dengan benar ( berekstensikan.php ) maka akan tampak seperti pada gambar berikut :

7 Gambar 2.3 Notepad setelah disimpan 2) Jika Anda menggunakan notepad++ sebagai editor text, sebenarnya tidak perlu mengkoreksi lagi untuk jenis type filenya hingga ke dalam folder htdocs, karena pada bagian title notepad sudah menunjukkan letak penyimpanannya seperti gambar 2.3 sudah membuktikan bahwa penyimpanan sudah benar. Tetapi jika Anda menggunakan notepad biasa bawaan dari Sistem Operasi atau media editor text lain silahkan mengkoreksi jenis type filenya dengan membuka Windows Explore Drive C:// - XAMPP htdocs belajar. Gambar 2.4 Hasil Penyimpanan File latihan1.php e. Kemudian silahkan Anda jalankan program yang telah dibuat sehingga tampak seperti pada gambar berikut : Gambar 2.5 Hasil Tampilan Membuat Halaman Web PHP

8 2.2 Membuat Halaman Web PHP dalam HTML Setelah Anda dapat membuat sebuah halaman web PHP yang sederhana, sudah tentu Anda memahami benar tentang struktur dasar PHP, penyimpanan file PHP, letak penyimpanan file dan cara menjalankan file tersebut. Dengan memahami materi-materi tersebut, maka sekarang Anda akan diberikan gambaran mengenai perpaduan antara PHP dengan HTML. Perpaduan tersebut digambarkan dalam 2 macam, yaitu : PHP di dalam HTML dan HTML di dalam PHP. a. Berikut ini contoh perpaduan PHP didalam HTML : 1) Ketikkan kode program berikut ini pada media editor teks Anda: Gambar 2.6 Kode Program PHP di dalam HTML 2) Simpan dengan nama file latihan2a.php didalam folder belajar yang telah dibuat sebelumnya. Sehingga pada folder C://xampp/htdocs/belajar menyimpan dile php tersebut seperti pada gambar : Gambar 2.7 Hasil Penyimpanan file Latihan2a.php

9 3) Kemudian jalankan program PHP tersebut, sehingga akan muncul seperti pada gambar berikut : Gambar 2.8 Hasil Tampilan PHP didalam HTML b. Berikut ini contoh perpaduan HTML didalam PHP : 1) Ketikkan kode program berikut ini pada media editor teks Anda : Gambar 2.9 Kode Program PHP di dalam HTML 2) Simpan dengan nama file latihan2a.php didalam folder belajar yang telah dibuat sebelumnya. Sehingga pada folder C://xampp/htdocs/belajar menyimpan dile php tersebut seperti pada gambar : Gambar 2.10Hasil Penyimpanan file Latihan2b.php

10 3) Kemudian jalankan program PHP tersebut, sehingga akan muncul seperti pada gambar berikut : Gambar 2.11 Hasil Tampilan PHP didalam HTML 2.3 Membuat Halaman Web PHP dengan Tag-tag HTML Pada semester sebelumnya Anda telah mendapatkan pembelajaran matakuliah pemrograman HTML. Sudah tentu pasti mengenal tag-tag dari HTML. Pada bagian ini akan dibahas tentang bagaimana membuat sebuah halaman web PHP menggunakan tag-tag HTML, khusunya pada format font, image, dan link. a. Membuat Halaman Web PHP dengan Format Font 1) Ketikkan kode seperti yang ada dibawah ini pada sebuah notepad dan simpan dengan nama file latihan3a.php : Gambar 2.12 Kode Program PHP dengan Format Font HTML

11 2) Berikut hasil tampilan yang diperoleh dari file notepad yang Anda buat menggunakan format font di dalam PHP : Gambar 2.13 Tampilan PHP dengan Tag HTML Format Font b. Membuat Halaman Web PHP dengan Format Image 1) Ketikkan kode seperti yang ada dibawah ini pada sebuah notepad dan simpan dengan nama file latihan3b.php : Gambar 2.14 Kode Program PHP dengan Format Image HTML

12 2) Berikut ini hasil tampilan yang diperoleh dengan menggunakan format image di dalam PHP : Gambar 2.15 Tampilan PHP dengan Tag HTML Format Image c. Membuat Halaman Web PHP dengan Link Link pada HTML digunakan untuk mengkaitkan antara halaman satu dengan halaman lain atau mentautkan menuju ke halaman situs website. Namun pada bagian ini Anda akan diberikan penggunaan Link untuk mentautkan ke halaman situs website. Langkah langkahnya sebagai berikut : 1) Ketikkan kode program berikut : Gambar 2.16 Kode Program PHP dengan Link HTML

13 2) Kemudian simpan dengan nama file latihan3c.php dalam folder belajar yang telah dibuat tadi. 3) Jalankan Program tersebut sehingga hasilnya tampak seperti gambar dibawah ini : Gambar 2.17 Tampilan PHP dengan Tag HTML Link 2.4 Membuat Halaman Web PHP dengan Javascript JavaScript merupakan salah suatu bagian dari bahasa pemograman Java. Javascript adalah bahasa script yang langsung dimasukkan ke dalam dokumen HTML, sehingga tidak memerlukan kompiler lagi. Untuk membuat Javascript, kita menggunakan tag <SCRIPT>. Tag <SCRIPT> memiliki atribut LANGUAGE untuk menyatakan jenis bahasa script yang digunakan. Untuk lebih jelasnya mengenai Javascript akan dibahas pada pertemuan berikutnya, kali ini akan diberikan terlebih dahulu gambaran sederhana mengenai Javascript di dalam PHP.

14 a. Silahkan ketikkan kode program berikut ke dalam notepad Anda, kemudian simpan dengan nama file latihan4.php : Gambar 2.18 Kode Program PHP dengan Javascript b. Pada saat dijalankan program notepad tersebut sebagai berikut : Gambar 2.19 Tampilan Program PHP dengan Javascript

15 C. PENUTUP 1. Rangkuman Pada Bab ini telah dibahas mengenai cara membuat sebuah halaman web PHP sederhana, halaman web PHP di dalam HTML atau HTML di dalam PHP, halaman web dengan menggunakan Tag tag HTML ( diantaranya : Format Font, Format Image, dan Link ), serta membuat sebuah halaman web dengan menggunakan Javascript. Untuk membuat sebuah halaman web tersebut maka diperlukan beberapa langkah yang harus dipahami, karena untuk melanjutkan ke bab berikutnya akan selalu dibawa dan digunakan terus menerus. Langkah langkah yang harus diperhatikan untuk dipahami antara lain : a. Jalankan XAMPP Control Panel b. Hidupkan Start Apache dengan cara menekan tombol Start bagian Apache pada XAMPP Control Panel. Sehingga tombol Start akan berubah menjadi Stop, dan antara tulisan Apache dengan tombol muncul tulisan Running dengan background warna hijau serta tombol Admin pada Apache aktif. c. Silahkan Anda koreksi terlebih dahulu Apache-nya apakah sudah berjalan dengan baik atau belum? untuk mengkoreksinya dapat Anda lakukan dengan menekan tombol Admin pada Apache. d. Setelah itu, Buka editor teks Anda dan ketikkan kode program PHPnya. e. Lakukan penyimpanan file notepad Anda dengan menentukan direktori penyimpanan berada di : C://xampp/htdocs/, misalkan di dalam htdocs Anda membuat sebuah folder baru dengan nama belajar, maka Anda harus masuk ke dalamnya. f. Setelah selesai menentukan letak penyimpanan file, maka isikan nama file Anda. Misalkan disimpan dengan nama latihan1 maka pada bagian akhir nama file Anda berikan ekstensi php menjadi latihan1.php.

16 g. Jika Anda menggunakan media editor teks selain notepad++, maka harus merubah Save As Type-nya menjadi All Files atau All Type. h. Untuk cara menjalankannya Anda cukup dengan membuka browser ( Internet Explore, Mozilla, Opera, dan lainnya ) kemudian ketikkan alamat URL nya : localhost/nama_folder/nama_file.php Contoh : localhost/belajar/latihan1.php Bilamana di dalam sebuah echo terdapat atau menggunakan tanda petik, maka tanda petik yang ada tersebut digantikan dengan tanda petik tunggal. Mengingat bahwa setelah echo terdapat penggunaan tanda petik yang mengapit objek yang akan ditampilkan pada layar browser. 2. Petunjuk Pelajar Anda dapat mengukur tingkat pemahaman terhadap materi yang telah disampaikan dengan menjawab pertanyaan yang diberikan. Apabila dapat menjawab pertanyaan dengan tepat, maka Anda dapat melanjutkan ke bab berikutnya. Namun, jika belum dapat menjawab soal dengan tepat, maka pelajari kembali bab ini dengan baik. 3. Tes Formatif a. Pertanyaan : 1) Bagaimana penggunaan PHP didalam HTML? 2) Bagaimana penggunaan Tag font HTML di dalam PHP? b. Kunci Jawaban : 1) Penggunaan PHP di dalam HTML : a) Ketikkan kode struktur dasar HTML terlebih dahulu. b) Sisipkan struktur dasar PHP diantar tag pembuka dan penutup <BODY> seperti pada gambar :

17 Gambar 2.20 Kode program tes1.php c) Kemudian simpanlah dengan ekstensi PHP (.php), misalkan disimpan dengan nama : tes1.php. Pastikan letak file penyimpanan berada di dalam folder C://xampp/htdocslalu Save. d) Kemudian jalankan program yang telah dibuat dengan membuka browser, dan ketikkan URL : localhost/tes1.php sehingga akan tampil tampak seperti dibawah ini : Gambar 2.21 Hasil tampilan tes1.php

18 2) Penggunaan Tag Font dalam HTML : a) Ketikkan kode program berikut ini dan simpan dengan nama file tes2.php : Gambar 2.22 Kode program tes2.php b) Hasil tampilan file notepad tes2.php : Gambar 2.23 Hasil Tampilan tes2.php 4. Soal Buatlah sebuah halaman web PHP dengan menggunakan tag HTML Font jenis tulisannya Comic Sans Ms. Kemudian ubah warna tulisan seperti berikut : Mengubah warna tulisan DUTABANGSA

19 5. Tugas Buatlah beberapa contoh halaman web berikut ini kemudian jadikanlah satu paket dengan mengkaitkan satu sama lain sehingga menjadi satu keutuhan sebuah web dengan menggunakan link relatif : a. Contoh Halaman Web PHP didalam HTML dengan menampilkan kodingnya dibagian bawah b. Contoh Halaman Web PHP dengan tag tag HTML : Heading, Paragraf, dan List dengan menampilkan kodingnya dibagian bawah c. Contoh Halaman Web PHP menggunakan Javascript dengan menampilkan kodingnya dibagian bawah Disimpan dalam folder nama_anda_bab2 ( contoh : Angga_BAB2 ) dan dibakar dalam bentuk CD.