Membuat Jaringan Fiber Optic Dengan HTB

Media converter/HTB digunakan membuat jaringan fiber optic active dengan biaya yang murah.

Jaringan kabel FO ini nantinya jauh lebih murah, lancar, stabil, dibanding menggunakan UTP wireless. jika dipasang dan dikonfigurasi dengan benar.

Jaringan Fiber Optic Dengan HTB/Media Converter

Jaringan fiber optic yang menggunakan mendia converter termasuk dalam jenis jaringan FO aktif.

Dikatakan aktif karena jika kita ingin paralel/cabang kabel fiber opticnya, kita memerlukan power (listrik) untuk menghidupkan alat.

Alat yang dipakai untuk memparalel/mencabang adalah switch, baik switch ethernet ataupun switch fiber optic.

Media Converter (HTB)

Media converter sering disebut juga dengan HTB, alat ini punya dua port (optic dan ethernet).

Port ethernet bisa langsung colok ke peralatan yang punya interface ethernet (switch, komputer, laptop, akses point, router, dll).

Sedangkan port fiber optic (FO) kita colok ke kabel fiber yang kita pakai.

Media Converter FO(fx) to Ethernet(tx)

Port FO yang pada media converter ada dua jenis, A dan B.

A harus ketemu B , ini adalah syarat mutlak agar 2 buah media converter bisa terhubung.

Aturan nya hanya seperti itu, sangat simple dan mudah.

Satu kabel fiber optic, ujung satu dipasang media converter A dan ujung satunya dipasang media converter B.

Posisi A dan B bisa dibalik kok, asalkan B ketemu A, atau A ketemu B.

Switch FO/Ethernet

Untuk memparalel kita tidak bisa menggunakan splitter.

Ini karena aturan mutlak tadi (media converter A ketemu B).

Jadi untuk mencabang atau memparalel jaringan fiber optic yang menggunakan media converter kita memerukan switch.

Switch Fiber Optic

Bisa switch ethernet ataupun switch fiber optic.

Tapi adapula yang hybrid, misal satu switch sudah ada port ethernet dan FO.

Topologi Jaringan FO Aktif dengan HTB

Topologi jaringan FO aktif (menggunakan media converter) pada dasarnya sama saja dengan topologi jaringan kabel lan.

Topologi Jaringan FO Aktif

Bedanya kabel lan digantikan dengan kabel FO, yang disetiap ujungnya harus dipasang media converter berpasangan (A berpasangan dengan B).

Untuk pencabangan nya atau paralel harus mengunakan switch (switch FO ataupun LAN)

Desain topologi menentukan kelancaran jaringan kita, terutama saat terjadi error bisa ditangani dengan cepat jika topologinya tepat.

Kekurangan Jaringan FO Aktif (Media converter)

• Tiap percabangan harus menggunakan switch.
• Saat listrik di switch mati, jalur yang terhubung ke switch tersebut akan putus.
• Jaringan sangat bergantung pada listrik di jalur percabangan.
• Media converter rawan rusak.
• Kapasitas jaringan bergantung pada jenis media converter yang dipakai (10M,100M,1G).
• Kalau jaringan sudah besar, susah troubleshooting.
• Rawan error yang disebabkan oleh buruknya kualitas media converter.
• Troubleshooting/ pencarian sumber error lebih susah, jika terjadi gangguan di jalur distribusi.

Kelebihan Jaringan FO Aktif (Media converter)

• Murah, hanya perlu beli kabel optic dan sepasang media converter
• Dengan biaya kecil, sudah bisa membuat jaringan fiber optic.
• Cocok untuk yang baru memulai membangun jaringan dengan skala kecil.

---

Kabel Fiber Optic

Jenis kabel fiber yang digunakan bertipe single mode, kabel jenis single mode dirancang untuk transmisi jarak jauh.

Kabel single mode hadir dalam bermacam-majam paket dan kemasan.

Ada yang hanya punya satu core (inti kabel) ada pula yang puluhan bahkan ratusan, tergantung ukuran kabel.

O iya, istilah core dipakai untuk menyebut kabel serat optic yang ada di dalam kabel.

Kabel serat optic yang punya satu atau dua core, sering disebut dengan istilah kabel drop core.

Kabel FO Pre connector (Precon)

Ada jenis kabel FO yang sudah dipasangin konektor dengan ukuran tertentu dari 50m hingga ratusan meter.

Kabel ini sudah dipsang konektor SC UPC standar yang bisa langsung dicolok ke media converter, modem ataupun OLT.

Konektor Kabel Fiber optic

Standar konektor fiber optic yang digunakan berjenis SC UPC berwarna biru.

Konektor ini hadir dalam 2 jenis cara pemasangan.

• Fast konektor FO SC UPC (dipasang manual tanpa splicer)
• Pigtail FO SC UPC (dipasang menggunakan splicer)

