memulai belajar pemrograman web dan internet

Pada artikel ini akan membahas tentang bagaimana untuk memulai langkah awal untuk menjadi seorang programmer. bahasa pemograman apa saja yang perlu dikuasai dalam pemograman web dan pemograman internet.

Definisi pemograman web

World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya. Hiperteks dilihat dengan sebuah program bernama browser web yang mengambil informasi (disebut "dokumen" atau “halaman web") dari server web dan menampilkannya, biasanya di sebuah monitor. Kita lalu dapat mengikuti pranala di setiap halaman untuk pindah ke dokumen lain atau bahkan mengirim informasi kembali kepada server untuk berinteraksi dengannya. Ini disebut "surfing" atau "berselancar" dalam bahasa Indonesia. Halaman web biasanya diatur dalam koleksi material yang berkaitan yang disebut “situs web".

Definisi Internet

Menurut Budhi Irawan (2005 : 69), Internet adalah suatu jaringan komputer global yang terbentuk dari jaringan-jaringan lokal dan regional yang memungkinkan komunikasi data antar komputer yang terhubung ke jaringan tersebut. Internet merupakan hubungan antar berbagai jenis komputer dan jaringan di dunia yang berbeda sistem operasi maupun aplikasinya, dimana hubungan tersebut memanfaatkan kemajuan media komunikasi (telepon dan satelit) yang menggunakan protokol standar dalam berkomunikasi yaitu protokol TCP/IP. Untuk dapat menggunakan fasilitas internet, komputer kita harus terhubung ke salah satu ISP (Internet Service Provider). ISP adalah perusahaan yang menyediakan layanan untuk menghubungkan komputer kita ke internet atau disebut juga sebagai pintu gerbang ke internet. Untuk itu, kita perlu mendaftarkan diri ke ISP untuk mendapatkan nama dan alamat di internet

Bahasa Pemograman yang perlu dikuasai dalam pemrograman web dan internet

1.HTML

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C). Versi terakhir dari HTML adalah HTML 5, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

2.CSS

Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yg ada di situs kita sekaligus memformat ulang situs kita. CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.

Keuntungan dari CSS yaitu Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturanaturan CSS tersebut untuk diterapakan pada seluruh dokumendokumen HTML pada halaman situs kita. User yang berbeda dapat mempunyai style-sheet yg berbeda pula. Ukuran dan kompleksitas document code dapat diperkecil.

pada saat ini sudah banyak framework css instant yang sangat mudah digunakan dan cepat dan sesainnya sudah kren. seperti salah satunya twitter Bootsrap

3.Javascript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukanmasukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Jquery adalah salah satu framework js . yang sudah dirancang dengan baik untuk penggunaan js lebih mudah dan simple.slah satunya membuat animasi loader dengan ajax akan lebih mudah megunakan jquery.

4.PHP

Menurut Didik Dwi Presetyo (2004 : 76), PHP merupakan bahasa scripting server-side, dimana pemrosesan datanya dilakukan pada sisi server. Sederhananya, serverlah yang akan menerjemahkan skrip program, baru kemudian hasilnya akan dikirim kepada client yang melakukan permintaan.

dengan php kita dapat menghubungkan dengan database. agar dapat melakukan proses dasar pada database sepert insert, update dan delete data.

apa itu web server ?

