Selamat Datang

Membuat Halaman “Coming Soon” Dengan Jquery, PHP, CSS3 dan HTML5

Hallo, pada tulisan kali ini kita akan membuat sebuah halaman “coming soon” dengan menggunakan Jquery, PHP, CSS3 dan HTML5.

Coming Soon

Coming Soon Screenshoot

Coming soon adalah halaman yang biasanya dimunculkan ketika sebuah website belum selesai dibuat, namun domain sudah aktif, halaman ini juga berfungsi untuk mengumpulkan calon pengunjung, karena biasanya halaman coming soon yang baik disertai dengan sebuah form yang memungkinkan user untuk memasukan alamat email untuk mendapatkan informasi ketika website sudah selesai dan siap dikunjungi.

Ingrediens

Layaknya memasak, kita tentu bahan-bahan agar tampilan tampil bagus:

Struktur HTML5

<section id="twd-container">
	<h1 class="head">Coming Soon</h1>
	<div id="count-down-container"></div>
	
	<script type="text/javascript">
	<!-- Script Javascript -->
	</script>
	
	
	<div id="twd-form">
		<h6>Get Notified About Our Launch</h6>
		<form id="twd-email-form">
		  <input id="user_email" type="email" class="input" value="" name="email" placeholder="Add your e-mail address" required="required" />
		  <button type="submit" class="button">Subscribe</button>
		</form>
	</div>
	
	<div id="success">Thank you!</div>
	
</section>

Disitu kita menggunakan Placeholder untuk memberi label pada field, dan required untuk melakukan validasi dengan html5.

Code CSS

Saatnya mempercantik HTML yang telah dibuat dengan CSS.

Judul Coming Soon

#twd-container{
	width:80%;
	margin:50px auto;
	height:300px;
	text-align:center;
}
#twd-container h1.head{
	font-size:50px;letter-spacing:3px;
	color:rgba(0,0,0,.2);
	text-shadow:1px 1px #fff;	
}

#count-down-container{
	padding:50px;
}

Bagian Sisa Waktu ( Hari | Jam | Menit | Waktu )

	.count_down{
		padding: 3px;
		font-size:50px;
		font-weight:bold;
		color:#222;
	}

	.count_down div{
		width:75px;
		height:50px;
		display:inline-block;
		background:rgba(255,255,255,.5);
		box-shadow:inset 0 0 5px 0px rgba(225,225,225,1);
		border:1px solid rgba(255,255,255,.8);
		padding:40px 20px 20px 20px;
		text-align:center;
		border-radius:50%;
		
	}
	.count_down span{
		color:rgba(0,0,0,.3);
		text-shadow:2px 3px #fff;
	}
	.count_down sup{
		color:rgba(0,0,0,.4);
		font-size:14px;
	}

Mempercantik Form Subscribe

#twd-form{
	padding-top:40px;
	text-align:center;	
}
#twd-form h6{
	margin:10px 0;
	color:rgba(0,0,0,.3);
	text-shadow:1px 1px #fff;	
}
.input {
	width:300px;
	height:34px;
	background:rgba(255,255,255,0.5);
	border:1px solid rgba(255,255,255,0.7);
	box-shadow:inset 0 0 5px 0px rgba(225,225,225,1);
	outline:none;
	margin-right:10px;
	font-size:15px;
	color:rgba(0,0,0,.5);
	padding-left:10px;
	border-radius:5px;
}
.button{
	width:100px;
	height:34px;
	line-height:20px;
	font-size:14px;
	font-weight:bold;
	border:none;
	box-shadow:0 0 5px -2px rgba(0,0,0,.5);
	background:rgba(100,138,208,.5);
	color:#fff;
	cursor:pointer;
	border-radius:3px;
}

Pesan yang muncul ketika seseorang telah memasukan email

#success{
	padding:6px;
	background:rgba(178,178,128,.3);
	border:1px solid rgba(178,178,128,.5);
	border-radius:5px;
	margin:0 auto;
	margin-top:20px;
	width:300px;
	display:none;
}

 

Javascript / Jquery

Disini kita membutuhkan script countdown.js yang kita dapatkan dari dinamic drive yang disisipkan di <Head>

Untuk menyimpan alamat email dengan ajax kita membutuhkan script seperti berikut ini yang kita simpan didalam file script.js

$(document).ready(function(){
	$(&quot;form#twd-email-form&quot;).submit(function() {
 
	var user_email = $('#user_email').attr('value');
 
		$.ajax({
			type: &quot;POST&quot;,
			url: &quot;save.php&quot;,
			data: &quot;user_email=&quot;+ user_email,
			success: function(){
				$(&quot;#twd-email-form&quot;).fadeOut();
				$(&quot;#success&quot;).fadeIn();
			}
		});
	return false;
	});
});

PHP

Script terakhir yaitu PHP, dengan PHP kita menyimpan ke dalam database, disini kita hanya membutuhkan sebuah tabel dengan nama subscribers, dan sebuah field dengan nama email.
Script ini kita simpan di file save.php.

&lt;?php
if(isset($_POST['user_email'])){

include('config.php');

$email = strip_tags($_POST['user_email']);

$sql = 'INSERT INTO subscribers (email) VALUES( &quot;'.$email.'&quot;)';
mysql_query($sql);

echo $email;
} else { echo '0'; }
?&gt;

Hasilnya adalah sebagai berikut ini.

Sekian tutorial kali ini, semoga apa yang kami share ini dapat bermanfaat juga untuk anda semua.

Jangan lupa follow Twitter @tut_web untuk mendapatkan update terbaru.

Salam Web Design Indonesia.

 





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

16 thoughts on “Membuat Halaman “Coming Soon” Dengan Jquery, PHP, CSS3 dan HTML5

  1. chrysand says:

    admin saya mau nanya dong font dengan format .svg .eot .woff
    itu dapetnya darimana ya? fungsi nya dari masing2 font itu apa ya? kalo misal nya kita gunakan file font biasa bisa ngga? hehehehehe

  2. Nice mas. Saran aja, daripada form subscribe-nya pakai PHP, lebih asik pakai layanan seperti Feedburner, MailChimp, dan sejenisnya, karena lebih useful dan praktis daripada hanya ngumpulin email dari pengunjung. Just my two cents. :)

    • :) thanks

      soal email itu pilihan aja sih, pake apapun bisa :) tapi kalau bisa bikin email newsletter sendiri ngapain jg pake feedburner. kalau feedburner tiba2 mati (kayak google reader) email yang sudah terkumpul ilang donk :)

  3. Arfi Rachman says:

    Nih cara untuk costum time countdownya gimana yah :D

  4. Aghushe says:

    gan koe saya kosong yach waktunya …

    nie web sya : http://hackingforlive.org/

    plz blz ?

  5. hadi says:

    sangat bermanfaat gan, terima kasih

  6. Name says:

    gan, saya udah coba subscribe emailnya kok ga masuk ke database ya? caranya gmn?

  7. Yogi says:

    admin mau tanya kalau countdownnya itu koneksi sama database gimana yah ?

  8. Nur Rohman says:

    min, kalo setelah countdown selesai mau di redirect ke page lain caranya gimana? :)

  9. Luthfan says:

    Thanks banget ilmunya mastah

  10. budi aman prasetyo says:

    gan, saya kalua countdown untuk ujian online ada gk,,
    jika di refresh waktu tidak mengulang,,
    tpi jika di sumbit waktu akan megulang dari awal.

    mohon infonya gan,
    kalua yang di atas, agar tampilya menit dan detik gmana?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development