Cara Membuat Running LED dengan Arduino Mega 2560

Bismillahirrahmanirrahim

Assalamu’alaikum warahmatullahi wabarakatuh

Selamat membaca kembali tutorial dari NPmedia, Kali ini NPmedia akan menunjukkan bagaimana cara membuat replika lampu lalulintas atau traficlight Menggunakan LED dan Arduino MEGA 2560.

langsung saja NPmedia tunjukin bagaimana cara membuat replika lampulalulintas atau traficlight menggunakan LED dan Arduino Mega 2560.

Alat dan Bahan

• Software Arduino IDE
• 5 Buah LED 5mm atau LED 3mm
• 5 Buah Resistor 330Ω Ohm
• 6 Buah Kabel Jumper
• 1 Buah Breadboard
• 1 Buah Arduino Mega 2560

Rangkaian 

Keterangan

- Pin GND pada Arduino Mega 2560 dihubungkan pada sisi (+) breadboard atau sisi negatif (-) LED. (lihat gambar).
- Pin 41, 43, 45, 47, 49 pada Arduino Mega 2560 dihubungkan pada resistor.
- Resistor dihubungkan ke sisi positif (+) LED.

Code
Masukkan code dibawah ini ke dalam software Arduino IDE, lalu upload.

Keterangan

1. Fungsi int untuk mendeklarasikan pin.
2. Fungsi void setup () di program arduino adalah semua perintah yang akan di baca sekali.
3. Fungsi void loop () di program arduino adalah semua perintah yang akan di baca berulang-ulang.
4. Fungsi pinMode adalah untuk mengkonfigurasi pin sebagai input atau output.
5. Fungsi digitalWrite adalah untuk memberi nilai HIGH atau LOW ke pin digital .
6. Fungsi HIGH adalah untuk memberi tegangan pada LED.
7. Fungsi LOW adalah untuk tidak memberi tegangan pada LED.
8. Fungsi delay() adalah untuk memberikan jeda atau pause sebelum masuk ke perintah berikutnya. 

NB: semakin kecil delay maka semakin cepat lampu bergilir / berjalan.

Terimakasih, NPmedia harap tutorial ini dapat bermanfaat bagi kalian semua... sampai jumpa di tutorial selanjutnya...

Wassalamu’alaikum warahmatullahi wabarakatuh.

Cara Membuat Lampu Lalulintas dengan Arduino Mega 2560

Bismillahirrahmanirrahim

Assalamu’alaikum warahmatullahi wabarakatuh

Selamat membaca kembali tutorial dari NPmedia, Kali ini NPmedia akan menunjukkan bagaimana cara membuat replika lampu lalulintas atau traficlight Menggunakan LED dan Arduino MEGA 2560.

langsung saja NPmedia tunjukin bagaimana cara membuat replika lampulalulintas atau traficlight menggunakan LED dan Arduino Mega 2560.

Alat dan Bahan

• Software Arduino IDE
• 3 Buah LED 5mm atau LED 3mm (Merah, Kuning, Hijau)
• 3 Buah Resistor 330Ω Ohm
• 4 Buah Kabel Jumper
• 1 Buah Breadboard
• 1 Buah Arduino Mega 2560

Rangkaian 

Keterangan

- Pin GND pada Arduino Mega 2560 dihubungkan pada sisi (+) breadboard atau sisi negatif (-) LED. (lihat gambar).
- Pin 45, 47, 49 pada Arduino Mega 2560 dihubungkan pada resistor.
- Resistor dihubungkan ke sisi positif (+) LED.

Code
Masukkan code dibawah ini ke dalam software Arduino IDE, lalu upload.

Keterangan

1. Fungsi int untuk mendeklarasikan pin.
2. Fungsi void setup () di program arduino adalah semua perintah yang akan di baca sekali.
3. Fungsi void loop () di program arduino adalah semua perintah yang akan di baca berulang-ulang.
4. Fungsi pinMode adalah untuk mengkonfigurasi pin sebagai input atau output.
5. Fungsi digitalWrite adalah untuk memberi nilai HIGH atau LOW ke pin digital .
6. Fungsi HIGH adalah untuk memberi tegangan pada LED.
7. Fungsi LOW adalah untuk tidak memberi tegangan pada LED.
8. Fungsi delay() adalah untuk memberikan jeda atau pause sebelum masuk ke perintah berikutnya. 

Terimakasih, NPmedia harap tutorial ini dapat bermanfaat bagi kalian semua... sampai jumpa di tutorial selanjutnya...

Wassalamu’alaikum warahmatullahi wabarakatuh.

