Menampilkan Tag HTML Pada Halaman HTML

Kadang kita ingin menampilkan tag-tag HTML pada halaman web kita, misalkan kita sedang memberikan tutorial mengenai web developing.

Ada beberapa cara untuk menampilkan tag HTML kedalam halaman web kita, berikut ini beberapa cara tersebut.

Cara Pertama

Menggunakan tag “<pre>”. Tag ini dapat digunakan untuk menampilkan kode program atau text apapun dengan format yang sama, artinya format yang nanti ditampilkan akan sama seperti format aslinya.

Contoh penggunaanya:
<pre>
Ini contoh penggunaan pre,
Anda dapat memasukkan kode program didalamnya.
</pre>

Cara Kedua

Cara kedua adalah dengan menggunakan tag “<xmp>”.

Contoh penggunaannya:
<xmp>
Ini contoh penggunaan xmp
Anda dapat memasukkan kode program didalamnya.
</xmp>

Cara Ketiga

Cara ketiga adalah menggunakan tag “<code>”.

Contoh penggunaanya:
<code>
Ini contoh penggunaan tag code
Anda dapat memasukkan kode program didalamnya.
</code>

Cara Keempat

Cara keempat adalah menggunakan HTML ASCII dalam penulisan tag pembuka dan tag penutup.
& l t ; akan menghasilkan <, sedangkan & g t ; akan menghasilkan >
Perlu diingat tuliskan tag tersebut tanpa spasi.

Contoh penggunaanya:
& l t ; b & g t ; Ini contoh penulisan tag bold & l t ; /b & g t ;

Hasilnya akan terlihat seperti ini ;
<b>Ini contoh penulisan tag bold</b>

Selamat Mencoba! 😀

Clickable Box

Ini pengalaman pribadi saya ketika mengembangkan web. Ceritanya client meminta box yang dapat diklik, jadi biasanya link itu berupa text, namun kali ini berupa box (kotak).

Saya kemudian mencoba berbagai cara, salah satunya dengan memasukkan elemen “<div>” kedalam elemen “<a>”, contohnya seperti ini :

“<a href=’#’> <div style=’width:100px;height:50px;’>Hello Guys</div></a>”

Memang di browser keluarga firefox, seperti opera, safari, dan chrome kode tersebut dapat berjalan lancar. Tapi kita seharusnya memberikan produk terbaik pada client, sehingga kode harus dapat berjalan dengan baik pada semua browser umum, termasuk Internet Explorer milik Microsoft.

Setelah utak-atik sana sini saya menemukan 2 cara untuk melakukannya, kita akan menggunakan CSS sebagai stylernya. 😀

Cara Pertama

Buat CSS seperti dibawah ini, anda bisa ubah stylenya sesuka anda.

a#box {
     width: 100px;
     height: 50px;
     color: black;
}

Kemudian terapkan di kode HTML anda :
<a id=”box”>Ini Contoh Clickable Box</a>

Cara Kedua

Anda bisa menggunakan elemen “div”

#box {
     cursor: pointer;
     cursor: hand;
     width: 100px;
     height: 50px;
     color: black;
}

Kemudian terapkan di kode HTML:
<div id=”box”>Ini contoh clickable box</div>

Semoga bisa membantu! 🙂

5 Fitur Sederhana Namun Penting Dalam Web

Sekarang saya akan berbagi 5 fitur sederhana namun penting dalam desain web, dan sekarang sudah menjadi standard sebuah web.

Fitur Pencarian / Search

Dengan fitur ini, user dapat melakukan pencarian artikel dalam web yang berhubungan dengan keyword yang dia masukkan. Dan secara otomatis web akan menampilkan hasil pencarian, sehingga akan memudahkan user untuk mencari artikel yang dia inginkan.

Perlu diingat kebanyakan web menggunakan icon bergambar kaca pembesar sebagai icon yang menjelaskan bahwa kotak tersebut merupakan daerah pencarian.

Web Layout

Layout web diusahakan konstan. Layout yang dimaksud adalah format halaman, seperti besar tulisan heading, warna tulisan, jenis font, dan lain sebagainya. Sehingga user tidak kebingungan akan arti tiap-tiap teks, warna, dan ukuran font.

User Interface yang Konsisten

Usahakan User interface web konsisten, artinya antara halaman yang satu dengan yang lain tidak berubah-ubah.
Contohnya adalah penggunaan button, usahakan button antara halaman satu dengan yang lain memiliki bentuk dan posisi yang sama, sehingga tidak membingungkan user.

Struktur Form

