SukaCode: WEB Informasi Dunia Teknologi
News Update
Loading...

Featured

[Featured][recentbylabel]

Featured

[Featured][recentbylabel]

Selasa, 22 September 2020

Tipe Data Dictionary #BelajarPython

Tipe Data Dictionary #BelajarPython



Dalam Python, dictionary sering juga disebut sebagai mapping. Tipe ini memiliki cara kerja yang hampir mirip dengan asosiatif (hash table) di dalam bahasa pemrograman lain, yaitu array yang indeksnya berupa nama tertentu (biasanya bertipe string, bukan bertipe bilangan). Tipe data ini mendefinisikan relasi satu ke satu antara kunci (key) dan nilai (value).

Bentuk umum pendefinisian dictionary adalah:
variabel = {kuci1:nilai1, kunci2:nilai2,...}

Contoh: 
>>> d = {'dirut':'bimo', 'manager':'hapid'}
>>> d
{'dirut': 'bimo', 'manager': 'hapid'}
>>> d['dirut']
'bimo'
>>> 

Pada contoh diatas kita mendefinisikan dictionary d dengan dua buah elemen 'dirut' dan 'manager' desebut kunci atau kunci atau indeks elemen (key), sedangkan 'bimo' dan 'hapid' desebut nilai elemen(value).

Berikut ini contoh sederhana yang menunjukan tipe data dictionary:
def main():
   # membuat dan mengisi nilai ke dalam dictionary
   d = {'satu':10, 'dua':20, 'tiga':30}

   # menampilkan nilai dictionary
   print("d['satu']:", d['satu'])
   print("d['dua']:", d['dua'])
   print("d['tiga']:", d['tiga'])
   print("d['dua'] * d['tiga']:", (d['dua'] * d['tiga']))

if __name__ == "__main__":
   main()

Hasil Program:
d['satu']: 10
d['dua']: 20
d['tiga']: 30
d['dua'] * d['tiga']: 600

d['satu'] menunjukan elemen pertama dari dictionary d, d['dua'] elemen kedua, dan d'[tiga'] elemen ketiga. Pada kode di atas string dan elemen dictionary yang di tampilkan dengan fungsi print() di pisah dengan tanda koma. Ketika tanda koma digunakan sebagai pemisah, kita tidak perlu menggunakan sepasi untuk untuk memisahkan data karena fungsi print() otomatis akan membuat spasi pada masing masing data tersebut. Selain menggunakan tanda koma, Anda dapat menulis kode di atas menggunakan operator + untuk menyambung string dengan nilai yang di hasilkan. Karena elemen elemen di dalam dictionary pada kode di atas bertipe numerik maka ketika di tampilkan dengan fungsi print() kita perlu mengkonversi terlebih dahulu ke tipe str. Konversi diperlukan karena nilai tersebut akan di gabung dengan keterangan yang bertipe string. Dengan demikian, Anda dapat menulisnya seperti berikut:
   # menampilkan nilai dictionary
   print("d['satu']:", + str (d['satu']))
   print("d['dua']:", + str (d['dua']))
   print("d['tiga']:", + str (d['tiga']))
   print("d['dua'] * d['tiga']:", + str ((d['dua'] * d['tiga'])))

Jika anda lebih menyukai format string gaya bahasa C, anda dapat mengubah kode di atas menjadi seperti berikut:

Dalam Python, kita di izinkan juga untuk membuat dictionary yang nilainya tidak berasal dari tipe data sejenis, seperti ditunjukan oleh kode berikut:
def main():
    # nilai dictionary berbeda tipe data
    d = {'nama':"Arimbi", 'uts':95.25, 'uas':92.75, 'nilai':'A'}
 
    # menampilkan nilai dictionary
    print("Nama: ", d['nama'])
    print("Nilai UTS ", d['uts'])
    print("Nilai UAS: ", d['uas'])
    print("Nilai Indeks: ", d['nilai'])
 
 if __name__ == "__main__":
    main()

Hasil program:
Nama:  Arimbi
    Nilai UTS  95.25
    Nilai UAS:  92.75
    Nilai Indeks:  A

