Percobaan Form dengan HTML, PHP, dan CSS

Sebelum saya mulai marilah Kita ucapkan Basmalah terlebih dahulu, agar Kodingan Kita kali ini bisa Berjalan dengan lancar Amiin ....

Okee,,, Kali ini Saya diberi tugas untuk membuat Laporan mengenai Form menggunakan HTML dan CSS mungkin temen-temen juga mengunjungi Blog saya ini karena sudah tau apa itu HTML dan CSS .

1.KONSEP DASAR

Mungkin temen-temen semua udah tau apa itu HTML dan CSS ...

Jadii HTML itu singkatan dari Hypertext Markup Language atau sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web .

Sedangkan Kalau CSS Singkatan Dari Cascading Style Sheets Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web .

2.TUJUAN

      Tujuan Dari Percobaan Form dengan HTML dan CSS , Diharapkan Agar temen-temen dan Saya sendiri Pribadi lebih Mengerti dan Faham mengenai Form Di HTML dan Lebih bagus Lagi dalam menghias Web Di CSS .

            Intinya disini saya akan Menjelaskan Bagaimana cara membuat Form dan Menghiasnya lewat CSS agar temen-temen Lebih faham ....

3.TAHAPAN PENGERJAAN

      Oke Yg pertama harus temen-temen lakukan adalah membuka Aplikasi text editor yg temen-temen punya, yaiyalah namanya juga mau ngoding harus pake text editor yaa :V entah itu notepad,notepad++,Atom,Sublime,dll .

           1. Membuat Formnya

            Okee disini Saya asumsikan Temen-temen sudah membuka text editornya masing-masing. Yg pertama harus temen-temen lakukan buat syntax html seperti biasa contohnya :

             Setelah itu Dibagian Title temen temen bebas mau ngasih judul apa disini saya kasih judul “Form Buku Tamu “, Lalu dibagian Body temen-temen buat Syntax <form> lalu seperti biasanya tutup dulu jadu </form> , setelah itu , dibagian dalam syntax form tadi temen temen isi dengan syntax <input> lalu tutup seperti biasanya . Temen-temen bebas mau ngasih berapa yg harus diinputkan nanti.Agar lebih jelasnya Temen-temen bisa Lihat Gambar Codingan saya dibawah ini temen-temen bisa langsung Praktekan di aplikasi Text Editor masing-masing .

          

           Setelah temen temen selasai mengkoding seperti kodingan saya Diatas, temen-temen save dulu filenya dengan extensi (namafile).html .

          2.   Membuat Hasil dari Inputan Form dan menghubungkan Form dgn PHP

Sekarang temen-temen buat lagi file baru dengan extensi (namafile).php , setelah itu temen temen isi dengan syntax dasar yg temen-temen buat sebelumnya .

Setelah temen-temen buat syntax dasar di dalam file php tadi, skrg temen temen buat phpnya atau penghubungnya di bagian body htmlnya agar lebih mudahnya temen temen bisa lihat gambar kodingan saya dibawah ini : 

3.  Menghias form dengan CSS

Okee,, sekarang agar web kalian lebih terlihat lebih cantik dan menarik mari kita hias dengan menggunakan CSS, Penggunaan css ada 3 cara temen-temen bisa nulis langsung di htmlnya langsung,atau dibagian head htmlnya, atau berbeda dengan file htmlnya atau meembuat file baru CSS. Disibi saya menggunakan cara yg ketiga .

Pertama temen-temen buat file baru dengan extension (namafile).css

Setelah itu temen temen bisa belajar syntax syntaxnya di w3schools.com, karena banyak sekali syntaxnnya saya tidak bisa memberikan penjelasan satu persatu jadi saya hanya bisa memberikan beberapa contoh saja , seperti dibawah ini : 

4. Kesimpulan

Kesimpulannya jadi Untuk membuat semua itu Temen temen harus sabar membuatnya dan sering sering mengulik agar temen – temen lebih mengerti, karna disini Saya juga Masih Belajar Mohon Maaf Bila ada Tutur kata yg salah , TERIMA KASIH TELAH BERKUNJUNG ,JANGAN LUPA TINGGALKAN PESAN !!!

5. Daftar Pustaka

Wikipedia.com ; W3schools.com .

Read More

TUTORIAL MEMBUAT FORM LOGIN RESPONSIVE

Halo Teman Teman, Kesempatan kali ini Saya akan membahas/membuatkan tutorial Bagaimana Caranya Membuat Form Login yang Responsive.

Sebelumnya, mari kita kenalan dulu dengan Responsive, responsive disini bahwa Form Login yang kita buat itu sangat UI Friendly (User Interface Friendly) Maksudnya tampilan ini sangat-sangat friendly untuk para penikmatnya... Karena Form Login disini akan sangat friendly dengan device manapun, mau itu PC 15', Lappy 10' , Smartphone 5', Smartphone 4'. Misal tidak friendly, maka form tersebut akan acak-acakan saat dibuka oleh device seperti Smartphone.

Nah ini dia hasil nya dan sudah Friendly

Gimana? keren kan tampilannya untuk Form Sederhana

