Belajar Pemrograman
News Update
Loading...

Featured

[Featured][recentbylabel]

Featured

[Featured][recentbylabel]

Asal SEO

9/16/2019

Cara Membuat Website Portofolio dengan Mudah Menggunakan Bootstrap

      2 comments   
programmer.webillian.com – Pada kesempatan ini Belajar Pemrograman akan memberikan tutorial tentang Cara Membuat Website Portfolio Sederhana dengan menggunakan Bootstrap 4. Memanglah Saat ini penggunaan Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan dan digemari di dunia, karena sangat mudah penggunaannya.

Cara Membuat Website Portofolio dengan Mudah yang Sederhana
Sebelumnya apakah Kalian tau apakah itu website portofolio? Website portfolio merupakan suatu keharusan bagi semua desainer website untuk menunjukan hasil kerja/karya desainnya, baik berupa yang freelance ataupun perusahaan web developer yang besar. Dan juga, website portfolio itu harus memiliki beberapa karakter yang unik dari pada website portofolio yang lain, yang bertujuan untuk membedakan website kita dari website portfolio lain.



Berikut merupakan beberapa elemen dasar yang sangat penting untuk biasa digunakan mendesain website portfolio:


1. Portfolio Haruslah Berada di Halaman Depan Website


Semua Ini sudah hampir menjadi template pada keseluruhan suatu website portfolio dan memanglah cara ini sangat efektif. Bayangkan, jika suatu halaman depan websitenya sudah menarik pastinya akan mendapatkan pengunjung yang banyak.

Selain untuk memudahkan pengunjung, informasi pun langsung pada inti tujuan website tersebut, mungkin untuk pengenalan suatu produk, menjual suatu produk ataupun yang lainnya. Elemen ini juga dapat menjadikan daya tarik tersendiri untuk pengunjung/ user menjelajahi lebih jauh ke halaman lain dari website kita.


2. terdapat Kalimat Pembuka yang Menarik Pengunjung



Untuk nomer dua ini, Kita biasa menyebutnya sebagai Tagline. Membuat kalimat yang sangar menarik akan dapat menjadi cerminan perusahaan/diri kita untuk memasarkan produk, akan lebih bagus dan efektif jika seandainya kita membuat kalimat pembuka yang menarik pengunjung. Terlebih jika kalimat yang kita buat tersebut bisa menjadi semacam slogan bagi produk kita. Maka secara tidak langsung pengunjung bisa akan lebih mudah untuk mengingat kalimat tersebut dan otomatis mengingat website kita. Dan pada kesempatan yang lain pengunjung akan melihat website kita.

3. Foto/Ilustrasi dari suatu produk/ perusahaan


Suatu gambar akan lebih bisa menceritakan lebih banyak daripada menggunakan kata-kata. Untuk mendapatkan hasil yang efektif dan maksimal, Anda bisa mengkombinasikan antara gambar dengan kalimat pembuka (tagline) yang menarik.

4. Membuat form Contact Supaya Pengunjung Bisa Menghubungi


Fungsi dari form contact yaitu supaya user/ pengunjung bisa menghubungi perusahaan tersebut ataupun mendapatkan informasi menarik dari suatu perusahaan/ produk tersebut.
Membuat Form Contact yang menarik juga bisa menambah kepercayaan pengunjung terhadap suatu produk ataupun sebuah perusahaan.

Bagaimana? Apakah anda sudah tau apa bagian yang penting dari suatu website portofolio? Selanjutnya kita akan membuat website portofolio yang mudah dan sederhana menggunakan bootstrap utamanya disini kita akan menggunakan Bootstrap 4.

Caranya cukup mudah, Anda cukup perhatikan dan ikuti langkah sebagai berikut:


1. Mengunduh File-file yang diperlukan

Silahkan Anda unduh disini Klik disini

2. Buka pada teks-editor kalian, maka akan muncul struktur seperti di bawah ini

Cara Membuat Website Portofolio dengan Mudah yang Sederhana




3. Kemudian isikan Code berikut pada file index.html