Usahakan struktur dari form dibuat sebaik mungkin agar user tidak merasa bingung. Misalkan dengan mengelompokkan berdasarkan kriteria tertentu. Contoh: Kelompok data diri (nama, alamat, telepon, dll), Kelompok Pengalaman Kerja (tahun, nama_perusahaan, dll).

Pastikan Ada Fitur Bantuan

Fitur ini sangat penting untuk memudahkan user mengetahui halaman-halaman web (web map), dan juga fitur-fitur apa saja, dan akses fitur tersebut.

Referensi : http://sixrevisions.com/usabilityaccessibility/five-simple-but-essential-web-usability-tips/

Change Management: Strategic Risks To Successful Project Implementation

Artikel ini menjelaskan hal-hal apa saja yang menjadi dasar atau perlu menjadi perhatian dalam mengimplementasikan perubahan, kriteria yang pertama adalah kriteria individu atau kelompok seperti apa yang cocok dilibatkan pada suatu proyek. Individu atau kelompok yang dimaksudkan diatas adalah yang dikatakan resilience, yaitu individu atau kelompok yang memiliki kriteria berpikiran positif, fokus pada tujuan dan visinya, fleksibel dalam pemikiran dan pandangannya, dapat mengorganisasi setiap informasi pada situasi apapun dan juga mampu menyusun prioritas tindakan, serta mereka memiliki karakter proaktif, artinya berani bertindak menghadapi tantangan dan berani mengambil resiko yang mungkin terjadi.

Dalam suatu team perlu juga diterapkan sinergi, artinya mengkolaborasikan berbagai karakter tadi menjadi satu, dan juga mengkolaborasikan hal-hal lain, seperti ide, solusi, dan lain sebagainya untuk membentuk suatu kekuatan yang lebih lagi. Kriteria yang kedua yang perlu menjadi perhatian adalah pengetahuan akan perubahaan, individu ataupun kelompok diharapkan memiliki pengetahuan akan perubahaan.

Pengetahuan itu meliputi beberapa hal, seperti tahapan perubahaan, yaitu present state (tahapan perubahaan belum dilakukan, atau masih direncanakan, dan orang-orang atau kelompok di perusahaan masih merasa baik menggunakan sistem yang ada sekarang), transition state (tahapan ketika perubahaan dilaksanakan, pada tahapan ini terjadi tekanan, kebingungan, dsb), dan desire future (tahapan dimana perubahaan telah berhasil dikerjakan, dan individu atau kelompok dalam perusahaan telah terlibat atau melaksanakan perubahaan yang baru itu).

Pengetahuan yang lain adalah pengetahuan mengenai pihak-pihak yang berperan dalam perubahaan, yaitu sponsor, agent, target, dan advocate, serta bentuk-bentuk relasi antara pihak-pihak tersebut, yaitu bentuk linear, triangular, dan square. Pengetahuan lainnya adalah tahapan-tahapan yang muncul menuju perubahan pada persepsi negatif, dan juga persepsi positif.

Kemudian juga pentingnya komitmen dalam implementasi perubahan, karena jika perubahaan telah dilaksanakan, namun tanpa komitmen yang kuat, maka perubahaan tersebut bisa saja tidak akan bertahan. Kriteria ketiga yang wajib menjadi perhatian adalah bagaimana agar orang-orang atau kelompok dalam perusahaan dapat dengan cepat dan mutlak dapat beradaptasi pada lingkungan perubahan yang baru, kadang setelah perubahan selesai dilakukan, beberapa individu atau kelompok masih belum bisa juga untuk beradaptasi terhadap perubahan, oleh karena itu perlu diatur sebaik mungkin agar adaptasi terhadap perubahaan dapat terjadi dengan baik. Kriteria yang keempat yang perlu diperhatikan adalah adanya beberapa arsitektur implementasi dan arsitektur seperti apa yang digunakan oleh perusahaan, dalam bab ini diberikan satu arsitektur yang disebut MOC, yang akan membantu dalam mengimplementasikan perubahaan.

Service Oriented Architecture

Pendahuluan

Saat ini dunia bisnis berkembang dengan begitu pesat. Persaingan antara satu perusahaan dengan perusahaan yang lain tidak dapat terelakkan. Ada perusahaan yang bisa bertahan walaupun seringkali diserang oleh kompetitornya, ada pula perusahaan yang notabene memiliki visi dan sumberdaya yang bagus, tenggelam dalam serangan kompetitornya. Hal demikian ini akan memberikan tantangan bagi perusahaan, dan memberikan banyak pertanyaan, bagaimana sebuah bisnis dapat tetap bertahan ditengah persaingan yang semakin berat ini.

