Novietasarie blog

Rabu, 12 September 2018

MOTIVASI MBAH SURO DHEMIT

                         Assalamu'alaikum Wr.Wb

A. Pendahuluan
        Hay gaes sekarang saya akan membahas tentang yang di bilang sama MBAH SURO DHEMIT tentang MOTIVASI.

B. Latar Belakang
        Mbah suro selaku pembimbing prakrin mempunyai wewenang untuk mendidik peserta didiknya.

C. Maksud dan Tujuan
       Memberikan inspirasi dan menekankan untuk berpribadi diri sendiri.

D. Hasil yang Diharapkan
        Agar selanjutnya bisa mengerti kemana arah dan tujuan, dan dapat meraih angan yang telah diharapkan.

E. Pembahasan
       Motivasi adalah proses yang menjelaskan intensitas, arah, dan ketekunan seorang individu untuk mencapai tujuannya. Tiga elemen utama dalam definisi ini diantaranya adalah intensitas, arah, dan ketekunan.
Mbah Suro Dhemit adalah Pendiri BLC TELKOM – KPLI KLATEN sekaligus pembimbing prakrin di BLC TELKOM – KPLI KLATEN
      Banyak sekali perumpamaan sederhana yang saya dapatkan dari Mbah Suro. Ternyata belum tentu yang sederhana itu biasa.
Dan pada hari ini saya dapat menangkap 3 kalimat dari Mbah suro
“Kalo ingin pinter jadilah manusia”
“Hidup itu Proses”
“Dan dewasa adalah pilihan”
Dan masih banyak kata-kata Motivasi dari Mbah Suro yang sangat menginspirasi saya.
Kata – kata yang sering di ucapkan oleh mbah suro adalah “Memanusiakan manusia itu tidak gampang”.

F. Hasil yang didapatkan

Sedikit termotivasi.

G. Temuan Permasalahan

Belum paham tentang dasar jurusan.

H. Kesimpulan
Dari sini saya dapat mengambil kesimpulan, bahwa jika ada motivasi yang kuat maka akan menimbulkan tekat yang kuat pula.

I. Penutup
Semoga teman-teman bisa ber motivas dan bisa menjadi diri sendiri itu aja yang saya bisa sampaikan tenang motivasi. Terima Kasih.

Wassalamu'alaikum Wr.Wb

Senin, 10 September 2018

Materi tentang PHP (Hypertext Proccesor)

PHP (Hypertext Proccesor)

Assalamu'alaikum Wr.Wb

A. PENDAHULUAN
Hay teman bertemu lagi dengan blog pribadi saya. Ini saya akan shering tentang APA ITU PHP???.

B. LATAR BELAKANG
Dibuat dengan menggunakan editor teks atau editor HTML. HTML adalah bahasa pemrograman dasar yang harus dikuasai jika ingin membuat suatu website.

C. TUJUAN
Agar pengguna internet pada khususnya dapat lebih mengembangkan potensi diri, dan tidak hanya sbagai pengguna saja tetapi dapat berperan sebagai pembuat suatu alamat web(Homepage) yang dinamis.

D. PEMBAHASAN
PHP adalah script untuk pemrograman script web server-side, script yang membuat dokumen HTML secara on the fly, dokumen HTML yang dihasilkan dari suatu aplikasi bukan dokumen HTML yang dibuat dengan menggunakan editor teks atau editor HTML. HTML adalah bahasa pemrograman dasar yang harus dikuasai jika ingin membuat suatu website. Untuk mengetahui lebih lanjut tentang HTML, simak artikel di bawah ini.

Dengan menggunakan PHP maka maintenance suatu situs web menjadi lebih mudah. Proses update data dapat dilakukan dengan menggunakan aplikasi yang dibuat dengan menggunakan script PHP.

PHP/FI merupakan nama awal dari PHP. PHP merupakan singkatan dari Personal Home Page dan FI adalah singkatan dari Form Interface. Dibuat pertama kali oleh Rasmus Lerdoff. PHP, awalnya merupakan program CGI yang dikhususkan untuk menerima input melalui form yang ditampilkan dalam browser web.

Software ini disebarkan dan dilisensikan sebagai perangkat lunak Open Source. PHP secara resmi merupakan kependekan dari PHP: HyperText Preprocessor, merupakan bahasa script server-side yang disisipkan pada HTML.

