-
 1. Konsep Framework dalam Aplikasi Berbasis Framework Framework sebagai suatu kumpulan fungsi (libraries) atau dapat istilahkan sebagai koleksi/ kumpulan potongan program yang disusun atau diorganisasikan sedemikian rupa sehingga dapat digunakan untuk membantu membuat aplikasi yang utuh tanpa harus membuat semua kodenya dari awal. a. Jenis Framework - Berbasis Desktop : Untuk membangun aplikasi berbasis dekstop - Berbasis Websites : Untuk membangun aplikasi berbasis web b. Fungsi Framework 1) Membantu para developer dalam perencanaan, pembuatan, dan pemeliharaan sebuah aplikasi. 2) Mempercepat proses pembuatan aplikasi, baik itu aplikasi berbasis desktop, mobile, ataupun web. 3) Aplikasi yang dihasilkan menjadi lebih stabil dan andal. Hal ini     dikarenakan Framework sudah melalui proses uji, baik stabilitas     maupun keandalannya. 4) Memiliki tingkat keamanan yang lebih. Hal ini dikarenakan     Framework telah mengantisipasi celah-celah keamanan yang mungkin     timbul. 5
Posting Komentar

Membuat tampilan website

-

 


Html

<!DOCTYPE html>

<html>

<head>

 <title>company Profil - www.mpriyanto.com</title>

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

</head>

<body>