Membuat Lampu Berkedip atau Blink menggunakan Arduino Mega 2560

Bismillahirrahmanirrahim

Assalamu’alaikum warahmatullahi wabarakatuh

Setelah waktu lalu NPmedia menjelaskan cara menyalakan LED menggunakan Arduino Mega 2560, Sekarang saatnya NPmedia akan menunjukkan bagaimana cara membuat LED berkedip atau istilahnya Blink Menggunakan Arduino MEGA 2560.

Karena tutorial sebelumnya NPmedia sudah memberikan pengertian singkat tentang Arduino jadi sekarang langsung saja NPmedia tunjukin bagaimana cara membuat LED berkedip atau blink menggunakan Arduino Mega 2560.

Alat dan Bahan

• Software Arduino IDE
• 1 Buah LED 5mm atau LED 3mm
• 1 Buah Resistor 330Ω Ohm
• 2 Buah Kabel Jumper
• 1 Buah Breadboard
• 1 Buah Arduino Mega 2560

Rangkaian (sama seperti menyalakan LED)

Keterangan

- Pin GND pada Arduino Mega 2560 dihubungkan pada sisi negatif (-) LED.
- Pin 45 pada Arduino Mega 2560 dihubungkan pada resistor.
- Resistor dihubungkan ke sisi positif (+) LED.

Code
Masukkan code dibawah ini ke dalam software Arduino IDE, lalu upload.

Keterangan

1. Fungsi void setup () di program arduino adalah semua perintah yang akan di baca sekali.
2. Fungsi void loop () di program arduino adalah semua perintah yang akan di baca berulang-ulang.
3. Fungsi pinMode adalah untuk mengkonfigurasi pin sebagai input atau output.
4. Fungsi digitalWrite adalah untuk memberi nilai HIGH atau LOW ke pin digital .
5. Fungsi HIGH adalah untuk memberi tegangan pada LED.
6. Fungsi LOW adalah untuk tidak memberi tegangan pada LED.
7. Fungsi delay() adalah untuk memberikan jeda atau pause sebelum masuk ke perintah berikutnya. 

Terimakasih, NPmedia harap tutorial ini dapat bermanfaat bagi kalian semua... sampai jumpa di tutorial selanjutnya...

Wassalamu’alaikum warahmatullahi wabarakatuh.

Cara Menghidupkan Lampu LED Menggunakan Arduino Mega 2560

Bismillahirrahmanirrahim

Assalamu’alaikum warahmatullahi wabarakatuh

Kali ini NPmedia akan menjelaskan bagaimana cara menyalakan LED Menggunakan Arduino MEGA 2560.

Sebelumnya NPmedia akan menjelaskan apa sih arduino itu?.

Jadi, Arduino adalah pengendali mikro single-board yang bersifat open-source, diturunkan dari Wiring platform yang dirancang untuk memudahkan penggunaan elektronik dalam berbagai bidang. Hardwarenya memiliki prosesor Atmel AVR yang softwarenya memiliki bahasa pemrograman sendiri. Saat ini Arduino sangat populer di dikalangan dunia perelektronikan. Banyak pemula yang belajar mengenal robotika dan elektronika menggunakan Arduino karena mudah dipelajari. Tidak hanya pemula, para profesional pun ikut senang mengembangkan aplikasi elektronik menggunakan Arduino. Bahasa yang dipakai dalam Arduino bukan assembler lagi, melainkan sudah menggunakan bahasa C yang disederhanakan dengan bantuan (libraries) yang ada pada  Arduino.

Langsung saja NPmedia tunjukin bagaimana cara menghidupkan lampu menggunakan Arduino Mega 2560.

Alat dan Bahan

• Software Arduino IDE
• 1 Buah LED 5mm atau LED 3mm
• 1 Buah Resistor 330Ω Ohm
• 2 Buah Kabel Jumper
• 1 Buah Breadboard
• 1 Buah Arduino Mega 2560

Rangkaian 

Keterangan

- Pin GND pada Arduino Mega 2560 dihubungkan pada sisi negatif (-) LED.
- Pin 45 pada Arduino Mega 2560 dihubungkan pada resistor.
- Resistor dihubungkan ke sisi positif (+) LED.



Code
Masukkan code dibawah ini ke dalam software Arduino IDE, lalu upload.

Keterangan

1. Fungsi void setup () di program arduino adalah semua perintah yang akan di baca sekali.
2. Fungsi void loop () di program arduino adalah semua perintah yang akan di baca berulang-ulang.
3. Fungsi pinMode adalah untuk mengkonfigurasi pin sebagai input atau output.
4. Fungsi digitalWrite adalah untuk memberi nilai HIGH atau LOW ke pin digital .
5. Fungsi HIGH adalah untuk memberi tegangan pada LED. 

