Tugas Besar Jaringan Komputer Routing EIGRP (2B)

I. Tujuan
    o Mahasiswa dapat membuat topologi jaringan dengan routing EIGRP

    o Mahasiswa dapat memahami penggunaan topologi jaringan dengan routing EIGRP
    o Mahasiswa dapat mengimplementasikan pada Cisco Packet Tracer


II. Alat dan Bahan
   o Komputer/Laptop
   o Cisco Packet Tracer

III. Dasar Teori

           Jaringan Komputer adalah sebuah komputer, printer, dan peralatan lainnya yang terhubung. Informasi dan data bergerak melalui kabel-kabel sehingga menmungkinkan pengguna jaringan komputer dapat saling bertukar informasi, misalnya data atau dokumen, dapat mencetak melalui printer yang sama di dalam satu jaringan yang sama, dapat saling berkomunikasi antara pengguna satu dengan lainnya (email, chatting), untuk mengakses informasi (web browsing). Dan juga dapat bertukar dokumen dan data, mencetak pada printer yang sama dan bersama-sama mengunakan Hardware/Software yang terhubung dengan jaringan.

Konfigurasi Router dengan menggunakan Routing Protocol yang berbeda sesuai dengan sebelumnya, yaitu menggunakan Enhanced Interior Gateway Routing Protocol (EIGRP). EIGRP merupakan pengembangan dari Interior Gateway Routing Protocol (IGRP) yang memiliki jumlah Maksimum hop sebanyak 255 hop, dibandingakan dengan Routing Information Protocol (RIP) yang hanya memiliki jumlah maksimum hop sebanyak 15 hop.

             EIGRP biasa digunakan pada Sistem jaringan yang memiliki Network yang berskala besar. Selain itu juga, pada Router EIGRP, pada saat  mengkonfigurasinya,  tidak perlu memperkenalkan Network-Nework yang terhubung pada Router tetangga yang sudah tersimpan pada Routing Tablenya. Pada Router EIGRP ini, akan mencari sendiri Routing Table dari Router-Router tetangganya. Di dalam EIGRP juga,  mengenal yang namanya Autonomous System (AS) yang berfungsi untuk membuat semua Router yang berada pada AS yang sama berada dalam satu lingkup area sehingga dapat melakukan Komunikasi Data dari Sumber sampai ke Tujuan. Apabila masing masing Router di set dengan menggunakan AS yang berbeda, maka antara Router tersebut tidak dapat saling melakukan pertukaran data. Dalam Router EIGRP juga mendukung yang namanya VLSM (Variable Lenght Subnet Mask) dimana mengijinkan jalur-jalur secara otomatis diringkas pada batas angka Network..Pada EIGRP juga tidak melakukan update secara periodik, tetapi akan melakukan Update apabila terjadi perubahan pada Routing Table.

IV. Hasil Tugas Besar

Pengecekan IP Address dan Gateway Menggunakan Command Prompt

Pengaturan Routing Dynamic EIGRP

Disini, Perintah Rn(config)3#router eigrp 10

menyatakan bahwa disetting router Rn dengan memakai EIGRP dan as_numbernya 10.

Setelah itu akan ,engkonfigurasi EIGRP pada masing-masing router yang ada.

Router R1

R1>enable

R1#configure terminal

R1(config)#router eigrp 10

R1(config-  router)#network 192.168.1.4

R1(config-  router)#network 192.168.2.1

R1(config-  router)#exit

R1(config)#

Router R2

R2>enable

R2#configure terminal

R2(config)#router eigrp 10

R2(config-  router)#network 192.168.4.2

R2(config-  router)#network 192.168.7.1

R2(config-  router)#exit

R2(config)#

CSS (Cascading Style Sheets)

(Css dalam HTML)

Perngertian dan Keuntungan CSS
CSS adalah singkatan dari Cascading Style Sheets. CSS adalah aliran dari suatu kode ke kode lain yang saling berhubungan. CSS merupakan kumpulan kode-kode berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan dari CSS, yaitu Memudahkan dalam penggantian format secara keseluruhan, Lebih praktis, Untuk mengubah tampilan web, tanpa mengubah layout utamanya.

Sintaks CSS
Terdiri dari beberapa set peraturan yang memiliki: selector, property, value.
      selector {property: value;}
