Kamis, 21 September 2017

PBO | Pertemuan 2 - Mengenal BlueJ

Java Code dengan BlueJ

Membuat Time Class

 
Membuat Time Test


Hasilnya
Diposting oleh di Tidak ada komentar:

Kamis, 07 September 2017

Brilian Widya Mustofa - 5114100047

Nama             : Brilian Widya Mustofa
NRP               : 5114100047
Semester        : 7
Kuliah            : Pemrograman Berorientasi Objek 2
Asal Sekolah  : SMAN 02 Lumajang
Target Kuliah : Lulus kuliah / Sukses Bisnis Kaos / Sukses Band-bandan
Foto Profil     :
Menyusul
Diposting oleh di Tidak ada komentar:

Jumat, 07 April 2017

Javascript, not Javanese

Assalamualaikum Wr. Wb.
Pada kesempatan kali ini saya akan membagikan ilmu yang saya dapat dari mata kuliah Pemrograman Web.
Tanpa basa basi, monggo check this out!

Code :
<html>
<script src="awesomplete.js"></script>
<link rel="stylesheet" href="awesomplete.css" />
    <head><title>Form Rencana Studi</title></head>
    <body>
    <table border="4" bgcolor="#FFFFFF" align="center" height="500" width="400" cellpadding="20">
    <tr>
    <td>
    <b><font color="black" size="10" style="font-family:Impact"><i> FRS </i></font></b>
    <p style="font-family:Futura Md BT"> Masukkan Nama depan, Nama Belakang, NRP, Mata Kuliah, Nama Dosen! </p>
    <p style="font-family:Futura Md BT"><font size="2">Nama Depan</font></p>
    <input type="text" Name="nama" size="20" placeholder="Nama Depan">
    <p style="font-family:Futura Md BT"><font size="2">NRP</font></p>
    <input type="text" Name="NRP" size="46" placeholder="NRP">
    <p style="font-family:Futura Md BT"><font size="2">Mata Kuliah *PAA 2, PWEB, IMK, KIJ, RK, MBD</font></p>
    <input type="text" Name="Mata Kuliah" size="46" placeholder="Mata Kuliah" autofocus class="awesomplete" data-list="PAA 2, PWEB, IMK, KIJ, RK, MBD">
    <p style="font-family:Futura Md BT"><font size="2">Nama Dosen</font></p>
    <input type="text" Name="Nama Dosen" size="46" placeholder="Nama Dosen" autofocus class="awesomplete" data-list="Wijayanti N Khotimah, Fajar Baskoro, Bagus Jati, Daniel O, Dwi S"><br>
    <br><br>
    <input href="www.google.com" target="_blank" value="Submit" style="background-color: #FF0000; height: 50; width: 150;"type="submit">
    </td>
    </tr>
   
    </body>
    </html>

