7 Perkembangan Pemrograman (bagian 2)
| | Overview | |
| Mengakses web sudah menjadi kebutuhan kita, ada banyak konten menarik dan bermanfaat yang kita dapatkan. Ada juga yang menarik dari sisi layout dan desainnya atau dari sisi interaktifnya, seperti bhinneka.com, amazon.com, ebay.com, dll. Kita juga bisa memberikan umpan balik, mengisikan sesuatu pada sebuah situs baik itu sebuah buku tamu, polling, email dll. Lalu kita juga dapat melihat pada halaman tersebut seperti tanggal saat ini, jam, dan jumlah pengunjung yang telah melihat situs tersebut. Lalu terfikir oleh kita, bagaimanakah cara membuatnya? Web dibuat dengan suatu bahasa pengkodean, pada awalnya HTML, kemudian agar dapat bersifat interaktif maka pengembang web membuat suatu pemrograman yang memungkinkan adanya interaksi antara pengunjung dan situs tersebut. Bahasa yang dapat digunakan antara lain ASP, PHP, Javascript, dll. Secara umum, website dapat dibedakan menjadi dua yaitu website statis dan website dinamis. | ||
| | ||
| | Tujuan | |
| 1. Memahami konsep dasar pemrograman web 2. Mampu memprogram web untuk menghasilkan dokumen statis 3. Mampu memprogram web untuk menghasilkan dokumen dinamis 4. Memahami pememprograman web menggunakan framework | ||
1.1 STATIS
Webiste statis adalah website yang berisi informasi statis (tetap). Web statis biasanya menonjolkan sisi tampilan yang banyak mengandung grafis. Untuk merancang website statis tidak di perlukan kemampuan bahasa pemrograman yang handal, yang banyak dibutuhkan adalah kemampuan desain grafis dan cita rasa seni. Website statis menggunakan HTML.
Gambar 7.1 Web Statis
1.1.1 HTML
HTML merupakan format tampilan yang digunakan untuk menampilkan halaman website. HTML terdiri dari simbol-simbol tertentu yang sering disebut dengan tag. Sebuah halaman website yang valid selalu diapit tag <html></html>. File HTML umumnya memiliki akhiran *.htm atau *.html.
Tag-tag pada HTML selalu diawali dengan <x>...</x>, dimana x tag HTML seperti <strong>, <p>, <div>, dll.
Dibawah ini adalah tabel beberapa tag HTML yang sering digunakan.
| Tag HTML | Keterangan |
| <html></html> | Tag untuk mengapit halaman HTML |
| <head></head> | Tag yang berisi informasi umum dari halaman |
| <title></title> | Judul Halaman * |
| <body></body> | Akan ditampilkan di browser |
| <style></style> | Untuk CSS * |
| <strong></strong> | Untuk menebalkan teks |
| <div></div> | Untuk membuat layer |
| <a></a> | Untuk membuat hyperlink |
| <p></p> | Untuk membuat paragraf |
| <hn></hn> | Untuk membuat header ** |
| <span></span> | Untuk inline style (manipulasi teks) |
| <!-- --> | Komentar |
Tabel 7. 1 Tabel tag HTML
* Tag tersebut harus berada didalam tag <head>...</head>
** n dapat berupa angka dari 1 – 5, contoh <h1>...</h1>
Contoh kode HTML :
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Hello World!!</h1>
</body>
</html>
Di simpan dalam file helloword.html, dan akan di tampilkan oleh browser sebagai berikut :
Gambar 7.2 Helloword HTML
· Manipulasi Font
Untuk memanipulasi font kita menggunakan inline style/CSS (akan dibahas dibagian berikutnya). Kita tidak akan menggunakan tag <font> karena tag ini sudah “kuno” alias deprecated. W3C sebagai pengembang HTML sudah tidak menyarankan untuk menggunakan tag font lagi. Sebagai gantinya digunakan tag <span> dan inline style. Inline style adalah attribut style yang diberikan pada sebuah tag HTML. Contoh, untuk membuat tampilan teks tebal menggunakan cara berikut:
<span style=”fontweight: bold”>Aku adalah teks tebal</span>
Output : Aku adalah teks tebal
Contoh diatas kita memberikan attribut style, yang berisi “fontweight:bold”. Maksudnya kita akan mengaplikasikan style bold pada teks yang diapit oleh tag <span></span>. Pemberian style tidak hanya terbatas pada satu bagian saja, namun dapat beberapa style sekaligus dengan memberi tanda pemisah berupa “;” untuk setiap style.
<span style=”fontweight: bold;textdecoration: underline;fontstyle:
italic”>Aku adalah teks tebal, bergaris bawah dan miring</span>
Output : Aku adalah teks tebal, bergaris bawah, dan miring
· Hyperlink
Anda tentu sering mengklik gambar atau tulisan yang mengarah ke halaman lain atau website lainnya. Yang anda klik itu adalah hyperlink atau lebih dikenal dengan istilah link saja. Untuk membuat link kita dapat menggunakan tag <a></a>. Dua attribut yang paling sering digunakan pada tag <a> adalah href dan target.
href digunakan untuk menentukan lokasi tujuan dari link. Dapat berupa relatif URL atau absolut URL. target digunakan untuk menentukan apakah halaman akan dibuka pada jendela/window baru atau tidak. Defaultnya adalah self dimana link tidak dibuka pada window baru. Jika ingin membuka pada window baru gunakan nilai _blank.
Untuk lebih memahami cara kerja link, kita akan membuat dua file yaitu halaman1.html dan halaman2.html.
<html>
<head>
<title>Halaman Pertama</title>
</head>
<body>
<p>Menuju kalaman kedua <a href="halaman2.html">klik disini</a>.</p>
</body>
</html>
Simpan sebagai halaman1.html
<html>
<head>
<title>Halaman Kedua</title>
</head>
<body>
<p>Kembali ke halaman pertama<a href="halaman1.html">klik disini</a>.</p>
</body>
</html>
Simpan sebagai halaman2.html
Gambar 7.3 Halaman 1
Gambar 7.4 Halaman 2
1.1.2 XHTML
XHTML adalah HTML, hanya saja XHTML mengikuti format XML sebagai standar penulisannya. Jadi setiap tag harus memiliki penutup.
Anda tentu pernah mengetik tag-tag tanpa penutup seperti <br>, <img>, dan <input> pada pembahasan sebelumnya. Pada XHTML semua tag harus memiliki penutup, jika tidak maka halaman yang anda buat tidak sesuai dengan standar yang telah ditentukan dan dianggap tidak valid/compliant dengan standar W3C.
Berikut ini adalah beberapa contoh penulisan yang valid di HTML tapi tidak di XHTML.
Tabel 7. 2
| SALAH | BENAR |
| <strong><span>Hello World</strong></ span> | <strong><span>Hello World</span></strong> |
| <input type=”radio” checked> | <input type=”radio” checked=”checked” /> |
| <br> | <br /> atau <br></br> |
| <img border=1> | <img border=”1” /> |
| <input type=”button” value=”GO >>>”> | <input type=”button” value=”GO >>>” /> |
| <STRONG>Hello</strong> | <strong>Hello</strong> |
1.2 DINAMIS
Web dinamis adalah web yang menampilkan informasi yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan user. Untuk web dinamis yang ditonjolkan adalah pengolahan data sehingga dibutuhkan kemampuan dalam pemrograman web.
Gambar 7.5 Web Dinamis
Ada dua jenis pemrograman web, yaitu Server Side Programming dan Client Side Programming. Pada Server Side Programming, semua sintaks dan perintah program yang diberikan akan dijalankan/diproses di Web Server (Apache, IIS), kemudian hasilnya dikirimkan ke browser pengguna dalam bentuk HTML biasa. Sehingga pengguna tidak dapat melihat kode asli yang ditulis dalam bentuk server side programming tersebut. Yang tergolong dalam server side programming seperti: CGI/Perl, Active Server Pages, Java Server Page, PHP, ColdFussion.Sebaliknya, pada “Client Side Programming” semua sintaks dan perintah program dijalankan di web browser, sehingga ketika client meminta dokumen yang mengandung script, script tersebut akan diambil dari web server kemudian dijalankan di web browser yang bersangkutan. Contoh dari client side programming seperti: JavaScript, VbScript, HTML.
Yang harus di persiapkan dalam membuat web dinamis antara lain :
1.2.1 Web Server
Web Server adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML. Salah satu server web yang terkenal di linux adalah Apache. Apache merupakan server web antar platform yang dapat berjalan di beberapa platform seperti linux dan windows. Web Server juga merupakan sebuah komputer yang menyediakan layanan untuk internet. Server disebut juga dengan host. Agar anda dapat memasukkan web yang anda rancang ke dalam internet, maka anda harus memiliki ruangan terlebih dahulu dalam internet, dan ruangan ini disediakan oleh server. Itulah yang disebut Web Server. Untuk web server yang digunakan oleh windows adalah Internet Information Server (IIS).
1.2.2 Web Hosting
Web Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk tempat penyimpanan berbagai data, file-file, gambar, video, data email, statistik, database dan lain sebagainya yang akan ditampilkan dalam website. Web Hosting juga diperoleh dengan menyewa. Pengguna akan memperoleh kontrol panel yang terproteksi dengan username dan password untuk administrasi websitenya. Besarnya hosting ditentukan ruangan harddisk dengan ukuran MB (Mega Byte) atau GB (Giga Byte). Lama penyewaan web hosting rata-rata dihitung per tahun. Penyewaan hosting dilakukan dari perusahaan-perusahaan penyewa web hosting yang banyak dijumpai baik di Indonesia maupun Luar Negeri. Lokasi peletakan pusat data (datacenter) web hosting bermacam-macam. Ada yang di Jakarta, Singapore, Inggris, Amerika, dll dengan harga sewa bervariasi
1.2.3 Database
Data Base (basis data) merupakan kumpulan data yang saling berhubungan. Umumnya database yang digunakan untuk pemrograman web adalah MySql. Akan tetapi tidak menutup kemunkinan untuk menggunakan databe yang lain seperti Oracle dan SQL Server.
1.2.4 Server Side Programming
Beberapa contoh Server Side Scripting (Programming) :
· ASP (Active Server Page) dan ASP.NET
ASP Server Side Scripting merupakan sebuah teknologi scripting atau pemrograman web dimana script (program) dikompilasi atau diterjemahkan di server. Dengan SSS, memungkinkan untuk menghasilkan halaman web yang dinamis.
ASP diperkenalkan ke dunia pertama kali oleh Microsoft pada tanggal 16 Juli 1996, dan diberi nama kode Denali. Beta version dirilis pada bulan November 1996, dan akhirnya ASP Version 1.0 secara resmi dipasarkan ke publik pada tanggal 12 Desember 1996. Microsoft terus mengembangkan ASP.
Kita dapat menggunakan program notepad untuk menuliskan kode-kodenya dan nanti akan dieksekusi oleh browser, namun saat ini ada banyak program untuk editor web seperti dreamweaver yang sangat disukai penulis karena perfomanya. Agar supaya ASP dapat dijalankan dikomputer local maka dibutuhkan suatu webserver localhost seperti IIS (internet information server) atau PWS (Personal web server) yang ada pada cd Windowsnya.
· ColdFusion (http://www.macromedia.com/software/coldfusion)
· Java Server Pages (http://java.sun.com/products/jsp/)
Java Server Pages (JSP) merupakan perluasan dari spesifikasi Java Servlet, yang bertujuan untuk menyederhanakan dalam pengembangan suatu content yang dinamis. JSP merupakan bagian dari teknologi J2EE, bersama-sama dengan Servet, EJB, JNDI, XML.
JSP dan Servlet bekerja dalam suatu lingkungan web container yang menyediakan koneksi dan service, sedangkan JSP dan Servlet mengontrol presentasi data yang dihasilkan dari suatu proses untuk dikirimkan ke client. Server yang menangani permintaan JSP seperti sebuah kompiler halaman yang menggabungkan template HTML dengan kode Java yang dinyatakan pada elemen JSP.
· Perl (http://www.perl.org)
Untuk dapat menulis Perl dan mengetes/menjalankannya, dibutuhkan beberapa syarat, antara lain : Perl for Windows, Ultra Edit, Perl Builder, dll. Jika Anda ingin menulis Perl dengan menggunakan MS Windows 95/98/NT/2000/ME, maka software-software di atas mutlak diperlukan. Tapi Anda pun bisa menggunakan Notepad untuk menulis script Perl tersebut, kemudian menggunakan Ultra Edit untuk mengkonversi script dari platform Windows ke UNIX. Browser dan akses internet. Tentu saja ini juga mutlak diperlukan untuk mengetes script kita. Bila Anda langsung menggunakan UNIX/Linux untuk menulis script CGI, maka script tersebut dapat langsung kita coba, tanpa harus connect ke internet.
· Phyton (http://www.python.org)
Python selain dapat dengan mudah di pelajari, juga dapat digunakan untuk mengembangkan perangkat lunak secara cepat (RAD) Rapid Application Development.Aplikasi. Aplikasi yang menggunakan Python juga terjaga integritasnya, seperti pembuatan WebServer stand-alone 1 atau Embedded WebServer Zope (http://www.zope.org)), installer distribusi Linux RedHat, yang dikenal dengan Anaconda Installer (www.redhat.com) dan digunakan juga pada distribusi Linux Pemerintah Indonesia yang bernama WinBI (http://www.software-ri.or.id/winbi). Perusahaan swasta di Indonesia juga telah mengembangkan aplikasi kasir dan rumah sakit di Indonesia (http://www.rab.co.id) dengan menggunakan python ini.
Karena Python open source, maka pendukung programmer Python banyak tersebar di dunia dan membuat modul - modul library tambahan sesuai dengan kebutuhan, juga tersedia modul - modul interface ke Relational Database Management System, seperti MySQL, PostgreSQL, Berkeley-DB dan lainnnya.
· PHP (http://www.php.net)
PHP adalah bahasa pemrograman web atau scripting language yang didesain untuk web. PHP dibuat pertama kali oleh satu orang yaitu Rasmus Lerdorf, yang pada awalnya dibuat untuk menghitung jumlah pengunjung pada homepagenya. Diawal Januari 2001, PHP telah dipakai lebih dari 5 juta domain diseluruh dunia, dan akan terus bertambah karena kemudahan aplikasi PHP ini dibandingkan dengan bahasa Server side yang lain. Anda dapat melihat angka sesungguhnya di http://www.php.net/usage.php.
PHP telah digunakan oleh berbagai situs populer baik luar negeri maupun situs dalam negeri. PHP menjadi populer karena kesederhanaanya dan kemampuannya dalam menghasilkan berbagai aplikasi web. Mulai dari counter, sistem artikel atau content management system, e-commerce/e-store, bulletin board/forum diskusi, dan sebagainya dapat dibuat dengan PHP.
PHP adalah salah satu bahasa Server-side yang didesain khusus untuk aplikasi web. PHP dapat disisipkan diantara bahasa HTML dan karena bahasa Server side, maka bahasa PHP akan dieksekusi di server, sehingga yang dikirimkan ke browser adalah “hasil jadi” dalam bentuk HTML, dan kode PHP anda tidak akan terlihat.
PHP termasuk dalam Open Source Product dan saat ini telah mencapai versi 4. Jadi anda dapat merubah source code dan mendistribusikannya secara bebas. PHP juga diedarkan secara gratis. Anda bisa mendapatkannya secara gratis. PHP juga dapat berjalan diberbagai web server semisal IIS, Apache. PWS, dll.
1.3 FRAMEWORK
Framework bisa diartikan sebagai alat yang digunakan untuk membantu pekerjaan. Karena untuk pembuatan website maka framework disini dapat diartikan sebagai alat yang dapat digunakan untuk mempermudah pembuatan website.
Jika dengan CMS maka kita tinggal menjalankan saja tidak perlu lagi memikirkan untuk menulis kode program sendiri, tetapi tidak demikian dengan framework. Menggunakan framework kita masih harus menulis kode, bedanya kode-kode yang kita tulis harus menyesuaikan dengan lingkungan framework yang kita gunakan. Memang konsekuensinya kita harus belajar lagi lingkungan pengembangan berdasarkan framework yang kita gunakan, tetapi hal itu akan terbayar setelah kita menguasai dan bisa menggunakan framework tersebut.
Sebuah framework selain menyediakan lingkungan pengembangan sendiri-sendiri juga menyediakan berbagai macam fungsi siap pakai yang bisa kita gunakan dalam pembautan wenbsite. Sehingga tidak perlu kaget jika akan banyak kode atau fungsi yang terlihat tidak seperti biasanya, karena fungsi-fungsi tersebut merupakan fungsi bawaan framework dan bukan fungsi asli dari PHP. Fungsi tersebut terkadang merupakan pengembangan atau penyesuaian fungsi asli PHP agar lebih mudah digunakan atau agar lebih sesuai dengan kebutuhan pengguna.
Macam-Macam Framework :
· PHP
- Symfony ( http://www.symfony-project.org/ )
- Prado ( http://www.pradosoft.com/ )
- CakePHP ( http://cakephp.org/ )
· Ruby
- Ruby On Rails ( http://rubyonrails.org/ )
· ASP
- .NET ( http://www.microsoft.com/NET/ )
| | Rangkuman |
1. Webiste statis adalah website yang berisi informasi statis (tetap) dan menggunakan bahasa pemrograman HTML.
2. Web dinamis adalah web yang menampilkan informasi yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan user.
3. Ada dua jenis pemrograman web, yaitu Server Side Programming dan Client Side Programming. Pada Server Side Programming, semua sintaks dan perintah program yang diberikan akan dijalankan/diproses di Web Server, sedangkan pada Client Side Programming semua sintaks dan perintah program dijalankan di web browser.
4. Yang harus di persiapkan dalam membuat web dinamis antara lain web server, web hosting, data base, dan server side programming
5. Framework dapat diartikan sebagai alat yang dapat digunakan untuk mempermudah pembuatan website. Jika dengan CMS kita tinggal menjalankan saja tanpa perlu memikirkan untuk menulis kode program sendiri, tetapi dengan menggunakan framework kita masih harus menulis kode, bedanya kode-kode yang kita tulis harus menyesuaikan dengan lingkungan framework yang kita gunakan.
6. Macam-Macam Framework : PHP (Symfony, Prado, CakePHP), Ruby (Ruby On Rails), dan ASP (.NET)
| | Kuis Benar Salah |
1. Web dinamis adalah web yang menampilkan informasi yang bersifat dinamis dan tidak dapat berinteraksi dengan user
2. CMA termasuk bagian dari Framework
3. Symfony dan prado termasuk dalam kelompok framework
4. Pada Server Side Programming, semua sintaks dan perintah program yang diberikan akan dijalankan/diproses di Web Browser
5. Web server, web hosting, data base, dan server side programming dibutuhkan dalam membuat web statis
| | Pilihan Ganda | |||||||
| Petunjuk: Pilihlah jawaban yang paling tepat! | ||||||||
| 1 | Yang harus di persiapkan dalam membuat web dinamis antara lain sbb, kecuali… | |||||||
| A | Web server | D | Web meter | |||||
| B | Web hosting | E | Data base | |||||
| C | Server side programming | | | |||||
| 2 | Di bawah ini termasuk macam-macam framework kecuali… | |||||||
| A | Symfony | D | Prado | |||||
| B | CMS | E | CakePHP | |||||
| C | Ruby On Rails | | | |||||
| 3 | Beberapa contoh Server Side Scripting (Programming) adalah sbb kecuali…. | |||||||
| A | Phyton | D | Perl | |||||
| B | PHP | E | Java Server Pages | |||||
| C | HTML | | | |||||
| | Latihan | |||||||
| | | |||||||
1. Ada yang membedakan antara web statis dan dinamis?
2. Jelaskan perbedaan Framework dan CMS!
3. Jika anda ingin membangun website untuk eCommerse, bahasa pemrograman apa saja yang bisa digunakan?
4. Buatlah program Helloword menggunakan HTML!
5. Jelaskan tentang Server Side Programming dan Client Side Programming! Dan berikan contohnya
6. Gambarkan perkembangan bahasa pemrograman web!
Tidak ada komentar:
Posting Komentar