¡ Selector menunjukkan bagian mana yang hendak diatur/diformat.
¡ Property bagian dari selector yang hendak diatur.
¡ Value adalah nilai dari pengaturannya.
Contoh sintaks CSS yang lain :
               h1 {color: red;}
¡ Selector:h1
¡ Property=color
¡ Value=red
Terjemahan bahasa manusia: mengatur color dari h1 ke red (warna merah)

Pemasangan CSS dalam HTML
Ada 3 cara memasang CSS ke dalam HTML:
1.      Inline CSS
¡  Kode CSS dituliskan langsung ke dalam tag HTML.
¡  Penulisan cara ini tidak memerlukan selector dalam kode CSS.
¡  Cara ini sebaiknya hanya digunakan jika memformat suatu elemen hanya satu kali.
¡  Contoh:
<p style=“color:blue”>
            isi paragraf.
</p>

2.      Embedded CSS
¡  Menempelkan kode CSS diantara tag <head> dan </head> atau dapat juga diantara tag <body> dan </body>
¡  Contoh:
<head>
            <style type=“text/css”>
                        p {color:blue;}
            </style>
</head>

3.      Import CSS file
¡  Kode CSS dituliskan pada file tersendiri berekstensi .css
¡  Kemudian file .css tersebut diimport diantara tag <head> dan </head>
¡  Contoh:
<head>
            <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
¡  Pada kode href itulah yang merujuk pada file CSS, yaitu berada pada folder css dengan nama file style.css

Class dan ID Selector
Class Selector
         Class selector adalah penulisan selector untuk sekelompok elemen yang sering digunakan pada beberapa elemen. Format penulisan class selector:
.nama_class_selector {property: value;}
Deklarasi di HTML menggunakan atribut class. Contoh:
         <div class="nama_class_selector"> dan diakhiri dengan tag </div>
