Sabtu, 03 Juni 2017

Final Project

Pendaftaran Online SBMPTN 2017

1. Log In Sebagai Admin
2. Registrasi Siswa, Log In Siswa

3. Halaman Informasi

4. Slip Pembayaran

5. Upload Pasfoto Siswa

6. Isi Biodata Siswa

7. Isi Informasi Pendidikan Siswa

8. Isi Prodi dan Lokasi Ujian Siswa

9. Kartu Peserta

10. List Siswa Terdaftar (Log In Sebagai Admin)


link: http://pwebsbmptn.000webhostapp.com/


Diposting oleh di Tidak ada komentar:

Jumat, 07 April 2017

Tugas 4 (Bootstrap)

Latihan 1 (Membuat Carousel)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="Bluefish 2.2.4">
<meta name="dcterms.created" content="Sen, 07 Des 2015 23:08:13 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Latihan Bootstrap</h1>
<h5><em class="text-muted">Berlatih Bootstrap</em></h5>
<div class="nav-container">
<ul class="nav nav-justified">
<li><a href="index.html">Home</a></li>
<li><a href="#">Favorite</a></li>
<li><a href="#">Hot Menu</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="kiri-atas">
<h3>Kolom Kiri Atas</h3>
</div>
</div>
<div class="col-sm-8 slide-row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/jakarta.jpg" alt="">
<div class="carousel-caption">
<h3>Jakarta</h3>
</div>
</div>
<div class="item">
<img src="images/bandung.jpg" alt="">
<div class="carousel-caption">
<h3>Bandung</h3>
</div>
</div>
<div class="item">
<img src="images/surabaya.jpg" alt="">
<div class="carousel-caption">
<h3>Surabaya</h3>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h2>Kolom 1</h2>
<p>Ya ini saya yang meng</p>
</div>
<div class="col-md-4">
<h2>Kolom 2</h2>
<p>Bwewew</p>
</div>
<div class="col-md-4">
<h2>Kolom 3</h2>
<p>Daai</p>
</div>
</div>
<hr>
</div>
<footer class="footer">
<div class="container">
<p>&copy;Faris Salbari</p>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


Latihan 2 (Membuat NavBar)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default">
   <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
           <li role="separator" class="divider"></li>
           <li><a href="#">Separated link</a></li>
           <li role="separator" class="divider"></li>
           <li><a href="#">One more separated link</a></li>
          </ul>
       </li>
   </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
           <li role="separator" class="divider"></li>
           <li><a href="#">Separated link</a></li>
       </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</body>
</html>



Latihan 3 (Digabungkan)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default">
   <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
           <li role="separator" class="divider"></li>
           <li><a href="#">Separated link</a></li>
           <li role="separator" class="divider"></li>
           <li><a href="#">One more separated link</a></li>
          </ul>
       </li>
   </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
           <li role="separator" class="divider"></li>
           <li><a href="#">Separated link</a></li>
       </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
      <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Latihan Bootstrap</h1>
          <h5><em class="text-muted">Berlatih Bootstrap</em></h5>
          <div class="nav-container">
            <ul class="nav nav-justified">
              <li><a href="index.html">Home</a></li>
              <li><a href="#">Favorite</a></li>
              <li><a href="#">Hot Menu</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">About Us</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="kiri-atas">
            <h3>Kolom Kiri Atas</h3>
          </div>
        </div>
        <div class="col-sm-8 slide-row">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <img src="images/jakarta.jpg" alt="">
                <div class="carousel-caption">
                  <h3>Jakarta</h3>
                </div>
              </div>
              <div class="item">
                <img src="images/bandung.jpg" alt="">
                <div class="carousel-caption">
                  <h3>Bandung</h3>
                </div>
              </div>
              <div class="item">
                <img src="images/surabaya.jpg" alt="">
                <div class="carousel-caption">
                  <h3>Surabaya</h3>
                </div>
              </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
              <span class="icon-prev"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
              <span class="icon-next"></span>
            </a>
          </div>
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-md-4">
          <h2>Kolom 1</h2>
          <p>Ya ini saya yang meng</p>
        </div>
        <div class="col-md-4">
          <h2>Kolom 2</h2>
          <p>Bwewew</p>
        </div>
        <div class="col-md-4">
          <h2>Kolom 3</h2>
          <p>Daai</p>
        </div>
      </div>
      <hr>
    </div>
    <footer class="footer">
      <div class="container">
        <p>&copy;Faris Salbari</p>
      </div>
    </footer>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>


Diposting oleh di Tidak ada komentar:

Tugas 3 (Javascript)

Menggunakan awesomplete



<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="awesomplete.css">
<title>Form Mahasiswa</title>

<script src="awesomplete.js"></script>

</head>

<body class="bodystyles">

 <div class="header">
  <h1>Selamat Datang    !!!</h1>
 </div>
 <br><br>
