Połącz się z nami

Internet Maker

Stylowa strona „Coming Soon” przy użyciu jQuery

Opublikowane

dnia

Kiedy opracowujemy nową stronę internetową, prawdopodobnie pierwszą rzeczą, którą robimy, jest kupno nowej domeny. Kolejnym krokiem natomiast jest ustawienie strony informującej, że niebawem coś się tu pojawi. Swoją drogą pamiętacie jeszcze te place budowy w formie animacji gif? Nie należy ich używać!.

Niewątpliwie dobrym pomysłem jest zainwestowanie trochę czasu w rozwój takiej strony. W końcu jest to pierwsze spotkanie gości z Tobą i z Twoim produktem. Możesz nawet użyć jej jako kanał marketingowy, w którym ludzie będą się zapisywać do newslettera. Tym samym będą mogli otrzymać maila z informacją, że Twoja strona już wystartowała.

  

Dlatego też dziś stworzymy stylową stronę „Coming Soon” przy użyciu PHP, MySQL oraz jQuery. Będzie ona również pozwalała na zbieranie emaili Twoich użytkowników i przechowywanie ich w prostej tabeli bazy danych. Do pokazu slajdów skorzystamy z wtyczki Nivo Slider (http://nivo.dev7studios.com/).

HTML

Najpierw spójrzmy na nasz kod HTML. Strona jest zaprojektowana z myślą o tym, aby nie ważyła zbyt wiele. Dlatego też będzie posiadać minimalną ilość kodu.





Strona "Coming Soon" przy użyciu PHP, 
MySQL oraz jQuery | MagazynT3.pl demo








Już wkrótce startujemy

Już wkrótce: Nasza niezwykła Aplikacja Webowa Duża funkcjonalność Zgodna z iPhone 4S

Subskrybuj

W sekcji head załączyliśmy arkusze stylów – nasz własny styles.css oraz nivo-slider.css, z którego korzysta wtyczka Nivo Slider. Można oba te wywołania połączyć w jedno, jednakże w tym przypadku byłaby to przesada.

W sekcji body zdefiniowaliśmy główne znaczniki – dwa podstawowe nagłówki, formularz do wprowadzania emaili oraz blok, który wyświetla trzy grafiki.

Na dole załączamy trzy pliki JavaScript. Pierwszy importuje bibliotekę jQuery 1.4.3. Drugim jest JavaScript naszej wtyczki Nivo Slider. Na końcu natomiast załączamy plik script.js, który jest bardziej szczegółowo omówiony w późniejszej części tego artykułu.

CSS

Style CSS, które działają na naszej stronie znajdują się w pliku styles.css. Aby ich modyfikacja oraz integracja w istniejącym designie była łatwiejsza, niektóre reguły są oznaczone selektorem #page. Dzięki temu efekt działania tych reguł został ograniczony tylko do określonych elementów.

#page{
	width:330px;
	margin:70px auto 100px;
}

#slideshow{
	height:169px;
	overflow:hidden;
	width:454px;
}

#slideshowContainer{
	padding:10px;
	background-color:#181819;
	margin:30px 0 50px -72px;
	width:454px;
	border:1px solid #1f1f20;
}

#page h1,
#page h2{
	text-indent:-9999px;
	overflow:hidden;
	height:105px;
	background:url('../img/coming_soon.png') no-repeat;
}

#page h2{
	height:76px;
	background:url('../img/get_notified.png') no-repeat;
	margin-bottom:20px;
}

#page form{
	background-color:#181819;
	display:block;
	height:31px;
	padding:10px;
	position:relative;
	width:323px;
	margin-left:-7px;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}

#email{
	background:url('../img/submit_form.png') no-repeat;
	border:none;
	color:#888888;
	height:31px;
	left:10px;
	line-height:31px;
	padding-left:8px;
	position:absolute;
	text-shadow:1px 1px 0 #FFFFFF;
	top:10px;
	width:215px;
	outline:none;
}

#submitButton{
	background:url('../img/submit_form.png') no-repeat right top;
	border:none;
	cursor:pointer;
	height:31px;
	left:236px;
	line-height:31px;
	position:absolute;
	text-indent:-99999px;
	text-transform:uppercase;
	top:10px;
	width:96px;
}

#submitButton:hover{
	background-position:right bottom;
}

Wszystko jest chyba tutaj dość jasne. Rzeczą, na którą warto zwrócić uwagę jest na pewno ujemna wartość w text-indent. Jest to szeroko stosowana technika do jednoczesnego wyświetlania tła oraz ukrywania zawartości elementu. Istotne jest tutaj również to, że w elemencie #submitButton należy ustawić atrybut text-transform na uppercase. Inaczej tekst przycisku może nie wyświetlać się poprawnie w starszych wersjach IE.