<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <!-- My CSS -->

    <style>
      section{
        min-height: 420px;
      }
      .portfolio{

      }
    </style>



    <title>My PortFolio</title>
  </head>
  <body class="mt-5">
      <nav class="navbar fixed-top navbar-expand-lg navbar-dark  bg-primary">
        <div class="container">
  <a class="navbar-brand" href="#">Rifki Kuntoro Aldi</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Contact</a>
      </li>
    </ul>
  </div>
  </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">Rifki Kuntoro Aldi</h1>
    <p class="lead">Selamat datang di website pertama saya</p>
  </div>
</div>

<section id="about" class="about">
<div class="container">
  <div class="row mb-4">
    <div class="col text-center" >
    <h2>About</h2>    
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-md-5">
      <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
.</p>
    </div>
    <div class="col-md-5">
      <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,
.</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 src="img/thumbs/1.png" class="card-img-top" alt="card">
          <div class="card-body">
            <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>
          </div>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/2.png" class="card-img-top" alt="card">
          <div class="card-body">
            <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>
          </div>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/3.png" class="card-img-top" alt="card">
          <div class="card-body">
            <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>
          </div>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/4.png" class="card-img-top" alt="card">
          <div class="card-body">
            <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>
          </div>
        </div>
  </div>
</div>
<div class="row mb-4">
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/1.png" class="card-img-top" alt="card">
          <div class="card-body">
            <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>
          </div>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/2.png" class="card-img-top" alt="card">
          <div class="card-body">
            <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>
          </div>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/3.png" class="card-img-top" alt="card">
          <div class="card-body">
            <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>
          </div>
        </div>
  </div>
  <div class="col-md">
    <div class="card">
          <img src="img/thumbs/4.png" class="card-img-top" alt="card">
          <div class="card-body">
            <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>
          </div>
        </div>
  </div>
</div>
</div>
</section>

<section id="contact" class="contact mb-5">
  <div class="container">
    <div class="row text-center mb-4 pt-4">
      <div class="col">
        <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">
        <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">Location</li>
  <li class="list-group-item">My Office</li>
  <li class="list-group-item">Delegan Rt 2 Rw 7 Pabelan Kartasura</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="Rifki Kuntoro Aldi">
          </div>
          <div class="form-group">
            <label for="nama">Email</label>
            <input type="text" class="form-control" id="nama" placeholder="example@gmail.com">
          </div>
          <div class="form-group">
            <label for="nama">Nomer HP</label>
            <input type="text" class="form-control" id="nama" placeholder="083456789324">
          </div>
          <div class="form-group">
            <label for="pesan">Pesan</label>
            <textarea name="pesan" 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="container pt-3">
    <div class="row">
      <div class="col text-center">
        copyright@2018
      </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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>


4. kemudian Simpan Script tersebut dan jalankan, maka hasilnya akan seperti gambar pada bawah ini, gambar tersebut sengaja Admin kecilkan supaya kelihatan tampilan kesemuanya.

Cara Membuat Website Portofolio dengan Mudah yang Sederhana

Nah demikianlah tutorial cara membuat website portofolio dengan mudah yang sederhana. Untuk teman-teman yang mau mengembangkannya silahkan dikembangkan sendiri ya. Saya yakin teman-teman bisa mengembangkan website portofolio yang sederhana ini menjadi yang luarbiasa. Silahkan melihat hasilnya dengan menekan tombol demo dibawah ini:


Sumber : Youtube Web Programming Unpas

9/13/2019

Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

      2 comments   
programmer.webillian.com – Pada kesempatan ini Belajar Pemrograman akan memberikan tutorial seputar Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana, pada artikel ini nantinya ada beberapa program quiz javascript yang akan kita buat, yaitu program quiz matematika dengan javascript dan quiz pemrograman web dasar menggunakan javascript.


Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

Cara untuk membuat program quiz dengan javascript ini sangatlah sederhana dan syntax nya mudah untuk dipahami baik yang sudah mahir dalam javascript maupun bagi pemula, untuk membuat program quiz matematika ataupun quiz pemrograman web dengan javascript ini tidaklah susah.

