Dasar-dasar JavaScript

Mengenal Variabel

Dalam kamus besar bahasa Indonesia (KBBI), Variabel adalah suatu data yang berubah – ubah, bermacam – macam. Jadi, jika kita hubungkan kedalam suatu bahasa pemrograman maka variabel adalah suatu simbol yg digunakan untuk menyimpan sebuah data, data tersebut tidaklah tetap suatu waktu bisa berubah. Dalam javascript, penulisan variabel di mulai dengan simbol var. Perhatikan contoh dibawah ini :

Continue reading “Dasar-dasar JavaScript”

Tanpa melek teknologi mustahil untuk mengejar ketertinggalan

Menjadi seorang guru  bukanlah sesuatu pekerjaan yang sulit, akan tetapi tidak bisa juga dikatakan sebagai pekerjaan yang mudah. Tergantung dari sudut pandang orang yang menilainya. Perkenalkan terlebih dahulu, Saya adalah seorang guru kejuruan di bidang IT, tepatnya guru Multimedia di SMKN 1 Cibadak, Sukabumi. Sebelumnya saya bekerja sebagai seorang web developer/praktisi IT untuk salah satu perusahaan swasta di bandung. Awalnya saya tidak berencana untuk menjadi seorang guru. Bahkan jika di lihat dari riwayat pendidikan, S1 saya bukan dari bidang keguruan.

Continue reading “Tanpa melek teknologi mustahil untuk mengejar ketertinggalan”

Backup kisi-kisi soal LKS ke 25 tahun 2017

update (3 Mei 2017)

berhubung tempo hari website utama tidak bisa di buka, maka saya backup link soal-soal lks di website saya agar mempermudah pengaksesan dan pengarsipan.

UNDUH KISI-KISI SOAL LKS KE 25 TAHUN 2017

1. AGRONOMY

2. AKUNTANSI

3. ANIMASI (2D)

ANIMASI (3D)

4. AUTOBODY REPAIR

5. CABINET MAKING

6. CARING

7.  CNC MILLING

8. CNC TURNING

9. CONFECTIONERY

10. COOKING

11. ELECTRICAL INSTALATION

12. ELECTRONIC

13. FARMASI

14. INDUSTRIAL CONTROL

15. IT NETWORK SYSTEM

16. JEWELLERY

17. JOINERY

18. CERAMICS

19. LADIES DRESS MAKING

20. LEATHER CRAFT

21. MECHANICAL ENGINERRING

22. MECHATRONIC

23. MOBILE ROBOTIC

24. MOULD MAKING

25. PRINTING

26. PROTOTYPE MODELLING

27. REFRIGERATION AND AIR CONDITIONING

28. RESTAURANT SERVICE

29. SECRETARY

30. TELECOM DISTRIBUTION

31. TEXTILE

32. VISUAL MERCHANDISING

33. WEB DESIGN AND DEVELOPMENT

34. WOOD CRAFT

35. AUTOMOBILE TECHNOLOGY

36. BEAUTY TERAPHY

37. LIVESTOCK

38. POST HARVEST TECHNOLOGY

39. WALL AND FLOOR TILLING

40. BRICKLAYING

41. FISHERY

42. GRAFIC DESIGN TECHNOLOGY

43. IT SOFTWARE APPLICATION

44. LANDSCAPING AND GARDENING

45. NAUTICA

46. PLUMBING

47. TOURIST INDUSTRY

48. WELDING

49. PAINTING

50. HOTEL ACCOMODATION

51. LADIES AND MEN’S HAIRDRESSING

52. CADD BUILDING

53. CHEMISTRY

Kesempatan itu akan selalu ada bagi siapapun yg mampu melihat dan memanfaatkan peluang

10 tahun yg lalu, saya adalah peserta LKS tingkat provinsi Jawa Barat. waktu itu, memang sekolah kami hanya satu-satunya yg membuka jurusan IT jadi secara otomatis kita mendapatkan kesempatan mewakili Kabupaten Sukabumi di tingkat provinsi.

