Percobaan Form dan CSS | 1

Sahabat Techno-Media pada kesempatan kali ini Tech-Me akan membahas tntang Percobaan Form dengan HTML dan CSS
Kita akan perkenalan dulu dengan CSS

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


2. ALAT DAN BAHAN 
1.      Satu unit PC
2.      Aplikasi Notepad++
3.      Software web server local XAMPP
4.      Web browser
5.      Lembar kerja percobaan.




3. LANGKAH - LANGKAH PERCOBAAN
Sebelum memulai percobaan menggunakan CSS, ikuti petunjuk di bawah ini terlebih dahulu

1.      Buatlah folder baru di desktop dan beri nama folder tersebut dengan NIM Anda.
2.      Untuk menyimpan file dari Notepad ke bentuk .css, jangan lupa untuk menuliskan .css dalam kolom “File name”, dan mengganti type file menjadi “All Types”.
3.      Untuk menyimpan file dari Notepad ke bentuk .html, jangan lupa untuk menuliskan .html dalam kolom “File name”, dan mengganti type file menjadi “All Types”. Percobaan pertama Langkah percobaan praktek pertama :
1. Buka aplikasi Notepad++ atau sejenisnya yang anda sukai.
2. Lalu Copy kan kode berikut kedalam Notepad++

<html>
<head>
<link href="css.css" rel="stylesheet" />
</head>

<body>
<table width="70%" align="center">
<?php include 'header.php'; ?>
<tr>
<td width="70%">
<div id="isi" class="button3">
<h1 style="color:blue:font:bold 16px Candara, arial, tahoma;">Ayo Minum Vitacripit!</h1>
<img src="fb-art.png">
<html>
<head>
<title>Buku Tamu</title>
</head>
<body>
<h1>Buku Tamu</h1>
<br />
Silahkan isi buku tamu di bawah ini untuk meninggalkan pesan Anda!<br /><br />

<form action="thanks.php" method="post">
Nama Lengkap* : <br />
<input name="nama" type="text" placeholder="Dhiemas Ganisha" required=""><br /><br />
Email* : <br />
<input name="email" type="text" placeholder="dhimasganisha@gmail.com" required=""><br /><br />
Jenis Kelamin* : <br />
<input type="radio" name="jk" value="Laki-Laki" required="">Laki-Laki</input>
<input type="radio" name="jk" value="Perempuan" required="">Perempuan</input> <br /><br />
Produk Yang Diinginkan* : <br />
<input type="checkbox" name="produk" value="Susu Sapi">Susu Sapi</input> <input type="checkbox" name="produk2" value="Susu Kambing">Susu Kambing</input><br /><br />
Kantor Cabang* :
<select name="cabang" >
<option>--PILIH--</option>
<option value="Bandung">Bandung</option>
<option value="Jakarta">Jakarta</option>
<option value="Surabaya">Surabaya</option>
</select><br /><br />
Pesan* : <br />
<textarea cols="70" rows="15" name="pesan"  placeholder="pesan anda..." required=""></textarea><br /><br />
<b>INFO:</b> HARAP SEMUA KOLOM *(required) DI ISI!</br>
<input type="submit" name="kirim" value="Kirim"> <input type="reset" value="Hapus">
</form>
</body>

</html>
</div>
<?php include 'footer.php'; ?>
</td>
</tr>
<tr>
<td colspan="2" height="50" class="footer">
<p style="color:blue;font:bold 12px candara, arial, tahoma;text-align:center";>
Copyright by <a href="index.php">PT. VitaIndo</a>
</p>
</td>
</tr>
</table>
</body>



</html>

         3. Save file tersebut dengan nama index.php
         4. Dan coba jalankan file tersebut.. pasti nanti bakal ada yang salah . Kenapa? di script tersebut saya memasukkan <?php include 'header.php'; ?> dan <?php include 'footer.php'; ?> yang artinya ada file header.php yang harus kita buat. Silahkan copas kode dibawah ini header.php

<tr>
<td colspan="2"><img src="gmbr.jpg"/></td>
</tr>
<tr>
<td colspan="2">
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a href="#">Depan</a></td>
<td align="center"><a href="#">Profil</a></td>
<td align="center"><a href="#">Produk</a></td>
<td align="center"><a href="index.php?p=" name="p">Buku Tamu</a></td>
<td align="center"><a href="#">Forum</a> </td>
</tr>
</table>
</div>
</td>
</tr>

footer.php

<td width="30%" class="table-menu">
<br><br><br><br><br><br><br>
<center>
<h3>Kunjungi Kami</h3>
<a href="http://Facebook.com"><button class="button1"><b>Facebook</b></button></a>
<a href="http://twitter.com"><button class="button2"><b>Twitter</b></button></a>
<a href="http://lazada.co.id"><button class="button3"><b>Lazada</b></button></a>
</center>
</td>

Hampir lupa. silahkan copy kode css berikut dan save menjadi css.css

