ساخت صفحه “افتتاح به زودی”

ساخت صفحه “افتتاح به زودی”

در این اموزش ما به شما نحوه ساخت صفحه”افتتاح به زودی” را میدهیم که شما میتونید قبل از راه اندازی رسمی وبسایت خود از آن استفاده کنید و با دریافت و ذخیره کردن ایمیل کاربران افتتاح سایت را به انها اطلاع دهید.

برای مشاهده لینک وارد شود

خوب مثل همیشه کار را با نوشتن کد های HTML اغاز می کنیم.ما این صفحه را با کمترین کد ممکن خواهیم نوشت.

HTML

coming-soon.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX-ed Coming Soon Page with jQuery and PHP | 8np Demo</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/nivo-slider.css" />

</head>

<body>

<div id="page">

    <h1>Coming Soon</h1>

    <div id="slideshowContainer">
        <div id="slideshow">
            <img src="img/slides/slide1.jpg" width="454" height="169"
                   alt="Coming Soon: Our Awesome Web App">
            <img src="img/slides/slide2.jpg" width="454" height="169"
                   alt="Extensive Functionality">
            <img src="img/slides/slide3.jpg" width="454" height="169"
                   alt="Complete with an iPhone App">
        </div>
    </div>

    <h2>Subscribe</h2>

    <form method="post" action="">
    	<input type="text" id="email" name="email" value="<?php echo $msg?>" />
        <input type="submit" value="Submit" id="submitButton" />
    </form>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/script.js"></script>

</body>
</html>

ما در بالای کد استایل ها را وارد کردیم و در بخش پایانی نیز کتابخانه jQuery را وارد کردیم.

CSS

استایل هایی را که قرار است روی صفحه اعمال کنیم در داخل فایل styles.css مینویسیم.در زیر کدها را مشاهده می کنید

css/styles.css

#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;
}

برای اینکه ما بتوانیم ایمیل کاربران را دریافت کرده و ذخیره کنیم از کد ساده PHP استفاده خواهیم کرد.در زیر این کد را مشاهده می کنید

coming-soon.php

require "includes/connect.php";

$msg = '';

if($_POST['email']){

    // Requested with AJAX:
    $ajax = ($_SERVER['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest');

    try{
        if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
            throw new Exception('Invalid Email!');
        }

        $mysqli->query("INSERT INTO coming_soon_emails
                        SET email='".$mysqli->real_escape_string($_POST['email'])."'");

        if($mysqli->affected_rows != 1){
            throw new Exception('This email already exists in the database.');
        }

        if($ajax){
            die('{"status":1}');
        }

        $msg = "Thank you!";

    }
    catch (Exception $e){

        if($ajax){
            die(json_encode(array('error'=>$e->getMessage())));
        }

        $msg = $e->getMessage();
    }
}

jQuery

ما از پلاگین  Nivo Slider plugin استفاده کردیم که کار بسیار زیادی برای ما انجام می دهد

js/script.js

$(window).load(function() {

    // Creating the Nivo Slider on window load

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

$(document).ready(function(){

    // Binding event listeners for the form on document ready

    $('#email').defaultText('Your Email');

    // 'working' prevents multiple submissions
    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('Thank you!');

            working = false;
        },'json');

        return false;
    });
});

// A custom jQuery method for placeholder text:

$.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();
}

هنگام بارگذاری صفحه اسلایدر در داخل ایونت lwindow.load ایجاد میشود که ما میتوانیم تصاویر خود را داخل آن قرار دهیم.

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۲ دیدگاه ها

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


هشت + = 17

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>