<div id="landing">

 

  <div class="header">

    <a href="#" class="logo">Playphone Developers</a>

    <a href="#" class="button">Create Account</a>

    <a href="#" class="login">Login</a>

  </div>

  <div class="slider slider-1">

    <img class="ratio" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" />

    <input class="slide" type="radio" name="slider-1" id="s-1-1" /><label for="s-1-1"></label>

    <div>

      <img src="img/bg1.jpg" />

      <div class="content">

        <h3>Pace Komputer145</h3>

        <p>Kalian dapat memposting sesuka kalian.</p>

        <a href="#" class="button button-blue">Mulai</a>

      </div>

    </div>

    <input class="slide" type="radio" name="slider-1" id="s-1-2" /><label for="s-1-2"></label>

    <div>

      <img src="img/bg2.jpg" />

      <div class="content">

        <h3>Pace komputer145</h3>

        <p>Buktikan dan datang ketempat kami, semoga anda mendapatkan pilihan yang tepat!</p>

        <a href="#" class="button button-orange">Alamat</a>

      </div>

    </div>

    <input class="slide" type="radio" name="slider-1" id="s-1-3" checked /><label for="s-1-3"></label>

    <div>

      <img src="img/bg3.jpg" />

      <div class="content">

        <h3>Pace Komputer145</h3>

        <p>Melayani dengan baik dan benar.</p>

        <a href="#" class="button button">Coba Sekarang</a>

      </div>

    </div>

    <style type="text/css">

      #landing .slider-1 img.ratio {padding:0 33%;}

      #landing .slider-1 .content {max-width:33%; margin:5% 0 0 18%;}

      #landing .slider-1 .content h3 {color:#fff; font-size:2.125em; font-weight:normal; margin:0 0 4%;}

      #landing .slider-1 .content p {color:#fff; font-size:1.1em; font-weight:normal;}

      #landing .slider-1 .button {position:absolute; bottom:17%; min-width:12.5em; font-size:.95em; font-weight:normal; border-width:.14em;}

    </style>

  </div>

  <div class="menu">

    <a href="#">About</a><a href="#">Kontak</a><a href="#">Testimoni</a><a href="#">Review</a>

  </div>

  <div class="feature">

    <img class="picture" src="img/img1.png" />

    <h4 class="caption">Daftar</h4>

    <p class="summary">The Playphone SDK is built for mobile game developers. It is extremely lightweight and takes minutes to integrate. Further, you need to integrate only once.</p>

  </div>

  <div class="feature">

    <img class="picture" src="img/img2.png" />

    <h4 class="caption">Ketemu</h4>

    <p class="summary">Playphone is a games-only network fostering an ecosystem of highly qualified users that love playing mobile games. You won't find a better way to reach untapped mobile gamers globally</p>

  </div>

  <div class="feature">

    <img class="picture" src="img/img3.png" />

    <h4 class="caption">Nyewa</h4>

    <p class="summary">In high-growth emerging markets, we partner with the leading local OEMs, carriers and distributors in to drive installs for your games where Google Play can't</p>

  </div>

  <div class="slider slider-2">

    <img class="ratio" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" />

    <input class="slide" type="radio" name="slider-2" id="s-2-1" /><label for="s-2-1"></label>

    <div>

      <img src="img/bg1.jpg" />

      <div class="content">

        <h3>What they say</h3>

        <p>

          good

        </p>

        <small>

          Muhammad.Priyanto<br />

          Director of game development<br />

          June Software Inc

        </small>

      </div>

    </div>

    <input class="slide" type="radio" name="slider-2" id="s-2-2" checked /><label for="s-2-2"></label>

    <div>

      <img src="img/bg5.jpg" />

      <div class="content">

        <h3>What they say</h3>

        <p>

         belajar

        </p>

        <small>

          XII-RPL<br />

          Pelajar<br />

          Developers

        </small>

      </div>

    </div>

    <style type="text/css">

      #landing .slider-2 img.ratio {padding:0 30.4%;}

      #landing .slider-2 {margin-top:6em;}

      #landing .slider-2 .content h3 {font-size:1.125em; margin:0 0 3em; color:#99ce45; text-transform:uppercase; font-weight:normal;}

      #landing .slider-2 .content p {font-size:1.3em; color:#fff;}

      #landing .slider-2 .content small {font-size:1.125em; margin:3em 0 0; display:block; color:#fff; text-transform:uppercase; font-weight:normal;}

      #landing .slider-2 #s-2-1 + label + div > .content {max-width:30%; margin:8% 0 0 17%;}

      #landing .slider-2 #s-2-1 + label + div > .content p {font-size:1.6em}

      #landing .slider-2 #s-2-2 + label + div > .content {max-width:35%; margin:8% 0 0 16%;}

    </style>

  </div>

  <div class="extra">

   Mari belajar

    <br />

    <a href="#" class="button button-green">Get Started</a>

  </div>

  <div class="footer">

    <div class="column">

      <a href="#">Mulai</a>

      <a href="#">Profil Perusahaan</a>

      <a href="#">Blog</a>

    </div>

    <div class="column">

      <a href="#">About</a>

      <a href="#">Kontak</a>

      <a href="#">Alamat</a>

      <a href="#">Review</a>

    </div>

    <div class="column">

      <a href="#">Instagram</a>

      <a href="#">Facebook</a>

      <a href="#">WhatsApp</a>

    </div>

    <form class="column subscribe" action="javascript:void(0)">

      <h4 class="caption">Subscribe for updates</h4>

      <p class="summary">Stay informed on Playphone news, announcements and developer features!</p>

      <input class="email" type="email" placeholder="Enter your email" />

      <button type="submit">Submit</button>

    </form>

  </div>

  <div class="copyright">

    <span>pacekomputer145.blogspot.com</span>

    <a href="#">Terms of Use</a>

    <a href="#">EULA</a>

    <a href="#">Privacy Policy</a>

    <div class="social">

      <a href="#" class="fa fa-youtube-play"></a>

      <a href="#" class="fa fa-twitter"></a>

      <a href="#" class="fa fa-facebook"></a>

    </div>

  </div>

</div>

<script type="text/javascript">

 function doSlide (slider) {

  var id, o = slider.querySelectorAll("input.slide"), last = o.length-1, current = slider.querySelector("input.slide:checked");

  for (var i=0; i<o.length; i++) if (o[i] === current) {id = i; break;}

  o[id >= last ? 0 : id + 1].click();

}

function onSlide (e) {

  var o = e.target.parentNode;

  clearTimeout(o.autoslider);

  o.autoslider = setTimeout(function(){doSlide(o);}, 7e3);

}

