OUR BLOG

Aplikasi SIMDES (Sistem Informasi Manajemen Desa)

By // In E-Government // 2016.01.24 // // 28 Comments // Read More

SIMDES Sistem Informasi Manajemen Desa

Aplikasi SIMDES

Aplikasi “SIMDES” adalah program aplikasi komputer yang berbasis desktop yang dapat digunakan oleh kantor kelurahan maupun kabupaten, untuk mencatat data kependudukan mulai informasi Kartu Keluarga, kematian warga, kelahiran dan surat pengantar .

Aplikasi SIMDES kami buat dengan menggunakan bahasa pemrograman PHP, MySql, serta Twitter Bootstraps untuk desain yang responsive dan menarik.

Manfaat Penggunaan Aplikasi SIMDES

  • Mempermudah dan mempercepat proses mencatat dan mengolah informasi data penduduk
  • Mempermudah dan mempercepat proses dalam mencata dan mengolah informasi data penduduk yang pindah baik pindah masuk, pindah keluar dan pindah RT/RW.
  • Mempermudah dan mempercepat proses pembuatan surat pengantar seperti Surat Pengantar Domisili, Surat Pengantar SKCK, Surat Pengantar Umum maupun Surat Pengantar Bank.
  • Mempermudah dan mempercepat aparat kelurahan dalam memproses data kependudukan yang diminta oleh badan pemerintah lainnya, kerena Aplikasi “SIMDES” memiliki fungsi pencarian data yang Canggih dan Cepat serta kemudahan pembuatan laporan baik dalam bentuk table maupun grafik.

aplikasi SIMDES saat ini sudah diterapkan diberbagai kelurahan diberbagai Kabupaten di Jawa Tengah, kami harap aplikasi ini berguna dan bermanfaat bagi pengguna demi kemajuan Bangsa Indonesia :).

beranda

 untuk demo/trial bisa silahkan klik alamat ini : http://skpd.visualmedia.web.id

User : NIP-01 Pass : simdes ~~~ Semoga Aplikasi dapat membantu meningkatkan pelayanan desa untuk warganya 🙂

Update SIMPATEN V.1 Kabupaten Jepara

By // In E-Government, Tutorial PHP // 2015.12.22 // // No Comments // Read More

screenshot-localhost 2015-12-22 00-12-15

Assalamualaikum Wr. Wb, selamat datang di website Visualmedia.web.id, sesuai janji saya kali ini saya akan membagikan link download Update Aplikasi PATEN Terbaru yang telah disesuaikan dengan data, usulan, maupun tambahan yang ada pada kecamatan seperti HO, IMB, Setting Header, Serta setting No Urut dll. saya juga akan membagikan LINK Download untuk DATABASE Kosong (New) serta panduan / Guide Book SIMPATEN agar mudah dalam pengoperasiannya.

sekian dari saya jika ada pertanyaan, kritik dan saran silahkan hubungi no diatas baik SMS/Whats-Up. semoga Aplikasi ini bermanfaat bagi Instansi Terkait sehingga dapat memajukan Kabupaten Jepara khususnya dan  menuju Indonesia Sejahtera :).

salam visualmedia.web.id

Apa itu PATEN

By // In Aplikasi PHP, Tutorial PHP // 2015.12.21 // // No Comments // Read More

PATEN (Pelayanan Administrasi Terpadu Kecamatan) merupakan aplikasi terapan dari hadirnya Peraturan Menteri Dalam Negeri Nomor 4 Tahun 2010 Tentang Pedoman Pelayanan Terpadu Administrasi Kecamatan. Aplikasi Simpaten ini merupakan aplikasi yang akan mempersingkat waktu dan mempermudah masyarakat untuk mendapatkan layanan perijinan pada tingkat kecamatan. Maksud penyelenggaraan PATEN adalah mewujudkan Kecamatan sebagai pusat pelayanan masyarakat dan menjadi simpul pelayanan bagi kantor/badan pelayanan terpadu di kabupaten/kota. PATEN mempunyai tujuan untuk meningkatkan kualitas dan mendekatkan pelayanan kepada masyarakat. 

oke itu sedikit informasi mengenai apa itu PATEN, semoga dapat menambah wawasan saudara sekalian dan dapat diterapkan diseluruh Indonesia dengan baik. 

untuk melihat sekilas seperti apa gambaran Aplikasi PATEN yang kami paparkan silahkan lihat portofolio kami mengenai SIMPATEN yang kami terapkan di salah satu Kabupaten di Jawa Tengah

salam visualmedia.web.id

Apa Itu Bootstrap?

By // In Aplikasi PHP // 2015.12.12 // // No Comments // Read More