Untuk dapat membuat dua program quiz ini terdapat perbedaan antara membuat program quiz dengan javascript yang pertama dengan cara membuat quiz javascript yang kedua. Perbedaannya adalah pada metode yang digunakan ketika menjawab pertanyaan dari quiz tersebut.

Program quiz matematika dengan javascript ini yang nantinya kita akan buat menggunakan radio button untuk menjawab pertanyaan yang sudah disediakan. Sedangkan pada quiz pemrograman web dengan javascript menggunakan kolom popup untuk menjawab pertanyaan yang sudah tersedia. Jadi dari segi kedua syntax yang kita gunakan dalam kedua quiz dengan javascript yang akan kita buat pada kali ini jelaslah mempunyai perbedaan.

Program quiz matematika sederhana javascript ini menggunakan radio button untuk menjawab pertanyaan pertanyaan yang ada, dan nantinya mempunyai tombol next untuk menjawab pertanyaan selanjutnya, untuk tombol prev digunakan untuk kembali ke pertanyaan sebelumnya.

Kelebihan dalam program quiz matematika dengan javascript ini salah satunya adalah menggunakan container, jadi akan membuat tampilannya lebih elegan, dan juga dengan javascrtipt teks yang muncul seperti di ketik sendiri, itu akan mempercantik tampilan dan user/ pengguna akan merasakan sensasi seperti ujian sebenarnya.

Untuk javascript animation teks ketik itu akan muncul ketika browser pertama kali reload/ pada saat pertama kali membukanya, oleh karena itu efek animation ini tidak akan membuat risi pengguna/ user, melainkan menambah kecantikan dari tampilannya.


Untuk dapat membuatnya, perhatikan langkah-langkah sebagai berikut ini:



1. Buatlah Struktur Foldernya Seperti Gambar Dibawah Ini.


Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

Untuk pembuatan program quiz matematika sederhana dengan javascript ini sengaja Kami pisahkan antara html, javascript, dan css nya, dengan tujuan supaya Anda lebih mudah memahami nantinya.

2. Buat File index.html


Untuk membuatnya Anda tidak perlu untuk mengetiknya, cukup Anda copy saja scriptnya dibawah ini, tapi dengan catatan pelajari scriptnya ya jangan asal copy dan paste saja.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
 <title>Quiz Matematika </title>
  <link type='text/css' rel='stylesheet' href='style.css'/>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
 </head>
 <body>
  <div id='container'>
   <div id='title'>
    <h1>Quiz Javascript</h1>
  <berjalan></berjalan>
   </div>
      <br/>
     <div id='quiz'></div>
      <div class='button' id='kamu'><a href='#'>Next</a></div>
      <div class='button' id='prev'><a href='#'>Prev</a></div>
      <div class='button' id='start'> <a href='#'>Start Over</a></div>
      <!-- <button class='' id='next'>Next</a></button>
      <button class='' id='prev'>Prev</a></button>
      <button class='' id='start'> Start Over</a></button> -->
     </div>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  <script type="text/javascript" src='questions.json'></script>
  <script type='text/javascript' src='jsquiz.js'></script>
 </body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="index.js"></script>
<script>var text="Jawab Pertanyaan Dibawah Ini Dengan Baik Dan Benar !";
var word = text.split("");
var i = 0;
var interval = setInterval(writeText, 100 );
function writeText() {
    var berjalan = document.getElementsByTagName("berjalan")[0];
    if (i < word.length) {
        berjalan.innerHTML += word[i];
        i++;
    }
}</script>
</body>
</html>

Javascript tersebut bukanlah syntax utama dalam pembuatan program quiz matematika dengan javascript ini, jadi sengaja kami pisahkan agar tidak tertukar dengan javascript utama. Anda juga perlu tahu bahwa fungsi javascript tersebut adalah untuk animation teks ketik.

3. Membuat File index.js


Kemudian kita akan membuat file utama javascriptnya, yang mana berfungsi untuk menjalankan program quiz dengan menggunakan javascript ini. Silahkan code dibawah ini pastekan ke file index.js