Web server adalah software yang menjadi tulang belakang dari world wide web (www). Web server menunggu permintaan dari client yang menggunakan br owser seperti Netscape Navigator, Internet Explorer, Modzilla, dan program browser lainnya. Jika ada permintaan dari browser, maka web server akan memproses permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan kembali ke browser. Data ini mempunyai format yang standar, disebut dengan format SGML ( standar general markup language). Data yang berupa format ini kemudian akan ditampilkan oleh browser sesuai dengan kemampuan browser tersebut. Contohnya, bila data yang dikirim berupa gambar, browser yang hanya mampu menampilkan teks (misalnya lynx) tidak akan mampu menampilkan gambar tersebut, dan jika ada akan menampilkan alternatifnya saja. Web server, untuk berkomunikasi dengan client -nya (web browser) mempunyai protokol sendiri, yaitu HTTP (hypertext transfer protocol ). Dengan protokol ini, komunikasi antar web server dengan client-nya dapat saling dimengerti dan lebih mudah. Seperti telah dijelaskan diatas, format data pada world wide web adalah SGML. Tapi para pengguna internet saat i ni lebih banyak menggunakan format HTML (hypertext markup language) karena penggunaannya lebih sederhana dan mudah dipelajari. Kata HyperText mempunyai arti bahwa seorang pengguna internet dengan web browsernya dapat membuka dan membaca dokumen -dokumen yang ada dalam komputernya atau bahkan jauh tempatnya sekalipun. Hal ini memberikan cita rasa dari suatu proses yang tridimensional, artinya pengguna internet dapat membaca dari satu dokumen ke dokumen yang lain hanya dengan mengklik beberapa bagian dari ha laman-halaman dokumen (web) itu. Proses yang dimulai dari permintaan webclient (browser), diterima web server, diproses, dan dikembalikan hasil prosesnya oleh web server ke web client lagi dilakukan secara transparan. Setiap orang dapat dengan mudah menget ahui apa yang terjadi pada tiap - tiap proses. Secara garis besarnya web server hanya memproses semua masukan yang diperolehnya dari web clientnya.

5.MySQL

Menurut Didik Dwi Prasetyo (2004 :18) MySQL merupakan salah satu database server yang berkembang di lingkungan open source dan didistribusikan secara free (gratis) dibawah lisensi GPL. MySQL merupakan RDBMS (Relational Database Management System) server. RDBMS adalah program yang memungkinkan pengguna database untuk membuat, mengelola, dan menggunakan data pada suatu model relational. Dengan demikian, tabel-tabel yang ada pada database memiliki relasi antara satu tabel dengan tabel lainnya.

dari penjelasan diatas dapat kita simpulkan bahwa semua bahasa pemograman baik itu termasuk dalam kategori client side maupun server side yang ada diatas. wajib di kuasai untuk menjadi seorang programmer berbasis web.

Membuat Form Login popup pada web

selamat datang di arsipbertuah blog. pada posting sne kali ini. ane akan membahas tentang cara membuat form login popup atau melayang. menggunakan Bootstrap. seperti yang kita ketahui Bootstrap adalah framework untuk mendesain sebuah aplikasi / sistem yang berbasis web. bootstrap memberikan kemudahan untuk kita dalam mendesain user interface pada web. yang telah di desain sendiri komponen- komponen HTML menggunakan CSS sehingga tampilan web lebih teratur dan rapi . dan dengan sentuhan javascrip yang sudah diatur sedemikin rupa akan membuat web yang kita buat lebih interaktif dengan user. salah satu komponen untuk membuat form login tampilan popup atau melayang adalah menggunakan salah satu komponen bootstrap yaitu Modal. Modal pada botstrap adalah sebuah activity dialog yang muncul di tengah layar.

pada artikel ini kita akan belajar membuat desain form login menggunakan modal Twitter Bootstrap. dengan tujuan hanya untuk membuat website atau sistem memiliki tampilan yang lebih kren dan interaktif dengan user. lihat kode basic modal bootstrap dibawah ini:

Basic Modal Bootstrap

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div> 

kode diatas adalah kode dasar dari dialog modal bootstrap. diatas bisa kita lihat ada beberapa kompone yang ada pada modal tersebut.

1.Button untuk aksi memanggil atau acuan untuk menampilkan modal

2.Header modal yaitu tempat memberikan judul misalnya.

3.Content yaitu tempat meletekan isi dari dari suatu dialog

4.footer yaitu biasanya tempat meletakkan buuton dan lain-lain

Membuat Form Login pop up

