HTML: Meng-Embedkan Maps ke HTML Menggunakan Iframe

HTML: Meng-Embedkan Maps ke HTML Menggunakan Iframe

Admin   08.02

Assalamualaikum sobat. Semoga tetap sehat dan selalu dalam lindunganNya. Amin. Bertemu lagi nih. Langsung saja, kali ini saya akan sharing mengenai Tutorial Meng-Embedkan Maps ke HTML Menggunakan Iframe.

Langsung saja ya....

A. JUDUL
Meng-Embedkan Video dan Google Maps ke HTML Menggunakan Iframe

B. PENDAHULUAN

1. Pengertian
A map is a symbolic depiction emphasizing relationships between elements of some space, such as objects, regions, or themes. Atau dalam Bahasa Indonesia berarti Peta adalah penggambaran simbolis yang menekankan hubungan antara unsur-unsur beberapa ruang, seperti objek , daerah , atau tema. 
 

2. Latar Belakang
Banyak peta statis, tetap menggunakan kertas atau media tahan lama lainnya, sementara yang lain bersifat dinamis atau interaktif. Meskipun paling umum digunakan untuk menggambarkan geografi, peta mungkin mewakili ruang , nyata atau imajiner, tanpa memperhatikan konteks atau skala , seperti pemetaan otak , pemetaan DNA , atau pemetaan topologi jaringan komputer. Ruang yang dipetakan bisa dua dimensi, seperti permukaan bumi, tiga dimensi, seperti interior bumi, atau bahkan ruang abstrak yang lebih banyak dari dimensi apapun, seperti timbul dalam fenomena pemodelan yang memiliki banyak variabel independen. Namun, sekarang Maps bisa berbentuk dinamis, yang dapat diembedkan ke dalam script HTML, yang dapat dibuka pada browser. 
 

3. Maksud danTujuan

• Menampilkan Maps ke dalam script HTML
• Menambah Maps ke dalam website

4. Hasil yang Diharapkan
Dengan adanya embed ke HTML ini, diharapkan kita dapat mengembedkan sebuah Maps ke dalam website kita.

C. ALAT dan BAHAN

• Web Browser
• Text Editor
• Maps

D. JANGKA WAKTU
5 menit

E. LANGKAH-LANGKAH

• Buka text editor
• Simpan dengan nama.html
• Ketikkan script seperti di bawah ini

 

• Lalu buka google maps

 

• Ketikkan tempat yang ingin dituju.
• Klik bagikan, dan sematkan gambar

• Masukkan ke dalam script, seperti di bawah

• Simpan, dan buka file nya melalui browser.
• Hasilnya, seperti berikut

F. HASIL yang DIDAPAT
Maps berhasil di embedkan ke dalam script HTML, dan nyatanya juga dapat dibuka.

G. PENEMUAN PERMASALAHAN
Kesalahan dalam menyematkan link.

H. KESIMPULAN
HMTL 5 sekarang sudah support maps, dengan ini, kita dapat menambahkan maps ke dalam website kita. Sesuai dengan posisi yang kita inginkan.

I. REFERENSI
https://en.wikipedia.org/wiki/Map
https://www.google.co.id/maps/place/Bajulan,+Saradan,+Madiun,+Jawa+Timur/@-7.5330369,111.6681932,3a,60y,90t/data=!3m6!1e1!3m4!1svDcrEEWN7GhF65VvMJttFw!2e0!7i13312!8i6656!4m5!3m4!1s0x2e79c7d7e0a13325:0x57ede8bced41fc9!8m2!3d-7.5342343!4d111.667563?hl=id 

Telekomunikasi

Telekomunikasi

Admin   10.00

Assalamualaikum sobat. Semoga tetap sehat dan selalu dalam lindunganNya. Amin. Bertemu lagi nih. Langsung saja, kali ini saya akan sharing mengenai Telekomunikasi.

Langsung saja ya..

A. Pendahuluan

