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

Dasar-Dasar PHP

Dasar-Dasar dari PHP (Hypertext Preprocessor)

     Secara umum pengertian dari PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML.PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS. dan untuk sejarah nya PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP. Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang PHP: Hypertext Preprocessing.

          Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi. Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi 

          

Statement dan Comment

 Statement

Statement adalah satuan perintah dalam PHP. Statement harus diakhiri dengan tanda semicolon/titik-koma (;).

Contoh statement :

echo(“hello user … !”);

          echo(“4 + 5 = ” . 4+5); 

  Expression

Expression adalah satu bagian kecil kode yang akan dihitung hasilnya oleh php. Contoh expression :

4 + 5 

Penggunaan expression :  

echo(“4 + 5 = ” . 4+5);

 

Comment

Comment adalah bagian dari kode yang tidak dieksekusi/dijalankan. Comment dibuat untuk memperjelas atau memberi keterangan pada kode program.

Ada dua cara menulis comment : comment satu baris dan comment banyak baris.

Comment satu baris dibuat dengan menggunakan tanda //. Semua statement yang ada di kanan // tidak dijalankan oleh interpreter. Contoh penggunaan:

echo(“4 + 5 = ” . 4+5); // menampilkan hasil 4 + 5

      Comment banyak baris dibuat dengan menggunakan pasangan /* dan */.  Semua  tulisan  yang         dibuat  di  antara  tanda  tersebut tidak  akan dieksekusi oleh interpreter. 

   

Variabel dan Tipe Data

Variabel

       Variabel di PHP diawali dengan tanda $. Untuk dapat menggunakan variabel, ada dua langkah yang harus dilakukan, deklarasi dan inisialisasi.

Ada beberapa aturan yang diikuti berkenaan dengan penggunaan nama variabel. Aturan pemberian nama variabel :

‰      Dimulai dengan tanda $

‰      Karakter pertama harus huruf atau garis bawah ( _ )

‰      Karakter berikutnya boleh huruf, angka, atau garis bawah.

Tipe data

Dalam bahasa pemrograman yang lain, ada bermacam-macam tipe data, misalnya integer(bilangan bulat),   float(bilangan pecahan), char(karakter angka dan huruf), string(kumpulan huruf atau kata), dan berbagai tipe lainnya.

PHP mengenal dua tipe data sederhana; numerik dan literal. Ditambah dengan dua tipe data yang tidak sederhana, yaitu array dan object.

Passing Variable

Variabel dapat di-passing atau diteruskan ke halaman web berikutnya yang diakses user. Ada beberapa teknik untuk meneruskan variabel, diantaranya :

‰      Melalui URL

‰      Melalui Form

‰      Melalui Cookie

Operators

    Operator digunakan untuk memanipulasi nilai suatu variabel. Variabel yang nilainya dimodifikasi oleh operator disebut operand. Contoh penggunaan operator misalnya 13 - 3. 13 dan 3 adalah operand. Tanda "-" disebut operator.

Untuk kemudahan penjelasan, operator diklasifikasikan menjadi :

‰      Arithmetic Operator

‰      Assignment Operator

‰      Comparison Operator

‰      Logical Operator

‰      Lain-lain

A.  Arithmetic operator

Arithmetic   Operator   digunakan    untuk  melakukan   perhitungan matematika. Misalnya

 $a = 5 + 3;

Operator "+" berfungsi untuk menambahkan kedua operand (5 dan 3). Ada beberapa arithmetic operator, yaitu :

‰      + : penjumlahan

‰      - : pengurangan

‰      * : perkalian

‰      / : pembagian

‰      % : nilai sisa pembagian 

                 Untuk Lebih Jelasnya pada Operator Aritmatika, berikut adalah contoh script :

<!DOCTYPE html>
<html>
<head> <title>Operator Perhitungan</title></head>
<body bgcolor="blue"text="pink">
<font face ="kristen ITC" size=4>
<h1>.::.TUGAS 2.::.</h1>
<h2>.: Pemrograman Berbasis WEB :.</h2>
<p> Pembuatan Kalkulator/perhitungan (operator) menggunakan PHP </p>
<form method ="post">
<table><tr>
<td align ="centre"> Angka 1</td>
<td>-</td>
<td align ="centre"> Angka 2</td>
</tr><tr>
<td><input type ="number" name="angka1" value="<?php echo $_POST['angka1'];?>" required></td>
<td>-</td>
<td><input type ="number" name="angka2" value="<?php echo $_POST['angka2'];?>" required></td>
<td>=</td>