Apa itu bootstrap?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Bagaimana Belajar Bootstrap untuk pemula?

Untuk memulai belajar Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut. Baiklah langsung saja.

Persiapan:

  1. Anda Harus memiliki file distribusi BootstrapUntuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat pada gambar diatas, langsung saja! klik tombol tersebut. Kemudian pilih lagi Download BootstrapSetelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.
  2. Download jQuery Library Untuk Bekerja OfflineUntuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery Download, pilih jQuery 1.x kemudian, download dengan mengklik link Download the compressed, production jQuery 1.11.3
  3. Anda harus memiliki code editor.Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Code Editor dari kami yang dibuat untuk tes atau uji coba kode. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Sebagai pemula, mungkin kita bisa memulai dengan menggunakan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer. Download aplikasi Notepad++

Memulai…

Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:

  1. Buat Folder BaruBuatlah folder baru, beri nama misalkan “Belajar_Bootstrap”.
  2. Copy seluruh file Bootstrap ke dalam Folder Baru TersebutCopy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)
  3. Copy file jQuery ke dalam folder jsCopy dan Gabungkan file jquery-1.11.3.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.
  4. Buat file htmlBuat file baru dengan notepadd++ kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html dan simpanlah file tersebut ke folder “Belajar_Bootstrap” yang telah dibuat diatas. Berikut kodenya:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3.3.5 Starter Template - by dul.web.id</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- AWAL CONTENT  -- hapus dari sini kebawah (sampai AKHIR CONTENT) -->
    <div class="container">
      <h1>Apa Kabar Dunia?</h1>
      <!-- Small modal -->
      <button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button>

      <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">

            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
            </div>
            <div class="modal-body">
              Hai... salam kenal dari <strong>dul</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AKHIR CONTENT - dari sini kebawah jgn dihapus -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Saatnya untuk Uji Coba

Buka file html yang telah dibuat dengan code snippet diatas, buka dengan browser terbaru misalkan Google Chrome atau Firefox jangan gunakan internet explorer. Jika file Bootstrap.css berhasil diload maka tombol button akan memiliki style ala bootstrap seperti ini:

Kita coba lagi apakah bootstrap.js berhasil di load dengan cara mengklik tombol tersebut. Apabila muncul dialog box, maka bootstrap.js berhasil di load dan siap digunakan sebagai template. Gunakan template ini untuk setiap materi pembelajaran bootstrap dan hapuslah AWAL CONTENT sampai AKHIR CONTENT untuk memulai file baru kosong tanpa konten.

Tidak mau repot? Pengen Instant? Download Aja!

Nggak mau ngikutin step-step yang sudah diuraikan diatas. Baik, dul akan share link download siap saji yang bisa digunakan untuk memulai belajar bootstrap. Ini adalah bootstrap v3.2.0 3.3.03.3.1 3.3.5 yang didalamnya sudah dul berikan template seperti diatas. Download disini

Langkah Selanjutnya Apa?

Langkah selanjutnya mungkin Anda harus sering-sering mengunjungi situs resmi bootstrap di getbootstrap.com dan mempelajari dokumentasi yang telah disediakan. disini, kami sediakan tutorial bootstrap berbahasa Indonesia secara bertahap. Nantikan Artikel menarik lainnya mengenai Bootstrap.


Update:

Bootstrap saat ini telah memiliki versi baru yaitu: Bootstrap 4 (Versi 4). Setelah versi final-nya release, dul akan mencoba membahasnya disini. Untuk info selengkapnya, silahkan kunjungi situs resminya di getbootstrap.com

Bermain dengan Bootstrap

Untuk belajar, mencoba dan bermain dengan bootstrap, klik tombol dibawah ini:

Bootstrap 3 Play

Belajar Bootstrap Itu Mudah

Belajar bootstrap itu mudah, tapi memang dibutuhkan pengetahuan dasar tentang HTML, CSS dan Javascript. Itu semua bisa Anda pelajari langkah demi langkah. selamat berkreasi 🙂

Sistem Informasi Manajemen Pengelolaan Arsip Surat (SIMPAS)

By // In Aplikasi PHP // 2015.12.12 // // 5 Comments // Read More

Selamat Datang semua, kali ini saya akan share pemanfaatan Bootstraps yang kami terapkan pada aplikasi yang kami buat yaitu Sistem Informasi Manajemen Pengelolaan Arsip Surat (SIMPAS), yang merupakan software /aplikasi yang digunakan untuk sebuah organisasi untuk mencatat data keluar masuk surat, sehingga organisasi bisa tau dengan jelas surat masuk atau surat keluar. software ini juga bisa di gunakan berbagai organisasi seperti koperasi,sekolah,perusahaan,dll.
Dengan fitur yang lengkap aplikasi ini akan memberikan kemudahan dalam proses Manajemen Surat Menyurat di instansi anda.

