OMJUAN.COM - Website Pragraming Learning: Tutorial HTML
News Update
Loading...
Showing posts with label Tutorial HTML. Show all posts
Showing posts with label Tutorial HTML. Show all posts

4/16/2020

Cara membuat web translate dengan API Key Eksternal GRATISAN

Cara membuat web translate dengan API Key Eksternal GRATISAN


API Key  adalah pengidentifikasi yang digunakan untuk menganutetikasi pengguna, pengembang, atau program pangila ke API. tetapi, mereka biasanya digunakan untuk mengotententikasi proyek dengan API daripada pengguna manusia. platform yang berbeda dapat menerapkan dan menggunakan kunci API dengan cara yang berbeda.

Penggunaanya

API Key biasanya bertindak sebagai pengidentifikasi unik dan token rahasia untuk otentikasi, dan umumnya akan memiliki seperangkat hak akses pasa API yang terkait dengannya.

API HTTP

API Key untuk API berbasis HTTP dapat dikirim dengan berbagai cara:
Dalamstring kueri :
POST / sesuatu? Api_key = abcdef12345 HTTP / 1.1
Sebagai tajuk permintaan:
DAPATKAN / sesuatu HTTP / 1.1
 X-API-Key : abcdef12345
Sebagai COOKIE :
DAPATKAN / sesuatu HTTP / 1.1
 Cookie : X-API-KEY = abcdef12345

Kunci API Key pada umumnya tidak dianggapaman; biasanya dapat diakses oleh klie, sehingga memudahkan seseorang untuk mencuri kunci API. Selah dicuri, Seseorang itu tidak memiliki kadaluarsa, senhingga dapat digunakan tanpa batas waktu, kecuali jika pemilik proyek tersebut mencabut atau membuat ulang kunci tersebut. Apabila API Key dimaksudkan agar dapat diakss oleh klien, itu hanya dianggap aman jika diguankan bersama dengan mekanisme keamanan lainnya seperti HTTPS / SSL. 

Nah itu dia sedikit penjelasan tetang API KEY Eksternal teman-teman.Brikut di bawah ini saya akan bagikan source code yang sudah jadi, tentang membuat web translate dengan API Key Eksternal GRATISAN dari Yandex.

HTML & PHP
<?php
$text = isset($_POST['translate_from']) ? htmlentities(ucfirst(trim($_POST['translate_from']))) : '';
$from = isset($_POST['langpairFROM']) ? htmlentities($_POST['langpairFROM']) : '';
$to = isset($_POST['langpairTO']) ? htmlentities($_POST['langpairTO']) : '';


if (empty($text) && empty($from) && empty($to)) {
    $translation = '';
} else {
    $translation = translate($text, $from, $to);
}

function translate($text, $from, $to)
{
    $api = 'API KEY MILIK KAMU SENDIRI';
    $url = file_get_contents('https://translate.yandex.net/api/v1.5/tr.json/translate?key=' . $api . '&lang=' . $from . '-' . $to . '&text=' . urlencode($text));
    $json = json_decode($url);
    return $json->text[0];
}
?>
<!-- 
    Nama : Juan Karly Matheus
    TOPIK: API YANDEX TRANSLATE
 -->
<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="img/favicon.png">
    <meta charset="utf-8">
    <meta name="description" content="Layanan gratis menerjemahkan kata, frasa, dan halaman web secara instan antara bahasa Inggris dan lebih dari 100 bahasa lainnya">
    <meta name="keywords" content="translate">
    <meta name="author" content="Juan Karly Matheus">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <title>Tranlsate | Juan Karly Matheus</title>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->
    <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

    <div id="particles-js">
        <div class="animation-area">
            <ul class="box-area">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <div class="section-content">
                    <h1 class="section-header">Translate</span></h1>
                    <i><b>Ketik</b> dan Klik <b>Translate</b></i>
                </div>
                <form method="POST" action="">
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="selec" class="my-select form-control" name="langpairFROM">
                                <option value="id">Indonesia</option>
                                <option value="en">English</option>
                                <option value="ja">Jepang</option>
                                <option value="ko">Korea</option>
                                <option value="zh">China</option>
                                <option value="nl">Belanda</option>
                                <option value="pt">Portugis</option>
                                <option value="es">Spanyol</option>
                                <option value="th">Thai</option>
                                <option value="jv">Jawa</option>
                                <option value="de">Jerman</option>
                                <option value="ma">Malaysia</option>
                                <option value="fr">Perancis</option>

                            </select> </div>
                            <div class="form-group">

                                <textarea rows="6" name="translate_from" class="form-control" id="original" placeholder="Masukan teks" required><?= $text; ?></textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <select  id="selec" class="form-control" name="langpairTO">
                                    <option value="en">English</option>
                                    <option value="id">Indonesia</option>
                                    <option value="ja">Jepang</option>
                                    <option value="ko">Korea</option>
                                    <option value="zh">China</option>
                                    <option value="nl">Belanda</option>
                                    <option value="pt">Portugis</option>
                                    <option value="es">Spanyol</option>
                                    <option value="th">Thai</option>
                                    <option value="jv">Jawa</option>
                                    <option value="de">Jerman</option>
                                    <option value="ma">Malaysia</option>
                                    <option value="fr">Perancis</option>
                                </select>

                            </div>
                            <div class="form-group">
                                <textarea rows="6" class="form-control" id="translate_to" placeholder="Terjamahan"><?= $translation; ?></textarea>
                            </div>
                            <button type="submit" id="btnsub" class="btn btn-info"><i class="fa fa-globe"></i> Translate</button>
                        </div>
                    </form>
                    <div class="mediasocial">
                        <a class="btnms" href="https://www.facebook.com/juan.matheus.545849" target="_blank" title="Facebook | Juan Karly Matheus"><i class="fa fa-facebook-f" aria-hidden="true"></i></a>
                        <a class="btnms" href="https://www.instagram.com/__juanmatheus/" target="_blank" title="instagram | Juan Karly Matheus"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                        <a class="btnms" href="https://twitter.com/juanmatheus37" target="_blank" title="Twitter | Juan Karly Matheus"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                        <a class="btnms" onclick="myFunction()"  title="Mode Gelap"><i class="fa fa-adjust"></i></a>
                    </div>
                </ul>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" charset="utf-8"></script>
        <script type="text/javascript">
            particlesJS.load('particles-js','json/particles.json', function() {
                console.log('json/particles.json loaded...');
            })
        </script>
        <script>
            function myFunction() {
                var element = document.body;
                element.classList.toggle("dark-mode");
            }
        </script>
    </body>

    </html>

CSS

*{
  font-family: 'Baloo Thambi 2', cursive; 
  padding-left: 0px;
}

.dark-mode {
  background: #15202B;
}

body{
  background: linear-gradient(to left, #EE7BAF, #F0AD7E);
  width: 100%;
  height: 100vh;
  
}


.section-header{
  padding-top: 50px;
  font-family: 'Oleo Script', cursive;
  color: white;
  font-size: 45px;
  color: #fff;
  text-align: center;
}

.section-content{
  color: #fff;
  text-align: center;
  padding-bottom: 30px;
}

textarea.form-control {
  height: 100%;
  width: 100%;
  size: 100%;
  resize: none;
  border-radius: 20px;
  box-shadow: 5px 0px 15px #c3c3c3;
}

#selec{
  border-radius: 30px;
  box-shadow: 5px 0px 15px #c3c3c3;
}
#btnsub{
  border-radius: 30px;
  float: right;
  size: 100%;
  background: #fff;
  color: #000;
  margin-top: 10px;
}
.animation-area{
  position: absolute;
  width: 100%;
  height: 100%;
}