1. Pengertian
     Telekomunikasi adalah teknik pengiriman atau penyampaian informasi, dari suatu tempat ke tempat lain.

2. Latar Belakang

     Software Engineer – Berperan dalam pengembangan perangkat lunak untuk berbagai keperluan. Misalnya perangkat lunak untuk pendidikan, telekomunikasi, bisnis, hiburan dan lain-lain, termasuk perangkat lunak untuk model dan simulasi.

3. Maksud dan Tujuan

• Mengetahui macam-macam telekomunikasi
• Untuk mengembangkan aplikasi mengenai telekomunikasi

4. Hasil yang diharapkan
     Dapat memahami apa yang dimaksud dengan telekomunikasi.

B. Uraian

1. Macam-macam Telekomunikasi

• Komunikasi Satu Arah (Simplex). Dalam komunikasi satu arah (Simplex) pengirim dan penerima informasi tidak dapat menjalin komunikasi yang berkesinambungan melalui media yang sama. Contoh: Pager, televisi, dan radio.
• Komunikasi Dua Arah (Duplex). Dalam komunikasi dua arah (Duplex) pengirim dan penerima informasi dapat menjalin komunikasi yang berkesinambungan melalui media yang sama. Contoh: Telepon dan VOIP.
• Komunikasi Semi Dua Arah (Half Duplex). Dalam komunikasi semi dua arah (Half Duplex) pengirim dan penerima informasi berkomunikasi secara bergantian namun tetap berkesinambungan. Contoh: Handy Talkie, FAX, dan Chat Room.

2. Komponek Dasar Telekomunikasi

• Informasi: merupakan data yang dikirim/diterima seperti suara, gambar, file dan tulisan.
• Pengirim: mengubah informasi menjadi sinyal listrik yang siap dikirim.
• Media transmisi: alat yang berfungsi mengirimkan dari pengirim kepada penerima. Karena dalam jarak jauh, maka sinyal pengirim diubah lagi (dimodulasi) dengan gelombang radio, kemudian diubah menjadi gelombang elektromagnetik dan dipancarkan dengan alat bernama antena, agar dapat terkirim jarak jauh.
• Penerima: menerima sinyal elektromagnetik kemudian diubah menjadi sinyal listrik, sinyal diubah kedalam informasi asli sesuai dari pengirim, selanjutnya diproses hingga bisa dipahami oleh manusia sesuai dengan yang dikirimkan.

3. Macam-Macam Signal dalam Telekomunikasi
    Pertama adalah sinyal analog, mengubah bentuk informasi ke sinyal analog dimana sinyal berbentuk gelombang listrik yang kontinyu (terus menerus) kemudian dikirim oleh media transmisi.
Kedua adalah sinyal digital, dimana setelah informasi diubah menjadi sinyal analog kemudian diubah lagi menjadi sinyal yang terputus-putus (discrete). Sinyal yang terputus-putus dikodekan dalam sinyal digital yaitu sinyal "0" dan "1".
Dalam pengiriman sinyal melalui media transmisi, sinyal analog mudah terkena gangguan terutama gangguan induksi dan cuaca, sehingga di sisi penerima sinyal tersebut terdegradasi. Sementara untuk sinyal digital tahan terhadap gangguan induksi dan cuaca, selama gangguan tidak melebih batasan yang diterima, sinyal masih diterima dalam kualitas yang sama dengan pengiriman.

C. Kesimpulan
    Walaupun dari jurusan RPL, kita juga harus paham mengenai apa itu Telekomunikasi. Karena beberapa program yang kita buat nanti membutuhkan telekomunikasi. Ataupun juga kita membuat aplikasi mengenai telekomunikasi.
 

D. Hasil yang diperoleh
     Mengetahui apa itu telekomunikasi, macam-macam telekomunikasi.

E. Referensi
     https://id.wikipedia.org/wiki/Telekomunikasi

Perbedaan require(), include(), require_once() dan include_once()

Perbedaan require(), include(), require_once() dan include_once()

Admin   11.01

