- NoLimitz -

Beyond Your Imaginations !!
Browsing Programming

Membuat Form Login Menggunakan CSS3

May30

Sekilas Tentang CSS :

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Membuat Form Login Menggunakan CSS3 :

1. Buatlah Form Login dengan menggunakan HTML.

<form>
<label>Username:</label>
<input type="text" name="username" />
<label>Password:</label>
<input type="password" name="password"  />
<input type="submit" value="Login" name="submit" />
</form>

2. Setelah itu mari kita mulai menghias Form Login di atas dengan menggunakan CSS3 pada bagian <body>, <label>, dan <form>.

body{
background: #4E0085;
}

label {
font-size: 12px;
font-family: arial, sans-serif;
list-style-type: none;
color: #FFFFF;
text-shadow: #000 1px 1px;
margin-bottom: 5px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
}

form {
width: 201px;
padding: 20px;
margin:150px auto;
border: 2px solid #FFFFFF;

/*** Membuat tepi menjadi rounded ***/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

/*** Membuat bayangan di belakang box ***/
-moz-box-shadow:0px -5px 300px #FFFFFF;
-webkit-box-shadow:0px -5px 300px #FFFFFF;

/*** Membuat Warna Gradient Pada Background - 2 Deklarasi : 1.Firefox 2.Webkit(Chrome dan Safari) ***/
background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
}

3. Lalu kita akan menghias bagian <input> dengan menggunakan CSS3.



input {
width: 200px;
padding: 6px;
margin-bottom: 10px;
border-top: 1px solid #ad64e0;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
background: #8a33c6;

/*** Transition Selectors - Bagian apa yang akan beranimasi dan berapa lama ***/
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;

/*** Menambahkan bayangan ***/
-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
}

input:hover {
-webkit-box-shadow: 0px 0px 4px #000;
background: #9d39e1;
}

4. Langkah terakhir adalah menghias bagian Tombol Submit dengan menggunakan CSS3.



input.submit {
width: 100px;
color: #fff;
text-transform: uppercase;
text-shadow: #000 1px 1px;
border-top: 1px solid #ad64e0;
margin-top: 10px;

/*** Menambah CSS3 Gradients ***/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
}

input.submit:hover {
-webkit-box-shadow: 0px 0px 2px #000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
}

input.submit:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6));
background: -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9);
}

NB : Untuk me-link HTML dengan CSS extrenal silahkan paste kode berikut ini diantara <head></head> di HTML anda : <link rel="stylesheet" href="NamaCSSAnda.css" type="text/css" media="all" />

Download : Form Login Menggunakan CSS3 [ 1.19 KB ]

Password : http://nolimitz.web.id/

NB : Untuk menggunakan CSS3 anda harus menggunakan browser Mozzila Firefox Versi 3.6 / Google Chrome / Safari. Jangan pernah pakai Internet Explorer ~ !!


Selamat Mencoba ^_^ ~ !!

posted under Programming | 11 Comments »

Program Countdown Menggunakan Thread Pada Java

March30

public class CountDown implements Runnable{

private static int startCount = 11;
private int countDown = --startCount;
private static int threadCount = 0;
private int threadNumber = ++threadCount;

public void run() {
System.out.println("Waktu tinggal "+countDown+" detik ( Thread nomer : "+threadNumber+" )");

if (countDown == 1) {
System.out.println("\nWaktu Habis ~ !!");
}
}

private static void doThreadCountdown() throws java.lang.InterruptedException{
for (int i = 0; i < 10; i++){
Thread.sleep(1000);
Runnable ot = new CountDown();
Thread th = new Thread(ot);
th.start();
}
}

public static void main(String[] args) throws java.lang.InterruptedException{
System.out.println("\nMenghitung mundur dalam 10 detik ...\n");
doThreadCountdown();
}
}

Hasil Outputan :

Penjelasan : Pada program ini menghasilkan 10 buah thread dengan menggunakan looping sebanyak 10 kali dan setiap thread yang tercipta dimanfaatkan untuk melakukan hitung mundur/countdown.

posted under Programming | 1 Comment »

Algoritma Searching Menggunakan Java

March30

Sekilas Tentang Searching

Searching atau Pencarian merupakan kegiatan untuk menemukan atau mencari suatu data yang ditentukan di suatu tempat, apakah sesuai atau tidak. Searching mempunyai beberapa metode, salah satunya adalah metode pencarian beruntun atau disebut juga dengan Sequential Search yang akan saya implementasikan kali ini.

NB : Sequential Search adalah metode pencarian beruntun yang dimulai dari data elemen pertama hingga data elemen terkahir.

Algoritma Searching Menggunakan Java

