Showing posts with label Pemrograman Web. Show all posts
Showing posts with label Pemrograman Web. Show all posts

Sunday, May 14, 2017

Membuat Hari dan Tanggal Otomatis Menggunakan Javascript



Membuat tampilan sebuah web menjadi dinamis merupakan sebuah keharusan dalam pemrograman website. Salah satunya adalah tanggal yang biasanya ada di website bisa  dibuat menyesuaikan dengan tanggal dan hari yang ada dikomputer. Salah satunya kita bisa menggunakan script javascript. Codingnya adalah sebagai berikut :

<script language="JavaScript">
            <!--            Begin
            var months = new Array(13);
            months[1] = "Januari";
            months[2] = "Februari";
            months[3] = "Maret";
            months[4] = "April";
            months[5] = "Mei";
            months[6] = "Juni";
            months[7] = "Juli";
            months[8] = "Agustus";
            months[9] = "September";
            months[10] = "Oktober";
            months[11] = "November";
            months[12] = "Desember";
            var days = new Array(8);
            days[0] = "Minggu"
            days[1] = "Senin"
            days[2] = "Selasa"
            days[3] = "Rabu"
            days[4] = "Kamis"
            days[5] = "Jumat"
            days[6] = "Sabtu"
            var time = new Date();
            var lmonth = months[time.getMonth() + 1];
            var lday = days[time.getDay()];
            var date = time.getDate();
            var year = time.getYear();
            if (year < 2000) year = 1900 + time.getYear();
            document.write(lday + ", " + date + " " + lmonth + " " + year + "&nbsp;");
        </script>
     

Script  diatas menampilkan hari dan tanggal secara otomatis sesuai dengan tanggal dikomputer sehingga web kita bisa lebih dinamis tampilan waktunya. Selamat mencoba.

Thursday, October 27, 2016

Penggunaan OnmouseOver Pada Button


Membuat sebuah website merupakan sebuah seni tersendiri khususnya bagi para programmer, bagaimana kita bisa membuat sebuah tampilan/interface yang menarik dan enak dipandang oleh pengunjung tanpa mengabaikan unsur-unsur lain yang sangat dibutuhkan misalnya keamanan data dan sebagainya.
Berikut di sampaikan cara membuat button yang menarik, yaitu pada saat buttonnya diklik maka akan berubah menjadi button yang lain. Biasanya yang sering diubah adalah warnanya.
caranya adalah sebagai berikut :

1. Siapkan 2 buah button yg berbeda, sebaiknya memiliki ukuran dan bentuk yang sama. misalnya seperti dibawah ini. button pertama namanya butto1.gif dan yang kedua button2.gif
2. Ketikkan syntak css berikut ini :
<style type="text/css">
     a.pic .image2{display:none}
     a.pic:hover .image1 {display:none}
     a.pic:hover .image2 {display:inline}
</style>

3. Cara menggunakannya adalah kita tinggal memanggil nama class yang ada discript diatas kedalam coding kita misalnya :

<a class="pic" href="https://www.bangkukuliah.com">
      <img class="image1" src="button1.gif" />
      <img class="image2" src="button2.gif" />
</a>

4. Pada saat mouse digerakkan ke button1.gif maka tampilannya akan berubah menjadi buuton2.gif dan pada saat dipilih maka akan membuka website yang kita tuju. Contohnya silahkan coba.

Tuesday, October 25, 2016

Penggunaan Onmouseover Untuk Text



Membuat tampilan menu atau tombol yang menarik untuk sebuah website merupakan sebuah keharusan bagi seorang desainer web.

Berikut contoh untuk membuat sebuah tampilan menu yang pada saat mouse digerakkan ke arah tulisan tersebut, tulisannya jadi memiliki warna yang berbeda dengan menggunakan function. Pada contoh dibawah tulisan "Profil" nya hitam pada saat di mouse digerakkan melintasi tulisan akan berubah menjadi merah.
Berikut scriptnya :

<script>
function mouseOver() {
    document.getElementById("tes").style.color = "red";
}

function mouseOut() {
    document.getElementById("tes").style.color = "black";
}
</script>

untuk menggunakannya kita tinggal menuliskan misalnya :

<h1 id="tes" onmouseover="mouseOver()" onmouseout="mouseOut()"> Profil </h1>

Untuk selanjutnya  bisa dicoba atribut yang lain selain color. Kita bisa juga mencoba seperti menu yang dibawah ini dengan menggunakan button. Pada saat  mouse digerakkan, buttonnya akan berubah menjadi biru dan jika dipilih akan membuka linknya.

Wednesday, September 28, 2016