Suatu perusahaan akan dapat tetap berdiri dan bertahan dalam persaingan yang berat apabila perusahaan tersebut dapat memberikan service atau pelayanan yang terbaik bagi konsumennya. Dengan menawarkan teknologi yang paling canggih, mungkin akan membuat konsumen tertarik, namun itu tidak menjamin konsumen mendapatkan pelayanan yang baik dari perusahaan. Teknologi yang ditawarkan lambat laun akan diikuti oleh perusahaan lain, bahkan akan dilewati oleh perusahaan lain.

Untuk dapat bertahan dalam persaingan usaha yang serba cepat ini, suatu perusahaan harus dapat dengan cepat beradaptasi terhadap lingkungan sekitarnya. Perusahaan harus mampu memenuhi kebutuhan dan tuntutan pasar dengan cepat. Untuk dapat beradaptasi dengan cepat, perusahaan memerlukan fleksibilitas dan efisiensi yang tinggi. Efisiensi dalam menggunakan resources yang ada akan memaksimalkan aset dan menambah keuntungan tersendiri bagi perusahaan.

SOA atau Service Oriented Architecture merupakan suatu metode perancangan dalam pengembangan dan integrasi sistem, dimana tujuannya adalah untuk menciptakan loose-coupling (aplikasi yang independen atau berdiri sendiri namun dapat saling berinteraksi satu dengan yang lainnya) pada setiap aplikasi. Fungsionalitas dari SOA ini meliputi proses bisnis dan interoperability (suatu aplikasi saling berkomunikasi antar mesin maupun aplikasi lain baik itu berbeda sistem operasi maupun bahasa pemrogramannya). Inti dari SOA sendiri adalah representasi fungsi dalam bentuk “service/layanan”. Dengan diterapkannya SOA, diharapkan sistem suatu perusahaan akan mampu beradaptasi dengan cepat, dan efisien, sehingga akan dapat terus berinovasi dan berkembang lebih lagi.

Service

Service merupakan layanan yang diberikan oleh satu pihak kepada pihak lain. Di dalam suatu layanan terdapat dua aktor yang berperan, yaitu peminta layanan dan pemberi layanan.

Terminologi dalam service antara lain :

1. WebService

   Web service adalah sebuah keluarga teknologi yang terdiri dari spesifikasi, protokol, dan standar industri dimana digunakan oleh aplikasi yang berbeda-beda untuk berkomunikasi, berkolaborasi dan bertukar informasi diantara mereka dengan cara yang aman, handal dan interoperable [1]. Web service sendiri memiliki ciri-ciri yang sama dengan SOA, antara lain loose-coupled dan interoperability. Sehingga banyak pihak menganggap bahwa web service adalah SOA, dan sebaliknya.

   Dibawah ini merupakan arsitektur dari web service, atau terkenal dengan sebutan “The Triangle of Web Service”.

   

   Gambar diatas menunjukkan arsitektur dasar dari web service, dimana service provider (penyedia layanan) dapat berinteraksi dengan service requester (peminta layanan) berdasarkan informasi service yang telah dipublish oleh service provider dan ditemukan oleh service requester, dimana informasi layanan ini terdapat di repository. Service provider dan service requester dapat saling berinteraksi dengan mengirimkan pesan (message).

2. XML (eXtensible Markup Language)

   XML merupakan format teks yang sederhana dan fleksibel. XML di-disain untuk mengatasi electronic-publishing skala besar, dan XML juga memainkan peranan penting dalam pertukaran data via web ataupun pada aplikasi desktop. [2]

   Di dalam web service, XML berperan sebagai media komunikasi antara layanan yang satu dengan layanan yang lain. Agar dapat saling berkomunikasi, tiap layanan harus saling mengerti satu dengan yang lainnya, padahal antara aplikasi satu dengan yang lainnya belum tentu menggunakan bahasa pemrograman yang sama, maupun sistem operasi yang sama. Solusi agar antar layanan dapat saling berkomunikasi (meminta layanan, memberikan layanan, menerima layanan) adalah dengan menggunakan XML.