<style type="text/css">
table{
border-collapse:collapse;
border:1px solid black;
}
#menu{
height:40px;
width:100%;
background:url(hitam.png) repeat-x;
}
#menu table{
border:none;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14 px Candara, Arial, Tahoma;
}
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font:11 px candara, arial, tahoma;
padding-bottom:5px;
}
#isi img{
border:1px solid black;
width:80px;
height:100px;
}
.table-menu{
vertical-align:top;
border-collapse:collapse;
border:1px solid black;
background-color:purple;
}
.footer{
background-color:#f95e5e;
}
.button1{
background-color:blue;
}
.button2{
background-color:blue;
}
.button3{
background-color:orange;
}
.button4{
background-color:black;
}
.post-body img {max-width:98% !important;
}

</style>

Lalu silahkan anda save dengan yang sudah saya jelaskan di atas tersebut. dan Jalankan web dengan menggunakan XAMPP. Selanjutnya saya akan membahas Bagaimana caranya form berjalan dengan menggunakan PHP


KESIMPULAN
Sampai sini saya dapat simpulkan bahwa Membuat webiste untuk pemula bisa menggunakan Kode Tabel dan menggunakan PHP yang masih awal.  dan pastikan kode dalam CSS dan HTML tersebut sesuai. jika di HTML lihat di <class="table-menu"> seperti itu.

Daftar Pustaka
DonnyHandoko Blog | Materi
Tutorial Belajar Blog | Kode Box for script

BACA JUGA -> HP Android RAM 2GB Termurah 2017

Domain .NET cuma Rp.0 !

Techno-Media | kesempatan kali ini, saya akan membahas tentang Domain..
Nama domain (bahasa Inggris: domain name) adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di jaringan komputer ataupun internet. (source google)

Nah, bagi para blogger biasanya domain blog nya memakai namablog.blogspot.co.id kan ya.. nah disini saya juga akan membagikan bagaimana caranya mendapatkan Domain .NET (1 TAHUN) dengan harga Rp. 0 ..
Cara ini adalah program dari salah satu Website penyedia Domain dan Hosting yaitu Exabytes Network .
Oke langsung saja ikuti cara dibawah ini ;

Sebelum nya, Program ini mempunyai Syarat yang berlaku agar permintaan domain mu di aktivasi oleh Billing..
Syarat Ikut Program

Facebook Page / Blog / e-Commerce Profile sudah aktif sebelum 1 January 2017

Mengisi informasi yang benar (Valid)

Nama Domain yang didaftarkan harus Berhubungan dengan Facebook Page/Blog/e-Commerce tersebut.

Contoh yang benar: Facebook Page: https://www.facebook.com/Toko-Jilbab-Bunda-Kartika mendaftarkan nama domain www.tokoJilbabKartika.net
Contoh yang salah: Facebook Page: https://www.facebook.com/Toko-Jilbab-Bunda-Kartika mendaftarkan nama domain www.tokoHandphone.net

1. Buka web Exabytes
   https://www.exabytes.co.id/grow
2. Sekarang Klik "Daftar Sekarang" , nanti anda akan di redirect ke halaman pendaftaran domain..
3. Saat sudah masuk ke halaman pendaftaran domain, silahkan anda ketik nama domain yang anda inginkan.. dan ingat, harus .NET ya.. 
4. PERLU DI INGAT! , nama domain yang didaftarkan harus sesuai dengan Syarat Pendaftaran Program Exabytes Grow. silahkan cek kembali Syaratnya di atas.. 
   
5. Selanjutnya klik Lanjutkan..
6. Lalu Masukkan URL Facebook/Blogspot kamu .. 
   
7. Pastikan di Ringkasan Pesanan Total harga nya Rp. 0... kalo bayar.. waduhh , bukan gratis itu hahaha... Klik Lanjutkan ..
8. Lalu jangan Centang apapun di halaman ini, langsung klik Lanjutkan saja...
   
9. Setelah itu kita akan masuk ke halaman Konfirmasi Pesanan , pastikan lagi Total Harga nya Rp. 0 ... Setelah itu Klik Bayar
10. Dan kita masukkan form form yang ada di Halaman Checkout .. Isi dengan lengkap ya..
    
11. Kemudian Klik Lanjutkan jika memang sudah semuanya di isi..
12. Dan pesanan pun Berhasil.. 
    
13. Selesai.. Tinggal tunggu 2-3 hari untuk di konfirmasi oleh Billing..

Nah.. cukup sekian postingan kali ini..

Lumayan kan dapet domain .NET gratis, kapan lagi coba dapet domain keren gratisan..

PERLU DI INGAT, DOMAIN INI HANYA AKTIF 1 TAHUN. 1 TAHUN BERIKUTNYA SILAHKAN BAYAR UNTUK PERPANJANG

Jangan lupa untuk share ke temen-temen kalian jika postingan ini bermanfaat.. ^^