(function() {
  var questions = [{
    question: "Berapa 2*5?",
    choices: [2, 5, 10, 15, 20],
    correctAnswer: 2
  }, {
    question: "Berapa Hasil dari 3*6?",
    choices: [3, 6, 9, 12, 18],
    correctAnswer: 4
  }, {
    question: "Berapa Hasil dari 8*9?",
    choices: [72, 99, 108, 134, 156],
    correctAnswer: 0
  }, {
    question: "Berapa Hasil dari 1*7?",
    choices: [4, 5, 6, 7, 8],
    correctAnswer: 3
  }, {
    question: "Berapa Hasil 8*8?",
    choices: [20, 30, 40, 50, 64],
    correctAnswer: 4
  }];

  var questionCounter = 0; //Tracks question number
  var selections = []; //Array containing user choices
  var quiz = $('#quiz'); //Quiz div object

  // Display initial question
  displayNext();

  // Click handler for the 'next' button
  $('#next').on('click', function (e) {
    e.preventDefault();
   
    // Suspend click listener during fade animation
    if(quiz.is(':animated')) {       
      return false;
    }
    choose();
   
    // If no user selection, progress is stopped
    if (isNaN(selections[questionCounter])) {
      alert('Please make a selection!');
    } else {
      questionCounter++;
      displayNext();
    }
  });

  // Click handler for the 'prev' button
  $('#prev').on('click', function (e) {
    e.preventDefault();
   
    if(quiz.is(':animated')) {
      return false;
    }
    choose();
    questionCounter--;
    displayNext();
  });

  // Click handler for the 'Start Over' button
  $('#start').on('click', function (e) {
    e.preventDefault();
   
    if(quiz.is(':animated')) {
      return false;
    }
    questionCounter = 0;
    selections = [];
    displayNext();
    $('#start').hide();
  });

  // Animates buttons on hover
  $('.button').on('mouseenter', function () {
    $(this).addClass('active');
  });
  $('.button').on('mouseleave', function () {
    $(this).removeClass('active');
  });

  // Creates and returns the div that contains the questions and
  // the answer selections
  function createQuestionElement(index) {
    var qElement = $('<div>', {
      id: 'question'
    });
   
    var header = $('<h2>Pertanyaan ' + (index + 1) + ':</h2>');
    qElement.append(header);
   
    var question = $('<p>').append(questions[index].question);
    qElement.append(question);
   
    var radioButtons = createRadios(index);
    qElement.append(radioButtons);
   
    return qElement;
  }

  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
      radioList.append(item);
    }
    return radioList;
  }

  // Reads the user selection and pushes the value to an array
  function choose() {
    selections[questionCounter] = +$('input[name="answer"]:checked').val();
  }

  // Displays next requested element
  function displayNext() {
    quiz.fadeOut(function() {
      $('#question').remove();
     
      if(questionCounter < questions.length){
        var nextQuestion = createQuestionElement(questionCounter);
        quiz.append(nextQuestion).fadeIn();
        if (!(isNaN(selections[questionCounter]))) {
          $('input[value='+selections[questionCounter]+']').prop('checked', true);
        }
       
        // Controls display of 'prev' button
        if(questionCounter === 1){
          $('#prev').show();
        } else if(questionCounter === 0){
         
          $('#prev').hide();
          $('#next').show();
        }
      }else {
        var scoreElem = displayScore();
        quiz.append(scoreElem).fadeIn();
        $('#next').hide();
        $('#prev').hide();
        $('#start').show();
      }
    });
  }

  // Computes score and returns a paragraph element to be displayed
  function displayScore() {
    var score = $('<p>',{id: 'question'});
   
    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }
   
    score.append('Hasil yang Benar dari jawabanmu adalah ' + numCorrect + ' Soal dari ' +
                 questions.length + ' Soal Yang Ada.');
    return score;
  }
})();

Pada bagian code inilah inti utama dari program quiz matematika sederhana menggunakan javascript, jadi Anda harus benar-benar membaca scriptnya supaya Anda memahami Algoritma dari program tersebut.



4. Membuat File style.css


Untuk selanjutnya, Anda memasukan code di bawah ini pada file CSS, pastinya Anda sudah tahukan apa fungsi dari css ini, file css ini berfungsi untuk menghias/ mendesain dari tampilan program quiz matematika sederhana ini dengan javascript yang kita buat ini supaya terlihat indah. Silahkan Anda pastekan code CSS di bawah ini pada file style.css


