Mengenal dan Memahami TCP/IP

Assalamualaikum Wr. Wb.

Hari ini saya belajar tentang TCP/IP yang di jelaskan oleh Mbah Suro.

Apa sih yang di maksud TCP/IP ?

           TCP/IP (singkatan dari Transmission Control Protocol/Internet Protocol) jika diterjemahkan adalah Protokol Kendali Transmisi/Protokol Internet, adalah gabungan dari protokol TCP (Transmission Control Protocol) dan IP (Internet Protocol) sebagai sekelompok protokol yang mengatur komunikasi data dalam proses tukar-menukar data dari satu komputer ke komputer lain di dalam jaringan internet yang akan memastikan pengiriman data sampai ke alamat yang dituju. Protokol ini tidaklah dapat berdiri sendiri, karena memang protokol ini berupa kumpulan protokol (protocol suite). Protokol ini juga merupakan protokol yang paling banyak digunakan saat ini, karena protokol ini mampu bekerja dan diimplementasikan pada lintas perangkat lunak (software) di berbagai sistem operasi Istilah yang diberikan kepada perangkat lunak ini adalah TCP/IP stack.

Sejarah TCP/IP
           
             Protokol TCP/IP dikembangkan pada akhir dekade 1970-an hingga awal 1980-an sebagai sebuah protokol standar untuk menghubungkan komputer-komputer dan jaringan untuk membentuk sebuah jaringan yang luas (WAN). TCP/IP merupakan sebuah standar jaringan terbuka yang bersifat independen terhadap mekanisme transport jaringan fisik yang digunakan, sehingga dapat digunakan di mana saja. Protokol ini menggunakan skema pengalamatan yang sederhana yang disebut sebagai alamat IP (IP Address) yang mengizinkan hingga beberapa ratus juta komputer untuk dapat saling berhubungan satu sama lainnya di Internet. Protokol ini juga bersifat routable yang berarti protokol ini cocok untuk menghubungkan sistem-sistem berbeda (seperti Microsoft Windows dan keluarga UNIX) untuk membentuk jaringan yang heterogen.

             Protokol TCP/IP selalu berevolusi seiring dengan waktu, mengingat semakin banyaknya kebutuhan terhadap jaringan komputer dan Internet. Pengembangan ini dilakukan oleh beberapa badan, seperti halnya Internet Society (ISOC), Internet Architecture Board (IAB), dan Internet Engineering Task Force (IETF). Macam-macam protokol yang berjalan di atas TCP/IP, skema pengalamatan, dan konsep TCP/IP didefinisikan dalam dokumen yang disebut sebagai Request for Comments (RFC) yang dikeluarkan oleh IETF.


 Arsitektur TCP/IP

            Arsitektur TCP/IP tidaklah berbasis model referensi tujuh lapis OSI, tetapi menggunakan model referensi DARPA. Seperti diperlihatkan dalam diagram, TCP/IP merngimplemenasikan arsitektur berlapis yang terdiri atas empat lapis. Empat lapis ini, dapat dipetakan (meski tidak secara langsung) terhadap model referensi OSI. Empat lapis ini, kadang-kadang disebut sebagai DARPA Model, Internet Model, atau DoD Model, mengingat TCP/IP merupakan protokol yang awalnya dikembangkan dari proyek ARPANET yang dimulai oleh Departemen Pertahanan Amerika Serikat.

 Contoh gambar arsitektur TCP/IP :

Model Referensi DARPA

               Model Referensi DARPA atau DARPA Reference Mode adalah sebuah referensi protokol jaringan yang digunakan oleh protokol TCP/IP yang dibuat oleh DARPA. Model referensi ini mirip dengan OSI Reference Model, di mana setiap lapisan yang ada di bawah menyediakan layanan untuk lapisan yang berada di atasnya, dan lapisan yang ada di atas menggunakan layanan untuk lapisan yang ada di bawahnya.