Jurusan kami multimedia. Teringat waktu itu nginstall wampp aja g ada yg ngerti, dan saya tau pas waktu lomba bahwa untuk membuat suatu halaman Web itu butuh pengetahuan HTML, CSS, dan PHP. Jadi, masih di tempat yg sama kala itu saya hanya membuat Web dengan menggunakan flash. Iyah Flash, Karena saya cuma bisa maenin flash kemudian saya embed ke Dreamweaver. Alhasil, Alhamdulillah mungkin bisa jadi juara paling akhir, lha wong g sesuai prosedur. Continue reading “Kesempatan itu akan selalu ada bagi siapapun yg mampu melihat dan memanfaatkan peluang”

Jangan pernah mengukur diri berdasarkan pencapaian orang lain

Kita mungkin pernah mengagumi seseorang. Atau lebih tepatnya sedikit iri dengan keberhasilan yg orang lain dapatkan. saya sendiri, tidak mengatakan sepenuhnya bahwa itu suatu hal yg salah. dalam beberapa kondisi, bisa kita katakan itu adalah suatu hal yg baik selama itu memotivasi kearah yg lebih baik. 

Lantas sebetulnya apa sih yang menjadi motivasi kita ketika merasakan hal itu? Katakan saja banyak dari murid-murid saya yg sangat kagum dengan pencapaian rekannya. sekali lagi saya tegaskan, mengagumi seseorang tidak salah apalagi dengan pencapaian yg ia dapatkan. Namun jangan sampai begini, Alih-alih kita bangga dan takjub dengan prestasi seseorang, ternyata rasa iri, kesal dan perasaan menyerah timbul. Muncul pemikiran bahwa mungkin dia berbakat, sedangkan kita tidak. Jika kita pernah merasakan hal itu, mudah-mudahan penjelasan dibawah sedikit banyak bisa mencerahkan kembali. 

Berbicara soal bakat memang butuh kajian khusus, apakah bakat itu sesuatu bawaan dari lahir, apakah bakat itu suatu pemberian yg diberikan oleh Allah kepada orang tertentu ataukah bakat itu muncul karena lingkungan dan rangsangan yg kita terima jauh sebelum kita tumbuh, dan lain lain.

Jika kita meyakini bahwa bakat itu adalah segalanya maka saya yakin kita termasuk orang yg mudah putus asa dan gampang menyerah. Segala nya di ukur dengan keterbatasan. Ada beberapa hal yang kita lupakan ketika kita mengagumi seseorang karena prestasi yg ia raih, yaitu proses. Ada ungkapan “Progress not Perfection”. Disusul dengan pertanyaan How it works? Semestinya memang kita tidak hanya mengagumi seseorang lantas cukup dengan hanya memuji dan mengaguminya saja. Mulailah berfikir bagaimana dia berada di posisi itu dan berapa lama dia berjuang sampai akhirnya ada di titik itu. Apa saja yang Sudah dia lakukan? dll. Stalker dalam hal ini saya katakan boleh. Jangan cuma stalker sam mantan. Hehe

Seandainya kita katakan bahwa dia ideal dan maksimal di bidang itu, bukan berarti kita harus maksimal dan ideal di bidang yang sama. Maka mulailah berfikir bidang apa yang akan kita maksimalkan baik itu perjuangan dan usahanya.  Kalopun kebetulan bidang yg dia raih adalah hal yg ingin kita raih tetap saja jangan jadikan prestasi atau achievement yang dia dapat sebagai tolak ukur kita. 

Ingatlah, semua orang diciptakan dalam situasi dan kondisi yg berbeda. Fokuslah sama prosesnya bukan pada hasilnya. Selama kita bisa memberikan yg terbaik dan berlari kearah yg lebih baik lagi maka terus paculah semangat itu tanpa melihat orang lain di depan dan di belakang. Bandingkan tempo kita hari ini dengan tempo kita di hari kemarin. Saya yakin, suatu saat dengan sendirinya kita akan bisa menilai bahwa perjuangan kita selama ini tidak sia-sia. 

Saya pernah dikritisi oleh rekan saya, mengenai timezone. Jangan pernah membandingkan kemampuan dan pencapaian seseorang dengan timezone orang lain. Mksdnya begini, ada orang yg menikah di usia 30 tahun, ada yg menikah di usia 20 tahun. Ada yg sukses menjadi CEO di usia 17 tahun, ada yg 20 tahun dan jangan lupa bos KFC itu suksesnya di usia yg lebih dari 60 tahun. Apakah karena berbeda percepatan dikatakan gagal? Tidak. 