Menyambung Kabel Fiber Optic (Splicing)

Menyambung kabel fiber optic dikenal dengan istilah splicing.

Splicing atau penyambungan kabel optic bisa dilakukan dengan manual ataupun otomatis.

Cara manual memang lebih murah (30an ribu), tapi sinyal yang hilang di sambungan cukup tinggi.

sambung fo dengan sc adapter

Penyambungan manual bisa dilakukan dengan cara:

• tiap ujung yang akan disambung dipasang konektor standar SC UPC warna biru
• sediakan adapter SC UPC, lalu tancapkan 2 kabel yang ingin disambung ke lupang adapter tersebut.
• Menggunakan mechanical splicer (tidak perlu pasang konektor SC UPC)

Sambung FO dengan mechanical splicer

Menggunakan fusion splicer hasilnya jauh lebih bagus, tapi kita harus punya alat khusus yang harganya belasan juta.

sambung fo dengan splicer

Sinyal yang hilang di sambungan kurang dari satu persen.

Konektor SC UPC berjenis pigtail, cara pemasangan nya harus menggunakan splicer.

Splicer bekerja dengan cara melelehkan kedua ujung kabel optic yang akan disambung jadi satu.

Hasilnya pun benar-benar menyatu, seperti di las.

Mengukur sinyal Fiber Optic

Transmisi data pada media serat optic menggunakan cahaya.

Panjang gelombang yang dipakai biasanya 1550nm dan 1310nm

Panjang gelombang 1310nm dipakai di mediaconverter A , sedangkan yang B memakai 1550nm.

Tidak hanya di media converter, panjang gelombang ini juga dipakai di interface fiber optic lain misalnya SFP FO di peralatan network lain.

Untuk mengukur sinyal kita perlu alat khusus dengan nama OPM (Optical Power Meter)

Ukur redaman sinyal FO dengan OPM

Kekuatan sinyal nya dinyatakan dalam dB

Sebagai gambaran, sinyal minimal untuk perangkat akhir (HTB atau modem) adalah -28dB

Jika sinyal kurang dari -28dB maka hasilnya jelek, misalnya -29dB, -30dB, dst.

Ingat.. itu angkanya minus loh ya… minus 28 dengan minus 30, lebih besar minus 28.

Toleransi alat berbeda-beda. tapi secara umum peralatan akan beroperasi dari -3dB sampai -28dB.

Kekuatan sinyal ini, di indonesia sering disebut dengan istilah “redaman”

Redaman tinggi artinya sinyal nya jelek, redaman kecil artinya sinyal nya bagus.

-30dB, redaman nya tinggi jadi jelek.

PROJECT PRIBADI DENGAN HTML

Pada project ini, kita akan membuat tiga halaman web, yakni home, contact, dan about. Desain yang digunakan adalah desain dalam bentuk wireframe atau sketsa.

Berikut ini desain untuk tiap-tiap halaman:

1. Desain Halaman Home

Halaman home adalah halaman utama yang akan dibuka pertama kali saat pengunjung membuka website. Halaman ini berisi menu, foto, teks, dan tabel.

2. Desain Halaman Contact

Halaman contact adalah halaman yang berisi form untuk menghubungi pemilik website.

3. Desain Halaman About

Halaman about adalah halaman yang berisi informasi lengkap tentang website.

Memulai Project Web

Silahkan buat folder baru dengan nama websiteku.

Setelah itu buat folder image dan video di dalam folder websiteku. Folder image akan kita gunakan untuk menyimpan gambar dan video untuk menyimpan video.

Sehingga nanti stuktur folder kita akan menjadi seperti ini:

• 📁 image
  • 🖼️ foto-profile.jpg
• 📁 video
  • 🎞 video-about.webm
• 📄 cv-name.pdf
• 📜 index.html
• 📜 contact.html
• 📜 about.html
• 🖼️ favicon.ico

File yang perlu kamu persiapkan di tahapan ini adalah foto-profile.jpg dan video-about.webm.

Berikutnya, kita akan mulai menulis kode. Silahkan buka folder websiteku dengan Visual Studio Code.

Caranya:

Klik menu File, lalu pilih Open Folder dan carilah folder websiteku.Dengan begini, kita sudah siap untuk menulis kode.

Membuat Halaman Home