Model referensi ini hanya memiliki empat lapisan, yakni lapisan aplikasi (application layer), lapisan antar host (host-to-host layer), lapisan internetwork (internetworking layer), dan lapisan antarmuka jaringan (network interface layer). Keempat lapisan tersebut secara umum kompatibel dengan model referensi OSI, meski tidak dapat dipetakan dengan sempurna.      

Keterangan :

1. Lapisan aplikasi (application layer) adalah Lapisan yang bertanggung jawab dalam rangka menyediakan akses kepada aplikasi terhadap jaringan TCP/IP.

Contoh Protokol-protokol yang berjalan pada lapisan ini:

A. Dynamic Host Configuration Protocol (DHCP) adalah protokol yang berbasis arsitektur client/server yang dipakai untuk memudahkan pengalokasian alamat IP dalam satu jaringan. Sebuah jaringan lokal yang tidak menggunakan DHCP harus memberikan alamat IP kepada semua komputer secara manual. Jika DHCP dipasang di jaringan lokal, maka semua komputer yang tersambung di jaringan akan mendapatkan alamat IP secara otomatis dari server DHCP. Selain alamat IP, banyak parameter jaringan yang dapat diberikan oleh DHCP, seperti default gateway dan DNS server.

 B. Domain Name System (DNS) adalah sebuah sistem yang menyimpan informasi tentang nama host ataupun nama domain dalam bentuk basis data tersebar (distributed database) di dalam jaringan komputer, misalkan: Internet.   DNS juga layanan jaringan yang menerjemahkan nama situs web menjadi alamat internet.

C. Hypertext Transfer Protocol (HTTP) adalah sebuah protokol meminta/menjawab antara klien dan server. Sebuah klien HTTP (seperti web browser atau robot dan lain sebagainya), biasanya memulai permintaan dengan membuat hubungan ke port tertentu di sebuah server Webhosting tertentu (biasanya port 80). Klien yang mengirimkan permintaan HTTP juga dikenal dengan user agent. Server yang meresponsnya, yang menyimpan sumber daya seperti berkas HTML dan gambar, dikenal juga sebagai origin server. Di antara user agent dan juga origin server, bisa saja ada penghubung, seperti halnya proxy, gateway, dan juga tunnel.

D. File Transfer Protocol (FTP) adalah sebuah protokol Internet yang berjalan di dalam lapisan aplikasi yang merupakan standar untuk pengiriman berkas (file) komputer antar mesin-mesin dalam sebuah Antarjaringan.

E. Telnet (Telecommunication network) adalah sebuah protokol jaringan yang digunakan pada Internet atau Local Area Network untuk menyediakan fasilitas komunikasi berbasis teks interaksi dua arah yang menggunakan koneksi virtual terminal. TELNET dikembangkan pada 1969 dan distandarisasi sebagai IETF STD 8, salah satu standar Internet pertama. TELNET memiliki beberapa keterbatasan yang dianggap sebagai risiko keamanan.

F. Simple Network Management Protocol (SNMP), merupakan protokol standard industri yang digunakan untuk memonitor dan mengelola berbagai perangkat di jaringan Internet meliputi hub, router, switch, workstation dan sistem manajemen jaringan secara jarak jauh (remote)
 
2. Lapisan antar host (host-to-host layer) adalah Lapisan ini bertanggung jawab dalam rangka membuat komunikasi antar dua host, dengan menggunakan cara membuat sebuah sesi connection-oriented atau menyebarkan sebuah connectionless broadcast. Protokol-protokol yang berjalan pada lapisan ini adalah protokol Transmission Control Protocol (TCP) dan User Datagram Protocol (UDP).

3. Lapisan internetwork ( Internetworking Layer) Lapisan ini bertanggung jawab dalam melakukan routing dan pembuatan paket IP (dengan menggunakan teknik encapsulation). Protokol-protokol yang berjalan pada lapisan ini adalah Internet Protocol (IP), Address Resolution Protocol (ARP), Internet Control Message Protocol (ICMP), serta Internet Group Management Protocol (IGMP).