<hr>
  <div>
    <label>
      Nama:<br />
      <input autofocus class="awesomplete" data-list="Faris, Fathur, Brilian, Brilina, Paul, Paum, Buyung, Buyum, Burung" />
    </label>
  </div>
  <div>
    <label>
      NRP:<br />
      <input autofocus class="awesomplete" data-list="5114100001, 5114100002, 5114100011, 5114100012, 5114100119, 5114100110" />
    </label>
  </div>
  <div>
    <label>
      Mata Kuliah:<br />
      <input autofocus class="awesomplete" data-list="PWEB, PBO, PAA, PAA2, SBD, STRUKDAT, MBD, KB, KK" />
    </label>
  </div>
  <div>
    <label>
      Dosen:<br />
      <input autofocus class="awesomplete" data-list="Pak Fajar, Pak Ridho, Bu Wija, Bu Sarwo, Pak Dwi, Bu Bilqis" />
    </label>
  </div>
  <div>
    <tr>
      <td><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Simpan</button></td>
      <td><button type="button" style="background-color: #f44336; border-radius: 4px; color: white;width: 80px; height: 40px;">Batal</button></td><br>
    </tr>
  </div>
</div>


</body>

</head>

</html>
Diposting oleh di Tidak ada komentar:

Jumat, 31 Maret 2017

Design Web UTS

Design Halaman Home



Design Halaman Profile
Diposting oleh di Tidak ada komentar:

Jumat, 10 Maret 2017

Tugas 2 (Form HTML dan CSS)

HTML:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">
<title>website KAI</title>


<body class="bodystyles">

<ul>
  <li><a class="active" href="#home">Pemesanan Tiket Kereta Api Online</a></li>
  <li><a href="#news">Daftar Harga Kelas KA</a></li>
  <li><a href="#contact">Daftar Jadwal KA</a></li>
  <li><a href="#about">Daftar Pesanan Tiket</a></li>
</ul>

 <div class="header">
  <img src="kaai.png" alt="LogoKAI" />
  <h1>Selamat Datang    !!!</h1>
 </div>
 <br><br>
<hr>
<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" form="kelasform">
                              <option value="Eksekutif">Eksekutif</option>
                              <option value="Bisnis">Bisnis</option>
                              </select></td></tr>

  <tr>
  <td><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Simpan</button></td>
  <td><button type="button" style="background-color: #f44336; border-radius: 4px; color: white;width: 80px; height: 40px;">Batal</button></td><br>
  </tr>


 </table>
</div>

<div class="tablestyles1">
    <table>
        <tr>
            <th>No</th>
            <th>Nama Kereta</th>
            <th>Jadwal Berangkat</th>
            <th>Jadwal Tiba</th>
            <th>Dari</th>
            <th>Ke</th>
            <th>Harga(Kelas)</th>
        </tr>
        <tr>
            <td align="center">1</td>
            <td align="center">Argo Parahyangan</td>
            <td align="center">2014-04-22 - 06:00</td>
            <td align="center">2014-04-22 - 08:45</td>
            <td align="center">Gambir, Jakarta Pusat</td>
            <td align="center">Bandung, Bandung</td>
            <td align="center">Bisnis - 90.000</td>

            <td class="input1"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
        </tr>
        <tr>
            <td align="center">2</td>
            <td align="center">Argo Parahyangan</td>
            <td align="center">2014-04-23 - 13:01</td>
            <td align="center">2014-04-23 - 15:00</td>
            <td align="center">Gambir, Jakarta Pusat</td>
            <td align="center">Surabaya</td>
            <td align="center">Eksekutif  - 100.000</td>

            <td class="input2"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
        </tr>

    </table>
    </div>


</body>

</head>

</html>
CSS:

 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: blue;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.header img {
  padding-top: 10px;
  position: absolute; left:50px; top:50px;
  width: 120px;
  height: 100px;
}

.header h1 {
  position: relative;
  top: 23px;
  left: 200px;
  color: blue;
}

.bodystyles {
 background-color: white;
}

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

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

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

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

.tablestyles1 table{
  padding-left: 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;

}
Diposting oleh di Tidak ada komentar:

Kamis, 23 Februari 2017

Tugas 1 (Pemrograman Web)

<!DOCTYPE html>
<html>

<head>
    <title style="color:blue">My Profile</title>
</head>

<body>
<h1 title="Tentangku" style="color:blue">About Me</h1>
<br>
<br>
<br>

<h3 style="color:blue">Biodata</h3>
<pre style="color:blue">
    Nama                : Faris Salbari
    TTL                 : Jakarta, 17 Februari 1996
    Agama               : Islam
    Golongan Darah      : O
    Alamat Jakarta      : Jl.Perhubungan 1 DD/4, Jakarta Timur
    Alamat Surabaya     : Keputih Perintis
</pre>
<hr>

<h3 style="color:blue">Riwayat Pendidikan</h3>
<pre style="color:blue">
    SD                  : SD Islam Al-Azhar 13 Rawamangun (2002-2008)
    SMP                 : SMP Islam Al-Azhar 12 Rawamangun (2008-2011)
    SMA                 : SMAN 12 Jakarta (2011-2012)
                          SMAN 53 Jakarta (2012-2014)
    Perguruan Tinggi    : Informatika ITS (2014-...)
</pre>
<hr>

<button type="button" onclick='document.getElementById("ty").innerHTML = "Thank You!"'>Click Here!</button>
<h3 id="ty" style="color:blue"></h3>

</body>
</html>




Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)