Terimakasih, NPmedia harap tutorial ini dapat bermanfaat bagi kalian semua... sampai jumpa di tutorial selanjutnya...

Wassalamu’alaikum warahmatullahi wabarakatuh.

Cara Menampilkan Gambar dengan HTML

Cara Menampilkan Gambar dengan HTML

Bahan yang dibutuhkan tetap sama seperti kita membuat html sebelumnya yaitu :

1.      Text Editor (notepad, notepad++, Sublime, atom, dll)

2.      Web browser (Mozilla, google chrome, safari, opera, dll)

Berikut langkah – langkah nya

1.       Buka script code yang sebelumnya supaya kita mudah untuk mempelajarinya

2.       Lalu tambahkan script <img =”nama gambar”>

NB : gambar harus ditaruh di dalam satu folder yang sama dengan file index.html

Nama gambar bisa diganti dengan link apabila kita ingin menampilkan gambar dari google seperti dibawah ini 

                            

                        Apabila gambar berada di folder yang berbeda makan sriptnya seperti ini 

Folder diganti dengan nama folder dimana gambar kalian berada

3. tambahkan alternatif apabila nnti gambar tidak muncul dan akan diganti dengan 

    tulisan

4. tambahkan alternatif apabila nnti gambar tidak muncul dan akan diganti dengan 

    tulisan (alt="Tulisan apabila gambar eror")

5. tambahkan ukuran supaya gambar yang kita inginkan bisa tambil dengan bagus

     

6. Kemudian klik save dan buka di browser. Dan akan muncul gambar yang kita akan buka tadi

itulah cara cara untuk menampilkan gambar dengan HTML

Cara Membuat / Memanggil Link dengan HTML

Cara Membuat / Memanggil Link dengan HTML

Disuatu website biasanya terdapat tombol / icon sosmed yang dimana ketika klik akan mengarah kesuatu halaman yang akan dituju pada tombol / icon tersebut, dimana tombol / icon tersebut sudah dipasang script code untuk memanggil / mengaktifkan link tersebut.

Bahan yang dibutuhkan tetap sama seperti kita membuat title yaitu :

      1.      Text Editor (notepad, notepad++, Sublime, atom, dll) 

      2.      Web browser (Mozilla, google chrome, safari, opera, dll)

Berikut langkah – langkah nya

      1.       Buka script code yang sebelumnya supaya kita mudah untuk mempelajarinya

      2.       Lalu tambahkan script <a href=”URL yang dituju”>Nama tombol</a> seperti berikut
       

<a></a> = adalah tag yang digunakan 

href="" = adalah atribut yang digunakan untuk memanggil link 

      3.       Kemudian klik save dan buka di browser. Dan akan muncul tulisan berwarna biru yang dimana ketika kita klik akan mengarah ke link yang akan dituju.

      4.       Untuk membuat open in new window / m=membuka di tab baru maka tambahkan (target=”_blank”) dimana itu akan berfungsi untuk mengarahkan link ke halaman baru / tab baru

       seperti ini

itulah bagaimana cara untuk membuat tulisan berlink  / memanggil link dengan HTML

Cara membuat konten website dengan html

Cara Membuat isi konten web dengan html (heading dan paragraph)

Isi konten pada website ada sebuah teks / gambar yang akan kita tayang kan kepada viewer / pengunjung web kita dimana teks / gambar yang akan kita informasikan ke viewer / pengunjung web kita.

Bahan yang dibutuhkan tetap sama seperti kita membuat title yaitu :

1. Text Editor (notepad, notepad++, Sublime, atom, dll) 

2 .Web browser (Mozilla, google chrome, safari, opera, dll)

Yang pertama cara membuat heading atau judul artikel

ketikkan script dibawah ini pada bagian body di script cara membuat title

<h1> TEKS HEADING  </h1>

<h3> TEKS HEADING </h3>

dan akan menjadi seperti ini :

save dan buka kembali dibrowser.

Maka tampilan akan seperti ini

NB : tag <h1></h1> dan tag <h3></h3> dapat diganti dengan tag<h1></h1> sampai dengan tag<h6></h6> tergantung besar kecil font / isi content yang diinginkan. Untuk melihat perbedaannya silahkan dicoba sendiri :D

Jika ingin tampilan text berada ditengah maka tambahkan kode <center></center> didalam tag seperti berikut :

dan tampilan akan berubah seperti ini...

Teks yang kita kasih tag <center></center> tadi berubah posisi menjadi ditengah