4. Lapisan antarmuka jaringan (Network interface layer) Lapisan ini bertanggung jawab dalam meletakkan frame-frame data di atas media jaringan. Protokol yang berjalan dalam lapisan ini adalah beberapa arsitektur jaringan lokal (seperti halnya Ethernet atau Token Ring), serta layanan teknologi WAN (seperti Plain Old Telephone Service (POTS), Integrated Services Digital Network (ISDN), Frame Relay, dan Asynchronous Transfer Mode (ATM).)


 Sumber : https://id.wikipedia.org/wiki/Internet_protocol_suite

Sekian dulu postingan dari saya semoga bermanfaat  bagi anda semua.

Wassalamualaikum Wr. Wb.

Read More

Membuat templates CSS

Assalammualaikum Wr. Wb.

Hari ini saya belajar membuat template CSS ternyata tidak sesulit yang saya pikirkan untuk mempelajari ini kita harus memahami strukturnya agar mudah dalam mengedit tempaltenya.

Tutorialnya :

1. Masuk ke browser tuliskan http://www.free-css.com/free-css-templates/.

2. Pilih desain template yangg anda sukai .

3. Klik pada gambar templatenya lalu pilih Download.

4. Kemudian klik ok.

5. Kemudian exstrak file nya tadi hingga menjadi contoh seperti folder dibawah ini.

6. Lalu buka folder yang di atas tadi cari yangg index.html seperti di bawah ini kemudian klik 2 kali.

7. Hasil templatenya tadi.

 8. Anda juga bisa mengeditnya sehingga tampilanya berubah cara mengeditnya pada index.html klik kanan pilih open with bluefish editor.bila anda mengunakan Windows buka index.htmlnya dengan notepad++. kemudian akan muncul script di bawah ini.

9. Silahkan edit script yang seperti gambar di atas ini

10. Kalau sudah klik ctrl+s kemudian di coba buka di web browser.


Sekian dulu postingan dari saya semoga bermanfaat bagi anda semua.


Wassalammualaikum Wr. Wb.

 

 

 

Read More

Mengulang Belajar Dasar Dasar CSS (border,margin,padding)

Asalammualaikum Wr. Wb.

Hari ini saya belajar mengulang kembali tentang dasar dasar css di W3School agar saya lebih memahaminya yaitu tentang Border, margin dan padding.

Border adalah tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal.

 contoh :

bordernya adalah yang garis warna merah. Kita biasa mengatur ketebalan garisnya kalau gambar di atas tadi saya kasih ketebalan.



Margin adalah ruang disekitar elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative. Style ini sering diterapkan untuk dapat memindahkan elemen lain di sekitarnya

contoh :

<style>
p.one {
    border: 7px solid red;
    background-color: yellow;

margin-top: 80px;
    margin-bottom: 80px;
    margin-right: 80px;
    margin-left: 80px;

    padding-top: 100px;
    padding-right: 50px;
    padding-bottom: 100px;
    padding-left: 80px;
}
</style>
Keterangan :
margin-bottom   = jarak bawah dengan yang tengah.
margin-top         = jarak atas dengan yang tengah
margin-right       =jarak kanan dengan yang tengah
margin-left         = jarak kiri dengan yang tengah

 padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar.

 contoh :

<style>
p.one {
    border: 7px solid red;
    background-color: yellow;

margin-top: 80px;
    margin-bottom: 80px;
    margin-right: 80px;
    margin-left: 80px;

    padding-top: 100px;
    padding-right: 50px;
    padding-bottom: 100px;
    padding-left: 80px;
}
</style>

Keterangan :

padding-top        = jarak atas  dengan margin
padding-right     = jarak kanan dengan margin
padding-bottom = jarak bawah dengan margin
padding-left       = jarak kiri dengan margin



 Hasil saya belajar css border,margin dan padding yang sudah sedikit saya edit :

<!DOCTYPE html>
<html>
<head>
<style>
p.css{
       background-color: green ;

    border: 6px solid yellow ;

    border-top-right-radius: 5em;
    border-top-left-radius: 5em;
    border-bottom-left-radius: 5em;
    border-bottom-right-radius: 5em;

    margin-top: 80px;
    margin-bottom: 80px;
    margin-right: 80px;
    margin-left: 80px;


    padding-top: 100px;
    padding-right: 80px;
    padding-bottom: 100px;
    padding-left: 120px;

 border-style: solid;

}
</style>
</head>
<body>

