Minggu, 10 Oktober 2021

PEMROGRAMAN CSS

 

1. How To Style Alert Buttons

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<style>

.btn {

    border: none;

    color: white;

    padding: 14px 28px;

    font-size: 16px;

    cursor: pointer;

}


.success {background-color: #4CAF50;} /* green */

.success:hover {background:: #46a049;}


.info {background-color: #2196f3;} /* blue */

.info:hover {background: #0b7dda;}


.warning {background-color: #ff9800;} /* orange */

.warning:hover {background: #e68a00;}


.danger {background-color: #f44336;} /* red */

.danger:hover {background: #da190b;}


.default {background-color: #e7e7e7; color: black;} /* gray */

.default:hover {background: #ddd;}

</style>

</head>

<body>


<h1>Alert Buttons</h1>


<button class="btn success">success</button>

<button class="btn info">info</button>

<button class="btn warning">warning</button>

<button class="btn danger">danger</button>

<button class="btn default">default</button>


</body>

</html>


2. CSS FORMS


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<style>

input[type=text], select {

    width: 100%;

    padding: 12px 20px;

    margin: 8px 0;

    display:inline-block;

    border: 1px solid #ccc;

    border-radius: 4px;

    box-sizing: border-box;

}


input[type=submit] {

    width: 100%;

    background-color: #4caf50;

    color: white;

    padding: 14px 20px;

    margin: 8px 0;

    border-radius: 4px;

    cursor: pointer;

}

input[type=submit]:hover {

    background-color: #45a049;

}


div {

    border-radius: 5px;

    background-color: #f2f2f2;

    padding:200px;

}

</style>

<body>

<h3>Using CSS to style an HTML form</h3>


<div>

 <form action="/action_page.php">

 <label for="fname">First Name</label>

 <input type="text"id="fname" name="firstname" placeholder="Your name.." >

 

 <label for="lname">Last Name</label>

 <input type="text" id="lname" name="lastname" placeholder="Your last name.." >


 <label for="country">country</label>

 <select id="country" name="country">

     <option value="australia">Australia</option>

    <option value="canada">Canada</option>

    <option value="usa">USA</option>

   </select>

   

  <input type="submit" value="Submit" >

 </form>

</div>


</body>

</html>


3.CSS NAVIGATION BAR


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<style>

body { font-family:Arial; }

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #333;

 }

 

 li {

    float: left;

 }

 

 li a {

    display: block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

 }

 

 li a:hover:not(.active) {

    background-color: #111;

 }

 

 .active {

    background-color: #4caf50;

 }

 </style>

 </head>

 <body>

 

 <ul>

  <li><a href="#home">Home</a></li>

  <li><a href="#news">News</a></li>

  <li><a href="#contact">Contact</a></li>

  <li style="float:right"><a class="active" href="#about">About</a></li>

  </ul>

  

  </body>

  </html>


4. CSS Menu Dropdown


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<style>

body { font-family:Arial; }

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #333;

}


li {

    float: left;

}


li a, .dropbtn {

    display: inline-block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}


li a:hover, .dropdown:hover .dropbtn {

    background-color: Red;

}


li.dropdown {

    display: inline-block;

}


.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

   

}


.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

    text-align: left;

}


.dropdown-content a:hover {background-color: #f1f1f1}


.dropdown:hover .dropdown-content {

    display: block;

}

</style>

</head>

<body>


<ul>

  <li><a href="#home">Home</a></li>

  <li><a href="#news">News</a></li>

  <li class="dropdown">

   <a href="javascript:void(0)" class="dropbtn">Dropdown</a>

   <div class="dropdown-content">

    <a href="#">Link 1</a>

    <a href="#">Link 2</a>

    <a href="#">Link 3</a>

   </div>

  </li>

 </ul>

 

 <h3>Dropdown Menu inside a Navigation Bar</h3>

 <p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>

</html>

di Tidak ada komentar:

PEMROGRAMAN JAVA


1. Tag

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementByid('demo').innerHTML = "My First JavaScript";
</script>
</body>
</html>
 
 
 
2. Window Alert

t<!DOCTYPE html>
<html>
<body>

<p>Click the botton to display an alert box.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction(){
alert("Hello! I am an alert box!");
}
</script>
</body>
</html>



  3. Alert


<!DOCTYPE html>
<html>
<head>
<script>
function validateForm(){
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out ");
}
}
</script>
</head>
<body>
<h1>Js Alert</h1>
<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

 4. JavaScript Numeric


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Can Validate Input</h2>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction(){
var x, text;
x = document.getElementByid('numb').value;
if (isNall(x) || x < 1|| x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementsByid('demo').innerHTML = text;
}
</script>
</body>
</html>



   5.  Scroll Back to top button


<!DOCTYPE html>

<html>

<head>

<style>

#myBtn {

display: none;

position: fixed;

bottom: 20px;

right: 30px;

z-index: 99;

border: none;

outline: none;

background-color: red;

color: white;

cursor: pointer;

padding: 15px;

border-radius: 10px;

}


#myBtn:hover {

background-color: #555;

} 

</style>

</head>

<body>


<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>


<div style="background-color: black;color: white;padding: 30px">Scroll Down</div>

<div style="background-color: lightgrey;padding: 30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user start to scoll the page</div>


<script>

window.onsroll = function() (scrollFunction());


function scrollFunction(){

if (document.body.ScrollTop > 20|| document.documentElement,ScrollTop > 20) {

document.getElementByid('myBtn').style.display = "block";

} else {

document.getElementsByid('myBtn').style.display = "none";

}

}

function topFunction(){

document.body.ScrollTop = 0;

document.documentElement.ScrollTop = 0;

}

</script>

</body>

</html>



    6. Toggle Like and Dislike

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href=" like-dislike.min.css">

<style>

.fa {

font-size: 50px;

cursor: pointer;

user-select: none;

}


.fa:hover{

color: darkblue;


}

</style>

</head>

<body>

<h1></h1>


<p>Click on the icon toggle between thumbs-up and thumbs-down (like/dislike):</p>


<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>


<script>

function myFunction(x){

x.classList.toggle("fa-thumbs-down");

}

</script>

</body>

</html>

di Tidak ada komentar:

Minggu, 03 Oktober 2021

Permasalahan Algoritma : Sorting


 I.    Pengertian sorting

yaitu suatu proses untuk menyusun kembali humpunan objek menggunakan aturan tertentu. Sorting disebut juga sebagai suatu algoritma untuk meletakkan kumpulan elemen data kedalam urutan tertentu berdasarkan satu atau beberapa kunci dalam tiap-tiap elemen. Pada dasarnya ada dua macam urutan yang biasa digunakan dalam suatu proses sorting:

1. Urut menaik (ascending)
   Mengurutkan dari data yang mempunyai nilai paling kecil sampai paling besar

2. Urut menurun (descending)

   Mengurutkan dari data yang mempunyai nilai paling besar sampai paling kecil.

Mengapa harus melakukan sorting data? Ada banyak alasan dan keuntungan dengan mengurutkan data. Data yang terurut mudah untuk dicari, mudah untuk diperiksa, dan mudah untuk dibetulkan jika terdapat kesalahan. Data yang terurut dengan baik juga mudah untuk dihapus jika sewaktu-waktu data tersebut tidak diperlukan lagi. Selain itu, dengan mengurutkan data maka kita semakin mudah untuk menyisipkan data atapun melakukan penggabungan data.

Ada berbagai jenis metode-metode untuk menyelesaikan permasalahan sorting yaitu:

1. Insertion Sort (Metode Penyisipan)
2. Selection Sort (Metode Seleksi)
3. Bubble sort(Metode Gelembung)
4. Shell Sort (Metode Shell)
5. Quick Sort (Metode Quick)
6. Merge Sort (Metode Penggabungan)

 

II.            Solusi metode Insertion Sort 

Metode Insertion Sort adalah pengurutan yang dilakukan dengan cara menyisipkan elemen pada posisi yang sudah ditentukan atau tepat.

Contoh gambaran dari implementasi Insertion Sort:

1st Cycle:
(70, 60, 30, 50, 40, 20) -> (60, 70, 30, 50, 40, 20)
(60, 70, 30, 50, 40, 20)

2nd Cycle:
(60, 70, 30, 50, 40, 20) -> (60, 30, 70, 50, 40, 20)
(60, 30, 70, 50, 40, 20) -> (30, 60, 70, 50, 40, 20)
(30, 60, 70, 50, 40, 20)

3rd Cycle:
(30, 60, 70, 50, 40, 20) -> (30, 60, 50, 70, 40, 20)
(30, 60, 50, 70, 40, 20) -> (30, 50, 60, 70, 40, 20)
(30, 50, 60, 70, 40, 20) -> (30, 50, 60, 70, 40, 20)
(30, 50, 60, 70, 40, 20)

4th Cycle:
(30, 50, 60, 70, 40, 20) -> (30, 50, 60, 40, 70, 20)
(30, 50, 60, 40, 70, 20) -> (30, 50, 40, 60, 70, 20)
(30, 50, 40, 60, 70, 20) -> (30, 40, 50, 60, 70, 20)
(30, 40, 50, 60, 70, 20) -> (30, 40, 50, 60, 70, 20)
(30, 40, 50, 60, 70, 20)

5th Cycle:
(30, 40, 50, 60, 70, 20) -> (30, 40, 50, 60, 20, 70)
(30, 40, 50, 60, 20, 70) -> (30, 40, 50, 20, 60, 70)
(30, 40, 50, 20, 60, 70) -> (30, 40,20, 50, 60, 70)
(30, 40, 20, 50, 60, 70) -> (30, 20, 40, 50, 60, 70)
(30, 20, 40, 50, 60, 70) -> (20, 30, 40, 50, 60, 70)
(20, 30, 40, 50, 60, 70)

 

III.            Kelebihan dan kekurangan metode Insertion Sort

 

Kelebihannya

  •  Stabil
  •  Penerapannya yang sederhana
  •  Pengurutan data yang tercepat dalam jumlah elemen yang sedikit

Kelemahannya

  • Banyak operasi yang dilakukan dalam mencari posisi elemen yang tepat
  • Untuk data dalam jumlah besar tidak praktis
di Tidak ada komentar:
Langganan: Postingan (Atom)

PENERAPAN CRM PADA PERUSAHAAN KENTUCKY FRIED CHICKEN(KFC)

  Tidak semua perusahaan atau wirausahawan dapat memberikan sebuah produk yang dijual menyedari pentingnya sebuah pelayanan terhadap konsum...