¡ Penulisan kode CSS:
.tengah {text-align: center;}
p.Tengah {color: red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
¡ Pemakaian kode CSS ke HTML:
         <div class="tengah">
           <p>Teks tengah akan berwarna merah</p>
           <h1>Tag h1 tengah akan berwarna hitam</h1>
         </div>
         <h1 class="kiri">Tag h1 kiri akan berwarna biru</h1>
         
ID Selector
ID selector digunakan untuk menentukan format style pada elemen tunggal yang unik. Menggunakan atribut id pada HTML, dan didefinisikan dengan tanda # pada sintaks CSS.
CSS Properties References


              Salah satu Source Code website yang mengandung CSS


 <html>
    <head>
        <style type="text/css">
            table{
                border-colapse:colapse;
                border:1px solid black;
            }

            #menu{
                height:40px;
                width:960px;
                background:url(bg-nav.jpg) repeat-x;
            }

            #menu table{
                border:none;
            }

            #menu a{
                color:white;
                text-decoration:none;
            }

            #menu a:hover{
                background-color:white;
                color:black;
            }

            #menu td{
                height:40px;
                text-align:center;
                vertical-align:middle;
                color:#fff;
                font: bold 14px Candara, Arial, Tahoma;
            }

            #isi{
                padding: 10 10 10 10;
            }

            #isi p{
                color:black;
                font: 11px Candara, Arial, Tahoma;
                padding-bottom:5px;
            }
            #isi ul{
            color:black;
                font: 11px Candara, Arial, Tahoma;
                padding-bottom:5px;
            }
            #isi img{
                boder: 1px solid black;
                width: 80px;
                height: 100px;
            }

            .table-menu{
                vertical-align: top;
                border-colapse: colapse;
                border: 1px solid black;
                background-color: #0066cc;
            }

            .footer{
                background-color:yellow;
            }
            .header{
                background-color:magenta;
        </style>
    </head>

    <body>
        <table width="70%" align="center">
        <td colspan=2 height=50 class="header">
             
                    <p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"><p>
                    <marquee><center>Selamat Datang dipembelajaran WEB
                    <br>Disini kita akan belajar CSS dan HTML5</br></p></p></center></marquee>
            <tr>
                <td colspan=2 background="header.jpg" width="100%" height="200 px" align="left" valign="centre" >
                <font size="20" color="gold" ><b><i>Pemrograman Berbasis WEB</i></b></font></td>

            </tr>
            <tr>
                <td colspan=2>
                    <div id="menu">
                        <table width="100%">
                            <tr>
                                <td align="center"><a href="">Depan</a></td>
                                <td align="center"><a href="">Profil</a></td>
                                <td align="center"><a href="">Produk</a></td>
                                <td align="center"><a href = "">Kontak</a></td>
                                <td align="center"><a href= "">Forum</a></td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td width="70%">
                    <div id="isi">
                        <h1 style="color:blue; font:bold 16px Candara, Arial, Tahoma;"><b> Ayo Minum Susu <b></h1>
                        <img src="susu.jpg"/>
                        <p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina.
                        Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat.
                        Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt,
                        es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia.
                        Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya.
                        Baik dari bayi sampai orang yang sudah lanjut usia.</p>
                        <p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut
                        juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino
                        yang baik bagi kesehatan tubuh. Dalam segelas susu terdapat antara lain:
                        <ul>
                            <li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil,
                            menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
                            <li>Zat besi, mempertahankan kulit tetap bersinar.</li>
                            <li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>
                            <li>Kalsium, menguatkan tulang.</li>
                            <li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>
                            <li>Yodium, meningkatkan kerja otak cepat.</li>
                            <li>Seng, menyembuhkan luka dengan cepat.</li>
                            <li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
                        </ul>
                        </p>
                    </div>
                </td>
                <td width="30%" class="table-menu"><i><marquee>
                    Ini adalah tugas 3 pemrograman berbasis web</i></marquee><br>
                    <br> Nama : Aditya Anggraini Yoga K.W
                    <br>NIM : 111 065 1172</br>
                    <br><font face = "kristen ITC" size = "4">CSS (Cascading Style Sheets)</font></br>
                    <p> CSS adalah aliran dari suatu kode ke kode lain yang saling berhubungan atau
                    dengan pengertian CSS merupakan kumpulan kode-kode berurutan dan saling berhubungan untuk
                    mengatur format / tampilan suatu halaman HTML.</p>
                    <p> Keuntungan dari CSS, yaitu Memudahkan dalam penggantian format secara keseluruhan,
                    Lebih praktis,Untuk mengubah tampilan web, tanpa mengubah layout utamanya.</p>
                    <p> Ada 3 cara memasang CSS ke dalam HTML: Inline CSS, Embedded CSS, dan Import CSS file</p>
                    </td>
            </tr>
            <tr>
                <td colspan=2 height=50 class="footer">
             
                    <p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;">
                    <p><center><TT><b>TERIMA KASIH TELAH MAMPIR MENGINTIP<br>
                    TYAZ WEI XIAO YOUNG BELAJAR WEB</TT><b></br></p></strike></center>
                 
                </td>
            </tr>
        </table>
    </body>
</html>

                OUTPUT

Penjelasan
1. Mengubah teks dalam list(kandungan susu)sehingga property font(warna,jenis font, ukurannya sama dengan paragraf pertama dapat menggunakan CSS
#isi p{
                color:black;
                font: 11px Candara, Arial, Tahoma;
                padding-bottom:5px;
            }
            #isi ul{
            color:black;
                font: 11px Candara, Arial, Tahoma;
                padding-bottom:5px;
            }

2. Mengubah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah menggunakan CSS
#menu a:hover{
                background-color:white;
                color:black;
            }
<tr>
                                <td align="center"><a href="">Depan</a></td>
                                <td align="center"><a href="">Profil</a></td>
                                <td align="center"><a href="">Produk</a></td>
                                <td align="center"><a href = "">Kontak</a></td>
                                <td align="center"><a href= "">Forum</a></td>
                            </tr>

3.Mengisi bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). dengan CSS dan source code HTML
 .table-menu{
                vertical-align: top;
                border-colapse: colapse;
                border: 1px solid black;
                background-color: #0066cc;
            }