body {
    font-family: Open Sans;
}


h1 {

    text-align: center;
}


#title {

    text-decoration: underline;
}


#quiz {

    text-indent: 10px;
    display:none;
}


.button {

    border:4px solid;
    border-radius:5px;
    width: 40px;
    padding-left:5px;
    padding-right: 5px;
    position: relative;
    float:right;
    background-color: #DCDCDC;
    color: black;
    margin: 0 2px 0 2px;
}


.button.active {

    background-color: #F8F8FF;
    color: #525252;
}


button {

    position: relative;
    float:right;
}


.button a {

    text-decoration: none;
    color: black;
}


#container {

    width:50%;
    margin:auto;
    padding: 0 25px 40px 10px;
    background-color: #827b7f;
    border:4px solid #B0E0E6;
    border-radius:5px;
    color: #FFFFFF;
    font-weight: bold;
    box-shadow: 5px 5px 5px #888;
}


ul {

    list-style-type: none;
    padding: 0;
    margin: 0;
}


#prev {

    display:none;
}


#start {

    display:none;
    width: 90px;
}
#berjalan{font-family: Roboto;font-weight: bold;font-size: 20px;transition-duration: 0.0.5s;}

Jika Anda sudah membuat semua file diatas, maka Anda jangan lupa untuk save terlebih dahulu programnya dengan cara tekan pada keyboard Anda CTRL+ S.

Ahirnya quiz matematika sederhana menggunakan javascript sudah selesai, silahkan Anda coba program quiz dengan javascript sederhana tersebut, alangkah baiknya jika Anda menyimpan-nya di dalam file htdocs, dan menjalankan pada xampp terlebih dahulu.

Tetapi sebenarnya tanpa seperti itu juga tidak masalah cukup langsung saja jalankan. Pastinya berhasilkan. Jika Anda mengalami error silahkan Anda kembali scriptnya, dan mengcopy ulang dari yang atas sampai yang bawah script yang sudah Kami berikan tadi. Setelah itu silahkan coba kembali Program Membuat Quiz Dengan Javascipt Sederhananya.






Selanjutnya, pada program quiz pemrograman web dengan javascript ini berbeda dengan yang pertama yang Kita buat diatas tadi.


Cara Membuat Quiz pemrograman web sederhana dengan menggunakan Javascript



Sebelumnya sudah Kita bahas sedikit bahwa program quiz dengan javascrtipt yang kedua ini, yaitu berbeda dengan quiz yang pertama, lalu dimanakah letak perbedaannya?

Salah satu perbedaannya yaitu dari syntax yang digunakan, penyajian untuk menjawab pertanyaaan, semua script program quiz dengan javascript di satukan dalam satu file index.html, dan lain sebagainya.

Perbedaan pertama, dalam syntax yang digunakan yaitu program quiz pemrograman web ini menggunakan form input yang dapat di isi berupa huruf maupun angka.

Perbedaan kedua, penyajian untuk menjawab pertanyaan pada program quiz ini lebih simpel atau lebih sederhana.

Perbedaan ketiga, dibuat dalam satu file saja yaitu file index.html , kenapa hanya di satukan tidak dipisah-pisahkan seperti program quiz matematika tadi? Jawabannya karena Anda sudah paham terhadap program quiz dengan javascript yang pertama, maka saya membuatnya menjadi dalam satu file supaya Anda dapat membandingkan dan mempelajari jauh lebih dalam lagi script yang dipakai pada program quiz ini.


Sekarang mari kita buat program quiz pemrograman web sederhana dengan javascript.

1. Buat Sebuah Folder Baru Didalam Folder quiz Tadi yang bernama Quiz Web.


Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

Maka tampilan pada text editor Anda akan terlihat seperti gambar diatas. Kenapa dibuat didalam folder quiz tadi? Karena supaya lebih mudah saja menemukan file tersebut dan lebih rapih dalam penyimpanan file quiz nya.

Selanjutnya, didalam folder quiz web tadi buatlah satu file bernama index.html yang nantinya akan kita buat sebagai program quiz pemrograman web dengan javascript sederhana. Copy script program quiz dengan javascript dibawah ini dan save.