3. WSDL (Web Services Definition Language)

   WSDL merupakan format XML yang menjelaskan interface dari web service. XML digunakan dalam pertukaran request dan response dalam web service, namun format XML dalam pertukaran tersebut memiliki format khusus. Format khusus XML yang digunakan dalam web service ini yang disebut WSDL.

   1. UDDI (Universal Description, Discovery and Integration)

      UDDI memberikan interface yang menjembatani antara service provider dan service requester untuk saling dapat bertemu satu dengan yang lain. Server UDDI dapat diakses via web service interface dan menyediakan beberapa operasi, seperti mem-publish services, dan mencari services. Secara garis besar, UDDI merupakan tempat dimana informasi services berada.

   2. SOAP (Simple Object Access Protocol)

      SOAP merupakan protokol untuk mengirim request atau response menggunakan media XML, dan juga protokol HTTP (Hypertext Transfer Protocol). SOAP sebenarnya adalah protokol yang membungkus XML dan HTTP.

   Masalah Dalam Pengembangan Sistem

   Beberapa masalah dalam pengembangan sistem adalah sebagai berikut :

   1. Bisnis bergerak makin cepat.

      Tiap detik bisnis terus bergerak, hal ini memberikan suatu tantangan bagaimana untuk mendisain sistem agar terus dapat mengikuti perkembangan dalam bisnis.

   2. Time to market.

      Seberapa lamakah suatu aplikasi dapat dikembangkan sampai akhirnya siap dijual, atau dengan kata lain waktu yang di-investasikan untuk mengembangkan suatu aplikasi yang siap jual.

      Bagi para pengembang aplikasi, hal ini merupakan suatu masalah yang cukup penting, jangan sampai suatu aplikasi yang sedang dalam proses pengembangan terhenti karena sistem yang dibuat atau teknologi yang diterapkan sudah tertinggal, atau aplikasi yang dibuat tidak dapat mengikuti pergerakan permintaan bisnis.

   3. ROI from existing software

      ROI atau Return Of Investment adalah suatu rasio kehilangan uang dari suatu investasi berhubungan dengan jumlah uang yang telah diinvestasikan.

      Jangan sampai nilai pengembalian lebih kecil dari jumlah kehilangan akibat investasi.

   4. Change on requirement before application installed

      Perubahan kebutuhan sistem juga merupakan problem bagi pengembang sistem/aplikasi maupun perusahaan yang menggunakan aplikasi. Apabila suatu sistem mengalami perubahan, maka suatu perusahaan juga mau tidak mau mengeluarkan biaya untuk mengubah sistem agar sesuai dengan kebutuhan sekarang. Suatu sistem akan terus berubah tiap saat, sesuai dengan kebutuhan sistem saat itu, dan ini merupakan hal yang harus menjadi perhatian suatu perusahaan ataupun pengembang sistem.

   5. Need quickly implementation

      Pengembang maupun suatu perusahaan juga wajib mempertimbangkan suatu sistem agar dapat diimplementasikan dengan cepat. Bisnis akan terus berkembang, dan tidak bisa menunggu lama untuk mengimplementasikan sistem atau aplikasi.

   6. Reusability, standard

      Suatu sistem yang baik akan memiliki sifat dapat digunakan kembali / reuseable, ini merupakan efisiensi dalam suatu perusahaan. Untuk dapat diguna-ulangkan, suatu sistem atau aplikasi harus memiliki standard aplikasi atau standard model data yang sama.

   Cara Kerja Service-Oriented Architecture

   Service-Oriented Architecture / SOA membangun interface yang dapat diakses oleh berbagai macam aplikasi. Selama ini aplikasi dibangun dengan mengikat banyak aplikasi menjadi satu rangkaian, namun apabila terjadi perubahan demi perubahan, hal itu akan membuat perusahaan mengeluarkan uang dan tenaga lebih lagi. SOA akan mengatasi hal tersebut dengan mengatasi hambatan integrasi aplikasi.

   Dibawah ini merupakan arsitektur diterapkannya SOA, bagaimana suatu aplikasi dapat diintegrasikan dan dapat berkomunikasi satu dengan yang lain.

   

   Arsitektur Service-Oriented Architecture

   Faktor-faktor direkomendasikannya SOA

   Sebelum menerapkan SOA dalam suatu perusahaan atau organisasi, pasti perlu melihat resources dari perusahaan atau organisasi tersebut, seperti situasi lingkungan perusahaan, keadaan perusahaan, dan lain sebagainya. Resources ini berisi faktor-faktor yang menjadi pertimbangan apakah SOA lebih baik diterapkan atau tidak. Berikut ini adalah beberapa faktor yang dapat menjadi pertimbangan diterapkannya SOA dalam suatu perusahaan atau organisasi :

   1. Biaya integrasi terus membesar tanpa diimbangi peluang bisnis baru yang memberikan laba atas investasi (ROI).

   2. Terjadinya akuisisi atau merger yang merupakan pusat model bisnis perusahaan untuk berkembang dan mengejar peluang-peluang baru.

   3. Solusi memerlukan integrasi kemampuan bisnis dari sistem dan model pemrograman yang berbeda.

   4. Bisnis tergantung dari adaptasi suatu perusahaan, atau kemampuan untuk menyesuaikan perubahaan pasar yang terjadi secara cepat atau respon terhadap ancaman kompetitif.

   5. Efisiensi bekerja atau berkolaborasi dengan partner bisnis merupakan hal yang penting bagi perusahaan untuk mendapatkan pendapatan lebih.

   6. Perusahaan mengembangkan aplikasi baru dari dasar (scratch).

   Keuntungan Diterapkannya Service-Oriented Architecture

   Dengan diterapkannya Service-Oriented Architecture dalam suatu perusahaan atau organisasi, pasti memberikan keuntungan-keuntungan terhadap pihak tersebut, beberapa keuntungan yang dapat timbul dengan penerapan SOA antara lain :

   1. Fleksibilitas

      Aplikasi yang dibangun dapat sewaktu-waktu berubah, baik itu bertambah ataupun berkurang, karena dengan diterapkannya SOA, sistem dapat dengan mudah diubah menyesuaikan dengan keinginan konsumen saat ini, dengan demikian suatu perusahaan atau organisasi yang menerapkan SOA akan dapat lebih beradaptasi, lebih berkembang, dan lebih dapat berinovasi.

   2. Kemampuan guna ulang service dan dapat mencegah sistem yang bersifat monolithic.

      Aplikasi yang sudah ada dalam suatu perusahaan atau organisasi dapat digunakan ulang. Demikian juga dengan service yang ada, dapat digunakan ulang dan dapat diakses oleh siapa saja.

   3. Sangat dinamis, dengan kemampuan untuk beradaptasi secara cepat terhadap keadaan baru.

      Dinamis berarti dapat selalu berubah-ubah dan bersifat tidak tetap atau tidak paten. Dengan diterapkannya SOA, suatu sistem dapat selalu berubah mengikuti keinginan pasar saat itu, jadi suatu perusahaan yang menerapkan SOA akan selalu dapat mengikuti perkembangan pasar dengan biaya dan usaha yang lebih ringan.

   4. Hemat biaya integrasi aplikasi.

      Biaya yang dikeluarkan dan usaha yang dikeluarkan untuk integrasi lebih hemat.

   5. Meningkatkan kesinambungan sistem IT dalam sebuah perusahaan atau organisasi.

      Suatu sistem pasti suatu saat akan berubah menyesuaikan dengan teknologi atau keinginan pasar pada saat itu. Dengan diterapkannya SOA pada suatu perusahaan atau organisasi, sistem IT akan terus dapat dilanjutkan, diubah, atau diperbaiki dengan lebih mudah, sehingga sistem itu akan terus dapat berfungsi.

   6. Arsitekturnya terdistribusi, service dapat terletak dimana saja.

      Sifat arsitekturnya terdistribusi, artinya tidak harus terletak pada satu tempat saja. Service yang adapun dapat diletakkan dimana saja.

   Kesimpulan

   Dari hasil pembahasan diatas dapat disimpulkan beberapa hal dan mengapa SOA perlu diperlajari dan diterapkan. SOA merupakan suatu konsep arsitektur yang lahir karena tuntutan proses bisnis yang berubah-ubah. Apabila proses bisnis berubah, maka aplikasi-pun akan berubah mengikuti tuntutan bisnis, dan perusahaan atau organisasi memerlukan biaya yang tidak sedikit untuk melakukan perubahan atau integrasi aplikasi. Dengan diterapkannya SOA, maka aplikasi yang sudah ada dapat digunakan ulang, dan dapat diintegrasikan dengan mudah dengan menerapkan teknologi-teknologi yang mendukung SOA seperti XML, WSDL, Web Service, SOAP, dan UDDI.

   Keuntungan-keuntungan yang sudah dibahas diatas, seperti fleksibilitas, kemampuan guna-ulang, dinamis, hemat biaya integrasi, kesinambungan sistem IT yang meningkat, dan juga arsitektur yang terdistribusi dapat memberikan dorongan dan pertimbangan mengapa SOA harus dipelajari dan diterapkan dalam suatu perusahaan atau organisasi.

   Agar suatu perusahaan atau organisasi dapat cepat beradaptasi dengan lingkungan sekitar, dan secara berkesinambungan dapat mengikuti keinginan konsumen maka konsep arsitektur Service-Oriented merupakan solusi yang tepat bagi perusahaan atau organisasi yang memerlukannya.

   Daftar Pustaka

   1. Lawler, James., Barber, Howell. Service-Oriented Architecture: SOA Strategy, Methodology, and Technology. Auerbach Publication, 2008
   2. http://www.w3.org/xml
   3. http://www.sicheres-egovernment.de/english/topics/soasecurity/advantages.htm