Berikut ini adalah contoh yang umum digunakan untuk menjelaskan tentang PHP sebagai script yang disisipkan (embedded script) dalam dokumen HTML.

<html>
<head>
<title>Contoh</title>
</head>
<body>
<?php
echo “Hai, saya dari script PHP!”;
?>
</body>
</html>

Contoh script PHP di atas berbeda dengan script yang dituliskan dengan bahasa lain seperti C atau Perl. Pemrograman tidak harus menuliskan semua dokumen HTML sebagai bagian dari keluaran dari script PHP, cukup menuliskan bagian mana saja yang berupa tag HTML dan bagian mana yang harus ditulis atau dihasilkan dari program script PHP. Kode/script PHP diapit dengan menggunakan tag awal dan tag akhir yang khusus, yang memungkinkan pemrograman untuk masuk dan keluar dari mode script PHP.

E. KESIMPULAN
Semoga teman-teman bisa mencobanya dan mempraktekkannya.

F. PENUTUP
Sekian dari saya semoga bermanfaat. Trima Kasih

Wassalamu'alaikum Wr.Wb

Kamis, 06 September 2018

[Tutorial] Pengertian GitLab Dan Tutorial Cara Membuat Project GitLab Dengan Mudah

Assalamu'alaikum Wr.Wb

A. PENDAHULUAN
          Halo temen-temen... Nah guys kali ini saya akan membagi tutorial tentang "Cara Membuat Projek di GitLab".... Sebelum masuk ke tutorial saya akan menjelaskan apa pengertian dari gitlab...

B. LATAR BELAKANG
   Lebih dari 1.400 proyek open source yang telah berkontribusi dari berbagi organisasi yaitu IBM,sony,nasa.

C. MAKSUD dan TUJUAN
        Mendapatkan upgrade Bootstrap dari versi 2 ke versi 3, sehingga tampilan responsive-nya semakin matang dan lebih segar dari sebelumnya. Selain itu, versi 6.5.0 juga memperkenalkan fasilitas comment dengan AJAX, kemampuan mengubah penanggungjawab “issue” dan milestone sebuah repo.

D. PEMBAHASAN
GitLab adalah sebuah manajer repositori Git berbasis web dengan fitur wiki dan pelacakan masalah, menggunakan lisensi sumber terbuka, dikembangkan oleh GitLab Inc. Perangkat lunak ini ditulis oleh Dmitriy Zaporozhets dan Valery Sizov... Mereka berdua berasal dari Ukraina....

sebuah software pengelola repository git yang cepat,aman dan handal. Ynag di tuliskan dalam Ruby on rails dan gitolie.

Gimana....?? Sudah paham belum apa itu GitLab?? Pasti sudah kan?? Hehehe 😀😀

Oke, Langsung saja kita masuk Ke tutorial...

Membuat Project Pertama di GitLab

Pertama

Kalian sudah bikin akun GitLab nya belum.... Kalo belum kalian bisa daftar di sini....

Daftar Gitlab

Ini adalah halaman ketika Daftar GitLab

Kedua

Setelah kalian daftar... Langsung login saja ke GitLab... Dan ini adalah tampilan Home GitLab... Lalu langsung saja tekan tombol "New Project"

Ketiga

Setelah klik tombol "New Project" kalian akan masuk ke halaman ini.. disini anda di minta untuk memberi nama projek anda... Sebagai contoh, Saya akan memberi nama project saya dengan "LatihanPertamaKu".... Kalau kalian ingin memberi deskripsi pada project anda silahkan saja...

Lalu Tekan tombol "Create Project"

Keempat

Setelah kalian membuat project baru..... akan muncul tampilan project anda seperti ini

E. KESIMPULAN
          Mungkin cukup sekian yang bisa saya sampaikan pada hari ini....

F. PENUTUP
          Semoga bisa bermanfaat bagi saya dan kita semua Amin... Apabila ada kesalahan kata mohon di maafkan... Karena kesalahan itu datang nya dari Syaitan dan Kebaikan itu datang nya dari Allah Ta'ala... Sekaian Dari saya

                       Wassalamu'alaikum Wr.Wb

Rabu, 05 September 2018

Tutorial CI (Continuous-Integration)

Tutorial CI (Continuous-Integration)

ASSALAMU'ALAIKUM Wr.Wb

A.PENDAULUAN
Bertemu lagi dengan saya.Kali ini saya akan membahas tentang CI ( Continuous Integration ) atau bisa disebut juga integrasi berkelanjutan.