Misalkan saja saya mempunyai data dalam bentuk array dengan nama DataArray yang mempunyai Index Array sebanyak 8 buah dimana tiap index memiliki nilai angka masing masing,  yaitu 3, 6, 19, 90, 30, 20, 10, 8 dan data yang akan kita cari saya beri nama NilaiX. Misalnya saja NilaiX = 90 –> Apakah ada dalam DataArray dan berada pada Index Array yang keberapa ?

Program Searching

import java.io.*;
public class Searching{
public static void main(String[] args) throws Exception{

BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
int DataArray [] = {3, 6, 19, 90, 30, 20, 10, 8};
int x, NilaiX;
boolean Ketemu;

//Menampilkan nilai data array
System.out.println("\nData Array :");
for (x=0; x<=DataArray.length-1; x++){
System.out.print(DataArray[x]+" ");
}
System.out.println("\n");

//Masukan data yang ingin dicari
System.out.print("Masukan angka yang ingin dicari : ");
String Input = br.readLine();
NilaiX = Integer.parseInt(Input);

Ketemu = false;
for (x=0; x<=DataArray.length-1; x++){
if (DataArray[x] == NilaiX){
Ketemu = true;
break;
}
}
if (Ketemu == true){
System.out.println("Angka "+NilaiX+" ditemukan pada Index Array ke-"+(x+1)+" ~ !!\n");
}else{
System.out.println("Angka tidak ditemukan ~ !!\n");
}
}
}

Hasil Outputan :

Penjelasan : Dalam program ini pengecekan dilakukan dengan menggunakan looping sebanyak panjang array, dimana setiap index dalam array akan dicek dari Index Array yang pertama hingga Index Array yang terakhir. Jika angka yang dicari ketemu maka system akan mengoutputkan pesan bahwa angka telah ditemukan pada Index Array ke-x.

posted under Programming | 3 Comments »

Membalik Kata Menggunakan Java

March20

import java.io.*;
public class Reverse{
public static void main(String[] args) throws Exception{
BufferedReader br = new BufferedReader (new InputStreamReader(System.in));

String x;
int i;

System.out.print("\nMasukan kata yang ingin dibalik : ");
x = br.readLine();

System.out.print("Hasilnya adalah : ");
for(i=x.length()-1; i>=0; i--){
System.out.print(x.charAt(i));
}
System.out.print("\n");
}
}

Penjelasan : Untuk membalik suatu kata, langkah pertama yang dilakukan adalah membaca inputan user lalu dimasukan ke dalam variabel x. Selanjutnya program di atas akan melakukan looping mundur, dimana variabel i akan diisi oleh jumlah panjang kata. Langkah selanjutnya adalah menghasilkan outputan kata dari huruf yang paling akhir sampai huruf pertama, hal ini bisa terjadi karena program di atas melakukan looping mundur dengan memanfaatkan charAt() yang berfungsi untuk membaca kata per huruf.

posted under Programming | 3 Comments »

Membaca Dari Sebuah File Menggunakan Java

March20

import java.io.*;
class Baca{
public static void main(String args[]) throws IOException{
BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

String FileName;
FileInputStream fis = null;

System.out.print("\nMasukan nama file yang ingin dibaca : ");
FileName = br.readLine();

System.out.println("\nMembaca file "+FileName +" ...");
System.out.print("Isi dari file "+FileName +" adalah : ");
try {
fis = new FileInputStream(FileName);
} catch (FileNotFoundException ex) {
System.out.println("File tidak ditemukan ~ !!");
}
try {
char data;
int temp;
do {
temp = fis.read();
data = (char) temp;
if (temp != -1) {
System.out.print(data);
}
} while (temp != -1);
System.out.print("\n");
} catch (IOException ex) {
System.out.println("Error dalam membaca file ~ !!");
}
}
}

Penjelasan : Pada program ini saya menggunakan menggunakan class FileInputStream diamana salah satu constructor dari class ini adalah FileInputStream(String FileName) yang berfungsi untuk membuat koneksi ke file yang sebenarnya dimana FileName ditentukan sebagai sebuah argument. Selain itu sebuah FileNotFoundException diberikan ketika file tidak ada atau tidak dapat dibuka untuk dibaca. Sedangkan method read berfungsi untuk mengembalikan sebuah integer yang merepresentasikan pembacaan data dan mengembalikan sebuah nilai -1 ketika akhir dari file telah dicapai.

Hasil Outputan :


posted under Programming | No Comments »
« Older Entries


Welcome to NoLimitz.web.id !!

Merupakan blog yang berisi tentang berbagai macam topik yang menarik dari hasil nongkrong, bengong, kongkow-kongkow, bertapa hingga ngelamun yang gituan. Maknanya terserah yang baca deh. Semua kegiatan ini diprovokasi oleh Galih Satrio – NoLimitz :D

Be The Best Above The Rest !!


    Who's Online

    • 0 Members.
    • 1 Guest.