Manajemen Surat

Disposisi

Korespondensi Surat

Surat Internal

Surat Edaran

Fitur ini akan mencatat surat masuk dan surat keluar sehingga surat akan terarsip dengan baik
Fitur ini berguna untuk mendistribusikan surat masuk, sehingga proses distribusi surat lebih efektif dan efisien
Fitur ini digunakan untuk mencari, mencatat, keterkaitan antar surat,dengan mencatat keterkaitan surat yang masuk
fitur yang digunakan untuk surat menyurat secara elektronik (paperless)
Hampir sama dengan surat internal fitur ini dapat mengirimkan surat edaran ke semua pengguna tanpa menggunakan kertas (paperless)
berikut screeshoot aplikasinya :
beranda
manajemen surat masukForm Input Surat Masuk
Itulah sedikit tampilan dan fitur cukup lengkap. teknologi yang kami gunakan yaitu php, mysql, serta theme bootstraps tentunya untuk tampilan lebih resposive dan elegan. bagi yang belum tau apa itu bootstraps silahkan buka artike kami tentang Apa itu Bootstraps ?Semoga bermanfaat dan kalian juga dapat mengimplementasikannya. salam visualmedia.web.id

Cara Instalasi Xampp di Windows

By // In Tutorial PHP // 2015.11.10 // // No Comments // Read More

Untuk membuat website, sebelum benar-benar mengonlinekannya kita bisa membuatnya di komputer terlebih dahulu. Caranya adalah dengan menginstal aplikasi server localhost di PC kita.

Salah satu aplikasi server localhost dan yang paling banyak digunakan adalah XAMPP. Aplikasi ini dibuat oleh Apache Friends dan installer-nya bisa langsung diunduh dari situs mereka. bisa didownload dialamat ini https://www.apachefriends.org/index.html

XAMPP sendiri ada dua macam, yakni paket komplit dan satunya lagi adalah paket portable lite.

XAMPP paket komplit itu isinya adalah:

  • Apache
  • MySQL
  • PHP
  • phpMyAdmin
  • FileZilla FTP Server
  • Tomcat
  • Strawberry Perl Portable
  • XAMPP Control Panel

Sedangkan XAMPP Portable Lite isinya hanya aplikasi PHP dan MySQL, lebih enteng dan cocok buat yang sering memakai kedua aplikasi tersebut.

Nah, kali ini saya akan menuliskan tentang panduan cara instal XAMPP di PC. Berhubung saya pakainya Windows, maka panduan ini juga diperuntukkan PC Windows ya.

Cara Instal XAMPP Di Windows

  1. Download aplikasi XAMPP https://www.apachefriends.org/index.html
  2. Dobel klik file xampp yang baru saja Anda download, selanjutnya akan muncul jendela “installer language” seperti di bawah ini:
    instal xampp, xampp localhost
  3. Selanjutnya pilih bahasa. Pilih yang Bahasa Inggris (English). Klik OK.
  4. Kadang pada proses ini muncul pesan error. Jika ada, abaikan saja dan lanjutkan dengan klik OK dan YES.
    2-instal-xampp
    3-instal-xamp
  5. Berikutnya akan muncul jendela yang isinya meminta Anda menutup semua aplikasi yang sedang berjalan. Jika semua aplikasi sudah ditutup, maka klik tombol Next.
    4-instal-xampp
  6. Selanjutnya Anda akan diminta untuk memilih aplikasi yang mau diinstal. Centang saja semua pilihan dan klik tombol Next.
    5-instal-xampp
  7. Kemudian Anda akan diminta untuk menentukan lokasi folder penyimpanan file-file dan folder XAMPP. Secara default akan diarahkan ke lokasic:\xampp. Namun jika Anda ingin menyimpannya di folder lain bisa klik browsedan tentukan secara manual folder yang ingin digunakan. Jika sudah selesai, lanjutkan dan klik tombol Install.
    6-instal-xampp
  8. Tunggu beberapa menit hingga proses intalasi selesai. Jika sudah muncul jendela seperti di bawah ini, klik tombol Finish untuk menyelesaikannya.
    7-instal-xampp
  9. Berikutnya, akan muncul jendela dialog seperti gambar di bawah ini yang menanyakan Anda apakah mau langsung menjalankan aplikasi XAMPP atau tidak. Jika ya, maka klik YES.
    8-instal-xampp