Pada contoh kode di atas dictionary d memiliki nilai gabungan antara tipe string, bilangan rill dan karakter.

Menambah Elemen ke dalam Dictionary


Jumlah elemen yang terdapat di dalam dictionary dapat di tambah sesuai kebutuhan. Caranya adalah dengan menuliskan perintah yang berisi kunci dan nilai baru kedalam nama dictionary bersangkutan.

Contoh:
>>> d = {'satu':10, 'dua':20, 'tiga':30}
    >>> d['empat'] = 40
    >>> d
    {'satu': 10, 'dua': 20, 'tiga': 30, 'empat': 40}

Perintah d['empat'] = 40 secara otomatis akan menambah elemen baru ke dalam dictionary d, dengan kunci empat dan nilai 40.
def main():
   d = {'satu':10, 'dua':20, 'tiga':30}

   # elemen dictionary sebelum ditambah
   print("Elemen dictionary sebelum ditambah: ")
   print(d)

   # menambah elemen baru ke dalam dictionary
   d['empat'] = 40
   d['lima'] = 50

   # elemen dictionary setelah ditambah
   print("\nElemen dictionary setelah ditambah: ")
   print(d)

if __name__ == "__main__":
   main()

Hasil program:
Elemen dictionary sebelum ditambah: 
    {'satu': 10, 'dua': 20, 'tiga': 30}
    
    Elemen dictionary setelah ditambah: 
    {'satu': 10, 'dua': 20, 'tiga': 30, 'empat': 40, 'lima': 50}

Mengubah Elemen dalam Dictionary 


Nilai elemen yang sudah didefinisikan di dalam dictionary dapat diubah sesuai kebutuhan, yaitu dengan menggunakan bentuk umum berikut:
nama_dictionary[kunci] = nilai baru

Contoh:
>>> d = {'satu':10, 'dua':20, 'tiga':30}
    >>> d['satu'] = 60
    >>> d['tiga'] = 90
    >>> d
    {'satu': 60, 'dua': 20, 'tiga': 90}

Pada contoh di atas nilai dari elemen d['satu'] akan di ubah nilainya dari 10 menjadi 60 dan d ['tiga'] nilainya akan di ubah dari 30 menjadi 90.
def main():
    d = {'satu':10, 'dua':20, 'tiga':30}
 
    # elemen dictionary sebelum diubah
    print("Elemen dictionary sebelum diubah: ")
    print(d)
 
    # mengubah nilai elemen d['satu'] dan d['tiga']
    d['satu'] = 60
    d['tiga'] = 90
 
    # elemen dictionary setelah diubah
    print("\nElemen dictionary setelah diubah: ")
    print(d)
 
 if __name__ == "__main__":
    main()

Hasil program:
Elemen dictionary sebelum diubah: 
    {'satu': 10, 'dua': 20, 'tiga': 30}
    
    Elemen dictionary setelah diubah: 
    {'satu': 60, 'dua': 20, 'tiga': 90}

Ada satu hal yang sangat penting untuk di perhatikan dalam melakukan perubahan dalam dictionary, yaitu penulisan kunci. Kunci dalam dictionary bersifat case-sensitive. Ini berarti bahwa d['satu'] tidak akan sama dengan d['Satu']. Jika penulisan kunci berbeda dengan yang sudah di definisikan di dalam dictionary maka akan di anggap menambah elemen baru, bukan mengubahnya.

Contoh:
>>> d = {'satu':10, 'dua':20, 'tiga':30}
    >>> #mengubah d['satu'] mejadi 60
    >>> d['satu'] = 60
    >>> d['Satu'] = 60
    >>> d
    {'satu': 60, 'dua': 20, 'tiga': 30, 'Satu': 60}

Pada contoh di atas, kunci pada baris kedua di tulis dengan 'satu' (huruf s di tulis dalam huruf kecil) sedangkan pada baris ketiga kunci di tulis dengan 'Satu' (huruf S ditulis dalam huruf besar/kapital).
def main():
    d = {'satu':10, 'dua':20, 'tiga':30}
 
    # elemen dictionary sebelum diubah
    print("Elemen dictionary sebelum diubah: ")
    print(d)
 
    # mengubah nilai elemen d['satu']
    d['satu'] = 60
 
    # menambah elemen d['Satu']
    d['Satu'] = 130
 
    # elemen dictionary setelah diubah
    print("\nElemen dictionary setelah diubah: ")
    print(d)
 
 if __name__ == "__main__":
    main()