Intinya adalah apa yg sudah kita lakukan hari kemarin, harus kita Review kembali hari ini. Sudah maksimalkah perjuangan kita? Apakah besok kita bisa lebih lagi? Fokuslah pada prosesnya bukan pada hasilnya. Ketika melihat orang sukses di usia yg jauh lebih muda, maka cukuplah kita mulai hari ini. Jangan ditunda lagi, yang ada kita malah semakin tertinggal. Ingatlah ketika kita berjuang disini merasa seakan ini adalah perjuangan terbaik kita, diluaran sana masih banyak orang yg usahanya jauh lebih keras dengan keadaan dan kondisi yg jauh lebih baik dari kita. 

Maka adakah kesempatan itu untuk kita? Tentu ada Berjuanglah lebih keras lagi, lihatlah bagaimana orang sukses berjuang dan lakukanlah melebihi apa yang biasa kita lakukan sesuai kemampuan kita. 

Push your limit.
… (dalam perjalanan membimbing siswa d mengikuti lomba webdesign di UGM. Doakan kami Yah untuk mendapatkan hasil yg terbaik dan maksimal)

Form

Pernahkah anda melakukan registrasi pada sebuah situs? misalnya kita melakukan pendaftaran untuk email, facebook, dan lain lain.

atau sekedar mengisi form tertentu untuk login ke suatu situs jejaring sosial?

Saya yakin kita semua sudah pernah melakukan semua itu. Sejumlah informasi yang kita masukkan ke dalam sebuah website melalu formulir yang disediakan bisa kita sebut sebagai suatu inputan.

Sejumlah inputan dapat kita kirim ke dalam sebuah sistem dengan menggunakan form. Inputan yang kita kirim digunakan oleh sistem untuk diolah dan di simpan sebelum di proses atau dicetak ke dalam suatu output.

Singkatnya, Form digunakan untuk mengoleksi inputan dari user. Sebuah form bisa terdiri dari sekelompok text, radio option, checkbox, submit button, dan masih banyak lagi yang lainnya.

Tabel Elemen Form

Elemen Pengertian
 <form></form> Membuka dan Menutup Form
 <input type=”text” /> Membuat Inputan berbentuk text (Single Line)
 <input type=”radio” /> Membuat Pilihan Inputan berbentuk radio (Single Choice)
 <input type=”checkbox” /> Membuat Pilihan Inputan berbentuk checkbox (Multiple Choice)
 <input type=”password” /> Membuat Pilihan Inputan berbentuk password (Hide Area)
 <input type=”date” /> Membuat inputan berbentuk tanggal
 <input type=”file” /> Membuat inputan berbentuk file (upload file)
 <input type=”submit” />
<button type=”submit”>
Membuat submit button
 <input type=”reset” />
<button type=”reset”>
Mereset form yang telah diisi
 <select>
<option></option>
</select>
Membuat pilihan inputan berbentuk select box
<textarea></textarea> Membuat Inputan berbentuk text (Multiple Line)
 <label> Untuk memberikan label pada inputan
 <fieldset> Mengelompokkan element-element pada form
 <legend> Memberikan caption (nama) pada fieldset
 <optgroup> Mengelompokkan/menggrupkan pilihan inputan pada selectbox

Contoh Form Sederhana

Contoh Penggunaan Form dan style

Attribut pada elemen Form

Seperti halnya attribut pada elemen lainnya attribut form juga digunakan untuk menambah informasi dan pengaturan tambahan pada elemen form yang kita buat, misalnya menambah size, jumlah rows, atau sekedar hint pada elemen yang kita buat. perhatikan contoh pada file sebelumnya, disana kita sudah menuliskan beberapa form attribute seperti placeholder, max, min dll. beberapa form attribut lain, yang akan kita pelajari diantaranya adalah :