B.LATAR BELAKANG
       Ingin mengetahui tentang CI dan Fungsinya untuk apa.

C.MAKSUD DAN TUJUAN
      Agar kita bisa memahaminya dan mengetahui fungsi dari CI dan Pengertiannya.

D.PEMBAHASAN
     Continuous Integration, untuk selanjutnya kita sebut CI saja, merupakan salah satu kegiatan untuk meningkatkan produktivitas dalam pengembangan aplikasi di mana seluruh hasil kerja (source code) dari masing-masing developer digabungkan (push) ke dalam satu wadah (server repository source code). Bisa sekali sehari, bisa juga beberapa kali dalam sehari. Setiap penggabungan source code akan diverifikasi secara otomatis oleh server CI, yang memungkinkan tim untuk mendeteksi secara dini jika ada masalah/konflik/error pada saat penggabungan source code.
Setelah penggabungan hasil kerja (source code) selesai, server CI otomatis akan melakukan proses build untuk memastikan tidak ada kode yang merusak/membuat proses build gagal. Jadi semakin cepat kegagalan build ini diketahui semakin cepat pula kita meresponnya. Dan jika proses build-nya berhasil akan dilanjutkan dengan proses deploy. Selain itu server CI juga bisa dikonfigurasi untuk melakukan proses lain seperti menjalankan unit testing, integration testing dan testing otomatis lainya
Sebagai .NET developer kita sudah biasa melakukan proses build dengan menekan tombol F5 (Start Debugging) atau Ctrl+F5 (Start Without Debugging) baik pada waktu development atau perbaikan bug. Sedangkan untuk contoh deploy anggap saja seperti kita membuat paket installer yang akan didistribusikan ke komputer/server klien. Nah dengan menggunakan CI semua proses ini bisa dilakukan secara otomatis dan terpusat, sehingga kita mempunyai arsip hasil build dan deploy dari waktu ke waktu. Jadi untuk mencari file setup/paket installer terakhir enggak usah lagi nanya ke developer karena bisa langsung kita download dari server CI-nya.
Proses build ini selain bisa dibuat otomatis setiap kita mem-push source code ke server repository bisa juga kita buatkan jadwalnya, misal pas jam makan siang atau jam pulang kantor. Jadi di kantor dibuat kesepakatan/aturan klo ada yang merusak build pas jam makan siang enggak boleh makan siang sampai proses build-nya berhasil atau yang merusak build pas jam pulang kantor enggak boleh pulang sampai proses build-nya berhasil :-D
Jadi dengan menggunakan CI, alur kerja kita lebih kurang seperti berikut :

Menulis kode, build dan tes di komputer masing-masing (seperti biasa).
Commit dan push kode ke server repository/source control seperti GIT atau SVN. Di masing-masing repository kita pasang hook script untuk memanggil job/project yang sudah kita buat dan konfigurasi di server CI.
Server CI akan meng-clone repository kemudian melakukan build, menjalankan tes tes otomatis (jika ada) dan deploy secara otomatis. Jika buildnya gagal ulangi lagi langkah pertama

E.HASIL YANG DIDAPAT
          Kita jadi mengetahui apa yang dimaksud dengan CI.

F.KESIMPULAN
        Kesimpulannya yaitu CI itu integrasi berkelanjutan yang berfungsi sebagai pencegah masalah integrasi.

G.PENUTUP
   Sekian dari saya semoga bermanfaat untuk kita semua.

Wassalamu'alaikum Wr.Wb

Selasa, 04 September 2018

CSS: CSS3 TRANSISI

Assalamu'alaikum Wr.Wb

A. PENDAHULUAN
      Kali ini saya akan membahas tentang CSS3 TRANSISI apa si yang di maksud dengan CSS3 TRANSISI .

B. LATAR BELAKANG
   Dalam tutorial ini kita akan mengeksplorasi transformasi dan transisi CSS dengan menciptakan sesuatu yang lebih berguna.

C. TUJUAN dan MAKSUD
   Akan membangun satu HTML statis yang akan memanfaatkan transformasi dan transisi dalam slider, ditambah beberapa efek hover menarik.

D. PEMBAHASAN
   Ada dua hal yang harus kita perhatikan agar CSS3 Transisi dapat bekerja dengan baik, yaitu kita harus menentukan properti css dan menentukan durasi efek. Jika nilai durasi tidak ditentukan, maka efek transisi tidak akan berpengaruh atau tidak bekerja, karena nilainya masih default yaitu "0".
