PEMROGRAMAN WEB 11 – XML, XHTML dan JSON
Andi WRE
XML (eXtensible Markup Language) Dirancang untuk membawa dan menyimpan data, bukan menampilkan data Tidak ada standar untuk tag XML, nama tag ditentukan sendiri. Dokumen XML disimpan dalam bentuk file teks dengan ekstensi .xml Perbedaan XML dan HTML : - XML bukan pengganti HTML - HTML didesain untuk menampilkan data - XML didesain untuk membawa data
Here comes–your Web Programming XMLfooter dan XHTML
XML Tree Dokumen XML membentuk struktur Tree Dokumen XML diawali dengan deklarasi XML yang menspesifikasikan versi XML yang digunakan.
Semua dokumen XML harus memiliki satu element root Istilah pada XML : root, parent, child, sibling Setiap element dapat memiliki atribut untuk informasi tambahan
Here comes–your Web Programming XMLfooter dan XHTML
XML Tree
Root : parent dari semua element Parent : element yang memiliki child Sibling : child pada level yang sama Here comes–your Web Programming XMLfooter dan XHTML
[contoh] XML
Root :
memiliki 4 child yaitu : , <author rel="nofollow">, <year>, <price><br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Ketentuan penulisan tag XML 1. Element XML terdiri dari 3 bagian : tag pembuka, konten, tag penutup 2. Case sensitive 3. Nama tag dibuat sendiri 4. Properly Nested, penulisan pasangan element harus sequential (berurut) 5. Harus memiliki 1 element root 6. Nilai suatu atribut harus diapit karakter kutip (" … ") 7. Karakter khusus<br />
<br />
8. Komentar di XML < ! - - comment - - ><br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Aturan penamaan XML Dapat mengandung karakter dan angka Tidak diawali dengan angka atau tanda baca (punctuation character) Tidak diawali dengan kata "xml" Tidak mengandung spasi Gunakan "_" (underscore) untuk pemisah Nama – nama seharusnya singkat dan simpel<br />
<br />
Note : XML Validator http://www.w3schools.com/xml/xml_validator.asp Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Atribut XML Jika memungkinkan konversikan semua atribut menjadi element Contoh :<br />
<br />
Permasalahan menggunakan atribut : - Atribut tidak dapat menyimpan multiple value (element bisa) - Atribut tidak memiliki struktur tree (element bisa) - Atribut sulit di-upgrade (for future changes)<br />
<br />
Note : Attributes are difficult to read and maintain. Use elements for data. Use attributes for information that is not relevant to the data. Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Well Form XML Dokumen XML yang memiliki sintaks XML yang benar (memenuhi aturan penamaan XML) Contoh :<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Valid XML Well Formed XML yang dilengkapi dengan Document Type Definition (DTD) DTD : mendefinisikan struktur dokumen Contoh :<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
[contoh] Viewing XML Files<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Displaying XML with CSS XML dapat diformat dengan CSS Property CSS yang digunakan sama dengan property CSS pada HTML Mengaitkan file CSS dan dokumen XML <?xml-stylesheet type="text/css" href=“file.css"?><br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
[Contoh] XML with CSS<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Displaying XML with XSLT eXtensible Stylesheet Language Transformations Mengubah dokumen XML menjadi HTML file.xml<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Displaying XML with XSLT modul_xml.xsl<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
XML JavaScript XML Parser digunakan untuk mengkonversi dokumen XML ke XML DOM object, sehingga dapat membaca file XML DOM (Document Object Model) mengakses dan memanipulasi data Syntax parses an XML document into an XML DOM object :<br />
<br />
XMLHttpRequest object : bertukar data dengan server Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
XML JavaScript XML DOM membaca dokumen XML sebagai struktur tree getElementsByTagName(“val") : Kumpulan elemen dengan nama tag val dalam bentuk array. childNodes : Akses ke elemen child. Dikembalikan dalam bentuk array. parentNode : Akses ke elemen parent. nextSibling : Akses ke elemen sebelah kanan. nodeName : Akses nama tag. nodeValue : Akses ke nilai konten<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
[Contoh] XML JavaScript<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
XHTML eXtensible HyperText Markup Language HTML yang memenuhi standar XML Aturan yang harus dipenuhi : - Properly nested - Tag selalu berpasangan - Lowercase - Nilai atribut harus diapit karakter kutip - Memiliki satu elemen root<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
XHTML<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Aturan XHTML Elements Must Be Properly Nested X<br />
<br />
O Empty Elements Must Also Be Closed X<br />
<br />
O Elements Must Be In Lower Case X<br />
<br />
O Attribute Names Must Be In Lower Case X<br />
<br />
O<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Aturan XHTML Attribute Values Must Be Quoted X<br />
<br />
O Attribute Minimization Is Forbidden X<br />
<br />
O<br />
<br />
Here comes–your Web Programming XMLfooter dan XHTML<br />
<br />
Keunggulan dan Kelemahan XML Keunggulan XML: -<br />
<br />
Format terbuka yang standar Dapat mereprentasikan hampir semua jenis data Mudah dibaca (oleh manusia) Banyak perangkat untuk mengolah XML di banyak bahasa pemrograman<br />
<br />
Kelemahan XML: - Struktur dengan sintaks yang besar membuat file menjadi besar - Mungkin sulit untuk “memaksa” beberapa jenis data menjadi format XML yang baik - Kode Javascript untuk menavigasi XML DOM sangat besar dan tidak menyenangkan<br />
<br />
Here comes your footer<br />
<br />
Web Programmin<br />
<br />
JSON – JavaScript Object Notation JSON : format data yang melambangkan data sebagai sebuah set dari JavaScript obyek - Ditemukan oleh Douglas Crockford (dari Yahoo!) - Didukung secara native di hampir semua browser modern - Tidak sepopuler XML, tetapi semakin populer karena kesederhanaan dan kemudahan pemakaian<br />
<br />
Here comes your footer<br />
<br />
Web Programmin<br />
<br />
Sintaks Obyek JavaScript<br />
<br />
Di JavaScript, kita dapat membuat obyek baru tanpa membuat class Sebuah obyek dapat memiliki methods (function properties) yang direferensikan ke diri sendiri dengan this Dapat mereferensikan beberapa fields dengan [“fieldName”] atau .fieldName jika fieldName adalah identifier legal dari JavaScript Nama – nama field dapat ditempatkan dalam quote (e.g weight)<br />
<br />
Here comes your footer<br />
<br />
Web Programmin<br />
<br />
XML vs JSON<br />
<br />
Here comes your footer<br />
<br />
Web Programmin<br />
<br />
Method dengan JSON JSON.parse(string) : konversi string dari JSON data ke obyek JavaScript yang ekuivalen dan mengembalikannya JSON.stringify(object) : konversi sebuah obyek dari JSON data ke sebuah string (lawan dari JSON.parse)<br />
<br />
Here comes your footer<br />
<br />
Web Programmin<br />
<br />
Latihan Ekspresi JSON<br />
<br />
Ekspresi apakah yang akan dihasilkan?<br />
<br />
Here comes your footer<br />
<br />
Web Programmin<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/pemrograman-web-11-xml-xhtml-dan-json-andi-wre" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "PEMROGRAMAN WEB. 11 XML, XHTML dan JSON. Andi WRE"</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>