PHP

Aby uczynić tę stronę tak prostą, jak to tylko możliwe, kod PHP, który obsługuje przesyłanie formularza, znajduje się w górnej części dokumentu.

require "includes/connect.php";

$msg = '';

if($_POST['email']){
	
	
	$ajax = ($_SERVER['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest');
	
	try{
	if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
	throw new Exception('Niepoprawny Email!');
		}

$mysqli->query("INSERT INTO coming_soon_emails
SET email='".$mysqli->real_escape_string($_POST['email'])."'");
		
		if($mysqli->affected_rows != 1){
throw new Exception('Ten email istnieje już w bazie.');
		}
		
		if($ajax){
			die('{"status":1}');
		}
		
		$msg = "Dziękuję!";
		
	}
	catch (Exception $e){
		
		if($ajax){
die(json_encode(array('error'=>$e->getMessage())));
		}
		
		$msg = $e->getMessage();		
	}
}

Jeśli formularz został złożony za pośrednictwem AJAX, wyświetlamy odpowiedzi jako JSON. Natomiast w przeciwnym razie przypisujemy je do zmiennej $msg, która jest później wyświetlana na stronie.

Jako, że w naszym przykładzie używamy MySQL, po wprowadzaniu adresu email do tabeli coming_soon_emails musimy sprawdzić poprawność wprowadzonego rekordu. Kolumna z emailami jest ustawiona jako klucz główny tabeli, więc wstawienie dwóch identycznych adresów nie jest możliwe.

Notka do instalacji: Jeśli będziesz chciał ustawić taką stronę „Coming Soon” na swoim serwerze, musisz najpierw utworzyć tabelę coming_soon_emails poprzez uruchomienie pliku table.sql (znajduje się on w pliku zip) w phpMyAdmin. Oczywiście musisz również pamiętać o tym, aby w pliku includes/connect.php dodać niezbędne dane dotyczące Twojego połączenia z MySQL.

The jQuery

Jako, że używamy wtyczki Nivo Slider (http://nivo.dev7studios.com/), duża część pracy zostanie wykonana za nas. Dzięki temu możemy zwrócić naszą uwagę na formularz oraz pracę z AJAX?em.

$(window).load(function() {
	
	
	$('#slideshow').nivoSlider({
		pauseTime:5000,
		directionNav:false,
		controlNav:false	
	});
});

$(document).ready(function(){



	$('#email').defaultText('Twój Email');


	var working = false;
	
	$('#page form').submit(function(){
		
		if(working){
			return false;
		}
		working = true;
		
		$.post("./coming-soon.php",{email:$('#email').val()},function(r){
			if(r.error){
				$('#email').val(r.error);
			}
			else $('#email').val('Dziękuję!');
			
			working = false;
		},'json');
		
		return false;
	});
});



$.fn.defaultText = function(value){
	
	var element = this.eq(0);
	element.data('defaultText',value);
	
	element.focus(function(){
		if(element.val() == value){
			element.val('').removeClass('defaultText');
		}
	}).blur(function(){
		if(element.val() == '' || element.val() == value){
			element.addClass('defaultText').val(value);
		}
	});
	
	return element.blur();
}

Zauważ, że pokaz zdjęć Nivo Slider jest tworzony w window.load. To już jest zrobione, więc możemy być pewni, że wszystkie zdjęcia będą załadowane i będą mogły być wyświetlane. Chociaż jest to pierwszy blok kodu w tym pliku, to w rzeczywistości jest on wykonywany jako ostatni.

W bloku document.ready znajduje się detektor zdarzeń dla zatwierdzania formularza. W zależności od tego, czy nasze zapytanie się powiedzie czy nie, w polu wejściowym formularza wyświetlona zostanie inna informacja.

Tym sposobem nasza strona „Coming Soon” jest gotowa.

Student Informatyki i Ekonometrii na Politechnice Gdańskiej, zapalony fotograf i multiinstrumentalista.

Kontynuuj czytanie
Reklama
Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Internet Maker

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

Opublikowane

dnia

przez

Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak szybko i łatwo stworzyć stronę mobilną

Opublikowane

dnia

W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

(więcej…)

Kontynuuj czytanie

Internet Maker

Strona na WordPressie? Grunt to dobry hosting

Opublikowane

dnia

WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak zabezpieczyć swoje zdjęcia w chmurze

Opublikowane

dnia

Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

Kontynuuj czytanie

Internet Maker

Jak usunąć historię swojej aktywności z Facebooka?

Opublikowane

dnia

Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

Kontynuuj czytanie
Reklama

Popularne