Dan cara kerjanya kita menggunakan fitur mouse-over, yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat. Dan ketika pointer mouse keluar dari atas elemen, maka bentuk elemen kembali seperti semula.

Elemen yang menggunakan CSS3 Transisi

Berikut kode CSS3 dari contoh diatas :

Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.

Berikut hasilnya :

Efek transisi melebar kesamping sekaligus kebawah

berikut hasilnya :

Efek transisi melebar kesamping sekaligus tinggi menyempit

Berikut contoh lain :

Berikut hasilnya :

Efek transisi membesar dan berputar

Selamat mencoba dan Semoga bermanfaat....

E. KESIMPULAN
Hasilnya bisa di lihat sendiri dengan memcoba membuat CSS3 TRANSISI sendiri, Semoga berhasil.

F. PENUTUP
Jangan lupa luangkan waktu untuk beri komentar ya......Terima kasih.

Wassalamu'alaikm Wr.Wb

Senin, 03 September 2018

Membuat Layout Kalender dengan HTML dan CSS

                             Assalamu'alaikum Wr.Wb

A. PENDAHULUAN
Halo teman-teman, apa kabar semuanya. Pastinya baik dan sehat selalu ya, berjumpa lagi dengan saya. Nah pada tutoria kali ini kita akan Membuat Layout Kalender dengan HTML dan CSS sederhana

B. LATAR BELAKANG
   Ingin mengetahui cara membuat Layout Kalender dengan HTML dan CSS.

C. TUJUAN dan MAKSUD
   Agar bisa memahaminya tentang Layout Kalender itu sendiri.

D. PEMBAHASAN
Sekarang kita akan membuat kalender tahun 2016.
Pertama-tama siapkan code editornya terlebih dahulu, saya di sini memakai sublime text. Setelah itu copy script di bawah ini

<!DOCTYPE html>
<html>
<head>
 <title>Layout Kalender</title>
</head>
<body>
<div class="container">
<h1>Desember</h1>
 <table>
  <tr>
   <th>Minggu</th>
   <th>Senin</th>
   <th>Selasa</th>
   <th>Rabu</th>
   <th>Kamis</th>
   <th>Jumat</th>
   <th>Sabtu</th>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
  <tr>
   <td id="red">4</td>
   <td>5</td>
   <td>6</td>
   <td>7</td>
   <td>8</td>
   <td>9</td>
   <td>10</td>
  </tr>
  <tr>
   <td id="red">11</td>
   <td>12</td>
   <td>13</td>
   <td>14</td>
   <td>15</td>
   <td>16</td>
   <td>17</td>
  </tr>
  <tr>
   <td id="red">18</td>
   <td>19</td>
   <td>20</td>
   <td>21</td>
   <td>22</td>
   <td>23</td>
   <td>24</td>
  </tr>
  <tr>
   <td id="red">25</td>
   <td>26</td>
   <td>27</td>
   <td>28</td>
   <td>29</td>
   <td>30</td>
   <td>31</td>
  </tr>
 </table>
</div>
</body>
</html>

Kemudian pastekan script di atas ini pada code editornya, lalu save dengan nama kelender.html dan buka pada browsernya maka akan menghasilkan output seperti gambar di bawah ini

Membuat Layout Kalender dengan HTML dan CSS

Langkah berikutnya kita berikan css nya untuk membuat layout kalender mirip seperti demo gambar di atas, teman-teman bisa copy scriptnya di bawah ini