Hasil Program:
Elemen dictionary sebelum diubah: 
    {'satu': 10, 'dua': 20, 'tiga': 30}
    
    Elemen dictionary setelah diubah: 
    {'satu': 60, 'dua': 20, 'tiga': 30, 'Satu': 130}

Seperti yang anda lihat di atas sekarang dictionary d memiliki empat elemen. Ini disebabkan karena kunci 'Satu' belum terdapat di dalam dictionary d. Jadi jika ingin mengubah elemen di dictionary perhatikan baik baik penulisan kuncinya.

Menghapus Elemen dari Dictionary 


Selain ditambah dan diubah, Python juga mengizinkan kita untuk menghapus elemen dari suatu dictionary. Caranya adalah dengan perintah del seperti berikut:
del nama_dictionary[kunci]

Contoh:
def main():
    d = {'satu':10, 'dua':20, 'tiga':30}
    
    # elemen dictionary sebelum dihapus
    print("Elemen dictionary sebelum dihapus: ")
    print(d)
 
    # menghapus nilai elemen d['satu'] dan d['tiga']
    del d['satu']
    del d['tiga']
 
    # elemen dictionary setelah dihapus
    print("\nElemen dictionary setelah dihapus: ")
    print(d)
 
 if __name__ == "__main__":
    main()

Hasil Program
Elemen dictionary sebelum dihapus: 
    {'satu': 10, 'dua': 20, 'tiga': 30}
    
    Elemen dictionary setelah dihapus: 
    {'dua': 20}

Setelah di hapus elemen dictionary menjadi satu

Sama halnya seperti pada saat Anda mengubah elemen dictionary pada saat menghapus anda juga perlu memperhatikan penulisan kunci elemenya. Penulisan yang salah akan mengakibatkan kesalah fatal pada saat kode di eksekusi.

Tipe String Numerik dan Boolean #BelajarPython

Tipe String Numerik dan Boolean #BelajarPython


Python mendukung dua tipe dasar, yaitu, teks dan numerik. Tipe data tesk dapat di klasifikasikan sebagai karakter tunggual atau kumpulan karakter (string), sedangkan tipe numerik di klasifikasikan menjadi tipe bilangan bulat. bilangn rill, dan bilangan kompleks.

Tipe String

Dalam python, string di representasikan dengan tipe str dan merupakan kumpulan karakter Unicode. String dapat di buat menggunakan tanda petik tunggal, ganda, maupun triple (petik tunggal atau ganda yang di tulis tiga kali).

Contoh:

str1 = 'ini string yang di gunakan untuk petik tunggal'
str2 = "ini adalah string yang di gunakan untuk petik ganda"
str3 = """ ini adalah string panjang yang di tulis menggunakan tanda petik sebanyak tiga kali.
jinis string ini digunakan untuk teks yang terdiri dari beberapa baris"""


Ketiga penggunaan string di atas di anggap legal di dalam python.

def main():
   # membuat string
   s1 = 'string pertama'
   s2 = "string kedua"

   # menampilkan string
   print(s1)
   print(s2)

if __name__ == "__main__":
   main()


Hasil program:

string pertama
string kedua