<h2> Belajar CSS border,margin and Padding :</h2>

<p class="css">Di sini adalah tempat padding</p>
<p class="one"></p>

</body>
</html>


 ini hasil script yang di atas bila sudah di jalankan di browser :

saya punya sedikit contoh contoh  untuk mengedit hasil css yang di atas ini :

1. Memberi background warna.

<style>
body {
    background-color: lightblue;
}
</style>

2. Menambahkan lebar dan panjang.

 <style>
div {
    width: 700px;
    height: 200px;
    border: 3px solid blue;
}
</style>

3. Memberi garis bawah pada text.

<style>
h3 {
    text-decoration: underline;
}
</style>

4. Merubah bentuk tulisan.

p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
}

5. Membuat tulisan berwarna pink.

<style>
a {
    color: hotpink;
}
</style>

 Kalau kurang puas silahkan belajar sendiri di W3School sekian dulu postingan dari saya semoga bermanfaat bagi anda semua.

Wassalammulaikum Wr. Wb.

Read More

Membuat Tampilan Table Gambar Dengan CSS

Assalammalaikum Wr. Wb.

Hari ini saya belajar CSS di W3School  tentang menampilkan gambar berganti dengan sendirinya dan table gambar.

Apa itu CSS ?

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.
CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

Berikut ini Tutorialnya :

1. Masuk lah ke text editor atau bluefish editor bila anda menggunakan linux mint,jika   anda menggunakan windows maksuklah ke notepad++.

2. Kemudian tuliskan / copykan scrip di bawah ini ke bluefish bila anda menggunakan linux atau yang menggunakan windows di notepad++ :


 <!DOCTYPE html>
<html>
<head>
<title> Achmad sulthoni 22-06-2013 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
  body{
      background-image: url("hujau.jpg");
    
      }

.mySlides {display:none;}

</style>
</head>
<body class="w3-container">
<div class="w3-topnav w3-large w3-red">
  <a href="#"><i class="fa fa-home w3-large"></i></a>
  <font color="yellow"><a href="http://macamolahragadunia.blogspot.co.id/">Dunia Olahraga</a>
  <a href="http://tilulas.com/2013/09/27/20-foto-mobil-sport-keren/">Mobil sport</a>
  <a href="http://hargamotor.co.id/review-motor/12-sepeda-motor-sport-terbaik-di-indonesia">Motor sport</a>
  <a href="http://www.waroengpit.com/2015/02/10-sepeda-gunung-hardtail-terbaik-berbahan-carbon-karbon.html">Sepeda Gunung</a> </font>
</div>
<h2><font color="lime"><center><b>Mobil Termahal Di DUNIA</b></center></font> </h2>
<font color="purple"><h3><marquee> Silahkan Pilih Mobil Sport Yang Anda Suka </marquee> </h3> </font>

<div class="w3-content w3-section" style="max-width:500px">

<img class="mySlides" src="Hennessey Venom GT.png" style="width:100%">
<img class="mySlides" src="Bugatti Veyron 16.4 Grand Sport Vitesse.png" style="width:100%">
<img class="mySlides" src="Ferrari LaFerrari.png" style="width:100%">
<img class="mySlides" src="Lamborghini Veneno Roadster.png" style="width:100%">
<img class="mySlides" src="Pagani Huayra.png" style="width:100%">

</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}  
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 2000);  
}
</script>


<div class="w3-container w3-teal">
 <font color="yellow"> <center> <h1>Mobil Mobil Antik Dunia</h1> </center> </font>
</div>

<div class="w3-row-padding w3-margin-top">

<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik1.jpg" style="width:100%">
<div class="w3-container">
<h5>www.mobilAntik.com</h5>
</div>
</div>
</div>

<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik2.jpg" style="width:100%">
<div class="w3-container">
<h5>Monterosso</h5>
</div>
</div>
</div>