$(function(){

  $(document).on("click", "input.slide", onSlide);

  $(".slider").each(function(){doSlide(this)});

});

</script>

</body>

</html>






css

html, body {margin:0; padding:0;}

#landing, #landing *, #landing :before, #landing :after {

  position:relative;

  margin:0;

  padding:0;

  box-sizing:border-box;

  vertical-align:middle;

  text-overflow:ellipsis;

  font-family:Montserrat, Arial, Helvetica, Tahoma, Verdana, sans-serif;

}

#landing {

  width:1500px;

  font-size:16px;

  padding-top:4.0625em;

  background:#fff;

  text-align:center;

}

#landing {font-size:1.061vw; width:auto;}

#landing > * {text-align:left;}

#landing .button {

  display:inline-block;

  padding:.75em 1.4em;

  border-radius:2em;

  font-weight:bold;

  line-height:normal;

  text-align:center;

  text-decoration:none;

  text-transform:uppercase;

  background-color:#99ce45;

  border:.125em solid #99ce45;

  color:#fff;

  transition:background .4s, color .4s, border-color .4s;

}

#landing .button:hover {background:transparent; color:#99ce45;}

#landing .button:active {opacity:.5;}

#landing .button-blue {background:#01b0fe; border-color:#01b0fe;}

#landing .button-blue:hover {background:transparent; color:#01b0fe;}

#landing .button-orange {background:#fe8f4f; border-color:#fe8f4f;}

#landing .button-orange:hover {background:transparent; color:#fe8f4f;}

#landing > .header {

  position:fixed;

  left:0;

  right:0;

  top:0;

  height:4.0625em;

  z-index:100;

  background:rgba(255,255,255,.9);

  padding:.9em 1.25em;

  line-height:2em;

  text-align:right;

  border-bottom:1px solid rgba(0,0,0,.1);

  word-spacing:2.5em;

}

#landing > .header > * {display:inline-block; word-spacing:normal;}

#landing > .header > .logo {

  display:inline-block;

  position:absolute;

  left:2em;

  width:12.66%;

  max-width:11.8em;

  letter-spacing:-.5em;

  white-space:nowrap;

  color:transparent;

  overflow:hidden;

  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALgAAAAiCAMAAADbEOPQAAAAWlBMVEUAAAABr/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4y9ToAAAAAHXRSTlMAQL9/7xAfn8/fYI8vcK9QJVnIpzb3tGlJCdeGenCNtI0AAAN9SURBVFjD7ZjpUuMwDIAd33au0hZ6LHr/19xIPlQ3lJYZZofOoj/YUiV/VmQ5QWy28LlsN+JHiod74sWPFLgv4kfKL/gd+QX/EFyOe3Myw+HtucAnbnx29xC46YYvLtd13w7+Ghv9rB8A70B+ebnvBn/FVJzidNbn3Qsa9vo5wBH2GPLkvMfZU4DvluELcN0cl7l7BvDlXA6vwKKtEDYrPmYeWnB769S1NoC1lhWmPfmmtQ9Zby/A35ZR6YH8CHa3wIcJ96ZMBVdYZJ5INNj8qxHclY3BTa9RG8uTU2L2ABBKh8jTMXtJcqBo6CdjAT8s+6XBn5dyJk2pnTV41BB6JcHPCdx4CEo5gIiREZckwNDaGHygCJMGbzJ4TCGLswPdq4XVZXDjE0i/REO/PoMPCw0NOmG39bRuVuBl1ZGWCzqBT+CyvsMEaFMOQGtjcJsjWA8y/dTnkBpUeljepIyoBD6BsugAgTKljKjp/ZPB8wg9TmvwxDnWHchCyKiOkkt/WxuDO+JBggCRjDUkYKUZTZuvA9AQc5S+UFS2voILiaOeja2YnFL0YdJcHIbSJ2pyWhuBNxFi3nqgGTmMqHV1OqNXmVvQ3TX4ewKvW3jHBUjWPbAdSohdEk/+Hgaq9XFtI3COUBWcyIhDBX32Ss8GYKgbgaBsAz5n8I2vNb5/DDwASydKvoI2rY3BI6hrcNWEdMCi2iYafepRDH7SVCBR5ytoWXZ8NONzV4RKAAtzJvrW9kjG55RxVb0wvc3no40SIDI4nkkWWnZ7q8bFVY3P7S/UEncCK9jWclqu8flGjfeNF2+0eIULcBOubs79jStflhZguaskMVkP3pJubQNIEVSJVboKh+Suwl5yhXDZODaBufec8BV4l2+TwQeQKYxLBj2WtE2U6bUN4PImMA58ihhSSOtTrhV4k+bOXILP0paOdclmy6F4s+R8AxzvKq/U1N6cqNBD7cb07Ne2HC1qjNAHvjkdKhzAxDfnMs/9GyQ3Fbn4aZgZfE/oo3vbvdMSh08+JLrU6eu7ilF0pCd7VU1rW83RBOl1p76rRHzeoZQQTvkV56IdkF+YBYPL5jyc+s8/3ez1Nxh1DZb7NtPxd19qhwMqWAbqKGvJfgwO5xfB+/1HH8sM/iVpwQG0Oxy742GnAZ4LvMov+MPy/4D7Cv5k/2bebAv4c/1j/y/QxJrPygnbMwAAAABJRU5ErkJggg==") no-repeat center left;

  background-size:contain;

}