Assalamualaikum sobat. Semoga tetap sehat dan selalu dalam lindunganNya. Amin. Bertemu lagi nih. Langsung saja, kali ini saya akan sharing mengenai Perbedaan require(), include(), require_once() dan include_once().

Langsung saja ya...

A. Pendahuluan

1. Pengertian
    require an include adalah sebuah tag yang digunakan untuk memanggil file lain, yang dijalanjakan dalam satu file.

2. Latar Belakang
    PHP memiliki kemampuan untuk menyertakan file php lainnya ke dalam suatu program PHP. Tentunya kemampuan ini sangat berguna bagi programmer karena tidak perlu menuliskan suatu perintah yang diperlukan di setiap file berulang kali, cukup ditulis di satu file dan disertakan di file yang memerlukannya. Contoh bagian dari program PHP yang biasanya dituliskan di file terpisah dan disertakan di file-file lainnya adalah potongan program untuk melakukan koneksi ke database. Kita tentu sudah memahami bahwa koneksi ke database harus dilakukan terlebih dahulu sebelum kita berurusan dengan data yang disimpan di database.
Terkait dengan hal tersebut, PHP memiliki beberapa fungsi untuk menyertakan suatu file yaitu include(), require(), include_once() dan require_once(). Lalu apa perbedaan antara keempat fungsi tersebut? Dan sebaiknya kita menggunakan fungsi yang mana? Dalam tutorial singkat ini akan dijelaskan mengenai maksud dan perbedaan dari fungsi-fungsi tersebut serta kapan kita harus menggunakannya.

3. Maksud dan Tujuan

• mudah referensi silang dimana komponen digunakan dalam suatu sistem.
• mudah mengubah program bila diperlukan (hanya satu file master yang bisa diubah).
• menghemat waktu dengan tidak perlu kode tata letak data yang luas (kecil, tapi berguna)
• mengenali perbedaan antara include(), include_once(), require(), dan require_once()

4. Hasil yang diharapkan

     Mengerti dan paham apa perbedaan 4 komponen tersebut.

B. Uraian

1. Alat dan Bahan

• Laptop
• text editor
• browser
  

2. Durasi Waktu
    5 menit

3. Tahapan

• Buat folder terlebih dahulu isi file bernama 

• Pada file include.php isi seperti berikut

• Sedangkan di file require.php isi sebagai berikut

• Terakhir file re.php dibuat untuk memanggil 
• Nah disini akan kita praktekkan
• Ketika kita merequire kan, seperti berikut

hasilnya seperti berikut 

• Ketika kita mengincludekan, seperti berikut

hasilnya akan seperti berikut

• Ketika kita sama-sama memasukkan include selama dua kali, dengan file yang sama dan file yang berbeda apa hasilnya.

 

 

• Dan apabila kita menggunaka require dengan file yang sama maupun file yang berbeda hasilnya adalah

  

 

• Sekarang kita coba include dengan include_once, dengan file yang sama dan file yang berbeda

• Terakhir kita coba require dengan require_once, dengan memanggil file yang sama dn file yang berbeda

C. Kesimpulan
    Jadi bila kita memakai include_once(), maupun require_once() kita hanya bisa memanggil file tersebut satu kali, dalam satu file inti.

D. Hasil yang diperoleh
     Mengerti perbedaan antara require(), include(), include_once() dan require_once()

E. Referensi  
     http://achmatim.net/2013/10/20/php-perbedaan-fungsi-include-require-include_once-dan-require_once/

Bind Data / Data Binding

Bind Data / Data Binding

Admin   00.00

Assalamualaikum sobat. Semoga tetap sehat dan selalu dalam lindunganNya. Amin. Bertemu lagi nih. Langsung saja, kali ini saya akan sharing mengenai Bind Data

Langsung saja ya

A. Pendahuluan