<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik3.jpg" style="width:100%">
<div class="w3-container">
<h5>Vernazza</h5>
</div>
</div>
</div>

</div>
<div class="w3-row-padding w3-margin-top">

<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik4.jpeg" style="width:100%">
<div class="w3-container">
<h5>Manarola</h5>
</div>
</div>
</div>

<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik5.jpg" style="width:100%">
<div class="w3-container">
<h5>Corniglia</h5>
</div>
</div>
</div>

<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik6.jpg" style="width:100%">
<div class="w3-container">
<h5>Riomaggiore</h5>
</div>
</div>
</div>
</div>
</body>
</html>



3. Kalau semuanya sudah di tulis atau di copy maka silahkan pencet tombol ctrl+s (menyimpan file) atau pilih save as.

4. Bila menggunakan linux simpan dengan nama login.html di file directory anda dan bila menggunakan windows simpan dengan nama login.html di flie directory xammp kemudian htdocs kemudian simpan.

5. Bila gambarnya tidak muncul itu karena gambar nya tidak satu file dengan file script tadi dan anda harus mencari gambar lain kemudian sedikit mengedit di script nya yaitu pada nama gambarnya.


6. Kemudian lihat hasilnya bila anda menggunakan linux lihatlah hasilnya di browser dengan menuliskan.

 7. Bila anda menggunakan windows anda harus menghidupkan xammp control  dulu klik start.

Hasilnya script yang di atas tadi :

 

 Sekian dulu postingan dari saya lain kali saya akan belajar lebih mendalam tentang CSS semoga bermanfaat bagi anda semua.

Wassalammualaikum Wr. Wb.

Read More

Membuat Desain Halaman Login Sederhana

Asslammualaikum Wr. Wb.

Hari ini saya belajar membuat desain halaman login yang berbasis html,css dan javascript.


Tutorialnya :

1. Masuk lah ke text editor atau bluefish bila anda menggunakan linux mint,jika   anda menggunakan windows maksuklah ke notepad++.

2. Kemudian tuliskan / copykan scrip di bawah ini ke bluefish bila anda menggunakan linux atau yang menggunakan windows di notepad++ :

(script Css)

<<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);

@prim: #53e3a6;

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   
    font-weight: 300;
}

body{
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-weight: 300;
   
    ::-webkit-input-placeholder { /* WebKit browsers */
        font-family: 'Source Sans Pro', sans-serif;
            color:    white;
        font-weight: 300;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        font-family: 'Source Sans Pro', sans-serif;
         color:    white;
         opacity:  1;
        font-weight: 300;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        font-family: 'Source Sans Pro', sans-serif;
         color:    white;
         opacity:  1;
        font-weight: 300;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        font-family: 'Source Sans Pro', sans-serif;
         color:    white;
        font-weight: 300;
    }
}

.wrapper{
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
   
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 400px;
    margin-top: -200px;
    overflow: hidden;
   
    &.form-success{
        .container{
            h1{
                transform: translateY(85px);
            }
        }
    }
}

.container{
    max-width: 600px;
    margin: 0 auto;
    padding: 80px 0;
    height: 400px;
    text-align: center;
   
    h1{
        font-size: 40px;
        transition-duration: 1s;
        transition-timing-function: ease-in-put;
        font-weight: 200;
    }
}

form{
    padding: 20px 0;
    position: relative;
    z-index: 2;
   
    input{
        display: block;
        appearance: none;
        outline: 0;
        border: 1px solid fade(white, 40%);
        background-color: fade(white, 20%);
        width: 250px;
       
        border-radius: 3px;
        padding: 10px 15px;
        margin: 0 auto 10px auto;
        display: block;
        text-align: center;
        font-size: 18px;
       
        color: white;
       
        transition-duration: 0.25s;
        font-weight: 300;
       
        &:hover{
            background-color: fade(white, 40%);
        }
       
        &:focus{
            background-color: white;
            width: 300px;
           
            color: @prim;
        }
    }
   
    button{
        appearance: none;
        outline: 0;
        background-color: white;
        border: 0;
        padding: 10px 15px;
        color: @prim;
        border-radius: 3px;
        width: 250px;
        cursor: pointer;
        font-size: 18px;
        transition-duration: 0.25s;
       
        &:hover{
            background-color: rgb(245, 247, 249);
        }
    }
}