nah, untuk membuat form login menggunakan modal Bootstrap kita modif saja kode diatas seperi dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>belajar membuat form login menggunakan modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Log in</button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" 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"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Form Login</h4>
                  </div>
                  <div class="modal-body">
                    <form method="post" action="" class="form-horizontal">
                
              <div class="form-group">
                  <label for="nama" class="col-sm-2 control-label">email</label>
                  <div class="col-sm-10">
                  <input type="email" class="form-control" name="email" requered ></div>
            </div>
            <div class="form-group">
                  <label for="nama" class="col-sm-2 control-label">password</label>
                  <div class="col-sm-10">
                  <input type="password" class="form-control" name="pwd" requered ></div>
                  
            </div>
            <div class="form-group">
            <label class="col-sm-2"></label>
                  <div class="col-sm-10">
                    <a href="">lupa password ?</a>
                  </div>
            </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" name="s"class="btn btn-primary">LOGIN</button>
                  </div>
                     </form>
                </div>
              </div>
            </div>
            </div>
            <!-- Modal -->
</div>

</body>
</html> 

begitu gan contoh membuat form login pop up menggunakan modal bootstrap. silahkan kopas kode diatas untuk melihat hasilnya.tapi harus ada koneksi internet karena instalasi bootstrap pada kode diatas menggunakan CDN lihatlah pada tag head diatas. supaya bisa offline instal baca cara instalasi bootstrap disini .ane juga pernah buat seperti gambar ini gan.

begitulah hasilnya yang pernah ane buat. sekaian dari ane semoga dapat memberikan manfaat buat agan. selamat mencoba dan semoga sukses.

Belajar HTML : menampilkan video,audio dan gambar

Pengertian html

selamat datang di arsipbertuah blog.pada posting ane kali ini ane ingin berbagi pada belajar HTML bagaimana cara untuk menampilkan gambar, video dan audio di web.
HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.salah satunya adalah dengan menampilkankan media di halaman web.
untuk menampilkan gambar,video maupun audio memiliki persamaan yaitu memanggil file pada lokasi/alamat tempat penyimpanan file tersebut.hanya saja tag html yang berbeda ,seperti yang kita lihat untuk gambar hanya di tampilkan sesuai dengan ukuran lebar dan tinggi yang kita atur sedangkan audio menggunakan fungsi lain yaitu tombol play dan pause, begitu juga dengan video.

ada dua macam dalam memanggil file yaitu internal dan external.

1. internal yaitu memanggil file dari penyimpanan lokal. misalkan agan belajar buat web di komputer.
maka untuk menampilkannya cukup memanggil url folder dimana tempat penyimpanan file.
contoh :

<img src="img/realmadrid.jpg">

2.sedangkan external yaitu memanggil file pada dari link website lain, misalkan agan mau menampilkan gambar dari facebook
maka agan harus copy link gambarnya lalu paste pada tag html agan.tapi cara ini untuk belajar web harus ada koneksi internet
contoh :

<img src="https://yt3.ggpht.com/-zvPqz5WM4EE/AAAAAAAAAAI/AAAAAAAAAAA/fh1Q0Ycpv2M/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">

nah,sekarang kita terjun ke lapangan untuk praktek lansung. tapi pada posting ini,ane menggunakan source file external.
berikut ini adalah contoh HTML untuk menampilkan gambar,video dan audio.

contoh tag html menampilkan video ,audio dan gambar

<html>
<head>
 <title>belajar menampikan vidio,gambar dan audio</title>
</head>
<body>
<div>
<h1>gambar</h1>
<img src="#masukan url gambar" width="400">
</div>
<div>

<h1>video</h1>
<video width="400" controls>
 <source src="#masukan url video" type="video/mp4" >
</video>
</div>

<h1>audio</h1>
<audio controls>
 <source src="#masukan url audio" type="audio/mpeg">
</audio>
</div>
</body>
</html>

silahkan ganti src=""  dengan source file yang ada pada komputer agan .

sekian penjelasan sederhana tantang tag html untuk memanggil video, audio dan gambar .semoga dapat memberikan manfaat dan menambah wawasan untuk mempelajarinya lebih lanjut.