1. Pengertian

    Pengikatan data, dalam konteks .NET, adalah metode dimana kontrol pada antarmuka pengguna (UI) dari aplikasi klien dikonfigurasi untuk diambil dari, atau memperbarui data menjadi, sumber data, seperti database atau dokumen XML.
     Sebelum .NET, akses ke model pengikat data terbatas pada database. Dengan demikian, banyak sistem manajemen basis data (DBM) secara tidak langsung dapat mengakses sumber data melalui antarmuka pemrograman aplikasi mereka (API) tanpa adanya fleksibilitas dalam mengendalikan proses pengikatan data. Masalah ini ditangani di .NET dengan memberikan kontrol yang bagus tentang bagaimana data terikat dan perilaku UI dengan Windows Forms dan ADO.NET classes dalam kerangka ini. Pengembangan aplikasi Web disederhanakan dengan menyediakan kemampuan pengikatan data ke halaman Web menggunakan .NET server side Web controls.
    Menurut wikipedia, Pengikatan data adalah teknik umum yang mengikat sumber data dari penyedia dan konsumen bersamaan dan menyinkronkannya . Hal ini biasanya dilakukan dengan dua sumber data / informasi dengan bahasa yang berbeda seperti pada data XML yang mengikat . Di UI data mengikat , data dan objek informasi dari bahasa yang sama namun fungsi logika yang berbeda terikat bersama (misalnya elemen Java UI ke objek Java). 

2. Maksud dan Tujuan  

    Menegetahui bagaimana cara kerja Bind Data.

3. Hasil yang diharapkan

    Memahami bind data dan dapar menerapkannya.

 

B. Uraian

     Keuntungan menggunakan data yang mengikat .NET adalah sebagai berikut:

1. Pengurangan ukuran kode
2. Kinerja aplikasi lebih baik
3. Perkembangan pesat aplikasi berbasis data
4. Kustomisasi proses pengikatan data default dengan memodifikasi kode yang dihasilkan dimanapun diperlukan
5. Pengendalian baik pada pengikatan data melalui acara
6. Umpan balik visual tentang kesalahan validasi dengan mengaitkan aturan validasi data dengan validasi tipe data bawaan kontrol di UI (misalnya, nilai tanggal dimasukkan dalam kontrol tanggal)

         Pengikatan data berupa link untuk menyinkronkan data antara penyedia data (data source) dan data konsumen (UI menampilkan data), memungkinkan koneksi dua arah antara elemen visual dan sumber data. Misalnya, properti teks dari kotak teks formulir Windows dapat terikat dengan nama siswa yang diambil dari database. Pengikatan juga dapat diterapkan pada grafik kontrol gambar, warna latar belakang kontrol atau properti kontrol lainnya pada formulir. 
        Kerangka .NET menyediakan opsi pengikatan data sederhana dan kompleks dalam Windows Forms untuk mengakses data dari database dan struktur, seperti array dan koleksi. Dalam kasus opsi pengikatan data sederhana, satu kontrol di UI terikat pada satu nilai data pada sumber data saat berada dalam opsi kompleks. Juga, satu kontrol terikat pada kumpulan data, seperti kontrol Datagrid yang terikat pada kumpulan data yang merupakan daftar nilai. 
        Windows Presentation Framework (WPF) di .NET 4.0 menerapkan konsep pengikatan data dengan menghubungkan properti objek sasaran yang mengikat (elemen WPF) dan sumber data apa pun, termasuk kueri Language Integrated Query (LINQ), objek Common Language Runtime (CLR) XML dan sumber data lainnya. Ini menyediakan template data untuk mengendalikan penyajian data.          
       Ketika pengikatan data diterapkan ke halaman ASP.NET, setiap kontrol server dapat terikat pada properti, koleksi, ungkapan dan metode sederhana, dll. Semua ungkapan yang mengikat data harus terdapat di dalam karakter <% #%>. Kelas kerangka kerja, seperti Dataset, DataReader dan lainnya digunakan untuk mendapatkan data dari database dan terhubung ke kontrol di halaman Web.  
        Keterbatasan pengikatan data mencakup overhead yang disebabkan oleh pengecekan versi kontrol, driver / penyedia Open Database Connectivity (ODBC) yang terpasang di sistem pengguna dan distribusi versi kontrol dan middleware baru yang diperlukan untuk menggunakan aplikasi di akun pengguna. sistem.