.bg-bubbles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    z-index: 1;
   
    li{
        position: absolute;
        list-style: none;
        display: block;
        width: 40px;
        height: 40px;
        background-color: fade(white, 15%);
        bottom: -160px;
       
        -webkit-animation: square 25s infinite;
        animation:         square 25s infinite;
       
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
       
        &:nth-child(1){
            left: 10%;
        }
       
        &:nth-child(2){
            left: 20%;
           
            width: 80px;
            height: 80px;
           
            animation-delay: 2s;
            animation-duration: 17s;
        }
       
        &:nth-child(3){
            left: 25%;
            animation-delay: 4s;
        }
       
        &:nth-child(4){
            left: 40%;
            width: 60px;
            height: 60px;
           
            animation-duration: 22s;
           
            background-color: fade(white, 25%);
        }
       
        &:nth-child(5){
            left: 70%;
        }
       
        &:nth-child(6){
            left: 80%;
            width: 120px;
            height: 120px;
           
            animation-delay: 3s;
            background-color: fade(white, 20%);
        }
       
        &:nth-child(7){
            left: 32%;
            width: 160px;
            height: 160px;
           
            animation-delay: 7s;
        }
       
        &:nth-child(8){
            left: 55%;
            width: 20px;
            height: 20px;
           
            animation-delay: 15s;
            animation-duration: 40s;
        }
       
        &:nth-child(9){
            left: 25%;
            width: 10px;
            height: 10px;
           
            animation-delay: 2s;
            animation-duration: 40s;
            background-color: fade(white, 30%);
        }
       
        &:nth-child(10){
            left: 90%;
            width: 160px;
            height: 160px;
           
            animation-delay: 11s;
        }
    }
}

@-webkit-keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}
@keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}

(script HTML)

<body>
<div class="wrapper">
    <div class="container">
        <h1>Welcome</h1>
       
        <form class="form">
            <input type="text" placeholder="Username">
            <input type="password" placeholder="Password">
            <button type="submit" id="login-button">Login</button>
        </form>
</body>

(script java scrip)

<style type="text/css">
$("#login-button").click(function(event){
         event.preventDefault();
   
     $('form').fadeOut(500);
     $('.wrapper').addClass('form-success');
});
</style>
</html>

3. Kalau semuanya sudah di tulis atau di copy maka silahkan pencet tombol ctrl+s (menyimpan file) .

4. Bila menggunakan linux simpan dengan nama login.html di file directory anda dan bila menggunakan windows simpan dengan nama login.html di flie directory xammp kemudian htdocs kemudian simpan.

5. Kemudian lihat hasilnya bila anda menggunakan linux lihatlah hasilnya di browser dengan menuliskan

file:///media/thoni/DATAPRAKTEK/contoh tampilan halaman login/login.html

6. Bila anda menggunakan windows anda harus menghidupkan xammp control  dulu klik start semuanya.

 Tampilan hasilnya :

Sekian dulu dari saya silahkan mencobanya semoga bermanfaat bagi anda semua.

Wassalammualaikum Wr. Wb.

Read More

Installasi PPDB Online Untuk Web Sekolah

Asslammualaikum Wr. Wb.

Hari ini saya akan berbagi tutorial menginstall ppdb_online lewat terminal pada linux mint.

Tutorialnya :

1. Masuk ke browser tuliskan Download cms ppdb online.

2. Downloadlah ppdb_online.zip

3. Masuk ke terminal ketikan.

  #sudo su
  #password
  #cd /home/thoni/Downloads
  #ls

 4. Copy ppdb_online.zip dengan perintah.

  # cp ppdb_online.zip /var/www/html/
  # cd /var/www/html/
  #ls

  5. Ketikan perintah ini.

   #apt-get install caja
   #caja

