By . Rita Wiryasaputra
Daftar Pustaka Febrian, Jack; Menggunakan Internet; Informatika
Bandung; 2008. Jasmadi; Promosi Web And Registrasi Domain; Andi Yogyakarta; 2004. Novanda, Ori; Chaidir, Deny; Menjadi Web Master dengan Macromedia Flash MX, Dreamweaver dan Microsoft ASP.Net; Ekuator Digital Jakarta; 2004. Sebesta, Robert; Programming the World Wide Web; Addison Wesley, Second Edition; 2002 Suyanto, Asep Herman; Web Design : Teory and Practices; Andi Yogyakarta; 2007. Utdirartatmo, Firrar; Segudang Trik Pengembangan Situs Web; Andi Yogyakarta; 2006.
Materi : Pengantar rekayasa web Tahapan pengembangan web Pengenalan desain web, tools dan bahasa
pemrograman web Konsep CMS (Content Management System) Rekayasa CMS open source Konsep MVC dan web framework Pemasangan web (web hosting) Promosi dan publikasi web Studi kasus
Penilaian Teori: 50% TAS : 40% TTS : 30% Quis : 15% Tugas : 15% Praktek: 50% Aktivitas 40% Laporan 60% tugas akhir pembuatan aplikasi berbasis web secara individual meliputi kreativitas, informatif
Kontrak Perkuliahan Kehadiran, aktivitas Nilai Tugas bagi yang hadir saat tugas diberikan dan
dikumpulkan tepat waktunya Nilai Kuis bagi yang hadir saat kuis diadakan Tidak bernilai plagiat/tugas ada yang sama
Pendahuluan Apa yang dimaksud dengan World Wide Web ? Apakah sama dengan internet? Siapa penemunya?
Berapa umur internet? Bagaimana konsep kerjanya ? Hal apa saja yang dapat dikerjakan ? Apakah harus dikerjakan dengan programming ?
Pendahuluan (lanjutan) Teknologi komputer email, chatting, melihat/mencari
informasi (browsing) melalui media internet Ide dasar Komputer saling berkomunikasi Protokol
Protokol Untuk dapat berhubungan dengan komputer lain dalam suatu jaringan diperlukan suatu protokol. Protokol adalah kumpulan instruksi/prosedur
yang membentuk kesatuan. Protokol TCP/IP adalah protokol yang bertugas mengolah data lalu mengirimkannya ke tujuan.
Lanjutan Protokol TCP (Transfer Control Protocol)
Pengolah data yang dilakukan meliputi penyandian, pemeriksaan kesalahan, pembukaan sandi di komputer tujuan. IP (Internet Protocol) pencarian rute tercepat, pemeriksa kebenaran tujuan dan penjaga keutuhan data yang terkirim.
Lanjutan Protokol 3 layer teratas (upper layer) Application, Presentation, Session → mendefinisikan bagaimana aplikasi berkomunikasi satu sama lain dan bagaimana aplikasi berkomunikasi dgn user 4 layer dibawah (lower layer) Transportation, Network, Datalink, Physical →
mendefinisikan bagaimana data dipindahkan dr satu tempat ke tempat lain.
Layer 4 (transportation) → data dikapsulisasi (termasuk addressing dan error checking) dalam bentuk sebuah segment Melakukan segmentasi dan menyatukan kembali data yang tersegmentasi menjadi sebuah arus data. Menyediakan mekanisme metode pengiriman Melakukan perbaikan kesalahan sblm pengiriman Dikenal mekanisme three way handshake (connecton oriented)
Lanjutan protokol layer 4 Mekanisme three way handshake : Segmen persetujuan koneksi (permintaan sinkronisasi) Pengiriman tanda terima (acknowledgment) untuk permohonan sinkronisasi,membuat parameter dan aturan koneksi antarhost. Cara pengurutan (sequencing) segmen di pihak penerima juga diminta untuk disinkronisasi sehingga dibentuk koneksi 2 arah.
Lanjutan mekanisme three way handshake Pemberitahuan kepada host tujuan bahwa persetujuan koneksi telah diterima dan koneksi yang sebenarnya telah terjadi. Transfer data dapat dimulai Dalam proses pemindahan data, terkadang terjadi congestion. Karena komputer berkecepatan tinggi
menghasilkan lalu lintas data yang jauh lebih cepat daripada kemampuan network yang menanganinya.
Jaringan Komputer LAN (Local Area Network) MAN (Metropolitan Area Network) WAN (Wide Area Network)
Perbedaannya?
Perbedaan LAN dengan WAN Saat ini LAN dengan WAN memiliki perbedaan yang
tipis. Jarak → LAN nirkabel (wireless) Bandwidth → bandwith yang besar dapat pula dimiliki oleh LAN Infrastruktur → WAN disewa dari sebuah provider dan LAN dimiliki sendiri
Jenis Koneksi WAN Leased line/ point to point/ dedicated line Circuit switching Packet switching
Leased line/ point to point/ dedicated line bandwidthnya khusus untuk pelanggan tertentu saja. Alur komunikasi WAN dari CPE yang telah ditetapkan sebelumnya oleh Service Provider melalui switch DCE menuju CPE di lokasi remote (pelanggan) sehingga memungkinkan jaringan DTE berkomunikasi pada setiap saat dengan tanpa melalui prosedur setup terlebih dahulu sebelum melakukan transmisi data
Circuit switching menggunakan modem dial up atau ISDN untuk transfer data dengan bandwidth yang kecil sambungan telpon dan hanya membayar waktu pemakaian saja
Packet switching berbagi bandwidth dengan perusahaan lain untuk menghemat biaya hanya berjalan baik apabila transfer data tidak kontinu dan diperlukan sewaktu-waktu
Internet, Intranet, Extranet Internet jaringan (physical) yang menghubungkan
ratusan juta komputer menggunakan protokol yang sama untuk berbagi/mengirimkan informasi (TCP/IP) Intranet jaringan seperti di internet dalam organisasi. Situs web internal dibuat oleh berbagai unit bisnis, tim, individu serta sumber daya jaringan dan aplikasi lainnya. Extranet jaringan yang menghubungkan sumber daya tertentu dari suatu perusahaan dengan pelanggan, pemasok, mitra bisnis lainnya, dengan menggunakan internet atau jaringan pribadi untuk menghubungkan intranet organisasi.
Web ≠ Internet Internet jaringan (physical) yang menghubungkan
ratusan juta komputer menggunakan protokol yang sama untuk berbagi/mengirimkan informasi (TCP/IP) Jaringan besar dengan jaringan yang lebih kecil didalamnya World Wide Web kumpulan dari dokumen multimedia yang saling berhubungan yang disimpan pada internet dan diakses menggunakan protokol (HTTP) Internet adalah hardware, Web adalah software, Internet berbasis Aplikasi adalah email, telnet, ftp, usenet, Instant Messenger, Napster dan sebagainya
Internet Semua pengguna intenet berkedudukan sejajar dan
bebas. Tidak ada pengawasan, sehingga informasi ini memiliki sisi gelap.
Sejarah Internet Ide menghubungkan komputer dengan jarak jauh Awal tahun 60-an Licklider pada M.I.T. Baran pada Rand National Physics Laboratory (U.K.) dikembangkan dari kalangan militer Amerika Serikat dalam hal pendistribusian dan desentralisasi jaringan. Survivability jaringan berfungsi walau diserang secara lokal fault-tolerance kesalahan lokal
Sejarah internet (lanjutan) 1969, Advanced Research Project Agency (ARPANET) Koneksi komputer pada UCLA, UCSB, SRI, Utah Berbagi data dan komunikasi (56Kb/sec VS 110 b/sec ) 1970-an, ukuran ARPANET berlipat setiap tahun Desentralisasi mempermudah penambahan komputer baru 1984 1000 komputer militer dan akademik 1980-an, Pemerintah U.S. Menentukan aturan dalam pengembangan internet Membentuk NSFNET untuk penelitian akademik (1986) ARPANET dinyatakan untuk keperluan militer dan pemerintahan
Sejarah internet (lanjutan) thn 90-an, Internet menghubungkan universitas dan
akademik secara virtual Bisnis dan individu terhubung 1992 1,000,000 computers dan non-profit org Internet Society: Internet Engineering Task Force, Internet Architecture Board, Internet Assigned Number Authority, World-Wide-Web Consortium
Perkembangan
pesat internet dalam 1-2 tahun (statistik Internet Software Consortium) Diperkirakan thn 2002 > 600 juta pengguna internet (www.nua.ie)
Manfaat jasa layanan internet ? Bersifat global tanpa batas (informasi bersifat bebas) Tersedia
berbagai macam informasi (cukup lengkap dan up to date) Sarana komunikasi yang efektif dan efisien untuk berbagai keperluan dengan tingkat kecepatan yang cukup tinggi Meringankan biaya operasional komunikasi
Web Manfaat Wahana bisnis on line (e-commerce). e-bisnis e-commerce (B2B,B2C,C2C) Media promosi barang, jasa dan media customer support, sarana informasi, misalnya untuk company profile perusahaan, lembaga, maupun perorangan.
Web (lanjutan) Dulu : web statis dan text base Saat ini : web dinamis, interaktif dan terintegritas Data yang sifatnya penting memerlukan perancangan
yang matang baik berhubungan dengan kualitas dan keamanan informasi Aplikasi web dapat diintegrasikan dengan perangkat lain, sistem portal/embedded
Web (lanjutan) Perkembangan tools web semakin pesat dan canggih Aplikasi semakin interaktif dan dinamis ICT (Information and Communication Technology)
Selanjutnya pengembang web akan dimanjakan dan
tanpa harus bersentuhan dengan programming (CMS, templating)
Sejarah web 1940,ide Vannevar Bush pada hypertext (cross-linked
dan inter-linked documents) 1960-an, sistem hypertext online mulai dikembangkan, contohnya Andy van Dam's FRESS, Doug Englebert's NLS 1987, Apple memperkenalkan HyperCard
Sejarah Web (lanjutan) 1989, Tim Berners-Lee pada European Particle Physics Laboratory (CERN) mendesain sistem hypertext untuk menghubungkan dokumen Non-WYSIWYG untuk isi dokumen disusun dalam HyperText Markup Language (HTML) protocol untuk download dokumen dan menerjemah isi dokumen disusun HyperText Transfer Protocol (HTTP) Diimplementasikan pada browser pertama – berbasis text, no embedded media
Sejarah Web (lanjutan) 1993,
Marc Andreessen (pada National Center Supercomputing Applications) mengembangkan Mosaic, Web browser graphical pertama 1994, Andreessen meninggalkan NCSA dengan menemukan Netscape (browser murah/gratis) mempopularisasi Web (1996 75% market share) 1995, Internet Explorer Microsoft
Statistik Netcraft Web
Server Survey. Saat ini diperkirakan 4050 M Web sites, dengan 4-5 B Web pages
Aplikasi Web
Web statis Web dinamis
Web statis Web statis → web yang berisi berisi text/links/images yang sama (tetap) setiap diakses biasanya dibentuk dengan HyperText Markup Language (HTML) sebagai text/image format pemeliharaan program harus dilakukan terus menerus. Ditekankan pada sisi tampilan yang banyak mengandung grafis, dibutuhkan kemampuan design grafis/web dan cita rasa seni Contoh online document, homepage
Web dinamis Perkembangan web mendukung online service dan e-commerce Web dinamis→ web yang menampilkan informasi
yang bersifat dinamis (berubah-ubah) Dapat berinteraksi dengan user Ditekankan pada pengolahan data dikaitkan dengan basis data sehingga dibutuhkan kemampuan dalam pemrograman web Contoh amazon.com, www.thehungersite.com
Server dan Client Side Programming Ada dua jenis pemrograman web, yaitu Server Side Programming Client Side Programming
Server Side Programming Server Side Programming → semua sintaks dan
perintah program yang diberikan akan dijalankan/diproses di Web Server hasilnya dikirimkan ke browser pengguna dalam bentuk HTML biasa. pengguna tidak dapat melihat kode asli yang ditulis dalam bentuk server side programming tersebut. Contoh server side programming seperti: CGI/Perl, Active Server Pages, Java Server Page, PHP, ColdFussion dan lain-lain.
CGI programming Program ditulis untuk mendukung Common Gateway
Interface ketika Web page submits, data dari page dikirim sebagai input ke program CGI Program CGI mengeksekusi di server dan mengirimkan kembali hasilnya ke browser sebagai Web page Komputasi yang besar/kompleks atau membutuhkan akses ke private data
Client Side Programming Client Side Programming → semua sintaks dan perintah program dijalankan di web browser client meminta dokumen yang mengandung script
script tersebut akan diambil dari web server dijalankan di web browser yang bersangkutan. Contoh dari client side programming : JavaScript, VbScript, HTML. Dieksekusi pada mesin client simple, generic, tapi tidak aman (insecure)
JavaScript Bahasa script untuk Web page, dikembangkan oleh
Netscape (1995) Menggunakan sintaks C++/Java Baik digunakan untuk penambahan fitur dinamik dalam Web page, pengontrolan form and GUI
Java applets Program dalam Java untuk tujuan khusus applets full expressive power of Java Sesuai untuk grafik dimana memenuhi kebutuhan
yang komplex
HTML (Hypertext Markup Language) HTML → bahasa markup(penanda) sebuah dokumen teks yang digunakan dalam pembuatan halaman web. Digunakan untuk mentransfer data atau dokumen dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, Mozilla Firefox, dll) Dalam penggunaannya sebagian besar kode HTML harus terletak di antara tag kontainer, diawali dengan
dan diakhiri dengan Komentar :
Lanjutan HTML Struktur HTML terdiri dari 2 bagian utama, yaitu bagian
head dan bagian body. Struktur utama HTML adalah isi head, berupa meta tag,title dan script isi body akan ditampilkan pada halaman browser
Lanjutan HTML sebagai tanda awal dokumen HTML sebagai informasi page header
sebagai judul halaman yang akan tampil pada bagian atas browser/title bar <body> sebagai tempat peletakan berbagai tag atribut seperti warna latar belakang, warna teks dan sebagainya<br />
<br />
Tugas diskusi kelompok (ketua kelompok) Topik : e-bisnis = e-commerce VS e-bisnis ≠ e-commerce e-bisnis e-commerce VS e-commerce e-bisnis Contoh e-bisnis, e-commerce<br />
<br />
Subjek : (Nama Ketua kelompok)_ebisnis Paper dengan ukuran kertas A4 Font Times New Roman dgn size 11 pt berspasi 1.5 spasi Batas atas 3 cm, kiri 3 cm, bawah 2 cm, kanan 2 cm Daftar Pustaka: Jurnal, alamat url, kapan diakses Kirim via email : ritasaputra@gmail.com sebelum 25 Pebruari 2011<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/by-rita-wiryasaputra151713567979209" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "By. Rita Wiryasaputra"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