Kumpulan Modul Materi dan Tutorial Pemrograman Web


Kumpulan materi modul dan tutorial pemrograman web berbasis HTML, PHP dan ASP.net
Mudah-mudahan bermanfaat.
  1. Pengertian web, webserver, perbedaan web statis dan web dinamis
  2. Kupas tuntas tentang CSS 
  3.  Kupas tuntas tentang list
  4.  Kupas tuntas tentang hyperlink
  5. Cara menggunakan onmouseover pada text
  6. Cara menggunakan onmouseover pada Button
  7. Membuat Hari dan Tanggal Otomatis Menggunakan Javascript

Thursday, December 17, 2015

Pemrograman Web : Kupas Tuntas CSS (External/Linked CSS)



  • Kode CSS external/linked di tulis dalam satu file terpisah yang disimpan dengan ektention  .css
  • Perlu memanggil file CSS tersebut ke dalam semua halaman web yang dibuat. 
  • Dengan cara ini, hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web.  
  • Tidak perlu membuka dokumen HTML untuk mengedit CSS (karena telah berupa file yang terpisah)
  • File CSS yang sama dapat digunakan oleh beberapa dokumen yang berbeda, menghemat waktu dalam proses desain web
Ada dua langkah dalam pengimplementasian CSS dengan cara ini. 
  1. Anda membuat satu file dengan notepad atau teks editor lain, dan beri nama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut, misalnya :
    p {font-family: arial; font-size: small;}h1 {color: red; } 
  2. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag dan <head>  dan </head> , misalnya :
    <head>
            <link rel=”stylesheet” href=”style.css” type=”text/css”>
    </head>

Contoh Program :

File  style.css

h3{ font-family:arial ;  color: red ;   font-style: italic}
p{font-family: verdana;  color: blue;   font-size: 12px}


file latihan.html

<html>
<head>
     <title> Latihan kedua</title>
     <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <h3>Judul Artikel</h3>
  <h3>Judul Artikel Baru</h3>
  <p>Contoh paragraf teks baru</p>
</body>
</html>

Pemrograman Web : Kupas Tuntas CSS (Internal/Header CSS)



  • Internal/header style seharusnya digunakan ketika dokumen tunggal mempunyai style unik. 
  • Header/internal  style berarti menuliskan skrip CSS pada header dokumen HTML, didalam bagian <head> dan </head>
  • Pendefinisian cara ini lebih dianjurkan karena lebih rapi dan pendefinisian tag cukup dilakukan satu kali
    Property dipisahkan dengan tanda koma “;”
  • Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:   
     <head>
           <style type="text/css">
                        p {color:blue;}

           </style>
     </head> 

 Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat  menggunakan font berwarna biru.

Contoh Program :

<html>
<head>
      <title> Latihan kedua</title>
      <style>
              h3{ font-family:arial ; color: red ;   font-style: italic}
              p{font-family: verdana; color: blue;  font-size: 12px}
     </style>
</head>
<body>
     <h3>Judul Artikel</h3>
     <p>Contoh paragraf teks</p>
     <h3>Judul Artikel Baru</h3>
     <p>Contoh paragraf teks baru</p>
</body>
</html>


Pemrograman Web : Kupas Tuntas CSS (Inline CSS)



Dalam Inline CSS, kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika akan
memformat suatu elemen satu kali saja.

Contoh:
    
    <P style=”color:blue”> Isi paragraf. </p>
  • Pada contoh di atas, elemen  paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
  • Penulisan  CSS dengan cara ini di mulai dengan kata style:  lalu di ikuti dengan syntax property: value.

Contoh Program :


<html>
<head>
       <title> Latihan pertama</title>
</head>
<body>
     <p style="color: red">Teks warna merah</p>
     <p style="color: blue">Teks warna biru</p>
     <p style="color: green">Teks warna hijau</p>
</body>
</html>


Baca Juga :
- Kupas Tuntas CSS - Introduction
- Kupas Tuntas CSS - Internal/Header Style
- Kupas Tuntas CSS - Enternal/Linked CSS