CSS(From Awesomeplete :

.awesomplete [hidden] {
    display: none;
}

.awesomplete .visually-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.awesomplete {
    display: inline-block;
    position: relative;
}

.awesomplete > input {
    display: block;
}

.awesomplete > ul {
    position: absolute;
    left: 0;
    z-index: 1;
    min-width: 100%;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
}

.awesomplete > ul:empty {
    display: none;
}

.awesomplete > ul {
    border-radius: .3em;
    margin: .2em 0 0;
    background: hsla(0,0%,100%,.9);
    background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: .05em .2em .6em rgba(0,0,0,.2);
    text-shadow: none;
}

@supports (transform: scale(0)) {
    .awesomplete > ul {
        transition: .3s cubic-bezier(.4,.2,.5,1.4);
        transform-origin: 1.43em -.43em;
    }
   
    .awesomplete > ul[hidden],
    .awesomplete > ul:empty {
        opacity: 0;
        transform: scale(0);
        display: block;
        transition-timing-function: ease;
    }
}

    /* Pointer */
    .awesomplete > ul:before {
        content: "";
        position: absolute;
        top: -.43em;
        left: 1em;
        width: 0; height: 0;
        padding: .4em;
        background: white;
        border: inherit;
        border-right: 0;
        border-bottom: 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .awesomplete > ul > li {
        position: relative;
        padding: .2em .5em;
        cursor: pointer;
    }
   
    .awesomplete > ul > li:hover {
        background: hsl(200, 40%, 80%);
        color: black;
    }
   
    .awesomplete > ul > li[aria-selected="true"] {
        background: hsl(205, 40%, 40%);
        color: white;
    }
   
        .awesomplete mark {
            background: hsl(65, 100%, 50%);
        }
       
        .awesomplete li:hover mark {
            background: hsl(68, 100%, 41%);
        }
       
        .awesomplete li[aria-selected="true"] mark {
            background: hsl(86, 100%, 21%);
            color: inherit;
        }
/*# sourceMappingURL=awesomplete.css.map */



Hasil Screencapture :
Suggestion pada Mata Kuliah :
 Suggestion pada Nama Dosen :

Thanks guys!
Diposting oleh di Tidak ada komentar:

Bootstrap...Bootstrap...Bootstrap!!!

Assalamualaikum Wr. Wb.
Pada kesempatan kali ini saya Brilian Widya Mustofa akan sedikit berbagi ilmu mengenai penerapan bootstrap.
Langsung saja tanpa panjang lebar guys!
Ini code-nya :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

   <header>
    <h1 align="center"; style="font-family:Impact;"><i>COOLLIKE CLOTHING CO. - TRY BOOTSTRAP</i></h1>
    <h3 align="center"; style="font-family:Futura Md BT;">Brilian Widya Mustofa</h3>
    <p align="center">5114100047</p>
  </header>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/DSC_0726.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="images/DSC_0729.jpg" alt="Chania" width="460" height="345">
      </div>
   
      <div class="item">
        <img src="images/DSC_0754.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="images/DSC_0765.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
    <div class="copy">
          <p align="center">© Coollike Clothing co. 2017 by Brilian Widya Mustofa 5114100047</p>
    </div>

</body>
</html>

Ini screenshot dari hasil code diatas, monggo :)
Terima Kasih...

Diposting oleh di Tidak ada komentar:

Jumat, 31 Maret 2017

Design Web






Diposting oleh di Tidak ada komentar:

Jumat, 10 Maret 2017

Simple form HTML ft. CSS


HTML :
<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
 <title>KERETA API INDONESIA - Pemrograman WEB</title>
<body class="bodystyles">
 <div class="header">
  <a href="https://kai.id/"target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIkpXg9A_26WQOZzSZtf7BQt5PN10k2iP7hmm3T6VxB0668UKRdZPSVX3PBSbQU8agaywk_Lgr9STYh9w5YOT1Zbic3TDil0v16lCA5_wLwqkhyIJxB2xvZni0UJ8yHqV6uT7pB540qs/s1600/Logo+Kereta+Api+baru+cdr.png"></a>
  <h1>Selamat Datang !!!</h1>
 </div>
<div >
 <table class="tablestyles" >
  <form name ="input" action="html_form_action.asp" method="get">
      <tr><td> Nama Kereta:</td><td><input type="text" name="name" align="center" id="name" required></td></tr>
      <tr><td> Tanggal Berangkat:</td><td><input type="date" name="departdate" align="center" required></td></tr>
      <tr><td> Tanggal Tiba:</td><td><input type="date" name="arrivedate" align="center" required></td></tr>
      <tr><td> Jam Berangkat:</td><td><input type="time" name="departtime" align="center" required></td></tr>
      <tr><td> Jam Tiba:</td><td><input type="time" name="arrivetime" align="center" required></td></tr>
      <tr><td> Dari:</td> <td><input type="text" name="from" align="center" required></td></tr>
      <tr><td> Ke:</td><td><input type="text" name="to" align="center" required></td></tr>
      <tr><td> Kelas: </td><td><select name="kelas" align="center" required>
                      <option value="ekonomi">Ekonomi</option>
                      <option value="eksekutif">Eksekutif</option>
                      <option value="vip">VIP</option>
                      </select></td></tr>
  <tr>
  <td><input type="submit" value="Pesan"> </td>
  <td><input type="reset" value="Batal"> </td><br>
  </tr>
 </table>
</div>
</body>
</head>
</html>


CSS :
 .header img {
  position: absolute; left:50px; top:50px;
  width: 250px;
  height: 150px;
}

.header h1 {
  position: relative;
  font-family: Impact;
  top: 50px;
  left: 600px;
  margin: center;
  background-color: #ece8e5;
}

.bodystyles {
 background-color: #ece8e5;
}

.tablestyles input[type=text],input[type=date],input[type=time] {
    padding: 10px;
    width: 100%;
    height: 10px;
    border-radius: 5px;
}
.tablestyles select[name=kelas]{
    padding: 10px;
    width: 115%;
    height: 20px;
    border-radius: 5px;
}

.tablestyles {
 margin-top: 80px;
 margin-left:auto;
    margin-right:auto;
}

.tablestyles input[type=submit]{
 background-color: red;
 text-align:center;
 position: center;
 padding: 5px 30px;
}

.tablestyles  input[type=reset]{
 background-color: blue;
 text-align:center;
 padding: 5px 30px;
}

.tablestyles1 table,.tablestyles1 tr,.tablestyles1 th,.tablestyles1 td[align="center"]{
 margin-top: 30px;
 border-collapse: collapse;
 padding-left: 5px;
 padding-right: 30px;
 border:1px solid black;
}


.tablestyles1 input[type=submit]{
 background-color: red;
 padding: auto;
 text-align:center;
}

.tablestyles1  input[type=reset]{
 background-color: blue;
 padding: auto;
 text-align:center;
}

 SEKIAN dan TERIMA KASIH
Diposting oleh di Tidak ada komentar:

Kamis, 23 Februari 2017

BRILIAN WIDYA MUSTOFA
5114100047

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="images/icon.png"/>
<title>Nyobain PWEB</title>
</head>
<body>

<body style="background-color:black;">

<h1 style="font-family:Futura MD BT; color:white; text-align:center;">BRILIAN WIDYA MUSTOFA</h1>
<p style="font-family:Futura MD BT; color:white;">Nama : Brilian Widya Mustofa </p>
<p style="font-family:Futura MD BT; color:white;">NRP : 5114100047</p>
<p style="font-family:Futura MD BT; color:white;">Asal : Lumajang - Jawa Timur</p>
<p id="navigation">
      <a style="font-family:Futura MD BT; color:white; text-decoration:none;" href="http://coollikeid.kuliahweb.com/"target="_blank">Owner and Founder COOLLIKE Clothing co.</a>
</p>
<p style="font-family:Futura MD BT; color:white;">Link Social Media :</p>
        <a href="https://www.facebook.com/profile.php?id=1100547804"target="_blank" class="logo">
            <img src="images/icon-facebook-hover.jpg" alt="">
        </a>
        <a href="https://instagram.com/brilianwm"target="_blank" class="logo">
            <img src="images/icon-instagram-hover.jpg" alt="">
        </a>
        <a href="https://twitter.com/lian_mustofuck"target="_blank" class="logo">
            <img src="images/icon-twitter-hover.jpg" alt="">
        </a>
</body>
</html>
Jika kita klik tulisan "Owner and Founder COOLLIKE Clothing co." maka akan terhubung ke halaman Cool Like Clothing co.
Jika diklik icon social media akan langsung menuju halaman social media saya.
Terima Kasih!
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)