6. Masuk ke file directory html pada file ppdb_online.zip klik kanan pilih exstrack here.

 7. Kemudian kasih hak akses ketikan perintah ini.
   
 # chown -R www-data:www-data ppdb_online
 # chmod 775 *

  
 8. Buat database tuliskan pada browser localhost/phpmyadmin masukan password anda.

9. Buat database dengan nama ppdb_online lalu klik create.

10. Klik pada nama databasenya lalu pilih import klik browser.

11. Cari file yang enxtensinya ppdb_online.sql klik satu kali lalu pilih open.

12. Bila importnya berhasil akan muncul gambar seperti ini.

13. Masuk ke browser tuliskan localhost/ppdb_online/ untuk melihat halaman depan kalau ingin melihat halaman admin tuliskan localhost/ppdb_online/user/.

14. Hasilnya seperti gambar di bawah ini.

 a. Halaman depan.

 b. Halaman adminnya.

 Bila hanya muncul tulisan koneksi gagal ikut lah tutorial berikut ini :


Pertama masuk ke file directory ppdb_online cari file yang extensinya config.php.

Kedua pada file config.php klik kanan lalu openwith text editor.

Ketiga pada database name ganti sesuai nama datase yang anda buat tadi dan juga isiskan password anda.

contoh :

$server =  "localhost";
$username = "root";
$password = "thoni";
$database = "ppdb_online";

 Sekian dulu tutorial dari saya semoga bermanfaat bagi anda semua silahkan mencoba.

Wassalammualaikum wr. Wb.

Read More

Melihat IP lewat Terminal linux mint

Assalammualaikum Wr. Wb.

Hari ini saya akan berbagi tentang cara melihat IP kita dan cara melihat file dikomputer orang lain pada linux mint.

Melihat IP kita ini Tutorialnya :

1. Masuk ke terminal ketikan sudo su lalu enter masukan password anda.

2. Kemudian tuliskan perintah apt-get install ssh.

3. Bila muncul tulisan ini enter saja.

4. Kemudian tuliskan perintah ifconfig.

IP nya adalah : 192.168.124.232

5. Ketikan IP kita di browser bila berhasil akan muncul seperti gambar ini.

Melihat file di komputer orang lain ini tutorialnya :

1. Masuk ke file directory komputer.

2. Lihat diatas ada tulisan file lalu klik kanan pilih connect to server.

3. Masukan IP komputer orang yang anda ingin lihat filenya.

  type nya di ganti SSH
  user name : (nama komputer yang ingin dilihat file nya)
  password : (password komputer yang ingin dilihat file nya)

4. Kemudian klik conect.

5. Bila berhasil akan muncul (nama komputer orang lain) on seperti gambar di bawah ini.

Sekian dulu informasi dari saya semoga bermanfaat bagi anda semua.

Wassalammualaikum Wr. Wb.

Read More

Membuat Table lewat aplikasi Layoutit!

Assalammualaikum Wr. Wb.


Hari ini saya belalajar menampilkan table di website dengan cepat dan mudah


Tutorialnya :

1. Buka web browser ketikan www.layoutit.com

2. Pilih start now with bostrap3.

 3. Lihat pojok kiri atas pilih ukuran yang anda inginkan lalum
 klik drag dan tarik ketengah.
 

 4. Lihat pojok kiri atas klik base css pilih table klik drag dan tarik ketengah tumpuk di atas bagian yang tadi.

 5. Kalau sudah klik preview untuk melihat hasilnya terlebih dahulu sebelum di simpan.

6. Lalu klik Downloads seperti di gambar ini.

 7. Kemudian pilih continue non longged.

 8. Lalu klik Downloads.zip.

9. Lalu klik save file.

10. Kemudian lihat ke file directory Downloads.

11. Terus klik kanan pilih extract here hingga keluar folder bernama layoutit.

12. Kemudian klik folder layoutit,klik src, terus pada index.html klik 2 kali.

 13. Hasilnya seperti ini.

Sekian tutorial dari saya selamat mencoba bagi anda semua.

Wassalammualaikum Wr. Wb.

Read More