<style type="text/css">
 .container{width: 400px; margin:auto;}
 th{padding: 10px; background-color: orange; color:white; font-family: calibri}
 td{text-align: center; padding: 10px 0; background-color: #fbf7f7}
 #red{color:red;}
 h1{text-align: center; font-family: calibri}
</style>

Pastekan di dalam tag <head>, jika sudah save dan refresh pada browsernya. Layout kalender sederhana sudah berhasil di buat dan rapi

Pastekan di dalam tag , jika sudah save dan refresh pada browsernya. Layout kalender sederhana sudah berhasil di buat dan rapi

Sangat mudah bukan, oke untuk teman-teman bisa di pahami ya dari contoh diatas. Nah untuk latihan coba teman-teman buat layout sendiri dirumah yaitu layout kalender full 12 bulan tahun 2017 dengan meniru dari contoh diatas.

Mungkin sekian dulu di artikel kali ini tentang Membuat Layout Kalender dengan HTML dan CSS , semoga bisa menjadi bahan latihan untuk membuat layout dengan HTML dan CSS khususnya teman-teman yang saat ini baru terjun mempelajari HTML dan CSS. Terimakasih dan sampai jumpa.

E. KESIMPUAN

Semoga teman-teman bisa membuat kalender sendiri.

F. PENUTUP

Sekian penjelasan di atas semoga bermanfaat. Terima Kasih

Wassalamu'alaikum Wr.Wb

Sabtu, 01 September 2018

CSS Desain Web Responsif

Assaamu'alaikum Wr.Wb

A. PENDAHULUAN
Kali ini saya akan shering tentang Desain Web Responsif Viewport.

B. LATAR BELAKANG
Desain Web akan lebih kecil pada ponsel daripada di layar komputer.

C. TUJUAN
Untuk memperbaiki browser pada perangkat-perangkat diperkecil seluruh halaman web agar sesuai layar.

D. PEMBAHASAN
Apa itu Viewport?

viewport adalah daerah terlihat pengguna dari halaman web.

Sebelum tablet dan ponsel, halaman web yang dirancang hanya untuk layar komputer, dan hal itu biasa untuk halaman web memiliki desain statis dan ukuran tetap.

Kemudian, ketika kita mulai berselancar di internet menggunakan tablet dan ponsel, ukuran tetap halaman web terlalu besar untuk muat viewport. Untuk memperbaiki ini, browser pada perangkat-perangkat diperkecil seluruh halaman web agar sesuai layar.

Setting Viewport

Adalah metode untuk membiarkan web desainer mengambil kendali atas viewport, melalui `<meta>`tag.

Kita harus mencakup sebagai berikut <meta> elemen viewport di semua halaman web Anda:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sebuah <meta> elemen viewport memberikan petunjuk browser pada bagaimana mengontrol dimensi halaman dan scaling.

The width=device-width bagian set lebar halaman untuk mengikuti layar-lebar perangkat (yang akan bervariasi tergantung pada perangkat).

The initial-scale=1.0 bagian menetapkan tingkat zoom awal saat halaman pertama dimuat oleh browser.

Berikut adalah contoh dari halaman web tanpa meta tag viewport, dan halaman web yang sama dengan meta tag viewport:

Tip: Jika Anda browsing halaman ini dengan ponsel atau tablet, Anda dapat mengklik dua link untuk melihat perbedaannya.

Ukuran Konten untuk Viewport The

Pengguna digunakan untuk menggulir situs vertikal pada kedua desktop dan perangkat mobile - tapi tidak horizontal!

Jadi, jika pengguna dipaksa untuk menggulir secara horizontal, atau zoom out, untuk melihat halaman web secara keseluruhan itu menghasilkan pengalaman pengguna yang buruk.

Beberapa aturan tambahan untuk mengikuti:

1. Jangan menggunakan elemen lebar tetap besar - Sebagai contoh, jika gambar ditampilkan pada lebar lebar dari viewport dapat menyebabkan viewport untuk menggulir secara horizontal. Ingatlah untuk menyesuaikan konten ini cocok dalam lebar viewport.

2. Jangan biarkan konten mengandalkan lebar viewport tertentu untuk membuat baik - Sejak dimensi layar dan lebar dalam pixel CSS bervariasi antara perangkat, konten tidak harus bergantung pada lebar viewport tertentu untuk membuat baik.

3. Gunakan CSS permintaan media untuk menerapkan gaya yang berbeda untuk layar kecil dan besar - Mengatur lebar CSS besar mutlak untuk elemen halaman, akan menyebabkan elemen yang terlalu lebar untuk viewport pada perangkat yang lebih kecil. Sebaliknya, pertimbangkan untuk menggunakan nilai lebar relatif, seperti lebar: 100%. Juga, hati-hati menggunakan nilai positioning besar mutlak. Hal itu dapat menyebabkan elemen yang berada di luar viewport pada perangkat kecil.

E. KESIMPULAN
Semoga materi di atas teman-teman bisa memahaminya.

F. REFERENSI
   http://www.w3im.com/id/css/css_rwd_viewport.html

G. PENUTUP
  Sekian dari saya semoga bermanfaat dan sampai jumpa lagi di postingan selanjutnya (",")

   Wassalamu'alaikum Wr.Wb