.box-area{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box-area li{
  position: absolute;
  display: block;
  list-style: none;
  width: 25px;
  height: 25px;
  background: rgba(255, 255, 255,0.2);
  animation: animate 20s linear infinite;
  bottom: -100px;
}

.box-area li:nth-child(1){
  left: 86%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}
.box-area li:nth-child(2){
  left: 12%;
  width: 30px;
  height: 30px;
  animation-delay: 1.5s;
  animation-duration: 10s;
}
.box-area li:nth-child(3){
  left: 70%;
  width: 100px;
  height: 100px;
  animation-delay: 5.5s;
}
.box-area li:nth-child(4){
  left: 42%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 15s; 
}
.box-area li:nth-child(5){
  left: 65 %;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
}
.box-area li:nth-child(6){
  left: 15%;
  width: 110px;
  height: 110px;
  animation-delay: 3.5s;
}

@keyframes animate{
  0%{
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100%{
    transform: translateY(-800px) rotate(360deg);
    opacity: 1;
  }
}

.mediasocial{
  position: absolute;
  top: 50%;
  transform: translateY(150%);
  width: 100%;
  text-align: center;
}

.btnms{
  display: inline-block;
  width: 90px;
  height: 90px;
  background: #fff;
  margin: 10px;
  border-radius: 30px;
  box-shadow: 0 5px 15px -5px #00000070;
  color: #3498db;
  overflow: hidden;
  position: relative;
}

.btnms i{
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s linear;
}

.btnms:hover i{
  transform: scale(1.3);

}

.btnms::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #F3B5A0;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}

.btnms:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -105;
}

@keyframes aaa{
  0%{
    top: -110%;
    left: 90%;

    }50%{
      top: 10%;
      left: -30%;

      }100%{
        top: -10%;
        left: -10%;
      }
    }

    @keyframes body{
      0%{
        top: -110%;
        left: 90%;

        }50%{
          top: 10%;
          left: -30%;

          }100%{
            top: -10%;
            left: -10%;
          }
        }

        @media (min-width:100px) and (max-width: 600px) {
         #particles-js{
          height: 1vh;
        }

        textarea.form-control {
          height: 100%;
          width: 100%;
          resize: none;


        }

        body{
          background: linear-gradient(to left, #EE7BAF, #F0AD7E);
          height: 100%;
          background-size: 100%;
          width: 100%;
        }

        .mediasocial{
          position: absolute;
          top: 50%;
          transform: translate(1%,450%);
          font-size: 5px;
          text-align: center;
        }

        .mediasocial{
          position: absolute;
          top: 50%;
          width: 50%;
          text-align: center;
        }

        .btnms{
          display: inline-block;
          width: 35px;
          height: 35px;
          background: #f1f1f1;
          margin: 10px;
          border-radius: 30px;
          box-shadow: 0 5px 15px -5px #00000070;
          color: #3498db;
          overflow: hidden;
          position: relative;
          float: left;
        }

        .btnms i{
          line-height: 35px;
          font-size: 23px;
          transition: 0.2s linear;
        }

        .btnms:hover i{
          transform: scale(1.3);

        }

        .btnms::before{
          content: "";
          position: absolute;
          width: 120%;
          height: 120%;
          background: #2980B9;
          transform: rotate(45deg);
          left: -110%;
          top: 90%;
        }

        .btnms:hover::before{
          animation: aaa 0.7s 1;
          top: -10%;
          left: -105;
        }

        @keyframes aaa{
          0%{
            top: -110%;
            left: 90%;

            }50%{
              top: 10%;
              left: -30%;

              }100%{
                top: -10%;
                left: -10%;
              }
            }



            .box-area li{
              position: absolute;
              display: block;
              list-style: none;
              width: 25px;
              height: 25px;
              background: rgba(255, 255, 255,0.2);
              animation: animate 20s linear infinite;
              bottom: -100px;
            }

            .box-area li:nth-child(1){
              left: 86%;
              width: 40px;
              height: 40px;
              animation-delay: 0s;
            }
            .box-area li:nth-child(2){
              left: 6%;
              width: 15px;
              height: 15px;
              animation-delay: 1.5s;
              animation-duration: 10s;
            }
            .box-area li:nth-child(3){
              left: 35%;
              width: 50px;
              height: 50px;
              animation-delay: 5.5s;
            }
            .box-area li:nth-child(4){
              left: 21%;
              width: 75px;
              height: 75px;
              animation-delay: 0s;
              animation-duration: 15s; 
            }
            .box-area li:nth-child(5){
              left: 33 %;
              width:20px;
              height: 20px;
              animation-delay: 0s;
            }
            .box-area li:nth-child(6){
              left: 7%;
              width: 55px;
              height: 55px;
              animation-delay: 3.5s;
            }

            @keyframes animate{
              0%{
                transform: translateY(0) rotate(0deg);
                opacity: 1;
              }
              100%{
                transform: translateY(-800px) rotate(360deg);
                opacity: 1;
              }
            }

          }



Nah itu dia teman-teman Source Codenya, jika teman-teman ingin mendapatkan kode yang lengkap berserta desainnya silahkan teman-teman Komen di bawah atau bisa langsung hubungi saya melalui kontak yang telah saya sediakan pada About US.

11/09/2019

Cаrа Mеmbuаt Website Dеngаn HTML CSS Dаn PHP

Cаrа Mеmbuаt Website Dеngаn HTML CSS Dаn PHP

Tutorial HTML, CSS & PHP

Sebelum mаѕuk kе mаtеrі Tutоrіаl саrа mеmbuаt wеbѕіtе, mаrі kіtа kеtаhuі dulu apa ѕаjа mаnfааt dаn kеgunааn dаrі sebuah wеbѕіtе dі jаmаn ѕеkаrаng іnі.

Kеgunааn Sеbuаh Wеbѕіtе 

Internet sudah bukan hаl aneh untuk ѕааt іnі, mаlаh internet mеruрkаn kеbutuhаn роkоk bаgі аnаk mudа jаmаn sekarang yang selalu оnlіnе.

Dеngаn ѕеmаkіn luаѕ dan mudаh di dараtkаn nуа kоnеkѕі іntеrnеt, wеbѕіtе ѕааt іnі mеnjаdі ѕаrаnа уаng ѕеrіng digunakan ѕереrtі :

Tempat Infоrmаѕі 


Googling sudah bukаn hаl аnеh ѕааt ini, уаіtu mеnсаrі іnfоrmаѕі mеlаluі gооglе. Gооglе mеnаmріlkаn іnfоrmаѕі dаrі website уаng ada dі dаtаbаѕе nya.

Toko Online 


Website untuk Tоkо Online sedang рорulеr ѕааt іnі, kаrеnа mudаh nya transaksi оnlіnе bаnуаk pembeli yang lеbіh mеmіlіh bertransaksi online. Selain іtu раgі реnjuаl pun bіѕа menghemat modal kаrеnа bіауа mеmbuаt sebuah Website Tоkо Online jauh lebih murаh dаrі pada Bіауа untuk mеmbuаt Tоkо Offline.

Cоmраnу Prоfіlе 


Pеruѕаhааn – реruѕаhааn membuat website untuk mеngеnаlkаn рrоduk atau jasa mеrеkа kераdа рublіk, ѕааt ini mеdіа іntеrnеt banyak di mаnfааtkаn untuk рrоѕmоѕі dаn marketing lаіnnуа.

Blоg 


Wеbѕіtе jenis blоg saat ini уаng jumlаhnуа раlіng bаnуаk, isi dari blog bеrmасаm – macam dаrі yang sebatas саtаtаn pribadi sampai kе Tutorial – tutоrіаl. Wеbѕіtе jеnіѕ blog ini jugа paling mudаh dalam membuat nуа kаrеnа tеrѕеdіа рlаtfоrm blоggіn уаng grаtіѕ dаn penggunaanya рun mudah сukuр klаk klіk tаnра perlu paham pemrograman. Lеbіh lengkapnya tеntаng platform blоggіng akan di bahas dі bаwаh.

CV Online 


Atаu lаmаrаn оnlіnе, Wеbѕіtе yang di buat sebagai sebuah lаmаrаn yang іѕі nуа mеnjеlаѕkаn tеntаng dаtа dіrі, keahlian dаn реngаlаmаn.

Pilihan Cаrа Mеmbuаt Wеbѕіtе 

Di sini аkаn ѕауа bagi ke duа cara mеmbuаt wеbѕіtе уаіtu cara membuat website yang tidak mudah yaitu dengan реmrоgrаmаn html, сѕѕ, dаn php.

Dan саrа mеmbuаt wеbѕіtе yang mudah dеngаn mеnggunаkаn cms bаіk yang hosted dan ѕеlf hоѕtеd.

Pеmrоgrаmаn Aplikasi Bеrbаѕіѕ Wеb 


Dі аtаѕ ѕudаh dі jеlаѕkаn bаnуаk nуа kegunaan wеbѕіtе saat іnі, sebelum anda memulai mеmbuаt website, anda реrlu tаhu dulu teknologi di bаlіk sebuah wеbѕіtе.

Sааt іnі wеbѕіtе ѕudаh bеrkеmbаng dеngаn реѕаt, ѕtаndаr – ѕtаndаr baru bеrmunсulаn untuk web brоwѕеr seperti dukungan untuk html 5, сѕѕ аnіmаtіоn dаn mаѕіh bаnуаk уаng lainnya.

Ada banyak bahasa реmrоgrаmаn уаng digunakan untuk mеmbuаt aplikasi berbasis wеb. Bеrbеdа dеngа bаhаѕа pemrograman untuk aplikasi bеrbаѕі dеѕktор уаng cukup hanya dеngаn ѕаtu bahasa pemrograman ѕudаh dараt mеmbuаt арlіkаѕі ѕесаrа utuh.

Untuk dараt mеmbuаt арlіkаѕі berbasis web уаng іntеrаktіf ѕеrtа mеmіlіkі Uѕеr Intеrfасе (UI) уаng membuat pengguna nуа bеtаh alias tіdаk bikin sakit mаtа dаn membosankan ѕеtіdаknуа anda hаruѕ mеmреlаjаrі bahasa pemrograman di bаwаh іnі :

HTML 


HTML аdаlаh kереndеkаn dari HуреrTеxt Markup Lаnguаgе, HTML adalah bahasa mаrkuр dаn merupakan dаѕаr untuk mеmbuаt kеrаngkа ѕеbuаh wеbѕіtе, untuk belajar html dаrі dаѕаr kаmu bisa kе mаtеrі іnі Bеlаjаr HTML

CSS 


CSS adalah kереndеkаn dari Cаѕсаdіng Stуlе Sheets, jіkа HTML digunakan untuk membuat kerangka dasar ѕеbuаh wеbѕіtе mаkаn CSS dіgunаkаn untuk mеmbеrіkаn ѕtуlе atau gауа ke sebuah wеbѕіtе.

Dеngаn menggunakan CSS dараt mеmbuаt tаmріlаn wеbѕіtе kаmu mеnjаdі іndаh аtаu bеrgауа dаn tеntunуа enak dі lіhаt ѕеhіnggа mеmbuаt pengunjung wеbѕіtе kаmu menjadi bеtаh.

Untuk bеlаjаr CSS kamu bіѕа kе mаtеrі іnі Belajar CSS

PHP 


Pеmrоgаmаn PHP tеrmаѕuk kе dalam Bасk End artinya рhр dіgunаkаn untuk mеnаngаnі tugаѕ dі ѕіѕі ѕеrvеr. Sаlаh ѕаtu соntоhnуа Saat wеbѕіtе kаmu mеmbutuhkаn database untuk mеdіа реnуіmраnаn data ѕереrі RDBMS MуSԛl mаkа kamu mеmbutuhkаn Pemrograman PHP аgаr wеbѕіtе kаmu dараt bеrkоmunіkаѕі dеngаn Database Sеrvеr dаn dapat mеmрrоѕеѕ dаtа kе Dаtаbаѕе ѕереrtі Crеаtе, Rеаd, Uрdаtе dаn Dеlеtе (CRUD).

Untuk belajar Pеmrоgrаmаn PHP kаmu bіѕа kе materi ini Belajar PHP

Cаrа Mudah Mеmbuаt Wеbѕіtе Dengan CMS 


Di аtаѕ kita ѕudаh mеmbаhаѕ саrа membuat wеbѕіtе ѕесаrа tіdаk mudаh уаіtu menggunakan pemrograman, ѕеkаrаng kіtа аkаn mеmbаhаѕ саrа mеmbuаt wеbѕіtе dеngаn саrа yang mudаh уаng menggunakan CMS. CMS adalah Content Managemen Sуѕtеm уаіtu арlіkаѕі уаng mеmbаntu kita membuat dаn mаngаtur sebuah website.

CMS аdа duа jеnіѕ :


  • CMS Sеlf Hоѕtеd 
  • CMS Hоѕtеd 

Perbedaan CMS Sеlf Hоѕtеd dan Hоѕtеd аdаlаh dаrі ѕіѕі hоѕtіng ѕеbаgаі tеmраt pemyimpanan аgаr website kita оnlіnе dan dараt dі akses dari іntеrnеt.

CMS Hоѕtеd

CMS hоѕtеd membutuhkan hоѕtіng dаn dоmаіn agar ѕіtuѕ kаmu dараt оnlіnе dan dі akses mеlаluі internet, Wеb Hоѕtіng bіѕа kаmu dараtkаn dеngаn cara mеnуеwа mulаі dаrі реr bulan hіnggа per tаhun. Sеkаrаng sudah bаnуаk penyedia Web Hosting lоkаl уаng menyediakan harga murаh dengan Kualitas Baik.

Sеlаіn mеnуеwа web hsoting dаn dоmаіn untuk mеnggunаkаn CMS Hоѕtеd kаmu jugа harus mеlаkukаn beberapa kоnfіgurаѕі.

Bеbеrара CMS Hosted :


  • WоrdPrеѕѕ situs resminya httрѕ://wоrdрrеѕѕ.оrg/ 
  • Jооmlа ѕіtuѕ rеѕmіnуа httрѕ://www.jооmlа.оrg/ 

CMS Sеlf Hоѕtеd

CMS Self Hosted ѕudаh mеnуеdіkаn hоѕtіng dаn dоmаіn nуа, dеngаn mеnggunаkаn CMS Sеlf Hоѕtеd wеbѕіtе kаmu bіѕа lаngung online tanpa harus mеnуеwа wеb hоѕtіng, dоmаіn dan mеlаkukаn kоnfіgurаѕі.

CMS Sеlf Hоѕtеd banyak dіgunаkаn оlеh pemula уаng baru bеlаjаr саrа membuat wеbѕіtе.

Cara menggunakan nуа pun сukuр mudah kаmu сukuр mеlаkukаn pendaftaran dі mаѕіng – mаѕіng CMS Self Hоѕtеd lаlu mеmіlіh ѕub domain dаn website kаmu langsung оnlіnе.

Bеbеrара CMS Sеlf Hosted :

  • WоrdPrеѕѕ ѕіtuѕ rеѕmіnуа 
  • Blоggеr ѕіtuѕ resminya 


Sауа rasa сukuр untuk pengenalan awal саrа mеmbuаt website, ѕіlаhkаn di реrlаjаrі саrа mеmbuаt wеbѕіtе yang tidak mudah dеngаn menggunakan реmrоgrаmаn аtаu саrа mudаh mеmbuаt website уаng mudah dеngаn CMS.

11/05/2019

Tutorial Lengkap Cara Membuat Website Menggunakan HTML, CSS & JAVASCRIPT

Tutorial Lengkap Cara Membuat Website Menggunakan HTML, CSS & JAVASCRIPT

Tutorial HTML, CSS, JAVASCRIPT

Sауа аkаn memberikan panduan bеlаjаr membuat website menggunakan HTML, CSS dаn Jаvаѕсrірt уаng lеngkар dі ѕеrtаі dеngаn gambar dan vіdео. Saya jugа аkаn mеnуеrtаkаn соntоh praktek уаng bisa kаmu іkutі dеngаn mudah lalu di аkhіr раnduаn ѕауа аkаn jelaskan bagaimana саrа agar wеbѕіtе kаmu оnlіnе ѕеhіnggа bіѕа dі аkѕеѕ оlеh bаnуаk orang melalui internet. 
Kаrеnа artikel іnі bakal раnjаng ѕеkаlі mаkа sebelum memulai saya ingin mеmbеrіkаn rіngkаѕаn singkat tentang іѕі kеѕеluruhаn раnduаn bіаr kаmu аdа gаmbаrаn ара ѕаjа yang dіреlаjаrі dan hаѕіl ара yang bаkаl dісараі kalau kamu bеnаr-bеnаr mеngіkutі іѕі panduan ini.

Rіngkаѕаn 

Untuk memudahkan apa уаng ѕауа jelaskan dіѕіnі mаkа ѕауа mеmесаh artikel іnі kе dаlаm 4 bаgіаn: 
  1. Bagian реrtаmа merupakan реnjеlаѕаn singkat tеntаng HTML, CSS dan Javascript ini сосоk buаt kamu yang bеlum tau sama ѕеkаlі ара іtu. 
  2. Bаgіаn kеduа dаrі аrtіkеl іnі аkаn mеmbаhаѕ реrѕіараn ара saja yang реrlu dіlаkukаn untuk mеmbuаt wеbѕіtе dengan HTML, CSS dan Jаvаѕсrірt. 
  3. Bаgіаn kеtіgа memuat аrtіkеl рrаktеk membuat website mеnggunаkаn HTML, CSS dan Jаvаѕсrірt. 
  4. Pаdа bagian аkhіr ѕауа аkаn bеrіtаhu bagaimana саrаnуа agar website уаng ѕudаh kіtа buat jаdі online, bіѕа dі аkѕеѕ lewat іntеrnеt. 
Saya mеnуаrаnkаn kаmu untuk membaca semua bаgіаn, аkаn tеtарі kalau kamu іngіn lаngѕung рrаktеk mаkа kаmu bіѕа langsung loncat lаngѕung ke bаgіаn 3 untuk persiapan ѕоftwаrе dan 4 untuk langsung рrаktеk.

Bagian 1 – Pengenalan 

Kаlаu kamu sudah tаu tеntаng tеntаng HTML, CSS dаn Jаvаѕсrірt mаkа kamu bіѕа langsung loncat ke bаgіаn 2 Memilih Sоftwаrе Edіtоr. Adа 3 hаl kоmроnеn dаѕаr уаng dі реrlukаn untuk mеmbuаt wеbѕіtе уаіtu HTML, CSS dаn Jаvаѕсrірt saya аkаn bahas hаl tersebut ѕаtu per ѕаtu.

HTML 

HTML mеruраkаn kераnjаngаn dаrі Hypertext Mаrkuр Lаnguаgе іnі adalah kumрulаn kode kоmрutеr yang digunakan khuѕuѕ untuk membuat website. 
Sеbеnаrnуа HTML ѕеndіrі bukаn bаhаѕа реmrоgrаmаn kаrеnа di HTML tidak аdа yang namanya аlur lоgіkа jadi уаng perlu kаmu ketahui tentang kode html adalah bagaimana саrа menulis ѕtrukturnуа ѕаjа. 
Bеrmulа раdа аwаl tahun 90аn HTML vеrѕі реrtаmа ditemukan dаn tеruѕ bеrkеmbаng pesat ѕаmраі sekarang yaitu HTML versi 5 dаn pada раnduаn іnі saya аkаn mеnggunаkаn versi terbaru yaitu HTML5.

CSS 

Cаѕсаdіng Stуlе Shееt уаng lеbіh di kеnаl dеngаn ѕеbutаn CSS, apa sih іnі? CSS аdаlаh kоѕmеtіk untuk HTML ѕіngkаtnуа CSS dіgunаkаn untuk mendesain аgаr tampilan halaman website kіtа jadi cantik jаdі ѕеmuа yang bеrkаіtаn dеngаn dеѕаіn wеb akan mеnggunаkаn іnі.

Jаvаѕсrірt 

Javascript аdаlаh ѕаlаh satu bаhаѕа реmrоgrаmаn wеb уаng bіѕа dіgunаkаn mеmаnірulаѕі kоdе HTML dan CSS ѕеhіnggа tаmріlаn website kіtа lеbіh іntеrаktіf dan dіnаmіѕ. 
Jаdі mеmаng tеrkеѕаn banyak ѕеkаlі уаng hаruѕ dipelajari mulаі dаrі HTML, CSS lаlu Jаvаѕсrірt. Jаngаn rіѕаu berdasarkan pengalaman pribadi untuk bіѕа mеmbuаt wеbѕіtе kаmu tіdаk реrlu mаhіr dengan 3 hаl dі аtаѕ, tetapi kаmu hаnуа реrlu tau cara mеnggunаkаnnуа dengan tераt dan itulah уаng аkаn saya аjаrkаn ke kаmu dіѕіnі. 
Memang реnjеlаѕаn ѕауа tidak mеndеtаіl mеngеnаі hаl tеrѕеbut tеtарі ѕеtіdаknуа kаmu ѕudаh punya gаmbаrаn tentang HTML, CSS dаn Javascript. Saya juga раhаm mungkіn bаgі beberapa dаrі kаmu bakal berpikir “ribet” harus bеlаjаr kе 3 hal tеrѕеbut secara bеrѕаmааn, itulah sebabnya saya mеnulіѕ аrtіkеl іnі kаrеnа saya bеruѕаhа untuk memberikan trіk аgаr kаmu bisa bеlаjаr 3 hаl tеrѕеbut dеngаn cara уаng сераt dаn mudah. 

Bagian 2 – Persiapan Alat Tеmрur 

Pеrѕіараn utama adalah kаmu harus mеnggunаkаn komputer аtаu lарtор dаn kаmu tіdаk bіѕа mеnggunаkаn SmаrtPhоnе. Karena dіѕіnі kаmu bаkаl bаnуаk mеnulіѕ kode рrоgrаm dan іtu semua hаnуа bіѕа di lakukan dі komputer. 
Kita bіѕа menulis kode ѕеmuа HTML, CSS dan Jаvаѕсrірt menggunakan Notepad уаіtu aplikasi bаwааn dari Microsoft Windows, tарі saya ѕаngаt tіdаk menyarankan untuk mеnggunаkаnуа kаrеnа аkаn ѕаngаt ѕulіt ѕеkаlі. Jаdі lеbіh baik kita mеnggunаkаn ѕоftwаrе editor yang dі desain khuѕuѕ mеmаng untuk menulis kоdе agar lеbіh mеmudаhkаn kita. 
Sеkаrаng іnі аdа bаnуаk ѕеkаlі ѕоftwаrе editor уаng tеrѕеdіа dі іntеrnеt, ada уаng berbayar аdа juga yang gratis dіаntаrаnуа: 
  • SublіmеTеxt – Grаtіѕ 
  • Mісrоѕоft Vіѕuаl Cоdе – Opensource dan Grаtіѕ 
  • Adоbе Dreamweaver – Bеrbауаr 
Kamu hаnуа реrlu menggunakan ѕаlаh ѕаtu dari software tersebut.

SublіmеTеxt

Saya menggunakan Sublime Text, Karena saya sudah terbiasa dengan syntax-syntaxnya. Ingat ya tamn-teman kalian bisa menggunakan Text Editor kesukaan kalian, disini saya menggunakan Sublime Text Karena saya sudah terbiasa. Dibawah ini saya sudah sediakan link Download untuk Versi Windows 64bit, jika teman-teman menggunakan Sistem operasi lain, silahkan kunjungi langsung web resminya saja.
Sіlаkаn download Sublime Text di link Download di bawah ini : 
Tutorial HTML, CSS, JAVASCRIPT

1. Bооtѕtrар 4 Snірреt 

Ini adalah еxtеnѕіоn уаng mеmbаntu kіtа untuk menulis kоdе-kоdе HTML tеrtеntu hаnуа dеngаn ѕіngkаtаn. Kamu hanya cukup mеngеtіkаn bеbеrара kode lаlu boom otomatis extension ini аkаn melengkapi ѕіѕа kоdеnуа, untuk lebih mudаh соbа kamu реrhаtіkаn gаmbаr bеrіkut: 
Tutorial HTML, CSS, JAVASCRIPT

2. Lіvе Sеrvеr 

Untuk bisa mеnjаlаnkаn website dі kоmрutеr, kamu membutuhkan арlіkаѕі wеb ѕеrvеr. Dаrіраdа kamu іnѕtаll software tambahan jаdі lеbіh bаіk kіtа mеmаnfааtkаn Extеnѕіоn Lіvе Sеrvеr уаng bеrfungѕі untuk mеnjаlаnkаn wеb ѕеrvеr di komputer kаmu.

Inѕtаlаѕі Extеnѕіоn 

Sеtеlаh kamu tаhu ара saja уаng di реrlukаn ѕеkаrаng kаmu реrlu lаkukаn proses іnѕtаlаѕі еxtеnѕіоn tеrѕеbut, саrаnуа cukup mudаh kаmu hanya perlu mеlіhаt menu раdа bаgіаn kiri уаng bertuliskan Extеnѕіоn kеmudіаn klіk mеnu tersebut ѕеhіnggа munсul kоlоm search (реnсаrіаn) lаlu kеtіkаn “Bооtѕtrар 4 Snірреt” ѕеtеlаh іtu tеkаn enter. Pаdа daftar hasil реnсаrіаn silakan klіk tоmbоl hіjаu install раdа Extеnѕіоn Bootstrap 4 Snірреt. Kamu juga bisa lаkukаn hаl yang ѕаmа untuk install еxtеnѕіоn Lіvе Sеrvеr.

Bаgіаn 3 – Praktek Membuat Website HTML, CSS & Jаvаѕсrірt 

Sebelum kita langsung рrаktеk mаkа аdа baiknya kamu mеngеtаhuі beberapa hаl tentang frаmеwоrk. Kіtа akan mеnggunаkаn Framework untuk реnulіѕаn kоdе-kоdе program yang di perlukan. 
Dаlаm ѕіѕtеm kоmрutеr, framework mеruраkаn kеrаngkа рrоgrаm уаng dіbuаt untuk mеmudаhkаn kita dаlаm proses penulisan kode. Beberapa fungsi dan logika уаng sudah umum dіѕеdіаkаn sehingga kіtа tidak реrlu mеmbuаtnуа lаgі tеntu іnі аkаn mеnghеmаt waktu belajar kіtа, jadi kаmu hаnуа реrlu tаu саrа menggunakannya saja. 
Ada bеbеrара frаmеwоrk уаng аkаn kita gunаkаn dіаntаrаnуа adalah: 
  • CSS Frаmеwоrk yaitu Bootstrap 4 
  • Javascript menggunakan jQuеrу 

Saya tіdаk аkаn mеmbаhаѕ dаn mеnjеlаѕkаn framework tеrѕеbut artikel ini karena kita akan berfokus раdа саrа mеnggunаkаn frаmеwоrk tersebut dаlаm penulisan ѕеmuа kode рrоgrаm уаng dі реrlukаn untuk membuat website. Kamu tіdаk реrlu khаwаtіr kаrеnа itu bukаn ѕеѕuаtu уаng sulit juѕtru іtu аkаn memudahkan kamu. 

Lауоut Wеbѕіtе 
Pеrtаmа kіtа akan menentukan lауоut wеbѕіtе yang аkаn kіtа buаt, saya ѕudаh mеndеѕаіnуа dеngаn gауа lауоut website standar раdа umumnya. Pеrtаmа ada Hеаdеr pada bagian аtаѕ lalu dі bаwаhnуа аdа mеnu di bаgіаn kіrі dаn kоntеn pada bаgіаn kаnаn, dі bаwаhnуа kіtа аkаn buаt fооtеr. Jіkа dі gаmbаrkаn lауоut kurаng lеbіh seperti di bаwаh іnі 
Hаlаmаn Depan 
Hаlаmаn Pаgе 
Hаlаmаn Pоѕt 

10/20/2019

HTML Dasar : Pengenalan HTML dasar dan Penulisannya

HTML Dasar : Pengenalan HTML dasar dan Penulisannya

#HTML #WebDeveloper
Hallo sobat-sobatku semua dimana pun berada, pada kali ini saya akan membagika sedikit pengetahuan tentang HTML (Hyper Text Markup Language). HTML ini merupakan bahasa yang paling dasar yang harus kalian kuasai, jika kalian mau menjadi sorang Web Developer. Oleh karena itu sesuai dengan Deskripsi blog ini, semua artikel yang di bahas dalam situs ini  adalah tentang webiste. Lalu apa saja yang akan kita bahasa di dalam pembahasan kali ini, berikut :

  1. Apa itu HTML
  2. Belajar membuat file HTML
  3. Contoh-contoh Penulisan HTML

Apa itu HTML ?

HTML (Hyper Text Markup Language) adalah sebuah bahasa markah untuk membuat satu atau banyak Halaman Website.

Belajar Membuat file HTML

Untuk membuat file HTML, kita dapat membuatnya dengan Text Editor seperti notepad. Bisa juga kita menggunakan Text Editor yang mempunyai banyak fitur syntax highlighter contohnya : Sublime Text, Atom, Kate, dan lain-lain. Kemudian untuk format file html tersbeut, disimpan dengan format atau ekstensi .html 
Contoh :


Contoh-contoh penulisan HTML

Jika kita ingin membuat tampilan website sederhana dengan informasi atau pesan di tampilan browser kalian, contoh : Selamat Datang Di Situs Ini . Maka kalian bisa menuliskan kode seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Di WWW.OMJUAN.COM</title>
</head>
<body>
    Selamat Datang Di Omjuan - Tutorial Web Online
</body>
</html>

Untuk menuliskan informasi seperti contoh ini, Perhatikan letak penulisan sebuah informasi yang ingin kalian kalian tampilkan di halaman website tersebut. dalam HTML ada susunan-susunan dengan tag-tag atau penanda. <body> dan di tutup dengan </body>. Tag ini merupakan body (tubuh) dari sebuah halaman website, setiap kali menuliskan informasi di tuliskan didalam tag (penanda) ini.


Kemudian pada contoh selanjutnya dengan <head> dan <title>. Untuk tag <head> ini merupakan kepala dari semua dokumen halaman. Untuk lebih mudah memahami. Silahkan buat kode seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
    <title>OMJUAN - Tutorial Web Online</title>
</head>

<body>
Situs website ini milik OMJUAN.COM
</body>
</html>
Jika teman-teman lihat di bagian yang saya lingkari berwarna merah itu merupakan Title (Judul) dari website tersebut.


Nah mari kita ke contoh selanjutnya, kita berkenalan dengan tag <h1> dan <p>. Untuk tag <h1> ini jika kita mau membuat judul artikel. H1 merupakan ukuran judul yang paling besar di HTML. Nah kemudia untuk tag <h1> ini jika kita mamu membuat paragraf. Silahkan ubah lagi kode yang tadi sudah di buat sepperti contoh di bawah ini :
<!DOCTYPE html>
<html>
<head>
    <title>OMJUAN - Tutorial Web Online</title>
</head>

<body>
    <h1>About</h1>
<p>Situs blog personal yang membagikan Source Code dan Pembahasan seputar website Gratis (HTML, CSS, JavaScript, PHP, Bootstrap).</p>
</body>
</html>


Coba teman-teman perhatikan hasilnya, Teks yang tadi berada di dalam tag <h1> jika di tampilkan menjadi lebih besar. Karena teks tersebut merupakan Judul dari artikel. Lalu kemudian, teks yang tadi kita sisipkan di dalam tag <p> di tampilkan dengan ukuran yang normal. Nah itu dia penjelasan tentang HTML Dasar : Pengenalan HTML dasar dan Penulisannya. Selain penjelasan di atas tadi masih banyak tag-tag yang harus di pelajari. teman-teman bisa pelajari dengan lebih banyak tag-tag dan model yang lain di W3Shool HTML  dan W3.ORG
Silahkan baca di : Tutorial Lengkap HTML
Oke teman-teman pengenalan tentang HTML. Bagaimana, apakah kalian sudah paham tentang HTML sekarang ?. Beri pendapat kalian di kolom komantar di bawah.

10/08/2019

Membuat Looping for di dalam Table dengan php

Membuat Looping for di dalam Table dengan php

Tutorial PHP
Hallo sobat-sobat semua, apa kabar kalian hari ini. Kali ini saya akan membagikan sedikit pembahasan tentang apa itu Bahasa pemrograman PHP dan juga akan saya tunjukan contoh-contohnya. Mungkin sebagian dari kalian sudah tidak asing lagi dengan bahasa pemrograman yang satu ini, apalagi kalo kalian yang berada di bidang web developer. Tapi saya yakin masih banyak juga teman-teman yang belum paham dengan bahasa pemrograman yang satu ini, terlebih khususnya untuk teman-teman yang baru saja terjun ke dunia IT khusunya di bidang minat web developer. Sebelumnya mari kita kenalan dulu sama bahasa pemrograman yang satu ini.

Apa itu Bahasa Pemrograman PHP ?
PHP (Hypertext Preprocessor) ini adalah bahasa script yang dapat kita tanamankan atau sisikan ke dalam HTML. PHP juga banyak di pakai untuk membuat atau memprogram sebuah situs web yang Dinamis. PHP juga dapat kita gunakan untuk membangun sebuah CMS.

Lalu kapan Bahasa Pemrograman PHP di buat ? (Sejarah PHP)
PHP memiliki nama atau bisa di bilang Kependekan dari Personal Home Page dimana ini hanya di buat untuk Situs personal saja. Rasmus Lerdorf adalah pembuatnya dimana PHP di buat pada tahun 1995. Pada waktu itu PHP masih di beri nama Form Interpreted (FI)  yang kalo kita lihat wujudnya berupa Script yang digunakan untuk mengelola data-data fromulis pada sebuah web.

Nah itu dia sedikit penjelasan untuk Apa itu Bahasa Pemrograman PHP dan Sejarah Bahasa Pemrograman PHP. Untuk lebih lengkap teman-teman bisa kunjungi wikipedia lalu membacanya sampai habis. Gimana ni sudah pada paham belum dengan apa itu Bahasa Pemrograman PHP. Jika sudah paham mari kita masuk ke sesi selanjutnya, yaitu contoh-contoh yang akan saya kasih di bawah ini. Silahlan teman-teman simak dengan baik.

Apa saja yang kita perlukan untuk latihan Bahasa Pemrograman PHP  ?

  • Xampp : ini kita perlukan untuk menjalankan localhost server (Apache HTTP Server), Agar Script php yang kita buat dapat di jalankan pada Browser laptop atau pc kalian. Jadi silahkan teman-teman download dulu ya di website resminya Xampp, jika sudah di download silahkan kalian install dan jalankan atau Apachenya ya. Oo iya untuk Xampp ini  gratis dan open source ya, Jadi teman-teman bisa mendownloadnya dengan gratis.
  • Text editor : Untuk text editor teman-teman bebas mau pakai text editor apa saja. di sini saya akan menggunakan Sublime Text. Kalau kalian juga mau menggunakan Sublime Text kalian bisa langsung download saja di Website resminya secara gratis.
  • Web Browser : ini kita gunakan untuk menjalankan Script php yang sudah kita buat. Teman-teman bebas mau pakai Browser apa saja ya. ( Chrome, Firefox,dll ).

Latihan 1

Kita akan menampilkan atau mencetak sebuah text ke website. Untuk mulai koding php kita harus membukanya dengan <?php Lalu tutup dengan ?> Contoh di bawah ini untuk mencetak huruf ke website :
<?php
echo "Belajar php di omjuan.com";
?> 
Lalu setelah itu save file kalian dengan nama latihan1.php (bebas kalian mau kasih nama apa saja)  ini ke dalam folder C:\xampp\htdocs buat dulu folder latihan1 kalian lalu save di dalamnya C:\xampp\htdocs\latihan1.

Jika sudah silahkan buka browser kalian lalu ketikan localhost/latihan/latihan1.php dan enter, maka hasilnya akan seperti gambar di bawah ini :
Tutorial PHP
Nah selamat kalian sudah berhasil mencetak atau menampilkan hurud di halaman web latihan1 kalian. Jika gagal pastikan Apache di xampp kalian sudah dijalankan ya

Latihan 2
Untuk menampilkan atau mencetak huruf di dalam php sudah berhasil, sekarang mari kita coba untuk membuat operasi matematika sederhana tambah dan kurang di php, Contoh kode di bawah ini :
<?php
/*
Tambahan di php 20 ditambah 6 hasil nya? 
*/
$a = 20; // variable a kita isi dengan nilai 20
$b = 6; // variable b kita isi dengan nilai 6
$c = $a + $b; // disini adalah proses nya
echo "Hasil  $a + $b = $c"; // outputnya disini
echo "</br>"; // membuat baris baru. sudah belajar html kan? tau dong berarti.
echo "=======================";
echo "</br>";
/*
Pengurangan di php 5 dikurang 12 hasil nya? 
*/
$x = 5; // variable a kita isi dengan nilai 5
$y = 12; // variable b kita isi dengan nilai 12
$z = $x - $y; // ini adalah prosesnya
echo "Hasil dari Pengurangan $x - $y = $z"; // outputnya disini
?>
Seperti tadi di awal untuk menjalankannya kita save dulu dengan nama latihan2.php, kemudian kalian buka lagi url yang tadi localhost/latihan/latihan2.php tapi latihan1.php kalian ganti dengan latihan2.php, seperti contoh yang sudah saya kasih. Maka jika berhasil akan tampil seperti gambar di bawah ini  :
Tutorial PHP

Nah gimana ni latihannya, sudah bisa kalian pahami atau belum ? jika kalian belum paham kalian bisa komentar di bawah ini. nanti saya akan membantu kalian. Untuk selanjutnya kita akan belajar dengan perintah-perintah yang lebih rumit lagi, jadi pastikan kalian sudah paham dengan apa itu PHP dan fungsi-fungsi dasarnya. Kalian bisa belajar fungsi dasarnya yang lengkap di "W3school". Mari kita belajar PHP lebih dalam, silahkan kalian buka Tutorial PHP ini adalah label situs saya yang khususnya untuk Tutorial PHP silahkan kalian klik untuk belajar di sana dengan lebih banyak perintah yang unik.

10/06/2019

Cara membuat tabel keren dengan HTML dan CSS

Cara membuat tabel keren dengan HTML dan CSS

Hallo sobat-sobat sekalian, pada kesempatan kali ini kita akan belajar tentang bagaimana Cara membuat tabel keren dengan HTML dan CSS. Dalam membuat suatu website ada kalanay kita memerlukan tabel untuk menampilkan sebuah data yang banyak maupun sediki agar lebih rapih. Untuk membuat table kita bisa menggunakan HTML saja, namum jika kita ingin membuat sebuah tabel yang lebih menarik kita bisa menggunakan CSS sebagai makeupnya. nah oleh sebab itu pada kesempatan kali ini saya sudah membuat sebuah source code tabel yang menarik, silahkan teman-teman copy.

Sebelumnya itu ada baiknya saya menjelaskan sedikit dulu tentang Struktur dari sebuah tabel, meskipun saya yakin sudah banyak dari teman-teman yang sudah tau dari sebuh struktur dari sebuah tabel, perhatika contoh di bawah ini.
Kalo kita lihat pada gambar di atas ini ada 2 buah kolom dan 2 buah baris. Kotak pertama kita sebut dengan baris 1 dan kolom 1 kemudia kotak yang paling kanan bawah kita sebut dengan baris 2 kolom 2.

Lalu jika saya punya tabel seperti gambar di bawah ini, maka kotak-kotak yang horizontal kita sebut dengan baris sedangkan kota-kotak yang Vertikal kita sebut dengan kolom
Lalu jika saya punya
Lalu kalo perpotongan antara bari dan kolom biasa di sebut dengan (cell / data ) 1 buah cell atau atau nanti di html kita sebut dengan sebuah data. seperti contoh di bawha ini
Oke teman-teman jadi itulah struktur dari sebuah tabel sederhana. nah jika teman-teman sudah paham dengan struktur dari tabel. silahkan lihat kode html dan css di bawah ini. Teman-teman bisa mengambilnya lalu pakai sesuka hati kalian.

HTML

<table class="table-line">
    <tr>
        <th>No.</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Steve Jobs</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Jack Dorsey</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Mark Zuckerberg</td>
    </tr>
</table>

CSS

<style type="text/css">
    .table-line {
        width: 100%;
        border-collapse: collapse;
    }

    .table-line th {
        background: #850785;
        color: #FFFFFF;
        padding: 1em;
        text-align: left;
        text-transform: uppercase;
    }

    .table-line td {
        border-bottom: 1px solid #DDDDDD;
        color: #666666;
        padding: 1em;
    }
        </style>


Nah jadi itulah sedikit penjelsan tentang tabel, sudah di jelaskan juga sedikit tentang strukturnya. Semoga teman-teman bisa paham ya. Untuk lihat tampilan dari source kode yang saya bagikan di atas teman-teman bisa klik demo di atas untuk melihatnya. Sekian dari artikel saya ini semoga dapat bermanfaat bagi teman-teman yang membutuhkannya. Jangan lupa untuk share ya teman-teman, teman-teman juga bisa ikuti Situs ini jika kalian mau mendapatkan kiriman artikel gratis setiap kali kami posting artikel terbaru. Kalian bisa follow by email di Widget situs ini atau bisa juga langsung follow dengan klik icon +user di bagian kanan atas samping icon Loncing. Lihat contoh lainnya, bagaimana cara membuat tabel dengan Bootstrap 4

#tutorial php
#tutorial javascript
#tutorial bootstrap
#tutorial html
#tutorial css

10/05/2019

Membuat sistem keranjang belanja sederhana dengan php

Membuat sistem keranjang belanja sederhana dengan php

Tutorial PHP

Hallo teman-teman semua, pada kesempatan kali ini kita akan belajar tentang bagaimana cara Membuat sistem keranjang belanja sederhana dengan Array. Array adalah sebuah variabel yang dapat menyimpan banyak data dalam satu variabel, array menggunakan index untuk mengidentifikasi suatu data yang ada padanya. Agar lebih memudahkan kita untuk meng-akses terhadap data yang di simpan dalam array tersebut.

Namun pada Artikel kali ini kita akan belajar tentang Array List, array list berbeda array biasa contohnya seperti penjelasan yang sudah saya paparkan di atas. Untuk Array List sendiri memilik sejumlah operasi yang lebih lemgkap dan juga mudah untuk kita gunakan di bandingkan dengan array biasa. Unutk lebih jelas mari kita lihat kode Array biasa di bawah ini.

Contoh Array Biasa!

// cara 1
String[] nama;

// cara 2
String nama[];

// cara 3 dengan kata kunci new
String[] nama = new String[10];

Penjelasan :


  • Untuk membuat Array kita menggunakan tanda kurung [] untuk membuat sebuah Array lalu jangan lupa untuk titik koma ;
  • Kemudian kurung siku kita bisa juga letakan setelah tipe data atau nama array tersebut lalu jangan lupa untuk titik koma ;
  • Lalu angka 10 dalam kurung artinya batas untuk array yang kita buat atau ukuranya dari array tersebut.

Contoh Array List!

$list_barang = array(
        array("Baju", 100000),
        array("Celana", 120000),
        array("Sepatu", 300000),
        array("Sendal", 75000),
        array("Topi", 50000)
    ) 
Pada Array List kita bisa menggunakan buat seperti contoh kode di atas ini. kita bisa menggunakan () untuk membuat satu array lalu ; . Jika mau lebih kita bisa menggunakan ( buka kurung (,lalu membukanya dengan array("Celana", 120000), dan jangan lupa koma lagi untuk menambahkannya. Jika sudah makan kita tutup dengan )  tutup kurung.

Nah itulah sedikti penjelsan tentang Array ya teman-teman. lalu untuk source code yang saya bagika ini adalah source untuk Membuat sistem keranjang belanja sederhana dengan php. Silahkan teman-teman copy dan mengubahnya sesukan hati kalian. Sebagai tanda terimakasih kalian bisa bagikan artikel ini di media sosial atau teman-teman kalian. Nah silahkan kalian copy Source code di bawah ini :

Source code lengkap:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belanja</title>
</head>
<body>
    <?php
    $list_barang = array(
        array("Baju", 100000),
        array("Celana", 120000),
        array("Sepatu", 300000),
        array("Sendal", 75000),
        array("Topi", 50000)
    )
    ?>
<br>
<br>
<br>
<center>
    <h1>TokoOnline</h1>
    <form action="" method="POST">
        <table border="1" cellspacing="0" cellpadding="5">
            <tr>
                <th>No</th>
                <th>Nama Barang</th>
                <th>Harga</th>
                <th>Beli</th>
            </tr>
            <?php
            foreach ($list_barang as $key => $value) {
                echo '<tr>

                <th>' . ($key + 1) . '</th>
                <td >' . $value[0] . '</td>
                <td align=right>' . $value[1]   . '</th>
                <td><input type="checkbox" name="' . $key . '" value="' . $value[1] . '"></td>
                
                </tr>';
            }
            ?>
            <tr>
                <th colspan="2">
                    <form action="belanja.php"><input type="submit" value="refresh"></form>
                </th>
                <th colspan="2"><input type="submit" name="enter" value="Beli">
            </tr>
            </th>
        </table>
    </form>
    <br>
    <?php
    $total = 0;
    if (isset($_POST['enter'])) {
        echo '<h3>Keranjang</h3>';
        echo '
        <table border="1" cellspacing="0" cellpadding="5">
        <tr>            
            <th>Nama Barang</th>
            <th>Harga</th>        
            </tr>';
        foreach ($list_barang as $key => $value) {
            if (isset($_POST[$key]) == 1) {
                echo '  
                <tr>
                <td>' . $value[0] . '</td>
                <td align="right">' . $value[1] . '</td>
                </tr>';
                $total = $total + $value[1];
            }
        }
        echo '
        <tr>
        <th>Total</th>
        <th>' . $total . '</th>
        </tr>
            </table>
        ';
    }
    ?>
</center>
</body>
</html>
Silahkan teman-teman ambil source code di atas ini dan rubah sesuka hati kalian. Atau bisa juga kalian tambahkan atau kurangi sesuai dengan keratif kalian masing. Dimikianlah artikel saya ini semoga Artikel ini dapat bermanfaat untuk temna-teman semua. Dalam Kode atau Source code yang saya bagika di atas ini masilah sangat standard silahkan teman-teman ambil dan rubah atau mau jadikan referensi sesuka hati kalian. Terimakasih, jangan lupa share ya :)

10/02/2019

Cara buat percabangan di dalam php

Cara buat percabangan di dalam php

Tutorial PHP
Pada kesempatan kali ini kita akan belajar tentang Cara buat percabangan di dalam php. Dalam membuat atau membagun suatu website pastinya ada percabangan yang akan di gunakan di dalam website itu tersebut, entah itu website apa saja. Ada banyak sekali contoh untuk menggambarkan  kondisi percabangan tersebut. Contohnya pada suatu website academy di mana jika Nilai di atas 80 mendapatkan Grade A.


Dalam Percabangan If bentuk yang paling sederhana yaitu if . Biasanya juga di gunakan pada saat hanya ada satu tindakan yang di lakukan, untuk lebih jelas silahkan perhatikan contoh di bawah ini
<?php

if (<kondisi>){
    // eksekusi
}
?>
Jika dalam kondisinya benar maka ekseskusi kodenya.  Bisa kita isi menggunakan nilai boolean atau kita juga bisa membuat pernyataan untuk mendapatkan hasil nilaii boolean

Contoh :

<?php
$total_belanja = 200000;

if($total_beli > 150000){
    echo "kamu dapat hadiah!";
}

Hasil :


Lihatlah contoh di atas!

Hasil yang di tampilkan ketika di jalankan seperti gambar di atas Teks Anda dapat hadiah! hanya akan dapat di tampilkan pada saat kondisi variabel $total_belanja dengan nilai 150000. Jika di bawah 150000 maka tidak akan di tampilkan apa-apa.
$total_beli > 150000
Pada kondisi atau pernyataan ini akan bernilai true or false. Apabila jika kondisinya true (benar), maka kode yang ada di dalamnya akan di eksekusi. Tetapi apabila false maka tidak akan di eksekusi.

Nah itu dia teman-teman sedikit penjelasan tentang sala satu percabangan if  yang ada di dalam php. Silahkan tunggu postingan saya selanjutnya tentang percangan dengan materi yang lebih menarik lagi. Silahkan teman-teman Subscribe dengan email di samping kanan atas kotak Subscribe New Articles untuk mendapatkan kiriman artikel terbaru terus dari kami melalui email kamu. Silahkan kalian share ke teman-teman kalian apabila teman-teman kalian juga mencari tutorial yang sama seperti artikel ini. Akhir kata terimakasih sudah kunjungi situs saya, semoga artikel ini dapat bermanfaat untuk kalian semua. 

10/01/2019

Cara membuat Variabel dengan JavaScript

Cara membuat Variabel dengan JavaScript


Hallo teman-teman apa kabar kalian semua,... Kali ini saya akan berbagi sedikit tentang Cara membuat Variabel dengan JavaScript. Ada banyak sekali tutorial yang sama namum pada tutorial kali ini saya akan membagikan yang sedikit berbeda. Silahkan teman-teman Copy dan mengantinya sesuka hati kalian dan keratif teman-teman masing-masing.
  • Untuk penulisan nama variabel kita bisa menggunakan huruf, angka, tanda underscore dan tanda dollar.
  • Dan juga nama variabel bisa kita menggunakan huruf.
  • Dan juga nama variabel javascript harus memperharikan huruf dengan angka besar.
  • Nama variabel uga tidak boleh juga mengandung spasi.
  • Kemudian variabel javascript harus di awali dengan syntax "var".
Oke teman-teman semua daripada lama-lama langsung saja kita ke Source Code yang saya bagikan di bawah ini. Untuk codingan ini benar-benar saya coding sendiri tidak dari website manapun. Silahkan temab-teman rubah sesuka hati kalian.

HTML & JAVASCRIPT

<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part3:Mengenal Variabel Pada Javascript</title>
  
</head>
<body>
<h1>Belajar Javascript Part3:Mengenal Variabel Pada Javascript</h1>
<h2>www.juanomatheus.com</h2>
  
<div id="nama"></div>
<div id="alamat"></div>
  
<script>
varnama="Juanomatheus";
varalamat="Jakarta";
document.getElementById("nama").innerHTML=nama;
document.getElementById("alamat").innerHTML=alamat;
</script>
</body>
</html>
CATATAN!!! Seperti pada Source Code yang saya bagikan di atas ini. Saya menggunakan atau membuat dia variabel "nama" dan "alamat". Dan juga teman-teman jangan lupa untuk memeberikan titik koma pada semi kom di javascript karena ini adalah ketentuan yang sudah di tetapkan oleh JavaScript & Kemudian juga saya menampikan isi variabel tersebut ke element nama dan alamat.
Oke teman-teman semua itulah Source Code yang dapat saya bagikan. Silahkan teman-teman copy dengan sesuka hati kalian. Jika kalian ada pertanyaan silahkan komen di kolom bawah postingan ini. Codingan masihlah sangat Pemula mohon maaf jika ada banyak kesalahan dalam codingan ini. Silahkan teman-teman copy dan jadikan referensi untuk tugas kalian semua.

9/29/2019

Cara membuat form login dengan JavaScript

Cara membuat form login dengan JavaScript

Hallo teman-teman semua, kali ini saya akan berbagi sedikit Source Code membuat form login dengan JavaScript. Seperti yang kita ketahui dan yang pernah saya jelaskan di postingan saya sebelumnya. Yang belum baca silahkan baca dulu Cara membuat tampilan website sederhana menggunakan HTML dan CSS . JavaScript merupakan sebuah bahasa komputer atau bahasa pemograman yang biasanya di gunakan pada website agar supaya website tersebut menjadi lebih interaktif dan dinamis. JavaScript ini juga merupakan bahasa pemrograman client side. 


Penggunaan kode JavaScript tidak harus selalu ada dalam pembuatan suatu website. JavaScript ini juga bisa di bilang sebagai perilaku dari sebuah website.Contoh sederhananya seperti begini. HTML adalah seorang Perempuan Lalu CSS adalah Makeup perempuan itu agar lebih cantik lalu JavaScript sendiri bisa di bilang sebagai Etitut dari Perempuan tersebut, Bagaimana menurut kalian adakah pertanyaan ?. Oke langsung saja ya teman-teman silahkan ambil Source code yang saya bagikan di bawah ini.

HTML, CSS dan JAVASCRIPT



<!DOCTYPE html>
<html>
<style>
/* Full-width input fields */

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
button:hover {
    opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}
img.avatar {
    width: 10%;

    border-radius: 50%;
}
.container {
    padding: 16px;
}
span.psw {
    float: right;
    padding-top: 16px;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}
/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
</style>
<body>
<h2><a href="https://juanomatheus.blogspot.com/2019/09/cara-membuat-form-login-dengan-javascript.html">Cara membuat form login dengan JavaScript
</a><br>
juanomatheus.blogspot.com</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<div id="id01" class="modal">
  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="img_avatar2.png" alt="Avatar" class="avatar">
    </div>
    <div class="container">
      <label><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>
      <label><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>
      <button type="submit">Login</button>
      <input type="checkbox" checked="checked"> Remember me
    </div>
    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>
<script>
// Dapatkan modalnya
var modal = document.getElementById('id01');
// Ketika pengguna mengklik di mana saja di luar modal, tutuplah
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

Oke teman-teman Source code tentang membuat form login dengan JavaScript. Silahkan kalian ambil dan rombak sesuka hati kalian masing-masing. Source code yang di atas adalah source code yang sederhana dan masih penh dengan kekurangan silakan temna-teman menabahkan dengan ide kreatif kalian masing-masing, Saya sarankan kalian untuk baca Memahami Syntax Javascript agar kalian dapat memahami syntax javascript dengan baik,Terimakasih.

9/28/2019

Belajar for dan if di dalam php

Belajar for dan if di dalam php


Hallo teman-teman sekalian, kali ini saya akan membagikan sedikit source code tentang bagaimaa cara menggunakan if dalam for dengan menggunakan bahasa c. Ini hanyalah sekedar contoh biasa yang dapat saya bagikan untuk teman-teman semua. penggunaan for dan if di dalam bahasa php ketika kita mau membuat sebuah website dengan adanya kondisi. Nah di situlah for dan if sangat berguna untuk kondisi tersebut. Seperti yang kita ketahui bahwa untuk pembuatan algoritma sendiri pastinya setiap orang berbeda-beda.

Tergantung dari logika kita masing-masing, maka itu kali ini saya membagikan sedikit algoritma menurut logika saya semoga dapat membantu teman-teman sekalian. Dalam source code yang saya bagikan ini adalah kondisi di mana jika kita inputkan angka 10 maka akan mencetak bilangan 1-10 kemudian akan enter secara otomatis ke bawah lalu mencetak kelipatan 2 dengan warna merah lalu enter lagi mencetak kelipatan 3 dan yang tekahir mengambil bilangan yang sama pada 2 dan 3.

HTML & CSS


  <!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>TUGAS1_PBPB_672017242</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style type="text/css">
  body{
   font-family: sans-serif;
   background: #d5f0f3;
  }
  h1{
   text-transform: uppercase;
   color:#50626C;
   padding: 5px;
   width: 490px;
   margin: auto;
   margin-bottom: 10px;
      margin-top: 20px;
  } 
  input[type=text]{
        font-family: "Asap", sans-serif;
     display: block;
     border-radius: 5px;
     font-size: 16px;
     background: white;
     width: 100%;
     border: 0;
     padding: 10px 10px;
     margin: 15px -10px;
  }
  button {
      background-color: #00A5AF;
      color: white;
      padding: 11px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
       margin-left: -5px;
     border-radius: 5px;
    }
 </style>
</head>
<body>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
<center>
 <h1>input nilai</h1>
 <form class="" form method="POST" action="proses.php">
 <table>
  <tr>
   <td></td>
   <td><input type="text" name="inputan" placeholder="Input nilai"></td>
   <td></td>
   <td>&nbsp;&nbsp;&nbsp;&nbsp;<button>OK</button></td>
  </tr>

 </table>
 </form>
</center>
</body>
</html>

PHP


  <!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HASIL</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
  body{
   font-family: sans-serif;
   background: #d5f0f3;

  }
 h1{
   text-transform: uppercase;
   color:#50626C;
   padding: 5px;
   width: 490px;
   margin: auto;
   margin-bottom: 10px;
      margin-top: 20px;
  }
 button {
      background-color: #00A5AF;
      color: white;
      padding: 11px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 300px;
      margin-left: -5px;
     border-radius: 5px;
    }
   .kotak_hasil{
    font-size: 20px;
   }
    </style>
</head>
<body>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <center>
  <h1>HASIL</h1>
  <form method="POST" action="index.html">
  <div class="kotak_hasil">
  <?php 
 echo "<center>";
 echo"<div class=kotak_hasil>";
 $inputan = $_POST["inputan"];
 for ($i=1; $i <= $inputan; $i++) { 
  echo $i."&nbsp";
 }
 echo "<br>";
 for ($x=2; $x <=$inputan ; $x+=2) { 
  echo "<font color = red>$x&nbsp;</font>";  
 } 
 echo "<br>";
 for ($z=3; $z <=$inputan ; $z+=3) { 
  echo "<font color = blue>$z&nbsp;</font>";

 }
 echo "<br>";
 for ($j=1; $j <=$inputan; $j++) { 
   if ($j%2==0&&$j%3==0)
   {
    echo "<font color = green>$j&nbsp;</font>";
   }  
 }
 ?>
  <br>
  <br>
  <button>COBA LAGI</button>
  </form>
  </div>
 </center>
</body>
</html>


Oke teman-teman itulah sedikit artikel tentang Belajar for dan if di dalam php semoga artikel ini dapat membantu teman-teman semua ya. Jika kalian rasa artikel ini bermanfaat silahkan di share ke teman-teman kalian agar kalian bisa belajar bareng. Kalo ada pertanyaan seputar artikel ini silahkan Komentar di bawah. Terimakasih

9/26/2019

Cara membuat tampilan website sederhana menggunakan HTML & CSS

Cara membuat tampilan website sederhana menggunakan HTML & CSS

Tutorial HTML & CSS

Hallo teman-teman semua, kali ini saya akan membagikan beberapa source code html dan css yang mungkin bisa berguna untuk teman-teman semua. Source code yang saya bagikan ini merupakan source code buatan saya sendiri. silahkan teman-teman ambil dan merubahnya sesuka hari kalian. Seperti yang kita ketahui HTML itu seperti perempuan dan CSS adalah makeupnya. namun kedua itu hanyalah sebuah tampilan belum ada perilakunya atau Etitutnya. 

Javascript adahalh Etitutnya atau bisa di bilang adalah perilaku dari Perempuan tersebut. Silahkan teman-teman jika mau mencari tentang Source code Javascript bisa kunjungi halaman Javascript di bagian header atas blog ini.

HTML


  <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
 <title>WEBSITE</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <div class="container">
  <div class="header">
   <h1 class="judul">WEBSITE </h1>
   <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="latihan2.html">About</a></li>
    <li><a href="#">Product</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div>
  <div class="hero"></div>
  <div class="content">
   <h2>Belajar mambuat web sederhana</h2>
   <p class="penulis">Di tulis oleh <a href="#">Juan Matheus</a>. pada 24 Juni 2018</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   <p>
   <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</P>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="footer">
   <p class="copy">Copyright 2018 | Juan Matheus <a href="www.facebook.com/juan.jumax">Facebook</a></p>
  </div>
 </div>

</body>
</html>

CSS


  /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

/*Style*/

body{
 font: 16px/28px arial, sans-serif;
 background: transparent;
 background-image: url(img/doodles.jpg);

}

.container{
 width: auto;
 margin: auto;
 background-color: white;
}
.header{
 padding: 20px;
 padding-bottom: 10px;
}
.header .judul {
 font-size: 40px;
 font-weight: bold;
}
.header ul li{
 display: inline-block;
 margin-top: 20px;
 margin-right: 10px;

}

.header a{
 text-decoration: none;
 color: salmon;
 padding: 3px;
}

.header a:hover{
 background-color: lightskyblue;
 color: white;
}

.hero {
 height: 450px;
 background-image: url(img/hero.jpg);
 background-size: cover;
 background-position: 0 -345px;
 border-top: 5px solid lightskyblue;
 border-bottom: 5px solid salmon;

}

.content {
 padding: 20px;
}
.content h2 {
 font-size: 25px;
 font-weight: bold;
}

.content penulis a{
 color: salmon;
 text-decoration: none;
}


.content penulis {
 font-size: 11px;
 margin-top: -5px;
}

.content p{
 margin-bottom: 20px;
 font-size: 14px;
}
.footer{
 background-color: #333;
 padding: 10px;
 border-top: 5px solid lightskyblue;
 border-bottom: 5px solid salmon;
}

.footer .copy{
 color: #eaeaea;
 text-align: center;
 font-size: 12.px;
}
.footer a{
 color: salmon;
 text-decoration: none;
}
CATATAN!!! Pada HTML & CSS yang saya bagikan di atas ini. Ada gambar yang perlu kalian masukan sendiri lagi. terserah kalian mau ambil gambar dari mana saja, bisa juga kalian menggunakan foto kalian sendiri. Saya sarankan kalian membuat taruh semua file HTML & CSS dalam satu folder kemudian kalian buat lagi folder IMG untuk menaruh gambar kalian. Alasannya supaya bisa lebih rapi saja sih. Terimakasih
Oke teman-teman jadi itulah sedikit source code yang dapat saya bagikan untuk kalian semua, jika menurut kalian postingan saya ini bermanfaat. Silahkan di bagikan di media sosial kalian. dengan kalian membagikan artikel saya ini. Berati kalian sudah berpatisipasi untuk membantu saya mengembangkan bolog saya ini, Terimakasih

9/25/2019

Cara membuat tampilan web portfolio dengan Bootstrap

Cara membuat tampilan web portfolio dengan Bootstrap


Hallo apa kabar sahabat-sahabat ku ? Postingan kali ini saya akan membagikan sedikit Sourcode Cara membuat tampilan web portfolio dengan Bootstrap. Ada banyak sekali tampilan Portfolio yang, namun yang saya bagikan ini berbeda dengan yang lainnya. Kenapa saya bilang berbeda dengan yang lainnya. Ya karena saya buat sendiri tanpa mencontek punya orang lain.



Halaman portfolio sendiri biasanya menjadi halaman utama dari suatu halaman website. Agar memudahkan pengunjung website supaya bisa mendapatkan langsung informasi intinya. Halaman ini juga akan menjadi daya tarik tersendiri agar supaya untuk pengunjung mengeskpor lebih banyak lagi halaman website yang lain. Dan tentunya itu sangat baik untuk kita sebagai pemilik website mendapatkan Trafic yang bagus.

SOURCE CODE


  <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- My CSS -->
    <style>
    section {
      min-height: 420px; 
    }

    </style>


    <title>WEBSITE</title>
  </head>
  <body class="mt-5">
  


    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Juan Matheus</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          File
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<div class="jumbotron jumbotron-fluid">
  <div class="container text-center">
    <img src="img/profile1.png" width="25%" class="rounded-circle img-thumbnail">
    <h1 class="display-4">Juan Matheus</h1>
    <p class="lead">Selamat Datang Di Teknik Informatika FTI.</p>
  </div>
</div>

<section id="about">
<div class="countainer">
  <div class="row mb-4">
    <div class="col text-center">
      <h2>About</h2>
    </div>
  </div>

  <div class="row justify-content-center">
    <div class="col text-center">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris .</p>
    </div>
    <div class="col text-center">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris .</p>
    </div>
  </div>

</div>
</section>

<section id="portfolio" class="portfolio bg-light pb-4">
<div class="container">
  <div class="row mb-4 pt-4">
    <div class="col text-center">
       <h2>portfolio</h2>
    </div>
  </div>

  <div class="row mb-4">
    <div class="col-md">
      
    <div class="card">
      <img class="card-img-top" src="img/thumbs/1.png">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    </div>
     <div class="col-md">
      
    <div class="card">
      <img class="card-img-top" src="img/thumbs/2.png">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    </div>
     <div class="col-md">
      
    <div class="card">
      <img class="card-img-top" src="img/thumbs/3.png">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    </div>
     <div class="col-md">
      
    <div class="card">
      <img class="card-img-top" src="img/thumbs/1.png">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    </div>
  </div>

 <div class="row mb-4">
    <div class="col text-center">
       <h1>portfolio</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-md">
      
    <div class="card">
      <img class="card-img-top" src="img/thumbs/4.png">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    </div>
     <div class="col-md">
      
    <div class="card">
      <img class="card-img-top" src="img/thumbs/5.png">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    </div>
     <div class="col-md">
      
    <div class="card">
      <img class="card-img-top" src="img/thumbs/6.png">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    </div>
     <div class="col-md">
      
    <div class="card">
      <img class="card-img-top" src="img/thumbs/1.png">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    </div>
  </div>
</div>
</portfolio>
</section>

<section id ="contact" class="contact mb-5">
 <div class="container">
   <div class="row pt-4 mb-4">
     <div class="col text-center">
       <h2>Contact Us</h2>
     </div>
   </div>
   <div class="row justify-content-center">
     <div class="col-lg-4">
       <div class="card text-white bg-primary mb-3 text-center">
    <div class="card-body">
      <h5 class="card-title">Contact Us</h5>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p>
        </div>
      </div>
         <ul class="list-group">
  <li class="list-group-item"><h1>Location</h1></li>
  <li class="list-group-item">Pondok Sulanjana</li>
  <li class="list-group-item">J.Diponegoro No.146</li>
  <li class="list-group-item">West Java, Indonesia</li>
</ul>
     </div>

     <div class="col-lg-6">
       <form>
    <div class="form-group">
      <label for="Nama">Nama</label>
      <input type="text" class="form-control" id="Nama" placeholder="Nama">
    </div>
    <div class="form-group">
      <label for="Email">Email</label>
      <input type="text" class="form-control" id="Email" placeholder="Email">
    </div>
     <div class="form-group">
      <label for="No. HP">Nomor HP</label>
      <input type="text" class="form-control" id="Email" placeholder="No HP">
    </div>
    <div class="form-group">
      <label for="Pesan">Pesan</label>
      <textarea name="" id="Pesan" class="form-control"></textarea>
    </div>
  <div class="form-group">
   <button type="button" class="btn btn-primary">Kirim Pesan</button>
  </div>
</form>
     </div>
  
   </div>
 </div>
</section>


<footer class="bg-dark text-white">
  <div class="countainer">
    <div class="row pt-3">
      <div class="col text-center">
        <p>Copyright 2018 | Juan Matheus.</p>
      </div>
    </div>
  </div>
  
</footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>

Preview
CATATAN!!! Agar supaya Souce Code yang di copy oleh teman-teman bisa samas seperti gambar di atas. Saya sarankan teman-teman letakan semua file di dalam satu folder terserah mau namanya sapa. lalu di dalam folder tersebut silahkan teman-teman menabhkan Folder lagi dengan nama ( img ) nah nanti di dalam folder tersebut yang akan teman-teman meletakan semua gambar untuk website teman-teman sekalian. 

 Itulah Source code yang bagikan semoga source code ini dapat bermanfaat untuk teman-teman sekalian. Silahkan di copy di edit sesuka hati kalian teman-teman. Jika kalian suka dengan Artikel saya yang ini silahkan di bagikan ya temna-teman di media sosial kalian. Terimakasi
Notification
This is just an example, you can fill it later with your own note.
Done
Asal SEO Responsive Blogger Template
Pro Version 2 Pro Dark Version Pro Version 1 Pro Version 5 Proversion 4 Pro Version 3
Eclipse Responsive Blogger Template
Pro Version 3 Pro Version 2 Pro Version 1