Cara Menjalankan Aplikasi XAMPP

  1. Bukalah aplikasi XAMPP, bisa melalui Start Menu atau Desktop, dan klik icon XAMPP. Atau, jika Anda membukanya begitu proses instalasi selesai maka klik Yes seperti yang terlihat pada gambar di atas.
  2. Setelah terbuka, silahkan klik tombol Start pada kolom Action sehingga tombol tersebut berubah menjadi Stop. Dengan mengklik tombol tersebut, artinya itulah aplikasi yang dijalankan. Biasanya jika saya menggunakan XAMPP, yang saya start hanyalah aplikasi Apache dan MySQL, karena saya tidak memerlukan aplikasi seperti Filezilla, dan lain-lain.
    9-instal-xampp
    10-instal-xampp
  3. Sekarang bukalah browser kesukaan Anda, dan coba ketikkanhttp://localhost/xampp di address bar. Jika muncul tampilan seperti gambar di bawah ini, instalasi telah berhasil.
    11-instal-xampp

Selamat, akhirnya Anda berhasil menginstal aplikasi XAMPP. Sekarang komputer Anda sudah berfungsi seperti server dan bisa menjalankan aplikasi-aplikasi berbasis web.

Import Database MySQL ke PHPMYADMIN

By // In Tutorial MySQL // 2015.11.10 // // No Comments // Read More

Misalnya anda mempunyai sebuah database yang sudah jadi, atau anda mendownload database dari tutorial di internet kemudian anda mau menggunakan database tersebut pada program, akan sangat merepotkan kalau anda membuat database dari awal. Salah satu keistimewaan Phpmyadmin yaitu mempunyai fasilitas import dan export database. Berikut ini disajikan bagaimana cara mengimport database ke phpmyadmin.

Langkah-langkah mengimport database mysql ke phpmyadmin

  1. Buka phpmyadmin
  2. Klik link Import

11

3.  Kemudian akan muncul halaman untuk upload file. Klik Browse..

2

4. Cari dan pilih file yang berextensi .sql kemudian klik go

5. Jika berhasil, database yang baru saja anda import akan muncul di list database anda.

Langkah-langkah untuk meng-export database hampir sama dengan cara mengimport database. Cukup dengan memilih database yang akan di export kemudian klik export.

Belajar HTML Dasar Bagian 4: Menjalankan File HTML

By // In Tutorial HTML // 2015.02.11 // // No Comments // Read More

Setelah Web Browser selesai diinstal, dan Text Editor sudah tersedia, kali ini kita akan membahas tentang cara menjalankan file HTML dari web browser.


Untuk memudahkan dalam mengakses file, sebaiknya buat sebuah folder “BelajarHTML” di Drive D. Folder ini akan kita jadikan tempat seluruh halaman HTML yang akan dibuat.

Selanjutnya, buka aplikasi Notepad++ , atau aplikasi text editor lainnya, lalu ketik text berikut ini:

1
Selamat Pagi Dunia, Hello World!

Lalu save sebagai hello.html pada folder BelajarHTML. Setelah itu jalankan file hello.html kita dengan cara double klik file tersebut, atau klik kanan –> Open With –> Firefox (Jika anda menggunakan web browser firefox)

Menjalankan File HTML

Selamat, file HTML kita sudah dapat berjalan, walaupun sebenarnya belum ada satupun kode HTML didalamnya.

Dari percobaan ini kita dapat melihat bahwa setiap halaman HTML harus diakhiri dengan extensi .html. Anda mungkin juga akan menemukan bahwa beberapa halaman juga memiliki ekstensi .htm, eksetensi ini digunakan untuk mendukung Windows versi lama yang masih menggunakan ekstensi 3 huruf di belakang sebuah file.

Apa yang kita lakukan disini adalah menjalankan file HTML dari komputer lokal. Perhatikan bagian alamat pada web browser, diawali dengan “file:///” lalu diikuti dengan alamat file HTML yang disimpan dalam komputer, misalnya: “D:/BelajarHTML/hello.html“.

Setelah mempelajari cara menjalankan file HTML dari komputer lokal, Pada tutorial selanjutnya, kita akan mulai mempelajari kode-kode HTML, yakni Pengertian tag, elemen, dan atribut dalam HTML.

Belajar HTML Dasar Bagian 3: Memilih Aplikasi Editor HTML (Notepad++)

By // In Tutorial HTML // 2015.02.11 // // No Comments // Read More

Setelah web browser berhasil diinstal, untuk membuat kode HTML, kita membutuhkan sebuah aplikasi text editor. Dalam tutorial HTML kali ini kita akan membahas tentang cara memilih aplikasi text editor yang sesuai, salah satunya adalah Notepad++.