Silahkan buat file baru bernama index.html di dalam folder websiteku. Setelah itu, isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ahmad Muhardian Personal Website</title>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="cv-dian.pdf">Download CV</a> |
        <a href="contact.html">Contact</a> |
        <a href="about.html">About me</a>
    </nav>

    <hr />

    <header style="text-align: center;">
        <img src="image/foto-profile.jpg" width="200" height="200" style="border-radius: 50%;"/>
        <h1>Ahmad Muhardian</h1>
        <p>(Web Developer)</p>
    </header>

    <hr />

    <article style="text-align: center;">
        <h2>Overview</h2>
        <p>
            Hi, saya adalah web developer yang berdomisisli di Jakarta.
            Saat ini sedang belajar HTML di Petnai Kode
        </p>
    </article>

    <div style="max-width: 600px; margin: 3em auto">
        <table border="1" width="100%">
            <thead>
                <tr>
                    <th>Skill</th>
                    <th>Pengalaman</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <ul>
                            <li>HTML (Expert)</li>
                            <li>CSS (Beginner)</li>
                            <li>Javascript (Beginner)</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>Freelancer di Internet</li>
                            <li>Leaeder Local Linux Community</li>
                            <li>Leaeder Local Linux Community</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; 2020 Ahmad Muhardian.</p>
    </footer>
</body>
</html>

Jangan lupa untuk mengubah nama Ahmad Muardian dengan nama kamu.

Jika kita coba membuka file index.html, maka hasilnya akan seperti ini:

Gambarnya tidak bisa tampil karena kita belum menambahkan file gambar di dalam folder image.

Silahkan tambahkan file gambar dengan nama foto-profile.jpg. Pastikan gambar yang ditambahkan memiliki ukuran persegi atau rasio 1:1. Pada proyek ini, saya menggunakan gambar dengan ukuran 200x200 piksel. Download file gambar: ⬇️ foto-profile.jpg

Setelah itu, coba refresh halaman home atau index.html.

Maka haslinya:

Membuat Halaman About Me

Buatlah file HTML baru dengan nama about.html.Kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ahmad Muhardian Personal Website</title>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="cv-dian.pdf">Download CV</a> |
        <a href="contact.html">Contact</a> |
        <a href="about.html">About me</a>
    </nav>

    <hr />

    <article>
        <h1>About Me</h1>
        <p>
            Hi, saya adalah web developer yang berdomisisli di Jakarta.
            Saat ini sedang belajar HTML di Petnai Kode.
        </p>
        <p>
            Saya memang masih baru dalam web development, karena itu
            saya tidak akan pernah berhenti belajar.
        </p>
        <p>
            Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
            Simak video lengkap tentang saya.
        </p>
        <p>
            <video controls>
                <source src="video/video-about.webm" type="video/webm"/>
            </video>
        </p>
    </article>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; 2020 Ahmad Muhardian.</p>
    </footer>
</body>
</html>

Sama seperti halaman home, halaman ini juga memiliki konten berupa video untuk ditampilkan. Tapi file videonya belum ada.

Sudah pasti videonya tidak akan bisa ditampilkan:

Karena itu, silahkan tambahkan file video-nya ke dalam folder video dengan nama video-about.webm.

Jika kamu belum punya filenya, silahkan download di link ini:

⬇️ video-about.webm Setelah itu, coba buka dan refresh halaman about.

Maka hasilnya:

Membuat Halaman Contact

Buatlah file baru dengan nama contact.html. Kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ahmad Muhardian Personal Website</title>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="cv-dian.pdf">Download CV</a> |
        <a href="contact.html">Contact</a> |
        <a href="about.html">About me</a>
    </nav>

    <hr />

    <div>
        <h1>Contact Me</h1>
        <form>
            <label for="email">Email</label><br />
            <input type="email" name="email" placeholder="alamat email"/>
            <br />
            <label for="message">Pesan</label><br />
            <textarea name="message" placeholder="Tulis pesan anda..." rows="4" cols="80"></textarea>
            <br />
            <br />
            <input type="submit" value="Kirim" />
        </form>
    </div>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; 2020 Ahmad Muhardian.</p>
    </footer>
</body>
</html>

Hasilnya:

Form contact ini belum bisa berfungsi, karena kita belum membuat kode untuk mengirim data

Membuat Fitur Download CV

Fitur ini sebenarnya paling gampang dibuat. Kita hanya perlu menambahkan file cv-dian.pdf ke dalam folder websiteku.

Download file: ⬇️ cv-dian.pdf

Setelah itu, coba klik menu Download CV. Jika PDF-nya terbuka, maka link ini sudah benar.

Membuat Ikon untuk Web

Agar websitenya terlihat menarik, kita akan membuat ikon atau favicon. Silahkan buka favicon-generator.org

kemudian pilih gambar yang akan dijadikan ikon.

Setelah itu, kita akan mendapatkan link download dan juga kode HTML yang harus ditambahkan ke dalam tag <head> agar ikon bisa ditampilkan.

Setelah kita mendapatkan ikon, simpan ikonnya ke dalam folder websiteku.

Terakhir, tugas kita tinggal membuat kode HTML untuk menampilkan ikon. Silahkan copy kode berikut:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">

Kemudian paste di dalam tag <head> pada setiap halaman.

Maka hasilnya:

kamu bisa berkreasi sebebas mungking, tanpa harus mengikuti desain di tutorial ini. SUMBER