dan untuk membuat teks italic / underlined / bold caranya sama tetapi tagnya saja yang beda untuk tag html bias dilihat disini

kemudian cara membuat paragraf

caranya hampir sama dengan membuat heading hanya tag saja yang berbeda

tagnya adalah  <p></p> didalam tag <body></body> atau di bawah teks heading seperti ini :

<p> TEKS PARAGRAF </p>

 menjadi seperti ini :

dan tampilannya seperti ini :

agar bisa di tengah jangan lupa kasih tag <center></center>

oke sekian dulu untuk, tutor yang lainnya bisa dilihat di bawah sini

Cara membuat title web dengan html

Cara Membuat title web dengan html

Title biasanya digunakan untuk mengetahui page atau halaman mana yang telah kita buka. Biasanya terletak diatas tab yang kita buka pada browser. disini saya akan mengajarkan kalian bagai mana cara membuat title dengan html

Yang dibutuhkan

1. Text Editor (notepad, notepad++, Sublime, atom, dll)
2. Web browser (Mozilla, google chrome, safari, opera, dll)

Ketikkan kode berikut ke text editor 

disini saya menggunakan teks editor sublime. Jika ada yang menggunakan teks editor lain caranya tetap sama

Kemudian save dengan format index.html

Kemudian buka dengan web browser dan lihat hasilnya.

dan hasilnya akan begini

berikut adalah cara membuat title dengan html

Untuk tutor yang lain bisa dilihat dibawah ini....

Apa itu Pemrograman

Apa itu Pemrograman

Pemrograman adalah proses menulis kode kode algoritma yang bertugas untuk memperbaki (debug) dan memelihara suatu kode yang membangun sebuah program komputer dimana aktivitas pemrograman disebut programming yang melakukan disebut progamer dan software yang digunakan disebut program. Pemrograman juga mengacu pada konfirmasi permintaan dari seperangkat aturan bersama-sama dengan ketepatan, pelaksanaan algoritma secara obyektif bahasa pemrograman. Algoritma ini juga dikenal sebagai kode sumber yang ditulis oleh programmer dan dimasukkan ke dalam mesin untuk eksekusi dan untuk melihat hasil. Ketika datang ke generasi dari kode sumber, programmer harus memilih salah satu bahasa pemrograman berikut:

1. C
2. C ++
3. C #
4. Jawa
5. Ular sanca
6. Smalltalk
7. JavaScript
8. Perl
9. Rubi
10. PHP



Menggunakan salah satu bahasa yang disebutkan di atas, seorang programmer dapat mengeksekusi kode sumber dan dapat menemukan hasil. Hasilnya bisa menjadi solusi untuk masalah. Oleh karena itu, sebagai seorang programmer, Anda harus memiliki deep-wawasan dari setiap bagian dari metode pemrograman yaitu dari formasi kode sumber untuk pelaksanaannya, dan dari eksekusi untuk solusi dari masalah. Seorang programmer harus memiliki pemikiran yang logis serta kritis sementara membentuk kode sumber dan dijalankan.

HTML

APA ITU HTML???

 

 

HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.

Macam macam Tag HTML