#landing > .header > .button {font-size:.75em; border-width:.18em;}

#landing > .header > .login {

  font-size:.875em;

  color:#03b4fe;

  font-weight:bold;

  text-decoration:none;

  text-transform:uppercase;

  transition:all .2s;

  border:0 solid transparent;

}

#landing > .header > .login:before {

  content:"";

  display:inline-block;

  width:1.429em;

  height:1.429em;

  margin:-.2em .5em 0 0;

  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAUVBMVEUAAAABsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4pJ89bAAAAGnRSTlMA3etU5rMKqwaJW0hPRNAR88qUaybCgWI/MCVqoPAAAAC5SURBVBjTTZBXssMwDAOpZsmOS9or2fsfNBgqynh/RGKIIURzWqqBa6ip2ZcUgJyBkIY2Q1kns2ktMA8tXuzDJXY1EZ96Xr/zv55nJGlHZlOzIh4qNnKzhWIiIIKJwmKV1URGRHNP1cikaooueikD2cSBc3STXeURBVG8jLjdl4rNPvZKT77D3vNTRyS7wc1GpJY1Ov3tnvNxaDA3/2bhy08k9YOcGWe6c+J+PrLjRx60pQYpdWnevgG0mRAe7+n/PQAAAABJRU5ErkJggg==") no-repeat center center;

  background-size:contain;

}

#landing > .header > .login:hover {

  border:.166em solid #03b4fe;

  border-radius:2em;

  padding:0 1em;

}

#landing > .menu {

  text-align:center;

  background:#01b0fe;

  font-size:1.125em;

  padding:1.278em 0;

}

#landing > .menu > a {

  display:inline-block;

  width:12.5em;

  height:2em;

  line-height:2em;

  border:0 solid #0097db;

  border-width:0 2px;

  margin-left:-2px;

  color:#fff;

  text-decoration:none;

  text-transform:uppercase;

  transition:border-color .5s, color .1s;

}

#landing > .menu > a:first-child {border-left:0 none;}

#landing > .menu > a:last-child {border-right:0 none;}

#landing > .menu > a:hover {

  z-index:50;

  text-transform:none;

  font-size:1.335em;

  color:#0a5070;

  width:9.3635em;

  height:1.5em;

  line-height:1.5em;

  border-color:#01b0fe;

}

#landing > .feature {

  display:inline-block;

  width:23.75em;

  margin-top:5.125em;

  padding:0 1.625em;

  text-align:center;

  vertical-align:top;

}