Memilih Aplikasi Editor HTML

Memilih sebuah aplikasi editor HTML tidaklah terlalu sulit. Aplikasi editor HTML digunakan untuk mempermudah kita membuat kode HTML. HTML sendiri pada dasarnya hanya text biasa yang ditulis dalam kode-kode khusus. Web Browser-lah yang akan menerjemahkan kode HTML ini menjadi sebuah tampilan halaman web.

Untuk membuat kode HTML maupun halaman web sederhana, kita tidak perlu menggunakan aplikasi yang besar dan berat. Aplikasi Notepad bawaan Windows sudah cukup untuk membuat kode HTML. Namun untuk tutorial belajar HTML ini saya akan menggunakan aplikasi Notepad++.

Aplikasi Notepad++ ini dapat diinstall secara gratis dari http://notepad-plus-plus.org/download/ dimana pada saat tutorial ini diupdate pada Novermber 2014, versi terakhir adalah 6.6.9. Notepad++ adalah aplikasi editor text gratis yang ringan, dan memiliki banyak fitur. Salah satunya adalah fitur pewarnaan code untuk memudahkan penulisan HTML.

Pilihan bahasa HTML di Notepad++

Bagaimana dengan Adobe Dreamweaver? Aplikasi ini merupakan aplikasi web editor yang paling populer. Dreamweaver menyediakan fitur melimpah untuk sekedar membuat halaman web dengan kode HTML. Dreamwever tidak hanya sebuah text editor untuk HTML saja, namun juga untuk berbagai bahasa pemograman web lainnya. Tetapi aplikasi ini tidak gratis dan cenderung ‘berat’.

Tetapi apapun text editor yang digunakan, tidak menjadi masalah, karena selama text editor itu dapat menulis dan menyimpan text, aplikasi tersebut sudah lebih dari cukup.

Aplikasi text editor lain yang bisa anda pertimbangkan adalah Sublime Text.Sublime Text merupakan aplikasi text editor powerfull untuk web programmer. Fitur-fitur yang ditawarkan sangat memudahkan pembuatan program. Sublime Text sebenarnya merupakan aplikasi berbayar, namun anda bisa menginstall dan menggunakannya tanpa batas waktu. Sublime Text bisa didownload di http://www.sublimetext.com/.


Setelah aplikasi web browser dan text editor telah tersedia dalam komputer, saatnya untuk mencoba menjalankan file HTML pertama kita.

Belajar HTML Dasar Bagian 2: Mengenal Web Browser

By // In Tutorial HTML // 2015.02.11 // // No Comments // Read More

Pengertian Web Browser

Web Browser (atau biasa disebut browser) adalah sebuah software aplikasi untuk menerima,  menampilkan, dan menerjemahkan informasi dari world wide web (wikipedia). Dan salah satu informasi itu dibuat dalam format HTML.

Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti yang dirancang. Pada dasarnya seluruh web browser dapat menampilkan kode HTML sama baiknya, namun jika sudah berbicara mengenai desain halaman, tiap-tiap browser memiliki beberapa perbedaan.

HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus menangani web, yaitu W3C (World Wide Web Consortium). Hal ini dikarenakan tiap-tiap program web browser menerjemahkan kode-kode HTML secara berbeda-beda, sehingga di perlukan sebuah standar yang sama untuk seluruh browser.

Namun pada penerapannya, standar ini hanya merupakan rekomendasi. Beberapa web browser membuat aturannya sendiri.

Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 2000-an. Hampir 90% web browser yang digunakan saat itu adalah Internet Explorer, dan IE tidak sepenuhnya mengikuti rekomendasi W3C. Sedangkan web browser Opera yang mencoba menerapkan standar W3C tidak terlalu populer. Perbedaan aturan penerjemahan HTML di antara web browser inilah yang terus menjadi tantangan bagi programmer web.

Sekarang Internet Explorer tidak lagi sekuat dulu. Web Browser Mozilla Firefox dan Google Chrome telah menguasai lebih dari 50%, dan IE juga telah berusaha menerapkan standar W3C.


Fungsi Web Browser

Untuk mempelajari HTML, web browser adalah perangkat utama yang kita butuhkan. Ibarat bahasa pemograman lainnya, Web Browser adalah compiler dan intrepreter HTML. Anda bebas menggunakan web browser yang disukai, namun dalam tutorial Belajar HTML ini saya akan menggunakan Mozilla Firefox versi 19.


Selain web browser, aplikasi lain yang kita butuhkan untuk mempelajari HTML adalah sebuah text editor, untuk pembahasan mengenai text editor HTML ini akan kita bahas pada tutorial selanjutnya.