Pemrograman Web : Kupas Tuntas CSS (Cascading Style Sheets)



  • CSS kependekan dari  Cascading Style Sheets
  • CSS merupakan aliran dari suatu kode ke kode lain yang saling berhubungan
  • CSS adalah kumpulan kode-kode  yang berurutan dan saling berhubungan  untuk mengatur format / tampilan suatu halaman HTML
  • 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. 
  • Fungsi CSS untuk mengatur tampilan dokumen HTML (contoh : mengatur jarak baris, teks, warna, format border, penampilan file gambar dll) serta mempermudah penataan halaman web
  • Berupa kumpulan script sebagai pelengkap agar dokumen HTML dapat tampil lebih cantik dan dinamis
  • Kode CSS bersifat lintas platform (dapat dibaca oleh berbagai sistem operasi dan browser

Sintaks Kode CSS
Komposisi secara umum :
      
      Selector { property: value }
  • Selector merupakan tag HTML atau elemen (class/ID) yang dipilih
  • Property adalah atribut yang ingin anda atur nilai nya
  • Value merupakan nilai dari property, bisa berupa angka atau teks


Contoh :
    P {color: red}
  • Mewarnai seluruh teks dalam tag <p> dengan warna merah
  • P tag yang akan diatur stylenya
  • Color : salah satu property yang bisa digunakan
  • Red : value dari property color
  • Tanda “:” pendefinisian nilai property atau value
  • Tanda kurung “{“ dan “}” pendefinisian property/atribut
Ada 3 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
  1. Inline CSS
  2. Internal CSS / header style
  3. External/Linked CSS

Keuntungan Menggunakan CSS :
  1. Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturan aturan
  2. CSS tersebut untuk diterapkan pada seluruh dokumen dokumen HTML pada halaman situs
    kita.
  3. User yang berbeda dapat mempunyai style-sheet yg berbeda pula.
  4. Ukuran dan kompleksitas document code dapat diperkecil. 
Kekurangan menggunakan CSS :
  1. Tidak semua browser mengartikan kode CSS dengan cara yang sama. 
  2. Sehingga tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di
    browser yang lain. 
  3. harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

Wednesday, November 25, 2015

Pemrograman web : Kupas tuntas tentang definition list


Definition list digunakan untuk menampilkan suatu daftar istilah-istilah berikut penjelasannya, oleh karena itu juga disebut Glossary List atau daftar istilah.

sintaksnya :
<DL>…..</DL> 

Dalam tag tersebut terdapat dua bagian yaitu :
<DT> atau Definition Term untuk istilah yang akan didefinisikan
<DD> atau Definition Data untuk definisi dari istilah tersebut.

Contoh : 
Obeng
     Perkakas yang digunakan untuk memutar suatu skrup
Stop Kontak
    Suatu panel yang digunakan sebagai sumber listrik
Mur
    Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya
Baut
    Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya


Contoh sintaknya :
<DL>
    <DT>Definition Term :
            <DD>Isitilah yang akan didefinisikan dalam Definition List
    <DT>Definition Data :
           <DD>Definisi dari suatu istilah dalam definition List
</DL>


Pemrograman web : Kupas Tuntas tentang unordered list


UNORDERLIST adalah suatu daftar dimana urutan dari item-item tidak diutamakan, jadi item-item dalam daftar tersebut bisa muncul dalam sembarang urutan. Biasanya ditandai dengan tanda titik atau kotak.

Misal daftar barang yang harus dibeli :
•  Mie instan
•  Air mineral
•  Telur

Maka syntaxnya : 
<ul>
  <li>mie instan</li>
  <li>air mineral</li>
  <li>telur</li>
</ul>


Mengubah tanda pada Unordered list :
TYPE=circle,  membuat tanda lingkaran untuk item
TYPE= square,  membuat tanda kotak untuk item
TYPE=disc,  membuat tanda cacram untuk item

Misalnya :
<ul type="circle">
  <li>mie instan</li>
  <li>air mineral</li>
  <li>telur</li>
</ul> 


Pemrograman web : Kupas tuntas tentang Ordered List


Ordered list digunakan menampilkan daftar yang berurut, misal kegiatan yang harus dilakukan secara berurutan.
Misal urutan membuat mie instan :
 1. Rebus air hingga mendidih
 2. Masukkan mie
 3. Rebus mie hingga matang
 4. Dst…

Maka syntaxnya : 
<ol>
   <li>rebus air hingga mendidih</li>
   <li>masukkan mie</li>
   <li>rebus mie hingga matang</li>
</ol>


Tag <li> menyatakan list item di dalam daftar dengan default list berupa angka.
Untuk menggantinya disediakan atribut
TYPE= A untuk membuat daftar berurut dengan huruf besar (A, B, C, …)
TYPE= a untuk membuat daftar berurut dengan huruf kecil (a, b, c, …)
TYPE= I untuk membuat daftar berurut dengan bilangan romawi besar (I, II, III, IV,…)
TYPE= i untuk membuat daftar berurut dengan bilangan romawi kecil (i, ii, iii, iv,…)
TYPE=1 untuk mengembalikan daftar berurut pada nomor (default) (1,2,3,4…)
START= x Menentukan nilai awal dari item dalam daftar, di mana x adalah nilai awal daftar

 misalnya  <ol type="1" start="2" > , maka akan mulai dari angka 2 bukan dari 1 hitungannya.

Monday, November 23, 2015

Pemrograman Web : Hyperlink absolut,relatif dan link dengan atribut name


Membuat hyperlink atau tautan :
  1. Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat diklik untuk melompat ke dokumen baru atau bagian baru dalam dokumen. 
  2. Bila memindahkan kursor ke suatu link di halaman web, tanda panah akan berubah menjadi tangan kecil.
  3. Link yang ditentukan dalam HTML menggunakan tag <a>.
    • Untuk membuat link ke dokumen lain, dengan menggunakan atribut href 
    • Untuk membuat bookmark dalam dokumen, dengan menggunakan nama atribut
  4. Dokumen HTML mempunyai kemampuan untuk memberikan link dari satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen 
  5. Browser web akan menyorot teks atau gambar yang diidentifikasikan sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link.

HTML link syntax :
<a href="url">Link text</a> 
  • kode <a> dan </a> merupakan tag html untuk membuat link.
  • href, merupakan suatu attribute yang menunjukan tujuan link (URL). 
  • link Text merupakan perwakilan dari URL yang bisa berupa text (kata) atau gambar.
Link Relatif 
yaitu membuat link dari satu page ke page lainnya pada computer yang sama dapat dilakukan dengan
menuliskan langsung nama filenya.
•  Contoh :
<html>
<head>
<title>Link Relatif</title>
</head>
<body>
        <a href="biodata.html">Biodata</a>

</body>
</html> 


Link Absolut
Yaitu membuat link ke page web lain yang berada pada web site lain di internet dilakukan dengan
menuliskan namaURL dan nama filenya.
•  Contoh :
<html>
<head>
<title>link</title>
</head>
<body>
        <a href="http://www.w3schools.com/">Tutorial HTML</a>
</body>
</html>


Link dengan attribut name
Link ke bagian lain dalam dokumen yang sama, link jenis ini dipakai jika dokumennya terlalu panjang, sehingga apabila ditampilkan di browser akan mengharuskan kita melakukan scroll layer berulang-ulang. Untuk memudahkannya, maka dibuat link antar bagian di dalam dokumen HTML.

Syntax :
<a name=“isibab1">Bab1</a> :
Memberi nama bagian dalam dokumen HTML.
<a href="#isibab1">1. Bab1</a> :
mendefinisikan link isi bab1, jika teks “1. Bab 1”diklik, maka halaman web akan menampilkan bagian
“isibab1”.

contoh :<html>
<head>
<title>Link dalam satu dokumen</title>
</head>
<body>
        <p>IsiBab:</p>
        <p><a href="#isibab1">1. Bab1</a><br>
        <a href="#isibab2">2. Bab2</a><br>
        <a href="#isibab3">3. Bab3</a></p>
         <p>&nbsp;</p>
 

        <h2><a name="isibab1">Bab1</a></h2>
        <p>isi penjelasan bab 1</p>
        <h2><a name="isibab2">Bab 2</a> </h2>
        <p>isi penjelasan bab 2</p>
        <h2><a name="isibab3">Bab 3 </a></h2>
        <p>isi penjelasan bab 3.</p>
</body>
</html>



Membuat link di jendela baru 
sintaks :
<a href="url" target="_blank">Anchor Text</a>
Jika mengklik sebuah link akan terbuka sebuah jendela b aru pada web browser 
Contoh :
     <a href="http://w3scholls.com" target="_blank">Tutorial HTML</a>

Mudah-mudahan bermanfaat.

Pemrograman Web : Pengertian web, webserver, perbedaan web statis dan web dinamis


Website atau situs dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang
bersifat statis maupun dinamis yang  membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink).

Web server merupakan software yang memberikan layanan data yang berfungsi menerima permintaan HTTP dari klien yang dikenal dengan browser web dan mengirimkan kembali hasilnya dalam bentuk halaman - halaman web yang  umumnya berbentuk dokumen HTML.

Perbedaan website statis dan dinamis
Website Statis :
  • website yang kontennya statis / tidak berubah-rubah, komunikasi hanya satu arah
  • disusun dari html polos yang antar halamannya dihubungkan dengan hyperlink tanpa pemrograman disisi server
  • profile, personal profile, website penawaran produk
Website Dinamis :
  • website yang kontennya berubah – rubah 
  • selalu memiliki program yang bekerja di sisi server karena dalam rentang waktu tertentu konten dari website tersebut berubah 
  • Biasanya berupa portal berita, blog, situs social networking, dll