N0	TAG HTML	KETERANGAN
1	<I> </I>	Menyisipkan tulisan miring.   makan
2	<u> </u>	Menyisipkan tulisan bergaris bawah.   minum
3	<b> </b>	Menyisipkan tulisan tebal .   belajar
4	<li> </li>	Menyisipkan bullet.  *  FUNGSI HTML
5	<marquee> </marquee>	Menyisipkan tulisan berjalan .  “welcome to website” bergerak dari kiri ke kanan atau dari atas ke bawah.
6	<blink> </blink>	Menyisipkan tulisan berkedip kedip. <blink> klick here </blink>
7	<center> </center>	Menyisipkan tulisan dalam bentuk ratah tengan . “hendra simanungkalit”
8	<title> </title>	Menyisipkan title html
9	<head> </head>	Menyisipkan bagian head pada sebuah html.\
10	<body> </body>	Menyisipkan atribut untuk seluruh dokumen. Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth
11	<html></html>	Tag pembuka di dalam membuat sebuah desain web.
12	<h1> </h1>	Menyisipkan tulisan dalam bentuk h1Header 1
13	<h2> </h2>	Menyisipkan tulisan dalam bentuk h2. Header 2
14	<h3></h3>	Menyisipkan tulisan dalam bentuk h3. Header 3
15	<h4></h4>	Menyisipkan tulisan dalam bentuk h4. Header 4
16	<h5></h5>	Menyisipkan tulisan dalam bentuk h5. Header 5
17	<h6></h6>	Menyisipkan tulisan dalam bentuk h6. Header 6
18	<h7> </h7>	Menyisipkan tulisan dalam bentuk h7. Header 7
19	<abbr> </abbr>	Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja
20	<acronym></acronym>	Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
21	<area ></area>	Mendefinisikan daerah yang dapat diklik (link) pada peta gambar
22	<base > </base>	Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen
23	<blockquote> </blockquota>	Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam
24	<cite> </cite>	Mendefinisikan kutipan
25	<code> </code>	Mendefinisikan sebuah bagian dari kode komputer
26	<button> </button>	Mendefinisikan sebuah tombol diklik
27	<cite> </cite>	Mendefinisikan kutipan
28	<font> </font>	Mendefinisikan jenis font, warna dan ukuran untuk teks
29	<form> </form>	Mendefinisikan sebuah form HTML untuk input form
30	<frame> </frame>	Mendefinisikan frame dalam frameset
31	<hr> </hr>	Membuat garis horizontal
32	<small> </small>	Memperkecil ukuran teks dari ukuran defaultnya
33	<span> </span>	Mendefinisikan sebuah section dalam dokumen
34	<strike> </strike>	Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
35	<strong> </strong>	Membuat teks tebal, fungsi tag ini sama dengan tag <b>
36	<tr> </tr>	Membuat baris di dalam sebuah table
37	<ul> </ul>	Mendefinisikan daftar dalam format bullet
38	<td> </td>	Mendefinisikan sel di dalam sebuah table. Height, width, bgcolor, background, align, valign, title, colspan, rowspan
39	<thead> </thead>	Untuk mengelompokkan isi header di dalam sebuah tabel
40	<samp> </samp>	Mendefinisikan contoh keluaran dari program computer
41	<frameset> </frameset>	Mendefinisikan satu set frame
42	<input > </infut>	Mendefinisikan input field pada form
43	<img > </img>	Berfungsi untuk menampilkan gambar pada dokumen HTML. Src, alt, name, border, height, width
44	<big> </big>	Memperbesar ukuran teks sebesar satu point dari defaultnya
45	<em> </em>	Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
46	<fieldset> </fieldset>	Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form
47		Mendefinisikan client-side script
48	<select> </select>	Membuat daftar drop-down
49	<strong> </strong>	Membuat teks tebal, fungsi tag ini sama dengan tag <b>
50	<sub> </sub>	Memberikan efek subscript pada teks. Subscript
51	<sup> </sup>	Memberikan efek superscript pada teks. Superscript
52	<table> </table>	Membuat table. Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign
53	<textarea> <textarea>	Mendefinisikan sebuah kontrol input multiline. Name, rows, cols, wrap
54	<tfoot> </tfoot>	Untuk mengelompokkan isi footer di dalam sebuah tabel
55	<th> </th>	Mendefinisikan sel header di dalam  sebuah table. Height, width, bgcolor, background, align, valign, title, colspan, rowspan
56	<ul> </ul>	Mendefinisikan daftar dalam format bullet
57	<var> </var>	Mendefinisikan sebuah variable
58	<xmp> </xmp>	Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre>
59	<tt> </tt>	Mendefinisikan teletype text
60	<option> </option>	Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down
61	<noscript> </noscript>	Jika browser user tidak mendukung client-side scripts
62	<noframes> </noframes>	Jika browser user tidak mendukung frame
63	<nobr> </nobr>	Mencegah ganti baris pada teks atau gambar
64	<meta > </meta>	Mendefinisikan metadata tentang sebuah dokumen HTML
65	<menu> </menu>	Mendefinisikan sebuah daftar menu
66	<map> </map>	Mendefinisikan client-side peta gambar
67	<listing> </listing>	Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag <listing> tidak layak/diprotes
68	<legend> </legend>	Mendefinisikan sebuah caption untuk elemen <fieldset>
69	<ol> </ol>	Ordered List (digunakan dengan <li>) . 1. Item 1
70	<p> </p>	Menyisipkan paragraph
71	<br> </br>	Mengganti baris
72	<hr> </hr>	Mengganti horizontall
73	<dt> </dt>	Definition term
74	<dd> </dd>	Definition list
75	<colgroup> </colgroup>	Format yang berlaku bagi kolom. Height, width, align, valign, bgcolor, background, colspan
76	<a> </a>	Membuat link ke dokumen atau situs lainnya. Href, target, style, class, name, id
77	<option> </option>	Selected, name, value
78	<pre></pre>	Preformatted teks. Contoh text
79	<button> </button>	Mendefinisikan sebuah tombol diklik.

source : https://jazakhoirul.files.wordpress.com/2014/12/tag-tag-html.docx