Sama seperti bahasa C/C++, Python juga mengijinkan kita untuk menggunakan karakter escape sequance di dalam string, Karakter escape sequance adalah kumpulan karakter yang di awali oleh karakter backslash ('\'). Meskipun terdiri dari beberapa karakter namun escape sequance akan selalu di anggap sebagai karakter tunggal. Tabel di bawah ini menunjukan beberapa escape sequance yang sering di gunakan di dalam pemrograman Python.

Escape Sequence Keterangan
\\ Backslash(\)
\' Petik Tunggal
\" Petik Ganda
\n ASCII linefeed(lf)
\r ASCII carrige return(CR)
\ooo Bilangan oktal (basis 8)
\xhh Bilangan hexadesimal (basil 16)
\t ASCII tab (TAB)
\v ASCII vertical tab (VT)


Berikut adalah contoh code yang menunjukan penggunaan beberapa escape sequance.

def main():
   s1 = 'Petik tunggal \'escape\', petik ganda "OK"'
   s2 = "Petik tunggal 'OK', petik ganda \"escape\""
   s3 = "Baris pertama\nBaris kedua"

   print(s1)
   print(s2)
   print(s3)

if __name__ == "__main__":
   main()


Hasil program:

Petik tunggal 'escape', petik ganda "OK"
Petik tunggal 'OK', petik ganda "escape"
Baris pertama
Baris kedua


Ketika kita ingin menuliskan tanda petik tunggul di dalam string yang di buat menggunakan petik tunggal, kita harus menggunakan escape sequence. Untuk petik ganda bisa langsung di masukan ke dalam string tersebut. Demikian juga jika string dibuat oleh petik ganda, petik ganda yang di tampilkan di dalam string harus di awali backslash sedangkan petik tunggal bisa langsung di tuliskan ke dalam string. Karakter \n diatas berguna untuk membuat baris baru.

Pada beberapa kasus kita justru ingin mengabaikan kehadiran escape squance di dalam string sebagai contoh, perhatikan kode berikut.

>> print("C:\new\test")
C:
ew  est


Baris kode di atas akan memberikan hasil yang tidak di harapkan Permasalahan yang terjadi di karenakan \n akan di perlakukan sebagai garis baru dan karakter \t di perlakukan sebagai tab. Untuk mengatasi permasalahan ini kita perlu menulis tanda backslash dua kali, seperti berikut:

>> print("C:\\new\\test")
C:\new\test


Cara lain yang lebih sederhana adalah dengan membuat raw string yaitu string yang mengabaikan kehadiran karakter escape sequance. Artinya karakter escape seequance tidak akan di proses di dalam raw string sehingga string akan di tampilkan apa adanya. Untuk membuat string jenis ini, kita perlu memberi huruf r di depan string seperti berikut:

>> print(r"C:\new\test")
C:\new\test


Meskipun pada contoh di atas kita hanya menggunakan tanda backslash satu kali di dalam string, tapi karakter '\n' dan '\t' tidak di perlakukan sebagai escape sequance.

Membandingkan String

Dua buah string dapat di bandingkan menggunakan operator relasional <, <=, ==, =>, > dan >= Berikut ini contoh kode sederhana yang menunjukan proses perbandingan string .

def main():
   s1 = "Python"
   s2 = "Python"

   print("s1: " + s1)
   print("s2: " + s2)

   if s1 == s2:
      print("s1 sama dengan s2")
   else:
      print("s1 tidak sama dengan s2")

if __name__ == "__main__":
   main()


Hasil program

s1: Python
s2: Python
s1 sama dengan s2


Pada contoh kode di atas kita menggunakan operator == ( tanda "sama dengan yang di tulis dua kali" ) untuk memeriksa apakah string s1 sama dengan string s2 atau tidak.

Mengambil Substring

Cara mengambil bagian string di dalam string dinamakan substring dilakukan menggunakan tanda bracket ([]). Kita dapat mengambil satu atau beberapa karakter dari string dengan cara menyertakan indeks atau posisi dari karakter bersangkutan. 

Hal pertama yang perlu anda ketahui sebelum melakukan ekstraksi substring adalah penentuan indeksnya, Dalam Python, string dapat di indeks melalui dua arah. Indeks string di awali dari 0 (untuk arah dari kiri ke kanan) atau -1 (untuk arah dari kanan ke kiri).

def main():
   s = "Python"

   print(s[0])
   print(s[1])
   print(s[-4])
   print(s[:2])
   print(s[2:])
   print(s[1:4])
   print(s[2:5])

if __name__ == "__main__":
   main()

Hasil program:

P
y
t
Py
thon
yth
tho


Tipe Numerik

Untuk melakukan operasi numerik, Python mendukung tiga tipe bilangan, yaitu: integer, floating point, dan bilangan kompleks. Ingat! semua bilangan di dalam python merupakan objek yang tidak dapat di ubah atau bersifat immutable. Ini berarti setiap operasi perhitungan terhadap bilangan, kita akan selalu memperoleh objek bilangan yang baru sebagai hasilnya.

Tipe integer dapat berupa bilangan biner (basis 2), desimal (basis 10), oktal (basis 8), dan hexadesimal (basis 16). Nilai yang di tulis dalam notasi biner di tandai dengan awalan 0b (angka 0 yang di ikuti dengan huruf b), oktal dengan awalan 0o (angka yang di ikuti dengan huruf o), dan hexadesimal dengan awalan 0x (angka 0 yang di ikuti dengan huruf x).

Contoh:

0b1, 0b10111     # biner
1, 23       #desimal
0o1, 0o27       #oktal
0x1, 0x17       #hexadesimal

Huruf b, o dan x juga dapat di tulis dalam hururf kapital: B, O, dan X. Contoh kode di bawah ini menunjukan hal tersebut.

>>> binner = 0b10111
>>> binner
23
>>> oktal = 0o27
>>> oktal
23
>>> hexadesimal = 0x17
>>> hexadesimal
23
>>> 

Bilangan kompleks tersusun atas dua bilangan pecahan: bagian-rill + bagian-imaginer, dan di akhiri oleh huruf J atau j. Dalam disiplin ilmu lain, bilangan kompleks saling di tandai dengan huruf i di belakangnya. Masing-masing bagian dari bilangan kompleks dapat di ambiln melalui atribut real dan imag.

Contoh:

>>> z = 4.1+2j
>>> print(z.real) 
4.1
>>> print(z.imag)
2.0
>>> 

Pada contoh di atas 4.1 adalah bagian rillnya dan 2.0 adalah bagian imaginernya.

Tipe Boolean 

Sebelum Python 2.3, Python tidak memiliki tipe khusus yang menangani nilai logika (benar/salah). Saat itu, nilai benar hanya di representasikan dengan nilai selain nol atau dengan string, tuple, list, maupun dictionary yang tidak kosong. Nilai salah direpresentasikan dengan nilai nol atau dengan string, tuple, list, maupun dictionary kosong.

Pada versi 2.3 dikenalkan tipe baru yaitu bool, yang sebenarnya merupakan subkelas tipe int (integer). Nilai dari tipe ini adalah True (benar) dan False (salah).

Contoh:

>>> t = True
>>> f = False
>>> print(t and f)
False
>>> print(t or f)
True
>>> type(t)


Senin, 21 September 2020

Membaca Data Bilangan Rill #BelajarPython

Membaca Data Bilangan Rill #BelajarPython


Bilangan rill ( floating-point ) adalah bilangan yang mengandung angka di belakang koma misalnya 1.2, 3.14 dan sebagainya. Untuk membaca data bilangan rill sama seperti membaca bilangan bulat, kita harus melakukan proses konversi terlebih dahulu. Jika mengkonversi ke bilangan bulat kita menggunakan (int), untuk mengkonversi ke bilangan rill kita menggunakan float seperti kode di bawah ini:

def main():
   # membuat prompt untuk tipe data float
   bilriil = float(input("Masukkan bilangan riil: "))

   # menggunakan variabel untuk melakukan perhitungan
   hasil = bilriil*2

   # menampilkan nilai variabel
   print("Bilangan yang dimasukkan adalah %f" % bilriil)
   print("%f x 2 = %f " % (bilriil, hasil))

if __name__ == "__main__":
   main()


Hasil Program:

Masukkan bilangan riil: 2.12
Bilangan yang dimasukkan adalah 2.120000
2.120000 x 2 = 4.240000


Untuk menampilkan dua angka desimal di belakang koma anda perlu mengganti format di atas dengan %.2f, bukan %f

print("%.2f x 2 = %.2f " % (bilriil, hasil))

Meskipun bilangan rill dan bilangan bulat sama sama bertipe numerik namun anda tetap di ijinkan untuk mengkonversi data bilangan rill yang dibaca dari keyword menggunakan int. Sebagai bukti pernyataan ini, silahkan anda modifikasi kode di atas menjadi seperti berikut:

def main():
   # membuat prompt untuk tipe data float
   bilriil = int(input("Masukkan bilangan riil: "))

   # menggunakan variabel untuk melakukan perhitungan
   hasil = bilriil*2

   # menampilkan nilai variabel
   print("Bilangan yang dimasukkan adalah %f" % bilriil)
   print("%f x 2 = %f " % (bilriil, hasil))

if __name__ == "__main__":
   main()


Hasil program:

Masukkan bilangan riil: 2.12
Traceback (most recent call last):
  File "D:\HapidFAdli\Belajar Python\Source Code\bab-2\input-float1.py", line 17, in 
    main()
  File "D:\HapidFAdli\Belajar Python\Source Code\bab-2\input-float1.py", line 7, in main
    bilriil = int(input("Masukkan bilangan riil: "))
ValueError: invalid literal for int() with base 10: '2.12'


Minggu, 20 September 2020

Membaca Data Bilangan Bulat #Python

Membaca Data Bilangan Bulat #Python


Jika anda memasukan data kedalam fungsi input yang bertipe string atau teks. Agar data tersebut dianggap sebagai bilangan anda perlu mengkonversi terlebih dahulu ke tipe data yang di inginkan. Untuk membaca data dengan tipe data bilangan bulat, anda perlu mengkonversi data tersebut ke tipe int(integer) seperti yang di tunjukan oleh kode berikut ini:

def main():
   # membuat prompt untuk tipe data integer
   bilbulat = int(input("Masukkan bilangan bulat: "))

   # menggunakan variabel untuk melakukan perhitungan
   hasil = bilbulat + 1

   # menampilkan nilai variabel
   print("Bilangan yang dimasukkan adalah %d" % bilbulat)
   print("%d + 1 = %d" % (bilbulat, hasil))

if __name__ == "__main__":
   main()

Hasil program:

Masukan bilangan bulat: 99

--

Bilangan yang di masukan adalah 99

99 + 1 = 100

Untuk membuktikan kebenaran di atas silahkan anda lakukan uji coba untuk menghilangakn bentuk konversi kode di atas dengan menuliskan kode seperti berikut:

bilbulat = input("Masukkan bilangan bulat: ")

Ketika di eksekusi program Python interpreter akan menampilkan kesalahan seperti berikut:

Masukan bilangan bulat:99
Traceback (most recent call last):
  File input-integer.py", line 17, in 
    main()
  File input-integer.py", line 10, in main
    hasil = bilbulat + 1
TypeError: can only concatenate str (not "int") to str

Pesan kesalahan tersebut di munculkan oleh python interpreter karena kita mencoba menjumlahkan bilangan bulat (1) dengan teks "99" bukan dengan bilangan 99.

Konversi bilangan bulat sebernarnya bisa di lakukan secara terpisah dari fungsi input(), seperti berikut:

def main():
   # membuat prompt untuk tipe data string
   s = input("Masukkan bilangan bulat: ")

   # melakukan konversi dari string ke tipe integer
   bilbulat = int(s)

   # menggunakan variabel untuk melakukan perhitungan
   hasil = bilbulat + 1

   # menampilkan nilai variabel
   print("Bilangan yang dimasukkan adalah %d" % bilbulat)
   print("%d + 1 = %d" % (bilbulat, hasil))

if __name__ == "__main__":
   main()

Pada contoh di atas proses input akan tetap di tampung kedalam variabel bertipe teks(s).

s = input("Masukkan bilangan bulat: ")

Pada baris selanjutnya variabel s tersebut kemudian di konversi ke tipe bilangan bulat.

bilbulat = int(s)

Ketika kode di atas di eksekusi, hasil yang di peroleh sama seperti hasil yang di tampilkan oleh kode sebelumnya.


Sabtu, 19 September 2020

Kerangka Kode Program Dalam Bahasa Python

Kerangka Kode Program Dalam Bahasa Python

Dalam pengembangan program menggunakan Python, tidak ada kerangka program khusus yang wajib di gunakan. Ini berbeda dengan bahasa pemrograman seperti C, C++ dan java, yang masing masing memiliki fungsi main(). Meskipun demikian para programer pyhton biasanya menggunakan kerangka seperti berikut untuk menuliskan kode:

def main():
    #daftar perintah

if __name__ == "__main__"\
    main()

Pada bentuk umum di atas kita mendefinisikan bentuk main() dan fungsi tersebut akan di panggil dalam modul utama (__main__). Berikut dibawah ini contoh kode program yang di tulis menggunakan bentuk umum di atas.

# mendefinisikan fungsi main
def main():
    bahasa = ["Python", "Ruby", "Perl", "PHP"]
    for b in bahasa:
        print(b)

if __name__ = "__main__":
    main() #Memanggil fungsi main

Hasil: 

  • Python
  • Ruby
  • Perl
  • PHP


Catatan:

Pyhon menggunakan indentasi (Pergeseran kode ke arah kanan) untuk menandai suatu blok program. Dalam bahasa pemrograman lain seperti C, C++, Java dan PHP menggunakan tanda { (untuk memulai suatu program) dan } (untuk mengakhiri blok program).

Gunakan tanda underscore duakali (__) pada saat menuliskan tesk __name__ dan __main__.

Minggu, 13 September 2020

Membuat UI Jam Analog Menggunakan HTML CSS dan Javascript

Membuat UI Jam Analog Menggunakan HTML CSS dan Javascript

 


Pada artikel kali ini saya akan memberikan panduan cara membuat jam analog dengan tampilan keren menggunakan HTML CSS dan JavaScript. Namun sebelum mengikuti panduan ini sebaiknya kalian harus mengerti terlebih dahulu dasar dasar dari html css dan javascript supaya paham.

Jam analog yang akan kita buat, nantinya bisa kita gunakan untuk mempercantik website agar lebih interaktif (bisa di tambahkan sebagai widget). Bagaimana membuat Jam analog menggunakan javascript? berikut panduanya:

Pertama silahkan buat dulu folder untuk menyimpan proyek yang akan kita buat silahkan berinama jam analog atau namanya terserah kalian. Jika sudah di buat silahkan tambhakn file index.html untuk menyimpan kode html dam buat file style.css untuk menyimpan kode css nya.

Selanjutnya silahkan masukan kode html berikut kedalam file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Jam Dinding</title>
</head>
<body>
    <div class="clock">
        <div class="hour">
            <div class="hr" id="hr"></div>
        </div>
        <div class="min">
            <div class="mn" id="mn"></div>
        </div>
        <div class="sec">
            <div class="sc" id="sc"></div>
        </div>
    </div>

    <script>
        const deg = 6;
        const hr = document.getElementById('hr');
        const mn = document.getElementById('mn');
        const sc = document.getElementById('sc');

        

        setInterval (() => {
            let day = new Date();
            let hh = day.getHours() *  30;
            let mm = day.getMinutes() * deg;
            let ss = day.getSeconds() * deg;

            hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
            mn.style.transform = `rotateZ(${mm}deg)`;
            sc.style.transform = `rotateZ(${ss}deg)`;
        })
    </script>
</body>
</html>

Penjelasan Kode pada HTML

Pada bagian atas ada kode <link rel="stylesheet" href="style.css">  ini berguna untuk menghubungkan file html kita dengan file style.css. Mengapa harus di hubungkan? untuk mempercantik tampilan jam nya kita harus menggunakan css sebagai style.

Pada bagian body ada div dengan class clock merupakan tampilan utama jamnya. Di dalam div dengan class clock ada beberapa div lagi dengan class dan id. div ini berguna sebagai arah jarum nya.

Selanjutnya pada bagian tag script di dalamnya ada beberapa variabel dan fungsi untuk mengatur arah jarum jam.

const deg digunakan untuk mengatur rotasi
const hr, mn, sc pada bagian atas digunakan untuk mengambil code dari id masing masing.
fungsi setInterval di perlukan untuk mengatur waktu bergeraknya arah jarum jam.

Kemudian silahkan masukan kode css berikut kedalam file style.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #091921;
}
.clock {
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-image: url(clock.png);
    border: 4px solid #091921;
    border-radius: 50%;
    box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
                inset 0 -15px 15px rgba(255, 255, 255, 0.05),
                0 15px 15px rgba(0, 0, 0, 0.3),
                inset 0 15px 15px rgba(0, 0, 0, 0.3);
                
}
.clock::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 1000;
}
.clock .hour,
.clock .min, 
.clock .sec
{
    position: absolute;
}
.clock .hour, .hr {
    width: 160px;
    height: 160px;
    
}
.clock .min, .mn {
    width: 190px;
    height: 190px;
}
.clock .sec, .sc {
    width: 230px;
    height: 230px;
}