Elemen Attribut Pengertian
Value Memberikan nilai value (hasil) pada inputan
Name Memberikan nama pada inputan
Readonly Digunakan agar inputan tidak bisa di rubah (hanya di baca)
Disabled Digunakan agar inputan tidak berfungsi
Size Menspesifikasikan jumlah (dalam karakter) untuk field inputan
Maxlength Jumlah maksimal karakter yang bisa di input
Required Digunakan agar inputan wajib diisi
Autofocus Digunakan agar ketika kita buka halaman langsung menuju inputan tersebut
Placeholder Text abu-abu sebagai hint atau petunjuk dari suatu inputan
Min and max Nilai(int) minimal dan maksimal dari suatu inputan
Height and width Merubah lebar dan tinggi suatu inputan

Perbedaan antara inline dan inline-block

Hallo guys, ketemu kita dalam pembelajaran CSS. materi kali ini adalah materi dasar mengenai perbedaan property display : inline-block, dengan display:inline. langsung saja, simak penjelasan dibawah ini :

  1. inline elemen tidak memiliki pengaturan properti width (lebar) dan height (tinggi). dia akan selalu otomatis mengikuti content yang kita isi didalamnya. sehingga meskipun kita set width dan heightnya pada elemen ini. itu tidak akan berpengaruh, sedangkan inline-block bisa kita set sesuka hati.
  2. inline elemen tidak memiliki pengaturan untuk properti margin dan padding (hanya atas dan bawah saja), sehingga jika kita memberikan margin-top atau margin-bottom pada elemen tersebut, itu tidak akan berpengaruh sama sekali. sedangkan inline-block bisa.
  3. baik inline maupun inline block, tidak membuat garis baru dan menjadikan elemen ini bersebelahan dengan elemen sebelumnya.

untuk memahami lebih detail mengenai perbedaan inline dan inline-block, mari kita lihat contoh dibawah ini.

silakan rubah property display pada kedua CSS diatas dengan inline dan inline-block, lalu simpulkan sendiri jawabannya yah. kalo ada pertanyaan silakan tulis di kolom komentar ^_^

Thanks

Raw Materi “Dasar Pemrograman Web untuk Pemula”

Berikut ini, adalah raw materi “Dasar Pemrograman Web untuk Pemula” yang akan saya tulis didalam blog ini. semoga bermanfaat untuk rekan-rekan developer yang baru belajar.

Note : Penulisan artikel ini tidak terstruktur, saya buat dan sesuaikan dengan materi pengajaran yang akan saya berikan di kelas. jadi saya mohon maaf karena masih ada beberapa materi yang belum tersedia, Terima kasih.
(materi yang sudah tersedia, ditandai dengan hyperlink bergaris bawah)

Pengenalan HTML
Pengertian HTML
Perkembangan HTML
– Browser
– Editor

Persiapan Belajar
– Pengenalan git
– Dasar-dasar git
– Penggunaan Sublime

Dasar HTML
Elemen/Tag
Attribute
Headings
Paragraph
Formatting text
List
Hyperlink
Images
– Studi Kasus

CSS
Pengertian CSS
Inline CSS
Internal CSS
External CSS
Selector CSS dengan menggunakan ID, Clas, Tag
CSS Selector lanjutan
CSS Selector lanjutan bagian 2
Inline & Block Element
Perbedaan block dan inline pada elemen HTML
CSS Box Model
– Studi Kasus

Table
Pengertian Baris dan Kolom
Penggabungan Cell
Penerapan CSS dalam Table
– Studi Kasus

Form
– Pengertian Form
– Elemen-elemen Form
– Form Attribute
– Penerapan CSS dalam Form
– Studi Kasus pembuatan facebook registration page

Media
– Audio/Video
– Canvas
– SVG
– Studi Kasus

layouting
– Pengenalan Layout dan Grid
– HTML Table
– CSS Float Property
– Studi Kasus 1
– CSS framework
– CSS flexbox
– Studi Kasus 2

CSS Responsive
– Pengertian Responsive Webdesign
– Viewport dan Grid View
– Media Queries
– Studi Kasus

Pembuatan template
– Pengenalan Software Design
– Design & Slicing
– Menulis Kode HTML
– Menulis Kode CSS
– CSS Responsive
– Publish to git page

CSS Trick
– Dropdown Menu
– Penggunaan Google Font
– Membuat Background FullWidth
– Image Sprite