MODUL 1. Pengenalan Pemrograman Web

MODUL 1 Pengenalan Pemrograman Web

1.1 Tujuan 1. Mengenalkan kepada siswa tentang pemrograman PHP 2. Siswa dapat membuat script PHP secara sederhana 3. Siswa dapat mengetahui aturan dan tata cara penggunaan sintaks PHP 4. Siswa dapat membuat halaman web dengan menggunakan script HTML dan PHP 1.2 Dasar Teori

Dalam pembuatan sebuah website, bisa menggunakan beberapa bahasa pemrograman sebagai dasar dalam pembuatan web dan desain web. Berikut merupakan bahasa pemrograman yang bisa digunakan dalam pembuatan web, antara lain : 1.

HTML HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan 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 terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). Contoh Coding :

Selamat datang di Web yang super keren!!! 2.

PHP PHP adalah singkatan dari PHP: Hypertext Prepocessor, yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web

dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf 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 Prepocessor" dengan singkatannya "PHP". PHP versi terbaru adalah versi ke-5. Berdasarkan survey Netcraft pada bulan Desember 1999, lebih dari sejuta site menggunakan PHP, di antaranya adalah NASA, Mitsubishi, dan RedHat. Contoh coding : 3.

CSS (Cascading Style Sheet) Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat ,mengukur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin atas, kiri, kanan, bawah, dan perimeter lainnya. Contoh coding: <style> #header { height: 155px; width:auto; background:#66F url(Adidas.jpg) no-repeat; position: relative; color: white; font-family:"Times New Roman", Times, serif ; border: 0px solid #000; }

4.

ASP Active Server Pages (ASP) ialah pengaturan web yang digunakan untuk membina halaman web yang dinamik dan bersifat interaktif. Active server page adalah fasilitas yang diberikan oleh Microsoft untuk memudahkan pembuatan aplikasi-aplikasi Web Server. Hal ini di mungkinkan dengan menggabungkan komponen-komponen Hyper Text Markup Language (HTML) denganVisual Basic Script (VBScript). Sehingga di dalam sebuah halaman Web dengan Active Server Page terdapat bagian HTML dan kode VBScript. ASP diciptakan oleh Microsoft untuk menjawab tantangan pemrograman web dinamis, di mana isi dari sebuah website dapat diprogram untuk mendapatkan hasil yang berbeda. Tidak seperti HTML yang hanya menampilkan isi yang statis, ASP mampu menampilkan isi halaman yang berbeda sesuai dengan tujuan pemrogramannya. ASP telah mencapai versi 3.0 yang berjalan pada platform Windows 2000Professional atau Server. Versi sebelumnya, yaitu versi 2.0, dapat berjalan pada platform lain seperti Linux, Solaris, OS/2, dan Novell. Contoh coding : <% Response.write(“My first AASP script!”) %> 5.

XML XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam. XML merupakan kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa standar untuk melacak Internet. Contoh coding : <judul>Roti tawar tepung ragi air hangat garam Campur semua bahan dan uleni adonan sampai merata. Tutup dengan kain lembap dan biarkan selama satu jam di ruangan yang hangat. Ulangi lagi, letakkan di loyang dan panggang di oven. Keluarkan, hidangkan

6.

WML Wireless Markup Language (WML) adalah bahasa markup yang digunakan untuk mengimplementasikan WAP. Dokumen WML berbasis XML, di mana versi terbarunya adalah versi 1.0. WML harus mempunyai DTD (Document Type Definition), di mana sekarang adalah versi 2.0. Contoh coding: <wml>

7.

JavaScript JavaScript adalah bahasa scripting yang handal yang berjalan pada sisi client. JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. Untuk menjalankan script yang ditulis dengan JavaScript kita membutuhkan JavaScriptenabled browser yaitu browser yang mampu menjalankan JavaScript. Contoh coding : <script type="text/javascript"> alert("Halo Dunia!");

8.

jQuery jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL. Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web RunTime mereka. Contoh coding : $(this).hide() – untuk menyembunyikan sebuah elemen tertentu $("p").hide() - untuk menyembunyikan semua elemen

$(".test").hide() – untuk menyembunyikan semua elemen dengan class=”test” $("#test").hide() – untuk menyembunyikan elemen dengan id=”test

Client-side Web Programming Client side scripting merupakan salah satu jenis bahasa pemrograman web yang proses pengolahannya dilakukan di sisi client. Proses penerjemahan atau pengolahannya dilakukan oleh web browser sebagai client-nya, didalam web browser sudah terdapat library yang mampu menerjemahkan semua perintah dihalaman web yang menggunakan client side scripting. Library ini juga disebut web engine yang dimiliki setiap web browser, namun web engine yang berbeda-beda terkadang membuat ampilan layout web sering berbeda disetiap browser, untuk menghindari itu sebaiknya gunakan web browser yang telah disertifikasi oleh world wide web consortium(W3C). Contoh dari client side scripting ini antara lain 

