By . Rita Wiryasaputra
Memahami teknologi dan protokol yang mendasari World Wide Web Memahami dengan teknik dan penggunaan pengembangan aplikasi berbasis web baik dari client-side dan server-side Mengembangkan pengetahuan tentang HTML, JavaScript, Java, PHP sebagai bahasa untuk mengembangkan aplikasi web
Sidik, Betha, et al. Pemrograman Web dengan HTML, Bandung: Penerbit Informatika, 2007 Bryan, P., et al. HTML, XHTML, and CSS Bible 3rd Edition, Indianapolis: Wiley Publishing Inc, 2004. Deitel, et al. Internet & WWW How to Program 2nd Edition, Deitel and Associates Inc., 2004 Sebesta, R.,Programming the World Wide Web, 2nd Edition, Addison Wesley, 2002.
Pengenalan HTML Pengenalan PHP: variable, tipe data, pengkondisian, perulangan, fungsi, array, manipulasi string Cookies dan Sessions Pengaksesan database pada web Applet XML
Teori: 50% TAS : 35% TTS : 25% Quis : 20% Tugas : 20%
Praktek: 50% Aktivitas 40% Tugas 60% Online dan offline secara individual meliputi kreativitas, informatif
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
Penulisan karya ilmiah yang dipublish dengan topik sebagai berikut: Sistem pakar (TI) : metode Forward Chaining Riset Operasi (TI) : metode Simplex 2 Phase Sistem Pengambilan Keputusan (SI) : Entropy Pengantar Teknologi Mobile (SI)
Rektorat
Sekretariat
PDE Dengan PC Stand Alone
Bank ‘X’
Ide dasar Komputer saling berkomunikasi Protokol (jaringan komputer)
Contoh Jaringan Intranet Kampus
ISP GOVERNMENT NET INT’L ORG. NET
Gedung D Lantai-4
Gedung D Lantai-3
Hub e-Mail Server Hub Web/DNS
Gedung D Lantai-1
Internet Services
ROUTER
Hub
Gedung D Lantai-2
Website Sistem Informasi Akademik
Hub
SWITCH Firewall
Hub APLIKASI ADM
Database Server
Server
APLIKASI Umum
Application Server
Server
APLIKASI Akademik
Sekretariat SWITCH/HUB
Server SWITCH/HUB LOKASI A
SWITCH/HUB LOKASI C
SWITCH/HUB LOKASI B
Sekretariat
Gedung-A
Gedung-B
Gedung-C
Gedung-F
Hotspot Kampus
Backbone California USA
PA LA PA Bagaimana Internet Bekerja INDOSATNET JAKARTA Telemedia Network Cakrawala (TNC) UGM
KAMPUS STMIK Pelita Nusantara ITB
RS Panti Rapih
Dengan Pulsa Telepon Lokal Atau Menggunakan Antena Radio DPRD
ITS
Pemkot Jogja
Kopertis
PT. Sucofindo
Pemerintah Propinsi LAMPUNG
Tukar Menukar Data/info Secara On-line E-mail Surat-menyurat Antar Unit Kerja Secara Cepat, Kirim Mengirim Dokumen/file Secara Elektronik Sebagai Media Diskusi (Video Conference) chatting Dapat Mengakses Data/info Yang Disediakan Oleh Penyedia Informasi Baik Di Dalam Maupun Luar Negeri (browsing) Sarana Multimedia On-line E-commerce (Elektronik Perdagangan)
Apa yang dimaksud dengan internet? Apa yang dimaksud dengan World Wide Web (web)? Apakah web sama dengan internet? Bagaimana konsep kerjanya ? Hal apa saja yang dapat dikerjakan ? Apakah harus dikerjakan dengan programming ?
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 Semua pengguna internet berkedudukan sejajar dan bebas.
Bersifat global tanpa batas (informasi bersifat bebas). Negatifnya: Tidak ada pengawasan (informasi memiliki sisi gelap) 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 Sejarah internet
Kategori website terbagi atas: Website company profile Shopping online Catalog online News publishing Blog (weblog) Forum Member online Sejarah web
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 Perkembangan tools web semakin pesat dan canggih tanpa harus bersentuhan dengan programming (CMS, templating)
Protokol web: Hypertext Transfer Protocol (HTTP) Protocol standard aturan yang digunakan untuk berkomunikasi pada jaringan komputer Address web: URL(Uniform Resource Locator) standard alamat internet. HTML untuk membuat dokumen yang dapat diakses melalui web
Internet jaringan (physical) yang menghubungkan ratusan juta komputer World Wide Web kumpulan dari dokumen/halaman multimedia yang saling berhubungan (hyperlink) yang disimpan pada internet dan diakses menggunakan protokol (HTTP). Multimedia informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya. Web dilihat melalui software/program browser internet (Internet Explorer, Firefox, Google Chrome, Safari, Opera, dll), Internet adalah hardware, Web adalah software
Browser software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Biasanya: Internet Explorer Mozilla FireFox Opera
Sistem programming (aplikasi visual berbasis windows ) misalnya Visual Basic, Delphi, Kdevelop
Web based programming
Penentu kinerja aplikasi • optimasi penggunaan memori • manajemen proses • pengaturan Input-Output
• kecepatan akses database • kecepatan akses jaringan dan Internet
Cara aplikasi berjalan
tidak dapat dijalankan langsung di komputer dibutuhkan engine (web server)
aplikasi dibangun dengan menggunakan tool tertentu, kemudian dikompilasi. Hasilnya dapat langsung digunakan dalam komputer
Merupakan sebuah komputer induk dimana website diletakkan, sehingga dapat diakses oleh komputer client dalam jaringan.
Kriteria web server: Memiliki spesifikasi hardware yang tinggi, kapasitas peyimpanan yang cukup besar, sistem pertahanan virus yang baik Terhubung ke jaringan Terinstall software web server, software database server, e-mail server, dan application server
Web statis Web dinamis
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 pengunjung website statis tidak dapat menentukan informasi apa yang ingin dilihatnya, dan tetap pada informasi apa yang ditawarkan
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 Contoh amazon.com, www.thehungersite.com
dengan pemahaman programming : Server Side Programming Client Side Programming
atau tanpa pemahaman programming CMS (Content Management System)
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.
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 → semua sintaks dan perintah program dijalankan di web browser Dieksekusi pada mesin client simple, generic, tapi tidak aman (insecure) 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.
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
Program dalam Java untuk tujuan khusus applets full expressive power of Java Sesuai untuk grafik dimana memenuhi kebutuhan yang komplex
HTML → bahasa markup(penanda) sebuah dokumen teks yang digunakan dalam pembuatan halaman web. Digunakan untuk mentransfer data atau dokumen dari web server ke browser HTML editor yang digunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad. Dalam penggunaannya sebagian besar kode HTML harus terletak di antara tag kontainer, diawali dengan
dan diakhiri dengan Komentar :
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
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 /> </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-wiryasaputra26b6ab7d419757c982e7524db089f03b35116" 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>
