UTS-RAI 31 Oktober 2011 10:44
@wisnu
Materi : - Pengaantar Web Enginering - Konsep WE - HTML - CSS & JS - PHP
- Pengaantar Web Enginering - Rekayasa web ○ Metode untuk menciptakan sistem aplikasi berbasis web dnegan mengunakan teknologi rekayasa - Internet ("I" besar) ○ Merupakan public international network of network yang memungkinkan digunakn oleh siapa saja dan tidak terbatas pada kelompok orang tertentu - .internet ("i" kecil) ○ Merupakan singkatan dari internetwork, yang bisa berarti jaringan sebuah perusahaan multinasional, lembaga atau badan yang terbatas untuk penggunaan internal. - WWW ○ Merupakan sekumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam Internet - Web browser ○ Merupakan aplikasi client - Web server ○ Merupakan server - HTTP ○ Protokol standar yang digunakan untuk mengakses dokumen HTML - HTTPS ○ Protokol untuk mengakses dokumen HTML yang melalui jalur aman/ terenskripsi
- Konsep WE - Aplikasi Web ○ Web statis ○ Web dinamis - Multi Tier Appliaction ○ Client Side Semua perintah aplikasi dalam client side dijalankan di web browser yang digunakn oleh masing2 user Contoh : □ HTML, JS, Jquery Kekurangan □ Tergantung browser user □ Code bisa dilihat oleh user Server Side ○ Semua perintah aplikasi dijalankan pada sisi server, user hanya menerima hasil outputan dari server, bagian dari SS adalah pendefinisian fungsi dan fitur apliakasi Contoh □ PHP, CGI, ASP, JSP - HTML - HTML ○ Merupakan bahasa pemrograman web berupa format data yang digunakan untuk membuat dokumen hypertext yg dapat dibaca, diinterpretasikan dari satu platform komputer ke platform lainnya. - DHTML ○ Html dengan tambahan format2 khusu dan script untuk me,buat halaman web menjadi lebih interaktif/menarik. - Karakteristik HTML ○ Diawalai tag < dan diakiri tag > ○ Ada tag yang memiliki pasangan atau akiran, ada yang tidak Ada tag yang memiliki atribut, dan ada yg tidak RAI Page 1
○ Ada tag yang memiliki atribut, dan ada yg tidak ○ Tag dalam html tidak bersifat case sensitive ○ Html tidak mempedulikan white space characters
- Struktur global HTML ○ ---script untuk bagian head-- ---script bagian body-- ○ Tag pada head
<style> <script> <meta> ○ Tag pada body <div> <table> <br> <p> Dll ○ Tag Link <a href="path" rel="nofollow"> text</a> - CSS & JS - CSS ○ CSS merupakan mekanisme sederhana style sheet yang memungkinkan desainer atau programer web untuk membuat style dari web. ○ Model CSS Inline CSS □ Penulisan langsung pada tag HTML yang bersangkutan □ Contoh <p style="color:sienna;margin-left:20px "></p> Embedded CSS □ CSS dituliis pada tag <style> pada bagian <head> □ Contoh <style type="text/css"> .p { color :black;} </style> Linked CSS □ File css disimpan dlam file terpisah dengan html, namun file css dihubungkan dengan link pada tag <head> □ Contoh <link rel="stylesheet" type="text/css" href="style.css" /> ○ Tag CSS Class □ Merupakan style css yang dapat digunakn lebih dari 1 kali, dan dapat digunakan berbarengan dengan class lainnya dalam satu elemen tersebut dalam 1 file html □ Dilambangkan dengan tanda "." atau titik sebelum nama style □ Contoh .wsn {color:#dadada;} Dipanggil dengan cara <p class="wsn"> text</p> ID □ Merupakan style css yang hanya dapat digunakan hanya 1 kali dalam 1 file html □ Dilambangkan dengan tanda "#" sebelum nama style □ Contoh #wsn {color:#dadada} Dipanggil dengan cara RAI Page 2<br />
<br />
Dipanggil dengan cara <p id="wsn"> text</p> - JavaScript ○ Pengertian Merupakan scripting yang dikembangkan oleh Sun Microsystem dan Netscape, yang digunakn untuk membuat halaman web menjadi lebih interactif. ○ Karakteristik Bergantung pada browser yang mengakses halaman web. Merupakan Client Side Programming Code terintegrasi dalam dokumen HTML Berbasis objek, menggunkan objek built-in. Tanpa class atau inheretance. ○ Cara penggunaan Mengunakn tag <Script> □ Contoh : <script type="text/javascript"> ---Statement JavaScript--</srcipt> Mengunakan File eksternal □ Contoh : <script type="text/javascript" src="js.js"></script> ○ Contoh JavaScript /-------------------------------------------------------------------- <SCRIPT language="JavaScript"> alert("Selamat Datang di Pemrograman JavaScript"); document.write("<H1>Rekayasa Aplikasi Internet</H1>"); document.write("<p><b>Contoh Pertama JavaScript</b></p><br>"); </SCRIPT> ○ Pengakseses Elemen dalam JS JS memperlakukan elemen2 yang tampil dalam jendela web browser sebagai suatu objek, artinya : □ Element2 tersebut diklasifikasikan berdasarkan hirarki, sehingga kita bisa mengetahui posisi objek sebenarnya □ Elemt2 tersebut terasosiasi dengan kondisi/sifat kusus (properti) Hirarki dokumen<br />
<br />
Screen clipping taken: 31/10/2011 15:29<br />
<br />
○ Variable dalam JS Aturan penulisan □ Nama variable harus diawalai huruf atau karakter _ □ Tidak boleh ada spasi kosong dalam nama variable □ Tidak boleh menggunakan kode yang digunakn JS JS mengunakan sistem case sensitive Eksplisit □ Contoh : Var test ="hallo" Implisit □ Contoh : test = "hallo" Jika pendeklarasian variabel dilakukan dengan cara implisit, maka variabel tersebut dapat diakses dari seluruh bagian program (semua fungsi dalam program dapat memanggil dan menggunakan variabel ini). RAI Page 3<br />
<br />
seluruh bagian program (semua fungsi dalam program dapat memanggil dan menggunakan variabel ini). Variabel ini disebut sebagai variabel global. Jila pendeklarasian variabel dilakukan dengan cara eksplisit, maka kemungkinan pengaksesan variabel tersebut bergantung pada lokasi penempatan variabel. □ Jika dideklarasikan pada awal script program, artinya sebelum pendeklarasian semua fungsi, maka variabel ini menjadi variabel global. □ Jika dideklarasikan di dalam suatu fungsi tertentu, maka variabel ini hanya dapat diakses dalam fungsi tersebut, dan disebut sebagai variabel lokal. JavaScript hanya dapat memanipulasi empat jenis data, yaitu: □ Bilangan: bulat atau desimal, yang disebut sebagai integer atau float. □ Kata (kumpulan huruf), yang disebut sebagai string. □ Boolean: suatu variabel yang memiliki dua nilai (true atau false) dan berfungsi untuk memeriksa suatu kondisi. □ Null: suatu kata khusus (termasuk keyword juga) untuk menjelaskan bahwa tidak ada data di dalamnya. Pemanggilan fungsi JS dengan event <form> <input type="button" value="Click me" onClick="alert('Ya')"> </form> - PHP - PHP ○ PHP atau singkatan dari PHP Hypertext Preprocessor merupakan salah satu server-side scripting yang dapat disatukan dengan HTML untuk membuat halaman web dinamis.<br />
<br />
○ Cara penulisan PHP <?php // Script PHP ?> ○ Penulisan variable Diawali dengan tanda $ Variable dapat dipasing dengan □ URL □ Form □ Cookie ○ Pengunaan PHP ini hampir sama dengan Bahasa C ○ Statement2 Require() □ Digunakan untuk membaca nilai variable dan fungsi2 dari sebuh file lainnya □ Tidak bisa dimasukkan dalam loop Include() □ Akan menyertakan isi suatu file tertentu. □ Include dapat diletakkan dalam loop ○ PHP mendukung pemrograman OO - Cookie dan Session ○ Cookie Merupakan sepotong data yang disimpan dalam harddirk lokal milik client, dan digunakan oleh halaman web untuk mengingat suatu informasi Misal digunakan untuk menyimpan username/password ○ Session Session diimplementasikan dengan menyimpan data pada web server. Dengan demikian tidak perlu ada komunikasi bolak-balik antara web server dan client ketika web membutuhkan data tersebut Setiap session dibentuk maka akan ada referensi yang menunjuk ke session tersebut. Yang disebut dengan Session Identifier (SID). Mengawali session □ Session_start() Mengakiri session □ Session_destroy() Mengetahui SID □ Session_id() □ mendafta RAI Page 4<br />
<br />
□ mendafta □ Rkan variable session Session_register(namaVariable); - Level kesalahan menyatakan tingkat kesalahan yang berupa: ○ parse error, menyatakan kesalahan karena kaidah ○ fatal error, menyatakan kesalahan sematik yang membuat PHP menghentikan eksekusi program ○ warning, akan membuat pesan kesalahan ditampilkan namun eksekusi program tetap dilakukan ○ notice.<br />
<br />
RAI Page 5<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/terenskripsi" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "terenskripsi"</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 © 2025 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>
