Tampilkan postingan dengan label PPWeb. Tampilkan semua postingan
Tampilkan postingan dengan label PPWeb. Tampilkan semua postingan

Jumat, 16 Maret 2012

PPWEB resume 5

XSLT
Extensible 
Stylesheet 
Language  
Transformation

XSLT digunakan untuk mentransformasi XML ke dalam format apapun, biasanya (X)HTML.

Dalam file xml tambahkan
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="customers.xsl"?>
<!DOCTYPE customers [

href customer di atas tujukan pada file xsl yang akan kita buat.

Contoh file XSL :
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <title>Customer List</title>
                    <link rel="stylesheet" href="mystyle.css" />
                        <style>
                                body {
                                background-color: gray;
                                }
                                table {
                                background-color: white;
                                }
                </style>
            </head>
            <body>
                <table border="1">
                    <tr>
                        <th>Customer ID</th>
                        <th>Nama</th>
                        <th>Alamat</th>
                        <th>Telp</th>
                        <th>Email</th>
                        <th>Photo</th>
                        </tr>
                            <xsl:for-each select="customers/customer">
        <tr>
                            <xsl:choose>
                            <xsl:when test="@type='retailer'">
                               <td style="background-color: lime;">
                                    <xsl:value-of select="@cust_id" />
                                </td>
                            </xsl:when>
                            <xsl:otherwise>
                                <td style="background-color: skyblue;">
                            <xsl:value-of select="@cust_id" />
                                </td>
                                    </xsl:otherwise>
                                    </xsl:choose>
                                <td>
                                    <xsl:value-of select="name/last_name" />&#160;
                                    <xsl:value-of select="name/first_name" />
                                </td>
                                <td>
                                    <xsl:value-of select="address" />
                                </td>
                                <td>
                                    Home: <xsl:value-of select="phone/home" /><br />
                                    Cell: <xsl:value-of select="phone/cell" />
                                </td>
                                <td>
                                    <xsl:value-of select="email" />
                                </td>
                                <td>
                                    <xsl:value-of select="photo/@file" />
                                </td>
                            </tr>
                                </xsl:for-each>
                            </table>
                        </body>
</html>
</xsl:template>
</xsl:stylesheet>

Dari file di atas dapat didapat bahwa xsl mensupport penggunaan
-          perulangan dengan menggunakan
<xsl : template match = “/”>
  <xsl:for-each select= “customers/customers”>
  </xsl:for-each>
</xsl:template>

-          percabangan
<xsl:choose>
  <xsl:when>  </xsl:when>
  <xsl:otherwise>   </xsl:otherwise>
</ xsl:choose >

Dalam file xsd untuk menggunakan spasi atau jika di xsd dinamakan white space gunakan ISO-encode yaitu &#160;




DOM
Document 
Object 
Model

-          Document is the web page, not the site
-          Object is anyting you see in the web page (image, link, button, table, dll)
-          Model is the “tree view” of the web page (tag-tag html dari object)

Contoh DOM :
<HTML>
                <HEAD>
                                <TITTLE >ISI</TITTLE>
                </HEAD>
<BODY>
<!-- ini baris komen
-->
                <P ID=”XXX”>HAHA</P>
                <UL>
                                <LI>A</LI>
                                <LI CLASS = “XX”>B</LI>
                                <LI>C</LI>
                </UL>
</BODY>
</HTML>

DOM dari script HTML di atas :








   
DOM memiliki :
a.       Node
Tipe – tipe node :
o   Element node
o   Attribute node
o   Text node
o   Comment node
b.      Leaf

Manfaat DOM (scripting) :
-          Get the web title
-          Find the first paragraph, then change the value
-          Change the background color of a table
-          Find the logo image, then move it to 100 px to the right
-          Added some function to the button(s) link(s)
-          Create new node (any type)

Jumat, 02 Maret 2012

PPWEB resume 3 - 4

Extensible
Markup
Language
(XML)

HTML = display (formated) information on the web browser, sedangkan
XML = create your own tag.
XML digunakan saat membutuhkan portabilitas & standarisasi dari pertukaran dokumen.
Contoh :
Penerbit buku ingin memberi update info produk kepada retailernya. (via)
1.      Text file à kirim via e-mail, copas ke db u/ aplikasi e-commerce
Portable, karena dapat dikirim kemana-mana namun tidak standar krn text file belum dapat dipakai untuk multiplatform.
2.      Pdf  Ã  kirim via email, parser ke db untuk aplikasi e-commerce
Portable kern dpt dikirim ke mana tapi tidak standar karena parser tiap bulan berbeda-beda
3.      SQL à kirim via email, restore ke db untuk aplikasi e-commerce
Tidak portable karena tidak dapat digunakan di db lain, namun standar karena format di dalamnya memeiliki standarisasi
4.      XML à kirim via email, parsing ke db untuk aplikasi e-commerce
Portable dan standar.

Tag pada XML  case sensitive dan tidak boleh dipisah oleh spasi. Untuk memberi / menentukan standar XML :
1.      DTD (Document Type Definition)
Ditulis dengan 2 cara :
a.       Inline / internal DTD
b.      Outline (masih belum)
2.      XML Schema

Contoh XML dengan DTD inline
<!DOCTYPE asus[
<!ELEMENT asus (laptop+)>
<!ELEMENT laptop (edisi, tipe, spesifikasi_hw, penampakan)>
<!ELEMENT edisi (#PCDATA)>
<!ELEMENT tipe (#PCDATA)>
<!ELEMENT spesifikasi_hw (prosesor, graphic, storage, battery)>
<!ELEMENT prosesor (#PCDATA)>
<!ELEMENT graphic (#PCDATA)>
<!ELEMENT storage (#PCDATA)>
<!ELEMENT battery (#PCDATA)>
<!ELEMENT penampakan (dimensi, berat)>
<!ELEMENT dimensi (#PCDATA)>
<!ELEMENT berat (#PCDATA)>
]>

<asus>
            <laptop>
                        <edisi>Business</edisi>
                        <tipe>B23E</tipe>
                        <spesifikasi_hw>
                                    <prosesor>Intel Core i3 - i7 Processor</prosesor>
                                    <graphic>Integrated Intel HP Graphic 3000</graphic>
                                    <storage>2.5" SATA 320GB - 750GB</storage>
                                    <battery>3Cells 4400 mAh 48 Whrs</battery>
                        </spesifikasi_hw>
                        <penampakan>
                                    <dimensi>30.5 x 20.6 x 2.8 cm (WxDxH)</dimensi>
                                    <berat>1.55 kg (with battery)</berat>
                        </penampakan>
            </laptop>
           
            <laptop>
                        <edisi>Gaming Powerhouse</edisi>
                        <tipe>G51J</tipe>
                        <spesifikasi_hw>
                                    <prosesor>Intel Core i7 Processor</prosesor>
                                    <graphic>NVDIA GeForce GTX 260M with 1GB DDR3 VRAM</graphic>
                                    <storage>2.5" SATA 250GB - 500GB</storage>
                                    <battery>6Cells : 4800mAh - 9Cells : 7200 mAh</battery>
                        </spesifikasi_hw>
                        <penampakan>
                                    <dimensi>37.5 x 26.5 x 3.43 ~4.06 cm (WxDxH)</dimensi>
                                    <berat>3.30 kg (with battery)</berat>
                        </penampakan>
            </laptop>
           
            <laptop>
                        <edisi>Special Edition --> Bamboo Series</edisi>
                        <tipe>U33Jc</tipe>
                        <spesifikasi_hw>
                                    <prosesor>Intel Core i3 - i5 Processor</prosesor>
                                    <graphic>NVIDIA GeForce 310M with 1GB DDR3 VRAM</graphic>
                                    <storage>2.5" SATA 320GB - 640GB</storage>
                                    <battery>6Cells : 4400mAh - 8Cells : 4400 mAh</battery>
                        </spesifikasi_hw>
                        <penampakan>
                                    <dimensi>32.8 x 23.2 x 1.48 ~3.10 cm (WxDxH)</dimensi>
                                    <berat>1.9 kg (with battery)</berat>
                        </penampakan>
            </laptop>
</asus>

Preview XML di atas :

Contoh dengan XML outline :

dibagi jadi 2 file yaitu file xml dan file dtd
a. dalam file dtd

<!ELEMENT laptop_asus (laptop*)>
<!ELEMENT laptop (edisi, spesifikasi_hw, penampakan)>
<!ELEMENT edisi (#PCDATA)>
<!ELEMENT spesifikasi_hw (prosesor, graphic, storage, battery)>
<!ELEMENT prosesor (#PCDATA)>
<!ELEMENT graphic (#PCDATA)>
<!ELEMENT storage (#PCDATA)>
<!ELEMENT battery (#PCDATA)>
<!ELEMENT penampakan (dimensi, berat)>
<!ELEMENT dimensi (#PCDATA)>
<!ELEMENT berat (#PCDATA)>

<!ATTLIST laptop
tipe CDATA #REQUIRED>

b. dalam file xml

<?xml version="1.0"?>

<!DOCTYPE laptop_asus SYSTEM "laptop_asus.dtd">

<laptop_asus>
<laptop tipe="B23E">
<edisi>Business</edisi>
<spesifikasi_hw>
<prosesor> Intel Core i3, i5, i7 Processor</prosesor>
<graphic>Integrated Intel HP Graphic 3000</graphic>
<storage>2.5" SATA 320GB - 750GB</storage>
<battery>3Cells 4400 mAh 48 Whrs</battery>
</spesifikasi_hw>
<penampakan>
<dimensi>30.5 x 20.6 x 2.8 cm (WxDxH)</dimensi>
<berat>1.55 kg (with battery)</berat>
</penampakan>
</laptop>

<laptop tipe="G51J">
<edisi>Gaming Powerhouse</edisi>
<spesifikasi_hw>
<prosesor> Intel Core i7 Processor</prosesor>
<graphic>NVDIA GeForce GTX 260M with 1GB DDR3 VRAM</graphic>
<storage>2.5" SATA 250GB - 500GB</storage>
<battery>6Cells : 4800mAh - 9Cells : 7200 mAh</battery>
</spesifikasi_hw>
<penampakan>
<dimensi>37.5 x 26.5 x 3.43 ~4.06 cm (WxDxH)</dimensi>
<berat>3.30 kg (with battery)</berat>
</penampakan>
</laptop>

<laptop tipe="U33J">
<edisi>Special Edition --> Bamboo Series</edisi>
<spesifikasi_hw>
<prosesor> Intel Core i3, i5 Processor</prosesor>
<graphic>NVIDIA GeForce 310M with 1GB DDR3 VRAM</graphic>
<storage>2.5" SATA 320GB - 640GB</storage>
<battery>6Cells : 4400mAh - 8Cells : 4400 mAh</battery>
</spesifikasi_hw>
<penampakan>
<dimensi>32.8 x 23.2 x 1.48 ~3.10 cm (WxDxH)</dimensi>
<berat>1.9 kg (with battery)</berat>
</penampakan>
</laptop>
</laptop_asus>

Contoh dengan XML schema :
xml schema dibuat dengan menggunakan fasilitas dari microsoft visual studio.

a. dalam file xml 



<?xml version="1.0"?>

<laptop_asus xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="laptop_asus_schema.xsd">
<laptop tipe="B23E">
<edisi>Business</edisi>
<spesifikasi_hw>
<prosesor> Intel Core i3, i5, i7 Processor</prosesor>
<graphic>Integrated Intel HP Graphic 3000</graphic>
<storage>2.5" SATA 320GB - 750GB</storage>
<battery>3Cells 4400 mAh 48 Whrs</battery>
</spesifikasi_hw>
<penampakan>
<dimensi>30.5 x 20.6 x 2.8 cm (WxDxH)</dimensi>
<berat>1.55 kg (with battery)</berat>
</penampakan>
</laptop>

<laptop tipe="G51J">
<edisi>Gaming Powerhouse</edisi>
<spesifikasi_hw>
<prosesor> Intel Core i7 Processor</prosesor>
<graphic>NVDIA GeForce GTX 260M with 1GB DDR3 VRAM</graphic>
<storage>2.5" SATA 250GB - 500GB</storage>
<battery>6Cells : 4800mAh - 9Cells : 7200 mAh</battery>
</spesifikasi_hw>
<penampakan>
<dimensi>37.5 x 26.5 x 3.43 ~4.06 cm (WxDxH)</dimensi>
<berat>3.30 kg (with battery)</berat>
</penampakan>
</laptop>

<laptop tipe="U33J">
<edisi>Special Edition --> Bamboo Series</edisi>
<spesifikasi_hw>
<prosesor> Intel Core i3, i5 Processor</prosesor>
<graphic>NVIDIA GeForce 310M with 1GB DDR3 VRAM</graphic>
<storage>2.5" SATA 320GB - 640GB</storage>
<battery>6Cells : 4400mAh - 8Cells : 4400 mAh</battery>
</spesifikasi_hw>
<penampakan>
<dimensi>32.8 x 23.2 x 1.48 ~3.10 cm (WxDxH)</dimensi>
<berat>1.9 kg (with battery)</berat>
</penampakan>
</laptop>
</laptop_asus>

b. dalam file xsd


<?xml version="1.0" encoding="utf-8"?>
<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified" xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="laptop_asus">
    <xs:complexType>
      <xs:sequence>
        <xs:element maxOccurs="unbounded" name="laptop">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="edisi" type="xs:string" />
              <xs:element name="spesifikasi_hw">
                <xs:complexType>
                  <xs:sequence>
                    <xs:element name="prosesor" type="xs:string" />
                    <xs:element name="graphic" type="xs:string" />
                    <xs:element name="storage" type="xs:string" />
                    <xs:element name="battery" type="xs:string" />
                  </xs:sequence>
                </xs:complexType>
              </xs:element>
              <xs:element name="penampakan">
                <xs:complexType>
                  <xs:sequence>
                    <xs:element name="dimensi" type="xs:string" />
                    <xs:element name="berat" type="xs:string" />
                  </xs:sequence>
                </xs:complexType>
              </xs:element>
            </xs:sequence>
            <xs:attribute name="tipe" type="xs:string" use="required" />
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>




Untuk menentukan valid tidaknya sebuah file xml dapat dilakukan dengan 2 cara :
1. dengan membukanya di browser (jika dapat terbaca, dapat dikatakan bahwa xml sudah lumayan standart)
2. untuk lebih tepatnya / lebih valid dapat dites dengan diupload di http://validator.w3.org/.

Senin, 27 Februari 2012

PPWEB resume 1 + 2

Web
Engineering


Web Engineering (rekayasa web) merupakan sebuah sub-disiplin ilmu dari software engineering (rekayasa perangkat lunak) yang menggunakan pendekatan sains, sistematis, rekayasa, disiplin dan terukur untuk pengembangan, operasi dan pemeliharaan aplikasi berbasis web.
Web Engineering adalah bidang keilmuan yang multidisipliner dengan masukan dari ilmu-ilmu berikut:
  1. Human-Computer Interaction
  2. User Interface
  3. System Analysis and Design
  4. Software Engineering
  5. Requirement Engineering
  6. Hypermedia Engineering
  7. Information Structures
  8. Testing
  9. Modelling and Simulation
  10. Project Management

Teknik-teknik mendapatkan informasi akan kebutuhan pelanggan dalam membangun sebuah web :
1.      Wawancara
Tujuan:  Mendapatkan informasi tentang objektivitas dari aplikasi yang akan/sedang dikembangkan
Terdapat 4 langkah:
a. Identifikasi stakeholder
b. Persiapan wawancara (semua pertanyaan harus berorientasi tujuan)
c. Wawancara (perhatikan waktu dan tempat)
d. Dokumentasi wawancara

2.      Brainstorming
a.       Teknik ini meliputi pengumpulan informasi dan ide-ide dari semua stakeholder.
b.      Jumlah partisipan dalam setiap pertemuan brainstorming sebaiknya tidak lebih dari 10 orang (best practice)
c.       Harus ada 1-2 orang tambahan sebagai moderator, yang bertugas untuk menjaga diskusi tetap berorientasi pada tujuan pertemuan
d.      Informasi yang muncul sebagai hasil akhir teknik ini biasanya belum detil. Jika ini terjadi maka perlu dilakukan wawancara pada setiap partisipan

3.       Mapping
a.       Sebuah konsep pembuatan/pembangunan peta-peta yang mengikuti jalan pikiran pembuatnya
b.      Lebih efektif jika peta-peta tersebut dibuat menggunakan software mapping, agar lebih efektif jika ada orang lain yang ingin menambahkan node lain
c.       Kelemahannya adalah sering terjadi istilah yang ambigu maupun pengertian proses yang rancu, jika tidak disertai dengan glossary atau deskripsi lanjutan


4.       Storyboarding / Mockup Object
a.       Teknik ini meliputi penyajian skematis (biasanya pada kertas) dari berbagai user interfaces yang berbeda (sketsa/draft)
b.      Sketsa-sketsa yang ada harus dikelompokkan berdasarkan status tertentu: disetujui/fix, need revision, rejected, dll
c.       Lebih banyak digunakan oleh, namun tidak terbatas pada praktisi multimedia (web designer)
d.      Pengumpulan kebutuhan dengan cara ini biasanya dikombinasikan dengan salah satu Agile Method, yaitu: Scrum


5.      Use Case Modelling
Suatu model use case terdiri dari:
1)  Actor : elemen eksternal sistem (pengguna atau sistem lain)
2)  Description : alur proses dan keterangannya
3)  Hubungan diantaranya : include? extend?
Keuntungannya adalah bahwa teknik ini tidak hanya dipahami oleh pengembang namun juga oleh stakeholder yang kebanyakan dari mereka adalah orang-orang non-IT
Jika use case diagram dirasa kurang lengkap, pengembang bisa menambahkan diagram-diagram UML lain yang sesuai


6.       Checklist (Kuisioner)
a.       Teknik pengumpulan kebutuhan yang terdiri dari persiapan dokumen degnan pertanyaan yang memiliki jawaban singkat dan konkret, atau bahkan dengan sejumlah pilihan terbatas (checklist).
b.      Kelebihannya adalah pengembang aplikasi dapat dengan cepat mengetahui kebutuhan stakeholder dan aplikasi yang akan dibuat.
c.       Kelemahannya adalah pengembang haruslah orang-orang yang sudah berpengalaman/ahli dalam proses bisnis/domain masalah yang bersangkutan.




Website
Lifecycle




1.      Planning
a.       Audience Needs
b.      Technical
c.       Design
d.      Content
e.       Promotion
f.       Marketing
2.      Building
a.       Document
b.      Content Preparation
c.       Project Manage

3.      Sustaining
a.       Day-to-day managing
b.      Content
c.       Technical
d.      Promotion
e.       Marketing

4.      Improving
a.       Website test
b.      Review
c.       Innovation




Advanced
Web
Programming

Dalam Advanced Web Programming, programmer menggunakan teknik MVC yang merupakan sebuah teknik pemrograman yang bertujuan untuk memisahkan unsur “Database Manipulation”, unsur “Presentation”, dan unsur “Business Logic” dari sebuah aplikasi berbasis web.

“M” atau “Model” dalam MVC berperan sebagai pelaku interaksi dengan sistem database (database manipulation).

“V” atau “View” dalam MVC bertugas untuk mengatur semua hal yang berhubungan dengan tampilan (presentation).

“C” atau “Controller” dalam MVC bertugas untuk mengatur semua hal yang berhubungan dengan business logic maupun interaksi dari user (business logic).

Teknik ini akan terasa bermanfaat saat digabungkan dengan desain sistem bergaya DDD (Domain-Driven Development) dan menggunakan pemrograman bergaya OOP.