Pada hari ini Saya dengan Mbah Suro serta sebagian teman-teman berangkat ke kantor TElKOM Klaten, untuk mensurvey rak server yang nantinya rak tersebut akan di pindahkan ke BLC. Dan Alhamdulillah kami di beri peluang sama Pak Daru ( Kepala telkom klaten ) untuk memasarkan produk produk yang dimiliki oleh Pak Daru, dan kami di fasilitasi Studio yang bisa di gunakan untuk membuat content nantinya. Saya sangat berterimakasih dengan Pak Daru dan Mbah Suro karena sudah memberikan peluang bagi saya dan temen temen untuk menggarap sebuah studio dan memasarkan produk Pak daru.
A. PENDAHULUAN
- Pengertian
Pada hari ini saya di tugaskan Mbah Suro untuk menjelaskan tentang cara bekerja dari mulai Employability Skills, Etika Komunikasi, K3, Manajemen Proyek.
- Latar belakang masalah
Di karenakan anak baru ini masih belum mengerti tentang cara bekerja, budaya kerja, Employability skills, K3, dan manajemen Proyek. Maka dari itu saya disini yang akan menjelaskan kepada mereka agar nantinya kedepannya mereka akan mengerti dalam mempersiapkan ketika bekerja dan ketika sudah bekerja.
B. MAKSUD DAN TUJUAN
Maksud dari kegiatan ini adalah menjelaskan kepada anak baru yaitu mengenai cara bekerja dari mulai Employability Skills, Etika komunikasi, K3, Dan Manajemen Proyek. Tujuannya yaitu agar mengerti dan bisa beradaptasi dengan cepat bagi anak anak yang baru di BLC TELKOM KLATEN.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Perkenalan diri
- Menjelaskan Employability Skills
- Menjelaskan Etika Komunikasi
- Menjelaskan tentang K3
- Menjelaskan tentang Manajemen Proyek
D. TARGET DAN HASIL YANG DIHARAPKAN
Anak anak ini dapat memahami apa yang saya jelaskan dan dapat beradaptasi di lingkungan yang baru.
E. METODE PELAKSANAAN
- Perkenalan
- Menjelaskan
- Sesi tanya jawab
F. ALAT DAN BAHAN
- Laptop
- Monitor Tv
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
- Pertama kami yang sudah duluan yang ada di BLC saling memperkenalkan dirinya masing masing, dari mulai nama, asal sekolah, jurusan, dan lain sebagainya
- Setelah itu saya menjelaskan tentang Employability Skills, dan ketika sudah lanjut ke dalam materi Etika Komunikasi, K3, dan manajemen proyek.
I. TEMUAN PERMASALAHAN
Masih ada anak yang pasif dan ada beberapa anak yang tidak fokus.
J. KESIMPULAN YANG DIDAPAT
Ketika mengajar/menjelaskan tidak semudah yang saya bayangkan, dikarenakan ada beberapa anak yang tidak fokus dan pasif.
K. REFERENSI
- Employability Skills.jpeg
- E-book Etika_Komunikasi.pdf
- wikipedia K3(keselamatan, kesehatan dan Kerja)
- E-book Manajemen Proyek bidang IT.pdf
A. PENDAHULUAN
- Pengertian
Di dalam javascript, event adalah suatu hal yang bisa dilakukan user ke sebuah element HTML, misalnya di click, double click, mouseover (cursor mouse berada diatas element), mouseout (cursor mouse sudah keluar dari atas element), dll.
- Latar belakang masalah
Di karenakan belum mengerti event pada Jquery dan cara menggunakannya.
B. MAKSUD DAN TUJUAN
Memahami dan mempraktikkan Event pada Jquery dan tujuannya adalah dapat menjalankan Efek efek yang ada pada Event Jquery.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Pengertian Jquery
- Cara menggunakannya
D. TARGET DAN HASIL YANG DIHARAPAKAN
Dapat mengerti dan memahami serta dapat mempraktikkan langsung event event pada Jquery.
E. METODE PELAKSANAAN
- Membaca referensi
- Mempraktikkannya
F. ALAT DAN BAHAN
- Laptop
- Text editor
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
Di dalam javascript, event adalah suatu hal yang bisa dilakukan user ke sebuah element HTML, misalnya di click, double click, mouseover (cursor mouse berada diatas element), mouseout (cursor mouse sudah keluar dari atas element), dll.
Disini saya akan mencontohkan semisal mau membuat pesan alert() ketika sebuah paragraf di klik, dengan javascript ini bisa dilakukan dengan kode program seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>AdelwinNL</title>
</head>
<body>
<p id="paragraf" onclick="alert('Halaman ini akan memunculkan popup')">
</p>
</body>
</html>
atribut onclick dalam tag <p> diatas adalah sebuah event. Ketika di klik, akan tampil pesan popup: 'Halaman ini akan memunculkan popup'. Hasil ini didapat dengan fungsi alert()Javascript.
Selain onclick, didalam Javascript juga banyak event-event yang lain, seperti ondblclick, onmouseover, onmouseout, dll.
Penulisan seperti sangat praktis namun tidak "rapi". Bagaimana cara memisahkannya?
Didalam javascript, ini bisa di lakukan menggunakan fungsi addEventListener(). Hasil yang sama bisa dihasilkan dengan kode program berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Jquery AdelwinNL</title>
<meta charset="UTF-8">
<script type="text/javascript" src=
"jquery.js"></script>
<script>
window.onload = funciton()
{
document.getElementById("paragraf").
addEventListener("click", function(){alert ('Halaman ini akan memunculkan popup')}
}
</script>
</head>
<body>
<p id="paragraf">
Klik disini
</p>
</body>
</html>
Sekarang, didalam bagian <body> tidak ada kode Javascript apapun. Event click saya tambahkan dengan fungsi addEventListener(). Nah itu ketika anda menggunakan javascript disini saya akan bandingkan dengan kode jquery apakah nanti kalian akan bisa memilih manakan yang lebih simple!!.
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan Jquery</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#paragraf').click(function() {
alert('Halaman ini akan memunculkan popup');
});
});
</script>
</head>
<body>
<p id="paragraf">
Silahkan klik saya
</p>
</body>
</html>
Perhatikan bagaimana Jquery memudahkan penulisan event ini, sangat sederhana kan?!!. Format penyulisannya adalah :
$("jQuery_Selector").jQuery_Event(function() { ...isi event disini... })
Selain event click, masih banyak lagi event event yang di sediakan dari jquery tersendiri, kalian bisa cek event event nya di website resminnya langsung yaitu di : https://jquery.com
Disini saya akan mencontohkan beberapa event javascript yang dibuat dengan Jquery :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery</title>
<style>
#paragraf {
width:600px;
height:80px;
background-color:tomato;
line-height:80px;
text-align:center;
font-size:30px;
}
</style>
<script src="adelwin-wesite/jquery/jquery.js"></script>
<script>
$( document ).ready(function() {
$( "#paragraf" ).click(function() {
$( "#paragraf" ).css( "color", "green" );
});
$( "#paragraf" ).mouseover(function() {
$( "#paragraf" ).css( "background-color", "yellow" );
});
$( "#paragraf" ).mouseout(function() {
$( "#paragraf" ).css( "background-color", "blue" );
});
$( "#paragraf" ).dblclick(function() {
$( "#paragraf" ).css( "border", "solid 2px black" );
});
});
</script>
</head>
<body>
<center>
<p id="paragraf">
Mempelajari Jquery Event
</center>
</p>
</body>
</html>
Maka hasilnya akan seperti ini :
jika kalian mengarahkan mouse/crosor kalian ke elementnya maka akan berubah warna menjadi kuning, dan ketika anda meninggalkan mouse dari situ nanti akan berubah warna menjadi biru.
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
Penulisan kodenya salah saat membuat sebuah mouseout, hingga ketika crushor Saya ketika di keluar dari element tetep seperti biasa ngga bisa menjadi biru
Solusi :
Dengan menambahkan ";" setelah kurung penutup
J. KESIMPULAN YANG DIDAPAT
Dengan event ini kalian bisa memberi efek efek animasi yang sudah di sediakan oleh pihak jquery dari mulai hide(), click(), fadeit(), css() dan lain sebagainya, untuk event selengkapnya kalian bisa cari di website resminya langsung yaitu https://jquery.com
K. REFERENSI
- Jquery.com
A. PENDAHULUAN
- Pengertian
Selector adalah bagian penting pada perintah Jquery. Selector adalah perintah untuk mencari atau memilih elemen HTML. Dari hasil perintah selector kita akan mendapatkan akses kepada elemen HTML tersebut. Kita juga dapat melakukan suatu aksi kepada elemen HTML tersebut.
- Latar belakang masalah
Belum mengerti apa itu selector pada Jqeury, Fungsi, serta cara kerjanya.
B. MAKSUD DAN TUJUAN
Memahami dan mempraktikkan selector pada Jquery dan tujuannya yaitu bisa mengatur elemen HTML dengan menggunakan Jquery.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Pengertian Selector jquery
- Selector Tag
- Selector id
- Selector class
D. TARGET DAN HASIL YANG DIHARAPKAN
- Dapat memahami dan mempraktikkan Selector pada jquery
E. METODE PELAKSANAAN
- Mencari referensi
- Membaca dan memahami,
- Mempraktikkannya
F. ALAT DAN BAHAN
- Laptop
- Koneksi internet
- Text Editor
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
Selector adalah bagian penting pada perintah Jquery. Selector adalah perintah untuk mencari atau memilih elemen HTML. Dari hasil perintah selector kita akan mendapatkan akses kepada elemen HTML tersebut. Kita juga dapat melakukan suatu aksi kepada elemen HTML tersebut.
Selector dapat memilih elemen HTML berdasarkan atribut name, id, class, tipe elemen atau nama tag tersebut, nilai dari atribut dan lain sebagainya. Perintah selector dimulai dengan penulisan $().
- Selector Tag :
selector tag mencari elemen HTML berdasarkan jenis atau nama tag. Contoh di bawah ini mencari semua tag p (elemen paragraf).
$("p")
Contoh dibawah ini memperlihatkan ketika suatu tombol di klik maka semua tag p akan hilang.
$(document).ready(function() {$("button").click(function() {$("p").hide();)};});
jalankan perintah di atas
- Selector ID
selector id mencari elemen HTML berdasarkan nilai atribut id. Contoh di bawah ini mencari tag dengan atribut id bernilai test.
$("#test")
Karena nilai atribut id adalah unik untuk setiap elemen atau tag maka selector id hanya akan dapat mencari satu elemen saja.
Contoh dibawah ini memperlihatkan ketika suatu tombol dengan atribut id bernilai test akan hilang,
$(document).ready(function(){$("button").click(function(){$("#test").hide();});})
Jalankan contoh
- Selector Class
selector class mencari elemen HTML berdasarkan nilai atribut class. Contoh di bawah ini mencari tag dengan atribut class bernilai test.
$(".test")
contoh dibawah ini memperlihatkan ketika suatu tombol di klik maka tag dengan atribut class bernilai test akan hilang.
$(document).ready(function(){$("button").click(function(){$(".test").hide();});});
Jalankan contoh
I. KESIMPULAN YANG DIDAPAT
Dengan adanya selector ini dalam jquey yaitu berfungsi sebagai pemanggilan element html yang akan di atur/dirubah.
J. REFERENSI
- https://nextgen.co.id/
A. PENDAHULUAN
- Pengertian
Jquery adalah sebuah library framework javascript. jadi singkat ceritanya Jquery merupakan pemgembangan dari javascript yang sengaja di buat untuk memudahkan kita untuk mendevelop sebuah website dan ingin membuat efek-efek dan keperluan penggunaan javascript lainnya di dalam pengembangan sebuah website.
- Latar belakang masalah
Belum ngerti apa itu jquery fungsi dan cara kerjanya.
B. MAKSUD DAN TUJUAN
Mengetahui Jquery, kelebihan, cara menggunakannya dan tujuannya yaitu agar lebih mudah dan simple untuk penulisannya.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Pengertian Jquery
- Kelebihan Jquery
- Cara menggunakan Jquery
- Menggunakan Jquery secara offline
- Menggunakan Jquery secara online
D. TARGET DAN HASIL YANG DIHARAPKAN
Dapat mengerti dan memahami Jquery, fungsi, dan cara menggunakannya.
E. METODE PELAKSANAAN
- Membaca referensi
F. ALAT DAN BAHAN
- Laptop
- Koneksi internet
G. TARGET WAKTU
08.00 -16.00
H. TAHAPAN PELAKSANAAN
Jquery adalah sebuah library framework javascript. jadi singkat ceritanya Jquery merupakan pemgembangan dari javascript yang sengaja di buat untuk memudahkan kita untuk mendevelop sebuah website dan ingin membuat efek-efek dan keperluan penggunaan javascript lainnya di dalam pengembangan sebuah website.
Kelebihan Jquery
- Lebih mudah di mengerti
- Lebih mudah di gunakan
- Ringan.
- Penulisan syntax yang lebih pendek tetapi sudah memiliki kebergunaan yang besar.
- Free
- Bisa di kembangkan untuk membuat plugin-plugin web lain.
- Cara menggunakan Jquery
Ada dua cara untuk menggunakan Jquery, adapun cara yang bisa di gunakan adalah :
- Menggunakan Jquery secara offline (internal).
Menggunakan jquery secara offline maksudnya adalah dengan cara mendownload file jquery dan kemudian menghubungkan file html atau php dengan file jquery.
- Menguhubungkan Jquery secara online (eksternal).
menggunakan jquery secara online maksudnya adalah menggunakan jquery dengan cara menghubungkan file HTML atau PHP dengan link online langsung dari Jquery
- Cara menghubungkan Jquery kedalam file HTML.
langkah pertama kalian bisa dowbload terlebih dahulu filenya di website resminya yaitu https://jquery.com
langkah kedua anda klik bagian page download, dan setelah itu anda klik bagian : Download the compressed, production jQuery 3.6.0
.jpg)
pada jquery yang saat ini saya pakai terbarunya yaitu versi 3.6.0,
setelah itu kalian copy semua code yang didalamnya, dan kalian bisa membuat folder yang nantinya akan di gunakan jquerynya. setelah membuat folder kalian bisa membuat file berformat .js untuk file yang saya buat kali ini saya namakan jquery.js, dan ketika sudah kalian open file jquery.js nya dan code yang kalian copy tadi paste di situ.
ketika sudah di paste, kalian tinggal save filenya.
untuk cara menghubugkan jquerynya ke dalam file html, bisa menggunakan syntax berikut :
<script type="text/javascript" src="lokasi file jquery anda"></script>
- Cara menghubungkan jquery kedalam file HTML secara online.
Anda bisa menghubungkan langsung secara online dengan cara seperti berikut :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
-
J. KESIMPULAN YANG DIDAPAT
jquery ini sangat simple penulisannya di banding dengan javascript sendiri, dan banyak yang sudah menggunakannya di kalangan programmer.
K. REFERENSI
- https://jquery.com
A. PENDAHULUAN
- Pengertian
Di hari ini saya melanjutkan template yang kemaren, saya menambahkan section lagi yaitu mengenai Hobi saya. di bagian ini nantinya modelnya saya akan menambahkan gambar sesuai dengan hobi saya, dan untuk tata letaknya saya buat sebaris.
- Latar belakang masalah
Di karenakan template yang berada di Part 1 masih sedikit kontennya, maka saya menambahkan lagi yaitu mengenai Hobi saya.
B. MAKSUD DAN TUJUAN
Maksud dari kegiatan ini adalah menambahkan konten template yang saya buat kemaren dengan menambahkan konten Hobi Saya dan tujuan dari kegiatan ini adalah agar nantinya saya dapat mengerti bagaimana untuk membuat website dengan baik.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Menambahkan konten lagi kedalam template kemaren
- Membuat template menggunakan text editor
D. TARGET DAN HASIL YANG DIHARAPKAN
Agar konten template yang saya buat pada part 1 bisa tambah rame lagi.
E. METODE PELAKSANAAN
- Menambahkan konten dengan menggunakan komponen bahasa HTML & CSS
F. ALAT DAN BAHAN
- Laptop
- Text Editor
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
- Pertama saya menambahkan section lagi di bawah pengalaman programming.
- Saya menambahkan garis pada navigasinya pada css dengan menggunakan z-index dan border-bottom.
- Setelah saya menambahkan garis pada navigasinya saya lanjut menambahkan konten lagi yaitu mengenai Hobi Saya pada bagian Bawahnya.
Ini codingan HTML nya yang saya tambahkan mengenai Hobi Saya :
<!--Bagian Hobi--><section id="hobi"><div class="tengah"><div class="kolom"><h2 class="hobiku">Hobi Saya</h2><p>Kegiatan yang saya senangi di luar dunia maya adalah :</p></div><div class="tutorial-list"><div class="kotak-list"><img src="https://img.freepik.com/free-vector/young-man-sitting-armchair-reading-book_74855-6151.jpg?t=st=1658642982~exp=1658643582~hmac=185ce54c079ad8890cb7d932a46c012e68b7ed1b8d4af0db76bc16cba23f85f3&w=740"><p>Membaca Buku</p></div><div class="kotak-list"><img src="https://img.freepik.com/free-vector/flat-football-players-collection_52683-65665.jpg?t=st=1658642996~exp=1658643596~hmac=9de0a58129e7a6808607281df5423ac6a1add3d55c2fcf8b2d816b21d81eb68f&w=740" width="300"/><p>Bermain Bola</p></div><div class="kotak-list"><img src="https://img.freepik.com/premium-vector/man-dancing-listening-music_23-2148538028.jpg?w=740"/><p>Mendengarkan Musik</p></div></div></section>
Ini adalah codingan CSSnya :
section#hobi {
float: left;
margin-right: 30px;
}
.tutorial-list {
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
}
.kotak-list {
width: 20%;
margin: 0 auto;
}
.kotak-list img {
width: 100%;
height: 80%;
display: inline-flex;
}
.kotak-list p {
font-family: 'comic sans ms';
font-weight: 800;
font-size: 25px;
text-align: center;
color: #355764;
}
footer {
background-color: tomato;
text-align: center;
color: white;
font-family: 'comic sans ms';
height: 20px;
margin-top: 800px;
width: 100%;
}
Hasilnya codingan yang saya tambahakan di atas akan menjadi seperti ini :
Jika kalian ingin melihat hasilnya lebih lanjut kalian bisa cek di sini :
https://adelwinnugroho.github.io/template-03
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
Ada kesalahan ketika ketika membuat display(tata letak) nya menjadi sebaris sejajar, malah saling berdempetan
Solusi :
Saya menambahkan margin-right: 30px;
pada bagian section hobi.
J. KESIMPULAN YANG DIDAPAT
Ketika ingin mengubah posisi konten menjadi sejajar/sebaris, maka kita harus menambahkan margin agar kontennya nanti tidak terjadi tabrakan atau saling berdempetan.
K. REFERENSI
-
A. PENDAHULUAN
- Pengertian
Di hari ini saya membuat halaman layout dengan menggunakan CSS, layout ini sangatlah penting untuk membuat sebuah website, bahkan rata rata sekarang website sudah pasti ada layoutnya.
- Latar belakang masalah
Pentingnya Layout ini untuk membuat struktur sebuah halaman website, maka dari itu saya mempelajari layout ini untuk bisa membuat website sesuai dengan struktur yang sudah di rencanakan.
B. MAKSUD DAN TUJUAN
Maksud dari kegiatan ini adalah mempelajari dan mempraktikkan CSS Layout, dan tujuan dari kegiatan ini adalah sebagai untuk nantinya ketika membuat website bisa menggunaka Layout yang saya pelajari ini.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Membuat struktur dengan menggunakan HTML Senmatik dan CSS
D. TARGET DAN HASIL YANG DIHARAPKAN
Dapat mengerti dan memahami untuk pembuatan Layouting pada HTML Senmatic dan CSS.
E. METODE PELAKSANAAN
- Mencari referensi
- Mempraktikkannya
F. ALAT DAN BAHAN
- Laptop
- Sublime Text
- Koneksi internet
G. TARGET WAKTU
09.30 - 16.00
H. TAHAPAN PELAKSANAAN
- Pertama saya mencari referensi di internet mengenai dengan kata kunci "Membuat Layout dengan menggunakan CSS"
- Setelah itu Saya cari referensi yang nyaman, dan ketika sudah menemukan saya langsung meniru cara pembuatan layoutingnya.
- Saya buka software Sublime Text dan memulai mempraktikkannya, dari mulai membuat komponen HTML nya dan setelah itu CSS nya.
Untuk contoh Layout pada website itu seperti ini :
ini adalah kode yang saya praktikkan untuk membuat layouting tadi :
<!DOCTYPE html><html lang="en"><head><title>Template CSS</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>* {box-sizing: border-box;}body {font-family: Arial, Helvetica, sans-serif;}/* Style the header */header {background-color: darkred;padding: 30px;text-align: center;font-size: 35px;color: white;}/* Create two columns/boxes that floats next to each other */nav {float: left;width: 20%;height: 300px;/* only for demonstration, should be removed */background: darkblue;text-decoration: none;padding: 20px;}/* Style the list inside the menu */nav ul {list-style-type: none;padding: 0;margin: 2px;}nav ul li {margin: 10px;}nav a{color: white;text-decoration: none;}article {float: left;padding: 20px;width: 80%;background-color: #f1f1f1;height: 300px;/* only for demonstration, should be removed */}/* Clear floats after the columns */section:after {content: "";display: table;clear: both;}/* Style the footer */footer {background-color: darkred;padding: 50px;text-align: center;color: white;}/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */@media (max-width: 600px) {nav,article {width: 100%;height: auto;}}</style></head><body><header><h2>Belajar Loyouting</h2></header><section><nav><ul><li><a href="#">Tentang Saya</a></li><li><a href="#">Pengalaman</a></li><li><a href="#">Hobi</a></li></ul></nav><article><h1>Tentang Saya</h1><p>Saya Adelwin Nugroho Liandy bisa di panggil Adelwin/win saya adalah siswa Smk Roudlotul Mubtadiin Balekambang. Saya seorang yang kreatif dan suka mencari alternatif solusi dari berbagai macam persoalan</p><h1>Pengalaman</h1><p>Pengalaman saya di BLC TELKOM KLATEN salah satunya yaitu mengikuti training Cisco, dan alhamdulillah saya lulus dan mendapatkan sertifikat internasional</p><h1>Hobi</h1><p>Hobi saya adalah Membaca buku, Mengetik, Bermain bola</p></article></section><footer><p>Copyraight 2022 By AdelwinNL </p></footer></body></html>
Hasil dari kodingan di atas :
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
-
J. KESIMPULAN YANG DIDAPAT
Layout ini dalam bahasa indonesia yaitu tata letak, ketika membuat sebuah halaman website maka akan di rencanakan terlebih dahulu layoutnya untuk menggambarkan tata letak halaman websitenya seperti apa nantinya yang akan di buat.