#landing > .feature > .picture {width:11.9375em; max-width:191px; margin-bottom:2.25em;}

#landing > .feature > .caption {

  font-size:1.4em;

  font-weight:normal;

  margin-bottom:.8em;

  min-height:2.43em;

  color:#3e4e5c;

  text-align:left;

}

#landing > .feature > .summary {color:#737d85; font-size:.86em; text-align:left;}

#landing > .extra {display:inline-block; text-align:center; color:#3e4e5c; font-size:2.25em; width:13.333em; margin:1.5em 0 3em;}

#landing > .extra .button {font-size:.65em; padding:.62em 2.612em; text-transform:none; font-weight:normal; margin-top:1.5em;}

#landing > .footer {

  display:table;

  width:100%;

  padding:0 6em;

}

#landing > .footer > * {display:table-cell; vertical-align:top; line-height:2;}

#landing > .footer a {color:#01affe; text-decoration:none;}

#landing > .footer a:hover {color:#3e4e5c;}

#landing > .footer > .column:nth-child(1) a,

#landing > .footer > .column:nth-child(2) a,

#landing > .footer > .column:nth-child(3) a {display:block; font-size:.875em;}

#landing > .footer > .column:nth-child(1) a {font-size:1.125em;}

#landing > .footer > .subscribe {width:50%; top:-.5em;}

#landing > .footer > .subscribe > .caption {font-size:1.125em; font-weight:normal; color:#3e4e5c;}

#landing > .footer > .subscribe > .summary {font-size:.875em; color:#8e9ea9; margin-bottom:.5em;}

#landing > .footer > .subscribe > .email {

  width:83%;

  font-size:.875em;

  border:.125em solid #e4ebec;

  border-radius:3px;

  appearance:none;

  line-height:3em;

  padding:0 1em;

}

#landing > .footer > .subscribe > .email + button {

  width:17%;

  font-size:.875em;

  border:0;

  border-radius:3px;

  appearance:none;

  line-height:3em;

  padding:0 1em;

  text-align:center;

  text-transform:uppercase;

  background:#01affe;

  color:#fff;

  cursor:pointer;

  margin-left:-.4em;

}

#landing > .copyright {font-size:.875em; border-top:2px solid #eee; margin:2em 6.8em 0; padding:2em 0; color:#8e9ea9; word-spacing:1.5em;}

#landing > .copyright:after {content:""; display:block; height:0; overflow:hidden; float:none; clear:both;}

#landing > .copyright > * {word-spacing:normal;}

#landing > .copyright a {color:#01affe; text-decoration:none;}

#landing > .copyright a:hover {color:#3e4e5c;}

#landing > .copyright > .social {float:right; word-spacing:1.5em;}

#landing > .copyright > .social > * {word-spacing:normal;}

#landing > .copyright > .social > .ico:before {font-family:"ico"; font-size:1.8em;}

#landing > .copyright > .social > .fa:before {

  display: inline-block;

  font: normal normal normal 1.8em FontAwesome;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}


#landing .slider {position:relative; overflow:hidden; text-align:center;}

#landing .slider .content {text-shadow:0 0 1px rgba(0,0,0,.2)}

#landing .slider > img.ratio {display:inline-block; position:relative; box-sizing:border-box; width:100%; border:0 none; outline:0 none; margin:0; /* data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7 */}

#landing .slider > input.slide {position:absolute; width:0; height:0; margin:0; padding:0; border:0; opacity:0; overflow:hidden;}

#landing .slider > input.slide + label {display:inline-block; width:3.32em; height:3.125em; margin-top:-3.125em; padding:1.5em .25em 0; top:-.5em; cursor:pointer; z-index:100;}

#landing .slider > input.slide + label:before {content:""; display:block; border:1px solid rgba(255,255,255,.3); transition:border-color .2s;}

#landing .slider > input.slide + label:hover:before {border-color:rgba(255,255,255,.4);}