Nah berikut source code/codingan yang sudah jadinya..

Lalu save script ini menjadi index.php

Berikut file script selanjutnya

* {

    padding: 0px;

    margin: 0px;

    font-family: arial;

}

#login {

    width: 100%;

    height: 100vh;

    background-image: url("img/bg.jpg");

    background-size: cover;

    background-repeat: no-repeat;

    position: absolute;

}

.center {

    width: 350px;

    height: auto;

    margin: 0 auto;

    margin-top: 100px;

    background-color: #f0f0f0;

    box-shadow: 2px 2px 16px 0px #757575;

    padding: 40px;

}

.center h2 {

    font-size: 40px;

    text-align: center;

    color: #757575;

    padding-bottom: 40px;

}

.f1 {

    width: 100%;

}

.itpw {

    width: 92%;

    padding: 13px 10px;

    margin: 5px 0px;

    background-color: #dbdbdb;

    border: 3px solid #dbdbdb;

    color: #757575;

    transition: all 0.7s;

}

.its {

    width: 99.7%;

    font-size: 19px;

    color: #f5f5f5;

    padding: 12px;

    margin: 5px 0;

    background-color: #004d40;

    border: none;

    transition: all 0.4s;

}

.itpw:focus {

    border-bottom: 3px solid blue;

    color: blue;

}

.its:hover, .its:focus {

    opacity: 0.7;

    cursor: pointer;

}

.center p {

    margin: 20px 0;

    text-align: center;

    font-size: 14px;

}

.center p a {

    color: #757575;

}

@media screen and (min-width:1500px) {

    

    .center {

        widows: 350px;

    }

}

@media screen and (min-width:900px) {

    #login {

        background-size: 100% 100%;

    }

    

    .its {

        width: 100%;

}

    

    .itpw {

        font-size: 14px;

        width: 90%;

        padding: 13px 3%;

    }

    

    .center {

        width: 230px;

    }

    

    .center p {

        font-size: 12px;

    }

    

}

@media screen and (max-width:350px) {

    .center {

        padding: 20px;

        width: 75%;

    }

}

Lalu save script ini menjadi style.php

Berikut file script selanjutnya

Lalu save script ini menjadi logout.php

Lalu save .
Sekarang coba buka XAMPP anda, ohiya file 3 tadi silahkan simpan dalam folder C:/XAMPP/htdocs/(FOLDER ANDA)
Lalu jalankan XAMPP -> buka browser -> masuk ke alamat Localhost/FOLDERANDA

Terima Kasih Telah Berkunjung ^_^

Read More

Percobaan Form Dengan CSS,

A. Tujuan
           Memahami dan mengetahui fungsi dari CSS (Cascading Style Sheets) sebagai bahasa pemrograman guna mengatur desain dan layout web.

B.Konsep Dasar

Read More

Cara Mengecek Power Supply Hidup atau Mati (TANPA PC)

Hardware yang satu ini sangat berperan penting dalam sebuah PC, Rusak nya Power Supply atau bahkan Power Suppy mati total, di jamin PC anda 100% tidak akan dapat hidup. Pada Power Supply ATX ini berbeda dengan Power Supply dengan jenis AT yang dulu, Power Supply ATX ini ketika kita 
menghidupkan nya, ia tidak langsung menghubungkan tegangan PLN 220VAC melalui sebuah saklar, tetapi cukup dengan menekan tombol Power yang terhubung ke mainboard.

Power Supply ATX ini dapat dengan mudah kita bongkar, Lalu bagaimana cara menghidupkan Power Supply ini tanpa terhubung lewat Mainboard.

Disini saya akan kasih sedikit tips, tentang Cara Mengecek PSU (PowerSupply) ATX Tanpa Terhubung Ke Mainboard . berikut ini langkah – langkah nya :

- Yang pertama, siapkan Power Supplt yang ingin di cek

- Kedua, Siapkan kabel jumper untuk menghubungkan Pin Socket

- Ketiga, Sambungkan Kabel Power ke listrik

- Keempat, Ambil Socket Power Supplt ATX yang memiliki 20 pin

- Kelima, Cari Kabel berwarna Hijau (PS On), dan untuk menghidupkan nya, hubungkan pin kabel berwarna hijau tadi dengan jumper ke pin kabel berwarna hitan (Ground)

- Yang terakhir, perhatikan pada bagian Kipas Power Supply, jika berputar dengan Normal berarti Power Supply dalam keadaan baik.

Cara di atas, hanya dapat mendeteksi hidup atau ngga nya sebuah Power Supply, tapi belum tentu Power Supply itu benar – benar sehat, bisa saja ketika di sambungkan ke mainboard menjadi Down sehingga tidak dapat berfungsi. jika masih kurang yakin coba pasang Power Supply ATX kamu ke PC lain, Jika di PC lain hidup tetapi di PC kamu mati total berarti kemungkinan hardware lain di PC kamu ada yang rusak seperti mainboard.

Sumber : http://arwanshare.blogspot.co.id/2013/07/cara-mengecek-power-supply.html

Read More