HTML,



XHTML, CSS, JavaScript,

   

XML. JQUERY

Server-side Web Programming Server side scripting merupakan bahasa pemrograman web yang pengolahannya dilakukan dalam server, maksudnya ialah web server yang sudah telah terintegrasi oleh web engine. Disini peran web engine ialah memproses semua script yang ada termasuk kategori client side scripting. Web engine biasanya harus diinstal dalam komputer terlebih dahulu dari bagian terpisah web server. Contoh dari server side scripting ialah  Active server pages (ASP),  PHP : Hypertext preprocessor (PHP),  Java sever pages (JSP).  ColdFusion   

ASP (Active Server Page) JSP (Java Server Page) SSI

PENGENALAN DASAR BAHASA PEMROGRAMAN PHP PHP : Hypertext preprocessor (PHP) adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada server side. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja berupa HTML. Keunggulannya dari sifatnya yang server-side tersebut antara lain: 1. Tidak diperlukan kompatibilitas browser atau harus menggunakan browser tertentu,

karena serverlah yang akan mengerjakan skrip PHP. Hasil yang dikirimkan kembali ke browser umumnya bersifat teks atau gambar saja, sehingga pasti dikenal oleh browser apapun. 2. Dapat memanfaatkan sumber-sumber aplikasi yang dimiliki oleh server, misalnya koneksi ke database. 3. Skrip tidak dapat “diintip” dengan menggunakan fasilitas view HTML source. Aturan Penulisan script PHP ada 2 Cara yaitu : 1. Embedded Script Script PHP yang di sisipkan diantara tag-tag HTML 2. Non Embedded Script Semua tag HTML di letakkan didalam script PHP ”; echo “Belajar PHP”; echo “ Penulisan tag PHP ada 4 macam yaitu: 1. Standart Style Format Penulisannya : 2. Short style Format Penulisannya : 3. Javascript Style Format Penulisannya : <script language=’PHP’> …………….. 4. ASP Style Format Penulisannya : <% …………….. %>



Aplikasi Yang Diperlukan Untuk dapat bekerja dengan PHP, berikut ini adalah beberapa aplikasi yang diperlukan:  Web server (Apache, IIS, Personal Web Server/PWS)  PHP server (dapat didownload di PHP.net)  Database server (MySQL, Interbase, MS SQL, dll)  Web Editor (Dreamweaver, Frontpage, dll) Sintaks Output PHP Untuk menmpilkan suatu variable atau mencataknya ke layar browser, digunakan beberapa macam perintah berikut :  Echo  Print  Printf Comment Comment adalah bagian dari kode yang tidak dieksekusi/dijalankan. Comment dibuat untuk memperjelas atau memberika keterangan pada kode program. Ada 2 cara penulisan comment yaitu : 1. Comment dengan satu baris menggunakan tanda // 2. Comment dengan banyak baris menggunakan tanda /* ….. */ Cara menjalankan perintah PHP 1. Aktifkan Web server xampp start pada bagian apache

2. Buka web editor sublime dan coba ketikan sintaks di bawah ini:

Buat folder dengan nama websiteku pada di dalam folder xampp/htdocs/ Lalu simpan sintaks PHP di atas dengan nama praktek1.php 3. Cara menajalankan sintaks diatas localhost/websiteku/praktek1.php Dah hasilnya akan seperti di bawah ini :

buka

web

browser

dan

ketikan

PRAKTEK BUAT FOLDER DI DALAM HTDOCS WEBSITEKU/PRAKTEK1/ Praktek1 Nama file : embeded.php Keterangan : cara penulisan embedded script

Praktek2 Nama file : output.php Keterangan : cara penulisan output PHP

Praktek3 Nama file : comment1.php Keterangan : cara penulisan komentar dengan banyak baris

Praktek4 Nama file :variabel.php Keterangan : cara menampilkan isi variable PHP

Praktek5 Nama file :operator.php Keterangan : cara manulasi nilai operator PHP

Praktek6 Nama file :tandapetik.php Keterangan : cara penulisan tanda petik satu dan petik dua

Praktek7 Nama file :echo.php Keterangan : fungsi output echo PHP

Praktek 8 Nama file : variable Keterangan : fungsi penggunaan variable

BUATLAH CAPTURE HASIL SINTAKS DAN KESIMPULAN DARI PRAKTEK DIATAS KETIK DI MS.WORD DENGAN FORMAT DI BAWAH INI & KIRIM KE EDMODO NAMA SISWA MODUL PRAKTEK HASIL PRAKTEK KESIMPULAN

: ……………………………………………………………………… : MODUL 1 – PRAKTEK PEMROGRAMAN DASAR WEB : …………………………………………………………… : ………………………………………………………………………..

Quotes “Bukan Saya tidak bisa tetapi belum terbiasa” Semangat NgoDing