.hr, .mn, .sc {
    display: flex;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
}
.hr::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background: #ff105e;
    border-radius: 6px 6px 0 0;
    z-index: 10;
}
.mn::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background: #fff;
    border-radius: 6px 6px 0 0;
    z-index: 20;
}
.sc::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background: #e2e2e2;
    border-radius: 6px 6px 0 0;
    z-index: 22;
}

Kode css ini akan mempercantik dan mengatur penempatan setiap elemen pada kode html.


Jika sudah memasukan kode kode tersebut silahkan buka file index.html menggunakan browser nanti tampilanya seperti ini:


nah itulah sedikit tentang cara membuat jam analog otomatis menggunakan html css dan javascript. sampai jumpa pada tutorial berikutnya

Jumat, 11 September 2020

Cara Membuat Function Copy to Clipboard Menggunakan JavaScript 2020

Cara Membuat Function Copy to Clipboard Menggunakan JavaScript 2020

Cara Membuat  Copy to Clipboard Menggunakan


Pada artikel kali ini saya akan membuat fungsi untuk menyalin text menggunakan bahasa pemrograman javascript. Dengan menggunakan fungsi ini kita bisa menyalin text hanya dengan mengklik icon / img copy dengan satu kali klik. Bagaimana Cara Membuat Copy to Clipboard ? . Berikut panduannya:

Sebelum mengikuti tutorial ini pastikan kalian sudah membaca artikel sebelumnya tentang cara membuat password generator secara otomatis karena kita akan menggunakan kode dari projek tersebut. 

Silahkan salin kode html dan css pada artikel tersebut kemudian pastekan pada folder proyek baru kita. paste kode html pada file index.html dan kode css pada file style.css.

Jika sudah silahkan buka file index.html kemudian tambahkan code seperti berikut:

<img src="https://img.icons8.com/material-rounded/24/000000/copy.png" alt="copy">

Letakan di bawah kode <input

Selanjutnya untuk memindahkan dan mengatur ukuran dari img yang sudah kita tambahkan dalam kode html. Kita membutuhkan property css untuk melakukan itu.  silahkan tambahkan kode css berikut pada file style.css:

.input-box img {
    position: absolute;
    width: 40px;
    top: 56px;
    right: 14px;
    opacity: 0.2;
    cursor: pointer;
    transform: rotate(90deg);
}
.input-box img:hover {
    opacity: 1;
    color: gray;
}

Supaya kode ini berjalan kita membutuhkan sebuah fungsi, kita akan menggunkan javascript untuk membuat fungsinya silahkan tambahkan kode berikut tepat di atas kode </script>:

function copyPassword(){
            var copyPassText = document.getElementById("password");
            copyPassText.select();
            copyPassText.setSelectionRange(0, 9999)
            document.execCommand("copy");
        }

Ketika fungsi ini di panggil kita bisa mengcopy text dari input. Untuk memanggilnya silahkan tambahakan atribut onclick="copyPassword();" berikut pada tag img:

<img src="https://img.icons8.com/material-rounded/24/000000/copy.png" alt="copy" onclick="copyPassword();">

Nah itulah cara membuat copy to clipboard menggunakan javascript. Kode yang kita buat akan berjalan ketika kita sudah mengenerate password dengan mengklik button generate kemudian mengklik icon salin atau copy dan jika sudah di klik maka text yang ada di input otomatis tersalin.

Ad Placement

Featured

[Featured][recentbylabel]
Notification
This is just an example, you can fill it later with your own note.
Done