<td width="30%" class="table-menu"><i><marquee>
                    Ini adalah tugas 3 pemrograman berbasis web</i></marquee><br>
                    <br> Nama : Aditya Anggraini Yoga K.W
                    <br>NIM : 111 065 1172</br>
                    <br><font face = "kristen ITC" size = "4">CSS (Cascading Style Sheets)</font></br>
                    <p> CSS adalah aliran dari suatu kode ke kode lain yang saling berhubungan atau
                    dengan pengertian CSS merupakan kumpulan kode-kode berurutan dan saling berhubungan untuk
                    mengatur format / tampilan suatu halaman HTML.</p>
                    <p> Keuntungan dari CSS, yaitu Memudahkan dalam penggantian format secara keseluruhan,
                    Lebih praktis,Untuk mengubah tampilan web, tanpa mengubah layout utamanya.</p>
                    <p> Ada 3 cara memasang CSS ke dalam HTML: Inline CSS, Embedded CSS, dan Import CSS file</p>
                    </td>

4. Menambahkan teks/ tulisan yang proporsional di bagian header halaman (diatas gambar warna magenta) dan edit sesuai keinginan dengan CSS dan Source code
.header{
                background-color:magenta;
                }
<td colspan=2 height=50 class="header">
             
                    <p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"><p>
                    <marquee><center>Selamat Datang dipembelajaran WEB
                    <br>Disini kita akan belajar CSS dan HTML5</br></p></p></center></marquee>
            <tr>
 5. Untuk tambahan yang lain adalah :

Tag <ul> digunakan untuk membuat daftar dengan penanda simbol. Tag ini mempunyai attribute dan value.
Fungsi tag <li> adalah untuk menambah daftar/isi dari tag <ul></ul>.
Fungsi <marquee> adalah untuk memodifikasi tulisan untuk jalan </marquee>
Kepala    <H?></H?>    (memiliki 6 tingkatan Heading)
Penataan Kepala  <H? ALIGN=LEFT|CENTER|RIGHT></H?>
Bagian  <DIV></DIV>

Huruf Tebal             <B></B>
Huruf Miring            <I></I>
Garis bawah           <U></U>
Huruf Mesin Ketik    <TT></TT>         (jarak antara tetap)
Warna Huruf              <FONT COLOR="#$$$$$$"></FONT>
Jenis Huruf                <FONT FACE="***"></FONT>

 

 

 

Asynchronus Javascript And XML

Kembali ke Laptop, sekarang ini akan melanjutkan dan membahas tentang AJAX. Disini saya merasa super dengan adanya pembelajaran pembrograman berbasis web ini.

AJAX adalah singkatan dari Asynchronous Javascript and XML. AJAX dibuat dari serangkaian teknologi dengan kemampuan: Javascript, XML, dan metode komunikasi asinkron antara client dan server.

Dalam prosesnya, AJAX menggunakan metode XMLHttpRequest untuk tukar menukar data antara client & server. Terdapat interaksi teknologi AJAX, yaitu :

• Javascript : menangkap isyarat dan menggunakan jalur komunikasi pada server melalui XMLHttpRequest untuk memanggil method yang tersimpan pada server.
• XML : sebagai mekanisme pengiriman data.
• Jika javascript telah menerima respon dari server, maka javascript memanipulasi struktur DOM dengan menampilkan data dari server dan diterima client melalui browser.

Kembali dengan materi sebelumnya bahwa telah disampaikan, bahwa Web Tradisional (Synchronus) dan Web Ajax (Asynchronus) dan dapat dijabarkan sebagai berikut :

• Web Tradisional (Synchronus)

Pada aplikasi web tradisional, sebuah aplikasi web berjalan secara sinkron (synchronously) antara client dan server.

Setiap client melakukan request, maka server akan merespon dengan mengirimkan / merefresh seluruh halaman.

Untuk jumlah client yang sedikit tentu tidak jadi masalah, namun dalam aplikasi berskala besar dengan ribuan permintaan dalam sekali waktu tentu jadi masalah yang bisa menghabiskan bandwidth pada sisi server.

• Web Ajax (Asynchronus)

Aplikasi web yang berbasis ajax bekerja secara asinkron (asynchronously).

Dimana proses dilakukan pada background / belakang layar. Proses pengiriman & penerimaan data antara server & client dapat berjalan tanpa harus merefresh / memperbaharui halaman.

Berikut adalah project AJAX yang telah dibuat dalam bentuk picture supaya agan bisa mencoba dan menganalisanya kembali : 

koneksi.php

index.php