<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
<style type="text/css">
berjalan{font-family: Roboto;font-weight: bold;font-size: 20px;transition-duration: 0.0.5s;}
</style>

 <script type="text/javascript">
  var soal;
  var jawaban;
  var jumlahSoal = 0;
  var benar = 0;
  var salah = 0;

  var pesan;

  while (jumlahSoal<3) {
   if (jumlahSoal==0) {
    soal = window.prompt("Hypertext Markup Language kepanjangan dari ?");
    jawaban = "html";
   }
   if (jumlahSoal==1) {
    soal = window.prompt(pesan + "\n\n" + "Versi Python terbaru adalah ?");
     jawaban = "3";
   }
   if (jumlahSoal==2) {
    soal = window.prompt(pesan + "\n\n" + "Apa Kependekan cascading style sheet?");
    soal = soal.toLowerCase();
    jawaban = "css";
   }
   if (soal==jawaban) {
    benar += 1;
    pesan = "Jawaban Anda Benar";
   } else {
    salah += 1;
    pesan = "Jawaban Anda Salah"
   }
   jumlahSoal += 1;
  }
  document.writeln(" <berjalan></berjalan><hr />");
document.writeln("<p>Anda Menjawab : <b>" + benar + "</b> dari <b>" + jumlahSoal + "</b> soal dengan benar!</p>");
var text="Belajar Membuat Quiz javascript Sederhana";
var word = text.split("");
var i = 0;
var interval = setInterval(writeText, 100 );
function writeText() {
    var berjalan = document.getElementsByTagName("berjalan")[0];
    if (i < word.length) {
        berjalan.innerHTML += word[i];
        i++;
    }
}
</script>
</head>
<body>
 </body>
</html>

Sekarang coba Anda jalankan program quiz dengan javascript yang tersebut. Jika Anda sudah bisa berhasil dari membuat program quiz dengan javascript sederhana yang pertama dan yang kedua, selanjutnya Anda bisa mengembangkan sendiri dengan program tersebut. Jikalau Anda mau mengeditnya silahkan saja, agar Anda menjadi lebih paham lagi dengan bahasa pemrograman javascript.



Sekian yang dapa sampaikan pemrograman.webillian pada kesempatan kali ini tentang Cara Membuat Quiz Dengan Javascript Sederhana Terbaru, semoga apa yang pemrograman.webillian terangkan ini bisa bermanfaat bagi Anda.

Sumber :

https://www.panduancode.com/2019/09/cara-membuat-program-quiz-dengan-javascript.html


9/12/2019

Pengertian Bootstrap dan Cara penggunaannya Yang Harus Anda Kenali!

      Comment   
programmer.webillian.com - Pada kesempatan kal ini Kami akan membahas seputar pengertian bootstrap dan cara menggunakan bootstrap. Bootstrap merupakan framework dari sebuah CSS dimana itu sangat membantu untuk para pembuat dan pengembang sebuah website dalam malasah komponen ataupun tampilan dalam website. Yang sedang trending Saat ini ada salah satu framework CSS yang sangat banyak diminati dan digunakan yaitu Twitter Bootstrap, maksudnya adalah Anda tahu Twitter? Nah Twitter itu dibangun menggunakan CSS Bootstrap.

pengertian bootstrap dan cara penggunaannya yang harus dikenali


Perkembangannya suatu website saat ini dari tahun-ketahun selalu mengalami peningkatan. Jika Anda pengguna internet pada awal-awal internet ada, maka Andapun pasti bisa melihat hasil perbedaannya. Dulu hanya pengembangan dari mulai hanya teks saja, bahkan untuk sekarang website sudah bisa dipadukan dengan berbagai macam multimedia dan animasi lainnya. Sehingga lebih tampak menarik dan enak untuk dilihat oleh para setiap pengunjung/ user.

Asal SEO

Featured

[Featured][recentbylabel2]

Featured

[Featured][recentbylabel2]
Notification
Jika Anda tertarik dengan artikel di website ini silahkan berkunjung kembali.
Done