C. Kesimpulan

    Bind data adalah teknik penyinkronan sumber data dari penyedia dan konsumen

D. Hasil yang diperoleh

    Mengerti maksud dari Bind data

E. Referensi

     https://translate.google.com/translate?hl=id&sl=en&u=https://en.wikipedia.org/wiki/Data_binding&prev=search

     https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.com&sl=en&sp=nmt4&u=https://www.techopedia.com/definition/15652/data-binding&usg=ALkJrhgyLMgS2k_Zaijx43rDa477FBVOXQ

Workshop bersama PHP Indonesia with Mas Daniel & Mas Yogi | Form Login

Workshop bersama PHP Indonesia with Mas Daniel & Mas Yogi | Form Login

Admin   10.52

A. JUDUL

Workshop bersama PHP Indonesia with Mas Daniel & Mas Yogi | Form Login

B. PENDAHULUAN

1. Pengertian

Form Login adalah sebuah form atau kolom kolom untuk di isi sebagai media memasukkan nilai.

2. Latar Belakang

Mengapa ada form, dengan form akan termudahkan dalam penginputan data ataupun yang lainnya. Karena apa disitu akan tertera informasi yang seharusnya diisikan.

3. Maksud danTujuan

• Membuat form untuk login

4. Hasil yang Diharapkan

Dari form login ini dapat dijadikan interface untuk login di suatu system.

C. ALAT dan BAHAN

• PC/Laptop
• Browser
• Text Editor

D. JANGKA WAKTU

2 jam

E. LANGKAH-LANGKAH

1. Siapkan laptop

2. Buka text editor

3. Kita buat kerangkanya dahulu, seperti script di bawah

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login SI Perpus</title>
    <link rel="stylesheet" type="text/css" href="css/stylee.css">
</head>
<body>
    <form method="post" name="form_login" id="form_login" style="margin-top: 120px;">
        <table class="form">
            <tr>
                <td colspan="2">
                    <h1 align="center">Login Petugas</h1>
                </td>
            </tr>
            <tr>
                <td>Username</td>
                <td>
                    <input type="text" name="username" id="username" required/>
                </td>
            </tr>
            <tr>
                <td>Password</td>
                <td>
                    <input type="password" name="password" id="password" required/>
                </td>
            </tr>
            <tr style="height:10px"></tr>
            <tr>
                <td colspan="2" align="right">
                    <input type="submit" name="login" id="login" value="Login" class="btn btn-submit" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

dan hasilnya jika dibuka dibrowser akan seperti ini 

4. Setelah sudah terbentuk kerangkanya agar lebih menarik kita akan menambahkan css, seperti dibawah.

*{
    font-weight: 100;
}
body{
    margin: 0;
    background : #798E82;
}
/*form*/

.form{
    background: #42775A;
    border-radius: 5px;
    padding: 4px 20px 15px 20px;
    box-shadow: 0px 0px 5px black;
    color: #FFF;
    margin: 0 auto;
    width: 430px;
}

input, textarea, select {
    width: 100%;
    padding: 10px 5px;
    box-sizing: border-box;
    font-size: large;
}

textarea {
    min-height: 80px;
}

.btn {
    width: auto;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.btn-submit {
    background-color: #C35045;
}

.btn-submit:hover {
    background-color: #CA665C;
}

5. Untuk menhubungkan antara html dan css bagaimana? Nah tinggal kita tambahkan tag link di bagian file html, di bawah title

F. HASIL yang DIDAPAT

Hasilnya seperti gambar dibawah ini

G. PENEMUAN PERMASALAHAN

-

H. KESIMPULAN

Dengan form login ini, untuk masuk ke suatu sistem akan lebih interaktif.

I. REFERENSI

-