#landing .slider > input.slide:checked + label:before {border-color:rgba(255,255,255,1);}

#landing .slider > input.slide + label + div,

#landing .slider > input.slide + label + div > img:first-child,

#landing .slider > input.slide + label + div > img:first-child + div {position:absolute; z-index:0; top:0; left:0; right:0; bottom:0; text-align:left; overflow:hidden;}

#landing .slider > input.slide + label + div > img:first-child {width:100%; height:100%; opacity:.9;}

#landing .slider > input.slide + label + div {transition:opacity 1s, transform 1.5s; opacity:0; transform:scale(1.5); background:rgba(0,0,0,.8);}

#landing .slider > input.slide:checked + label + div {z-index:50; opacity:1; transform:scale(1);}

#landing .slider > input.slide + label + div:before {

  content:"";

  display:block;

  position:absolute;

  bottom:1px;

  left:0;

  width:0;

  opacity:0;

  z-index:100;

  background:#0097db;

  height:2px;

  transition:width 6.8s linear, opacity 3s 1s linear;

  box-shadow:0 0 2px rgba(0,0,0,.5);

}

#landing .slider > input.slide:checked + label + div:before {width:100%; opacity:1}



Komentar

Posting Komentar

Postingan populer dari blog ini

-
 1. Konsep Framework dalam Aplikasi Berbasis Framework Framework sebagai suatu kumpulan fungsi (libraries) atau dapat istilahkan sebagai koleksi/ kumpulan potongan program yang disusun atau diorganisasikan sedemikian rupa sehingga dapat digunakan untuk membantu membuat aplikasi yang utuh tanpa harus membuat semua kodenya dari awal. a. Jenis Framework - Berbasis Desktop : Untuk membangun aplikasi berbasis dekstop - Berbasis Websites : Untuk membangun aplikasi berbasis web b. Fungsi Framework 1) Membantu para developer dalam perencanaan, pembuatan, dan pemeliharaan sebuah aplikasi. 2) Mempercepat proses pembuatan aplikasi, baik itu aplikasi berbasis desktop, mobile, ataupun web. 3) Aplikasi yang dihasilkan menjadi lebih stabil dan andal. Hal ini     dikarenakan Framework sudah melalui proses uji, baik stabilitas     maupun keandalannya. 4) Memiliki tingkat keamanan yang lebih. Hal ini dikarenakan     Framework telah mengantisipasi celah-celah keamanan yang mungkin     timbul. 5
Baca selengkapnya

Operasi Aritmatika

-
Gambar
pacekomputer145.blogspot.com  <?php $harga = 799000000; $diskon = 799000000 * 0.1; $bayar = $harga - $diskon; $kembali = 800000000 - $bayar; ?> <html> <head> <title> penjualan produk </title> <style type="text/css"> body{ background-image:  background-size: 100%; font-family: roboto; } h1{ color: red; } tr{ background-color: yellow; } table{ background-color: black; } .harga p{ color: green; } .judul{         color: red; } .namabarang p{ color: black; } .diskon p{ color: red; font-size: 40px; text-align: center; } </style> </head> <body> <h1 align="middle"> Dealer SuperBike </h1> <br> <table  color="blue" border="1" cellpadding="3" cellspacing= "3" align="center" > <tr> <td colspan="2"><img src="ducati.jpg" width="250px" height="200px"></td> </tr> &
Baca selengkapnya

Membuat Aplikasi Dari Pemula Menjadi Suhu

-
Gambar
index.php <?php // Koneksikan dengan database require "function.php"; $user = query("SELECT * FROM praktek1 ORDER BY id DESC"); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PHP Dasar 1</title> </head> <!-- style="padding: 5px; text-decoration: none; border: 2px solid black; background-color: black; color: #fff; border-radius: 5px;" --> <body> <h1>Daftar Siswa</h1> <a href="tambah.php">Tambah data siswa</a> <br><br> <table border="1" cellpadding="10" cellspacing="0"> <tr> <th>No.</th> <th>Nama</t
Baca selengkapnya